/* ─────────────────────────────────────────────
   RESERVATION WIZARD
   Depends on the root CSS variables already set
   by the layout (--cyan, --pink, --purple, etc.)
───────────────────────────────────────────── */

/* ── Page shell ── */
.reservation-page {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: var(--bg);
    color: rgba(255,255,255,0.88);
    font-family: var(--body);
}
.reservation-page::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,240,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,240,255,0.025) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 0;
}
.reservation-page::after {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 15% 80%, rgba(153,0,255,0.08) 0%, transparent 70%),
        radial-gradient(ellipse 50% 40% at 85% 20%, rgba(0,240,255,0.07) 0%, transparent 70%),
        radial-gradient(ellipse 40% 50% at 50% 110%, rgba(255,0,102,0.05) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

/* ── Wizard shell ── */
.wizard {
    position: fixed;
    top: var(--nav-h, 58px);
    left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1;
}

/* ─────────────────────────────────────────────
   TOP NAV
───────────────────────────────────────────── */
.top-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    background: rgba(4,4,12,0.88);
    border-bottom: 1px solid rgba(0,240,255,0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.top-nav .nav-links {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.nav-brand {
    font-family: var(--hud);
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--cyan);
    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;
    text-shadow: 0 0 18px rgba(0,240,255,0.5);
}
.nav-links {
    display: flex;
    align-items: center;
    gap: 2rem;
    list-style: none;
}
.nav-links a {
    font-family: var(--hud);
    font-size: 0.72rem;
    font-weight: 400;
    color: rgba(200,208,224,0.7);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.2s;
}
.nav-links a:hover { color: #fff; }
.nav-active-label {
    font-family: var(--hud);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--cyan);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: default;
    text-shadow: 0 0 10px rgba(0,240,255,0.4);
}
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}
.mobile-menu-btn span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--cyan);
    transition: transform 0.25s, opacity 0.25s;
}
.mobile-menu-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-btn.open span:nth-child(2) { opacity: 0; }
.mobile-menu-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-nav-drawer {
    display: none;
    position: fixed;
    top: 58px; left: 0; right: 0;
    z-index: 99;
    flex-direction: column;
    background: rgba(4,4,12,0.97);
    border-bottom: 1px solid rgba(0,240,255,0.15);
    padding: 1rem 2rem;
    gap: 1.1rem;
}
.mobile-nav-drawer.open { display: flex; }
.mobile-nav-drawer a {
    font-family: var(--hud);
    font-size: 0.78rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(200,208,224,0.75);
    text-decoration: none;
}
.mobile-nav-drawer a:hover { color: var(--cyan); }
@media (max-width: 768px) {
    .nav-links       { display: none; }
    .top-nav         { padding: 0 1rem; }
    .mobile-menu-btn { display: flex; }
}

/* ─────────────────────────────────────────────
   STEP INDICATOR BAR
───────────────────────────────────────────── */
.step-bar {
    flex-shrink: 0;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    border-bottom: 1px solid rgba(0,240,255,0.2);
    box-shadow: 0 1px 30px rgba(0,240,255,0.06);
    background: rgba(6,6,15,0.85);
    position: relative;
    z-index: 10;
}
.step-item {
    display: flex;
    align-items: center;
    gap: 0;
}
.step-dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    cursor: default;
    transition: opacity 0.2s;
}
.step-dot.clickable { cursor: pointer; }
.step-dot.clickable:hover { opacity: 0.8; }
.step-ring {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--hud);
    font-size: 0.9rem;
    font-weight: 900;
    color: rgba(255,255,255,0.25);
    transition: all 0.4s ease;
    position: relative;
}
.step-ring svg {
    position: absolute;
    width: 40px; height: 40px;
    top: -1px; left: -1px;
    pointer-events: none;
}
.step-ring svg circle {
    fill: none;
    stroke: var(--green);
    stroke-width: 1.5;
    stroke-dasharray: 119.4;
    stroke-dashoffset: 119.4;
    transition: stroke-dashoffset 0.5s ease;
    transform: rotate(-90deg);
    transform-origin: center;
}
.step-label {
    font-family: var(--hud);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.28);
    text-transform: uppercase;
    white-space: nowrap;
    transition: color 0.4s ease;
}
.step-line {
    width: 120px;
    height: 1px;
    background: rgba(255,255,255,0.1);
    margin-bottom: 22px;
    position: relative;
    overflow: hidden;
}
.step-line::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, var(--green), var(--cyan));
    transform: translateX(-100%);
    transition: transform 0.5s ease 0.1s;
}
.step-item.active   .step-ring { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 20px rgba(0,240,255,0.5), inset 0 0 12px rgba(0,240,255,0.08); }
.step-item.active   .step-label { color: var(--cyan); text-shadow: 0 0 10px rgba(0,240,255,0.5); }
.step-item.done     .step-ring { border-color: var(--green); color: var(--green); box-shadow: 0 0 16px rgba(0,255,136,0.4); background: rgba(0,255,136,0.07); }
.step-item.done     .step-ring svg circle { stroke-dashoffset: 0; }
.step-item.done     .step-label { color: var(--green); }
.step-item.done + .step-item .step-line::after,
.step-line.filled::after { transform: translateX(0); }

