/* ==========================================================================
   /basic REDESIGN — bf-* classes
   Loaded only by assessment-page/basic.php, after the legacy sheets.
   - Visual reskin only: every id / JS-hook class in the markup is untouched,
     and sections are still shown/hidden by jQuery's inline display.
   - Legacy hook classes (.serviceCard, .btnPrimary, …) are restyled through
     their section id or .bf-page, so these rules beat the old sheets without
     !important and never reach /results or /review-information (which share
     commonStyles.css and basic.css).
   - Header, stepper and progress bar (header-evaluation/*) are NOT restyled.
   ========================================================================== */

:root {
  --bf-ease: cubic-bezier(.4, 0, .2, 1);
  --bf-link: #C93A12;               /* orange text link, AA on white */
  --bf-ring: 0 0 0 4px rgba(255, 91, 46, .14);
  --bf-card-shadow: 0 20px 50px -40px rgba(14, 20, 95, .4);
}

/* ── shared: form card shell ─────────────────────────────────────────── */
.bf-flow {
  max-width: 760px;
  margin: 32px auto 56px;
  padding: 36px;
  background: var(--color-bg-white);
  border: 1.5px solid var(--color-line);
  border-radius: 24px;
  box-shadow: var(--bf-card-shadow);
}

.bf-page .bf-h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(26px, 3.2vw, 34px);
  line-height: 1.2;
  color: var(--color-text-heading);
  text-align: left;
  margin: 0 0 10px;
}

.bf-page .bf-lead {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-text-body);
  text-align: left;
  max-width: 640px;
  margin: 0 0 24px;
}

/* ── shared: orange icon plate (same as the homepage .rd-ico--sm) ───── */
.bf-ico {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--color-orange);
  color: var(--color-text-inverse);
  box-shadow: 0 6px 14px -7px rgba(255, 91, 46, .6);
}

/* ic-* symbols carry their own fill/stroke attributes (ic-psd is a filled glyph) */
.bf-ico svg {
  width: 22px;
  height: 22px;
}

/* ── shared: radio dot (top-right of an option card) ────────────────── */
.bf-rd {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--color-line-strong);
  background: var(--color-bg-white);
  transition: border-color .25s;
}

.bf-rd::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--color-orange);
  transform: scale(0);
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}

/* ── shared: button row + primary pill ──────────────────────────────── */
.bf-page .formBtnWrapper.bf-nav {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 14px 22px;
  margin: 28px 0 0;
}

.bf-page .formBtnWrapper .btnPrimary {
  min-height: 52px;
  max-width: none;
  padding: 16px 28px;
  gap: 10px;
}

.bf-page .formBtnWrapper .btnPrimary .btnTxt {
  font-size: 16px;
  line-height: 1;
}

.bf-page .formBtnWrapper .skipBtn {
  margin: 0;
}

.bf-page .formBtnWrapper .skipBtn .btnTxt {
  font-weight: 700;
  font-size: 15px;
  color: var(--bf-link);
}

.bf-page .formBtnWrapper .questionDesc {
  margin: 0;
  font-size: 15px;
  text-align: left;
  color: var(--color-text-body);
}

.bf-page .formBtnWrapper .questionDesc a {
  font-weight: 700;
  color: var(--bf-link);
}

/* ── shared: button polish, same as the homepage .rd-btn / navbar CTA ──
   glare sweep on hover, cursor spotlight, magnetic pull, paw burst on press.
   Driven by js/basic-fx.js (it skips disabled and loading buttons). */
.bf-page .formBtnWrapper .btnPrimary,
.bf-btn {
  --bx: 50%;
  --by: 50%;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* spotlight that follows the cursor (--bx/--by set by JS) */
.bf-page .formBtnWrapper .btnPrimary:not(.loaderBtn)::before,
.bf-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: radial-gradient(140px circle at var(--bx) var(--by), rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 60%);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}

.bf-btn--outline::before {
  background: radial-gradient(140px circle at var(--bx) var(--by), rgba(255, 91, 46, .16), rgba(255, 91, 46, 0) 60%);
}

.bf-page .formBtnWrapper .btnPrimary:not(.loaderBtn):not(:disabled):hover::before,
.bf-btn:hover::before {
  opacity: 1;
}

/* glare: one diagonal sweep each time the pointer enters (.glare-run) */
.bf-page .formBtnWrapper .btnPrimary:not(.loaderBtn)::after,
.bf-btn::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -60%;
  z-index: 2;
  width: 38%;
  height: 220%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .18) 30%, rgba(255, 255, 255, .85) 50%, rgba(255, 255, 255, .18) 70%, rgba(255, 255, 255, 0) 100%);
  opacity: 0;
  pointer-events: none;
}

.bf-btn--outline::after {
  background: linear-gradient(100deg, rgba(255, 91, 46, 0) 0%, rgba(255, 91, 46, .10) 30%, rgba(255, 91, 46, .32) 50%, rgba(255, 91, 46, .10) 70%, rgba(255, 91, 46, 0) 100%);
}

.bf-page .glare-run::after {
  animation: bf-glare .9s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes bf-glare {
  0%   { opacity: 0; transform: translateX(0) skewX(-18deg); }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(520%) skewX(-18deg); }
}

/* magnetic pull: JS writes an inline translate; this keeps it snappy */
.bf-page .formBtnWrapper .btnPrimary.mag,
.bf-btn.mag {
  transition: transform .18s ease-out, background .2s, box-shadow .2s;
}

.bf-page .formBtnWrapper .btnPrimary:not(:disabled):active,
.bf-btn:active {
  transform: translateY(0) scale(.98);
}

/* paw prints that burst out of a pressed button (appended to <body>;
   --paw-orange is defined on body in commonStyles.css) */
.bf-paw-burst {
  position: fixed;
  z-index: 2000;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  background: var(--paw-orange) center / contain no-repeat;
  pointer-events: none;
  animation: bf-burst .75s cubic-bezier(.2, .7, .3, 1) forwards;
}

@keyframes bf-burst {
  0%   { opacity: 1; transform: translate(0, 0) rotate(0) scale(.6); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1.1); }
}

/* click ripple ("wave") on the service cards, like the homepage tiles */
.bf-ripple {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255, 91, 46, .18);
  pointer-events: none;
  animation: bf-ripple .6s ease-out forwards;
}

