/* ══════════════════════════════════════
    DESIGN TOKENS — Dark default
══════════════════════════════════════ */
:root {
    --bg:         #0D0C09;
    --surface:    #161410;
    --surface-2:  #1F1D18;
    --surface-3:  #292520;
    --accent:     #E8892A;
    --accent-s:   rgba(232,137,42,0.10);
    --accent-m:   rgba(232,137,42,0.22);
    --green:      #2CC97A;
    --green-s:    rgba(44,201,122,0.12);
    --red:        #E84444;
    --red-s:      rgba(232,68,68,0.10);
    --amber:      #F0B429;
    --amber-s:    rgba(240,180,41,0.14);
    --t1:         #EDE8DE;
    --t2:         #9A9088;
    --t3:         #6A6358;
    --line:       rgba(237,232,222,0.07);
    --line-b:     rgba(232,137,42,0.35);
    --shadow:     0 16px 60px rgba(0,0,0,0.65);
    --grid-line:  rgba(237,232,222,0.025);
    --backdrop:   rgba(13,12,9,0.88);
    --fp-bg:      #0F0E0A;
    --fp-dot:     rgba(237,232,222,0.055);
}

[data-theme="light"] {
    --bg:         #F3EEE3;
    --surface:    #FDFAF2;
    --surface-2:  #ECE7D8;
    --surface-3:  #E0D9C8;
    --accent:     #B85010;
    --accent-s:   rgba(184,80,16,0.08);
    --accent-m:   rgba(184,80,16,0.16);
    --green:      #187A50;
    --green-s:    rgba(24,122,80,0.10);
    --red:        #C01818;
    --red-s:      rgba(192,24,24,0.08);
    --amber:      #A04808;
    --amber-s:    rgba(160,72,8,0.12);
    --t1:         #1A160C;
    --t2:         #6A6058;
    --t3:         #ACA090;
    --line:       rgba(26,22,12,0.10);
    --line-b:     rgba(184,80,16,0.30);
    --shadow:     0 8px 36px rgba(26,22,12,0.12);
    --grid-line:  rgba(26,22,12,0.04);
    --backdrop:   rgba(243,238,227,0.90);
    --fp-bg:      #EDE7D6;
    --fp-dot:     rgba(26,22,12,0.065);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Manrope', sans-serif;
    background: var(--bg);
    color: var(--t1);
    min-height: 100vh;
    background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 48px 48px;
    transition: background-color .32s, color .32s;
}

/* ══════════════════════════════════════
    HEADER
══════════════════════════════════════ */
.hdr {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 40px;
    height: 70px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 50;
    animation: slideD .4s ease both;
}
/* Amber keyline at top edge */
.hdr::after {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--accent) 0%, transparent 70%);
    opacity: .8;
}

.logo { display: flex; align-items: center; gap: 14px; }
.logo-img {
    height: 38px;
    width: auto;
    filter: invert(0);
    opacity: .92;
    flex-shrink: 0;
}
[data-theme="light"] .logo-img {
    filter: invert(1) brightness(0.15);
}
.logo-divider {
    width: 1px; height: 28px;
    background: var(--line);
    flex-shrink: 0;
}
.logo-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--t3);
    white-space: nowrap;
}

.hdr-r { display: flex; align-items: center; gap: 22px; }

.legend { display: flex; align-items: center; gap: 22px; }
.leg {
    display: flex; align-items: center; gap: 7px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px; font-weight: 500;
    color: var(--t2);
    text-transform: uppercase; letter-spacing: 1.2px;
    white-space: nowrap;
}
.dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.dot.av  { background: var(--green); }
.dot.bk  { background: var(--red); }
.dot.sel { background: var(--amber); }

.tbtn {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 18px;
    background: none;
    border: 1px solid var(--line);
    color: var(--t2);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px; font-weight: 500;
    letter-spacing: 1px; text-transform: uppercase;
    cursor: pointer; transition: all .18s;
    white-space: nowrap;
}
.tbtn:hover { border-color: var(--accent); color: var(--accent); }

/* ══════════════════════════════════════
    MAIN LAYOUT
══════════════════════════════════════ */
.main { padding: 22px 40px 52px; max-width: 1440px; margin: 0 auto; }

/* ── Date strip ── */
.dstrip {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
    animation: slideD .4s .06s ease both;
}
.dl { display: flex; align-items: center; gap: 10px; }
.dlbl {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; color: var(--t3);
    text-transform: uppercase; letter-spacing: 2.5px;
}
.dnav { display: flex; align-items: center; gap: 1px; position: relative; }
.dab {
    width: 28px; height: 28px;
    background: var(--surface); border: 1px solid var(--line);
    color: var(--t2); font-size: 14px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all .15s;
}
.dab:hover { border-color: var(--accent); color: var(--accent); }
.dchip {
    padding: 5px 20px;
    background: var(--surface); border: 1px solid var(--line-b);
    color: var(--accent);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; font-weight: 600; letter-spacing: 1px;
    cursor: pointer; min-width: 184px; text-align: center;
    user-select: none; transition: background .15s;
}
.dchip:hover { background: var(--accent-s); }

