/* Public booking wizard — business storefront treatment.
   The link's colors are injected on <body> (BookingLink::Theme): the accent as --color-primary /
   --booking-accent overrides, so everything below normalizes to it, and the header as
   --booking-header-bg, falling back to the category's gradient. */

@layer page {

/* --- Shell --- */

.booking_body:has(.booking_shell) {
  padding: 0;
  align-items: flex-start;
}

.booking_shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--color-bg);

  @media (min-width: 640px) {
    border-inline: 1px solid var(--color-border);
  }
}

.booking_main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px var(--content-padding) 24px;
}

.booking_main--flush {
  padding: 0 0 24px;
}

.booking_step_title {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  text-align: left;
  margin: 0 0 16px;
}

/* --- Storefront hero (gradient band) --- */

.booking_hero {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px var(--content-padding) 20px;
  background: var(--booking-header-bg, linear-gradient(150deg, var(--booking-category-dark), var(--booking-category)));
  color: var(--booking-header-ink, white);
}

.booking_hero_main {
  display: flex;
  align-items: center;
  gap: 14px;
}

.booking_hero_identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.booking_hero_name {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  color: var(--booking-header-ink, white);
  margin: 0;
  line-height: var(--line-height-base);
}

.booking_hero_desc {
  font-size: var(--text-sm);
  line-height: var(--line-height-md);
  color: var(--booking-header-ink, white);
  margin: 0;
}

/* A banner takes the place of the avatar and the name, edge to edge at the top of the
   header, which keeps its own color for the description and the facts beneath. */
.booking_hero--banner {
  padding-top: 0;
}

.booking_hero_banner {
  display: block;
  width: calc(100% + 2 * var(--content-padding));
  max-width: none;
  aspect-ratio: 3 / 1;
  margin-inline: calc(-1 * var(--content-padding));
  object-fit: cover;
}

/* A wide logo in the name's place: one height, centered, as wide as its shape asks. */
.booking_hero_wordmark {
  display: block;
  height: 48px;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  object-fit: contain;
}

.booking_hero_name--hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Demo notice --- */

/* Demo links point at a business that doesn't exist: an alert above every step's title. */
.booking_demo_notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
  border-radius: 10px;
  background: var(--color-warning-wash);
  color: var(--color-warning-text);
  font-size: var(--text-sm);
  line-height: var(--line-height-md);

  > svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 1px;
  }
}

.booking_demo_notice_text {
  margin: 0;
  min-width: 0;
}

.booking_demo_notice_title {
  display: block;
  font-weight: var(--font-weight-bold);
}

/* the services step's main is flush; give the alert the page inset the title lacks there */
.booking_main--flush > .booking_demo_notice {
  margin: 16px var(--content-padding) 8px;
}

/* --- Avatar --- */

.booking_avatar {
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}

.booking_avatar--hero {
  width: 56px;
  height: 56px;
}

.booking_avatar--band {
  width: 28px;
  height: 28px;
}

.booking_avatar--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--color-primary-rgb), 0.12);
  color: var(--color-primary);

  svg {
    width: 26px;
    height: 26px;
  }

  &.booking_avatar--band svg {
    width: 15px;
    height: 15px;
  }
}

/* On the gradient the icon avatar inverts to a white circle */
.booking_hero .booking_avatar--icon,
.booking_band .booking_avatar--icon {
  background: white;
  color: var(--color-primary);
}

/* Dark mode: the category gradient glares against the dark page, so deepen
   both stops. A provider's own colors (--booking-header-bg, .booking_body--custom-accent)
   show exactly as chosen. The frosted avatar replaces the solid white circle,
   which was the brightest element on screen. */
