/* Archie Booking System — Public Styles
   Design system: tight type scale, 4px spacing grid, full CSS var palette
   Visual reference: check-in form (clean, confident, generous whitespace)
   ------------------------------------------------------------------ */

:root {
    /* Colour palette — all values through vars */
    --archie-primary:       #111111;
    --archie-primary-hover: #333333;
    --archie-accent:        #333333;
    --archie-light:         #f5f5f5;
    --archie-surface:       #ffffff;
    --archie-border:        #d4d4d4;
    --archie-border-strong: #999999;
    --archie-text:          #111111;
    --archie-text-muted:    #666666;
    --archie-text-subtle:   #999999;
    --archie-error:         #c0392b;
    --archie-error-bg:      #fdecea;
    --archie-error-border:  #f5c6cb;
    --archie-success:       #1a6fa8;
    --archie-success-bg:    #e8f4fd;
    --archie-success-border:#aed6f1;
    --archie-warning:       #7d4e00;
    --archie-warning-bg:    #fef5e7;
    --archie-warning-border:#e67e22;
    --archie-verified:      #27ae60;

    /* Type scale — 5 sizes, nothing else */
    --archie-text-xs:   0.5rem;  /* calendar labels, tiny badges */
    --archie-text-sm:   1rem;      /* was 0.875 — hints, labels, secondary info */
    --archie-text-base: 1.1rem;    /* was 1 — body, inputs, pills */
    --archie-text-lg:   1.25rem;   /* was 1.125 — pill time, sub-headings */
    --archie-text-xl:   1.5rem;    /* was 1.375 — mobile section headings */

    /* Spacing — 4px grid */
    --archie-space-1:  4px;
    --archie-space-2:  8px;
    --archie-space-3:  12px;
    --archie-space-4:  16px;
    --archie-space-5:  20px;
    --archie-space-6:  24px;
    --archie-space-8:  32px;
    --archie-space-10: 40px;
    --archie-space-12: 48px;

    /* Border radius */
    --archie-radius-sm:   4px;
    --archie-radius:      8px;
    --archie-radius-lg:   12px;
    --archie-radius-full: 999px;

    /* Shadows */
    --archie-shadow:    0 2px 12px rgba(0,0,0,.07);
    --archie-shadow-lg: 0 4px 24px rgba(0,0,0,.1);

    /* Transitions */
    --archie-transition: 0.15s ease;
}

/* ── Wrapper ─────────────────────────────────────────────────────── */
.archie-booking-wrap {
    max-width: 100%;
    width: 100%;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 16px;
    color: var(--archie-text);
}
/* Hard override — beats any theme element selector on h1-h6, p, button etc. */
.archie-booking-wrap *,
.archie-booking-wrap *::before,
.archie-booking-wrap *::after {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

/* ── Messages ────────────────────────────────────────────────────── */

.archie-messages {
    padding: var(--archie-space-3) var(--archie-space-4);
    border-radius: var(--archie-radius);
    margin-bottom: var(--archie-space-5);
    font-size: var(--archie-text-sm);
    font-weight: 500;
    line-height: 1.5;
}
.archie-messages.archie-messages--error {
    background: var(--archie-error-bg);
    color: var(--archie-error);
    border: 1px solid var(--archie-error-border);
}
.archie-messages.archie-messages--error a {
    color: var(--archie-error);
    text-decoration: underline;
}
.archie-messages.archie-messages--success {
    background: var(--archie-success-bg);
    color: var(--archie-success);
    border: 1px solid var(--archie-success-border);
}

/* ── Form fieldsets ──────────────────────────────────────────────── */
.archie-form fieldset {
    border: 1px solid var(--archie-border);
    border-radius: var(--archie-radius-lg);
    padding: var(--archie-space-5) var(--archie-space-6);
    margin-bottom: var(--archie-space-4);
    background: var(--archie-surface);
    box-shadow: var(--archie-shadow);
}

.archie-legend {
    font-weight: 700;
    font-size: var(--archie-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--archie-text-muted);
    padding: 0;
}

@media (max-width: 600px) {
    .archie-form fieldset {
        border: none;
        border-radius: 0;
        padding: var(--archie-space-5) 0 var(--archie-space-4);
        margin-bottom: var(--archie-space-1);
        box-shadow: none;
        border-bottom: 1px solid var(--archie-border);
    }
    .archie-form fieldset:last-of-type { border-bottom: none; }
    .archie-legend {
        display: block;
        font-size: var(--archie-text-xl);
        font-weight: 700;
        text-transform: none;
        letter-spacing: 0;
        padding-top: var(--archie-space-3);
        padding-bottom: 0;
        margin-top: 0;
        margin-bottom: 0;
        color: var(--archie-text);
        float: none;
        width: auto;
    }
}

/* ── Layout ──────────────────────────────────────────────────────── */
.archie-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--archie-space-4);
}
@media (max-width: 480px) {
    .archie-row { grid-template-columns: 1fr; gap: var(--archie-space-3); }
    /* Within a collapsed row, fields use the grid gap — no extra margin needed */
    .archie-row .archie-field { margin-bottom: 0; }
    /* Last field in row: slightly more margin to next element than gap within the row */
    .archie-row .archie-field:last-child { margin-bottom: var(--archie-space-4); }
}

