@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@600&display=swap');

:root{
  --bg: #f6f7fb;
  --card: #ffffff;
  --ink: #0f172a;
  --muted: #6b7280;
  --primary: #0f4fff;
  --primary-dark: #0c3fcc;
  --border: #e5e7eb;
  --success: #0ea5e9;
  --danger: #ef4444;
}

*{ box-sizing:border-box; }
body.public-body{
  margin:0;
  background: radial-gradient(circle at 20% 20%, #eef2ff 0, #f6f7fb 45%, #eef2ff 90%);
  color: var(--ink);
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.hidden{ display:none !important; }

.public-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 22px;
  position:sticky;
  top:0;
  z-index:10;
  backdrop-filter: blur(8px);
}
.brand{
  font-family: 'Playfair Display', 'Times New Roman', serif;
  font-size: 22px;
  letter-spacing: 0.2px;
}
.header-note{
  color: var(--muted);
  font-size: 13px;
}

.public-shell{
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
}

.route{ width:100%; }
.route-code{
  display:flex;
  justify-content:center;
  padding: 30px 0 10px;
}
.code-card{
  width:100%;
  max-width:520px;
  background: var(--card);
  border:1px solid var(--border);
  box-shadow: 0 30px 80px rgba(15,23,42,0.08);
  border-radius: 20px;
  padding: 26px 24px;
}
.eyebrow{
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-size: 12px;
  color: var(--muted);
  margin:0 0 6px;
}
.code-card h1{
  margin: 0 0 10px;
  font-size: 26px;
}
.lede{
  margin:0 0 18px;
  color: var(--muted);
  line-height: 1.5;
}
.form-label{
  display:block;
  font-weight: 600;
  margin-bottom:6px;
}
.code-form{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.code-input-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.code-input{
  flex:1;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 12px;
  border:1px solid var(--border);
  font-size: 16px;
  letter-spacing: 0.6px;
}
.code-input:focus{
  outline:2px solid rgba(15,79,255,0.15);
  border-color: var(--primary);
}
.primary-btn{
  background: var(--primary);
  color:#fff;
  border:none;
  border-radius: 12px;
  padding: 12px 18px;
  font-size: 15px;
  font-weight: 600;
  cursor:pointer;
  min-width: 110px;
  transition: transform 90ms ease, box-shadow 120ms ease;
  box-shadow: 0 12px 30px rgba(15,79,255,0.2);
}
.primary-btn:disabled{
  opacity:0.6;
  cursor:not-allowed;
  box-shadow:none;
}
.primary-btn:hover:not(:disabled){
  transform: translateY(-1px);
}
.ghost-btn{
  border:1px solid var(--border);
  background: #fff;
  color: var(--ink);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  cursor:pointer;
}
.icon-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.form-error{
  margin: 4px 0 0;
  color: var(--danger);
  font-weight:600;
}

.route-seat{
  background: transparent;
}
.seat-header{
  display:flex;
  align-items:center;
  gap:14px;
  padding: 8px 4px 12px;
  flex-wrap:wrap;
}
.perf-meta{
  flex:1;
  min-width: 240px;
}
.perf-title{
  font-size: 20px;
  font-weight:700;
  margin:0;
}
.perf-details{
  color: var(--muted);
  font-size: 14px;
  margin-top: 2px;
}
.map-shell{
  border-radius: 18px;
  overflow:hidden;
  border:1px solid var(--border);
  background:#0f172a;
  box-shadow: 0 20px 50px rgba(15,23,42,0.15);
}
.map-viewport{
  position:relative;
  width:100%;
  height: calc(70vh);
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.06), rgba(255,255,255,0));
  touch-action: none;
}
.map-surface{
  position:absolute;
  top:0;
  left:0;
  transform-origin: top left;
}
#mapImage{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: contain;
  user-select:none;
  pointer-events:none;
}
.seat-layer{
  position:absolute;
  inset:0;
}
.seat-dot{
  position:absolute;
  width:22px;
  height:22px;
  border-radius: 50%;
  border:2px solid #fff;
  background: #10b981;
  color:#0f172a;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 11px;
  font-weight:700;
  cursor:pointer;
  box-shadow: 0 6px 16px rgba(15,23,42,0.25);
}
.seat-dot.unavailable{
  background:#cbd5e1;
  color:#475569;
  border-color:#e2e8f0;
  cursor:not-allowed;
  opacity:0.8;
}
.seat-dot.selected{
  background: var(--primary);
  color:#fff;
  border-color: #dbeafe;
}
.seat-dot:focus-visible{
  outline:2px solid #38bdf8;
}
.legend{
  display:flex;
  gap:16px;
  padding: 12px 16px;
  background:#fff;
  border-top:1px solid var(--border);
  color: var(--muted);
}
.legend-dot{
  width:12px;
  height:12px;
  border-radius:999px;
  display:inline-block;
  margin-right:6px;
}
.legend-dot.available{ background:#10b981; }
.legend-dot.selected{ background: var(--primary); }
.legend-dot.unavailable{ background:#cbd5e1; }

.map-empty{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#e2e8f0;
  font-weight:600;
  backdrop-filter: blur(2px);
}

.selection-drawer{
  position:sticky;
  bottom:0;
  left:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.92);
  border-top:1px solid var(--border);
  box-shadow: 0 -10px 30px rgba(15,23,42,0.08);
  backdrop-filter: blur(10px);
}
.drawer-left{
  flex:1;
  min-width:0;
}
.drawer-label{
  font-weight:600;
  font-size: 14px;
  margin-bottom:6px;
}
.chip-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:6px;
}
.chip{
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid var(--border);
  background:#fff;
  font-weight:600;
  font-size: 13px;
}
.drawer-summary{
  color: var(--muted);
  font-size: 13px;
}
.drawer-actions{
  display:flex;
  gap:8px;
}

.toast{
  position:fixed;
  bottom:16px;
  left:16px;
  background:#0f172a;
  color:#fff;
  padding:10px 12px;
  border-radius:12px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.2);
}

.modal-overlay{
  position:fixed;
  inset:0;
  background: rgba(15,23,42,0.4);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:100;
  padding:12px;
}
.modal-card{
  width:100%;
  max-width:420px;
  background:#fff;
  border-radius:16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  padding:18px 16px;
}
.modal-card h3{
  margin:0 0 6px;
}
.modal-sub{
  margin:0 0 14px;
  color: var(--muted);
}
.modal-form{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.modal-form label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-weight:600;
}
.modal-form input{
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  font-size:14px;
}
.modal-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
}
.modal-success{
  text-align:center;
  padding:10px 0 4px;
}
.modal-success button{
  margin-top:8px;
}
.required{
  color: var(--danger);
}

@media (min-width: 900px){
  .public-shell{ padding: 24px; }
  .seat-header{ padding: 10px 6px 14px; }
}

@media (max-width: 640px){
  .map-viewport{ height: 60vh; }
  .selection-drawer{ flex-direction:column; align-items:flex-start; }
  .drawer-actions{ width:100%; }
  .drawer-actions button{ flex:1; justify-content:center; }
}