/*
 *  @author Simonchik <alexandr.simonchik@gmail.com>
 *  @Copyright
 *
 *  Masculan skin for CookieConsent v3 — matches the approved prototype:
 *  dark banner with a red accent edge, lime "accept all", red "reject optional",
 *  outline "customize", square buttons, red / black-locked toggles.
 *  Loaded AFTER the library CSS so these overrides win.
 */

#cc-main {
    --cc-font-family: inherit;
    --cc-btn-border-radius: 0;
    --cc-modal-border-radius: 0;
    --cc-pm-toggle-border-radius: 0;
    --cc-link-color: #c5001d;
    --cc-overlay-bg: rgba(0, 0, 0, .42);

    /* Toggles: red when on, solid black when locked (necessary), grey when off. */
    --cc-toggle-on-bg: #c5001d;
    --cc-toggle-off-bg: #cfd4dc;
    --cc-toggle-on-knob-bg: #ffffff;
    --cc-toggle-off-knob-bg: #ffffff;
    --cc-toggle-readonly-bg: #050b14;
    --cc-toggle-readonly-knob-bg: #ffffff;
    --cc-toggle-enabled-icon-color: #c5001d;
    --cc-toggle-disabled-icon-color: #cfd4dc;
}

/* ---------- Consent modal (first-layer banner) ---------- */
#cc-main .cm {
    background: #050b14;
    color: #ffffff;
    border-radius: 0;
    border-left: 18px solid #c5001d;
    box-shadow: 0 28px 90px rgba(0, 0, 0, .35);
}
#cc-main .cm__title {
    color: #ffffff;
    font-weight: 800;
    letter-spacing: -.01em;
}
#cc-main .cm__desc {
    color: #d9dde4;
}
#cc-main .cm__desc a,
#cc-main .cm a {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

#cc-main .cm__btn {
    border-radius: 0;
    font-weight: 800;
    min-height: 60px;
    font-size: 17px;
}
#cc-main .cm__btn + .cm__btn,
#cc-main .cm__btn-group + .cm__btn-group {
    margin-top: 12px;
}
#cc-main .cm__btn[data-role="all"] {
    background: #dcff18;
    color: #071019;
    border-color: #dcff18;
}
#cc-main .cm__btn[data-role="all"]:hover {
    background: #c9ec00;
    border-color: #c9ec00;
    color: #071019;
}
#cc-main .cm__btn[data-role="necessary"] {
    background: #c5001d;
    color: #ffffff;
    border-color: #c5001d;
}
#cc-main .cm__btn[data-role="necessary"]:hover {
    background: #a80018;
    border-color: #a80018;
    color: #ffffff;
}
#cc-main .cm__btn[data-role="show"] {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, .52);
}
#cc-main .cm__btn[data-role="show"]:hover {
    background: rgba(255, 255, 255, .10);
    color: #ffffff;
}

/* Prototype = contained two-column "cloud" banner pinned to the bottom (text left, buttons right). */
#cc-main .cm--cloud {
    max-width: 1230px;
}
#cc-main .cm--cloud .cm__desc {
    max-height: none; /* show the full copy: two paragraphs + the sensitive note */
}
#cc-main .cm--cloud .cm__btns {
    border-left: none; /* the prototype has no divider between text and the button column */
    justify-content: flex-end; /* anchor the buttons to the bottom-right (prototype align-items:end) so the tall title never sits next to them */
    max-width: 390px; /* prototype button column width */
}
#cc-main .cm__title {
    font-size: 49px;
    line-height: .92;
    letter-spacing: -2.4px;
    margin-bottom: 20px;
}

/* Lime uppercase eyebrow above the title (rendered as HTML inside the title). */
#cc-main .cm-eyebrow {
    display: block;
    color: #dcff18;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 15px;
    line-height: 1.2;
}

/* Mobile (matches the library's own 640px collapse to a single column). The prototype turns the red
   left band into a thin top bar, shrinks the title, and lets the long copy scroll so the banner fits
   the screen instead of overflowing off the top. */
@media (max-width: 640px) {
    #cc-main .cm {
        border-left: none;
        border-top: 8px solid #c5001d;
    }
    #cc-main .cm__title {
        font-size: 34px;
        letter-spacing: -1.2px;
        margin-bottom: 16px;
    }
    #cc-main .cm--cloud .cm__desc {
        max-height: 42vh; /* re-enable scroll (the desktop rule removed it) so the tall copy fits */
        overflow-y: auto;
    }
    #cc-main .cm__btn {
        min-height: 52px;
    }
    #cc-main .cm__btns .cm-micro {
        margin-top: 10px;
    }
}

/* The library resets inner elements with `all: unset` (so <p>/<div> render inline with no margins).
   Restore block flow + spacing for our custom description markup, otherwise the paragraphs run together. */
#cc-main .cm__desc p {
    display: block;
    font-size: 16px;
    line-height: 1.45;
    margin: 0 0 16px;
}
#cc-main .cm__desc p:last-child {
    margin-bottom: 0;
}

/* Sensitive-data note with a lime left border (prototype). */
#cc-main .cm-sensitive {
    display: block;
    border-left: 4px solid #dcff18;
    padding-left: 17px;
    margin: 18px 0;
    color: #ffffff;
    font-size: 15px;
    line-height: 1.45;
}
#cc-main .cm__desc .cm-details {
    display: block;
    margin: 16px 0 0;
}

/* Micro note under the button column (prototype). Injected into .cm__btns by the init script. */
#cc-main .cm__btns .cm-micro {
    display: block;
    color: #a9b0bb;
    font-size: 12px;
    line-height: 1.35;
    margin-top: 13px;
}

/* ---------- Preferences modal (second layer) ---------- */
#cc-main .pm {
    border-radius: 0;
}
#cc-main .pm__title {
    font-weight: 800;
    letter-spacing: -.01em;
}
#cc-main .pm__section-title {
    font-weight: 700;
}
#cc-main .pm__btn {
    border-radius: 0;
    font-weight: 800;
}
#cc-main .pm__btn[data-role="save"] {
    background: #050b14;
    color: #ffffff;
    border-color: #050b14;
}
#cc-main .pm__btn[data-role="save"]:hover {
    background: #1a2230;
    border-color: #1a2230;
}
#cc-main .pm__btn[data-role="all"] {
    background: #dcff18;
    color: #071019;
    border-color: #dcff18;
}
#cc-main .pm__btn[data-role="all"]:hover {
    background: #c9ec00;
    border-color: #c9ec00;
}
#cc-main .pm__btn[data-role="necessary"] {
    background: #c5001d;
    color: #ffffff;
    border-color: #c5001d;
}
#cc-main .pm__btn[data-role="necessary"]:hover {
    background: #a80018;
    border-color: #a80018;
}