/* 
 * PIKDECOR THEME SYSTEM
 * Handles Dark (Default) and Light Modes
 */

:root {
    /* DEFAULT: DARK MODE */
    --gold: #FFD700;
    --gold-dark: #B45309;
    --gold-light: #FFF2A1;
    --bg-color: #020617;
    --nav-bg: rgba(2, 6, 23, 0.9);
    --text-primary: #FFFFFF;
    --text-secondary: rgba(255, 255, 255, 0.6);
    --border-color: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(247, 198, 0, 0.85);
    --card-bg: #0f172a;
    --search-bg: rgba(0, 0, 0, 0.3);
    --shadow-color: rgba(0, 0, 0, 0.6);
    --indicator-btn-color: #020617;
}

/* LIGHT MODE OVERRIDES */
body.light-mode {
    --bg-color: #F1F5F9;
    --nav-bg: rgba(255, 255, 255, 0.9);
    --text-primary: #00030F;
    --text-secondary: #00030F;
    --border-color: rgba(0, 0, 0, 0.15);
    --glass-border: rgba(217, 119, 6, 0.8);
    --card-bg: #FFFFFF;
    --search-bg: rgba(0, 0, 0, 0.05);
    --shadow-color: rgba(0, 0, 0, 0.1);
    --indicator-btn-color: #FFFFFF;
}

