/* Index booking shares one workspace on every device without a separate page
   heading. The existing section stage owns scrolling; the booking controls and
   payment fields always retain their natural, readable size. */
:is(#lessons, #lesson-options) .index-lessons-original { display: contents; }
:is(#lessons, #lesson-options) .index-booking { display: none; }
:is(#lessons, #lesson-options).index-booking-enabled .index-lessons-original { display: none; }
:is(#lessons, #lesson-options) .booking-entry-notice {
  grid-column: 1 / -1; margin: 8px 0 0; padding: 10px 16px;
  background: rgba(255,255,255,.2); border-radius: 14px;
  color: #292929; font: 300 14px/1.5 var(--sans);
}
:is(#lessons, #lesson-options) .booking-entry-notice[hidden] { display: none; }

:is(#lessons, #lesson-options).index-booking-enabled .index-booking {
  --workspace-gap: clamp(18px, 2vw, 36px);
  --booking-gap: var(--index-gap, clamp(28px, 3.3vw, 64px));
  --ink: #292929;
  --line: rgba(41,41,41,.17);
  display: flex; flex-direction: column; flex: 1 0 auto;
  width: 100%; min-width: 0; min-height: 100%; padding-block: 24px;
  color: var(--ink);

  & [hidden] { display: none !important; }
  & .booking-workspace { flex: 1 0 auto; width: 100%; min-height: 0; border-top: 0; }
  & .booking-toolbar { min-height: 50px; flex-shrink: 0; }
  & .booking-view { flex: 1 0 auto; width: 100%; min-height: min-content; }
  & .booking-view--format { padding-block: 12px; }
  & .booking-menu { column-gap: var(--booking-gap); }
  & .booking-status { flex-shrink: 0; }
  & .schedule-option .format-kicker { font: 300 1rem/1.7 var(--sans); color: inherit; }
  /* The opening menu has no page heading or back step to reserve. Use its
     available section height for the four equal offer rows, keeping their
     approved 14px copy, 16px titles and 32px controls unchanged. */
  &:has(.booking-view--format) { padding-block: 0; }
  & .booking-workspace:has(.booking-view--format) .booking-toolbar,
  & .booking-workspace:has(.booking-view--format) .booking-status:empty { display: none; }
  & #booking-view.booking-view--format { padding-block: 0; }
  & #booking-view.booking-view--format .booking-offer { padding-block: 12px; }
  & .booking-view--calendar { gap: 8px; }
  & .calendar-heading h2 { font-size: clamp(2rem, 3.1vw, 4rem); }
  & .calendar-heading p { font-size: 1rem; }
  & .calendar-grid { min-height: 408px; }
  & .calendar-slot { display: grid; place-items: center; border-radius: 999px; }
  & :is(.calendar-hour,.slot-clock) {
    font: 300 .75rem/1 var(--sans);
    font-variant-numeric: normal;
  }
  & .calendar-slot:is(:not(:disabled),.is-selected) .slot-clock {
    display: block;
    color: rgba(41,41,41,.7);
  }
  & .calendar-slot:is(:not(:disabled),.is-selected) .slot-mark { display: none; }
  & .calendar-slot.is-selected .slot-clock { color: #fff; }
  & .calendar-actions > .booking-primary {
    box-sizing: border-box;
    width: var(--calendar-slot-width, 120px); height: var(--calendar-slot-height, 22px);
    min-width: 0; min-height: 0;
    justify-content: center;
    border-radius: 999px; padding: 0 16px; gap: 8px;
    background: #292929; color: #fff;
    font: 500 12px/1.2 var(--sans);
  }
  & .calendar-actions > .booking-primary:not(:disabled):is(:hover,:focus-visible) { background: #3a3a3a; }
  & .calendar-slot.is-selected:not(:disabled):is(:hover,:focus-visible) {
    background: #3a3a3a; border-color: #3a3a3a;
  }
  & .booking-details-actions > .booking-primary { border-radius: 999px; }
  & .details-layout .slot-summary { margin-top: 56px; }
  & .calendar-selection { font: 300 1rem/1.5 var(--sans); gap: 8px; }
  & .booking-view--calendar > .calendar-actions--two-slots { height: 152px; min-height: 152px; flex-basis: 152px; }
  & :is(.details-layout, .calendar-selection) .details-slot-line { display: block; }
  & :is(.details-layout, .calendar-selection) .booking-slot-meta { font: inherit; color: inherit; opacity: .45; }
  & :is(.details-layout, .calendar-selection) .details-slot > .first-lesson { display: block; }
  & .checkout-review-content .checkout-inline-meta { display: inline; font: inherit; color: inherit; opacity: .45; }
  & :is(.checkout-review-content,.payment-review--combined) .recurring-slot-summary { flex-direction: column; align-items: flex-start; gap: 2px; }
  & .payment-review--combined .checkout-inline-meta { display: inline; font: inherit; color: inherit; opacity: .45; }
  & .payment-review--combined .payment-lesson-summary {
    margin: 0 0 24px; padding-bottom: 20px; border-bottom: 1px solid var(--line);
    font: 300 14px/1.5 var(--sans);
  }
  & .payment-review--combined .policy-check { margin: 22px 0 14px; }
  & .payment-review--combined > .booking-primary { border-radius: 999px; min-height: var(--index-button-height,57px); justify-content: center; }

  /* Review and payment stay in the section's flow. Additional Stripe methods
     may grow the card and stage scroll area without shrinking the fields. */
  & .booking-view:has(.checkout-pair) { display: flex; margin-block: 0; }
  & .checkout-pair {
    position: static; width: 100%; transform: none; align-items: center;
  }
  & .checkout-pair > .step-heading { padding: 0; }
  & .checkout-card-frame { height: auto !important; min-height: 0; }
  & .checkout-card-frame .checkout-card-inner { position: static; width: 100%; transform: none; }
  & .booking-view--confirming > .booking-success-content,
  & .booking-view--success > .booking-success-content {
    position: static; width: 100%; transform: none;
  }

  /* Match the standalone desktop confirmation, including its 20% white card. */
  & .booking-view--success { padding-top: 28px; }
  & .booking-confirmation {
    max-width: none; margin: auto;
    font: 300 14px/1.55 var(--sans); color: var(--ink);
  }
  & .booking-confirmation .success-symbol {
    width: 56px; height: 56px; margin-bottom: 20px;
    background: rgba(255,255,255,.20); border-color: rgba(255,255,255,.8);
  }
  & .booking-confirmation .success-symbol svg { width: 26px; height: 26px; }
  & .booking-confirmation h2 { font-size: clamp(32px, 3.1vw, 46px); }
  & .booking-confirmation p { margin: 0; font: inherit; }
  & .booking-confirmation #success-message { margin-top: 12px; font-size: 16px; }
  & .confirmation-card {
    max-width: 620px; margin-inline: auto; margin-top: 28px; padding: 28px 32px 24px;
    background: rgba(255,255,255,.20); border: 1px solid rgba(255,255,255,.8);
    border-radius: 22px; text-align: left;
  }
  & .confirmation-facts { display: grid; gap: 12px; margin: 0; }
  & .confirmation-row {
    display: grid; grid-template-columns: max-content minmax(0,1fr);
    align-items: baseline; gap: 24px;
  }
  & .confirmation-row dt { color: var(--muted); }
  & .confirmation-row dd { margin: 0; font-weight: 500; text-align: right; }
  & .confirmation-time { display: block; }
  & .confirmation-time + .confirmation-time { margin-top: 12px; }
  & .confirmation-first-lesson { display: block; font-weight: 300; color: var(--muted); }
  & .confirmation-notes {
    display: grid; gap: 16px; margin-top: 24px; padding-block: 22px;
    border-block: 1px solid var(--line);
  }
  & .confirmation-notes p { display: flex; align-items: flex-start; gap: 12px; }
  & .confirmation-notes svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px; }
  & .booking-confirmation strong { font-weight: 500; }
  & .confirmation-email { overflow-wrap: anywhere; }
  & .confirmation-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; padding-top: 22px; }
  & .confirmation-button {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 44px; padding: 10px 22px; border: 1px solid var(--ink); border-radius: 999px;
    font: 500 14px/1.4 var(--sans); text-decoration: none; cursor: pointer;
    transition: background-color .2s ease;
  }
  & .confirmation-button--secondary { background: transparent; color: var(--ink); }
  & .confirmation-button--secondary:hover { background: rgba(255,255,255,.4); }
  & .confirmation-button--primary { background: #292929; color: #fff; }
  & .confirmation-button--primary:hover { background: #3a3a3a; }
  & .confirmation-button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
  & .confirmation-help { max-width: none; margin: 16px auto 0; color: var(--muted); }
  & .confirmation-help p + p { margin-top: 16px; }
  & :is(.confirmation-help,.confirmation-notes,.confirmation-facts) a {
    font-weight: 500; color: var(--ink); text-decoration: underline; text-underline-offset: .16em;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(#lessons, #lesson-options).index-booking-enabled .index-booking .confirmation-button { transition: none; }
}

/* Touch layouts retain natural-size fields. The section, not the payment
   widget or the whole page, owns overflow when more room is needed. */
@media (max-width: 1000px) {
  :is(#lessons, #lesson-options).index-booking-enabled .index-booking {
    & .details-layout, & .checkout-pair { grid-template-columns: minmax(0, 1fr); }
    & .checkout-pair > .step-heading { padding-top: 0; }
  }
}
@media (any-pointer: coarse) {
  :is(#lessons, #lesson-options).index-booking-enabled .index-booking {
    & .calendar-grid { min-height: 710px; grid-template-rows: 44px repeat(14, minmax(44px, 1fr)); }
    & .calendar-actions > .booking-primary { width: 140px; height: 48px; min-height: 48px; }
    & .booking-primary { border-radius: 999px; }
  }
}
html.tablet-portrait :is(#lessons, #lesson-options).index-booking-enabled .index-booking {
  & .calendar-grid { grid-template-columns: 38px repeat(7, minmax(0, 1fr)); grid-template-rows: 44px repeat(14, minmax(44px, 1fr)); min-height: 710px; }
  & :is(.calendar-corner, .calendar-hour) { display: block; }
  & .calendar-date { grid-column: auto; border-radius: 0; background: transparent; }
  & .calendar-slot { display: grid; grid-column: auto; margin: 0; min-height: 44px; }
  & .calendar-actions > .booking-primary { width: 140px; height: 48px; min-height: 48px; }
}
html.phone-deck body.section3-preview main#main-content :is(#lessons, #lesson-options).index-booking-enabled .section-stage {
  top: var(--phone-stage-top, calc(var(--header-height) + 18px));
  bottom: calc(76px + env(safe-area-inset-bottom));
  height: auto; min-height: 0; max-height: none;
  display: flex; flex-direction: column;
  transform: translateX(-50%); overflow-x: hidden; overflow-y: auto;
  overscroll-behavior-y: contain; scrollbar-width: none;
}
html.phone-deck :is(#lessons, #lesson-options).index-booking-enabled .index-booking {
  padding-block: 0; flex: 1 0 auto; min-height: 100%;
  & .booking-workspace { flex: 1 0 auto; min-height: 0; }
  & .booking-toolbar { display: none; }
  & .booking-status { height: auto; min-height: 0; flex: 0 0 auto; margin: 8px 0 0; font: 300 12.5px/1.5 var(--sans); }
  & .booking-status:empty { display: none; }
  & .booking-view { gap: 20px; justify-content: flex-start; }
  & :is(.step-heading, .calendar-heading, .booking-confirmation) h2 {
    font-size: 28px; font-weight: 400; line-height: 1.08;
    letter-spacing: -.035em; text-wrap: balance;
  }
  & :is(.step-heading, .calendar-heading) > p,
  & .calendar-heading > div > p { margin-top: 18px; font: 300 12.5px/1.55 var(--sans); }
  & .booking-mobile-back {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px; height: 48px; padding: 10px 16px;
    font: 300 12.5px/1.55 var(--sans); border-radius: 999px;
  }
  & .booking-primary {
    width: 100%; min-width: 0; min-height: 48px; height: 48px;
    padding: 10px 16px; border-radius: 999px; gap: 12px;
    font: 300 12.5px/1.55 var(--sans);
  }
  & .booking-view--style { gap: 24px; }
  & .schedule-options { grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; }
  & .schedule-option { position: relative; padding: 16px; border-radius: 16px; }
  & .schedule-option .format-kicker { font-size: 12.5px; line-height: 1.5; }
  & .schedule-option h3 { margin: 8px 0; font-size: 22px; }
  & .schedule-option p { font-size: 12.5px; line-height: 1.5; }
  & .schedule-option > span:last-child { margin-top: 12px; }
  & .booking-view--style > .booking-mobile-back { margin-top: auto; align-self: flex-start; }
  & .booking-view--calendar {
    display: grid; grid-template-rows: max-content minmax(254px, 1fr) max-content;
    gap: 10px; justify-content: stretch;
  }
  & .calendar-heading { flex-direction: column; align-items: stretch; gap: 12px; }
  & .week-navigation { justify-content: space-between; height: 36px; gap: 8px; }
  & .week-navigation button { flex-shrink: 0; width: 36px; height: 36px; }
  & .week-navigation > span { font-size: 12.5px; }
  & .week-navigation small { display: inline; margin-left: 8px; font-size: 11px; }
  & .calendar-grid {
    flex: none; grid-template-columns: 30px repeat(7, minmax(0, 1fr));
    grid-template-rows: 30px repeat(14, minmax(14px, 1fr));
    min-height: 254px; padding: 0; gap: 2px 3px;
  }
  & .calendar-date {
    grid-column: auto; margin: 0; padding: 0 0 4px; gap: 1px;
    border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
    justify-content: center; cursor: default; background: transparent;
  }
  & .calendar-date span { font-size: 10px; }
  & .calendar-date strong { font-size: 14px; }
  & :is(.calendar-corner, .calendar-hour) { display: block; }
  & .calendar-hour { font-size: 10px; }
  & .calendar-slot { display: grid; grid-column: auto; min-height: 0; margin: 0; border-radius: 999px; }
  & .calendar-slot .slot-clock { display: none !important; }
  & .calendar-slot .slot-mark { display: block !important; font-size: 10px; margin: 0; }
  & .booking-view--calendar > .calendar-actions {
    display: grid; grid-template-columns: minmax(0, 1fr) 128px;
    grid-template-rows: auto 48px; gap: 8px 12px;
    height: auto; min-height: 0; flex: none; padding-top: 8px;
  }
  & .calendar-selection {
    grid-column: 1 / -1; min-height: 36px; height: auto; overflow: visible;
    font: 300 14px/1.55 var(--sans); gap: 8px; justify-content: center; overflow-wrap: anywhere;
  }
  & .recurring-slot-summary { display: flex; flex-wrap: wrap; gap: 0 6px; }
  & .first-lesson { font-size: 11px; }
  & .calendar-actions > .booking-mobile-back { grid-column: 1; grid-row: 2; justify-self: start; padding-left: 0; }
  & .calendar-actions > .booking-primary { grid-column: 2; grid-row: 2; width: 128px; height: 48px; min-height: 48px; }
  & .details-layout { grid-template-columns: minmax(0, 1fr); align-items: start; row-gap: 40px; }
  & .details-layout .slot-summary { margin-top: 40px; font: 300 14px/1.55 var(--sans); overflow-wrap: anywhere; }
  & #booking-details label { margin-bottom: 18px; font-size: 13px; }
  & #booking-details :is(input, textarea) { min-height: 48px; font-size: 16px; }
  & #booking-details textarea { min-height: 90px; max-height: 180px; }
  & .booking-details-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  & :is(.booking-details-actions, .checkout-review-content, .payment-review) > .booking-mobile-back {
    width: 100%; background: rgba(255,255,255,.20); border: 1px solid rgba(255,255,255,.5);
  }
  & :is(.checkout-review-content, .payment-review) > .booking-mobile-back { margin-top: 10px; }
  & .booking-view:has(.checkout-pair) { display: block; margin: 0; }
  & .checkout-pair { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  & .checkout-pair > .step-heading { padding: 0; }
  & .checkout-review-content { min-height: 0; padding: 16px; display: flex; flex-direction: column; }
  & .order-line { gap: 10px; font: 300 12.5px/1.5 var(--sans); }
  & .order-line strong { font-size: 12.5px; }
  & .order-line small { margin-top: 3px; font-size: 11px; line-height: 1.4; }
  & .checkout-review-content .slot-summary { gap: 6px; margin-block: 12px; font: 300 12.5px/1.4 var(--sans); }
  & :is(.checkout-review-content,.payment-review--combined) .recurring-slot-summary { flex-direction: column; gap: 2px; }
  & .order-total { margin-top: 0; padding: 12px 0; font-size: 12.5px; }
  & .order-total strong { font-size: 22px; }
  & .policy-check { margin: 4px 0 10px; font-size: 12.5px; line-height: 1.4; }
  & .policy-check input { flex-shrink: 0; width: 18px; height: 18px; margin-top: 0; }
  & .checkout-note { margin-top: 12px; font: 300 11px/1.4 var(--sans); }
  & .payment-review { padding: 20px; }
  & .payment-review--combined > .booking-primary { min-height: 48px; }
  & .payment-identity { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  & .payment-identity :is(input, select) { height: 48px; font-size: 16px; }
  & .payment-identity label { font-size: var(--payment-label-size, 12.5px); }
  & .payment-consent { font-size: 12px; }
  & .booking-view--success { padding-top: 0; justify-content: center; }
  & .booking-confirmation { max-width: none; font: 300 14px/1.45 var(--sans); }
  & .booking-confirmation .success-symbol, & .confirmation-button--secondary { display: none; }
  & .booking-confirmation #success-message { margin-top: 14px; font: 300 14px/1.5 var(--sans); }
  & .confirmation-card { margin-top: 24px; padding: 22px 20px; border-radius: 20px; }
  & .confirmation-row { gap: 16px; }
  & .confirmation-first-lesson { margin-top: 4px; font-size: 12.5px; line-height: 1.45; }
  & .confirmation-notes { gap: 14px; margin-top: 20px; padding-block: 18px; }
  & .confirmation-notes p { gap: 10px; }
  & .confirmation-notes svg { flex: 0 0 16px; width: 16px; height: 16px; }
  & .confirmation-actions { padding-top: 20px; }
  & .confirmation-button--primary { width: 100%; min-height: 48px; font-weight: 300; }
  & .confirmation-help { margin-top: 20px; font-size: 12.5px; line-height: 1.5; }
  & .confirmation-help p + p { margin-top: 12px; }
}

/* Keep the outgoing form in flow until every secure checkout surface is ready.
   The actual Stripe iframe stays mounted in its final node throughout. */
.index-booking .booking-workspace { position: relative; }
.index-booking .booking-view[data-payment-staging] {
  position: absolute !important; top: 0; left: 0; width: 100%;
  opacity: 0 !important; pointer-events: none;
}

/* Reserve feedback space before submission, including while the outgoing form
   remains visible behind staged Stripe loading. Text must never resize the form. */
:is(#lessons, #lesson-options).index-booking-enabled .index-booking
.booking-workspace:has(.booking-view--details, .booking-view--checkout, .booking-view--payment) #booking-status {
  display: block; box-sizing: border-box;
  height: 56px; min-height: 56px; flex: 0 0 56px;
  margin: 0; padding: 1px 0; line-height: 18px; overflow: auto;
}

/* A single checkout text style also supplies Stripe's iframe typography. */
:is(#lessons, #lesson-options).index-booking-enabled .index-booking #booking-payment.payment-review {
  --payment-font-size: 14px;
  --payment-font-weight: 300;
  --payment-line-height: 1.5;
  --payment-action-gap: 10px;
  font: var(--payment-font-weight) var(--payment-font-size)/var(--payment-line-height) var(--sans);
  & .payment-identity { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  & :where(.order-line, .order-line small, .order-line strong, .payment-lesson-summary,
    .payment-lesson-summary small, .payment-lesson-summary .first-lesson, .payment-identity label, .payment-identity input,
    .payment-identity select, .policy-check, .checkout-note, .payment-consent,
    .payment-error, .booking-primary, .booking-mobile-back, [data-action="retry-fields"]) {
    font: var(--payment-font-weight) var(--payment-font-size)/var(--payment-line-height) var(--sans);
  }
  & :is(.order-line strong, .booking-primary) { font-weight: 500; }
  & .payment-consent { margin-bottom: 0; }
  & #payment-submit { display: flex; margin-block: var(--payment-action-gap) 0; }
  & .checkout-note { margin-top: var(--payment-action-gap); }
}
/* Keep the same style throughout the phone card; 16px fields avoid input zoom. */
html.phone-deck :is(#lessons, #lesson-options).index-booking-enabled .index-booking #booking-payment.payment-review {
  --payment-font-size: 16px;
}