/* Calendar page styles — Date & Time Selection (S-002)
   Reworked: the step is centred at the flow-standard width; the month calendar and the
   time-slot column sit side by side inside one card so a date and its times
   are co-visible; the calendar is tightened to 44px touch targets; slots are
   a single consistent column.

   Structural values reference design tokens (--sp-space-*, --sp-radius-*,
   --sp-touch-min, --sp-text-*) with literal fallbacks,
   matching the booking.css convention — the booking runtime only emits
   colour/font custom properties, so the fallbacks are what render today and
   the token names future-proof a tokens.css wire-up. Colours derive from
   tenant branding tokens (and color-mix over them); no raw hex is added for
   new surfaces. */

/* ---- Step container: centre everything (heading, card, slots, footer) at the
   flow-standard width. The 960px max-width is inherited from the .sp-booking-step
   base (booking.css) so the calendar matches its siblings instead of being the
   narrowest page; this rule only re-asserts centring. ---- */
.sp-booking-step.sp-calendar {
    margin-inline: auto;
}

/* Page title: pin to the tenant text colour at full weight. session-types.css
   leaks a global `.sp-step-heading { font-weight: 600 }`, which left this
   heading reading like muted placeholder text; this calendar-scoped override
   (specificity 0,2,0) restores a true heading. Colour stays tenant-driven
   (--sp-text-color == the configured TextColor). */
