/*
 * FSF Booking Drawer — self-contained styles (theme-independent).
 * Tokens are scoped to the drawer roots so they can't collide with a host theme.
 */

/*
 * Fix for the theme's "Book an Appointment" header button (.book-button-desktop,
 * a <li> nav item) getting stuck with green text on a green background — text
 * invisible. Root cause (theme source: sass/partials/_site-header.scss): the
 * background-color swap on hover is triggered by the <li>'s own :hover, while
 * the text color swap is triggered by the <a>'s own :hover — two INDEPENDENT
 * triggers meant to move together. The <li> has horizontal padding the <a>
 * doesn't fill, so a fast mouse movement can cross that padding boundary and
 * land the two elements in different :hover states for a moment; whichever
 * one repaints last "wins" and the pairing is left desynced indefinitely
 * (background stuck green, text stuck green) until another hover recalculates
 * both together. Fixed by driving BOTH properties off the exact same trigger
 * (the <li>'s :hover/:focus-within) so there is only one hover condition to
 * evaluate, not two that can disagree — loads after the theme's stylesheet
 * and matches its !important, so this wins the cascade.
 */
li.book-button-desktop {
  background-color: #4e9d45 !important;
}
li.book-button-desktop a {
  color: #ffffff !important;
}
li.book-button-desktop:hover,
li.book-button-desktop:focus-within {
  background-color: transparent !important;
}
li.book-button-desktop:hover a,
li.book-button-desktop:focus-within a {
  color: #4e9d45 !important;
}

/* ---- scoped design tokens ---- */
.fsf-drawer,
.fsf-drawer-backdrop {
  --fsf-blue:#0DB1E1; --fsf-green:#359D47; --fsf-orange:#F26126; --fsf-beige:#F4F1EA; --fsf-dark:#414042; --fsf-white:#FEFEFE;
  --blue-50:#E7F7FC; --blue-100:#CFEFF9; --blue-200:#9EDFF3; --blue-700:#0779A3;
  --green-100:#D7EBDA; --green-200:#A6D5B0; --green-700:#1F7A31;
  --orange-50:#FDEEE7; --orange-100:#FBD9C8; --orange-700:#B93E15;
  --color-bg-soft-blue:#E7F7FC; --color-bg-soft-green:#EBF5ED;
  --color-text-primary:#414042; --color-text-muted:#6F6F71; --color-text-inverse:#FEFEFE;
  --color-link:#0779A3; --color-interactive:#0779A3; --color-interactive-hover:#05617F;
  --color-cta:#F26126; --color-cta-hover:#D9481C; --color-success:#1F7A31;
  --color-border:#E6E1D5; --color-border-input:#C9C3B4;
  --radius-pill:999px; --radius-card:20px; --radius-input:12px;
  --shadow-sm:0 1px 2px rgba(65,64,66,0.08); --shadow-md:0 6px 16px rgba(65,64,66,0.10);
  --font-sans:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-script:'Ms Madi',cursive;
}

/* ---- light reset so host-theme rules don't bleed into the drawer ---- */
.fsf-drawer, .fsf-drawer *, .fsf-drawer *::before, .fsf-drawer *::after,
.fsf-drawer-backdrop { box-sizing: border-box; }
.fsf-drawer { font-family: var(--font-sans); color: var(--color-text-primary); line-height: 1.5; }
.fsf-drawer h2 { line-height: 1.2; }
.fsf-drawer button, .fsf-drawer input, .fsf-drawer textarea, .fsf-drawer a { font-family: var(--font-sans); }
.fsf-drawer input, .fsf-drawer textarea { margin: 0; letter-spacing: normal; text-transform: none; }
.fsf-drawer button { margin: 0; text-transform: none; letter-spacing: normal; box-shadow: none; }
.fsf-drawer a { box-shadow: none; }
.fsf-drawer img { max-width: 100%; height: auto; }
.fsf-drawer__logo-text { font-weight: 800; font-size: 18px; color: var(--color-text-primary); }

