/* Booking calendar surface, layout, and drawer styling for the modular tee-time flow. */

/* Booking type scale — aligned to the site standard (inputs/body = 16px).
   Declared on :root so it resolves regardless of where each surface sits in the DOM
   (the drawer is a sibling of .booking-page-layout, not a descendant).
   iOS Safari auto-zooms inputs/selects below 16px, so --booking-fs-body must stay >= 16px.

   Three groups:
   - Drawer-only headings (drawer-title/stepper/title): owned by the drawer; the mobile
     block below never touches them (the drawer scopes its own mobile tweaks locally).
   - Shared floor (body/label/micro/tag): used by drawer AND calendar surface; fixed
     across breakpoints so dense calendar text stays legible and inputs stay iOS-safe.
   - Surface-only large (hero/section/display): calendar/toolbar/overlay headings; the
     mobile block shrinks ONLY these, decoupled from the drawer. */
:root {
    /* Drawer-only headings */
    --booking-fs-drawer-title: 28px; /* drawer hero title ("NEW TEE TIME") */
    --booking-fs-stepper: 20px;      /* guest stepper +/- glyphs and count number */
    --booking-fs-title: 18px;        /* drawer card section titles + pricing total */

    /* Shared floor — never shifts on mobile */
    --booking-fs-body: 16px;    /* values, selects, interactive buttons, close glyphs (inputs inherit the global 16px) */
    --booking-fs-label: 13px;   /* labels, notes, secondary copy */
    --booking-fs-micro: 11px;   /* badges, micro meta, tooltip text */
    --booking-fs-tag: 8px;      /* tiniest meta: resource-header tags, dense mobile chips */

    /* Surface-only large — the mobile block shrinks these */
    --booking-fs-hero: clamp(28px, 2.4vw, 32px); /* hero title */
    --booking-fs-section: 18px;                  /* surface section titles + controls (month label, icon buttons, picker headings) */
    --booking-fs-display: 34px;                  /* full-screen processing / overlay title */
}

/* Mobile: rescale ONLY the surface-only large tokens. Floor + drawer tokens hold,
   so the drawer's mobile type and iOS-safe inputs are untouched. */
@media (max-width: 767px) {
    :root {
        --booking-fs-hero: 22px;
        --booking-fs-section: 16px;
        --booking-fs-display: 26px;
    }
}

body::before {
    content: none !important;
}

#mainContent {
    background: #f2f5f7;
    padding: 32px 0 48px !important;
}

.booking-page-layout {
    --booking-bg: #111922;
    --booking-surface: #1a2430;
    --booking-surface-soft: #253445;
    --booking-border: rgba(207, 219, 227, 0.16);
    --booking-copy: rgba(241, 240, 239, 0.82);
    --booking-accent: #a7d83d;
    --booking-accent-strong: #c4ea62;
    --booking-axis: #101820;
    --booking-now: #dd6b5a;
    --booking-past-slot: rgba(5, 10, 18, 0.7);
    --booking-event-bg: #d9dee2;
    --booking-event-copy: #18212a;
    --booking-shadow: 0 18px 44px rgba(5, 11, 18, 0.36);
    --booking-scrollbar-track: rgba(10, 17, 24, 0.88);
    --booking-scrollbar-thumb: rgba(86, 99, 114, 0.88);
    --booking-scrollbar-thumb-hover: rgba(122, 137, 152, 0.94);
    --booking-day-header-row-height: 36px;
    --booking-resource-header-bg: rgba(19, 31, 43, 0.78);
    --booking-drawer-ease: cubic-bezier(0.22, 1, 0.36, 1);
    color: #fff;
    background: transparent;
    padding: 0;
}

.booking-page-frame {
    width: 100%;
    padding-inline: 16px;
    box-sizing: border-box;
    margin: 0 auto;
}

.booking-main-column {
    position: relative;
    isolation: isolate;
    background-color: #101821;
    background:
        url("/assets/img/views/bookings/booking-section-bg.png") center center / 100% 100% no-repeat;
    border: 1px solid var(--booking-border);
    border-radius: 30px;
    box-shadow: 0 28px 56px rgba(12, 22, 31, 0.2);
}

.booking-main-column {
    overflow: hidden;
    padding-inline: 15px;
}

.booking-main-column::before {
    content: "";
    position: absolute;
    inset: 0;
    background: none;
    pointer-events: none;
    z-index: -1;
}

.booking-hero,
.booking-toolbar {
    padding: 18px 18px 0;
}

.booking-hero {
    display: flex;
    gap: 60px;
    margin-bottom: 28px;
    padding-top: 0;
    justify-content: space-between;
    align-items: center;
}

.booking-hero-copy {
    min-width: 0;
    flex: 1 1 auto;
    width: auto;
    max-width: none;
}

.booking-toolbar-coach-chip__meta {
    color: var(--booking-muted, #9aa1a8);
    font-weight: 500;
    font-size: var(--booking-fs-label);
}

.booking-hero-location {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.booking-hero-location__label {
    color: rgba(255, 255, 255, 0.75);
    font-family: "Outfit", sans-serif;
    font-size: var(--booking-fs-label);
    font-weight: 400;
    line-height: 1.4;
}

.booking-hero-location__label strong {
    color: #ffffff;
    font-weight: 600;
}

.booking-hero-location__switch-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1;
    transition: color 0.15s ease;
}

.booking-hero-location__switch-icon svg {
    display: block;
    transform: translateY(-1px);
}

.booking-hero-location__switch-icon:hover,
.booking-hero-location__switch-icon:focus {
    color: #ffffff;
}

.booking-hero-location__switch {
    color: rgba(255, 255, 255, 0.75);
    font-family: "Outfit", sans-serif;
    font-size: var(--booking-fs-label);
    font-weight: 500;
    line-height: 1.4;
    text-decoration: underline;
    white-space: nowrap;
}

.booking-hero-location__switch:hover,
.booking-hero-location__switch:focus {
    color: #ffffff;
    text-decoration: underline;
}

.booking-hero-title {
    margin: 0;
    color: #ffffff;
    font-family: "Outfit", sans-serif;
    font-size: var(--booking-fs-hero);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: uppercase;
}

.booking-hero-title-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 4px;
}

.booking-hero-title-row .booking-pricing-popover {
    margin-top: 5px;
}

.booking-hero-title-row .booking-pricing-popover__panel {
    right: auto;
    left: 0;
}

.booking-hero-title-row .booking-pricing-popover__panel::before {
    right: auto;
    left: 8px;
}

.booking-hero-description {
    display: block;
    margin: 0;
    color: #ffffff;
    font-family: "Outfit", sans-serif;
    font-size: var(--booking-fs-body);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0;
    max-width: none;
    white-space: normal;
}

.booking-hero-description-row {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: min(100%, 920px);
}

.booking-hero-description-row .booking-hero-description {
    min-width: 0;
    flex: 0 1 auto;
}

.booking-pricing-popover {
    position: relative;
    z-index: 8;
    flex: 0 0 auto;
    margin-top: 1px;
}

.booking-pricing-popover__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid rgba(167, 216, 61, 0.54);
    border-radius: 999px;
    background: rgba(17, 25, 33, 0.78);
    color: #c4ea62;
    font-size: var(--booking-fs-label);
    line-height: 1;
    cursor: pointer;
    list-style: none;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.booking-pricing-popover__trigger .fa {
    display: block;
    line-height: 1;
}

.booking-pricing-popover__trigger::-webkit-details-marker {
    display: none;
}

.booking-pricing-popover__trigger:hover,
.booking-pricing-popover__trigger:focus {
    border-color: rgba(196, 234, 98, 0.9);
    background: rgba(23, 34, 45, 0.98);
    color: #ffffff;
}

.booking-pricing-popover__trigger:focus-visible {
    outline: 2px solid rgba(196, 234, 98, 0.9);
    outline-offset: 2px;
}

.booking-pricing-popover[open] .booking-pricing-popover__trigger {
    border-color: #c4ea62;
    background: #96cb39;
    color: #121a22;
}

.booking-pricing-popover__panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(372px, calc(100vw - 48px));
    padding: 14px;
    border: 1px solid rgba(207, 219, 227, 0.34);
    border-radius: 8px;
    background: #f8fafb;
    color: #17222d;
    box-shadow: 0 22px 46px rgba(5, 11, 18, 0.34);
}

.booking-pricing-popover__panel::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 8px;
    width: 12px;
    height: 12px;
    border-top: 1px solid rgba(207, 219, 227, 0.34);
    border-left: 1px solid rgba(207, 219, 227, 0.34);
    background: #f8fafb;
    transform: rotate(45deg);
}

.booking-pricing-popover__title,
.booking-pricing-popover__summary,
.booking-pricing-popover__note {
    margin: 0;
    font-family: "Outfit", sans-serif;
    letter-spacing: 0;
}

.booking-pricing-popover__title {
    color: #101820;
    font-size: var(--booking-fs-label);
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
}

.booking-pricing-popover__summary {
    margin-top: 4px;
    color: #52606c;
    font-size: var(--booking-fs-label);
    font-weight: 400;
    line-height: 1.45;
}

.booking-pricing-popover__section-heading {
    position: relative;
    margin: 14px 0 0;
    padding: 12px 0 0 12px;
    border-top: 1px solid rgba(23, 34, 45, 0.1);
    color: #52606c;
    font-family: "Outfit", sans-serif;
    font-size: var(--booking-fs-label);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.3;
    text-transform: uppercase;
}

.booking-pricing-popover__section-heading::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 0;
    width: 3px;
    background: currentColor;
}

.booking-pricing-popover__title + .booking-pricing-popover__section-heading {
    margin-top: 18px;
    padding-top: 0;
    border-top: none;
}

.booking-pricing-popover__title + .booking-pricing-popover__section-heading::before {
    top: 0;
}

.booking-pricing-popover__list {
    display: grid;
    gap: 9px;
    margin: 14px 0 0;
}

.booking-pricing-popover__row {
    display: grid;
    grid-template-columns: minmax(92px, 0.9fr) minmax(0, 1.25fr);
    gap: 12px;
    align-items: start;
}

.booking-pricing-popover__row dt,
.booking-pricing-popover__row dd,
.booking-pricing-popover__row small {
    font-family: "Outfit", sans-serif;
    letter-spacing: 0;
}

.booking-pricing-popover__row dt {
    margin: 0;
    color: #6a7580;
    font-size: var(--booking-fs-micro);
    font-weight: 700;
    line-height: 1.35;
    text-transform: uppercase;
}

.booking-pricing-popover__row dd {
    display: grid;
    gap: 2px;
    margin: 0;
    color: #101820;
    font-size: var(--booking-fs-label);
    font-weight: 600;
    line-height: 1.35;
}

.booking-pricing-popover__row small {
    color: #5c6874;
    font-size: var(--booking-fs-micro);
    font-weight: 400;
    line-height: 1.35;
}

.booking-pricing-popover__note {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(23, 34, 45, 0.12);
    color: #52606c;
    font-size: var(--booking-fs-micro);
    font-weight: 400;
    line-height: 1.45;
}

.booking-pricing-popover__section-heading--charged {
    color: #101820;
}

.booking-pricing-popover__section-heading--included {
    color: #3d7a10;
}

.booking-pricing-popover__section-heading--punch-pass {
    color: #b86a00;
}

.booking-pricing-popover__comparison {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.booking-pricing-popover__comparison s {
    color: #9aa4ae;
    font-size: var(--booking-fs-micro);
    font-weight: 400;
    text-decoration: line-through;
}

/* -------------------------------------------------------------------------
   Month picker popover
   ------------------------------------------------------------------------- */

.booking-month-picker {
    position: relative;
    list-style: none;
}

.booking-month-picker__trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    list-style: none;
    border-radius: 6px;
    padding: 2px 4px;
    transition: background-color 0.15s ease;
    user-select: none;
}

.booking-month-picker__trigger::-webkit-details-marker {
    display: none;
}

.booking-month-picker__trigger:hover {
    background: rgba(196, 234, 98, 0.1);
}

.booking-month-picker[open] .booking-month-picker__trigger {
    background: rgba(196, 234, 98, 0.14);
}

.booking-month-picker__trigger .booking-month-label {
    margin: 0;
}

.booking-month-picker__panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    width: 280px;
    padding: 14px 12px 12px;
    border: 1px solid rgba(207, 219, 227, 0.22);
    border-radius: 12px;
    background: #17222d;
    color: #e8eef2;
    box-shadow: 0 20px 48px rgba(5, 11, 18, 0.5);
}

.booking-month-picker__panel::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    border-top: 1px solid rgba(207, 219, 227, 0.22);
    border-left: 1px solid rgba(207, 219, 227, 0.22);
    background: #17222d;
}

.booking-month-picker__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.booking-month-picker__title {
    font-family: "Outfit", sans-serif;
    font-size: var(--booking-fs-label);
    font-weight: 700;
    color: #e8eef2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.booking-month-picker__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #8a9ba8;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.booking-month-picker__nav:hover {
    background: rgba(196, 234, 98, 0.12);
    color: #c4ea62;
}

.booking-month-picker__nav:disabled {
    opacity: 0.35;
    cursor: default;
}

.booking-month-picker__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 4px;
}

.booking-month-picker__weekdays span {
    font-family: "Outfit", sans-serif;
    font-size: var(--booking-fs-micro);
    font-weight: 700;
    text-align: center;
    color: #5a6d7a;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 2px 0;
}

.booking-month-picker__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.booking-month-picker__cell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    border-radius: 6px;
    font-family: "Outfit", sans-serif;
    font-size: var(--booking-fs-label);
    font-weight: 500;
    color: #e8eef2;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
    position: relative;
}

.booking-month-picker__cell:hover:not(.is-disabled) {
    background: rgba(196, 234, 98, 0.16);
    color: #ffffff;
}

.booking-month-picker__cell.is-disabled {
    color: #3d4f5c;
    cursor: default;
}

.booking-month-picker__cell.is-in-current-view {
    background: rgba(196, 234, 98, 0.08);
    color: #ddeea8;
}

