:root{
  --bg-black:#121212;
  --charcoal:#1E1E1E;
  --charcoal-light:#2A2A2A;
  --gold:#E5A93B;
  --gold-dark:#C98F27;
  --white:#F5F5F5;
  --muted:#9B9B9B;
  --whatsapp:#25D366;
  --radius:14px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html,body{
  background:var(--bg-black);
  color:var(--white);
  font-family:'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
  overflow-x:hidden;
}
body{padding-bottom:110px;}

header{
  display:flex; align-items:center; gap:12px;
  padding:18px 16px 14px;
  background:linear-gradient(180deg, #171717, #121212);
  border-bottom:1px solid #2c2c2c;
}
.logo-svg{width:46px; height:46px; flex-shrink:0;}
.brand-text{display:flex; flex-direction:column;}
.brand-text h1{font-size:20px; letter-spacing:0.5px; color:var(--white);}
.brand-text h1 span{color:var(--gold);}
.brand-text small{color:var(--muted); font-size:11px; letter-spacing:0.5px;}

.container{padding:16px;}
.card{
  background:var(--charcoal);
  border-radius:var(--radius);
  padding:16px;
  margin-bottom:16px;
  border:1px solid #2b2b2b;
}
.card h2{
  font-size:15px; color:var(--gold); margin-bottom:12px;
  display:flex; align-items:center; gap:8px;
}
.step-num{
  background:var(--gold); color:#1a1a1a;
  width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700;
}

label{display:block; font-size:12px; color:var(--muted); margin:10px 0 6px;}

select, input[type="text"]{
  width:100%; padding:13px 12px;
  background:var(--charcoal-light);
  border:1px solid #3a3a3a; border-radius:10px;
  color:var(--white); font-size:14px; outline:none;
  -webkit-appearance:none; appearance:none;
}
select:focus, input[type="text"]:focus{border-color:var(--gold);}
select:disabled{opacity:0.5; color:var(--muted);}

.select-wrap{position:relative;}
.select-wrap::after{
  content:"▾"; position:absolute; right:14px; top:50%;
  transform:translateY(-50%); color:var(--gold);
  pointer-events:none; font-size:14px;
}

.tier-wrap{
  display:none;
  background:#181818;
  border:1px dashed #3a3a3a;
  border-radius:10px;
  padding:8px 10px 4px;
  margin-top:8px;
}
.tier-wrap.show{display:block;}

.btn-primary{
  width:100%; margin-top:16px; padding:14px;
  background:var(--gold); color:#1a1a1a;
  border:none; border-radius:10px;
  font-size:15px; font-weight:700; letter-spacing:0.3px;
  cursor:pointer; transition:transform 0.15s ease, background 0.2s ease;
}
.btn-primary:active{transform:scale(0.97); background:var(--gold-dark);}

.btn-locate{
  width:100%;
  padding:12px;
  margin-bottom:14px;
  background:var(--charcoal-light);
  border:1px solid var(--gold);
  color:var(--gold);
  border-radius:10px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}
.btn-locate:active{background:var(--gold); color:#1a1a1a;}

.no-ticket-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
}
.no-ticket-row input[type="checkbox"]{
  width:18px; height:18px;
  accent-color:var(--gold);
}
.inline-label{
  margin:0;
  font-size:12px;
  color:var(--muted);
}

.hint-box{
  margin-top:10px; font-size:12px; color:var(--muted);
  background:#181818; border-left:3px solid var(--gold);
  padding:8px 10px; border-radius:6px; display:none;
}
.hint-box.show{display:block;}

#menuSection{display:none;}
#menuSection.show{display:block;}

.kiosk-banner{
  background:linear-gradient(135deg, #2A2110, #1E1E1E);
  border:1px solid var(--gold); border-radius:10px;
  padding:10px 12px; margin-bottom:14px; font-size:13px;
}
.kiosk-banner b{color:var(--gold);}
.btn-directions{
  display:block; margin-top:8px;
  background:var(--gold); color:#1a1a1a;
  border:none; padding:8px 12px; border-radius:8px;
  font-size:12px; font-weight:700; cursor:pointer;
}

.menu-category{
  font-size:12px; text-transform:uppercase; letter-spacing:1px;
  color:var(--muted); margin:16px 0 8px;
}
.menu-item{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--charcoal-light); border-radius:12px;
  padding:12px; margin-bottom:10px; border:1px solid #333;
}
.item-info{flex:1; padding-right:10px;}
.item-info .name{font-size:14px; font-weight:600; color:var(--white);}
.item-info .price{font-size:13px; color:var(--gold); margin-top:2px;}

.qty-control{display:flex; align-items:center; gap:10px;}
.qty-btn{
  width:32px; height:32px; border-radius:50%;
  border:1px solid var(--gold); background:transparent;
  color:var(--gold); font-size:18px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; user-select:none;
}
.qty-btn:active{background:var(--gold); color:#1a1a1a;}
.qty-val{min-width:20px; text-align:center; font-size:15px; font-weight:700;}

.map-modal{
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.85); z-index:1000;
  align-items:center; justify-content:center; padding:16px;
}
.map-modal.show{display:flex;}
.map-modal-content{
  background:var(--charcoal); border-radius:14px;
  border:1px solid var(--gold); width:100%; max-width:360px; padding:14px;
}
.map-header{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:10px; font-weight:700; color:var(--gold);
}
.map-header button{background:none; border:none; color:var(--white); font-size:18px; cursor:pointer;}
#stadiumMapSvg{width:100%; height:auto; background:#181818; border-radius:10px; border:1px solid #333;}
.map-directions-text{
  margin-top:10px; font-size:13px; color:var(--muted); line-height:1.5;
  background:#181818; padding:10px; border-radius:8px; border-left:3px solid var(--gold);
}

#summaryBar{
  position:fixed; bottom:0; left:0; right:0;
  background:#161616; border-top:1px solid var(--gold);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  display:none; box-shadow:0 -4px 14px rgba(0,0,0,0.5); z-index:999;
}
#summaryBar.show{display:block;}
.summary-row{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:8px; font-size:13px; color:var(--muted);
}
.summary-row .val{color:var(--white); font-weight:600;}
.summary-total{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;}
.summary-total .label{font-size:13px; color:var(--muted);}
.summary-total .amount{font-size:22px; font-weight:800; color:var(--gold);}

.btn-whatsapp{
  width:100%; padding:15px; background:var(--whatsapp); color:#fff;
  border:none; border-radius:10px; font-size:15px; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
}
.btn-whatsapp:disabled{opacity:0.4;}

footer{text-align:center; color:#555; font-size:11px; padding:20px 0 10px;}