/* [hidden] must win over the class display rules below. */
.fsf-drawer[hidden],
.fsf-drawer-backdrop[hidden],
.fsf-continue[hidden],
.fsf-cancel-ask[hidden],
[data-enquire-slide-1][hidden],
[data-enquire-slide-2][hidden],
.fsf-suggestions[hidden],
.fsf-embed__iframe[hidden],
.fsf-embed__loading[hidden],
.fsf-embed__fallback[hidden],
.fsf-embed__opennew[hidden],
.fsf-clinics__more[hidden],
.fsf-clinics__toggle[hidden] { display: none !important; }

/* ---------- backdrop + shell ---------- */
.fsf-drawer-backdrop {
  position: fixed; inset: 0; background: rgba(65,64,66,0.55);
  z-index: 999998; opacity: 0; pointer-events: none;
  transition: opacity 0.45s ease;
}
.fsf-drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }

.fsf-drawer {
  position: fixed; left: 50%; bottom: 0; z-index: 999999;
  width: min(1360px, 100vw); height: 90vh;
  background: var(--fsf-beige); border-radius: 28px 28px 0 0;
  box-shadow: 0 -16px 60px rgba(65,64,66,0.30);
  display: flex; flex-direction: column; outline: none;
  transform: translate(-50%, 105%);
  transition: transform 0.5s cubic-bezier(0.32,0.72,0.25,1);
}
.fsf-drawer.is-open { transform: translate(-50%, 0); }

