:root{
    /* Paleta (nemenné odtiene) */
    --white:#fff; --black:#000;
    --gray-50:#F7F7F7; --gray-100:#F5F5F5; --gray-200:#E7E7E7;
    --gray-300:#D7D7D7; --gray-400:#D1D1D1; --gray-500:#A5A5A5;
    --text-700:#303A3A; --text-600:#5A5A5A; --text-500:#7F7E7E;

    --brand-dark:#03034B;
    --primary:#1E3A8A; --primary-hov:#142866; --secondary:#2746D6;
    --info:#0B57D0; --success:#059B00; --warning:#FF8C00; --danger:#C32F00;
    --gold:#D4AF37; --orangered:#FF4500; --tomato:#FF6347; --indigo:#4B0082;

    /* Sémantické tokeny */
    --bg: var(--white);
    --surface: var(--gray-50);
    --surface-muted: var(--gray-100);
    --border: var(--gray-400);
    --shadow: #D1D1D1;

    --text: var(--text-700);
    --text-muted: var(--text-500);
    --link: var(--primary);
    --link-hov: var(--danger);

    /* Menu */
    --menu-bg:#0A2A6B;
    --menu-bg-hov:#081E4F;
    --menu-text:#F5F7FF;
    --menu-muted:#CFD8EA;

    /* Komponentové aliasy */
    --panel: var(--surface);
    --panel-muted: var(--surface-muted);
    --panel-strong: var(--gray-100);
    --line: var(--border);
    --line-muted: var(--gray-300);
    --line-weak: var(--gray-200);
    --ink: var(--text);
    --ink-muted: var(--text-muted);

    /* Tienovanie a rámy */
    --radius-sm:3px; --radius-md:5px; --radius-lg:8px;
    --elev-1: 10px 10px 5px -5px var(--shadow);
    --elev-1-hov: 13px 13px 5px -5px var(--shadow);

    /* Status aliasy (pre konzistenciu) */
    --status-red: var(--danger);
    --status-orangered: var(--orangered);
    --status-orange: var(--warning);
    --status-yellow: var(--gold);
    --status-turquoise: var(--primary);
    --status-green: var(--success);

    /* Doplnky */
    --bg-plain: var(--white);
    --panel-shadow: var(--shadow);
    --danger-hov:#9F2600;
}
:root[data-theme="dark"]{
    --bg:#0b1020;
    --surface:#121833;
    --surface-muted:#0e1429;
    --border:#2b3353;
    --text:#e8ecff;
    --text-muted:#b5bcd1;
    --link:#8ab4ff;
    --link-hov:#5b8dff;

    --menu-bg:#0c2458;
    --menu-bg-hov:#0a1b3f;
    --menu-text:#e6edff;

    --shadow: rgba(0,0,0,.5);
}

/* ================================
   Reset & základ
   ================================ */
* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}
html, body {
    width:100%;
    height:100%;
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
    background: transparent;
    color: var(--ink);
}
body {
    /* jemná textúra môže zostať – podklad rešpektuje aktuálny theme */
    background-color: var(--bg);
    background-image: url('https://www.transparenttextures.com/patterns/subtle-grey.png');
    background-attachment: fixed;
    background-size: auto;
}
#wrapper {
    width:100%;
    min-height:100%;
    position:relative;
    color: var(--ink);
}

/* Video pozadie */
.background-video{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:-1;
}

/* ================================
   Hlavička
   ================================ */
.header{
    max-width:1500px;
    height:80px;
    margin:0 auto;
    padding-top:10px;
    overflow:hidden;
    background-color:transparent;
}
/* Logo + ikona */
@keyframes rotate {
    from{transform:rotate(0)} to{transform:rotate(360deg)} }
.header .icon-container,
.header .logo-container {
    float:left;
    width:240px;
    margin-left:5%;
}
.header .icon-container img{
    width:30px;
    height:30px;
    animation:rotate 10s linear infinite;
}
.header .logo-container img{
    width:240px;
    height:53px;
}

/* Hamburger */
.hamburger-menu{
    display:none;
    cursor:pointer;
    position:absolute;
    right:20px;
    top:15px;
    z-index:1000;
}
.hamburger-menu img{
    width:30px;
    height:30px;
    background-color: var(--white);
    border-radius:5px;
}

