/* This is a new custom theme that uses your existing CSS variables.
  It will automatically adapt to your light and dark modes.
*/

.cc--darkmode {
    color-scheme: dark;

    --cc-bg: #2F0A61;
    --cc-primary-color: #F7EFFF;
    --cc-secondary-color: #b99dd6;

    --cc-btn-primary-bg: #6C3BAA;
    --cc-btn-primary-color: #F7EFFF;
    --cc-btn-primary-hover-bg: #6C3BAA;
    --cc-btn-primary-hover-color: #F7EFFF;

    --cc-btn-secondary-bg: #F7EFFF;
    --cc-btn-secondary-color: #2F0A61;
    --cc-btn-secondary-hover-bg: #6C3BAA;
    --cc-btn-secondary-hover-color: #F7EFFF;

    --cc-cookie-category-block-bg: #2F0A61;
    --cc-cookie-category-block-border: #ffefef;
    --cc-cookie-category-block-hover-bg: #6C3BAA;
    --cc-cookie-category-block-hover-border: #F7EFFF;
    --cc-cookie-category-expanded-block-hover-bg: #6C3BAA;
    --cc-cookie-category-expanded-block-bg: #2F0A61;
    --cc-toggle-readonly-bg: #F7EFFF;
     --cc-overlay-bg: rgba(8, 4, 4, 0.3)!important;

    --cc-toggle-on-knob-bg: #F7EFFF;
    --cc-toggle-readonly-knob-bg: #F7EFFF;

    --cc-separator-border-color: #F7EFFF;

    --cc-footer-border-color: #F7EFFF;
    --cc-footer-bg: #120f0f;
}
.cc--brand-theme {
    /* General Colors */
    font-family: 'Roboto', sans-serif;
    --cc-bg: var(--bg-color);
    --cc-primary-color: var(--text-color);
    --cc-secondary-color: var(--text-color);
    --cc-separator-border-color: var(--card-border);

    /* Primary Button (Accept All) */
    --cc-btn-primary-bg: var(--button-bg);
    --cc-btn-primary-color: var(--button-text-color);
    --cc-btn-primary-hover-bg: var(--button-hover-color);
    --cc-btn-primary-hover-color: var(--button-bg);

    /* Secondary Button (Reject, Preferences) */
    --cc-btn-secondary-bg: transparent;
    --cc-btn-secondary-color: var(--text-color);
    --cc-btn-secondary-border-color: var(--card-border);
    --cc-btn-secondary-hover-bg: var(--card-border);
    --cc-btn-secondary-hover-color: var(--bg-color);
    --cc-btn-secondary-hover-border-color: var(--card-border);
    
    /* Overlay background */
    --cc-overlay-bg: rgba(0, 0, 0, 0.6);

    /* Use your established border radius */
    --cc-btn-border-radius: 24px;
    --cc-modal-border-radius: 24px;
    --cc-pm-toggle-border-radius: 24px;
}

#cc-main .cc__link {
  color: var(--button-text-color);
}

/* FIX: Style the Preferences Modal to look like the TOC Overlay */
.cc--brand-theme .pm--box.pm--left {
    /* Positioning & Sizing */
    position: fixed;
    top: 50%;
    left: 0;
    transform: translate(-110%, -50%); /* Start off-screen */
    width: 90%; /* Good for mobile */
    max-width: 500px; /* Max width on desktop */
    max-height: 80vh;
    z-index: 1060;
    
    /* Appearance */
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 24px;
    box-shadow: 0px 4px 4px var(--shadow-color);

    /* Layout & Transition */
    display: flex;
    flex-direction: column;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* This class is added by our JS to show the modal */
.cc--brand-theme .pm--box.pm--left.active {
    transform: translate(28px, -50%); /* Slide in */
}

/* FIX: Style for Feather Icons inside the cookie banner */
.cc--brand-theme [data-feather] {
    width: 20px;
    height: 20px;
    stroke-width: 2;
    /* This makes the icon color follow the theme's text color */
    color: var(--cc-primary-color) !important; 
    vertical-align: middle;
}

/* Style for the close button */
.cc--brand-theme .pm__close-btn {
    padding: 4px;
}