/* CSS Document - Horská chata Plzeňka */
@charset "UTF-8";
/* --- 1. IMPORT A ZÁKLAD --- */
@import url('https://fonts.googleapis.com/css2?family=Familjen+Grotesk:ital,wght@0,400..700;1,400..700&display=swap');

* {
    box-sizing: border-box;
}

body {
    font-family: 'Familjen Grotesk', sans-serif;
    background: #DEECD5;
    margin: 0;
    border: 10px solid #0A3637;
    min-height: 100vh;
}

.container {
    max-width: 1200px;
    margin: auto;
    padding: 20px;
}

/* --- 2. HLAVIČKA --- */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px 20px;
    background-color: transparent;
    border-bottom: 2px solid #0A3637;
    max-width: 1200px;
    margin: 0 auto 30px auto;
}

.header-center h1 {
    margin: 0 0 10px 0;
    color: #0A3637;
    font-weight: 700;
}

.logo {
    max-height: 80px;
    width: auto;
    display: block;
}

.language-switcher {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.language-switcher img {
    width: 25px;
    height: auto;
    cursor: pointer;
    border: 1px solid rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

.language-switcher img:hover { transform: scale(1.2); }

/* --- 3. FILTR DAT --- */
.booking-filter {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin: 20px auto 40px auto;
    padding: 0 20px;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 10px;
}
.filter-group input[type="date"] {
    height: 40px;
    padding: 5px 10px;
    font-size: 16px;
    background-color: #FFEAB0 !important; /* !important vynutí barvu i na mobilu */
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%;
    color: #0A3637;
    font-family: 'Familjen Grotesk', sans-serif;

    /* TOTO JSOU KLÍČOVÉ ŘÁDKY PRO MOBILY */
    -webkit-appearance: none; /* Vypne tovární vzhled Applu/Androidu */
    -moz-appearance: none;
    appearance: none;
    display: block;
}
.filter-group label {
    font-weight: 500;
    color: #0A3637;
    font-size: 16px;
}

.filter-group input {
    font-family: 'Familjen Grotesk', sans-serif;
    background: transparent;
    border: none;
    border-bottom: 1px solid #0A3637;
    padding: 5px;
    color: #0A3637;
    font-size: 16px;
    outline: none;
}

/* --- 4. VÝBĚR POKOJŮ (KARTY) --- */
.selected-wrapper {
    max-width: 600px;
    margin: 0 auto 50px auto;
    background: white;
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 2px;
    text-align: center;
}

.rates-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    width: 100%;
}

.rate {
    background: white;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 1px;
    flex: 0 1 calc(33.333% - 25px); 
    min-width: 300px;
    display: flex;
    flex-direction: column;
/* --- TYTO DVA ŘÁDKY PŘIDEJ --- */
    min-height: 450px; /* Sjednoť výšku všech karet */
    justify-content: space-between; /* Odtlačí tlačítko dolů */
}

.mainPhoto {
    /*width: calc(100%);  Tohle je klíčové - musí být širší o ty okraje */
    width: 100%;
    height: auto;
    object-fit: cover;
    cursor: pointer;
    border: 1px solid #ccc;
    margin-top: 10px;
    border-radius: 2px;
    /* TADY JE TEN STÍN --- */
    box-shadow: 8px 8px 10px 0px rgba(0, 0, 0, 0.2);
}

/* --- Detaily pokoje a Slider fotek --- */
.livePrice { 
    font-size: 18px; /* Původně jsi tam měla 13px, tohle ji pořádně zvětší */
    font-weight: 800; /* Extra tučné písmo */
    color: #0A3637; /* Tvá tmavě zelená, aby to ladilo */
    margin-top: 10px;
    margin-bottom: 5px;
    display: block; /* Zajistí, že cena bude mít svůj vlastní řádek */
}
.comment { 
    font-size: 13px; 
    color: #555; 
    margin-bottom: 10px;
    /* --- MAGIE PRO TŘI TEČKY --- */
    display: -webkit-box;
    -webkit-line-clamp: 4; /* Max 3 řádky textu */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4; /* Aby se to dobře počítalo */
    flex-grow: 1; /* Vyplní místo, aby tlačítka byla v rovině */
}


.roomItem { border-bottom: 1px solid #ddd; padding: 6px 0; }
.total { font-weight: bold; margin-top: 10px; }

.slider {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.9);
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 2000;
}

.slider img { max-width: 90%; max-height: 80%; }
.sliderCaption { color: white; margin-top: 12px; font-size: 14px; text-align: center; }

.arrow { position: absolute; top: 50%; font-size: 60px; color: white; cursor: pointer; }
.arrowLeft { left: 40px; }
.arrowRight { right: 40px; }

.close { position: absolute; top: 20px; right: 30px; font-size: 40px; color: white; cursor: pointer; }

button {
    padding: 10px 14px;
    background: #359386;
    color: white;
    border: none;
    cursor: pointer;
    font-weight: bold;
    width: 100%;
    margin-top: 10px;
    border-radius: 4px;
}

button:hover { background: #FFEAB0;
}

button:disabled {
    background: #999;
    cursor: not-allowed;
}
/* --- 5. FORMULÁŘ (GRID A POLE) --- */
.form-contact {
    margin-top: 30px;
}

.form-row {
    display: flex;
    gap: 15px;
    margin-bottom: 0px;
    width: 100%;
}

.col { flex: 1; }
.col-zip { flex: 0 0 100px; }

.field-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 6px;
    text-align: left;
}

