@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

html {
    font-family: 'Poppins', sans-serif;
    scroll-padding-top: 100px;
}

body {
    margin: 0;
    background: rgb(14, 14, 14);
    color: white;
}

img {
    max-width: 100%;
}

h1 {
    text-align: center;
}

header{
    position: relative;
}

header > h1 {
    position: absolute;
    color: white;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.419);
    padding: 20px;
}

header > img {
    width: 100vw;
    height: calc(100vh - 100px);
    object-fit: cover;
}

header> img {
    width: 100vw;
    height: calc(100vh - 100px);
    object-fit: cover;
}



nav {
    position: sticky;
    top: 0;
    background: black;
    padding: 5px;;
}

nav > ul {
    display: flex;
    justify-content: center;
    list-style-type: none;
    padding-inline-start: 0;
    

}

nav > ul > li {
    margin: 0 20px;
    padding: 10px 20px;
    background: white;
}

nav > ul > li > a {
    color: rgb(0, 0, 0);
    text-decoration:none;
}

@media screen and (min-width: 720px) {
    header > h1 {
        font-size: 6rem;
    }
}
    

@media screen and (max-width: 720px) {
    nav > ul {
        height: 0;
        overflow-y: hidden;
        margin: 0;
        flex-direction: column;
        transition: 0.5s;


    }
    
    nav.active > ul {
        height: 220px;
        margin: 1em 0;
    }

    nav > .hamburger > div{
        height: 2px;
        width: 30px;
        margin: 7px 20px;
        background: white;
        transition: 0.5s;
}

nav.active > .hamburger > div {
    position: relative;
    background: red;
}

nav.active > .hamburger > div:first-child {
    transform: rotate(-45deg);
    top: 9px
}

nav.active > .hamburger > div:nth-child(2n) {
    opacity: 0;
}

nav.active > .hamburger > div:last-child {
    transform: rotate(45deg);
    top: -8px;
}
}

main {
    max-width: 900px;
    margin: 0 auto;
}

    
.grid-gallery {
    display: grid;
    grid-template-areas:
    "prvni prvni prvni"
    "druhej druhej treti"
    "ctvrtej patej patej";
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

@media screen and (max-width: 672px) {
    .grid-gallery {
        grid-template-areas:
        "prvni"
        "druhej"
        "treti"
        "ctvrtej"
        "patej";
        grid-template-columns: 1fr;
    }
}


.grid-gallery > * {
    width: 100%;
    object-fit: cover;
    height: 220px;
    border-radius: 20px;
    border: 1px solid white;
}

.grid-gallery > .prvni {
    grid-area: prvni;
}

.grid-gallery > .druhej{
    grid-area: druhej;
}

.grid-gallery > .treti{
    grid-area: treti}
.grid-gallery > .ctvrtej{
        grid-area: ctvrtej}
.grid-gallery > .patej {
    grid-area: patej;
        }

/* PŮVODNĚ: section > h12 */
section > h1 {
  font-size: 2rem;
  text-align: center;
  margin: 4rem 0;
}


        .grid-products {
            display: grid;
            gap: 20px;

            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            background: white;
            color: black;
            text-align: center;
            border-radius: 1rem;
        }

        .grid-products > div > .Dostupnost{
            color: rgb(138, 214, 23);
        }

        .grid-products > div > .Nedostupnost{
            color: red;
        }

        .grid-products > div > .Na-objednavku{
            color: orange;
        }

footer{
    padding: 5px;
    text-align: center;
    background-color: rgb(14, 14, 14);
}


header2> img {
    width: 100vw;
    height: calc(100vh - 100px);
    object-fit: cover;
 }
 
 iframe{
    display: block;
    margin: 0 auto;
 }

 header {
    height: 100vh;
    width: 100vw;
    object-fit: cover;
 }

 div > ul{
    position: sticky;
    top: 0;
    background: black;
    padding: 5px;;
 }

 div > ul > li{
    margin: 0 20px;
    padding: 10px 20px;
    background: white;

 }

 div > ul > li > a{
    color: rgb(0, 0, 0);
    text-decoration:none;
 }







 
 .countdown-container {
    text-align: center;
    padding: 20px;
    background: rgba(14, 14, 14, 14);
    border-radius: 15px;
    box-shadow: 0px 4px 20px rgba(14, 14, 14, 14);
    max-width: 300px;
    margin: auto;
    color: #fff;
}

.countdown {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.time-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.number {
    font-size: 2.5em;
    font-weight: bold;
    color: #ffcc00;
}

.label {
    font-size: 0.9em;
    text-transform: uppercase;
    color: #ddd;
}





/* Efekt nafouknutí tlačítek při najetí myší */
nav > ul > li {
    display: inline-block; /* Umožní efekt transformace */
    transition: transform 0.3s ease; /* Přechod pro hladký efekt */
}

nav > ul > li:hover {
    transform: scale(1.2); /* Zvětšení tlačítka při najetí myší */
}





nav > ul > li {
    margin: 0 20px;
    padding: 10px 20px;
    background: white;
    border-radius: 20px; /* Přidání zaoblení */
    transition: transform 0.3s ease; /* Přechod pro hladký efekt */
    display: inline-block; /* Umožní efekt transformace */
}

nav > ul > li:hover {
    transform: scale(1.1); /* Zvětšení tlačítka při najetí myší */
}





/* Základní styl pro tlačítka */
nav > ul > li {
    margin: 0 20px;
    padding: 10px 20px;
    background: white;
    border-radius: 20px; /* Zaoblení pro větší obrazovky */
    transition: transform 0.3s ease; /* Přechod pro hladký efekt */
    display: inline-block; /* Umožní efekt transformace */
}

nav > ul > li:hover {
    transform: scale(1.1); /* Zvětšení tlačítka při najetí myší */
}

/* Styl pro mobilní zařízení */
@media screen and (max-width: 720px) {
    nav > ul > li {
        border-radius: 0; /* Hranaté rohy pro mobilní zařízení */
    }
}






nav > ul > li {
    position: relative; /* Umožňuje umístit tooltip relativně k tlačítku */
}

/* Skrytí tooltipu */
.tooltip {
    position: absolute;
    bottom: 100%; /* Umístí tooltip nad tlačítko */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 255); /* Pozadí tooltipu */
    color: red; /* Změněná barva textu na červenou */
    padding: 5px 10px;
    border-radius: 15px;
    opacity: 0; /* Skryté */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Přechody pro plynulé zobrazení */
    transform: translate(-50%, -10px); /* Původní pozice tooltipu */
}

/* Zobrazit tooltip při najetí myší */
nav > ul > li:hover .tooltip {
    opacity: 1; /* Zobrazit tooltip */
    transform: translate(-50%, 0); /* Posunout tooltip nahoru */
}







/* Skrytí obrázků v galerii na mobilních zařízeních */
@media screen and (max-width: 720px) {
    .grid-gallery > .prvni,
    .grid-gallery > .druhej,
    .grid-gallery > .treti,
    .grid-gallery > .ctvrtej,
    .grid-gallery > .patej {
        display: none; /* Skryje obrázky na mobilních zařízeních */
    }
}




.video-page {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centrum pro vertikální zarovnání */
    justify-content: center; /* Centrum pro horizontální zarovnání */
    padding: 20px;
}

.video-card {
    width: 80%; /* Šířka karty */
    max-width: 600px; /* Maximální šířka pro karty */
    margin: 20px 0; /* Mezera mezi kartami */
    padding: 15px;
    background-color: rgb(14, 14, 14); /* Barva pozadí */
    border-radius: 15px; /* Zaoblené rohy */
    border: 2px solid white; /* Bílé okraje */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s; /* Přidání animace */
    cursor: pointer; /* Změna kurzoru na ruku */
    text-align: center; /* Centrum textu uvnitř karty */
}

.video-card:hover {
    transform: scale(1.05); /* Zvětšení při najetí */
}

.video-card img {
    width: 100%; /* Přizpůsobení velikosti */
    border-radius: 8px;
}

.video-card h2 {
    font-size: 24px;
    font-weight: bold;
    margin: 10px 0;
    color: white; /* Změna barvy nadpisu na bílou pro lepší čitelnost */
}

.video-card p {
    font-size: 16px;
    color: #ccc; /* Světlejší barva textu pro lepší čitelnost */
}








body {
    background-color: rgb(14, 14, 14);
    color: white;
    font-family: Arial, sans-serif;
}

.video-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.video-card {
    width: 80%;
    max-width: 600px;
    margin: 20px 0;
    padding: 15px;
    background-color: rgb(240, 240, 240);
    border-radius: 15px;
    border: 2px solid white;
    transition: transform 0.2s;
    cursor: pointer;
    text-align: center;
}

.video-card:hover {
    transform: scale(1.05);
}

.video-card img, .video-card video {
    width: 100%;
    border-radius: 8px;
}

.video-card h2 {
    font-size: 24px;
    font-weight: bold;
    margin: 10px 0;
    color: black;
}

.video-card p {
    font-size: 16px;
    color: #666;
}





/* Styl pro mobilní varování */
.mobilni-varovani {
    display: block;
    font-size: 1.2em;
    color: red;
    text-align: center;
    margin: 20px 10px; /* Vyvážené odsazení */
    line-height: 1.4em; /* Zvýšená výška řádku pro lepší čitelnost */
    word-wrap: break-word; /* Zalomení delších slov na menších obrazovkách */
    max-width: 90%; /* Zajištění, aby text zůstal v rozumné šířce */
    margin: 0 auto; /* Zarovnání do středu */
}








/* Základní styly */
body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    background-color: rgb(14, 14, 14);
    color: white;
}

/* Hlavní kontejner pro video stránku */
.video-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* Rok doprostřed a výraznější */
.year-display {
    font-size: 10rem; /* Zvýšení velikosti roku */
    font-weight: bold;
    color: white;
    text-align: center;
    margin: 40px 0; /* Více prostoru kolem */
    line-height: 1.2; /* Lepší čitelnost */
}


/* Karty videí */
.video-card {
    width: 80%;
    max-width: 600px;
    margin: 20px auto; /* Vystředění videí */
    padding: 15px;
    background-color: rgb(14, 14, 14);
    border-radius: 15px;
    border: 2px solid white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
    cursor: pointer;
    text-align: center;
}

.video-card:hover {
    transform: scale(1.05); /* Zvětšení při najetí */
}

.video-card img, .video-card video {
    width: 100%;
    border-radius: 8px;
}

/* Nadpisy a popis videí */
.video-card h2 {
    font-size: 24px;
    font-weight: bold;
    margin: 10px 0;
    color: white;
}

.video-card p {
    font-size: 16px;
    color: #ccc;
}

/* Tlačítko pro filtr roků */
.filter-bar {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
}

.filter-bar select {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    background-color: rgb(14, 14, 14);
    color: white;
    font-size: 16px;
}

/* Styl pro vyhledávání videí */
.search-bar {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.search-bar input {
    padding: 10px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #ccc;
    width: 80%;
    max-width: 500px;
}

/* Animace pro karty při zobrazení */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.video-card {
    animation: fadeIn 0.5s ease-out;
}

/* Média dotazy pro zajištění responsivnosti */
@media screen and (max-width: 720px) {
    .video-card {
        width: 100%;
    }

    .search-bar input {
        width: 90%;
    }

    .year-display {
        font-size: 2rem; /* Zmenšení textu roku na menších zařízeních */
    }
}







.video-card h2 a {
    text-decoration: none;
    color: #ffffff; /* Bílá barva */
}

.video-card h2 a:hover {
    color: #ffffff; /* Světle šedá při najetí myší */
}



/* Navigace - fixní pozice při scrollování */
nav {
    position: sticky; /* Sticky pozice */
    top: 0; /* Přilepení k hornímu okraji */
    background-color: rgba(14, 14, 14, 0.9); /* Poloprůhledné pozadí */
    z-index: 9999; /* Překrývá ostatní prvky */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Jemný stín */
    border-radius: 0 0 15px 15px; /* Zaoblené spodní rohy */
  }
  
  /* Styl odkazů v navigaci */
  nav a {
    color: #000; /* Barva textu */
    text-decoration: none;
    padding: 10px 20px; /* Vnitřní odsazení */
    display: inline-block;
    transition: background-color 0.3s ease, color 0.3s ease; /* Animace při hoveru */
  }
  
  nav a:hover {
    background-color: #ffffff; /* Změna barvy pozadí při hoveru */
    color: #444444; /* Změna barvy textu při hoveru */
  }
  



  


/* Modalní okno */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }
  
  /* Obsah modalního okna */
  .modal-content {
    width: 400px; /* Pevná šířka modálního okna */
    height: 250px; /* Pevná výška modálního okna */
    overflow: hidden; /* Skryje přetečení obsahu */
    padding: 10px 20px 20px 20px; /* Snížený horní padding */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Jemný stín */
    border-radius: 10px; /* Kulaté rohy */
    background-color: white; /* Barva pozadí */
    text-align: center; /* Zarovnání textu na střed */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Obsah zarovnán dolů */
}


  
  /* Ikona varování */
  .warning-icon {
    font-size: 50px;
    color: orange;
    margin-bottom: 20px;
  }
  
  /* Hláška */
  .message {
    font-size: 18px;
    margin-bottom: 20px;
    color: #333;
  }
  
  /* Tlačítka */
  .buttons .button {
    padding: 10px 20px;
    margin: 5px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
  }
  
  .buttons .button:hover {
    opacity: 0.9;
  }
  
  #continueButton {
    background-color: #4caf50;
    color: white;
  }
  
  #closeButton {
    background-color: #f44336;
    color: white;
  }
  






  .modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7);
}