/* Mini-calendar */
.cpop {
    position: absolute; top: calc(100% + 6px); left: 28px;
    background: var(--surface); border: 1px solid var(--line);
    box-shadow: var(--shadow); padding: 14px; z-index: 110; width: 248px;
    display: none; animation: slideU .14s ease;
}
.cpop.open { display: block; }
.cphd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.cpmo {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; font-weight: 600;
    color: var(--t2); letter-spacing: 1.5px; text-transform: uppercase;
}
.cgrid { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; }
.cdh {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; color: var(--t3);
    text-align: center; padding: 3px 1px;
}
.cd {
    aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
    font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--t2);
    cursor: pointer; transition: all .12s; border-radius: 1px;
}
.cd:hover { background: var(--accent-s); color: var(--accent); }
.cd.today { color: var(--accent); font-weight: 700; }
.cd.sel   { background: var(--accent); color: #fff; font-weight: 700; }
.cd.past  { opacity: .24; pointer-events: none; }
.cd.empty { pointer-events: none; }

.flbl {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; color: var(--t3);
    text-transform: uppercase; letter-spacing: 2.5px;
    white-space: nowrap;
}
.tclk {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px; font-weight: 600;
    color: var(--accent);
    letter-spacing: 1.5px;
    white-space: nowrap;
}

/* ══════════════════════════════════════
    FLOORPLAN
══════════════════════════════════════ */
.fpwrap {
    background: var(--fp-bg);
    border: 1px solid var(--line);
    position: relative; overflow: hidden;
    animation: slideU .5s .12s ease both;
    /* Blueprint dot-grid */
    background-image: radial-gradient(circle, var(--fp-dot) 1px, transparent 1px);
    background-size: 22px 22px;
}
.fptag {
    position: absolute; top: 12px; right: 16px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px; font-weight: 500;
    color: var(--t3); letter-spacing: 3.5px; text-transform: uppercase;
    pointer-events: none; z-index: 1;
}
#fpsvg { width: 100%; height: auto; display: block; }

/* ── Seat states ── */
.seat { cursor: pointer; }

.seat.av rect,
.seat.av circle {
    fill: var(--green-s);
    stroke: var(--green); stroke-width: 1.5;
    transition: fill .15s, filter .15s, stroke-width .15s;
}
.seat.bk rect,
.seat.bk circle {
    fill: var(--red-s);
    stroke: var(--red); stroke-width: 1.5;
    cursor: pointer;
}
.seat.sel rect,
.seat.sel circle {
    fill: var(--amber-s);
    stroke: var(--amber); stroke-width: 2;
    animation: pulse 2.2s ease-in-out infinite;
}
.seat.av:hover rect,
.seat.av:hover circle {
    fill: rgba(44,201,122,0.22);
    stroke-width: 2;
    filter: drop-shadow(0 0 7px rgba(44,201,122,0.40));
}
[data-theme="light"] .seat.av:hover rect,
[data-theme="light"] .seat.av:hover circle {
    fill: rgba(24,122,80,0.16);
    filter: drop-shadow(0 0 5px rgba(24,122,80,0.28));
}
.seat.av text  { fill: var(--green)  !important; }
.seat.bk text  { fill: var(--red)    !important; }
.seat.sel text { fill: var(--amber)  !important; }
.seat.grey rect,
.seat.grey circle {
    fill: rgba(140,140,140,0.10);
    stroke: #888; stroke-width: 1.5;
    cursor: not-allowed;
}
.seat.grey text { fill: #888 !important; }

/* ══════════════════════════════════════
    MODAL BACKDROP
══════════════════════════════════════ */
.bkd {
    position: fixed; inset: 0;
    background: var(--backdrop); backdrop-filter: blur(8px) saturate(0.8);
    z-index: 200; opacity: 0; pointer-events: none; transition: opacity .28s;
}
.bkd.open { opacity: 1; pointer-events: all; }

/* ══════════════════════════════════════
    BOOKING MODAL
══════════════════════════════════════ */
.bmod {
    position: fixed; bottom: 0; left: 50%;
    transform: translateX(-50%) translateY(100%);
    width: 100%; max-width: 700px;
    background: var(--surface);
    border: 1px solid var(--line); border-bottom: none;
    z-index: 300; padding: 36px 42px 32px;
    transition: transform .44s cubic-bezier(.16,1,.3,1);
    box-shadow: 0 -20px 70px rgba(0,0,0,.30);
}
.bmod.open { transform: translateX(-50%) translateY(0); }
/* Amber accent line at modal top */
.bmod::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--accent) 40%, transparent);
}