[data-theme="dark"] {
  .booking_hero,
  .booking_band {
    background: var(--booking-header-bg, linear-gradient(150deg,
      color-mix(in srgb, var(--booking-category-dark), black 45%),
      color-mix(in srgb, var(--booking-category), black 35%)));
  }

  .booking_hero .booking_avatar--icon,
  .booking_band .booking_avatar--icon {
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.95);
  }

  .booking_body:not(.booking_body--custom-accent) .btn.primary {
    background: color-mix(in srgb, var(--booking-accent), black 28%);
    border-color: color-mix(in srgb, var(--booking-accent), black 28%);

    &:hover {
      background: color-mix(in srgb, var(--booking-accent), black 40%);
      border-color: color-mix(in srgb, var(--booking-accent), black 40%);
    }

    &:active {
      background: color-mix(in srgb, var(--booking-accent), black 48%);
      border-color: color-mix(in srgb, var(--booking-accent), black 48%);
    }
  }
}

/* --- Storefront fact lines --- */

.booking_facts {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.booking_fact {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--text-sm);
  min-width: 0;

  > svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }

  span {
    min-width: 0;

    /* iOS auto-detects the phone number as a tel: link — keep it in the surrounding color */
    a {
      color: inherit;
      text-decoration: none;
    }
  }
}

.booking_facts--hero {
  color: color-mix(in srgb, var(--booking-header-ink, white) 92%, transparent);

  > .booking_fact > svg {
    opacity: 0.85;
  }
}

.booking_facts--sheet {
  color: var(--color-text);

  > .booking_fact > svg {
    color: var(--color-muted);
  }
}

.booking_fact_chip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;

  svg {
    width: 14px;
    height: 14px;
  }
}

.booking_fact_chip--maps {
  width: 24px;
  height: 24px;

  svg {
    width: 12px;
    height: 12px;
  }
}

/* Frosted treatment on the gradient */
.booking_facts--hero .booking_fact_chip {
  background: color-mix(in srgb, var(--booking-header-ink, white) 16%, transparent);
  color: var(--booking-header-ink, white);
}

/* Page-background treatment inside the sheet */
.booking_facts--sheet .booking_fact_chip--whatsapp {
  background: rgba(var(--color-primary-rgb), 0.12);
  color: var(--color-primary);
}

.booking_facts--sheet .booking_fact_chip--maps {
  background: var(--color-bg-secondary);
  color: var(--color-text-light);
}

/* --- Compact band + nav row --- */

.booking_nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
}

.booking_band {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 48px;
  padding: 0 6px;
  background: var(--booking-header-bg, linear-gradient(150deg, var(--booking-category-dark), var(--booking-category)));
  color: var(--booking-header-ink, white);
}

.booking_band--overlay {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, -100%);
  width: 100%;
  max-width: 480px;
  z-index: var(--z-nav);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
  cursor: pointer;

  &.visible {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}

.booking_band_back {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--back-tap-size);
  height: var(--back-tap-size);
  border-radius: 50%;
  color: var(--booking-header-ink, white);

  svg {
    width: var(--back-icon-size);
    height: var(--back-icon-size);
  }

  &:active {
    background: color-mix(in srgb, var(--booking-header-ink, white) 16%, transparent);
  }
}

.booking_band_spacer {
  flex-shrink: 0;
  width: var(--back-tap-size);
}

.booking_band_identity {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}

.booking_band_name {
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  color: var(--booking-header-ink, white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.booking_band_info {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--booking-header-ink, white);

  &::before {
    content: none;
  }

  svg {
    width: 16px;
    height: 16px;
  }
}

.booking_band_info svg {
  box-sizing: content-box;
  padding: 6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--booking-header-ink, white) 16%, transparent);
}

/* --- Gate card (phone / verification) --- */

.booking_gate_card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 16px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.14),
    0 0 32px rgba(var(--color-primary-rgb), 0.18);
}

/* Dark mode: a lighter surface does the elevation work; the dark drop
   shadow grounds the card and the accent glow makes it pop against the
   near-black page (plain black shadows barely register there). */
[data-theme="dark"] .booking_gate_card {
  background: var(--color-bg-tertiary);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.6),
    0 0 32px rgba(var(--color-primary-rgb), 0.22);
}

.booking_gate_copy {
  font-size: var(--text-base);
  line-height: var(--line-height-md);
  color: var(--color-text);
  margin: 0;
}

