/* booking.css — flusso pubblico di prenotazione cliente (brief 9.2).
   Mobile-first (la maggioranza degli utenti arriverà da telefono/QR),
   ma pensato per restare leggibile e ben proporzionato anche su desktop:
   colonna centrata stile "task singolo", non un sito a piena larghezza. */

.bk-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 16px 48px;
}

.bk-container {
    width: 100%;
    max-width: 480px;
}

/* Su schermi larghi, un filo più di respiro e un tocco di elevazione:
   resta comunque una colonna singola, mai un layout a più colonne —
   il compito è lineare, non c'è bisogno di altro spazio. Sfondo
   sfumato blu -> oro solo qui (richiesta Pietro 2026-09-23): su mobile
   resta bianco, la card sopra (.bk-card, sempre a sfondo pieno) resta
   comunque perfettamente leggibile. */
@media (min-width: 768px) {
    .bk-page {
        padding-top: 56px;
        background: linear-gradient(160deg, #1d4ed8 0%, #2563eb 40%, #c99a3b 100%);
    }
    .bk-container {
        max-width: 520px;
    }
}

.bk-header {
    text-align: center;
    margin-bottom: 28px;
}

.bk-structure-name {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

.bk-logo {
    display: block;
    max-height: 64px;
    max-width: 220px;
    width: auto;
    height: auto;
    margin: 0 auto 10px;
    object-fit: contain;
}

.bk-tagline {
    color: var(--color-text-muted);
    font-size: 14px;
    margin: 6px 0 0;
}

/* --- Selettore lingua --- */
.bk-language-switch {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.bk-language-switch a {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}

.bk-language-switch a.is-active {
    background-color: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
    font-weight: 600;
}

/* --- Card generica --- */
.bk-card {
    background-color: var(--color-surface);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 24px;
}

/* --- Bottoni grandi da toccare bene anche col pollice --- */
.bk-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 16px;
    border: none;
    border-radius: 12px;
    background-color: var(--color-primary);
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    margin-bottom: 12px;
}

.bk-btn:hover {
    background-color: var(--color-primary-dark);
}

.bk-btn--secondary {
    background-color: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.bk-btn--secondary:hover {
    background-color: var(--color-bg);
}

.bk-btn:disabled,
.bk-btn.is-disabled {
    background-color: var(--color-bg);
    color: var(--color-text-muted);
    cursor: not-allowed;
    pointer-events: none;
}

.bk-btn-note {
    text-align: center;
    font-size: 12px;
    color: var(--color-text-muted);
    margin: -6px 0 12px;
}

/* --- Form --- */
.bk-field {
    margin-bottom: 16px;
}

.bk-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--color-text);
}

.bk-field input,
.bk-field select,
.bk-field textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    font-size: 16px;
    font-family: inherit;
    box-sizing: border-box;
    background-color: #ffffff;
}

.bk-field input:focus,
.bk-field select:focus,
.bk-field textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.bk-field-hint {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 4px;
}

/* --- Progress indicator (step X di Y) --- */
.bk-progress {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
}

.bk-progress-segment {
    flex: 1;
    height: 4px;
    border-radius: 999px;
    background-color: var(--color-border);
}

.bk-progress-segment.is-done {
    background-color: var(--color-primary);
}

.bk-back-link {
    display: inline-block;
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--color-text-muted);
}

/* --- Badge on-request --- */
.bk-badge-on-request {
    display: inline-block;
    background-color: #fffbeb;
    color: var(--color-warning);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 3px 8px;
    border-radius: 999px;
    margin-bottom: 6px;
}

/* --- Legenda "cos'è on-request" a fisarmonica --- */
.bk-info-toggle {
    display: inline-block;
    font-size: 13px;
    color: var(--color-primary);
    margin-bottom: 12px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

.bk-info-box {
    background-color: var(--color-bg);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 13px;
    color: var(--color-text);
    margin-bottom: 14px;
    display: none;
}

.bk-info-box.is-open {
    display: block;
}

/* --- Slot list --- */
.bk-slot-option {
    display: block;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 10px;
    cursor: pointer;
}

.bk-slot-option:hover {
    border-color: var(--color-primary);
}

.bk-slot-option input[type="radio"] {
    display: none;
}

.bk-slot-option.is-selected {
    border-color: var(--color-primary);
    background-color: #eff6ff;
}

.bk-slot-time {
    font-size: 17px;
    font-weight: 700;
}

.bk-slot-meta {
    font-size: 13px;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.bk-slot-price {
    font-size: 15px;
    font-weight: 600;
    margin-top: 4px;
}

/* --- Griglia orari compatta (alternativa alla lista sopra, usata in
   choose_time.html) — pensata per non far scrollare troppo quando la
   navetta parte ogni 30 min e ci sono molti orari nello stesso giorno. --- */
.bk-slot-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

@media (min-width: 420px) {
    .bk-slot-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

.bk-slot-chip {
    display: block;
    text-align: center;
    padding: 12px 4px;
    border: none;
    border-radius: 10px;
    background-color: #eff6ff;
    color: var(--color-text);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.bk-slot-chip--on-request {
    background-color: #ffedd5;
    color: #9a3412;
}

.bk-slot-chip.is-selected {
    background-color: var(--color-primary);
    color: #ffffff;
}

.bk-slot-chip--on-request.is-selected {
    background-color: var(--color-warning);
    color: #ffffff;
}

/* Più Tratte per la stessa coppia partenza/destinazione (brief 2026-10-21):
   il nome Tratta non ci sta in una cella piccola della griglia — si passa
   a una lista a una colonna, una riga per orario, abbastanza larga da
   mostrare anche il nome per esteso. */
.bk-slot-selection-summary {
    background-color: var(--color-bg);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
}

.bk-slot-selection-time {
    font-size: 18px;
    font-weight: 700;
}

.bk-slot-selection-price {
    font-size: 14px;
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* --- Riepilogo --- */
.bk-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 14px;
}

.bk-summary-row:last-child {
    border-bottom: none;
}

.bk-summary-total {
    font-size: 20px;
    font-weight: 700;
    text-align: right;
    margin-top: 12px;
}

.bk-footer-note {
    text-align: center;
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 24px;
}

/* --- Modal GDPR --- */
.bk-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 50;
}

.bk-modal-overlay.is-open {
    display: flex;
}

.bk-modal-box {
    background-color: #ffffff;
    border-radius: 14px;
    padding: 24px;
    max-width: 520px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
}

/* --- Testi fuori da .bk-card sul gradiente desktop -----------------------
   Deve stare DOPO le regole base qui sopra: a parità di specificità
   (singola classe) vince l'ultima dichiarata nel file, non la più
   "esterna" o quella dentro la media query — messo per errore PRIMA la
   prima volta, e le regole base successive lo sovrascrivevano sempre
   (bug trovato e corretto, 2026-09-23). Tutto ciò che sta fuori dalla
   card (sfondo pieno, sempre leggibile) poggia direttamente sul
   gradiente: senza questo i testi pensati per uno sfondo chiaro (nome
   struttura, sottotitolo, selettore lingua, link "indietro") sparivano
   sul blu, su tutte le pagine del wizard non solo la home. --- */
@media (min-width: 768px) {
    .bk-structure-name,
    .bk-back-link {
        color: #ffffff;
    }
    .bk-tagline {
        color: rgba(255, 255, 255, 0.85);
    }
    .bk-language-switch a {
        color: #ffffff;
        border-color: rgba(255, 255, 255, 0.6);
    }
    .bk-language-switch a.is-active {
        background-color: #ffffff;
        color: var(--color-primary-dark);
        border-color: #ffffff;
    }
}