/* ─────────────────────────────────────────────
   PANELS
───────────────────────────────────────────── */
.panels-track {
    flex: 1;
    overflow: hidden;
    position: relative;
}
.panels-inner {
    display: flex;
    width: 500%;
    height: 100%;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.panel {
    width: 20%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.75rem 3rem 1.5rem;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,240,255,0.2) transparent;
}
.panel::-webkit-scrollbar { width: 4px; }
.panel::-webkit-scrollbar-thumb { background: rgba(0,240,255,0.2); border-radius: 2px; }

.panel-eyebrow {
    font-family: var(--hud);
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    color: var(--green);
    text-transform: uppercase;
    margin-bottom: 0.3rem;
    flex-shrink: 0;
    text-shadow: 0 0 12px rgba(0,255,136,0.45);
}
.panel-title {
    font-family: var(--hud);
    font-size: clamp(1.15rem, 2.2vw, 1.7rem);
    font-weight: 900;
    color: #fff;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.1;
    flex-shrink: 0;
    text-shadow: 0 0 30px rgba(255,255,255,0.1);
}
.panel-title em { font-style: normal; color: var(--cyan); text-shadow: 0 0 20px rgba(0,240,255,0.5); }
.panel-sub {
    font-size: 0.92rem;
    color: rgba(255,255,255,0.5);
    margin-top: 0.4rem;
    margin-bottom: 10px;
    flex-shrink: 0;
}

/* ── Selection summary strip ── */
.sel-strip {
    display: flex;
    align-items: center;
    padding: 0.65rem 1.25rem;
    background: rgba(0,240,255,0.05);
    border: 1px solid rgba(0,240,255,0.18);
    border-left: 3px solid var(--cyan);
    box-shadow: 0 0 20px rgba(0,240,255,0.05), inset 0 0 20px rgba(0,240,255,0.02);
    margin-bottom: 1.25rem;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 0.25rem 0;
}
.sel-chip {
    display: flex;
    flex-direction: column;
    padding: 0 1rem;
    border-right: 1px solid rgba(255,255,255,0.1);
}
.sel-chip:first-child { padding-left: 0; }
.sel-chip:last-child  { border-right: none; }
.sel-chip-label {
    font-family: var(--hud);
    font-size: 0.56rem;
    letter-spacing: 0.16em;
    color: rgba(255,255,255,0.38);
    text-transform: uppercase;
}
.sel-chip-value {
    font-family: var(--hud);
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--cyan);
    letter-spacing: 0.06em;
    text-shadow: 0 0 8px rgba(0,240,255,0.4);
}

/* ── Panel nav buttons ── */
.panel-nav {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 1.25rem 3rem;
    margin-top: auto;
    margin-left: -3rem;
    margin-right: -3rem;
    margin-bottom: -1.5rem;
    background: rgba(6,6,15,0.85);
    border-top: 1px solid rgba(0,240,255,0.2);
    box-shadow: 0 -1px 30px rgba(0,240,255,0.06);
}
.btn-back {
    font-family: var(--hud);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.38);
    background: none;
    border: 1px solid rgba(255,255,255,0.14);
    cursor: pointer;
    padding: 0.7rem 1.6rem;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}
.btn-back:hover { color: rgba(255,255,255,0.8); border-color: rgba(255,255,255,0.3); }
.btn-next {
    font-family: var(--hud);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--cyan);
    background: transparent;
    border: 1.5px solid var(--cyan);
    cursor: pointer;
    padding: 0.85rem 3rem;
    transition: box-shadow 0.25s, color 0.2s, background 0.2s, opacity 0.2s;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}
.btn-next:hover {
    background: rgba(0,240,255,0.08);
    box-shadow: 0 0 24px rgba(0,240,255,0.3);
}

.btn-next:disabled {
    background: transparent;
    border-color: rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.2);
    cursor: not-allowed;
    box-shadow: none;
}

