/* ============================================================
   fs02.css — FindScan, 2026-09-09
   Styles for fs02.js only. Everything is prefixed .fs2- or scoped
   to the body-part dropdown, so deleting this file and fs02.js
   returns the pages to their previous state exactly.
   ============================================================ */

:root {
  --fs2-teal: var(--teal, #14657f);
  --fs2-ink: var(--ink, #17181c);
  --fs2-line: var(--line, #e6e8e3);
  --fs2-card: var(--card, #fff);
  --fs2-bg: var(--bg, #f7f9fa);
  --fs2-muted: #6b7280;
  --fs2-radius: 16px;
}

/* ---------- page transitions ----------
   `both` matters: the fade starts at 0 but always finishes at 1, so a page
   whose JavaScript never runs still ends up visible rather than blank. */

@media (prefers-reduced-motion: no-preference) {
  body {
    animation: fs2-page-in 0.22s ease-out both;
  }

  body.fs2-leaving {
    opacity: 0;
    transition: opacity 0.15s ease-in;
  }
}

@keyframes fs2-page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* A placeholder option is not a value — it should read as prompt text. */
option.fs2-ph {
  color: #98a2ab;
}

select:has(> option.fs2-ph:checked) {
  color: #7c8894;
}

/* ---------- booking page: the scans chosen so far ----------
   This list is the thing the patient is about to pay for, so it should not
   be the smallest text in the box. */

.booking-select-box .svc-cart-title {
  font-size: 17px;
  font-weight: 650;
}

.booking-select-box .svc-cart-row {
  padding-top: 12px;
  padding-bottom: 12px;
}

.booking-select-box .svc-check-label {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.booking-select-box .svc-check-meta {
  font-size: 13px;
}

.booking-select-box .svc-check-price {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------- results page ---------- */

/* The search card pins under the top of the viewport on desktop so the
   filters stay reachable while scrolling a long list. .stuck-overlay is
   app.js's own fixed-position mode and must keep winning. */
@media (min-width: 981px) {
  .results-search-card:not(.stuck-overlay) {
    position: sticky;
    top: 10px;
    z-index: 60;
  }
}

/* Hold the list back until it stops re-rendering, so clinics don't appear
   and then vanish when the filtered search lands a moment later. */
#centreList.fs2-settling {
  position: relative;
  min-height: 200px;
}

#centreList.fs2-settling > * {
  visibility: hidden;
}

#centreList.fs2-settling::after {
  content: "Finding clinics…";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--fs2-muted);
}

#resultsCount.fs2-settling {
  visibility: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  #centreList.fs2-settled > * {
    animation: fs2-page-in 0.2s ease-out both;
  }
}

/* ---------- shared bits ---------- */

.fs2-h {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 650;
  color: var(--fs2-ink);
  letter-spacing: -0.01em;
}

.fs2-tag {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #eef2f4;
  color: #35505c;
  white-space: nowrap;
}

.fs2-tag.m-mri { background: #e4f0f4; color: #10566b; }
.fs2-tag.m-ct  { background: #eae7f6; color: #4a3c86; }
.fs2-tag.m-xr  { background: #f6ece2; color: #8a5324; }
.fs2-tag.m-us  { background: #e5f2e9; color: #2c6b45; }
.fs2-tag.m-gp  { background: #f1f0ec; color: #55564f; }

/* ============================================================
   Body-part dropdown: type-to-find
   ============================================================ */

/* Selectors are .msel-menu-qualified so they outrank the site's own
   input styling inside the dropdown. */
.msel-menu .fs2-msel-find-wrap {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 10px 12px 8px;
  background: var(--fs2-card);
  border: 0;
}

/* No border in any state — the filled pill is the affordance, and a border
   appearing on click reads as an error box. Focus is shown by the field
   lightening instead, so it is still visible to keyboard users. */
.msel-menu .fs2-msel-find,
.msel-menu .fs2-msel-find:hover,
.msel-menu .fs2-msel-find:focus,
.msel-menu .fs2-msel-find:focus-visible,
.msel-menu .fs2-msel-find:active {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  color: var(--fs2-ink);
  background: #eef1f3;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.msel-menu .fs2-msel-find:focus,
.msel-menu .fs2-msel-find:focus-visible {
  background: #e3e9ec;
}

.msel-menu .fs2-msel-find::-webkit-search-decoration,
.msel-menu .fs2-msel-find::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.fs2-msel-none {
  padding: 14px 14px 16px;
  font-size: 14px;
  color: var(--fs2-muted);
}

/* .msel-option carries display:flex, which beats the browser's own
   [hidden]{display:none}. Without this, filtering marks options without
   removing them and the patient still scrolls past 49 rows. */
.msel-menu .msel-option[hidden],
.msel-menu .msel-group-label[hidden] {
  display: none !important;
}

/* ============================================================
   Clinic page — the basket
   ============================================================ */

#view-profile .fs2-basket {
  background: var(--fs2-card);
  border: 1px solid var(--fs2-line);
  border-radius: var(--fs2-radius);
  padding: 18px 18px 16px;
  margin: 0 0 22px;
  box-shadow: 0 1px 2px rgba(23, 24, 28, 0.04);
}

#view-profile .fs2-basket-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

#view-profile .fs2-pill {
  flex: 0 0 auto;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(20, 101, 127, 0.1);
  color: var(--fs2-teal);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

#view-profile .fs2-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#view-profile .fs2-line {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 16px;
  border: 1px solid var(--fs2-line);
  border-radius: 12px;
  background: var(--fs2-bg);
}

#view-profile .fs2-line .fs2-tag {
  font-size: 13px;
  padding: 5px 12px;
}

#view-profile .fs2-line-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--fs2-ink);
}

#view-profile .fs2-line-name small {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--fs2-muted);
  margin-top: 3px;
}

#view-profile .fs2-line-price {
  flex: 0 0 auto;
  font-size: 19px;
  font-weight: 700;
  color: var(--fs2-ink);
  font-variant-numeric: tabular-nums;
}

#view-profile .fs2-remove {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--fs2-line);
  border-radius: 8px;
  background: var(--fs2-card);
  color: var(--fs2-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

#view-profile .fs2-remove:hover {
  color: #b3261e;
  border-color: #e7c5c2;
}

#view-profile .fs2-basket-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--fs2-line);
}

