/* =========================================================
   MOBILE FLOATING BOOKING BAR
   ========================================================= */

.mobile-booking-bar {
    display: none;
}


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

@media (max-width: 700px) {

    .mobile-booking-bar {

        position: fixed;

        left: 10px;
        right: 10px;
        bottom: 10px;

        z-index: 999;

        display: flex;
        align-items: center;

        gap: 7px;

        padding: 7px 8px 7px 11px;

        background: rgba(255, 255, 255, 0.88);

        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);

        border: 1px solid rgba(255, 255, 255, 0.7);

        border-radius: 14px;

        box-shadow:
            0 5px 20px rgba(0, 0, 0, 0.12);

    }


    /* =====================================================
       PRICE
       ===================================================== */

    .mobile-booking-price {

        flex: 1;
        min-width: 0;

    }


    .mobile-booking-label {

        display: block;

        margin: 0 0 1px;

        color: var(--color-text-muted);

        font-family: var(--font-family);

        font-size: 8px;

        font-weight: 700;

        line-height: 1.1;

        letter-spacing: 0.3px;

    }


    .mobile-booking-price-row {

        display: flex;

        align-items: baseline;

        gap: 3px;

        white-space: nowrap;

    }


    .mobile-booking-price-row strong {

        color: var(--color-text);

        font-family: var(--font-family);

        font-size: 17px;

        font-weight: 800;

        line-height: 1.1;

    }


    .mobile-booking-price-row span {

        color: var(--color-text-muted);

        font-family: var(--font-family);

        font-size: 9px;

        font-weight: 500;

        line-height: 1.1;

    }


    /* =====================================================
       BOOK NOW
       ===================================================== */

    .mobile-booking-button {

        display: inline-flex;

        align-items: center;

        justify-content: center;

        flex: 0 0 auto;

        min-height: 36px;

        padding: 0 13px;

        border: 0;

        border-radius: 9px;

        background: var(--color-primary);

        color: #ffffff;

        font-family: var(--font-family);

        font-size: 11px;

        font-weight: 700;

        line-height: 1;

        text-decoration: none;

        white-space: nowrap;

        box-shadow: none !important;

        outline: none;

        transition:
            background var(--transition-fast),
            transform var(--transition-fast);

    }


    .mobile-booking-button:hover {

        color: #ffffff;

        box-shadow: none !important;

    }


    .mobile-booking-button:focus,
    .mobile-booking-button:focus-visible {

        color: #ffffff;

        box-shadow: none !important;

        outline: none;

    }


    .mobile-booking-button:active {

        color: #ffffff;

        box-shadow: none !important;

        outline: none;

        transform: scale(0.97);

    }


    /* =====================================================
       WHATSAPP
       ===================================================== */

    .mobile-booking-whatsapp {

        display: inline-flex;

        align-items: center;

        justify-content: center;

        flex: 0 0 36px;

        width: 36px;
        height: 36px;

        border: 0;

        border-radius: 9px;

        background: rgba(37, 211, 102, 0.92);

        color: #ffffff;

        text-decoration: none;

        font-size: 17px;

        line-height: 1;

        box-shadow: none;

        outline: none;

        transition:
            transform var(--transition-fast);

    }


    .mobile-booking-whatsapp:hover {

        color: #ffffff;

        box-shadow: none;

    }


    .mobile-booking-whatsapp:focus,
    .mobile-booking-whatsapp:focus-visible {

        color: #ffffff;

        box-shadow: none;

        outline: none;

    }


    .mobile-booking-whatsapp:active {

        color: #ffffff;

        box-shadow: none;

        outline: none;

        transform: scale(0.94);

    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {

    .mobile-booking-bar {

        left: 8px;
        right: 8px;
        bottom: 8px;

        gap: 6px;

        padding:
            6px
            7px
            6px
            10px;

        border-radius: 13px;

    }


    .mobile-booking-label {

        font-size: 7px;

    }


    .mobile-booking-price-row {

        gap: 2px;

    }


    .mobile-booking-price-row strong {

        font-size: 16px;

    }


    .mobile-booking-price-row span {

        font-size: 8px;

    }


    .mobile-booking-button {

        min-height: 34px;

        padding: 0 12px;

        font-size: 10px;

        border-radius: 8px;

    }


    .mobile-booking-whatsapp {

        flex-basis: 34px;

        width: 34px;
        height: 34px;

        font-size: 16px;

        border-radius: 8px;

    }

}