.modal-content {
    background-color: #fff;
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
    border-radius: 8px;
    text-align: center;
}

.modal-header {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.modal-body {
    font-size: 1.2rem;
    color: #000;
    margin-bottom: 20px;
    text-align: center; /* Zajistí, že text bude správně zarovnán */
}

.modal .btn {
    display: inline-block;
    margin: 5px;
    padding: 10px 20px;
    font-size: 1rem;
    cursor: pointer;
    border: none;
    border-radius: 4px;
}

.modal .btn.confirm {
    background-color: #28a745;
    color: white;
}

.modal .btn.cancel {
    background-color: #dc3545;
    color: white;
}

#video-container video {
    width: 100%;
    max-width: 800px;
    margin: 20px auto;
    display: block;
}





.modal-body {
    font-size: 1.2rem;
    color: #000;
    margin-bottom: 20px;
    text-align: center;
    position: relative;
}

.warning-icon {
    display: inline-block;
    margin-bottom: 15px;
}

.warning-icon svg {
    width: 50px;
    height: 50px;
    fill: orange;
}


.warning-icon svg {
    width: 50px; /* Velikost ikony */
    height: 50px; /* Velikost ikony */
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/5/56/Warning_icon.svg'); /* Ikona vykřičníku */
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    margin-bottom: 0px; /* Mezery pod ikonou */
    margin-top: 50px; /* Posun ikony o kousek níže */
    fill: orange; /* Barva vykřičníku */
}









.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.warning-icon svg {
    width: 40px;
    height: 40px;
    fill: orange;
}

/* Tlačítka */
.btn {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    margin: 10px;
}

.confirm {
    background-color: #4CAF50; /* Zelené tlačítko */
    color: white;
    border: none;
}

.cancel {
    background-color: #f44336; /* Červené tlačítko */
    color: white;
    border: none;
}



.search-input {
    width: 360px; /* Výchozí šířka vyhledávacího pole */
    padding: 10px;
    margin: 20px 0;
  }
  

  
  /* Přizpůsobení pro menší obrazovky (menší než 768px) */
  @media (max-width: 768px) {
    .video-card {
      width: 320px; /* Kartičky se zmenší na 150px */
      margin: 10px;
      display: block; /* Zajistí, že kartičky budou pod sebou */
      text-align: center; /* Vycentruje kartičky */
    }
  


  }


/* Základní nastavení pro normální obrazovky */
.search-box {
    width: 300px; /* Výchozí šířka vyhledávacího pole */
    padding: 20px;
    margin: 20px 0;
    box-sizing: border-box; /* Aby padding neovlivnil celkovou šířku */
  }
  
  /* Skrytí vyhledávacího pole pro obrazovky menší než 768px */
  @media (max-width: 768px) {
    .search-box {
      display: none !important; /* Skrytí vyhledávacího pole na telefonech */
    }
  }
  



/* Základní nastavení pro animaci */
@keyframes moveVertically {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(200px); /* Pohyb dolů */
    }
    100% {
      transform: translateY(0); /* Návrat zpět nahoru */
    }
  }
  
  /* Aplikace animace na objekty */
  .moving-shape {
    animation: moveVertically 5s ease-in-out infinite; /* Animace pohybu nahoru/dolů */
  }
  




/* Základní nastavení pro modální okna */
.modal1, .modal2 {
    width: 80%; /* Šířka modálního okna na desktopu */
    max-width: 600px; /* Maximální šířka pro větší zařízení */
    margin: auto; /* Centrování horizontálně */
    padding: 40px 20px 20px 20px; /* Zvýšený padding nahoře (40px) */
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }
  
  /* Změna velikosti modálních oken na mobilech (max-width: 768px) */
  @media (max-width: 768px) {
    .modal1, .modal2 {
      width: 100%; /* Na telefonech bude modální okno menší */
      max-width: 400px; /* Nastavení maximální šířky pro mobily */
      padding: 15px; /* Mírně menší padding */
    }
  }
  







  @media (max-width: 768px) {
  /* Globální nastavení pro odstranění horizontálního posouvání */
body {
    margin: 0;
    overflow-x: hidden; /* Zabrání horizontálnímu posouvání */
  }
  
  /* Obecné nastavení pro přizpůsobení obsahu */
  .container {
    max-width: 100%; /* Zajistí, že obsah nepřesáhne šířku obrazovky */
    overflow: hidden; /* Skryje případné přetečení */
    margin: 0 auto; /* Centrované zarovnání */
    padding: 0 10px; /* Zajistí prostor na okrajích */
  }
  
  /* Specifické nastavení pro videa */
  .video-card {
    box-sizing: border-box; /* Zajistí správné počítání šířky včetně paddingu */
    width: 100%; /* Na telefonech zajistí, že kartičky nebudou přesahovat */
    margin: 10px 0; /* Mezera mezi kartičkami */
  }
  
  /* Na telefonech: Skryje horizontální posouvání */

    html, body {
      width: 100%; /* Zajistí, že tělo stránky má 100% šířku */
      overflow-x: hidden; /* Zakáže horizontální posouvání */
    }
  
    .video-card {
      width: 90%; /* Kartičky budou menší a centrované */
      margin: 10px auto; /* Vertikální a horizontální centrování */
    }
  }








  @media (max-width: 768px) {
    /* Skrýt menu na začátku */
    nav ul {
        display: none; /* Skryje menu */
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: auto; /* Dynamická výška pro obsah */
        max-height: 100vh; /* Zamezí přetečení mimo viewport */
        overflow-y: auto; /* Přidá scrollování, pokud je obsah příliš dlouhý */
        background-color: rgba(0, 0, 0, 0.39);
        padding: 10px;
        margin: 0;
        list-style: none;
        box-sizing: border-box; /* Zajistí správné měření paddingu a okrajů */
    }

    /* Zobrazit menu, když je aktivní */
    nav.active ul {
        display: grid; /* Aktivuje mřížku pro tlačítka */
        grid-template-columns: repeat(2, 1fr); /* Dvě tlačítka vedle sebe */
        gap: 10px; /* Mezera mezi tlačítky */
    }

    /* Vzhled jednotlivých tlačítek */
    nav ul li a {
        display: block;
        padding: 15px;
        text-align: center;
        text-decoration: none;
        background-color: #f4f4f400;
        border: 1px solid #cccccc00;
        border-radius: 5px;
        color: black;
    }
}











/* Modalní okno */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* Obsah modálního okna */
.modal-content {
    width: 400px; /* Pevná šířka modálního okna */
    height: 250px; /* Pevná výška modálního okna */
    overflow: hidden; /* Skryje přetečení obsahu */
    padding: 10px 20px 20px 20px; /* Snížený horní padding */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Jemný stín */
    border-radius: 10px; /* Kulaté rohy */
    background-color: white; /* Barva pozadí */
    text-align: center; /* Zarovnání textu na střed */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Obsah zarovnán dolů */
    position: relative;
}

/* Nadpis v modálním okně */
.modal h2 {
    margin-bottom: 15px;
    font-size: 18px;
}

/* Zavírací tlačítko (křížek) */
.close {
    position: absolute;
    top: 17px; /* Posun křížku nad modální okno */
    left: 50%;
    transform: translateX(-50%); /* Zarovnání na střed */
    font-size: 90px; /* Větší velikost */
    font-weight: bold;
    color: #333;
    cursor: pointer;
    background: white;
    padding: 5px 15px;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(255, 255, 255, 0);
}

.close:hover {
    color: red;
}

/* Tlačítka v modálním okně */
.modal button {
    width: 100%;
    padding: 10px;
    margin: 5px 0;
    background: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    font-size: 16px;
}

.modal button:hover {
    background: #138a17;
}


@keyframes shake {
    0% { transform: rotate(0deg); }
    10% { transform: rotate(10deg); }
    20% { transform: rotate(-10deg); }
    30% { transform: rotate(10deg); }
    40% { transform: rotate(-10deg); }
    50% { transform: rotate(10deg); }
    60% { transform: rotate(-10deg); }
    70% { transform: rotate(10deg); }
    80% { transform: rotate(-10deg); }
    90% { transform: rotate(10deg); }
    100% { transform: rotate(0deg); }
}

.shake {
    animation: shake 3s ease forwards;
}


.filter-bar {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin: 20px 0;
}

.filter-bar select {
    padding: 10px;
    font-size: 16px;
    border-radius: 10px;
    border: 1px solid #ccc;
    min-width: 180px;
}






.video-card {
    opacity: 1;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.video-card.hide {
    opacity: 0;
    transform: scale(0.95);
    pointer-events: none;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

section#videos > h1 {
    opacity: 1;
    transition: opacity 0.4s ease;
}

section#videos > h1.hide {
    opacity: 0;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    pointer-events: none;
}



/* 📦 Styl banneru */
.video-banner {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: auto;
  min-width: 280px;
  max-width: 380px;
  padding: 20px;
  background-color: #fff;
  border: 2px solid #007BFF;
  border-radius: 15px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0.8s ease;
  z-index: 9999;
}

.banner-content {
  font-family: sans-serif;
  color: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.video-label {
  font-size: 14px;
  font-weight: bold;
  margin: 0 0 4px; /* původně 0 0 4px */
}

.video-title {
  font-size: 20px;
  font-weight: bold;
  margin: 8px 0 6px; /* přidán horní margin */
}

.video-description {
  font-size: 14px;
  color: #555;
  margin-bottom: 12px;
  padding: 0 10px;
}

.banner-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.banner-buttons a,
.banner-close-bottom {
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: bold;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.banner-buttons a {
  background-color: #007BFF;
  color: white;
  text-decoration: none;
}

.banner-buttons a:hover {
  background-color: #0056b3;
}

.banner-close-bottom {
  background-color: #dc3545;
  color: white;
}

.banner-close-bottom:hover {
  background-color: #c82333;
}

@media (max-width: 768px) {
  .video-banner {
    display: none;
  }
}










.about-section {
  max-width: 1000px;
  margin: 60px auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.about-block {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

.about-block.reverse {
  flex-direction: row-reverse;
}

.about-card {
  flex: 1;
  background-color: #1e1e1e;
  color: white;
  border: 2px solid white;
  border-radius: 15px;
  padding: 20px;
  text-align: center;
  max-width: 300px;
}

.about-card img {
  max-width: 100%;
  border-radius: 10px;
  margin-bottom: 10px;
}

.about-card h3 {
  margin: 0;
  font-size: 18px;
}

.about-text {
  flex: 2;
  font-size: 16px;
  color: white;
}

/* mobilní zobrazení */
@media (max-width: 768px) {
  .about-block {
    flex-direction: column !important;
    text-align: center;
  }

  .about-text {
    text-align: left;
  }
}


.about-text a {
  color: #ff4d4d;
  text-decoration: underline;
  font-weight: bold;
  transition: color 0.3s;
}

.about-text a:hover {
  color: #ff0000;
}








/* stejný základ jako u sekce O NÁS */
.premieres-section {
  max-width: 1000px;
  margin: 60px auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* použijeme znovu about-block, about-card atd. */

/* NOVINKA: šedý obrázek u proběhlých premiér */
.past-premiere img {
  filter: grayscale(100%);
  opacity: 0.7;
}

.about-block.past .about-card img {
  filter: grayscale(100%);
  opacity: 0.7;
}

.about-block.past .about-text p::before {
  content: "⚠ PROBĚHLÉ: ";
  font-weight: bold;
  color: #dc3545;
}














/* 📦 MODÁLNÍ OKNO - sjednocený styl */
.modal {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* tmavý průhledný podklad */
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: #111;
  color: white;
  border: 2px solid white;
  border-radius: 16px;
  padding: 30px;
  width: 90%;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.15);
  position: relative;
}

.modal .close {
  position: absolute;
  top: 20px;           /* ➕ posuneme níž */
  right: 25px;
  font-size: 80px;     /* 🔎 mnohem větší */
  color: white;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  line-height: 1;
  font-weight: bold;
}


/* Tlačítka vevnitř modálu */
.modal-content button {
  margin: 10px;
  padding: 10px 20px;
  background-color: transparent;
  border: 2px solid white;
  border-radius: 8px;
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}

.modal-content button:hover {
  background-color: white;
  color: black;
}








.premiere-label {
  font-weight: bold;
  padding: 6px 12px;
  border-radius: 10px;
  display: inline-block;
  margin-bottom: 10px;
  font-size: 14px;
}

.premiere-past {
  color: #dc3545;
}

.premiere-upcoming {
  color: #28a745;
}

.premieres-section .past img {
  filter: grayscale(100%);
}







/* Posuneme ORIGOCUT o kousek výš */
header .page-title {
  margin-top: 10px;          /* jemně nahoru */
  margin-bottom: 14px;
}

/* Kontejner pro tlačítko MENU */
.nav-launch-wrap {
  display: flex;
  justify-content: center;
  margin: 10px 0 24px;
}

/* Velké tlačítko MENU (styl jako kartičky: černé + bílý okraj) */
.nav-launch {
  background: #0e0e0e;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 999px;
  padding: 14px 28px;
  font-weight: 800;
  letter-spacing: 0.5px;
  font-size: 18px;
  cursor: pointer;
  transition: transform .15s ease, background-color .2s ease, color .2s ease;
}
.nav-launch:hover { transform: translateY(-1px); }
.nav-launch:active { transform: translateY(0); }

/* --- Sjednocené modální okno (větší verze) --- */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0,0,0,.7);
  justify-content: center;
  align-items: center;
}

.modal-content.nav-modal {
  width: min(92vw, 960px);          /* větší šířka */
  background: #111;                  /* černá karta */
  border: 2px solid #fff;            /* bílé orámování */
  border-radius: 16px;
  color: #fff;
  padding: 28px;
  box-shadow: 0 0 25px rgba(255,255,255,.12);
  position: relative;
  animation: modalPop .18s ease-out;
}

@keyframes modalPop {
  from { transform: scale(.97); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* Velký křížek */
.modal .close {
  position: absolute;
  top: 20px;
  right: 24px;
  font-size: 38px;
  color: #fff;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  line-height: 1;
  font-weight: 800;
}

/* Nadpis v modalu */
.nav-modal-title {
  margin: 0 0 18px;
  font-size: 22px;
  text-align: center;
  letter-spacing: 0.3px;
}

/* Grid navigačních tlačítek – vedle sebe, responsivně */
.nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

/* Tlačítka uvnitř modalu – velká „kapsle“, styl kartiček */
.nav-btn {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: #0e0e0e;
  border: 2px solid #fff;
  border-radius: 999px;
  padding: 16px 22px;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: .4px;
  transition: background-color .2s ease, color .2s ease, transform .15s ease;
}
.nav-btn:hover { transform: translateY(-1px); }
.nav-btn:active { transform: translateY(0); }





/* Odkazy v patičce – bílé */
#paticka a,
#paticka a:visited {
  color: #fff;
  text-decoration: none;   /* nech klidně 'underline' pokud chceš podtržení */
}

/* Hover/focus efekt (lehké zjasnění nebo podtržení) */
#paticka a:hover,
#paticka a:focus {
  color: #fff;
  text-decoration: underline; /* nebo: opacity: .85; */
}












/* === MOBIL – modal MENU: uprostřed, menší šířka, VYŠŠÍ okno, rezerva pro křížek, užší tlačítka === */
@media (max-width: 540px) {
  /* ← Tady si to ladíš */
  :root{
    --modal-side-gap: 14px;       /* okraj overlaye od stran displeje */
    --modal-vert-gap: 8px;        /* okraj shora/zdola overlaye */
    --modal-max-width: 340px;     /* šířka okna modalu */
    --modal-top-padding: 110px;   /* rezerva uvnitř nahoře pro křížek */
    --modal-min-height: 45dvh;    /* MIN výška okna – prodlouží „nahoru i dolů“ */
    --modal-max-height: 96dvh;    /* MAX výška – nepřeteče přes displej */

    --btn-max-width: 220px;       /* ŠÍŘKA tlačítek (zúží je) */
    --btn-pad-x: 14px;            /* vodorovné odsazení uvnitř tlačítek */
    --btn-pad-y: 10px;            /* svislé odsazení uvnitř tlačítek */
    --btn-font-size: 16px;
    --btn-gap: 10px;              /* mezera mezi tlačítky */
  }

  /* Overlay – vycentrovat, stejné okraje z obou stran */
  #navModal{
    align-items: center !important;
    justify-content: center !important;
    padding:
      max(var(--modal-vert-gap), env(safe-area-inset-top))
      max(var(--modal-side-gap), env(safe-area-inset-right))
      max(var(--modal-vert-gap), env(safe-area-inset-bottom))
      max(var(--modal-side-gap), env(safe-area-inset-left)) !important;
    box-sizing: border-box !important;
  }

  /* Okno modalu – vyšší (min-height), ale nikdy víc než displej (max-height) */
  #navModal .modal-content.nav-modal{
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    width: min(92vw, var(--modal-max-width)) !important;
    /* výška řízená bezpečně přes min/max s ohledem na safe insets */
    min-height: min(
      var(--modal-min-height),
      calc(100dvh - 2 * max(var(--modal-vert-gap), env(safe-area-inset-top)))
    ) !important;
    max-height: calc(100dvh - 2 * max(var(--modal-vert-gap), env(safe-area-inset-top))) !important;

    padding: var(--modal-top-padding) 14px 16px !important; /* rezerva pro X */
    border-radius: 14px !important;
    overflow: auto !important; /* když by bylo položek víc, jde jemně scrollovat */
    position: relative !important;
  }

  /* Křížek – vpravo nahoře, mimo tlačítka */
  #navModal .close{
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    left: auto !important;
    transform: none !important;
    font-size: 28px !important;
    line-height: 1 !important;
    z-index: 3 !important;
  }

  /* Tlačítka – jeden sloupec, užší, vystředěná */
  #navModal .nav-grid{
    grid-template-columns: 1fr !important;
    gap: var(--btn-gap) !important;
    margin: 0 !important;
    place-items: center !important;
  }
  #navModal .nav-btn{
    width: 100% !important;
    max-width: var(--btn-max-width) !important;   /* ← šířka tlačítek */
    padding: var(--btn-pad-y) var(--btn-pad-x) !important; /* ← „tloušťka“ tlačítek */
    font-size: var(--btn-font-size) !important;
  }
}




