/**
 * CookieConsent v3 - Light Theme
 * FOX Development, predkovia.sk copy (maroon #800000, Bootstrap 3 widths 1170/970/750)
 *
 * Light version of the cookie consent bar styling.
 * Include this file AFTER the CookieConsent library CSS.
 * Do NOT add cc--darkmode class to <html> when using this theme.
 *
 * Usage:
 *   <link rel="stylesheet" href="cookieconsent.css">
 *   <link rel="stylesheet" href="cookieconsent-light.css">
 *
 * Requires: --predkovia-red CSS variable (default: #800000)
 *           or define it in your :root { --predkovia-red: #800000; }
 *
 * All sizes are px, never rem. Bootstrap 3 sets html { font-size: 10px }, so rem
 * values rendered at 62.5% there (an 8px description on seniorfriendly.sk).
 * The library itself pins #cc-main to 16px, px keeps the theme on the same base.
 *
 * Specificity: the desktop rules include `.cm.cm--bar.cm--inline` (4 classes).
 * Every rule inside a @media block MUST list that same 4-class selector, or the
 * desktop value wins at that width (2026-09-29: three buttons 415px wide clipped
 * in a 375px bar; body stayed 1140px wide at 1024px).
 */

/* ===== Cookie Consent - FOX Light Theme ===== */
#cc-main {
    --cc-bg: rgba(255, 255, 255, 0.92);
    --cc-primary-color: #2a2a2e;
    --cc-secondary-color: #5a5a66;
    --cc-btn-primary-bg: var(--predkovia-red, #800000);
    --cc-btn-primary-color: #fff;
    --cc-btn-primary-hover-bg: #5c0000;
    --cc-btn-secondary-bg: rgba(0, 0, 0, 0.06);
    --cc-btn-secondary-color: #333;
    --cc-btn-secondary-hover-bg: rgba(0, 0, 0, 0.12);
    --cc-separator-border-color: rgba(0, 0, 0, 0.08);
    --cc-toggle-on-bg: var(--predkovia-red, #800000);
    --cc-toggle-off-bg: #c0c0c8;
    --cc-toggle-on-knob-bg: #fff;
    --cc-toggle-off-knob-bg: #fff;
    --cc-cookie-category-block-bg: rgba(0, 0, 0, 0.03);
    --cc-cookie-category-block-hover-bg: rgba(0, 0, 0, 0.06);
    --cc-footer-bg: rgba(0, 0, 0, 0.03);
    --cc-footer-color: #6a6a75;
    --cc-footer-border-color: rgba(0, 0, 0, 0.08);
    --cc-overlay-bg: rgba(0, 0, 0, 0.45);
    --cc-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --cc-modal-border-radius: 0;
    --cc-btn-border-radius: 6px;
    --cc-font-size: 13.44px;
    /* predkovia.sk: design/style.css sets body { text-align: center }, which the bar inherits */
    text-align: left;
}

/* Consent bar - matches Bootstrap .container width exactly */
#cc-main .cm,
#cc-main .cm.cm--bar,
#cc-main .cm.cm--bar.cm--inline {
    max-width: 100% !important;
    width: 100% !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: none !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 0 !important;
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.1);
}

/* Body matches Bootstrap .container responsive widths */
#cc-main .cm__body,
#cc-main .cm.cm--bar .cm__body,
#cc-main .cm.cm--bar.cm--inline .cm__body {
    max-width: 1170px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 17.6px 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 32px !important;
    box-sizing: border-box !important;
}
@media (max-width: 1199.98px) {
    #cc-main .cm__body,
    #cc-main .cm.cm--bar .cm__body,
    #cc-main .cm.cm--bar.cm--inline .cm__body {
        max-width: 970px !important;
    }
}
@media (max-width: 991.98px) {
    #cc-main .cm__body,
    #cc-main .cm.cm--bar .cm__body,
    #cc-main .cm.cm--bar.cm--inline .cm__body {
        max-width: 750px !important;
    }
}

/* Text container — no extra padding from library */
#cc-main .cm__texts,
#cc-main .cm.cm--bar .cm__texts,
#cc-main .cm.cm--bar.cm--inline .cm__texts {
    flex: 1;
    min-width: 0;
    padding: 0 !important;
    margin: 0 !important;
}
#cc-main .cm__title,
#cc-main .cm.cm--bar .cm__title {
    font-size: 14.72px;
    font-weight: 600;
    margin-bottom: 4px;
    padding: 0 !important;
    color: #2a2a2e;
}
#cc-main .cm__desc,
#cc-main .cm.cm--bar .cm__desc {
    font-size: 12.8px;
    line-height: 1.5;
    opacity: 0.75;
    padding: 0 !important;
    margin: 0 !important;
    color: #5a5a66;
}
/* Override library's combined title+desc horizontal padding */
#cc-main .cm__desc,
#cc-main .cm__title {
    padding: 0 !important;
}

/* Button container — always row, never wrap, no max-width limit */
#cc-main .cm__btns,
#cc-main .cm.cm--bar .cm__btns,
#cc-main .cm.cm--bar.cm--inline .cm__btns,
#cc-main .cm--bar.cm--inline .cm__btns {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
}

/* Kill library's margin-top on adjacent buttons and button groups */
#cc-main .cm__btn + .cm__btn,
#cc-main [class*="cm__btn-group"] + [class*="cm__btn-group"] {
    margin-top: 0 !important;
    margin: 0 !important;
}