.booking_gate_form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.booking_gate_link {
  align-self: flex-start;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--color-link);
}

.booking_gate_link--inline {
  display: inline;
}

.booking_gate_help {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.booking_resend_form {
  display: flex;
  align-items: center;
}

.booking_submit_btn--whatsapp svg {
  width: 20px;
  height: 20px;
}

/* Returning visitor fast path */
.booking_returning_row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.booking_returning_avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(var(--color-primary-rgb), 0.12);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.booking_returning_info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.booking_returning_name {
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.booking_returning_phone {
  font-size: var(--text-sm);
  color: var(--color-text-light);
}

.booking_returning_device {
  font-size: var(--text-xs);
  color: var(--color-text-light);
}

/* --- Services teaser behind the gate --- */

.booking_teaser {
  margin-top: 28px;
  pointer-events: none;
  user-select: none;
  mask-image: linear-gradient(to bottom, black 20%, transparent 100%);
}

.booking_teaser_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 0;
  opacity: 0.5;

  &:not(:first-child) {
    border-top: 1px solid var(--color-border);
  }
}

.booking_teaser_name {
  font-size: var(--text-base);
  font-weight: var(--font-weight-light);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.booking_teaser_price {
  flex-shrink: 0;
  width: 72px;
  height: 14px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-secondary);
  filter: blur(3px);
}

/* --- Footer badge --- */

.booking_footer {
  padding: 20px var(--content-padding) calc(20px + var(--safe-bottom));
  text-align: center;
  background: none;
  border-top: none;
}

.booking_made_with {
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin: 0;
}

.booking_made_with_link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-brand);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The mark in the host's muted grey, monochrome. 14px is the floor: the seam between the bars
   is one device pixel at 13px and goes half-tone below it. */
.booking_made_with_mark {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--color-muted);
}

/* --- Fields --- */

.booking_form,
.booking_address_form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.booking_field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.booking_field--small {
  flex: 0 0 96px;
}

.booking_field_row {
  display: flex;
  gap: 10px;
}

.booking_field_label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  text-align: left;
}

.booking_address_details {
  display: flex;
  flex-direction: column;
  gap: 14px;

  &.hidden {
    display: none;
  }
}

.booking_state_select {
  width: 100%;
  appearance: auto;
}

/* The link that swaps the form's way in: CEP first, or the address search. */
.booking_address_mode {
  margin-top: -4px;
}

.booking_address_hint {
  margin: 4px 0 0;
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.booking_address_manual {
  margin: 12px 0 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.booking_address_suggestions {
  display: flex;
  flex-direction: column;
  margin-top: 4px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;

  &.hidden {
    display: none;
  }
}

.booking_address_suggestion {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: var(--color-bg);
  border: none;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;

  &:last-child {
    border-bottom: none;
  }

  &:active {
    background: var(--color-bg-tertiary);
  }

  .place {
    font-size: var(--text-sm);
    color: var(--color-muted);
  }

  .correios {
    font-size: var(--text-xs);
    font-style: italic;
    color: var(--color-muted);
  }
}

.booking_cep_missing,
.booking_cep_mismatch {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-warning);

  &.hidden {
    display: none;
  }
}

.booking_address_warning {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--color-warning-wash);
  color: var(--color-warning-text);
  font-size: var(--text-sm);

  .text {
    margin: 0;
  }

  .booking_address_confirm {
    font-weight: 600;
  }
}

.wizard_input.autofilled,
.booking_state_select.autofilled {
  background: var(--color-bg-light);
  border-bottom-color: var(--color-primary);
}

/* Phone input — the prefix carries the same rule as the field beside it. */
/* --- Services list --- */

.booking_services_list {
  display: flex;
  flex-direction: column;
}

.booking_service_row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px var(--content-padding);

  &:not(:first-child) {
    border-top: 1px solid var(--color-border);
  }
}

.booking_service_info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.booking_service_name {
  font-size: var(--text-base);
  font-weight: var(--font-weight-light);
  color: var(--color-text);
  line-height: var(--line-height-md);
}