/* ── Fields ──────────────────────────────────────────────────────── */
.archie-field {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--archie-space-4);
}
.archie-field:last-child { margin-bottom: 0; }

.archie-field label {
    font-size: var(--archie-text-sm);
    font-weight: 600;
    color: var(--archie-text-muted);
    margin-bottom: var(--archie-space-1);
    letter-spacing: 0.01em;
}

.archie-field input[type="text"],
.archie-field input[type="email"],
.archie-field select {
    padding: var(--archie-space-3);
    border: 1.5px solid var(--archie-border);
    border-radius: var(--archie-radius);
    font-size: var(--archie-text-base);
    color: var(--archie-text);
    background: var(--archie-surface);
    transition: border-color var(--archie-transition), box-shadow var(--archie-transition);
    appearance: auto;
    line-height: 1.4;
}
.archie-field input:focus,
.archie-field select:focus {
    outline: none;
    border-color: var(--archie-primary);
    box-shadow: 0 0 0 3px rgba(0,0,0,.08);
}

/* ── Checkboxes ──────────────────────────────────────────────────── */
.archie-field--checkbox { flex-direction: row; align-items: center; }
.archie-checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--archie-space-3);
    font-size: var(--archie-text-base);
    cursor: pointer;
    line-height: 1.4;
}
.archie-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--archie-primary);
    flex-shrink: 0;
}
.archie-field--checkbox-with-hint { flex-wrap: wrap; align-items: flex-start; }
.archie-field--checkbox-with-hint .archie-checkbox-label { width: 100%; }
.archie-checkbox-hint {
    width: 100%;
    margin: var(--archie-space-1) 0 0 28px;
    font-size: var(--archie-text-sm);
    color: var(--archie-text-muted);
    line-height: 1.5;
}