@keyframes bf-ripple {
  to { transform: scale(4); opacity: 0; }
}

/* ── shared: loading dots inside .loaderBtn (replaces the GIF) ──────── */
.bf-dots {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 20px;
}

.bf-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-bg-white);
  animation: bf-dot 1s var(--bf-ease) infinite;
}

.bf-dots i:nth-child(2) { animation-delay: .15s; }
.bf-dots i:nth-child(3) { animation-delay: .3s; }

@keyframes bf-dot {
  0%, 80%, 100% { transform: scale(.55); }
  40%           { transform: scale(1); }
}

/* the dots button keeps the width of the button it replaces */
.bf-page .formBtnWrapper .btnPrimary.loaderBtn {
  min-width: 140px;
}

/* undo the legacy 76×31 GIF sizing on .loaderImg */
.bf-page .formBtnWrapper .btnPrimary.loaderBtn .loaderImg {
  width: auto;
  height: 20px;
  margin: 0;
}

/* ── shared: field + label ───────────────────────────────────────────── */
.bf-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bf-page .bf-label {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-heading);
  text-align: left;
}

/* ── shared: icon plate, large (screen hero icon) ───────────────────── */
.bf-ico--lg {
  width: 64px;
  height: 64px;
  margin-bottom: 14px;
}

.bf-ico--lg svg {
  width: 30px;
  height: 30px;
}

/* ── shared: reassurance strip ──────────────────────────────────────── */
.bf-assure {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 20px;
  padding: 14px 16px;
  background: var(--color-bg-warm);
  border: 1.5px solid var(--color-line);
  border-radius: 14px;
}

.bf-assure svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-orange);
}

.bf-page .bf-assure p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--color-text-body);
  text-align: left;
}

/* ── shared: green-tick list ─────────────────────────────────────────── */
.bf-ticks {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 0 0 6px;
  padding: 0;
}

.bf-ticks li {
  position: relative;
  padding-left: 30px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text-body);
  text-align: left;
}

.bf-ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #E9F7EF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314753F' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.bf-ticks strong {
  color: var(--color-text-heading);
}

/* ── shared: orange-wash note box ───────────────────────────────────── */
.bf-note {
  margin: 18px 0 0;
  padding: 14px 16px;
  background: var(--color-orange-wash);
  border: 1.5px solid var(--color-orange-line);
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text-body);
  text-align: left;
}

.bf-note strong {
  color: var(--color-text-heading);
}

/* ── shared: checkbox row ───────────────────────────────────────────── */
.bf-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 18px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--color-text-body);
  text-align: left;
  cursor: pointer;
}

.bf-check input {
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  flex-shrink: 0;
  accent-color: var(--color-orange);
  cursor: pointer;
}

.bf-check strong {
  color: var(--color-text-heading);
}

/* ── shared: search box with a leading icon (.bf-combo) ─────────────── */
.bf-page .bf-combo {
  position: relative;
}

.bf-combo-ico {
  position: absolute;
  left: 16px;
  top: 50%;
  z-index: 1;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--color-text-secondary);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.bf-page .bf-search input {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px 14px 46px;
  background: var(--color-bg-white);
  border: 1.5px solid var(--color-line-strong);
  border-radius: 14px;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--color-text-heading);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}

.bf-page .bf-search input::placeholder {
  color: var(--color-text-secondary);
}

.bf-page .bf-search input:hover {
  border-color: var(--color-text-secondary);
}

.bf-page .bf-search input:focus {
  border-color: var(--color-orange);
  box-shadow: var(--bf-ring);
}

/* tick replaces the magnifier once a state is locked in */
.bf-search .bf-ico-ok,
.bf-search.is-locked .bf-ico-find {
  display: none;
}

.bf-search.is-locked .bf-ico-ok {
  display: block;
  stroke: #14753F;
  stroke-width: 3;
}

/* locked: the chosen state reads as the answer, "Change" reopens the grid */
.bf-page .bf-search.is-locked input {
  padding-right: 96px;
  background: var(--color-orange-wash);
  border-color: var(--color-orange);
  font-weight: 700;
  color: var(--color-text-heading);
  cursor: pointer;
}

.bf-search-change {
  display: none;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  padding: 8px 10px;
  background: none;
  border: 0;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--bf-link);
  cursor: pointer;
}

.bf-search-change:hover {
  text-decoration: underline;
}

.bf-search.is-locked .bf-search-change {
  display: block;
}

/* ── state grid (template .slist), built by js/state-grid.js ── */
.bf-slist {
  position: relative; /* offset parent for scroll-to-selected */
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-content: start;
  gap: 4px;
  max-height: 260px;
  margin: 8px 0 0;
  padding: 6px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1.5px solid var(--color-line-strong);
  border-radius: 14px;
}

/* hidden once a state is locked in (the grid sets display, so restate it) */
.bf-slist[hidden] {
  display: none;
}

.bf-slist li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--color-text-heading);
  cursor: pointer;
  transition: background .15s;
}

.bf-slist li:hover,
.bf-slist li:focus-visible {
  background: var(--color-bg-warm);
  outline: none;
}

.bf-slist li:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-orange);
}

.bf-slist li[aria-selected="true"] {
  background: var(--color-navy);
  color: var(--color-text-inverse);
}

/* "30-day" tag on the five 30-day-rule states */
.bf-slist li small {
  font-size: 11px;
  font-weight: 900;
  color: #8A5A00;
}

.bf-slist li[aria-selected="true"] small {
  color: #FFD9A0;
}

.bf-slist .bf-slist-none {
  grid-column: 1 / -1;
  font-weight: 400;
  color: var(--color-text-body);
  cursor: default;
}

.bf-slist .bf-slist-none:hover {
  background: none;
}

/* the real <select id="preStateSelect"> the flow reads; the grid writes into it */
.bf-state-data {
  display: none;
}

/* select2 arrow in any .bf-field: full-height column, chevron centred
   (the legacy nudges in basic.css assumed a 61px-tall box) */
.bf-page .bf-field .select2-selection--single .select2-selection__arrow {
  top: 0;
  right: 14px;
  width: 22px;
  height: 100%;
}