/* === MOBILE HERO FIX (přetluče stará i inline pravidla) === */
@media (max-width: 540px) {
  :root { --hero-min-height: 100dvh; } /* můžeš snížit/trochu zvýšit podle chuti */

  header {
    position: relative !important;
    min-height: var(--hero-min-height) !important; /* header je vysoký jako celé okno */
    overflow: hidden !important;
  }

  header > img {
    position: absolute !important;
    inset: 0 !important;                /* 0 z každé strany */
    width: 100% !important;
    height: 100% !important;            /* vyplní celý header */
    object-fit: cover !important;       /* bez deformace, ořízne okraje */
    object-position: center !important; /* případně 'center 20%' pro posun nahoru */
    display: block !important;
  }

  .hero-overlay,
  .hero-countdown {
    position: relative !important;
    z-index: 1 !important;              /* text a odpočet nad fotkou */
  }
}



/* === MOBILE HERO LAYOUT – centrování nadpisu+MENU, countdown dole === */
@media (max-width: 540px) {
  /* header je vysoký jako celé okno, fotka přes celý header */
  header {
    position: relative !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }
  header > img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }

  /* TITULEK + MENU doprostřed */
  .hero-overlay {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 22px !important;
    padding: 16px !important;
    z-index: 2 !important;
  }

  /* COUNTDOWN ke spodnímu okraji (bez kolize s notchem) */
  .hero-countdown {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: max(18px, env(safe-area-inset-bottom)) !important;
    width: min(92vw, 900px) !important;
    text-align: center !important;
    z-index: 2 !important;
    pointer-events: none;
  }
  .hero-countdown .time-box { pointer-events: auto; }
}











/* === DESKTOP: header přes celou obrazovku, obsah hned pod ním === */
@media (min-width: 768px) {
  body { margin: 0 !important; }

  header {
    position: relative !important;
    height: 100vh !important;      /* ← výška = přesně výška okna */
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  header > img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;   /* fotka zakryje celý header */
    object-position: center !important; /* případně uprav třeba: center 30% */
    display: block !important;
  }

  /* Titulek + MENU uprostřed; countdown dole (stejně jako na mobilu) */
  .hero-overlay {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 22px !important;
    z-index: 2 !important;
  }
  .hero-countdown {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 34px !important;        /* ↑ posuň výš/níž dle chuti */
    z-index: 2 !important;
  }

  /* obsah nezačíná s mezerou */
  main { margin-top: 0 !important; }
}






/* ===== O NÁS – mobilní úpravy pouze pro tuto sekci (PC ani modal neovlivní) ===== */
@media (max-width: 600px){
  /* Box-sizing jen uvnitř about-section, neglobálně */
  .about-section, .about-section * { box-sizing: border-box; }

  /* Stejné odsazení z obou stran + rozumná šířka */
  .about-section{
    width: 100%;
    max-width: 700px;
    margin: 20px auto 48px;
    padding: 0 14px;     /* ← boční mezera (stejně vlevo i vpravo) */
  }

  /* Kartička nahoře, text pod ní */
  .about-section .about-block,
  .about-section .about-block.reverse{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  /* Karta i text přes celou šířku bez přetékání */
  .about-section .about-card,
  .about-section .about-text{
    width: 100%;
    margin: 0;
  }

  /* Zruší „zbytečnou“ pevnou výšku karty – bude jen tak vysoká, jak je obsah */
  .about-section .about-card{ flex: 0 1 auto; }

  /* Obrázek nikdy nepřeleze rámeček karty */
  .about-section .about-card img{
    display: block;
    max-width: 100%;
    height: auto;
  }

  /* Volitelné: schovat horizontální scroll jen na mobilu
  body { overflow-x: hidden; }
  */
}







/* === Plovoucí MENU tlačítko (FAB) – stejné jako nav-launch, jen menší a „přilepené“ === */
.nav-fab{
  position: fixed;
  right: max(16px, env(safe-area-inset-right) + 12px);
  bottom: max(16px, env(safe-area-inset-bottom) + 12px);
  z-index: 1900;                      /* pod modalem (ten má 2000), nad obsahem */
  font-size: 18px;                    /* ← OVLÁDÁNÍ: velikost textu FAB */
  padding: 12px 20px;                 /* ← OVLÁDÁNÍ: velikost FAB */
  border-width: 3px;

  /* skryté ve výchozím stavu – odhalíme třídou .show */
  opacity: 0;
  transform: translateY(8px) scale(.96);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, box-shadow .2s ease;
}
.nav-fab.show{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Na mobilu o fous menší, ať nepřekáží palci */
@media (max-width: 540px){
  .nav-fab{
    font-size: 16px;                  /* ← OVLÁDÁNÍ: mobilní velikost */
    padding: 10px 16px;               /* ← OVLÁDÁNÍ: mobilní polštáře */
    border-width: 2px;
    right: max(12px, env(safe-area-inset-right) + 8px);
    bottom: max(12px, env(safe-area-inset-bottom) + 8px);
  }
}



/* === Mobil: odpočet ~2× menší === */
@media (max-width: 540px) {
  /* zmenší jen samotné „krabičky“ s čísly, ne titulek */
  .hero-countdown .countdown,
  .countdown-container .countdown {
    transform: scale(0.7);
    transform-origin: bottom center; /* ať se zmenšuje „dolů od středu“ */
  }

  /* trochu menší rozestupy, ať je to uhlazené */
  .hero-countdown .countdown,
  .countdown-container .countdown {
    gap: 8px;
  }

  /* volitelné: jemnější rámeček (můžeš klidně smazat) */
  .hero-countdown .time-box,
  .countdown-container .time-box {
    border-width: 1.5px;
    padding: 4px 6px;
  }
}

/* Pokud chceš menší i titulek nad odpočtem, odkomentuj:
@media (max-width: 540px) {
  .hero-countdown h2,
  .countdown-container h2 { font-size: 14px; }
}
*/








/* === MOBILNÍ MODAL MENU: využij dostupnou výšku, ať se vejde vše === */
@media (max-width: 540px) {
  /* OVLÁDÁNÍ – můžeš si upravit tyto hodnoty:
     --modal-outer-gap  = mezera od okrajů displeje
     --modal-top-pad    = vnitřní rezerva nahoře pod křížek
     --btn-pad-y/x      = „tloušťka“ tlačítek
     --btn-font-size    = velikost textu tlačítek
  */
  :root {
    --modal-outer-gap: 10px;
    --modal-top-pad: 72px;
    --btn-pad-y: 10px;
    --btn-pad-x: 16px;
    --btn-font-size: 16px;
  }

  /* Modal doprostřed a s malými okraji */
  #navModal {
    align-items: center !important;
    justify-content: center !important;
    padding:
      max(var(--modal-outer-gap), env(safe-area-inset-top))
      max(var(--modal-outer-gap), env(safe-area-inset-right))
      max(var(--modal-outer-gap), env(safe-area-inset-bottom))
      max(var(--modal-outer-gap), env(safe-area-inset-left)) !important;
    box-sizing: border-box !important;
  }

  /* Okno modalu: roztáhni na dostupnou výšku displeje (bez přesahu) */
  #navModal .modal-content.nav-modal {
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;

    width: min(92vw, 360px) !important;   /* můžeš zúžit/rozšířit */
    max-width: 100% !important;

    /* fallback → modernější → nejmodernější (poslední vyhrává) */
    max-height: calc(100vh  - 2 * var(--modal-outer-gap)) !important;
    max-height: calc(100dvh - 2 * var(--modal-outer-gap)) !important;
    max-height: calc(100svh - 2 * var(--modal-outer-gap)) !important;

    /* nahoře rezerva pro křížek, dole standard */
    padding: var(--modal-top-pad) 14px 16px !important;

    border-radius: 14px !important;
    overflow: visible !important; /* když se vše vejde, ať nic neřeže */
    position: relative !important;
  }

  /* Když je telefon extra nízký, povol uvnitř jemný skrol jako zálohu */
  @media (max-height: 600px) {
    #navModal .modal-content.nav-modal { overflow: auto !important; }
  }

  /* Tlačítka do jednoho sloupce, užší a úspornější */
  #navModal .nav-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 0 !important;
    place-items: center !important;
  }
  #navModal .nav-btn {
    width: 100% !important;
    max-width: 220px !important;
    padding: var(--btn-pad-y) var(--btn-pad-x) !important;
    font-size: var(--btn-font-size) !important;
  }

  /* Křížek – menší a výš, ať nikdy nepřekrývá tlačítka */
  #navModal .close {
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    font-size: 28px !important;
    line-height: 1 !important;
    z-index: 3 !important;
  }
}

/* Drobné „záchranné“ škálování pro opravdu malé výšky displeje */
@media (max-width: 540px) and (max-height: 560px) {
  :root { --modal-top-pad: 56px; --btn-font-size: 15px; --btn-pad-y: 9px; }
}
@media (max-width: 540px) and (max-height: 500px) {
  :root { --modal-top-pad: 50px; --btn-font-size: 14px; --btn-pad-y: 8px; }
}