.booking-month-picker__cell.is-in-current-view:hover:not(.is-disabled) {
    background: rgba(196, 234, 98, 0.18);
}

.booking-month-picker__cell.is-in-current-view.is-disabled {
    color: rgba(196, 234, 98, 0.28);
}

.booking-month-picker__cell.is-today {
    font-weight: 700;
    color: #e8eef2;
    background: transparent;
    box-shadow: 0 0 0 2px #c4ea62;
}

.booking-month-picker__cell.is-today:hover:not(.is-disabled) {
    background: rgba(196, 234, 98, 0.16);
    color: #ffffff;
    box-shadow: 0 0 0 2px #c4ea62;
}

.booking-month-picker__cell.is-today.is-in-current-view {
    background: rgba(196, 234, 98, 0.08);
    color: #ddeea8;
    box-shadow: 0 0 0 2px #c4ea62;
}

.booking-month-picker__cell.is-today.is-in-current-view:hover:not(.is-disabled) {
    background: rgba(196, 234, 98, 0.18);
    color: #e8eef2;
    box-shadow: 0 0 0 2px #c4ea62;
}

.booking-month-picker__cell.is-today.is-disabled {
    background: transparent;
    color: #3d4f5c;
    box-shadow: 0 0 0 2px rgba(196, 234, 98, 0.3);
}

/* -------------------------------------------------------------------------
   Hero actions
   ------------------------------------------------------------------------- */

.booking-hero-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex: 0 0 auto;
    min-width: max-content;
}

.booking-lesson-picker-card {
    width: 100%;
    margin-top: 12px;
    padding: 18px;
    border: 1px solid rgba(207, 219, 227, 0.14);
    border-radius: 18px;
    background: rgba(17, 25, 33, 0.9);
    box-shadow: 0 18px 36px rgba(7, 13, 21, 0.28);
}

.booking-hero-link {
    display: inline-block;
    color: #96cb39;
    font-family: inherit;
    font-size: inherit;
    font-weight: 400;
    line-height: inherit;
    letter-spacing: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.booking-hero-link:hover,
.booking-hero-link:focus {
    color: #96cb39;
}

.booking-hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: max-content;
    min-height: 48px;
    padding: 12px 24px;
    border: 0;
    border-radius: 60px;
    background: #96cb39;
    color: #121a22;
    font-family: "Outfit", sans-serif;
    font-size: var(--booking-fs-body);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: none;
    transition: none;
}

.booking-hero-cta__content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.booking-hero-cta__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    color: #121a22;
}

.booking-hero-cta__icon svg {
    display: block;
    width: 20px;
    height: 20px;
}

.booking-hero-cta__label {
    display: inline-block;
    color: #121a22;
    font-family: "Outfit", sans-serif;
    font-size: var(--booking-fs-body);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    white-space: nowrap;
}

.booking-hero-cta:hover,
.booking-hero-cta:focus,
.booking-hero-cta:active,
.booking-hero-cta:visited {
    background: #96cb39;
    color: #121a22;
    text-decoration: none;
    box-shadow: none;
    transform: none;
}

.booking-hero-cta:focus-visible {
    outline: 2px solid #121a22;
    outline-offset: 2px;
}

.booking-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 14px 18px;
    align-items: center;
    padding-bottom: 12px;
}

.booking-chip-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
}

#booking-bay-filters {
    gap: 12px;
}

.booking-bay-filters-select {
    display: none;
}

/* Shared chrome for the bay-filter dropdown, used in two contexts: the mobile
   toolbar and the desktop "chips wrapped" fallback. These rules are inert until a
   context re-shows the control with display:inline-flex; each context then overrides
   only its deltas (width, padding, radius, background, font, chevron color). */
.booking-bay-filters-select:not([hidden]) {
    align-items: center;
    gap: 6px;
    height: 32px;
    margin: 0;
    color: #ffffff;
    -webkit-tap-highlight-color: transparent;
}

.booking-bay-filters-select select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    min-width: 0;
    max-width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.booking-bay-filters-select select option {
    color: #111111;
    background: #ffffff;
}

.booking-bay-filters-select__chevron {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    pointer-events: none;
}

/* Adaptive filter on wider screens: when the type chips would wrap to a second row
   (JS sets data-filter-display="dropdown"), hide the chips and show the same
   dropdown used on mobile so the toolbar stays a single row. Styled as a pill to
   match the chips it replaces. Scoped to >=768px (where the chips render): below
   that the mobile select rules own the styling, so a stale "dropdown" attribute
   carried across the breakpoint can't leak desktop geometry onto the mobile select. */
@media (min-width: 768px) {
    .booking-toolbar[data-filter-display="dropdown"] #booking-bay-filters {
        display: none;
    }

    .booking-toolbar[data-filter-display="dropdown"] .booking-bay-filters-select:not([hidden]) {
        display: inline-flex;
        width: auto;
        max-width: 220px;
        padding: 0 12px 0 16px;
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.2);
    }

    .booking-toolbar[data-filter-display="dropdown"] .booking-bay-filters-select select {
        font-family: "Davis Sans", "Outfit", sans-serif;
        font-size: var(--booking-fs-micro);
        font-weight: 400;
        line-height: 1.5;
    }

    .booking-toolbar[data-filter-display="dropdown"] .booking-bay-filters-select__chevron {
        color: rgba(255, 255, 255, 0.85);
    }
}

.booking-chip-group--toggle {
    justify-content: flex-end;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    padding: 2px;
    gap: 1px;
}

.booking-chip-group--toggle .booking-chip {
    background: transparent;
    border-color: transparent;
}

.booking-chip-group--toggle .booking-chip:hover,
.booking-chip-group--toggle .booking-chip:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: transparent;
}

.booking-chip-group--toggle .booking-chip.is-active {
    background: var(--booking-accent);
    border-color: var(--booking-accent);
    color: #16200f;
}

.booking-toolbar__filters,
.booking-toolbar__navigation,
.booking-toolbar__views {
    display: flex;
    align-items: center;
    min-width: 0;
}

.booking-toolbar__filters {
    justify-content: flex-start;
}

.booking-toolbar__navigation {
    justify-content: center;
}

.booking-toolbar__views {
    justify-content: flex-end;
}

.booking-chip {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.88);
    padding: 7px 12px;
    font-size: var(--booking-fs-micro);
    font-weight: 600;
    line-height: 1;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.booking-chip--filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 14px;
    border: 0;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    color: #ffffff;
    font-family: "Davis Sans", "Outfit", sans-serif;
    font-size: var(--booking-fs-micro);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
}

.booking-chip--filter:hover,
.booking-chip--filter:focus {
    background: rgba(255, 255, 255, 0.28);
    border-color: transparent;
    color: #ffffff;
}

.booking-chip--filter.is-active {
    background: #96cb39;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    color: #121a22;
}

.booking-toolbar-coach-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
    min-height: 32px;
    padding: 6px 14px;
    border: 1px solid rgba(167, 216, 61, 0.55);
    border-radius: 22px;
    background: rgba(150, 203, 57, 0.12);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    color: #ffffff;
    font-family: "Davis Sans", "Outfit", sans-serif;
    font-size: var(--booking-fs-micro);
    font-weight: 400;
    line-height: 1.5;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.booking-toolbar-coach-chip:hover,
.booking-toolbar-coach-chip:focus {
    background: rgba(150, 203, 57, 0.2);
    border-color: rgba(167, 216, 61, 0.85);
    color: #ffffff;
}

.booking-toolbar-coach-chip:focus-visible {
    outline: 2px solid rgba(167, 216, 61, 0.85);
    outline-offset: 2px;
}

