/* booking_drawer.css: styles used only by the booking drawer, moved verbatim from global.css (goal 44 Phase 2,
   CMR-2026-10-13-272). Loaded immediately after global.css; only rules that no later global.css rule can override
   on the same element were moved, so the cascade is unchanged. */
.patient_tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 160px;
  padding: 22px 12px 20px;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: #fdfdff;
  cursor: pointer;
  transition: border-color 0.16s, background 0.16s, box-shadow 0.16s, transform 0.14s;
  user-select: none;
  text-align: center;
}
.tile_check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.18s, transform 0.18s;
}
.patient_tile.selected .tile_check {
  opacity: 1;
  transform: scale(1);
}
.tile_icon_wrap {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: white;
  border: 1.5px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.16s;
  overflow: hidden;
}
.patient_tile.selected .tile_icon_wrap {
  border-color: #d8c6ee;
}
.tile_text_block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.tile_label {
  color: var(--brand_deep);
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1.2;
}
.tile_sublabel {
  color: var(--muted);
  font-size: 0.79rem;
}
.patient_tile.selected .tile_label {
  color: var(--brand_dark);
}
.lang_btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fafafa;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  white-space: nowrap;
}
.lang_btn:hover {
  border-color: #d8c6ee;
  color: var(--brand);
  background: var(--brand_soft);
}
.lang_popover {
  position: absolute;
  top: calc(54px + env(safe-area-inset-top));
  right: 62px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow_small);
  min-width: 180px;
  z-index: 20;
  overflow: hidden;
  display: none;
}
.lang_popover.open {
  display: block;
}
.lang_popover_head {
  padding: 10px 14px 8px;
  font-size: 0.72rem;
  font-weight: 900;
  color: var(--muted);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
.lang_option {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.lang_option:hover {
  background: var(--brand_soft);
  color: var(--brand);
}
.lang_flag {
  min-width: 24px;
  color: var(--brand);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

@media (max-width: 430px)
{
.lang_btn {
    margin-top: 0;
  }
.lang_popover {
    top: calc(54px + env(safe-area-inset-top));
    right: 62px;
  }
}

.booking_license_fallback
{
  max-width: 560px;
  margin: 0 auto;
  padding: 30px 22px;
  color: var(--ink);
  text-align: center;
}
.booking_license_icon
{
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  border-radius: 50%;
  font-size: 1.45rem;
}
.booking_license_icon_gold
{
  color: color-mix(in srgb, var(--gold) 55%, var(--ink));
  background: var(--gold_soft);
}
.booking_license_icon_blue
{
  color: var(--blue);
  background: var(--blue_soft);
}
.booking_license_alternatives
{
  margin: 20px 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius_lg);
  background: var(--surface);
  box-shadow: var(--shadow_xs);
  text-align: left;
}
.booking_license_alternatives_title
{
  padding: 12px 15px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.booking_license_alternative_row
{
  min-height: 58px;
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 10px 15px;
  border-bottom: 1px solid var(--line);
}
.booking_license_alternative_row:last-child
{
  border-bottom: 0;
}
.booking_license_alternative_avatar
{
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--brand);
  background: var(--brand_soft);
  font-size: 0.72rem;
  font-weight: 700;
}
.booking_license_alternative_name
{
  min-width: 0;
  flex: 1;
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 650;
}
.booking_license_note
{
  margin: 18px 0 0;
  text-align: left;
}

@media (max-width: 480px)
{
.booking_license_fallback
  {
    padding: 24px 14px;
  }
}

.opacity50{
          opacity: 0.5;
     }
.profession_outer_container:hover 
{
  cursor: pointer;
  
}
.filter_chip
{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: white;
  border: 1.5px solid #d1c4e9;
  border-radius: 20px;
  padding: 7px 14px;
  font-size: 0.88em;
  color: #555;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
}
.filter_chip.filter_chip_active, .filter_chip.filter_chip_active:hover
{
  background: #f3e8ff;
  border: 2px solid var(--brand, #865EBF);
  color: var(--brand, #865EBF);
  font-weight: 700;
}
.rating_star_btn:hover
{
  transform: scale(1.15);
}
.dot {
  height: 8px;
  width: 8px;
  margin: 5px auto;
  border-radius: 50%;
  background-color: transparent;
}
.active_time_class .day_of_week
{
  color: var(--brand, #865EBF) !important;
}
.calendar_picker {
  width: 100%;
  max-width: 100%;
}
.calendar_grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.calendar_day .day_of_week {
  font-size: 0.78rem;
  color: #6c757d;
}
.calendar_day .dot {
  width: 8px;
  height: 8px;
  background: transparent;
  border-radius: 50%;
  margin-top: 5px;
}
.calendar_day .dot.available {
  background: var(--brand, #865EBF);
}
.calendar_month_collapsing
{
  animation: calendar_month_hide 0.2s cubic-bezier(0.4, 0, 0.7, 1) forwards;
}
.calendar_month_grid
{
  gap: 3px;
  width: 100%;
}
.calendar_month_day
{
  aspect-ratio: auto;
  box-sizing: border-box;
  height: clamp(36px, 5.4vh, 46px);
  min-height: 36px;
  max-height: 46px;
  padding: 5px 0 4px;
  justify-content: center;
}
.calendar_month_day.inactive_date_class
{
  background: #fff;
  color: #8f8799;
  border-color: #eee8f3;
}
.calendar_month_day .dot
{
  width: 4px;
  height: 4px;
  margin-top: 5px;
}
.calendar_other_month_class .dot.available
{
  background: #c7afd9;
}

@media(max-width: 480px)
{
.calendar_month_grid
  {
    gap: 2px;
  }
.calendar_month_day
  {
    height: 38px;
    min-height: 38px;
    max-height: 38px;
  }
}

.patient_card
{
  text-align: center;
  cursor: pointer;
  transition: box-shadow 0.2s ease;
  font-size: 1.1em;
  will-change: transform;
  /*width: 157.5px;*/
}
.patient_card:hover:not(.patient_card_is_expanded)
{
  border: 1px solid dodgerblue;
}
.patient_card_collapsed_view
{
  transition: opacity 0.15s ease;
}
.patient_image 
{
  /* width: 70% */
  width: 88px;
  margin-left: auto; 
  margin-right: auto;
  /*border-radius: 50%;*/
  /*border: 3px solid #007bff;*/
}
.patient_name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: block;
}
/* THE THREE TIME OPTIONS ON THE REQUEST STEP (CMR-2026-11-01-518).
   Dashed while empty so the card reads as something to fill rather than something already set; solid and
   tinted once it holds a time. The whole card is the control — the clear button inside it stops propagation
   in the handler, not here. */
.booking_request_slots
{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* what happens after the patient submits, in the plainest words that are still true: a clinician confirms one
   of the times, and they are told when it is booked. It deliberately promises nothing about the case where
   none of the times can be taken, because nothing notifies the patient of that today. */
.booking_request_explainer_title
{
  font-weight: 700;
}
.booking_request_explainer_text
{
  margin-top: 4px;
}
.booking_request_explainer
{
  align-items: flex-start;
  background: var(--brand_soft);
  border-radius: var(--radius);
  color: var(--brand_dark);
  display: flex;
  font-size: 0.86rem;
  gap: 10px;
  line-height: 1.5;
  margin-top: 14px;
  padding: 12px 14px;
}
.booking_request_explainer .bi
{
  flex-shrink: 0;
  font-size: 1rem;
  margin-top: 2px;
}

/* a FIXED height, not a minimum: an empty card's hint and a filled card's date and time are different
   lengths and wrap differently, so a minimum made the card resize under the patient's finger as they filled
   it in. 84px holds two wrapped lines of the value plus its label on a narrow phone. */
.booking_request_slot
{
  align-items: center;
  background: var(--surface);
  border: 2px dashed var(--brand);
  border-radius: var(--radius);
  cursor: pointer;
  display: flex;
  gap: 12px;
  height: 84px;
  overflow: hidden;
  padding: 12px 14px;
  transition: background 140ms ease, border-color 140ms ease;
}
.booking_request_slot:hover,
.booking_request_slot:focus-visible
{
  background: var(--brand_soft);
}
.booking_request_slot_filled
{
  background: var(--brand_soft);
  border-style: solid;
}
.booking_request_slot_number
{
  align-items: center;
  background: var(--brand_soft);
  border-radius: 50%;
  color: var(--brand_dark);
  display: flex;
  flex: 0 0 auto;
  font-size: 0.85rem;
  font-weight: 700;
  height: 30px;
  justify-content: center;
  width: 30px;
}
.booking_request_slot_filled .booking_request_slot_number
{
  background: var(--brand);
  color: #fff;
}
.booking_request_slot_body
{
  flex: 1;
  min-width: 0;
}
.booking_request_slot_label
{
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.booking_request_slot_filled .booking_request_slot_label
{
  color: var(--brand_dark);
}
.booking_request_slot_value
{
  color: var(--muted);
  font-size: 0.88rem;
  margin-top: 2px;
}
.booking_request_slot_filled .booking_request_slot_value
{
  color: var(--ink);
  font-weight: 700;
}
/* THE 44px BOX IS PULLED BACK OVER THE CARD'S RIGHT PADDING.
   Both controls need the same box to share a centre, and 44px is the tap target the glyph alone would not
   give — but a 44px box sitting inside the padding centres at W-38, where a bare caret glyph centred at W-24.
   Giving both the box therefore moved the CARET 14px left rather than moving the X right. The negative margin
   cancels the card's 14px right padding, so each box's right edge lands at W-2, the inner edge of the border,
   and its centre returns to W-24. Nothing overflows, which matters because the card hides its overflow. */
.booking_request_slot_clear
{
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--muted);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.9rem;
  justify-content: center;
  margin-right: -14px;
  min-height: 44px;
  min-width: 44px;
  padding: 4px;
}
.booking_request_slot_clear:hover,
.booking_request_slot_clear:focus
{
  color: var(--danger_ink);
}
/* hide_me on its own cannot switch these off: it is a single class, and so is each rule above, and this file
   loads after the one that defines it — so the component's own display wins and the control stayed on screen
   while the markup said hidden. Same pairing a dozen components in global.css already carry. */
.booking_request_slot_clear.hide_me,
.booking_request_slot_caret.hide_me
{
  display: none;
}
/* the same box and the same pull as the clear button, so the two share a centre — see the note above it */
.booking_request_slot_caret
{
  align-items: center;
  color: var(--brand);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 1rem;
  justify-content: center;
  margin-right: -14px;
  min-height: 44px;
  min-width: 44px;
}

/* the picker drawer's own calendar sits flush with the panel padding */
.booking_request_picker .booking_request_appointment_selection
{
  margin: 0;
  padding: 0;
}

.booking_request_appointment_selection
{
  margin: 0;
  padding: 0;
}
/* THE THREE STATES OF A REQUESTABLE TIME, in one place.
   The base .timeslot in global.css is the DISABLED look — #f8f9fa fill, #6c757d text, cursor not-allowed —
   because the scheduled calendar styles openness with .timeslot.available. A request slide has no inventory,
   so its times never carry .available and every selectable one inherited that disabled appearance: nothing on
   the slide looked tappable and the selected state was the only thing with any colour. Selectable is
   therefore stated explicitly here. Two classes so it outranks .timeslot.available without !important, and
   this file loads after global.css.
   --brand_dark for the selected text rather than the --brand the selection pattern names: brand on brand_soft
   is about 4.1:1, and these are 14px. Everything else follows the standard selection state. */
.timeslot.booking_request_timeslot
{
  background-color: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  cursor: pointer;
}
.timeslot.booking_request_timeslot:hover
{
  background-color: var(--brand_soft);
  border-color: var(--brand);
  color: var(--brand_dark);
}
.timeslot.booking_request_timeslot_selected
{
  background-color: var(--brand_soft);
  border: 2px solid var(--brand);
  color: var(--brand_dark);
  font-weight: 700;
  white-space: nowrap;
}
html.landing_booking_scroll_locked,
body.landing_booking_scroll_locked
{
  overflow: hidden !important;
  overscroll-behavior: none;
}
.patient_grid_container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns */
  gap: 8px; /* spacing between cards */
  padding: 5px;
}
.placeholder_card {
  pointer-events: none;   /* nothing happens if tapped */
  box-shadow: none;
  background: transparent;
}
.booking_approach_option:hover
{
  cursor: pointer;
}
.pp_info_bullet
{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.88rem;
  color: #1f2330;
  padding: 4px 0;
  line-height: 1.4;
}
.pp_info_price_row
{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px solid #ececf2;
  font-size: 0.88rem;
  color: #5b6170;
}
.pp_info_price_row:last-child { border-bottom: none; padding-bottom: 0; }
.provider_profile_plan_badge
{
  display: block;
  text-align: center;
  margin: -14px -14px 12px -14px;
  padding: 5px 12px;
  background: var(--brand, #865EBF);
  color: white;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 12px 12px 0 0;
}
.provider_profile_plan_head
{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.provider_profile_plan_name
{
  font-size: 0.95rem;
  font-weight: 700;
  color: #1f2330;
  display: flex;
  align-items: center;
  gap: 6px;
}
.provider_profile_plan_price
{
  font-size: 1.15rem;
  font-weight: 800;
  color: #1f2330;
  letter-spacing: -0.01em;
}
.provider_profile_plan_features
{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #ececf2;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.provider_profile_plan_feature
{
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  color: #5b6170;
}
.provider_profile_plan_badge
{
  display: block;
  text-align: center;
  margin: -14px -14px 12px -14px;
  padding: 5px 12px;
  background: var(--brand, #865EBF);
  color: white;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 12px 12px 0 0;
}
.landing_booking_mchat .booking_section_container[data-booking-source="landing"] .tile_row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0 auto;
}
.landing_booking_mchat .booking_section_container[data-booking-source="landing"] .patient_tile {
  aspect-ratio: 1 / 1;
  width: 100%;
  min-height: 0;
  max-height: 200px;
  padding: 16px 10px 14px;
  gap: 10px;
  border-radius: 10px;
}
.landing_booking_mchat .booking_section_container[data-booking-source="landing"] .tile_icon_wrap {
  width: 64px;
  height: 64px;
}
.landing_booking_mchat .booking_section_container[data-booking-source="landing"] .tile_label {
  font-size: 1rem;
}
.landing_booking_mchat .booking_section_container[data-booking-source="landing"] .tile_sublabel {
  font-size: 0.76rem;
}

@media (max-height: 700px)
{
.booking_section_container[value="booking_purpose"] .booking_purpose_card {
    padding: 12px 14px;
    margin-bottom: 9px;
    border-radius: 10px;
  }
.booking_section_container[value="booking_purpose"] .booking_purpose_card_icon {
    font-size: 1.35em;
    margin-bottom: 5px;
  }
.booking_section_container[value="booking_purpose"] .booking_purpose_card_title {
    font-size: 1em;
    margin-bottom: 3px;
  }
.booking_section_container[value="booking_purpose"] .booking_purpose_card_sub {
    font-size: 0.82em;
    line-height: 1.35;
    margin-bottom: 8px;
  }
.booking_section_container[value="booking_purpose"] .booking_purpose_card_features {
    padding-top: 8px;
    gap: 4px;
  }
.booking_section_container[value="booking_purpose"] .booking_purpose_card_feature {
    font-size: 0.79em;
  }
}

@media (max-width: 768px)
{
.landing_booking_mchat .booking_section_container[data-booking-source="landing"] .tile_row {
    gap: 10px;
  }
.landing_booking_mchat .booking_section_container[data-booking-source="landing"] .patient_tile {
    padding: 12px 8px 10px;
    gap: 7px;
  }
.landing_booking_mchat .booking_section_container[data-booking-source="landing"] .tile_icon_wrap {
    width: 54px;
    height: 54px;
  }
.landing_booking_mchat .booking_section_container[data-booking-source="landing"] .tile_check {
    top: 7px;
    right: 7px;
    width: 20px;
    height: 20px;
  }
.landing_booking_mchat .booking_section_container[data-booking-source="landing"] .booking_login_prompt {
    margin-top: 12px;
    padding: 10px 0;
  }
}

.patient_card_expanded_view
{
  width:100%;
}
.async_request_intro
{
  font-size: 0.86rem;
  color: var(--muted);
  margin-bottom: 14px;
}
.async_request_options_grid
{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.async_request_tile
{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 122px;
  padding: 16px 10px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
}
.async_request_option_icon
{
  font-size: 1.6rem;
  line-height: 1;
  color: var(--brand);
}
.async_request_option_label
{
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.async_request_tile.selected .async_request_option_label
{
  font-weight: 700;
}
.async_request_option_check
{
  position: absolute;
  top: 8px;
  right: 9px;
  font-size: 1rem;
  color: transparent;
}
.async_request_tile.selected .async_request_option_check
{
  color: var(--brand);
}
.async_request_meter
{
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.2;
}


/* insurance step: separate selection cards (None first). The tap handler still writes inline border and background
   values; these rules take precedence so the look comes from here, in the practice's brand on practice sites */
.insurance_list_group { display: flex; flex-direction: column; gap: 10px; }
.insurance_list_group .insurance_card_inner { border: 1px solid var(--line) !important; border-radius: 10px !important; background: var(--surface) !important; padding: 14px !important; }
.insurance_list_group .insurance_card_indicator { border: 2px solid var(--line) !important; background: transparent !important; }
.insurance_list_group .insurance_card_selected .insurance_card_inner { border: 2px solid var(--brand) !important; background: var(--brand_soft) !important; padding: 13px !important; }
.insurance_list_group .insurance_card_selected .insurance_card_indicator { border-color: var(--brand) !important; background: var(--brand) !important; }
.insurance_list_group .insurance_card_selected .insurance_card_label { color: var(--brand) !important; }