/* =========================================
   DYNAMIC THEME CSS - DEFAULT THEME
   Generated: 2025-12-06 15:56:46   ========================================= */

:root {
    --theme-primary: #E50914;
    --theme-secondary: #ff1a1a;
    --theme-gradient: linear-gradient(135deg, #E50914 0%, #ff1a1a 100%);
}

/* Override Netflix Red with Theme Colors */
.navbar,
.hero-btn-netflix,
.premium-btn,
.floating-request-btn,
.auth-submit-btn,
.logo,
.nav-link.active,
.bookmark-btn {
    --netflix-red: #E50914 !important;
}

/* Primary color replacements */
.hero-btn-netflix,
.premium-btn,
.floating-request-btn,
.auth-submit-btn,
.plan-btn,
.load-more-btn {
    background: linear-gradient(135deg, #E50914 0%, #ff1a1a 100%) !important;
}

.premium-btn:hover,
.hero-btn-netflix:hover {
    background: linear-gradient(135deg, #ff1a1a 0%, #E50914 100%) !important;
}

/* Links and accents */
.logo,
.nav-link:hover,
.nav-link.active,
a:hover {
    color: #E50914 !important;
}

/* Keep back buttons white */
.back-btn,
.back-home-btn,
.back-link,
a.back-btn,
a.back-home-btn,
a.back-link {
    color: #fff !important;
}

.back-btn:hover,
.back-home-btn:hover,
.back-link:hover,
a.back-btn:hover,
a.back-home-btn:hover,
a.back-link:hover {
    color: #fff !important;
    opacity: 0.9;
}

/* Ensure back button children (icons/text) stay white */
.back-btn *,
.back-home-btn *,
.back-link *,
a.back-btn *,
a.back-home-btn *,
a.back-link * {
    color: inherit !important;
}

/* Buttons and interactive elements */
.bookmark-btn,
.mobile-search-btn {
    background: #E50914 !important;
}

.bookmark-btn:hover,
.mobile-search-btn:hover {
    background: #ff1a1a !important;
}

/* FAQ active state */
.faq-item-netflix.active .faq-question-netflix {
    border-left-color: #E50914 !important;
}

/* Shadows and glows */
.floating-request-btn {
    box-shadow: 0 8px 32px #E5091480, 0 0 0 0 #E5091466 !important;
}

.play-btn:hover {
    box-shadow: 0 0 20px #E5091499 !important;
}

/* ========== DEFAULT NETFLIX THEME ========== */

/* Sticky transparent navbar that blurs on scroll - ALWAYS ON TOP */
.navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    border-bottom: none !important;
    transition: all 0.3s ease !important;
}

.navbar.scrolled {
    background: rgba(0, 0, 0, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Hero section vignette overlay - 30% DARKER */
.hero-section-netflix {
    position: relative !important;
}

.hero-section-netflix::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: radial-gradient(ellipse at center, transparent 0%, transparent 35%, rgba(0,0,0,0.5) 65%, rgba(0,0,0,0.8) 100%) !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

/* Ensure hero content is above the vignette */
.hero-section-netflix > * {
    position: relative !important;
    z-index: 3 !important;
}

.hero-content {
    position: relative !important;
    z-index: 10 !important;
}

/* Ensure slider arrows are above cards to avoid hover conflicts */
.netflix-handle {
    position: absolute !important;
    z-index: 6000 !important; /* above any card hovers */
    pointer-events: auto !important;
}

/* Footer social media icons - keep white on hover */
.social-links-netflix a,
.social-link,
footer .social-links-netflix a,
footer .social-link {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    transition: all 0.3s ease !important;
    color: #fff !important;
}

.social-links-netflix a:hover,
.social-link:hover,
footer .social-links-netflix a:hover,
footer .social-link:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    color: #fff !important;
}

.social-links-netflix i,
.social-link i,
footer .social-links-netflix i,
footer .social-link i,
.social-links-netflix a i,
.social-link a i {
    color: #fff !important;
    background: none !important;
    -webkit-text-fill-color: #fff !important;
}

.social-links-netflix a:hover i,
.social-link:hover i,
footer .social-links-netflix a:hover i,
footer .social-link:hover i {
    color: #fff !important;
    background: none !important;
    -webkit-text-fill-color: #fff !important;
}



/* Common theme enhancements */
.reason-icon-netflix i {
    color: #E50914 !important;
}

.stat-card {
    border: 1px solid #E5091433 !important;
}

.mobile-search-icon:hover,
.mobile-menu-btn:hover {
    color: #E50914 !important;
}

/* Smooth transitions for theme changes */
body,
.navbar,
.hero-section-netflix,
.content-card,
.cartoon-card,
.reason-card-netflix,
.stat-card {
    transition: background-color 0.5s ease, border-color 0.5s ease, color 0.5s ease;
}

/* Ensure all decorative overlays don't block clicks */
body::before,
body::after,
.hero-section-netflix::before,
.hero-section-netflix::after,
.content-section::before,
.navbar::before,
.navbar::after,
.footer-netflix::before {
    pointer-events: none !important;
    user-select: none !important;
}

/* Ensure interactive content is always clickable */
.navbar,
.nav-link,
.logo,
.user-actions,
.hero-content,
button:not(.floating-request-btn),
a,
input,
select,
textarea,
.modal,
.search-section,
.cartoon-card,
.content-card,
.play-btn,
.bookmark-btn,
form {
    position: relative;
    z-index: 1000;
    pointer-events: auto;
}

/* Ensure cartoon/content card children are also clickable */
.cartoon-card *,
.content-card *,
.cartoon-poster,
.cartoon-overlay,
.cartoon-info,
.cartoon-title,
.cartoon-meta,
.content-card img {
    pointer-events: auto;
}

/* Floating request button needs highest z-index */
.floating-request-btn {
    z-index: 9999 !important;
    pointer-events: auto !important;
}

/* Hero section content needs to be above overlay */
.hero-section-netflix > *,
.content-section > *,
.cartoons-grid,
.cartoons-grid > * {
    position: relative;
    z-index: 1000;
    pointer-events: auto;
}