.booking-toolbar-coach-chip__label {
    color: rgba(255, 255, 255, 0.65);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Compact stand-in for the text label; the label wins on desktop, the icon on mobile. */
.booking-toolbar-coach-chip__icon {
    display: none;
    flex: none;
    color: rgba(255, 255, 255, 0.72);
}

.booking-toolbar-coach-chip__icon svg {
    display: block;
    width: 16px;
    height: 16px;
}

.booking-toolbar-coach-chip__name {
    color: #ffffff;
    font-weight: 600;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.booking-chip--view {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    background: transparent;
    color: rgba(255, 255, 255, 0.88);
    padding: 6px 14px;
    font-family: "Davis Sans", "Outfit", sans-serif;
    font-size: var(--booking-fs-micro);
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
}

.booking-chip--view.is-disabled,
.booking-chip--view:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.booking-chip:hover,
.booking-chip:focus {
    border-color: rgba(167, 216, 61, 0.34);
    color: #fff;
}

.booking-chip.is-active {
    background: var(--booking-accent);
    border-color: var(--booking-accent);
    color: #16200f;
}

.booking-calendar-controls {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.booking-icon-button {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: var(--booking-fs-section);
    line-height: 1;
}

.booking-icon-button__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.booking-icon-button__icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

.booking-icon-button--calendar-nav {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: #495565;
    color: #ffffff;
    box-shadow: none;
}

.booking-icon-button--calendar-nav .booking-icon-button__icon svg {
    width: 13px;
    height: 13px;
}

.booking-icon-button--calendar-nav:hover,
.booking-icon-button--calendar-nav:focus,
.booking-icon-button--calendar-nav:active {
    border-color: transparent;
    background: #495565;
    color: #ffffff;
    box-shadow: none;
}

.booking-icon-button--calendar-nav:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.28);
    outline-offset: 2px;
}

.booking-icon-button--calendar-nav.is-disabled,
.booking-icon-button--calendar-nav:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.booking-icon-button--calendar-nav.is-disabled:hover,
.booking-icon-button--calendar-nav.is-disabled:focus,
.booking-icon-button--calendar-nav.is-disabled:active,
.booking-icon-button--calendar-nav:disabled:hover,
.booking-icon-button--calendar-nav:disabled:focus,
.booking-icon-button--calendar-nav:disabled:active {
    background: #495565;
    color: #ffffff;
    border-color: transparent;
    box-shadow: none;
}

.booking-icon-button--refresh.is-refreshing .booking-icon-button__icon {
    animation: booking-toast-spin 0.8s linear infinite;
}

.booking-refresh-wrapper {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 7px;
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.booking-refresh-label {
    font-size: var(--booking-fs-micro);
    font-weight: 600;
    line-height: 1;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
}

.booking-refresh-label--stale {
    color: #f5a623;
}

.booking-icon-button:hover,
.booking-icon-button:focus {
    border-color: rgba(167, 216, 61, 0.42);
}

.booking-month-label {
    min-width: 128px;
    margin: 0;
    text-align: center;
    font-family: "Outfit", sans-serif;
    font-size: var(--booking-fs-section);
    font-weight: 700;
    color: #fff;
}

.booking-calendar-shell {
    --booking-resource-column-min-width: 180px;
    --booking-time-axis-width: 54px;
    --booking-timegrid-table-width: 100%;
    padding: 0;
    overflow-x: hidden;
    height: 100vh;
    min-height: 480px;
    display: flex;
    flex-direction: column;
}

.booking-calendar-viewport {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.booking-calendar {
    flex: 1;
    min-height: 0;
    min-width: 0;
    padding: 0 18px 0;
}

.booking-calendar-shell .fc {
    --fc-border-color: rgba(207, 219, 227, 0.14);
    --booking-grid-line-color: rgba(125, 136, 149, 0.24);
    --booking-date-separator-color: rgb(227, 230, 237);
    --fc-page-bg-color: transparent;
    --fc-neutral-bg-color: rgba(255, 255, 255, 0.015);
    --fc-today-bg-color: rgba(167, 216, 61, 0.06);
    --fc-now-indicator-color: var(--booking-now);
    --fc-event-bg-color: transparent;
    --fc-event-border-color: transparent;
    --fc-button-text-color: #fff;
    --fc-button-bg-color: transparent;
    --fc-button-border-color: transparent;
    --fc-small-font-size: var(--booking-fs-micro);
    color: #fff;
    font-size: var(--booking-fs-label);
}

.booking-calendar-shell .fc .fc-toolbar.fc-header-toolbar {
    display: none;
}

.booking-calendar-shell .fc .fc-scrollgrid,
.booking-calendar-shell .fc .fc-scrollgrid-section > * {
    border-color: var(--fc-border-color);
}

.booking-calendar-shell .fc .fc-scrollgrid {
    border: 1px solid var(--fc-border-color);
    border-radius: 18px;
    overflow: hidden;
}

.booking-calendar-shell .fc .fc-scrollgrid-section-header .fc-scroller,
.booking-calendar-shell .fc .fc-scrollgrid-section-header .fc-scroller-harness,
.booking-calendar-shell .fc .fc-col-header {
    background:
        linear-gradient(
            180deg,
            rgb(167, 216, 61) 0,
            rgb(167, 216, 61) var(--booking-day-header-row-height),
            var(--booking-resource-header-bg) var(--booking-day-header-row-height),
            var(--booking-resource-header-bg) 100%
        ) !important;
}

/* Day view collapses FullCalendar's single-date header row, so a standalone banner above the
   bays keeps a date row visible (parity with the multi-day green date row). JS fills its content. */
.booking-day-date-banner {
    display: none;
}

.booking-calendar-shell[data-view-mode="day"] .booking-day-date-banner {
    display: flex;
    flex: none;
    align-items: stretch;
    height: var(--booking-day-header-row-height);
    margin: 0 18px;
    overflow: hidden;
    background: rgb(167, 216, 61);
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
}

.booking-calendar-shell[data-view-mode="day"] .booking-day-date-banner .fc-day-header-chip {
    flex: 1 1 auto;
}

/* Day view renders a single resource row, so the two-tone multi-day header leaves a false seam. */
.booking-calendar-shell[data-view-mode="day"] .fc .fc-scrollgrid-section-header .fc-scroller,
.booking-calendar-shell[data-view-mode="day"] .fc .fc-scrollgrid-section-header .fc-scroller-harness,
.booking-calendar-shell[data-view-mode="day"] .fc .fc-col-header,
.booking-calendar-shell[data-view-mode="day"] .fc .fc-col-header > thead > tr:first-child > th {
    background: var(--booking-resource-header-bg) !important;
}

.booking-calendar-shell .fc .fc-col-header > thead > tr:first-child > th {
    background: rgb(167, 216, 61) !important;
}

.booking-calendar-shell .fc .fc-col-header > thead > tr:nth-child(2) > th {
    background: rgba(19, 31, 43, 0.78) !important;
}

/* In day view the standalone banner owns the rounded top corners, so the bay row stays square.
   The scrollgrid wrapper clips its top corners via border-radius + overflow:hidden, which would
   round the bay row regardless of the th radius, so flatten the wrapper's top in day view too. */
.booking-calendar-shell[data-view-mode="day"] .fc .fc-scrollgrid {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.booking-calendar-shell:not([data-view-mode="day"]) .fc .fc-col-header > thead > tr:first-child > th:first-child {
    border-top-left-radius: 18px;
}

.booking-calendar-shell:not([data-view-mode="day"]) .fc .fc-col-header > thead > tr:first-child > th:last-child {
    border-top-right-radius: 18px;
}

.booking-calendar-shell .fc .fc-col-header th {
    border: 0 !important;
    color: inherit !important;
    font-family: inherit !important;
    text-transform: none !important;
}

.booking-calendar-shell .fc .fc-scrollgrid-section-header > *,
.booking-calendar-shell .fc .fc-scrollgrid-section-body > * {
    border-left-width: 0;
    border-right-width: 0;
}

.booking-calendar-shell .fc .fc-scrollgrid-section-header > * {
    border-top-width: 0;
}

.booking-calendar-shell .fc .fc-scrollgrid-section-body > * {
    border-bottom-width: 0;
}

.booking-calendar-shell .fc .fc-timegrid-slot {
    border-top-color: var(--booking-grid-line-color);
    border-bottom-width: 0;
    border-bottom-color: transparent;
}

.booking-calendar-shell .fc .fc-timegrid-col[data-resource-id] {
    border-left-color: transparent;
    border-right-width: 0;
    border-right-color: transparent;
}

.booking-calendar-shell .fc .fc-col-header > thead > tr:nth-child(2) > th[data-resource-id] {
    border-left: 1px solid transparent !important;
    border-right-width: 0 !important;
    border-right-color: transparent !important;
}

.booking-calendar-shell .fc .fc-timegrid-col.booking-grid-divider {
    border-left-color: var(--booking-grid-line-color);
    box-shadow: none;
}

.booking-calendar-shell .fc .fc-timegrid-col.booking-date-separator {
    border-left-color: var(--booking-date-separator-color);
    box-shadow: none;
}

.booking-calendar-shell .fc .fc-timegrid-axis,
.booking-calendar-shell .fc .fc-timegrid-slot-label {
    background: var(--booking-axis);
}

.booking-calendar-shell .fc th.fc-timegrid-axis,
.booking-calendar-shell .fc td.fc-timegrid-axis {
    width: var(--booking-time-axis-width, 54px) !important;
    min-width: var(--booking-time-axis-width, 54px) !important;
    max-width: var(--booking-time-axis-width, 54px) !important;
}

.booking-calendar-shell .fc .fc-timegrid-slot-label {
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
}

.booking-calendar-shell .fc .fc-timegrid-body table colgroup col:first-child {
    width: 54px !important;
}

.booking-calendar-shell .fc .fc-timegrid-slot-label-frame,
.booking-calendar-shell .fc .fc-timegrid-slot-label-cushion {
    width: 100%;
}

.booking-calendar-shell .fc .fc-timegrid-axis-cushion,
.booking-calendar-shell .fc .fc-timegrid-slot-label-cushion {
    display: block;
    padding: 0;
    color: #fff;
    font-family: "Outfit", sans-serif;
    font-size: var(--booking-fs-label);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0;
    text-align: center;
    text-transform: lowercase;
}

.booking-calendar-shell .fc .fc-timegrid-slot {
    height: 6rem !important;
}

.booking-calendar-shell .fc .fc-timegrid-slot,
.booking-calendar-shell .fc .fc-timegrid-col {
    background:
        linear-gradient(180deg, rgba(14, 22, 31, 0.34) 0%, rgba(14, 22, 31, 0.14) 100%);
}

.booking-calendar-shell .fc .fc-timegrid-col.fc-day-today {
    background:
        linear-gradient(180deg, rgba(167, 216, 61, 0.12) 0%, rgba(14, 22, 31, 0.14) 100%);
}

.booking-calendar-shell .fc .fc-daygrid-body-natural .fc-daygrid-day-events,
.booking-calendar-shell .fc .fc-timegrid-body {
    background: transparent;
}

.booking-calendar-shell .fc .fc-col-header-cell-cushion {
    width: 100% !important;
    padding: 0;
    text-decoration: none;
}

.booking-calendar-shell .fc .fc-col-header-cell {
    background: rgba(167, 216, 61, 0.08);
}

.booking-calendar-shell .fc .fc-timegrid-divider {
    display: none;
}

.booking-calendar-shell .fc .fc-non-business {
    background: transparent !important;
}

.booking-calendar-shell .fc td.fc-day-disabled,
.booking-calendar-shell .fc th.fc-day-disabled {
    opacity: 1 !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid transparent !important;
}

.booking-calendar-shell .fc td.fc-day-disabled {
    border-right-width: 0 !important;
}

.booking-calendar-shell .fc td.fc-day-disabled.booking-date-separator {
    border-left-color: var(--booking-date-separator-color) !important;
}

.booking-calendar-shell .fc td.fc-day-disabled.booking-grid-divider {
    border-left-color: rgba(125, 136, 149, 0.5) !important;
}

.booking-calendar-shell .fc .fc-timegrid-col.fc-day-disabled {
    position: relative;
}

.booking-calendar-shell .fc .fc-timegrid-col.fc-day-disabled::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-color: rgba(4, 8, 16, 0.28);
    background-image: radial-gradient(rgba(255, 255, 255, 0.30) 1px, transparent 1.2px);
    background-size: 6px 6px;
}

.booking-calendar-shell .fc .fc-timegrid-col.fc-day-disabled::before {
    content: 'Not Yet Available';
    position: absolute;
    top: 4px;
    left: 8px;
    z-index: 4;
    font-family: "Outfit", sans-serif;
    /* Match the closure labels / booking-card text: inherit the .fc base font-size (no hardcoded px). */
    font-size: inherit;
    font-weight: 500;
    color: #c6d2e6;
    background: rgb(10, 18, 32);
    padding: 1px 5px;
    border-radius: 3px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    pointer-events: none;
    white-space: nowrap;
}

.booking-calendar-shell .fc-day-header-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 24px;
    padding: 6px 4px;
    background: var(--booking-accent);
    color: #111a12;
    font-family: "Davis Sans", "Outfit", sans-serif;
    font-size: var(--booking-fs-body);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    text-align: center;
    text-transform: uppercase;
}

.booking-calendar-shell .fc-day-header-chip__weekday,
.booking-calendar-shell .fc-day-header-chip__date {
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
}

.booking-calendar-shell .fc-day-header-chip__date {
    opacity: 1;
}

.booking-calendar-shell .fc-day-header-chip__today {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 18px;
    padding: 0 7px;
    margin-inline-end: 4px;
    border-radius: 999px;
    background: rgba(17, 25, 33, 0.16);
    color: #111921;
    font-family: "Outfit", sans-serif;
    font-size: var(--booking-fs-micro);
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.2;
}

.booking-calendar-shell .fc-resource-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-height: 40px;
    padding: 10px 4px;
    background: rgba(19, 31, 43, 0.78);
}

.booking-calendar-shell .fc-resource-header--compact {
    min-height: 40px;
    padding: 10px 4px;
}

.booking-calendar-shell .fc-resource-header__title {
    color: #fff;
    font-family: "Outfit", sans-serif;
    font-size: var(--booking-fs-label);
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.booking-calendar-shell .fc-resource-header__tag {
    display: inline-flex;
    align-self: center;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: var(--booking-fs-tag);
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.booking-calendar-shell .fc-resource-header__tag--public,
.booking-calendar-shell .fc-resource-header__tag--featured {
    background: rgba(167, 216, 61, 0.12);
    color: #d9ef9d;
}

.booking-calendar-shell .fc-resource-header__tag--private {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
}

.booking-calendar-shell .fc-slot-label-chip {
    display: block;
    width: 100%;
    padding-left: 0;
    position: relative;
    top: -10px;
    text-align: center;
}

.booking-calendar-shell .fc .fc-timegrid-now-indicator-line {
    border-color: #ffffff !important;
    border-width: 1px !important;
}

.booking-calendar-shell .fc-direction-ltr .fc-timegrid-now-indicator-arrow {
    border: 0 !important;
    margin: -10px 0 0;
    width: 100%;
    text-align: right;
    z-index: 10;
}

.booking-calendar-shell .fc .b9-now-indicator-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 18px;
    padding: 1px 7px;
    border-radius: 100px;
    background: #ffffff;
    color: #111921;
    font-family: "Outfit", sans-serif;
    font-size: var(--booking-fs-label);
    line-height: 16px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(17, 25, 33, 0.6);
}

.booking-calendar-shell .fc .fc-resource .fc-timegrid-now-indicator-line::before {
    display: none !important;
}

.booking-calendar-shell .fc .fc-resource .fc-timegrid-now-indicator-line,
.booking-calendar-shell .fc .fc-resource .fc-timegrid-now-indicator-arrow {
    font-size: 0 !important;
    line-height: 0 !important;
}

.booking-calendar-shell .fc .fc-resource .fc-timegrid-now-indicator-line *,
.booking-calendar-shell .fc .fc-resource .fc-timegrid-now-indicator-arrow * {
    font-size: 0 !important;
    line-height: 0 !important;
}

.booking-calendar-shell .fc .fc-resource .fc-timegrid-now-indicator-line .b9-now-indicator-pill,
.booking-calendar-shell .fc .fc-resource .fc-timegrid-now-indicator-arrow .b9-now-indicator-pill {
    display: none !important;
}

.booking-calendar-shell .fc .b9-past-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    z-index: 1;
    background: var(--booking-past-slot);
}

.booking-calendar-shell .fc .fc-event {
    margin: 0 2px;
    border: 0;
    background: transparent;
    box-shadow: none;
    cursor: default;
}

.booking-calendar-shell .fc .fc-event.booking-event-pending {
    cursor: grab;
}

.booking-calendar-shell .fc .fc-event.booking-event-pending.fc-event-dragging,
.booking-calendar-shell .fc .fc-event.booking-event-pending.fc-event-resizing,
.booking-calendar-shell .fc .fc-event.booking-event-pending:active {
    cursor: grabbing;
}

.booking-calendar-shell .fc .fc-timegrid-event {
    padding: 0 !important;
}

.booking-calendar-shell .fc .fc-event-main {
    padding: 0;
    height: 100%;
}

.booking-calendar-shell .fc-booking-card {
    --fc-booking-card-text: #dadbdb;
    --fc-booking-card-indicator: #c1d0df;
    --fc-booking-card-indicator-column: 12px;
    display: grid;
    grid-template-columns: var(--fc-booking-card-indicator-column) minmax(0, 1fr);
    column-gap: 4px;
    align-items: start;
    align-content: start;
    justify-items: start;
    box-sizing: border-box;
    height: 100%;
    min-height: 0;
    margin-top: 2px;
    height: calc(100% - 2px);
    padding: 6px;
    border: 0;
    border-radius: 4px;
    background: rgba(193, 208, 223, 0.4);
    color: var(--fc-booking-card-text);
    box-shadow: none;
    overflow: hidden;
}

.booking-calendar-shell .fc-booking-card--compact {
    min-height: 0;
    padding: 5px;
}

.booking-calendar-shell .fc-booking-card__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2px;
    width: 100%;
    min-width: 0;
}

.booking-calendar-shell .fc-booking-card__indicator {
    display: block;
    color: var(--fc-booking-card-indicator);
    flex: 0 0 auto;
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    justify-self: start;
}

.booking-calendar-shell .fc-booking-card__indicator--dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: currentColor;
    margin-top: 3px;
}

.booking-calendar-shell .fc-booking-card__indicator--status-icon {
    width: 12px;
    height: 12px;
    margin-top: 1px;
}

