/**
 * PCBuildMate Cookie Banner Styles
 * Complianz GDPR/CCPA Cookie Consent overrides
 * Supports dark/light mode theming
 */

/* =============================================================================
   LIGHT MODE STYLES (Default for html.light)
   ============================================================================= */

html.light .cmplz-cookiebanner,
html.light #cmplz-cookiebanner-container .cmplz-cookiebanner {
    background-color: #ffffff !important;
    border-color: #e0e0e0 !important;
    color: #1a1a1a !important;
}

/* All text in light mode */
html.light .cmplz-cookiebanner .cmplz-title,
html.light .cmplz-cookiebanner .cmplz-message,
html.light .cmplz-cookiebanner .cmplz-category-title,
html.light .cmplz-cookiebanner .cmplz-category-header,
html.light .cmplz-cookiebanner .cmplz-always-active,
html.light .cmplz-cookiebanner .cmplz-description,
html.light .cmplz-cookiebanner .cmplz-description-functional,
html.light .cmplz-cookiebanner .cmplz-description-statistics,
html.light .cmplz-cookiebanner .cmplz-description-statistics-anonymous,
html.light .cmplz-cookiebanner .cmplz-description-preferences,
html.light .cmplz-cookiebanner .cmplz-description-marketing,
html.light .cmplz-cookiebanner span,
html.light .cmplz-cookiebanner p,
html.light .cmplz-cookiebanner label {
    color: #1a1a1a !important;
}

/* Links in light mode */
html.light .cmplz-cookiebanner a,
html.light .cmplz-cookiebanner .cmplz-links a {
    color: #3077A6 !important;
}

html.light .cmplz-cookiebanner a:hover {
    color: #1e5a82 !important;
}

/* Close button light mode */
html.light .cmplz-cookiebanner .cmplz-close,
html.light .cmplz-cookiebanner .cmplz-close svg {
    color: #1a1a1a !important;
    fill: #1a1a1a !important;
}

/* Category expand icon light mode */
html.light .cmplz-cookiebanner .cmplz-icon svg,
html.light .cmplz-cookiebanner .cmplz-icon.cmplz-open svg {
    fill: #1a1a1a !important;
}

/* Accept Button - Light Mode */
html.light .cmplz-cookiebanner .cmplz-btn.cmplz-accept {
    background-color: #3077A6 !important;
    color: #ffffff !important;
    border: 1px solid #3077A6 !important;
}

html.light .cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover {
    background-color: #1e5a82 !important;
    border-color: #1e5a82 !important;
}

/* Deny Button - Light Mode (equal prominence to accept) */
html.light .cmplz-cookiebanner .cmplz-btn.cmplz-deny {
    background-color: #ffffff !important;
    color: #3077A6 !important;
    border: 1px solid #3077A6 !important;
}

html.light .cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover {
    background-color: rgba(48, 119, 166, 0.1) !important;
}

/* Settings Buttons - Light Mode */
html.light .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences,
html.light .cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences,
html.light .cmplz-cookiebanner .cmplz-btn.cmplz-manage-options {
    background-color: #f5f5f5 !important;
    color: #1a1a1a !important;
    border: 1px solid #e0e0e0 !important;
}

html.light .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences:hover,
html.light .cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences:hover,
html.light .cmplz-cookiebanner .cmplz-btn.cmplz-manage-options:hover {
    background-color: #ebebeb !important;
    border-color: #d0d0d0 !important;
}

/* Category Backgrounds - Light Mode */
html.light .cmplz-cookiebanner .cmplz-category,
html.light .cmplz-cookiebanner details.cmplz-category {
    background-color: #f8f9fa !important;
    border: 1px solid #e0e0e0 !important;
}

/* Toggle Switches - Light Mode */
html.light .cmplz-cookiebanner .cmplz-banner-checkbox .cmplz-label:before {
    background-color: #cccccc !important;
}