.bf-page .bf-field .select2-selection--single .select2-selection__arrow b {
  top: 50%;
  left: 0;
  margin: 0;
  transform: translateY(-50%);
  transition: transform .2s var(--bf-ease);
}

.bf-page .bf-field .select2-container--open .select2-selection--single .select2-selection__arrow b {
  transform: translateY(-50%) rotate(180deg);
}

/* ── shared: link-style buttons (template .btn-p / .btn-o) ──────────── */
.bf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border: 2px solid transparent;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}

.bf-btn--primary {
  background: var(--color-orange);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-cta);
}

.bf-btn--primary:hover {
  background: var(--color-orange-hover);
  color: var(--color-text-inverse);
}

.bf-btn--outline {
  background: var(--color-bg-white);
  border-color: var(--color-border-strong);
  color: var(--color-text-heading);
}

.bf-btn--outline:hover {
  border-color: var(--color-navy);
  color: var(--color-text-heading);
}

/* ── shared: disabled primary button (state Next, Send Me My Results) ──
   (the loader button is always disabled, so it is excluded) */
.bf-page .formBtnWrapper .btnPrimary:disabled:not(.loaderBtn) {
  background: var(--color-orange-faded);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

.bf-page .formBtnWrapper .btnPrimary:disabled:not(.loaderBtn) .arrowRight {
  transform: none;
}

/* ── shared: small paragraph between blocks ── */
.bf-page .bf-sub {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text-body);
  text-align: left;
}

.bf-page .bf-sub a {
  font-weight: 700;
  color: var(--bf-link);
}

/* ── shared: ring spinner (the original loading_gif.gif / final_screen_loader.gif
   look: peach track, rounded orange arc) for the page overlay and processing ── */
.bf-spinner {
  width: 56px;
  height: 56px;
  animation: bf-spin 1s linear infinite;
}

.bf-spinner circle {
  fill: none;
  stroke-width: 5;
}

.bf-spinner-track {
  stroke: #FFE6DC;
}

.bf-spinner-arc {
  stroke: var(--color-orange);
  stroke-linecap: round;
  stroke-dasharray: 32 126; /* about a quarter of the ring */
}

@keyframes bf-spin {
  to { transform: rotate(360deg); }
}

/* ── page-wide busy overlay (.loadingOverlay, toggled by the JS) ──
   frosted glass: the page blurs behind a tint; the ring spinner (same look as
   loading_gif.gif) sits straight on it, no tile behind */
.loadingOverlay.bf-overlay {
  background: rgb(115 122 197 / 45%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
}

.bf-overlay .bf-spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
}

/* ==========================================================================
   STEP 1 — service selection (#step1Section-1)
   ========================================================================== */
#step1Section-1 .servicesCardsWrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 0;
  padding: 0;
}

#step1Section-1 .serviceCard {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: auto;
  max-width: none;
  min-height: 0;
  padding: 18px 48px 18px 18px;
  background: var(--color-bg-white);
  border: 1.5px solid var(--color-line-strong);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  transform: none;
  overflow: hidden; /* keeps the click ripple inside (the selected ring is an outer shadow) */
  cursor: pointer;
  transition: border-color .3s, box-shadow .3s, background .3s;
}

#step1Section-1 .serviceCard:hover {
  border-color: var(--color-orange);
  box-shadow: var(--shadow-sm);
  transform: none;
}

#step1Section-1 .serviceCard.selectedService {
  background: var(--color-orange-wash);
  border: 1.5px solid var(--color-orange);
  box-shadow: var(--bf-ring);
}

/* legacy tick image — replaced by the radio dot */
#step1Section-1 .serviceCard.selectedService::before {
  content: none;
}

#step1Section-1 .serviceCard.selectedService .bf-rd { border-color: var(--color-orange); }
#step1Section-1 .serviceCard.selectedService .bf-rd::after { transform: scale(1); }

#step1Section-1 .bf-opt-txt b {
  display: block;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text-heading);
}

#step1Section-1 .bf-opt-txt small {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-text-body);
}

/* cards stack on mobile now, so the old scroller dots have nothing to track */
#step1Section-1 .swiperDots {
  display: none;
}

/* ==========================================================================
   STEP 1b — state (#step1Section-state) + 30-day gate overlay (#thirtyDayGate)
   ========================================================================== */
/* the gate stays an overlay (shown/hidden by pre-evaluation.js); only its card is restyled */
#thirtyDayGate.thirtyDayGateOverlay {
  background: rgba(14, 20, 95, .55);
}

#thirtyDayGate .thirtyDayGateCard {
  max-width: 580px;
  padding: 32px;
  border: 0;
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
}

#thirtyDayGate .bf-h1 {
  font-size: clamp(24px, 3vw, 30px);
}

#thirtyDayGate .bf-lead {
  margin-bottom: 18px;
}

#thirtyDayGate .bf-lead strong {
  color: var(--color-text-heading);
}

#thirtyDayGate .thirtyDayGateBtnWrap {
  margin-top: 24px;
}

#thirtyDayGate .thirtyDayGateBtnWrap .btnPrimary {
  width: auto;
}

/* ==========================================================================
   STEP 2a — therapist intro (#step2Section-1)
   ========================================================================== */
/* green "picked" pill — text is the service + price, set by basic.js */
.bf-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  padding: 4px 12px;
  background: #E9F7EF;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  color: #14753F;
}

.bf-pill svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* overlapping therapist avatars + caption */
.bf-ther {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.bf-ther img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid var(--color-bg-white);
  box-shadow: 0 4px 10px -4px rgba(14, 20, 95, .4);
  object-fit: cover;
  object-position: top;
}

.bf-ther img + img {
  margin-left: -14px;
}

.bf-page .bf-ther p {
  margin: 0 0 0 14px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--color-text-body);
  text-align: left;
}

.bf-ther b {
  color: var(--color-text-heading);
}

/* legacy #step2Section-1 .btnPrimary adds a 61px top margin and a 245px cap */
#step2Section-1 .formBtnWrapper .btnPrimary {
  width: auto;
  max-width: none;
  margin: 0;
}

/* ==========================================================================
   STEP 2b — questionnaire (#step2Section-2)
   Legacy pill/question rules live in basic.css (shared with /results), so
   everything here is scoped by the section id. Pill markup is untouched.
   ========================================================================== */