.bclose {
    position: absolute; top: 18px; right: 20px;
    background: none; border: 1px solid var(--line);
    color: var(--t2); width: 28px; height: 28px; font-size: 12px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all .15s;
}
.bclose:hover { border-color: var(--red); color: var(--red); }

.bbanner {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 15px;
    background: var(--accent-s);
    border-left: 3px solid var(--accent);
    margin-bottom: 24px;
}
.btname {
    font-family: 'Syne', sans-serif;
    font-size: 22px; font-weight: 700;
    color: var(--accent); letter-spacing: -.1px;
}
.btdate {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px; font-weight: 500;
    color: var(--t2);
}

/* Step indicators */
.steps { display: flex; align-items: center; margin-bottom: 28px; }
.sdot {
    width: 36px; height: 36px;
    border: 1.5px solid var(--t3);
    display: flex; align-items: center; justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px; font-weight: 700;
    color: var(--t3); flex-shrink: 0; transition: all .22s;
}
.sdot.active { border-color: var(--accent); color: var(--accent); }
.sdot.done   { border-color: var(--green); background: var(--green); color: #fff; }
.sline { flex: 1; height: 1px; background: var(--line); transition: background .25s; }
.sline.done { background: var(--green); }

.spane { display: none; animation: slideU .2s ease; }
.spane.active { display: block; }
.shd {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; font-weight: 600;
    color: var(--t3); text-transform: uppercase; letter-spacing: 2.5px;
    margin-bottom: 16px;
}

/* Time slots */
.tgrid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.tsbtn {
    padding: 13px 4px;
    background: none; border: 1px solid var(--line);
    color: var(--t2);
    font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 500;
    text-align: center; cursor: pointer; transition: all .12s;
}
.tsbtn:hover:not(.bkt) {
    border-color: var(--accent); color: var(--accent);
    background: var(--accent-s);
}
.tsbtn.picked {
    border-color: var(--accent); background: var(--accent-s);
    color: var(--accent); font-weight: 700;
}
.tsbtn.bkt  { opacity: .28; text-decoration: line-through; cursor: not-allowed; }
.tsbtn.past { opacity: .22; cursor: not-allowed; color: var(--t3); }

.sctr {
    margin-top: 12px;
    display: flex; align-items: center; justify-content: space-between;
    font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--t2);
}
.sbars { display: flex; gap: 4px; }
.sbar { width: 18px; height: 3px; background: var(--line); transition: background .2s; }
.sbar.on { background: var(--accent); }

/* Forms */
.fg { margin-bottom: 16px; }
.fg:last-child { margin-bottom: 0; }
.flb {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; font-weight: 600;
    color: var(--t3); text-transform: uppercase; letter-spacing: 2.5px;
    margin-bottom: 8px;
}
.fin, .fta {
    width: 100%;
    background: var(--surface-2); border: 1px solid var(--line);
    color: var(--t1); padding: 10px 13px;
    font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 400;
    outline: none; transition: border-color .18s, box-shadow .18s;
    border-radius: 0; -webkit-appearance: none;
}
.fin::placeholder, .fta::placeholder { color: var(--t3); opacity: .7; }
.fin:focus, .fta:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-s);
}
.fin.err, .fta.err {
    border-color: var(--red);
    box-shadow: 0 0 0 2px var(--red-s);
}
.fta { min-height: 68px; resize: none; }
.ferr {
    font-size: 10px; color: var(--red);
    font-family: 'JetBrains Mono', monospace; font-weight: 500;
    margin-top: 5px; display: none;
}
.ferr.show { display: block; }

/* Modal footer */
.bfoot {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 22px; padding-top: 16px;
    border-top: 1px solid var(--line);
}
.btnbk {
    background: none; border: 1px solid var(--line);
    color: var(--t2); padding: 13px 22px;
    font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500;
    letter-spacing: 1px; text-transform: uppercase;
    cursor: pointer; transition: all .15s;
}
.btnbk:hover { border-color: var(--t2); color: var(--t1); }
.btnnx {
    background: var(--accent); border: none;
    color: #fff;
    padding: 14px 34px;
    font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700;
    letter-spacing: 2.5px; text-transform: uppercase;
    cursor: pointer; transition: opacity .18s, transform .15s;
}
.btnnx:hover { opacity: .86; transform: translateY(-1px); }
.btnnx.confirm { background: var(--green); }

