/* ==========================================================================
   Mostbet CZ — voderek.cz
   Несущая раскладка: pásy (полосы во всю ширину, без сайдбара/рельса/чип-стрипа)
   ========================================================================== */

:root{
  /* --- фирменные токены официала --- */
  --modra-tmava:#003266;
  --modra:#094B95;
  --modra-svetla:#428CDC;
  --modra-svetla2:#509AEA;
  --oranzova:#FA4D00;
  --oranzova-2:#FA5E00;
  --zlata:#FFBA00;
  --seda-svetla:#DDE4EC;
  --seda:#E8ECF1;
  --temna:#02101F;
  --text:#0E1B2C;
  --text-inv:#F3F7FC;
  --bila:#FFFFFF;

  /* --- шкала отступов --- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px;

  /* --- прочее --- */
  --mera:760px;
  --radius-karta:15px;
  --radius-tlacitko:50px;
  --stin-cta:0 10px 30px rgba(250,65,0,.4);
  --z-dropdown:100; --z-sticky:200; --z-overlay:900; --z-toast:1100;

  font-family:"Roboto",system-ui,-apple-system,Segoe UI,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bila);
  color:var(--text);
  font-family:"Roboto",system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}

h1,h2,h3,h4{font-family:"Roboto",sans-serif;font-weight:700;line-height:1.25;margin:0 0 var(--space-4)}
h1{font-size:clamp(1.9rem,4vw + 1rem,2.75rem)}
h2{font-size:clamp(1.4rem,2.6vw + 1rem,2rem);padding-top:var(--space-4);border-top:1px solid rgba(9,75,149,.35)}
h3{font-size:clamp(1.15rem,1.6vw + 1rem,1.4rem)}
p{margin:0 0 var(--space-4)}
p:last-child{margin-bottom:0}

.tabular,.kalkulacka-cislo,.kalkulacka-rozdil,td{font-variant-numeric:tabular-nums}

/* --- фокус --- */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:3px solid var(--zlata);
  outline-offset:2px;
  border-radius:4px;
}

/* --- служебная ссылка "пропустить" --- */
.preskocit{
  position:absolute;left:-9999px;top:0;
  background:var(--zlata);color:var(--temna);
  padding:var(--space-3) var(--space-4);
  z-index:var(--z-toast);
  border-radius:0 0 8px 0;
  font-weight:700;text-decoration:none;
}
.preskocit:focus{left:0}

/* ==========================================================================
   Контейнеры / полосы
   ========================================================================== */

.kontejner{
  max-width:var(--mera);
  margin-inline:auto;
  padding-inline:var(--space-4);
}
.kontejner--uzky{max-width:420px;text-align:center}

.blok{
  padding-block:clamp(40px,7vw,88px);
  overflow-x:clip;
}
.blok--tmava{background:var(--modra-tmava);color:var(--text-inv)}
.blok--tmava h1,.blok--tmava h2,.blok--tmava h3{color:var(--text-inv)}
.blok--tmava h2{border-top-color:rgba(255,255,255,.25)}
.blok--tmava a:not(.tlacitko){color:var(--modra-svetla2)}

.blok--svetla{background:var(--seda-svetla);color:var(--text)}
.blok--bila{background:var(--bila);color:var(--text)}

.blok--cta{padding-block:clamp(28px,5vw,48px)}

/* ==========================================================================
   Шапка
   ========================================================================== */

.hlavicka{
  position:sticky;top:0;z-index:var(--z-sticky);
  background:var(--modra-tmava);
  box-shadow:0 2px 16px rgba(2,16,31,.25);
}
.hlavicka-radek{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-4);
  padding-block:var(--space-3);
  max-width:1100px;
}
.znacka{display:inline-flex;align-items:center;text-decoration:none}
.znacka img{height:32px;width:auto}

.hlavicka-kotvy{
  max-width:1100px;
  margin-inline:auto;
  padding:0 var(--space-4) var(--space-3);
  display:flex;
  gap:var(--space-4);
  overflow-x:auto;
  scrollbar-width:none;
  font-size:.85rem;
}
.hlavicka-kotvy::-webkit-scrollbar{display:none}
.hlavicka-kotvy a{
  color:var(--text-inv);
  opacity:.8;
  text-decoration:none;
  white-space:nowrap;
  padding-block:var(--space-1);
  border-bottom:2px solid transparent;
}
.hlavicka-kotvy a:hover,.hlavicka-kotvy a:focus-visible{
  opacity:1;border-bottom-color:var(--oranzova);
}

