/**
 * CookieConsent Custom Theme - EPC Store
 * Dark mode compatible, brand colors con CSS Variables
 * @version 2.0.0
 */

/* ========================================
   BRAND COLOR OVERRIDES
   Utilizza CSS variables dal tema con fallback
   ======================================== */
:root {
    --cc-primary: var(--primary-color, #E6672A);
    --cc-secondary: var(--secondary-color, #652393);
    --cc-bg: #ffffff;
    --cc-text: #2d3748;
    --cc-btn-primary-bg: var(--cc-primary);
    --cc-btn-primary-text: #ffffff;
    --cc-btn-primary-hover-bg: var(--primary-dark, #c4541d);
    --cc-btn-secondary-bg: #e2e8f0;
    --cc-btn-secondary-text: var(--cc-text);
    --cc-btn-secondary-hover-bg: #cbd5e0;
    --cc-toggle-on-bg: var(--cc-primary);
    --cc-toggle-off-bg: #cbd5e0;
    --cc-toggle-on-knob-bg: #ffffff;
    --cc-toggle-off-knob-bg: #ffffff;
    --cc-cookie-category-block-bg: #f7fafc;
    --cc-cookie-category-block-border: #e2e8f0;
    --cc-separator: #e2e8f0;
    --cc-overlay-bg: rgba(0, 0, 0, 0.85);
}

/* ========================================
   DARK MODE THEME
   ======================================== */
[data-theme="dark"] {
    --cc-bg: #1a1d24;
    --cc-text: #e6edf3;
    --cc-btn-primary-bg: var(--cc-primary);
    --cc-btn-primary-text: #ffffff;
    --cc-btn-primary-hover-bg: var(--primary-dark, #c4541d);
    --cc-btn-secondary-bg: #30363d;
    --cc-btn-secondary-text: #e6edf3;
    --cc-btn-secondary-hover-bg: #3d4451;
    --cc-toggle-on-bg: var(--cc-primary);
    --cc-toggle-off-bg: #3d4451;
    --cc-cookie-category-block-bg: #161b22;
    --cc-cookie-category-block-border: #30363d;
    --cc-separator: #30363d;
    --cc-overlay-bg: rgba(13, 17, 23, 0.9);
}

/* ========================================
   CUSTOM STYLING
   ======================================== */

/* Link colors */
#cc-main .cc-link {
    color: var(--cc-primary);
    text-decoration: underline;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
}

#cc-main .cc-link:hover {
    color: var(--cc-secondary);
}

/* Primary button */
#cc-main .cm__btn.cm__btn--primary,
#cc-main .pm__btn.pm__btn--primary {
    background-color: var(--cc-btn-primary-bg) !important;
    border-color: var(--cc-btn-primary-bg) !important;
    color: var(--cc-btn-primary-text) !important;
    font-weight: 600;
    transition: all 0.2s ease;
}

#cc-main .cm__btn.cm__btn--primary:hover,
#cc-main .pm__btn.pm__btn--primary:hover {
    background-color: var(--cc-btn-primary-hover-bg) !important;
    border-color: var(--cc-btn-primary-hover-bg) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(230, 103, 42, 0.3);
}

/* Secondary button */
#cc-main .cm__btn.cm__btn--secondary,
#cc-main .pm__btn.pm__btn--secondary {
    background-color: var(--cc-btn-secondary-bg) !important;
    border-color: var(--cc-btn-secondary-bg) !important;
    color: var(--cc-btn-secondary-text) !important;
    transition: all 0.2s ease;
}

#cc-main .cm__btn.cm__btn--secondary:hover,
#cc-main .pm__btn.pm__btn--secondary:hover {
    background-color: var(--cc-btn-secondary-hover-bg) !important;
    border-color: var(--cc-btn-secondary-hover-bg) !important;
}

/* Modal backgrounds */
#cc-main .cm,
#cc-main .pm {
    background-color: var(--cc-bg) !important;
    color: var(--cc-text) !important;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* Consent modal title */
#cc-main .cm__title {
    color: var(--cc-text) !important;
    font-weight: 700;
    font-size: 1.25rem;
}

/* Settings modal title */
#cc-main .pm__title {
    color: var(--cc-text) !important;
    font-weight: 700;
}

/* Section titles */
#cc-main .pm__section-title {
    color: var(--cc-text) !important;
    font-weight: 600;
}

/* Cookie category blocks */
#cc-main .pm__section {
    background-color: var(--cc-cookie-category-block-bg) !important;
    border: 1px solid var(--cc-cookie-category-block-border) !important;
    border-radius: 8px;
}

/* Toggle switches */
#cc-main .section__toggle.toggle--on .toggle__icon-on {
    background-color: var(--cc-toggle-on-bg) !important;
}

#cc-main .section__toggle.toggle--off .toggle__icon-off {
    background-color: var(--cc-toggle-off-bg) !important;
}

/* Cookie table */
#cc-main .pm__table {
    color: var(--cc-text) !important;
}

#cc-main .pm__table th {
    background-color: var(--cc-cookie-category-block-bg) !important;
    color: var(--cc-text) !important;
    border-color: var(--cc-separator) !important;
}

#cc-main .pm__table td {
    border-color: var(--cc-separator) !important;
}

/* Overlay */
#cc-main #cm-overlay,
#cc-main #pm-overlay {
    background-color: var(--cc-overlay-bg) !important;
    backdrop-filter: blur(4px);
}

/* Mobile optimization */
@media (max-width: 768px) {
    #cc-main .cm,
    #cc-main .pm {
        max-width: 95vw !important;
        margin: 1rem !important;
    }
    
    #cc-main .cm__btns,
    #cc-main .pm__btns {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    #cc-main .cm__btn,
    #cc-main .pm__btn {
        width: 100%;
        margin: 0;
    }
}

/* Accessibility improvements */
#cc-main button:focus-visible,
#cc-main a:focus-visible {
    outline: 2px solid var(--cc-primary);
    outline-offset: 2px;
}

/* Smooth animations */
#cc-main .cm,
#cc-main .pm {
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}