/*
 * Cookie bar for klubluna.sk. Based on the FOX light package for orestbida/cookieconsent 3.1.0.
 * Load it AFTER cookieconsent.css.
 *
 * Brand: THICCCBOI (the site font), navy #343f52, the site's yellow #e0a956.
 * Text on the yellow is dark (#262b32, about 6.8:1): the site's own white-on-yellow buttons are only 2.1:1.
 * Every text colour here is at least 4.5:1 on its background.
 *
 * All sizes are px, never rem. Every rule inside a @media block lists the 4-class selector
 * `#cc-main .cm.cm--bar.cm--inline`, or the desktop rule wins at that width.
 * Mobile: all three buttons sit in ONE row, 44px tall.
 */

#cc-main {
    --cc-bg: #ffffff;
    --cc-primary-color: #262b32;
    --cc-secondary-color: #3c4556;
    --cc-btn-primary-bg: #e0a956;
    --cc-btn-primary-color: #262b32;
    --cc-btn-primary-border-color: #e0a956;
    --cc-btn-primary-hover-bg: #cf9440;
    --cc-btn-primary-hover-color: #262b32;
    --cc-btn-primary-hover-border-color: #cf9440;
    --cc-btn-secondary-bg: #ffffff;
    --cc-btn-secondary-color: #343f52;
    --cc-btn-secondary-border-color: #343f52;
    --cc-btn-secondary-hover-bg: #eceff4;
    --cc-btn-secondary-hover-color: #262b32;
    --cc-btn-secondary-hover-border-color: #262b32;
    --cc-separator-border-color: #d9dde5;
    --cc-toggle-on-bg: #343f52;
    --cc-toggle-off-bg: #868c99;
    --cc-toggle-on-knob-bg: #ffffff;
    --cc-toggle-off-knob-bg: #ffffff;
    --cc-toggle-enabled-icon-color: #ffffff;
    --cc-toggle-disabled-icon-color: #ffffff;
    --cc-toggle-readonly-bg: #c8ccd4;
    --cc-toggle-readonly-knob-bg: #ffffff;
    --cc-toggle-readonly-knob-icon-color: #5a6272;
    --cc-section-category-border: #d9dde5;
    --cc-cookie-category-block-bg: #f4f5f8;
    --cc-cookie-category-block-border: #e3e6ec;
    --cc-cookie-category-block-hover-bg: #eceff4;
    --cc-cookie-category-block-hover-border: #e3e6ec;
    --cc-cookie-category-expanded-block-bg: transparent;
    --cc-cookie-category-expanded-block-hover-bg: #eceff4;
    --cc-footer-bg: #f4f5f8;
    --cc-footer-color: #3c4556;
    --cc-footer-border-color: #e3e6ec;
    --cc-overlay-bg: rgba(38, 43, 50, 0.55);
    --cc-modal-border-radius: 0;
    --cc-btn-border-radius: 50px;
    --cc-font-family: THICCCBOI, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* The site CSS styles bare h2/h3/p/a; pin the bar so it never inherits that. */
#cc-main h2,
#cc-main h3 {
    text-align: left !important;
    margin: 0 !important;
}

/* Consent bar: full width at the bottom, the content matches the Bootstrap .container widths. */
#cc-main .cm,
#cc-main .cm.cm--bar,
#cc-main .cm.cm--bar.cm--inline {
    max-width: 100% !important;
    width: 100% !important;
    border: none !important;
    border-top: 1px solid #d9dde5 !important;
    border-radius: 0 !important;
    box-shadow: 0 -4px 24px rgba(38, 43, 50, 0.14);
}

#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: 20px 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) {
    /* narrower than 992px the text column would shrink to a sliver next to the buttons: stack them */
    #cc-main .cm__body,
    #cc-main .cm.cm--bar .cm__body,
    #cc-main .cm.cm--bar.cm--inline .cm__body {
        max-width: 720px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
    }
}

#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: 18px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 6px !important;
    padding: 0 !important;
    color: #262b32;
}
#cc-main .cm__desc,
#cc-main .cm.cm--bar .cm__desc {
    font-size: 15.5px;
    font-weight: 400;
    line-height: 1.55;
    padding: 0 !important;
    margin: 0 !important;
    color: #3c4556;
    opacity: 1;
}

/* Buttons: one row, never wrapped. The two button groups of the library are laid out flat. */
#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: 10px !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
}
#cc-main .cm__btn + .cm__btn,
#cc-main [class*="cm__btn-group"] + [class*="cm__btn-group"] {
    margin: 0 !important;
}
/* gap does nothing on a block container: the button groups have to be flex */
#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: 10px !important;
}

