/*
Theme Name: Astra Child - TicketZone
Template: astra
Version: 2.0
*/

:root{
  --bg:#ffffff; --bg2:#f7f8fa; --bg3:#eef0f4; --line:#e2e5ea;
  --ink:#11151c; --ink2:#3a4150; --muted:#6b7280;
  --indigo:#4f46e5; --indigo2:#6366f1; --indigo-soft:#eef0ff;
  --green:#16a34a; --amber:#f59e0b; --red:#dc2626;
  --map-bg:#11151c; --map-panel:#1a1f29;
  --fh:'Barlow Condensed',sans-serif; --fb:'Inter',sans-serif;
  --shadow:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.06);
  --shadow-lg:0 10px 30px rgba(16,24,40,.12);
}
/* ---- FORCE FULL WIDTH (override Astra containers) ---- */
.ast-container,
.site-content .ast-container,
#primary,
.content-area,
.site-content,
.ast-separate-container .ast-article-single,
.entry-content,
.ast-single-post .ast-article-single,
.single .site-content{
  max-width:100%!important;
  width:100%!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
}
.site-content > .ast-container{ display:block!important; }
#main, #content, .site-main{ width:100%!important; max-width:100%!important; padding:0!important; margin:0!important; }
.ast-row, .ast-grid-row{ margin:0!important; }

body{ background:var(--bg)!important; color:var(--ink)!important; font-family:var(--fb)!important; margin:0; }
.site-content,#primary,.ast-container{ max-width:100%!important; padding:0!important; margin:0!important; }
.ast-page-header,.ast-archive-description{ display:none!important; }
.site-header,.main-header-bar,.ast-mobile-header-wrap,.site-footer{ display:none!important; }
h1,h2,h3,h4,h5{ font-family:var(--fh); color:var(--ink); }
a{ color:inherit; text-decoration:none; }
svg.ic{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; }