/* ── Calendar ────────────────────────────────────────────────────── */
.archie-calendar {
    border: 1px solid var(--archie-border);
    border-radius: var(--archie-radius);
    padding: var(--archie-space-3);
    background: var(--archie-light);
    user-select: none;
    margin-bottom: var(--archie-space-3);
}
.archie-cal-header {
    display: flex;
    align-items: center;
    gap: var(--archie-space-2);
    margin-bottom: var(--archie-space-3);
}
.archie-cal-header button {
    background: var(--archie-surface);
    border: 1.5px solid var(--archie-border);
    border-radius: var(--archie-radius);
    padding: var(--archie-space-2) var(--archie-space-4);
    cursor: pointer;
    font-size: var(--archie-text-base);
    color: var(--archie-text);
    min-height: 38px;
    line-height: 1;
    transition: background var(--archie-transition), color var(--archie-transition), border-color var(--archie-transition);
}
.archie-cal-header button:hover {
    background: var(--archie-primary);
    color: var(--archie-surface);
    border-color: var(--archie-primary);
}
.archie-cal-title {
    font-weight: 700;
    font-size: var(--archie-text-base);
    color: var(--archie-text);
    flex: 1;
    text-align: center;
}
.archie-cal-today {
    font-size: var(--archie-text-xs) !important;
    padding: var(--archie-space-2) var(--archie-space-3) !important;
    min-height: 38px !important;
}
.archie-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--archie-space-1);
    text-align: center;
}
.archie-cal-grid .archie-cal-dow {
    font-size: var(--archie-text-xs);
    font-weight: 700;
    color: var(--archie-text-subtle);
    padding: var(--archie-space-1) 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.archie-cal-day {
    padding: var(--archie-space-1);
    border-radius: var(--archie-radius-sm);
    font-size: var(--archie-text-xs);
    cursor: default;
    color: var(--archie-text-subtle);
    background: var(--archie-surface);
    position: relative;
    border: 1.5px solid transparent;
    min-height: 66px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--archie-space-2);
    transition: background var(--archie-transition), color var(--archie-transition);
}
.archie-cal-day__num { font-size: var(--archie-text-sm); line-height: 1; }
.archie-cal-day.available .archie-cal-day__num,
.archie-cal-day.blocked .archie-cal-day__num { font-size: var(--archie-text-base); font-weight: 700; }
.archie-cal-day__slots-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}
.archie-cal-day__slots {
    font-size: var(--archie-text-xs);
    font-weight: 500;
    color: var(--archie-text-muted);
    line-height: 1;
    text-align: center;
}
.archie-cal-day__slots-available {
    font-size: var(--archie-text-xs);
    font-weight: 400;
    color: var(--archie-text-muted);
    line-height: 1;
    text-align: center;
}
.archie-cal-day__slots--full { color: var(--archie-error); }
.archie-cal-day.today {
    box-shadow: 0 0 0 2px var(--archie-primary);
    color: var(--archie-primary);
    font-weight: 700;
}
.archie-cal-day.available {
    color: var(--archie-text);
    cursor: pointer;
    border-color: var(--archie-border-strong);
}
.archie-cal-day.today.available { box-shadow: 0 0 0 2px var(--archie-primary); }
.archie-cal-day.available:hover {
    background: var(--archie-primary);
    color: var(--archie-surface);
    border-color: var(--archie-primary);
}
.archie-cal-day.available:hover .archie-cal-day__slots { color: rgba(255,255,255,0.8); }
.archie-cal-day.selected {
    background: var(--archie-primary);
    color: var(--archie-surface) !important;
    border-color: var(--archie-primary);
    box-shadow: none;
}
.archie-cal-day.selected .archie-cal-day__slots { color: rgba(255,255,255,0.8); }
.archie-cal-day.selected.blocked {
    color: var(--archie-text-subtle) !important;
    background:
        linear-gradient(to bottom right, transparent calc(50% - 0.6px), #bbb calc(50% - 0.6px), #bbb calc(50% + 0.6px), transparent calc(50% + 0.6px)),
        linear-gradient(to bottom left,  transparent calc(50% - 0.6px), #bbb calc(50% - 0.6px), #bbb calc(50% + 0.6px), transparent calc(50% + 0.6px)),
        #e8e8e8;
}
.archie-cal-day.selected.blocked .archie-cal-day__slots--full { color: var(--archie-error); }
.archie-cal-day.past { opacity: .3; }
.archie-cal-day.blocked {
    cursor: pointer;
    color: var(--archie-text-subtle);
    background:
        linear-gradient(to bottom right, transparent calc(50% - 0.6px), #bbb calc(50% - 0.6px), #bbb calc(50% + 0.6px), transparent calc(50% + 0.6px)),
        linear-gradient(to bottom left,  transparent calc(50% - 0.6px), #bbb calc(50% - 0.6px), #bbb calc(50% + 0.6px), transparent calc(50% + 0.6px)),
        #eeeeee;
    border-color: var(--archie-border);
}
.archie-cal-day.empty { visibility: hidden; }
.archie-date-selected {
    font-size: var(--archie-text-sm);
    color: var(--archie-text-muted);
    font-weight: 600;
    margin: var(--archie-space-2) 0 0;
}

/* ── Pills ───────────────────────────────────────────────────────── */
.archie-pill-group { display: flex; flex-wrap: wrap; gap: var(--archie-space-2); }
@media (max-width: 480px) {
    /* 2 pills: stay inline at equal width */
    .archie-pill-group:not(.archie-pill-group--sessions):has(.archie-pill:nth-child(2)):not(:has(.archie-pill:nth-child(3))) .archie-pill {
        flex: 1;
    }
    /* 3+ pills: each stacks to full width */
    .archie-pill-group:not(.archie-pill-group--sessions):has(.archie-pill:nth-child(3)) .archie-pill {
        width: 100%;
        flex: none;
    }
}
.archie-pill-group--sessions {
    flex-direction: column;
    gap: var(--archie-space-2);
    margin-bottom: var(--archie-space-6);
}
.archie-pill,
.archie-pill:focus,
.archie-pill:active {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: var(--archie-space-2);
    padding: var(--archie-space-3) var(--archie-space-4);
    border: 1.5px solid var(--archie-border);
    border-radius: var(--archie-radius);
    background: var(--archie-light);
    color: var(--archie-text);
    font-size: var(--archie-text-base);
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--archie-transition), background var(--archie-transition), color var(--archie-transition);
    text-align: left;
    line-height: 1.3;
    outline: none;
}

/* Radio indicator */
.archie-pill__radio {
    display: inline-block;
    width: 16px;
    height: 16px;
    min-width: 16px;
    border-radius: 50%;
    border: 2px solid var(--archie-border-strong);
    background: var(--archie-surface);
    transition: border-color var(--archie-transition), box-shadow var(--archie-transition);
    flex-shrink: 0;
}
.archie-pill:hover:not(.archie-pill--disabled) .archie-pill__radio {
    border-color: var(--archie-primary);
}
/* Selected: 1px outer white ring + larger white centre dot.
   Transparent gap reveals the black pill background. */
.archie-pill--selected .archie-pill__radio {
    border: 1px solid var(--archie-surface);
    background: radial-gradient(circle, var(--archie-surface) 46%, transparent 46%);
    box-shadow: none;
}
/* Keep ring white on hover when already selected — !important beats hover state */
.archie-pill--selected .archie-pill__radio,
.archie-pill--selected:hover .archie-pill__radio,
.archie-pill--selected:focus .archie-pill__radio,
.archie-pill--selected:active .archie-pill__radio {
    border-color: var(--archie-surface) !important;
}
.archie-pill:hover:not(.archie-pill--disabled) {
    border-color: var(--archie-primary);
    background: var(--archie-light);
    color: var(--archie-text);
}
.archie-pill:active:not(.archie-pill--disabled):not(.archie-pill--selected) {
    background: #e4e4e4 !important;
    border-color: var(--archie-primary) !important;
}
.archie-pill--selected,
.archie-pill--selected:hover,
.archie-pill--selected:focus,
.archie-pill--selected:active,
.archie-pill--selected:visited {
    border-color: var(--archie-primary) !important;
    background: var(--archie-primary) !important;
    color: var(--archie-surface) !important;
    outline: none;
}
.archie-pill--disabled {
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.45;
    background: var(--archie-light);
    border-color: var(--archie-border);
    color: var(--archie-text-muted);
}
.archie-pill--session,
.archie-pill--session:hover,
.archie-pill--session:focus,
.archie-pill--session:active,
.archie-pill--session.archie-pill--selected {
    width: 100%;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
}
.archie-pill__time { font-size: var(--archie-text-lg); font-weight: 600; line-height: 1.2; }
.archie-pill__label {
    font-size: var(--archie-text-sm);
    font-weight: 400;
    color: var(--archie-text-muted);
    margin-top: var(--archie-space-1);
}
.archie-pill--selected .archie-pill__label { color: rgba(255,255,255,0.8); }
.archie-pill__reason {
    font-size: var(--archie-text-sm);
    font-weight: 400;
    margin-top: var(--archie-space-1);
    color: var(--archie-text-muted);
}
.archie-pill--disabled .archie-pill__reason { color: inherit; }
.archie-pill__spots {
    font-size: var(--archie-text-xs);
    font-weight: 600;
    margin-top: var(--archie-space-1);
    color: var(--archie-error);
}
.archie-pill--selected .archie-pill__spots {
    color: rgba(255,255,255,0.75);
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.archie-btn {
    display: inline-block;
    padding: var(--archie-space-3) var(--archie-space-6);
    border: none;
    border-radius: var(--archie-radius);
    font-size: var(--archie-text-base);
    font-weight: 700;
    cursor: pointer;
    transition: background var(--archie-transition), transform 0.1s;
    letter-spacing: 0.01em;
    line-height: 1.4;
}
.archie-btn--primary {
    background: var(--archie-primary);
    color: var(--archie-surface);
}
.archie-btn--primary:hover { background: var(--archie-primary-hover); }
.archie-btn--primary:active { transform: scale(.98); }
.archie-btn:disabled { opacity: .45; cursor: not-allowed; }

.archie-btn--secondary {
    background: var(--archie-surface);
    color: var(--archie-text);
    border: 1.5px solid var(--archie-border);
    padding: var(--archie-space-2) var(--archie-space-4);
    font-size: var(--archie-text-sm);
    font-weight: 600;
    border-radius: var(--archie-radius);
    cursor: pointer;
    transition: border-color var(--archie-transition), background var(--archie-transition);
    min-height: 36px;
}
.archie-btn--secondary:hover { border-color: var(--archie-primary); background: var(--archie-light); color: var(--archie-text); }
.archie-btn--secondary:active { background: #e4e4e4; color: var(--archie-text); }

.archie-submit-row { margin-top: var(--archie-space-4); }

/* ── Booking type toggle ─────────────────────────────────────────── */
.archie-booking-type-toggle {
    display: flex;
    gap: var(--archie-space-2);
    flex-wrap: wrap;
    margin-bottom: var(--archie-space-3);
}
.archie-toggle-option {
    display: flex;
    align-items: center;
    gap: var(--archie-space-2);
    padding: var(--archie-space-2) var(--archie-space-4);
    border: 1.5px solid var(--archie-border);
    border-radius: var(--archie-radius);
    cursor: pointer;
    font-size: var(--archie-text-base);
    transition: border-color var(--archie-transition), background var(--archie-transition);
    background: var(--archie-surface);
}
.archie-toggle-option:has(input:checked) {
    border-color: var(--archie-primary);
    background: var(--archie-light);
}
.archie-toggle-option input[type=radio] { margin: 0; accent-color: var(--archie-primary); }

/* ── Group hint ──────────────────────────────────────────────────── */
.archie-group-hint {
    font-size: var(--archie-text-sm);
    color: var(--archie-text-muted);
    margin: 0 0 var(--archie-space-3);
    line-height: 1.5;
}

/* ── Add participant form ─────────────────────────────────────────── */
.archie-add-participant-form {
    background: var(--archie-light);
    border: 1px solid var(--archie-border);
    border-radius: var(--archie-radius);
    padding: var(--archie-space-4);
}
.archie-add-form-error {
    color: var(--archie-error);
    font-size: var(--archie-text-sm);
    margin: var(--archie-space-1) 0 var(--archie-space-2);
}

/* ── Participants table ───────────────────────────────────────────── */
.archie-participants-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--archie-space-4);
    font-size: var(--archie-text-sm);
}
.archie-participants-table th {
    text-align: left;
    padding: var(--archie-space-2) var(--archie-space-3);
    border-bottom: 2px solid var(--archie-border);
    color: var(--archie-text-muted);
    font-weight: 600;
}
.archie-participants-table td {
    padding: var(--archie-space-2) var(--archie-space-3);
    border-bottom: 1px solid var(--archie-border);
    vertical-align: middle;
}
.archie-participants-table tr:last-child td { border-bottom: none; }

.archie-btn--remove-participant {
    display: inline-flex;
    align-items: center;
    background: none;
    border: 1.5px solid var(--archie-error);
    color: var(--archie-error);
    font-size: var(--archie-text-sm);
    font-weight: 600;
    cursor: pointer;
    padding: 3px 12px;
    border-radius: 999px;
    text-decoration: none;
    transition: background var(--archie-transition), color var(--archie-transition);
    line-height: 1.6;
}
.archie-btn--remove-participant:hover {
    background: var(--archie-error);
    color: #fff;
    opacity: 1;
}
.archie-btn--remove-participant:active { opacity: 0.85; }

/* ── Pavilion mode cards ─────────────────────────────────────────── */
.archie-pavilion-mode-options { display: flex; flex-direction: column; gap: var(--archie-space-2); }
.archie-mode-card {
    display: flex;
    flex-direction: column;
    gap: var(--archie-space-1);
    padding: var(--archie-space-3) var(--archie-space-4);
    border: 1.5px solid var(--archie-border);
    border-radius: var(--archie-radius);
    cursor: pointer;
    transition: border-color var(--archie-transition), background var(--archie-transition);
    background: var(--archie-surface);
}
.archie-mode-card:has(input:checked) { border-color: var(--archie-primary); background: var(--archie-light); }
.archie-mode-card input[type=radio] { display: none; }
.archie-mode-card__title { font-weight: 600; font-size: var(--archie-text-base); color: var(--archie-text); }
.archie-mode-card__desc { font-size: var(--archie-text-sm); color: var(--archie-text-muted); line-height: 1.4; }

/* ── Capacity info ───────────────────────────────────────────────── */
.archie-capacity-info {
    font-size: var(--archie-text-base);
    color: var(--archie-text-muted);
    margin: var(--archie-space-2) 0 0;
    line-height: 1.5;
}

/* ---------- Field hint (general + warning variant) ---------- */
.archie-field-hint {
    font-size: 0.82em;
    color: var(--archie-muted);
    margin: 4px 0 0;
    font-family: inherit;
    line-height: 1.4;
}
#archie-email-hint {
    padding: var(--archie-space-3) var(--archie-space-4);
    border-radius: var(--archie-radius);
    margin-bottom: 0;
    margin-top: var(--archie-space-2);
    font-size: var(--archie-text-sm);
    font-weight: 500;
    line-height: 1.5;
    background: var(--archie-bg-subtle, #f4f4f4);
    color: var(--archie-muted);
}
.archie-field-hint--warn {
    color: #b7600a;
    background: #fef5e7;
    border-left: 3px solid #e67e22;
    padding: 7px 10px;
    border-radius: 0 4px 4px 0;
}

/* ── Event label badge ───────────────────────────────────────────── */
.archie-event-label-badge {
    display: inline-block;
    background: var(--archie-primary);
    color: var(--archie-surface);
    font-size: var(--archie-text-sm);
    font-weight: 600;
    padding: var(--archie-space-1) var(--archie-space-3);
    border-radius: var(--archie-radius-full);
    letter-spacing: 0.02em;
}

/* ── Member verification status ─────────────────────────────────── */
#archie-member-status,
#archie-member-status-under16 {
    font-size: var(--archie-text-base);
    padding: var(--archie-space-3);
    border-radius: var(--archie-radius);
    background: var(--archie-light);
    border: 1px solid var(--archie-border);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    line-height: 1.5;
}
#archie-member-status a,
#archie-member-status-under16 a {
    color: inherit;
    text-decoration: underline;
}
#archie-member-status a:hover,
#archie-member-status-under16 a:hover {
    opacity: 0.8;
}

