/* Dynamic Test Theme System */

/* Default theme variables (will be overridden by JavaScript) */
:root {
    --test-primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --test-primary-solid: #667eea;
    --test-secondary: #764ba2;
    --test-accent: rgba(102, 126, 234, 0.1);
    --test-shadow: rgba(102, 126, 234, 0.3);
}

/* Logo Protection - Always maintain consistent logo colors regardless of theme */
body[class*="test-theme-"] .nav-logo .logo-icon {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important;
}

body[class*="test-theme-"] .nav-logo .logo-icon i {
    color: white !important;
}

body[class*="test-theme-"] .nav-logo .logo-icon:hover {
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4) !important;
}

body[class*="test-theme-"] .nav-logo:hover {
    text-decoration: none !important;
    color: inherit !important;
}

/* Test Page Theming - Only for specific test-related pages */
body[class*="test-theme-"].test-page,
body[class*="test-theme-"].questions-page,
body[class*="test-theme-"].results-page,
body[class*="test-theme-"].certificate-page {
    /* Override CSS custom properties for perfect theming */
    --primary-gradient: var(--test-primary-gradient);
    --primary-color: var(--test-primary-solid);
    --success-color: var(--test-primary-solid);
    
    /* Hero sections in test pages */
    .hero-background,
    .test-hero .hero-background {
        background: var(--test-primary-gradient) !important;
    }
    
    /* Progress indicators */
    .progress-fill,
    .timer-progress,
    .question-progress .progress-fill,
    #main-progress-fill {
        background: var(--test-primary-gradient) !important;
    }
    
    /* Test Timer in Navigation */
    .test-timer {
        background: var(--test-primary-gradient) !important;
    }
    
    /* Questions Page Specific Elements */
    #current-question-number {
        background: var(--test-primary-gradient) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
    }
    
    .progress-percentage {
        color: var(--test-primary-solid) !important;
    }
    
    .question-type i {
        color: var(--test-primary-solid) !important;
    }
    
    .loading-spinner {
        border-top-color: var(--test-primary-solid) !important;
    }
    
    /* Option Labels and Selection */
    .option-label {
        background: var(--test-primary-gradient) !important;
    }
    
    .option-item:hover {
        border-color: var(--test-primary-solid) !important;
        background: var(--test-accent) !important;
    }
    
    .option-item.selected {
        border-color: var(--test-primary-solid) !important;
        background: var(--test-accent) !important;
        box-shadow: 0 0 0 2px var(--test-accent) !important;
    }
    
    .option-item.selected .option-label {
        background: var(--test-primary-solid) !important;
    }
    
    .option-check {
        background: var(--test-primary-solid) !important;
    }
    
    /* Selection Indicator */
    .selection-indicator.selected {
        background: var(--test-accent) !important;
        color: var(--test-primary-solid) !important;
    }
    
    .selection-indicator.selected i {
        color: var(--test-primary-solid) !important;
    }
    
    /* Primary buttons */
    .btn-primary,
    .submit-btn,
    .next-btn,
    .start-test-btn,
    .continue-btn,
    .finish-test-btn {
        background: var(--test-primary-gradient) !important;
        box-shadow: 0 4px 12px var(--test-shadow) !important;
    }
    
    .btn-primary:hover,
    .submit-btn:hover,
    .next-btn:hover {
        box-shadow: 0 6px 20px var(--test-shadow) !important;
        transform: translateY(-2px) !important;
    }
    
    /* Test icons and indicators */
    .test-icon,
    .question-indicator.active,
    .question-number,
    .test-type-indicator {
        background: var(--test-primary-gradient) !important;
    }
    
    /* Question cards and selections */
    .question-option:hover,
    .question-option.selected {
        border-color: var(--test-primary-solid) !important;
        background: var(--test-accent) !important;
    }
    
    .question-option.selected::before {
        background: var(--test-primary-solid) !important;
    }
    
    /* Timer and status indicators */
    .timer-circle,
    .test-status.active {
        border-color: var(--test-primary-solid) !important;
    }
    
    .timer-fill {
        stroke: var(--test-primary-solid) !important;
    }
    
    /* Score displays */
    .score-gauge .gauge-needle {
        stroke: var(--test-primary-solid) !important;
    }
    
    .score-highlight,
    .iq-score-accent {
        color: var(--test-primary-solid) !important;
    }
    
    /* Navigation and breadcrumbs */
    .test-nav .nav-link.active,
    .breadcrumb .active {
        background: var(--test-accent) !important;
        color: var(--test-primary-solid) !important;
    }
    
    /* Form elements */
    .form-input:focus,
    .form-select:focus {
        border-color: var(--test-primary-solid) !important;
        box-shadow: 0 0 0 3px var(--test-accent) !important;
    }
    
    /* Checkboxes and radio buttons */
    .checkbox:checked,
    .radio:checked {
        background: var(--test-primary-solid) !important;
        border-color: var(--test-primary-solid) !important;
    }
    
    /* Loading states */
    .loading-spinner {
        border-top-color: var(--test-primary-solid) !important;
    }
    
    .loading-bar {
        background: var(--test-primary-gradient) !important;
    }
    
    /* Alerts and notifications */
    .alert.success {
        background: var(--test-accent) !important;
        border-color: var(--test-primary-solid) !important;
        color: var(--test-secondary) !important;
    }
}

