/* ── Booking page — page-specific styles only ─────────────────
 * Shared form styles (form-label, form-input, btn-submit, etc.)
 * live in css/components/forms.css.
 * ──────────────────────────────────────────────────────────────────── */

/* intl-tel-input overrides — match form style */
.iti {
    width: 100%;
}
.iti__country {
    font-size: 0.85rem;
}
.iti__selected-country {
    background: #f5f6f8;
    border-radius: 10px 0 0 10px;
    padding: 0 0.5rem;
}
.iti--allow-dropdown .iti__selected-country:focus,
.iti--allow-dropdown .iti__selected-country:hover {
    background: #eef0f3;
}
.iti__selected-dial-code {
    font-size: 0.85rem;
    color: var(--color-text);
}
.iti__search-input {
    font-size: 0.85rem;
}

.ba-booking-form {
    max-width: 640px;
    margin: 0 auto;
}

/* ── Top-aligned labels ────────────────────────────────────────
 * Overrides the shared side-by-side grid (label left, input right):
 * single column per field, label directly above its input. Shorter
 * vertical scanning, no empty gutter on the left, works on mobile. */
.ba-booking-form .form-group {
    grid-template-columns: 1fr;
    gap: 0.4rem;
    align-items: stretch;
}

/* Sentence-case labels — drop the aggressive all-caps treatment */
.ba-booking-form .form-label {
    font-size: 0.9rem;
    text-transform: none;
    letter-spacing: 0;
}

/* Softer required asterisk — muted red, low contrast, no noise */
.ba-booking-form .form-label .required {
    color: var(--color-danger);
    opacity: 0.55;
}

/* ── Date row ─────────────────────────────────────────────── */
.ba-booking-dates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Inside the date cells the labels stack above their inputs */
.ba-booking-dates .form-label {
    margin-bottom: 0.4rem;
}

/* Native date pickers — keep height consistent with text inputs */
.ba-booking-form input[type="date"].form-input {
    min-height: 3rem;
}

@media (max-width: 480px) {
    .ba-booking-dates {
        grid-template-columns: 1fr;
    }
}

/* ── Experience level — subtle stacked cards ───────────────── */
.ba-booking-radios {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ba-booking-radio {
    position: relative;
}

.ba-booking-radio input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ba-booking-radio__label {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.75rem 0.9rem;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    color: var(--color-text);
}

.ba-booking-radio__label:hover {
    border-color: var(--color-primary);
    background: #f8faff;
}

.ba-booking-radio input:checked + .ba-booking-radio__label {
    border-color: var(--color-primary);
    background: #eef4fe;
    box-shadow: 0 0 0 3px rgba(91, 156, 234, 0.12);
}

.ba-booking-radio__text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

/* Bold title with secondary descriptive text below */
.ba-booking-radio__title {
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1.35;
}

.ba-booking-radio__desc {
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--color-text-muted);
}

.ba-booking-radio__dot {
    width: 20px;
    height: 20px;
    border: 2px solid #dde0e5;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, background 0.2s;
}

.ba-booking-radio__dot::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-primary);
    opacity: 0;
    transition: opacity 0.2s;
}

.ba-booking-radio input:checked + .ba-booking-radio__label .ba-booking-radio__dot {
    border-color: var(--color-primary);
    background: #fff;
}

.ba-booking-radio input:checked + .ba-booking-radio__label .ba-booking-radio__dot::after {
    opacity: 1;
}

/* ── Page layout — card on alt bg ─────────────────────────── */
.ba-booking-page {
    padding: 4rem 0;
}

.ba-booking-intro {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    margin-bottom: 2rem;
    line-height: 1.7;
}

.ba-booking-heading {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.ba-booking-card {
    background: #fff;
    border-radius: 1rem;
    padding: 2.5rem;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
}

@media (max-width: 575.98px) {
    .ba-booking-card {
        padding: 1.5rem;
    }
}

/* ── Submit button — full width, brand blue ──────────────────
 * Overrides the shared green pill: anchored to the card edge,
 * coloured with the brand primary so it belongs to the palette. */
.ba-booking-form .btn-submit {
    width: 100%;
    justify-content: center;
    margin-top: 0.5rem;
    background: var(--color-primary);
}

.ba-booking-form .btn-submit:hover {
    background: var(--color-primary-dark);
}

/* ── Interest list summary (items from ?items=) ─────────────────── */
.ba-interest-summary {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    padding: 1rem 1.25rem;
    background: rgba(91, 156, 234, 0.08);
    border: 1.5px solid rgba(91, 156, 234, 0.25);
    border-radius: 10px;
}

.ba-interest-summary__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.ba-interest-summary__list li {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-primary-dark);
    background: #fff;
    border: 1px solid rgba(91, 156, 234, 0.35);
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
}