/* ==========================================================================
   1. NAČÍTANIE FIREMNÝCH FONTOV
   ========================================================================== */

@font-face {
    font-family: 'Season Sans';
    src: url('fonts/SeasonSans-Regular.woff2') format('woff2'),
         url('fonts/SeasonSans-Regular.woff') format('woff');
    font-weight: normal; /* Regular */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Season Sans';
    src: url('fonts/SeasonSans-Medium.woff2') format('woff2'),
         url('fonts/SeasonSans-Medium.woff') format('woff');
    font-weight: 500; /* Medium */
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   2. GLOBÁLNA TYPOGRAFIA A CUSTOMLINE (Základný text)
   ========================================================================== */

body, p, td, label, .den {
    font-family: 'Season Sans', Helvetica, Arial, sans-serif;
    font-weight: normal !important; /* Regular */
    font-size: 16px !important;
    line-height: 24px !important;
    letter-spacing: 0.8px !important;
    color: #312F30 !important;
}

/* Pozadie celého webu */
body {
    background-color: #F0EBE5 !important;
}

a {
    color: #312F30;
}

hr {
    border: none !important;
    border-top: 1px solid #312F30 !important;
    opacity: 0.15 !important;
}

/* Nadpisy sekcií (Dátum, Čas, Zákazník...) */
h2 {
    font-family: 'Season Sans', Helvetica, Arial, sans-serif;
    font-weight: 500 !important; /* Medium */
    font-size: 20px !important;
    letter-spacing: 0.8px !important;
    color: #312F30 !important;
}

/* Poznámky, drobné texty a podmienky pod formulárom */
small, .vlastny-tooltip .tooltip-text, #text_navyse_spopl, #text_navyse_spopl2, label[for="suhlas"], label[for="15r"] {
    font-family: 'Season Sans', Helvetica, Arial, sans-serif;
    font-weight: normal !important; /* Regular */
    font-size: 12px !important;
    line-height: 20.8px !important;
    letter-spacing: 0.8px !important;
    color: #312F30 !important;
}

/* ==========================================================================
   3. DROBEČKOVÁ NAVIGÁCIA (H1)
   ========================================================================== */

