/* ===============================================
   CookieConsent Custom Theme: Light Funky
   with CRC Credit Bureau Brand Colors
   =============================================== */

/* CRC Brand Color Variables - from brand guidelines */
:root {
    /* Primary - Deep Blue (from logo background) */
    --crc-primary: #0A84C7;
    
    /* Secondary - Light Blue/Teal (from logo accents) */
    --crc-secondary: #4A90A4;
    
    /* Light - Clean White/Off-white */
    --crc-light: #F8F9FA;
    
    /* Dark - Professional Dark Blue/Navy */
    --crc-dark: #1E3A5F;
    
    /* Additional Brand Colors */
    --crc-primary-light: #4A90A4;
    --crc-primary-dark: #1E3A5F;
    --crc-secondary-light: #6DB4C4;
    --crc-secondary-dark: #357A8A;
}

/* Light Funky Theme Color Scheme with CRC Branding */
#cc-main {
    /* Font */
    --cc-font-family: 'Futura BT', Futura, 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
    
    /* Modal dimensions */
    --cc-modal-border-radius: 16px;
    --cc-btn-border-radius: 10px;
    --cc-modal-transition-duration: 0.3s;
    --cc-modal-margin: 1rem;
    --cc-z-index: 2147483647;
    
    /* Primary Colors - CRC Blue */
    --cc-primary-color: var(--crc-primary);
    --cc-secondary-color: var(--crc-secondary);
    
    /* Background colors - Light Funky Style */
    --cc-bg: #ffffff;
    --cc-modal-bg: #ffffff;
    --cc-overlay-bg: rgba(0, 0, 0, 0.6);
    
    /* Text colors */
    --cc-text: #2d3748;
    --cc-modal-text: #1a202c;
    --cc-btn-text: #ffffff;
    
    /* Border colors */
    --cc-border-color: #e2e8f0;
    --cc-border-hover-color: var(--crc-primary);
    
    /* Button - Primary (Accept All) - CRC Brand */
    --cc-btn-primary-bg: var(--crc-primary);
    --cc-btn-primary-text: #ffffff;
    --cc-btn-primary-border-color: var(--crc-primary);
    --cc-btn-primary-hover-bg: var(--crc-primary-dark);
    --cc-btn-primary-hover-text: #ffffff;
    --cc-btn-primary-hover-border-color: var(--crc-primary-dark);
    
    /* Button - Secondary (Reject/Manage) */
    --cc-btn-secondary-bg: transparent;
    --cc-btn-secondary-text: var(--crc-primary);
    --cc-btn-secondary-border-color: var(--crc-primary);
    --cc-btn-secondary-hover-bg: var(--crc-primary);
    --cc-btn-secondary-hover-text: #ffffff;
    --cc-btn-secondary-hover-border-color: var(--crc-primary);
    
    /* Toggle switch - CRC Brand Colors */
    --cc-toggle-on-bg: var(--crc-primary);
    --cc-toggle-off-bg: #cbd5e1;
    --cc-toggle-on-knob-bg: #ffffff;
    --cc-toggle-off-knob-bg: #ffffff;
    --cc-toggle-enabled-icon-color: var(--crc-primary);
    --cc-toggle-disabled-icon-color: #94a3b8;
    --cc-toggle-readonly-bg: #e2e8f0;
    
    /* Section headers - CRC Gradient */
    --cc-section-category-border: var(--crc-primary);
    
    /* Cookie category block */
    --cc-cookie-category-block-bg: #f8fafc;
    --cc-cookie-category-block-border: #e2e8f0;
    --cc-cookie-category-block-hover-bg: #f1f5f9;
    --cc-cookie-category-block-hover-border: var(--crc-primary-light);
    
    /* Separator */
    --cc-separator-border-color: #e2e8f0;
    
    /* Footer */
    --cc-footer-bg: #ffffff;
    --cc-footer-border-color: #e2e8f0;
    
    /* Link colors - CRC Primary */
    --cc-link-color: var(--crc-primary);
    --cc-link-hover-color: var(--crc-primary-dark);
}

/* Light Funky Theme Enhancements */

/* Consent Modal - Bottom Banner Style */
#cc-main .cm {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 2px solid var(--crc-primary);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(10, 132, 199, 0.2);
}

/* Consent Modal Title */
#cc-main .cm__title {
    color: var(--crc-dark);
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

/* Consent Modal Description */
#cc-main .cm__desc {
    color: #4a5568;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Consent Modal Footer */
#cc-main .cm__footer {
    border-top: 1px solid #e2e8f0;
    padding-top: 1rem;
}

#cc-main .cm__footer a {
    color: var(--crc-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

#cc-main .cm__footer a:hover {
    color: var(--crc-primary-dark);
    text-decoration: underline;
}

/* Preferences Modal */
#cc-main .pm {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.3);
}

/* Preferences Modal Header - CRC Gradient */
#cc-main .pm__header {
    background: linear-gradient(135deg, var(--crc-primary) 0%, var(--crc-primary-dark) 100%);
    color: #ffffff;
    padding: 1.5rem;
    border-radius: 16px 16px 0 0;
}

