/**********************************************************************
 * CKS - Cookie System - Styles
 * Version: 1.0.54
 * Vyčlenené z cks.php
 *
 * Dynamické hodnoty (farba, šírka tlačidla) prichádzajú z cks.ini
 * cez CSS premenné --cks-accent a --cks-btn-width, ktoré nastavuje
 * malý inline <style> blok priamo v cks.php pred načítaním tohto
 * súboru. Tu použité var(..., fallback) hodnoty sú len poistka,
 * keby sa tento súbor načítal bez toho bloku.
 **********************************************************************/


/* ====================================================
   OVERLAY
   ==================================================== */

#cks-overlay {

    display:none;

    position:fixed;

    top:0;
    right:0;
    bottom:0;
    left:0;

    width:100%;
    height:100%;

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

    z-index:9998;
}


/* ====================================================
   BANNER WRAPPER
   ==================================================== */

#cookie-banner {

    display:none;

    position:fixed;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    width:90%;
    max-width:700px;
    max-height:90vh;

    box-sizing:border-box;

    background:#fff;
    color:#222;

    z-index:9999;

    font-family:sans-serif;

    border-radius:6px;

    box-shadow:0 4px 20px rgba(0,0,0,0.4);

    overflow:hidden;
}


/* ====================================================
   HEADER
   ==================================================== */

#cks-header {

    padding:20px 25px;

    background:var(--cks-accent, #4CAF50);

    color:#fff;
}


.cks-header-row {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;
}


.cks-header-site {

    font-size:13px;

    line-height:18px;

    margin-bottom:3px;

    color:#fff;
}


.cks-header-title {

    font-size:22px;

    line-height:27px;

    font-weight:bold;

    color:#fff;
}


.cks-header-lang {

    display:flex;

    align-items:center;
}


.cks-lang-label {

    margin-right:5px;

    color:#fff;
}


#cks-close {

    display:none;

    margin-left:8px;

    padding:2px 6px;

    cursor:pointer;

    font-size:11px;

    line-height:14px;

    border:1px solid rgba(255,255,255,0.7);

    border-radius:3px;

    background:transparent;

    color:#fff;
}


/* ====================================================
   CONTENT WRAPPER
   ==================================================== */

#cks-content {

    padding:0;

    background:#fff;

    color:#222;
}


/* ====================================================
   TABS WRAPPER
   ==================================================== */

.cks-tabs-wrapper {

    display:flex;

    width:100%;

    box-sizing:border-box;
}


/* ====================================================
   LEFT TAB MENU
   ==================================================== */

.cks-tabs {

    width:190px;

    flex-shrink:0;

    background:#f4f4f4;

    border-right:1px solid #ddd;
}


.cks-tab {

    display:block;

    width:100%;

    box-sizing:border-box;

    padding:14px 12px;

    border:0;

    border-bottom:1px solid #ddd;

    background:#f4f4f4;

    color:#555;

    cursor:pointer;

    font-family:Arial,sans-serif;

    font-size:15px;

    font-weight:bold;

    text-align:left;

    appearance:none;

    -webkit-appearance:none;

    -moz-appearance:none;

    outline:none;

    box-shadow:none;
}