h1, h1 a {
    font-family: 'Season Sans', Helvetica, Arial, sans-serif !important;
    font-weight: 500 !important; /* Medium */
    font-size: 11px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important; /* Verzálky */
    color: #312F30 !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

h1 span {
    font-family: 'Season Sans', Helvetica, Arial, sans-serif !important;
    font-weight: 500 !important;
    font-size: 11px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: #312F30 !important;
    border: none !important;
    border-left: 1px solid #312F30 !important; 
    padding: 0 0 0 10px !important; 
    margin: 0 0 0 5px !important; 
}

/* TOTO NÁM CHÝBALO: Prvý prvok nebude mať čiaru zľava */
h1 span:first-of-type {
    border-left: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Skrytie (zneviditeľnenie) iba toho <a>, ktoré je PRIAMYM potomkom h1 */
h1 > a:first-of-type {
    display: none !important;
}

/* ==========================================================================
   4. ÚPRAVA ZOBRAZENIA SLUŽBY
   ========================================================================== */

.sluzba {
    border: none !important; 
    border-bottom: 1px solid rgba(49, 47, 48, 0.15) !important;
    border-radius: 0 !important;
    padding: 30px 0 !important;
    margin-top: 0 !important;
    background: transparent !important;
    
    display: flex !important;
    align-items: center !important; /* Na PC drží text a tlačidlo v jednej línii */
    justify-content: space-between !important; 
}

.sluzba span.text {
    font-family: 'Season Sans', Helvetica, Arial, sans-serif !important;
    font-weight: 500 !important; /* Medium */
    font-size: 41px !important;
    line-height: 1.1 !important; 
    color: #312F30 !important;
    padding: 0 20px 0 0 !important; /* Medzera, aby sa text nedotkol tlačidla */
    margin: 0 !important;
    
    /* Vynútime blokové správanie pre prirodzené zalamovanie */
    display: block !important;
    text-align: left !important;
    flex-grow: 1 !important;
}

/* ==========================================================================
   5. TLAČIDLÁ (Buttons)
   ========================================================================== */

input[type="submit"], .tlacidlo, .sluzba span.tlacidlo {
    font-family: 'Season Sans', Helvetica, Arial, sans-serif !important;
    font-weight: 500 !important; /* Medium */
    font-size: 16px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important; /* Verzálky */
    background-color: #FFFFFF !important; /* Biela */
    color: #312F30 !important;
    
    border: none !important; /* ÚPLNÉ ZRUŠENIE RÁMIKA */
    box-shadow: none !important; /* Úplne plochý dizajn */
    
    border-radius: 30px !important; 
    padding: 14px 32px !important; 
    transition: all 0.25s ease;
}

/* Hover efekt pre tlačidlá */
input[type="submit"]:hover, .tlacidlo:hover, .sluzba span.tlacidlo:hover {
    background-color: #312F30 !important; /* Invertovanie farieb */
    color: #FFFFFF !important;
}

/* ==========================================================================
   6. KALENDÁR (Úprava krúžkov)
   ========================================================================== */

#kalendar td span {
    font-family: 'Season Sans', Helvetica, Arial, sans-serif !important;
    background-color: #FFFFFF !important; /* Namiesto šedej biela */
    border: 1px solid #ccc !important;
    border-radius: 50% !important; /* Dokonalý kruh */
    width: 34px !important; /* Zmenšenie krúžkov */
    height: 34px !important;
    line-height: 32px !important; /* Dokonalé vycentrovanie textu vertikálne */
    padding: 0 !important;
    display: inline-block !important;
    text-align: center !important; /* Vycentrovanie horizontálne */
    transition: all 0.2s ease;
}

/* Hover stav na dňoch v kalendári */
#kalendar td span:hover {
    color: #797D65 !important;
    border: 1px solid #797D65 !important;
    background-color: #F0EBE5 !important;
}

/* Aktívny označený deň v kalendári */
#kalendar td span.oznacene {
    background-color: #797D65 !important; /* Olivová pre vybraný deň */
    border: 1px solid #797D65 !important;
    color: #FFFFFF !important;
}