/* ── Check again button ──────────────────────────────────────────── */
.archie-btn-check-again {
    display: inline-flex;
    align-items: center;
    gap: var(--archie-space-1);
    margin-top: var(--archie-space-2);
    padding: var(--archie-space-2) var(--archie-space-4);
    font-size: var(--archie-text-sm);
    font-weight: 600;
    color: var(--archie-text-muted);
    background: var(--archie-surface);
    border: 1.5px solid var(--archie-border);
    border-radius: var(--archie-radius);
    cursor: pointer;
    transition: border-color var(--archie-transition), color var(--archie-transition);
    align-self: flex-start;
}
.archie-btn-check-again:hover { border-color: var(--archie-primary); color: var(--archie-text); background: var(--archie-light); }

/* ── Booking form layout helpers ────────────────────────────────── */
.archie-facility-prompt {
    margin: 0 0 var(--archie-space-3);
    font-size: var(--archie-text-base);
    color: var(--archie-text-muted);
}
#archie-member-status          { margin-top: var(--archie-space-2); }
#archie-member-status-under16  { margin-top: var(--archie-space-2); }
.archie-field--age-category    { margin-top: var(--archie-space-2); }
#archie-guardian-wrap          { margin-top: var(--archie-space-4); }
#archie-p-guardian-wrap        { margin-top: var(--archie-space-3); margin-bottom: var(--archie-space-3); }
#archie-junior-archer-wrap     { margin-top: var(--archie-space-4); }
.archie-field--checkbox-with-hint { margin-bottom: var(--archie-space-4); }