.sp-calendar .sp-step-heading {
    color: var(--sp-text-color, #212529);
    font-weight: 700;
}

/* ---- Card holding the side-by-side calendar + times ---- */
.sp-calendar-card {
    /* keep the card's own contents left-aligned even for centre-align tenants */
    text-align: left;
    margin-bottom: var(--sp-space-4, 1rem);
    padding: var(--sp-space-5, 1.25rem);
    border: 1px solid var(--sp-border-color, #e0e0e0);
    border-radius: var(--sp-radius-lg, 8px);
    background: var(--sp-surface-color, #ffffff);
}

/* mobile-first: stacked (calendar, then times) */
.sp-calendar-layout {
    display: block;
}

.sp-calendar-pane {
    min-width: 0;
}

/* ---- Month navigation ---- */
.sp-calendar-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--sp-space-3, 0.75rem);
}

.sp-calendar-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--sp-touch-min, 44px);
    height: var(--sp-touch-min, 44px);
    border: 1px solid var(--sp-border-color, #e0e0e0);
    border-radius: var(--sp-radius-md, 6px);
    color: var(--sp-button-color, var(--sp-primary-color, #1976d2));
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
}

.sp-calendar-nav-btn:hover {
    background: color-mix(in srgb, var(--sp-text-color, #212529) 6%, transparent);
}

.sp-calendar-nav-btn.sp-disabled {
    color: color-mix(in srgb, var(--sp-text-color, #212529) 25%, transparent);
    cursor: default;
    pointer-events: none;
}

.sp-calendar-month-label {
    font-size: var(--sp-text-lg, 1.125rem);
    font-weight: 600;
    color: var(--sp-text-color, #212529);
}

/* ---- Month grid ---- */
.sp-calendar-grid {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.sp-calendar-grid th {
    padding: var(--sp-space-1, 0.25rem) 0;
    font-size: var(--sp-text-xs, 0.75rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--sp-tracking-wide, 0.04em);
    color: var(--sp-secondary-text, #666);
}

.sp-calendar-grid td {
    height: var(--sp-touch-min, 44px);
    padding: 1px;
    text-align: center;
    vertical-align: middle;
}

.sp-date-empty {
    background: transparent;
}

/* Every actionable day is a 44px circular touch target with a centred
   numeral. Availability is communicated by numeral weight + the three
   states below — the old detached ~3px dot is dropped. */
.sp-date-link,
.sp-date-unavailable span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--sp-touch-min, 44px);
    height: var(--sp-touch-min, 44px);
    margin: 0 auto;
    border-radius: 50%;
    font-size: var(--sp-text-sm, 0.875rem);
    color: inherit;
    text-decoration: none;
}

/* available: full-weight numeral, soft fill on hover */
.sp-date-available {
    font-weight: 600;
}

.sp-date-available .sp-date-link {
    color: var(--sp-text-color, #212529);
    cursor: pointer;
    transition: background-color var(--sp-duration-fast, 120ms) ease;
}

.sp-date-available:not(.sp-date-selected) .sp-date-link:hover {
    background: color-mix(in srgb, var(--sp-button-color, #1976d2) 14%, transparent);
}

/* disabled / past: muted numeral, no hover */
.sp-date-unavailable {
    cursor: default;
}

.sp-date-unavailable span {
    font-weight: 400;
    color: color-mix(in srgb, var(--sp-text-color, #212529) 35%, transparent);
}

/* selected: filled circle with a contrasting numeral */
.sp-date-selected .sp-date-link {
    background: var(--sp-button-color, #1976d2);
    color: var(--sp-button-text, #ffffff);
    font-weight: 700;
}

/* today: ring (yields to the selected fill when both apply) */
.sp-date-today .sp-date-link {
    box-shadow: inset 0 0 0 2px var(--sp-button-color, #1976d2);
}

.sp-date-today.sp-date-selected .sp-date-link {
    box-shadow: none;
}

/* No available dates this month */
.sp-no-dates {
    margin: var(--sp-space-3, 0.75rem) 0 0;
    text-align: center;
    color: var(--sp-secondary-text, #666);
}

.sp-next-available-link {
    color: var(--sp-button-color, var(--sp-primary-color, #1976d2));
    text-decoration: underline;
}

/* ---- Time column ---- */
.sp-timeslot-pane {
    min-width: 0;
    margin-top: var(--sp-space-5, 1.25rem);
}

.sp-timeslot-pane-inner {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Selected-date heading + time-zone control, pinned above the slot list */
.sp-timeslot-header {
    flex: 0 0 auto;
    margin-bottom: var(--sp-space-3, 0.75rem);
    /* keep the heading + zone control aligned with the inset slot cards
       (see .sp-timeslot-scroll padding) */
    padding-inline: var(--sp-space-1, 0.25rem);
}

.sp-selected-date-heading {
    margin: 0;
    font-size: var(--sp-text-lg, 1.125rem);
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
    color: var(--sp-heading-color, var(--sp-text-color, #212529));
}

.sp-selected-date-heading:empty {
    display: none;
}

.sp-timeslot-zone {
    display: flex;
    align-items: center;
    gap: var(--sp-space-2, 0.5rem);
    margin-top: var(--sp-space-2, 0.5rem);
}

.sp-timeslot-zone-label {
    flex: 0 0 auto;
    font-size: var(--sp-text-xs, 0.75rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--sp-tracking-caps, 0.08em);
    color: var(--sp-secondary-text, #666);
}

.sp-timeslot-zone-static {
    font-size: var(--sp-text-sm, 0.875rem);
    color: var(--sp-secondary-text, #666);
}

/* Native <select> restyled to match the slot borders / height / radius */
.sp-timezone-select {
    flex: 1 1 auto;
    min-width: 0;
    min-height: var(--sp-touch-min, 44px);
    padding: 0 var(--sp-space-3, 0.75rem);
    border: 1px solid var(--sp-border-color, #e0e0e0);
    border-radius: var(--sp-radius-md, 6px);
    background: var(--sp-surface-color, #ffffff);
    color: var(--sp-text-color, #212529);
    font-family: inherit;
    font-size: var(--sp-text-sm, 0.875rem);
}

.sp-timezone-select:focus-visible {
    outline: 2px solid var(--sp-button-color, #1976d2);
    outline-offset: 1px;
    border-color: var(--sp-button-color, #1976d2);
}

/* Scrollable slot area (scrolls internally only in the side-by-side layout) */
.sp-timeslot-scroll {
    min-height: 0;
    /* Inset the slots a hair: in the side-by-side layout this element scrolls
       (overflow-y: auto), which also clips overflow-x. Without the breathing
       room the selected card's outset ring and the focus-within outline get
       shaved on the inline edges and against the stable scrollbar gutter. */
    padding: var(--sp-space-1, 0.25rem);
}

.sp-slots-placeholder {
    margin: 0;
    padding: var(--sp-space-4, 1rem) 0;
    color: var(--sp-secondary-text, #666);
}

.sp-timeslot-groups {
    display: flex;
    flex-direction: column;
}

/* more space above each period than within it, so the periods read as blocks */
.sp-timeslot-group {
    margin-top: var(--sp-space-5, 1.25rem);
}

.sp-timeslot-group:first-child {
    margin-top: 0;
}

.sp-timeslot-group-label {
    margin: 0 0 var(--sp-space-2, 0.5rem);
    font-size: var(--sp-text-xs, 0.75rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--sp-tracking-caps, 0.08em);
    color: var(--sp-secondary-text, #666);
}

/* Single consistent column — no per-period grids, no orphan rows */
.sp-timeslot-grid {
    display: flex;
    flex-direction: column;
    gap: var(--sp-space-2, 0.5rem);
}

.sp-timeslot-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-space-2, 0.5rem);
    min-height: var(--sp-touch-min, 44px);
    padding: var(--sp-space-2, 0.5rem) var(--sp-space-4, 1rem);
    border: 1px solid var(--sp-border-color, #e0e0e0);
    border-radius: var(--sp-radius-md, 6px);
    background: var(--sp-surface-color, #ffffff);
    cursor: pointer;
    transition: border-color var(--sp-duration-fast, 120ms) ease,
                background-color var(--sp-duration-fast, 120ms) ease;
}

.sp-timeslot-card:hover {
    border-color: var(--sp-button-color, #1976d2);
}

/* selected: matches the session-type card's selected state (session-types.css)
   so "selected" reads identically across steps — accent-coloured border + an
   outset 1px ring + the same soft tint. box-shadow never affects layout, so the
   row doesn't shift. */
.sp-timeslot-card.sp-selected {
    border-color: var(--sp-accent-color, var(--sp-button-color, #1976d2));
    background: color-mix(in srgb, var(--sp-button-color, #1976d2) 10%, var(--sp-surface-color, #ffffff));
    box-shadow: 0 0 0 1px var(--sp-accent-color, var(--sp-button-color, #1976d2));
}

.sp-timeslot-card:focus-within {
    outline: 2px solid var(--sp-button-color, #1976d2);
    outline-offset: 1px;
}

/* Centre-align tenants: centre the time within each slot card. The card is a
   flexbox, so text-align (inherited from .sp-booking-main) doesn't move the
   time — switch the flex distribution from space-between to centre instead. */
.sp-center-align .sp-timeslot-card {
    justify-content: center;
}

.sp-timeslot-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.sp-slot-time-range {
    font-size: var(--sp-text-base, 1rem);
    font-weight: 600;
}

.sp-slot-reserved {
    flex: 0 0 auto;
    font-size: var(--sp-text-xs, 0.75rem);
    font-style: italic;
    color: var(--sp-button-color, var(--sp-primary-color, #1976d2));
}

/* No slots for the selected date */
.sp-no-slots {
    margin: 0;
    padding: var(--sp-space-4, 1rem) 0;
    color: var(--sp-secondary-text, #666);
}

.sp-next-available {
    margin: var(--sp-space-2, 0.5rem) 0 0;
}

/* ---- Side-by-side from 640px up ---- */
@media (min-width: 640px) {
    .sp-calendar-layout {
        display: flex;
        align-items: stretch;
        justify-content: center;
        /* roomy gutter between the calendar and the time column */
        gap: var(--sp-space-10, 4rem);
        /* a stable floor so the time column has room and the card height
           doesn't jump as the slot count changes */
        min-height: 23rem;
    }

    .sp-calendar-pane {
        flex: 0 0 20rem;   /* 320px → day cells stay ≥44px (320 / 7 ≈ 45px) */
    }

    .sp-timeslot-pane {
        position: relative;
        /* narrower, fixed-ish column (shrinks on tight desktops) so slots
           aren't stretched across the whole card */
        flex: 0 1 17rem;
        margin-top: 0;
    }

    /* Fill the calendar's height; scroll the slots internally so picking a
       new date never moves the footer / scrolls the page. */
    .sp-timeslot-pane-inner {
        position: absolute;
        inset: 0;
    }

    .sp-timeslot-scroll {
        flex: 1 1 auto;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;   /* keep slot width steady when the scrollbar appears */
    }
}

/* ---- Continue disabled state: keep a ≥3:1 visible boundary (WCAG
   non-text contrast) instead of a washed-out opacity ---- */
.sp-calendar .sp-btn-primary:disabled {
    opacity: 1;
    background: color-mix(in srgb, var(--sp-text-color, #212529) 14%, var(--sp-form-background, var(--sp-surface-color, #ffffff)));
    color: color-mix(in srgb, var(--sp-text-color, #212529) 64%, var(--sp-form-background, var(--sp-surface-color, #ffffff)));
    /* border is the load-bearing boundary; 58% keeps it ≥3:1 against the
       page background in both light- and dark-tenant configs */
    border-color: color-mix(in srgb, var(--sp-text-color, #212529) 58%, var(--sp-form-background, var(--sp-surface-color, #ffffff)));
    cursor: not-allowed;
}

/* ---- Hold countdown (shared, rendered by _BookingLayout) ---- */
.sp-hold-countdown-container {
    margin: 0 auto var(--sp-space-4, 1rem);
}

/* Width caps mirror .sp-terms-container (terms.css) so the banner lines up
   with the terms box instead of spanning the full step width. */
@media (min-width: 768px) {
    .sp-hold-countdown-container {
        max-width: 700px;
    }
}

@media (min-width: 1025px) {
    .sp-hold-countdown-container {
        max-width: 800px;
    }
}

/* Neutral resting state: a quiet grey box (not colour-only text, which was easy
   to miss). color-mix keeps it visible against dark-branded tenant surfaces. */
.sp-hold-timer {
    padding: var(--sp-space-2, 0.5rem) var(--sp-space-3, 0.75rem);
    text-align: center;
    font-weight: 500;
    border-radius: var(--sp-radius-sm, 4px);
    color: var(--sp-text-muted, #555);
    background: color-mix(in srgb, var(--sp-text-color, #212529) 6%, var(--sp-surface-color, #ffffff));
    border: 1px solid color-mix(in srgb, var(--sp-text-color, #212529) 25%, var(--sp-surface-color, #ffffff));
}

.sp-hold-timer + .sp-hold-timer {
    margin-top: var(--sp-space-2, 0.5rem);
}

/* Warning state: border + tinted background so the alert is unmissable —
   colour alone does not meet WCAG 1.4.1 (use of colour). */
.sp-hold-timer.sp-warning {
    color: var(--sp-error-color, #d32f2f);
    background: color-mix(in srgb, var(--sp-error-color, #d32f2f) 12%, var(--sp-surface-color, #ffffff));
    border-color: var(--sp-error-color, #d32f2f);
    font-weight: 600;
}

/* Expired state: distinct visual from warning (hold is gone, not just running
   low). Shared with the inline expiry message appended by hold-countdown.js so
   the two stacked boxes read as one component. */
.sp-hold-timer.sp-expired,
.sp-hold-expired-message {
    color: var(--sp-error-color, #d32f2f);
    background: color-mix(in srgb, var(--sp-error-color, #d32f2f) 8%, var(--sp-surface-color, #ffffff));
    border-color: var(--sp-error-color, #d32f2f);
    font-weight: 600;
}

/* Inline expiry message appended by hold-countdown.js when the hold runs out.
   Box metrics mirror .sp-hold-timer so it stacks flush under the countdown. */
.sp-hold-expired-message {
    margin-top: var(--sp-space-2, 0.5rem);
    padding: var(--sp-space-2, 0.5rem) var(--sp-space-3, 0.75rem);
    text-align: center;
    border-radius: var(--sp-radius-sm, 4px);
    border: 1px solid var(--sp-error-color, #d32f2f);
}

.sp-hold-expired-message a {
    color: inherit;
    text-decoration: underline;
}

/* ---- Error banner ---- */
.sp-error-banner {
    margin-bottom: var(--sp-space-4, 1rem);
    padding: var(--sp-space-4, 1rem);
    border-radius: var(--sp-radius-sm, 4px);
    background: color-mix(in srgb, var(--sp-error-color, #d32f2f) 12%, var(--sp-surface-color, #ffffff));
    color: var(--sp-error-color, #d32f2f);
}

/* ============================================================
   Optional-fields / promo / notes / processing styles below are
   shared with other parts of the booking flow and are unchanged.
   ============================================================ */

/* Optional fields section */
.sp-booking-details {
    border: 1px solid var(--sp-border-color, #e0e0e0);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    background: var(--sp-surface-color, #ffffff);
}

/* Promo code field */
.sp-promo-field {
    margin-bottom: 1rem;
}

.sp-promo-input-row {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.sp-promo-input-row .sp-input {
    flex: 1;
}

.sp-promo-result {
    margin-top: 0.5rem;
    font-size: 0.9rem;
}

.sp-promo-success {
    color: #2e7d32;
}

.sp-promo-error {
    color: var(--sp-error-color, #d32f2f);
}

/* Promotion dropdown */
.sp-promotion-field {
    margin-bottom: 1rem;
}

.sp-promotion-field .sp-select {
    width: 100%;
    margin-top: 0.25rem;
}

/* Notes field */
.sp-notes-field {
    margin-bottom: 0;
}

.sp-notes-field .sp-textarea {
    width: 100%;
    min-height: 80px;
    margin-top: 0.25rem;
    resize: vertical;
}

/* Character counter */
.sp-char-counter {
    font-size: 0.8rem;
    color: var(--sp-secondary-text, #666);
    text-align: right;
    display: block;
}

/* Loading state */
.sp-loading {
    text-align: center;
    padding: 2rem;
    color: var(--sp-secondary-text, #666);
}

/* Month-change loading overlay. Prev/next-month navigation reloads the page to
   fetch the new month's availability; this overlay covers the calendar card
   during that round-trip so the pause reads as "loading", not a frozen page. */
.sp-calendar-card-loading {
    position: relative;
}

.sp-calendar-loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-space-2, 0.5rem);
    border-radius: var(--sp-radius-lg, 8px);
    /* Translucent surface so the calendar shows through while it reloads. */
    background: color-mix(in srgb, var(--sp-surface-color, #ffffff) 82%, transparent);
    color: var(--sp-secondary-text, #666);
    cursor: progress;
    z-index: 2;
}

.sp-calendar-loading-text {
    font-size: 1rem;
}

/* Session promotion dropdown (S-015) */
.sp-session-promotion-select {
    width: 100%;
    max-width: 100%;
    text-overflow: ellipsis;
    padding: 8px 12px;
    border: 1px solid var(--sp-border-color, #ccc);
    border-radius: 4px;
    font-size: 1rem;
    min-height: 44px; /* WCAG touch target */
}

.sp-session-promotion-select:focus {
    outline: 2px solid var(--sp-accent-color, #1976d2);
    outline-offset: 2px;
    border-color: var(--sp-accent-color, #1976d2);
}

.sp-field-error-border {
    border-color: var(--sp-error-color, #d32f2f);
}

.sp-required-indicator {
    color: var(--sp-error-color, #d32f2f);
    margin-left: 4px;
}