.booking-calendar-shell .fc-booking-card__indicator--status-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.booking-calendar-shell .fc-booking-card__time {
    display: block;
    width: 100%;
    min-width: 0;
    font-family: "Outfit", sans-serif;
    font-size: var(--booking-fs-label);
    font-weight: 400;
    line-height: 14px;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.booking-calendar-shell .fc-booking-card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 18px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    color: inherit;
    font-family: "Outfit", sans-serif;
    font-size: var(--booking-fs-micro);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.booking-calendar-shell .fc-booking-card__status {
    display: block;
    width: 100%;
    font-family: "Outfit", sans-serif;
    font-size: var(--booking-fs-label);
    font-weight: 500;
    line-height: 14px;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.booking-calendar-shell .fc-booking-card__meta {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    min-width: 0;
    font-family: "Outfit", sans-serif;
    font-size: var(--booking-fs-label);
    font-weight: 400;
    line-height: 14px;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.booking-calendar-shell .fc-booking-card__meta-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.booking-calendar-shell .fc-booking-card__meta-separator {
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: currentColor;
    flex: 0 0 auto;
}

/* The shared --booking-fs-label floor holds at 13px everywhere (iOS/density), but the
   event cards are full-width on mobile day view and read too small there, so deliberately
   bump just the card text (badge stays a small pill). */
@media (max-width: 767px) {
    .booking-calendar-shell .fc-booking-card__time,
    .booking-calendar-shell .fc-booking-card__status,
    .booking-calendar-shell .fc-booking-card__meta {
        font-size: 15px;
        line-height: 1.25;
    }
}

.booking-calendar-shell .fc .fc-scroller-harness,
.booking-calendar-shell .fc .fc-scroller {
    background: transparent;
}

.booking-drawer__body,
.booking-calendar-shell .fc .fc-scroller {
    scrollbar-width: auto;
    scrollbar-color: var(--booking-scrollbar-thumb) var(--booking-scrollbar-track);
}

.booking-drawer__body::-webkit-scrollbar,
.booking-calendar-shell .fc .fc-scroller::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.booking-drawer__body::-webkit-scrollbar-track,
.booking-calendar-shell .fc .fc-scroller::-webkit-scrollbar-track {
    background: var(--booking-scrollbar-track);
    border-radius: 999px;
}

.booking-drawer__body::-webkit-scrollbar-thumb,
.booking-calendar-shell .fc .fc-scroller::-webkit-scrollbar-thumb {
    background: var(--booking-scrollbar-thumb);
    border: 2px solid var(--booking-scrollbar-track);
    border-radius: 999px;
}

.booking-drawer__body:hover::-webkit-scrollbar-thumb,
.booking-drawer__body:focus::-webkit-scrollbar-thumb,
.booking-calendar-shell .fc .fc-scroller:hover::-webkit-scrollbar-thumb,
.booking-calendar-shell .fc .fc-scroller:focus::-webkit-scrollbar-thumb {
    background: var(--booking-scrollbar-thumb-hover);
}

.booking-drawer__body::-webkit-scrollbar-corner,
.booking-calendar-shell .fc .fc-scroller::-webkit-scrollbar-corner {
    background: var(--booking-scrollbar-track);
}

.booking-calendar-shell .fc .fc-scrollgrid-section-header .fc-scroller {
    scrollbar-color: transparent transparent;
}

.booking-calendar-shell .fc .fc-scrollgrid-section-header .fc-scroller::-webkit-scrollbar-track,
.booking-calendar-shell .fc .fc-scrollgrid-section-header .fc-scroller::-webkit-scrollbar-thumb,
.booking-calendar-shell .fc .fc-scrollgrid-section-header .fc-scroller::-webkit-scrollbar-corner {
    background: transparent;
    border-color: transparent;
}

.booking-calendar-shell .fc .fc-scrollgrid-section-header .fc-scroller:hover::-webkit-scrollbar-thumb,
.booking-calendar-shell .fc .fc-scrollgrid-section-header .fc-scroller:focus::-webkit-scrollbar-thumb {
    background: transparent;
}

@media (min-width: 1280px) and (max-width: 1535px) {
    #mainContent {
        padding: 28px 0 40px !important;
    }

    .booking-hero,
    .booking-toolbar {
        padding-left: 16px;
        padding-right: 16px;
    }

    .booking-calendar {
        padding-left: 16px;
        padding-right: 16px;
    }

    .booking-calendar-shell[data-view-mode="day"] .booking-day-date-banner {
        margin: 0 16px;
    }

    .booking-calendar-shell .fc-day-header-chip {
        gap: 2px;
        padding-inline: 3px;
        font-size: var(--booking-fs-body);
        line-height: 1.5;
    }

}

@media (max-width: 1279px) {
    #mainContent {
        padding: 24px 0 36px !important;
    }

    .booking-hero,
    .booking-toolbar {
        padding-left: 16px;
        padding-right: 16px;
    }

    .booking-toolbar {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        grid-template-areas: "filters navigation views";
        align-items: center;
        column-gap: 12px;
        row-gap: 0;
    }

    .booking-toolbar__filters {
        grid-area: filters;
        align-self: center;
        justify-content: flex-start;
    }

    .booking-toolbar__navigation {
        grid-area: navigation;
        align-self: center;
        justify-content: center;
    }

    .booking-toolbar__views {
        grid-area: views;
        align-self: center;
        justify-content: flex-end;
    }

    .booking-calendar-shell {
        overflow-x: hidden;
        height: 100vh;
    }

    .booking-calendar {
        padding-left: 16px;
        padding-right: 16px;
    }

    .booking-calendar-shell[data-view-mode="day"] .booking-day-date-banner {
        margin: 0 16px;
    }

    .booking-calendar-controls {
        width: auto;
        max-width: none;
        justify-content: center;
    }

    .booking-month-label {
        flex: 1 1 auto;
        min-width: 0;
        white-space: nowrap;
    }
}

@media (max-width: 767px) {
    #mainContent {
        padding: 0 !important;
    }

    .booking-refresh-label {
        display: none;
    }

    .booking-page-frame {
        width: 100%;
        padding-inline: 0;
    }

    .booking-main-column {
        padding: 12px 0 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background-size: 120% 115%;
    }

    .booking-hero,
    .booking-toolbar {
        grid-template-columns: 1fr;
        display: grid;
        padding-left: 16px;
        padding-right: 16px;
    }

    .booking-hero {
        padding-bottom: 0;
        padding-top: 12px;
        align-items: flex-start;
        gap: 6px;
        margin-bottom: 0;
    }

    .booking-hero-location {
        margin-bottom: 6px;
    }

    .booking-hero-description-row {
        margin-bottom: 18px;
    }

    .booking-toolbar {
        padding-top: 10px;
        padding-bottom: 8px;
    }

    .booking-hero-title-row .booking-pricing-popover {
        position: static;
    }

    .booking-hero-title-row .booking-pricing-popover__panel {
        left: auto;
        right: 0;
        width: min(340px, calc(100vw - 32px));
        max-height: min(70vh, 520px);
        overflow-y: auto;
    }

    .booking-hero-title-row .booking-pricing-popover__panel::before {
        display: none;
    }

    .booking-pricing-popover__row {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .booking-hero-cta {
        display: none !important;
    }

    .booking-hero-actions {
        display: none;
    }

    .booking-toolbar {
        /* The views (day toggle) column floors at its content width so it never
           overflows/overlaps the month on the narrowest phones; the filters/coach
           column (left) absorbs the squeeze and truncates instead. At wider widths
           the 1fr share exceeds that floor, so the month stays centered. */
        grid-template-columns: minmax(0, 1fr) auto minmax(min-content, 1fr);
        grid-template-areas: "filters navigation views";
        justify-items: stretch;
        align-items: center;
        column-gap: 10px;
        row-gap: 0;
    }

    /* Icon (not the "Coach:" label) shows on mobile, so tighten the icon-to-name gap. */
    .booking-toolbar-coach-chip {
        gap: 4px;
    }

    .booking-toolbar-coach-chip__name {
        max-width: 100%;
    }

    /* Reclaim the width the "Coach:"/"Tournament:" word would eat on narrow screens. */
    .booking-toolbar-coach-chip__label {
        display: none;
    }

    .booking-toolbar-coach-chip__icon {
        display: inline-flex;
        align-items: center;
    }

    .booking-toolbar__filters {
        align-self: center;
        justify-content: flex-start;
    }

    .booking-toolbar__navigation {
        align-self: center;
        justify-content: center;
    }

    .booking-toolbar__views {
        align-self: center;
        justify-content: flex-end;
    }

    .booking-toolbar[data-view-toggle-visible="false"] {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        grid-template-areas: "filters navigation .";
        column-gap: 10px;
        row-gap: 0;
    }

    .booking-toolbar[data-view-toggle-visible="false"] .booking-toolbar__filters {
        justify-content: flex-start;
        align-self: center;
    }

    .booking-toolbar[data-view-toggle-visible="false"] #booking-bay-filters {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .booking-toolbar[data-view-toggle-visible="false"] .booking-toolbar__navigation {
        justify-content: center;
        align-self: center;
    }

    .booking-calendar-controls {
        width: auto;
        align-items: center;
        justify-content: center;
    }

    .booking-calendar-controls .booking-month-picker__trigger {
        height: 32px;
        align-items: center;
    }

    .booking-chip-group {
        gap: 4px;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    .booking-chip {
        padding: 5px 7px;
        font-size: var(--booking-fs-tag);
    }

    /* The view toggle uses short "1d"/"3d" labels on mobile, so it can stay legible. */
    .booking-chip--view {
        padding: 6px 12px;
        font-size: var(--booking-fs-label);
    }

    #booking-bay-filters {
        display: none;
    }

    .booking-bay-filters-select:not([hidden]) {
        display: inline-flex;
        align-self: center;
        width: 120px;
        padding: 0 10px 0 12px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.08);
    }

    .booking-bay-filters-select select {
        flex: 1 1 auto;
        font-family: "Outfit", sans-serif;
        font-size: var(--booking-fs-body); /* iOS-safe: native select must stay >= 16px to avoid focus zoom */
        font-weight: 600;
        line-height: 1;
    }

    .booking-bay-filters-select select option {
        font-size: var(--booking-fs-body);
        font-weight: 500;
    }

    .booking-bay-filters-select select:focus-visible {
        outline: 2px solid rgba(196, 234, 98, 0.6);
        outline-offset: 2px;
        border-radius: 8px;
    }

    .booking-bay-filters-select__chevron {
        color: rgba(255, 255, 255, 0.75);
    }

    .booking-chip-group--toggle {
        padding: 2px;
        gap: 1px;
    }

    .booking-calendar {
        padding: 0;
    }

    /* Match the grid going full-bleed/square on mobile (multi-day loses its rounding here too). */
    .booking-calendar-shell[data-view-mode="day"] .booking-day-date-banner {
        margin: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .booking-calendar-shell .fc .fc-scrollgrid {
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }

    /* Calendar is full-bleed/square on mobile, so the loading overlay must be too: drop the
       18px side inset and corner rounding (otherwise it pulls away from the edges and leaks
       the header through). */
    .booking-calendar-loading {
        /* !important: the base rule lives later in the source, so without it the desktop
           16px side inset wins over this media query and the overlay would sit inset on a
           full-bleed mobile calendar. */
        inset: -2px 0 0 0 !important;
        border-radius: 0 !important;
    }

    .booking-calendar-shell .fc .fc-col-header-cell.fc-resource {
        border-radius: 0 !important;
    }

    .booking-calendar-shell {
        overflow-x: hidden;
        height: 100vh;
    }

    .booking-hero-description {
        line-height: 1.5;
    }

    .booking-icon-button:not(.booking-icon-button--calendar-nav) {
        width: 28px;
        height: 28px;
        border-radius: 9px;
    }

    .booking-icon-button--calendar-nav {
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }

}

/* Phone-sized exception: when the filters slot holds something (the bay-type
   dropdown, or the coach/tournament chip) AND there is no day toggle on the right
   competing for space, centering would squeeze that control (truncating "All Bays"
   or a long coach/tournament name) while the right side sits empty. In that one case
   hand the free space to the filters slot and shift the month/refresh right. When the
   day toggle IS visible, the month stays centered between the filter and the toggle
   (the default grid), since there's content on both sides. Keyed off "slot occupied"
   (any non-hidden child) rather than one occupant type, so the coach/tournament chip
   gets the same room as the bay filter. */
@media (max-width: 767px) {
    .booking-toolbar[data-view-toggle-visible="false"]:has(.booking-toolbar__filters > *:not([hidden])) {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "filters navigation";
    }
}

@media (max-width: 420px) {
    /* The toolbar keeps the single-row layout from the <=767px rules even on the
       narrowest phones (the month no longer drops to its own row); the filters/coach
       chip truncates with an ellipsis when space is tight rather than stacking. */

    /* On narrow mobile viewports the reserved scrollbar gutter steals width from the last bay. */
    .booking-calendar-shell .fc .fc-scroller {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .booking-calendar-shell .fc .fc-scroller::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    .booking-calendar-shell .fc .fc-timegrid-body,
    .booking-calendar-shell .fc .fc-timegrid-cols,
    .booking-calendar-shell .fc .fc-timegrid-cols table,
    .booking-calendar-shell .fc .fc-timegrid-slots table {
        width: 100% !important;
    }
}

.booking-calendar-shell[data-density-tier="mobile"] .fc .fc-scroller {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

.booking-calendar-shell[data-density-tier="mobile"] .fc .fc-col-header > thead > tr > th[data-resource-id],
.booking-calendar-shell[data-density-tier="mobile"] .fc .fc-timegrid-cols td[data-resource-id] {
    width: var(--booking-resource-column-min-width) !important;
    min-width: var(--booking-resource-column-min-width) !important;
    max-width: var(--booking-resource-column-min-width) !important;
}

.booking-calendar-shell[data-density-tier="mobile"] .fc .fc-col-header,
.booking-calendar-shell[data-density-tier="mobile"] .fc .fc-timegrid-cols table,
.booking-calendar-shell[data-density-tier="mobile"] .fc .fc-timegrid-slots table {
    width: var(--booking-timegrid-table-width) !important;
    min-width: var(--booking-timegrid-table-width) !important;
}

.booking-calendar-shell[data-density-tier="mobile"] .fc .fc-timegrid-slot-lane {
    width: calc(var(--booking-timegrid-table-width) - var(--booking-time-axis-width)) !important;
    min-width: calc(var(--booking-timegrid-table-width) - var(--booking-time-axis-width)) !important;
    border-left: 0;
    border-right: 0;
}

/* Keep the time-axis column visible while the bays scroll horizontally on mobile.
   Promote slots above .fc-timegrid-col-events (z:3) and .fc-timegrid-now-indicator-line (z:4)
   which live in .fc-timegrid-cols and would otherwise paint over the sticky axis.
   pointer-events:none lets clicks fall through to the cols layer (events, date selection). */
.booking-calendar-shell[data-density-tier="mobile"] .fc .fc-timegrid-slots {
    z-index: 5;
    pointer-events: none;
}

/* Separate borders so the lane's gray border-top doesn't share a collapsed line with
   the sticky slot-label -- that shared line scrolled with the lane and produced
   half-hour artifacts under the sticky axis. */
.booking-calendar-shell[data-density-tier="mobile"] .fc .fc-timegrid-slots > table {
    border-collapse: separate;
    border-spacing: 0;
}

/* Flatten the per-row gradient on mobile -- the repeated dark→light banding reads as
   a heavy shadow between half-hours on small screens. Pick the midpoint of the desktop
   gradient so overall density stays the same; the 1px border-top still delimits rows. */
.booking-calendar-shell[data-density-tier="mobile"] .fc .fc-timegrid-slot,
.booking-calendar-shell[data-density-tier="mobile"] .fc .fc-timegrid-col {
    background: rgba(14, 22, 31, 0.22);
}

.booking-calendar-shell[data-density-tier="mobile"] .fc .fc-timegrid-col.fc-day-today {
    background: rgba(167, 216, 61, 0.08);
}

.booking-calendar-shell[data-density-tier="mobile"] .fc .fc-timegrid-slot-label {
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--booking-axis);
    border-top: 1px solid var(--booking-grid-line-color);
    border-left: 0;
    border-right: 0;
    box-shadow: inset -1px 0 0 0 #ffffff;
    pointer-events: auto;
}

/* The now-indicator pill is rendered inside this cell; sticky keeps it pinned at
   viewport left as the bays scroll. */
.booking-calendar-shell[data-density-tier="mobile"] .fc .fc-timegrid-cols td.fc-timegrid-axis {
    position: sticky;
    left: 0;
    z-index: 5;
    background: transparent;
    border-right: 0;
}

.booking-bay-scroll-dots {
    display: none;
}

.booking-calendar-shell[data-density-tier="mobile"] .booking-bay-scroll-dots:not([hidden]) {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 24px 0 10px;
    /* Container stays transparent to taps so calendar events underneath remain clickable
       outside the visible track. The track itself captures the touch — taps between dots
       (on the track background) still register as a scrubber gesture. */
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--booking-bay-dots-bottom, 0px) + env(safe-area-inset-bottom, 0px));
    z-index: 6;
    transition: padding-top 140ms ease;
}