#view-profile .fs2-total {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

#view-profile .fs2-total span {
  font-size: 14px;
  color: var(--fs2-muted);
}

#view-profile .fs2-total strong {
  font-size: 26px;
  font-weight: 700;
  color: var(--fs2-teal);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

#view-profile .fs2-cta {
  flex: 0 1 auto;
  padding: 13px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--fs2-teal);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 650;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

#view-profile .fs2-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(20, 101, 127, 0.25);
}

#view-profile .fs2-fine {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--fs2-muted);
}

#view-profile .fs2-basket.is-empty {
  border-style: dashed;
  background: var(--fs2-bg);
}

#view-profile .fs2-empty-text {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--fs2-muted);
  max-width: 62ch;
}

#view-profile .fs2-empty-link {
  display: inline-block;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--fs2-teal);
  color: #fff;
  font-size: 15px;
  font-weight: 650;
  text-decoration: none;
}

/* ============================================================
   Clinic page — the chooser
   ============================================================ */

#view-profile .fs2-browse-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 14px;
}

#view-profile .fs2-find-wrap {
  flex: 1 1 260px;
  max-width: 340px;
}

#view-profile .fs2-find {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  border: 1px solid var(--fs2-line);
  border-radius: 999px;
  font: inherit;
  font-size: 15px;
  color: var(--fs2-ink);
  background: var(--fs2-card);
  -webkit-appearance: none;
  appearance: none;
}

#view-profile .fs2-find:focus {
  outline: none;
  border-color: var(--fs2-teal);
  box-shadow: 0 0 0 3px rgba(20, 101, 127, 0.14);
}

#view-profile .fs2-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  align-items: start;
}

#view-profile .fs2-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  background: var(--fs2-card);
  border: 1px solid var(--fs2-line);
  border-radius: var(--fs2-radius);
}

#view-profile .fs2-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

#view-profile .fs2-card-n {
  font-size: 12px;
  color: var(--fs2-muted);
}