.booking_service_meta {
  font-size: var(--text-sm);
  color: var(--color-text-light);
}

/* Where the service happens, on a business that serves both ways. */
.booking_service_location {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-sm);
  color: var(--color-muted);

  .glyph {
    width: 14px;
    height: 14px;
  }
}

/* A service of the other location than the cart's: one appointment, one place. */
.booking_service_row--locked {
  opacity: 0.45;
}

.booking_services_mixed_note {
  margin: 0;
  padding: 4px var(--content-padding) 16px;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.booking_service_price {
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.booking_service_price--text {
  color: var(--color-text-light);
}

.booking_service_actions {
  flex-shrink: 0;
}

.booking_add_btn {
  padding: 7px 18px;
  background: transparent;
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-pill);
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;

  &.hidden {
    display: none;
  }
}

.booking_stepper {
  display: flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 2px;

  &.hidden {
    display: none;
  }
}

.booking_stepper_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--color-primary);
  cursor: pointer;

  svg {
    width: 16px;
    height: 16px;
  }

  &:active {
    background: rgba(var(--color-primary-rgb), 0.1);
  }
}

.booking_stepper_qty {
  width: 26px;
  padding: 0;
  border: none;
  background: transparent;
  text-align: center;
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  -moz-appearance: textfield;

  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
}

/* --- Sticky cart bar --- */

.booking_cart_bar {
  position: sticky;
  bottom: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px var(--content-padding) calc(12px + var(--safe-bottom));
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);

  &.hidden {
    display: none;
  }
}

.booking_cart_summary {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.booking_cart_count {
  font-size: var(--text-sm);
  color: var(--color-text-light);
}

.booking_cart_total {
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

/* Longer one-line summary on the address/slot steps */
.booking_cart_total--inline {
  font-size: var(--text-sm);
}

.booking_cart_btn {
  flex-shrink: 0;
  border-radius: var(--radius-md);
}

/* --- Slot picking --- */

.booking_days {
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 100%;
}

.booking_day_group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.booking_day_header {
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0;
}

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

.booking_slot_pill {
  padding: 10px 18px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-size: var(--text-base);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;

  /* A cliente conhecido's horário habitual: the heart floats on the pill's corner, so the pill
     keeps the width of the others. */
  &.booking_slot_pill--usual {
    position: relative;
    border-color: var(--color-primary);

    svg {
      position: absolute;
      right: -8px;
      bottom: -8px;
      width: 22px;
      height: 22px;
      padding: 4px;
      border-radius: 50%;
      background: var(--color-bg);
      box-shadow: 0 0 0 1px var(--color-primary);
      color: var(--color-primary);
      fill: currentColor;
    }

    &.selected svg { color: var(--color-primary); }
  }

  /* Por período: the period's name over its hours. */
  &.booking_slot_pill--period {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 9rem;
    text-align: start;

    .booking_slot_period_name { font-weight: var(--font-weight-semibold); }
    .booking_slot_period_hours { font-size: var(--text-sm); opacity: 0.8; }
  }

  &.selected {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;

    svg { color: inherit; }
  }
}

/* No availability message */
.booking_no_availability {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2rem 1rem;
  text-align: center;

  svg {
    width: 48px;
    height: 48px;
    color: var(--color-muted);
  }

  p {
    font-size: var(--text-base);
    color: var(--color-text-light);
    margin: 0;
  }
}

/* --- Review receipt --- */

.booking_receipt {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  background: var(--color-bg-card);
  border-radius: 14px;
}

.booking_receipt_row {
  display: flex;
  align-items: flex-start;
  gap: 12px;

  > svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--color-muted);
  }
}

.booking_receipt_text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.booking_receipt_label {
  font-size: var(--text-xs);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.booking_receipt_value,
.booking_bill_name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.booking_receipt_value,
.booking_bill_row {
  font-size: var(--text-sm);
  color: var(--color-text);
}

.booking_receipt_provider {
  color: inherit;
  text-decoration: none;
}

.booking_receipt_whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  align-self: center;
  border-radius: 50%;
  background: var(--color-bg-secondary);
  color: var(--color-muted);

  svg {
    width: 16px;
    height: 16px;
  }
}

