/*
 * Modal overlay + content styles.
 *
 * Two scrolling strategies coexist:
 *   1. `.modal-overlay` is the outer fixed-position dimmed backdrop. Its
 *      `overflow-y: auto` lets the modal box scroll within the viewport
 *      on tall content.
 *   2. `.modal-content` ALSO clamps itself to `max-height: 90vh` and
 *      scrolls internally. This keeps the close button reachable on
 *      mobile when forms get long (booking, signup), instead of the
 *      old `margin-bottom: 5rem` hack that often left controls below
 *      the iOS safe area.
 */

.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2000;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    /* Respect the iOS safe areas so the backdrop is uniform on notched
       devices and modal content doesn't slip under the home indicator. */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

/* Prevents body scroll when modal is open without the 'fixed' jump */
.modal-open-lock {
    overflow: hidden !important;
    height: 100vh !important;
    width: 100% !important;
}

.modal-content {
    margin-top: 2rem;
    margin-bottom: 2rem;
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Add iOS safe-area padding inside the modal so the last form field
       isn't covered by the home indicator on notched phones. */
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

.modal-close {
    cursor: pointer;
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 24px;
    color: #666;
}

@media (max-width: 640px) {
    .modal-content {
        margin: 0.5rem auto;
        padding: 1rem;
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
        /* On very small phones (iPhone SE etc) clamp tighter so the
           close button is reachable above the keyboard when a field
           is focused. */
        max-height: calc(100vh - 1rem);
    }
}