/**
 * DNSai Cookie Consent - Design System Edition
 * Version: 1.2.0
 * Updated: 2026-04-20
 *
 * Adheres to DNSai Core Palette v3.0
 * Requires: core-palette.css loaded first (or standalone dark mode fallback)
 *
 * Minimal, non-intrusive cookie banner
 * Works on all screen sizes
 */

/* ============================================
   BANNER - Minimal bottom bar
   ============================================ */
.cc-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* Use design system surface color with blur */
    background: var(--bg-surface, #1a1a1a);
    backdrop-filter: var(--blur-md, blur(8px));
    -webkit-backdrop-filter: var(--blur-md, blur(8px));
    padding: var(--space-3, 12px) var(--space-4, 16px);
    z-index: 999999;
    font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
    font-size: var(--text-sm, 13px);
    display: none;
    border-top: 1px solid var(--border-light, rgba(255, 255, 255, 0.1));
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3);
}

.cc-banner.cc-show {
    display: block;
    animation: ccSlideUp 0.25s var(--ease-default, ease);
}

@keyframes ccSlideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.cc-inner {
    max-width: var(--container-xl, 1200px);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4, 16px);
    flex-wrap: wrap;
}

.cc-text {
    color: var(--text-secondary, #cccccc);
    flex: 1;
    min-width: 200px;
    line-height: var(--leading-snug, 1.4);
}

.cc-text a {
    color: var(--brand-cyan, #26c4ff);
    text-decoration: none;
}

.cc-text a:hover {
    text-decoration: underline;
}

.cc-buttons {
    display: flex;
    gap: var(--space-2, 8px);
    flex-shrink: 0;
}

/* ============================================
   BUTTONS - Using design system tokens
   ============================================ */
.cc-btn {
    padding: var(--space-2, 8px) var(--space-4, 16px);
    border: none;
    border-radius: var(--radius-md, 6px);
    font-size: var(--text-sm, 12px);
    font-weight: var(--weight-semibold, 600);
    cursor: pointer;
    transition: var(--transition-fast, all 0.15s ease);
    white-space: nowrap;
}

.cc-btn:hover {
    opacity: 0.85;
}

/* Primary Accept Button - Brand gradient */
.cc-btn-accept {
    background: var(--brand-gradient, linear-gradient(90deg, #26c4ff 0%, #0054ff 100%));
    color: var(--btn-primary-text, #ffffff);
    border: 1px solid var(--brand-cyan, #26c4ff);
    box-shadow: var(--btn-glow, 0 4px 14px rgba(38, 196, 255, 0.25));
}

.cc-btn-accept:hover {
    background: var(--brand-gradient-hover, linear-gradient(90deg, #0048d4 0%, #007aff 100%));
    opacity: 1;
    transform: translateY(-1px);
}

/* Reject Button - Subtle secondary */
.cc-btn-reject {
    background: var(--btn-secondary-bg, rgba(255, 255, 255, 0.06));
    color: var(--text-muted, #999999);
    border: 1px solid var(--btn-secondary-border, rgba(255, 255, 255, 0.12));
}

.cc-btn-reject:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary, #ffffff);
    border-color: var(--border-hover, #777777);
}

/* Settings Button - Ghost style */
.cc-btn-settings {
    background: transparent;
    color: var(--text-muted, #999999);
    padding: var(--space-2, 8px) var(--space-3, 12px);
}

.cc-btn-settings:hover {
    color: var(--brand-cyan, #26c4ff);
}

/* ============================================
   MODAL - Settings panel
   ============================================ */
.cc-modal {
    position: fixed;
    inset: 0;
    background: var(--bg-backdrop, rgba(0, 0, 0, 0.7));
    z-index: var(--modal-z-index, 1400);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-4, 16px);
    backdrop-filter: var(--blur-sm, blur(4px));
    -webkit-backdrop-filter: var(--blur-sm, blur(4px));
}

.cc-modal.cc-show {
    display: flex;
    animation: ccFade 0.15s var(--ease-default, ease);
}

@keyframes ccFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.cc-modal-box {
    background: var(--bg-surface, #1a1a1a);
    border: 1px solid var(--border-light, rgba(255, 255, 255, 0.1));
    border-radius: var(--radius-2xl, 12px);
    width: 100%;
    max-width: 480px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl, 0 12px 48px rgba(0, 0, 0, 0.5));
}

.cc-modal-header {
    padding: var(--space-4, 16px) var(--space-5, 20px);
    border-bottom: 1px solid var(--border-default, #333333);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cc-modal-header h3 {
    margin: 0;
    color: var(--text-primary, #ffffff);
    font-size: var(--text-lg, 16px);
    font-weight: var(--weight-semibold, 600);
}

.cc-close {
    background: none;
    border: none;
    color: var(--text-muted, #999999);
    font-size: var(--text-2xl, 20px);
    cursor: pointer;
    padding: var(--space-1, 4px) var(--space-2, 8px);
    line-height: 1;
    transition: var(--transition-fast, all 0.15s ease);
}

.cc-close:hover {
    color: var(--text-primary, #ffffff);
}

.cc-modal-body {
    padding: var(--space-4, 16px) var(--space-5, 20px);
}

/* ============================================
   COOKIE CATEGORIES
   ============================================ */
.cc-category {
    padding: var(--space-3, 12px);
    background: var(--bg-section, #111111);
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.07));
    border-radius: var(--radius-lg, 8px);
    margin-bottom: var(--space-3, 12px);
}

.cc-category:last-child {
    margin-bottom: 0;
}

.cc-cat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cc-cat-name {
    color: var(--text-primary, #ffffff);
    font-size: var(--text-base, 14px);
    font-weight: var(--weight-medium, 500);
}

.cc-cat-desc {
    color: var(--text-muted, #999999);
    font-size: var(--text-sm, 12px);
    margin-top: var(--space-2, 6px);
    line-height: var(--leading-snug, 1.4);
}

/* ============================================
   TOGGLE SWITCH - Brand colors
   ============================================ */
.cc-toggle {
    position: relative;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}

.cc-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.cc-slider {
    position: absolute;
    inset: 0;
    background: var(--border-default, #333333);
    border-radius: var(--radius-full, 22px);
    cursor: pointer;
    transition: var(--transition-fast, background 0.2s);
}

.cc-slider:before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    left: 3px;
    top: 3px;
    background: var(--text-primary, #ffffff);
    border-radius: 50%;
    transition: var(--transition-fast, transform 0.2s);
}

/* Active state uses brand cyan */
.cc-toggle input:checked + .cc-slider {
    background: var(--brand-cyan, #26c4ff);
}

.cc-toggle input:checked + .cc-slider:before {
    transform: translateX(18px);
}

.cc-toggle input:disabled + .cc-slider {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================
   MODAL FOOTER
   ============================================ */
.cc-modal-footer {
    padding: var(--space-4, 16px) var(--space-5, 20px);
    border-top: 1px solid var(--border-default, #333333);
    display: flex;
    gap: var(--space-2, 8px);
    justify-content: flex-end;
}

/* ============================================
   RESPONSIVE - Mobile optimized
   ============================================ */
@media (max-width: 600px) {
    .cc-banner {
        padding: var(--space-3, 10px) var(--space-3, 12px);
    }

    .cc-inner {
        gap: var(--space-3, 10px);
    }

    .cc-text {
        font-size: var(--text-sm, 12px);
        min-width: 100%;
        text-align: center;
    }

    .cc-buttons {
        width: 100%;
        justify-content: center;
    }

    .cc-btn {
        padding: var(--space-3, 10px) var(--space-4, 14px);
        flex: 1;
        max-width: 120px;
    }

    .cc-btn-settings {
        flex: 0;
    }

    .cc-modal-box {
        max-height: 90vh;
    }

    .cc-modal-footer {
        flex-direction: column;
    }

    .cc-modal-footer .cc-btn {
        max-width: none;
    }
}

/* ============================================
   LIGHT MODE SUPPORT
   ============================================ */
[data-theme="light"] .cc-banner {
    background: var(--bg-surface, #f9f9f9);
    border-top-color: var(--border-light, rgba(0, 0, 0, 0.1));
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .cc-text {
    color: var(--text-secondary, #282828);
}

[data-theme="light"] .cc-text a {
    color: var(--brand-blue, #0054ff);
}

[data-theme="light"] .cc-btn-reject {
    background: var(--btn-secondary-bg, rgba(0, 0, 0, 0.04));
    color: var(--text-muted, #555555);
    border-color: var(--btn-secondary-border, rgba(0, 0, 0, 0.12));
}

[data-theme="light"] .cc-btn-reject:hover {
    background: rgba(0, 0, 0, 0.08);
    color: var(--text-primary, #000000);
}

[data-theme="light"] .cc-btn-settings {
    color: var(--text-muted, #555555);
}

[data-theme="light"] .cc-btn-settings:hover {
    color: var(--brand-blue, #0054ff);
}

[data-theme="light"] .cc-modal {
    background: var(--bg-backdrop, rgba(0, 0, 0, 0.5));
}

[data-theme="light"] .cc-modal-box {
    background: var(--bg-surface, #f9f9f9);
    border-color: var(--border-light, rgba(0, 0, 0, 0.1));
    box-shadow: var(--shadow-xl, 0 12px 48px rgba(0, 0, 0, 0.15));
}

[data-theme="light"] .cc-modal-header {
    border-bottom-color: var(--border-default, #cccccc);
}

[data-theme="light"] .cc-modal-header h3 {
    color: var(--text-primary, #000000);
}

[data-theme="light"] .cc-close {
    color: var(--text-muted, #555555);
}

[data-theme="light"] .cc-close:hover {
    color: var(--text-primary, #000000);
}

[data-theme="light"] .cc-category {
    background: var(--bg-card, #ffffff);
    border-color: var(--border-subtle, rgba(0, 0, 0, 0.05));
}

[data-theme="light"] .cc-cat-name {
    color: var(--text-primary, #000000);
}

[data-theme="light"] .cc-cat-desc {
    color: var(--text-muted, #555555);
}

[data-theme="light"] .cc-slider {
    background: var(--border-default, #cccccc);
}

[data-theme="light"] .cc-slider:before {
    background: var(--text-primary, #ffffff);
}

[data-theme="light"] .cc-toggle input:checked + .cc-slider {
    background: var(--brand-blue, #0054ff);
}

[data-theme="light"] .cc-modal-footer {
    border-top-color: var(--border-default, #cccccc);
}

/* ============================================
   HIDE IN PRINT
   ============================================ */
@media print {
    .cc-banner, .cc-modal { display: none !important; }
}