/* ─────────────────────────────────────────────
   STEP 1 — PACKAGE
───────────────────────────────────────────── */
.pkg-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin: auto 0;
}
.package-grid {
    display: grid;
    grid-template-columns: 290px 290px;
    gap: 2rem;
    align-items: center;
    justify-content: center;
    margin: auto;
    padding: 1rem 0;
}
.pkg-card {
    background: rgba(0,240,255,0.04);
    border: 1px solid rgba(0,240,255,0.3);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s, box-shadow 0.3s, background 0.3s, border-width 0.1s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 3rem 2rem;
    height: 100%;
}
.pkg-card::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    background: radial-gradient(ellipse at center, rgba(0,240,255,0.12) 0%, transparent 70%);
    transition: opacity 0.4s;
}
.pkg-card:hover { border-color: rgba(0,240,255,0.65); box-shadow: 0 0 30px rgba(0,240,255,0.15); }
.pkg-card:hover::before { opacity: 1; }
.pkg-card.selected { border: 2px solid var(--cyan); background: rgba(0,240,255,0.12); box-shadow: 0 0 60px rgba(0,240,255,0.3), inset 0 0 40px rgba(0,240,255,0.08); }
.pkg-card.selected::before { opacity: 1; }
.pkg-hours {
    font-family: var(--hud);
    font-size: clamp(4rem, 6vw, 6rem);
    font-weight: 900;
    color: var(--cyan);
    letter-spacing: -0.04em;
    line-height: 0.9;
    transition: color 0.3s, text-shadow 0.3s;
}
.pkg-hours .pkg-hr { font-size: 0.35em; letter-spacing: 0.05em; vertical-align: middle; }
.pkg-card:hover .pkg-hours { text-shadow: 0 0 30px rgba(0,240,255,0.5); }
.pkg-card.selected .pkg-hours { text-shadow: 0 0 40px rgba(0,240,255,0.7); }
.pkg-unit {
    font-family: var(--hud);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    color: rgba(255,255,255,0.55);
    text-transform: uppercase;
    text-align: center;
}
.pkg-card.selected .pkg-unit { color: rgba(255,255,255,0.8); }
.pkg-word {
    font-family: var(--hud);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
    text-align: center;
    margin-top: 0.15rem;
    margin-bottom: -0.35rem;
}
.pkg-card.selected .pkg-word { color: rgba(255,255,255,0.75); }
.pkg-price {
    font-family: var(--hud);
    font-size: 2rem;
    font-weight: 900;
    color: var(--cyan);
    letter-spacing: -0.02em;
    text-shadow: 0 0 18px rgba(0,240,255,0.4);
    line-height: 1;
    margin-top: 0.5rem;
}
.pkg-price sup { font-size: 0.9rem; vertical-align: top; margin-top: 0.35rem; display: inline-block; }
.pkg-check {
    font-family: var(--hud);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(0,240,255,0);
    margin-top: 0.5rem;
    transition: color 0.3s;
}
.pkg-card.selected .pkg-check { color: var(--cyan); text-shadow: 0 0 12px rgba(0,240,255,0.6); }

/* ─────────────────────────────────────────────
   STEP 2 — DATE & TIME
───────────────────────────────────────────── */
.datetime-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    flex: 1;
    min-height: 0;
}
.cal-col, .slots-col {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.cal-nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.9rem;
    flex-shrink: 0;
}
.cal-month-label {
    font-family: var(--hud);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 0 0 14px rgba(255,255,255,0.2);
}
.cal-nav-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.55);
    font-family: var(--hud);
    font-size: 0.68rem;
    padding: 0.4rem 0.9rem;
    cursor: pointer;
    letter-spacing: 0.1em;
    transition: all 0.2s;
}
.cal-nav-btn:hover { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 12px rgba(0,240,255,0.2); }
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    flex: 1;
    align-content: start;
    overflow-y: auto;
    scrollbar-width: none;
}
.cal-hd {
    font-family: var(--hud);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.35);
    text-align: center;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cal-day {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--hud);
    font-size: 1rem;
    font-weight: 700;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.18s ease;
    position: relative;
    height: 38px;
}
.cal-day.empty    { pointer-events: none; }
.cal-day.past     { color: rgba(255,255,255,0.14); pointer-events: none; }
.cal-day.today    { color: var(--yellow); text-shadow: 0 0 10px rgba(255,230,0,0.5); }
.cal-day.avail    { color: rgba(255,255,255,0.8); border-color: rgba(255,255,255,0.08); }
.cal-day.avail:hover { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 14px rgba(0,240,255,0.25); background: rgba(0,240,255,0.04); }
.cal-day.reserved { color: rgba(255,80,80,0.45); border-color: rgba(255,50,50,0.12); pointer-events: none; text-decoration: line-through; }
.cal-day.selected { border-color: var(--cyan); background: rgba(0,240,255,0.15); color: var(--cyan); box-shadow: 0 0 18px rgba(0,240,255,0.4); text-shadow: 0 0 8px rgba(0,240,255,0.5); }
.cal-day.has-dot::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 6px var(--red);
}

/* Time slots */
.slots-col-inner { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.slots-section-label {
    font-family: var(--hud);
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    color: var(--cyan);
    text-shadow: 0 0 10px rgba(0,240,255,0.4);
    text-transform: uppercase;
    margin-bottom: 0.85rem;
    flex-shrink: 0;
}
.slots-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    opacity: 0.4;
}
.slots-placeholder-icon { font-size: 3rem; line-height: 1; }
.slots-placeholder p {
    font-family: var(--hud);
    font-size: 0.65rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: center;
    color: rgba(255,255,255,0.6);
}
.slots-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.55rem;
    flex: 1;
    align-content: start;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,240,255,0.2) transparent;
}
.slot-btn {
    font-family: var(--hud);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.7rem 0.3rem;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.12);
    cursor: pointer;
    color: rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.02);
    transition: all 0.18s ease;
    line-height: 1.3;
}
.slot-btn.avail:hover  { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 14px rgba(0,240,255,0.25); background: rgba(0,240,255,0.06); }
.slot-btn.reserved     { color: rgba(255,80,80,0.35); border-color: rgba(255,50,50,0.1); cursor: not-allowed; text-decoration: line-through; }
.slot-btn.selected     { background: rgba(0,240,255,0.15); border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 18px rgba(0,240,255,0.4); text-shadow: 0 0 8px rgba(0,240,255,0.5); }
.slot-loading {
    font-family: var(--hud);
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    color: rgba(255,255,255,0.35);
    text-transform: uppercase;
    text-align: center;
    padding: 2rem 0;
    flex: 1;
}