/* ---------- header ---------- */
.fsf-drawer__head {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 24px 14px; flex-shrink: 0;
}
.fsf-drawer__logo { margin: 0 auto; }
.fsf-drawer__logo img { height: 32px; width: auto; display: block; }
.fsf-drawer__back {
  display: none; align-items: center; gap: 8px;
  background: var(--fsf-white); border: 1.5px solid var(--color-border-input);
  border-radius: var(--radius-pill); padding: 9px 18px;
  font-size: 14px; font-weight: 700; color: var(--color-text-primary);
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.fsf-drawer.show-back .fsf-drawer__back { display: inline-flex; }
.fsf-drawer__back:hover { background: var(--color-bg-soft-blue); border-color: var(--color-link); }
.fsf-drawer__close {
  width: 40px; height: 40px; border-radius: var(--radius-pill);
  background: var(--fsf-white); border: 1.5px solid var(--color-border-input);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, border-color 0.15s; margin-left: auto;
}
.fsf-drawer.show-back .fsf-drawer__close { margin-left: 0; }
.fsf-drawer__close:hover { background: var(--orange-100); border-color: var(--orange-700); }

/* ---------- body ---------- */
.fsf-drawer__body { flex: 1; overflow-y: auto; padding: 8px 40px 56px; }
.fsf-drawer__inner {
  max-width: 1200px; margin: 0 auto;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.fsf-drawer__inner.is-out { opacity: 0; transform: translateY(14px); }

.fsf-step { display: none; }
.fsf-step.is-active { display: block; }
.fsf-stage, .fsf-enquire-view { display: none; }
.fsf-stage.is-active, .fsf-enquire-view.is-active { display: block; }

/* ---------- chooser ---------- */
.fsf-chooser { text-align: center; padding-top: 24px; }
.fsf-chooser__title { margin: 0 0 10px; font-size: clamp(26px,3.5vw,36px); font-weight: 800; letter-spacing: -0.01em; }
.fsf-chooser__sub { margin: 0 0 40px; font-size: 17px; line-height: 1.6; color: var(--color-text-muted); }
.fsf-chooser__tiles { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; max-width: 1020px; margin: 0 auto; text-align: left; }
.fsf-tile {
  background: var(--fsf-white); border: 1.5px solid var(--color-border-input); border-radius: var(--radius-card);
  overflow: hidden; height: 420px; box-sizing: border-box; display: flex; flex-direction: column;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.fsf-tile__photo { height: 170px; flex-shrink: 0; background-size: cover; background-position: center; }
.fsf-tile__body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.fsf-tile__title { font-size: 18px; font-weight: 700; color: var(--color-text-primary); line-height: 1.3; }
.fsf-tile__desc { font-size: 14px; color: var(--color-text-muted); margin-top: 8px; line-height: 1.55; flex: 1; }
.fsf-tile__cta {
  font-family: var(--font-sans); display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; color: var(--fsf-white); font-size: 15px; font-weight: 700; border: none;
  border-radius: var(--radius-pill); padding: 13px 20px; cursor: pointer; margin-top: 18px; transition: background 0.15s;
}
.fsf-tile__cta svg { flex-shrink: 0; }
.fsf-tile--blue   .fsf-tile__photo { background-color: var(--color-bg-soft-blue); }
.fsf-tile--green  .fsf-tile__photo { background-color: var(--color-bg-soft-green); }
.fsf-tile--orange .fsf-tile__photo { background-color: var(--orange-100); }
.fsf-tile--blue   .fsf-tile__cta { background: var(--fsf-blue); }
.fsf-tile--green  .fsf-tile__cta { background: var(--fsf-green); }
.fsf-tile--orange .fsf-tile__cta { background: var(--fsf-orange); }
.fsf-tile--blue   .fsf-tile__cta:hover { background: var(--blue-700); }
.fsf-tile--green  .fsf-tile__cta:hover { background: var(--green-700); }
.fsf-tile--orange .fsf-tile__cta:hover { background: var(--orange-700); }
.fsf-tile--blue:hover   { border-color: var(--fsf-blue); box-shadow: 0 10px 24px rgba(13,177,225,0.20); transform: translateY(-2px); }
.fsf-tile--green:hover  { border-color: var(--fsf-green); box-shadow: 0 10px 24px rgba(53,157,71,0.20); transform: translateY(-2px); }
.fsf-tile--orange:hover { border-color: var(--fsf-orange); box-shadow: 0 10px 24px rgba(242,97,38,0.20); transform: translateY(-2px); }
.fsf-chooser__foot { margin-top: 32px; font-size: 14px; color: var(--color-text-muted); }
.fsf-chooser__foot strong { color: var(--color-text-primary); }

.fsf-tel-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--color-text-primary); text-decoration: none; }
.fsf-tel-link svg { flex-shrink: 0; color: var(--color-link); }
.fsf-tel-link:hover { color: var(--color-link); text-decoration: underline; }

/* ---------- chat: pick date/time ---------- */
.fsf-pick__intro { text-align: center; max-width: 900px; margin: 0 auto 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.fsf-pick__intro h2 { margin: 0; font-size: clamp(26px,2.8vw,36px); font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
.fsf-script { font-family: var(--font-script); font-weight: 400; color: var(--fsf-blue); font-size: 1.3em; line-height: 0.8; }
.fsf-pill-note { display: inline-flex; align-items: center; gap: 12px; background: var(--color-bg-soft-green); border-radius: var(--radius-pill); padding: 10px 20px; }
.fsf-pill-note span { font-size: 14px; line-height: 1.5; color: var(--color-success); font-weight: 600; }

.fsf-picker { max-width: 1120px; margin: 0 auto; }
.fsf-picker__card { background: var(--fsf-white); border-radius: var(--radius-card); box-shadow: var(--shadow-md); overflow: hidden; }
.fsf-picker__cols { display: flex; flex-wrap: wrap; }
.fsf-picker__summary { flex: 1 1 200px; padding: 24px; border-right: 1px solid #F0EDE4; min-width: 190px; }
.fsf-picker__date { flex: 1.2 1 240px; padding: 24px; border-right: 1px solid #F0EDE4; min-width: 230px; }
.fsf-picker__slots-col { flex: 1 1 180px; padding: 24px; min-width: 170px; display: flex; flex-direction: column; }

.fsf-svc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.fsf-svc-badge { width: 44px; height: 44px; border-radius: 12px; background: var(--fsf-blue); color: var(--fsf-white); font-weight: 800; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.fsf-svc-title { font-size: 16px; font-weight: 700; line-height: 1.3; }
.fsf-svc-row { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--color-text-muted); margin-bottom: 8px; }
.fsf-svc-row--last { margin-bottom: 14px; }
.fsf-svc-fa { width: 22px; height: 22px; border-radius: var(--radius-pill); background: var(--green-100); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--color-success); }
.fsf-svc-desc { margin: 0; font-size: 13px; line-height: 1.6; color: var(--color-text-muted); }

.fsf-picker__label { font-size: 15px; font-weight: 700; margin-bottom: 14px; }
.fsf-cal { background: var(--fsf-beige); border-radius: 14px; padding: 14px; }
.fsf-cal__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.fsf-cal__navbtn { width: 30px; height: 30px; border-radius: var(--radius-pill); border: 1.5px solid var(--color-border-input); background: var(--fsf-white); cursor: pointer; color: var(--color-text-primary); font-weight: 700; font-family: var(--font-sans); }
.fsf-cal__navbtn:disabled { opacity: 0.4; cursor: default; }
.fsf-cal__month { font-size: 14px; font-weight: 700; }
.fsf-cal__dow { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; text-align: center; font-size: 11px; font-weight: 700; color: var(--color-text-muted); margin-bottom: 4px; }
.fsf-cal__grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; }
.fsf-cal__day { aspect-ratio: 1; border: none; border-radius: 9px; font-size: 12.5px; font-weight: 600; transition: background 0.12s; background: var(--fsf-white); color: var(--color-text-primary); cursor: pointer; font-family: var(--font-sans); }
.fsf-cal__day:hover:not(:disabled):not(.is-selected) { background: var(--blue-50); }
.fsf-cal__day.is-empty { background: transparent; color: transparent; cursor: default; }
.fsf-cal__day:disabled { background: transparent; color: #B9B4A6; cursor: default; }
/* weekends: visibly closed (not just blank like past days) */
.fsf-cal__day.is-off { background: #EEEAE0; color: #B7B1A2; cursor: not-allowed; text-decoration: line-through; text-decoration-thickness: 1.5px; }
.fsf-cal__day.is-selected { background: var(--blue-700); color: var(--fsf-white); }
.fsf-tz { margin-top: 14px; font-size: 12px; color: var(--color-text-muted); }
.fsf-tz strong { color: var(--color-text-primary); font-size: 13px; }

.fsf-slots { display: grid; gap: 8px; overflow-y: auto; max-height: 430px; padding-right: 4px; }
.fsf-slot { border-radius: 10px; padding: 10px 8px; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: all 0.12s; background: var(--fsf-white); color: var(--color-link); border: 1.5px solid var(--blue-200); font-family: var(--font-sans); }
.fsf-slot:hover { border-color: var(--color-link); }
.fsf-slot.is-selected { background: var(--blue-700); color: var(--fsf-white); border-color: var(--blue-700); }
.fsf-slots__empty { font-size: 13px; color: var(--color-text-muted); }

.fsf-continue { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 16px; background: var(--fsf-white); border-radius: var(--radius-pill); padding: 10px 12px 10px 24px; box-shadow: var(--shadow-md); }
.fsf-continue__summary { font-size: 14.5px; font-weight: 700; color: var(--color-text-primary); flex: 1; min-width: 180px; }

/* ---------- forms ---------- */
.fsf-form { max-width: 520px; margin: 0 auto; padding-top: 12px; }
.fsf-form__title { margin: 0 0 8px; font-size: clamp(24px,3vw,30px); font-weight: 800; text-align: center; }
.fsf-form__sub { margin: 0 0 24px; font-size: 15px; line-height: 1.6; color: var(--color-text-muted); text-align: center; text-wrap: pretty; }
.fsf-form__summary { background: var(--color-bg-soft-blue); border-radius: var(--radius-pill); padding: 12px 24px; display: flex; align-items: center; gap: 12px; margin-bottom: 24px; justify-content: center; }
.fsf-form__summary span { font-size: 14.5px; font-weight: 700; color: var(--color-link); }
.fsf-fields { display: grid; gap: 16px; background: var(--fsf-white); border-radius: var(--radius-card); padding: 28px; box-shadow: var(--shadow-sm); }
.fsf-field { display: grid; gap: 7px; }
.fsf-field--row { grid-template-columns: 1fr 1fr; }
.fsf-field label { font-size: 14px; font-weight: 700; }
.fsf-input {
  font-family: var(--font-sans); font-size: 16px; color: var(--color-text-primary);
  background: var(--fsf-white); border: 1.5px solid var(--color-border-input);
  border-radius: var(--radius-input); padding: 13px 16px; outline: none; min-width: 0; width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.fsf-input:focus { border-color: var(--fsf-blue); box-shadow: 0 0 0 3px rgba(13,177,225,0.18); }
textarea.fsf-input { resize: vertical; }
.fsf-consent { display: flex; gap: 12px; align-items: flex-start; background: var(--fsf-beige); border-radius: 14px; padding: 14px 16px; cursor: pointer; }
.fsf-consent input { width: 19px; height: 19px; margin-top: 1px; accent-color: var(--color-link); flex-shrink: 0; }
.fsf-consent span { font-size: 13.5px; line-height: 1.55; color: var(--color-text-primary); }
.fsf-form__note { font-size: 12.5px; color: var(--color-text-muted); line-height: 1.5; text-align: center; }

.fsf-submit { font-size: 19px; font-weight: 700; border: none; border-radius: var(--radius-pill); padding: 16px 32px; margin-top: 4px; transition: background 0.15s; background: var(--color-cta); color: var(--fsf-white); cursor: pointer; font-family: var(--font-sans); }
.fsf-submit:hover { background: var(--color-cta-hover); }
.fsf-submit.is-disabled { background: var(--color-border); color: #8A8A8C; cursor: not-allowed; }
.fsf-submit--sm { font-size: 17px; padding: 14px 28px; }
.fsf-submit--blue { background: var(--blue-700); }
.fsf-submit--blue:hover { background: var(--color-interactive-hover); }

/* ---------- confirmation ---------- */
.fsf-confirmed { max-width: 560px; margin: 0 auto; text-align: center; padding-top: 20px; }
.fsf-tick { width: 76px; height: 76px; border-radius: var(--radius-pill); background: var(--fsf-green); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.fsf-confirmed__title { margin: 0 0 8px; font-size: clamp(26px,3.2vw,34px); font-weight: 800; }
.fsf-confirmed__lead { margin: 0 0 28px; font-size: 16px; line-height: 1.6; color: var(--color-text-muted); text-wrap: pretty; }
.fsf-summary-card { background: var(--fsf-white); border-radius: var(--radius-card); box-shadow: var(--shadow-md); padding: 28px; text-align: left; display: grid; gap: 14px; }
.fsf-summary-card__row { display: flex; gap: 14px; align-items: center; }
.fsf-summary-card__row strong { font-size: 16px; font-weight: 700; display: block; }
.fsf-summary-card__row small { font-size: 13.5px; color: var(--color-text-muted); }
.fsf-confirmed__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 24px; }
.fsf-cal-link { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; text-decoration: none; border-radius: var(--radius-pill); padding: 12px 24px; transition: background 0.15s; }
.fsf-cal-link--solid { background: var(--blue-700); color: var(--fsf-white); }
.fsf-cal-link--solid:hover { background: var(--color-interactive-hover); }
.fsf-cal-link--ghost { background: transparent; color: var(--color-link); border: 2px solid var(--color-link); padding: 10px 22px; }
.fsf-cal-link--ghost:hover { background: var(--color-bg-soft-blue); }
.fsf-confirmed__manage { display: flex; gap: 24px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
.fsf-textlink { background: none; border: none; font-size: 14.5px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; font-family: var(--font-sans); color: var(--color-link); }
.fsf-textlink:hover { color: var(--color-interactive-hover); }
.fsf-textlink--danger { color: var(--orange-700); }
.fsf-textlink--danger:hover { color: #8F3010; }
.fsf-cancel-ask { margin-top: 20px; background: var(--orange-50); border-radius: 16px; padding: 18px 24px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; }
.fsf-cancel-ask span { font-size: 14.5px; font-weight: 600; color: var(--color-text-primary); }
.fsf-btn-sm { border-radius: var(--radius-pill); padding: 9px 20px; font-size: 14px; font-weight: 700; cursor: pointer; border: none; font-family: var(--font-sans); }
.fsf-btn-sm--danger { background: var(--orange-700); color: var(--fsf-white); }
.fsf-btn-sm--ghost { background: var(--fsf-white); color: var(--color-text-primary); border: 1.5px solid var(--color-border-input); }

.fsf-centered { max-width: 480px; margin: 0 auto; text-align: center; padding-top: 48px; }

/* ---------- enquire ---------- */
.fsf-progress { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 28px; }
.fsf-progress__bar { height: 6px; width: 64px; border-radius: var(--radius-pill); background: #D9D4C7; transition: background 0.3s; }
.fsf-progress__bar.is-on { background: var(--blue-700); }
.fsf-progress__label { font-size: 12.5px; font-weight: 700; color: var(--color-text-muted); margin-left: 6px; }
.fsf-slide { transition: opacity 0.22s ease, transform 0.22s ease; }
.fsf-slide.is-out { opacity: 0; transform: translateX(24px); }
.fsf-btn-row { display: flex; gap: 12px; }
.fsf-btn-back { background: var(--fsf-white); color: var(--color-text-primary); font-size: 16px; font-weight: 700; border: 1.5px solid var(--color-border-input); border-radius: var(--radius-pill); padding: 13px 26px; cursor: pointer; transition: background 0.15s; font-family: var(--font-sans); }
.fsf-btn-back:hover { background: var(--color-bg-soft-blue); }

/* ---------- initial appointment: postcode lookup ---------- */
.fsf-postcode { max-width: 460px; margin: 0 auto; padding-top: 40px; }
.fsf-postcode__title { margin: 0 0 8px; font-size: clamp(26px,3.2vw,34px); font-weight: 800; text-align: center; letter-spacing: -0.01em; }
.fsf-postcode__sub { margin: 0 0 28px; font-size: 16px; line-height: 1.6; color: var(--color-text-muted); text-align: center; }
.fsf-postcode__field { position: relative; }
.fsf-postcode__pin { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.fsf-postcode__input {
  font-family: var(--font-sans); font-size: 19px; font-weight: 600; color: var(--color-text-primary);
  background: var(--fsf-white); border: 1.5px solid var(--color-border-input);
  border-radius: var(--radius-pill); padding: 16px 20px 16px 50px; outline: none; width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.fsf-postcode__input:focus { border-color: var(--fsf-blue); box-shadow: 0 0 0 3px rgba(13,177,225,0.18); }
.fsf-suggestions {
  margin-top: 10px; background: var(--fsf-white); border: 1.5px solid var(--color-border-input);
  border-radius: 20px; overflow: hidden; box-shadow: 0 10px 28px rgba(65,64,66,0.14);
}
.fsf-suggest-row {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--fsf-white); border: none; border-bottom: 1px solid #F0EDE4;
  padding: 16px 20px; font-size: 16px; color: var(--color-text-primary); cursor: pointer;
  transition: background 0.12s; font-family: var(--font-sans);
}
.fsf-suggest-row:last-child { border-bottom: none; }
.fsf-suggest-row:hover, .fsf-suggest-row.is-active { background: var(--color-bg-soft-blue); }
.fsf-suggest-row svg { flex-shrink: 0; }
.fsf-postcode__status { margin-top: 16px; font-size: 13px; color: var(--color-text-muted); text-align: center; min-height: 1em; }

/* ---------- initial appointment: choose clinic ---------- */
.fsf-clinics { max-width: 1020px; margin: 0 auto; padding-top: 24px; }
.fsf-clinics__title { margin: 0 0 8px; font-size: clamp(26px,3.2vw,34px); font-weight: 800; text-align: center; letter-spacing: -0.01em; }
.fsf-clinics__sub { margin: 0 0 28px; font-size: 16px; line-height: 1.6; color: var(--color-text-muted); text-align: center; }
.fsf-clinics__sub strong { color: var(--color-text-primary); }
.fsf-clinics__list { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; align-items: stretch; }
.fsf-clinics__more { margin-top: 16px; }
.fsf-clinic-card {
  background: var(--fsf-white); border: 1.5px solid var(--color-border-input); border-radius: 20px;
  height: 420px; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden;
  position: relative; transition: border-color 0.15s, box-shadow 0.15s;
}
.fsf-clinic-card:hover { border-color: var(--fsf-blue); box-shadow: 0 8px 20px rgba(13,177,225,0.16); }
.fsf-clinic-card__photo { height: 170px; flex-shrink: 0; background-color: var(--color-bg-soft-blue); background-size: cover; background-position: center; }
.fsf-clinic-card__body { padding: 20px 22px 24px; display: flex; flex-direction: column; align-items: flex-start; flex: 1; }
.fsf-clinic-card__name { font-size: 16.5px; font-weight: 700; color: var(--color-text-primary); line-height: 1.35; }
.fsf-clinic-card__tag {
  position: absolute; top: 12px; right: 12px; background: var(--fsf-white); color: var(--color-text-muted);
  font-size: 11.5px; font-weight: 700; border-radius: var(--radius-pill); padding: 4px 10px; box-shadow: 0 2px 8px rgba(65,64,66,0.18);
}
.fsf-clinic-card__addr {
  font-size: 13.5px; color: var(--color-text-muted); margin-top: 10px; line-height: 1.6; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.fsf-clinic-card__select {
  background: transparent; color: var(--color-link); font-size: 14.5px; font-weight: 700;
  border: 2px solid var(--color-link); border-radius: var(--radius-pill); padding: 10px 22px; cursor: pointer;
  flex-shrink: 0; font-family: var(--font-sans); transition: background 0.15s, color 0.15s; margin-top: 20px;
}
.fsf-clinic-card__select:hover { background: var(--color-link); color: var(--fsf-white); }
.fsf-clinics__toggle-wrap { text-align: center; margin-top: 22px; }
.fsf-clinics__toggle {
  display: inline-flex; align-items: center; gap: 8px; background: transparent; border: none;
  padding: 8px 12px; font-size: 15px; font-weight: 700; color: var(--color-link); cursor: pointer;
  text-decoration: underline; text-underline-offset: 4px; font-family: var(--font-sans);
}
.fsf-clinics__chevron { transition: transform 0.2s; }
.fsf-clinics__toggle.is-open .fsf-clinics__chevron { transform: rotate(180deg); }

/* ---------- initial appointment: MyHealth1st inline embed ---------- */
.fsf-embed { max-width: 760px; margin: 0 auto; padding-top: 4px; }
.fsf-embed__confirm { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 14px; }
.fsf-embed__confirm svg { flex-shrink: 0; }
.fsf-embed__confirm span { font-size: 14px; color: var(--color-text-muted); text-align: center; }
.fsf-embed__confirm strong { color: var(--color-text-primary); }
.fsf-embed__clinic { color: var(--color-success); }
.fsf-embed__card { background: var(--fsf-white); border: 1px solid #D9D4C7; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-md); position: relative; min-height: 260px; }
.fsf-embed__iframe { width: 100%; min-height: 820px; border: none; display: block; }
.fsf-embed__loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 80px 28px; font-size: 14px; color: var(--color-text-muted); }
.fsf-embed__spinner { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--blue-100); border-top-color: var(--fsf-blue); animation: fsf-spin 0.8s linear infinite; }
@keyframes fsf-spin { to { transform: rotate(360deg); } }
.fsf-embed__fallback { padding: 44px 28px; text-align: center; }
.fsf-embed__fallback p { margin: 0 0 12px; font-size: 15px; line-height: 1.6; color: var(--color-text-muted); }
.fsf-embed__fallback p:last-child { margin-bottom: 0; }
.fsf-embed__fallback strong { color: var(--color-text-primary); }
.fsf-embed__opennew { margin-top: 12px; font-size: 13px; color: var(--color-text-muted); text-align: center; }
.fsf-embed__opennew a { color: var(--color-link); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 720px) {
  .fsf-drawer__body { padding: 8px 20px 40px; }
  .fsf-picker__cols { flex-direction: column; }
  .fsf-picker__summary, .fsf-picker__date { border-right: none; border-bottom: 1px solid #F0EDE4; }
  .fsf-slots { max-height: 260px; }
  .fsf-field--row { grid-template-columns: 1fr; }
  .fsf-chooser__tiles { grid-template-columns: 1fr; }
  .fsf-tile { height: auto; }
  .fsf-clinics__list { grid-template-columns: 1fr; }
  .fsf-clinic-card { height: auto; }
}