/* =========================================================================
   BeFlag Booking — Foglio di stile
   Tool prenotazione appuntamenti per BeFlag Creative Team
   Mobile-first, responsive
   v2 — layout compatto 2 colonne, gradienti brand, celle calendario ridotte
   ========================================================================= */

/* Import font testi da Google Fonts (Inter) */
@import url( 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap' );

/* -------------------------------------------------------------------------
   VARIABILI BRAND BEFLAG
   ------------------------------------------------------------------------- */
:root {
    /* Colori brand */
    --bf-primary:    #F18805;
    --bf-secondary:  #F0A202;
    --bf-accent:     #D95D39;
    --bf-dark:       #57383B;
    --bf-text:       #555555;
    --bf-light-grey: #F6F2F7;
    --bf-white:      #FFFFFF;

    /* Gradienti brand riutilizzabili */
    --bf-grad-primary:   linear-gradient(135deg, #F18805 0%, #F0A202 100%);
    --bf-grad-warm:      linear-gradient(135deg, #F18805 0%, #D95D39 100%);
    --bf-grad-dark:      linear-gradient(135deg, #57383B 0%, #3d2528 100%);
    --bf-grad-subtle:    linear-gradient(160deg, rgba(241,136,5,0.07) 0%, rgba(240,162,2,0.02) 100%);

    /* Colori di stato */
    --bf-success:    #2E8B57;
    --bf-success-bg: #E6F4EC;
    --bf-warning:    #F0A202;
    --bf-warning-bg: #FFF4DC;
    --bf-info:       #3B82F6;
    --bf-info-bg:    #E6EFFD;
    --bf-error:      #D95D39;
    --bf-error-bg:   #FBE7E0;
    --bf-muted:      #9CA3AF;
    --bf-muted-bg:   #F1F2F4;

    /* Tipografia */
    --bf-font-titles: 'iBrand', 'Inter', sans-serif;
    --bf-font-body:   'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Spaziature */
    --bf-space-xs:  4px;
    --bf-space-sm:  8px;
    --bf-space-md:  16px;
    --bf-space-lg:  24px;
    --bf-space-xl:  32px;
    --bf-space-2xl: 48px;

    /* Bordi e ombre */
    --bf-radius-sm:   6px;
    --bf-radius-md:   10px;
    --bf-radius-lg:   16px;
    --bf-radius-pill: 999px;
    --bf-shadow-sm:   0 1px 3px rgba(87, 56, 59, 0.07);
    --bf-shadow-md:   0 4px 14px rgba(87, 56, 59, 0.10);
    --bf-shadow-lg:   0 12px 32px rgba(87, 56, 59, 0.14);
    --bf-shadow-orange: 0 4px 16px rgba(241, 136, 5, 0.30);

    /* Transizioni */
    --bf-transition: all 0.2s ease;
}

/* -------------------------------------------------------------------------
   RESET LEGGERO — solo nel namespace .bf- per non interferire con il sito host
   ------------------------------------------------------------------------- */
.bf-booking,
.bf-booking *,
.bf-gestionale,
.bf-gestionale *,
.bf-modal-overlay,
.bf-modal-overlay * {
    box-sizing: border-box;
}

.bf-booking,
.bf-gestionale {
    font-family: var(--bf-font-body);
    color: var(--bf-text);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* =========================================================================
   PAGINA PUBBLICA — WRAPPER
   ========================================================================= */
.bf-booking {
    max-width: 860px;
    margin: 0 auto;
    padding: var(--bf-space-md);
    background: var(--bf-white);
}

/* -------------------------------------------------------------------------
   HEADER — gradient sottile + logo + titolo compatto
   ------------------------------------------------------------------------- */
.bf-header {
    text-align: center;
    /* Gradiente caldo leggero che richiama il brand senza coprire il bianco */
    background: var(--bf-grad-subtle);
    border-radius: var(--bf-radius-lg);
    padding: var(--bf-space-lg) var(--bf-space-md);
    margin-bottom: var(--bf-space-lg);
    border: 1px solid rgba(241, 136, 5, 0.10);
}

.bf-header__logo {
    max-width: 110px;
    height: auto;
    margin-bottom: var(--bf-space-sm);
}

.bf-header__title {
    font-family: var(--bf-font-titles);
    font-size: 24px;
    font-weight: 700;
    color: var(--bf-dark);
    margin: 0 0 var(--bf-space-xs);
}

.bf-header__subtitle {
    font-size: 14px;
    color: var(--bf-text);
    margin: 0;
}

/* -------------------------------------------------------------------------
   STEP NAV — indicatori 1, 2, 3 con gradienti sullo stato attivo
   ------------------------------------------------------------------------- */
.bf-step-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--bf-space-sm);
    margin-bottom: var(--bf-space-lg);
    flex-wrap: wrap;
}

.bf-step-nav__item {
    display: flex;
    align-items: center;
    gap: var(--bf-space-xs);
    font-size: 13px;
    font-weight: 500;
    color: var(--bf-muted);
}

.bf-step-nav__circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bf-light-grey);
    color: var(--bf-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    transition: var(--bf-transition);
    flex-shrink: 0;
}

/* Step attivo: cerchio con gradiente brand */
.bf-step-nav__item.active .bf-step-nav__circle {
    background: var(--bf-grad-primary);
    color: var(--bf-white);
    box-shadow: 0 0 0 3px rgba(241, 136, 5, 0.18);
}
.bf-step-nav__item.active {
    color: var(--bf-dark);
    font-weight: 600;
}

/* Step completato: gradiente scuro */
.bf-step-nav__item.done .bf-step-nav__circle {
    background: var(--bf-grad-dark);
    color: var(--bf-white);
}
.bf-step-nav__item.done {
    color: var(--bf-dark);
}

.bf-step-nav__divider {
    width: 24px;
    height: 2px;
    background: var(--bf-light-grey);
    border-radius: var(--bf-radius-pill);
    flex-shrink: 0;
}

/* -------------------------------------------------------------------------
   STEP — container (default nascosto, .active mostra)
   ------------------------------------------------------------------------- */
.bf-step {
    display: none;
    animation: bfFadeIn 0.25s ease;
}
.bf-step.active {
    display: block;
}

@keyframes bfFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================================
   STEP 1 — LAYOUT 2 COLONNE (calendario sinistra, slot destra)
   Si attiva da 768px in su per evitare lo scrolling
   ========================================================================= */

/* Su mobile: colonna singola */
.bf-step--calendar.active {
    display: flex;
    flex-direction: column;
    gap: var(--bf-space-md);
}

/* Da 768px: 2 colonne affiancate — calendario più largo, slot più stretti */
@media (min-width: 768px) {
    .bf-step--calendar.active {
        display: grid;
        grid-template-columns: 1fr 0.75fr;
        gap: var(--bf-space-md);
        align-items: start;
    }
    /* Quando lo slot non è ancora selezionato, il calendario occupa tutto */
    .bf-step--calendar.active .bf-slots-section:not([style]) {
        min-width: 0;
    }
}

/* =========================================================================
   CALENDARIO — sezione compatta
   ========================================================================= */
.bf-calendar-section {
    background: var(--bf-white);
    border: 1px solid rgba(241, 136, 5, 0.12);
    border-radius: var(--bf-radius-lg);
    padding: var(--bf-space-md);
    box-shadow: var(--bf-shadow-sm);
    /* Nessun margin-bottom: lo gestisce il gap del grid parent */
}

/* Navigazione mese */
.bf-calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--bf-space-md);
}

