/* ==========================================================================
   COMPLIANZ COOKIE BANNER — THEME OVERRIDES
   Restyled to match the 3D Nexus Creations design system.
   Loaded from the theme — survives plugin updates.
   ========================================================================== */


/* ── Override Complianz CSS variables to match design tokens ── */
:root {
    --cmplz_banner_background_color: var(--nx-surface);
    --cmplz_banner_border_color: var(--nx-border);
    --cmplz_banner_border_width: 1px;
    --cmplz_banner_border_radius: var(--nx-radius-lg);
    --cmplz_banner_margin: var(--nx-space-sm);
    --cmplz_title_font_size: var(--nx-text-lg);
    --cmplz_text_font_size: var(--nx-text-sm);
    --cmplz_text_color: var(--nx-text);
    --cmplz_hyperlink_color: var(--nx-color-primary);
    --cmplz_button_border_radius: var(--nx-radius-pill);
    --cmplz_button_font_size: var(--nx-text-sm);

    /* Accept button — will be overridden with gradient below */
    --cmplz_button_accept_background_color: var(--nx-color-cta-start);
    --cmplz_button_accept_border_color: transparent;
    --cmplz_button_accept_text_color: var(--nx-text-on-cta);

    /* Deny / Necessary Only button */
    --cmplz_button_deny_background_color: var(--nx-surface);
    --cmplz_button_deny_border_color: var(--nx-border);
    --cmplz_button_deny_text_color: var(--nx-text);

    /* Settings / Preferences button */
    --cmplz_button_settings_background_color: var(--nx-surface);
    --cmplz_button_settings_border_color: var(--nx-border);
    --cmplz_button_settings_text_color: var(--nx-text);

    /* Slider / toggles */
    --cmplz_slider_active_color: var(--nx-color-cta-start);
    --cmplz_slider_inactive_color: var(--nx-color-silver);
    --cmplz_slider_bullet_color: #fff;

    /* Category headers */
    --cmplz_category_header_always_active_color: var(--nx-status-success);
    --cmplz_category_header_title_font_size: var(--nx-text-base);
    --cmplz_category_header_active_font_size: var(--nx-text-xs);
}


/* ── Banner container ── */
.cmplz-cookiebanner {
    font-family: var(--nx-font-body);
    box-shadow: var(--nx-shadow-lg);
    padding: var(--nx-space-lg);
    max-width: 640px;

    /* Force slider colours at banner level to override inline styles */
    --cmplz_slider_active_color: var(--nx-status-success) !important;
    --cmplz_slider_inactive_color: var(--nx-color-silver) !important;
    --cmplz_slider_bullet_color: #fff !important;
}


/* ── Title ── */
.cmplz-cookiebanner .cmplz-title {
    font-family: var(--nx-font-heading);
    font-weight: var(--nx-weight-bold);
    color: var(--nx-text);
}


/* ── Message text ── */
.cmplz-cookiebanner .cmplz-message {
    font-family: var(--nx-font-body);
    color: var(--nx-text-muted);
    line-height: var(--nx-leading-normal);
    margin-bottom: var(--nx-space-sm);
}

.cmplz-cookiebanner .cmplz-message a {
    color: var(--nx-color-primary);
    text-decoration: underline;
    font-weight: var(--nx-weight-medium);
}

.cmplz-cookiebanner .cmplz-message a:hover {
    color: var(--nx-color-primary-light);
}


/* ── Buttons — shared base ── */
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
    font-family: var(--nx-font-heading);
    font-weight: var(--nx-weight-bold);
    font-size: var(--nx-text-sm);
    border-radius: var(--nx-radius-pill);
    padding: 10px 24px;
    height: auto;
    min-height: 40px;
    cursor: pointer;
    transition: transform var(--nx-ease-base), box-shadow var(--nx-ease-base), border-color var(--nx-ease-base), color var(--nx-ease-base), background var(--nx-ease-base);
    text-decoration: none;
    line-height: var(--nx-leading-snug);
}


/* ── Accept All — gradient CTA ── */
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept {
    background: var(--nx-gradient-cta);
    border: none;
    color: var(--nx-text-on-cta);
    box-shadow: var(--nx-shadow-cta);
}

.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover {
    transform: translateY(-2px);
    box-shadow: var(--nx-shadow-cta-hover);
}