/* Certificate Theming */
.certificate-container[class*="test-theme-"] {
    .certificate-border,
    .certificate-seal {
        background: var(--test-primary-gradient) !important;
    }
    
    .certificate-header {
        border-bottom-color: var(--test-primary-solid) !important;
    }
    
    .certificate-score {
        color: var(--test-primary-solid) !important;
    }
    
    .certificate-badge {
        background: var(--test-primary-gradient) !important;
    }
    
    .certificate-signature {
        border-top-color: var(--test-primary-solid) !important;
    }
}

/* Quick Test Theme Specific */
.test-theme-quick {
    /* Green theme overrides */
    .success-indicator,
    .correct-answer {
        background: var(--test-primary-gradient) !important;
    }
}

/* Standard Test Theme Specific */
.test-theme-standard {
    /* Blue/Purple theme - default, no overrides needed */
}

/* Comprehensive Test Theme Specific */
.test-theme-comprehensive {
    /* Orange theme overrides */
    .challenge-indicator,
    .difficulty-high {
        background: var(--test-primary-gradient) !important;
    }
}

/* Results Page Theming */
.results-display[class*="test-theme-"] {
    .results-header .results-icon {
        background: var(--test-primary-gradient) !important;
    }
    
    .score-card .score-number {
        color: var(--test-primary-solid) !important;
    }
    
    .detail-card:hover {
        border-color: var(--test-primary-solid) !important;
    }
    
    .percentile-indicator {
        background: var(--test-primary-gradient) !important;
    }
}

/* Payment Page Theming */
.payment-form[class*="test-theme-"] {
    .payment-header {
        background: var(--test-primary-gradient) !important;
    }
    
    .plan-selected {
        border-color: var(--test-primary-solid) !important;
        background: var(--test-accent) !important;
    }
    
    .payment-btn {
        background: var(--test-primary-gradient) !important;
        box-shadow: 0 4px 12px var(--test-shadow) !important;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    body[class*="test-theme-"].test-page,
    body[class*="test-theme-"].questions-page,
    body[class*="test-theme-"].results-page,
    body[class*="test-theme-"].certificate-page {
        .mobile-test-header {
            background: var(--test-primary-gradient) !important;
        }
        
        .mobile-progress {
            background: var(--test-primary-solid) !important;
        }
    }
}

/* Animation enhancements for themed elements */
body[class*="test-theme-"].test-page .themed-element,
body[class*="test-theme-"].questions-page .themed-element,
body[class*="test-theme-"].results-page .themed-element,
body[class*="test-theme-"].certificate-page .themed-element {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body[class*="test-theme-"].test-page .themed-element:hover,
body[class*="test-theme-"].questions-page .themed-element:hover,
body[class*="test-theme-"].results-page .themed-element:hover,
body[class*="test-theme-"].certificate-page .themed-element:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--test-shadow);
}

/* Ensure high contrast for accessibility */
@media (prefers-contrast: high) {
    body[class*="test-theme-"].test-page,
    body[class*="test-theme-"].questions-page,
    body[class*="test-theme-"].results-page,
    body[class*="test-theme-"].certificate-page {
        --test-accent: transparent;
    }
}