.bf-calendar-nav__btn {
    background: var(--bf-light-grey);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--bf-dark);
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--bf-transition);
    text-decoration: none;
    flex-shrink: 0;
}
.bf-calendar-nav__btn:hover {
    background: var(--bf-grad-primary);
    color: var(--bf-white);
    box-shadow: var(--bf-shadow-orange);
}
.bf-calendar-nav__btn.disabled,
.bf-calendar-nav__btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.bf-calendar-nav__label {
    font-family: var(--bf-font-titles);
    font-size: 16px;
    font-weight: 600;
    color: var(--bf-dark);
    text-transform: capitalize;
    letter-spacing: .5px;
}

/* Header giorni settimana */
.bf-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: var(--bf-space-xs);
}
.bf-calendar-weekdays__day {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--bf-muted);
    text-transform: uppercase;
    padding: 4px 0;
    letter-spacing: 0.3px;
}

/* Griglia giorni — celle compatte */
.bf-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.bf-day {
    height: 36px;               /* Altezza fissa: più compatta di aspect-ratio 1/1 */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--bf-radius-sm);
    font-size: 13px;
    font-weight: 500;
    color: var(--bf-text);
    background: transparent;
    border: none;
    cursor: default;
    transition: var(--bf-transition);
    position: relative;
    text-decoration: none;
    min-width: 0;
}

