/* NDC Bookings — frontend booking page
 *
 * Type scale (card scale — compact, form-appropriate):
 *   Page h2:           --text-card-h2  (--text-3)
 *   Intro paragraph:   --text-1 body
 *   Field label:       master default (--text-1 semibold)
 *   Radio card title:  --text-1 bold (body font, not display)
 *   Card body/price:   --text-1 body
 *   Card meta:         --text-card-meta (--text-_1)
 *   Sidebar list:      --text-card-meta (--text-_1)
 *   Sidebar total:     --text-1 bold
 *
 * Spacing rhythm:
 *   --space-lg  between major sections within a step
 *   --space-md  between groups inside a fieldset / form card padding
 *   --space-sm  inside a single group / between sidebar rows
 *
 * Surface hierarchy:
 *   section bg = --bg-surface-alt
 *   form & sidebar = --bg-page (subtle --btn-shadow-sm)
 *
 * Pinned to color-scheme: light.
 */

.ndc-booking,
.ndc-booking * {
    color-scheme: light;
}

/* ── Page-level wrapper ─────────────────────────────────────────── */

.ndc-booking {
    /* Element carries `alignfull` for Gutenberg layout escape. */
    background: var(--bg-surface-alt);
    padding-block: var(--space-struct-y-base);
    padding-inline: var(--space-struct-x);
    color: var(--text-body);
    font-family: var(--font-body);
}

.ndc-booking__inner {
    max-inline-size: 1080px;
    margin-inline: auto;
}

/* ── Page hero ──────────────────────────────────────────────────── */

.ndc-booking__header {
    margin-block-end: var(--space-lg);
    max-inline-size: 640px;
}

.ndc-booking__progress.progress {
    block-size: var(--progress-height-sm);
    inline-size: 100%;
    max-inline-size: 240px;
    margin-block-end: var(--space-sm);
}

.ndc-booking__counter {
    margin: 0 0 var(--space-sm);
}

.ndc-booking__heading {
    font-family: var(--font-display);
    font-size: var(--text-card-h2);
    font-weight: var(--weight-bold);
    line-height: var(--lh-display);
    letter-spacing: var(--tracking-tight);
    margin: 0 0 var(--space-xs);
    color: var(--text-heading);
}

.ndc-booking__intro {
    font-size: var(--text-card-body);
    line-height: var(--leading-normal);
    color: var(--text-muted);
    margin: 0;
    max-inline-size: 60ch;
}

/* ── Form + sidebar columns ─────────────────────────────────────── */

.ndc-booking__columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--space-lg);
    align-items: start;
}

@media (max-width: 880px) {
    .ndc-booking {
        padding-inline: var(--space-md);
        padding-block: var(--space-xl);
    }
    .ndc-booking__columns {
        grid-template-columns: 1fr;
    }
    .ndc-sidebar {
        position: static;
    }
}

/* ── Form card ──────────────────────────────────────────────────── */

.ndc-form {
    background: var(--bg-page);
    color: var(--text-body);
    border-radius: var(--radius-4);
    box-shadow: var(--btn-shadow-sm);
    padding: var(--space-lg);
    min-inline-size: 0;

    /* Compact form scale — inputs drop from --text-1 (body) to --text-card-body
     * to match master's .form-label / .form-helper which were already on the
     * card scale. Whole form reads as a cohesive unit. */
    --form-font-size: var(--text-card-body);
}

/* Reset native fieldset chrome — the browser's groove border + offset
   legend reads as decoration, not a form. Treat fieldsets as plain
   semantic groupings; the form-label class provides any visual weight. */
.ndc-form fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    min-inline-size: 0;
}

.ndc-form .form-group + .form-group,
.ndc-form fieldset + .form-group,
.ndc-form .form-group + fieldset {
    margin-block-start: var(--space-lg);
}

.ndc-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
}

/* ── Radio cards (tier + hire type only) ────────────────────────── */

.ndc-radio-cards {
    display: grid;
    gap: var(--space-xs);
    margin: var(--space-xs) 0 0;
    padding: 0;
}