/* === MOBILE FIX: modal drž obsah uvnitř + využij celou výšku === */
@media (max-width: 540px){
  :root{
    --modal-outer-gap: 10px;   /* okraj okna od kraje displeje */
    --modal-top-pad: 86px;     /* rezerva nahoře pod křížek (zvětši/zmenši) */
  }

  /* overlay beze změny – jen připomínka, že centrovat chceme */
  #navModal{
    align-items: center !important;
    justify-content: center !important;
  }

  /* vlastní okno modalu */
  #navModal .modal-content.nav-modal{
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;

    width: min(92vw, 360px) !important;
    max-width: 100% !important;

    /* Využij dostupnou výšku (počítá se safe-area) – poslední řádek vyhrává */
    max-height: calc(100vh  - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 2*var(--modal-outer-gap)) !important;
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 2*var(--modal-outer-gap)) !important;
    max-height: calc(100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 2*var(--modal-outer-gap)) !important;

    padding: var(--modal-top-pad) 14px 16px !important; /* místo pro křížek */
    border-radius: 14px !important;

    /* KLÍČOVÉ: ať už nic „nevyčuhuje“, v případě potřeby se posune uvnitř */
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* tlačítka v jednom sloupci jako dřív */
  #navModal .nav-grid{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 0 !important;
    place-items: center !important;
  }

  /* křížek nahoře vpravo, mimo tlačítka */
  #navModal .close{
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    font-size: 28px !important;
    line-height: 1 !important;
    z-index: 3 !important;
  }
}
 
/* === MOBILE FIX – první tlačítko už nezmizí, modal využije výšku a drží obsah uvnitř === */
@media (max-width: 540px){
  :root{
    --modal-outer-gap: 10px;      /* boční/vertikální mezera okna od okrajů displeje */
    --modal-top-pad: 120px;       /* REZERVA nahoře pod křížek a nad prvním tlačítkem */
  }

  #navModal{
    align-items: center !important;
    justify-content: center !important;
    padding:
      max(var(--modal-outer-gap), env(safe-area-inset-top))
      max(var(--modal-outer-gap), env(safe-area-inset-right))
      max(var(--modal-outer-gap), env(safe-area-inset-bottom))
      max(var(--modal-outer-gap), env(safe-area-inset-left)) !important;
    box-sizing: border-box !important;
  }

  #navModal .modal-content.nav-modal{
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;

    width: min(92vw, 360px) !important;
    max-width: 100% !important;

    /* maximální použitelná výška (s ohledem na notche) */
    max-height: calc(100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 2*var(--modal-outer-gap)) !important;

    /* KLÍČOVÉ: velká rezerva nahoře – první tlačítko už nebude schované */
    padding: var(--modal-top-pad) 14px 16px !important;

    border-radius: 14px !important;
    overflow-y: auto !important;   /* když je třeba, posouvá se jen obsah */
    overflow-x: hidden !important;
    scrollbar-gutter: stable both-edges; /* stabilní rozložení se scrollbarem */
    position: relative !important;
  }

  /* Křížek – mimo tlačítka */
  #navModal .close{
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    font-size: 28px !important;
    line-height: 1 !important;
    z-index: 3 !important;
  }

  /* Tlačítka – jeden sloupec, bez dodatečných mezer nahoře */
  #navModal .nav-grid{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    place-items: center !important;
  }

  /* Malé pojištění: přidej pár px nad *první* tlačítko */
  #navModal .nav-grid .nav-btn:first-child{
    margin-top: 4px !important;
  }
}






/* === NAV MENU MODAL – hotfix aby se vešla všechna tlačítka (MOBIL) === */
@media (max-width: 540px) {
  /* neutralizace starých globálních pravidel pro toto okno */
  #navModal .modal-content {
    height: auto !important;
    margin: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* vlastní rozměry a rezerva nahoře pod křížek */
  #navModal .modal-content.nav-modal {
    width: min(92vw, 360px) !important;
    max-width: 100% !important;

    /* využij dostupnou výšku displeje (bez přesahu) */
    max-height: calc(100svh - 20px) !important;

    /* ↑ když chceš větší nebo menší okno:
       nahraď 20px (okraj okna od okrajů displeje) jinou hodnotou */

    padding-top: 120px !important; /* rezerva pro křížek nad 1. tlačítkem */
  }

  /* křížek vpravo nahoře, aby nic nepřekrýval */
  #navModal .close {
    top: 10px !important;
    right: 12px !important;
    left: auto !important;
    transform: none !important;
    font-size: 28px !important;
    background: none !important;
    line-height: 1 !important;
    z-index: 3 !important;
  }

  /* tlačítka v jednom sloupci, bez extra mezer nahoře */
  #navModal .nav-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 0 !important;
    place-items: center !important;
  }
  #navModal .nav-grid .nav-btn:first-child { margin-top: 4px !important; }
}

/* === NAV MENU MODAL – zmenšené na mobilu === */
@media (max-width: 540px){
  /* rozměry okna */
  #navModal .modal-content.nav-modal{
    width: min(92vw, 320px) !important;          /* ← ŠÍŘKA okna (zkus 300–340) */
    max-height: min(80svh, 330px) !important;    /* ← VÝŠKA okna (menší = nižší) */
    padding-top: 86px !important;                /* ← mezera pro křížek nahoře */
    padding-bottom: 12px !important;
  }

  /* jemné zmenšení tlačítek */
  #navModal .nav-grid{ gap: 8px !important; }    /* mezera mezi tlačítky */
  #navModal .nav-btn{
    max-width: 200px !important;                 /* šířka tlačítek */
    padding: 8px 14px !important;                /* „tloušťka“ tlačítek */
    font-size: 15px !important;
  }
}









/* === MENU tlačítko: přidej ikonu (3 čárky) vlevo od textu === */
.nav-launch::before,
.nav-fab::before {
  content: "";
  display: inline-block;
  width: 18px;              /* šířka ikony */
  height: 12px;             /* výška ikony (3 čárky se hezky vejdou) */
  margin-right: 10px;       /* mezera mezi ikonou a textem MENU */
  vertical-align: middle;
  opacity: .95;

  /* 3 vodorovné čárky (bez obrázku) */
  background:
    linear-gradient(currentColor, currentColor) 0 0/100% 2px no-repeat,      /* horní čárka */
    linear-gradient(currentColor, currentColor) 0 50%/100% 2px no-repeat,     /* prostřední */
    linear-gradient(currentColor, currentColor) 0 100%/100% 2px no-repeat;    /* spodní */

  transform-origin: left center;
  transition: transform .18s ease, opacity .2s ease;
}

/* Jemné „nafouknutí“ ikony při hoveru – zarovná se s efektem tlačítka */
.nav-launch:hover::before,
.nav-fab:hover::before {
  transform: scaleX(1.04);
}

/* Respektuj reduced motion */
@media (prefers-reduced-motion: reduce) {
  .nav-launch::before,
  .nav-fab::before { transition: none; }
}
/* === MENU tlačítko: větší 3 čárky, škálují se s font-size === */
.nav-launch::before,
.nav-fab::before {
  /* můžeš doladit jen tyto 3 proměnné ↓ */
  --icon-w: 1.35em;   /* šířka ikony */
  --icon-h: 1.05em;   /* výška ikony */
  --bar:    0.16em;   /* tloušťka čárky */

  content: "";
  display: inline-block;
  width: var(--icon-w);
  height: var(--icon-h);
  margin-right: 0.5em;         /* mezera mezi ikonou a textem */
  vertical-align: -0.1em;      /* jemné srovnání s textovou linkou */

  /* 3 vodorovné čárky (bez obrázků) */
  background:
    linear-gradient(currentColor, currentColor) center top    / 100% var(--bar) no-repeat,
    linear-gradient(currentColor, currentColor) center center / 100% var(--bar) no-repeat,
    linear-gradient(currentColor, currentColor) center bottom / 100% var(--bar) no-repeat;

  transform-origin: left center;
  transition: transform .18s ease, opacity .2s ease;
}

.nav-launch:hover::before,
.nav-fab:hover::before {
  transform: scaleX(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .nav-launch::before,
  .nav-fab::before { transition: none; }
}











/* === MOBIL: O NÁS – spojit obrázek+nadpis a text do jedné "karty" === */
@media (max-width: 600px){
  /* kontejner může mít malý boční padding (měníš tady) */
  .about-section { padding: 0 14px; }

  /* samotný blok bude tou "jednou kartou" */
  .about-block,
  .about-block.reverse{
    display: flex;
    flex-direction: column;      /* kartička nahoře, text pod ní */
    align-items: stretch;
    gap: 0;                      /* bez mezery – tvoří to jednu kartu */
    background: #0e0e0e;
    border: 2px solid #fff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,.25);
    overflow: hidden;            /* ořízne rohy obrázku atd. */
    padding: 0;                  /* rámeček je na parentu */
    width: 100%;
  }

  /* vnitřní "card" a "text" se zneviditelní (bez vlastního rámečku) */
  .about-block .about-card,
  .about-block.reverse .about-card,
  .about-block .about-text,
  .about-block.reverse .about-text{
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    width: 100%;
  }

  /* obrázek přes celou šířku, bez zaoblení (zaoblení řeší parent) */
  .about-block .about-card { padding: 0; }
  .about-block .about-card img{
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
  }

  /* nadpis hned pod obrázkem, lehké vnitřní odsazení */
  .about-block .about-card h3{
    margin: 0;
    padding: 12px 14px 4px;                 /* ↑↓ mezera upravíš tady */
    font-size: clamp(18px, 6.2vw, 22px);
    letter-spacing: .4px;
    font-weight: 800;
  }

  /* text jako spodek té samé karty, s malou "mezerkou" nahoře */
  .about-block .about-text{
    padding: 8px 14px 14px;                 /* ↑ malá mezera pod nadpisem */
    line-height: 1.6;
    font-size: 16px;
  }
}







/* ===== FILTRY modal: TLAČÍTKA = stejné jako v nav modalu ===== */
#filterModal .filter-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-top: 6px;
  text-align: center;
}

/* stejné „pilulky“ jako .nav-btn */
#filterModal .filter-btn{
  display: inline-block;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: #0e0e0e;
  border: 2px solid #fff;
  border-radius: 999px;
  padding: 16px 22px;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: .4px;
  font-family: inherit;            /* stejné písmo */
  transition: transform .18s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease;

  /* výchozí stav pro pop-in (stejné jako v nav modalu) */
  opacity: 0;
  transform: scale(.8);
}

/* hover/active = shodné chování */
#filterModal .filter-btn:hover{
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}
#filterModal .filter-btn:active{ transform: translateY(0); }
#filterModal .filter-btn:focus-visible{ outline: 3px solid #fff; outline-offset: 3px; }

/* === stejná pop-in animace + „ready“ režim jako u nav modalu === */
@keyframes popIn { from { opacity:0; transform:scale(.8);} to { opacity:1; transform:scale(1);} }

#filterModal .filter-grid.reveal .filter-btn{ animation: popIn 180ms cubic-bezier(.2,.9,.2,1) forwards; }
/* stupňované zpoždění – jako v nav modalu */
#filterModal .filter-grid.reveal .filter-btn:nth-child(1){  animation-delay: 0ms;  }
#filterModal .filter-grid.reveal .filter-btn:nth-child(2){  animation-delay: 60ms; }
#filterModal .filter-grid.reveal .filter-btn:nth-child(3){  animation-delay: 120ms;}
#filterModal .filter-grid.reveal .filter-btn:nth-child(4){  animation-delay: 180ms;}
#filterModal .filter-grid.reveal .filter-btn:nth-child(5){  animation-delay: 240ms;}
#filterModal .filter-grid.reveal .filter-btn:nth-child(6){  animation-delay: 300ms;}
#filterModal .filter-grid.reveal .filter-btn:nth-child(7){  animation-delay: 360ms;}
#filterModal .filter-grid.reveal .filter-btn:nth-child(8){  animation-delay: 420ms;}
#filterModal .filter-grid.reveal .filter-btn:nth-child(9){  animation-delay: 480ms;}
#filterModal .filter-grid.reveal .filter-btn:nth-child(10){ animation-delay: 540ms;}
#filterModal .filter-grid.reveal .filter-btn:nth-child(11){ animation-delay: 600ms;}
#filterModal .filter-grid.reveal .filter-btn:nth-child(12){ animation-delay: 660ms;}

#filterModal .filter-grid.ready .filter-btn{ opacity: 1; transform: none; }
#filterModal .filter-grid.ready .filter-btn:hover{
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}
/* === TUNING proměnné – MŮŽEŠ SI SNADNO UPRAVIT === */
:root{
  --filter-btn-font: 13.5px;   /* původně 18px → ~ o necelou polovinu menší */
  --filter-btn-pad-y: 8px;     /* původně 16px */
  --filter-btn-pad-x: 14px;    /* původně 22px */
  --filter-gap: 12px;
}

/* vyšší modal + scroll uvnitř, aby se vešlo víc obsahu */
#filterModal{
  align-items: center;
  justify-content: center;
}
#filterModal .modal-content{
  width: min(96vw, 980px) !important;
  max-height: 47dvh !important;      /* ↑ zvětšení výšky modalu */
  min-height: 43dvh;                  /* volitelně trochu výšky vždy */
  overflow: auto !important;
  padding: 28px 22px !important;
}

/* grid s tlačítky – stejné rozložení jako v nav modalu, jen menší min šířka */
#filterModal .filter-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); /* menší tlačítka = vejde se víc sloupců */
  gap: var(--filter-gap);
  margin-top: 6px;
  text-align: center;
}