/* Giorno lavorativo con slot disponibili */
.bf-day.available {
    cursor: pointer;
    background: var(--bf-light-grey);
    color: var(--bf-dark);
    font-weight: 600;
}
.bf-day.available:hover {
    background: var(--bf-grad-primary);
    color: var(--bf-white);
    transform: scale(1.08);
    box-shadow: 0 2px 8px rgba(241, 136, 5, 0.25);
}

/* Oggi: bordino arancione */
.bf-day.today {
    box-shadow: inset 0 0 0 2px var(--bf-primary);
    color: var(--bf-primary);
    font-weight: 700;
}

/* Giorno selezionato: gradiente warm */
.bf-day.selected {
    background: var(--bf-grad-warm);
    color: var(--bf-white);
    box-shadow: 0 3px 10px rgba(241, 136, 5, 0.35);
    font-weight: 700;
}

/* Disabilitato */
.bf-day.disabled {
    color: var(--bf-muted);
    opacity: 0.35;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* Cella vuota di allineamento */
.bf-day.empty {
    visibility: hidden;
}

/* =========================================================================
   SLOT ORARI — colonna destra su desktop, sotto il calendario su mobile
   ========================================================================= */
.bf-slots-section {
    background: var(--bf-white);
    border: 1px solid rgba(241, 136, 5, 0.12);
    border-radius: var(--bf-radius-lg);
    padding: var(--bf-space-md);
    box-shadow: var(--bf-shadow-sm);
}

.bf-slots-title {
    font-family: var(--bf-font-titles);
    font-size: 15px;
    font-weight: 600;
    color: var(--bf-dark);
    margin: 0 0 var(--bf-space-sm);
    text-transform: capitalize;
    letter-spacing: .5px;
}

.bf-slots-grid {
    display: grid;
    /* Su mobile: 3 colonne; su desktop le slot sono già in colonna laterale */
    grid-template-columns: repeat(3, 1fr);
    gap: var(--bf-space-xs);
}

@media (min-width: 768px) {
    /* Su desktop la colonna slot è già stretta: 2 colonne bastano */
    .bf-slots-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.bf-slot {
    padding: 9px 8px;
    border-radius: var(--bf-radius-md);
    border: 1.5px solid var(--bf-light-grey);
    background: var(--bf-white);
    color: var(--bf-dark);
    font-size: 14px;
    font-weight: 600;
    font-family: var(--bf-font-body);
    cursor: pointer;
    transition: var(--bf-transition);
    text-align: center;
    display: block;
    width: 100%;
}

/* Slot libero al hover: bordino arancione + leggero warm bg */
.bf-slot.available:hover {
    border-color: var(--bf-primary);
    color: var(--bf-primary);
    background: rgba(241, 136, 5, 0.05);
    transform: translateY(-2px);
    box-shadow: var(--bf-shadow-md);
}

/* Slot occupato */
.bf-slot.busy {
    background: var(--bf-light-grey);
    color: var(--bf-muted);
    cursor: not-allowed;
    text-decoration: line-through;
    border-color: var(--bf-light-grey);
    font-weight: 400;
}

/* Slot selezionato: gradiente brand */
.bf-slot.selected {
    background: var(--bf-grad-warm);
    color: var(--bf-white);
    border-color: transparent;
    box-shadow: 0 3px 10px rgba(241, 136, 5, 0.30);
}

/* =========================================================================
   STEP 2 — FORM CONTATTI
   ========================================================================= */
.bf-summary-box {
    background: var(--bf-grad-warm);
    color: var(--bf-white);
    border-radius: var(--bf-radius-lg);
    padding: var(--bf-space-md) var(--bf-space-lg);
    margin-bottom: var(--bf-space-md);
    box-shadow: var(--bf-shadow-orange);
    display: flex;
    align-items: center;
    gap: var(--bf-space-lg);
    flex-wrap: wrap;
}
.bf-summary-box__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.80;
    margin-bottom: 2px;
}
.bf-summary-box__value {
    font-family: var(--bf-font-titles);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .5px;
}
/* Link "Cambia" dentro la summary box */
.bf-summary-box a {
    color: rgba(255,255,255,0.80);
    font-size: 13px;
    text-decoration: underline;
    margin-left: auto;
    white-space: nowrap;
    transition: var(--bf-transition);
}
.bf-summary-box a:hover {
    color: var(--bf-white);
}

.bf-form {
    background: var(--bf-white);
    border: 1px solid var(--bf-light-grey);
    border-radius: var(--bf-radius-lg);
    padding: var(--bf-space-lg);
    box-shadow: var(--bf-shadow-sm);
}

/* Layout 2 colonne per nome + cognome su desktop */
@media (min-width: 600px) {
    .bf-form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--bf-space-md);
    }
}