#step2Section-2.assessmentSec {
  padding: 0 15px;
}

#step2Section-2 .questionaireWrapper {
  text-align: left;
}

#step2Section-2 .questionCounter {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text-secondary);
  text-align: left;
}

#step2Section-2 .questionCounter .activeStep {
  font-weight: 700;
  color: var(--color-text-heading);
}

/* question progress: N of 11, read from whichever question is visible */
.bf-qbar {
  height: 6px;
  margin-bottom: 22px;
  border-radius: 6px;
  background: var(--color-line);
  overflow: hidden;
}

.bf-qbar i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--color-orange);
  transition: width .35s var(--bf-ease);
}

#step2Section-2:has(#questionaire-1.show)  .bf-qbar i { width: 9.09%; }
#step2Section-2:has(#questionaire-2.show)  .bf-qbar i { width: 18.18%; }
#step2Section-2:has(#questionaire-3.show)  .bf-qbar i { width: 27.27%; }
#step2Section-2:has(#questionaire-4.show)  .bf-qbar i { width: 36.36%; }
#step2Section-2:has(#questionaire-5.show)  .bf-qbar i { width: 45.45%; }
#step2Section-2:has(#questionaire-6.show)  .bf-qbar i { width: 54.55%; }
#step2Section-2:has(#questionaire-7.show)  .bf-qbar i { width: 63.64%; }
#step2Section-2:has(#questionaire-8.show)  .bf-qbar i { width: 72.73%; }
#step2Section-2:has(#questionaire-9.show)  .bf-qbar i { width: 81.82%; }
#step2Section-2:has(#questionaire-10.show) .bf-qbar i { width: 90.91%; }
#step2Section-2:has(#questionaire-11.show) .bf-qbar i { width: 100%; }

/* legacy form is a fixed 360px box; stacked options need it to grow.
   overflow stays hidden so the gsap slide between questions still clips. */
#step2Section-2 .assessmentForm {
  min-height: 0;
  max-height: none;
  margin: 0;
  overflow: hidden;
}

/* safety net only — basic.js sets inline display on every question it shows/hides */
#step2Section-2 .singleQuestion:not(.show) {
  display: none;
}

#step2Section-2 .questions {
  max-width: none;
  margin: 0;
}

#step2Section-2 .singleQuestion .questionHeading {
  max-width: none;
  margin: 0 0 20px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(22px, 2.6vw, 27px);
  line-height: 1.3;
  letter-spacing: normal;
  color: var(--color-text-heading);
  text-align: left;
}

/* one full-width column; the legacy rule centres with justify-content:center,
   which stops grid tracks from stretching, so it is reset here */
#step2Section-2 .answerPillsWrapper {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: stretch;
  align-items: stretch;
  gap: 10px;
  max-width: none;
  margin: 0;
}

/* Yes / No side by side */
#step2Section-2 #questionaire-11 .answerPillsWrapper {
  grid-template-columns: 1fr 1fr;
}

/* the answer pill (the old gsap blink on click was removed from basic.js) */
#step2Section-2 .inputReplica.questionOption {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 54px;
  margin: 0;
  padding: 15px 18px;
  background: var(--color-bg-white);
  border: 1.5px solid var(--color-line-strong);
  border-radius: 14px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text-heading);
  text-align: left;
  cursor: pointer;
  transition: border-color .2s;
}

#step2Section-2 .inputReplica.questionOption:hover {
  background: var(--color-bg-white);
  border-color: var(--color-orange);
  color: var(--color-text-heading);
}

#step2Section-2 .inputReplica.questionOption.selected,
#step2Section-2 .inputReplica.questionOption.selected:hover {
  background: var(--color-orange-wash);
  border-color: var(--color-orange);
  color: var(--color-text-heading);
}

/* radio circle — a pseudo-element, so the pill's .text() stays exactly the answer */
#step2Section-2 .inputReplica.questionOption::before {
  content: "";
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--color-line-strong);
  background: var(--color-bg-white);
  box-sizing: border-box;
}

#step2Section-2 .inputReplica.questionOption.selected::before {
  border-color: var(--color-orange);
  background: var(--color-orange);
  box-shadow: inset 0 0 0 3px var(--color-bg-white);
}

/* siblings are briefly .disabled (pointer-events only) while the pick registers;
   they keep their normal look so nothing flickers */

/* ==========================================================================
   Crisis popup (#suicideHelpModal) — replaces suicide-help-popup.css.
   basic.js toggles inline display (flex/none); the overlay and the × close it.
   ========================================================================== */
.suicide-help-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-toast, 1200);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}

.suicide-help-overlay {
  position: absolute;
  inset: 0;
  background: rgba(14, 20, 95, .55);
}

.suicide-help-inner {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}

.suicide-help-content {
  position: relative;
  width: 100%;
  max-width: 580px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 32px;
  background: var(--color-bg-white);
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
  animation: bf-modal-in .3s var(--bf-ease);
}

@keyframes bf-modal-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.suicide-help-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: var(--color-bg-white);
  border: 1.5px solid var(--color-line-strong);
  border-radius: 50%;
  color: var(--color-text-heading);
  cursor: pointer;
  transition: border-color .2s;
}

.suicide-help-close:hover {
  border-color: var(--color-orange);
}

.suicide-help-close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.bf-page .suicide-help-heading {
  padding-right: 44px;
  font-size: clamp(22px, 3vw, 26px);
}

.bf-crisis {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.bf-crisis li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px 12px;
  padding: 14px;
  border: 1.5px solid var(--color-line-strong);
  border-radius: 14px;
}

.bf-crisis b {
  font-size: 16px;
  color: var(--color-text-heading);
}

.bf-crisis span {
  grid-column: 1;
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-text-body);
}

.bf-crisis .bf-btn {
  grid-column: 2;
  grid-row: 1 / 3;
}

/* ==========================================================================
   STEP 3a — personal info (#step3Section-1)
   ========================================================================== */
.bf-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.bf-full {
  grid-column: 1 / -1;
}

.bf-page .bf-hint {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-text-secondary);
  text-align: left;
}

/* the field box is the legacy .inputGroupAssessmentForm wrapper (its :has(.invalid)
   shake from commonStyles.css is kept; only the colours change) */
