/*
 * The main site's services catalogue (/services) and service pages (/services/<practice>/<service>).
 * CMR-2026-10-26-452. Tokens come from design_system.css, which loads before this file on every page.
 * Mobile first: one control per row and a horizontally scrolling chip rail on a phone, a single row from 680px.
 */

.services_inner,
.service_inner {
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CATALOGUE — search
   ───────────────────────────────────────────────────────────────────────────── */
.services_search_section {
  padding: 20px 0 0;
  background: linear-gradient(180deg, var(--surface) 0%, var(--page) 100%);
}

.services_search_container {
  position: relative;
}

.services_search_icon {
  left: 15px;
  pointer-events: none;
}

/* the field is an input_ndd; this only makes it the page's larger search field and leaves room for the two icons */
.services_search_field {
  padding: 15px 50px 15px 44px;
  box-shadow: var(--shadow_xs);
  font-size: 1rem;
  text-overflow: ellipsis;
}

.services_search_clear_button {
  position: absolute;
  top: 50%;
  right: 10px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: var(--page);
  color: var(--muted);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background 0.15s ease, color 0.15s ease;
}

.services_search_clear_button:hover {
  background: var(--brand_soft);
  color: var(--brand);
}

/* ─────────────────────────────────────────────────────────────────────────────
   CATALOGUE — location, visit type, sort
   ───────────────────────────────────────────────────────────────────────────── */
.services_controls_container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 14px 0 16px;
}

.services_location_button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 11px 14px;
  border: 1px solid color-mix(in srgb, var(--brand) 32%, var(--surface));
  border-radius: var(--radius_pill);
  background: var(--brand_soft);
  color: var(--brand_deep);
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.services_location_button:hover {
  border-color: var(--brand);
}

.services_location_button svg {
  flex: 0 0 auto;
  color: var(--brand);
}

.services_location_name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.services_location_change {
  margin-left: auto;
  color: var(--brand);
  font-size: 0.8rem;
  font-weight: 650;
}

.services_control_divider {
  display: none;
}

/* the chip rail scrolls sideways on a phone instead of wrapping into three cramped lines */
.services_chip_row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 0 -16px;
  padding: 2px 16px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.services_chip_row::-webkit-scrollbar {
  display: none;
}

.services_chip {
  flex: 0 0 auto;
  padding: 10px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius_pill);
  background: var(--surface);
  color: var(--muted);
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.services_chip:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.services_chip.selected {
  padding: 9px 14px;
  border: 2px solid var(--brand);
  background: var(--brand_soft);
  color: var(--brand);
  font-weight: 700;
}

.services_sort_container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.services_sort_label {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 650;
}

.services_sort_select {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  padding: 11px 32px 11px 12px;
  font-size: 0.85rem;
  font-weight: 650;
}

.services_location_panel_container {
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius_lg);
  background: var(--surface);
  box-shadow: var(--shadow_small);
}

.services_location_panel_title {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 800;
}

.services_location_panel_text {
  margin: 6px 0 14px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.55;
}

.services_state_grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.services_state_option {
  flex: 1 1 calc(50% - 4px);
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 650;
  cursor: pointer;
}

.services_state_option:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.services_state_option.selected {
  padding: 10px 13px;
  border: 2px solid var(--brand);
  background: var(--brand_soft);
  color: var(--brand);
  font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CATALOGUE — the list
   ───────────────────────────────────────────────────────────────────────────── */
.services_list_section {
  padding: 0 0 64px;
}

.services_result_line {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

.services_result_line strong {
  color: var(--ink);
  font-weight: 800;
}

.services_lines_list {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius_lg);
  background: var(--surface);
  box-shadow: var(--shadow_xs);
  list-style: none;
}

.services_line_item {
  display: flex;
  min-width: 0;
  border-bottom: 1px solid var(--line);
}

.services_line_item:last-child {
  border-bottom: none;
}

/* one markup, two layouts: the grid areas move the price rather than duplicating it */
.services_line_link {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-areas:
    'icon body'
    '.    price';
  gap: 4px 14px;
  flex: 1;
  align-items: start;
  min-width: 0;
  padding: 16px;
  color: inherit;
  text-decoration: none;
  transition: background 0.15s ease;
}

.services_line_link:hover,
.services_line_link:focus-visible {
  background: color-mix(in srgb, var(--brand_soft) 55%, var(--surface));
  color: inherit;
  text-decoration: none;
}

.services_line_icon {
  grid-area: icon;
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--brand) 26%, var(--surface));
  border-radius: var(--radius_lg);
  background: var(--brand_soft);
  color: var(--brand);
  font-size: 1rem;
  font-weight: 800;
}

