/*
 * Honeybot overrides for vanilla-cookieconsent v3.
 *
 * Goals:
 *   - Honeybot orange-to-pink gradient on the primary (Accept all) button.
 *   - Equal visual prominence for Reject all (GDPR requirement).
 *   - Solid (non-transparent) backgrounds in both light and dark mode.
 *   - Banner positioned bottom-right, 420px max, above #hb-chat-input-offset.
 *   - z-index above every other site element (age gate uses 10000).
 */

/* ---- z-index: above the age gate (10000) and every other site chrome ---- */
#cc-main {
    --cc-z-index: 10001;
}

#cc-main .cm-wrapper,
#cc-main .pm-wrapper {
    z-index: 10001;
}

#cc-main .pm-wrapper {
    z-index: 10002;
}

/* The library uses a `.show--consent` / `.show--preferences` state on a root wrapper.
 * Force a safe, very-high z-index on the whole consent root for defense in depth. */
#cc-main,
#cc-main * {
    /* Keep the stacking context inside #cc-main. */
}

/* ---- Light-mode palette (default) -------------------------------------- */
:root {
    --cc-bg: #ffffff;
    --cc-primary-color: #121316;
    --cc-secondary-color: #4b4f58;
    --cc-btn-primary-bg: #FF36F7;             /* fallback if gradient not supported */
    --cc-btn-primary-color: #ffffff;
    --cc-btn-primary-border-color: transparent;
    --cc-btn-primary-hover-bg: #FF36F7;
    --cc-btn-primary-hover-color: #ffffff;
    --cc-btn-primary-hover-border-color: transparent;
    --cc-btn-secondary-bg: #eef0f3;
    --cc-btn-secondary-color: #121316;
    --cc-btn-secondary-border-color: #d6d9df;
    --cc-btn-secondary-hover-bg: #e2e5ea;
    --cc-btn-secondary-hover-color: #121316;
    --cc-btn-secondary-hover-border-color: #c6cad1;
    --cc-separator-border-color: #e5e7eb;
    --cc-cookie-category-block-bg: #f7f8fa;
    --cc-cookie-category-block-border: #e5e7eb;
    --cc-cookie-category-block-hover-bg: #eef0f3;
    --cc-cookie-category-block-hover-border: #d6d9df;
    --cc-cookie-category-expanded-block-bg: #f2f3f5;
    --cc-cookie-category-expanded-block-hover-bg: #eaecef;
    --cc-toggle-on-bg: #FF36F7;
    --cc-toggle-off-bg: #9aa0ab;
    --cc-toggle-on-knob-bg: #ffffff;
    --cc-toggle-off-knob-bg: #ffffff;
    --cc-toggle-readonly-bg: #c8ccd3;
    --cc-toggle-readonly-knob-bg: #ffffff;
    --cc-link-color: #B918B0;
    --cc-footer-bg: #f7f8fa;
    --cc-footer-color: #4b4f58;
    --cc-footer-border-color: #e5e7eb;
    --cc-overlay-bg: rgba(0, 0, 0, 0.45);
    --cc-modal-border-radius: 16px;
    --cc-btn-border-radius: 10px;
    --cc-pm-toggle-border-radius: 999px;
}

/* ---- Dark-mode palette -------------------------------------------------- */
/* dark_mode.js toggles `.dark` on :root. */
:root.dark {
    --cc-bg: #1a1a1c;
    --cc-primary-color: #f5f5f7;
    --cc-secondary-color: #b4b7bf;
    --cc-btn-primary-bg: #FF36F7;
    --cc-btn-primary-color: #ffffff;
    --cc-btn-primary-border-color: transparent;
    --cc-btn-primary-hover-bg: #FF36F7;
    --cc-btn-primary-hover-color: #ffffff;
    --cc-btn-primary-hover-border-color: transparent;
    --cc-btn-secondary-bg: #2a2b2f;
    --cc-btn-secondary-color: #f5f5f7;
    --cc-btn-secondary-border-color: #3a3b40;
    --cc-btn-secondary-hover-bg: #343539;
    --cc-btn-secondary-hover-color: #ffffff;
    --cc-btn-secondary-hover-border-color: #4a4b50;
    --cc-separator-border-color: #2e2f34;
    --cc-cookie-category-block-bg: #232428;
    --cc-cookie-category-block-border: #32343a;
    --cc-cookie-category-block-hover-bg: #2a2b30;
    --cc-cookie-category-block-hover-border: #3a3b40;
    --cc-cookie-category-expanded-block-bg: #1f2024;
    --cc-cookie-category-expanded-block-hover-bg: #26272b;
    --cc-toggle-on-bg: #FF36F7;
    --cc-toggle-off-bg: #55585f;
    --cc-toggle-on-knob-bg: #ffffff;
    --cc-toggle-off-knob-bg: #d8dadf;
    --cc-toggle-readonly-bg: #3a3b40;
    --cc-toggle-readonly-knob-bg: #b4b7bf;
    --cc-link-color: #FFBA2F;
    --cc-footer-bg: #202124;
    --cc-footer-color: #b4b7bf;
    --cc-footer-border-color: #2e2f34;
    --cc-overlay-bg: rgba(0, 0, 0, 0.65);
}

/* ---- Solid background enforcement (no glassy transparency) -------------- */
#cc-main .cm,
#cc-main .pm {
    background: var(--cc-bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ---- Banner: 420px cap, positioned with chat-input offset --------------- */
#cc-main .cm--cloud {
    max-width: 420px;
    width: calc(100vw - 32px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

/* Library default for cloud: .cm__body = row (text + button column).
 * At 420px that squeezes the text. Stack text above buttons, buttons in one row. */
#cc-main .cm--cloud .cm__body {
    flex-direction: column !important;
    gap: 16px;
}

#cc-main .cm--cloud .cm__texts {
    flex: 1 1 auto;
    min-width: 0;
}

