/* ticketro.pl — Mostbet PL. Design tokens first, single-file & lean. */
:root{
  --bg:#0b2c5c; --bg-elev:#0e3873; --bg-card:#124588; --text:#f4f5f7; --muted:rgba(244,245,247,.72);
  --accent:#ff7a1a; --accent-2:#ffc528; --line:rgba(244,245,247,.16); --radius:14px; --wrap:1120px;
  --header-bg:rgba(11,44,92,.92);
  --go-modal-bg:#0e3873; --go-modal-text:#f4f5f7; --go-modal-accent:#ff7a1a;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px;
  --z-dropdown:100; --z-sticky:200; --z-overlay:900; --z-modal:1000; --z-toast:1100;
  /* elevation system — layered shadows by depth level, dark-theme tuned */
  --shadow-sm:0 1px 2px rgba(0,0,0,.35),0 1px 1px rgba(0,0,0,.25);
  --shadow-md:0 6px 16px rgba(0,0,0,.38),0 2px 6px rgba(0,0,0,.28);
  --shadow-lg:0 16px 40px rgba(0,0,0,.5),0 6px 16px rgba(0,0,0,.32);
  --shadow-cta:0 6px 16px rgba(255,122,26,.32),0 2px 6px rgba(0,0,0,.35);
  --shadow-cta-hover:0 10px 26px rgba(255,122,26,.42),0 4px 10px rgba(0,0,0,.4);
  --shadow-cta-active:0 2px 6px rgba(255,122,26,.3),0 1px 2px rgba(0,0,0,.3);
  --highlight-top:inset 0 1px 0 rgba(244,245,247,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--text);
  background:
    radial-gradient(1100px 560px at 12% -8%,rgba(255,122,26,.09),transparent 60%),
    radial-gradient(900px 480px at 100% 0%,rgba(255,197,40,.06),transparent 55%),
    linear-gradient(180deg,var(--bg-elev) 0%,var(--bg) 420px);
  background-color:var(--bg);
  font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
.prose img{border-radius:var(--radius);box-shadow:var(--shadow-md);border:1px solid var(--line)}
a{color:var(--accent-2)}
h1,h2,h3{line-height:1.2;margin:0 0 .5em;font-weight:800;color:var(--text)}
h1{font-size:clamp(1.9rem,4vw + 1rem,3rem)}
.container{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
.muted{color:var(--muted)}
.skip-link{position:absolute;left:-999px;top:0;background:var(--accent);color:#12151c;padding:10px 16px;z-index:var(--z-toast);font-weight:700}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}

/* ===== Header ===== */
.site-header{position:sticky;top:0;z-index:var(--z-sticky);
  background:linear-gradient(180deg,var(--header-bg),rgba(24,28,38,.92));
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);box-shadow:var(--shadow-md)}
.header-inner{display:flex;align-items:center;gap:18px;height:64px}
.brand{color:var(--text);text-decoration:none;font-weight:800;letter-spacing:.02em;display:inline-flex;align-items:center;gap:8px}
.brand-text{font-size:1.3rem;font-weight:800;color:var(--text)}
.brand-text-accent{color:var(--accent-2)}
.site-nav{display:flex;gap:6px;margin-left:auto}
.site-nav a{color:var(--text);text-decoration:none;padding:8px 12px;border-radius:8px;font-weight:600;transition:background-color .15s,color .15s}
.site-nav a:hover,.site-nav a:focus-visible{background:var(--bg-elev);color:var(--accent-2)}
.nav-toggle{display:none;background:transparent;border:1px solid var(--line);color:var(--text);border-radius:8px;padding:8px 12px;font-size:1.1rem;cursor:pointer}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;padding:12px 22px;border-radius:10px;border:1px solid transparent;cursor:pointer;white-space:nowrap;text-decoration:none;min-height:44px;
  transition:transform .15s ease,box-shadow .15s ease,filter .15s ease,background-color .15s ease}
.btn-cta{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#171008;
  box-shadow:var(--shadow-cta),var(--highlight-top)}
.btn-cta:hover,.btn-cta:focus-visible{filter:brightness(1.08);transform:translateY(-2px);box-shadow:var(--shadow-cta-hover),var(--highlight-top)}
.btn-cta:active{transform:translateY(0);filter:brightness(.98);box-shadow:var(--shadow-cta-active),var(--highlight-top)}
.btn-outline{border-color:var(--line);color:var(--text);background:var(--bg-card);box-shadow:var(--shadow-sm)}
.btn-outline:hover,.btn-outline:focus-visible{background:var(--bg-elev);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-outline:active{transform:translateY(0);box-shadow:var(--shadow-sm)}

section{padding:var(--space-12) 0}

/* ===== Hero ===== */
.hero{padding:clamp(40px,6vw,72px) 0 clamp(28px,4vw,48px);position:relative;
  background-image:
    linear-gradient(90deg,var(--bg) 0%,rgba(11,44,92,.78) 45%,rgba(11,44,92,.25) 85%),
    url(../img/hero-mostbet-blue.webp);
  background-repeat:no-repeat,no-repeat;
  background-position:center,right center;
  background-size:auto,cover}
.hero-grid{display:grid;gap:24px;align-items:center;max-width:none}
.hero .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--accent-2);font-weight:700;
  font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
.hero p.lead{font-size:1.1rem;color:var(--muted)}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:20px}
.hero-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--bg-card);border:1px solid var(--line);
  border-radius:999px;padding:6px 14px;font-size:.82rem;color:var(--muted)}