#view-profile .fs2-lab {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fs2-muted);
}

#view-profile .fs2-select {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 34px 10px 12px;
  border: 1px solid var(--fs2-line);
  border-radius: 10px;
  background-color: var(--fs2-bg);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 11px 7px;
  font: inherit;
  font-size: 15px;
  color: var(--fs2-ink);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

#view-profile .fs2-select:focus {
  outline: none;
  border-color: var(--fs2-teal);
  box-shadow: 0 0 0 3px rgba(20, 101, 127, 0.14);
}

/* One section means nothing to choose, so it reads as a caption
   rather than a greyed-out control the patient will try to click. */
#view-profile .fs2-static {
  padding: 8px 0 2px;
  font-size: 15px;
  font-weight: 600;
  color: var(--fs2-ink);
}

#view-profile .fs2-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--fs2-line);
}

#view-profile .fs2-card-price {
  font-size: 20px;
  font-weight: 700;
  color: var(--fs2-ink);
  font-variant-numeric: tabular-nums;
}

#view-profile .fs2-add {
  padding: 9px 16px;
  border: 1px solid var(--fs2-teal);
  border-radius: 999px;
  background: var(--fs2-teal);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}

#view-profile .fs2-add[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

#view-profile .fs2-noresult {
  padding: 18px;
  border: 1px dashed var(--fs2-line);
  border-radius: var(--fs2-radius);
  color: var(--fs2-muted);
  font-size: 15px;
}

#view-profile .fs2-clear {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--fs2-teal);
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- the full list, collapsed ---------- */

#view-profile .fs2-all {
  margin-top: 20px;
  border-top: 1px solid var(--fs2-line);
  padding-top: 14px;
}

#view-profile .fs2-all > summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--fs2-teal);
  list-style: none;
}

#view-profile .fs2-all > summary::-webkit-details-marker { display: none; }

#view-profile .fs2-all > summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform 0.15s ease;
}

#view-profile .fs2-all[open] > summary::before { content: "▾ "; }

#view-profile .fs2-all-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#view-profile .fs2-all-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--fs2-line);
  border-radius: 12px;
  background: var(--fs2-card);
}

#view-profile .fs2-all-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--fs2-ink);
}

#view-profile .fs2-all-price {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

#view-profile .fs2-add-small {
  padding: 6px 14px;
  border: 1px solid var(--fs2-teal);
  border-radius: 999px;
  background: var(--fs2-card);
  color: var(--fs2-teal);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

#view-profile .fs2-empty-clinic {
  padding: 20px;
  border: 1px dashed var(--fs2-line);
  border-radius: var(--fs2-radius);
  color: var(--fs2-muted);
}

@media (max-width: 620px) {
  #view-profile .fs2-basket-foot { flex-direction: column; align-items: stretch; }
  #view-profile .fs2-cta { width: 100%; }
  #view-profile .fs2-find-wrap { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  #view-profile .fs2-cta { transition: none; }
  #view-profile .fs2-cta:hover { transform: none; }
}

/* ============================================================
   PART 7 — the clinician entrance
   Outlined, not filled: it points off the patient's path rather
   than competing with it. inset box-shadow instead of a border so
   the outline costs no layout shift against its four neighbours.
   ============================================================ */
.navlink.fs2-nav-clin {
  color: #14657f;
  box-shadow: inset 0 0 0 1px rgba(20, 101, 127, .3);
}
.navlink.fs2-nav-clin:hover {
  color: #0f4f63;
  background: rgba(20, 101, 127, .07);
  box-shadow: inset 0 0 0 1px rgba(20, 101, 127, .55);
}
.mobile-navlink.fs2-nav-clin {
  color: #14657f;
  font-weight: 650;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid #E6E8E3;
}

/* ============================================================
   PART 8 — results page: the map holds still
   The map pane is already sticky, but a grid item stretches to the
   row, leaving it no room to travel; capping its height to the
   viewport slot below the search card is what actually pins it.
   ============================================================ */
.fs2-filter-tab { display: none; }

