/* Shared look for the booking page and settings screen.
   Website brand (Bungee, Space Grotesk, neon pink and blue on midnight navy)
   with Venue Control components (rounded surface cards, big tap targets,
   pill switches, soft glow, state shown by colour and dots).
   Colour tokens are set at the top of each page; these are fallbacks. */
:root{
  --pink:#FF2E9F;--pink-d:#cc2580;--blue:#1FB8FF;--navy:#0a0d16;--mid:#05060A;--ice:#F6F1FF;--card:#0e1120;
  --surface:#12162a;--surface-2:#171c33;--border:#252b45;--muted:#a9afc4;
  --green:#47d59a;--gold:#efb640;--red:#f05c67;
  --pink-soft:rgba(255,46,159,.14);--blue-soft:rgba(31,184,255,.13);
  --radius:16px;--tap:54px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{min-height:100%}
body{margin:0;color:var(--ice);font:16px/1.45 "Space Grotesk",system-ui,sans-serif;
  background:radial-gradient(circle at 78% -18%,#1d1030 0,var(--mid) 34rem) fixed var(--mid);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit}
button{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
button:disabled{cursor:not-allowed}
h1,h2,h3{font-family:Bungee,"Space Grotesk",sans-serif;font-weight:400;margin-top:0}
p{margin-top:0}
.muted{color:var(--muted);font-size:14px;line-height:1.5}
.eyebrow{margin:0 0 6px;color:var(--pink);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}

/* top bar */
.topbar{display:flex;align-items:center;gap:12px;padding:12px 20px;background:rgba(10,13,22,.92);
  border-bottom:1px solid var(--border);backdrop-filter:blur(16px)}
.topbar img{width:46px;height:46px;border-radius:50%;box-shadow:0 0 0 2px var(--pink-soft),0 0 18px rgba(255,46,159,.35)}
.topbar b{font-family:Bungee,sans-serif;font-weight:400;letter-spacing:.5px}
.pill{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--blue);
  border:1px solid rgba(31,184,255,.5);background:var(--blue-soft);border-radius:99px;padding:5px 12px;font-weight:700}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 3px rgba(31,184,255,.14),0 0 8px rgba(31,184,255,.5)}

/* cards */
.card,.step{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:16px;
  box-shadow:0 18px 44px rgba(0,0,0,.28)}
.card h2,.step h2{color:var(--pink);font-size:18px;margin:0 0 14px;text-shadow:0 0 14px rgba(255,46,159,.35)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);padding:0 22px;border:1px solid var(--pink);
  border-radius:14px;background:var(--pink-d);color:#fff;font-weight:700;font-size:16px; /* --pink-d: white text 5.07:1 (WCAG AA); bright --pink was 3.42:1 */
  box-shadow:0 8px 24px rgba(255,46,159,.32);transition:transform .12s,box-shadow .2s,opacity .2s}
.btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 10px 32px rgba(255,46,159,.55)}
.btn:disabled{opacity:.4;box-shadow:none}
.btn.ghost{background:transparent;border-color:var(--border);color:var(--ice);box-shadow:none}
.btn.ghost:hover:not(:disabled){border-color:var(--pink);box-shadow:none}
.chip{min-height:var(--tap);border:1px solid var(--border);background:var(--surface);color:var(--ice);border-radius:14px;padding:0 16px;font-weight:600}
.chip:hover:not(:disabled){border-color:var(--pink)}
.chip.sel{background:linear-gradient(135deg,var(--pink-d),#a81d69); /* white text stays above 4.5:1 across the whole gradient */border-color:var(--pink);color:#fff;box-shadow:0 0 18px rgba(255,46,159,.4)}
.chip:disabled{opacity:.3}

/* fields */
label{display:block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:12px 0 6px}
input,select,textarea{background:var(--mid);color:var(--ice);border:1px solid var(--border);border-radius:12px;min-height:var(--tap);padding:0 14px}
input[type=checkbox]{min-height:0;width:22px;height:22px;accent-color:var(--pink);flex:0 0 auto}
input:focus,select:focus{border-color:var(--pink);box-shadow:0 0 0 4px rgba(255,46,159,.18)}

/* notices */
.note,.ok{background:var(--blue-soft);border:1px solid rgba(31,184,255,.4);color:#d6f1ff;border-radius:13px;padding:12px 14px;font-size:14px;margin:12px 0}
.note.err,.warn{background:rgba(255,46,159,.1);border:1px solid rgba(255,46,159,.55);color:#ffd6ec;border-radius:13px;padding:12px 14px;margin:12px 0;font-size:14px}

/* switch */
.sw{position:relative;width:72px;height:40px;display:inline-block;flex:0 0 auto}
.sw input{opacity:0;width:0;height:0;position:absolute}
.sw span{position:absolute;inset:0;border:1px solid var(--border);background:var(--mid);border-radius:99px;cursor:pointer;transition:.2s}
.sw span::before{content:"";position:absolute;width:30px;height:30px;left:4px;top:4px;background:var(--muted);border-radius:50%;transition:.2s}
.sw span::after{content:"OFF";position:absolute;right:11px;top:0;line-height:38px;font-size:11px;font-weight:700;color:var(--muted)}
.sw input:checked+span{background:var(--pink);border-color:var(--pink);box-shadow:0 0 16px rgba(255,46,159,.45)}
.sw input:checked+span::before{transform:translateX(32px);background:#fff}
.sw input:checked+span::after{content:"ON";left:11px;right:auto;color:#fff}
.sw input:focus-visible+span{outline:3px solid var(--blue);outline-offset:2px}

dialog{background:var(--card);color:var(--ice);border:1px solid var(--border);border-radius:20px;max-width:560px;width:92%;padding:22px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
dialog::backdrop{background:rgba(3,4,8,.75);backdrop-filter:blur(4px)}
dialog h2{color:var(--pink);font-size:19px}