/* stejné „pilulky“ jako .nav-btn, ale menší (viz proměnné výš) */
#filterModal .filter-btn{
  display: inline-block;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: #0e0e0e;
  border: 2px solid #fff;
  border-radius: 999px;
  padding: var(--filter-btn-pad-y) var(--filter-btn-pad-x);
  font-weight: 800;
  font-size: var(--filter-btn-font);
  letter-spacing: .4px;
  font-family: inherit;
  transition: transform .18s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease;

  /* pop-in start stav (jako v nav modalu) */
  opacity: 0;
  transform: scale(.8);
}

/* hover = stejné „nafouknutí“ jako v nav modalu */
#filterModal .filter-btn:hover{
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}
#filterModal .filter-btn:active{ transform: translateY(0); }
#filterModal .filter-btn:focus-visible{ outline: 3px solid #fff; outline-offset: 3px; }

/* POP-IN animace + ready režim – shodné s nav modem */
@keyframes popIn { from { opacity:0; transform:scale(.8);} to { opacity:1; transform:scale(1);} }
#filterModal .filter-grid.reveal .filter-btn{ animation: popIn 180ms cubic-bezier(.2,.9,.2,1) forwards; }
#filterModal .filter-grid.ready .filter-btn{ opacity:1; transform:none; }
#filterModal .filter-grid.ready .filter-btn:hover{ transform: translateY(-1px) scale(1.04); }

/* === AKTIVNÍ (ZAŠKRTNUTO) = ZELENÁ PILULKA === */
#filterModal .filter-btn.is-active,
#filterModal .filter-btn[aria-pressed="true"]{
  background: #198754;   /* ta stejná zelená jako používáš jinde */
  color: #fff;
  border-color: #fff;
}
/* ZELENÝ stav (aktivní) – silnější selektor + !important pro jistotu proti globálním stylům buttonů */
#filterModal .filter-btn.is-selected,
#filterModal .filter-btn[aria-pressed="true"]{
  background: #198754 !important;
  color: #fff !important;
  border-color: #fff !important;
}





/* === FILTRY – seznamy pod sebou + menší modal === */

/* menší modal */
#filterModal .filter-modal{
  width: min(92vw, 680px) !important;
  max-width: 680px !important;
  max-height: 80dvh !important;
  padding: 22px !important;
}

/* ponecháme 2 sloupce (vlevo roky, vpravo kategorie), ale uvnitř budou seznamy pod sebou */
#filterModal .filter-body{
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

/* roky i kategorie pod sebe (1 sloupec) */
#filterYears.filter-grid,
#filterCats.filter-grid{
  grid-template-columns: 1fr;     /* jeden sloupec = položky pod sebou */
  gap: 12px;                       /* klidně uprav */
}

/* ať má každé tlačítko plnou šířku řádku */
#filterModal .filter-grid .filter-btn{
  width: 100%;
}

/* drobné zmenšení mezery pod nadpisy sekcí */
#filterModal .filter-col h3{
  margin-bottom: 8px;
}











/* === UNIFIKACE TLAČÍTEK (PC i mobil) – stejné „pilulky“ === */
.nav-btn,
.filter-btn{
  display:inline-block;
  text-align:center;
  text-decoration:none;
  color:#fff;
  background:#0e0e0e;
  border:2px solid #fff;
  border-radius:999px;
  padding:16px 22px;            /* velikost jako v PC nav-modalu */
  font-weight:800;
  font-size:18px;
  letter-spacing:.4px;
  transition:transform .18s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.nav-btn:hover,
.filter-btn:hover{ transform: translateY(-1px) scale(1.04); box-shadow:0 10px 26px rgba(0,0,0,.28); }
.nav-btn:active,
.filter-btn:active{ transform: translateY(0); }
.nav-btn:focus-visible,
.filter-btn:focus-visible{ outline:3px solid #fff; outline-offset:3px; }

/* === MOBIL: aplikuj layout z nav-modalu na VŠECHNY .nav-modal (MENU, ROKY, KATEGORIE) === */
@media (max-width:540px){
  /* Okno modalu (společné pro #navModal, #yearsModal, #catsModal) */
  .modal-content.nav-modal{
    display:flex !important;
    flex-direction:column !important;
    box-sizing:border-box !important;

    width:min(92vw, 360px) !important;
    max-width:100% !important;

    /* využij výšku displeje, ale nepřeteč */
    max-height:calc(200svh - 20px) !important;
    padding:120px 14px 16px !important; /* rezerva nahoře pro křížek */
    border-radius:14px !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;
    scrollbar-gutter:stable both-edges;
    position:relative !important;
  }

  /* Křížek */
  .modal-content.nav-modal .close{
    position:absolute !important;
    top:10px !important;
    right:12px !important;
    left:auto !important;
    transform:none !important;
    font-size:28px !important;
    line-height:1 !important;
    z-index:3 !important;
    background:none !important;
  }

  /* Tlačítka uvnitř všech nav-modálů do jednoho sloupce + stejné rozměry */
  .modal-content.nav-modal .nav-grid{
    grid-template-columns:1fr !important;
    gap:10px !important;
    margin:0 !important;
    place-items:center !important;
  }
  .modal-content.nav-modal .nav-btn{
    width:100% !important;
    max-width:220px !important;     /* přesně jako v mobilním nav-modalu */
    padding:10px 16px !important;
    font-size:16px !important;
  }
}

/* === FILTRY modal – vyšší okno + scroll uvnitř, ať se vše vejde === */
#filterModal{
  align-items:center;
  justify-content:center;
}
#filterModal .filter-modal{
  width:min(98vw, 1200px) !important;
  max-height:92dvh !important;   /* ↑ přidáno: víc výšky */
  overflow:auto !important;
  padding:28px !important;
}
#filterModal .filter-grid{
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* hezký multi-sloupec na PC */
}








/* ==== MOBIL (≤720px) – obsah modálů ROKY/KATEGORIE + stejné okraje ==== */
@media (max-width: 720px){
  #yearsModal .modal-content.nav-modal,
  #catsModal  .modal-content.nav-modal{
    position: relative;
    box-sizing: border-box !important;

    /* šířka = strop 480px, jinak celé okno mínus 24px (12px zleva + 12px zprava) */
    width: min(480px, calc(100dvw - 24px)) !important;
    margin-inline: auto !important;

    /* vnitřek */
    padding: 110px 16px 18px !important;
    max-height: calc(100dvh - 24px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;

    /* rezervace místa pro scrollbar -> centrování bude symetrické */
    scrollbar-gutter: stable both-edges;
    text-align: center;
  }

  /* křížek doprostřed – ponecháváme */
  #yearsModal .modal-content.nav-modal .close,
  #catsModal  .modal-content.nav-modal .close{
    position: absolute !important;
    top: 10px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    font-size: 28px !important;
    line-height: 1 !important;
    background: none !important;
    border: 0 !important;
  }

  /* overlay – stejné vnější odsazení po stranách */
  #yearsModal, #catsModal{
    padding: 12px !important; /* 12px zleva i zprava */
    justify-content: center !important;
    align-items: center !important;
  }
}









/* === Only button grows on hover; cards stay still === */
.video-card { 
  cursor: default !important;
  transform: none !important;
  transition: transform 0s !important; /* vypne animaci karty */
}
.video-card:hover { 
  transform: none !important; 
}

/* obrázek a nadpis nejsou klikací (jen prevence ghost-kliků) */
.video-card img { pointer-events: none; }
.video-card h2 a { pointer-events: none; }

/* tlačítko PŘEHRÁT – jediné, co „nafukuje“ */
.play-btn {
  transition: transform .18s ease, box-shadow .2s ease; /* jemná animace jen na tlačítku */
}
.play-btn:hover { 
  transform: translateY(-1px) scale(1.04); 
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}
.play-btn:active { transform: translateY(0) scale(1.0); }













/* === DESIGN MODAL: výška téměř fullscreen + vnitřní scroll === */
#designModal{
  justify-content: center !important;
  align-items: center !important;
  padding:
    max(12px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left)) !important;
  box-sizing: border-box !important;
}

#designModal .modal-content.nav-modal{
  /* šířka už je ok, přidáme výšku */
  width: calc(100dvw - 24px) !important;
  max-width: 1400px !important;

  height: calc(100dvh - 24px) !important;   /* ← pevná výška téměř fullscreen */
  max-height: none !important;               /* ať ji nic “nebrzdí” */
  display: flex !important;                  /* aby šel uvnitř řídit layout */
  flex-direction: column !important;

  padding: 32px !important;
  overflow: auto !important;                 /* scrollne se obsah, ne overlay */
  border-radius: 16px !important;
  scrollbar-gutter: stable both-edges;
}

/* tablet */
@media (max-width: 1024px){
  #designModal .modal-content.nav-modal{
    max-width: 1100px !important;
    padding: 28px !important;
  }
}

/* mobil */
@media (max-width: 600px){
  #designModal .modal-content.nav-modal{
    width: calc(100dvw - 24px) !important;
    height: calc(100dvh - 24px) !important;  /* také pevná výška na mobilech */
    padding: 22px 16px 18px !important;
  }
  #designModal .modal-content.nav-modal .close{
    top: 10px !important;
    right: 12px !important;
    font-size: 28px !important;
  }
}
/* === DESIGN MODAL: top-aligned + vnitřní vertikální scroll === */
#designModal{
  display: none;                    /* zůstává řízeno JS */
  justify-content: flex-start !important;   /* zarovnat k hornímu okraji */
  align-items: center !important;           /* centrovat horizontálně */
  padding:
    max(12px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left)) !important;
  box-sizing: border-box !important;
}

#designModal .modal-content.nav-modal{
  width: min(1400px, calc(100dvw - 24px)) !important;
  height: min(100dvh - 24px, 1000px) !important; /* skoro fullscreen na výšku */
  max-height: none !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;   /* obsah začíná nahoře */
  align-items: stretch !important;

  overflow-y: auto !important;              /* scrolluje se jen obsah modálu */
  overflow-x: hidden !important;

  padding: 28px !important;
  border-radius: 16px !important;
  scrollbar-gutter: stable both-edges;
}

/* trochu užší a vyšší na mobilech, stále top-aligned */
@media (max-width: 640px){
  #designModal .modal-content.nav-modal{
    width: calc(100dvw - 24px) !important;
    height: calc(100dvh - 24px) !important;
    padding: 22px 14px 16px !important;
  }
  #designModal .modal-content.nav-modal .close{
    top: 10px !important;
    right: 12px !important;
    font-size: 28px !important;
  }
}
/* === Styly ukázek omezené jen na modál designu === */
#designModal .preview-scope .preview-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 12px 0 22px;
}

/* Výchozí demo tlačítko v ukázce (aby to nezasahovalo zbytek webu) */
#designModal .preview-scope .btn{
  font: inherit;
  font-weight: 800;
  letter-spacing: .3px;
  padding: 12px 18px;
  border-radius: var(--btn-radius, 999px); /* výchozí zaoblení (pilulka) */
  border: 2px solid #fff;
  background: #0e0e0e;
  color: #fff;
  cursor: default;              /* je to ukázka, ne akce */
  user-select: none;
  transition: transform .18s ease;
}
#designModal .preview-scope .btn:hover{
  transform: translateY(-1px) scale(1.02);
}

/* Hranaté ukázky – jen pokud chceš tento vzhled demonstrovat */
#designModal .preview-scope .btn--square{
  border-radius: 8px; /* hranaté */
}

/* Liquid Glass ukázky – zaoblené, ne hranaté */
#designModal .preview-scope .btn--glass{
  border-radius: var(--btn-radius, 999px);   /* ← zaoblené */
  background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(255,255,255,.35);
  box-shadow:
    inset 0 8px 24px rgba(255,255,255,.06),
    inset 0 -2px 8px rgba(0,0,0,.22),
    0 6px 26px rgba(0,0,0,.22);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
}
/* === DESIGN MODAL: top-aligned, vnitřní scroll, stejné odsazení nahoře/dole === */
#designModal{
  /* overlay */
  position: fixed;
  inset: 0;
  z-index: 2500;
  display: none; /* řízeno JS */
  background: rgba(0,0,0,.7);

  /* stejné horní/spodní odsazení – použijeme proměnnou, ať ji využijeme i níž */
  --dm-pad: clamp(12px, 2vh, 24px);
  padding: var(--dm-pad);
  box-sizing: border-box;

  /* zarovnání okna nahoru (scrolluje se obsah, ne overlay) */
  justify-content: center;
  align-items: flex-start;
}

#designModal[aria-hidden="false"]{ display: flex; }

#designModal .modal-content.nav-modal{
  /* skoro fullscreen, ale s horním/spodním “gutterem” */
  width: min(1400px, 100dvw - 2*var(--dm-pad));
  height: calc(100dvh - 2*var(--dm-pad));
  max-width: 1400px;

  /* vnitřní scroll pouze vevnitř obsahu */
  overflow-y: auto;
  overflow-x: hidden;

  /* zachováme tvůj look */
  background: #111;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 16px;
  box-shadow: 0 0 25px rgba(255,255,255,.12);
  padding: 28px;
  animation: modalPop .18s ease-out;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

#designModal .nav-modal-title{
  margin: 0 0 16px;
  text-align: center;
}

/* obsah modálu – normální “odshora dolů” */
#designModal .design-body{
  display: grid;
  gap: 18px;
}

/* ukázky se nepletou s reálnými tlačítky na webu */
#designModal .preview-scope .preview-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ZÁKLADNÍ DEMO TLAČÍTKO (platí jen v ukázce!) */
#designModal .preview-scope .btn{
  font: inherit;
  font-weight: 800;
  letter-spacing: .3px;
  padding: 12px 18px;
  border-radius: 9999px;          /* pill */
  border: 2px solid #fff;
  background: #0e0e0e;
  color: #fff;
  user-select: none;
  cursor: default;
  transition: transform .18s ease;
}
#designModal .preview-scope .btn:hover{
  transform: translateY(-1px) scale(1.02);
}