html.light .cmplz-cookiebanner .cmplz-consent-checkbox:checked + .cmplz-label:before {
    background-color: #3077A6 !important;
}

/* Manage Consent Button - Light Mode */
html.light #cmplz-manage-consent .cmplz-manage-consent {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
    border-color: #e0e0e0 !important;
}

html.light #cmplz-manage-consent .cmplz-manage-consent:hover {
    background-color: #f5f5f5 !important;
}

/* =============================================================================
   DARK MODE STYLES (for html.dark)
   ============================================================================= */

html.dark .cmplz-cookiebanner,
html.dark #cmplz-cookiebanner-container .cmplz-cookiebanner {
    background-color: #1a1a1a !important;
    border-color: #333333 !important;
    color: #ffffff !important;
}

/* All text in dark mode */
html.dark .cmplz-cookiebanner .cmplz-title,
html.dark .cmplz-cookiebanner .cmplz-message,
html.dark .cmplz-cookiebanner .cmplz-category-title,
html.dark .cmplz-cookiebanner .cmplz-category-header,
html.dark .cmplz-cookiebanner .cmplz-always-active,
html.dark .cmplz-cookiebanner .cmplz-description,
html.dark .cmplz-cookiebanner .cmplz-description-functional,
html.dark .cmplz-cookiebanner .cmplz-description-statistics,
html.dark .cmplz-cookiebanner .cmplz-description-statistics-anonymous,
html.dark .cmplz-cookiebanner .cmplz-description-preferences,
html.dark .cmplz-cookiebanner .cmplz-description-marketing,
html.dark .cmplz-cookiebanner span,
html.dark .cmplz-cookiebanner p,
html.dark .cmplz-cookiebanner label {
    color: #ffffff !important;
}

/* Secondary text in dark mode */
html.dark .cmplz-cookiebanner .cmplz-description,
html.dark .cmplz-cookiebanner .cmplz-description-functional,
html.dark .cmplz-cookiebanner .cmplz-description-statistics,
html.dark .cmplz-cookiebanner .cmplz-description-statistics-anonymous,
html.dark .cmplz-cookiebanner .cmplz-description-preferences,
html.dark .cmplz-cookiebanner .cmplz-description-marketing {
    color: #a0a0a0 !important;
}

/* Links in dark mode */
html.dark .cmplz-cookiebanner a,
html.dark .cmplz-cookiebanner .cmplz-links a {
    color: #4a9fd4 !important;
}

html.dark .cmplz-cookiebanner a:hover {
    color: #6bb8e8 !important;
}

/* Close button dark mode */
html.dark .cmplz-cookiebanner .cmplz-close,
html.dark .cmplz-cookiebanner .cmplz-close svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Category expand icon dark mode */
html.dark .cmplz-cookiebanner .cmplz-icon svg,
html.dark .cmplz-cookiebanner .cmplz-icon.cmplz-open svg {
    fill: #ffffff !important;
}

/* Accept Button - Dark Mode */
html.dark .cmplz-cookiebanner .cmplz-btn.cmplz-accept {
    background-color: #3077A6 !important;
    color: #ffffff !important;
    border: 1px solid #3077A6 !important;
}

html.dark .cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover {
    background-color: #4a9fd4 !important;
    border-color: #4a9fd4 !important;
}

/* Deny Button - Dark Mode (equal prominence to accept) */
html.dark .cmplz-cookiebanner .cmplz-btn.cmplz-deny {
    background-color: transparent !important;
    color: #ffffff !important;
    border: 1px solid #3077A6 !important;
}

html.dark .cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover {
    background-color: rgba(48, 119, 166, 0.2) !important;
}

/* Settings Buttons - Dark Mode */
html.dark .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences,
html.dark .cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences,
html.dark .cmplz-cookiebanner .cmplz-btn.cmplz-manage-options {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
    border: 1px solid #333333 !important;
}