.booking-bay-scroll-dots.is-scrubbing {
    padding-top: 70px;
}

.booking-bay-scroll-dots__track {
    display: flex;
    gap: var(--booking-bay-dots-gap, 8px);
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    pointer-events: auto;
    touch-action: none;
    cursor: pointer;
    transition: background-color 140ms ease, padding 140ms ease, gap 140ms ease;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.booking-bay-scroll-dots.is-scrubbing .booking-bay-scroll-dots__track {
    background: rgba(255, 255, 255, 0.18);
    padding: 16px 22px;
    gap: var(--booking-bay-dots-gap-scrub, 14px);
}

.booking-bay-scroll-dots__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    /* Dots inherit pointer-events:auto from the track wrapper — leave default. */
    transition: background-color 120ms ease, transform 120ms ease, width 140ms ease, height 140ms ease, box-shadow 120ms ease;
    -webkit-tap-highlight-color: transparent;
    appearance: none;
}

.booking-bay-scroll-dots__dot.is-active {
    background: var(--booking-accent);
    transform: scale(1.15);
}

.booking-bay-scroll-dots.is-scrubbing .booking-bay-scroll-dots__dot {
    width: 12px;
    height: 12px;
}

.booking-bay-scroll-dots__dot.is-scrub-target {
    background: var(--booking-accent);
    transform: scale(1.4);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
}

.booking-bay-scroll-dots__pill {
    position: absolute;
    bottom: 100%;
    left: 0;
    transform: translateX(var(--booking-bay-pill-x, 0px)) translateX(-50%);
    margin-bottom: 12px;
    pointer-events: none;
    padding: 6px 12px;
    background: rgba(14, 22, 31, 0.92);
    color: #fff;
    font: 600 13px/1.15 var(--booking-font, system-ui, -apple-system, sans-serif);
    border-radius: 999px;
    opacity: 0;
    transition: opacity 120ms ease;
    /* Mirror FullCalendar's resource-header truncation: clip long bay names with an ellipsis
       so the pill never overflows the viewport. */
    max-width: min(280px, calc(100vw - 40px));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(5, 11, 18, 0.4);
}

.booking-bay-scroll-dots.is-scrubbing .booking-bay-scroll-dots__pill {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .booking-bay-scroll-dots,
    .booking-bay-scroll-dots__dot,
    .booking-bay-scroll-dots__pill {
        transition: none;
    }
}

.booking-bay-fab {
    display: none;
}

.booking-calendar-shell[data-density-tier="mobile"] .booking-bay-fab:not([hidden]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #96cb39;
    color: #121a22;
    box-shadow: 0 10px 22px rgba(5, 11, 18, 0.5), 0 2px 5px rgba(5, 11, 18, 0.32);
    position: fixed;
    right: 16px;
    bottom: calc(var(--booking-bay-dots-bottom, 0px) + 20px + env(safe-area-inset-bottom, 0px));
    z-index: 7;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.booking-bay-fab svg {
    width: 20px;
    height: 20px;
    display: block;
}

.booking-bay-fab:active {
    transform: scale(0.96);
}

.is-hidden {
    display: none !important;
}

.booking-error-toast,
.booking-notice-toast,
.booking-progress-toast,
.booking-info-toast {
    position: fixed;
    left: 50%;
    bottom: 20px;
    z-index: 1150;
    width: min(760px, calc(100vw - 40px));
    border-radius: 12px;
    font-family: "Outfit", sans-serif;
    transform: translateX(-50%);
}

.booking-error-toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: 1px solid #5c1d16;
    background: #fadbd7;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3), 3px 4px 15px rgba(112, 117, 123, 0.73);
    color: #111921;
}

.booking-notice-toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3), 3px 4px 15px rgba(112, 117, 123, 0.73);
    color: #111921;
}

.booking-notice-toast.is-success {
    border: 1px solid #597a1f;
    background: #e4f2cb;
}

.booking-notice-toast.is-warning {
    border: 1px solid #bc8b2c;
    background: #fff2d9;
}

.booking-progress-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid #597a1f;
    background: #e4f2cb;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3), 3px 4px 15px rgba(112, 117, 123, 0.73);
    color: #111921;
}

.booking-info-toast {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px;
    border: 1px solid #263849;
    background: #c1d0df;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3), 3px 4px 15px rgba(112, 117, 123, 0.73);
    color: #111921;
}

.booking-error-toast__icon,
.booking-notice-toast__icon,
.booking-info-toast__icon {
    display: flex;
    flex: 0 0 24px;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: var(--booking-fs-body);
}

.booking-error-toast__icon {
    color: #5c1d16;
}

.booking-notice-toast__icon {
    display: none;
}

.booking-notice-toast.is-success .booking-notice-toast__icon {
    display: flex;
    color: #3d5512;
}

.booking-notice-toast.is-warning .booking-notice-toast__icon {
    display: flex;
    color: #7a5200;
}

.booking-error-toast__content,
.booking-notice-toast__text,
.booking-info-toast__text,
.booking-progress-toast__text {
    flex: 1;
    min-width: 0;
}

.booking-error-toast__content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.booking-error-toast__text,
.booking-info-toast__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.booking-notice-toast__title,
.booking-error-toast__title,
.booking-info-toast__title,
.booking-progress-toast__title {
    font-size: var(--booking-fs-label);
    font-weight: 600;
    line-height: 1.15;
    color: #111921;
}

.booking-notice-toast__body,
.booking-error-toast__body,
.booking-info-toast__body {
    margin-top: 6px;
    font-size: var(--booking-fs-label);
    line-height: 1.25;
    color: #111921;
}

.booking-notice-toast__details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.booking-notice-toast__detail-row {
    margin: 0;
    font-size: var(--booking-fs-label);
    line-height: 1.2;
    color: #111921;
}

.booking-notice-toast__detail-label {
    font-weight: 500;
}

.booking-error-toast__retry {
    flex-shrink: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #111921;
    font-family: "Outfit", sans-serif;
    font-size: var(--booking-fs-label);
    font-weight: 700;
    line-height: 20px;
    text-transform: uppercase;
}

.booking-error-toast__retry[hidden] {
    display: none !important;
}

.booking-error-toast__retry[disabled] {
    opacity: 0.45;
}

.booking-error-toast__close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #5c1d16;
    font-size: var(--booking-fs-label);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.booking-error-toast__close:hover {
    opacity: 1;
}

.booking-error-toast__close:focus-visible {
    opacity: 1;
    outline: 2px solid #5c1d16;
    outline-offset: 1px;
}

.booking-error-toast__retry-label {
    display: inline;
}

.booking-error-toast__retry-spinner,
.booking-progress-toast__spinner {
    border-radius: 50%;
    animation: booking-toast-spin 0.7s linear infinite;
}

.booking-error-toast__retry-spinner {
    display: none;
    width: 10px;
    height: 10px;
    border: 1.5px solid currentColor;
    border-top-color: transparent;
    vertical-align: middle;
}

.booking-error-toast__retry.is-retrying {
    cursor: default;
}

.booking-error-toast__retry.is-retrying .booking-error-toast__retry-label {
    display: none;
}

.booking-error-toast__retry.is-retrying .booking-error-toast__retry-spinner {
    display: inline-block;
}

.booking-progress-toast__spinner {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    border: 2px solid rgba(89, 122, 31, 0.18);
    border-top-color: #597a1f;
}

@keyframes booking-toast-spin {
    to {
        transform: rotate(360deg);
    }
}

.booking-calendar-shell {
    position: relative;
}

.booking-calendar-shell.is-loading .booking-calendar,
.booking-calendar-shell.is-loading .booking-day-date-banner {
    opacity: 0.45;
}

.booking-calendar-loading {
    position: absolute;
    /* Align to the FullCalendar grid, not the full shell: the calendar (and the day banner) sit
       inset via `.booking-calendar` padding / banner margin, so the overlay must match or it
       overhangs the grid edges and reads as oversized. The grid's own border lands 16px from the
       shell edge (the 18px padding minus the 2px the grid border bleeds outward), so inset 16px.
       Top extends 2px above the edge: the backdrop-filter blur leaves a faint fringe right at
       the overlay's edge, which over the bright-green header row reads as an uncovered line.
       Pushing that edge up into the dark toolbar gap hides it. */
    inset: -2px 16px 0 16px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: 18px;
    background: rgba(10, 15, 22, 0.72);
    backdrop-filter: blur(8px);
}

.booking-calendar-loading__bar {
    width: 160px;
    height: 5px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, rgba(167, 216, 61, 0.9) 50%, rgba(255, 255, 255, 0.08) 100%);
    background-size: 200% 100%;
    animation: booking-loading-bar 1.4s linear infinite;
}

.booking-calendar-loading__label {
    color: rgba(255, 255, 255, 0.82);
    font-size: var(--booking-fs-label);
    font-weight: 600;
}

.booking-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: rgba(5, 9, 14, 0.56);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .28s ease;
}

.booking-drawer {
    position: fixed;
    top: 20px;
    right: 20px;
    bottom: 20px;
    z-index: 1100;
    width: min(430px, calc(100vw - 24px));
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(207, 219, 227, 0.14);
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(27, 38, 51, 0.98) 0%, rgba(14, 22, 31, 0.98) 100%);
    box-shadow: 0 28px 58px rgba(5, 11, 18, 0.42);
    overflow: hidden;
    min-height: 0;
    opacity: 0;
    transform: translateX(36px);
    transition:
        transform .36s var(--booking-drawer-ease),
        opacity .24s ease,
        box-shadow .28s var(--booking-drawer-ease);
}

.booking-drawer[hidden] {
    display: none !important;
}

.booking-drawer-backdrop.is-active {
    opacity: 1;
}

.booking-drawer.is-active {
    opacity: 1;
    transform: translateX(0);
}

.booking-drawer__grabber {
    display: none;
}

.booking-drawer__header,
.booking-drawer__footer {
    flex: 0 0 auto;
    padding: 20px 20px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.booking-drawer__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.booking-drawer__footer {
    margin-top: auto;
    border-bottom: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(10, 17, 24, 0.62);
}

.booking-cost-banner {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 13px;
    border-radius: 10px;
    border: 1px solid rgba(167, 216, 61, 0.28);
    background: rgba(167, 216, 61, 0.06);
    font-size: var(--booking-fs-label);
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.45;
    flex-basis: 100%;
    box-sizing: border-box;
}

.booking-cost-banner__icon {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--booking-accent);
}

.booking-cost-banner strong {
    color: var(--booking-accent);
    font-weight: 700;
}

.booking-charging-label {
    margin: 8px 0 0;
    text-align: center;
    font-size: var(--booking-fs-label);
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.01em;
}

.booking-drawer__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.booking-drawer__eyebrow {
    margin: 0 0 6px;
    color: rgba(167, 216, 61, 0.82);
    font-size: var(--booking-fs-label);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.booking-drawer__title {
    margin: 0;
    color: #fff;
    font-family: "Oswald", "Outfit", sans-serif;
    font-size: var(--booking-fs-drawer-title);
    line-height: 1;
    text-transform: uppercase;
}

.booking-drawer__subtitle {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, 0.66);
    font-size: var(--booking-fs-label);
    line-height: 1.4;
}

.booking-icon-button--drawer {
    width: 42px;
    min-width: 42px;
    height: 42px;
    border-radius: 14px;
}

.booking-drawer-card {
    flex: 0 0 auto;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
}

.booking-drawer-card__heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 0;
}

#booking-setup-section .booking-drawer-card__heading,
.booking-drawer-card--summary .booking-drawer-card__heading,
#booking-public-contact-section .booking-drawer-card__heading,
#booking-payment-section .booking-drawer-card__heading,
#booking-pricing-section .booking-drawer-card__heading {
    padding-bottom: 12px;
}

.booking-drawer-card__title {
    margin: 0;
    color: #fff;
    font-size: var(--booking-fs-title);
    font-weight: 700;
}

.booking-drawer-card__note {
    margin: 0;
    color: rgba(255, 255, 255, 0.62);
    font-size: var(--booking-fs-label);
    line-height: 1.4;
}

a.booking-drawer-card__note {
    text-decoration: underline;
}

.booking-drawer-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.booking-drawer-card__row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.booking-drawer-card__heading + .booking-drawer-card__row {
    padding-top: 0;
}

.booking-drawer-card__row--stack-value {
    align-items: flex-start;
    flex-wrap: wrap;
}

.booking-drawer-card__row--stack-value .booking-drawer-card__note {
    flex-basis: 100%;
    text-align: right;
}

.booking-drawer-card__label {
    color: rgba(255, 255, 255, 0.58);
    font-size: var(--booking-fs-label);
}

