/* ==========================================================================
   VICTORIA TERME HOTEL — BARRA PRENOTAZIONE
   Gestisce:
   - topbar, header e barra booking coordinati;
   - apertura e chiusura booking su mobile;
   - pulsante X;
   - spostamento della barra sotto il menu mobile aperto;
   - scomparsa della topbar durante lo scroll verso il basso;
   - ricomparsa della topbar durante lo scroll verso l’alto.
   ========================================================================== */

:root {
    --mobile-topbar-height: 0px;
    --mobile-nav-height: 0px;
}

/* ==========================================================================
   TOPBAR E HEADER
   ========================================================================== */

.topbar {
    position: sticky;
    top: 0;
    z-index: 1200;
}

nav {
    position: sticky;
    top: var(--mobile-topbar-height);
    z-index: 1190;
}

/* ==========================================================================
   BARRA PRENOTAZIONE
   ========================================================================== */

.booking-bar {
    position: sticky;
    top: calc(
        var(--mobile-topbar-height) +
        var(--mobile-nav-height)
    );
    z-index: 1180;

    width: 100%;
    padding: var(--space-1) var(--space-2);

    background: var(--petrolio);
    color: var(--carta);

    box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
}

.tariffa {
    margin: 0 0 .3rem;

    color: var(--pietra);
    font-size: var(--text-sm);
    line-height: 1.3;
    text-align: center;
}

/* ==========================================================================
   FORM
   ========================================================================== */

.bb-form {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: center;

    gap: var(--space-1);
    max-width: var(--maxw);
    margin: 0 auto;
}

.bb-form label {
    display: flex;
    flex-direction: column;
    gap: .15rem;

    font-size: var(--text-sm);
}

.bb-form input,
.bb-form select {
    padding: .45rem .6rem;

    border: none;
    border-radius: var(--radius);

    font-family: var(--testo);
    font-size: var(--text-sm);
}

.bb-form button,
.mobile-booking-toggle {
    padding: .55rem 1.4rem;

    border: none;
    border-radius: var(--radius);

    background: var(--oro);
    color: var(--inchiostro);

    font-family: var(--testo);
    font-size: var(--text-base);
    font-weight: 700;

    cursor: pointer;
}

.bb-form button:hover,
.mobile-booking-toggle:hover {
    background: var(--carta);
}

/* Pulsanti mobile nascosti su desktop */
.mobile-booking-toggle,
.mobile-booking-close {
    display: none;
}

/* ==========================================================================
   VERSIONE MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    /* ------------------------------------------------------
       TOPBAR DINAMICA
       ------------------------------------------------------ */

    .topbar {
        transform: translateY(0);
        transition: transform .28s ease;
        will-change: transform;
    }

    /*
     * Scorrendo verso il basso:
     * la topbar sparisce.
     */
    body.mobile-scroll-down .topbar {
        transform: translateY(-100%);
    }

    /*
     * Quando la topbar sparisce,
     * l’header sale in cima.
     */
    body.mobile-scroll-down nav {
        top: 0;
    }

    /*
     * Quando la topbar sparisce,
     * la barra booking sale sotto l’header.
     */
    body.mobile-scroll-down
    .booking-bar:not(.booking-inside-menu) {
        top: var(--mobile-nav-height);
    }

    /*
     * Con il menu mobile aperto,
     * la topbar deve sempre rimanere visibile.
     */
    body.mobile-menu-open .topbar {
        transform: translateY(0);
    }

    body.mobile-menu-open nav {
        top: var(--mobile-topbar-height);
    }

    /* ------------------------------------------------------
       BARRA BOOKING
       ------------------------------------------------------ */

    .booking-bar {
        padding: .55rem 1rem;
        background: var(--petrolio);
    }

    .tariffa {
        margin: 0 0 .45rem;

        color: var(--carta);
        font-size: .9rem;
        line-height: 1.25;
    }

    /* Pulsante iniziale */
    .mobile-booking-toggle {
        display: block;

        width: 100%;
        min-height: 48px;
        padding: .7rem 1rem;
    }

    .mobile-booking-toggle:focus-visible,
    .mobile-booking-close:focus-visible {
        outline: 2px solid var(--carta);
        outline-offset: 2px;
    }

    /* Form nascosto inizialmente */
    #sb-container {
        display: none;
        margin-top: .55rem;
    }

    /* Form visibile dopo il clic */
    .booking-bar.mobile-open #sb-container {
        display: block;
    }

    /* Nasconde il pulsante iniziale */
    .booking-bar.mobile-open .mobile-booking-toggle {
        display: none;
    }

    /*
     * Quando il booking è aperto,
     * rimane sticky.
     * Il padding crea solo lo spazio per la X.
     */
    .booking-bar.mobile-open {
        padding-top: 3rem;
    }

    /* ------------------------------------------------------
       PULSANTE X
       ------------------------------------------------------ */

    .mobile-booking-close {
        display: none;

        position: absolute;
        top: .55rem;
        right: .7rem;
        z-index: 10;

        align-items: center;
        justify-content: center;

        width: 36px;
        height: 36px;
        padding: 0;

        border: 1px solid rgba(255, 255, 255, .55);
        border-radius: 50%;

        background: transparent;
        color: var(--carta);

        font-family: Arial, sans-serif;
        font-size: 1.6rem;
        font-weight: 400;
        line-height: 1;

        cursor: pointer;
    }

    .booking-bar.mobile-open .mobile-booking-close {
        display: flex;
    }

    .mobile-booking-close:hover {
        background: var(--carta);
        color: var(--petrolio);
    }

    /* ------------------------------------------------------
       FORM MOBILE
       ------------------------------------------------------ */

    .bb-form {
        gap: .4rem;
    }

    .bb-form button {
        width: 100%;
    }

    /* ------------------------------------------------------
       BOOKING DENTRO IL MENU
       ------------------------------------------------------ */

    /*
     * Quando lo script sposta la barra sotto
     * l’ultima voce del menu, non deve essere sticky.
     */
    .booking-bar.booking-inside-menu {
        position: relative;
        top: auto;

        width: 100%;
        margin: 0;

        box-shadow: 0 3px 10px rgba(0, 0, 0, .12);
    }

    /*
     * Anche quando il form viene aperto
     * dentro il menu, resta nella posizione naturale.
     */
    .booking-bar.booking-inside-menu.mobile-open {
        position: relative;
        top: auto;
    }
}