/* ==========================================================================
   Тлачитка (кнопки)
   ========================================================================== */

.tlacitko{
  display:inline-flex;align-items:center;justify-content:center;
  gap:var(--space-2);
  border:none;cursor:pointer;
  border-radius:var(--radius-tlacitko);
  padding:14px 32px;
  font-family:inherit;
  font-size:1rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.02em;
  text-decoration:none;
  line-height:1.2;
  transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
}
.tlacitko--akce{
  background:linear-gradient(0deg,var(--oranzova),var(--oranzova-2));
  color:#fff;
  box-shadow:var(--stin-cta);
}
.tlacitko--akce:hover{transform:translateY(-2px);filter:brightness(1.04)}
.tlacitko--sekundarni{
  background:linear-gradient(0deg,var(--modra-svetla),var(--modra-svetla2));
  color:#fff;
  box-shadow:0 10px 24px rgba(9,75,149,.35);
}
.tlacitko--sekundarni:hover{transform:translateY(-2px)}
.tlacitko--male{padding:8px 18px;font-size:.85rem}
.tlacitko--velke{padding:16px 40px;font-size:1.1rem;margin-top:var(--space-6)}

/* ==========================================================================
   Текстовый столбец статьи
   ========================================================================== */

.text-sloupec{max-width:var(--mera)}
.text-sloupec + .text-sloupec{margin-top:var(--space-8)}

/* ==========================================================================
   Панельный заголовок (для виджетов, не статьи)
   ========================================================================== */

.panel-nadpis{
  font-family:"Roboto Condensed","Roboto",sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:.9rem;
  color:var(--modra);
  margin:var(--space-8) 0 var(--space-3);
}
.panel-nadpis--svetly{color:var(--modra-svetla2)}

/* ==========================================================================
   Таблицы (§5 css-layout — карточки на мобиле из той же <table>)
   ========================================================================== */

.tabulka-ram{
  overflow-x:auto;
  margin-top:var(--space-4);
  border-radius:var(--radius-karta);
  background:rgba(255,255,255,.5);
}
.blok--tmava .tabulka-ram,.blok--svetla .tabulka-ram{background:rgba(255,255,255,.06)}
.blok--bila .tabulka-ram,.blok--svetla .tabulka-ram{background:var(--bila)}

table{
  width:100%;
  border-collapse:collapse;
  min-width:420px;
}
thead th{
  text-align:left;
  font-family:"Roboto Condensed",sans-serif;
  text-transform:uppercase;
  font-size:.8rem;
  letter-spacing:.04em;
  color:var(--modra);
  padding:var(--space-3) var(--space-4);
  border-bottom:2px solid var(--modra-svetla);
}
.blok--tmava thead th{color:var(--modra-svetla2)}
tbody td{
  padding:var(--space-3) var(--space-4);
  border-bottom:1px solid rgba(9,75,149,.15);
}
.blok--tmava tbody td{border-bottom-color:rgba(255,255,255,.12)}
tbody tr:last-child td{border-bottom:none}

@media(max-width:640px){
  .tabulka-ram table,.tabulka-ram thead,.tabulka-ram tbody,.tabulka-ram tr,.tabulka-ram td{display:block}
  .tabulka-ram{min-width:0}
  table{min-width:0}
  .tabulka-ram thead{display:none}
  .tabulka-ram tr{
    margin-bottom:var(--space-3);
    border:1px solid rgba(9,75,149,.2);
    border-radius:12px;
    overflow:hidden;
  }
  .blok--tmava .tabulka-ram tr{border-color:rgba(255,255,255,.2)}
  .tabulka-ram td{
    display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-3);
    text-align:right;
    border-bottom:1px solid rgba(9,75,149,.12);
  }
  .blok--tmava .tabulka-ram td{border-bottom-color:rgba(255,255,255,.1)}
  .tabulka-ram tr:last-child td:last-child{border-bottom:none}
  .tabulka-ram td::before{
    content:attr(data-label);
    font-weight:600;
    text-align:left;
    color:var(--modra);
  }
  .blok--tmava .tabulka-ram td::before{color:var(--modra-svetla2)}
}