#cc-main .cm--cloud .cm__btns {
    flex-direction: column !important;
    gap: 8px;
    min-width: 0;
    width: 100%;
}

/* row-reverse: puts Accept all on the right, Reject all on the left.
 * Mobile right-thumb reach favors the primary action on the right. */
#cc-main .cm--cloud .cm__btn-group {
    display: flex !important;
    flex-direction: row-reverse !important;
    justify-content: center !important;
    gap: 10px;
    width: 100%;
    flex-wrap: nowrap;
}

/* Center the whole buttons column (buttons row + "Cookie preferences" link). */
#cc-main .cm--cloud .cm__btns {
    align-items: center !important;
    text-align: center;
}

/* Override the library's default corner inset so it honors the chat input offset. */
#cc-main .cm-wrapper {
    bottom: calc(var(--hb-chat-input-offset, 0px) + 24px + env(safe-area-inset-bottom)) !important;
    right: 24px !important;
    left: auto !important;
}

@media (max-width: 640px) {
    #cc-main .cm-wrapper {
        left: 16px !important;
        right: 16px !important;
    }
    #cc-main .cm--cloud {
        max-width: none;
        width: auto;
    }
}

/* ---- Primary button: honeybot orange-to-pink gradient ------------------- */
/* v3.1.0 uses data-role="all" / "necessary" / "save" / "accept" / "show". */
#cc-main .cm__btn[data-role="all"],
#cc-main .pm__btn[data-role="all"],
#cc-main .pm__btn[data-role="save"],
#cc-main .pm__btn[data-role="accept"] {
    background-image: linear-gradient(to right, #FFBA2F, #FF36F7, #FFBA2F, #FF36F7) !important;
    background-size: 300% 100% !important;
    background-color: transparent !important;
    color: #ffffff !important;
    border: none !important;
    transition: background-position 0.4s ease-in-out, transform 0.1s ease-in-out !important;
    font-weight: 600 !important;
}

#cc-main .cm__btn[data-role="all"]:hover,
#cc-main .pm__btn[data-role="all"]:hover,
#cc-main .pm__btn[data-role="save"]:hover,
#cc-main .pm__btn[data-role="accept"]:hover {
    background-position: 50% 0 !important;
    color: #ffffff !important;
}

/* ---- GDPR equal-prominence: Reject = Accept size & weight --------------- */
#cc-main .cm__btns,
#cc-main .pm__btns {
    gap: 10px;
}

#cc-main .cm__btn-group,
#cc-main .pm__btn-group {
    display: flex;
    flex-direction: row-reverse;
    gap: 10px;
    flex-wrap: nowrap;
}

#cc-main .cm__btn,
#cc-main .pm__btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    font-weight: 600 !important;
    padding: 10px 16px !important;
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
}

/* Reject (secondary) fills the row with solid weight equal to accept — no ghost look. */
#cc-main .cm__btn[data-role="necessary"],
#cc-main .pm__btn[data-role="necessary"] {
    background: var(--cc-btn-secondary-bg) !important;
    color: var(--cc-btn-secondary-color) !important;
    border: 1px solid var(--cc-btn-secondary-border-color) !important;
}

#cc-main .cm__btn[data-role="necessary"]:hover,
#cc-main .pm__btn[data-role="necessary"]:hover {
    background: var(--cc-btn-secondary-hover-bg) !important;
    color: var(--cc-btn-secondary-hover-color) !important;
    border-color: var(--cc-btn-secondary-hover-border-color) !important;
}

/* "Cookie preferences" (tertiary) — keep as underlined text link, de-emphasised. */
#cc-main .cm__btn[data-role="show"] {
    background: transparent !important;
    color: var(--cc-secondary-color) !important;
    border: none !important;
    font-weight: 500 !important;
    text-decoration: underline;
    flex: 0 0 auto;
    padding: 6px 8px !important;
}

#cc-main .cm__btn[data-role="show"]:hover {
    color: var(--cc-primary-color) !important;
    background: transparent !important;
}

/* ---- Preferences modal polish ------------------------------------------ */
#cc-main .pm {
    max-width: 540px;
}

/* Preferences modal: dock at the BOTTOM of the page on all screens instead of
 * the library's default full-height right-side sheet. We directly override the
 * .pm-level position/transform because the library's .pm--bar rules set
 * top:0; bottom:0; height:100% with high specificity. */
#cc-main .pm {
    position: fixed !important;
    top: auto !important;
    bottom: 16px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(540px, calc(100vw - 32px)) !important;
    max-width: min(540px, calc(100vw - 32px)) !important;
    height: auto !important;
    max-height: 85vh !important;
    margin: 0 !important;
    border-radius: 16px !important;
}

/* Neutralize the library's slide-in animation transforms so our centered
 * position sticks. Keeps opacity/visibility transitions untouched. */
#cc-main.cc--anim .pm--bar,
#cc-main.cc--anim .pm--box {
    transform: translateX(-50%) !important;
}

/* Mobile: flush to the bottom edge, full width, rounded top only. */
@media (max-width: 640px) {
    #cc-main .pm {
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 16px 16px 0 0 !important;
    }
    #cc-main.cc--anim .pm--bar,
    #cc-main.cc--anim .pm--box {
        transform: none !important;
    }
}

#cc-main .pm__section {
    background: var(--cc-cookie-category-block-bg);
    border: 1px solid var(--cc-cookie-category-block-border);
    border-radius: 10px;
}

/* ---- Inline link style inside consent copy ------------------------------ */
#cc-main .cc__link {
    color: var(--cc-link-color);
    text-decoration: underline;
}

#cc-main .cc__link:hover {
    text-decoration: none;
}