.booking_bill_row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.booking_bill_name {
  min-width: 0;
}

.booking_bill_price {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.booking_bill_row--total {
  margin-top: 2px;
  font-weight: var(--font-weight-medium);
}

/* --- Consent + confirm --- */

.booking_confirm_form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

.booking_confirm_provider {
  font-size: var(--text-sm);
  color: var(--color-text);
  text-align: center;
  margin: 0;
}

.booking_consent {
  font-size: var(--text-sm);
  line-height: var(--line-height-md);
  color: var(--color-text-light);
  text-align: center;
  margin: 0;

  a {
    color: var(--color-link);
  }
}

/* --- "Sobre o negócio" bottom sheet --- */

.booking_sheet {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  visibility: hidden;
  pointer-events: none;

  &.open {
    visibility: visible;
    pointer-events: auto;

    .booking_sheet_backdrop {
      opacity: 1;
    }

    .booking_sheet_panel {
      transform: translateY(0);
    }
  }
}

.booking_sheet_backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.booking_sheet_panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 480px;
  max-height: 85dvh;
  margin: 0 auto;
  padding: 20px 16px calc(20px + var(--safe-bottom));
  overflow-y: auto;
  background: var(--color-bg);
  border-radius: 20px 20px 0 0;
  transform: translateY(100%);
  transition: transform 0.25s ease;
}

.booking_sheet_header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.booking_sheet_identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.booking_sheet_name {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0;
}

.booking_sheet_close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: var(--color-bg-secondary);
  border: none;
  border-radius: 50%;
  color: var(--color-text);
  cursor: pointer;

  svg {
    width: 18px;
    height: 18px;
  }
}

.booking_sheet_desc {
  font-size: var(--text-sm);
  line-height: var(--line-height-md);
  color: var(--color-text);
  margin: 0;
}

.booking_sheet_actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;

  .booking_sheet_action {
    flex: 1;
    gap: 0.5rem;

    svg {
      width: 18px;
      height: 18px;
    }
  }
}

/* --- Pending status banner --- */
.booking_pending_notice {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--color-state-pending-bg);
  border: 1px solid var(--color-state-pending-border);
  border-radius: 8px;
  margin-bottom: 1rem;

  svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--color-state-pending-text);
  }

  p {
    font-size: var(--text-sm);
    color: var(--color-state-pending-text);
    margin: 0;
  }
}

/* --- Confirmation / Success --- */
.booking_confirmation {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.booking_confirmation_icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-success-wash);
  border-radius: 50%;
  margin-bottom: 1.5rem;

  svg {
    width: 40px;
    height: 40px;
    color: var(--color-success-dark);
  }
}

.booking_confirmation_title {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0 0 0.5rem;
}

.booking_confirmation_subtitle {
  font-size: var(--text-base);
  color: var(--color-text-light);
  margin: 0 0 2rem;
}

.booking_confirmation_details {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  padding: 1rem;
  background: var(--color-bg-light);
  border-radius: 8px;
  text-align: left;
  margin-bottom: 2rem;
}

.booking_confirmation_row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: var(--text-sm);

  .label {
    color: var(--color-text-light);
  }

  .value {
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    text-align: right;
  }
}

.booking_success_provider_note {
  font-size: var(--text-sm);
  color: var(--color-text);
  margin: -1rem 0 0.5rem;
}

.booking_success_platform_note {
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin: 0 0 2rem;
}

/* --- Inactive link state --- */
.booking_inactive {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1rem;
}

.booking_inactive_icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-secondary);
  border-radius: 50%;
  margin-bottom: 1.5rem;

  svg {
    width: 32px;
    height: 32px;
    color: var(--color-muted);
  }
}

/* --- Calendar dropdown for success page --- */
.booking_success_actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.booking_calendar_actions {
  position: relative;
  width: 100%;
}

.booking_add_calendar_btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;

  svg {
    flex-shrink: 0;
  }
}