.booking-drawer-card__value {
    color: #fff;
    font-size: var(--booking-fs-body);
    font-weight: 700;
    text-align: right;
}

.booking-drawer-card__value-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* Let the value+icon group shrink within the flex row so a long location/plan
       name truncates instead of overflowing (inline-flex won't shrink below its
       content without this once the value grew to 16px). */
    min-width: 0;
}

/* Location / membership are free-text names that can run long; truncate with an
   ellipsis on one line so the row height stays stable and the trailing ⓘ/map icon
   stays hugged to the text. Scoped to value-line so the Bay status string and the
   <select> values (which manage their own overflow) are untouched. */
.booking-drawer-card__value-line .booking-drawer-card__value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.booking-drawer-card__icon-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: rgba(255, 255, 255, 0.62);
    cursor: pointer;
    transition: color 0.15s ease;
}

.booking-drawer-card__icon-link:hover,
.booking-drawer-card__icon-link:focus-visible {
    color: #fff;
}

.booking-drawer-card__icon-link[data-tooltip]:hover::after,
.booking-drawer-card__icon-link[data-tooltip]:focus-visible::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
    background: rgba(15, 17, 17, 0.96);
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: var(--booking-fs-label);
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
    z-index: 20;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

.booking-drawer-card__icon-link[data-tooltip]:hover::before,
.booking-drawer-card__icon-link[data-tooltip]:focus-visible::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 1px);
    right: 6px;
    border: 5px solid transparent;
    border-top-color: rgba(15, 17, 17, 0.96);
    pointer-events: none;
    z-index: 20;
}

.booking-drawer-select {
    appearance: none;
    -webkit-appearance: none;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='rgba(255%2C255%2C255%2C0.55)' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
    background-size: 10px 6px;
    border: none;
    color: #fff !important;
    font-family: "Outfit", sans-serif !important;
    font-size: var(--booking-fs-body) !important;
    font-weight: 700 !important;
    text-align: right;
    text-align-last: right;
    cursor: pointer;
    padding: 2px 14px 2px 0;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    outline: none;
    vertical-align: middle;
    margin: 0;
}

.booking-drawer-select:disabled {
    opacity: 0.4;
    cursor: default;
}

.booking-drawer-select option {
    background: #1e2222;
    color: #fff;
    font-weight: 400;
}

.booking-drawer-card__row.is-missing .booking-drawer-card__label::after {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    margin-left: 8px;
    border-radius: 50%;
    background: #e5484d;
    vertical-align: 2px;
    animation: booking-drawer-dot-pulse 1.6s ease-out infinite;
}

@keyframes booking-drawer-dot-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(229, 72, 77, 0.6);
    }
    70% {
        box-shadow: 0 0 0 5px rgba(229, 72, 77, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(229, 72, 77, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .booking-drawer-card__row.is-missing .booking-drawer-card__label::after {
        animation: none;
    }
}

.booking-drawer-card__value-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(167, 216, 61, 0.18);
    color: var(--booking-accent);
    font-family: "Outfit", sans-serif;
    font-size: var(--booking-fs-micro);
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
    vertical-align: middle;
}

.booking-drawer-card__value-text {
    vertical-align: middle;
}

/* ---- Saved-card radio options inside the Payment Method drawer card ---- */

.booking-payment-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    margin-bottom: 8px;
    transition: border-color 0.15s, background 0.15s;
    -webkit-user-select: none;
    user-select: none;
}

.booking-payment-option:last-child {
    margin-bottom: 0;
}

.booking-payment-option:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
}

.booking-payment-option.is-selected {
    border-color: var(--booking-accent);
    background: rgba(167, 216, 61, 0.08);
}

.booking-payment-option__radio {
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 16px;
    width: 16px;
    min-width: 16px;
    max-width: 16px;
    height: 16px;
    min-height: 16px;
    max-height: 16px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    background: transparent;
    cursor: pointer;
    align-self: center;
    transition: border-color 0.15s, box-shadow 0.15s;
    margin: 0;
    padding: 0;
}

.booking-payment-option__radio:checked {
    border-color: var(--booking-accent);
    box-shadow: inset 0 0 0 4px var(--booking-accent);
}

.booking-payment-option__body {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: var(--booking-fs-body);
    min-width: 0;
}

.booking-payment-option__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    color: rgba(255, 255, 255, 0.55);
    font-size: var(--booking-fs-label);
    white-space: nowrap;
}

.booking-payment-option__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(167, 216, 61, 0.18);
    color: var(--booking-accent);
    font-size: var(--booking-fs-micro);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.2;
}

.booking-payment-option--new .booking-payment-option__body {
    color: rgba(255, 255, 255, 0.75);
    font-style: italic;
}

.booking-drawer-card--guests {
    display: grid;
    /* heading column takes all remaining space so "Additional Guests" + ⓘ
       fits on one line; stepper column hugs its 3-button content. */
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 16px;
}

.booking-drawer-card--guests .booking-drawer-card__heading {
    min-width: 0;
    margin-bottom: 0;
    justify-content: center;
}

.booking-drawer-card__title-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.booking-drawer-card__title-row .booking-drawer-card__title {
    /* Keep the title on one line so the ⓘ stays hugged to its right edge and
       vertically centered next to it. Unitless line-height (~the icon ratio) scales
       with the title font-size, unlike the old hardcoded 16px that was tuned for a
       14px title and left the 18px title cramped + wrapping to two lines. */
    line-height: 1.15;
    white-space: nowrap;
}

.booking-drawer-card__title-row .booking-drawer-card__icon-link {
    /* Optical nudge: next to the 18px italic uppercase title the upright ⓘ reads
       ~1px high; bump it down so it sits visually centered with the caps. */
    position: relative;
    top: 1px;
}

/* The shared membership tooltip uses white-space: nowrap (great for "Home: Vernon"
   but the guests blurb is longer and overflows the drawer). Allow wrap + cap width
   only for the title-row instance — colors/font/arrow stay identical.
   180px keeps the leftward-extending tooltip inside the drawer body's padded area
   (drawer ~430px; body padding clips anything that sticks out). */
.booking-drawer-card__title-row .booking-drawer-card__icon-link[data-tooltip]:hover::after,
.booking-drawer-card__title-row .booking-drawer-card__icon-link[data-tooltip]:focus-visible::after {
    white-space: normal;
    width: max-content;
    max-width: 180px;
}

.booking-drawer-card--guests .booking-guest-stepper {
    justify-self: end;
}

/* On the mobile bottom-sheet drawer (card ~343px) the default 40px stepper
   buttons + 14px gaps eat ~148px, leaving the heading column too narrow for
   "ADDITIONAL GUESTS" + ⓘ on one line. Compress the stepper just enough that
   title + stepper stay on the same row — keeping the visual pairing intact. */
@media (max-width: 767px) {
    .booking-drawer-card--guests {
        --booking-fs-stepper: 18px;
    }
    .booking-drawer-card--guests .booking-stepper-button {
        width: 36px;
        height: 36px;
    }
    .booking-drawer-card--guests .booking-guest-count {
        min-width: 18px;
    }
}

/* On the narrowest phones (≤420px) the 18px "ADDITIONAL GUESTS" + ⓘ can't sit on
   one line next to the (already compressed) stepper, so the ⓘ collided with the −
   button. Let the title wrap and shrink to its longest word (min-content) so the ⓘ
   stays hugged to the text and centered across the two lines, well clear of the
   stepper — keeping the 18px size consistent with the other card titles. */
@media (max-width: 420px) {
    .booking-drawer-card--guests .booking-drawer-card__title {
        white-space: normal;
        width: min-content;
    }

    /* The wrapped title moves the ⓘ to the left side of the sheet, so the default
       right-anchored tooltip (which extends leftward) ran off the screen edge.
       Center the bubble and its arrow on the icon so it stays on-screen. */
    .booking-drawer-card--guests .booking-drawer-card__icon-link[data-tooltip]:hover::after,
    .booking-drawer-card--guests .booking-drawer-card__icon-link[data-tooltip]:focus-visible::after,
    .booking-drawer-card--guests .booking-drawer-card__icon-link[data-tooltip]:hover::before,
    .booking-drawer-card--guests .booking-drawer-card__icon-link[data-tooltip]:focus-visible::before {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }
}

.booking-drawer-card--guests .booking-cost-banner {
    grid-column: 1 / -1;
}

.booking-guest-stepper {
    display: inline-flex;
    align-items: center;
    /* Tight gap so the compact stepper leaves room for "Additional Guests" + ⓘ in
       the heading column. The drawer is narrow (~373px) even on desktop, where the
       viewport-based mobile media queries don't apply, so this must hold at all widths
       or the ⓘ collides with the − button. */
    gap: 6px;
}

.booking-stepper-button {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: var(--booking-fs-stepper);
    line-height: 1;
    cursor: pointer;
    transition: opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.booking-stepper-button:disabled,
.booking-stepper-button[aria-disabled="true"] {
    opacity: 0.4;
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
}

.booking-guest-count {
    min-width: 22px;
    color: #fff;
    font-size: var(--booking-fs-stepper);
    font-weight: 700;
    text-align: center;
}

.booking-form-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.booking-drawer-card__heading + .booking-form-grid {
    padding-top: 4px;
}

.booking-field {
    margin-bottom: 0;
    border-bottom: 0;
    padding: 0;
}

.booking-field .booking-drawer-card__label {
    flex: 0 0 52px;
}

.booking-field__label {
    color: rgba(255, 255, 255, 0.62);
    font-size: var(--booking-fs-label);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.booking-field__input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    /* No font-size here on purpose: inherits the site-wide 16px from the global
       input[type=...] rule (assets/css/views/main.css), which prevents iOS Safari auto-zoom. */
    margin-bottom: 0;
}

.booking-field__input::placeholder {
    color: rgba(255, 255, 255, 0.36);
}

.booking-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #f1f0ef;
    font-family: "Outfit", sans-serif;
    font-size: var(--booking-fs-label);
    line-height: 18px;
    cursor: pointer;
}

.booking-toggle input[type="checkbox"] {
    margin: 0;
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    border: 2px solid #f1f0ef;
    border-radius: 2px;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.booking-toggle input[type="checkbox"]:checked {
    border-color: transparent;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M13.2806%206.21937C13.3504%206.28903%2013.4057%206.37175%2013.4434%206.46279C13.4812%206.55384%2013.5006%206.65144%2013.5006%206.75C13.5006%206.84856%2013.4812%206.94616%2013.4434%207.03721C13.4057%207.12825%2013.3504%207.21097%2013.2806%207.28063L8.03063%2012.5306C7.96097%2012.6004%207.87825%2012.6557%207.78721%2012.6934C7.69616%2012.7312%207.59856%2012.7506%207.5%2012.7506C7.40144%2012.7506%207.30384%2012.7312%207.21279%2012.6934C7.12175%2012.6557%207.03903%2012.6004%206.96937%2012.5306L4.71937%2010.2806C4.57864%2010.1399%204.49958%209.94902%204.49958%209.75C4.49958%209.55098%204.57864%209.36011%204.71937%209.21937C4.86011%209.07864%205.05098%208.99958%205.25%208.99958C5.44902%208.99958%205.63989%209.07864%205.78063%209.21937L7.5%2010.9397L12.2194%206.21937C12.289%206.14964%2012.3717%206.09432%2012.4628%206.05658C12.5538%206.01884%2012.6514%205.99941%2012.75%205.99941C12.8486%205.99941%2012.9462%206.01884%2013.0372%206.05658C13.1283%206.09432%2013.211%206.14964%2013.2806%206.21937ZM18%201.5V16.5C18%2016.8978%2017.842%2017.2794%2017.5607%2017.5607C17.2794%2017.842%2016.8978%2018%2016.5%2018H1.5C1.10218%2018%200.720644%2017.842%200.43934%2017.5607C0.158035%2017.2794%200%2016.8978%200%2016.5V1.5C0%201.10218%200.158035%200.720644%200.43934%200.43934C0.720644%200.158035%201.10218%200%201.5%200H16.5C16.8978%200%2017.2794%200.158035%2017.5607%200.43934C17.842%200.720644%2018%201.10218%2018%201.5ZM16.5%2016.5V1.5H1.5V16.5H16.5Z%22%20fill%3D%22%2396CB39%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    box-shadow: none;
}

.booking-terms {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #f1f0ef;
    font-family: "Outfit", sans-serif;
    font-size: var(--booking-fs-label);
    line-height: 16px;
    cursor: pointer;
}

.booking-terms span {
    flex: 1 0 0;
    min-width: 0;
}

.booking-terms a {
    color: #96cb39;
    font-weight: 700;
    text-decoration: underline;
}

.booking-terms a:hover,
.booking-terms a:focus-visible {
    color: #acd95f;
}

/* Inline code-validation feedback */
.booking-field__feedback {
    font-size: var(--booking-fs-label);
    line-height: 1.4;
    padding: 0 2px;
    grid-column: 1 / -1;
}

.booking-field__feedback--error {
    color: #f97c7c;
}

.booking-field__feedback--success {
    color: #96cb39;
}

.booking-field__input--error {
    border-color: rgba(249, 124, 124, 0.6);
}

/* Applied code chip (coupon or gift card confirmation) */
.booking-code-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 12px;
    border-radius: 999px;
    font-size: var(--booking-fs-label);
    font-weight: 600;
    line-height: 1;
    grid-column: 1 / -1;
}

.booking-code-chip--coupon {
    background: rgba(150, 203, 57, 0.15);
    border: 1px solid rgba(150, 203, 57, 0.4);
    color: #96cb39;
}

.booking-code-chip--giftcard {
    background: rgba(130, 180, 255, 0.12);
    border: 1px solid rgba(130, 180, 255, 0.35);
    color: #82b4ff;
}

.booking-code-chip__remove {
    background: none;
    border: none;
    padding: 0 2px;
    cursor: pointer;
    opacity: 0.7;
    color: inherit;
    font-size: var(--booking-fs-body);
    line-height: 1;
}

.booking-code-chip__remove:hover {
    opacity: 1;
}

/* Wallet balance hint on the toggle label */
.booking-toggle__hint {
    margin-left: auto;
    font-size: var(--booking-fs-label);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
}