/* ── Safeguarding ────────────────────────────────────────────────── */
.archie-legend-inline {
    display: block;
    font-size: var(--archie-text-lg);
    font-weight: 700;
    color: var(--archie-text);
    margin-bottom: var(--archie-space-2);
    text-transform: none;
    letter-spacing: 0;
}
.archie-guardian-heading { margin-bottom: var(--archie-space-1); }
.archie-legend-subtitle {
    font-size: var(--archie-text-base);
    color: var(--archie-text-muted);
    font-weight: 400;
    margin: 0 0 var(--archie-space-3);
    line-height: 1.4;
}
.archie-guardian-notice {
    font-size: var(--archie-text-sm);
    color: var(--archie-warning);
    background: var(--archie-warning-bg);
    border-left: 3px solid var(--archie-warning-border);
    padding: var(--archie-space-2) var(--archie-space-3);
    border-radius: 0 var(--archie-radius) var(--archie-radius) 0;
    margin-bottom: var(--archie-space-4);
    line-height: 1.5;
}

/* ── Privacy notice ──────────────────────────────────────────────── */
.archie-privacy-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--archie-space-3);
    background: var(--archie-light);
    border-left: 3px solid var(--archie-border-strong);
    border-radius: 0 var(--archie-radius) var(--archie-radius) 0;
    padding: var(--archie-space-3);
    margin-bottom: var(--archie-space-4);
    font-size: var(--archie-text-sm);
    color: var(--archie-text-muted);
    line-height: 1.5;
}
.archie-privacy-notice a { color: var(--archie-text-muted); text-decoration: underline; }
.archie-privacy-notice__text { flex: 1; }
.archie-privacy-notice__dismiss {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--archie-text-subtle);
    flex-shrink: 0;
    line-height: 1;
    opacity: 0.6;
    transition: opacity var(--archie-transition);
}
.archie-privacy-notice__dismiss:hover { opacity: 1; }

