body {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  background-color: #E9EDED;
  margin: 0;
  padding: 0;
}

.custom-container {
  max-width: 700px;
  margin: 60px auto;
  background: #fff;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0,0,0,0.05);
}

/* BACKGROUNDS */
.sbg-slate {
    background-color:#485665;
}

.sbg-green {
    background-color:#95a3a4;
}

.sbg-gray {
    background-color:#E9EDED;
}

.sbg-light {
    background-color:#F5F7F3;
}

.accordion-button:not(.collapsed),
.accordion-button:focus {
  outline: none;
  border-color: transparent;
  box-shadow: none;
  background-color: #E9EDED;
}
.accordion-button::after {
  width: 11px;
  height: 11px;
  border-radius: 100%;
  background-color: #f05d5e;
  background-image: none !important;
}
.accordion-button.collapsed::after {
  background-color: var(--bs-gray-300);
}

/* Center the radio and label in the col-3 */
.qform-check-inline {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-right: 0 !important; /* Remove Bootstrap default right margin */
    padding-left: 0 !important;  /* Remove Bootstrap default left padding */
}

.qform-check-input {
    margin-left: 0 !important;   /* Reset margin for perfect centering */
    float: none !important;      /* Undo Bootstrap float */
}

.qform-check-label {
    padding-left: 0 !important;  /* Ensure label doesn't push to the right */
    text-align: center;
    width: 100%;
}

.likert-row {
    transition: background-color 0.15s ease;
}

.likert-row:hover {
    background-color: rgba(0, 123, 255, 0.05) !important; /* Very light blue tint */
}

/* Highlight the entire card when the radio is checked */
.pdss-group .list-group-item:has(input:checked) {
    background-color: #e7f1ff;
    border-color: #0d6efd;
    z-index: 2;
}

.pdss-group .form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

/* TEXTS AND LINKS */
.tagline {
  font-style: italic;
  font-weight: 300;
  margin-bottom: 20px;
}

a {
    color:#f05d5e;
    text-decoration:none;
}
a:hover {
    color:#f05d5e;
    text-decoration:underline;
}
.stext-red {
    color:#f05d5e;
}
.stext-snow {
    color:#f8f8f8;
}

.stitle {
font-family: "Lora", serif;
  font-weight: 400;
  font-style: normal;
}

.slink-light {
    color:#b7d1da;
}

.slink-light:hover {
    color:#f8f8f8;
}

/* BUTTONS */
.sbtn-lg {
  position: relative;
  padding: 15px 30px;
  font-size: 18px;
  color: #f05d5e;
  font-weight: bold;
  background-color: #fff;
  border: none; /* REMOVE real border */
  border-radius: 999px;
  overflow: hidden;
  cursor: pointer;
  z-index: 1;
  transition: color 0.5s ease-out;
}

.sbtn-lg::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background-color: #f05d5e;
  transition: height 0.2s ease-out;
  z-index: -1;
  text-decoration:none;
}

.sbtn-lg:hover::before {
  height: 100%;
  text-decoration:none;
}

.sbtn-lg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #f05d5e; /* NEW border */
  border-radius: 999px;
  pointer-events: none; /* So it doesn't block clicks */
  z-index: 2; /* Stays above everything else */
  text-decoration:none;
}

.sbtn-lg:hover {
  color: #fff;
  text-decoration:none;
}

/* SPECIFIC ITEMS */
iframe[src*="google.com/forms"] {
  width: 100%;
  padding:0;
}

/* ANIMATIONS */
.wave {
  animation-name: wave-animation;  /* Refers to the name of your @keyframes element below */
  animation-duration: 2.5s;        /* Change to speed up or slow down */
  animation-iteration-count: infinite;  /* Never stop waving :) */
  transform-origin: 70% 70%;       /* Pivot around the bottom-left palm */
  display: inline-block;
}

@keyframes wave-animation {
    0% { transform: rotate( 0.0deg) }
   10% { transform: rotate(14.0deg) }  /* The following five values can be played with to make the waving more or less extreme */
   20% { transform: rotate(-8.0deg) }
   30% { transform: rotate(14.0deg) }
   40% { transform: rotate(-4.0deg) }
   50% { transform: rotate(10.0deg) }
   60% { transform: rotate( 0.0deg) }  /* Reset for the last half to pause */
  100% { transform: rotate( 0.0deg) }
}

/*
.yeseva-one-regular {
  font-family: "Yeseva One", serif;
  font-weight: 400;
  font-style: normal;
}
// <weight>: Use a value from 200 to 800
// <uniquifier>: Use a unique and descriptive class name

.karla-<uniquifier> {
  font-family: "Karla", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

400-700
.lora-<uniquifier> {
  font-family: "Lora", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

100-900
.roboto-<uniquifier> {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
*/