.booking-terms input[type="checkbox"] {
    margin: auto 0;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    border: 2px solid #f1f0ef;
    border-radius: 2px;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.booking-terms input[type="checkbox"]:checked {
    border-color: transparent;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M13.2806%206.21937C13.3504%206.28903%2013.4057%206.37175%2013.4434%206.46279C13.4812%206.55384%2013.5006%206.65144%2013.5006%206.75C13.5006%206.84856%2013.4812%206.94616%2013.4434%207.03721C13.4057%207.12825%2013.3504%207.21097%2013.2806%207.28063L8.03063%2012.5306C7.96097%2012.6004%207.87825%2012.6557%207.78721%2012.6934C7.69616%2012.7312%207.59856%2012.7506%207.5%2012.7506C7.40144%2012.7506%207.30384%2012.7312%207.21279%2012.6934C7.12175%2012.6557%207.03903%2012.6004%206.96937%2012.5306L4.71937%2010.2806C4.57864%2010.1399%204.49958%209.94902%204.49958%209.75C4.49958%209.55098%204.57864%209.36011%204.71937%209.21937C4.86011%209.07864%205.05098%208.99958%205.25%208.99958C5.44902%208.99958%205.63989%209.07864%205.78063%209.21937L7.5%2010.9397L12.2194%206.21937C12.289%206.14964%2012.3717%206.09432%2012.4628%206.05658C12.5538%206.01884%2012.6514%205.99941%2012.75%205.99941C12.8486%205.99941%2012.9462%206.01884%2013.0372%206.05658C13.1283%206.09432%2013.211%206.14964%2013.2806%206.21937ZM18%201.5V16.5C18%2016.8978%2017.842%2017.2794%2017.5607%2017.5607C17.2794%2017.842%2016.8978%2018%2016.5%2018H1.5C1.10218%2018%200.720644%2017.842%200.43934%2017.5607C0.158035%2017.2794%200%2016.8978%200%2016.5V1.5C0%201.10218%200.158035%200.720644%200.43934%200.43934C0.720644%200.158035%201.10218%200%201.5%200H16.5C16.8978%200%2017.2794%200.158035%2017.5607%200.43934C17.842%200.720644%2018%201.10218%2018%201.5ZM16.5%2016.5V1.5H1.5V16.5H16.5Z%22%20fill%3D%22%2396CB39%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
    box-shadow: none;
}

.booking-pricing-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: var(--booking-fs-label);
}

.booking-pricing-row--total {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: var(--booking-fs-title);
    font-weight: 700;
}

.booking-pricing-notes {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dotted rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.booking-pricing-notes__label {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
}

.booking-pricing-notes__list {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.booking-pricing-notes__list li {
    list-style: disc;
}

.booking-pricing-row--discount {
    color: #96cb39;
}

/* Visual separator between pre-tax breakdown and subtotal/total. Mirrors --total. */
.booking-pricing-row--subtotal {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Coupon / Gift Card inline row inside Pricing card */
.booking-pricing-code-row {
    margin-bottom: 12px;
}

.booking-pricing-code-row__input-group {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.booking-field__input--compact {
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 12px;
    border-radius: 12px;
    /* inherits the global 16px input font-size (iOS-safe); no local override */
    height: 40px;
}

.booking-coupon-apply-btn {
    flex-shrink: 0;
    height: 40px;
    padding: 0 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #f1f0ef;
    font-family: "Outfit", sans-serif;
    font-size: var(--booking-fs-body);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.booking-coupon-apply-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.35);
}

.booking-coupon-apply-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Spacer between coupon/credits controls and the pricing breakdown (no divider line) */
.booking-pricing-controls-sep {
    margin: 18px 0;
}

.booking-pricing-code-row + .booking-toggle {
    margin-top: 10px;
}

/* ── C1: Coupon banner (applied state) ── */
.booking-coupon-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(150, 203, 57, 0.14);
    border-radius: 10px;
    padding: 0 14px;
    height: 44px;
    margin-bottom: 10px;
    color: #96cb39;
}

.booking-coupon-banner__inner {
    display: flex;
    align-items: center;
    gap: 8px;
}

.booking-coupon-banner__label {
    font-size: var(--booking-fs-label);
    font-weight: 600;
}

.booking-coupon-banner__amount {
    font-size: var(--booking-fs-label);
    color: rgba(241, 240, 239, 0.6);
}

.booking-coupon-banner__remove {
    background: none;
    border: none;
    padding: 0 2px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.5);
    font-size: var(--booking-fs-body);
    line-height: 1;
}

.booking-coupon-banner__remove:hover {
    color: #f1f0ef;
}

/* ── C1: Coupon placeholder (dashed, no coupon applied) ── */
.booking-coupon-placeholder {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 44px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(255, 255, 255, 0.16);
    border-radius: 10px;
    padding: 0 14px;
    color: rgba(255, 255, 255, 0.5);
    font-family: "Outfit", sans-serif;
    font-size: var(--booking-fs-body);
    cursor: pointer;
    text-align: left;
    margin-bottom: 10px;
    transition: border-color 0.15s, color 0.15s;
}

.booking-coupon-placeholder:hover {
    border-color: rgba(150, 203, 57, 0.5);
    color: #96cb39;
}

/* ── C1: Cancel coupon button (inside input row) ── */
.booking-coupon-cancel-btn {
    flex-shrink: 0;
    height: 44px;
    width: 44px;
    padding: 0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.55);
    font-size: var(--booking-fs-body);
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.booking-coupon-cancel-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #f1f0ef;
}

/* ── C1: Input and Apply button height inside coupon row ── */
#booking-coupon-input-row.booking-pricing-code-row {
    margin-bottom: 10px;
}

#booking-coupon-input-row .booking-field__input--compact,
#booking-coupon-input-row .booking-coupon-apply-btn {
    height: 44px;
    border-radius: 10px;
    margin-bottom: 0;
}

/* Input wrapper for spinner positioning */
.booking-coupon-input-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
}

.booking-coupon-input-wrap .booking-field__input--compact {
    flex: 1;
    width: 100%;
}

/* Spinner inside the coupon input */
.booking-coupon-spinner {
    position: absolute;
    right: 12px;
    top: 50%;
    margin-top: -7px;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-top-color: #96cb39;
    border-radius: 50%;
    animation: booking-coupon-spin 0.55s linear infinite;
    pointer-events: none;
}

@keyframes booking-coupon-spin {
    to { transform: rotate(360deg); }
}

/* ── C1: Note blocks ── */
.booking-pricing-note {
    margin-bottom: 0;
}

.booking-pricing-note::before {
    content: "Note: ";
    font-weight: 600;
    color: #f1f0ef;
}


/* ── C1: Credits card ── */
.booking-credits-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    height: 44px;
    padding: 0 14px;
    margin-bottom: 20px;
    cursor: pointer;
}

.booking-credits-card__info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.booking-credits-card__label {
    font-size: var(--booking-fs-body);
    font-weight: 500;
    color: #f1f0ef;
}

.booking-credits-card__balance {
    font-size: var(--booking-fs-label);
    color: rgba(255, 255, 255, 0.45);
}

.booking-toggle--compact {
    gap: 0;
    cursor: pointer;
}

/* ── C1: Price breakdown label ── */
.booking-pricing-breakdown-label {
    font-size: var(--booking-fs-label);
    font-weight: 600;
    color: #fff;
    margin-bottom: 6px;
}

/* ── C1: Breakdown body ── */
.booking-pricing-breakdown {
    margin-top: 4px;
}

.booking-pricing-breakdown__summary {
    font-size: var(--booking-fs-label);
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.5;
    margin-bottom: 8px;
}

/* ── C1: Note blocks (replaces bulleted list) ── */
.booking-pricing-notes {
    border-top: none;
    padding-top: 0;
}

.booking-pricing-note {
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    font-size: var(--booking-fs-label);
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.5;
}

.booking-pricing-note--punch-pass {
    background: rgba(184, 106, 0, 0.16);
    border: 1px solid rgba(255, 193, 90, 0.28);
    color: rgba(255, 235, 204, 0.9);
}

.booking-pricing-note--punch-pass::before {
    content: "Punch Pass: ";
    color: #ffc15a;
}

.booking-drawer__actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

.booking-primary-button,
.booking-secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 18px;
    border-radius: 999px;
    font-size: var(--booking-fs-body);
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.booking-primary-button {
    flex: 1 1 auto;
    border: 0;
    background: var(--booking-accent);
    color: #111a12;
}

.booking-secondary-button {
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.88);
}

.booking-primary-button[hidden],
.booking-secondary-button[hidden] {
    display: none !important;
}

.booking-primary-button:disabled,
.booking-secondary-button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.booking-primary-button:disabled {
    pointer-events: none;
}

.booking-processing-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(5, 11, 18, 0.6);
    backdrop-filter: blur(6px);
}

.booking-processing-overlay[hidden] {
    display: none !important;
}

.booking-processing-card {
    width: min(420px, 100%);
    padding: 28px 24px;
    border: 1px solid rgba(207, 219, 227, 0.16);
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(27, 38, 51, 0.98) 0%, rgba(14, 22, 31, 0.98) 100%);
    box-shadow: 0 28px 56px rgba(5, 11, 18, 0.4);
    text-align: center;
}

.booking-processing-card--success .booking-processing-card__eyebrow {
    color: rgba(167, 216, 61, 0.92);
}

.booking-processing-card__eyebrow {
    margin: 0 0 10px;
    color: rgba(255, 255, 255, 0.56);
    font-size: var(--booking-fs-micro);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.booking-processing-card__title {
    margin: 0;
    color: #fff;
    font-family: "Oswald", "Outfit", sans-serif;
    font-size: var(--booking-fs-display);
    line-height: 0.96;
    text-transform: uppercase;
}

.booking-processing-card__text {
    margin: 12px 0 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--booking-fs-label);
    line-height: 1.5;
}

.booking-processing-card .booking-primary-button {
    margin-top: 15px;
}

.booking-calendar-shell .fc-booking-card--pending {
    --fc-booking-card-indicator: #77a22b;
    background: rgba(167, 216, 61, 0.18);
    color: #f6ffe2;
    border: 1px solid rgba(167, 216, 61, 0.42);
    box-shadow: none;
    position: relative;
}

.booking-calendar-shell .fc-booking-card--pending .fc-booking-card__close {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 4px;
    color: inherit;
    font-size: var(--booking-fs-section);
    line-height: 1;
    padding: 0;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    z-index: 5;
}

.booking-calendar-shell .fc-booking-card--pending .fc-booking-card__close:hover {
    background: rgba(0, 0, 0, 0.2);
}

.booking-calendar-shell .fc-booking-card--editing {
    --fc-booking-card-indicator: #ffbf47;
    background: linear-gradient(180deg, rgba(255, 191, 71, 0.32) 0%, rgba(171, 111, 13, 0.42) 100%);
    border: 1px solid rgba(255, 191, 71, 0.9);
    color: #fff7e8;
    box-shadow:
        0 10px 20px rgba(17, 25, 33, 0.34),
        inset 0 0 0 1px rgba(255, 244, 214, 0.18);
}

.booking-calendar-shell .fc .fc-event.booking-event-pending[data-booking-state="editing"] {
    filter: drop-shadow(0 0 12px rgba(255, 191, 71, 0.28));
}

.booking-calendar-shell .fc-booking-card--editing .fc-booking-card__badge {
    background: rgba(17, 25, 33, 0.28);
    color: #fff3cf;
}

.booking-calendar-shell .fc-booking-card--editing .fc-booking-card__status {
    font-weight: 700;
}

.booking-calendar-shell .fc-booking-card--user {
    --fc-booking-card-indicator: #77a22b;
    background: rgba(176, 216, 105, 0.6);
    border: 1px solid #77a22b;
    color: #ffffff;
    box-shadow: 0 4px 7px rgba(17, 25, 33, 0.5);
}

.booking-calendar-shell .fc-booking-card--in-progress {
    --fc-booking-card-indicator: #3b5771;
    background: rgba(193, 208, 223, 0.4);
    color: #dadbdb;
    box-shadow: none;
}

.booking-calendar-shell .fc-booking-card--past {
    --fc-booking-card-indicator: #dadbdb;
    background: rgba(59, 87, 113, 0.65);
    border: 0;
    color: #dadbdb;
    box-shadow: none;
}

.booking-calendar-shell .fc-booking-card--user .fc-booking-card__status {
    font-weight: 600;
}

.booking-calendar-shell .fc-booking-card--booked {
    --fc-booking-card-indicator: #c1d0df;
    background: rgba(193, 208, 223, 0.4);
    color: #dadbdb;
}