#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: THICCCBOI, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 10px 22px !important;
    min-height: 44px !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: 50px !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
    line-height: 1.3 !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

/* Accept and reject look the same on purpose: equal weight, solid yellow, dark text. */
#cc-main .cm .cm__btn[data-role="all"],
#cc-main .cm .cm__btn[data-role="necessary"] {
    background: #e0a956 !important;
    color: #262b32 !important;
    border: 2px solid #e0a956 !important;
}
#cc-main .cm .cm__btn[data-role="all"]:hover,
#cc-main .cm .cm__btn[data-role="necessary"]:hover {
    background: #cf9440 !important;
    border-color: #cf9440 !important;
}
/* Customize: outlined navy */
#cc-main .cm .cm__btn[data-role="show"] {
    background: #ffffff !important;
    color: #343f52 !important;
    border: 2px solid #343f52 !important;
}
#cc-main .cm .cm__btn[data-role="show"]:hover {
    background: #eceff4 !important;
    color: #262b32 !important;
    border-color: #262b32 !important;
}
#cc-main .cm .cm__btn:focus-visible,
#cc-main .pm .pm__btn:focus-visible {
    outline: 3px solid #343f52 !important;
    outline-offset: 2px !important;
}

/* Mobile: text above, all three buttons in ONE row. The two library button groups dissolve
   (display: contents), each button starts at its label width and the free width is shared 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__title,
    #cc-main .cm.cm--bar .cm__title,
    #cc-main .cm.cm--bar.cm--inline .cm__title {
        font-size: 17px;
    }
    #cc-main .cm__desc,
    #cc-main .cm.cm--bar .cm__desc,
    #cc-main .cm.cm--bar.cm--inline .cm__desc {
        font-size: 15px;
        line-height: 1.5;
    }
    #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.5vw, 14px) !important;
        line-height: 1.2 !important;
        white-space: normal !important;
        text-align: center !important;
        margin: 0 !important;
        border-radius: 50px !important;
    }
}

/* Very narrow phones (320px class): bold THICCCBOI labels need 251px at 11.5px, so trim the chrome
   around them. Measured: with this block all three labels stay on one line at 320px. */
@media (max-width: 340px) {
    #cc-main .cm__body,
    #cc-main .cm.cm--bar .cm__body,
    #cc-main .cm.cm--bar.cm--inline .cm__body {
        padding: 14px 10px !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 {
        gap: 6px !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--"] {
        padding: 6px 2px !important;
        font-size: 11.8px !important;
    }
}

/* Preferences window */
#cc-main .pm {
    background: #ffffff;
}
#cc-main .pm__title {
    font-size: 20px;
    font-weight: 700;
    color: #262b32;
}
#cc-main .pm__section-title {
    font-size: 16px;
    font-weight: 700;
    color: #262b32;
}
#cc-main .pm__section-desc {
    font-size: 15px;
    line-height: 1.55;
    color: #3c4556;
}
#cc-main .pm__table-th,
#cc-main .pm__table-td {
    font-size: 14.5px;
    line-height: 1.45;
    color: #3c4556;
}
#cc-main .pm__table-th {
    font-weight: 700;
    color: #262b32;
}
#cc-main .pm__badge {
    font-size: 13px;
    color: #262b32;
    background: #e3e6ec;
}
#cc-main .pm__btn {
    font-family: THICCCBOI, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    min-height: 44px !important;
    border-radius: 50px !important;
}
#cc-main .pm__btn--primary {
    background: #e0a956 !important;
    border-color: #e0a956 !important;
    color: #262b32 !important;
}
#cc-main .pm__btn--primary:hover {
    background: #cf9440 !important;
    border-color: #cf9440 !important;
}
#cc-main .pm__btn--secondary {
    background: #ffffff !important;
    border: 2px solid #343f52 !important;
    color: #343f52 !important;
}
#cc-main .pm__btn--secondary:hover {
    background: #eceff4 !important;
    color: #262b32 !important;
}
#cc-main .pm__footer {
    font-size: 15px;
}
#cc-main .cc-link,
#cc-main .pm__section-desc a {
    color: #343f52;
    font-weight: 500;
    text-decoration: underline;
}
#cc-main .cc-link:hover,
#cc-main .pm__section-desc a:hover {
    color: #262b32;
}