/* ── Deny / Necessary Only — secondary outline ── */
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny {
    background: var(--nx-surface);
    border: 2px solid var(--nx-border);
    color: var(--nx-text);
}

.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover {
    border-color: var(--nx-color-primary-light);
    color: var(--nx-color-primary);
}


/* ── Preferences / Settings — secondary outline ── */
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences,
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences,
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-manage-options {
    background: var(--nx-surface);
    border: 2px solid var(--nx-border);
    color: var(--nx-text);
}

.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover,
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences:hover,
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-manage-options:hover {
    border-color: var(--nx-color-primary-light);
    color: var(--nx-color-primary);
}


/* ── Links row ── */
.cmplz-cookiebanner .cmplz-links {
    font-family: var(--nx-font-body);
    font-size: var(--nx-text-xs);
}

.cmplz-cookiebanner .cmplz-links a {
    color: var(--nx-text-muted);
    text-decoration: underline;
}

.cmplz-cookiebanner .cmplz-links a:hover {
    color: var(--nx-color-primary);
}


/* ── Close button ── */
.cmplz-cookiebanner .cmplz-close {
    color: var(--nx-text-muted);
}

.cmplz-cookiebanner .cmplz-close:hover {
    color: var(--nx-text);
}


/* ── Divider ── */
.cmplz-cookiebanner .cmplz-divider {
    border-color: var(--nx-border);
}


/* ── Categories / Preferences panel ── */
.cmplz-cookiebanner .cmplz-categories {
    font-family: var(--nx-font-body);
}

.cmplz-cookiebanner .cmplz-categories .cmplz-category {
    border-color: var(--nx-border);
    border-radius: var(--nx-radius-sm);
    overflow: hidden;
}

.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header {
    font-family: var(--nx-font-heading);
    font-weight: var(--nx-weight-semibold);
    padding: var(--nx-space-sm) var(--nx-space-md);
}

.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active {
    font-family: var(--nx-font-body);
    font-size: var(--nx-text-xs);
    color: var(--nx-status-success);
    font-weight: var(--nx-weight-semibold);
}

.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-description {
    font-family: var(--nx-font-body);
    font-size: var(--nx-text-sm);
    color: var(--nx-text-muted);
    padding: var(--nx-space-xs) var(--nx-space-md) var(--nx-space-sm);
    line-height: var(--nx-leading-normal);
}


/* ── Toggle switches ── */
.cmplz-cookiebanner .cmplz-banner-slider {
    background-color: var(--nx-color-silver) !important;
    transition: background-color var(--nx-ease-fast);
}

.cmplz-cookiebanner .cmplz-banner-slider input:checked + .cmplz-round {
    background-color: var(--nx-status-success) !important;
}

.cmplz-cookiebanner input:checked + .cmplz-banner-slider,
.cmplz-cookiebanner .cmplz-banner-slider.cmplz-checked,
.cmplz-cookiebanner .cmplz-banner-slider[aria-checked="true"] {
    background-color: var(--nx-status-success) !important;
}

.cmplz-cookiebanner .cmplz-banner-slider .cmplz-round {
    background-color: #fff !important;
    transition: transform var(--nx-ease-fast);
}


/* ── Manage consent tab (bottom-right floating button) ── */
#cmplz-manage-consent .cmplz-manage-consent {
    font-family: var(--nx-font-heading);
    font-size: var(--nx-text-xs);
    font-weight: var(--nx-weight-semibold);
    background-color: var(--nx-surface);
    border-color: var(--nx-border);
    border-radius: var(--nx-radius-md) var(--nx-radius-md) 0 0;
    color: var(--nx-text-muted);
    box-shadow: var(--nx-shadow-sm);
}

#cmplz-manage-consent .cmplz-manage-consent:hover,
#cmplz-manage-consent .cmplz-manage-consent:focus {
    color: var(--nx-text);
}


/* ── Scrollbar in preferences body ── */
.cmplz-cookiebanner .cmplz-body::-webkit-scrollbar-thumb {
    background-color: var(--nx-color-primary-light);
}


/* ── Responsive — stack buttons on mobile ── */
@media (max-width: 480px) {
    .cmplz-cookiebanner {
        padding: var(--nx-space-md);
        max-width: calc(100vw - var(--nx-space-lg));
    }

    .cmplz-cookiebanner .cmplz-buttons {
        flex-direction: column;
    }

    .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
        width: 100%;
    }
}