/* Úprava vybraného času a hoverov na čas */
.cas:hover {
    color: #797D65 !important;
    border: 1px solid #797D65 !important;
}
.oznaceny_cas {
    background-color: #797D65 !important;
    border: 1px solid #797D65 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   7. FORMULÁR (Úprava polí zákazníka)
   ========================================================================== */

input.zakaznik, select.zakaznik, textarea.zakaznik, .tel-predvolba {
    font-family: 'Season Sans', Helvetica, Arial, sans-serif !important;
    font-size: 16px !important;
    background-color: #FFFFFF !important;
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    padding: 12px 18px !important;
    color: #312F30 !important;
    outline: none !important;
}

input.zakaznik:focus, select.zakaznik:focus, textarea.zakaznik:focus {
    border: 1px solid #797D65 !important; /* Olivový focus */
}

/* ==========================================================================
   8. ODSTRÁNENIE DUPLIKOVANÝCH KONTAKTOV (Iba podstránky)
   ========================================================================== */

.sluzba ~ .stlpec, 
.sluzba ~ .stlpec_mapa,
#kalendar ~ .stlpec,
#kalendar ~ .stlpec_mapa,
#objednavka ~ .stlpec,
#objednavka ~ .stlpec_mapa,
hr ~ .stlpec,             /* Skrytie kontaktov na stránke dokončenia */
hr ~ .stlpec_mapa {       /* Skrytie mapy na stránke dokončenia */
    display: none !important;
}

/* ==========================================================================
   9. SKRYTIE NEŽIADUCICH GLOBÁLNYCH PRVKOV
   ========================================================================== */

img.logo, .logo {
    display: none !important;
}

/* Tooltip úprava pre tmavé ladenie */
.vlastny-tooltip .tooltip-text {
    background-color: #312F30 !important;
    color: #F0EBE5 !important;
}
.vlastny-tooltip .tooltip-text::after {
    border-color: #312F30 transparent transparent transparent !important;
}
footer {
    background-color: #312F30 !important;
    color: #F0EBE5 !important;
}
footer a {
    color: #F0EBE5 !important;
}

hr {
    display: none !important; /* Skryje čiaru pod nadpisom */
}


/* ==========================================================================
   10. DOLADENIE OTÁZNIKA
   ========================================================================== */

.vlastny-tooltip {
    display: inline-block !important;
    vertical-align: super !important; /* Tento zázrak zarovná otáznik k vrchnej línii textu */
    margin-left: 5px !important; 
    transform: none !important; /* Úplné zrušenie pixelových posunov */
}

.fa-otaznik {
    width: 22px !important;
    height: 22px !important;
    background-size: contain !important;
}

/* ==========================================================================
   11. DOKONALÁ OPRAVA PRE MOBILY (Zarovnanie a Bublina)
   ========================================================================== */

@media only screen and (max-width: 767px) {
    /* ÚPLNÉ ZRUŠENIE ČIAROK V NAVIGÁCII NA MOBILE PRE VŠETKY POLOŽKY */
    h1 span {
        border-left: none !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    /* Vycentrovanie hornej drobečkovej navigácie */
    h1 {
        text-align: center !important;
    }

    /* Usporiadanie textu a tlačidla pekne na stred */
    .sluzba {
        flex-direction: column !important; 
        align-items: center !important; 
    }
    
    .sluzba span.text {
        font-size: 28px !important; 
        line-height: 1.2 !important; 
        padding-right: 0 !important;
        text-align: center !important; 
    }

    .sluzba span.tlacidlo {
        margin-top: 25px !important; 
        width: 100% !important; 
        box-sizing: border-box !important;
        text-align: center !important;
    }

    /* Bublina ostáva ukotvená sprava */
    .vlastny-tooltip .tooltip-text {
        left: auto !important; 
        right: -10px !important; 
        transform: translateY(-10px) !important; 
        width: 260px !important; 
        white-space: normal !important; 
    }
    
    .vlastny-tooltip .tooltip-text::after {
        left: auto !important; 
        right: 15px !important; 
        margin-left: 0 !important;
    }
}

/* ==========================================================================
   12. ROZLOŽENIE DÁTUM.PHP (3 STĹPCE PRE 900px IFRAME)
   ========================================================================== */

/* ZMENENÉ: Z 992px na 800px, aby to fungovalo vnútri 900px iframu! */
@media (min-width: 800px) {
    .stlpec:has(#kalendar),
    a#cas + .stlpec,
    a#zakaznik + .stlpec {
        display: inline-block !important;
        vertical-align: top !important;
        float: none !important;
        width: 31% !important;
        margin-right: 3% !important; 
        box-sizing: border-box !important;
    }
    
    a#zakaznik + .stlpec {
        margin-right: 0 !important;
    }
}

/* ==========================================================================
   13. ČASY (Nové čisté pilulky - 2 Stĺpce)
   ========================================================================== */

.cas {
    background-color: #FFFFFF !important;
    border: 1px solid #ccc !important;
    border-radius: 20px !important;
    color: #312F30 !important;
    
    /* Vytvorenie dvoch stĺpcov */
    width: 48% !important; 
    box-sizing: border-box !important;
    padding: 8px 0 !important;
    margin: 0 2% 10px 0 !important;
    
    display: inline-block !important;
    float: none !important;
    text-align: center !important;
    transition: all 0.25s ease;
    font-size: 14px !important; /* Trošku zmenšené, aby sa dlhší čas vošiel vedľa seba */
}

/* Každý párny čas (v pravom stĺpci) nebude mať pravý okraj, aby to lícovalo so stenou stĺpca */
div.cas:nth-of-type(even) {
    margin-right: 0 !important;
}

.cas:hover {
    border-color: #312F30 !important;
    color: #312F30 !important;
    background-color: #F0EBE5 !important;
}

.oznaceny_cas {
    background-color: #312F30 !important;
    border-color: #312F30 !important;
    color: #FFFFFF !important;
}

/* ==========================================================================
   14. FORMULÁR ZÁKAZNÍK (Zjednotenie výšok)
   ========================================================================== */

input.zakaznik, select.zakaznik, textarea.zakaznik {
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 15px !important;
    font-family: 'Season Sans', Helvetica, Arial, sans-serif !important;
    font-size: 16px !important;
    background-color: #FFFFFF !important;
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    color: #312F30 !important;
    outline: none !important;
}

/* Vnútenie presne rovnakej výšky pre input aj select, aby nevyzerali odseknuto */
input.zakaznik, select.zakaznik {
    height: 48px !important;
    padding: 0 15px !important;
    line-height: 48px !important; /* Vycentruje text vertikálne */
}

/* Textarea potrebuje byť vyššia ako bežné polia */
textarea.zakaznik {
    height: 100px !important;
    padding: 15px !important;
    line-height: normal !important;
    resize: vertical !important;
}

input.zakaznik:focus, select.zakaznik:focus, textarea.zakaznik:focus {
    border: 1px solid #312F30 !important; /* Tmavý obrys pri kliknutí do poľa */
}

/* Skupina pre telefónnu predvoľbu a číslo vedľa seba */
.tel-group {
    display: flex !important;
    gap: 15px !important;
    margin-bottom: 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.tel-predvolba {
    flex: 0 0 35% !important; /* Predvoľba zaberie presne 35% */
    width: 35% !important;
    margin-bottom: 0 !important;
}

.tel-cislo {
    flex: 1 !important; /* Číslo vyplní celý zvyšný priestor */
    width: auto !important;
    margin-bottom: 0 !important;
}

/* Tlačidlo rezervovať na celú šírku formulára */
#zakaznik ~ .stlpec input[type="submit"] {
    width: 100% !important;
    margin-top: 10px !important;
}

/* ==========================================================================
   15. DOKONČENIE REZERVÁCIE (Súhrn a Nadpisy)
   ========================================================================== */

/* Zrušíme "drobečkový" vzhľad pre hlavný nadpis o dokončení */
h1:not(:has(span)), h1 ~ h1 {
    font-family: 'Season Sans', Helvetica, Arial, sans-serif !important;
    font-size: 36px !important;
    font-weight: 500 !important; /* Medium rez */
    text-transform: none !important; /* Zrušenie verzáliek */
    letter-spacing: 0 !important;
    margin: 40px 0 30px 0 !important;
    color: #312F30 !important;
    line-height: 1.2 !important;
    border: none !important;
    padding: 0 !important;
}

/* Na mobile tento nadpis primerane zmenšíme a vycentrujeme */
@media only screen and (max-width: 767px) {
    h1:not(:has(span)), h1 ~ h1 {
        font-size: 28px !important;
        margin: 20px 0 !important;
        text-align: center !important;
    }
}

/* Jemné odsadenie pre podnadpis "Údaje o rezervácii" */
h1:not(:has(span)) + h2, h1 ~ h1 + h2 {
    margin-top: 30px !important;
    margin-bottom: 20px !important;
}

/* Tučné texty (samotné hodnoty ako Meno, Dátum...) v súhrne rezervácie */
.stred > b {
    font-weight: 500 !important; /* Medium rez pre elegantné zvýraznenie */
    margin-left: 5px !important;
}



.vlastny-tooltip .tooltip-text {
  max-width: 350px;
  padding: 5px 15px;
}

.vlastny-tooltip:hover .tooltip-text, .vlastny-tooltip.zobraz .tooltip-text {
    transform: translateX(-50%) translateY(10px);
}