/* LIQUID GLASS – zaoblené (pill) */
#designModal .preview-scope .btn--glass{
  border-radius: 9999px;          /* pill tvar */
  background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(255,255,255,.35);
  box-shadow:
    inset 0 8px 24px rgba(255,255,255,.06),
    inset 0 -2px 8px rgba(0,0,0,.22),
    0 6px 26px rgba(0,0,0,.22);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
}

/* Akce dole (VYBRAT) – použijeme tvůj AKTUÁLNÍ design: .nav-btn */
#designModal .actions{
  margin-top: 6px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Mobil – okno do celé výšky, stále se scrolluje uvnitř obsahu */
@media (max-width: 640px){
  #designModal{
    --dm-pad: clamp(10px, 2vh, 16px);
  }
  #designModal .modal-content.nav-modal{
    width: calc(100dvw - 2*var(--dm-pad));
    height: calc(100dvh - 2*var(--dm-pad));
    padding: 22px 14px 16px;
  }
  #designModal .modal-content.nav-modal .close{
    top: 10px; right: 12px; font-size: 28px;
  }
}








.design-choose[disabled]{ opacity:.55; cursor:default; }








/* Grid pro karty s ukázkami (TLAČÍTKA) */
#designModal .design-grid{
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;                 /* mobil: pod sebe */
}

/* od ~600px dvě kolony, od ~1024px tři */
@media (min-width: 600px){
  #designModal .design-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px){
  #designModal .design-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Vzhled samotné karty a vertikální roztažení, aby bylo tlačítko dole */
#designModal .design-card{
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 14px;
  padding: 16px;
  height: 100%;
}

/* náhled uprostřed, Choose tlačítko „dolů“ */
#designModal .design-preview{
  display: grid;
  place-items: center;
  min-height: 86px;                 /* ať to neuskakuje u kratších textů */
}
#designModal .design-choose{
  margin-top: auto;                 /* pošle VYBRAT k dolnímu okraji karty */
}









/* === DEMO TLAČÍTKA UVNITŘ MODÁLU DESIGNU (nezávislá na globálním vzhledu) === */
#designModal .demo-btn{
  /* reset, ať nic globálního nezasahuje */
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-weight: 800;
  letter-spacing: .4px;
  padding: 12px 22px;
  border: 2px solid #fff;
  color: #fff;
  background: #0e0e0e;
  user-select: none;
  pointer-events: auto;
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease;
}

/* stejné „nafouknutí“ jako ostatní knoflíky, ne přebarvení */
#designModal .demo-btn:hover{
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}

/* Varianta PILl (výchozí) */
#designModal .demo-pill{
  border-radius: 999px;
  background: #0e0e0e;
  border-color: #fff;
  color: #fff;
}

/* Varianta SQUARE */
#designModal .demo-square{
  border-radius: 10px;
  background: #0e0e0e;
  border-color: #fff;
  color: #fff;
}

/* Varianta LIQUID GLASS – pilulkový tvar (stejný jako Pill), ale „sklo“ */
#designModal .demo-glass{
  border-radius: 999px; /* PILl tvar! */
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.6);
  color: #fff;
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 6px 24px rgba(0,0,0,.25);
}
#designModal .demo-glass:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 10px 30px rgba(0,0,0,.32);
}

/* jistota: zamez kolizím s globální .nav-btn uvnitř modálu designu */
#designModal .nav-btn.demo-btn,
#designModal .demo-btn.nav-btn{
  /* kdyby se někde omylem přimíchala nav-btn, ignoruj ji */
  all: unset !important;
}












/* === Design modal: mřížka s kartami variant === */
#designModal .design-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 16px;
  align-items: stretch;
}

/* Responzivita – na menších šířkách 2 sloupce, pak 1 */
@media (max-width: 980px){
  #designModal .design-grid{
    grid-template-columns: repeat(2, minmax(200px, 1fr));
  }
}
@media (max-width: 640px){
  #designModal .design-grid{
    grid-template-columns: 1fr;
  }
}

/* Karta varianty – vyrovnané rozvržení */
#designModal .design-card{
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 2px solid #fff;
  border-radius: 14px;
  padding: 14px;
  background: #0e0e0e;
}

/* Nadpis v kartě */
#designModal .design-card > h4{
  margin: 0 0 6px 0;
  text-align: center;
  font-weight: 900;
  letter-spacing: .3px;
}

/* Ukázka uprostřed karty, ne natažená přes šířku */
#designModal .design-preview{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 6px;
  min-height: 70px;              /* příjemná výška pro ukázku */
}

/* Tlačítko VYBRAT přirazíme dolů, ať jsou karty stejně vysoké */
#designModal .design-choose{
  margin-top: auto;
  align-self: center;            /* hezky doprostřed */
  min-width: 180px;
  text-align: center;
}

/* Zajistí, že demo tlačítka se samy neroztáhnou na 100% šířky */
#designModal .demo-btn{
  width: auto;
  max-width: 100%;
  white-space: nowrap;
}
/* === Floating settings gear (pravý horní roh) === */
.settings-gear{
  position: fixed;
  top: max(16px, env(safe-area-inset-top) + 8px);
  right: max(16px, env(safe-area-inset-right) + 8px);
  z-index: 2200; /* nad nav/filter modaly (ty máš 2000/2100) */
  width: 46px;
  height: 46px;
  border-radius: 9999px;
  border: 2px solid #fff;
  background: #0e0e0e;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
  transition: transform .18s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}

.settings-gear i{
  font-size: 22px;
  line-height: 1;
  pointer-events: none;
}

/* Hover/focus efekty sjednocené s ostatními tlačítky (nafouknutí) */
.settings-gear:hover{
  transform: translateY(-1px) scale(1.06);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}
.settings-gear:active{
  transform: translateY(0) scale(1.02);
}
.settings-gear:focus-visible{
  outline: 3px solid #fff;
  outline-offset: 3px;
  transform: translateY(-1px) scale(1.06);
}

/* Volitelně jemné protočení ozubeného kola při hoveru */
.settings-gear:hover i{
  transform: rotate(20deg);
  transition: transform .18s ease;
}

/* Menší zařízení – malinko menší „FAB“ */
@media (max-width: 540px){
  .settings-gear{
    width: 42px;
    height: 42px;
    border-width: 2px;
    top: max(12px, env(safe-area-inset-top) + 6px);
    right: max(12px, env(safe-area-inset-right) + 6px);
  }
  .settings-gear i{ font-size: 20px; }
}

/* Respektuj reduced motion */
@media (prefers-reduced-motion: reduce){
  .settings-gear, .settings-gear:hover, .settings-gear:active{
    transition: none;
    transform: none;
  }
  .settings-gear:hover i{ transform: none; }
}








/* ⬆️ zvětšení ozubeného kola */
.settings-gear i,
.settings-gear .gear-fallback{
  font-size: 30px;   /* klidně dej 32–36px podle chuti */
  line-height: 1;
}

/* (volitelné) o trochu větší klikací plocha */
.settings-gear{
  padding: 10px 12px;          /* přidá „vzduch“ kolem ikony */
  display: inline-flex;        /* jisté centrování obsahu */
  align-items: center;
  justify-content: center;
}

/* (volitelné) na desktopu ještě větší ikona */
@media (min-width: 992px){
  .settings-gear i,
  .settings-gear .gear-fallback{
    font-size: 34px;
  }
}
/* Precizní centrování ikony v kolečku */
.settings-gear{
  display: inline-flex;       /* jisté horizontální i vertikální centrování */
  align-items: center;
  justify-content: center;
  /* zbytek (barva, border, pozice) nechávám tak, jak máš */
}

/* Ikona: zarovnat na střed + optický nudge lehce nahoru */
.settings-gear i,
.settings-gear .gear-fallback{
  line-height: 1;
  display: block;
  position: relative;
  top: -1px;                  /* ← jemný posun nahoru; když bude málo, dej -2px */
}

/* Pokud chceš mít jistotu stejných rozměrů „kroužku“ (volitelné):
   nastav pevnou šířku/výšku místo paddingu */
.settings-gear.is-square{
  width: 48px;                /* uprav podle velikosti ikony */
  height: 48px;
  padding: 0;                 /* když použiješ .is-square, padding už není potřeba */
  border-radius: 9999px;     
  }














  /* === Global Settings Gear (sdílený komponent) === */
.settings-gear {
  position: fixed;
  top: clamp(12px, 2.2vw, 18px);
  right: clamp(12px, 2.2vw, 18px);
  z-index: 4000;                 /* nad obsahem, ale pod modálními overlayi, pokud mají >4k dej víc */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;                   /* uprav si dle chuti */
  height: 52px;
  border-radius: 9999px;
  background: #0e0e0e;
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
.settings-gear:hover { transform: translateY(-1px) scale(1.06); box-shadow: 0 10px 26px rgba(0,0,0,.28); }
.settings-gear:active { transform: translateY(0) scale(1.02); }
.settings-gear:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.settings-gear i,
.settings-gear .gear-fallback {
  line-height: 1;
  display: block;
  position: relative;
  top: -1px;                      /* optické vycentrování ikony – klidně dolaď na -2px */
  font-size: 24px;                /* velikost samotné ikony */
}

/* === DESIGN MODAL: rozměry a vnitřní skrolování === */
#designModal{ display:none; position:fixed; inset:0; z-index:2200;
  background:rgba(0,0,0,.7); justify-content:center; align-items:center; padding:12px; }

#designModal[aria-hidden="false"]{ display:flex; }

#designModal .modal-content.nav-modal{
  width:min(96vw, 1100px);
  max-height:calc(100dvh - 24px);     /* stejné odsazení shora i zespodu */
  background:#111; color:#fff; border:2px solid #fff; border-radius:16px;
  box-shadow:0 0 25px rgba(255,255,255,.12);
  display:flex; flex-direction:column;
  padding:18px 18px 14px;
  overflow:hidden;                    /* skroluje se TĚLO uvnitř, ne okno */
}

/* vnitřní scroll jen pro obsah */
#designModal .design-body{
  overflow:auto;
  padding:8px 6px 12px;
}

/* nadpis uprostřed */
#designModal .nav-modal-title{
  text-align:center; margin:4px 0 10px; font-weight:900; letter-spacing:.3px;
}
#designModal .close{
  position:absolute; top:12px; right:16px; font-size:32px; background:none; border:none; color:#fff; cursor:pointer;
}
/* === GRID s ukázkami (vedle sebe) === */
#designModal .design-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap:16px;
  margin-top:10px;
}
@media (max-width: 920px){
  #designModal .design-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px){
  #designModal .design-grid{ grid-template-columns: 1fr; }
}

#designModal .design-card{
  background:#0b0b0b; border:2px solid #fff; border-radius:16px; padding:14px;
  text-align:center;
}
#designModal .design-card h4{ margin:0 0 10px; font-size:16px; font-weight:900; }

/* náhledová plocha – jen pro ukázky */
#designModal .design-preview{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  padding:16px 8px; background:#111; border:1px dashed rgba(255,255,255,.35); border-radius:12px;
  margin-bottom:12px;
}
/* === DEMO tlačítka v ukázkách: vždy vlastní styl, nezávislý na volbě === */
.preview-scope .demo-btn{
  font: inherit; font-weight:800; letter-spacing:.4px;
  padding:12px 20px; cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease;
  outline: none; border: none;
}
.preview-scope .demo-btn:hover{ transform: translateY(-1px) scale(1.04); }

/* Pill ukázka */
.preview-scope .demo-pill{
  border-radius:9999px; color:#fff; background:#0e0e0e; border:2px solid #fff;
}
/* Square ukázka */
.preview-scope .demo-square{
  border-radius:10px; color:#fff; background:#0e0e0e; border:2px solid #fff;
}
/* Liquid glass ukázka – PILL TVAR */
.preview-scope .demo-glass{
  border-radius:9999px; color:#fff;
  background: rgba(255,255,255,.06);
  border:1.5px solid rgba(255,255,255,.35);
  box-shadow:
    inset 0 8px 24px rgba(255,255,255,.06),
    inset 0 -2px 8px rgba(0,0,0,.22),
    0 6px 26px rgba(0,0,0,.22);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
}
/* default (pill) */
#designModal .design-choose{
  display:inline-block; font-weight:800; letter-spacing:.4px;
  padding:12px 20px; cursor:pointer; margin-top:6px;
  border-radius:9999px; color:#fff; background:#0e0e0e; border:2px solid #fff;
  transition: transform .18s ease, box-shadow .18s ease;
}
#designModal .design-choose:hover{ transform: translateY(-1px) scale(1.04); }

/* když je zvolený SQUARE globálně */
body[data-btn-style="square"] #designModal .design-choose{
  border-radius:10px; background:#0e0e0e; border:2px solid #fff;
}

/* když je zvolený GLASS globálně */
body[data-btn-style="glass"] #designModal .design-choose{
  border-radius:9999px;
  background: rgba(255,255,255,.06);
  border:1.5px solid rgba(255,255,255,.35);
  box-shadow:
    inset 0 8px 24px rgba(255,255,255,.06),
    inset 0 -2px 8px rgba(0,0,0,.22),
    0 6px 26px rgba(0,0,0,.22);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
}

/* vizuální stav vybrané varianty v seznamu */
#designModal .design-choose.is-selected{
  outline:3px solid #fff; outline-offset:3px;
}





/* Výchozí: kolečko neukazuj */
#designGear { display: none !important; }