.bf-form-group {
    margin-bottom: var(--bf-space-md);
}

.bf-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--bf-dark);
    margin-bottom: var(--bf-space-xs);
}
.bf-required {
    color: var(--bf-accent);
    margin-left: 2px;
}

.bf-input {
    width: 100%;
    padding: 10px 13px;
    border: 1.5px solid #E5E0E9;
    border-radius: var(--bf-radius-md);
    font-size: 14px;
    font-family: var(--bf-font-body);
    color: var(--bf-dark);
    background: var(--bf-white);
    transition: var(--bf-transition);
}
.bf-input:focus {
    outline: none;
    border-color: var(--bf-primary);
    box-shadow: 0 0 0 3px rgba(241, 136, 5, 0.12);
}
.bf-input::placeholder {
    color: var(--bf-muted);
}

textarea.bf-input {
    resize: vertical;
    min-height: 80px;
}

/* Form actions */
.bf-form-actions {
    display: flex;
    gap: var(--bf-space-sm);
    justify-content: flex-end;
    margin-top: var(--bf-space-md);
    padding-top: var(--bf-space-md);
    border-top: 1px solid var(--bf-light-grey);
    flex-wrap: wrap;
}

/* =========================================================================
   BOTTONI
   ========================================================================= */
.bf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bf-space-xs);
    padding: 11px 22px;
    border-radius: var(--bf-radius-md);
    font-size: 14px;
    font-weight: 600;
    font-family: var(--bf-font-body);
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: var(--bf-transition);
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
}
.bf-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Primario: gradiente brand arancione */
.bf-btn--primary {
    background: var(--bf-grad-primary);
    color: var(--bf-white);
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(241, 136, 5, 0.22);
}
.bf-btn--primary:hover:not(:disabled) {
    background: var(--bf-grad-warm);
    transform: translateY(-1px);
    box-shadow: var(--bf-shadow-orange);
}
.bf-btn--primary:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: none;
}

/* Secondario: outline leggero */
.bf-btn--secondary {
    background: transparent;
    color: var(--bf-dark);
    border-color: #E5E0E9;
}
.bf-btn--secondary:hover:not(:disabled) {
    background: var(--bf-light-grey);
    border-color: var(--bf-dark);
}

/* Variante small usata nelle azioni del gestionale */
.bf-btn--sm {
    padding: 6px 12px;
    font-size: 12px;
}

/* =========================================================================
   STEP 3 — CONFERMA
   ========================================================================= */
