/* ═══════════════════════════════════════════════════════════════════════
   BookingV2 Mammoth — Modal integration & brand overrides
   The booking form lives inside a Foundation Reveal (#booking_modal).
   On Mammoth we override the side-drawer positioning so it behaves
   as an inline panel within the reveal, then re-apply mobile bottom
   sheet behavior.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Foundation Reveal shell ───────────────────────────────────────── */
#booking_modal.reveal {
    width: auto !important;
    max-width: 420px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: transparent !important;
    z-index: 2147483640 !important;
    pointer-events: none;
}
#booking_modal.reveal[aria-hidden="false"],
#booking_modal.reveal.is-open {
    pointer-events: auto;
}
#booking_modal + .reveal-overlay,
#booking_modal ~ .reveal-overlay {
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    z-index: 2147483639 !important;
}

/* ── BookingBox inside modal — override side-drawer positioning ─────  */
#booking_modal #bookingBox {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 80vh !important;
    max-height: 640px !important;
    transform: none !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15) !important;
}
#booking_modal #bookingBox.show {
    width: 100% !important;
    max-width: 100% !important;
}

/* Hide the side-drawer overlay when embedded in Foundation modal */
#booking_modal #overlay-bookingBox {
    display: none !important;
}

/* ── Brand colors (Mammoth orange) ─────────────────────────────────── */
#bookingBox .btn-book-now {
    background: #ff6600 !important;
}
#bookingBox .btn-book-now:hover {
    background: #e65c00 !important;
}
#bookingBox .btn-book-now:active {
    background: #cc5200 !important;
}

#bookingBox .booking-date-summary .date-chip {
    background: #fff3e8 !important;
    color: #d45500 !important;
    border-color: #ffe0c2 !important;
}

#bookingBox .booking-qty-btn {
    color: #ff6600 !important;
}

/* Calendar selection colors */
#bookingBox .ui-datepicker-calendar .datepicker-start-date a,
#bookingBox .ui-datepicker-calendar .datepicker-start-date span,
#bookingBox .ui-datepicker-calendar .ui-datepicker-current-day .ui-state-active {
    background: #ff6600 !important;
    color: #ffffff !important;
}
#bookingBox .ui-datepicker-calendar .datepicker-date-range a,
#bookingBox .ui-datepicker-calendar .datepicker-date-range span {
    background: #fff3e8 !important;
    color: #d45500 !important;
}
#bookingBox .ui-datepicker-calendar .ui-state-hover {
    background: #fff3e8 !important;
    color: #d45500 !important;
}
#bookingBox .ui-datepicker-days-cell-over .ui-state-default {
    background: #fff3e8 !important;
    color: #d45500 !important;
}
#bookingBox .datepicker-start-date.datepicker-date-range a {
    background: #ff6600 !important;
    color: #ffffff !important;
}

/* Tab active state */
#bookingBox .booking-tabs-wrap button.active {
    color: #1a1a1a !important;
}

/* ── Extras tooltip ────────────────────────────────────────────────── */
#bookingBox .extras-tooltip {
    color: #ff6600 !important;
}

/* ── Mobile — keep header visible above modal ─────────────────────── */
@media screen and (max-width: 767px) {
    .mobile-header-nav-module--mobileHeaderNav--uu1ct {
        z-index: 2147483645 !important;
        position: sticky !important;
        top: 0 !important;
    }
}

/* ── Mobile — full-screen bottom sheet inside modal ────────────────── */
@media screen and (max-width: 767px) {
    #booking_modal.reveal {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        border-radius: 12px 12px 0 0 !important;
        min-height: 0 !important;
    }

    #booking_modal #bookingBox {
        height: calc(100vh - 60px) !important;
        max-height: none !important;
        border-radius: 12px 12px 0 0 !important;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15) !important;
    }

    #bookingBox .booking-header {
        padding: 10px 12px 6px !important;
    }
    #bookingBox .booking-header .closebtn {
        top: 8px !important;
        right: 8px !important;
        width: 32px !important;
        height: 32px !important;
        font-size: 22px !important;
    }

    #bookingBox .booking-body {
        padding: 0 12px 8px !important;
    }

    #bookingBox .booking-footer {
        padding: 8px 12px !important;
        padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
    }

    #bookingBox .btn-book-now {
        padding: 13px !important;
        font-size: 15px !important;
        border-radius: 8px !important;
    }

    #bookingBox .ui-datepicker-calendar td span,
    #bookingBox .ui-datepicker-calendar td a {
        width: 34px !important;
        height: 34px !important;
        font-size: 12px !important;
    }
}

/* Very small phones */
@media screen and (max-width: 360px) {
    #bookingBox .ui-datepicker-calendar td span,
    #bookingBox .ui-datepicker-calendar td a {
        width: 30px !important;
        height: 30px !important;
        font-size: 11px !important;
    }
    #bookingBox .booking-tabs-wrap button {
        font-size: 11px !important;
        padding: 6px 6px !important;
    }
}