/* ─────────────────────────────────────────────
   STEP 3 — DETAILS
───────────────────────────────────────────── */
.details-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    flex: 1;
    min-height: 0;
    align-items: start;
}
.addon-col {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    align-self: stretch;
}
.form-section-hd {
    font-family: var(--hud);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--cyan);
    text-transform: uppercase;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(0,240,255,0.2);
    margin-bottom: 1rem;
    text-shadow: 0 0 12px rgba(0,240,255,0.4);
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 0.9rem;
}
.form-row.full { grid-template-columns: 1fr; }
.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.form-label {
    font-family: var(--hud);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
}
.form-label .req { color: var(--pink); }
.form-input, .form-textarea, .form-select {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.13);
    color: #fff;
    font-family: var(--body);
    font-size: 0.92rem;
    padding: 0.65rem 0.9rem;
    outline: none;
    width: 100%;
    transition: border-color 0.2s, box-shadow 0.2s;
    -webkit-appearance: none;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 16px rgba(0,240,255,0.18);
}
.form-input.filled, .form-textarea.filled {
    border-color: var(--cyan);
    background: rgba(0,240,255,0.07);
    box-shadow: 0 0 14px rgba(0,240,255,0.12);
}
.form-input::placeholder, .form-textarea::placeholder { color: rgba(255,255,255,0.22); }
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: inset 0 0 0 1000px rgba(0,12,18,1), 0 0 14px rgba(0,240,255,0.12);
    box-shadow: inset 0 0 0 1000px rgba(0,12,18,1), 0 0 14px rgba(0,240,255,0.12);
    border-color: var(--cyan);
    transition: background-color 99999s ease-in-out 0s;
}
.form-textarea { resize: vertical; min-height: 75px; }
.form-select { cursor: pointer; }
.form-select option { background: #06060f; }

/* Addons */
.addon-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.3rem;
    margin-bottom: 1.75rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,240,255,0.35) rgba(255,255,255,0.04);
}
.addon-list::-webkit-scrollbar { width: 4px; }
.addon-list::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); border-radius: 2px; }
.addon-list::-webkit-scrollbar-thumb { background: rgba(0,240,255,0.35); border-radius: 2px; }
.addon-list::-webkit-scrollbar-thumb:hover { background: rgba(0,240,255,0.6); }
.addon-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 1rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.addon-row:hover { border-color: rgba(0,240,255,0.2); background: rgba(0,240,255,0.03); box-shadow: 0 0 16px rgba(0,240,255,0.05); }
.addon-row.selected { border-color: var(--cyan); background: rgba(0,240,255,0.08); box-shadow: 0 0 18px rgba(0,240,255,0.2); }
.addon-info { flex: 1; }
.addon-name { font-family: var(--hud); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; color: rgba(255,255,255,0.88); }
.addon-desc { font-size: 0.8rem; color: rgba(255,255,255,0.42); margin-top: 0.2rem; }
.addon-price { font-family: var(--hud); font-size: 1rem; font-weight: 700; color: var(--cyan); white-space: nowrap; flex-shrink: 0; text-shadow: 0 0 12px rgba(0,240,255,0.4); }
.addon-price sup { font-size: 0.6em; vertical-align: super; }
.addon-qty { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.qty-btn {
    width: 28px; height: 28px;
    border: 1px solid rgba(255,255,255,0.2);
    background: none;
    color: rgba(255,255,255,0.6);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.18s;
    font-family: var(--hud);
}
.qty-btn:hover { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 8px rgba(0,240,255,0.3); }
.qty-val { font-family: var(--hud); font-size: 0.78rem; color: #fff; min-width: 22px; text-align: center; }
.qty-val.active { color: var(--cyan); font-weight: 700; }

/* ─────────────────────────────────────────────
   STEP 4 — CONFIRM & PAY
───────────────────────────────────────────── */
.confirm-layout {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 2.5rem;
    flex: 1;
    min-height: 0;
    align-items: stretch;
}
.summary-col {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.summary-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--cyan);
    box-shadow: inset 0 0 30px rgba(0,240,255,0.03);
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin-bottom: 1.75rem;
    overflow: hidden;
}
.summary-hd {
    flex-shrink: 0;
    padding: 1.25rem 1.75rem 0.75rem;
    border-bottom: 1px solid rgba(0,240,255,0.2);
    font-family: var(--hud);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--cyan);
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(0,240,255,0.4);
}
.summary-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0.25rem 1.75rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,240,255,0.35) rgba(255,255,255,0.04);
}
.summary-scroll::-webkit-scrollbar { width: 4px; }
.summary-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); border-radius: 2px; }
.summary-scroll::-webkit-scrollbar-thumb { background: rgba(0,240,255,0.35); border-radius: 2px; }
.summary-scroll::-webkit-scrollbar-thumb:hover { background: rgba(0,240,255,0.6); }
.summary-footer {
    flex-shrink: 0;
    padding: 0.35rem 1.75rem 1.5rem;
    border-top: 1px solid rgba(0,240,255,0.2);
}
.s-lbl.s-lbl--cyan { color: var(--green); }
.s-val.s-val--cyan { color: var(--cyan); }
.summary-card.needs-scroll { /* legacy — no longer used */ }
.summary-card.needs-scroll::-webkit-scrollbar { width: 4px; }
.summary-card.needs-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); border-radius: 2px; }
.summary-card.needs-scroll::-webkit-scrollbar-thumb { background: rgba(0,240,255,0.35); border-radius: 2px; }
.summary-card.needs-scroll::-webkit-scrollbar-thumb:hover { background: rgba(0,240,255,0.6); }
/* .summary-hd typography merged into layout rule above */
.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.35rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 1.05rem;
    line-height: 1.2;
}
.summary-row:last-child { border-bottom: none; }
.s-lbl { color: rgba(255,255,255,0.45); font-size: 0.96rem; }
.s-val { color: #fff; font-weight: 600; font-size: 1.05rem; }
.s-val.cyan { color: var(--cyan); font-family: var(--hud); font-size: 0.88rem; }
.summary-divider { border: none; border-top: 1px solid rgba(255,255,255,0.06); margin: 0.5rem 0; }
.summary-total-row { display: flex; justify-content: space-between; align-items: center; padding-top: 0.75rem; }
.s-total-lbl { font-family: var(--hud); font-size: 0.68rem; letter-spacing: 0.12em; color: var(--green); text-transform: uppercase; }
.s-total-val { font-family: var(--hud); font-size: 1.65rem; font-weight: 900; color: var(--cyan); text-shadow: 0 0 18px rgba(0,240,255,0.4); letter-spacing: -0.02em; }
.s-total-val sup { font-size: 0.55em; vertical-align: super; letter-spacing: 0; }
.deposit-badge {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.9rem;
    padding: 0.65rem 0.9rem;
    background: rgba(0,255,136,0.06);
    border: 1px solid rgba(0,255,136,0.2);
    border-left: 3px solid var(--green);
    width: 100%;
}
.deposit-badge-lbl { font-family: var(--hud); font-size: 0.72rem; letter-spacing: 0.14em; color: rgba(0,255,136,0.7); text-transform: uppercase; }
.deposit-badge-val { font-family: var(--hud); font-size: 0.95rem; font-weight: 900; color: var(--green); text-shadow: 0 0 12px rgba(0,255,136,0.4); text-align: right; }

/* Payment panel */
.pay-col { display: flex; flex-direction: column; gap: 1rem; }
.pay-section-hd { font-family: var(--hud); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; color: var(--cyan); text-transform: uppercase; padding-bottom: 0.6rem; border-bottom: 1px solid rgba(0,240,255,0.2); margin-bottom: 1rem; text-shadow: 0 0 12px rgba(0,240,255,0.4); }
.paypal-box {
    background: rgba(0,148,210,0.05);
    border: 1px solid rgba(0,148,210,0.2);
    border-left: 4px solid #0094d3;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.paypal-box-lbl { font-family: var(--hud); font-size: 0.48rem; letter-spacing: 0.16em; color: rgba(255,255,255,0.28); text-transform: uppercase; }
#paypal-button-container { min-height: 44px; }
.pay-divider { display: flex; align-items: center; gap: 0.75rem; font-size: 0.72rem; color: rgba(255,255,255,0.2); }
.pay-divider::before, .pay-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.pay-btn-full {
    width: 100%;
    font-family: var(--hud);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cyan);
    background: none;
    border: 1px solid var(--cyan);
    padding: 0.8rem;
    cursor: pointer;
    transition: all 0.25s;
}
.pay-btn-full:hover { background: rgba(0,240,255,0.08); box-shadow: 0 0 18px rgba(0,240,255,0.25); }
.disclaimer { font-size: 0.88rem; color: rgba(255,255,255,0.2); line-height: 1.65; }

/* ─────────────────────────────────────────────
   VALIDATION OVERLAY
───────────────────────────────────────────── */
.validation-overlay {
    position: fixed;
    inset: 0;
    background: rgba(6,6,15,0.82);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(4px);
}
.validation-overlay.hidden { display: none !important; }
.validation-modal {
    background: rgba(12,12,28,0.98);
    border: 1px solid rgba(255,0,102,0.45);
    box-shadow: 0 0 50px rgba(255,0,102,0.18), inset 0 0 30px rgba(255,0,102,0.03);
    padding: 2.2rem 2.8rem;
    max-width: 360px;
    width: 90%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
}
.validation-msg {
    font-family: var(--hud);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    line-height: 1.6;
    color: rgba(255,255,255,0.88);
}
.validation-close {
    font-family: var(--hud);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #06060f;
    background: var(--pink);
    border: none;
    cursor: pointer;
    padding: 0.7rem 2.2rem;
    box-shadow: 0 0 22px rgba(255,0,102,0.45);
    transition: box-shadow 0.2s;
}
.validation-close:hover { box-shadow: 0 0 36px rgba(255,0,102,0.7); }

/* ─────────────────────────────────────────────
   UTILITIES
───────────────────────────────────────────── */
.hidden { display: none !important; }

.btn-admin-submit {
    width: 100%;
    font-family: var(--hud);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--yellow);
    background: rgba(255,230,0,0.07);
    border: 1px solid rgba(255,230,0,0.35);
    cursor: pointer;
    padding: 0.85rem 1.5rem;
    margin-bottom: 1rem;
    transition: background 0.2s, box-shadow 0.2s;
}
.btn-admin-submit:hover { background: rgba(255,230,0,0.13); box-shadow: 0 0 18px rgba(255,230,0,0.25); }