#step3Section-1 .inputGroupAssessmentForm,
#step4Section-1 .inputGroupAssessmentForm,
#step4Section-2 .inputGroupAssessmentForm,
#step4Section-email .inputGroupAssessmentForm,
#step5Section .inputGroupAssessmentForm {
  position: relative;
  min-height: 52px;
  background: var(--color-bg-white);
  border: 1.5px solid var(--color-line-strong);
  border-radius: 14px;
  box-shadow: none;
  transition: border-color .2s, box-shadow .2s;
}

#step3Section-1 .inputGroupAssessmentForm:hover,
#step4Section-1 .inputGroupAssessmentForm:hover,
#step4Section-2 .inputGroupAssessmentForm:hover,
#step4Section-email .inputGroupAssessmentForm:hover,
#step5Section .inputGroupAssessmentForm:hover {
  border-color: var(--color-text-secondary);
  box-shadow: none;
}

#step3Section-1 .inputGroupAssessmentForm:focus-within,
#step4Section-1 .inputGroupAssessmentForm:focus-within,
#step4Section-2 .inputGroupAssessmentForm:focus-within,
#step4Section-email .inputGroupAssessmentForm:focus-within,
#step5Section .inputGroupAssessmentForm:focus-within {
  border-color: var(--color-orange);
  box-shadow: var(--bf-ring);
  background: var(--color-bg-white);
}

#step3Section-1 .inputGroupAssessmentForm:has(.invalid),
#step4Section-1 .inputGroupAssessmentForm:has(.invalid),
#step4Section-2 .inputGroupAssessmentForm:has(.invalid),
#step4Section-email .inputGroupAssessmentForm:has(.invalid),
#step5Section .inputGroupAssessmentForm:has(.invalid) {
  border-color: #b41c01;
  border-width: 2px;
}

#step3Section-1 .inputGroupAssessmentForm input,
#step4Section-1 .inputGroupAssessmentForm input,
#step4Section-2 .inputGroupAssessmentForm input,
#step4Section-email .inputGroupAssessmentForm input,
#step5Section .inputGroupAssessmentForm input {
  height: auto;
  min-height: 49px;
  padding: 13px 16px;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 22px;
  color: var(--color-text-heading);
  border-radius: 14px;
}

#step3Section-1 .inputGroupAssessmentForm input::placeholder,
#step4Section-1 .inputGroupAssessmentForm input::placeholder,
#step4Section-2 .inputGroupAssessmentForm input::placeholder,
#step4Section-email .inputGroupAssessmentForm input::placeholder,
#step5Section .inputGroupAssessmentForm input::placeholder {
  font-size: 16px;
  color: var(--color-text-secondary);
}

/* DOB: room for the calendar icon; the invisible native picker covers the whole box */
#step3Section-1 #date-value {
  padding-right: 48px;
}

#step3Section-1 #dob {
  height: 100%;
}

/* select2 boxes (gender, housing, state) */
#step3Section-1 .selection .select2-selection--single,
#step4Section-1 .selection .select2-selection--single {
  min-height: 49px;
  padding: 13px 44px 13px 16px;
  border: 0;
  border-radius: 14px;
  background: transparent;
}

#step3Section-1 .select2-selection--single .select2-selection__rendered,
#step4Section-1 .select2-selection--single .select2-selection__rendered {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 22px;
  color: var(--color-text-body);
}

/* state is read-only here (chosen on the state step) */
#step3Section-1 .select2-container--disabled .select2-selection--single,
#step4Section-1 .select2-container--disabled .select2-selection--single {
  background: var(--color-bg-warm);
  cursor: not-allowed;
}

#step3Section-1 .select2-container--disabled .select2-selection__arrow,
#step4Section-1 .select2-container--disabled .select2-selection__arrow {
  display: none;
}

/* ==========================================================================
   STEP 3c — appointment, PSD / consultation only (#step3Section-3)
   Day cells and time slots are generated by personalInfo.js.
   ========================================================================== */
#step3Section-3 .bookAppointmentWrapper {
  display: grid;
  grid-template-columns: 300px 1fr;
  align-items: start;
  gap: 24px;
  max-width: none;
  margin: 0;
}

#step3Section-3 .calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

#step3Section-3 .calendar-nav {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  background: var(--color-bg-white);
  border: 1.5px solid var(--color-line-strong);
  border-radius: 50%;
  color: var(--color-text-heading);
  cursor: pointer;
  transition: border-color .2s;
}

#step3Section-3 .calendar-nav:hover {
  border-color: var(--color-orange);
}

#step3Section-3 .calendar-nav svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* current month: can't go back (personalInfo.js adds .disabled) */
#step3Section-3 .calendar-nav.disabled {
  background: var(--color-bg-white);
  border-color: var(--color-line);
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

#step3Section-3 .calendar-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  color: var(--color-text-heading);
}

#step3Section-3 .calendar-days-header,
#step3Section-3 .calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

#step3Section-3 .calendar-days-header {
  margin-bottom: 6px;
}

#step3Section-3 .day-header {
  padding: 6px 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-secondary);
  text-align: center;
}

#step3Section-3 .calendar-day {
  width: 38px;
  height: 38px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 700;
  transition: box-shadow .2s;
}

#step3Section-3 .calendar-day.available {
  background: var(--color-orange-wash);
  color: var(--color-text-heading);
  cursor: pointer;
}

#step3Section-3 .calendar-day.available:hover {
  box-shadow: inset 0 0 0 1.5px var(--color-orange);
}

#step3Section-3 .calendar-day.selected {
  background: var(--color-orange);
  color: var(--color-text-inverse);
}

#step3Section-3 .calendar-day.default,
#step3Section-3 .calendar-day.default:hover {
  background: none;
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

#step3Section-3 .calendar-day.empty {
  cursor: default;
}

#step3Section-3 .time-picker-container {
  padding: 18px;
  background: var(--color-bg-warm);
  border: 1.5px solid var(--color-line);
  border-radius: 18px;
}

#step3Section-3 .date-header {
  margin-bottom: 14px;
  text-align: left;
}

#step3Section-3 .selected-date {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  color: var(--color-text-heading);
  text-align: left;
}

