.srOnly {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.questionHeading {
  font-family: var(--font-serif);
 
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  /* letter-spacing: 1.15px; */
  font-weight: 600;
  text-align: center;
  color: var(--color-text-heading);
  margin: 0 0 12px
}

.questionDesc {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  text-align: center;
  color: var(--color-text-body);
  margin: 0 0 12px
}

.questionDescSm {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  text-align: center;
  color: var(--color-text-secondary);
  margin: 8px 0 0
}

.headingTxt {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  color: var(--color-text-heading);
  margin: 0 0 12px
}

.borderedDescription {
  max-width: 750px;
  width: 100%;
  margin: 0px auto 0px;
  background: white;
  border: 2px dashed var(--color-orange-hover);
  border-radius: 16px;
  padding: 20px 30px
}

.borderedDescription .heading {
  font-family: 'DM Serif Display';
  font-weight: 400;
  font-size: var(--text-xl);
  color: var(--color-text-heading);
  text-align: left;
  line-height: 170%
}

.borderedDescription p {
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 170%;
  text-align: left;
  color: var(--color-text-body);
  margin-bottom: 12px
}

.borderedDescription ul {
  list-style: none;
  margin-bottom: 30px
}

.borderedDescription ul li {
  position: relative;
  font-size: var(--text-md);
  font-weight: 500;
  line-height: 24px;
  text-align: left;
  color: var(--color-text-body);
  margin-bottom: 15px;
  padding-left: 25px
}

.borderedDescription ul li::before {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-orange);
  left: 4px;
  top: 10px
}

.formBtnWrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 10px
}

.formBtnWrapper .btnPrimary {
  background: var(--color-orange);
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  max-width: max-content;
  padding: 14px 36px;
  outline: none;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-cta);
  transition: transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s cubic-bezier(.4,0,.2,1), background var(--transition-fast);
}

.formBtnWrapper .btnPrimary:hover {
  background: var(--color-orange-hover);
  box-shadow: var(--shadow-cta-hover);
  transform: translateY(-2px);
}

.formBtnWrapper .btnPrimary .btnTxt {
  font-weight: 700;
  font-style: Bold;
  font-size: var(--text-md);
  line-height: 100%;
  color: var(--color-text-inverse)
}

.formBtnWrapper .btnPrimary .arrowRight {
  width: 16px;
  height: 16px;
  margin-top: -1px;
  transition: transform 0.3s ease
}

.formBtnWrapper .btnPrimary:hover .arrowRight {
  transform: translateX(4px)
}

.formBtnWrapper .btnPrimary.loaderBtn .loaderImg {
  width: 76px;
  height: 31px;
  margin-top: -5px
}
.btnPrimary.loaderBtn:hover{
background: var(--color-orange);

}

.formBtnWrapper .btnPrimary.loaderBtn {
  cursor: not-allowed
}

.formBtnWrapper .skipBtn {
  background: transparent;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 0px;
  outline: none;
  cursor: pointer;
  max-width: max-content;
  width: 100%;
  height: auto;
  margin: 5px auto 0px
}

.formBtnWrapper .skipBtn .btnTxt {
  /* font-weight: 700;
  font-style: Bold; */
  font-size: var(--text-base);
  line-height: 100%;
  color: var(--color-text-body);
}

.formBtnWrapper .skipBtn .arrowRight {
  width: 18px;
  height: 18px;
  margin-top: -2px;
  transition: transform 0.3s ease
}

.formBtnWrapper .skipBtn:hover {
  background: none;
  border: none
}

.formBtnWrapper .skipBtn:hover .btnTxt {
  color: var(--color-orange);
  text-decoration: underline
}

.formBtnWrapper .skipBtn:hover .arrowRight {
  transform: translateX(5px)
}

.inputGroupAssessmentForm input {
  border: none;
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: 100%;
  color: var(--color-text-heading);
  padding: 20px 15px;
  width: 100%;
  height: 100%;
  background: transparent;
  border-radius: 8px
}

.inputGroupAssessmentForm {
  background: var(--color-bg-white);
  border: 1px solid var(--color-orange);
  border-radius: 8px;
  width: 100%
}

.inputGroupAssessmentForm:hover {
  box-shadow: 0px 3px 3px 0px #F9731626
}

.inputGroupAssessmentForm:focus-within {
  box-shadow: 0px 3px 3px 0px #F9731626;
  background: #FFFBF9
}

.inputGroupAssessmentForm input::placeholder {
  color: var(--color-text-secondary);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: 100%
}

.inputGroupAssessmentForm:has(.invalid) {
  border: 2px solid #E20707;
  animation: shake 0.6s ease-in-out both
}

@keyframes shake {

  0%,
  100% {
    transform: translateX(0)
  }

  10%,
  50%,
  90% {
    transform: translateX(-5px)
  }

  20%,
  60% {
    transform: translateX(5px)
  }
}

.select2-container {
  width: 100% !important
}

.selection .select2-selection--single {
  min-height: 61px;
  padding: 19px 15px 23px;
  border: 1px solid transparent;
  border-radius: 8px
}

.relative {
  position: relative
}

/* ─────────────────────────────────────────────────────────────────────────
   Shared form card (reference look): white rounded card wrapping the fields,
   a small navy label above each field, calm light borders that turn orange
   only on focus. Used by S2 state, S3 personal info, S4 pet details.
   Scoped to .formCardWrap so other screens keep their existing field styling.
   ───────────────────────────────────────────────────────────────────────── */