/* ─────────────────────────────────────────────
   STEP 2 — LOCATION & ROOM
───────────────────────────────────────────── */
.loc-room-layout {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,240,255,0.2) transparent;
    max-width: 720px;
    margin: 0 auto;
    width: 100%;
}
.loc-room-layout::-webkit-scrollbar { width: 4px; }
.loc-room-layout::-webkit-scrollbar-thumb { background: rgba(0,240,255,0.2); border-radius: 2px; }
.loc-section-hd {
    font-family: var(--hud);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--cyan);
    text-transform: uppercase;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(0,240,255,0.2);
    margin-bottom: 0.85rem;
    text-shadow: 0 0 12px rgba(0,240,255,0.4);
    flex-shrink: 0;
}
.loc-grid, .room-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.loc-card, .room-card {
    background: rgba(0,240,255,0.04);
    border: 1px solid rgba(0,240,255,0.3);
    cursor: pointer;
    position: relative;
    padding: 1.25rem 1.5rem;
    flex: 1 1 200px;
    transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
}
.loc-card {
    flex: 0 0 auto;
    width: 100%;
}
.loc-card:hover, .room-card:hover {
    border-color: rgba(0,240,255,0.65);
    box-shadow: 0 0 20px rgba(0,240,255,0.12);
}
.loc-card.selected, .room-card.selected {
    border: 2px solid var(--cyan);
    background: rgba(0,240,255,0.1);
    box-shadow: 0 0 30px rgba(0,240,255,0.2);
}
.loc-name, .room-name {
    font-family: var(--hud);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--cyan);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}
