/* ============================================================
   Rhino Thai Boxing Gym — Booking popup (theme-level fallback)
   Styles the hidden modal (#rhino-booking-modal) output by
   inc/booking-popup.php and toggled by assets/js/rhino-booking.js.
   This is the functional fallback for the Elementor Pro Popup; it
   reuses the dark combat-sports tokens from tokens.css. (Req 14)
   ============================================================ */

.rhino-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-slow, 300ms) ease, visibility var(--dur-slow, 300ms) ease;
}

/* Open state — toggled by rhino-booking.js (the `hidden` attribute is also
   removed so the modal is exposed to assistive tech). */
.rhino-modal.is-open {
    opacity: 1;
    visibility: visible;
}

/* Lock background scroll while the modal is open. */
body.rhino-modal-open {
    overflow: hidden;
}

.rhino-modal__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(2px);
    cursor: pointer;
}

.rhino-modal__dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 640px;
    margin: 48px auto;
    transform: translateY(16px);
    transition: transform var(--dur-slow, 300ms) ease;
}

.rhino-modal.is-open .rhino-modal__dialog {
    transform: translateY(0);
}

.rhino-modal__close {
    position: absolute;
    top: -14px;
    right: -8px;
    z-index: 2;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: var(--radius-full, 9999px);
    background: var(--brand, #E59744);
    color: #000;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur-base, 200ms) ease, transform var(--dur-base, 200ms) ease;
}

.rhino-modal__close:hover {
    background: var(--brand-vivid, #F36E36);
    transform: scale(1.06);
}

/* The hosted .rhino-booking card already carries card styling from the
   widget CSS; ensure it fills the dialog and scrolls if very tall. */
.rhino-modal__body .rhino-booking {
    width: 100%;
}

/* Mobile band (≤767, down to 320): full-bleed modal so the dialog never
   exceeds the viewport width. */
@media (max-width: 767px) {
    .rhino-modal {
        padding: 0;
    }
    .rhino-modal__dialog {
        margin: 0;
        min-height: 100%;
    }
    .rhino-modal__close {
        top: 10px;
        right: 10px;
    }
}