/**
 * Onder Druk Custom Cookie Consent Theme
 * Perfectly matched to the website design system.
 */

#cc-main {
    /* Brand Colors */
    --brand-red: #DD4250;
    --brand-red-dark: #B12034;

    /* Base Colors & Glassmorphism (Dark by default for better contrast) */
    --cc-bg: rgba(12, 10, 9, 0.6);
    --cc-primary-color: #ffffff;
    --cc-secondary-color: rgba(255, 255, 255, 0.7);

    /* Buttons */
    --cc-btn-primary-bg: #DD4250 !important;
    /* Force variable to be overridden if possible, though !important doesn't work on variables themselves, we will use it in selectors below */
    --cc-btn-primary-color: #ffffff;
    --cc-btn-primary-hover-bg: #B12034 !important;

    /* Overlay */
    --cc-overlay-bg: rgba(0, 0, 0, 0.4);
    --cc-webkit-backdrop-filter: blur(16px);
    --cc-backdrop-filter: blur(16px);

    /* Misc */
    --cc-modal-border-radius: 1.5rem;
    --cc-btn-border-radius: 9999px;
    --cc-font-family: 'Manrope', sans-serif;
}

/* Dark Mode Overrides */
.dark #cc-main,
html[class*="dark"] #cc-main {
    --cc-bg: rgba(12, 10, 9, 0.8);
    --cc-primary-color: #f5fff9;
    --cc-secondary-color: #e1bebe;
}

/* Apply Glassmorphism & Refinements with higher specificity */
html #cc-main .cm,
html #cc-main .pm {
    background: var(--cc-bg) !important;
    backdrop-filter: var(--cc-backdrop-filter) !important;
    -webkit-backdrop-filter: var(--cc-webkit-backdrop-filter) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

html #cc-main .cm__title,
html #cc-main .pm__title {
    font-family: 'Noto Serif', serif !important;
    font-weight: 700 !important;
    color: var(--cc-primary-color) !important;
}

/* Force Button Colors to match 'Alle afleveringen' button */
html #cc-main .cm__btn,
html #cc-main .pm__btn {
    background: #DD4250 !important;
    color: #ffffff !important;
    padding: 0.875rem 2.5rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    font-weight: 400 !important;
    font-size: 0.875rem !important;
    transition: all 0.5s ease-in-out !important;
    border: none !important;
    box-shadow: 0 20px 25px -5px rgba(221, 66, 80, 0.1), 0 8px 10px -6px rgba(221, 66, 80, 0.1) !important;
}

html #cc-main .cm__btn:hover,
html #cc-main .pm__btn:hover {
    background: #B12034 !important;
    opacity: 0.9 !important;
    color: #ffffff !important;
}

/* Ensure secondary buttons (like 'Reject') share the same weight and style */
html #cc-main .cm__btn--secondary,
html #cc-main .pm__btn--secondary {
    background: #DD4250 !important;
    color: #ffffff !important;
    padding: 0.875rem 2.5rem !important;
    letter-spacing: 0.1em !important;
    font-weight: 400 !important;
    font-size: 0.875rem !important;
    transition: all 0.5s ease-in-out !important;
    box-shadow: 0 20px 25px -5px rgba(221, 66, 80, 0.1), 0 8px 10px -6px rgba(221, 66, 80, 0.1) !important;
}

html #cc-main .cm__btn--secondary:hover,
html #cc-main .pm__btn--secondary:hover {
    background: #B12034 !important;
    opacity: 0.9 !important;
    color: #ffffff !important;
    transform: none !important;
}

html #cc-main .cm__link {
    color: #DD4250 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

html #cc-main .cm__link:hover {
    text-decoration: underline !important;
}

/* Fixing the titles and text for dark background */
html #cc-main {
    --cc-primary-color: #ffffff !important;
    --cc-btn-primary-bg: #DD4250 !important;
    --cc-link-color: #DD4250 !important;
}

/* Hide ONLY the Manage Preferences button */
html #cc-main .cm__btn[data-role="show"] {
    display: none !important;
}