/* Menu */
.header .menu{
    float:right;
    width:calc(90% - 370px);
    margin-top:0;
    margin-right:5%;
    text-align:right;
    display:block;
}
.header .menu a{
    color: var(--menu-text);
    /* Fallback + polopriehľadné pozadie z menu farby */
    background-color: var(--menu-bg);
    background-color: color-mix(in srgb, var(--menu-bg) 85%, transparent);
    padding:5px 20px;
    border-radius:5px;
    text-decoration:none;
    margin-left:15px;
    font-size:16px;
    transition: background-color .25s ease, color .25s ease;
    display:inline-block;
}
.header .menu a:hover{
    background-color: var(--menu-bg-hov);
    background-color: color-mix(in srgb, var(--menu-bg-hov) 90%, transparent);
    color: var(--menu-text);
}

/* Jazykový prepínač */
.header .language-switcher{
    display:inline-block;
    margin-left:15px;
    font-size:16px;
    color: var(--menu-text);
}
.header .language-switcher select{
    background-color: var(--panel);
    color: var(--ink);
    border:1px solid var(--line);
    padding:5px 12px;
    border-radius:5px;
    font-size:16px;
    cursor:pointer;
}

/* ================================
   Obsah
   ================================ */
.content-wrapper{
    max-width:1500px;
    margin:0 auto;
    min-height:calc(100% - 120px);
}
.content-main-wrapper{
    max-width:1500px;
    margin:0 auto;
    min-height:50vh;
}

/* ================================
   Login / Kontakt
   ================================ */
.login-container{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    background-color: var(--panel);
    border:1px solid var(--line);
    padding:20px;
    border-radius: var(--radius-md);
    opacity: 0.95;
    text-align:center;
    max-width:400px;
    width:100%;
}
.contact-container{
    position:relative;
    background-color: var(--panel);
    border:1px solid var(--line);
    padding:30px;
    border-radius: var(--radius-md);
    max-width:400px;
    text-align:center;
    margin:auto;
    box-shadow: var(--elev-1);
}
.login-container h2,
.contact-container h2{
    color: var(--info);
    margin-bottom:20px;
}
.login-container img,
.contact-container img{
    margin-bottom:20px;
    width:160px;
    height:80px;
}

.login-container label,
.contact-container label{
    display:block;
    margin-bottom:5px;
    color: var(--ink);
    font-weight:500;
    font-size:14px;
}

.login-container input,
.contact-container input,
.contact-container textarea{
    width:100%;
    padding:10px;
    margin-bottom:20px;
    border:1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size:14px;
    background: var(--bg-plain);
    color: var(--ink);
}
.login-container input:hover,
.contact-container input:hover,
.contact-container textarea:hover{
    border-color: var(--info);
}

.contact-container .checkbox-container{
    display:flex;
    align-items:center;
    margin-bottom:20px;
}
.contact-container input[type="checkbox"]{
    margin-right:10px;
}

.checkbox-container a,
.contact-container a{
    color: var(--link);
    text-decoration:none;
}
.checkbox-container a:hover,
.contact-container a:hover{
    color: var(--link-hov);
    text-decoration:underline;
}

.login-container button[type="submit"],
.contact-container button[type="submit"]{
    width:100%;
    padding:10px;
    background-color: var(--info);
    border:none;
    color: var(--white);
    font-size:16px;
    border-radius: var(--radius-sm);
    cursor:pointer;
    margin-top:10px;
    transition: background-color .25s ease, transform .02s ease-in;
}
.login-container button[type="submit"]:hover,
.contact-container button[type="submit"]:hover{
    background-color: var(--primary);
}
.login-container button[type="submit"]:active,
.contact-container button[type="submit"]:active{
    transform: scale(.995);
}

.forgot-password{
    display:block;
    margin-top:10px;
    font-size:14px;
    color: var(--link);
    text-decoration:none;
    text-align:right;
}
.forgot-password:hover{ color: var(--link-hov); }

/* A11y outlines */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
    outline:2px solid var(--info);
    outline-offset:2px;
}

/* ================================
   Popup (podmienky)
   ================================ */
.popup{
    display:none;
    position:fixed;
    inset:0;
    z-index:999;
    background-color: rgba(0,0,0,.5);
    justify-content:center;
    align-items:center;
}
.popup-content{
    background-color: var(--panel);
    color: var(--ink);
    margin:15% auto;
    padding:20px;
    border:1px solid var(--line);
    width:60%;
    border-radius:10px;
    box-shadow: var(--elev-1);
}
.popup-content h3{
    margin-top:0;
    color: var(--info);
}
.popup-content p{
    line-height:1.6;
    text-align:justify;
}
.close{
    color:#aaa;
    float:right;
    font-size:28px;
    font-weight:bold;
    cursor:pointer;
}
.close:hover, .close:focus{
    color: var(--ink);
    text-decoration:none;
}

