:root {

    --cervena: #e50914;

    --cerna: #111111;

    --bila: #f0f0f0;

    --seda: #888;

    --header-vyska: 70px;

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

}



body {

    font-family: 'Montserrat', sans-serif;

    background-color: var(--cerna);

    color: var(--bila);

    line-height: 1.6;

    /* Důležité: Nastavíme výchozí padding-top na 0. 

        Google Translate ho pak změní nebo ho změníme my pomocí body.skiptranslate. */

    padding-top: 0;

    box-sizing: border-box;

    /* Zajistí, že padding se počítá dovnitř rozměrů */

}



/* --- ZDE JE KLÍČOVÁ ZMĚNA PRO GOOGLE TRANSLATE LIŠTU --- */

/* Cílíme na body, když má třídu 'skiptranslate', kterou Google přidává. */

body.skiptranslate {

    /* Změníme padding-top, aby se celý obsah stránky posunul dolů.

        Typická výška Google lišty je kolem 36-40px. Použijeme 40px jako bezpečnou hodnotu.

        !important je nutné, aby přepsalo styly, které Google Translate může nastavit inline. */

    padding-top: 40px !important;

}



/* Navigace a hlavička */

header {

    background-color: rgba(0, 0, 0, 0.8);

    border-bottom: 2px solid var(--cervena);

    position: fixed;

    top: 0;

    /* Zůstává na 0, ale body.skiptranslate ho posune dolů s celým obsahem */

    left: 0;

    width: 100%;

    height: var(--header-vyska);

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0 5%;

    z-index: 1000;

    /* Přechod, aby se posunutí zdálo plynulejší */

    transition: top 0.3s ease;

}



/* Pokud je hlavička fixní, potřebuje se posunout, když je active Google Translate bar */

/* Toto pravidlo jsem zkusil vynechat v předchozí iteraci, ale mohlo by být nutné,

    protože Google Translate může měnit pozici i fixed elementů.

    Zkusíme ho zde opět a s !important, pokud bude potřeba. */

body.skiptranslate header {

    top: 40px !important;

    /* Musí odpovídat padding-top na body.skiptranslate */

}





.popup-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.9);

    backdrop-filter: blur(5px);

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 2000;

    padding: 20px;

    opacity: 1;

    visibility: visible;

    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;

}



.popup-overlay.hidden {

    opacity: 0;

    visibility: hidden;

}



.popup-content {

    background: var(--cerna);

    padding: 40px;

    border-radius: 10px;

    border: 2px solid var(--cervena);

    text-align: center;

    box-shadow: 0 0 30px rgba(229, 9, 20, 0.5);

}



.popup-content h2 {

    color: var(--cervena);

    margin-bottom: 15px;

}



.popup-buttons {

    margin-top: 30px;

    display: flex;

    gap: 20px;

    justify-content: center;

}



.popup-button {

    padding: 12px 30px;

    border: none;

    border-radius: 5px;

    font-family: 'Montserrat', sans-serif;

    font-weight: 700;

    text-transform: uppercase;

    cursor: pointer;

    transition: all 0.3s ease;

}



#confirm-age {

    background-color: var(--cervena);

    color: var(--bila);

}



#confirm-age:hover {

    background-color: #ff3355;

    transform: scale(1.05);

}



#deny-age {

    background-color: #333;

    color: var(--seda);

}



#deny-age:hover {

    background-color: #444;

    color: var(--bila);

}



.header-left {

    display: flex;

    align-items: center;

    gap: 25px;

}



.logo {

    font-size: 1.8em;

    font-weight: 900;

    color: var(--cervena);

    text-decoration: none;

    text-transform: uppercase;

    letter-spacing: 2px;

}



.nav-links {

    list-style: none;

    display: flex;

}



.nav-links li {

    margin-left: 30px;

}



.nav-links a {

    color: var(--bila);

    text-decoration: none;

    font-weight: 700;

    text-transform: uppercase;

    font-size: 0.9em;

    transition: color 0.3s ease;

}



.nav-links a:hover,

.nav-links a.active {

    color: var(--cervena);

}



.hamburger {

    display: none;

    cursor: pointer;

    flex-direction: column;

    gap: 5px;

}



.hamburger .bar {

    width: 25px;

    height: 3px;

    background-color: var(--bila);

    transition: all 0.3s ease;

}



/* Google Translate specific styles */

.goog-te-gadget-simple {

    background-color: transparent !important;

    border: 1px solid var(--seda) !important;

    border-radius: 5px;

    padding: 5px 8px !important;

    box-shadow: none !important;

}



.goog-te-gadget-simple span,

.goog-te-gadget-simple a {

    color: var(--bila) !important;

    font-family: 'Montserrat', sans-serif !important;

    font-weight: 700 !important;

    font-size: 14px !important;

    text-decoration: none;

}



.goog-te-gadget-icon {

    width: 0 !important;

    height: 0 !important;

    overflow: hidden !important;

    position: absolute !important;

    left: -9999px !important;

}



/* Cílené skrytí Google Translate footeru/banneru, který se občas objeví dole */

/* Toto nechceme odstraňovat, protože pomáhá s čistotou dole */

.VIpgJd-ZVi9od-ORHb-OEVmCD {

    display: none !important;

}



.VIpgJd-ZVi9od-ORHb-OEVmCD.VIpgJd-ZVi9od-ORHb-OEVmCD-xPClIc-OWXEXb-k8Qfpe {

    display: none !important;

}