#step3Section-3 .timezone {
  margin-top: 2px;
  font-size: 13px;
  color: var(--color-text-secondary);
}

#step3Section-3 .time-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

#step3Section-3 .time-slot {
  padding: 10px 6px;
  background: var(--color-bg-white);
  border: 1.5px solid var(--color-line-strong);
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-heading);
  text-align: center;
  cursor: pointer;
  transition: border-color .2s;
}

#step3Section-3 .time-slot:hover {
  border-color: var(--color-orange);
}

#step3Section-3 .time-slot.selected {
  background: var(--color-orange);
  border-color: var(--color-orange);
  color: var(--color-text-inverse);
}

#step3Section-3 .formBtnWrapper .btnPrimary {
  width: 100%;
  max-width: none;
}

/* ==========================================================================
   STEP 4a — pets (#step4Section-1)
   petInfo.min.css is shared with the review page, so nothing there is edited:
   everything is overridden here, scoped to the section. Field boxes share the
   personal-info rules above. Saved-pet cards and "Add Another Pet" are rendered
   by petInfo.js; their open/closed state is legacy max-height, left untouched.
   ========================================================================== */
#step4Section-1 .petInfoFormWrapper.bf-pet {
  display: grid;
  gap: 14px;
  max-width: none;
  margin: 0;
  padding: 18px;
  background: var(--color-bg-white);
  border: 1.5px solid var(--color-line-strong);
  border-radius: 18px;
}

.bf-pet-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-heading);
}

.bf-pet-h svg {
  width: 20px;
  height: 20px;
  color: var(--color-orange);
}

.bf-grid3 {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 14px;
}

/* unit label inside age / weight boxes (static form and the edit form) */
#step4Section-1 .inputGroupAssessmentForm.relative {
  padding-right: 0;
}

#step4Section-1 .inputGroupAssessmentForm.relative input {
  padding-right: 72px;
}

#step4Section-1 .inputGroupAssessmentForm.relative span {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  line-height: 1;
  color: var(--color-text-secondary);
  pointer-events: none;
}

/* "Remove this Pet" (clears the half-filled extra-pet form) */
#step4Section-1 .flexInputPet:has(#clearPetForm) {
  display: flex;
  justify-content: flex-end;
}

#step4Section-1 .clearPetFormWrapper {
  margin: 0;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  color: var(--bf-link);
}

#step4Section-1 .clearPetFormWrapper p {
  margin: 0;
}

/* ── saved pets list ── */
#step4Section-1 .addedPetsList {
  display: grid;
  gap: 12px;
  max-width: none;
  margin: 0 0 14px;
  padding: 0;
  /* petInfo.js writes an inline peach border-bottom on this list */
  border-bottom: 0 !important;
}

#step4Section-1 .addedPetCard {
  margin: 0;
  background: var(--color-bg-white);
  border: 1.5px solid var(--color-line-strong);
  border-radius: 18px;
}

#step4Section-1 .addedPetCard.editing {
  border-color: var(--color-orange);
  box-shadow: var(--bf-ring);
}

#step4Section-1 .addedPetHeader {
  padding: 12px 14px 12px 18px;
  background: transparent;
}

#step4Section-1 .addedPetName {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text-heading);
  text-align: left;
}

/* paw before the pet's name (orange paw data URI defined on body in commonStyles.css) */
#step4Section-1 .addedPetName::before {
  content: "";
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: var(--paw-orange) center / contain no-repeat;
}

#step4Section-1 .addedPetActions {
  gap: 8px;
}

#step4Section-1 .editBtn,
#step4Section-1 .deleteBtn {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  background: var(--color-bg-white);
  border: 1.5px solid var(--color-line-strong);
  border-radius: 50%;
  transition: border-color .2s;
}

#step4Section-1 .editBtn:hover,
#step4Section-1 .deleteBtn:hover {
  border-color: var(--color-orange);
}

#step4Section-1 .editBtn img,
#step4Section-1 .deleteBtn img {
  width: 18px;
  height: 18px;
}

#step4Section-1 .addedPetForm {
  gap: 12px;
  background: transparent;
}

#step4Section-1 .addedPetForm .flexInputPet {
  gap: 12px;
}

#step4Section-1 .addedPetForm .flexInputPet .inputGroupAssessmentForm {
  flex: 1 1 0;
  min-width: 0;
}

/* select2 arrow in the generated edit form (not inside a .bf-field) */
#step4Section-1 .addedPetForm .select2-selection--single .select2-selection__arrow {
  top: 0;
  right: 14px;
  width: 22px;
  height: 100%;
}

#step4Section-1 .addedPetForm .select2-selection--single .select2-selection__arrow b {
  top: 50%;
  left: 0;
  margin: 0;
  transform: translateY(-50%);
}

#step4Section-1 .flexBtnRight {
  gap: 10px;
}

#step4Section-1 .cancelBtn,
#step4Section-1 .updateBtn {
  min-height: 40px;
  padding: 8px 18px;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
}

#step4Section-1 .cancelBtn {
  background: var(--color-bg-white);
  border: 1.5px solid var(--color-border-strong);
  color: var(--color-text-heading);
}

#step4Section-1 .cancelBtn:hover {
  border-color: var(--color-navy);
  color: var(--color-text-heading);
}

#step4Section-1 .updateBtn {
  border: 1.5px solid var(--color-orange);
  background: var(--color-orange);
  color: var(--color-text-inverse);
}

#step4Section-1 .updateBtn:disabled {
  background: var(--color-orange-wash);
  border-color: var(--color-orange-line);
  color: var(--color-text-disabled);
}

/* ── "Add Another Pet" row (dashed, like the template) ── */
#step4Section-1 .flexInputPet:has(.addMorePetsWrapper) {
  display: flex;
}

#step4Section-1 .addMorePetsWrapper {
  width: 100%;
  margin: 0;
  padding: 14px;
  gap: 8px;
  background: var(--color-orange-wash);
  border: 1.5px dashed var(--color-orange-line);
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  color: var(--bf-link);
  transition: border-color .2s;
}

#step4Section-1 .addMorePetsWrapper:hover,
#step4Section-1 .addMorePetsWrapper:hover p {
  border-color: var(--color-orange);
  color: var(--bf-link);
}

#step4Section-1 .addMorePetsWrapper p {
  margin: 0;
}