/* ==========================================================================
   Правовой рамочный блок
   ========================================================================== */

.pravni-ramecek{
  border:1px solid rgba(9,75,149,.25);
  border-left:5px solid var(--oranzova);
  border-radius:var(--radius-karta);
  padding:var(--space-8);
  background:var(--seda);
}

/* ==========================================================================
   Bonus — карта
   ========================================================================== */

.nabidka-karta{
  margin-top:var(--space-8);
  background:var(--modra-tmava);
  color:var(--text-inv);
  border-radius:var(--radius-karta);
  padding:var(--space-8);
}
.nabidka-karta .tabulka-ram{background:rgba(255,255,255,.06)}
.stitek{
  display:inline-flex;
  align-items:center;
  padding:6px 16px;
  border-radius:var(--radius-tlacitko);
  font-size:.85rem;
  font-weight:500;
  background:var(--seda);
  color:var(--text);
}
.stitek--zlata{
  background:var(--zlata);
  color:var(--temna);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
  margin-bottom:var(--space-4);
}

/* ==========================================================================
   Sport — štítky
   ========================================================================== */

.stitky{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-6)}
.stitky .stitek{background:var(--seda-svetla);border:1px solid rgba(9,75,149,.2)}

/* ==========================================================================
   Herní mřížka (карточки игр, hover-play)
   ========================================================================== */

.herni-mrizka{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
  gap:var(--space-4);
  margin-top:var(--space-6);
}
.hra-dlazdice{
  position:relative;
  display:block;
  border-radius:var(--radius-karta);
  overflow:hidden;
  aspect-ratio:3/4;
  text-decoration:none;
  background:var(--temna);
  isolation:isolate;
}
.hra-dlazdice img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .3s ease;
}
.hra-dlazdice-nazev{
  position:absolute;left:0;right:0;bottom:0;
  padding:var(--space-3) var(--space-3) var(--space-4);
  background:linear-gradient(to top,rgba(2,16,31,.92),rgba(2,16,31,0));
  color:var(--text-inv);
  font-weight:500;
  font-size:.9rem;
}
.hra-dlazdice-prehrat{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(2,16,31,.55);
  color:#fff;
  font-family:"Roboto Condensed",sans-serif;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  opacity:0;
  transition:opacity .2s ease;
}
.hra-dlazdice:hover img,.hra-dlazdice:focus-visible img{transform:scale(1.06)}
.hra-dlazdice:hover .hra-dlazdice-prehrat,
.hra-dlazdice:focus-visible .hra-dlazdice-prehrat,
.hra-dlazdice.je-aktivni .hra-dlazdice-prehrat{opacity:1}

/* ==========================================================================
   Studia / poskytovatelé
   ========================================================================== */

.studia{
  display:flex;flex-wrap:wrap;
  align-items:center;
  gap:var(--space-6) var(--space-8);
  margin-top:var(--space-4);
  padding:var(--space-6);
  background:rgba(255,255,255,.06);
  border-radius:var(--radius-karta);
}
.blok--bila .studia,.blok--svetla .studia{background:var(--seda-svetla)}
.studio-znak img{height:32px;width:auto;filter:none}
.blok--tmava .studio-znak img{filter:brightness(0) invert(1);opacity:.85}

/* ==========================================================================
   Platební pás
   ========================================================================== */

.platby-pas{
  display:flex;flex-wrap:wrap;
  align-items:center;
  gap:var(--space-6) var(--space-8);
  margin-top:var(--space-4);
  padding:var(--space-6);
  background:rgba(255,255,255,.06);
  border-radius:var(--radius-karta);
}
.platba-znak img{height:28px;width:auto}
.blok--tmava .platba-znak img{filter:brightness(0) invert(1);opacity:.9}

/* ==========================================================================
   Kalkulačka daně z výhry — signature feature
   ========================================================================== */