.bf-confirmation {
    background: var(--bf-white);
    border: 1px solid var(--bf-light-grey);
    border-radius: var(--bf-radius-lg);
    padding: var(--bf-space-2xl) var(--bf-space-lg);
    text-align: center;
    box-shadow: var(--bf-shadow-sm);
}

.bf-confirmation__icon {
    width: 72px;
    height: 72px;
    margin: 0 auto var(--bf-space-lg);
    /* Gradiente sul cerchio di conferma */
    background: var(--bf-grad-primary);
    color: var(--bf-white);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    font-weight: 700;
    box-shadow: var(--bf-shadow-orange);
}

.bf-confirmation__title {
    font-family: var(--bf-font-titles);
    font-size: 26px;
    font-weight: 700;
    color: var(--bf-dark);
    margin: 0 0 var(--bf-space-md);
}

.bf-confirmation__text {
    font-size: 15px;
    color: var(--bf-text);
    max-width: 440px;
    margin: 0 auto var(--bf-space-lg);
    line-height: 1.6;
}

/* =========================================================================
   ALERT
   ========================================================================= */
.bf-alert {
    padding: var(--bf-space-sm) var(--bf-space-md);
    border-radius: var(--bf-radius-md);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: var(--bf-space-md);
    border-left: 3px solid;
}
.bf-alert--success {
    background: var(--bf-success-bg);
    color: var(--bf-success);
    border-left-color: var(--bf-success);
}
.bf-alert--error {
    background: var(--bf-error-bg);
    color: var(--bf-error);
    border-left-color: var(--bf-error);
}

/* =========================================================================
   GESTIONALE — PAGINA INTERNA
   ========================================================================= */
.bf-gestionale {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--bf-space-lg);
    background: var(--bf-white);
}

.bf-gestionale-header {
    margin-bottom: var(--bf-space-lg);
    /* Striscia gradiente in testa al gestionale */
    background: var(--bf-grad-subtle);
    border-radius: var(--bf-radius-lg);
    padding: var(--bf-space-lg);
    border: 1px solid rgba(241, 136, 5, 0.10);
}

.bf-gestionale-header h1 {
    font-family: var(--bf-font-titles);
    font-size: 28px;
    font-weight: 700;
    color: var(--bf-dark);
    margin: 0 0 var(--bf-space-md);
    letter-spacing: -0.3px;
}

/* Tab filtro stato */
.bf-filter-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 2px solid var(--bf-light-grey);
    flex-wrap: wrap;
}

.bf-filter-tab {
    background: transparent;
    border: none;
    padding: var(--bf-space-xs) var(--bf-space-md);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--bf-font-body);
    color: var(--bf-muted);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: var(--bf-transition);
    display: inline-flex;
    align-items: center;
    gap: var(--bf-space-xs);
    text-decoration: none;
}
.bf-filter-tab:hover {
    color: var(--bf-dark);
}
.bf-filter-tab.active {
    color: var(--bf-primary);
    border-bottom-color: var(--bf-primary);
}
.bf-filter-tab__count {
    background: var(--bf-light-grey);
    color: var(--bf-dark);
    padding: 1px 7px;
    border-radius: var(--bf-radius-pill);
    font-size: 11px;
    font-weight: 700;
}
.bf-filter-tab.active .bf-filter-tab__count {
    background: var(--bf-grad-primary);
    color: var(--bf-white);
}

/* -------------------------------------------------------------------------
   TABELLA APPUNTAMENTI
   ------------------------------------------------------------------------- */
.bf-table-wrapper {
    background: var(--bf-white);
    border: 1px solid var(--bf-light-grey);
    border-radius: var(--bf-radius-lg);
    box-shadow: var(--bf-shadow-sm);
    overflow-x: auto;
    margin-top: var(--bf-space-md);
}

.bf-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    min-width: 900px;
}