@media (min-width: 981px) {
  .results-layout.fs2-map-on > .results-right {
    align-self: start;
    position: sticky;
    top: var(--fs2-stick, 150px);
    height: calc(100vh - var(--fs2-stick, 150px) - 20px);
    min-height: 380px;
  }
  .results-layout.fs2-map-on > .results-right > .map-panel-large { height: 100%; }

  .fs2-filter-tab {
    position: sticky;
    top: var(--fs2-stick, 150px);
    z-index: 59;
    display: inline-flex;
    align-items: center;
    margin: 0 0 14px;
    padding: 8px 16px;
    border: 0;
    border-radius: 999px;
    background: #14657f;
    color: #fff;
    font: inherit;
    font-size: 13.5px;
    font-weight: 650;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(23, 24, 28, .18);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, background .18s ease;
  }
  .fs2-filter-tab.fs2-stuck { opacity: 1; pointer-events: auto; }
  .fs2-filter-tab:hover { background: #0f4f63; }

  .filters-bar.fs2-filters-pinned {
    position: fixed;
    /* Below the tab, not under it — the tab pins at --fs2-stick and is
       38px tall, and a panel whose first label is hidden is a broken panel. */
    top: calc(var(--fs2-stick, 150px) + 46px);
    z-index: 58;
    margin: 0;
    padding: 16px 18px;
    max-height: calc(100vh - var(--fs2-stick, 150px) - 74px);
    overflow: auto;
    background: #fff;
    border: 1px solid #E6E8E3;
    border-radius: 16px;
    box-shadow: 0 20px 44px rgba(23, 24, 28, .18);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fs2-filter-tab { transition: none; }
}

/* ============================================================
   PART 9 — booking page: the scan chips get an edge
   The chips already carried a border, in a grey a shade off white,
   which on a near-white strip is the same as no border at all.
   ============================================================ */
.step-recap { border: 1px solid #E6E8E3; }
.step-recap-chip {
  border: 1px solid #D3DBE0;
  box-shadow: 0 1px 2px rgba(23, 24, 28, .05);
}

/* ============================================================
   PART 10 — the booking step says why it will not advance
   ============================================================ */
.fs2-step-hint {
  margin: 0 0 12px;
  padding: 10px 13px;
  border: 1px solid #f0cdc8;
  border-radius: 10px;
  background: #fdf0ee;
  color: #8f2018;
  font-size: 13px;
  line-height: 1.45;
}
.fs2-nudge {
  border-radius: 12px;
  animation: fs2-nudge 1.3s ease-out 1;
}
@keyframes fs2-nudge {
  0%   { box-shadow: 0 0 0 0 rgba(20, 101, 127, 0); }
  20%  { box-shadow: 0 0 0 4px rgba(20, 101, 127, .24); }
  70%  { box-shadow: 0 0 0 4px rgba(20, 101, 127, .24); }
  100% { box-shadow: 0 0 0 0 rgba(20, 101, 127, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .fs2-nudge { animation: none; box-shadow: 0 0 0 3px rgba(20, 101, 127, .24); }
}

/* ============================================================
   PART 11 — a field that is missing should look missing
   ============================================================ */
input.fs2-invalid,
select.fs2-invalid,
textarea.fs2-invalid {
  border-color: #c0574d !important;
  box-shadow: 0 0 0 3px rgba(192, 87, 77, .16) !important;
}

/* ============================================================
   PART 13 — the checkout step: level cards, no dead gutters
   Stripe draws its form about 440px wide and centres it in
   whatever space it is given, so a 758px column produced ~140px
   of white either side. The iframe is cross-origin and cannot be
   styled, so narrowing its container is the only lever — and the
   container must be narrowed, never re-parented: moving
   #stripeCheckoutHost in the DOM reloads the iframe and breaks
   Stripe's auto-resize handshake (the old clipped-Pay-button bug).
   ============================================================ */
@media (min-width: 981px) {
  #stripeCheckoutHost {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    /* app.js sets this padding inline when it creates the host. */
    padding: 0 !important;
  }

  /* The grid was align-items:start, so each column stopped at its own
     content and the summary card ended well short of the Stripe card. */
  .drawer-body { align-items: stretch; }
  .drawer-body > #drawerSteps { height: 100%; }
}