/* Jen stránky, které mají design modal, kolečko ukážou */
.has-design-modal #designGear { display: grid !important; }
/* === KILL-SWITCH pro ozubené kolečko (všude skryj) === */
#designGear,
button#designGear,
[id="designGear"],
.design-gear,
button.design-gear,
[aria-label="Otevřít výběr designu"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Zobrazit jen tam, kde to opravdu chceme (index s třídou na <body>) */
.has-design-modal #designGear,
.has-design-modal .design-gear {
  display: grid !important;
  visibility: visible !important;
  pointer-events: auto !important;
}










/* DESIGN modal: VYBRÁNO = zelené */
#designModal .design-choose.is-selected {
  background: #198754 !important;   /* zelená */
  color: #fff !important;
  border-color: #fff !important;
  outline: none;
}

/* DESIGN modal: hover = jen „nafouknutí“, žádná změna barvy */
#designModal .design-choose:hover {
  /* zrušíme bílé přebarvení z obecných pravidel */
  background: inherit !important;
  color: inherit !important;
  /* ponecháme jen nafouknutí (už ho máš definované výše) */
}

/* Varianta, když je aktuální téma LIQUID GLASS – drž skleněný vzhled i na hoveru */
html.btn-glass #designModal .design-choose:hover {
  background: rgba(255,255,255,.06) !important;
  border: 1.5px solid rgba(255,255,255,.35) !important;
  color: #fff !important;
  box-shadow:
    inset 0 8px 24px rgba(255,255,255,.06),
    inset 0 -2px 8px rgba(0,0,0,.22),
    0 6px 26px rgba(0,0,0,.22);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
}

/* Square/Pill – drž tmavé pozadí i na hoveru */
html.btn-pill  #designModal .design-choose:hover,
html.btn-square #designModal .design-choose:hover {
  background: #0e0e0e !important;
  color: #fff !important;
  border-color: #fff !important;
}








/* --- DESIGN MODAL: tlačítko VYBRAT --- */
#designModal .design-choose{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5em;
  padding:12px 20px;
  font-weight:800; letter-spacing:.4px;
  color:#fff;
  background:#0e0e0e;                /* výchozí tmavé pozadí */
  border:2px solid #fff;
  border-radius:999px;                /* tvar přepíše téma (viz A) */
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}

/* Hover = NAFOUKNOUT (žádné vybílení) */
#designModal .design-choose:hover{
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}

/* Aktivní (aktuálně vybraný styl) = ZELENÝ */
#designModal .design-choose.is-active,
#designModal .design-choose[aria-pressed="true"]{
  background:#198754 !important;
  color:#fff !important;
  border-color:#fff !important;
}

/* Aktivní + hover = jen nafouknout, barva zůstává zelená */
#designModal .design-choose.is-active:hover,
#designModal .design-choose[aria-pressed="true"]:hover{
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}
/* DESIGN modal: VYBRÁNO = zelené */
#designModal .design-choose.is-active,
#designModal .design-choose[aria-pressed="true"]{
  background:#198754 !important;
  color:#fff !important;
  border-color:#fff !important;
}

/* Hover = jen nafouknutí, žádné vybílení */
#designModal .design-choose:hover{
  background: inherit !important;
  color: inherit !important;
}






/* ===========================
   DESIGN MODAL – „VYBRÁNO“ = ZELENÉ
   (platí pro všechna témata)
   =========================== */

/* Základ vybraného stavu */
#designModal .design-choose.is-active,
#designModal .design-choose[aria-pressed="true"]{
  background: #198754 !important;   /* zelená */
  color: #fff !important;
  border-color: #fff !important;
}

/* I při hoveru/focus zůstává zelené (nafoukne se, ale nepřebarví) */
#designModal .design-choose.is-active:hover,
#designModal .design-choose[aria-pressed="true"]:hover,
#designModal .design-choose.is-active:focus-visible,
#designModal .design-choose[aria-pressed="true"]:focus-visible{
  background: #198754 !important;
  color: #fff !important;
  border-color: #fff !important;
  transform: translateY(-1px) scale(1.04);  /* nafouknutí */
  box-shadow: 0 10px 26px rgba(0,0,0,.28);  /* jemný stín jako u ostatních */
}

/* Zruš jakékoli starší „přebarvi na bílo při hoveru“ uvnitř modalu */
#designModal .design-choose:hover{
  background: inherit !important;
  color: inherit !important;
}

/* ===========================
   LIQUID GLASS – „VYBRÁNO“ přes sklo
   (viditelná zelená + zachovaný glass efekt)
   =========================== */
html.btn-glass #designModal .design-choose.is-active,
html.btn-glass #designModal .design-choose[aria-pressed="true"]{
  /* poloprůhledná zelená, aby bylo „přes sklo“ vidět */
  background: linear-gradient(
    145deg,
    rgba(25,135,84,0.58),
    rgba(25,135,84,0.40)
  ) !important;

  /* glass efekt (stejný feeling jako ostatní glass tlačítka) */
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  border: 2px solid rgba(255,255,255,0.75) !important;
  box-shadow:
    0 8px 24px rgba(25,135,84,0.35),
    inset 0 1px 0 rgba(255,255,255,0.65);
  color: #fff !important;
}

/* Hover/focus u glass – drž stejný vzhled, jen nafoukni */
html.btn-glass #designModal .design-choose.is-active:hover,
html.btn-glass #designModal .design-choose[aria-pressed="true"]:hover,
html.btn-glass #designModal .design-choose.is-active:focus-visible,
html.btn-glass #designModal .design-choose[aria-pressed="true"]:focus-visible{
  transform: translateY(-1px) scale(1.04);
}















/* VYBRÁNO = zelené i při hoveru (nafoukne se, ale NEpřebarví na černo) */
#designModal .modal-content.nav-modal .nav-btn.design-choose.is-active,
#designModal .modal-content.nav-modal .nav-btn.design-choose[aria-pressed="true"]{
  background: #198754 !important;
  color: #fff !important;
  border-color: #fff !important;
}

#designModal .modal-content.nav-modal .nav-btn.design-choose.is-active:hover,
#designModal .modal-content.nav-modal .nav-btn.design-choose[aria-pressed="true"]:hover,
#designModal .modal-content.nav-modal .nav-btn.design-choose.is-active:focus-visible,
#designModal .modal-content.nav-modal .nav-btn.design-choose[aria-pressed="true"]:focus-visible{
  background: #198754 !important;   /* drž zelenou */
  color: #fff !important;
  border-color: #fff !important;
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}

/* Bílé "hover" pouze pro NEvybrané volby, ať se to netluče */
#designModal .modal-content.nav-modal .nav-btn.design-choose:not(.is-active):hover,
#designModal .modal-content.nav-modal .nav-btn.design-choose:not([aria-pressed="true"]):hover{
  background: rgba(0,0,0,.28) !important;
  color: #ffffff !important;
}

















/* ===========================
   GLOBÁLNÍ THEME OVERRIDES
   (aplikují se podle třídy na <html>: btn-pill | btn-square | btn-glass)
   =========================== */

/* ⚠️ DŮLEŽITÉ: ZDE ZÁMĚRNĚ NENÍ „button“ v selektorech,
   aby se neobarvoval křížek a náhledy v modalu! */

/* ---- PILL (výchozí) ---- */
html.btn-pill .nav-btn,
html.btn-pill .nav-launch,
html.btn-pill .play-btn,
html.btn-pill .btn {
  border-radius: 9999px !important;
  background: #0e0e0e !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transition: transform .18s ease, box-shadow .2s ease;
}

/* ---- SQUARE ---- */
html.btn-square .nav-btn,
html.btn-square .nav-launch,
html.btn-square .play-btn,
html.btn-square .btn {
  border-radius: 10px !important;
  background: #0e0e0e !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transition: transform .18s ease, box-shadow .2s ease;
}

/* ---- LIQUID GLASS (PILL tvar) ---- */
html.btn-glass .nav-btn,
html.btn-glass .nav-launch,
html.btn-glass .play-btn,
html.btn-glass .btn {
  border-radius: 9999px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1.5px solid rgba(255,255,255,.35) !important;
  color: #fff !important;
  box-shadow:
    inset 0 8px 24px rgba(255,255,255,.06),
    inset 0 -2px 8px rgba(0,0,0,.22),
    0 6px 26px rgba(0,0,0,.22) !important;
  backdrop-filter: blur(10px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.1) !important;
  transition: transform .18s ease, box-shadow .2s ease;
}

/* Hover = pouze „nafouknutí“ (žádné vybílení) */
html.btn-pill  .nav-btn:hover,
html.btn-square .nav-btn:hover,
html.btn-glass .nav-btn:hover,
html.btn-pill  .nav-launch:hover,
html.btn-square .nav-launch:hover,
html.btn-glass .nav-launch:hover,
html.btn-pill  .play-btn:hover,
html.btn-square .play-btn:hover,
html.btn-glass .play-btn:hover,
html.btn-pill  .btn:hover,
html.btn-square .btn:hover,
html.btn-glass .btn:hover {
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}

/* „VYBRAT“ – vybraná varianta = ZELENÁ (zůstává i při hoveru) */
#designModal .design-choose.is-active,
#designModal .design-choose[aria-pressed="true"]{
  background: #198754 !important;
  color: #fff !important;
  border-color: #fff !important;
}
#designModal .design-choose.is-active:hover,
#designModal .design-choose[aria-pressed="true"]:hover{
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}

/* Pro GLASS téma – „zelená“ varianta VYBRAT ponechá skleněný feeling */
html.btn-glass #designModal .design-choose.is-active,
html.btn-glass #designModal .design-choose[aria-pressed="true"]{
  background: linear-gradient(145deg, rgba(25,135,84,0.58), rgba(25,135,84,0.40)) !important;
  border: 2px solid rgba(255,255,255,0.75) !important;
  box-shadow:
    0 8px 24px rgba(25,135,84,0.35),
    inset 0 1px 0 rgba(255,255,255,0.65) !important;
  backdrop-filter: blur(10px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.6) !important;
}
/* =========================================
   DESIGN MODAL – Fixní vzhled NÁHLEDŮ
   (nezávislý na zvoleném globálním tématu)
   ========================================= */

/* PILL náhled */
#designModal .preview-pill .nav-btn,
#designModal .preview-pill .play-btn,
#designModal .preview-pill .btn {
  border-radius: 9999px !important;
  background: #0e0e0e !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* SQUARE náhled */
#designModal .preview-square .nav-btn,
#designModal .preview-square .play-btn,
#designModal .preview-square .btn {
  border-radius: 10px !important;
  background: #0e0e0e !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* LIQUID GLASS náhled (pill tvar + glass efekt) */
#designModal .preview-glass .nav-btn,
#designModal .preview-glass .play-btn,
#designModal .preview-glass .btn {
  border-radius: 9999px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1.5px solid rgba(255,255,255,.35) !important;
  color: #fff !important;
  box-shadow:
    inset 0 8px 24px rgba(255,255,255,.06),
    inset 0 -2px 8px rgba(0,0,0,.22),
    0 6px 26px rgba(0,0,0,.22) !important;
  backdrop-filter: blur(10px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.1) !important;
}

/* Hover na náhledech = jen nafouknutí */
#designModal .preview-pill  .nav-btn:hover,
#designModal .preview-square .nav-btn:hover,
#designModal .preview-glass .nav-btn:hover,
#designModal .preview-pill  .btn:hover,
#designModal .preview-square .btn:hover,
#designModal .preview-glass .btn:hover,
#designModal .preview-pill  .play-btn:hover,
#designModal .preview-square .play-btn:hover,
#designModal .preview-glass .play-btn:hover {
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}

/* =========================================
   DESIGN MODAL – CLOSE (X) reset na původní vzhled
   ========================================= */
#designModal .close {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}
#designModal .close:hover,
#designModal .close:active {
  background: none !important;
  box-shadow: none !important;
  transform: none !important;
}









/* ---- PILL (výchozí) ---- */
html.btn-pill .nav-btn,
html.btn-pill .nav-launch,
html.btn-pill .play-btn,
html.btn-pill .filter-launch,   /* ◀︎ přidáno */
html.btn-pill .btn{
  border-radius: 9999px !important;
  background: #0e0e0e !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* ---- SQUARE ---- */
html.btn-square .nav-btn,
html.btn-square .nav-launch,
html.btn-square .play-btn,
html.btn-square .filter-launch, /* ◀︎ přidáno */
html.btn-square .btn{
  border-radius: 10px !important;
  background: #0e0e0e !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* ---- LIQUID GLASS (PILL tvar) ---- */
html.btn-glass .nav-btn,
html.btn-glass .nav-launch,
html.btn-glass .play-btn,
html.btn-glass .filter-launch,  /* ◀︎ přidáno */
html.btn-glass .btn{
  border-radius: 9999px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1.5px solid rgba(255,255,255,.35) !important;
  color: #fff !important;
  box-shadow:
    inset 0 8px 24px rgba(255,255,255,.06),
    inset 0 -2px 8px rgba(0,0,0,.22),
    0 6px 26px rgba(0,0,0,.22) !important;
  backdrop-filter: blur(10px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.1) !important;
}

/* Hover = jen „nafouknutí“ pro vše vč. FILTRY */
html.btn-pill  .nav-btn:hover,
html.btn-square .nav-btn:hover,
html.btn-glass .nav-btn:hover,
html.btn-pill  .nav-launch:hover,
html.btn-square .nav-launch:hover,
html.btn-glass .nav-launch:hover,
html.btn-pill  .play-btn:hover,
html.btn-square .play-btn:hover,
html.btn-glass .play-btn:hover,
html.btn-pill  .filter-launch:hover,   /* ◀︎ přidáno */
html.btn-square .filter-launch:hover,  /* ◀︎ přidáno */
html.btn-glass .filter-launch:hover {  /* ◀︎ přidáno */
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}









/* DESIGN MODAL: křížek doprostřed nahoře */
#designModal .modal-content.nav-modal .close{
  top: 12px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important; /* centrování */
  background: none !important;            /* jistota bez rámečku/animací */
  border: none !important;
  box-shadow: none !important;
}











/* ===========================
   GLOBÁLNÍ ANIMACE (dle třídy na <html>):
   .anim-default | .anim-invert | .anim-glow
   Aplikuje se na: nav tlačítka, filtry, play, obecná .btn
   =========================== */

/* 1) DEFAULT – už máš: jen „nafouknutí“ + stín (nic dalšího netřeba) */

/* 2) INVERT – při hoveru invertuj barvy (kromě vybraného VYBRAT v modalu) */
html.anim-invert .nav-btn:hover,
html.anim-invert .nav-launch:hover,
html.anim-invert .play-btn:hover,
html.anim-invert .filter-launch:hover,
html.anim-invert .btn:hover {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #000000 !important;
}

/* pro glass téma můžeš přidat výraznější kontrast, volitelně: */
/*
html.anim-invert.btn-glass .nav-btn:hover,
html.anim-invert.btn-glass .nav-launch:hover,
html.anim-invert.btn-glass .play-btn:hover,
html.anim-invert.btn-glass .filter-launch:hover,
html.anim-invert.btn-glass .btn:hover {
  background: rgba(255,255,255,0.9) !important;
  color: #000 !important;
  border-color: #000 !important;
}
*/

/* zachovej zelené „VYBRAT“ v modalu i při hoveru */
#designModal .design-choose.is-active:hover,
#designModal .design-choose[aria-pressed="true"]:hover{
  background: #198754 !important;
  color: #fff !important;
  border-color: #fff !important;
}