/* Success screen */
.okwrap { text-align: center; padding: 8px 0; }
.okicon {
    width: 54px; height: 54px;
    border: 1.5px solid var(--green); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px; font-size: 22px; color: var(--green);
    animation: popIn .42s cubic-bezier(.16,1,.3,1);
}
.okt {
    font-family: 'Syne', sans-serif;
    font-size: 19px; font-weight: 700;
    color: var(--green); margin-bottom: 6px;
}
.oks { font-size: 13px; color: var(--t2); line-height: 1.75; }
.okref {
    display: inline-block; margin-top: 14px;
    padding: 7px 16px; border: 1px solid var(--line-b);
    font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600;
    color: var(--accent);
}
.btndone {
    margin-top: 18px; padding: 9px 24px;
    background: none; border: 1px solid var(--line);
    color: var(--accent);
    font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase;
    cursor: pointer; transition: background .15s;
}
.btndone:hover { background: var(--accent-s); }

/* Tooltip */
.tipel {
    position: fixed;
    background: var(--surface-3); border: 1px solid var(--line);
    padding: 5px 12px;
    font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500;
    color: var(--t1); pointer-events: none; z-index: 400;
    display: none; white-space: nowrap; box-shadow: var(--shadow);
}
.tipel.on { display: block; }

/* ── Loading overlay ── */
.fpload {
    position: absolute; inset: 0;
    display: none; align-items: center; justify-content: center;
    background: rgba(13,12,9,.55); z-index: 10;
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    color: var(--t2); letter-spacing: 2px;
}
.fpload.on { display: flex; }
.fpload-spin {
    width: 16px; height: 16px; border: 2px solid var(--line);
    border-top-color: var(--accent); border-radius: 50%;
    animation: spin .7s linear infinite; margin-right: 10px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Cancel overlay ── */
.cov {
    position: fixed; inset: 0;
    background: var(--bg); z-index: 500;
    display: none; align-items: center; justify-content: center;
    padding: 24px;
}
.cov.on { display: flex; }
.cbox {
    background: var(--surface); border: 1px solid var(--line);
    padding: 36px 40px; width: 100%; max-width: 520px;
}
.cbox::before {
    content: ''; display: block; height: 2px; margin-bottom: 28px;
    background: linear-gradient(90deg, var(--red) 0%, transparent 70%);
}
.ctitle {
    font-family: 'Syne', sans-serif; font-size: 20px; font-weight: 700;
    color: var(--red); margin-bottom: 6px;
}
.csub {
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    color: var(--t2); margin-bottom: 24px;
}
.cinfo {
    background: var(--surface-2); border-left: 3px solid var(--line-b);
    padding: 12px 16px; margin-bottom: 24px;
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    color: var(--t2); line-height: 1.9;
}
.cinfo b { color: var(--t1); font-weight: 600; }
.cbtn-cancel {
    background: var(--red); border: none; color: #fff;
    padding: 13px 28px; cursor: pointer;
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    transition: opacity .15s; margin-right: 10px;
}
.cbtn-cancel:hover { opacity: .82; }
.cbtn-back {
    background: none; border: 1px solid var(--line);
    color: var(--t2); padding: 13px 20px; cursor: pointer;
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    text-transform: uppercase; letter-spacing: 1px; transition: all .15s;
}
.cbtn-back:hover { border-color: var(--t2); color: var(--t1); }

/* ── Animations ── */
@keyframes slideD  { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideU  { from{opacity:0;transform:translateY(8px)}  to{opacity:1;transform:translateY(0)} }
@keyframes popIn   { from{transform:scale(.5);opacity:0} to{transform:scale(1);opacity:1} }
@keyframes pulse   { 0%,100%{opacity:1} 50%{opacity:.52} }

/* ══════════════════════════════════════
    MOBILE RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 640px) {
    .hdr { padding: 0 16px; height: 52px; gap: 10px; }
    .logo-img { height: 24px; }
    .logo-sub { font-size: 7px; letter-spacing: 2px; }
    .logo-divider { height: 22px; }
    .legend { display: none; }
    .tbtn span#tlb { display: none; }
    .tbtn { padding: 6px 10px; gap: 0; }

    .main { padding: 14px 12px 40px; }
    .dstrip { flex-direction: column; align-items: flex-start; gap: 10px; }
    .flbl { display: none; }
    .dchip { min-width: 160px; font-size: 10px; padding: 5px 14px; }

    .fpwrap {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    }
    #fpsvg {
    width: 900px;
    height: auto;
    min-width: 900px;
    }

    .bmod { padding: 22px 18px 20px; }
    .tgrid { grid-template-columns: repeat(3,1fr); }
    .bclose { width: 44px; height: 44px; top: 10px; right: 10px; font-size: 16px; }
    .bfoot { flex-direction: column-reverse; gap: 10px; }
    .btnnx, .btnbk { width: 100%; text-align: center; justify-content: center; padding: 13px; }
}

@media (max-width: 400px) {
    .logo-sub { display: none; }
    .logo-divider { display: none; }
    .tgrid { grid-template-columns: repeat(2,1fr); }
}