/*
 * ============================================================
 * RESERVATION PAGE (Free Session Booking)
 * A calm, trustworthy two-column composition: a reassurance
 * panel beside a focused booking form with a built-in success
 * state — no separate confirmation page required.
 * ============================================================
 */

body.page-reservation .mouse-grid-bg { opacity: 0.5; }

/* Top padding stands in for the removed in-page "Back to Home" link that
   used to occupy this space (that control now lives in the header — see
   js/global-nav.js) — kept large enough that the hero's own heading never
   sits under the fixed-position header pill above it. */
.reservation-hero {
    width: 100%;
    max-width: 820px;
    padding: 130px 30px 10px;
    position: relative;
    z-index: 20;
}
.reservation-hero .section-heading h1 { font-size: 30px; }
.reservation-hero .section-heading p  { font-size: 14.5px; }

.reservation-section {
    width: 100%;
    max-width: 1180px;
    padding: 40px 30px 10vh;
    position: relative;
    z-index: 20;
}

.reservation-layout {
    display: flex;
    align-items: flex-start;
    gap: 28px;
}

/* ---- Trust / info panel ---- */
.reservation-info {
    flex: 0 0 34%;
    padding: 44px 38px;
    position: sticky;
    top: 110px;
}
.reservation-info-title {
    font-family: var(--font-display-fa);
    font-size: 21px;
    font-weight: 800;
    color: var(--primary-navy);
    margin: 0 0 22px;
    line-height: 1.6;
}
.reservation-info-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0 0 30px;
    padding: 0;
    list-style: none;
}
.reservation-info-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.8;
    color: var(--ink);
    font-weight: 500;
}
.info-check {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-success-bg);
    color: var(--color-success);
}
.info-check svg { width: 14px; height: 14px; }

.reservation-info-stats {
    display: flex;
    gap: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--neutral-border);
}
.reservation-info-stats .auth-stat-num   { color: var(--primary-navy); }
.reservation-info-stats .auth-stat-label { color: var(--ink-soft); }

/* ---- Form panel ---- */
.reservation-form-panel {
    flex: 1 1 66%;
    padding: 46px 46px;
    scroll-margin-top: 110px;   /* reservation.html#reserve clears the fixed header */
}

.reservation-form { display: flex; flex-direction: column; gap: 20px; }

.reservation-submit { width: 100%; margin-top: 8px; }

.reservation-disclaimer {
    text-align: center;
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--ink-soft);
    margin: 0;
}

.success-panel .success-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 6px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
    .reservation-layout { flex-direction: column; }
    .reservation-info,
    .reservation-form-panel { flex: 1 1 auto; width: 100%; }
    .reservation-info { position: static; padding: 34px 28px; }
    .reservation-form-panel { padding: 34px 28px; }
    /* Stacked: the form comes first, right under the heading — it's what
       the visitor came for; the "what happens in this session" notes follow. */
    .reservation-form-panel { order: -1; }
}

@media (max-width: 640px) {
    .form-row { grid-template-columns: 1fr; }
    .reservation-form-panel,
    .reservation-info { padding: 28px 20px; }
}