.field-group label {
    font-weight: 600;
    margin-bottom: 5px;
    color: #0A3637;
    font-size: 14px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 2px;
    font-family: 'Familjen Grotesk', sans-serif;
    font-size: 16px;
}

/* --- 6. POPUP A OSTATNÍ --- */
.popup {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.popupBox {
    background: white;
    padding: 30px;
    max-width: 500px;
    text-align: center;
    border-radius: 2px;
}

.slider {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.9);
    display: none;
    z-index: 2000;
}

/* --- 7. ZBÝVAJÍCÍ STYLY FORMULÁŘE --- */
.box {
    max-width: 700px;
    width: 92%;
    margin: 20px auto;
    background: white;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 2px;
}

.summary {
    background: #f4f4f4;
    padding: 15px;
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

/* Vertikální zobrazení tabulek v souhrnu */
.summary tr, .summary td {
    display: block !important;
    width: 100% !important;
}

.button-group {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.btn- { background: #0A3637; color: white; }
.btn-secondary { background: #6c757d; color: white; }

/* Zkrocení poslední karty - verze "Dvě karty vedle sebe" */
.rates-grid .rate:last-child {
    background-color: #FFEAB0 !important;
    
    /* ŠÍŘKA: Nastavíme ji přesně na 2 sloupce */
    /* Počítáme: (2 * 33.33%) + mezera (25px) */
    flex: 0 1 calc(40% + 25px) !important;
    max-width: calc(40% + 25px) !important;

    /* VÝŠKA: Musí být stejná jako u ostatních */
    /* Pokud tvoje .rate mají min-height: 450px, použij stejné číslo zde */
    min-height: 450px !important; 
    
    /* Zajištění, že se obsah nevyvalí ven */
    display: flex;
    flex-direction: column; 
    justify-content: space-between;
}

/* Oprava obrázku v široké kartě, aby nebyl obří na výšku */
.rates-grid .rate:last-child .mainPhoto {
    height: 250px !important; /* Pevná výška fotky, aby "obluda" nerostla */
    object-fit: cover;
    width: 100%;
}
/* Nastavení pozice pro poslední kartu */
.rates-grid .rate:last-child {
    position: relative;
    border: 2px solid #359386 !important; /* Výraznější okraj, aby se byt lišil */
}
/* Skryje text "V ceně zahrnuto" pouze na poslední kartě */
.rates-grid .rate:last-child .livePrice div {
    display: none !important;
}
.rates-grid .rate:last-child::before {
    /* KLÍČOVÁ OPRAVA PRO BALENÍ TEXTU */
    display: flex !important;           /* Místo inline-block */
    align-items: center !important;      /* Vycentruje text svisle */
    justify-content: flex-start !important;
    
    white-space: normal !important;      /* Povolí zalomení */
    width: auto !important;
    max-width: calc(100% - 20px) !important; 
    height: auto !important;             /* Výška se musí přizpůsobit */
    min-height: 40px !important;         /* Pojistka minimální výšky */
    
    box-sizing: border-box !important;
    line-height: 1.2 !important;

    /* ZBYTEK ZŮSTÁVÁ STEJNÝ */
    content: "⚠️ Rennerova 105 - cca 150m od Plzeňky" !important;
    position: absolute !important;
    top: 320px !important; 
    left: -5px !important;
    font-size: 15px !important;          /* Malinko menší, aby se lépe lámal */
    font-weight: 900 !important;
    padding: 10px 15px !important;
    background-color: #359386 !important;
    color: white !important;
    z-index: 10 !important;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.3) !important;
    border-radius: 0 6px 6px 0 !important;
}

/* --- 8. RESPONZIVITA (MOBILNÍ ÚPRAVY) --- */
@media (max-width: 768px) {
    body { border-width: 5px; }
    
   .main-header { flex-direction: row !important; padding: 15px 10px;
 }
   .header-center {
        display: flex;
        flex-direction: column;
        align-items: center; /* Vynutí střed pro vše uvnitř */
        flex-grow: 1;        /* Zabere všechen prostor mezi logy */
 }
   .header-center h1 { 
       text-align: center;
       font-size: 1.2rem;
       text-align: center;
       width: 100%;
       white-space: normal !important; /* Povolí textu dýchat */
 }
 /* Zvětšení vlaječek pro snadnější klikání na mobilu */
    .language-switcher {
        display: flex;
        justify-content: center;
        gap: 15px; /* Větší mezery mezi vlajkami, aby se člověk nepřeklikl */
        margin-top: 5px;
    }

    .language-switcher img {
        width: 32px; /* Původně mohly mít kolem 20px, 32px je ideální "na palec" */
        height: auto;
        border: 1px solid rgba(255,255,255,0.3); /* Jemný rámeček, aby vlajky nesplývaly */

    }

/* Úprava filtru pro mobil */
.booking-filter {
        display: flex;
        flex-direction: row;
        gap: 20px;
        padding: 0px 20px;
        align-items: flex-end;
        background: transparent;
    }

    .filter-group {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .filter-group label {
        font-size: 15px;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .filter-group input[type="date"] {
        height: 35px;
        padding: 0;
        font-size: 14px;
        background: transparent;
        border: none;
        border-bottom: 1px solid #ccc;
        border-radius: 0;
        width: 100%;
        color: inherit;
        /* Tohle vrátí standardní chování mobilního prohlížeče */
        -webkit-appearance: padding-box; 
        appearance: auto;
    }

    /* Standardní zviditelnění ikonky kalendáře pro Chrome/Android */
    input[type="date"]::-webkit-calendar-picker-indicator {
        display: block;
        opacity: 1;
        width: 16px;
        height: 16px;
        filter: invert(0.5); /* Pokud máš tmavé pozadí, změň na 1 */
    }
    /* Celý hlavní obal */
    .container {
        padding-top: 5px; /* Zmenší prostor nad celou sekcí */
    }

    /* Karta s vybranými pokoji */
    .selected-wrapper {
        padding: 10px 15px; /* Méně místa uvnitř karty */
        margin-top: 0;      /* Zruší horní okraj, aby se nelepila dolů */
        margin-bottom: 15px;
        border-radius: 2px;
    }

    /* Nadpis v kartě */
    .selected-wrapper h2 {
        font-size: 1.2rem;   /* Menší písmo pro nadpis */
        margin-top: 0;       /* Odstraní mezeru nad nadpisem */
        margin-bottom: 10px; /* Menší mezera pod nadpisem */
        text-align: center;
    }

    /* Seznam pokojů a cena */
    #selectedRooms {
        font-size: 0.9rem;   /* Drobnější text u vypsaných pokojů */
    }

    .total {
        font-size: 1.1rem;   /* Celková cena už nemusí být tak obří */
        margin: 10px 0;
        font-weight: bold;
    }

    /* Tlačítko rezervace */
    #reserveBtn {
        width: 90%;         /* Tlačítko přes celou šířku, aby se dobře mačkalo */
        padding: 12px;
        font-size: 0.9rem;
        margin-top: 5px;
    }
    /* Roztáhne karty s pokoji na celou šířku mobilu */
    .rates-grid {
        padding: 0px; /* Jen malý odstup od hran displeje */
        gap: 15px;
    }

    .rate {
        flex: 0 1 100% !important; /* Vynutí jeden pokoj na jeden řádek */
        min-width: 0 !important;   /* Zruší omezení šířky z počítače */
        margin: 0 !important;      /* Odstraní boční okraje */
        min-height: auto !important; /* Na mobilu se výška přizpůsobí textu */
    }

    /* Roztáhne hlavní kontejner a boxy */
    .container, .box {
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px !important;
        margin: 0 !important;
    }
/* Vrátí poslední kartu na mobilu na celou šířku */
    .rates-grid .rate:last-child {
        flex: 0 1 100% !important;
        max-width: 100% !important;
        min-height: auto !important; /* Na mobilu ať se výška přizpůsobí textu */
        max-height: none !important; /* Zrušíme případné omezení výšky z PC */
    }

    /* Pokud jsi u fotky na PC nastavovala pevnou výšku (těch 250px), 
       tady ji uvolníme, aby fotka na mobilu nebyla placatá */
    .rates-grid .rate:last-child .mainPhoto {
        height: auto !important;
    }    
/* Cílíme pouze na zelený štítek poslední karty na mobilu - VARIANTA VLEVO */
.rates-grid .rate:last-child::before {
    /* 1. TEXT A VELIKOST */
    content: "⚠️Rennerova 105 - cca 150m od Plzeňky" !important;
    font-size: 15px !important;    
    font-weight: 900 !important;   
    
    /* 2. POZICE - Teď vlevo */
    position: absolute !important;
    top: 350px !important;         
    left: 0 !important;            /* Zarovnáno k levému okraji */
    right: auto !important;        /* Musíme vypnout zarovnání vpravo */
    
    /* 3. VZHLED */
    background-color: #359386 !important; 
    color: white !important;
    padding: 15px 25px !important; 
    z-index: 99 !important;        
    
    /* 4. DETAILY - Úprava pro levou stranu */
    border-radius: 0 12px 12px 0 !important; /* Zaoblení teď bude vpravo */
    box-shadow: 5px 5px 15px rgba(0,0,0,0.4) !important; /* Stín směřuje doprava */
    white-space: nowrap !important;
}    
    /* Zvětšíme i to spodní textové upozornění (after) */
    .rates-grid .rate:last-child::after {
        font-size: 18px !important; /* Cena a podmínky musí být na mobilu obří */
        padding: 15px !important;
        margin: 15px 10px !important;
    }
}