/* Button groups — size to content, not 50/50 split.
   display:flex is REQUIRED here. The theme shipped `gap` on this selector while the
   element stayed `display:block`, and gap does nothing on a block container, so the
   two buttons inside a group rendered flush against each other and read as one wide
   amber slab. Adam spotted it as "no space between the consent buttons". */
#cc-main [class*="cm__btn-group"] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    flex: none !important;
    gap: 8px !important;
}

/* All buttons — auto width so text fits, no overflow clipping */
#cc-main .cm .cm__btn,
#cc-main .cm.cm--bar .cm__btn,
#cc-main .cm.cm--bar.cm--inline .cm__btn,
#cc-main .cm .cm__btn[data-role] {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 13.12px !important;
    font-weight: 500 !important;
    padding: 7.2px 17.6px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: unset !important;
    width: auto !important;
    min-width: fit-content !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    line-height: 1.4 !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

/* Primary button (Povoliť všetko / Accept all) — solid orange */
#cc-main .cm .cm__btn[data-role="all"] {
    background: var(--predkovia-red, #800000) !important;
    color: #fff !important;
    border: 1px solid var(--predkovia-red, #800000) !important;
}
#cc-main .cm .cm__btn[data-role="all"]:hover {
    background: #5c0000 !important;
    border-color: #5c0000 !important;
}

/* Secondary button (Odmietnuť všetko / Reject all) — solid orange, same as primary */
#cc-main .cm .cm__btn[data-role="necessary"] {
    background: var(--predkovia-red, #800000) !important;
    color: #fff !important;
    border: 1px solid var(--predkovia-red, #800000) !important;
}
#cc-main .cm .cm__btn[data-role="necessary"]:hover {
    background: #5c0000 !important;
    border-color: #5c0000 !important;
}

/* Tertiary button (Prispôsobiť / Customize) — ghost outline */
#cc-main .cm .cm__btn[data-role="show"] {
    background: transparent !important;
    color: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
}
#cc-main .cm .cm__btn[data-role="show"]:hover {
    color: #333 !important;
    border-color: rgba(0, 0, 0, 0.3) !important;
    background: rgba(0, 0, 0, 0.04) !important;
}

/* Mobile responsive.
   Every selector list carries the 4-class `.cm.cm--bar.cm--inline` variant, or the
   desktop rules above win (see header).
   All three buttons sit in ONE row, on every site (Adam, 2.10.2026: two rows of buttons
   waste space on small screens; the two-row layout of 29.9. was rejected). The two
   library button groups dissolve (display: contents), each button starts at its label
   width plus 4px side padding and the leftover width is shared out, so the row is always
   full. Label size scales with the screen, clamp(11.5px, 3.6vw, 14px): padding alone is
   not enough, the label width decides. Tuned on citysounds.sk (system font): the three SK
   labels measure 284px at 14px and a 320px phone leaves 274px. With another font or other
   labels, measure at 320px and retune the clamp. 44px tap height; below about 300px a
   label wraps inside its button instead of spilling out. */
@media (max-width: 767.98px) {
    #cc-main .cm__body,
    #cc-main .cm.cm--bar .cm__body,
    #cc-main .cm.cm--bar.cm--inline .cm__body {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 16px 12px !important;
        max-width: 100% !important;
    }
    #cc-main .cm__btns,
    #cc-main .cm.cm--bar .cm__btns,
    #cc-main .cm.cm--bar.cm--inline .cm__btns,
    #cc-main .cm--bar.cm--inline .cm__btns,
    #cc-main .cm.cm--box .cm__btns {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 8px !important;
        border: none !important;
    }
    #cc-main .cm__btn-group,
    #cc-main .cm .cm__btn-group,
    #cc-main .cm.cm--bar .cm__btn-group,
    #cc-main .cm.cm--bar.cm--inline .cm__btn-group,
    #cc-main .cm [class*="cm__btn-group"] {
        display: contents !important;
    }
    #cc-main .cm .cm__btn,
    #cc-main .cm.cm--box .cm__btn,
    #cc-main .cm.cm--bar .cm__btn,
    #cc-main .cm.cm--bar.cm--inline .cm__btn,
    #cc-main .cm .cm__btn[data-role],
    #cc-main .cm [class*="cm__btn--"] {
        flex: 1 1 auto !important;
        min-width: auto !important;
        width: auto !important;
        min-height: 44px !important;
        padding: 6px 4px !important;
        font-size: clamp(11.5px, 3.6vw, 14px) !important;
        line-height: 1.2 !important;
        white-space: normal !important;
        text-align: center !important;
        margin: 0 !important;
        border-radius: 6px !important;
    }
    #cc-main .cm .cm__btn[data-role="all"] {
        margin-right: 0 !important;
    }
}

/* Preferences modal */
#cc-main .pm {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background: rgba(255, 255, 255, 0.95);
}
#cc-main .pm__title {
    font-size: 17.6px;
    color: #2a2a2e;
}
#cc-main .pm__section-desc,
#cc-main .pm__section-title {
    font-size: 13.6px;
}

#cc-main .cc-link {
    color: var(--predkovia-red, #800000);
}
#cc-main .cc-link:hover {
    color: #5c0000;
}

/* Cookie settings button (floating) */
#cookie-settings-btn {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 999;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f0f0f3;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: var(--predkovia-red, #800000);
    font-size: 19.2px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.7;
}
#cookie-settings-btn:hover {
    opacity: 1;
    background: var(--predkovia-red, #800000);
    color: #fff;
    transform: scale(1.1);
}