/* ===========================================================================
   KORDYLÓWKA — reservation modals (light warm editorial)
   Loads AFTER style.css, so selectors here win ties by source order.

   The old viewport-gated .glass panel system is gone: content sits on warm
   paper rather than translucent cards, so there is no fleet of
   backdrop-filter layers compositing over the scrubbing film. The only
   remaining blurred surfaces are the nav, the hero award badge and the mobile
   call bar — three small fixed elements, never more than that on screen.
   (The old blurred benefit cards are gone: section 13 is now an editorial
   showcase on paper.)
   =========================================================================== */

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(1rem, 5vh, 4rem) 1rem;
    overflow-y: auto;
    background: rgba(28, 22, 17, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    /* `visibility` is deliberately NOT interpolated: on open it must flip in the
       same style recalc, or the dialog is still `hidden` when JS calls focus()
       and the focus silently goes nowhere. The 0s delay on close keeps the
       fade-out graceful — visibility waits until the opacity transition ends. */
    transition: opacity var(--dur) var(--ease),
                visibility 0s linear var(--dur);
}

.modal-overlay.open {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--dur) var(--ease),
                visibility 0s linear 0s;
}

/* The dialog is focused on open (tabindex="-1"); it should not draw a ring. */
.modal:focus { outline: none; }

.modal {
    position: relative;
    width: 100%;
    max-width: 560px;
    background: var(--paper-lift);
    border: 1px solid var(--rule);
    box-shadow: 0 40px 90px rgba(36, 28, 21, 0.28);
    padding: clamp(2rem, 4vw, 3rem);
    transform: translateY(12px);
    transition: transform var(--dur) var(--ease);
}

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

.modal .eyebrow { margin-bottom: 1rem; }

.modal h3 {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3.5vw, 2.375rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.015em;
    margin-bottom: 0.875rem;
}

.modal-sub {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--ink-2);
    margin-bottom: 2rem;
    max-width: 44ch;
}

.modal-close {
    position: absolute;
    top: 0.875rem;
    right: 0.875rem;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--ink-3);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.modal-close:hover { color: var(--ink); border-color: var(--rule); }

.modal-method-call { margin-bottom: 0; }

.modal-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.75rem 0;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.modal-divider::before,
.modal-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--rule);
}

/* ------------------------------------------------------------------ Form */
.res-form { display: flex; flex-direction: column; gap: 1rem; }

.field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    font-family: var(--font);
    font-size: 0.9375rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--rule-strong);
    border-radius: 0;
    padding: 0.625rem 0;
    transition: border-color var(--dur) var(--ease);
}

.field textarea { resize: vertical; line-height: 1.6; }

.field input::placeholder,
.field textarea::placeholder { color: var(--ink-3); }

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-bottom-color: var(--orange);
}

.field select option { background: var(--paper-lift); color: var(--ink); }
.field input[type="date"],
.field input[type="time"] { color-scheme: light; }

.res-form .btn { margin-top: 0.75rem; }

.form-note {
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--ink-3);
    text-align: center;
}

@media (max-width: 560px) {
    .field-row { grid-template-columns: 1fr; }
}