#cc-main .pm__title {
    color: #ffffff;
    font-weight: 700;
    font-size: 1.5rem;
}

/* Close button in modal - Enhanced visibility */
#cc-main .pm__close-btn {
    color: #ffffff !important;
    opacity: 1 !important;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    padding: 4px;
    transition: all 0.2s ease;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#cc-main .pm__close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

/* Ensure the X icon is visible */
#cc-main .pm__close-btn svg {
    fill: #ffffff !important;
    stroke: #ffffff !important;
    width: 20px;
    height: 20px;
}

/* Close button in consent modal */
#cc-main .cm__close-btn {
    color: var(--crc-dark) !important;
    opacity: 1 !important;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    padding: 4px;
    transition: all 0.2s ease;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#cc-main .cm__close-btn:hover {
    background: rgba(0, 0, 0, 0.1);
    transform: scale(1.1);
}

#cc-main .cm__close-btn svg {
    fill: var(--crc-dark) !important;
    stroke: var(--crc-dark) !important;
    width: 18px;
    height: 18px;
}

/* Preferences Modal Body */
#cc-main .pm__body {
    padding: 1.5rem;
    max-height: 60vh;
    overflow-y: auto;
}

/* Section Headers */
#cc-main .pm__section {
    margin-bottom: 1.5rem;
}

#cc-main .pm__section-title {
    color: var(--crc-dark);
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

#cc-main .pm__section-desc {
    color: #4a5568;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Cookie Category Blocks - Enhanced Style */
#cc-main .toggle {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

#cc-main .toggle:hover {
    background: #f1f5f9;
    border-color: var(--crc-primary-light);
    box-shadow: 0 4px 12px rgba(10, 132, 199, 0.1);
}

#cc-main .toggle__label {
    color: var(--crc-dark);
    font-weight: 600;
    font-size: 1rem;
}

#cc-main .toggle__desc {
    color: #4a5568;
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

/* Toggle Switch - Enhanced CRC Style */
#cc-main .toggle__input:checked ~ .toggle__switch {
    background: var(--crc-primary);
}

#cc-main .toggle__switch {
    background: #cbd5e1;
    border-radius: 999px;
    transition: background 0.3s ease;
}

#cc-main .toggle__switch::before {
    background: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Readonly toggle (necessary cookies) */
#cc-main .toggle--readonly .toggle__switch {
    background: var(--crc-primary);
    opacity: 0.7;
}

/* Cookie Table Styling */
#cc-main .cookie-table {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 1rem;
}

#cc-main .cookie-table thead {
    background: linear-gradient(135deg, var(--crc-primary) 0%, var(--crc-primary-light) 100%);
    color: #ffffff;
}

#cc-main .cookie-table th {
    padding: 0.75rem;
    font-weight: 600;
    text-align: left;
}

#cc-main .cookie-table td {
    padding: 0.75rem;
    border-top: 1px solid #e2e8f0;
}

#cc-main .cookie-table tbody tr:nth-child(even) {
    background: #f8fafc;
}

#cc-main .cookie-table tbody tr:hover {
    background: #f1f5f9;
}

/* Buttons - Enhanced Style */
#cc-main button {
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 10px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.875rem;
}

#cc-main button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(10, 132, 199, 0.25);
}

/* Primary Button */
#cc-main .cm__btn--primary,
#cc-main .pm__btn--primary {
    background: var(--crc-primary);
    border: 2px solid var(--crc-primary);
    color: #ffffff;
}

#cc-main .cm__btn--primary:hover,
#cc-main .pm__btn--primary:hover {
    background: var(--crc-primary-dark);
    border-color: var(--crc-primary-dark);
}

/* Secondary Button */
#cc-main .cm__btn--secondary,
#cc-main .pm__btn--secondary {
    background: transparent;
    border: 2px solid var(--crc-primary);
    color: var(--crc-primary);
}

#cc-main .cm__btn--secondary:hover,
#cc-main .pm__btn--secondary:hover {
    background: var(--crc-primary);
    color: #ffffff;
}

/* Preferences Modal Footer */
#cc-main .pm__footer {
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    padding: 1rem 1.5rem;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    #cc-main .cm {
        margin: 0.5rem;
        border-radius: 12px;
    }
    
    #cc-main .pm {
        margin: 0.5rem;
        max-height: 90vh;
    }
    
    #cc-main .pm__body {
        max-height: 50vh;
    }
    
    #cc-main button {
        padding: 10px 20px;
        font-size: 0.8rem;
    }
}

/* Accessibility Enhancements */
#cc-main button:focus,
#cc-main .toggle__input:focus ~ .toggle__switch {
    outline: 3px solid var(--crc-primary-light);
    outline-offset: 2px;
}

/* Animation for modal appearance */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Z-index fix for overlay */
#cc-main .cm-wrapper,
#cc-main .pm-wrapper {
    z-index: 2147483647 !important;
}