/* ================= TOP UTILITY BAR ================= */
.tz-topbar{ position:fixed; top:0; left:0; right:0; z-index:10000;
  background:#0f0d2b; color:#c7c9e2; font-size:13px; }
.tz-topbar-inner{ max-width:1240px; margin:0 auto; padding:8px 24px;
  display:flex; align-items:center; justify-content:space-between; }
.tz-topbar-left{ display:flex; align-items:center; gap:7px; font-weight:500; }
.tz-topbar-left .ic{ width:14px; height:14px; stroke:var(--indigo2); }
.tz-topbar-links{ display:flex; gap:22px; }
.tz-topbar-links a{ color:#c7c9e2; font-weight:500; transition:.15s; }
.tz-topbar-links a:hover{ color:#fff; }

/* ================= NAVBAR ================= */
.tz-nav{ position:fixed; top:34px; left:0; right:0; z-index:9999; background:#fff;
  border-bottom:1px solid var(--line); box-shadow:var(--shadow); }
.tz-nav-inner{ max-width:1240px; margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; }
.tz-logo{ font-family:var(--fh); font-size:24px; font-weight:800; letter-spacing:.5px;
  color:var(--ink); display:flex; align-items:center; gap:8px; }
.tz-logo span{ color:var(--indigo); }
.tz-logo .ic{ width:24px; height:24px; stroke:var(--indigo); }
.tz-links{ display:flex; align-items:center; gap:26px; }
.tz-links a{ font-weight:600; font-size:15px; color:var(--ink2); transition:.15s; }
.tz-links a:hover{ color:var(--indigo); }
.tz-cart{ display:flex; align-items:center; gap:6px; background:var(--indigo); color:#fff!important;
  padding:9px 16px; border-radius:8px; font-weight:600; position:relative; }
.tz-cart:hover{ background:var(--indigo2); }
.tz-cart .ic{ stroke:#fff; }
.tz-cart-count{ background:#fff; color:var(--indigo); font-size:12px; font-weight:700;
  min-width:20px; height:20px; border-radius:50%; display:inline-flex;
  align-items:center; justify-content:center; padding:0 5px; }

/* Hamburger (hidden on desktop) */
.tz-burger{ display:none; flex-direction:column; gap:5px; background:none; border:0;
  cursor:pointer; padding:6px; }
.tz-burger span{ width:26px; height:3px; background:var(--ink); border-radius:3px; transition:.2s; }
/* ================= RUNNING TICKER ================= */
.tz-ticker{ position:fixed; top:96px; left:0; right:0; z-index:9998; overflow:hidden;
  background:linear-gradient(90deg,var(--indigo),var(--indigo2));
  color:#fff; padding:9px 0; white-space:nowrap;
  box-shadow:0 3px 10px rgba(79,70,229,.25); }
.tz-ticker-track{ display:inline-flex; animation:tz-scroll 28s linear infinite; }
.tz-ticker:hover .tz-ticker-track{ animation-play-state:paused; }
.tz-ticker-item{ font-family:var(--fb); font-weight:600; font-size:14px;
  letter-spacing:.3px; padding-right:40px; }
@keyframes tz-scroll{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}

/* Push page content below fixed topbar + nav + ticker */
body{ padding-top:132px; }
.tz-page{ padding-top:0; }

/* ================= FOOTER (Professional Indigo) ================= */
.tz-footer{ margin-top:70px; font-family:var(--fb);
  background:linear-gradient(160deg,#312e81 0%,#3730a3 45%,#4f46e5 100%);
  color:#c9cbe8; }
.tz-footer-main{ max-width:1240px; margin:0 auto; padding:56px 24px 40px; }
.tz-footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:40px; }
.tz-footer-col h4{ color:#fff; font-family:var(--fh); font-size:18px;
  font-weight:700; letter-spacing:.5px; margin:0 0 18px; text-transform:uppercase; }
.tz-footer-col a{ display:block; color:#c9cbe8; font-size:14px; margin-bottom:11px;
  transition:.15s; width:fit-content; }
.tz-footer-col a:hover{ color:#fff; transform:translateX(3px); }
.tz-footer-col p{ margin:0; font-size:14px; line-height:1.7; }

.tz-footer-logo{ display:flex; align-items:center; gap:9px; font-family:var(--fh);
  font-size:26px; font-weight:800; color:#fff; margin-bottom:16px; }
.tz-footer-logo .ic{ width:26px; height:26px; stroke:#fff; }
.tz-footer-logo span{ color:#c7d2fe; }
.tz-footer-brand p{ max-width:340px; margin-bottom:20px; }
.tz-footer-hours{ margin-top:10px!important; color:#a5b4fc; font-weight:600; }

/* Social icons */
.tz-social{ display:flex; gap:12px; }
.tz-social a{ width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center;
  transition:.2s; }
.tz-social a:hover{ background:#fff; transform:translateY(-3px); }
.tz-social svg{ width:18px; height:18px; fill:none; stroke:#fff;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.tz-social a:hover svg{ stroke:var(--indigo); }

/* Footer bottom bar */
.tz-footer-bottom{ border-top:1px solid rgba(255,255,255,.15);
  max-width:1240px; margin:0 auto; padding:20px 24px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.tz-footer-bottom p{ margin:0; font-size:13px; color:#a5b4fc; }

/* ================= RESPONSIVE ================= */
@media (max-width:900px){
  .tz-footer-grid{ grid-template-columns:1fr 1fr; gap:34px; }
  .tz-footer-brand{ grid-column:1 / -1; }
}
@media (max-width:768px){
  .tz-topbar-left{ display:none; }
  .tz-topbar-inner{ justify-content:center; }
  .tz-topbar-links{ gap:16px; font-size:12px; }

  .tz-burger{ display:flex; }
  .tz-links{ position:absolute; top:100%; left:0; right:0; flex-direction:column;
    align-items:flex-start; background:#fff; padding:0 24px; gap:0;
    max-height:0; overflow:hidden; transition:max-height .3s ease;
    border-bottom:1px solid var(--line); box-shadow:var(--shadow-lg); }
  .tz-links.open{ max-height:400px; padding:12px 24px 20px; }
  .tz-links a{ width:100%; padding:12px 0; border-bottom:1px solid var(--bg3); }
  .tz-cart{ margin-top:10px; }

  body{ padding-top:126px; }
}
@media (max-width:560px){
  .tz-footer-grid{ grid-template-columns:1fr; gap:30px; }
  .tz-footer-bottom{ flex-direction:column; text-align:center; }
  .tz-ticker-item{ font-size:13px; }
}

/* ---- BUTTONS ---- */
.tz-btn{ display:inline-flex; align-items:center; gap:8px; background:var(--indigo); color:#fff!important;
  padding:13px 26px; border-radius:10px; font-family:var(--fb); font-size:16px; font-weight:600;
  transition:.15s; border:0; cursor:pointer; }
.tz-btn:hover{ background:var(--indigo2); transform:translateY(-1px); box-shadow:var(--shadow-lg); }
.tz-btn .ic{ stroke:#fff; }
.tz-btn-ghost{ background:#fff; color:var(--indigo)!important; border:1.5px solid var(--indigo); }
.tz-btn-ghost:hover{ background:var(--indigo-soft); }

.tz-page{ padding-top:64px; }

//* ============ HOMEPAGE — FIFA WC 2026 (LIVE) ============ */
.tz-home-wrap{ width:100%; margin-top:-132px; }
.tz-home{ max-width:1240px; margin:0 auto; padding:0 24px; }

/* ===== HERO BANNER ===== */
.hp-banner{ position:relative; min-height:100vh; display:flex; align-items:center;
  overflow:hidden; margin-bottom:70px; padding-top:132px; }
.hp-banner-bg{ position:absolute; inset:0; background-color:#1a1f29;
  background-size:cover; background-position:center;
  transform:scale(1.15); animation:hp-zoom 18s ease-out forwards; }
@keyframes hp-zoom{ to{ transform:scale(1); } }
.hp-banner-overlay{ position:absolute; inset:0;
  background:linear-gradient(115deg,rgba(15,13,43,.94) 0%,rgba(49,46,129,.82) 45%,rgba(79,70,229,.55) 100%); }
.hp-banner-inner{ position:relative; z-index:2; max-width:1240px; width:100%;
  margin:0 auto; padding:60px 24px; color:#fff; }

.hp-live{ display:inline-flex; align-items:center; gap:9px; background:rgba(220,38,38,.15);
  border:1px solid rgba(248,113,113,.5); color:#fca5a5; font-weight:700; font-size:13px;
  letter-spacing:1.5px; padding:8px 16px; border-radius:30px; margin-bottom:22px; }
.hp-live .dot{ width:9px; height:9px; border-radius:50%; background:#ef4444;
  box-shadow:0 0 0 0 rgba(239,68,68,.7); animation:hp-pulse 1.6s infinite; }
@keyframes hp-pulse{ 70%{ box-shadow:0 0 0 12px rgba(239,68,68,0); } 100%{ box-shadow:0 0 0 0 rgba(239,68,68,0); } }

.hp-banner h1{ font-size:76px; line-height:1; font-weight:800; color:#fff;
  margin:0 0 20px; letter-spacing:-1px; }
.hp-accent{ background:linear-gradient(90deg,#a5b4fc,#818cf8); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent; }
.hp-banner p{ font-size:19px; line-height:1.6; max-width:560px; color:#dcdef2; margin:0 0 30px; }

.hp-cta{ display:flex; gap:14px; margin-bottom:32px; flex-wrap:wrap; }
.tz-btn-lg{ padding:16px 32px; font-size:17px; }
.tz-btn-glass{ background:rgba(255,255,255,.08)!important; color:#fff!important;
  border-color:rgba(255,255,255,.35)!important; backdrop-filter:blur(6px); }
.tz-btn-glass:hover{ background:rgba(255,255,255,.18)!important; }

.hp-trust{ display:flex; gap:26px; flex-wrap:wrap; }
.hp-trust span{ display:flex; align-items:center; gap:8px; color:#dcdef2; font-size:14px; font-weight:500; }
.hp-trust .ic{ stroke:#4ade80; width:18px; height:18px; }

/* Fade-in animations */
.hp-fade{ opacity:0; transform:translateY(24px); animation:hp-up .8s ease forwards; }
.hp-d1{ animation-delay:.15s; } .hp-d2{ animation-delay:.3s; } .hp-d3{ animation-delay:.45s; }
@keyframes hp-up{ to{ opacity:1; transform:translateY(0); } }

.hp-scroll-hint{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  width:26px; height:42px; border:2px solid rgba(255,255,255,.5); border-radius:14px; z-index:2; }
.hp-scroll-hint span{ position:absolute; top:8px; left:50%; transform:translateX(-50%);
  width:4px; height:8px; background:#fff; border-radius:2px; animation:hp-scroll 1.6s infinite; }
@keyframes hp-scroll{ 0%{opacity:0;top:8px;} 50%{opacity:1;} 100%{opacity:0;top:22px;} }

/* ===== SCROLL REVEAL ===== */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ===== URGENCY STRIP ===== */
.hp-urgency{ display:flex; align-items:center; gap:20px; padding:22px 28px;
  background:linear-gradient(100deg,#fef3f2,#fff);
  border:1px solid #fecaca; border-left:5px solid var(--red);
  border-radius:16px; margin-bottom:56px; box-shadow:var(--shadow); }
.hp-urg-ic{ flex-shrink:0; width:48px; height:48px; border-radius:12px;
  background:var(--red); display:flex; align-items:center; justify-content:center; }
.hp-urg-ic .ic{ stroke:#fff; fill:#fff; width:24px; height:24px; }
.hp-urg-text{ flex:1; }
.hp-urg-text b{ display:block; font-family:var(--fh); font-size:20px; color:var(--ink); }
.hp-urg-text span{ color:var(--ink2); font-size:14px; }

/* ===== STATS ===== */
.hp-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding:28px 30px;
  background:var(--bg2); border:1px solid var(--line); border-radius:16px; margin-bottom:70px; }
.hp-stats .st{ text-align:center; }
.hp-stats .st b{ display:block; font-family:var(--fh); font-size:44px; font-weight:800;
  color:var(--indigo); line-height:1; }
.hp-stats .st span{ color:var(--muted); font-size:14px; font-weight:500; }

/* ===== SECTIONS ===== */
.hp-section{ margin-bottom:70px; }
.hp-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; }
.hp-head h2{ font-size:36px; font-weight:700; margin:0; letter-spacing:-.3px; }
.hp-link{ display:flex; align-items:center; gap:6px; color:var(--indigo); font-weight:600; font-size:15px; transition:.2s; }
.hp-link .ic{ stroke:var(--indigo); width:16px; height:16px; }
.hp-link:hover{ gap:9px; }

/* ===== CITIES ===== */
.hp-cities{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.city{ position:relative; height:280px; border-radius:14px; overflow:hidden;
  background-size:cover; background-position:center; cursor:pointer; transition:.35s; box-shadow:var(--shadow); }
.city:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); background-size:115%; }
.city-ov{ position:absolute; inset:0; z-index:1; display:flex; flex-direction:column;
  justify-content:flex-end; padding:18px; background:linear-gradient(transparent 30%,rgba(15,13,43,.92)); }
.city-ov h3{ font-size:24px; color:#fff; margin:0 0 2px; }
.city-ov span{ color:#cfd5e0; font-size:13px; }

/* ===== STEPS ===== */
.hp-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.step{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:30px; transition:.25s; }
.step:hover{ border-color:var(--indigo); box-shadow:var(--shadow-lg); transform:translateY(-4px); }
.step-ic{ width:52px; height:52px; border-radius:12px; background:var(--indigo-soft);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px; transition:.25s; }
.step:hover .step-ic{ background:var(--indigo); }
.step:hover .step-ic .ic{ stroke:#fff; }
.step-ic .ic{ stroke:var(--indigo); width:26px; height:26px; transition:.25s; }
.step h3{ font-size:22px; margin:0 0 8px; }
.step p{ color:var(--ink2); font-size:15px; line-height:1.6; margin:0; }

/* ===== HORIZONTAL TICKETS ===== */
.hp-tickets{ display:flex; flex-direction:column; gap:18px; }
.ticket{ position:relative; display:flex; align-items:stretch; background:#fff;
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease; box-shadow:var(--shadow); }
.ticket::before{ content:''; position:absolute; top:0; left:-75%; width:50%; height:100%;
  background:linear-gradient(120deg,transparent,rgba(99,102,241,.12),transparent);
  transform:skewX(-20deg); transition:left .6s ease; z-index:3; pointer-events:none; }
.ticket:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(49,46,129,.18); border-color:var(--indigo); }
.ticket:hover::before{ left:130%; }

/* Left stub (perforated) */
.ticket-stub{ position:relative; flex-shrink:0; width:130px;
  background:linear-gradient(160deg,var(--indigo),var(--indigo2));
  color:#fff; display:flex; flex-direction:column; justify-content:center;
  align-items:center; text-align:center; padding:20px 14px; }
.ticket-stub::after{ content:''; position:absolute; top:0; right:-1px; bottom:0; width:2px;
  background-image:radial-gradient(circle,#fff 2px, transparent 2.5px);
  background-size:2px 14px; background-repeat:repeat-y; }
.ticket-stub-stage{ font-family:var(--fh); font-size:17px; font-weight:800;
  line-height:1.1; text-transform:uppercase; letter-spacing:.5px; }
.ticket-stub-date{ font-size:12px; opacity:.85; margin-top:6px; }

/* Main body */
.ticket-body{ flex:1; display:flex; align-items:center; justify-content:space-around;
  gap:16px; padding:20px 24px; }
.ticket-team{ display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; min-width:0; }
.ticket-team .fl{ font-size:44px; line-height:1; transition:transform .25s ease; }
.ticket:hover .ticket-team .fl{ transform:scale(1.15); }
.ticket-team b{ font-family:var(--fh); font-size:20px; color:var(--ink); text-align:center; line-height:1.1; }
.ticket-vs{ display:flex; flex-direction:column; align-items:center; gap:6px; flex-shrink:0; }
.ticket-vs span{ font-family:var(--fh); font-size:22px; font-weight:800;
  color:var(--indigo); background:var(--indigo-soft); width:48px; height:48px;
  border-radius:50%; display:flex; align-items:center; justify-content:center; }
.ticket-vs small{ display:flex; align-items:center; gap:4px; color:var(--muted);
  font-size:12px; white-space:nowrap; }
.ticket-vs small .ic{ stroke:var(--muted); width:13px; height:13px; }

/* Right action panel (no price) */
.ticket-action{ flex-shrink:0; width:190px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:20px;
  background:var(--bg2); border-left:1px dashed var(--line); transition:.25s; }
.ticket:hover .ticket-action{ background:var(--indigo-soft); }
.ticket-btn{ display:inline-flex; align-items:center; gap:6px;
  background:var(--indigo); color:#fff; font-weight:600; font-size:15px;
  padding:11px 22px; border-radius:8px; transition:.2s; }
.ticket-btn .ic{ stroke:#fff; width:15px; height:15px; }
.ticket:hover .ticket-btn{ background:var(--indigo2); box-shadow:0 6px 16px rgba(79,70,229,.35); }

.hp-empty{ text-align:center; color:var(--muted); padding:40px;
  border:1px dashed var(--line); border-radius:16px; }

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
  .hp-banner h1{ font-size:60px; }
  .hp-cities{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:900px){
  .hp-banner{ min-height:82vh; }
  .hp-banner h1{ font-size:48px; }
  .hp-banner p{ font-size:17px; }
  .hp-stats{ grid-template-columns:repeat(2,1fr); }
  .hp-steps{ grid-template-columns:1fr; }
  .hp-urgency{ flex-direction:column; text-align:center; }
  .ticket-action{ width:170px; }
  .ticket-team b{ font-size:17px; }
}
@media(max-width:768px){
  .tz-home-wrap{ margin-top:-126px; }
  .hp-banner{ padding-top:126px; }
}
@media(max-width:640px){
  .hp-banner h1{ font-size:38px; }
  .hp-cta{ flex-direction:column; }
  .hp-cta .tz-btn{ width:100%; justify-content:center; }
  .hp-trust{ gap:14px; }
  .hp-cities{ grid-template-columns:1fr; }

  /* Ticket → full vertical stack on mobile */
  .ticket{ flex-direction:column; }
  .ticket-stub{ width:100%; flex-direction:row; justify-content:space-between; padding:14px 20px; }
  .ticket-stub::after{ top:auto; bottom:-1px; left:0; right:0; width:100%; height:2px;
    background-image:radial-gradient(circle,#fff 2px, transparent 2.5px);
    background-size:14px 2px; background-repeat:repeat-x; }
  .ticket-body{ flex-direction:row; padding:22px 16px; }
  .ticket-action{ width:100%; border-left:0; border-top:1px dashed var(--line);
    flex-direction:row; justify-content:center; padding:16px 20px; }
}

/* ============ SINGLE MATCH PAGE (Full Redesign) ============ */
.mp2{ width:100%; margin-top:-132px; background:var(--bg2); min-height:100vh; }

/* ===== HERO ===== */
.mp2-hero{ position:relative; overflow:hidden; padding:150px 24px 60px; }
.mp2-hero-bg{ position:absolute; inset:0;
  background:linear-gradient(135deg,#0f0d2b 0%,#312e81 50%,#4f46e5 100%); }
.mp2-hero-bg::before{ content:''; position:absolute; inset:0;
  background-image:radial-gradient(circle at 18% 25%,rgba(129,140,248,.4),transparent 45%),
                   radial-gradient(circle at 82% 75%,rgba(99,102,241,.35),transparent 42%);
  animation:mp2-float 13s ease-in-out infinite alternate; }
@keyframes mp2-float{ to{ transform:translate(-4%,-3%) scale(1.1); } }
.mp2-hero-in{ position:relative; z-index:2; max-width:1000px; margin:0 auto; text-align:center; color:#fff; }

.mp2-stage{ display:inline-block; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25); color:#c7d2fe; font-size:13px; font-weight:700;
  letter-spacing:1px; text-transform:uppercase; padding:7px 18px; border-radius:30px;
  margin-bottom:34px; backdrop-filter:blur(6px); }

.mp2-matchup{ display:flex; align-items:center; justify-content:center; gap:40px; margin-bottom:34px; }
.mp2-team{ flex:1; max-width:280px; opacity:0; animation:mp2-in .7s ease forwards; }
.mp2-team:first-child{ animation-name:mp2-inL; }
.mp2-team:last-child{ animation-name:mp2-inR; }
.mp2-flag{ font-size:90px; line-height:1; display:block; margin-bottom:14px;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.35)); }
.mp2-team h2{ font-size:34px; color:#fff; margin:0; letter-spacing:-.3px; }
@keyframes mp2-inL{ from{opacity:0;transform:translateX(-40px);} to{opacity:1;transform:translateX(0);} }
@keyframes mp2-inR{ from{opacity:0;transform:translateX(40px);} to{opacity:1;transform:translateX(0);} }

.mp2-vs{ flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:6px; }
.mp2-vs span{ font-family:var(--fh); font-size:30px; font-weight:800; color:#fff;
  width:76px; height:76px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.1); border:2px solid rgba(255,255,255,.3);
  animation:mp2-pop .6s .3s ease both; }
@keyframes mp2-pop{ from{transform:scale(0);opacity:0;} to{transform:scale(1);opacity:1;} }
.mp2-vs small{ font-size:11px; letter-spacing:2px; color:#a5b4fc; font-weight:600; }
.mp2-vs small.mp2-ended{ color:#fca5a5; }

.mp2-meta{ display:flex; justify-content:center; gap:28px; flex-wrap:wrap; }
.mp2-meta span{ display:flex; align-items:center; gap:8px; color:#dcdef2; font-size:15px; font-weight:500; }
.mp2-meta .ic{ stroke:#a5b4fc; width:18px; height:18px; }

/* ===== BODY ===== */
.mp2-body{ max-width:1240px; margin:0 auto; padding:36px 24px 70px; }

/* Live status bar */
.mp2-status{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:36px; }
.mp2-stat{ display:flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--line);
  border-radius:12px; padding:14px 20px; font-size:14px; color:var(--ink2); font-weight:600; box-shadow:var(--shadow); }
.mp2-stat b{ font-family:var(--fh); font-size:20px; color:var(--ink); }
.mp2-stat .dot{ width:9px; height:9px; border-radius:50%; background:var(--green);
  box-shadow:0 0 0 0 rgba(22,163,74,.6); animation:mp2-pulse 1.8s infinite; }
@keyframes mp2-pulse{ 70%{box-shadow:0 0 0 8px rgba(22,163,74,0);} 100%{box-shadow:0 0 0 0 rgba(22,163,74,0);} }
.mp2-stat.eye .ic{ stroke:var(--amber); width:18px; height:18px; }
.mp2-stat.eye b{ color:var(--amber); }
.mp2-stat.price{ margin-left:auto; background:var(--indigo); color:#fff; border-color:var(--indigo); }
.mp2-stat.price b{ color:#fff; font-size:22px; }

/* Head + sort */
.mp2-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:26px; flex-wrap:wrap; }
.mp2-head h2{ font-size:34px; margin:0 0 4px; letter-spacing:-.3px; }
.mp2-head p{ color:var(--muted); font-size:15px; margin:0; }
.mp2-sort{ border:1.5px solid var(--line); border-radius:10px; padding:11px 14px; font-size:14px;
  font-family:var(--fb); color:var(--ink2); background:#fff; cursor:pointer; }
.mp2-sort:focus{ outline:0; border-color:var(--indigo); }

/* ===== SECTION CARDS ===== */
.mp2-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.mp2-card{ position:relative; background:#fff; border:1px solid var(--line); border-radius:18px;
  overflow:hidden; cursor:pointer; box-shadow:var(--shadow);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s;
  opacity:0; transform:translateY(22px); animation:mp2-card .5s ease forwards; animation-delay:var(--d,0s); }
@keyframes mp2-card{ to{ opacity:1; transform:translateY(0); } }
.mp2-card:hover{ transform:translateY(-6px); box-shadow:0 18px 44px rgba(49,46,129,.18); border-color:var(--indigo); }

.mp2-card-img{ position:relative; height:190px; overflow:hidden; }
.mp2-card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.mp2-card:hover .mp2-card-img img{ transform:scale(1.08); }
.mp2-card-img::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(transparent 55%,rgba(15,13,43,.5)); }
.mp2-card-tier{ position:absolute; top:12px; left:12px; z-index:2;
  background:rgba(79,70,229,.92); color:#fff; font-size:11px; font-weight:700;
  letter-spacing:.5px; text-transform:uppercase; padding:5px 11px; border-radius:20px; backdrop-filter:blur(4px); }
.mp2-card-hot{ position:absolute; top:12px; right:12px; z-index:2; display:flex; align-items:center; gap:6px;
  background:rgba(220,38,38,.95); color:#fff; font-size:11px; font-weight:700;
  padding:5px 11px; border-radius:20px; }
.mp2-card-hot .pulse{ width:7px; height:7px; border-radius:50%; background:#fff; animation:mp2-blink 1.2s infinite; }
@keyframes mp2-blink{ 0%,100%{opacity:1;} 50%{opacity:.3;} }
.mp2-card-soldout{ position:absolute; top:12px; right:12px; z-index:2;
  background:#4b5563; color:#fff; font-size:11px; font-weight:800; letter-spacing:1px;
  padding:5px 11px; border-radius:6px; }

.mp2-card-body{ padding:18px; }
.mp2-card-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:16px; }
.mp2-card-sec{ font-family:var(--fh); font-size:22px; font-weight:800; color:var(--ink); line-height:1; }
.mp2-card-note{ color:var(--muted); font-size:12px; margin-top:5px; max-width:150px; line-height:1.4; }
.mp2-card-price{ font-family:var(--fh); font-size:26px; font-weight:800; color:var(--indigo); line-height:1; white-space:nowrap; }
.mp2-card-price small{ display:block; font-size:11px; color:var(--muted); font-family:var(--fb); font-weight:500; text-align:right; margin-top:3px; }

.mp2-card-btn{ display:flex; align-items:center; justify-content:center; gap:7px; width:100%;
  background:var(--indigo); color:#fff; border:0; border-radius:10px; padding:13px;
  font-family:var(--fb); font-size:15px; font-weight:600; cursor:pointer; transition:.2s; }
.mp2-card-btn .ic{ stroke:#fff; width:16px; height:16px; transition:transform .2s; }
.mp2-card-btn:hover{ background:var(--indigo2); }
.mp2-card:hover .mp2-card-btn .ic{ transform:translateX(3px); }
.mp2-card-btn.out{ background:var(--bg3); color:var(--muted); cursor:not-allowed; }

/* Sold-out card */
.mp2-card-out{ cursor:default; }
.mp2-card-out:hover{ transform:none; box-shadow:var(--shadow); border-color:var(--line); }
.mp2-card-out .mp2-card-img img{ filter:grayscale(.9); opacity:.7; }
.mp2-card-out:hover .mp2-card-img img{ transform:none; }
.mp2-card-out .mp2-card-price{ color:var(--muted); }

/* ===== SELECTION MODAL ===== */
.mp2-selmodal{ align-items:center; }
.mp2-selbox{ position:relative; background:#fff; border-radius:22px; overflow:hidden;
  max-width:430px; width:100%; box-shadow:0 30px 70px rgba(15,13,43,.45);
  animation:mp2-modal .42s cubic-bezier(.16,1,.3,1); }
@keyframes mp2-modal{
  from{ opacity:0; transform:translateY(28px) scale(.94); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

/* Close button — true circle, centred glyph */
.mp2-selclose{ position:absolute; top:14px; right:14px; z-index:3;
  width:38px; height:38px; min-width:38px; padding:0; border:0; border-radius:50%;
  background:rgba(15,13,43,.5); color:#fff; cursor:pointer; backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; line-height:0; transition:.2s; }
.mp2-selclose::before{ content:'\00d7'; font-family:var(--fb); font-size:24px;
  font-weight:400; line-height:1; margin-top:-1px; }
.mp2-selclose:hover{ background:rgba(15,13,43,.82); transform:rotate(90deg); }

/* Image with subtle reveal */
.mp2-selbox img{ width:100%; height:210px; object-fit:cover; display:block;
  animation:mp2-imgin .55s ease; }
@keyframes mp2-imgin{ from{ transform:scale(1.08); opacity:.55; } to{ transform:scale(1); opacity:1; } }

.mp2-selbody{ padding:24px 26px 26px; }
.mp2-seltier{ display:inline-block; background:var(--indigo-soft); color:var(--indigo);
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.8px;
  padding:6px 13px; border-radius:20px; margin-bottom:14px; }
.mp2-selname{ font-family:var(--fh); font-size:28px; font-weight:800; color:var(--ink);
  line-height:1; letter-spacing:-.3px; }

/* Price — currency sign sized to the number */
.mp2-selprice{ display:flex; align-items:flex-start; margin:14px 0 8px;
  font-family:var(--fh); font-weight:800; color:var(--indigo); line-height:1; }
.mp2-selprice .cur{ font-size:20px; font-weight:700; margin-top:5px; margin-right:2px; }
.mp2-selprice #selPrice{ font-size:40px; }
.mp2-selprice small{ align-self:flex-end; font-size:14px; color:var(--muted);
  font-family:var(--fb); font-weight:500; margin:0 0 5px 5px; }

/* Availability line */
.mp2-selleft{ display:flex; align-items:center; gap:8px; color:var(--green);
  font-size:14px; font-weight:600; margin-bottom:22px; }
.mp2-selleft::before{ content:''; width:8px; height:8px; border-radius:50%;
  background:var(--green); box-shadow:0 0 0 3px rgba(22,163,74,.15); }

/* Quantity — no cropping, no spinners */
.mp2-selqty{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.mp2-selqty span{ font-weight:600; color:var(--ink2); font-size:15px; }
.qbox{ display:flex; align-items:stretch; border:1.5px solid var(--line);
  border-radius:12px; overflow:hidden; background:#fff; }
.qbox button{ width:46px; height:48px; border:0; background:var(--bg2);
  font-size:22px; font-weight:600; cursor:pointer; color:var(--ink2);
  display:flex; align-items:center; justify-content:center; line-height:1; transition:.15s; }
.qbox button:hover{ background:var(--indigo); color:#fff; }
.qbox input{ width:56px; height:48px; border:0; background:#fff; color:var(--ink);
  text-align:center; font-family:var(--fb); font-size:18px; font-weight:700;
  line-height:48px; padding:0; margin:0; box-sizing:border-box;
  -moz-appearance:textfield; appearance:textfield; }
.qbox input::-webkit-outer-spin-button,
.qbox input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* Order summary (with taxes) */
.mp2-summary{ background:var(--bg2); border:1px solid var(--line); border-radius:14px;
  padding:16px 18px; margin-bottom:18px; }
.mp2-sum-title{ font-family:var(--fh); font-size:15px; font-weight:700; color:var(--ink);
  text-transform:uppercase; letter-spacing:.5px; margin-bottom:12px; }
.mp2-sum-row{ display:flex; justify-content:space-between; align-items:center;
  font-size:14px; margin-bottom:10px; }
.mp2-sum-row span:first-child{ color:var(--ink2); font-weight:500; }
.mp2-sum-row .v{ color:var(--ink2); font-weight:500; }
.mp2-sum-row .v em{ font-style:normal; color:var(--muted); }
.mp2-sum-row .v b{ font-weight:700; color:var(--ink); font-family:var(--fb); }
.mp2-sum-total{ display:flex; justify-content:space-between; align-items:center;
  padding-top:14px; margin-top:2px; border-top:1px dashed var(--line); }
.mp2-sum-total span{ font-size:15px; font-weight:700; color:var(--ink2); }
.mp2-sum-total b{ font-family:var(--fh); font-size:26px; font-weight:800; color:var(--indigo); line-height:1; }

/* ===== ENDED / SOLD OUT STATE ===== */
.mp2-ended-box{ background:#fff; border:1px solid var(--line); border-radius:20px;
  padding:60px 40px; text-align:center; max-width:520px; margin:20px auto; box-shadow:var(--shadow); }
.mp2-ended-ic{ width:88px; height:88px; margin:0 auto 20px; border-radius:50%;
  background:#fef2f2; display:flex; align-items:center; justify-content:center; }
.mp2-ended-box h2{ font-size:30px; margin:0 0 10px; }
.mp2-ended-box p{ color:var(--ink2); font-size:16px; line-height:1.6; margin:0 0 26px; }

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
  .mp2-grid{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:768px){
  .mp2{ margin-top:-126px; }
  .mp2-hero{ padding:140px 24px 50px; }
  .mp2-matchup{ gap:20px; }
  .mp2-flag{ font-size:64px; }
  .mp2-team h2{ font-size:24px; }
  .mp2-vs span{ width:60px; height:60px; font-size:24px; }
  .mp2-meta{ gap:16px; }
  .mp2-meta span{ font-size:14px; }
  .mp2-stat.price{ margin-left:0; }
  .mp2-head h2{ font-size:28px; }
}
@media(max-width:560px){
  .mp2-grid{ grid-template-columns:1fr; }
  .mp2-matchup{ flex-wrap:wrap; }
  .mp2-team{ max-width:120px; }
  .mp2-flag{ font-size:52px; }
  .mp2-team h2{ font-size:19px; }
  .mp2-vs{ order:3; width:100%; margin-top:8px; }
  .mp2-vs span{ width:52px; height:52px; font-size:20px; }
  .mp2-status{ flex-direction:column; }
  .mp2-stat{ width:100%; }
}

/* ============ MATCHES LISTING (Pro) ============ */
.ml-wrap{ width:100%; margin-top:-132px; }
.ml{ max-width:1240px; margin:0 auto; padding:0 24px; }

/* ===== HERO ===== */
.ml-hero{ position:relative; overflow:hidden; padding:132px 24px 70px;
  margin-bottom:40px; }
.ml-hero-bg{ position:absolute; inset:0;
  background:linear-gradient(135deg,#0f0d2b 0%,#312e81 50%,#4f46e5 100%); }
.ml-hero-bg::before{ content:''; position:absolute; inset:0;
  background-image:radial-gradient(circle at 20% 30%,rgba(129,140,248,.35),transparent 45%),
                   radial-gradient(circle at 85% 70%,rgba(99,102,241,.3),transparent 40%);
  animation:ml-float 12s ease-in-out infinite alternate; }
@keyframes ml-float{ to{ transform:translate(-4%,-3%) scale(1.1); } }
.ml-hero-in{ position:relative; z-index:2; max-width:1240px; margin:0 auto; color:#fff; }

.ml-live-badge{ display:inline-flex; align-items:center; gap:9px;
  background:rgba(220,38,38,.15); border:1px solid rgba(248,113,113,.5);
  color:#fca5a5; font-weight:700; font-size:13px; letter-spacing:1.5px;
  padding:8px 16px; border-radius:30px; margin-bottom:22px; }
.ml-live-badge .dot{ width:9px; height:9px; border-radius:50%; background:#ef4444;
  box-shadow:0 0 0 0 rgba(239,68,68,.7); animation:ml-pulse 1.6s infinite; }
@keyframes ml-pulse{ 70%{ box-shadow:0 0 0 12px rgba(239,68,68,0); } 100%{ box-shadow:0 0 0 0 rgba(239,68,68,0); } }

.ml-hero h1{ font-size:60px; line-height:1.02; font-weight:800; color:#fff;
  margin:0 0 16px; letter-spacing:-.5px; }
.ml-hero p{ color:#dcdef2; font-size:17px; max-width:600px; margin:0 0 34px; line-height:1.6; }

/* Hero stats */
.ml-hero-stats{ display:flex; gap:40px; flex-wrap:wrap; margin-bottom:34px; }
.ml-hs b{ display:block; font-family:var(--fh); font-size:42px; font-weight:800;
  color:#fff; line-height:1; }
.ml-hs b.live{ color:#4ade80; }
.ml-hs span{ color:#a5b4fc; font-size:13px; font-weight:500; }

/* Search (on hero) */
.ml-search{ display:flex; align-items:center; gap:10px; background:#fff;
  border:1.5px solid transparent; border-radius:12px; padding:0 16px; max-width:560px;
  box-shadow:0 10px 30px rgba(15,13,43,.3); transition:.15s; }
.ml-search:focus-within{ box-shadow:0 10px 30px rgba(79,70,229,.4); }
.ml-search .ic{ stroke:var(--muted); }
.ml-search input{ flex:1; border:0; outline:0; padding:16px 0; font-size:16px;
  font-family:var(--fb); background:transparent; color:var(--ink); }

/* Fade-in */
.ml-fade{ opacity:0; transform:translateY(22px); animation:ml-up .7s ease forwards; }
.ml-d1{ animation-delay:.12s; } .ml-d2{ animation-delay:.24s; } .ml-d3{ animation-delay:.36s; }
@keyframes ml-up{ to{ opacity:1; transform:translateY(0); } }

/* ===== TABS ===== */
.ml-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:30px; }
.ml-tab{ display:inline-flex; align-items:center; gap:8px; background:#fff;
  border:1.5px solid var(--line); color:var(--ink2); padding:10px 16px;
  border-radius:30px; font-family:var(--fb); font-size:14px; font-weight:600;
  cursor:pointer; transition:.15s; }
.ml-tab:hover{ border-color:var(--indigo); color:var(--indigo); }
.ml-tab.active{ background:var(--indigo); border-color:var(--indigo); color:#fff; }
.ml-tab-n{ font-size:12px; font-weight:700; background:var(--bg3); color:var(--ink2);
  min-width:22px; height:22px; padding:0 6px; border-radius:20px;
  display:inline-flex; align-items:center; justify-content:center; }
.ml-tab:hover .ml-tab-n{ background:var(--indigo-soft); color:var(--indigo); }
.ml-tab.active .ml-tab-n{ background:rgba(255,255,255,.25); color:#fff; }

/* ===== TICKETS LIST (horizontal) ===== */
.ml-list{ display:flex; flex-direction:column; gap:16px; padding-bottom:60px; }

.mlt{ position:relative; display:flex; align-items:stretch; background:#fff;
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow); transition:transform .25s ease, box-shadow .25s ease, border-color .25s;
  opacity:0; transform:translateY(18px); animation:mlt-in .5s ease forwards; animation-delay:var(--delay,0s); }
@keyframes mlt-in{ to{ opacity:1; transform:translateY(0); } }
.mlt::before{ content:''; position:absolute; top:0; left:-75%; width:50%; height:100%;
  background:linear-gradient(120deg,transparent,rgba(99,102,241,.12),transparent);
  transform:skewX(-20deg); transition:left .6s ease; z-index:3; pointer-events:none; }
.mlt:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(49,46,129,.16); border-color:var(--indigo); }
.mlt:hover::before{ left:130%; }

/* Left stub */
.mlt-stub{ position:relative; flex-shrink:0; width:150px;
  background:linear-gradient(160deg,var(--indigo),var(--indigo2));
  color:#fff; display:flex; flex-direction:column; justify-content:center;
  align-items:center; text-align:center; gap:8px; padding:20px 14px; }
.mlt-stub::after{ content:''; position:absolute; top:0; right:-1px; bottom:0; width:2px;
  background-image:radial-gradient(circle,#fff 2px,transparent 2.5px);
  background-size:2px 14px; background-repeat:repeat-y; }
.mlt-stub-stage{ font-family:var(--fh); font-size:16px; font-weight:800;
  line-height:1.15; text-transform:uppercase; letter-spacing:.5px; }
.mlt-stub-stage small{ font-size:12px; font-weight:600; opacity:.85; }
.mlt-stub-no{ font-size:12px; opacity:.8; font-weight:600; }

/* Body */
.mlt-body{ flex:1; display:flex; flex-direction:column; justify-content:center;
  gap:14px; padding:20px 24px; min-width:0; }
.mlt-teams{ display:flex; align-items:center; gap:20px; }
.mlt-teams .tm{ display:flex; align-items:center; gap:12px; flex:1; min-width:0; }
.mlt-teams .tm:last-child{ flex-direction:row-reverse; text-align:right; }
.mlt-teams .fl{ font-size:42px; line-height:1; transition:transform .25s; flex-shrink:0; }
.mlt:hover .mlt-teams .fl{ transform:scale(1.12); }
.mlt-teams .tm b{ font-family:var(--fh); font-size:22px; color:var(--ink); line-height:1.1; }
.mlt-teams .vs{ flex-shrink:0; font-family:var(--fh); font-weight:800; font-size:15px;
  color:var(--indigo); background:var(--indigo-soft); width:44px; height:44px;
  border-radius:50%; display:flex; align-items:center; justify-content:center; }

.mlt-meta{ display:flex; flex-wrap:wrap; gap:8px 22px; }
.mlt-meta span{ display:flex; align-items:center; gap:7px; color:var(--ink2); font-size:13px; font-weight:500; }
.mlt-meta .ic{ stroke:var(--indigo); width:15px; height:15px; flex-shrink:0; }

/* Right action */
.mlt-action{ flex-shrink:0; width:200px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px; padding:20px;
  background:var(--bg2); border-left:1px dashed var(--line); transition:.25s; }
.mlt:hover .mlt-action{ background:var(--indigo-soft); }
.mlt-btn{ display:inline-flex; align-items:center; gap:6px; background:var(--indigo);
  color:#fff; font-weight:600; font-size:14px; padding:11px 20px; border-radius:8px; transition:.2s; }
.mlt-btn .ic{ stroke:#fff; width:15px; height:15px; }
.mlt:hover .mlt-btn{ background:var(--indigo2); box-shadow:0 6px 16px rgba(79,70,229,.35); }

/* Urgency (in action panel) */
.mlt-urg{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700;
  padding:6px 12px; border-radius:20px; }
.mlt-urg.crit{ background:#fef2f2; color:#dc2626; border:1px solid #fecaca; }
.mlt-urg.hot{ background:#fff7ed; color:#ea580c; border:1px solid #fed7aa; }
.mlt-urg.avail{ background:#f0fdf4; color:#16a34a; border:1px solid #bbf7d0; }
.mlt-urg .pulse{ width:8px; height:8px; border-radius:50%; background:currentColor; animation:tzpulse 1.2s infinite; }
@keyframes tzpulse{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }

/* Sold out state */
.mlt-ended{ opacity:.62; filter:grayscale(.85); cursor:not-allowed; }
.mlt-ended:hover{ transform:none!important; box-shadow:var(--shadow)!important; border-color:var(--line)!important; }
.mlt-ended::before{ display:none; }
.mlt-ended .mlt-stub{ background:linear-gradient(160deg,#9ca3af,#6b7280); }
.mlt-soldout{ background:var(--red); color:#fff; font-size:12px; font-weight:800;
  letter-spacing:1px; padding:6px 14px; border-radius:6px; }
.mlt-ended-txt{ color:var(--muted); font-size:13px; font-weight:600; }

.ml-empty,.ml-none{ text-align:center; color:var(--muted); padding:60px;
  font-size:16px; border:1px dashed var(--line); border-radius:16px; }

/* ===== TICKETS RESPONSIVE ===== */
@media(max-width:820px){
  .mlt-stub{ width:120px; }
  .mlt-action{ width:170px; }
  .mlt-teams .tm b{ font-size:18px; }
  .mlt-teams .fl{ font-size:36px; }
}
@media(max-width:640px){
  /* Stack the ticket vertically on mobile */
  .mlt{ flex-direction:column; }
  .mlt-stub{ width:100%; flex-direction:row; justify-content:space-between; padding:14px 20px; }
  .mlt-stub::after{ top:auto; bottom:-1px; left:0; right:0; width:100%; height:2px;
    background-image:radial-gradient(circle,#fff 2px,transparent 2.5px);
    background-size:14px 2px; background-repeat:repeat-x; }
  .mlt-stub-stage{ font-size:15px; text-align:left; }
  .mlt-teams{ flex-direction:column; gap:14px; }
  .mlt-teams .tm,.mlt-teams .tm:last-child{ flex-direction:column; text-align:center; }
  .mlt-teams .vs{ order:2; }
  .mlt-action{ width:100%; border-left:0; border-top:1px dashed var(--line);
    flex-direction:row; justify-content:space-between; padding:16px 20px; }
}

/* ===== RESPONSIVE ===== */
@media(max-width:1100px) and (min-width:901px){
  .ml-grid{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:900px){
  .ml-hero{ padding:132px 24px 50px; }
  .ml-hero h1{ font-size:42px; }
  .ml-hero-stats{ gap:26px; }
  .ml-hs b{ font-size:34px; }
  .ml-grid{ grid-template-columns:1fr; }
}
@media(max-width:768px){
  .ml-wrap{ margin-top:-126px; }
  .ml-hero{ padding:126px 24px 44px; }
}
@media(max-width:560px){
  .ml-hero h1{ font-size:34px; }
  .ml-hero-stats{ gap:18px 26px; }
  .ml-hs b{ font-size:28px; }
  .mlc-teams .fl{ font-size:38px; }
  .mlc-teams .tm b{ font-size:17px; }
}
/* LIVE TICKER (product page) */
.mp-livewrap{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.mp-viewers{ display:flex; align-items:center; gap:6px; color:#fbbf24; background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.3); padding:6px 14px; border-radius:20px; font-size:13px; font-weight:600; }
.mp-viewers .ic{ width:15px; height:15px; }

/* RESERVATION MODAL */
.tz-modal{ position:fixed; inset:0; z-index:100000; background:rgba(10,12,18,.6); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; padding:20px; }
.tz-modal.on{ display:flex; }
.tz-modal-box{ background:#fff; border-radius:18px; padding:34px; max-width:400px; width:100%; text-align:center; box-shadow:var(--shadow-lg); animation:tzpop .25s ease; }
@keyframes tzpop{ from{transform:scale(.9);opacity:0} to{transform:scale(1);opacity:1} }
.tz-modal-ic{ width:80px; height:80px; margin:0 auto 16px; border-radius:50%; background:#dcfce7; display:flex; align-items:center; justify-content:center; }
.tz-modal-box h3{ font-size:26px; margin:0 0 8px; }
.tz-modal-box p{ color:var(--ink2); font-size:15px; margin:0 0 18px; line-height:1.5; }
.tz-modal-timer{ font-family:var(--fh); font-size:48px; font-weight:800; color:var(--indigo); margin-bottom:20px; letter-spacing:1px; }
.tz-modal-cancel{ background:none; border:0; color:var(--muted); font-size:14px; margin-top:12px; cursor:pointer; text-decoration:underline; }
.tz-modal-cancel:hover{ color:var(--ink); }