/**
 * CookieConsent v3 - Light Theme
 * FOX Development
 *
 * 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: --fox-orange CSS variable (default: #277756)
 *           or define it in your :root { --fox-orange: #277756; }
 *
 * 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: #277756;
    --cc-btn-primary-color: #fff;
    --cc-btn-primary-hover-bg: #1d5c42;
    --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: #277756;
    --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: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --cc-modal-border-radius: 0;
    --cc-btn-border-radius: 6px;
    --cc-font-size: 13.44px;
}

/* 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: 1320px !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: 1399.98px) {
    #cc-main .cm__body,
    #cc-main .cm.cm--bar .cm__body,
    #cc-main .cm.cm--bar.cm--inline .cm__body {
        max-width: 1140px !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: 960px !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: 720px !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;
    padding: 0 !important;
    margin: 0 !important;
    /* plna farba, nie opacity: s opacity .75 mal opis 3,7:1, odkaz Prispôsobiť v nom 3,2:1 (atelierdomova 25. 10. 2026) */
    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: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 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: #277756 !important;
    color: #fff !important;
    border: 1px solid #277756 !important;
}
#cc-main .cm .cm__btn[data-role="all"]:hover {
    background: #1d5c42 !important;
    border-color: #1d5c42 !important;
}

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

/* Tertiary button (Prispôsobiť / Customize) — ghost outline */
#cc-main .cm .cm__btn[data-role="show"] {
    background: transparent !important;
    /* .5 = 3,98:1 na bielej, pod 4,5:1 (atelierdomova 25. 10. 2026) */
    color: rgba(0, 0, 0, 0.72) !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: #277756;
}
#cc-main .cc-link:hover {
    color: #1d5c42;
}

/* 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: #277756;
    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: #277756;
    color: #fff;
    transform: scale(1.1);
}

/* revuemediciny.sk: Bootstrap 3 and the site CSS style bare headings and paragraphs */
#cc-main h2, #cc-main h3 { text-align: left !important; margin: 0 !important; }