
:root{
  --brand-turquoise:#14b8a6; /* teal-500 */
  --brand-blue:#0b3b91;      /* royal/dark blue for 'Tickets' */
  --bg:#f7fafc;
}
*{box-sizing:border-box}
body{
  margin:0; font-family: ui-rounded, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:#111827; background:var(--bg);
}
header.hero{
  position:relative; min-height:34vh; display:grid; place-items:center; text-align:center; overflow:hidden;
}
header.hero img{
  width:100%; height:100%; object-fit:cover; position:absolute; inset:0; filter:saturate(1.05);
}
header.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.86) 70%);
}
header.hero .brand{
  position:relative; z-index:1; margin-top:4vh;
}
h1{font-size:clamp(28px,6vw,56px); margin:.2rem 0 .3rem}
h1 .goeco{color:var(--brand-turquoise); font-weight:800}
h1 .tickets{color:var(--brand-blue); font-weight:800}
.sub{opacity:.8; font-size:clamp(14px,2.8vw,18px)}
.main{
  max-width:980px; margin:-36px auto 32px; padding:0 16px;
}
.card{
  background:#fff; border-radius:18px; box-shadow:0 6px 28px rgba(2, 6, 23, .08); padding:16px;
}
.tabrow{display:flex; gap:12px; padding:6px; border-radius:999px; background:#eef2ff; width:max-content; margin:0 auto 12px}
.tabrow .tab{appearance:none; border:none; background:transparent; padding:10px 14px; border-radius:999px; font-weight:600}
.tabrow .tab.active{background:#fff; box-shadow:0 1px 0 rgba(0,0,0,.05)}
.grid{display:grid; gap:12px; grid-template-columns:1fr}
@media(min-width:720px){ .grid{grid-template-columns:1fr 1fr} }
.input{
  position:relative;
}
.input input, .input select{
  width:100%; border:1px solid #e5e7eb; padding:14px 14px; border-radius:12px; font-size:16px;
}
.label{font-size:13px; font-weight:700; color:#374151; margin:4px 2px}
.dropdown{
  position:absolute; z-index:40; left:0; right:0; top:calc(100% + 4px); background:white;
  border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 12px 36px rgba(0,0,0,.08); max-height:260px; overflow:auto; display:none;
}
.dropdown.show{display:block}
.dropdown div{padding:10px 12px; cursor:pointer; border-bottom:1px solid #f3f4f6}
.dropdown div:last-child{border-bottom:none}
.dropdown b{color:#111827}
.actions{display:flex; gap:12px; justify-content:flex-end; margin-top:8px}
button.primary{
  background:linear-gradient(135deg, var(--brand-turquoise), #06b6d4);
  color:#ffffff; font-weight:800; border:none; border-radius:12px; padding:14px 18px; cursor:pointer
}
.badges{display:flex; justify-content:center; padding:8px 0 0}
footer{padding:24px 16px 48px; text-align:center; color:#6b7280}
.hidden{display:none}