/* ================================
   Okná a bannery
   ================================ */
.motto{
    text-align:center;
    color: var(--white);
    font-size:36px;
    margin-top:20vh;
    text-shadow: 0 2px 8px color-mix(in srgb, var(--panel-shadow) 80%, transparent);
}
.window-container{
    display:flex;
    justify-content:space-around;
    margin-top:15vh;
    padding:0 40px;
}
.window{
    background-color: var(--panel);
    border:1px solid var(--line);
    padding:40px;
    border-radius: var(--radius-md);
    width:30%;
    box-shadow: var(--elev-1);
    text-align:center;
}
.window h2{
    color: var(--info);
    margin-bottom:20px;
}
.window p{
    font-size:16px;
    line-height:1.6;
    text-align:left;
}

.banner{
    background: linear-gradient(135deg, var(--brand-dark), var(--primary));
    color: var(--menu-text);
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 30px;
    border-radius:15px;
    margin:0 40px 40px;
    box-shadow: var(--elev-1);
}
.banner img{
    width:50px;
    height:auto;
    animation: rotate 10s infinite linear;
}
.banner h2{
    font-size:24px;
    margin:0 0 0 50px;
    flex-grow:1;
}
.banner p{
    font-size:14px;
    margin:5px 0 0 50px;
    color: var(--menu-muted);
    max-width:90%;
}
.banner button{
    background-color: var(--info);
    color: var(--white);
    padding:12px 20px;
    font-size:16px;
    border:none;
    border-radius:5px;
    cursor:pointer;
    transition: background-color .25s ease;
    margin-right:40px;
}
.banner button:hover{
    background-color: var(--primary);
}

.white-section{
    background-color: var(--bg-plain);
    width:100%;
    margin-top:40px;
    padding:40px;
    display:inline-block;
    position:relative;
}
.content-section{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:40px;
}
.content-section .text{
    width:50%;
    font-size:16px;
    line-height:1.8;
}
.content-section .text p{
    margin-top:20px;
}
.content-section img{
    width:45%;
    border-radius:10px;
}
.content-section .image{
    margin:0;
}
.content-section h2{
    text-align:center;
    margin-bottom:20px;
    color: var(--info);
}
.content-section .button{
    text-align:center;
    margin-top:20px;
}
.content-section .button button{
    background-color: var(--info);
    color: var(--white);
    padding:8px 16px;
    font-size:14px;
    border:none;
    border-radius:5px;
    cursor:pointer;
    transition: background-color .25s ease;
}
.content-section .button button:hover{
    background-color: var(--primary);
}

.gray-section{
    background-color: var(--surface);
    margin-bottom:40px;
    padding:20px 30px;
    border-radius:15px;
    border:1px solid var(--line-weak);
}
.section-column{
    display:flex;
    justify-content:space-between;
}
.column{
    width:48%;
    font-size:16px;
    line-height:1.8;
}

.separator-container{
    position:relative;
    display:block;
    width:100%;
}
.separator{
    width:100%;
    height:1.5px;
    max-height:1.5px;
    min-height:1.5px;
    background: linear-gradient(to right, transparent, var(--info), transparent);
    margin:40px 0;
    display:block;
    transform:scaleY(.5);
}

.privacy-policy-container,
.terms-of-use-container{
    background-color: var(--panel);
    color: var(--ink);
    padding:40px;
    border-radius:8px;
    margin:100px auto;
    width:80%;
    max-width:900px;
    border:1px solid var(--line);
    box-shadow: var(--elev-1);
}
.privacy-policy-container h1, .privacy-policy-container h2,
.terms-of-use-container h1, .terms-of-use-container h2{
    color: var(--info);
    margin-bottom:20px;
}
.privacy-policy-container p,
.terms-of-use-container p,
.privacy-policy-container ul,
.terms-of-use-container ul{
    font-size:16px;
    line-height:1.6;
    text-align:justify;
    margin-bottom:20px;
}

/* ================================
   Pätička
   ================================ */
.footer-strip{
    position:relative;
    width:100%;
    height:40px;
    line-height:40px;
    background-color: var(--info);
    opacity: 0.95;
    padding:0;
    font-size:14px;
    overflow:hidden;
    margin:0;
    clear:both;
    color: var(--menu-text);
}
.footer-strip .footer-links{
    float:left;
    margin-left:20px;
}
.footer-strip a{
    color: var(--menu-text);
    margin:0 10px;
    text-decoration:none;
    font-size:14px;
    font-weight:300;
    transition: color .25s ease;
}
.footer-strip a:hover{
    color: var(--menu-muted);
}
.footer-right{
    float:right;
    margin-right:20px;
    font-size:14px;
    color: var(--menu-text);
    font-weight:300;
}