.booking_calendar_dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  z-index: var(--z-popup);
  overflow: hidden;

  &.hidden {
    display: none;
  }
}

.booking_calendar_option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.875rem 1rem;
  font-size: var(--text-base);
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
  transition: background-color 0.15s;

  &:last-child {
    border-bottom: none;
  }

  &:hover {
    background: var(--color-bg-light);
  }

  svg {
    flex-shrink: 0;
    color: var(--color-text-light);
  }
}

/* --- Hover states (pointer devices) --- */

@media (hover: hover) {
  .booking_add_btn:hover {
    background: rgba(var(--color-primary-rgb), 0.08);
  }

  .booking_slot_pill:not(.selected):hover {
    border-color: var(--color-border-hover);
    background: var(--color-bg-light);
  }

  .booking_gate_link:hover {
    text-decoration: underline;
  }

  .booking_band_back:hover,
  .booking_band_info:hover {
    background: rgba(255, 255, 255, 0.12);
  }
}

/* --- Desktop layout (≥1024px) --- */

/* On desktop the wizard becomes a single card centered in the viewport,
   split into two panes: the business storefront (gradient) on the left and
   the step content on the right — the right pane is essentially the mobile
   column. The compact band collapses to a bare back button — the identity
   and the ⓘ sheet are redundant next to the always-visible left pane. */

.booking_hero--aside {
  display: none;
}

.booking_step_title--desktop {
  display: none;
}

@media (min-width: 1024px) {
  .booking_body:has(.booking_shell) {
    align-items: center;
    padding: 32px;
  }

  .booking_shell {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    grid-template-rows: auto 1fr auto auto;
    max-width: 960px;
    min-height: min(620px, calc(100dvh - 64px));
    border: 1px solid var(--color-border);
    border-radius: 20px;
    /* clip, not hidden: hidden would stop the cart bar from sticking */
    overflow: clip;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
  }

  [data-theme="dark"] .booking_shell {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  }

  /* Left pane: the storefront hero stretches over the full card height */
  .booking_hero {
    grid-column: 1;
    grid-row: 1 / -1;
    padding: 32px 28px;
    gap: 18px;
  }

  .booking_hero--aside {
    display: flex;
  }

  /* Right pane */
  .booking_nav {
    grid-column: 2;
    grid-row: 1;
    position: static;
    padding: 24px 32px 0;
  }

  .booking_main {
    grid-column: 2;
    grid-row: 1 / 3;
    padding: 28px 32px 32px;
  }

  .booking_shell:has(.booking_nav) .booking_main {
    grid-row: 2 / 3;
    padding-top: 20px;
  }

  .booking_step_title {
    font-size: var(--text-2xl);
  }

  .booking_step_title--desktop {
    display: block;
  }

  /* The cart bar stays a bar, pinned to the bottom of the right pane */
  .booking_cart_bar {
    grid-column: 2;
    grid-row: 3;
    padding: 14px 32px calc(14px + 0px);
  }

  .booking_footer {
    grid-column: 2;
    grid-row: 4;
    padding: 0 32px 18px;
  }

  /* Band collapses to a bare back button on the pane background.
     The .booking_nav qualifier outweighs the [data-theme="dark"] gradient. */
  .booking_nav .booking_band,
  [data-theme="dark"] .booking_nav .booking_band {
    height: auto;
    padding: 0;
    background: none;
  }

  .booking_band_identity,
  .booking_band_info,
  .booking_band_spacer,
  .booking_band--overlay {
    display: none;
  }

  .booking_band_back {
    width: 40px;
    height: 40px;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    background: var(--color-bg);

    &:hover {
      background: var(--color-bg-light);
    }
  }

  /* Services list reads as a bordered card inside the pane */
  .booking_services_list {
    border: 1px solid var(--color-border);
    border-radius: 14px;
    overflow: hidden;
  }

  .booking_service_row:not(:first-child) {
    border-top: 1px solid var(--color-border);
  }

  /* Success page: match the wider container */
  .booking_body .wizard {
    max-width: 640px;
  }
}

} /* @layer page */