/**
 * Valiasr Technical & Engineering Services - Unified Pure White Light Theme
 * Activated via: <html data-theme="light">
 */

/* ==========================================================================
   1. Design Tokens for Light Theme (Unified Pure White)
   ========================================================================== */
[data-theme="light"] {
  /* Pristine Pure White Canvas - 100% Unified */
  --bg-main: #ffffff;
  --bg-secondary: #ffffff;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f8fafc;
  --bg-glass: rgba(255, 255, 255, 0.96);
  --bg-glass-card: rgba(255, 255, 255, 0.95);

  /* Warm Amber / Gold Accents */
  --gold-primary: #d97706;
  --gold-light: #b45309;
  --gold-dark: #92400e;
  --gold-gradient: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
  --gold-glow: rgba(217, 119, 6, 0.18);
  --gold-glow-intense: rgba(217, 119, 6, 0.3);

  /* Razor-sharp Typography */
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --text-dark: #0f172a;
  --text-gold: #b45309;

  /* Borders & Dividers */
  --border-subtle: rgba(0, 0, 0, 0.06);
  --border-card: rgba(0, 0, 0, 0.08);
  --border-gold: rgba(217, 119, 6, 0.35);
  --border-gold-solid: #d97706;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.08);
  --shadow-gold: 0 0 20px rgba(217, 119, 6, 0.15);
}

/* ==========================================================================
   2. Global Typography & Canvas in Light Mode
   ========================================================================== */
[data-theme="light"] body {
  background-color: #ffffff !important;
  color: var(--text-primary) !important;
}

[data-theme="light"] .main-content {
  background-color: #ffffff !important;
  color: var(--text-primary) !important;
}

[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6,
[data-theme="light"] .section-title {
  color: #0f172a !important;
}

[data-theme="light"] p {
  color: #334155;
}

/* ==========================================================================
   3. Header Navigation in Light Mode
   ========================================================================== */
[data-theme="light"] .site-header {
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .header-brand .brand-title {
  color: #0f172a !important;
}

[data-theme="light"] .header-brand .brand-subtitle {
  color: #64748b !important;
}

[data-theme="light"] .nav-link {
  color: #334155 !important;
  background: transparent !important;
  border: none !important;
}

[data-theme="light"] .nav-link:hover,
[data-theme="light"] .nav-link.active {
  color: #d97706 !important;
  background: transparent !important;
  border: none !important;
}

[data-theme="light"] .header-contact-box {
  background: #f8fafc !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .header-phone-main {
  color: #0f172a !important;
}

[data-theme="light"] .header-phone-sub {
  color: #64748b !important;
}

[data-theme="light"] .site-header.scrolled {
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .mobile-nav-toggle {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="light"] .mobile-nav-toggle:hover,
[data-theme="light"] .mobile-nav-toggle.active {
  background: #fef3c7 !important;
  border-color: #d97706 !important;
  color: #b45309 !important;
}

/* Light Mode Mobile Navigation Drawer (ONLY on Mobile/Tablet) */
@media (max-width: 1024px) {
  [data-theme="light"] .header-nav {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-bottom: 2px solid #d97706 !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12) !important;
  }

  [data-theme="light"] .header-nav .nav-link {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
    font-weight: 700 !important;
  }

  [data-theme="light"] .header-nav .nav-link:hover,
  [data-theme="light"] .header-nav .nav-link.active {
    background: #fef3c7 !important;
    border-color: #d97706 !important;
    color: #b45309 !important;
  }
}

/* ==========================================================================
   4. Hero Section in Light Mode (Crystal Clear Appliances & Pure White Blend)
   ========================================================================== */
[data-theme="light"] .hero-cinematic-section {
  background-color: #ffffff !important;
  background-image: url('/static/images/hero_full_bg.jpg') !important;
  border-bottom: none !important;
  border: none !important;
}

/* 100% transparent on the appliance stage (0-40%), smoothly transitions to pure white #ffffff on the text side */
[data-theme="light"] .hero-cinematic-section::before {
  background: linear-gradient(90deg, transparent 0%, transparent 40%, rgba(255, 255, 255, 0.75) 60%, rgba(255, 255, 255, 0.98) 85%, #ffffff 100%) !important;
}

[data-theme="light"] .hero-agency-tag {
  color: #b45309 !important;
}

[data-theme="light"] .hero-main-title {
  color: #0f172a !important;
  text-shadow: none !important;
}

[data-theme="light"] .hero-sub-title {
  color: #d97706 !important;
  text-shadow: none !important;
}

[data-theme="light"] .hero-cinematic-desc {
  color: #334155 !important;
}

[data-theme="light"] .hero-cinematic-section .btn-outline-gold {
  background: #ffffff !important;
  color: #b45309 !important;
  border-color: #d97706 !important;
}

[data-theme="light"] .hero-cinematic-section .btn-outline-gold:hover {
  background: #f8fafc !important;
}

/* Mobile & Tablet Light Mode Hero Readability Overhaul */
@media (max-width: 1024px) {
  [data-theme="light"] .hero-cinematic-section::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.8) 40%, rgba(255, 255, 255, 0.95) 100%) !important;
  }

  [data-theme="light"] .hero-agency-tag {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid var(--border-gold) !important;
    padding: 0.35rem 0.95rem !important;
    border-radius: 9999px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06) !important;
    color: #b45309 !important;
  }

  [data-theme="light"] .hero-main-title {
    color: #0f172a !important;
    text-shadow: 0 1px 12px rgba(255, 255, 255, 0.9), 0 0 5px rgba(255, 255, 255, 0.8) !important;
  }

  [data-theme="light"] .hero-sub-title {
    color: #b45309 !important;
    text-shadow: 0 1px 10px rgba(255, 255, 255, 0.9) !important;
  }

  [data-theme="light"] .hero-cinematic-desc {
    color: #1e293b !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 8px rgba(255, 255, 255, 0.95) !important;
  }

  [data-theme="light"] .hero-cinematic-actions .btn-outline-gold {
    background: #ffffff !important;
    border: 1.5px solid #d97706 !important;
    color: #b45309 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06) !important;
  }
}