.loc-addr {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.5);
    line-height: 1.5;
}
.room-desc {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.45);
    line-height: 1.4;
    margin-bottom: 0.6rem;
}
.room-price {
    font-family: var(--hud);
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--green);
    text-shadow: 0 0 14px rgba(0,255,136,0.35);
    margin-top: 0.5rem;
}
.room-price sup { font-size: 0.6em; vertical-align: top; margin-top: 0.3rem; display: inline-block; }
.loc-check, .room-check {
    font-family: var(--hud);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(0,240,255,0);
    margin-top: 0.5rem;
    transition: color 0.25s;
}
.loc-card.selected .loc-check, .room-card.selected .room-check {
    color: var(--cyan);
    text-shadow: 0 0 10px rgba(0,240,255,0.5);
}
.pkg-players {
    font-family: var(--hud);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--green);
    text-transform: uppercase;
    margin-top: 0.4rem;
    text-shadow: 0 0 10px rgba(0,255,136,0.4);
}

/* ─────────────────────────────────────────────
   BOOKING SUCCESS OVERLAY
───────────────────────────────────────────── */
.booking-success {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: var(--bg);
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
.booking-success.visible {
    display: flex;
}
.bs-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    max-width: 480px;
    width: 100%;
    text-align: center;
}

/* Animated checkmark */
.bs-check-wrap {
    width: 100px;
    height: 100px;
    margin-bottom: 0.5rem;
}
.bs-check-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}
.bs-circle {
    stroke-dasharray: 226;
    stroke-dashoffset: 226;
    animation: bs-draw-circle 0.6s ease forwards 0.1s;
}
.bs-tick {
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: bs-draw-tick 0.4s ease forwards 0.75s;
}
@keyframes bs-draw-circle {
    to { stroke-dashoffset: 0; }
}
@keyframes bs-draw-tick {
    to { stroke-dashoffset: 0; }
}

/* Text */
.bs-title {
    font-family: var(--hud);
    font-size: 1.4rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    color: var(--cyan);
    text-shadow: 0 0 20px rgba(0,240,255,0.5);
    text-transform: uppercase;
}
.bs-subtitle {
    font-family: var(--hud);
    font-size: 0.65rem;
    letter-spacing: 0.16em;
    color: rgba(200,208,224,0.55);
    text-transform: uppercase;
    margin-top: -0.5rem;
}

/* Detail rows */
.bs-details {
    width: 100%;
    border: 1px solid rgba(0,240,255,0.15);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 0.5rem;
}
.bs-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 1.25rem;
    border-bottom: 1px solid rgba(0,240,255,0.08);
}
.bs-row:last-child { border-bottom: none; }
.bs-lbl {
    font-family: var(--hud);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: rgba(200,208,224,0.5);
    text-transform: uppercase;
    flex-shrink: 0;
}
.bs-val {
    font-family: var(--hud);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #fff;
    flex: 1;
    text-align: right;
    word-break: break-word;
}