section {

    min-height: 100vh;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    padding: calc(var(--header-vyska) + 40px) 5% 40px;

    text-align: center;

    border-bottom: 1px solid #333;

}



#home {

    background: linear-gradient(rgba(0, 0, 0, 0.7), var(--cerna)), url('https://images.unsplash.com/photo-1578736641330-3155e6093a8b?q=80&w=2070&auto=format&fit=crop') no-repeat center center/cover;

}



h1 {

    font-size: 4em;

    font-weight: 900;

    color: var(--bila);

    text-transform: uppercase;

    margin-bottom: 20px;

    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);

}



h1 span {

    color: var(--cervena);

}



h2 {

    font-size: 2.5em;

    color: var(--cervena);

    text-transform: uppercase;

    margin-bottom: 30px;

}



p {

    max-width: 800px;

    margin-bottom: 20px;

}



.button {

    display: inline-block;

    background-color: var(--cervena);

    color: var(--bila);

    padding: 12px 25px;

    text-decoration: none;

    font-weight: 700;

    text-transform: uppercase;

    border-radius: 5px;

    transition: background-color 0.3s ease;

}



.gallery {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 20px;

    max-width: 1200px;

}





.gallery-item {

    background-color: #222;

    height: 300px; /* Nastavte výchozí výšku pro desktop */

    width: 250px; /* Nastavte výchozí šířku pro desktop, pokud chcete pevnou */

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 1.2em;

    border: 2px solid #333;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}



#anreise iframe {

    width: 100%;

    max-width: 800px;

    height: 450px;

    border: 2px solid var(--cervena);

}



footer {

    background-color: #000;

    text-align: center;

    padding: 30px 5%;

    margin: 0 auto;

    font-size: 0.9em;

    color: var(--seda);

}



@media (max-width: 850px) {

    h1 {

        font-size: 2.5em;

    }



    h2 {

        font-size: 2em;

    }



    /* Na mobilu byste mohli zvážit, zda chcete Google Translate widget vůbec zobrazovat,

        nebo ho přemístit, aby nezabíral příliš místa.

        Pokud ho chcete schovat na mobilu: #google_translate_element { display: none !important; }

    */

    #girls {

        align-items: stretch;

    }

    .nav-links {

        position: fixed;

        top: var(--header-vyska);

        left: 0;

        width: 100%;

        height: calc(100vh - var(--header-vyska));

        background-color: var(--cerna);

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 30px;

        transform: translateX(100%);

        transition: transform 0.3s ease-in-out;

        /* Z-index vyšší než header, aby překrylo obsah, ale pod popupem */

        z-index: 999;

    }



    .popup-content {

        max-width: 99%;

        text-overflow: clip;

        word-break: break-word;

    }



    /* Upravíme pozici nav-links na mobilu, pokud je translate bar aktivní */

    body.skiptranslate .nav-links {

        /* Posune se dolů o výšku lišty překladu */

        top: calc(var(--header-vyska) + 40px);

        height: calc(100vh - var(--header-vyska) - 40px);

        /* Zmenší výšku, aby se vešla pod lištu */

    }





    .nav-links.active {

        transform: translateX(0);

    }



    .nav-links li {

        margin-left: 0;

    }



    .nav-links a {

        font-size: 1.5em;

    }



    .hamburger {

        display: flex;

    }



    .hamburger.active .bar:nth-child(1) {

        transform: translateY(8px) rotate(45deg);

    }



    .hamburger.active .bar:nth-child(2) {

        opacity: 0;

    }



    .hamburger.active .bar:nth-child(3) {

        transform: translateY(-8px) rotate(-45deg);

    }



    body .VIpgJd-ZVi9od-ORHb {

        display: none !important;

    }

    .gallery {

        grid-template-columns: 1fr; /* Změníme na jeden sloupec na mobilu */

        gap: 15px; /* Mírně zmenšíme mezery */

        padding: 0 20px; /* Přidáme horizontální padding, aby se obsah nedotýkal okrajů */

    }

     .gallery-item {

        width: 100%; /* Teď se aplikuje správně */

        height: 250px; /* Výška pro fotky na mobilu */

    }



    /* Specifické výšky pro sekce, pokud potřebujete různé */

    #girls .gallery-item {

        height: 350px; /* Příklad: Jiná výška pro girls sekci na mobilu */

    }





    #videos .gallery-item {

        height: auto; /* Pro videa necháme výšku automatickou */

        min-height: 200px; /* Minimální výška pro video box, pokud video není načteno */

    }



    #videos .gallery-item video {

        width: 100%;

        height: auto;

        max-height: 300px;

    }



    .gallery-item {

        height: 250px !important; /* Nastavíme konzistentní výšku pro obrázky */

        background-size: contain;

        background-position: center;

        background-repeat: no-repeat;

    }



    #videos .gallery-item {

        height: auto !important; /* Pro videa necháme výšku automatickou */

    }



    #videos .gallery-item video {

        width: 100%; /* Video zabere celou šířku kontejneru */

        height: auto; /* Výška se přizpůsobí poměru stran */

        max-height: 300px; /* Maximální výška pro videa, aby nebyla příliš velká */

    }

}



#home {

    background-image: url(../assets/img/fenix5.jpg);

    background-size: cover;

    background-repeat: none;

}