.formCardWrap {
  background: var(--color-bg-white);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 24px;
  /* override the wrappers' center alignment so fields fill the card width */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 16px
}

.formFieldRow {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%
}

.formFieldLabel {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  letter-spacing: 0.3px;
  color: var(--color-text-heading);
  text-align: left
}

/* fields inside the card: calm light border, not the loud orange-by-default */
.formCardWrap .inputGroupAssessmentForm {
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md)
}

.formCardWrap .inputGroupAssessmentForm:hover {
  border-color: var(--color-text-secondary, #8a8fa8);
  box-shadow: none
}

.formCardWrap .inputGroupAssessmentForm:focus-within {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(255, 91, 46, 0.12);
  background: var(--color-bg-white)
}

.formCardWrap .inputGroupAssessmentForm input {
  padding: 14px 15px;
  font-size: var(--text-md)
}

.formCardWrap .inputGroupAssessmentForm input::placeholder {
  font-size: var(--text-md);
  color: var(--color-text-secondary, #9aa0b5)
}

/* select2 single boxes inside the card: shorter, lighter, match input height */
.formCardWrap .selection .select2-selection--single {
  min-height: 52px;
  padding: 15px 15px 17px
}

/* keep the disabled (locked) state readable */
.formCardWrap .select2-container--disabled .select2-selection--single {
  background: var(--color-bg-warm);
  cursor: not-allowed
}

select#petTypeSelect:disabled+.select2-container:after {
  position: absolute;
  content: '';
  cursor: no-drop;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%
}

@media (max-width:575px) {
  .borderedDescription ul {
    padding-top: 8px;
    margin-bottom: 0
  }

  .borderedDescription ul li:last-child {
    margin-bottom: 0
  }

  .questionDesc {
    font-size: var(--text-base)
  }

  .inputGroupAssessmentForm input {
    font-size: var(--text-md)
  }

  .createAccountWrapper .questionDesc:nth-of-type(2) {
    font-size: var(--text-base)
  }

  .evaluationAuthSection .questionDesc:nth-of-type(3) {
    margin-bottom: 56px
  }

  .inputGroupAssessmentForm input::placeholder {
    font-size: var(--text-md)
  }

  .evaluationAuthSection .questionDesc {
    font-size: var(--text-base);
    margin-bottom: 56px
  }

  .formBtnWrapper .btnPrimary .btnTxt {
    font-size: var(--text-md)
  }
    .questionHeading{
      margin: 12px auto 30px;
    }
}

/* ============================================================
   Basic flow — warm background + ambient paw scatter
   Applies to every page that loads commonStyles
   ============================================================ */
body {
  --paw-orange: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='%23FF5B2E'%3E%3Cellipse cx='7' cy='9' rx='3.2' ry='2.8'/%3E%3Cellipse cx='3' cy='5' rx='1.3' ry='1.7'/%3E%3Cellipse cx='8.7' cy='3' rx='1.3' ry='1.7'/%3E%3Cellipse cx='5.8' cy='3' rx='1.3' ry='1.7'/%3E%3Cellipse cx='11' cy='5' rx='1.1' ry='1.4'/%3E%3C/svg%3E");
  background: var(--color-bg-warm);
  position: relative;
}

/* Paw scatter — fixed in viewport so it follows the user through every step */
body::before,
body::after {
  content: '';
  position: fixed;
  background-image: var(--paw-orange);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  z-index: 0;
}

body::before {
  top: 6%;
  left: 2%;
  width: 56px;
  height: 56px;
  transform: rotate(-18deg);
  opacity: 0.08;
}

body::after {
  bottom: 8%;
  right: 3%;
  width: 48px;
  height: 48px;
  transform: rotate(14deg);
  opacity: 0.08;
}

/* Additional paws via a stand-alone scatter container that pages can opt-into.
   For now the body::before/::after gives 2 paws; add more as needed by
   appending <div class="basic-bg-paws">...</div> at the page level. */
.basic-bg-paws {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.basic-bg-paws .paw {
  position: absolute;
  display: block;
  background-image: var(--paw-orange);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.basic-bg-paws .paw-a { top: 26%;  left: 4%;   width: 38px; height: 38px; transform: rotate(12deg);  opacity: 0.08; }
.basic-bg-paws .paw-b { top: 58%;  left: 1%;   width: 32px; height: 32px; transform: rotate(-8deg);  opacity: 0.07; }
.basic-bg-paws .paw-c { top: 36%;  right: 2%;  width: 42px; height: 42px; transform: rotate(-20deg); opacity: 0.08; }
.basic-bg-paws .paw-d { bottom: 32%; right: 5%; width: 30px; height: 30px; transform: rotate(8deg);  opacity: 0.07; }

/* Keep content above ambient paws */
section { position: relative; z-index: 1; }

/* Header (and its dashboard dropdown) must outrank the content sections
   that follow it in the DOM, otherwise same-z-index source order makes
   those sections paint over the dropdown and steal its clicks. */
header.headerEvaluation { position: relative; z-index: 2; }

@media (max-width: 768px) {
  body::before { width: 36px; height: 36px; top: 4%; left: 2%; }
  body::after  { width: 30px; height: 30px; bottom: 4%; right: 2%; }
  .basic-bg-paws .paw { transform: scale(0.7) !important; }
}