/* Error */
.bs-error {
    font-family: var(--hud);
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    color: #ff4466;
    text-align: center;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(255,68,102,0.3);
    border-radius: 3px;
    width: 100%;
}

/* Home button */
.bs-home-btn {
    font-family: var(--hud);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cyan);
    border: 1px solid rgba(0,240,255,0.35);
    padding: 0.7rem 2rem;
    text-decoration: none;
    margin-top: 0.5rem;
    transition: background 0.2s, box-shadow 0.2s;
}
.bs-home-btn:hover {
    background: rgba(0,240,255,0.07);
    box-shadow: 0 0 18px rgba(0,240,255,0.2);
}

/* ═══════════════════════════════════════════════
   MOBILE SUB-PANEL WRAPPERS
   .m-sub is display:contents on desktop — completely
   transparent to the layout engine. Children participate
   directly in the parent grid/flex as if the wrapper
   doesn't exist. On mobile, toggled display:none / flex.
═══════════════════════════════════════════════ */
.m-sub         { display: contents; }
.m-step-bar    { display: none; }   /* old bar — gone on both breakpoints */
.m-nav-step    { display: none; }   /* top-nav step counter — mobile only */
.nav-brand-sub { display: none; }   /* RESERVATION sub-label — mobile only */

/* ═══════════════════════════════════════════════
   MOBILE WIZARD  (≤ 767px)
═══════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* ─── Desktop progress bar: hide ─── */
    .step-bar { display: none !important; }

    /* ─── Top nav: stacked brand + centered step counter ─── */
    /* NOTE: do NOT override position here — .top-nav stays position:fixed */
    .top-nav { padding: 0 1rem; }
    .nav-brand {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        line-height: 1;
        gap: 2px;
    }
    .nav-brand-main { font-size: 0.9rem; }
    .nav-brand-sub {
        display: block;
        font-family: var(--hud);
        font-size: 0.48rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        color: rgba(255,255,255,0.42);
        text-transform: uppercase;
        line-height: 1;
    }
    /* Step counter: flex-item centering so it sits between brand edge and menu icon */
    .m-nav-step {
        display: block;
        flex: 1;
        text-align: center;
        font-family: var(--hud);
        font-size: 0.58rem;
        font-weight: 700;
        letter-spacing: 0.2em;
        color: var(--green);
        text-shadow: 0 0 10px rgba(0,255,136,0.4);
        white-space: nowrap;
        text-transform: uppercase;
        pointer-events: none;
    }

    /* ─── Panels-inner: block instead of translateX row ─── */
    .panels-inner {
        display: grid;           /* all panels share the same grid cell */
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        width: 100% !important;
        flex: 1;                 /* fill wizard's remaining height as a flex child */
        min-height: 0;
        overflow: hidden;
        transform: none !important;
        transition: none !important;
    }

    /* ─── Panels: stacked in the same grid cell; slide via translateX ─── */
    .panel {
        grid-area: 1 / 1;
        width: 100%;             /* override desktop width: 20% */
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1.25rem 1.1rem 0;
        transform: translateX(100%);
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: transform;
    }
    .panel.m-panel-active  { transform: translateX(0); }
    .panel.m-panel-left    { transform: translateX(-100%); }
    .panel.m-no-transition { transition: none !important; }

    /* ─── Sub-panels ─── */
    .m-sub          { display: none; }
    .m-sub.m-active { display: flex; flex-direction: column; }

    /* ─── Panel-nav: always-visible fixed bottom bar ─── */
    .panel-nav {
        /* sticky instead of fixed — position:fixed breaks when parent has transform */
        position: sticky;
        bottom: 0;
        /* auto top-margin pushes to bottom on short content;
           negative left/right margins cancel the panel's 1.1rem padding so
           the background covers the full width and content can't bleed through */
        margin: auto -1.1rem 0;
        padding: 0.85rem 1.1rem;
        background: rgba(6,6,15,0.97);
        border-top: 1px solid rgba(0,240,255,0.15);
        box-shadow: 0 -4px 24px rgba(0,0,0,0.55);
        display: flex;
        align-items: center;
        gap: 0.75rem;
        z-index: 100;
        flex-shrink: 0;
    }

    /* Step 1 has no Back button — center the Continue */
    #panel-1 .panel-nav { justify-content: center; }

    /* Back button: show on mobile */
    .panel-nav .btn-back {
        display: inline-flex;
        flex-shrink: 0;
        padding: 0.7rem 1rem;
    }

    /* Continue button: outline style */
    .btn-next {
        flex: 1;
        width: auto;
        justify-content: center;
        padding: 0.85rem 1rem;
        font-size: 0.72rem;
        box-sizing: border-box;
        background: transparent;
        border: 1.5px solid var(--cyan);
        color: var(--cyan);
        box-shadow: none;
    }
    .btn-next:not(:disabled):hover {
        background: rgba(0,240,255,0.07);
        box-shadow: 0 0 16px rgba(0,240,255,0.2);
    }
    .btn-next:disabled {
        background: transparent;
        border-color: rgba(255,255,255,0.12);
        color: rgba(255,255,255,0.2);
        box-shadow: none;
    }

    /* ─── Typography ─── */
    .panel-eyebrow { display: none; }
    .panel-title   { font-size: clamp(1.3rem, 7vw, 1.75rem); margin-bottom: 0.2rem; }
    .panel-sub     { font-size: 0.82rem; margin-bottom: 0.65rem; }

    /* ─── Selection strip: gone on mobile ─── */
    .sel-strip { display: none; }

    /* ─── Package cards ─── */
    /* Package cards: wide column-stack button */
    .pkg-group    { gap: 0.5rem; margin: 0.5rem 0 0; }
    .package-grid { grid-template-columns: 1fr; gap: 0.45rem; padding: 0.25rem 0; }
    .pkg-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0.9rem 1.25rem;
        gap: 0.2rem;
        height: auto;
        position: relative;
    }
    .pkg-hours   { font-size: 3rem; line-height: 1; }
    .pkg-word    { display: none; }
    .pkg-unit    { text-align: center; font-size: 0.78rem; letter-spacing: 0.18em; width: 100%; }
    .pkg-players { text-align: center; font-size: 0.58rem; letter-spacing: 0.1em; width: 100%; }
    .pkg-check   { position: absolute; top: 0.45rem; right: 0.9rem; margin: 0; font-size: 0.55rem; }

    /* ─── Location / room ─── */
    .loc-room-layout    { gap: 1.25rem; }
    .loc-grid, .room-grid { gap: 0.65rem; }
    .loc-card, .room-card {
        padding: 0.9rem 1rem;
        text-align: center;
        flex: 1 1 100%;   /* full width on mobile */
    }
    .loc-name, .room-name { text-align: center; }
    .loc-addr, .room-desc { text-align: center; }
    .room-price           { text-align: center; margin-top: 0.3rem; }
    /* Hide the check label — selection is shown by the border glow */
    .loc-check, .room-check { display: none; }

    /* ─── Date / Time sub-panels ─── */
    .datetime-layout        { display: flex; flex-direction: column; gap: 0; }
    .cal-col, .slots-col    { overflow: visible; }
    .cal-grid               { font-size: 0.78rem; }
    .slots-grid             { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
    .slot-btn               { padding: 0.85rem 0.2rem; font-size: 0.78rem; }

    /* ─── Details sub-panels (contact + addons) ─── */
    .details-layout { display: flex; flex-direction: column; gap: 0; }

    /* Expand the contact sub-panel to bleed past the panel's side padding,
       then add a smaller inset so inputs don't touch the screen edges */
    #m-sub-4a {
        width: calc(100% + 2.2rem);
        margin-left: -1.1rem;
        padding: 0 0.75rem;
    }

    .form-row   { grid-template-columns: 1fr; gap: 0; margin-bottom: 0; }
    .form-group { width: 100%; margin-bottom: 0.85rem; }
    .form-label {
        color: rgba(255,255,255,0.82);
        padding: 0 0 0.15rem 0;   /* tight gap between label and input */
    }
    .form-input,
    .form-textarea {
        font-size: 1rem;
        padding: 0.85rem 1rem;
        width: 100%;
        box-sizing: border-box;
    }
    .addon-col              { overflow: visible; }
    .addon-list             { overflow-y: visible; max-height: none; padding-right: 0; }
    .addon-row              { padding: 0.9rem 0.85rem; gap: 0.75rem; }
    .qty-btn                { width: 36px; height: 36px; font-size: 1.1rem; }

    /* ─── Release internal scroll containers so the panel scrolls as one ─── */
    /* Step 2 — Location */
    .loc-room-layout { flex: none; min-height: 0; overflow-y: visible; max-height: none; }

    /* Step 3 — Date / Time */
    .datetime-layout  { flex: none; overflow: visible; }
    .cal-col,
    .slots-col        { overflow: visible; min-height: 0; }
    .slots-col-inner  { flex: none; overflow: visible; min-height: 0; }
    .cal-grid         { flex: none; overflow-y: visible; height: auto; }
    .slots-grid       { flex: none; overflow-y: visible; height: auto; grid-template-columns: repeat(3,1fr); gap: 0.5rem; }

    /* Step 4 — Details (Contact + Addons) */
    .details-layout   { flex: none; overflow: visible; }

    /* Step 7 — Confirm / Pay */
    .confirm-layout   { display: block; flex: none; }
    .summary-card     { flex: none; overflow: visible; height: auto; min-height: 0; }
    .summary-scroll   { flex: none; overflow-y: visible; max-height: none; min-height: 0; }

    /* ─── Booking summary rows: stack label above value for readability ─── */
    .summary-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.1rem;
        padding: 0.55rem 0;
    }
    .s-lbl {
        font-size: 0.68rem;
        letter-spacing: 0.07em;
        text-transform: uppercase;
    }
    .s-val {
        font-size: 0.97rem;
        text-align: left;
    }
    .summary-total-row {
        flex-direction: row;   /* keep total row side-by-side */
        align-items: center;
    }

}