/* OTT Player - Theme Styles */

/* Netflix Theme (Default) */
.theme-netflix {
    --primary: #e50914;
    --primary-hover: #f40612;
    --bg-dark: #141414;
    --bg-darker: #000000;
    --text-primary: #ffffff;
    --text-secondary: #b3b3b3;
    --surface: rgba(255, 255, 255, 0.1);
    --surface-hover: rgba(255, 255, 255, 0.15);
    --border: rgba(255, 255, 255, 0.1);
}

.theme-netflix .progress-fill {
    background: var(--primary);
}

.theme-netflix .progress-thumb {
    background: var(--primary);
}

.theme-netflix .volume-slider::-webkit-slider-runnable-track {
    background: linear-gradient(to right, var(--primary) var(--volume-percent, 100%), rgba(255, 255, 255, 0.3) var(--volume-percent, 100%));
}

.theme-netflix .settings-options button.active {
    background: rgba(229, 9, 20, 0.2);
    color: var(--primary);
}

.theme-netflix .spinner {
    border-top-color: var(--primary);
}

.theme-netflix .error-icon {
    color: var(--primary);
}

.theme-netflix .error-retry {
    background: var(--primary);
}

.theme-netflix .error-retry:hover {
    background: var(--primary-hover);
}

/* Hotstar Theme */
.theme-hotstar {
    --primary: #0c3863;
    --primary-hover: #1a5276;
    --accent: #2196f3;
    --bg-dark: #0a0a0a;
    --bg-darker: #000000;
    --text-primary: #ffffff;
    --text-secondary: #b3b3b3;
    --surface: rgba(255, 255, 255, 0.1);
    --surface-hover: rgba(255, 255, 255, 0.15);
    --border: rgba(255, 255, 255, 0.1);
}

.theme-hotstar .progress-fill {
    background: var(--accent);
}

.theme-hotstar .progress-thumb {
    background: var(--accent);
}

.theme-hotstar .volume-slider::-webkit-slider-runnable-track {
    background: linear-gradient(to right, var(--accent) var(--volume-percent, 100%), rgba(255, 255, 255, 0.3) var(--volume-percent, 100%));
}

.theme-hotstar .settings-options button.active {
    background: rgba(33, 150, 243, 0.2);
    color: var(--accent);
}

.theme-hotstar .spinner {
    border-top-color: var(--accent);
}

.theme-hotstar .error-icon {
    color: var(--accent);
}

.theme-hotstar .error-retry {
    background: var(--accent);
}

.theme-hotstar .center-play-btn {
    background: rgba(33, 150, 243, 0.2);
    border-color: rgba(33, 150, 243, 0.4);
}

.theme-hotstar .skip-intro-btn {
    background: var(--accent);
    border-color: var(--accent);
}

/* OLED Theme */
.theme-oled {
    --primary: #e50914;
    --primary-hover: #f40612;
    --bg-dark: #000000;
    --bg-darker: #000000;
    --text-primary: #ffffff;
    --text-secondary: #999999;
    --surface: rgba(255, 255, 255, 0.08);
    --surface-hover: rgba(255, 255, 255, 0.12);
    --border: rgba(255, 255, 255, 0.08);
}

.theme-oled .player-container {
    background: #000;
}

.theme-oled .video-player {
    background: #000;
}

.theme-oled .top-overlay,
.theme-oled .bottom-controls {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
}

.theme-oled .bottom-controls {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
}

.theme-oled .settings-panel {
    background: rgba(0, 0, 0, 0.98);
}

.theme-oled .shortcuts-content {
    background: #000;
}

.theme-oled .gesture-indicator {
    background: rgba(0, 0, 0, 0.95);
}

/* Custom Theme Support */
.theme-custom {
    --primary: var(--custom-primary, #e50914);
    --primary-hover: var(--custom-primary-hover, #f40612);
    --bg-dark: var(--custom-bg, #141414);
    --bg-darker: #000000;
    --text-primary: #ffffff;
    --text-secondary: #b3b3b3;
    --surface: rgba(255, 255, 255, 0.1);
    --surface-hover: rgba(255, 255, 255, 0.15);
    --border: rgba(255, 255, 255, 0.1);
}

.theme-custom .progress-fill {
    background: var(--primary);
}

.theme-custom .progress-thumb {
    background: var(--primary);
}

.theme-custom .volume-slider::-webkit-slider-runnable-track {
    background: linear-gradient(to right, var(--primary) var(--volume-percent, 100%), rgba(255, 255, 255, 0.3) var(--volume-percent, 100%));
}

.theme-custom .settings-options button.active {
    background: rgba(var(--primary-rgb, 229, 9, 20), 0.2);
    color: var(--primary);
}

.theme-custom .spinner {
    border-top-color: var(--primary);
}

.theme-custom .error-icon {
    color: var(--primary);
}

.theme-custom .error-retry {
    background: var(--primary);
}

/* Glass Effect */
.glass-effect {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* Animation Classes */
.fade-in {
    animation: fadeIn 0.3s ease forwards;
}

.fade-out {
    animation: fadeOut 0.3s ease forwards;
}

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

.slide-up {
    animation: slideUp 0.2s ease forwards;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}