.bf-table thead {
    /* Gradiente sottile sull'header tabella */
    background: linear-gradient(90deg, #F6F2F7 0%, #fdf9f5 100%);
}

.bf-table th {
    text-align: left;
    padding: var(--bf-space-sm) var(--bf-space-md);
    font-weight: 700;
    color: var(--bf-dark);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.bf-table td {
    padding: var(--bf-space-sm) var(--bf-space-md);
    border-top: 1px solid var(--bf-light-grey);
    color: var(--bf-text);
    vertical-align: middle;
}

.bf-table tbody tr {
    transition: var(--bf-transition);
}
.bf-table tbody tr:hover {
    background: rgba(241, 136, 5, 0.03);
}

.bf-table__datetime {
    font-weight: 600;
    color: var(--bf-dark);
    white-space: nowrap;
}
.bf-table__email {
    color: var(--bf-text);
    font-size: 13px;
    word-break: break-all;
}

/* -------------------------------------------------------------------------
   BADGE DI STATO
   ------------------------------------------------------------------------- */
.bf-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: var(--bf-radius-pill);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.bf-badge--in_attesa   { background: var(--bf-warning-bg); color: #B07304; }
.bf-badge--confermato  { background: var(--bf-success-bg); color: var(--bf-success); }
.bf-badge--rischedulato{ background: var(--bf-info-bg);    color: var(--bf-info); }
.bf-badge--annullato   { background: var(--bf-muted-bg);   color: var(--bf-muted); }

/* Cella azioni */
.bf-actions-cell {
    display: flex;
    gap: var(--bf-space-xs);
    flex-wrap: wrap;
}

/* =========================================================================
   MODAL RISCHEDULAZIONE
   ========================================================================= */
.bf-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(87, 56, 59, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--bf-space-md);
    z-index: 9999;
    animation: bfFadeIn 0.2s ease;
}

.bf-modal {
    background: var(--bf-white);
    border-radius: var(--bf-radius-lg);
    box-shadow: var(--bf-shadow-lg);
    max-width: 480px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    animation: bfModalIn 0.25s ease;
}

@keyframes bfModalIn {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.bf-modal-content {
    padding: var(--bf-space-xl);
}

.bf-modal__header {
    /* Striscia gradiente nell'header del modal */
    background: var(--bf-grad-subtle);
    border-radius: var(--bf-radius-lg) var(--bf-radius-lg) 0 0;
    padding: var(--bf-space-lg) var(--bf-space-xl) var(--bf-space-md);
    margin: calc(var(--bf-space-xl) * -1) calc(var(--bf-space-xl) * -1) var(--bf-space-lg);
    border-bottom: 1px solid rgba(241, 136, 5, 0.10);
}
.bf-modal__title {
    font-family: var(--bf-font-titles);
    font-size: 20px;
    font-weight: 700;
    color: var(--bf-dark);
    margin: 0 0 var(--bf-space-xs);
}
.bf-modal__subtitle {
    font-size: 13px;
    color: var(--bf-text);
    margin: 0;
}

.bf-modal__actions {
    display: flex;
    gap: var(--bf-space-sm);
    justify-content: flex-end;
    margin-top: var(--bf-space-lg);
    padding-top: var(--bf-space-md);
    border-top: 1px solid var(--bf-light-grey);
    flex-wrap: wrap;
}

/* =========================================================================
   RESPONSIVE — adattamenti aggiuntivi
   ========================================================================= */
@media (min-width: 768px) {
    .bf-booking {
        padding: var(--bf-space-lg);
    }
    .bf-header__title {
        font-size: 28px;
        letter-spacing: .5px;
    }
    .bf-step-nav__divider {
        width: 40px;
    }
}

/* Mobile small: bottoni a tutta larghezza, label step nascoste */
@media (max-width: 480px) {
    .bf-form-actions,
    .bf-modal__actions {
        flex-direction: column-reverse;
    }
    .bf-form-actions .bf-btn,
    .bf-modal__actions .bf-btn {
        width: 100%;
    }
    .bf-header__title {
        font-size: 20px;
    }
    .bf-confirmation__title {
        font-size: 20px;
    }
    /* Mostra solo i cerchi numerati nella step nav su mobile piccolo */
    .bf-step-nav__item > span:last-child {
        display: none;
    }
    .bf-slots-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}