/*
 * Cookie banner override — ConsentStudio (geladen via GTM container GTM-5JDX6W23).
 *
 * ConsentStudio gebruikt eigen class-namen (consent-banner, cookie-banner,
 * consent-studio__*, cs-* attributen) — niet CookieYes/Cookiebot.
 *
 * KLEUREN (Lightr huisstijl):
 *   --color-primary       #00E6BF  (mintgroen — primary CTA: Accept all)
 *   --color-primary-dark  #00C4A3  (hover)
 *   --color-dark          #081245  (donker navy — secondary actie)
 *   --color-border        #d8dde8
 *
 * Bij toekomstige ConsentStudio updates kan een class veranderen — deze CSS
 * deels stoppen met werken. Inspecteer dan de DOM en pas selectors aan.
 */

/* === Container (kaart) === */
.consent-banner.cookie-banner {
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(8, 18, 69, .15) !important;
    border: 1px solid var(--color-border, #d8dde8) !important;
    font-family: 'Montserrat', sans-serif !important;
}

/* === Header (titel + Overview knop) === */
.consent-studio__heading {
    color: var(--color-dark, #081245) !important;
    font-weight: 700 !important;
}
.consent-studio__action {
    background: #fff !important;
    color: var(--color-dark, #081245) !important;
    border: 1px solid var(--color-border, #d8dde8) !important;
    border-radius: 6px !important;
    transition: background .15s ease !important;
}
.consent-studio__action:hover {
    background: var(--color-bg, #f3f3f3) !important;
}

/* === Body tekst === */
.cookie-banner__body__p,
.cookie-banner__body__p p {
    color: #4a5568 !important;
}

/* === Privacy policy link === */
.cookie-banner__body__p a,
.cookie-banner a {
    color: var(--color-primary-dark, #00C4A3) !important;
    text-decoration: underline !important;
}
.cookie-banner__body__p a:hover,
.cookie-banner a:hover {
    color: var(--color-dark, #081245) !important;
}

/* === Categorie-labels (Functional / Analytics / Marketing) === */
.cookie-banner__consent__label {
    color: var(--color-dark, #081245) !important;
    font-weight: 600 !important;
}

/* === Toggle switches === */
/* Container achter de slider — paarse achtergrond was hier */
.cookie-banner__switch .cookie-banner__slider {
    background-color: #d1d5db !important; /* uit-stand: grijs */
    transition: background-color .2s !important;
}
/* Aan-stand: mintgroen */
.cookie-banner__switch[aria-checked="true"] .cookie-banner__slider,
.cookie-banner__switch input[type="checkbox"]:checked + .cookie-banner__slider {
    background-color: var(--color-primary, #00E6BF) !important;
}
/* Disabled toggles (Functional verplicht) — iets lichter grijs */
.cookie-banner__switch[aria-disabled="true"] .cookie-banner__slider {
    opacity: .6 !important;
    cursor: not-allowed !important;
}

/* === Buttons (alle 3) — basis === */
.consent-buttons button {
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: background .15s ease, border-color .15s ease !important;
    border: none !important;
}

/* === Primary: Accept all (mintgroen) === */
.consent-buttons button[cs-consent="all"],
.consent-buttons button[data-cs-button="accept_all"] {
    background: var(--color-primary, #00E6BF) !important;
    color: var(--color-dark, #081245) !important;
    font-weight: 700 !important;
}
.consent-buttons button[cs-consent="all"]:hover,
.consent-buttons button[data-cs-button="accept_all"]:hover {
    background: var(--color-primary-dark, #00C4A3) !important;
}

/* === Secondary: Accept Selection (mint outline — softere variant van primary) === */
.consent-buttons button[cs-consent="selection"],
.consent-buttons button[data-cs-button="save"] {
    background: #fff !important;
    color: var(--color-primary-dark, #00C4A3) !important;
    border: 2px solid var(--color-primary, #00E6BF) !important;
    font-weight: 600 !important;
}
.consent-buttons button[cs-consent="selection"]:hover,
.consent-buttons button[data-cs-button="save"]:hover {
    background: rgba(0, 230, 191, .08) !important;
    color: var(--color-dark, #081245) !important;
}

/* === Tertiary: Reject all (ghost: wit met rand) === */
.consent-buttons button[cs-consent="reject"],
.consent-buttons button[data-cs-button="reject_all"] {
    background: #fff !important;
    color: var(--color-dark, #081245) !important;
    border: 1.5px solid var(--color-border, #d8dde8) !important;
}
.consent-buttons button[cs-consent="reject"]:hover,
.consent-buttons button[data-cs-button="reject_all"]:hover {
    background: var(--color-bg, #f3f3f3) !important;
    border-color: var(--color-dark, #081245) !important;
}