/* Global transitions for theme switching */
body {
    background-color: var(--bg-color) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Theme Toggle Button Styles */
.theme-toggle-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--search-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-toggle-btn:hover {
    border-color: var(--gold);
    transform: rotate(15deg) scale(1.1);
}

.light-mode .theme-toggle-btn {
    background: #FFFFFF;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Icon Visibility Logic */
.sun-icon {
    display: block;
}

.moon-icon {
    display: none;
}

.light-mode .sun-icon {
    display: none;
}

.light-mode .moon-icon {
    display: block;
}

/* Component Overrides for Light Mode */
body.light-mode .header-glass {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

body.light-mode .nav-pill-link {
    color: var(--text-secondary);
}

body.light-mode .nav-pill-link:hover {
    color: var(--text-primary);
}

body.light-mode .nav-pill-link.active,
body.light-mode .nav-pill-link.is-hovered {
    color: var(--indicator-btn-color) !important;
}

body.light-mode .search-input {
    color: var(--text-primary);
}

body.light-mode .search-results,
body.light-mode .dropdown-menu {
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

body.light-mode .search-results a:hover {
    background: rgba(0, 0, 0, 0.02);
}

body.light-mode #mobile-menu-content {
    background: #FFFFFF;
}

/* Advanced Contrast Overrides for Light Mode */
body.light-mode .text-amber-500,
body.light-mode .text-gold,
body.light-mode .text-amber-400,
body.light-mode .text-amber-500\/80 {
    color: #00030F !important;
}

body.light-mode .bg-amber-500\/10 {
    background-color: rgba(217, 119, 6, 0.1) !important;
}

body.light-mode .border-amber-500\/20 {
    border-color: rgba(217, 119, 6, 0.2) !important;
}

/* THE NUCLEAR OPTION FOR LIGHT MODE TEXT - Force absolute contrast */
/* Refined: Exclude alignment and decoration classes from broad attribute selection */
body.light-mode [class*="text-"]:not(.hero-wrapper *):not(.sidebar-filter *):not(.floating-tools *):not(#mobile-filter-drawer *):not(.masonry-grid *):not(.neon-glow *):not(.soft-card *):not(.swal2-popup *):not(#auth-modal *):not([class*="text-center"]):not([class*="text-left"]):not([class*="text-right"]):not(.text-transparent):not(.bg-clip-text),
body.light-mode span:not(.hero-wrapper *):not(.sidebar-filter *):not(.floating-tools *):not(#mobile-filter-drawer *):not(.masonry-grid *):not(.neon-glow *):not(.soft-card *):not(.swal2-popup *):not(#auth-modal *),
body.light-mode p:not(.hero-wrapper *):not(.sidebar-filter *):not(.floating-tools *):not(#mobile-filter-drawer *):not(.masonry-grid *):not(.neon-glow *):not(.soft-card *):not(.swal2-popup *):not(#auth-modal *),
body.light-mode h1:not(.hero-wrapper *):not(.sidebar-filter *):not(.floating-tools *):not(#mobile-filter-drawer *):not(.masonry-grid *):not(.neon-glow *):not(.soft-card *):not(.swal2-popup *):not(#auth-modal *),
body.light-mode h2:not(.hero-wrapper *):not(.sidebar-filter *):not(.floating-tools *):not(#mobile-filter-drawer *):not(.masonry-grid *):not(.neon-glow *):not(.soft-card *):not(.swal2-popup *):not(#auth-modal *),
body.light-mode h3:not(.hero-wrapper *):not(.sidebar-filter *):not(.floating-tools *):not(#mobile-filter-drawer *):not(.masonry-grid *):not(.neon-glow *):not(.soft-card *):not(.swal2-popup *):not(#auth-modal *),
body.light-mode h4:not(.hero-wrapper *):not(.sidebar-filter *):not(.floating-tools *):not(#mobile-filter-drawer *):not(.masonry-grid *):not(.neon-glow *):not(.soft-card *):not(.swal2-popup *):not(#auth-modal *),
body.light-mode h5:not(.hero-wrapper *):not(.sidebar-filter *):not(.floating-tools *):not(#mobile-filter-drawer *):not(.masonry-grid *):not(.neon-glow *):not(.soft-card *):not(.swal2-popup *):not(#auth-modal *),
body.light-mode h6:not(.hero-wrapper *):not(.sidebar-filter *):not(.floating-tools *):not(#mobile-filter-drawer *):not(.masonry-grid *):not(.neon-glow *):not(.soft-card *):not(.swal2-popup *):not(#auth-modal *),
body.light-mode h6:not(.hero-wrapper *):not(.sidebar-filter *):not(.floating-tools *):not(#mobile-filter-drawer *):not(.masonry-grid *):not(.neon-glow *):not(.soft-card *):not(.swal2-popup *):not(#auth-modal *),
body.light-mode a:not(.hero-wrapper *):not(.sidebar-filter *):not(.floating-tools *):not(#mobile-filter-drawer *):not(.masonry-grid *):not(.neon-glow *):not(.soft-card *):not(.swal2-popup *):not(#auth-modal *):not(.btn-primary):not(.btn-gold):not([class*="bg-amber"]),
body.light-mode i:not(.hero-wrapper *):not(.sidebar-filter *):not(.floating-tools *):not(#mobile-filter-drawer *):not(.masonry-grid *):not(.neon-glow *):not(.soft-card *):not(.swal2-popup *):not(#auth-modal *):not(.fa-heart):not(.fa-fire):not(.fa-crown):not(.fa-gem):not(.fa-bolt) {
    color: #00030F !important;
    -webkit-text-fill-color: #00030F !important;
}

/* Force opacity: 1 ONLY for actual text tags, NOT for div-based containers/overlays */
body.light-mode p:not(.hero-wrapper *):not(.sidebar-filter *):not(.floating-tools *):not(.masonry-grid *):not(.neon-glow *):not(.soft-card *):not(.swal2-popup *):not(#auth-modal *),
body.light-mode span:not(.hero-wrapper *):not(.sidebar-filter *):not(.floating-tools *):not(.masonry-grid *):not(.neon-glow *):not(.soft-card *):not(.swal2-popup *):not(#auth-modal *),
body.light-mode h1:not(.masonry-grid *):not(.neon-glow *):not(.soft-card *):not(.swal2-popup *):not(#auth-modal *),
body.light-mode h2:not(.masonry-grid *):not(.neon-glow *):not(.soft-card *):not(.swal2-popup *):not(#auth-modal *),
body.light-mode h3:not(.masonry-grid *):not(.neon-glow *):not(.soft-card *):not(.swal2-popup *):not(#auth-modal *),
body.light-mode h4:not(.masonry-grid *):not(.neon-glow *):not(.soft-card *):not(.swal2-popup *):not(#auth-modal *),
body.light-mode h5:not(.masonry-grid *):not(.neon-glow *):not(.soft-card *):not(.swal2-popup *):not(#auth-modal *),
body.light-mode h6:not(.masonry-grid *):not(.neon-glow *):not(.soft-card *):not(.swal2-popup *):not(#auth-modal *),
body.light-mode a:not(.hero-wrapper *):not(.sidebar-filter *):not(.floating-tools *):not(.masonry-grid *):not(.neon-glow *):not(.soft-card *):not(.swal2-popup *):not(#auth-modal *),
body.light-mode img:not(.hero-wrapper *):not(.sidebar-filter *):not(.floating-tools *) {
    opacity: 1 !important;
}

/* DARK SECTIONS RESTORE: Sections that must remain dark themed */
/* Force light text for everything in these containers to override ANY atomic text class */
body.light-mode .hero-wrapper *,
body.light-mode .sidebar-filter *,
body.light-mode .floating-tools *,
body.light-mode #mobile-filter-drawer *,
body.light-mode aside[class*="sidebar"] *,
body.light-mode div[class*="toolbar"] *,
body.light-mode .masonry-grid *,
body.light-mode .neon-glow *,
body.light-mode .soft-card *,
body.light-mode .swal2-popup *,
body.light-mode #auth-modal *:not(button):not(button *) {
    color: white !important;
    -webkit-text-fill-color: white !important;
}

/* Force dark text for buttons in Auth Modal (Gold/White backgrounds) */
body.light-mode #auth-modal button,
body.light-mode #auth-modal button * {
    color: #00030f !important;
    -webkit-text-fill-color: #00030f !important;
    opacity: 1 !important;
}

/* Only force opacity: 1 for text elements in dark sections to avoid revealing hidden overlays */
body.light-mode .hero-wrapper span,
body.light-mode .hero-wrapper p,
body.light-mode .hero-wrapper h1,
body.light-mode .hero-wrapper h2,
body.light-mode .hero-wrapper h3,
body.light-mode .hero-wrapper h4,
body.light-mode .hero-wrapper h5,
body.light-mode .hero-wrapper h6,
body.light-mode .hero-wrapper a,
body.light-mode .sidebar-filter span,
body.light-mode .sidebar-filter p,
body.light-mode .sidebar-filter a,
body.light-mode .floating-tools span,
body.light-mode .floating-tools p,
body.light-mode .floating-tools a {
    opacity: 1 !important;
}

/* Restore specific accent colors and semi-transparent text in dark sections */
body.light-mode .hero-wrapper [class*="text-amber-"],
body.light-mode .sidebar-filter [class*="text-amber-"],
body.light-mode .sidebar-filter [class*="text-cyan-"],
body.light-mode .sidebar-filter [class*="text-orange-"],
body.light-mode .sidebar-filter [class*="text-green-"],
body.light-mode .sidebar-filter [class*="text-blue-"],
body.light-mode .sidebar-filter [class*="text-purple-"],
body.light-mode .sidebar-filter [class*="text-red-"],
body.light-mode .sidebar-filter [class*="text-pink-"],
body.light-mode .floating-tools [class*="text-cyan-"],
body.light-mode .floating-tools [class*="text-amber-"] {
    color: inherit !important;
    -webkit-text-fill-color: initial !important;
}

/* Fix for semi-transparent text and specific utility colors in dark areas */
body.light-mode .sidebar-filter .text-white\/20,
body.light-mode .sidebar-filter .text-white\/40,
body.light-mode .sidebar-filter .text-white\/60,
body.light-mode .sidebar-filter [class*="text-white\/"],
body.light-mode .sidebar-filter .text-gray-400,
body.light-mode .sidebar-filter .text-slate-400,
body.light-mode .sidebar-filter .text-slate-500 {
    color: rgba(255, 255, 255, 0.45) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.45) !important;
}

/* Explicitly PROTECT opacity of design elements and hidden overlays */
body.light-mode .opacity-0 {
    opacity: 0 !important;
}

body.light-mode .opacity-10 {
    opacity: 0.1 !important;
}

body.light-mode .opacity-20 {
    opacity: 0.2 !important;
}

body.light-mode .soft-card .absolute.inset-0.opacity-0:not(:hover) {
    opacity: 0 !important;
}

/* Ensure hover states also maintain contrast if not specifically white on dark */
body.light-mode a:hover,
body.light-mode .group:hover * {
    opacity: 1 !important;
}

/* Ensure hover in dark sections doesn't trigger black text */
body.light-mode .hero-wrapper a:hover,
body.light-mode .sidebar-filter a:hover,
body.light-mode .floating-tools a:hover,
body.light-mode .hero-wrapper .group:hover *,
body.light-mode .sidebar-filter .group:hover *,
body.light-mode .floating-tools .group:hover * {
    color: white !important;
    -webkit-text-fill-color: white !important;
}

/* Glass Card Refinement for Light Mode */
body.light-mode .glass-card {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: blur(24px);
}

/* Text Gradient for Light Mode - Avoid pale gold/white */
body.light-mode .text-gradient {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    color: #00030F !important;
}

/* Homepage Specific Refinements for Light Mode */
body.light-mode .trending-shimmer {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    color: #00030F !important;
}

/* Homepage Buttons Refinement */
body.light-mode a[href*="cat="].bg-white\/5 {
    background-color: rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #00030F !important;
}

body.light-mode a[href*="cat="].bg-white\/5:hover {
    background-color: #00030F !important;
    color: #FFFFFF !important;
}

/* Thumbnail Area Styling */
body.light-mode #zoom-area {
    background: #FFFFFF !important;
}

body.light-mode #zoom-area .bg-\[\#020617\] {
    background-color: #F1F5F9 !important;
}

/* Thumbnail Border Consistency */
.thumb-border-gold {
    border: 3px solid #FFD700 !important;
}