/* 3) GLOW – jemný světelný efekt při hoveru (navíc k nafouknutí) */
html.anim-glow .nav-btn:hover,
html.anim-glow .nav-launch:hover,
html.anim-glow .play-btn:hover,
html.anim-glow .filter-launch:hover,
html.anim-glow .btn:hover {
  box-shadow:
    0 0 0 3px rgba(255,255,255,0.65),
    0 10px 26px rgba(0,0,0,0.28) !important;
  filter: brightness(1.05);
}

/* ===========================
   DESIGN MODAL – LOKÁLNÍ NÁHLEDY ANIMACÍ
   (každá karta ukáže svou animaci, ale tvar bere z aktuálního btn stylu)
   =========================== */
#designModal .anim-preview .nav-btn{
  /* nic zvláštního – převezme vzhled z .btn-pill/.btn-square/.btn-glass */
  transition: transform .18s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}

/* Náhled: default (jen nafouknutí – už dělá globální hover) */
/* není potřeba extra CSS */

/* Náhled: invert – aplikujeme invert jen uvnitř karty s třídou anim-preview--invert */
#designModal .anim-preview--invert .nav-btn:hover{
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #000000 !important;
}

/* Náhled: glow – přidej světelný prstenec jen v této kartě */
#designModal .anim-preview--glow .nav-btn:hover{
  box-shadow:
    0 0 0 3px rgba(255,255,255,0.65),
    0 10px 26px rgba(0,0,0,0.28) !important;
  filter: brightness(1.05);
}




/* === DESIGN MODAL → Ukázky animací nesmí dědit globální animaci === */
#designModal .design-preview .nav-btn:hover{
  /* zruš globální invert/glow: zachovej jen „nafouknutí“ */
  background: inherit !important;
  color: inherit !important;
  border-color: inherit !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.28) !important;
  transform: translateY(-1px) scale(1.04) !important;
}

/* Ukázka „Invert“ – zapni invert jen v této kartě */
#designModal .anim-preview--invert .nav-btn:hover{
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #000000 !important;
}

/* Ukázka „Glow“ – zapni glow jen v této kartě */
#designModal .anim-preview--glow .nav-btn:hover{
  box-shadow:
    0 0 0 3px rgb(255, 255, 255),
    0 10px 26px rgba(0,0,0,0.28) !important;
  filter: brightness(1.05) !important;
}
/* === DESIGN MODAL → Ukázka ANIMACE: Default musí mít i na hover čistě bílý okraj === */
#designModal .anim-preview--default .nav-btn{
  background: #0e0e0e !important;
  color: #fff !important;
  border: 2px solid #fff !important;      /* ostrá bílá hrana už v klidu */
  border-radius: 9999px !important;        /* tvar jako u ukázky tlačítek (pill) */
}

#designModal .anim-preview--default .nav-btn:hover{
  background: #0e0e0e !important;          /* jen „nafouknutí“, žádná inverze */
  color: #fff !important;
  border-color: #fff !important;           /* drž bílou na hoveru */
  transform: translateY(-1px) scale(1.04) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.28) !important;
}






/* === DESIGN MODAL → Ukázky ZVUKY: vždy čistě bílý okraj (i při hoveru) === */
#designModal .sound-preview .nav-btn {
  background: #0e0e0e !important;
  color: #fff !important;
  border: 2px solid #fff !important;   /* bílé orámování i v glass tématu */
  border-radius: 9999px;               /* tvar ukázky jako u „TLAČÍTKA“ */
  transition: transform .18s ease, box-shadow .2s ease; /* žádné přebarvování */
}

#designModal .sound-preview .nav-btn:hover {
  background: #0e0e0e !important;      /* jen nafouknutí, bez inverze */
  color: #fff !important;
  border-color: #fff !important;       /* drž bílou při hoveru */
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}


















/* FA ikona uprostřed, bílá; fallback skryjeme, když je FA k dispozici */
.settings-gear {
  color: #fff;              /* ikona bude bílá */
}

.settings-gear i {
  display: block;
  line-height: 1;
  font-size: 28px;          /* klidně uprav na 30–34px podle chuti */
  position: relative;
  top: -1px;                /* optické vystředění (už u tebe je, necháme) */
}

.settings-gear .gear-fallback {
  display: none;            /* FA načtená → fallback neschovávej */
}














/* Tlačítko jako celek už máš nastylované (.settings-gear). Jen ikonu: */
.settings-gear { color: #fff; } /* barva ikony přes currentColor */

.settings-gear .gear-svg {
  display: block;
  line-height: 1;
  width: 28px;         /* můžeš zvýšit na 30–34px dle chuti */
  height: 28px;
  position: relative;
  top: -1px;           /* jemné optické vystředění – klidně dolaď na 0 / -2px */
}

/* Pro případ, že tam někde zbyla FA ikona – sjednotíme velikost: */
.settings-gear i {
  display: none;       /* FA už nepotřebujeme; pokud chceš zachovat, přepni na 'block' */
}























/* Mobil: skrýt tlačítko pro otevření design modalu */
@media (max-width: 720px){
  .settings-gear{ 
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

















/* === Coachmark u ozubeného kolečka (jen desktop) === */
.design-coach{
  position: fixed;
  z-index: 4500;            /* nad kolečkem (to má ~4000) */
  top: clamp(72px, 6vw, 100px);
  right: clamp(12px, 2.2vw, 18px);
  display: grid;
  gap: 8px;
  pointer-events: auto;
}

.design-coach[hidden]{ display:none !important; }

.design-coach__bubble{
  max-width: 320px;
  background:#0e0e0e;
  color:#fff;
  border:2px solid #fff;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
  padding: 14px 16px;
  font-family: inherit;
}

.design-coach__title{
  font-weight: 900;
  letter-spacing: .3px;
  margin-bottom: 6px;
}

.design-coach__text{
  font-size: 14px;
  line-height: 1.5;
  opacity: .95;
}

.design-coach__actions{
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.design-coach__actions .coach-open,
.design-coach__actions .coach-close{
  display:inline-block;
  font-weight:800;
  letter-spacing:.3px;
  color:#fff;
  background:#0e0e0e;
  border:2px solid #fff;
  border-radius: 999px;
  padding: 8px 14px;
  cursor:pointer;
  transition: transform .18s ease, box-shadow .2s ease;
}
.design-coach__actions .coach-open:hover,
.design-coach__actions .coach-close:hover{
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}

/* šipka směřující ke kolečku */
.design-coach__arrow{
  width: 24px;
  height: 24px;
  margin-left: auto;                  /* zarovná k pravému okraji bubliny */
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  background:#0e0e0e;
  border-left:2px solid #fff;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
  transform: translateX(-8px) rotate(45deg);
}

/* mobil: coachmark vůbec neukazuj (tlačítko stejně skrýváš) */
@media (max-width: 720px){
  .design-coach{ display:none !important; }
}

























.video-card.is-locked img,
.video-card.is-locked a img {
  filter: grayscale(1) brightness(0.8) blur(3px);
  opacity: 0.45;
  pointer-events: none;
}


.video-card .locked-overlay {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;          /* drží plochu náhledu */
  background: #2a2a2a;
  border: 2px solid #fff;
  border-radius: 12px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.video-card .locked-overlay .lock-inner {
  text-align: center;
  color: #fff;
  padding: 20px;
}
.video-card .locked-overlay .lock-icon {
  font-size: 56px;
  line-height: 1;
  margin-bottom: 10px;
}
.video-card .locked-overlay .lock-text {
  font-weight: 800;
  letter-spacing: .4px;
  margin-bottom: 10px;
}

/* "Přihlásit se" tlačítko uvnitř overlaye – respektuje globální design */
.video-card .locked-overlay .login-btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: 10px 18px;
  border: 2px solid #fff;
  border-radius: 9999px;
  font-weight: 800;
  letter-spacing: .4px;
  color: #fff;
  background: #0e0e0e;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .2s ease;
}
.video-card .locked-overlay .login-btn:hover {
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}

/* deaktivované tlačítko PŘEHRÁT */
.play-btn.is-disabled,
.play-btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ======= LOGIN MODAL (stejný look jako tvoje modaly) ======= */
#loginModal {
  display: none; position: fixed; inset: 0; z-index: 3000;
  background: rgba(0,0,0,.7);
  justify-content: center; align-items: center; padding: 14px;
}
#loginModal .modal-content {
  width: min(92vw, 560px);
  background:#111; border:2px solid #fff; border-radius:16px;
  color:#fff; padding:28px; box-shadow:0 0 25px rgba(255,255,255,.12);
  position: relative; text-align:center;
  animation: modalPop .18s ease-out;
}
#loginModal .close {
  position:absolute; top:10px; right:12px;
  font-size:28px; color:#fff; background:none; border:none;
  cursor:pointer; line-height:1; font-weight:800;
}
#loginModal h2 { margin:0 0 12px; font-size:22px; letter-spacing:.4px; }
#loginModal p  { margin:0 0 16px; opacity:.9; }

#loginModal .code-input {
  width: 220px; max-width: 70%;
  padding: 12px 14px; font-size: 18px; text-align:center;
  border-radius: 12px; border: 2px solid #fff; background:#0e0e0e; color:#fff;
  margin-bottom: 14px;
}
#loginModal .submit-code {
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:12px 20px; border:2px solid #fff; border-radius:9999px;
  background:#0e0e0e; color:#fff; font-weight:800; letter-spacing:.4px;
  transition: transform .18s ease, box-shadow .2s ease; cursor:pointer;
}
#loginModal .submit-code:hover {
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}

#loginModal .error {
  color: #ff6060; font-weight: 800; margin-top: 10px; min-height: 1.2em;
}

/* drobná animace jako jinde */
@keyframes modalPop { from { transform: scale(.97); opacity: 0; } to { transform: scale(1); opacity: 1; } }










/* Odhlásit – vypnout pruhy jen u tohoto tlačítka */
#logoutBtn {
  background-image: none !important;   /* vypne případné pruhy z background-image */
  position: relative;
}

/* kdyby byly čárky řešené pseudo-prvky */
#logoutBtn::before,
#logoutBtn::after {
  content: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* kdyby byly v HTML vložené vnitřní <span>y pro čárky */
#logoutBtn .bar,
#logoutBtn .line,
#logoutBtn .lines,
#logoutBtn .hamburger {
  display: none !important;
}
















/* --- FIX: overlay přes náhled --- */
.video-card .thumb-wrap{
  position: relative;
  display: block;
  line-height: 0;           /* žádná mezera pod obrázkem */
  border-radius: 12px;
  overflow: hidden;
}
.video-card .thumb-wrap > a,
.video-card .thumb-wrap > img{
  display: block;
}
.video-card .thumb-wrap img{
  width: 100%;
  height: auto;
  display: block;
}

/* přepíše staré .locked-overlay (už ne aspect-ratio, ale absolutně přes náhled) */
.video-card .thumb-wrap .locked-overlay{
  position: absolute;
  inset: 0;                 /* top:0; right:0; bottom:0; left:0 */
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 2px solid rgba(255, 255, 255, 0);
  border-radius: 12px;
  overflow: hidden;
}






/* Větší rozestupy v overlay (zámek + text + tlačítko) */
.video-card .thumb-wrap .locked-overlay .lock-inner{
  display: flex;               /* jistota – sloupce nad sebou */
  flex-direction: column;
  align-items: center;
  gap: 14px;                   /* zvětší mezery mezi prvky */
  text-align: center;
}

/* jemně větší mezery na větších displejích */
@media (min-width: 768px){
  .video-card .thumb-wrap .locked-overlay .lock-inner{ gap: 18px; }
}

/* (volitelné) trošku větší ikona + tučnější text pro čitelnost */
.video-card .thumb-wrap .locked-overlay .lock-icon{ font-size: 44px; }
.video-card .thumb-wrap .locked-overlay .lock-text{ font-weight: 800; }