html.dark .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences:hover,
html.dark .cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences:hover,
html.dark .cmplz-cookiebanner .cmplz-btn.cmplz-manage-options:hover {
    background-color: #333333 !important;
    border-color: #404040 !important;
}

/* Category Backgrounds - Dark Mode */
html.dark .cmplz-cookiebanner .cmplz-category,
html.dark .cmplz-cookiebanner details.cmplz-category {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid #333333 !important;
}

/* Toggle Switches - Dark Mode */
html.dark .cmplz-cookiebanner .cmplz-banner-checkbox .cmplz-label:before {
    background-color: #666666 !important;
}

html.dark .cmplz-cookiebanner .cmplz-consent-checkbox:checked + .cmplz-label:before {
    background-color: #3077A6 !important;
}

/* Manage Consent Button - Dark Mode */
html.dark #cmplz-manage-consent .cmplz-manage-consent {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
    border-color: #333333 !important;
}

html.dark #cmplz-manage-consent .cmplz-manage-consent:hover {
    background-color: #333333 !important;
}

/* =============================================================================
   SHARED STYLES (Both Modes)
   ============================================================================= */

/* Banner Position - Bottom Left */
.cmplz-cookiebanner.cmplz-bottom-left {
    position: fixed !important;
    bottom: 20px !important;
    left: 20px !important;
    right: auto !important;
    top: auto !important;
    max-width: 420px !important;
    width: calc(100% - 40px) !important;
    max-height: calc(100vh - 40px) !important;
    overflow-y: auto !important;
    transform: none !important;
    margin: 0 !important;
}

/* Mobile: full width bottom */
@media (max-width: 480px) {
    .cmplz-cookiebanner.cmplz-bottom-left {
        left: 10px !important;
        right: 10px !important;
        bottom: 10px !important;
        width: calc(100% - 20px) !important;
        max-width: none !important;
    }
}

/* Banner Container */
.cmplz-cookiebanner {
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Button Base Styles */
.cmplz-cookiebanner .cmplz-btn {
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

/* Focus States for Accessibility */
.cmplz-cookiebanner .cmplz-btn:focus-visible {
    outline: 2px solid #3077A6 !important;
    outline-offset: 2px !important;
}

/* Category Container */
.cmplz-cookiebanner .cmplz-category,
.cmplz-cookiebanner details.cmplz-category {
    border-radius: 8px !important;
    margin-bottom: 0.75rem !important;
}

/* Provider list styling */
.cmplz-cookiebanner .cmplz-description br + br {
    display: block !important;
    content: "" !important;
    margin-top: 0.5rem !important;
}

/* Manage Consent Button */
#cmplz-manage-consent .cmplz-manage-consent {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

/* =============================================================================
   COOKIE POLICY PAGE STYLES
   ============================================================================= */

/* Light Mode Tables */
html.light .cmplz-cookies-overview table,
html.light .cmplz-document table {
    background-color: #ffffff !important;
    border-color: #e0e0e0 !important;
}

html.light .cmplz-cookies-overview th,
html.light .cmplz-document th {
    background-color: #f5f5f5 !important;
    color: #1a1a1a !important;
}

html.light .cmplz-cookies-overview td,
html.light .cmplz-document td {
    color: #666666 !important;
}

/* Dark Mode Tables */
html.dark .cmplz-cookies-overview table,
html.dark .cmplz-document table {
    background-color: #242424 !important;
    border-color: #333333 !important;
}

html.dark .cmplz-cookies-overview th,
html.dark .cmplz-document th {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
}

html.dark .cmplz-cookies-overview td,
html.dark .cmplz-document td {
    color: #a0a0a0 !important;
}

/* =============================================================================
   REDUCED MOTION SUPPORT
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    .cmplz-cookiebanner .cmplz-btn,
    #cmplz-manage-consent .cmplz-manage-consent {
        transition: none !important;
    }
}