.ndc-radio-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-2xs) var(--space-sm);
    padding-block: var(--space-sm);
    padding-inline: var(--space-md);
    border: var(--border-width-xs) solid var(--border-subtle);
    border-radius: var(--radius-2);
    background: var(--bg-page);
    cursor: pointer;
    transition: border-color var(--transition-fast),
                background var(--transition-fast),
                box-shadow var(--transition-fast);
}
.ndc-radio-card:hover {
    border-color: var(--border-medium);
}
.ndc-radio-card input[type="radio"] {
    grid-column: 2;
    grid-row: 1 / span 3;
    inline-size: 1.1rem;
    block-size: 1.1rem;
    accent-color: var(--brand-accent);
    margin: 0;
}
.ndc-radio-card:has(input:checked) {
    border-color: var(--brand-accent);
    background: var(--brand-accent-tint-08);
    box-shadow: inset 0 0 0 var(--border-width-xs) var(--brand-accent);
}
.ndc-radio-card:focus-within {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

.ndc-radio-card__title {
    font-family: var(--font-body);
    font-size: var(--text-card-body);
    font-weight: var(--weight-bold);
    color: var(--text-heading);
    line-height: var(--leading-snug);
    grid-column: 1;
}
.ndc-radio-card__price {
    font-size: var(--text-card-body);
    color: var(--text-body);
    grid-column: 1;
    line-height: var(--leading-snug);
}
.ndc-radio-card__meta {
    font-size: var(--text-card-meta);
    color: var(--text-muted);
    grid-column: 1;
    line-height: var(--leading-snug);
}

/* ── Sidebar ────────────────────────────────────────────────────── */

.ndc-sidebar {
    background: var(--bg-page);
    border-radius: var(--radius-4);
    box-shadow: var(--btn-shadow-sm);
    padding: var(--space-md) var(--space-lg);
    position: sticky;
    inset-block-start: var(--space-md);
}

.ndc-sidebar__title {
    margin: 0 0 var(--space-sm);
}

.ndc-sidebar__list {
    margin: 0 0 var(--space-sm);
    padding: 0;
    display: grid;
    gap: var(--space-2xs);
}
.ndc-sidebar__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-sm);
    font-size: var(--text-card-meta);
    margin: 0;
}
.ndc-sidebar__row > dt {
    color: var(--text-muted);
    margin: 0;
}
.ndc-sidebar__row > dd {
    color: var(--text-body);
    text-align: end;
    margin: 0;
    max-inline-size: 65%;
}

.ndc-sidebar__totals {
    border-block-start: var(--border-width-xs) solid var(--border-subtle);
    padding-block-start: var(--space-sm);
    margin-block-start: 0;
    display: grid;
    gap: var(--space-2xs);
}
.ndc-sidebar__totals .ndc-sidebar__row {
    font-size: var(--text-card-body);
}
.ndc-sidebar__totals .ndc-sidebar__row > dt {
    color: var(--text-body);
}
.ndc-sidebar__total-row {
    padding-block-start: var(--space-xs);
    border-block-start: var(--border-width-xs) solid var(--bg-subtle);
    margin-block-start: var(--space-2xs);
}
.ndc-sidebar__total-row > dt,
.ndc-sidebar__total-row > dd {
    font-size: var(--text-1);
    font-weight: var(--weight-bold);
    color: var(--text-heading);
}

.ndc-sidebar__hint {
    margin: var(--space-sm) 0 0;
    font-size: var(--text-card-meta);
    color: var(--text-muted);
    line-height: var(--leading-normal);
}

/* ── Validation feedback ────────────────────────────────────────── */

.form-helper.is-error {
    color: var(--state-error-text);
}
.ndc-form__field--invalid input,
.ndc-form__field--invalid select,
.ndc-form__field--invalid textarea {
    border-color: var(--state-error);
}
.ndc-form__field--invalid {
    box-shadow: 0 0 0 var(--border-width-sm) var(--state-error-soft);
    border-radius: var(--radius-2);
}

/* Required-field micro tag */
.ndc-form__required-tag {
    display: inline-block;
    margin-inline-start: var(--space-2xs);
    font-size: var(--text-card-meta);
    font-weight: var(--weight-semibold);
    color: var(--state-warning-text);
    background: var(--state-warning-soft);
    padding-inline: var(--space-xs);
    padding-block: 1px;
    border-radius: var(--radius-pill);
    vertical-align: middle;
}