/* ── Acknowledgement ─────────────────────────────────────────────── */
.archie-ack-actions {
    display: flex;
    align-items: center;
    gap: var(--archie-space-6);
    margin-top: var(--archie-space-4);
    flex-wrap: wrap;
}
.archie-ack-actions__submit { flex-shrink: 0; }
@media (max-width: 480px) {
    .archie-ack-actions { flex-direction: column; align-items: flex-start; gap: var(--archie-space-4); }
}
/* ── Calendar prompt (top of form) ──────────────────────────────── */
.archie-cal-prompt {
    display: block;
    margin-bottom: var(--archie-space-4);
    text-decoration: none !important;
    color: inherit !important;
}
.archie-cal-prompt__inner {
    display: flex;
    align-items: flex-start;
    gap: var(--archie-space-3);
    padding: var(--archie-space-3) var(--archie-space-4);
    background: var(--archie-light);
    border: 1px solid var(--archie-border);
    border-radius: var(--archie-radius);
    color: var(--archie-text-muted);
    transition: background var(--archie-transition), border-color var(--archie-transition);
}
.archie-cal-prompt:hover .archie-cal-prompt__inner {
    background: #ebebeb;
    border-color: var(--archie-border-strong);
}
.archie-cal-prompt__inner svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--archie-text-muted);
}
.archie-cal-prompt__text {
    display: flex;
    flex-direction: column;
    gap: var(--archie-space-1);
}
.archie-cal-prompt__desc {
    font-size: var(--archie-text-sm);
    color: var(--archie-text-muted);
    line-height: 1.4;
}
.archie-cal-prompt__link {
    font-size: var(--archie-text-sm);
    font-weight: 700;
    color: var(--archie-text) !important;
    text-decoration: none !important;
}

