/* overlay.css — mobiele sheet-presentatie voor overlay.js.
 *
 * Alleen actief wanneer een overlay met `mobileSheet: true` op ≤600px opent.
 * Het panel zelf (date-popover, guests-popup, …) houdt z'n eigen theming;
 * deze regels regelen enkel de plaatsing als full-width bottom-sheet + de
 * verduisterende backdrop eronder.
 *
 * Defaults in @layer mm — unlayered site-CSS wint altijd.
 */

@layer mm {
    :root {
        --overlay-backdrop:        rgba(8, 12, 20, .5);
        --overlay-sheet-radius:    var(--radius-lg, 16px);
        --overlay-sheet-max-h:     85vh;
    }
}

/* ── Backdrop ───────────────────────────────────────────────────────────── */

.overlay-backdrop {
    position: fixed;
    inset: 0;
    background: var(--overlay-backdrop);
    opacity: 0;
    transition: opacity .22s ease;
    -webkit-tap-highlight-color: transparent;
}

.overlay-backdrop.is-open {
    opacity: 1;
}

/* ── Sheet (panel als full-width bottom-sheet) ──────────────────────────── */

/* Dubbele class = specificiteit 0,2,0 zodat de plaatsing wint van een
 * single-class panel-regel (bv. `.date-popover { position: relative }`)
 * ongeacht CSS-laadvolgorde — zonder !important. */
.overlay-sheet.overlay-sheet {
    position: fixed;
    /* Zwevend: wat lucht rondom i.p.v. rand-tot-rand. */
    left: 10px;
    right: 10px;
    bottom: 10px;
    top: auto;
    width: auto;
    max-width: 100%;
    min-width: 0;
    /* Eigen scroll binnenin; sheet-hoogte begrensd zodat de duim-zone vrij
     * blijft en de inhoud nooit onder de viewport-rand verdwijnt. */
    max-height: var(--overlay-sheet-max-h);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Zwevende kaart: alle hoeken rond. */
    border-radius: var(--overlay-sheet-radius);
    /* Safe-area (iPhone home-indicator) onderaan respecteren. */
    padding-bottom: max(env(safe-area-inset-bottom, 0px), .5rem);
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .25);
    transform: translateY(100%);
    transition: transform .26s cubic-bezier(.32, .72, 0, 1);
}

.overlay-sheet.overlay-sheet.is-open {
    transform: translateY(0);
}

/* Sluit-affordance: greep bovenaan de sheet. */
.overlay-sheet::before {
    content: "";
    display: block;
    width: 2.25rem;
    height: .28rem;
    margin: .5rem auto .25rem;
    border-radius: 999px;
    background: var(--color-border-strong, rgba(128, 128, 128, .55));
    flex: none;
}

@media (prefers-reduced-motion: reduce) {
    .overlay-backdrop,
    .overlay-sheet {
        transition: none;
    }
}