.pill strong{color:var(--text)}
.btn-lg{padding:14px 26px;font-size:1.02rem}

/* ===== Slots grid (tiles, no horizontal scroll, mobile-reflow) ===== */
.slots-top{padding-top:clamp(24px,3vw,40px)}
.section-head{max-width:720px;margin:0 0 24px}
.section-head p{color:var(--muted)}
.slots-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(96px,22vw,150px),1fr));gap:10px}
@media (min-width:600px){.slots-grid{gap:14px}}
.slot-card{position:relative;display:block;aspect-ratio:2/3;border-radius:var(--radius);overflow:hidden;
  background:var(--bg-card);border:1px solid var(--line);cursor:pointer}
.slot-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.slot-card::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,21,28,0) 45%,rgba(18,21,28,.88) 100%);
  opacity:0;transition:opacity .2s ease}
.slot-play{position:absolute;left:50%;bottom:10px;transform:translate(-50%,8px);opacity:0;
  transition:opacity .2s ease,transform .2s ease;white-space:nowrap;z-index:1;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#171008;
  font-weight:700;font-size:.8rem;padding:7px 16px;border-radius:999px}
.slot-card:hover img{transform:scale(1.06)}
.slot-card:hover::after,.slot-card:focus-visible::after{opacity:1}
.slot-card:hover .slot-play,.slot-card:focus-visible .slot-play{opacity:1;transform:translate(-50%,0)}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(180deg,var(--bg-card),rgba(29,34,48,.85));
  box-shadow:var(--shadow-md),var(--highlight-top)}
table{width:100%;border-collapse:collapse;min-width:520px}
th,td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line)}
thead th{background:rgba(244,245,247,.04)}
tbody tr{transition:background-color .15s}
tbody tr:hover{background:rgba(244,245,247,.035)}
@media (max-width:640px){
  table.stack,table.stack thead,table.stack tbody,table.stack tr,table.stack td{display:block}
  table.stack{min-width:0}
  table.stack thead{display:none}
  table.stack tr{margin-bottom:var(--space-3);border:1px solid var(--line);border-radius:var(--radius);
    background:linear-gradient(180deg,rgba(244,245,247,.035),transparent);box-shadow:var(--shadow-sm)}
  table.stack td{display:flex;justify-content:space-between;gap:var(--space-3);padding:10px 14px}
  table.stack td::before{content:attr(data-label);font-weight:600;color:var(--muted)}
}
.prose{font-size:1.08rem;line-height:1.75}
.prose details{background:linear-gradient(180deg,var(--bg-card),rgba(29,34,48,.85));border:1px solid var(--line);
  border-radius:var(--radius);padding:var(--space-3) var(--space-4);margin-bottom:var(--space-3);
  box-shadow:var(--shadow-sm);transition:box-shadow .15s}