/* ── Confirmation ────────────────────────────────────────────────── */
.archie-confirmation {
    text-align: center;
    padding: var(--archie-space-12) var(--archie-space-6);
    border: 1px solid var(--archie-border);
    border-radius: var(--archie-radius-lg);
    background: var(--archie-surface);
    box-shadow: var(--archie-shadow-lg);
    font-size: 16px;
}
/* Force all child elements to inherit — prevents theme h3/p/button overrides */
.archie-confirmation,
.archie-confirmation h1,
.archie-confirmation h2,
.archie-confirmation h3,
.archie-confirmation h4,
.archie-confirmation p,
.archie-confirmation button,
.archie-confirmation a,
.archie-confirmation span,
.archie-confirmation strong {
}
.archie-confirmation__icon {
    color: var(--archie-primary);
    margin-bottom: var(--archie-space-3);
    display: flex;
    justify-content: center;
}
.archie-confirmation__icon svg { width: 56px; height: 56px; }
.archie-confirmation__title {
    color: var(--archie-text);
    margin: 0 0 var(--archie-space-2);
    font-size: 1.5rem;
    font-weight: 800;
}
.archie-confirmation__ref { color: var(--archie-text-muted); font-size: var(--archie-text-sm); }
.archie-confirmation__msg { font-size: var(--archie-text-base); line-height: 1.5; }