/* ================================
   Responzívne úpravy
   ================================ */
@media (max-width: 767px){
    body{
        padding:20px;
    }

    .header .menu{
        display:none;
        position:absolute;
        top:80px;
        right:20px;
        left:20px;
        background: var(--menu-bg);
        background: color-mix(in srgb, var(--menu-bg) 92%, transparent);
        padding:20px;
        border-radius:8px;
        width:auto;
        z-index:999;
        text-align:left;
        border:1px solid var(--line);
    }
    .header .menu a{
        display:block;
        padding:10px;
        margin:10px 0;
        text-align:center;
        border-radius:5px;
    }
    .header .hamburger-menu{
        display:block;
    }
    .header .language-switcher{
        display:block;
        margin-top:20px;
        text-align:center;
    }

    .header .login-container{
        padding:15px;
        max-width:90%;
    }

    .window-container{
        flex-direction:column;
        align-items:center;
        margin-top:5vh;
        padding:0 20px;
    }
    .window{
        width:90%;
        margin-bottom:20px;
        padding:20px;
    }

    .white-section{
        margin-top:0;
        border-radius:8px 8px 0 0;
    }

    .content-section{
        flex-direction:column;
        text-align:center;
        padding:0;
    }
    .content-section img{
        width:80%;
        margin-bottom:20px;
    }
    .content-section .image{
        margin-top:20px;
    }
    .content-section .text{
        width:100%;
    }
    .content-section .text p{
        text-align:left;
    }
    .content-section .text ul li{
        text-align:left;
    }

    .gray-section{
        margin-top:80px;
    }

    .banner{
        flex-direction:column;
        text-align:center;
        padding:0;
        margin:20px 0;
    }
    .banner img{
        margin-bottom:10px;
    }
    .banner h2{
        text-align:center;
        margin:10px 0;
        font-size:20px;
    }
    .banner p{
        max-width:100%;
        font-size:14px;
        margin:10px 0;
        text-align:left;
    }
    .banner button{
        font-size:14px;
        padding:10px 20px;
        margin-top:10px;
        margin-right:0;
    }

    .section-column{
        flex-direction:column;
        align-items:center;
    }
    .section-column .column{
        width:100%;
        margin-bottom:20px;
        text-align:left;
    }
    .gray-section{
        width:100% !important;
        padding:20px 10px !important;
        margin:0 !important;
        box-sizing:border-box;
    }
    .gray-section h2{
        text-align:center;
        margin-bottom:20px;
    }

    .button{
        text-align:center;
        margin-top:20px;
    }
    .button button{
        width:auto;
        padding:10px 20px;
    }

    #footer{
        width:100%;
        height:50px;
        background-color: var(--info);
        color: var(--menu-text);
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding:0 16px;
        position:relative;
        bottom:0;
        left:0;
        right:0;
        z-index:10;
    }
    #footer .footer-links{
        display:flex;
        gap:14px;
        align-items:center;
    }
    #footer .footer-links a{
        color: var(--menu-text);
        text-decoration:none;
        font-size:14px;
    }
    #footer .footer-links a:hover{
        color: var(--menu-muted);
    }
    #footer .footer-right{
        margin-left:auto;
        font-size:14px;
        color: var(--menu-text);
    }
}

@media (max-width: 480px){
    .icon{
        font-size:30px;
    }
    .menu a{
        font-size:14px;
        padding:6px 10px;
    }
    .language-switcher select{
        font-size:14px;
    }

    .login-container img{
        width:120px;
        height:60px;
    }
    .login-container button{
        font-size:14px;
    }
    .forgot-password{
        font-size:12px;
    }

    .window{
        width:95%;
        padding:15px;
    }

    .banner{
        padding:15px;
    }
    .banner h2{
        font-size:18px;
    }
    .banner p{
        font-size:12px;
    }
    .banner button{
        font-size:12px;
        padding:8px 16px;
    }

    .gray-section{
        width:calc(100% - 20px);
        padding:15px 5px;
        margin:15px 0;
    }

    .footer-strip a{
        font-size:12px;
        margin:0 5px;
    }
    .footer-right{
        font-size:10px;
    }
}