.prose details summary{cursor:pointer;font-weight:700}
.prose details[open]{box-shadow:var(--shadow-md)}
[itemtype="https://schema.org/Review"]{
  background:linear-gradient(135deg,rgba(255,122,26,.12),rgba(255,197,40,.05) 60%,transparent),var(--bg-card);
  border:1px solid var(--line);border-top:2px solid var(--accent);border-radius:var(--radius);
  padding:var(--space-6);box-shadow:var(--shadow-lg);margin:var(--space-8) 0}
.crumbs{color:var(--muted);font-size:.9rem;padding-top:var(--space-4)}
.crumbs a{color:var(--muted)}
.updated{text-align:center;color:var(--muted);font-size:.86rem;border-top:1px solid var(--line);padding-top:20px}

/* ===== Footer ===== */
.site-footer{background:linear-gradient(180deg,var(--bg-elev),var(--bg));border-top:1px solid var(--line);
  padding:var(--space-12) 0 var(--space-8);box-shadow:0 -8px 24px rgba(0,0,0,.25)}
.footer-grid{display:flex;flex-wrap:wrap;gap:var(--space-8);justify-content:space-between}
.footer-grid h4{margin:0 0 var(--space-3);font-size:.95rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.footer-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}
.footer-grid a{color:var(--text);text-decoration:none}
.footer-grid a:hover{color:var(--accent-2)}
.disclaimer{display:flex;gap:var(--space-3);align-items:flex-start;margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--line);color:var(--muted);font-size:.86rem}
.age{flex:none;background:var(--accent);color:#171008;font-weight:800;border-radius:8px;padding:4px 10px}
.footer-bottom{color:var(--muted);font-size:.85rem;margin-top:var(--space-6)}

/* ===== Back to top ===== */
.to-top{position:fixed;right:20px;bottom:20px;z-index:var(--z-overlay);width:48px;height:48px;border-radius:50%;
  border:1px solid var(--line);background:var(--accent);color:#171008;font-size:1.4rem;cursor:pointer;
  box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .2s,transform .2s,visibility .2s,box-shadow .2s}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top.show:hover,.to-top.show:focus-visible{box-shadow:var(--shadow-cta-hover);transform:translateY(-2px)}

/* ===== Cookie banner (injected via JS, see main.js) ===== */
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky);
  background:linear-gradient(180deg,var(--bg-card),rgba(24,28,38,.96));border-top:1px solid var(--line);
  padding:16px 20px;display:flex;gap:18px;align-items:center;justify-content:center;flex-wrap:wrap;
  box-shadow:0 -12px 28px rgba(0,0,0,.35)}
.cookie.hidden{display:none}
.cookie-text{margin:0;color:var(--muted);font-size:.92rem}
.cookie-actions{display:flex;gap:10px}

/* ===== Forms ===== */
label{font-weight:600;color:var(--text)}
input,textarea{width:100%;max-width:480px;background:var(--bg-card);border:1px solid var(--line);color:var(--text);
  border-radius:8px;padding:10px 12px;font:inherit;margin-top:4px;box-shadow:inset 0 1px 3px rgba(0,0,0,.3);transition:box-shadow .15s}
input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.3),0 0 0 3px rgba(255,197,40,.15)}

@media (prefers-reduced-motion:reduce){
  .btn,.btn-cta,.btn-outline,.to-top,.site-nav a,.prose details,tbody tr,input,textarea{transition:none}
}

@media (max-width:760px){
  .nav-toggle{display:block;margin-left:auto}
  .site-nav{display:none}
  .site-nav.open{display:flex;flex-direction:column;position:static;width:100%}
}