/* ── Step transitions ────────────────────────────────────────────── */
.archie-step { transition: opacity .2s; }
.archie-step[style*="display:none"] { opacity: 0; }

/* ── Spinner ─────────────────────────────────────────────────────── */
.archie-spinner {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid var(--archie-border);
    border-top-color: var(--archie-primary);
    border-radius: 50%;
    animation: archie-spin .7s linear infinite;
    vertical-align: middle;
    margin-right: var(--archie-space-2);
}
@keyframes archie-spin { to { transform: rotate(360deg); } }

.archie-cal-loading {
    padding: var(--archie-space-6);
    text-align: center;
    color: var(--archie-text-muted);
    font-size: var(--archie-text-sm);
}
.archie-cal-error { color: var(--archie-error); padding: var(--archie-space-3); text-align: center; font-size: var(--archie-text-sm); }
.archie-error-inline { color: var(--archie-error); margin: var(--archie-space-2) 0 0; font-size: var(--archie-text-sm); }

/* ── Muted text ─────────────────────────────────────────────────── */
.archie-muted {
    font-size: var(--archie-text-sm);
    color: var(--archie-text-muted);
    line-height: 1.5;
}

/* ── Misc ────────────────────────────────────────────────────────── */
.archie-option-closed { color: var(--archie-text-muted); font-style: italic; }
.archie-option-past   { color: var(--archie-text-muted); font-style: italic; }

/* ── Tester Feedback Panel ───────────────────────────────────────── */
.archie-feedback-wrap {
    margin-top: var(--archie-space-12);
    border: 2px dashed var(--archie-warning-border);
    border-radius: var(--archie-radius-lg);
    font-size: 16px;
}
.archie-feedback-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--archie-space-2);
    padding: var(--archie-space-3) var(--archie-space-4);
    background: var(--archie-light);
    border: none;
    border-radius: var(--archie-radius) var(--archie-radius) 0 0;
    cursor: pointer;
    font-size: var(--archie-text-sm);
    font-weight: 600;
    color: var(--archie-text);
    text-align: left;
    transition: background var(--archie-transition);
}
.archie-feedback-toggle:hover { background: #ebebeb; color: var(--archie-text); }
.archie-feedback-toggle svg { transition: transform 0.2s; }
.archie-feedback-panel {
    padding: var(--archie-space-5) var(--archie-space-4);
    background: var(--archie-surface);
    border-top: 1px dashed var(--archie-border);
    font-size: var(--archie-text-sm);
}
.archie-feedback-panel label {
    font-size: var(--archie-text-sm);
    font-weight: 600;
    display: block;
    margin-bottom: var(--archie-space-1);
    color: var(--archie-text);
}
.archie-feedback-panel select {
    font-size: 16px;
    width: 100%;
    position: static !important;
    display: block;
}
.archie-feedback-panel textarea {
    width: 100%;
    font-size: var(--archie-text-sm);
    padding: var(--archie-space-2) var(--archie-space-3);
    border: 1.5px solid var(--archie-border);
    border-radius: var(--archie-radius);
    resize: vertical;
    box-sizing: border-box;
    position: static !important;
    line-height: 1.5;
}
.archie-feedback-panel textarea:focus {
    outline: none;
    border-color: var(--archie-primary);
    box-shadow: 0 0 0 3px rgba(0,0,0,.08);
}

/* ── Overlap modal — explicit system font ── */
#archie-overlap-modal * {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}