/* legacy #step4Section-1 .btnPrimary caps the buttons at 177px, centred */
#step4Section-1 .formBtnWrapper .btnPrimary {
  width: auto;
  max-width: none;
  margin: 0;
}

/* ==========================================================================
   STEP 4b — consent / signature (#step4Section-2)
   ========================================================================== */
#step4Section-2 .bf-ticks {
  margin-bottom: 16px;
}

.bf-sign {
  margin-top: 22px;
}

/* the typed name reads as a signature */
#step4Section-2 #r_signature {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
}

/* ==========================================================================
   STEP 5 — results email (#step4Section-email)
   ========================================================================== */
#step4Section-email.emailCaptureSection {
  padding: 0;
}

#step4Section-email .bf-check em {
  font-style: normal;
  color: var(--color-text-secondary);
}

.bf-phone {
  margin-top: 10px;
}

/* intl-tel-input wraps #resultsPhone in .iti with the flag picker on the left */
#step4Section-email .iti,
#step5Section .iti {
  display: block;
  width: 100%;
}

#step4Section-email .phone .iti input,
#step5Section .phone .iti input {
  padding-left: 58px;
}

#step4Section-email .resultsPhoneWrap {
  margin-top: 0;
}

/* ==========================================================================
   ACCOUNT — create account (#step5Section, auth.php; shown on /results)
   Field boxes and the phone flag share the rules above. evaluation-auth.css is
   still loaded (its .otpForm rules style the OTP popup); its account-screen
   rules no longer match because the markup uses bf-* classes now.
   ========================================================================== */
/* plan bar: evaluation-auth.js fills it and sets display:flex */
.bf-plan {
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 18px;
  padding: 6px 14px;
  background: var(--color-orange-wash);
  border: 1.5px solid var(--color-orange-line);
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-heading);
}

.bf-plan svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  fill: none;
  stroke: #14753F;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bf-plan-price {
  font-weight: 900;
  color: var(--color-orange-hover);
}

.bf-plan-refund {
  font-size: 13px;
  color: var(--color-text-body);
}

/* phone sits beside the name here (the email screen stacks it under a checkbox) */
#step5Section .bf-phone {
  margin-top: 0;
}

/* room for the inline "Edit" and the password eye */
#step5Section #userEmail {
  padding-right: 64px;
}

#step5Section #userPassword {
  padding-right: 48px;
}

#step5Section .emailEditBtn {
  right: 14px;
  padding: 6px;
  font-size: 14px;
  text-decoration: none;
  color: var(--bf-link);
}

#step5Section .emailEditBtn:hover {
  text-decoration: underline;
}

#step5Section .pswdEye {
  right: 16px;
}

/* inline validation messages: shown while authValidate.js marks the field
   .invalid (it removes that again as soon as the user types) */
.bf-err {
  display: none;
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: #B42318;
  text-align: left;
}

.bf-field:has(input.invalid) > .bf-err {
  display: block;
}

/* password: checkLiPass writes its message (enter your password, or minimum
   8 characters required) into a sibling .errorMsg inside the box,
   so it is placed just below the box, with room made only while it shows */
#step5Section .inputGroupAssessmentForm .errorMsg {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
}

#step5Section #userPassword.invalid ~ .errorMsg:not(:empty) {
  display: block;
}

#step5Section .bf-field:has(#userPassword.invalid) {
  padding-bottom: 24px;
}

/* ==========================================================================
   Processing (#assesment_form_loading_screen) — ~6s, then /results
   ========================================================================== */
#assesment_form_loading_screen.loadingSection {
  padding: 0;
}

/* no white card here: dots, heading and slider sit on the page background */
.bf-processing {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 0 8px;
  text-align: center;
}

/* header strip: the original look from basic.css (.loadingHeadWrapper: bordered
   row, italic orange text); only the GIF became the SVG ring, kept at its size */
.loadingHeadContent .bf-spinner {
  width: 29px;
  height: 29px;
  flex-shrink: 0;
}

.loadingHeadContent .loadingHeadText {
  margin: 0;
}

#assesment_form_loading_screen .loadingScreenSwiper .slide-content {
  max-width: 560px;
  margin: 0 auto;
  gap: 10px;
  padding: 0 0 40px;
  background: none;
  border: 0;
}

#assesment_form_loading_screen .loadingScreenSwiper .slide-content .slideHeading {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.3;
  color: var(--color-text-heading);
}

#assesment_form_loading_screen .loadingScreenSwiper .slide-content .slideDesc {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--color-text-body);
}

#assesment_form_loading_screen .slideDesc strong {
  color: var(--color-text-heading);
}

#assesment_form_loading_screen .slide-content > img {
  width: 220px;
  max-width: 100%;
  height: auto;
}

#assesment_form_loading_screen .swiper-pagination-basic {
  bottom: 14px !important; /* legacy positions it with !important */
}

/* ==========================================================================
   MOBILE STICKY HEADER + PROGRESS (header-evaluation/*, /basic and /results)
   575px is where header.css switches to its mobile layout. The header pins at
   the top; the progress bar pins right under it at --bf-head-h, the header's
   live height (set by js/basic-fx.js). The header padding is trimmed so the
   two bars don't eat the screen. header.css itself is not edited.
   ========================================================================== */
@media (max-width: 575px) {
  header.headerEvaluation {
    position: sticky;
    top: 0;
    z-index: 40;
    padding: 14px 0 12px;
    background: var(--color-bg-warm);
  }

  .progressStepsWrapper {
    position: sticky;
    top: var(--bf-head-h, 64px);
    z-index: 39;
    padding-bottom: 12px;
    background: var(--color-bg-warm);
    border-bottom: 1px solid var(--color-line);
  }
}

/* ==========================================================================
   LAYOUT + "Your order" panel (#bfLayout / #bfOrder, filled by js/order-summary.js)
   The step sections live in .bf-main; the layout supplies the outer gutters,
   so each section's .container and .bf-flow drop their own.
   ========================================================================== */
.bf-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  align-items: start;
  gap: 32px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 32px 20px 56px;
}

/* no step screen visible (initial load, processing): single centred column */
.bf-layout--solo {
  grid-template-columns: minmax(0, 1fr);
  max-width: 800px;
}