.booking-calendar-shell .fc-booking-card--cut-bottom {
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.booking-calendar-shell .fc-booking-card--cut-top {
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding-top: 12px;
}

.booking-calendar-shell .fc-booking-card--continuation {
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
}

.booking-calendar-shell .fc-booking-card--continuation .fc-booking-card__content {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    font-family: "Outfit", sans-serif;
    font-size: var(--booking-fs-label);
    font-weight: 500;
    line-height: 1;
    color: inherit;
}

.booking-calendar-shell .fc-booking-card__continuation-glyph {
    flex: 0 0 auto;
    margin-top: 2px;
    font-size: var(--booking-fs-body);
    line-height: 1;
    opacity: 0.85;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.booking-calendar-shell .fc-booking-card__continuation-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.booking-calendar-shell .fc .fc-event:not(.fc-event-start) .fc-booking-card__close {
    display: none;
}

@keyframes booking-loading-bar {
    from {
        background-position: 200% 0;
    }
    to {
        background-position: -200% 0;
    }
}

/* -------------------------------------------------------------------------
   Coach picker (desktop popover + mobile bottom sheet)
   ------------------------------------------------------------------------- */

.booking-coach-picker-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1180;
    background: rgba(5, 9, 14, 0.42);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .22s ease;
}

.booking-coach-picker-backdrop[hidden] {
    display: none !important;
}

.booking-coach-picker-backdrop.is-active {
    opacity: 1;
}

.booking-coach-picker {
    position: fixed;
    z-index: 1190;
    width: 280px;
    max-height: min(60vh, 460px);
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(207, 219, 227, 0.22);
    border-radius: 14px;
    background: #17222d;
    color: #e8eef2;
    box-shadow: 0 22px 52px rgba(5, 11, 18, 0.52);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease;
    overflow: hidden;
}

.booking-coach-picker[hidden] {
    display: none !important;
}

.booking-coach-picker.is-active {
    opacity: 1;
    transform: translateY(0);
}

.booking-coach-picker::before {
    content: "";
    position: absolute;
    top: -6px;
    left: var(--coach-picker-arrow-left, 24px);
    transform: rotate(45deg);
    width: 12px;
    height: 12px;
    border-top: 1px solid rgba(207, 219, 227, 0.22);
    border-left: 1px solid rgba(207, 219, 227, 0.22);
    background: #17222d;
}

.booking-coach-picker[data-placement="above"]::before {
    top: auto;
    bottom: -6px;
    border-top: 0;
    border-left: 0;
    border-bottom: 1px solid rgba(207, 219, 227, 0.22);
    border-right: 1px solid rgba(207, 219, 227, 0.22);
}

.booking-coach-picker__grabber {
    display: none;
}

.booking-coach-picker__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.booking-coach-picker__title {
    margin: 0;
    color: #fff;
    font-family: "Oswald", "Outfit", sans-serif;
    font-size: var(--booking-fs-section);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}

.booking-coach-picker__close {
    flex: 0 0 auto;
}

.booking-coach-picker__list {
    list-style: none;
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.booking-coach-picker__row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #e8eef2;
    font-family: inherit;
    font-size: var(--booking-fs-label);
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background-color .14s ease, color .14s ease;
}

.booking-coach-picker__row:focus-visible {
    color: #ffffff;
    outline: 2px solid rgba(196, 234, 98, 0.6);
    outline-offset: -2px;
}

.booking-coach-picker__item.is-selected .booking-coach-picker__row {
    color: #ffffff;
}

.booking-coach-picker__row:disabled {
    cursor: default;
    opacity: 0.55;
}

.booking-coach-picker__avatar {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(196, 234, 98, 0.18);
    color: var(--booking-accent, #c4ea62);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Outfit", sans-serif;
    font-size: var(--booking-fs-label);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.booking-coach-picker__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.booking-coach-picker__item.is-selected .booking-coach-picker__avatar {
    background: var(--booking-accent, #c4ea62);
    color: #0f1924;
}

.booking-coach-picker__identity {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.booking-coach-picker__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.booking-coach-picker__title-sub {
    font-size: var(--booking-fs-label);
    font-weight: 500;
    color: rgba(232, 238, 242, 0.62);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The check lives in the trailing group: a filled green circle the same
   size as the bio icon, with a dark check inside. */
.booking-coach-picker__check {
    flex: 0 0 auto;
    display: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--booking-accent-strong, #c4ea62);
    color: #10200a;
    align-items: center;
    justify-content: center;
}

.booking-coach-picker__item.is-selected .booking-coach-picker__check {
    display: inline-flex;
}

/* Each item is one row: the selectable coach button + a trailing group
   (the "View bio" info icon and, when selected, the check). The selected
   highlight lives on the whole item so it covers the icon and check too. */
.booking-coach-picker__item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-right: 10px;
    border-radius: 12px;
    border: 1px solid transparent;
    transition: background-color .16s ease, border-color .16s ease;
}

.booking-coach-picker__item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.booking-coach-picker__item.is-selected {
    background: rgba(196, 234, 98, 0.16);
    border-color: rgba(196, 234, 98, 0.5);
}

.booking-coach-picker__trail {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Circular "View bio" info-icon button — shared by the picker and the drawer. */
.booking-coach-bio-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid var(--booking-border);
    background: transparent;
    color: rgba(232, 238, 242, 0.62);
    cursor: pointer;
    transition: color .16s ease, border-color .16s ease, background-color .16s ease, transform .16s ease;
}

.booking-coach-bio-icon[hidden] { display: none; }

.booking-coach-bio-icon:hover,
.booking-coach-bio-icon:focus-visible {
    color: var(--booking-accent-strong, #c4ea62);
    border-color: rgba(196, 234, 98, 0.5);
    background: rgba(196, 234, 98, 0.14);
    transform: scale(1.08);
    outline: none;
}

.booking-coach-picker.is-busy .booking-coach-picker__item {
    pointer-events: none;
    opacity: 0.55;
}

/* ----------------------------------------------------------------
   Drawer coach value — small avatar + the select + "View bio" info icon
   ---------------------------------------------------------------- */
.booking-coach-value {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 8px;
    min-width: 0;
}

.booking-coach-value__avatar {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(196, 234, 98, 0.18);
    color: var(--booking-accent-strong, #c4ea62);
    font-family: "Outfit", sans-serif;
    font-size: var(--booking-fs-micro);
    font-weight: 700;
    text-transform: uppercase;
}

.booking-coach-value__avatar[hidden] { display: none; }

.booking-coach-value__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Drawer reuses the shared .booking-coach-bio-icon, sized down slightly. */
.booking-coach-value .booking-coach-bio-icon {
    width: 30px;
    height: 30px;
}

.booking-coach-value .booking-coach-bio-icon svg {
    width: 16px;
    height: 16px;
}

.booking-coach-value__select {
    max-width: 130px;
    min-width: 0;
}

/* ----------------------------------------------------------------
   Shared coach bio modal (reused by picker "View bio" + drawer pill)
   ---------------------------------------------------------------- */
.booking-bio-overlay {
    position: fixed;
    inset: 0;
    z-index: 1250;
}

.booking-bio-overlay[hidden] { display: none; }

.booking-bio-overlay__scrim {
    position: absolute;
    inset: 0;
    background: rgba(5, 10, 18, 0.62);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.booking-bio-overlay.is-active .booking-bio-overlay__scrim { opacity: 1; }

.booking-bio-card {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) translateY(10px) scale(0.98);
    opacity: 0;
    width: 420px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 44px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1260;
    background: linear-gradient(180deg, #18222e, #111922);
    border: 1px solid var(--booking-border);
    border-radius: 20px;
    box-shadow: var(--booking-shadow);
    transition: opacity 0.2s ease, transform 0.22s var(--booking-drawer-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.booking-bio-overlay.is-active .booking-bio-card {
    opacity: 1;
    transform: translate(-50%, -50%);
}

.booking-bio-card__close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    border: 1px solid var(--booking-border);
    background: rgba(10, 17, 24, 0.55);
    color: #fff;
    cursor: pointer;
    transition: background-color 0.16s ease;
}

.booking-bio-card__close:hover { background: rgba(37, 52, 69, 0.9); }

.booking-bio-card__portrait {
    position: relative;
    flex: none;
    height: 210px;
    background: repeating-linear-gradient(135deg, #1d2a22 0 11px, #18231b 11px 22px);
    display: grid;
    place-items: center;
}

.booking-bio-card__portrait::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 35%, #111922 98%);
}

.booking-bio-card__portrait-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.booking-bio-card__portrait-img[hidden] { display: none; }

.booking-bio-card__portrait-fallback {
    position: relative;
    z-index: 1;
    font-family: "Outfit", sans-serif;
    font-weight: 800;
    font-size: 44px; /* bespoke: bio-card portrait initials — display size, off the token scale on purpose */
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--booking-accent-strong, #c4ea62);
    opacity: 0.85;
}

.booking-bio-card__portrait-fallback[hidden] { display: none; }

.booking-bio-card__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 18px 22px 20px;
}

.booking-bio-card__name {
    margin: 0;
    font-family: "Oswald", "Outfit", sans-serif;
    font-weight: 700;
    font-size: 26px; /* bespoke: bio-card name — display size, off the token scale on purpose */
    line-height: 1.05;
    color: #fff;
}

.booking-bio-card__role {
    margin: 4px 0 0;
    color: var(--booking-accent-strong, #c4ea62);
    font-size: var(--booking-fs-label);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.booking-bio-card__role[hidden] { display: none; }

.booking-bio-card__rate {
    margin: 14px 0 0;
    color: #fff;
    font-size: var(--booking-fs-label);
    font-weight: 700;
}

.booking-bio-card__rate[hidden] { display: none; }

.booking-bio-card__text {
    margin: 14px 0 0;
    color: var(--booking-copy);
    font-size: var(--booking-fs-label);
    line-height: 1.6;
    white-space: pre-line;
}

.booking-bio-card__foot {
    flex: none;
    display: flex;
    gap: 10px;
    padding: 14px 22px 18px;
    border-top: 1px solid var(--booking-border);
    background: rgba(10, 17, 24, 0.5);
}

.booking-bio-card__ghost {
    flex: none;
    padding: 12px 18px;
    border-radius: 11px;
    border: 1px solid var(--booking-border);
    background: transparent;
    color: #fff;
    font-weight: 700;
    font-size: var(--booking-fs-body);
    cursor: pointer;
    transition: background-color 0.16s ease;
}

.booking-bio-card__ghost:hover { background: var(--booking-surface-soft); }

.booking-bio-card__select {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: var(--booking-accent-strong, #c4ea62);
    color: #10200a;
    font-weight: 800;
    font-size: var(--booking-fs-body);
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.18s ease;
}

.booking-bio-card__select:hover { transform: translateY(-1px); }

.booking-bio-card__select.is-selected {
    background: rgba(196, 234, 98, 0.16);
    color: var(--booking-accent-strong, #c4ea62);
    border-color: rgba(196, 234, 98, 0.5);
    cursor: default;
    transform: none;
}

.booking-bio-card__select svg { flex: none; }

@media (max-width: 767px) {
    .booking-error-toast,
    .booking-notice-toast,
    .booking-progress-toast,
    .booking-info-toast {
        left: 50%;
        bottom: 14px;
        width: min(680px, calc(100vw - 28px));
    }

    .booking-form-grid {
        grid-template-columns: 1fr;
    }

    .booking-drawer {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 24px 24px 0 0;
        width: 100%;
        max-height: min(88vh, 760px);
        opacity: 1;
        transform: translateY(100%);
        transition:
            transform .36s var(--booking-drawer-ease),
            box-shadow .28s var(--booking-drawer-ease);
    }

    .booking-drawer.is-active {
        opacity: 1;
        transform: translateY(0);
    }

    .booking-drawer.is-dragging {
        transition: none;
    }

    .booking-drawer__grabber {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 0 0 auto;
        padding: 16px 0 14px;
        touch-action: none;
        cursor: grab;
        -webkit-tap-highlight-color: transparent;
    }

    .booking-drawer__grabber > span {
        display: block;
        width: 48px;
        height: 5px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.32);
        transition: background-color .18s ease, transform .18s ease;
    }

    .booking-drawer.is-dragging .booking-drawer__grabber > span,
    .booking-drawer__grabber:active > span {
        background: rgba(255, 255, 255, 0.55);
        transform: scaleX(1.1);
    }

    .booking-drawer__grabber:active {
        cursor: grabbing;
    }

    .booking-drawer__header {
        padding-top: 4px;
        touch-action: none;
        cursor: grab;
    }

    .booking-drawer.is-dragging .booking-drawer__header {
        cursor: grabbing;
    }

    .booking-drawer__header .booking-icon-button--drawer {
        touch-action: manipulation;
        cursor: pointer;
    }

    .booking-drawer__header,
    .booking-drawer__body,
    .booking-drawer__footer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .booking-drawer__actions {
        flex-direction: column;
    }

    .booking-coach-picker {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-height: min(56vh, 520px);
        border-radius: 24px 24px 0 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
        opacity: 1;
        transform: translateY(100%);
        transition: transform .32s var(--booking-drawer-ease, cubic-bezier(.22, 1, .36, 1));
    }

    .booking-coach-picker.is-active {
        opacity: 1;
        transform: translateY(0);
    }

    .booking-coach-picker::before {
        display: none;
    }

    .booking-coach-picker.is-dragging {
        transition: none;
    }

    .booking-coach-picker__grabber {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 0 0 auto;
        padding: 16px 0 14px;
        touch-action: none;
        cursor: grab;
        -webkit-tap-highlight-color: transparent;
    }

    .booking-coach-picker__grabber > span {
        display: block;
        width: 48px;
        height: 5px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.32);
        transition: background-color .18s ease, transform .18s ease;
    }

    .booking-coach-picker.is-dragging .booking-coach-picker__grabber > span,
    .booking-coach-picker__grabber:active > span {
        background: rgba(255, 255, 255, 0.55);
        transform: scaleX(1.1);
    }

    .booking-coach-picker__grabber:active {
        cursor: grabbing;
    }

    .booking-coach-picker__header {
        padding: 4px 18px 14px;
        align-items: flex-start;
        touch-action: none;
        cursor: grab;
    }

    .booking-coach-picker.is-dragging .booking-coach-picker__header {
        cursor: grabbing;
    }

    .booking-coach-picker__header .booking-icon-button--drawer {
        touch-action: manipulation;
        cursor: pointer;
    }

    .booking-coach-picker__title {
        font-size: 22px; /* bespoke: bottom-sheet heading grows on mobile (opposite of the surface scale) */
    }

    .booking-coach-picker__list {
        padding: 6px 10px 18px;
    }

    .booking-coach-picker__row {
        padding: 14px 12px;
        min-height: 56px;
    }

    .booking-coach-picker__avatar {
        width: 38px;
        height: 38px;
    }

    .booking-coach-picker__trail .booking-coach-bio-icon,
    .booking-coach-picker__trail .booking-coach-picker__check {
        width: 38px;
        height: 38px;
    }
}

/* Bio modal becomes a bottom sheet on mobile. */
@media (max-width: 767px) {
    .booking-bio-card {
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        max-height: 88vh;
        border-radius: 22px 22px 0 0;
        transform: translateY(100%);
    }

    .booking-bio-overlay.is-active .booking-bio-card {
        transform: translateY(0);
    }

    .booking-bio-card__portrait {
        height: 178px;
    }
}