.kalkulacka-karta{
  margin-top:var(--space-8);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius-karta);
  padding:var(--space-8);
}
.kalkulacka-pole{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  margin-bottom:var(--space-4);
}
.kalkulacka-pole label{font-weight:500;font-size:.95rem}
.kalkulacka-pole input{
  font-family:"Roboto Condensed",sans-serif;
  font-size:1.15rem;
  padding:12px 16px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.94);
  color:var(--text);
  width:100%;
  max-width:280px;
}
.kalkulacka-rozdil{
  font-size:1.05rem;
  margin-top:var(--space-4);
}
.kalkulacka-cislo{
  font-family:"Roboto Condensed",sans-serif;
  font-weight:700;
  font-size:1.3rem;
  color:var(--zlata);
}
.kalkulacka-vysledek{
  margin-top:var(--space-2);
  padding:var(--space-3) var(--space-4);
  border-radius:10px;
  background:rgba(255,255,255,.1);
  font-weight:500;
}
.kalkulacka-vysledek[data-stav="nad-limitem"]{
  background:rgba(250,77,0,.18);
  border:1px solid rgba(250,77,0,.5);
}
.kalkulacka-vysledek[data-stav="osvobozeno"]{
  background:rgba(135,188,23,.15);
  border:1px solid rgba(135,188,23,.5);
}
.kalkulacka-pozn{
  margin-top:var(--space-4);
  font-size:.82rem;
  color:rgba(243,247,252,.7);
}

/* ==========================================================================
   FAQ / Dotazy
   ========================================================================== */

.dotazy{margin-top:var(--space-6)}
.dotaz{
  border-bottom:1px solid rgba(9,75,149,.18);
  padding-block:var(--space-4);
}
.dotaz summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-4);
}
.dotaz summary::-webkit-details-marker{display:none}
.dotaz summary h3{margin:0;font-size:1.05rem}
.dotaz summary::after{
  content:"+";
  flex:none;
  font-size:1.4rem;
  line-height:1;
  color:var(--oranzova);
  transition:transform .2s ease;
}
.dotaz[open] summary::after{transform:rotate(45deg)}
.dotaz p{margin-top:var(--space-3)}

/* ==========================================================================
   Подвал
   ========================================================================== */

.pata{
  background:var(--modra-tmava);
  color:var(--text-inv);
  padding-block:var(--space-12);
}
.pata-obsah{display:flex;flex-direction:column;gap:var(--space-3);align-items:flex-start}
.znacka--pata img{height:26px;width:auto}
.pata-vek{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;height:44px;
  border-radius:50%;
  border:2px solid var(--zlata);
  color:var(--zlata);
  font-weight:700;
  font-family:"Roboto Condensed",sans-serif;
}
.pata-pravni{
  font-size:.82rem;
  color:rgba(243,247,252,.72);
  max-width:640px;
}
.pata-copy{font-size:.78rem;color:rgba(243,247,252,.55);margin-top:var(--space-2)}

/* ==========================================================================
   Cookie lišta
   ========================================================================== */

.cookies-lista{
  position:fixed;left:0;right:0;bottom:0;
  z-index:var(--z-overlay);
  background:var(--temna);
  color:var(--text-inv);
  box-shadow:0 -6px 24px rgba(0,0,0,.3);
}
.cookies-lista-obsah{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--space-4);
  padding-block:var(--space-4);
}
.cookies-lista-obsah p{margin:0;font-size:.9rem;max-width:520px}

/* ==========================================================================
   Nahoru
   ========================================================================== */

.nahoru{
  position:fixed;
  right:var(--space-4);
  bottom:var(--space-4);
  z-index:var(--z-sticky);
  width:48px;height:48px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  background:linear-gradient(0deg,var(--oranzova),var(--oranzova-2));
  color:#fff;
  font-size:1.2rem;
  box-shadow:var(--stin-cta);
}

/* ==========================================================================
   Адаптив
   ========================================================================== */

@media(max-width:30em){
  .kontejner{padding-inline:var(--space-4)}
  .pravni-ramecek,.nabidka-karta,.kalkulacka-karta{padding:var(--space-4)}
  .pata-obsah{align-items:flex-start}
}

@media(min-width:48em){
  .hlavicka-radek{padding-block:var(--space-4)}
  .znacka img{height:36px}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}