.bf-main {
  min-width: 0;
}

.bf-layout .bf-page > .container {
  max-width: none;
  padding: 0;
}

.bf-layout .bf-flow {
  max-width: none;
  margin: 0;
}

.bf-layout #step2Section-2.assessmentSec {
  padding: 0;
}

.bf-side {
  position: sticky;
  top: 24px;
  display: grid;
  gap: 14px;
}

.bf-side[hidden] {
  display: none;
}

/* light orange order card, same family as the homepage picker */
.bf-sum {
  padding: 22px;
  background: linear-gradient(160deg, var(--color-bg-white) 0%, #FFF4EC 55%, var(--color-bg-peach) 100%);
  border: 2px solid var(--color-orange-line);
  border-radius: 22px;
  box-shadow: 0 26px 50px -34px rgba(255, 91, 46, .55);
}

.bf-sum-k {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-body);
}

.bf-sum-svc {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bf-sum-svc b {
  display: block;
  font-size: 16px;
  line-height: 1.3;
  color: var(--color-text-heading);
}

.bf-sum-svc small {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--color-text-body);
}

/* optional rows (state line, pets, sessions): invisible but still holding their
   space, so the card keeps one height (on ≤980px they collapse, see below) */
.bf-sum .is-off {
  visibility: hidden;
}

/* the visible list and invisible copies of every service's list share one
   grid cell: the cell is always as tall as the longest list */
.bf-sum-lists {
  display: grid;
  margin: 14px 0 6px;
}

.bf-sum-lists > .bf-sum-list {
  grid-area: 1 / 1;
}

.bf-sum-ghost {
  visibility: hidden;
}

/* brief fade while the service swaps (same as the homepage "You selected" box) */
.bf-sum-svc,
.bf-sum-lists {
  transition: opacity .2s;
}

.bf-sum.swap .bf-sum-svc,
.bf-sum.swap .bf-sum-lists {
  opacity: 0;
}

.bf-ico.bf-ico--sm {
  width: 40px;
  height: 40px;
}

.bf-ico.bf-ico--sm svg {
  width: 19px;
  height: 19px;
}

.bf-sum-list {
  list-style: none;
  display: grid;
  align-content: start;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.bf-sum-list li {
  position: relative;
  padding-left: 28px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text-heading);
}

.bf-sum-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #2ECC71 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.bf-sum-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--color-orange-line);
  font-size: 14px;
  color: var(--color-text-body);
}

.bf-sum-line span:last-child {
  font-weight: 700;
  color: var(--color-text-heading);
}

.bf-sum-locked {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--color-bg-white);
  border: 1.5px dashed var(--color-orange-line);
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-text-body);
}

.bf-sum-locked svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--color-orange);
}

/* "Change letter" text link under the price note (template .sum .link-btn) */
.bf-sum-change {
  display: inline-flex;
  margin-top: 10px;
  padding: 4px 0;
  background: none;
  border: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--bf-link);
  cursor: pointer;
}

.bf-sum-change:hover {
  text-decoration: underline;
}

.bf-trust {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 16px 18px;
  background: var(--color-bg-white);
  border: 1.5px solid var(--color-line);
  border-radius: 18px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-heading);
}

.bf-trust li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bf-trust svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-orange);
}

/* tablet and below: panel becomes a compact card above the form (template) */
@media (max-width: 980px) {
  .bf-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .bf-side {
    position: static;
    order: -1;
  }

  /* compact card: no list, and unused rows collapse instead of holding space */
  .bf-trust,
  .bf-sum-lists,
  .bf-sum .is-off {
    display: none;
  }

  .bf-sum {
    padding: 16px 18px;
    border-radius: 18px;
  }
}

/* ── mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* the plan pill wraps; a leading separator dot would read as a stray bullet */
  .bf-plan-dot {
    display: none;
  }

  .bf-slist {
    grid-template-columns: repeat(2, 1fr);
  }

  .bf-layout {
    padding: 16px 14px 40px;
    gap: 14px;
  }

  #step2Section-1 .formBtnWrapper .btnPrimary {
    width: 100%;
  }

  #assesment_form_loading_screen .slide-content > img {
    width: 180px;
  }

  .loadingHeadContent .bf-spinner {
    width: 24px;
    height: 24px;
  }

  .bf-grid3 {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .bf-grid3 > .bf-field:first-child {
    grid-column: 1 / -1;
  }

  #step4Section-1 .petInfoFormWrapper.bf-pet {
    padding: 16px 14px;
  }

  #step4Section-1 .formBtnWrapper .btnPrimary {
    width: 100%;
  }

  .bf-grid2 {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  #step3Section-3 .bookAppointmentWrapper {
    grid-template-columns: 1fr;
  }

  #step3Section-3 .calendar-day {
    width: 36px;
    height: 36px;
  }

  #step2Section-2.assessmentSec {
    padding: 0 15px;
  }

  .suicide-help-modal {
    padding: 14px;
  }

  .suicide-help-content {
    padding: 24px 18px;
    border-radius: 18px;
  }


  #thirtyDayGate .thirtyDayGateCard {
    padding: 24px 18px;
    border-radius: 18px;
  }

  #thirtyDayGate .thirtyDayGateBtnWrap .btnPrimary {
    width: 100%;
  }

  .bf-ico.bf-ico--lg {
    width: 56px;
    height: 56px;
  }

  .bf-ico.bf-ico--lg svg {
    width: 26px;
    height: 26px;
  }

  .bf-flow {
    margin: 16px auto 40px;
    padding: 22px 18px;
    border-radius: 18px;
  }

  .bf-page .bf-lead {
    font-size: 16px;
    margin-bottom: 20px;
  }

  .bf-page .formBtnWrapper .btnPrimary {
    width: 100%;
    max-width: none;
  }

  .bf-page .formBtnWrapper.bf-nav {
    justify-content: center;
  }

  #step1Section-1 .servicesCardsWrapper {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  #step1Section-1 .serviceCard {
    padding: 16px 46px 16px 16px;
  }

  .bf-ico {
    width: 40px;
    height: 40px;
  }

  .bf-ico svg {
    width: 19px;
    height: 19px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bf-page *,
  .bf-page *::before,
  .bf-page *::after,
  .bf-overlay * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
  }
}