/**
 * CookieConsent v3 — Custom styles matching Topgordijnen design system
 *
 * Colors:   #1f1a1a (primary), #200E0E (CTA), #B76E79 (accent), #ece4e1 (border), #fde3d6 (cream text)
 * Fonts:    Barlow Condensed (headings), Inter (body/buttons)
 * Radius:   4px
 */

/* -------------------------
   Consent Modal (banner)
   ------------------------- */
#cc-main .cm {
    font-family: 'Inter', sans-serif;
    border-radius: 4px;
    border: 1px solid #ece4e1;
    box-shadow: 0 4px 24px rgba(31, 26, 26, 0.12);
    max-width: 420px;
}

#cc-main .cm__title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.25px;
    color: #1f1a1a;
    font-size: 24px;
    padding-top: 4px;
}

#cc-main .cm__desc {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #1f1a1a;
}

#cc-main .cm__btn,
#cc-main .pm__btn {
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-weight: 500 !important;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 16px 24px;
    transition: background-color 0.2s;
}

/* Primary button: Alles accepteren */
#cc-main .cm__btn:first-child,
#cc-main .pm__btn:first-child {
    background: #200E0E;
    color: #fde3d6;
    border: none;
}

#cc-main .cm__btn:first-child:hover,
#cc-main .pm__btn:first-child:hover {
    background: #3a1e1f;
}

/* Secondary button: Alles weigeren */
#cc-main .cm__btn:last-child,
#cc-main .pm__btn:nth-child(2),
#cc-main .pm__btn.pm__btn--secondary {
    background: #ffffff;
    color: #1f1a1a;
    border: 1px solid #ECE4E1;
}

#cc-main .cm__btn:last-child:hover,
#cc-main .pm__btn:nth-child(2):hover,
#cc-main .pm__btn.pm__btn--secondary:hover {
    background: #1f1a1a;
    color: #fde3d6;
}

/* Tertiary link: Voorkeuren beheren */
#cc-main .cm__btn--secondary {
    background: transparent;
    color: #B76E79;
    border: none;
}

#cc-main .cm__btn--secondary:hover {
    color: #a35d68;
    background: transparent;
}

/* -------------------------
   Preferences Modal
   ------------------------- */
#cc-main .pm {
    font-family: 'Inter', sans-serif;
    border-radius: 4px;
}

#cc-main .pm__title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.04px;
    color: #1f1a1a;
    font-size: 24px;
}

#cc-main .pm__section-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1f1a1a;
    font-size: 16px;
}

#cc-main .pm__section-desc,
#cc-main .pm__section-desc a {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #1f1a1a;
}

#cc-main .pm__section-desc a {
    color: #B76E79;
    text-decoration: underline;
    text-underline-offset: 3px;
}

#cc-main .pm__section-desc a:hover {
    color: #a35d68;
}

/* Save preferences button */
#cc-main .pm__btn {
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 24px;
}

/* Section dividers */
#cc-main .pm__section {
    border-color: #ece4e1;
}

/* -------------------------
   Toggle switch — accent rose
   ------------------------- */
#cc-main .section__toggle .toggle__icon {
    border-radius: 100px;
}

/* Toggle ON state */
#cc-main .toggle__icon-on {
    background: #B76E79;
    border-radius: 100px;
}

#cc-main .section__toggle input:checked + .toggle__icon {
    background: #B76E79;
    border-radius: 100px;
}

/* Toggle OFF state */
#cc-main .section__toggle .toggle__icon {
    background: #ece4e1;
}

/* Read-only toggle (necessary cookies) */
#cc-main .section__toggle input:disabled + .toggle__icon {
    background: #B76E79;
    opacity: 0.6;
}

#cc-main .toggle__icon-on svg {
    stroke: #fff !important;
}

/* -------------------------
   Close button
   ------------------------- */
#cc-main .pm__close-btn {
    border-radius: 4px;
    color: #1f1a1a;
}

#cc-main .pm__close-btn:hover {
    background: #ece4e1;
}

/* -------------------------
   Overlay
   ------------------------- */
#cc-main .cm--overlay,
#cc-main .pm--overlay {
    background: rgba(31, 26, 26, 0.4);
}