/* ── Wizard navigation ──────────────────────────────────────────── */

.ndc-wizard__nav {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    margin-block-start: var(--space-lg);
    padding-block-start: var(--space-md);
    border-block-start: var(--border-width-xs) solid var(--border-subtle);
}
.ndc-wizard__back {
    margin-inline-end: auto;
}

/* ── Review step ────────────────────────────────────────────────── */

.ndc-review__table {
    inline-size: 100%;
    border-collapse: collapse;
    margin: 0 0 var(--space-md);
}
.ndc-review__table th,
.ndc-review__table td {
    text-align: start;
    padding-block: var(--space-xs);
    border-block-end: var(--border-width-xs) solid var(--bg-subtle);
    font-size: var(--text-card-body);
}
.ndc-review__table th {
    color: var(--text-muted);
    font-weight: var(--weight-regular);
    inline-size: 40%;
}

.ndc-review__price {
    background: var(--brand-accent-tint-08);
    border-radius: var(--radius-2);
    padding: var(--space-sm) var(--space-md);
    margin: 0 0 var(--space-md);
}
.ndc-review__price > div {
    display: flex;
    justify-content: space-between;
    padding-block: var(--space-2xs);
    font-size: var(--text-card-body);
}
.ndc-review__price > .ndc-review__total {
    border-block-start: var(--border-width-xs) solid color-mix(in oklch, var(--brand-accent) 20%, transparent);
    padding-block-start: var(--space-xs);
    margin-block-start: var(--space-2xs);
    font-size: var(--text-1);
    font-weight: var(--weight-bold);
    color: var(--text-heading);
}

/* ── Thank-you panel ────────────────────────────────────────────── */

.ndc-form--thanks-wrap {
    /* Element carries `alignfull` for Gutenberg layout escape. */
    background: var(--bg-surface-alt);
    padding-block: var(--space-struct-y-base);
    padding-inline: var(--space-struct-x);
    color-scheme: light;
}
.ndc-form--thanks {
    max-inline-size: 560px;
    margin-inline: auto;
    padding: var(--space-xl);
    background: var(--bg-page);
    border-radius: var(--radius-4);
    box-shadow: var(--btn-shadow-sm);
    text-align: center;
}
.ndc-form--thanks h2 {
    font-family: var(--font-display);
    font-size: var(--text-card-h1);
    font-weight: var(--weight-bold);
    line-height: var(--lh-display);
    letter-spacing: var(--tracking-tight);
    margin: 0 0 var(--space-sm);
    color: var(--text-heading);
}
.ndc-form--thanks p {
    color: var(--text-body);
    font-size: var(--text-1);
    line-height: var(--leading-normal);
    margin: 0 0 var(--space-xs);
}
.ndc-form--thanks p:last-child {
    margin-block-end: 0;
}

/* ── Customer-facing PayRoute pages ─────────────────────────────── */

.ndc-booking-page {
    background: var(--bg-surface-alt);
    padding-block: var(--space-xl);
    padding-inline: var(--space-md);
    color-scheme: light;
}
.ndc-booking-page__inner {
    max-inline-size: 640px;
    margin-inline: auto;
    background: var(--bg-page);
    border-radius: var(--radius-4);
    box-shadow: var(--btn-shadow-sm);
    padding: var(--space-xl);
}
.ndc-booking-page h1 {
    font-family: var(--font-display);
    font-size: var(--text-card-h1);
    line-height: var(--lh-display);
    letter-spacing: var(--tracking-tight);
    margin: 0 0 var(--space-sm);
}

/* Calendar — partial-day marker (some hours busy on this date).
 * Flatpickr's .flatpickr-day handles the disabled state for full days;
 * we only style the "still selectable, but partially booked" hint here. */
.flatpickr-day.ndc-day--partial {
    position: relative;
    color: var(--text-2);
}
.flatpickr-day.ndc-day--partial::after {
    content: "";
    position: absolute;
    inset-block-end: 4px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    inline-size: 4px;
    block-size: 4px;
    border-radius: 50%;
    background: var(--state-warning, #c98a00);
}