.cks-tab:hover {

    color:var(--cks-accent, #4CAF50);
}


.cks-tab:focus-visible {

    box-shadow:inset 0 0 0 2px var(--cks-accent, #4CAF50);
}


#cookie-banner .cks-tab.active {

    position:relative;

    z-index:2;

    width:calc(100% + 1px);

    background:#fff;

    color:var(--cks-accent, #4CAF50);

    border-left:8px solid var(--cks-accent, #4CAF50);

    border-right:0;

    padding-left:8px;

    margin-right:-1px;
}


/* ====================================================
   RIGHT CONTENT
   ==================================================== */

.cks-tab-contents {

    flex:1;

    min-width:0;

    background:#fff;

    background-image: url(../images/cks_bg.png);

    background-repeat: no-repeat;

    background-position: center;
}


.cks-tab-content {

    display:none;

    padding:25px;

    min-height:150px;

    box-sizing:border-box;

    font-size:15px;

    line-height:1.5;
}


#cookie-banner .cks-tab-content.active {

    display:block;

    background:transparent;
}


/* ====================================================
   COOKIE TYPE DESCRIPTION
   ==================================================== */

.cks-cookie-description {

    margin-top:10px;

    margin-bottom:0;

    font-size:13px;

    line-height:1.5;

    font-style:italic;

    color:#777;
}


/* ====================================================
   GDPR LINK
   ==================================================== */

.cks-gdpr-link {

    margin-top:20px;

    padding-top:15px;

    border-top:1px solid #eee;

    font-size:15px;

    line-height:22px;
}


.cks-gdpr-link a {

    color:var(--cks-accent, #4CAF50);

    font-weight:bold;

    text-decoration:none;
}


.cks-gdpr-link a:hover {

    text-decoration:underline;
}


/* ====================================================
   SWITCH
   ==================================================== */

.cks-switch-row {

    display:block;

    margin:10px 0;
}


.cks-switch {

    position:relative;

    display:inline-block;

    width:46px;

    height:24px;

    vertical-align:middle;

    margin-right:8px;
}


.cks-switch input {

    opacity:0;

    width:0;

    height:0;
}


.cks-slider {

    position:absolute;

    cursor:pointer;

    top:0;

    left:0;

    right:0;

    bottom:0;

    background:#777;

    transition:.2s;

    border-radius:24px;
}


.cks-slider:before {

    position:absolute;

    content:"";

    height:18px;

    width:18px;

    left:3px;

    bottom:3px;

    background:#fff;

    transition:.2s;

    border-radius:50%;
}


.cks-switch input:checked + .cks-slider {

    background:var(--cks-accent, #4CAF50);
}


.cks-switch input:checked + .cks-slider:before {

    transform:translateX(22px);
}


.cks-switch input:disabled + .cks-slider {

    cursor:default;
}


/* ====================================================
   BUTTONS
   ==================================================== */

.cks-button {

    width:var(--cks-btn-width, 200px);

    box-sizing:border-box;

    background:linear-gradient(
        to bottom,
        #f2f2f2 5%,
        #cfcfcf 100%
    );

    background-color:#f2f2f2;

    border-radius:5px;

    border:1px solid #aaa;

    display:inline-block;

    cursor:pointer;

    color:#333;

    font-family:Arial;

    font-size:15px;

    font-weight:bold;

    padding:5px 10px;

    text-decoration:none;

    text-shadow:0 1px 0 #fff;

    margin:2px;
}


.cks-button:hover {

    background:var(--cks-accent, #4CAF50);

    color:#fff;

    border:1px solid var(--cks-accent, #4CAF50);

    text-shadow:none;
}


/* ====================================================
   FOOTER
   ==================================================== */

#cks-footer {

    padding:15px 25px;

    border-top:1px solid #ddd;

    background:#fff;

    color:#222;

    text-align:center;
}


.cks-footer-note {

    margin-top:12px;

    padding-top:10px;

    border-top:1px solid #eee;

    font-size:10px;

    line-height:1.5;

    color:#a8a8a8;
}


/* ====================================================
   REOPEN ICON
   ==================================================== */

#cookie-reopen {

    position:fixed;

    bottom:10px;

    right:10px;

    width:24px;

    height:24px;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    z-index:9999;
}


.cks-reopen-img {

    width:24px;

    height:24px;
}


/* ====================================================
   MOBILE
   ==================================================== */

@media screen and (max-width:600px) {

    /* ------------------------------------------------
       BANNER - na celú šírku, výška podľa obsahu,
       scrollovateľné, aby sa dalo dôjsť na tlačidlá
       ------------------------------------------------ */

    #cookie-banner {

        top:50%;

        left:50%;

        transform:translate(-50%,-50%);

        width:100%;

        max-width:100%;

        max-height:94vh;

        border-radius:0;

        overflow-y:auto;

        overflow-x:hidden;

        -webkit-overflow-scrolling:touch;
    }


    /* ------------------------------------------------
       HEADER
       ------------------------------------------------ */

    #cks-header {

        padding:16px 18px;
    }

    .cks-header-title {

        font-size:20px;

        line-height:25px;
    }

    .cks-header-site {

        font-size:13px;
    }

    .cks-lang-label {

        font-size:15px;
    }


    /* ------------------------------------------------
       TABS + CONTENT - na mobile pod sebou, na celú šírku
       (žiadny bočný panel, žiadne bočné orezanie)
       ------------------------------------------------ */

    .cks-tabs-wrapper {

        flex-direction:column;
    }

    .cks-tabs {

        width:100%;

        display:flex;

        flex-direction:column;

        border-right:0;

        border-bottom:1px solid #ddd;
    }

    .cks-tab {

        font-size:17px;

        line-height:22px;

        padding:15px 18px;

        min-height:48px;
    }

    #cookie-banner .cks-tab.active {

        width:100%;

        margin-right:0;

        border-left:6px solid var(--cks-accent, #4CAF50);

        padding-left:12px;
    }

    .cks-tab-contents {

        width:100%;

        background-size:220px auto;
    }

    .cks-tab-content {

        padding:20px 18px;

        min-height:auto;

        font-size:16px;

        line-height:1.6;
    }

    .cks-cookie-description {

        font-size:14px;
    }


    /* ------------------------------------------------
       GDPR ODKAZ, PREPÍNAČE - čitateľnejšie a väčší dotykový cieľ
       ------------------------------------------------ */

    .cks-gdpr-link {

        font-size:16px;

        line-height:24px;
    }

    .cks-switch-row {

        font-size:16px;

        line-height:24px;
    }

    .cks-switch {

        width:50px;

        height:28px;
    }

    .cks-slider:before {

        height:22px;

        width:22px;
    }

    .cks-switch input:checked + .cks-slider:before {

        transform:translateX(22px);
    }


    /* ------------------------------------------------
       FOOTER / TLAČIDLÁ - pod sebou, na celú šírku,
       väčší dotykový cieľ
       ------------------------------------------------ */

    #cks-footer {

        display:flex;

        flex-direction:column;

        gap:10px;

        padding:16px 18px;
    }

    .cks-button {

        width:100%;

        font-size:17px;

        line-height:22px;

        padding:14px 10px;

        margin:0;
    }

}