.services_line_body {
  grid-area: body;
  min-width: 0;
}

.services_line_title {
  display: block;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.3;
}

.services_line_meta {
  display: block;
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.45;
}

.services_line_meta strong {
  color: var(--ink);
  font-weight: 700;
}

.services_line_text {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 0.83rem;
  line-height: 1.5;
}

.services_line_price {
  grid-area: price;
  margin-top: 10px;
  color: var(--brand_deep);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
}

.services_line_arrow {
  display: none;
}

.services_empty_container {
  padding: 36px 18px;
  border: 1px dashed var(--line);
  border-radius: var(--radius_lg);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.6;
  text-align: center;
}

.services_empty_container strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
  font-size: 1rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SERVICE PAGE — hero
   ───────────────────────────────────────────────────────────────────────────── */
.service_hero_section {
  padding: 18px 0 26px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--page) 100%);
  border-bottom: 1px solid var(--line);
}

.service_breadcrumb {
  margin-bottom: 16px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.5;
}

.service_breadcrumb a:hover {
  color: var(--brand);
}

.service_eyebrow {
  margin-bottom: 10px;
  color: var(--brand);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.service_title {
  max-width: 740px;
  margin: 0;
  color: var(--brand_deep);
  font-size: clamp(1.75rem, 7vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.06;
}

.service_summary {
  max-width: 640px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.service_tag_row {
  display: flex;
  gap: 7px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.service_tag {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius_pill);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 650;
}

.service_tag_mode {
  border-color: color-mix(in srgb, var(--brand) 26%, var(--surface));
  background: var(--brand_soft);
  color: var(--brand);
}

/* ─────────────────────────────────────────────────────────────────────────────
   SERVICE PAGE — body
   ───────────────────────────────────────────────────────────────────────────── */
.service_body_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  padding: 26px 0 40px;
}

/* on a phone the price card comes before the long copy */
.service_price_column {
  order: 1;
}

.service_content_column {
  order: 2;
}

.service_section_block {
  padding: 20px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius_lg);
  background: var(--surface);
  box-shadow: var(--shadow_xs);
}

.service_section_block + .service_section_block {
  margin-top: 16px;
}

.service_section_title {
  margin: 0 0 12px;
  color: var(--brand_deep);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.service_paragraph {
  margin: 0;
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.68;
}

.service_paragraph + .service_paragraph {
  margin-top: 12px;
}

/* one plain strip, not a card inside a card. The colours come from alert_ndd_danger; this only spaces it and
   sizes its text, so there is one danger red on the site rather than a third one in a page-local file. */
.service_alert_strip {
  margin: 16px 0;
  font-weight: 600;
  line-height: 1.55;
}

.service_alert_strip svg {
  flex: 0 0 auto;
  margin-top: 1px;
}

.service_steps_list {
  margin: 0;
  padding: 0;
  counter-reset: service_step;
  list-style: none;
}

.service_steps_item {
  position: relative;
  padding: 0 0 18px 42px;
  counter-increment: service_step;
}

.service_steps_item:last-child {
  padding-bottom: 0;
}

.service_steps_item::before {
  content: counter(service_step);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: var(--brand_soft);
  color: var(--brand);
  font-size: 0.8rem;
  font-weight: 800;
}

.service_steps_item::after {
  content: '';
  position: absolute;
  top: 32px;
  bottom: 4px;
  left: 13px;
  width: 2px;
  background: var(--line);
}

.service_steps_item:last-child::after {
  display: none;
}

.service_steps_name {
  display: block;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.4;
}

.service_steps_text {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.55;
}

.service_lists_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.service_list_heading {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.service_list_heading_included {
  color: var(--green);
}

.service_list_heading_excluded {
  color: var(--muted);
}

.service_list_included,
.service_list_excluded {
  margin: 0;
  padding: 0;
  list-style: none;
}

.service_list_item {
  position: relative;
  padding: 0 0 9px 24px;
  color: var(--ink);
  font-size: 0.88rem;
  line-height: 1.55;
}

.service_list_item:last-child {
  padding-bottom: 0;
}

.service_list_item::before {
  position: absolute;
  top: 0;
  left: 0;
  font-weight: 800;
}

.service_list_included .service_list_item::before {
  content: '\2713';
  color: var(--green);
}

.service_list_excluded .service_list_item {
  color: var(--muted);
}

.service_list_excluded .service_list_item::before {
  content: '\2715';
  color: var(--muted);
}

.service_requirement_list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.service_requirement_item {
  position: relative;
  padding: 0 0 11px 28px;
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.55;
}

.service_requirement_item:last-child {
  padding-bottom: 0;
}

.service_requirement_item::before {
  content: '\2713';
  position: absolute;
  top: 1px;
  left: 0;
  display: grid;
  width: 19px;
  height: 19px;
  place-items: center;
  border-radius: 50%;
  background: var(--brand_soft);
  color: var(--brand);
  font-size: 0.68rem;
  font-weight: 800;
}

.service_requirement_item strong {
  font-weight: 800;
}

/* label / value rows, shared by the visit information and the practice card */
.service_fact_list {
  margin: 14px 0 0;
}

.service_fact_row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  padding: 9px 0;
}

.service_fact_row dt {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.service_fact_row dd {
  margin: 0;
  color: var(--ink);
  font-size: 0.88rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.service_fact_row dd a {
  color: var(--brand);
  font-weight: 650;
}

.service_clinician_row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

/* the name and its line of context take whatever the avatar and the profile control leave. min-width: 0 is what
   lets a long practice-and-states line wrap instead of pushing the control off the row. */
.service_clinician_identity {
  flex: 1 1 auto;
  min-width: 0;
}

.service_clinician_list .service_clinician_row:first-child {
  padding-top: 0;
}

.service_clinician_list .service_clinician_row:last-child {
  border-bottom: none;
}

.service_clinician_avatar {
  display: grid;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 50%;
  background: var(--brand_soft);
  color: var(--brand);
  font-size: 0.9rem;
  font-weight: 800;
}

/* the clinician's own photograph in the same circle the initials sit in. display: block overrides the grid above,
   which does nothing useful for a replaced element, and object-fit is what stops a portrait being squashed into
   the square box the width and height give it. */
.service_clinician_photo {
  display: block;
  object-fit: cover;
}

/* THE WAY TO THE CLINICIAN'S OWN PAGE. The word from 480px up and the chevron below it, where the row has no
   room for a word; both are in the markup and only one is ever on screen. The anchor carries the clinician's
   name as its accessible name, so what is announced does not change with the viewport. */
.service_clinician_profile_link {
  flex: 0 0 auto;
  gap: 4px;
}

.service_clinician_profile_word {
  display: none;
}

.service_clinician_profile_caret {
  font-size: 1.15rem;
  line-height: 1;
}

.service_clinician_name {
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 800;
}

.service_clinician_meta {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

/* the places inside the Visit location card's In person row (CMR-2026-11-03-538). A list rather than a sentence
   because each place carries a street address, and two of those run together when read as prose. */
.service_place_list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.service_place_item {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.service_place_address {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

/* THE OFFERING PRACTICE, as a continuation of the clinician card rather than a card of its own. It used to carry
   its own border, radius and page-grey fill inside the already-bordered section, which reads as a box inside a
   box; the owner asked for it removed on 2026-11-03 (CMR-2026-11-03-539). A hairline rule is enough to separate
   it from the clinicians above, and the section's white surface now runs the whole way down. */
.service_practice_card_container {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* under its own heading on a clinician's profile the attribution is the first thing in the section, so the
   separating rule would read as a stray line under the heading */
/* both class names on purpose. The 680px block below re-declares .service_practice_card_container's margin and
   padding, and at equal specificity the later rule wins -- so a single-class modifier here loses the margin half
   of this reset on a tablet and the gap reappears under the heading. */
.service_practice_card_container.service_practice_card_standalone {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.service_practice_card_header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.service_practice_card_mark {
  display: grid;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  background: var(--brand_soft);
  color: var(--brand);
  font-size: 0.85rem;
  font-weight: 800;
}

.service_practice_card_name {
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.3;
}

.service_practice_card_entity {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.service_practice_card_action {
  margin-top: 14px;
}

.service_faq_item {
  border-bottom: 1px solid var(--line);
}

.service_faq_item:last-child {
  border-bottom: none;
}

.service_faq_item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.45;
  cursor: pointer;
  list-style: none;
}

.service_faq_item summary::-webkit-details-marker {
  display: none;
}

.service_faq_item summary::after {
  content: '+';
  flex: 0 0 auto;
  color: var(--brand);
  font-size: 1.15rem;
  font-weight: 800;
}

.service_faq_item[open] summary::after {
  content: '\2013';
}

.service_faq_answer {
  margin: 0;
  padding: 0 0 15px;
  color: var(--muted);
  font-size: 0.87rem;
  line-height: 1.65;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SERVICE PAGE — price panel
   ───────────────────────────────────────────────────────────────────────────── */
.service_price_panel_container {
  padding: 20px 16px;
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line));
  border-radius: var(--radius_lg);
  background: var(--surface);
  box-shadow: var(--shadow_small);
}

.service_price_big {
  color: var(--brand_deep);
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
}

.service_price_table {
  width: 100%;
  margin: 18px 0 0;
  border-collapse: collapse;
}

.service_price_table td {
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.83rem;
  line-height: 1.4;
}

.service_price_table td:last-child {
  color: var(--ink);
  font-weight: 650;
  text-align: right;
  white-space: nowrap;
}

.service_price_table tr.total td {
  padding-top: 12px;
  border-bottom: none;
  color: var(--ink);
  font-weight: 800;
}

.service_price_note {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.55;
}

.service_price_action {
  margin-top: 16px;
}

.service_footer_note {
  /* the book bar is fixed over the foot of the page below 680px, so the last text clears its height */
  padding: 22px 0 calc(96px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.65;
}

.service_footer_link {
  display: block;
  margin-top: 8px;
  color: var(--brand);
  font-weight: 650;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SERVICE PAGE — the one other thing a visitor can do from here
   ───────────────────────────────────────────────────────────────────────────── */
.service_other_option_container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  margin-top: 28px;
  padding: 20px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius_lg);
  box-shadow: var(--shadow_xs);
}

.service_other_option_text {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.service_other_option_button {
  flex: 0 0 auto;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SERVICE PAGE — mobile book bar

   One action, one button. The bar used to carry the price beside a shrink-to-fit
   button, which repeated the figure already set in large type in the panel above
   and left the page with three book buttons on a phone. The price stays in the
   panel; the bar is the button.
   ───────────────────────────────────────────────────────────────────────────── */
.service_book_bar_container {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 30;
  width: 100%;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--line);
  /* --shadow_small's magnitude with the y offset negated, because this bar casts UPWARD. The token is not a
     drop-in here: swapping it puts the shadow under the bar where nothing can see it. */
  box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08);
}

.service_book_bar_container .btn_ndd {
  width: 100%;
}

/* THE PANEL'S BUTTON AND THE BAR'S ARE THE SAME ACTION, so exactly one is on screen.
   This pair and the display:none on the bar at 680px below are the two halves of one
   rule — change either and the page shows the button twice or not at all. */
.service_price_action_has_bar {
  display: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Tablet and up
   ───────────────────────────────────────────────────────────────────────────── */
@media (min-width: 680px) {
  .services_inner,
  .service_inner {
    width: min(var(--max), calc(100% - 48px));
  }

  .services_search_section {
    padding: 26px 0 0;
  }

  .services_search_field {
    padding: 16px 52px 16px 50px;
  }

  .services_search_icon {
    left: 18px;
  }

  .services_controls_container {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 16px 0 18px;
  }

  .services_location_button {
    width: auto;
    padding: 9px 14px;
    font-size: 0.82rem;
  }

  .services_location_change {
    margin-left: 4px;
  }

  .services_control_divider {
    display: block;
    width: 1px;
    height: 24px;
    background: var(--line);
  }

  .services_chip_row {
    overflow: visible;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
  }

  .services_sort_container {
    margin-left: auto;
  }

  .services_sort_select {
    flex: 0 0 auto;
    padding: 9px 30px 9px 12px;
    font-size: 0.8rem;
  }

  .services_state_option {
    flex: 0 0 auto;
  }

  .services_line_link {
    grid-template-columns: 62px minmax(0, 1fr) auto;
    grid-template-areas: 'icon body price';
    gap: 18px;
    align-items: center;
    padding: 18px 24px;
  }

  .services_line_icon {
    width: 62px;
    height: 62px;
    font-size: 1.1rem;
  }

  .services_line_price {
    min-width: 96px;
    margin-top: 0;
    text-align: right;
  }

  .service_hero_section {
    padding: 24px 0 34px;
  }

  .service_lists_grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }

  .service_practice_card_container {
    margin-top: 20px;
    padding-top: 20px;
  }

  .service_fact_list {
    margin-top: 18px;
  }

  .service_fact_row {
    grid-template-columns: 136px minmax(0, 1fr);
    gap: 18px;
    padding: 11px 0;
    align-items: baseline;
  }

  .service_section_block {
    padding: 24px 26px;
  }

  .service_price_panel_container {
    padding: 24px 26px;
  }

  /* the bar's half of the pair declared with .service_price_action_has_bar above */
  .service_book_bar_container {
    display: none;
  }

  /* no bar from here up, so the footer note needs no clearance under it */
  .service_footer_note {
    padding-bottom: 32px;
  }

  .service_price_action_has_bar {
    display: block;
  }

  .service_other_option_container {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 26px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Desktop — content left, price panel sticky right; the row arrow earns its place
   ───────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1000px) {
  .services_line_link {
    grid-template-columns: 62px minmax(0, 1fr) 120px 18px;
    grid-template-areas: 'icon body price arrow';
  }

  .services_line_arrow {
    grid-area: arrow;
    display: block;
    color: var(--brand);
    font-size: 1rem;
    font-weight: 800;
    text-align: right;
  }
}

@media (min-width: 960px) {
  .service_body_grid {
    grid-template-columns: minmax(0, 1fr) 358px;
    gap: 28px;
    padding: 34px 0 56px;
  }

  .service_content_column {
    order: 1;
  }

  .service_price_column {
    order: 2;
  }

  /* the main site's header is position: fixed at 73px tall and never shrinks on scroll, so the panel has to
     stick below it rather than at the viewport top — at 24px it slid 49px under the header. 16px clear of it. */
  .service_price_panel_container {
    position: sticky;
    top: 89px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Signed-in confirmation, shown over the booking drawer when a visitor signs in
   partway through a booking. It replaces a navigation to the account page, so it
   has to read as "that worked, carry on" and get out of the way quickly.
   ───────────────────────────────────────────────────────────────────────────── */
/* It covers the DRAWER, not the screen. Full screen it dimmed everything including the drawer's own backdrop,
   which then vanished when the drawer was swapped underneath; and the confirmation belongs where the person was
   looking — over the sign-in they just completed — not in the middle of a page they were not reading. The
   geometry matches the drawer panel's exactly (fixed to the right edge, full height, 800px cap), so no element is
   moved in the DOM and the page behind keeps the drawer's own backdrop. */
.service_login_success_container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2147483000;
  display: grid;
  width: 100vw;
  max-width: 800px;
  place-items: center;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: service_login_success_fade 0.2s ease both;
}

/* no card of its own now: the drawer is already a white surface, so a white panel on it reads as a seam */
.service_login_success_card {
  display: grid;
  justify-items: center;
  padding: 32px 36px;
  text-align: center;
}

.service_login_success_mark {
  width: 72px;
  height: 72px;
  margin-bottom: 16px;
}

.service_login_success_circle {
  stroke: var(--green);
  stroke-width: 3;
  stroke-dasharray: 152;
  stroke-dashoffset: 152;
  animation: service_login_success_draw 0.45s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.service_login_success_tick {
  stroke: var(--green);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: service_login_success_draw 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.4s forwards;
}

.service_login_success_text {
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.service_login_success_note {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.82rem;
}

@keyframes service_login_success_draw {
  to { stroke-dashoffset: 0; }
}

@keyframes service_login_success_fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* a visitor who has asked for less motion gets the same confirmation, drawn rather than animated */
@media (prefers-reduced-motion: reduce) {
  .service_login_success_container,
  .service_login_success_circle,
  .service_login_success_tick {
    animation: none;
  }

  .service_login_success_circle,
  .service_login_success_tick {
    stroke-dashoffset: 0;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   hide_me has to keep winning.
   global.css defines .hide_me as a plain `display: none` with no !important, and
   this file loads after it, so any rule above that sets `display` on an element
   the JavaScript toggles would beat it and the element would never hide. That is
   not hypothetical: it shipped, and the signed-in confirmation sat on the service
   page on every load. These are the three elements here that are shown and hidden
   at runtime and that also set a display value, restored with the same compound
   selector global.css already uses elsewhere for this.
   Anything added here that sets `display` and is toggled with hide_me belongs in
   this list too.
   ───────────────────────────────────────────────────────────────────────────── */
.services_lines_list.hide_me,
.services_search_clear_button.hide_me,
.service_login_success_container.hide_me {
  display: none;
}

/* a staff session is told why there is no booking button, in the button's place */
.service_staff_notice_container {
  padding: 14px 15px;
  border: 1px solid color-mix(in srgb, var(--gold) 34%, var(--surface));
  border-radius: var(--radius);
  background: var(--gold_soft);
  color: #6b4a07;
  font-size: 0.82rem;
  line-height: 1.6;
}

.service_staff_notice_container strong {
  display: block;
  margin-bottom: 4px;
  color: #5a3d05;
}

.service_staff_notice_switch {
  margin-top: 12px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   A service page opened from an invitation: who sent it, what they wrote, and
   the discount they attached.
   ───────────────────────────────────────────────────────────────────────────── */
.service_share_banner_container {
  background: var(--brand_soft);
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 22%, var(--surface));
}

.service_share_banner_inner {
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
  padding: 16px 0;
}

.service_share_banner_greeting {
  color: var(--brand_deep);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.4;
}

.service_share_banner_note {
  margin: 8px 0 0;
  color: var(--brand_deep);
  font-size: 0.86rem;
  line-height: 1.6;
  opacity: 0.85;
}

.service_price_discount_row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.service_price_was {
  color: var(--muted);
  font-size: 1rem;
  font-weight: 650;
  text-decoration: line-through;
}

.service_price_saving {
  padding: 3px 10px;
  border-radius: var(--radius_pill);
  background: var(--green_soft);
  color: #14603a;
  font-size: 0.74rem;
  font-weight: 700;
}

@media (min-width: 680px) {
  .service_share_banner_inner {
    width: min(var(--max), calc(100% - 48px));
    padding: 18px 0;
  }
}

/* the offer's own name, under the amount. The chip says a number changed; this says what was given, which is
   the part a recipient reads as a deal rather than as a price they happened to be quoted. */
.service_price_discount_name {
  margin: 6px 0 0;
  color: var(--green);
  font-size: 0.84rem;
  font-weight: 650;
  line-height: 1.4;
}

/* the discount list check this page can make is not the whole check the booking makes — first-booking-only and
   per-person caps are only knowable once there is a patient, so the page says so rather than implying certainty */
.service_price_discount_note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.5;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CLINICIAN PROFILE — /clinicians/<practice>/<clinician> (CMR-2026-11-03-539)
   The sections themselves are the service page's own vocabulary (service_section_block, service_fact_row,
   service_paragraph), so a clinician's page and a service's page cannot drift apart visually. Only the hero and
   the service list below it are new.
   ───────────────────────────────────────────────────────────────────────────── */
.clinician_hero_section {
  padding: 16px 0 22px;
  background: linear-gradient(180deg, var(--brand_soft) 0%, var(--surface) 100%);
}

.clinician_hero_identity {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
}

.clinician_hero_text {
  min-width: 0;
}

.clinician_hero_avatar {
  display: grid;
  flex: 0 0 auto;
  width: 78px;
  height: 78px;
  place-items: center;
  border: 3px solid var(--surface);
  border-radius: 50%;
  background: var(--brand_soft);
  box-shadow: var(--shadow_xs);
  color: var(--brand);
  font-size: 1.5rem;
  font-weight: 800;
}

.clinician_hero_photo {
  display: block;
  object-fit: cover;
}

/* the sibling page title (.service_title) is weight 700 on the same colour; a name is shorter than a service
   name, so it takes a smaller clamp rather than a different weight */
.clinician_title {
  margin: 0;
  color: var(--brand_deep);
  font-size: clamp(1.6rem, 6vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.clinician_subtitle {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* one column, not the service page's two: there is no price panel to sit beside */
.clinician_body_column {
  padding: 18px 0 0;
}

/* who is making the claim, under the section that makes it. Quiet on purpose: it qualifies the rows above it
   rather than competing with them. */
.clinician_provenance_note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.5;
}

.clinician_service_list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.clinician_service_item + .clinician_service_item {
  border-top: 1px solid var(--line);
}

.clinician_service_link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  color: inherit;
  text-decoration: none;
}

.clinician_service_link:hover .clinician_service_title,
.clinician_service_link:focus-visible .clinician_service_title {
  color: var(--brand);
}

.clinician_service_body {
  flex: 1 1 auto;
  min-width: 0;
}

.clinician_service_title {
  display: block;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 700;
}

.clinician_service_meta {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.78rem;
}

.clinician_service_price {
  flex: 0 0 auto;
  color: var(--brand_deep);
  font-size: 0.92rem;
  font-weight: 700;
}

.clinician_service_arrow {
  flex: 0 0 auto;
  color: var(--brand);
}

/* THE PROFILE CONTROL READS AS A WORD FROM HERE UP. Below 480px the clinician row carries an avatar, a name, a
   practice and a licence list, and a word on the end of that pushes the name to two or three lines — so the
   chevron is the whole control there. Declared after the base rule and after the 680px block on purpose: this is
   a min-width override of `display: none`, and it has to come later in the file to win. */
@media (min-width: 480px) {
  .service_clinician_profile_word {
    display: inline;
  }
}

@media (min-width: 680px) {
  .clinician_hero_section {
    padding: 20px 0 30px;
  }

  .clinician_hero_identity {
    gap: 22px;
    margin-top: 18px;
  }

  .clinician_hero_avatar {
    width: 104px;
    height: 104px;
    font-size: 2rem;
  }

  .clinician_body_column {
    padding-top: 24px;
  }
}