/* ==========================================================================
   5. Buttons in Light Mode
   ========================================================================== */
[data-theme="light"] .btn-outline-gold {
  background: #ffffff;
  color: #b45309;
  border-color: #d97706;
}

[data-theme="light"] .btn-outline-gold:hover {
  background: #f8fafc;
  color: #92400e;
  border-color: #b45309;
}

/* ==========================================================================
   6. Sections, Cards & Badges in Light Mode (Pure White Continuous Canvas)
   ========================================================================== */
[data-theme="light"] .services-circle-section {
  background-color: #ffffff !important;
  border: none !important;
}

[data-theme="light"] .service-circle-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .service-circle-card:hover {
  background: #ffffff !important;
  border-color: var(--gold-primary) !important;
  box-shadow: 0 8px 24px rgba(217, 119, 6, 0.15) !important;
}

[data-theme="light"] .service-circle-title {
  color: #0f172a !important;
}

[data-theme="light"] .service-circle-desc {
  color: #64748b !important;
}

[data-theme="light"] .service-circle-link {
  color: #d97706 !important;
}

[data-theme="light"] .brands-agency-section {
  background: #ffffff !important;
  border: none !important;
}

[data-theme="light"] .brand-agency-card {
  background: #ffffff !important;
  border: 1.5px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .brand-agency-card:hover {
  background: #ffffff !important;
  border-color: var(--gold-primary) !important;
  box-shadow: 0 8px 25px rgba(217, 119, 6, 0.15) !important;
}

[data-theme="light"] .product-card {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .product-img-wrap {
  background-color: #f8fafc !important;
}

[data-theme="light"] .product-title {
  color: #0f172a !important;
}

[data-theme="light"] .product-price-val {
  color: #b45309 !important;
}

[data-theme="light"] .product-price-date {
  color: #64748b !important;
}

[data-theme="light"] .service-catalog-card {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .service-catalog-title a,
[data-theme="light"] .service-catalog-title {
  color: #0f172a !important;
}

[data-theme="light"] .service-catalog-desc {
  color: #334155 !important;
}

[data-theme="light"] .service-catalog-img-wrap {
  background: #f8fafc !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}

/* Educational Article Cards in Light Mode */
[data-theme="light"] .article-title-link,
[data-theme="light"] article h2 a,
[data-theme="light"] article h3 a {
  color: #0f172a !important;
}

[data-theme="light"] .article-title-link:hover,
[data-theme="light"] article h2 a:hover,
[data-theme="light"] article h3 a:hover {
  color: #d97706 !important;
}

[data-theme="light"] article {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] article p {
  color: #475569 !important;
}

/* ==========================================================================
   7. Service Warranty Banner in Light Mode (Pure White, Seamless)
   ========================================================================== */
[data-theme="light"] .warranty-banner-section {
  background: #ffffff !important;
  border: none !important;
}

[data-theme="light"] .warranty-banner-title {
  color: #0f172a !important;
}

[data-theme="light"] .warranty-banner-desc {
  color: #334155 !important;
}

/* ==========================================================================
   8. Page Banners & Breadcrumbs across Subpages
   ========================================================================== */
[data-theme="light"] section[style*="background: radial-gradient"],
[data-theme="light"] section[style*="background: var(--bg-main)"] {
  background: #ffffff !important;
  border: none !important;
}

[data-theme="light"] div[style*="background: var(--bg-secondary)"] {
  background: #ffffff !important;
}

[data-theme="light"] div[style*="background: var(--bg-card)"],
[data-theme="light"] article[style*="background: var(--bg-card)"],
[data-theme="light"] aside div[style*="background: var(--bg-card)"] {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] div[style*="background: var(--bg-surface)"] {
  background: #f8fafc !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}

/* Tables in Product Detail & Tech Specs */
[data-theme="light"] table {
  background: #ffffff !important;
}

[data-theme="light"] th {
  background: #f8fafc !important;
  color: #0f172a !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] td {
  color: #334155 !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}

/* ==========================================================================
   9. Trust Feature Bar & Footer in Light Mode (Pure White, Seamless)
   ========================================================================== */
[data-theme="light"] .trust-feature-bar {
  background: #ffffff !important;
  border: none !important;
}

[data-theme="light"] .trust-feature-item {
  color: #334155 !important;
  border: none !important;
}

[data-theme="light"] .site-footer {
  background-color: #ffffff !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
  color: #334155 !important;
}

[data-theme="light"] .site-footer h4,
[data-theme="light"] .footer-title {
  color: #0f172a !important;
}

[data-theme="light"] .site-footer p,
[data-theme="light"] .site-footer span {
  color: #334155 !important;
}

[data-theme="light"] .site-footer strong {
  color: #0f172a !important;
}

[data-theme="light"] .footer-links a {
  color: #475569 !important;
}

[data-theme="light"] .footer-links a:hover {
  color: #d97706 !important;
}

[data-theme="light"] .footer-bottom {
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
  color: #64748b !important;
}

/* Sticky Mobile CTA in Light Mode */
[data-theme="light"] .sticky-mobile-cta {
  background: rgba(255, 255, 255, 0.96) !important;
  border-top-color: rgba(217, 119, 6, 0.3) !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08) !important;
}

/* About & Contact Pages in Light Mode */
[data-theme="light"] .about-stat-card,
[data-theme="light"] .about-pillar-box,
[data-theme="light"] .about-agencies-box,
[data-theme="light"] .contact-info-card,
[data-theme="light"] .contact-form-box,
[data-theme="light"] .contact-map-box {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .about-story-img-wrap {
  border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .contact-input,
[data-theme="light"] .contact-select,
[data-theme="light"] .contact-textarea {
  background: #f8fafc !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: #0f172a !important;
}

[data-theme="light"] .contact-map-frame {
  background: #f8fafc !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Search Modal & Search Results in Light Mode */
[data-theme="light"] .search-modal-box {
  background: #ffffff !important;
  border-color: var(--gold-primary) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12), 0 0 25px rgba(217, 119, 6, 0.15) !important;
}

[data-theme="light"] .search-modal-input {
  background: #f8fafc !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: #0f172a !important;
}

[data-theme="light"] .search-modal-quick-links a {
  background: #f1f5f9 !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #334155 !important;
}

[data-theme="light"] .search-input-field {
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .search-tab-btn {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #334155 !important;
}

[data-theme="light"] .search-tab-btn.active {
  background: var(--gold-primary) !important;
  color: #ffffff !important;
  border-color: var(--gold-primary) !important;
}

[data-theme="light"] .search-service-card {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .search-empty-box {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .search-suggestion-pill {
  background: #f8fafc !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #334155 !important;
}

/* ==========================================================================
   10. Theme Switcher Button Styling
   ========================================================================== */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid var(--border-subtle);
  color: var(--gold-light);
  cursor: pointer;
  transition: all 0.25s ease;
  flex-shrink: 0;
}

.theme-toggle-btn:hover {
  background: rgba(245, 158, 11, 0.15);
  border-color: var(--gold-primary);
  transform: scale(1.06);
}

.theme-icon-sun {
  display: block;
}
.theme-icon-moon {
  display: none;
}

[data-theme="light"] .theme-icon-sun {
  display: none;
}
[data-theme="light"] .theme-icon-moon {
  display: block;
}

[data-theme="light"] .theme-toggle-btn {
  background: #f8fafc;
  border-color: rgba(0, 0, 0, 0.12);
  color: #b45309;
}

[data-theme="light"] .theme-toggle-btn:hover {
  background: #f1f5f9;
  border-color: #d97706;
}

/* ==========================================================================
   Breadcrumbs & Catalog Hero in Light Mode (Pure White & Seamless)
   ========================================================================== */
[data-theme="light"] .breadcrumb-nav-wrapper,
[data-theme="light"] .breadcrumb-wrapper,
[data-theme="light"] div[class*="breadcrumb"] {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

[data-theme="light"] .breadcrumb-nav-wrapper a {
  color: #64748b !important;
}

[data-theme="light"] .breadcrumb-nav-wrapper a:hover {
  color: #d97706 !important;
}

[data-theme="light"] .breadcrumb-nav-wrapper span {
  color: #334155;
}

[data-theme="light"] .catalog-hero-section {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

[data-theme="light"] .catalog-hero-section h1 {
  color: #0f172a !important;
}

[data-theme="light"] .catalog-hero-section p {
  color: #334155 !important;
}

/* Catalog Sidebar Filter Links in Light Mode (Pure Black & High Contrast) */
[data-theme="light"] .catalog-sidebar-link {
  color: #0f172a !important;
  font-weight: 600;
}

[data-theme="light"] .catalog-sidebar-link span {
  color: #0f172a !important;
}

[data-theme="light"] .catalog-sidebar-link:hover {
  background: #f1f5f9 !important;
  color: #d97706 !important;
}

[data-theme="light"] .catalog-sidebar-link:hover span {
  color: #d97706 !important;
}

[data-theme="light"] .catalog-sidebar-link.active {
  background: rgba(217, 119, 6, 0.12) !important;
  color: #b45309 !important;
  font-weight: 800;
}

[data-theme="light"] .catalog-sidebar-link.active span {
  color: #b45309 !important;
}

/* Page Hero Headers in Light Mode (Pure White & Seamless) */
[data-theme="light"] .page-hero-header {
  background-color: #ffffff !important;
  background-image: none !important;
  background: #ffffff !important;
  border: none !important;
  border-bottom: none !important;
}

[data-theme="light"] .page-hero-header h1 {
  color: #0f172a !important;
}

[data-theme="light"] .page-hero-header p {
  color: #334155 !important;
}

/* CTA & Fast Assistance Banners in Light Mode (Pure White Canvas) */
[data-theme="light"] .cta-banner-section {
  background-color: #ffffff !important;
  background-image: none !important;
  background: #ffffff !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
}

[data-theme="light"] .cta-banner-section h2,
[data-theme="light"] .cta-banner-section h3 {
  color: #0f172a !important;
}

[data-theme="light"] .cta-banner-section p {
  color: #334155 !important;
}

/* Failsafe: Ensure any gradient banners immediately become pure white in light mode */
/* Quick Specs Modal Light Mode */
[data-theme="light"] .specs-modal-overlay {
  background: rgba(15, 23, 42, 0.55);
}
[data-theme="light"] .specs-modal-dialog {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(217, 119, 6, 0.3) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.18), 0 0 30px rgba(217, 119, 6, 0.1) !important;
}
[data-theme="light"] .specs-modal-header {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
[data-theme="light"] .specs-modal-header h3 {
  color: #0f172a !important;
}
[data-theme="light"] .specs-modal-body {
  background: #ffffff !important;
}
[data-theme="light"] .specs-modal-subtitle {
  color: #64748b !important;
}
[data-theme="light"] .specs-modal-row {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}
[data-theme="light"] .specs-modal-row:hover {
  background: rgba(245, 158, 11, 0.08) !important;
  border-color: rgba(217, 119, 6, 0.35) !important;
}
[data-theme="light"] .specs-modal-key {
  color: #334155 !important;
  font-weight: 700 !important;
}
[data-theme="light"] .specs-modal-val {
  color: #b45309 !important; /* Bold high-contrast Amber in light mode */
  font-weight: 800 !important;
}
[data-theme="light"] .specs-modal-footer {
  background: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
}
[data-theme="light"] .specs-modal-close {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
}