/* ═══════════════════════════════════════════════════════════════════════
   SERVA — Premium Light Theme
   Comprehensive White-Mode Override
   Version: 1.0 — 2026-07-07
   ═══════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────
   1. ENHANCED CSS VARIABLES
   ───────────────────────────────────────────── */
:root[data-theme="light"] {
    color-scheme: light;

    /* Primary Palette — richer, warmer */
    --primary: #0080d4;
    --primary-dark: #005fa3;
    --primary-light: #2eb8ff;
    --secondary: #0070b8;
    --accent: #0095e0;
    --accent-hover: #007dc4;

    /* Backgrounds — soft, airy */
    --bg-dark: #f6faff;
    --bg-card: #ffffff;
    --bg-card-hover: #ffffff;
    --bg-input: #f0f6fd;

    /* Text — crisp contrast */
    --text-primary: #0d1f33;
    --text-secondary: #4d6a82;
    --text-muted: #7e95a9;

    /* Silver/Metallic — adapted for light */
    --silver: #5c7a94;
    --silver-light: #374f66;

    /* Status Colors — softer on light */
    --success: #0d9668;
    --warning: #c08600;
    --error: #d93050;
    --info: #0088cc;

    /* Gradients — light-optimized */
    --gradient-primary: linear-gradient(135deg, #0088dd 0%, #006ab8 100%);
    --gradient-accent: linear-gradient(135deg, #6ad8ff 0%, #0095dd 54%, #0070b8 100%);
    --gradient-dark: linear-gradient(180deg, #f0f7ff 0%, #fafcff 100%);
    --gradient-card: linear-gradient(145deg, #ffffff 0%, #f4f9ff 100%);
    --gradient-glow: linear-gradient(135deg, #009ee6 0%, #5ad2ff 50%, #006cb5 100%);

    /* Shadows — refined blue-tinted */
    --shadow-sm: 0 1px 3px rgba(0, 40, 100, 0.04), 0 1px 2px rgba(0, 40, 100, 0.03);
    --shadow-md: 0 4px 16px rgba(0, 50, 110, 0.07), 0 1px 4px rgba(0, 40, 100, 0.04);
    --shadow-lg: 0 12px 40px rgba(0, 50, 110, 0.10), 0 4px 12px rgba(0, 40, 100, 0.05);
    --shadow-glow: 0 4px 20px rgba(0, 130, 210, 0.14);
    --shadow-glow-strong: 0 8px 36px rgba(0, 130, 210, 0.18);

    /* Borders — barely there */
    --border-color: rgba(0, 70, 150, 0.08);
}


/* ─────────────────────────────────────────────
   2. BODY, COSMIC BACKGROUND CLEANUP
   ───────────────────────────────────────────── */

/* Page background */
:root[data-theme="light"] body {
    background: linear-gradient(180deg, #eef5ff 0%, #f6faff 18%, #fafcff 60%, #f7faff 100%);
    color: var(--text-primary);
}

/* Remove nebula */
:root[data-theme="light"] body::before {
    background:
        radial-gradient(ellipse 600px 400px at 10% 5%, rgba(0, 140, 220, 0.06) 0%, transparent 70%),
        radial-gradient(ellipse 500px 350px at 90% 0%, rgba(0, 110, 190, 0.04) 0%, transparent 70%);
}

:root[data-theme="light"] body::after {
    background: radial-gradient(ellipse 100% 60% at 50% -10%, rgba(0, 120, 210, 0.05) 0%, transparent 60%);
}

/* Hide stars completely */
:root[data-theme="light"] .stars-layer {
    display: none !important;
}


/* ─────────────────────────────────────────────
   3. HEADER — Frosted White Glass
   ───────────────────────────────────────────── */

/* Base header */
:root[data-theme="light"] body:not(.admin-page) .header {
    background: rgba(255, 255, 255, 0.82);
    border-bottom-color: rgba(0, 80, 160, 0.06);
    box-shadow: 0 4px 24px rgba(0, 50, 110, 0.06), 0 1px 0 rgba(0, 80, 160, 0.04);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Accent line under header */
:root[data-theme="light"] body:not(.admin-page) .header::after {
    background: linear-gradient(90deg, transparent, rgba(0, 130, 210, 0.28), transparent);
    opacity: 0.6;
}

/* Header content capsule */
:root[data-theme="light"] body:not(.admin-page) .header-content {
    border-color: rgba(0, 80, 160, 0.07);
    background:
        radial-gradient(circle at 20% 0%, rgba(0, 130, 220, 0.04), transparent 48%),
        linear-gradient(155deg, rgba(255, 255, 255, 0.92), rgba(248, 252, 255, 0.85));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 2px 12px rgba(0, 50, 110, 0.04);
}

/* Logo */
:root[data-theme="light"] body:not(.admin-page) .logo-img {
    border-color: rgba(0, 100, 180, 0.14);
    background: linear-gradient(155deg, rgba(240, 248, 255, 0.95), rgba(230, 244, 255, 0.85));
    filter: drop-shadow(0 2px 8px rgba(0, 100, 180, 0.12));
}

:root[data-theme="light"] .logo-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}

:root[data-theme="light"] body:not(.admin-page) .logo-text {
    text-shadow: none;
}

/* Navigation */
:root[data-theme="light"] .nav-link {
    color: var(--text-secondary);
}

:root[data-theme="light"] .nav-link:hover {
    color: var(--text-primary);
}

@media (min-width: 1025px) {
    :root[data-theme="light"] body:not(.admin-page) .nav-menu {
        border-color: rgba(0, 80, 160, 0.07);
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.7), rgba(248, 252, 255, 0.55));
    }

    :root[data-theme="light"] body:not(.admin-page) .nav-link {
        border-color: transparent;
    }

    :root[data-theme="light"] body:not(.admin-page) .nav-link:hover {
        border-color: rgba(0, 100, 180, 0.1);
        background: rgba(0, 120, 210, 0.05);
    }
}

/* Header action buttons */
:root[data-theme="light"] body:not(.admin-page) .header-actions .lang-btn,
:root[data-theme="light"] body:not(.admin-page) .header-actions .btn-secondary {
    border-color: rgba(0, 80, 160, 0.1);
    background: rgba(255, 255, 255, 0.82);
    color: var(--text-primary);
    box-shadow: 0 2px 8px rgba(0, 50, 110, 0.05);
}

:root[data-theme="light"] body:not(.admin-page) .header-actions .lang-btn:hover,
:root[data-theme="light"] body:not(.admin-page) .header-actions .btn-secondary:hover {
    background: #ffffff;
    border-color: rgba(0, 100, 180, 0.16);
    box-shadow: 0 4px 16px rgba(0, 50, 110, 0.08);
}

:root[data-theme="light"] body:not(.admin-page) .header-actions .btn-primary {
    background: var(--gradient-primary);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 100, 200, 0.2);
}

:root[data-theme="light"] body:not(.admin-page) .header-actions .btn-primary:hover {
    box-shadow: 0 6px 22px rgba(0, 100, 200, 0.28);
}


/* ─────────────────────────────────────────────
   4. HERO SECTION — Clean & Bold
   ───────────────────────────────────────────── */

/* Hero base */
:root[data-theme="light"] .hero {
    background: transparent;
}

:root[data-theme="light"] .hero::before {
    background:
        radial-gradient(ellipse 500px 400px at 20% 25%, rgba(0, 120, 220, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse 400px 350px at 80% 65%, rgba(0, 150, 230, 0.04) 0%, transparent 55%);
}

/* Fix: bottom fade must match light bg */
:root[data-theme="light"] .hero::after {
    background: linear-gradient(to top, #f6faff, transparent) !important;
}

:root[data-theme="light"] body:not(.admin-page) .hero.hero-summit::after {
    background: linear-gradient(to top, #f6faff, transparent) !important;
}

/* Orbs — very subtle on light */
:root[data-theme="light"] .hero-orb {
    opacity: 0.08;
    mix-blend-mode: multiply;
}

:root[data-theme="light"] .hero-orb-1 {
    background: radial-gradient(circle, rgba(0, 120, 220, 0.3) 0%, transparent 70%);
}

:root[data-theme="light"] .hero-orb-2 {
    background: radial-gradient(circle, rgba(0, 160, 240, 0.2) 0%, transparent 70%);
}

:root[data-theme="light"] .hero-orb-3 {
    background: radial-gradient(circle, rgba(0, 100, 200, 0.25) 0%, transparent 65%);
}

/* Hero Summit — Title */
:root[data-theme="light"] body:not(.admin-page) .hero.hero-summit .hero-summit-title {
    text-shadow: none;
}

:root[data-theme="light"] body:not(.admin-page) .hero.hero-summit .hero-summit-title span:first-child {
    color: #0d1f33;
}

:root[data-theme="light"] body:not(.admin-page) .hero.hero-summit .hero-summit-title span:last-child {
    color: var(--primary);
}

/* Hero Summit — Kicker */
:root[data-theme="light"] body:not(.admin-page) .hero.hero-summit .hero-summit-kicker {
    color: var(--text-secondary);
}

/* Hero Summit — Badge */
:root[data-theme="light"] body:not(.admin-page) .hero.hero-summit .hero-summit-badge {
    border-color: rgba(0, 100, 180, 0.14);
    background: rgba(0, 120, 210, 0.06);
    color: var(--primary);
    backdrop-filter: blur(8px);
}

:root[data-theme="light"] body:not(.admin-page) .hero.hero-summit .hero-summit-badge i {
    color: var(--primary);
}

/* Hero Summit — Subtitle */
:root[data-theme="light"] body:not(.admin-page) .hero.hero-summit .hero-summit-subtitle {
    color: var(--text-secondary);
}

/* Hero Summit — Pills */
:root[data-theme="light"] body:not(.admin-page) .hero.hero-summit .hero-summit-pill {
    border-color: rgba(0, 100, 180, 0.12);
    background: rgba(0, 120, 210, 0.05);
    color: var(--text-primary);
}

/* Hero Summit — Highlights */
:root[data-theme="light"] body:not(.admin-page) .hero.hero-summit .hero-summit-highlight {
    border-color: rgba(0, 80, 160, 0.07);
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    box-shadow: 0 2px 12px rgba(0, 50, 110, 0.05);
}

:root[data-theme="light"] body:not(.admin-page) .hero.hero-summit .hero-summit-highlight:hover {
    border-color: rgba(0, 100, 180, 0.14);
    box-shadow: 0 6px 24px rgba(0, 50, 110, 0.08);
}

:root[data-theme="light"] body:not(.admin-page) .hero.hero-summit .hero-summit-highlight i {
    background: var(--gradient-primary);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 100, 200, 0.18);
}

:root[data-theme="light"] body:not(.admin-page) .hero.hero-summit .hero-summit-highlight span {
    color: var(--text-muted);
}

:root[data-theme="light"] body:not(.admin-page) .hero.hero-summit .hero-summit-highlight strong {
    color: var(--text-primary);
}

/* Legacy Hero — Title */
:root[data-theme="light"] .hero-title span {
    color: var(--text-primary) !important;
    text-shadow: none !important;
}

:root[data-theme="light"] .hero-title span:first-child {
    background: linear-gradient(135deg, #0d1f33 0%, #1a3d5c 50%, #2a5070 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

:root[data-theme="light"] .hero-title span:last-child {
    background: linear-gradient(135deg, #0080d4 0%, #00a8e8 60%, #0070b8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Hero Badge */
:root[data-theme="light"] .hero-badge {
    background: rgba(0, 120, 210, 0.06);
    border-color: rgba(0, 100, 180, 0.12);
    color: var(--primary);
}

/* Hero Metric Cards */
:root[data-theme="light"] .hero-metric-card {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 80, 160, 0.07);
    backdrop-filter: blur(12px);
    box-shadow: 0 2px 12px rgba(0, 50, 110, 0.05);
}

:root[data-theme="light"] .hero-metric-card:hover {
    border-color: rgba(0, 100, 180, 0.14);
    box-shadow: 0 8px 28px rgba(0, 50, 110, 0.08);
}

:root[data-theme="light"] .hero-metric-card strong {
    color: var(--text-primary);
}

/* Hero Showcase */
:root[data-theme="light"] .hero-showcase {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 80, 160, 0.08);
    backdrop-filter: blur(16px);
    box-shadow: 0 8px 32px rgba(0, 50, 110, 0.07);
}

:root[data-theme="light"] .hero-showcase::before {
    background: linear-gradient(120deg, transparent 5%, rgba(0, 130, 220, 0.04) 50%, transparent 95%);
}

:root[data-theme="light"] .hero-showcase-header {
    color: var(--text-primary);
}

:root[data-theme="light"] .hero-live-row {
    border-color: rgba(0, 80, 160, 0.06);
    background: rgba(0, 100, 180, 0.03);
}

:root[data-theme="light"] .hero-live-row:hover {
    border-color: rgba(0, 100, 180, 0.12);
    background: rgba(0, 100, 180, 0.05);
}

:root[data-theme="light"] .hero-live-row span {
    color: var(--text-secondary);
}

:root[data-theme="light"] .hero-live-row strong {
    color: var(--primary);
}

:root[data-theme="light"] .hero-showcase-note {
    color: var(--text-secondary);
    border-color: rgba(0, 80, 160, 0.06);
    background: rgba(0, 100, 180, 0.03);
}

/* Hero Buttons */
:root[data-theme="light"] .hero-buttons .btn-primary {
    background: var(--gradient-primary);
    box-shadow: 0 4px 16px rgba(0, 100, 200, 0.22);
    border-color: transparent;
    animation: none;
}

:root[data-theme="light"] .hero-buttons .btn-primary:hover {
    box-shadow: 0 8px 28px rgba(0, 100, 200, 0.32);
}

/* Hero content logo (desktop) */
:root[data-theme="light"] body:not(.admin-page) .hero-content::before {
    filter: drop-shadow(0 2px 10px rgba(0, 100, 180, 0.12));
}

/* Hero Scroll Hint */
:root[data-theme="light"] .hero-scroll-hint {
    color: var(--primary);
}


/* ─────────────────────────────────────────────
   5. SEARCH BAND
   ───────────────────────────────────────────── */

:root[data-theme="light"] body:not(.admin-page) .home-search-panel .categories-search-box {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0, 80, 160, 0.08);
    box-shadow: 0 4px 20px rgba(0, 50, 110, 0.06);
}

:root[data-theme="light"] .services-search-box {
    background: rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(0, 80, 160, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 50, 110, 0.06);
}

:root[data-theme="light"] .services-search-box i {
    color: var(--text-muted);
}

:root[data-theme="light"] .services-search-input {
    color: var(--text-primary);
    background: transparent;
}

:root[data-theme="light"] .services-search-input::placeholder {
    color: #94a8ba;
}


/* ─────────────────────────────────────────────
   6. SECTION TITLES
   ───────────────────────────────────────────── */

:root[data-theme="light"] .section-title h2 {
    background: linear-gradient(135deg, #0d1f33 0%, #1a4060 50%, #0070b8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: none;
}

:root[data-theme="light"] .section-title p {
    color: var(--text-secondary);
}


/* ─────────────────────────────────────────────
   7. CATEGORIES
   ───────────────────────────────────────────── */

/* Category Card */
:root[data-theme="light"] .category-card {
    background: #ffffff;
    border-color: rgba(0, 70, 150, 0.07);
    backdrop-filter: none;
    box-shadow: 0 2px 12px rgba(0, 50, 110, 0.05), 0 0 0 1px rgba(0, 70, 150, 0.03);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

:root[data-theme="light"] .category-card:hover {
    border-color: rgba(0, 100, 180, 0.14);
    box-shadow: 0 12px 36px rgba(0, 50, 110, 0.10), 0 0 0 1px rgba(0, 100, 180, 0.06);
    transform: translateY(-5px);
}

:root[data-theme="light"] .category-card::before {
    background: linear-gradient(90deg, transparent, rgba(0, 120, 210, 0.35), transparent);
    opacity: 0;
    transform: scaleX(0.3);
}

:root[data-theme="light"] .category-card:hover::before {
    opacity: 0.5;
    transform: scaleX(0.7);
}

:root[data-theme="light"] .category-card::after {
    background: radial-gradient(circle, rgba(0, 120, 210, 0.06), transparent 72%);
    opacity: 0;
}

:root[data-theme="light"] .category-card:hover::after {
    opacity: 0.4;
}

:root[data-theme="light"] .category-card h3 {
    color: var(--text-primary);
}

:root[data-theme="light"] .category-card p {
    color: var(--text-secondary);
}

/* Category Media */
:root[data-theme="light"] .category-media {
    border-color: rgba(0, 80, 160, 0.08);
    background: linear-gradient(145deg, #f2f8ff, #e8f2fd);
    box-shadow: none;
}

:root[data-theme="light"] .category-image {
    filter: drop-shadow(0 2px 8px rgba(0, 80, 160, 0.08));
}


/* ─────────────────────────────────────────────
   8. SERVICES
   ───────────────────────────────────────────── */

/* Service Card */
:root[data-theme="light"] .service-card {
    background: #ffffff;
    border-color: rgba(0, 70, 150, 0.07);
    box-shadow: 0 2px 12px rgba(0, 50, 110, 0.05), 0 0 0 1px rgba(0, 70, 150, 0.03);
}

:root[data-theme="light"] .service-card:hover {
    border-color: rgba(0, 100, 180, 0.14);
    box-shadow: 0 14px 40px rgba(0, 50, 110, 0.10), 0 0 0 1px rgba(0, 100, 180, 0.06);
    transform: translateY(-4px);
}

:root[data-theme="light"] .service-card::before {
    background: linear-gradient(180deg, rgba(0, 120, 210, 0.03), transparent);
}

:root[data-theme="light"] .service-card::after {
    background: radial-gradient(circle, rgba(0, 120, 210, 0.05), transparent 72%);
    opacity: 0;
}

:root[data-theme="light"] .service-card:hover::after {
    opacity: 0.3;
}

/* Service Icon */
:root[data-theme="light"] .service-icon {
    background: linear-gradient(145deg, #f0f7ff, #e4f0fc);
    border-color: rgba(0, 80, 160, 0.1);
    box-shadow: 0 2px 8px rgba(0, 50, 110, 0.05);
}

/* Service card title */
:root[data-theme="light"] .service-name {
    color: var(--text-primary);
}

:root[data-theme="light"] .service-description {
    color: var(--text-secondary);
}

/* Service Price Panel */
:root[data-theme="light"] .service-price-panel {
    background: linear-gradient(135deg, rgba(0, 120, 210, 0.06), rgba(0, 90, 180, 0.03));
    border-color: rgba(0, 80, 160, 0.08);
}

:root[data-theme="light"] .service-price-row {
    border-top-color: rgba(0, 70, 150, 0.06);
}

:root[data-theme="light"] .service-footer {
    border-top-color: rgba(0, 70, 150, 0.06);
}

/* Service Facts Grid */
:root[data-theme="light"] .service-fact {
    background: rgba(0, 100, 180, 0.03);
    border-color: rgba(0, 80, 160, 0.06);
}

/* Service Emoji Chip */
:root[data-theme="light"] .service-emoji-chip {
    background: linear-gradient(145deg, #f0f7ff, #e4f0fc);
    border-color: rgba(0, 80, 160, 0.1);
    box-shadow: 0 2px 6px rgba(0, 50, 110, 0.05);
}

/* Service Category Chip */
:root[data-theme="light"] .service-category-chip {
    color: var(--text-secondary);
}

/* Status Chips — light-adapted */
:root[data-theme="light"] .service-status-available {
    color: #065f46;
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.2);
}

:root[data-theme="light"] .service-status-unavailable {
    color: #991b1b;
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.18);
}

:root[data-theme="light"] .service-guarantee-chip-active {
    color: #065f46;
    background: rgba(34, 211, 238, 0.08);
    border-color: rgba(34, 211, 238, 0.18);
}

:root[data-theme="light"] .service-guarantee-chip-none {
    color: #78350f;
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.18);
}

/* Service Compact Facts */
:root[data-theme="light"] .service-compact-fact {
    background: rgba(0, 100, 180, 0.03);
    border-color: rgba(0, 80, 160, 0.06);
}

:root[data-theme="light"] .service-compact-fact-limit .service-compact-fact-label {
    color: #1e60a0;
}

:root[data-theme="light"] .service-compact-fact-start .service-compact-fact-label {
    color: #0d7a62;
}

:root[data-theme="light"] .service-compact-fact-guarantee.service-guarantee-chip-active .service-compact-fact-label {
    color: #065f46;
}

:root[data-theme="light"] .service-compact-fact-guarantee.service-guarantee-chip-none {
    background: rgba(148, 163, 184, 0.08);
    border-color: rgba(148, 163, 184, 0.16);
}

:root[data-theme="light"] .service-compact-fact-guarantee.service-guarantee-chip-none .service-compact-fact-label {
    color: var(--text-muted);
}

:root[data-theme="light"] .service-compact-fact-guarantee.service-guarantee-chip-none .service-compact-fact-value {
    color: var(--text-secondary);
}

/* Service card unavailable */
:root[data-theme="light"] .service-card-unavailable {
    border-color: rgba(239, 68, 68, 0.14);
    box-shadow: 0 2px 12px rgba(239, 68, 68, 0.05);
}

:root[data-theme="light"] .service-card-unavailable::before {
    background: linear-gradient(180deg, rgba(248, 113, 113, 0.04), transparent);
}

/* Filters */
:root[data-theme="light"] .services-filters {
    background: transparent;
}

:root[data-theme="light"] .services-filters.service-subfilters {
    border-color: rgba(0, 100, 180, 0.08);
    background: rgba(255, 255, 255, 0.68);
    box-shadow: 0 8px 24px rgba(0, 50, 110, 0.06);
}

:root[data-theme="light"] .filter-btn {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(0, 80, 160, 0.08);
    color: var(--text-secondary);
    box-shadow: 0 1px 4px rgba(0, 50, 110, 0.04);
}

:root[data-theme="light"] .service-filter-count {
    background: rgba(0, 130, 210, 0.08);
    color: var(--primary);
}

:root[data-theme="light"] .filter-btn:hover,
:root[data-theme="light"] .filter-btn.active {
    background: #ffffff;
    border-color: rgba(0, 100, 180, 0.16);
    color: var(--primary);
    box-shadow: 0 4px 14px rgba(0, 50, 110, 0.07);
}

:root[data-theme="light"] .filter-btn:hover .service-filter-count,
:root[data-theme="light"] .filter-btn.active .service-filter-count {
    background: rgba(0, 130, 210, 0.12);
    color: var(--primary-dark);
}

/* Pagination */
:root[data-theme="light"] .pagination-btn {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(0, 80, 160, 0.08);
    color: var(--text-primary);
}

:root[data-theme="light"] .pagination-btn:hover:not(:disabled),
:root[data-theme="light"] .pagination-btn.active {
    background: rgba(0, 120, 210, 0.08);
    border-color: var(--primary);
    box-shadow: 0 2px 10px rgba(0, 120, 210, 0.1);
}


/* ─────────────────────────────────────────────
   9. FEATURES
   ───────────────────────────────────────────── */

:root[data-theme="light"] .feature-item,
:root[data-theme="light"] .feature-card {
    background: #ffffff;
    border-color: rgba(0, 70, 150, 0.07);
    backdrop-filter: none;
    box-shadow: 0 2px 12px rgba(0, 50, 110, 0.05);
}

:root[data-theme="light"] .feature-item:hover,
:root[data-theme="light"] .feature-card:hover {
    border-color: rgba(0, 100, 180, 0.14);
    box-shadow: 0 12px 36px rgba(0, 50, 110, 0.09);
    transform: translateY(-4px);
}

:root[data-theme="light"] .feature-icon {
    background: var(--gradient-primary);
    box-shadow: 0 4px 16px rgba(0, 100, 200, 0.16);
}

:root[data-theme="light"] .feature-item h3,
:root[data-theme="light"] .feature-card h3 {
    color: var(--text-primary);
}

:root[data-theme="light"] .feature-item p,
:root[data-theme="light"] .feature-card p {
    color: var(--text-secondary);
}


/* ─────────────────────────────────────────────
   10. TESTIMONIALS / REVIEWS
   ───────────────────────────────────────────── */

:root[data-theme="light"] .testimonials-summary,
:root[data-theme="light"] .reviews-summary {
    background: #ffffff;
    border-color: rgba(0, 70, 150, 0.07);
    backdrop-filter: none;
    box-shadow: 0 2px 16px rgba(0, 50, 110, 0.05);
}

:root[data-theme="light"] .testimonials-score-value {
    color: var(--primary);
}

:root[data-theme="light"] .testimonials-stars {
    color: #f59e0b;
}

:root[data-theme="light"] .testimonial-card,
:root[data-theme="light"] .review-card {
    background: #ffffff;
    border-color: rgba(0, 70, 150, 0.07);
    backdrop-filter: none;
    box-shadow: 0 2px 12px rgba(0, 50, 110, 0.04);
}

:root[data-theme="light"] .testimonial-card:hover,
:root[data-theme="light"] .review-card:hover {
    border-color: rgba(0, 100, 180, 0.14);
    box-shadow: 0 10px 30px rgba(0, 50, 110, 0.08);
    transform: translateY(-3px);
}

:root[data-theme="light"] .review-stars {
    color: #f59e0b;
}


/* ─────────────────────────────────────────────
   11. FOOTER — Warm Light Gray
   ───────────────────────────────────────────── */

:root[data-theme="light"] .footer {
    background: linear-gradient(180deg, #eef3fa, #e8eef6);
    border-top-color: rgba(0, 70, 150, 0.06);
    backdrop-filter: none;
}

:root[data-theme="light"] .footer-section h4 {
    color: var(--text-primary);
}

:root[data-theme="light"] .footer-section a {
    color: var(--text-secondary);
}

:root[data-theme="light"] .footer-section a:hover {
    color: var(--primary);
}

:root[data-theme="light"] .footer-bottom {
    border-top-color: rgba(0, 70, 150, 0.08);
    color: var(--text-muted);
}

:root[data-theme="light"] .payment-method {
    color: var(--text-secondary);
}

:root[data-theme="light"] .support-icon-link {
    border-color: rgba(0, 70, 150, 0.08);
    background: rgba(255, 255, 255, 0.6);
}

:root[data-theme="light"] .support-icon-link:hover {
    border-color: rgba(0, 100, 180, 0.18);
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 50, 110, 0.07);
}


/* ─────────────────────────────────────────────
   12. MODALS & FORMS
   ───────────────────────────────────────────── */

:root[data-theme="light"] .modal-overlay {
    background: rgba(230, 242, 255, 0.88);
    --particle-color: rgba(0, 100, 180, 0.08);
    backdrop-filter: blur(8px);
}

:root[data-theme="light"] .modal-overlay::before {
    background:
        radial-gradient(circle at 20% 80%, rgba(0, 130, 220, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(0, 150, 230, 0.04) 0%, transparent 52%);
}

:root[data-theme="light"] .modal-overlay .modal,
:root[data-theme="light"] .info-modal,
:root[data-theme="light"] .auth-modal {
    background: #ffffff;
    border-color: rgba(0, 70, 150, 0.08);
    box-shadow: 0 20px 60px rgba(0, 50, 110, 0.12), 0 0 0 1px rgba(0, 70, 150, 0.04);
    color: var(--text-primary);
}

:root[data-theme="light"] .modal-overlay .modal::before {
    opacity: 0.05;
}

:root[data-theme="light"] .modal-header h3 {
    color: var(--text-primary);
}

:root[data-theme="light"] .modal-close {
    color: var(--text-muted);
}

:root[data-theme="light"] .modal-close:hover {
    color: var(--text-primary);
}

/* Forms */
:root[data-theme="light"] .form-input,
:root[data-theme="light"] .form-select,
:root[data-theme="light"] .form-textarea {
    background-color: #f4f9ff;
    border-color: rgba(0, 70, 150, 0.09);
    color: var(--text-primary);
    box-shadow: inset 0 1px 2px rgba(0, 40, 100, 0.03);
}

:root[data-theme="light"] .form-input:focus,
:root[data-theme="light"] .form-select:focus,
:root[data-theme="light"] .form-textarea:focus {
    border-color: rgba(0, 120, 210, 0.28);
    box-shadow: 0 0 0 3px rgba(0, 120, 210, 0.08), inset 0 1px 2px rgba(0, 40, 100, 0.03);
}

:root[data-theme="light"] .form-input::placeholder,
:root[data-theme="light"] .form-textarea::placeholder {
    color: #94a8ba;
}

:root[data-theme="light"] .form-label {
    color: var(--text-secondary);
}


/* ─────────────────────────────────────────────
   13. BUTTONS
   ───────────────────────────────────────────── */

:root[data-theme="light"] .btn-primary {
    background: var(--gradient-primary);
    color: #ffffff;
    box-shadow: 0 3px 12px rgba(0, 100, 200, 0.18);
}

:root[data-theme="light"] .btn-primary:hover {
    box-shadow: 0 6px 22px rgba(0, 100, 200, 0.26);
    transform: translateY(-2px);
}

:root[data-theme="light"] .btn-secondary {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0, 80, 160, 0.1);
    color: var(--text-primary);
    box-shadow: 0 1px 4px rgba(0, 50, 110, 0.04);
}

:root[data-theme="light"] .btn-secondary:hover {
    background: #ffffff;
    border-color: rgba(0, 100, 180, 0.16);
    box-shadow: 0 4px 14px rgba(0, 50, 110, 0.07);
}

:root[data-theme="light"] .add-to-cart-btn {
    box-shadow: 0 3px 12px rgba(0, 100, 200, 0.16);
}


/* ─────────────────────────────────────────────
   14. SIDEBAR — Desktop App Shell
   ───────────────────────────────────────────── */

@media (min-width: 992px) {
    :root[data-theme="light"] body.app-shell:not(.admin-page) .header {
        background: rgba(255, 255, 255, 0.88);
        border-left-color: rgba(0, 80, 160, 0.06);
        box-shadow: -4px 0 24px rgba(0, 50, 110, 0.05);
        backdrop-filter: blur(20px);
    }

    :root[data-theme="light"] body.app-shell:not(.admin-page) .header::after {
        background: linear-gradient(180deg, transparent, rgba(0, 120, 210, 0.18), transparent);
        opacity: 0.5;
    }

    :root[data-theme="light"] body.app-shell:not(.admin-page) .header-content {
        border-color: rgba(0, 80, 160, 0.05);
        background: linear-gradient(155deg, rgba(255, 255, 255, 0.9), rgba(248, 252, 255, 0.8));
        box-shadow: none;
    }

    :root[data-theme="light"] body.app-shell:not(.admin-page) .nav-link {
        background: rgba(0, 80, 160, 0.03);
    }

    :root[data-theme="light"] body.app-shell:not(.admin-page) .nav-link:hover,
    :root[data-theme="light"] body.app-shell:not(.admin-page) .nav-link.active {
        background: rgba(0, 120, 210, 0.07);
        border-color: rgba(0, 100, 180, 0.1);
    }

    /* Balance Badge */
    :root[data-theme="light"] body.app-shell:not(.admin-page) .header-balance-badge:not(.hidden) {
        border-color: rgba(0, 80, 160, 0.1);
        background:
            radial-gradient(circle at 15% 10%, rgba(0, 130, 220, 0.06), transparent 48%),
            linear-gradient(145deg, #ffffff, #f4f9ff);
        box-shadow: 0 2px 12px rgba(0, 50, 110, 0.05);
    }

    :root[data-theme="light"] body.app-shell:not(.admin-page) .header-balance-badge-label {
        color: var(--text-muted);
    }

    :root[data-theme="light"] body.app-shell:not(.admin-page) .header-balance-badge-value {
        color: var(--text-primary);
    }

    :root[data-theme="light"] body.app-shell:not(.admin-page) .header-balance-badge-add {
        color: var(--primary);
        border-color: rgba(0, 100, 180, 0.14);
        background: rgba(0, 120, 210, 0.06);
        box-shadow: 0 2px 8px rgba(0, 100, 200, 0.08);
    }

    /* Desktop Utility Dock */
    :root[data-theme="light"] body.app-shell:not(.admin-page) [data-desktop-utility-dock] .user-account-stack {
        border-color: rgba(0, 80, 160, 0.08);
        background:
            radial-gradient(circle at 16% 12%, rgba(0, 130, 220, 0.04), transparent 42%),
            linear-gradient(145deg, #ffffff, #f6faff);
        box-shadow: 0 4px 16px rgba(0, 50, 110, 0.06);
    }

    /* Sidebar Logout */
    :root[data-theme="light"] body.app-shell:not(.admin-page) .header-actions .sidebar-logout-btn {
        color: #be123c;
        border-color: rgba(220, 38, 38, 0.14);
        background: linear-gradient(155deg, rgba(254, 242, 242, 0.9), rgba(255, 241, 242, 0.8));
    }

    :root[data-theme="light"] body.app-shell:not(.admin-page) .header-actions .sidebar-logout-btn:hover {
        border-color: rgba(220, 38, 38, 0.22);
        background: rgba(254, 242, 242, 1);
        box-shadow: 0 4px 14px rgba(220, 38, 38, 0.08);
    }
}


/* ─────────────────────────────────────────────
   15. MOBILE NAVIGATION DRAWER
   ───────────────────────────────────────────── */

@media (max-width: 768px) {
    :root[data-theme="light"] .nav-menu {
        background: rgba(255, 255, 255, 0.97) !important;
        backdrop-filter: blur(24px);
        border-left-color: rgba(0, 80, 160, 0.06) !important;
        box-shadow: -10px 0 40px rgba(0, 50, 110, 0.08) !important;
    }

    :root[data-theme="light"] .nav-menu .nav-link:hover {
        background: rgba(0, 120, 210, 0.05);
    }

    /* Mobile Account Card */
    :root[data-theme="light"] .nav-menu .mobile-nav-account:not(.hidden) {
        border-bottom-color: rgba(0, 80, 160, 0.06);
    }

    :root[data-theme="light"] .nav-menu .mobile-nav-account-card {
        border-color: rgba(0, 80, 160, 0.08);
        background: linear-gradient(145deg, #ffffff, #f4f9ff);
        color: var(--text-primary);
    }

    :root[data-theme="light"] .mobile-nav-account-name {
        color: var(--text-primary);
    }

    :root[data-theme="light"] .mobile-nav-account-email {
        color: var(--text-muted);
    }

    /* Mobile Balance Badge */
    :root[data-theme="light"] .nav-menu .header-balance-badge {
        border-color: rgba(0, 80, 160, 0.08);
        background: linear-gradient(145deg, #ffffff, #f4f9ff);
        box-shadow: 0 2px 8px rgba(0, 50, 110, 0.04);
    }

    :root[data-theme="light"] .nav-menu .header-balance-badge-label {
        color: var(--text-muted);
    }

    :root[data-theme="light"] .nav-menu .header-balance-badge-value {
        color: var(--text-primary);
    }

    :root[data-theme="light"] .nav-menu .header-balance-badge-add {
        color: var(--primary);
        border-color: rgba(0, 100, 180, 0.14);
        background: rgba(0, 120, 210, 0.06);
    }

    /* Mobile logout */
    :root[data-theme="light"] .mobile-nav-logout {
        color: #be123c !important;
    }

    /* Mobile menu button */
    :root[data-theme="light"] .mobile-menu-btn span {
        background: var(--text-secondary);
    }

    /* Mobile header tools */
    :root[data-theme="light"] .mobile-header-tools .header-balance-badge {
        border-color: rgba(0, 80, 160, 0.08);
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(244, 249, 255, 0.9));
    }
}


/* ─────────────────────────────────────────────
   16. USER MENU DROPDOWN
   ───────────────────────────────────────────── */

:root[data-theme="light"] .user-menu-dropdown {
    background: #ffffff;
    border: 1px solid rgba(0, 70, 150, 0.08);
    box-shadow: 0 16px 48px rgba(0, 50, 110, 0.12), 0 0 0 1px rgba(0, 70, 150, 0.04);
}

:root[data-theme="light"] .user-menu-header {
    border-bottom-color: rgba(0, 70, 150, 0.06);
}

:root[data-theme="light"] .user-menu-header .user-name {
    color: var(--text-primary);
}

:root[data-theme="light"] .profile-user-email {
    color: var(--text-muted);
}

:root[data-theme="light"] .user-menu-list a {
    color: var(--text-secondary);
}

:root[data-theme="light"] .user-menu-list a:hover {
    background: rgba(0, 120, 210, 0.04);
    color: var(--primary);
}

:root[data-theme="light"] .user-menu-list .divider {
    border-color: rgba(0, 70, 150, 0.06);
}

:root[data-theme="light"] .user-menu-list .logout-link {
    color: #be123c;
}

/* User Avatar */
:root[data-theme="light"] .user-avatar,
:root[data-theme="light"] .user-avatar-small {
    border-color: rgba(0, 80, 160, 0.1);
    background: linear-gradient(145deg, #f0f7ff, #e4f0fc);
    color: var(--primary);
}

/* User Btn */
:root[data-theme="light"] .user-btn {
    border-color: rgba(0, 80, 160, 0.08);
    background: rgba(255, 255, 255, 0.82);
    color: var(--text-primary);
}

:root[data-theme="light"] .user-btn:hover {
    background: #ffffff;
    border-color: rgba(0, 100, 180, 0.14);
    box-shadow: 0 4px 14px rgba(0, 50, 110, 0.06);
}

/* User Progress */
:root[data-theme="light"] .user-progress-shell {
    background: transparent;
}

:root[data-theme="light"] .user-level-inline {
    color: var(--primary);
}

:root[data-theme="light"] .user-progress-caption {
    color: var(--text-muted);
}

:root[data-theme="light"] .user-progress-track {
    background: rgba(0, 80, 160, 0.08);
}

:root[data-theme="light"] .user-progress-fill {
    background: var(--gradient-primary);
}


/* ─────────────────────────────────────────────
   17. BALANCE BADGE (non-sidebar)
   ───────────────────────────────────────────── */

:root[data-theme="light"] .header-balance-badge {
    border-color: rgba(0, 80, 160, 0.1);
    background: linear-gradient(145deg, #ffffff, #f4f9ff);
    box-shadow: 0 2px 10px rgba(0, 50, 110, 0.05);
}

:root[data-theme="light"] .header-balance-badge-label {
    color: var(--text-muted);
}

:root[data-theme="light"] .header-balance-badge-value {
    color: var(--text-primary);
}

:root[data-theme="light"] .header-balance-badge-add {
    color: var(--primary);
    border-color: rgba(0, 100, 180, 0.14);
    background: rgba(0, 120, 210, 0.06);
    box-shadow: 0 2px 8px rgba(0, 100, 200, 0.06);
}

:root[data-theme="light"] .header-balance-badge-add:hover {
    border-color: rgba(0, 120, 210, 0.24);
    box-shadow: 0 4px 14px rgba(0, 100, 200, 0.1);
}


/* ─────────────────────────────────────────────
   18. THEME TOGGLE BUTTON
   ───────────────────────────────────────────── */

:root[data-theme="light"] .theme-toggle-btn {
    background: rgba(255, 255, 255, 0.88);
    border-color: rgba(0, 80, 160, 0.08);
    color: var(--text-primary);
    box-shadow: 0 2px 12px rgba(0, 50, 110, 0.06);
}

:root[data-theme="light"] .theme-toggle-btn:hover {
    background: #ffffff;
    border-color: rgba(0, 100, 180, 0.14);
    box-shadow: 0 4px 18px rgba(0, 50, 110, 0.09);
}

:root[data-theme="light"] .theme-toggle-float {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(0, 80, 160, 0.08);
    box-shadow: 0 4px 20px rgba(0, 50, 110, 0.08);
    backdrop-filter: blur(14px);
}


/* ─────────────────────────────────────────────
   19. CART SIDEBAR
   ───────────────────────────────────────────── */

:root[data-theme="light"] .cart-sidebar,
:root[data-theme="light"] .cart-panel {
    background: #ffffff;
    border-color: rgba(0, 70, 150, 0.08);
    box-shadow: -8px 0 40px rgba(0, 50, 110, 0.1);
}

:root[data-theme="light"] .cart-item {
    border-color: rgba(0, 70, 150, 0.06);
    background: rgba(0, 100, 180, 0.02);
}

:root[data-theme="light"] .cart-footer {
    border-top-color: rgba(0, 70, 150, 0.06);
}


/* ─────────────────────────────────────────────
   20. OFFERS SPOTLIGHT
   ───────────────────────────────────────────── */

:root[data-theme="light"] .offers-spotlight {
    background: transparent;
}

:root[data-theme="light"] .offers-spotlight-inner {
    background: transparent;
}


/* ─────────────────────────────────────────────
   21. ORDER PAGES
   ───────────────────────────────────────────── */

:root[data-theme="light"] .order-card {
    background: #ffffff;
    border-color: rgba(0, 70, 150, 0.07);
    box-shadow: 0 2px 12px rgba(0, 50, 110, 0.05);
    color: var(--text-primary);
}

:root[data-theme="light"] .wallet-history-card {
    background: #ffffff;
    border-color: rgba(0, 70, 150, 0.07);
    box-shadow: 0 2px 12px rgba(0, 50, 110, 0.05);
    color: var(--text-primary);
}

:root[data-theme="light"] .payment-option {
    background: #ffffff;
    border-color: rgba(0, 70, 150, 0.07);
    box-shadow: 0 2px 12px rgba(0, 50, 110, 0.05);
    color: var(--text-primary);
}

:root[data-theme="light"] .payment-option:hover {
    border-color: rgba(0, 100, 180, 0.16);
    box-shadow: 0 6px 20px rgba(0, 50, 110, 0.08);
}

/* Order Direct */
:root[data-theme="light"] .order-direct-pill {
    background: rgba(0, 120, 210, 0.06);
    border-color: rgba(0, 100, 180, 0.12);
    color: var(--primary);
}

:root[data-theme="light"] .order-direct-title {
    color: var(--text-primary);
}

:root[data-theme="light"] .order-direct-subtitle {
    color: var(--text-secondary);
}

:root[data-theme="light"] .order-direct-visual {
    background: linear-gradient(145deg, #f0f7ff, #e4f0fc);
    border-color: rgba(0, 80, 160, 0.08);
}

:root[data-theme="light"] .order-direct-details,
:root[data-theme="light"] .order-direct-price-card {
    background: #ffffff;
    border-color: rgba(0, 70, 150, 0.07);
    box-shadow: 0 2px 12px rgba(0, 50, 110, 0.05);
}

:root[data-theme="light"] .order-direct-section-head {
    color: var(--text-primary);
}

:root[data-theme="light"] .order-direct-details .order-overview-text,
:root[data-theme="light"] .order-direct-note,
:root[data-theme="light"] .order-price-line span {
    color: var(--text-secondary);
}

:root[data-theme="light"] .order-price-line strong,
:root[data-theme="light"] .order-price-line-total strong,
:root[data-theme="light"] .order-direct-price-card .order-overview-row strong {
    color: var(--text-primary);
}

:root[data-theme="light"] .order-direct-price-card .order-overview-row span,
:root[data-theme="light"] .order-trust-note {
    color: var(--text-secondary);
}

:root[data-theme="light"] .order-price-line + .order-price-line,
:root[data-theme="light"] .order-direct-price-card .order-overview-total-rows {
    border-top-color: rgba(0, 70, 150, 0.06);
}

/* Order Modal */
:root[data-theme="light"] .order-page-wrap #purchaseModal {
    background: rgba(230, 242, 255, 0.88);
}

:root[data-theme="light"] .order-page-wrap .order-modal-modern {
    background: #ffffff;
    border-color: rgba(0, 70, 150, 0.08);
    box-shadow: 0 20px 60px rgba(0, 50, 110, 0.12);
}

:root[data-theme="light"] .order-page-wrap .order-modal-modern .modal-close {
    color: var(--text-muted);
}

:root[data-theme="light"] .order-page-wrap .order-modal-modern .form-label {
    color: var(--text-secondary);
}

:root[data-theme="light"] .order-page-wrap .order-modal-modern .form-input,
:root[data-theme="light"] .order-page-wrap .order-modal-modern .form-select {
    background-color: #f4f9ff;
    border-color: rgba(0, 70, 150, 0.09);
    color: var(--text-primary);
}

:root[data-theme="light"] .order-page-wrap .order-coupon-shell {
    background: rgba(0, 100, 180, 0.03);
    border-color: rgba(0, 80, 160, 0.08);
}

:root[data-theme="light"] .order-page-wrap .order-coupon-shell summary {
    color: var(--primary);
}


/* ─────────────────────────────────────────────
   22. ADMIN INLINE EDIT
   ───────────────────────────────────────────── */

:root[data-theme="light"] .admin-card-edit-btn {
    border-color: rgba(0, 100, 180, 0.18);
    background: rgba(255, 255, 255, 0.92);
    color: var(--primary);
}

:root[data-theme="light"] .admin-card-edit-btn:hover {
    border-color: rgba(0, 120, 210, 0.32);
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 100, 200, 0.1);
}

:root[data-theme="light"] .admin-inline-check {
    border-color: rgba(0, 70, 150, 0.08);
    background: rgba(0, 100, 180, 0.03);
}

:root[data-theme="light"] .admin-inline-check span {
    color: var(--text-secondary);
}

:root[data-theme="light"] .admin-inline-edit-actions {
    border-top-color: rgba(0, 70, 150, 0.06);
}


/* ─────────────────────────────────────────────
   23. REVIEWS PAGE
   ───────────────────────────────────────────── */

:root[data-theme="light"] .reviews-avg-value {
    color: var(--primary);
}

:root[data-theme="light"] .reviews-avg-stars {
    color: #f59e0b;
}

:root[data-theme="light"] .reviews-avg-count {
    color: var(--text-muted);
}

:root[data-theme="light"] .reviews-summary-link {
    color: var(--primary);
}


/* ─────────────────────────────────────────────
   24. PLATFORM BRAND COLORS — Adapted for Light BG
   ───────────────────────────────────────────── */

:root[data-theme="light"] .service-icon.tiktok,
:root[data-theme="light"] .category-icon i.fa-tiktok {
    color: #010101 !important;
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}


/* ─────────────────────────────────────────────
   25. MISCELLANEOUS COMPONENTS
   ───────────────────────────────────────────── */

/* Selection color */
:root[data-theme="light"] ::selection {
    background: rgba(0, 120, 210, 0.15);
    color: var(--text-primary);
}

/* Scrollbar */
:root[data-theme="light"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

:root[data-theme="light"] ::-webkit-scrollbar-track {
    background: #f0f5fa;
}

:root[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: rgba(0, 80, 160, 0.15);
    border-radius: 4px;
}

:root[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 80, 160, 0.25);
}

/* Toast / Alert Messages */
:root[data-theme="light"] .toast,
:root[data-theme="light"] .alert-toast {
    background: #ffffff;
    border-color: rgba(0, 70, 150, 0.08);
    box-shadow: 0 8px 32px rgba(0, 50, 110, 0.1);
    color: var(--text-primary);
}

/* Skeleton Loading */
:root[data-theme="light"] .skeleton-line,
:root[data-theme="light"] .skeleton-block {
    background: linear-gradient(90deg, #eef3fa 25%, #dce8f3 50%, #eef3fa 75%);
    background-size: 200% 100%;
}

/* Cookie Consent */
:root[data-theme="light"] .cookie-consent {
    background: #ffffff;
    border-color: rgba(0, 70, 150, 0.08);
    box-shadow: 0 -4px 24px rgba(0, 50, 110, 0.08);
    color: var(--text-primary);
}

/* WhatsApp Float */
:root[data-theme="light"] .wa-float-btn {
    box-shadow: 0 4px 18px rgba(0, 50, 110, 0.12);
}

/* PWA Install */
:root[data-theme="light"] .pwa-install-banner {
    background: #ffffff;
    border-color: rgba(0, 70, 150, 0.08);
    box-shadow: 0 8px 32px rgba(0, 50, 110, 0.1);
    color: var(--text-primary);
}

/* Notification Bell — لون افتراضي واضح في الوضع الفاتح (الأصناف الحقيقية) */
:root[data-theme="light"] .notif-bell,
:root[data-theme="light"] .updates-feed-btn {
    color: var(--text-secondary);
}

:root[data-theme="light"] .notif-panel {
    background: #ffffff;
    border-color: rgba(0, 70, 150, 0.08);
    box-shadow: 0 12px 40px rgba(0, 50, 110, 0.1);
}

:root[data-theme="light"] .notif-item {
    border-bottom-color: rgba(0, 70, 150, 0.05);
}

:root[data-theme="light"] .notif-item:hover {
    background: rgba(0, 120, 210, 0.03);
}

/* Live Chat */
:root[data-theme="light"] .livechat-container {
    background: #ffffff;
    border-color: rgba(0, 70, 150, 0.08);
    box-shadow: 0 12px 48px rgba(0, 50, 110, 0.12);
}

:root[data-theme="light"] .livechat-header {
    background: var(--gradient-primary);
    color: #ffffff;
}

:root[data-theme="light"] .livechat-messages {
    background: #f8fbff;
}

:root[data-theme="light"] .livechat-input-area {
    background: #ffffff;
    border-top-color: rgba(0, 70, 150, 0.06);
}

:root[data-theme="light"] .livechat-input {
    background: #f4f9ff;
    border-color: rgba(0, 70, 150, 0.08);
    color: var(--text-primary);
}

/* Maintenance Page */
:root[data-theme="light"] .maintenance-container {
    background: #ffffff;
    color: var(--text-primary);
}


/* ─────────────────────────────────────────────
   26. RESPONSIVE FINE-TUNING
   ───────────────────────────────────────────── */

@media (max-width: 768px) {
    :root[data-theme="light"] body:not(.admin-page) .header {
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 2px 16px rgba(0, 50, 110, 0.05);
    }

    :root[data-theme="light"] body:not(.admin-page) .header-content {
        border-color: rgba(0, 80, 160, 0.05);
        background: transparent;
        box-shadow: none;
    }

    :root[data-theme="light"] body:not(.admin-page) .logo-img {
        border-color: transparent;
        background: transparent;
        filter: drop-shadow(0 1px 4px rgba(0, 100, 180, 0.1));
    }

    /* Mobile cards spacing */
    :root[data-theme="light"] .category-card {
        box-shadow: 0 1px 8px rgba(0, 50, 110, 0.04);
    }

    :root[data-theme="light"] .service-card {
        box-shadow: 0 1px 8px rgba(0, 50, 110, 0.04);
    }

    :root[data-theme="light"] .feature-item,
    :root[data-theme="light"] .feature-card {
        box-shadow: 0 1px 8px rgba(0, 50, 110, 0.04);
    }
}

@media (max-width: 480px) {
    :root[data-theme="light"] .hero.hero-summit .hero-summit-highlight {
        background: rgba(255, 255, 255, 0.7);
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   27. SUBPAGES & COMPONENTS (Orders, Wallet, Profile, Ranks, Chat, etc.)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Panels, Cards, Empty States ── */
:root[data-theme="light"] .account-summary-card,
:root[data-theme="light"] .account-panel,
:root[data-theme="light"] .account-stat-card,
:root[data-theme="light"] .api-access-state-card,
:root[data-theme="light"] .api-key-meta-card,
:root[data-theme="light"] .order-card,
:root[data-theme="light"] .order-card-details,
:root[data-theme="light"] .orders-summary-card,
:root[data-theme="light"] .portfolio-empty,
:root[data-theme="light"] .orders-empty,
:root[data-theme="light"] .wallet-history-empty,
:root[data-theme="light"] .referral-empty,
:root[data-theme="light"] .prize-card,
:root[data-theme="light"] .profile-card,
:root[data-theme="light"] .wallet-method-card,
:root[data-theme="light"] .wallet-item-card,
:root[data-theme="light"] .offer-included-card,
:root[data-theme="light"] .offer-card,
:root[data-theme="light"] .account-choice-card,
:root[data-theme="light"] .offer-auth-banner {
    background: #ffffff;
    border-color: rgba(0, 70, 150, 0.08);
    box-shadow: 0 2px 12px rgba(0, 50, 110, 0.05);
    color: var(--text-primary);
}

:root[data-theme="light"] .account-stat-card:hover,
:root[data-theme="light"] .order-card:hover,
:root[data-theme="light"] .prize-card:hover,
:root[data-theme="light"] .wallet-method-card:hover,
:root[data-theme="light"] .offer-card:hover {
    border-color: rgba(0, 100, 180, 0.16);
    box-shadow: 0 6px 20px rgba(0, 50, 110, 0.08);
    transform: translateY(-2px);
}

/* ── Inputs & Forms ── */
:root[data-theme="light"] #ordersSearchInput,
:root[data-theme="light"] #walletSearchInput,
:root[data-theme="light"] .profile-card .form-input,
:root[data-theme="light"] .profile-card-settings .form-input,
:root[data-theme="light"] .referral-input,
:root[data-theme="light"] .order-chat-text-input,
:root[data-theme="light"] .offer-form-field input,
:root[data-theme="light"] .offer-form-field textarea,
:root[data-theme="light"] .offer-form-field select,
:root[data-theme="light"] .api-code-block {
    background-color: #f4f9ff;
    border-color: rgba(0, 70, 150, 0.09);
    color: var(--text-primary);
    box-shadow: inset 0 1px 2px rgba(0, 40, 100, 0.03);
}

:root[data-theme="light"] #ordersSearchInput:focus,
:root[data-theme="light"] #walletSearchInput:focus,
:root[data-theme="light"] .profile-card .form-input:focus,
:root[data-theme="light"] .profile-card-settings .form-input:focus,
:root[data-theme="light"] .order-chat-text-input:focus {
    border-color: rgba(0, 120, 210, 0.28);
    box-shadow: 0 0 0 3px rgba(0, 120, 210, 0.08), inset 0 1px 2px rgba(0, 40, 100, 0.03);
}

/* ── Tables & Lists ── */
:root[data-theme="light"] .lb-table-wrap,
:root[data-theme="light"] .api-table-row,
:root[data-theme="light"] .wallet-history-table {
    background: #ffffff;
    border-color: rgba(0, 70, 150, 0.08);
}
:root[data-theme="light"] .lb-thead,
:root[data-theme="light"] .api-table-row-head {
    background: #f0f6fd;
    border-bottom-color: rgba(0, 70, 150, 0.08);
}
:root[data-theme="light"] .lb-prize-row {
    border-top-color: rgba(0, 70, 150, 0.06);
}
:root[data-theme="light"] .lb-tr.lb-me {
    background: rgba(0, 120, 210, 0.06);
    border-color: rgba(0, 120, 210, 0.15);
}

/* ── Buttons, Filters, Tabs ── */
:root[data-theme="light"] .orders-filter-btn,
:root[data-theme="light"] .portfolio-filter-btn,
:root[data-theme="light"] .wallet-filter-btn,
:root[data-theme="light"] .wallet-network-chip,
:root[data-theme="light"] .api-sample-tab,
:root[data-theme="light"] .offer-button-secondary,
:root[data-theme="light"] .order-chat-export-btn,
:root[data-theme="light"] .order-pay-invoice-btn,
:root[data-theme="light"] .wallet-detail-btn,
:root[data-theme="light"] .referral-method-option span,
:root[data-theme="light"] .wallet-status-filter,
:root[data-theme="light"] .referral-back-link,
:root[data-theme="light"] .wallet-back-link {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0, 80, 160, 0.1);
    color: var(--text-primary);
    box-shadow: 0 1px 4px rgba(0, 50, 110, 0.04);
}
:root[data-theme="light"] .orders-filter-btn.active,
:root[data-theme="light"] .portfolio-filter-btn:hover,
:root[data-theme="light"] .wallet-filter-btn:hover,
:root[data-theme="light"] .wallet-network-chip.is-active,
:root[data-theme="light"] .wallet-network-chip:hover,
:root[data-theme="light"] .api-sample-tab.is-active,
:root[data-theme="light"] .wallet-status-filter.active,
:root[data-theme="light"] .wallet-status-btn.active,
:root[data-theme="light"] .referral-method-option input:checked + span {
    background: rgba(0, 120, 210, 0.08);
    border-color: var(--primary);
    color: var(--primary);
}

/* ── Order Chat Specific ── */
:root[data-theme="light"] .order-chat-main,
:root[data-theme="light"] .order-chat-sidebar,
:root[data-theme="light"] .order-chat-info-grid {
    background: #ffffff;
    border-color: rgba(0, 70, 150, 0.08);
    box-shadow: 0 2px 12px rgba(0, 50, 110, 0.05);
}
:root[data-theme="light"] .order-chat-input-area {
    background: #f8fbff;
    border-top-color: rgba(0, 70, 150, 0.08);
}
:root[data-theme="light"] .order-chat-msg.admin .oc-msg-bubble {
    background: #e6f0fa;
    color: var(--text-primary);
}
:root[data-theme="light"] .order-chat-msg:not(.admin) .oc-msg-bubble {
    background: var(--gradient-primary);
    color: #ffffff;
}
:root[data-theme="light"] .order-chat-delivery-notes,
:root[data-theme="light"] .order-chat-system-note,
:root[data-theme="light"] .order-chat-project-card {
    background: rgba(0, 120, 210, 0.04);
    border-color: rgba(0, 80, 160, 0.08);
}
:root[data-theme="light"] .order-chat-date-sep span {
    background: #eef5ff;
    color: var(--text-secondary);
}

/* ── Progress Tracks ── */
:root[data-theme="light"] .account-inline-progress-track,
:root[data-theme="light"] .order-progress-track,
:root[data-theme="light"] .ranks-progress-track,
:root[data-theme="light"] .referral-progress-track {
    background: rgba(0, 80, 160, 0.08);
}

/* ── Chips, Badges, Status ── */
:root[data-theme="light"] .account-pill,
:root[data-theme="light"] .api-docs-pill,
:root[data-theme="light"] .leaderboard-period-pill,
:root[data-theme="light"] .offer-meta-chip,
:root[data-theme="light"] .offer-purchase-chip,
:root[data-theme="light"] .portfolio-card-tech-chip {
    background: rgba(0, 100, 180, 0.06);
    border-color: rgba(0, 80, 160, 0.1);
    color: var(--text-secondary);
}
:root[data-theme="light"] .order-card-status.status-completed,
:root[data-theme="light"] .wallet-item-status.is-approved,
:root[data-theme="light"] .referral-recent-status.tone-success,
:root[data-theme="light"] .order-chat-sidebar-badge.status-completed {
    color: #065f46;
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.2);
}
:root[data-theme="light"] .order-card-status.status-failed,
:root[data-theme="light"] .order-card-status.status-cancelled,
:root[data-theme="light"] .wallet-item-status.is-rejected,
:root[data-theme="light"] .referral-recent-status.tone-danger,
:root[data-theme="light"] .order-chat-sidebar-badge.status-cancelled,
:root[data-theme="light"] .order-chat-sidebar-badge.status-failed {
    color: #991b1b;
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.18);
}
:root[data-theme="light"] .order-card-status.status-pending,
:root[data-theme="light"] .order-card-status.status-processing,
:root[data-theme="light"] .wallet-item-status.is-pending,
:root[data-theme="light"] .referral-recent-status.tone-warning,
:root[data-theme="light"] .order-chat-sidebar-badge.status-pending {
    color: #78350f;
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.2);
}

/* ── Alerts & Toasts ── */
:root[data-theme="light"] .alert,
:root[data-theme="light"] .toast {
    background: #ffffff;
    border-color: rgba(0, 70, 150, 0.08);
    box-shadow: 0 4px 16px rgba(0, 50, 110, 0.08);
}
:root[data-theme="light"] .alert.success, :root[data-theme="light"] .toast.success { border-left: 4px solid #10b981; }
:root[data-theme="light"] .alert.error, :root[data-theme="light"] .toast.error { border-left: 4px solid #ef4444; }
:root[data-theme="light"] .alert.warning, :root[data-theme="light"] .toast.warning { border-left: 4px solid #f59e0b; }
:root[data-theme="light"] .alert.info, :root[data-theme="light"] .toast.info { border-left: 4px solid #3b82f6; }

/* ── Typographic / Headings ── */
:root[data-theme="light"] .orders-page-eyebrow,
:root[data-theme="light"] .wallet-page-eyebrow,
:root[data-theme="light"] .portfolio-eyebrow,
:root[data-theme="light"] .referral-eyebrow {
    color: var(--primary);
}
:root[data-theme="light"] .account-divider {
    border-color: rgba(0, 70, 150, 0.08);
}
:root[data-theme="light"] .wallet-group-heading-count {
    background: rgba(0, 100, 180, 0.08);
    color: var(--text-secondary);
}

/* ── Ranks ── */
:root[data-theme="light"] .rank-card {
    background: #ffffff;
    border-color: rgba(0, 70, 150, 0.08);
    box-shadow: 0 2px 12px rgba(0, 50, 110, 0.05);
}
:root[data-theme="light"] .rank-chip--locked {
    background: rgba(148, 163, 184, 0.1);
    color: var(--text-muted);
}
:root[data-theme="light"] .rank-chip--current {
    background: rgba(0, 120, 210, 0.1);
    color: var(--primary);
}

/* ── Overrides for inner items ── */
:root[data-theme="light"] .wallet-item-details,
:root[data-theme="light"] .order-chat-messages::-webkit-scrollbar-thumb {
    background: rgba(0, 80, 160, 0.05);
}

/* ── Shamcash Steps ── */
:root[data-theme="light"] .shamcash-step-chip {
    background: rgba(0, 80, 160, 0.05);
    color: var(--text-muted);
}
:root[data-theme="light"] .shamcash-step-chip.is-active,
:root[data-theme="light"] .shamcash-step-chip.is-complete {
    background: rgba(16, 185, 129, 0.1);
    color: #065f46;
}

/* Base text color inheritance for major sections */
:root[data-theme="light"] .account-summary-card h1,
:root[data-theme="light"] .account-summary-card h2,
:root[data-theme="light"] .account-summary-card h3,
:root[data-theme="light"] .account-panel h1,
:root[data-theme="light"] .account-panel h2,
:root[data-theme="light"] .account-panel h3,
:root[data-theme="light"] .wallet-history-table td,
:root[data-theme="light"] .wallet-item-title,
:root[data-theme="light"] .order-card-title,
:root[data-theme="light"] .rank-card-title,
:root[data-theme="light"] .wallet-method-card strong,
:root[data-theme="light"] .offer-card-title,
:root[data-theme="light"] .portfolio-card-title,
:root[data-theme="light"] .api-access-state-card h3 {
    color: var(--text-primary);
}

:root[data-theme="light"] .account-summary-card p,
:root[data-theme="light"] .account-panel p,
:root[data-theme="light"] .order-card-service,
:root[data-theme="light"] .offer-card-desc,
:root[data-theme="light"] .wallet-item-date,
:root[data-theme="light"] .rank-card-desc {
    color: var(--text-secondary);
}

/* Tables text colors */
:root[data-theme="light"] .lb-thead th,
:root[data-theme="light"] .api-table-row-head div {
    color: var(--text-secondary);
}
:root[data-theme="light"] .lb-tr td,
:root[data-theme="light"] .api-table-row div {
    color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════════════════
   28. ADMIN PANEL OVERRIDES
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Admin Modals & Rows ── */
:root[data-theme="light"] .admin-modal-detail-row,
:root[data-theme="light"] .provider-sync-history-row.provider-sync-row-selected {
    background: rgba(0, 120, 210, 0.05);
    border-color: rgba(0, 100, 180, 0.1);
}

:root[data-theme="light"] .provider-sync-note {
    background: rgba(0, 80, 160, 0.04);
    color: var(--text-secondary);
}

/* ── Accounting & Cards ── */
:root[data-theme="light"] .accounting-detection-card,
:root[data-theme="light"] .accounting-new-cash-empty,
:root[data-theme="light"] .accounting-new-mini-card {
    background: #ffffff;
    border-color: rgba(0, 70, 150, 0.08);
    box-shadow: 0 2px 12px rgba(0, 50, 110, 0.05);
}

:root[data-theme="light"] .acc-bs-row {
    background: #ffffff;
    border-color: rgba(0, 70, 150, 0.06);
}

:root[data-theme="light"] .acc-bs-row.is-total {
    background: rgba(0, 120, 210, 0.05);
    border-top-color: rgba(0, 100, 180, 0.1);
}

:root[data-theme="light"] .acc-bs-sub {
    background: rgba(0, 80, 160, 0.02);
}

:root[data-theme="light"] .acc-bs-icon {
    background: rgba(0, 100, 180, 0.06);
    color: var(--primary);
}

:root[data-theme="light"] .accounting-setup-divider {
    border-color: rgba(0, 70, 150, 0.08);
}

/* ── Status Badges (Admin) ── */
:root[data-theme="light"] .status-badge.completed,
:root[data-theme="light"] .provider-state-ok,
:root[data-theme="light"] .accounting-pill-positive,
:root[data-theme="light"] .acc-bs-net-badge.pos {
    color: #065f46;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

:root[data-theme="light"] .status-badge.cancelled,
:root[data-theme="light"] .status-badge.failed,
:root[data-theme="light"] .provider-state-critical,
:root[data-theme="light"] .accounting-pill-negative,
:root[data-theme="light"] .acc-bs-net-badge.neg {
    color: #991b1b;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

:root[data-theme="light"] .status-badge.pending,
:root[data-theme="light"] .status-badge.processing,
:root[data-theme="light"] .provider-state-warning {
    color: #78350f;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

:root[data-theme="light"] .status-badge.partial,
:root[data-theme="light"] .provider-state-unknown,
:root[data-theme="light"] .accounting-pill,
:root[data-theme="light"] .acc-bs-net-badge.flat {
    color: var(--text-secondary);
    background: rgba(0, 100, 180, 0.08);
    border: 1px solid rgba(0, 80, 160, 0.15);
}

/* ── Admin Sidebars & Menus ── */
:root[data-theme="light"] .sidebar-overlay {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(4px);
}

:root[data-theme="light"] .admin-menu-toggle:hover {
    background: rgba(0, 120, 210, 0.08);
}

/* ── Specific Admin Text Adjustments ── */
:root[data-theme="light"] .stat-change.positive { color: #10b981; }
:root[data-theme="light"] .stat-change.negative { color: #ef4444; }

:root[data-theme="light"] .accounting-detection-meta span,
:root[data-theme="light"] .accounting-new-cash-meta span,
:root[data-theme="light"] .accounting-new-rules span,
:root[data-theme="light"] .accounting-new-kicker {
    color: var(--text-secondary);
}


/* Group Back Button (Categories View) - Light */
:root[data-theme="light"] .group-back-btn {
    background: #ffffff;
    border-color: rgba(0, 70, 150, 0.08);
    box-shadow: 0 2px 8px rgba(0, 50, 110, 0.04);
}

:root[data-theme="light"] .group-back-btn:hover {
    background: rgba(0, 120, 210, 0.04);
    border-color: rgba(0, 100, 180, 0.12);
    box-shadow: 0 4px 12px rgba(0, 50, 110, 0.06);
}

:root[data-theme="light"] .group-back-icon {
    background: linear-gradient(135deg, #00b4ef, #0080ff);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 140, 220, 0.28);
}

/* ═══════════════════════════════════════════════════════════════════════
   29. MISSED HERO BANNERS & HEADER ELEMENTS (Orders, Referral, Offers, Notifs)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Notification Bells in Header (الأصناف الحقيقية .notif-bell/.updates-feed-btn وأيقونات SVG) ── */
:root[data-theme="light"] #notif-bell-wrapper .notif-bell,
:root[data-theme="light"] #notif-bell-wrapper .updates-feed-btn,
:root[data-theme="light"] body.app-shell:not(.admin-page) [data-desktop-utility-dock] .notif-bell,
:root[data-theme="light"] body.app-shell:not(.admin-page) [data-desktop-utility-dock] .updates-feed-btn,
:root[data-theme="light"] body.user-authenticated:not(.admin-page) .header-content > #notif-bell-wrapper .notif-bell,
:root[data-theme="light"] body.user-authenticated:not(.admin-page) .header-content > #notif-bell-wrapper .updates-feed-btn,
:root[data-theme="light"] .header .btn-icon,
:root[data-theme="light"] .header .profile-trigger {
    background: #f0f6fd;
    border: 1px solid rgba(0, 100, 180, 0.15);
    color: #0b62a4;
    box-shadow: 0 2px 6px rgba(0, 50, 110, 0.04);
}

:root[data-theme="light"] #notif-bell-wrapper .notif-bell:hover,
:root[data-theme="light"] #notif-bell-wrapper .updates-feed-btn:hover,
:root[data-theme="light"] .header .btn-icon:hover {
    background: #e6f0fa;
    border-color: rgba(0, 120, 210, 0.25);
    color: #0056b3;
}

/* أيقونات SVG (الجرس/التحديثات) ترث اللون عبر currentColor فتظهر واضحة في الوضع الفاتح */
:root[data-theme="light"] #notif-bell-wrapper .notif-bell svg,
:root[data-theme="light"] #notif-bell-wrapper .updates-feed-btn svg {
    color: inherit;
    stroke: currentColor;
}

/* حلقة الشارات (99+ والنقطة الخضراء) تصبح فاتحة لتناسب الخلفية الفاتحة */
:root[data-theme="light"] #notif-bell-wrapper .notif-badge,
:root[data-theme="light"] #notif-bell-wrapper .updates-badge {
    box-shadow: 0 0 0 2px #f0f6fd;
}

/* ── 2. Orders Page Big Banners ── */
:root[data-theme="light"] .orders-page-header,
:root[data-theme="light"] .orders-hero,
:root[data-theme="light"] .orders-review-banner,
:root[data-theme="light"] .orders-filter-bar {
    background: linear-gradient(135deg, #ffffff 0%, #f4f9ff 100%);
    border: 1px solid rgba(0, 70, 150, 0.08);
    box-shadow: 0 4px 20px rgba(0, 50, 110, 0.05);
    color: var(--text-primary);
}
:root[data-theme="light"] .orders-page-header h1,
:root[data-theme="light"] .orders-page-header p,
:root[data-theme="light"] .orders-review-banner p {
    color: var(--text-primary);
}

/* ── 3. Referral / Wallet Big Banners ── */
:root[data-theme="light"] .referral-hero,
:root[data-theme="light"] .referral-stats,
:root[data-theme="light"] .referral-link-box,
:root[data-theme="light"] .referral-reward-box,
:root[data-theme="light"] .referral-how-card,
:root[data-theme="light"] .wallet-hero,
:root[data-theme="light"] .wallet-stats-grid,
:root[data-theme="light"] .wallet-action-box {
    background: linear-gradient(135deg, #ffffff 0%, #f4f9ff 100%);
    border: 1px solid rgba(0, 70, 150, 0.08);
    box-shadow: 0 4px 20px rgba(0, 50, 110, 0.05);
    color: var(--text-primary);
}
:root[data-theme="light"] .referral-hero h1,
:root[data-theme="light"] .referral-hero h2,
:root[data-theme="light"] .referral-hero p,
:root[data-theme="light"] .wallet-hero h1,
:root[data-theme="light"] .wallet-hero p {
    color: var(--text-primary);
}

/* ── 4. Offers Huge Banners ── */
:root[data-theme="light"] .offers-page-hero,
:root[data-theme="light"] .offers-spotlight,
:root[data-theme="light"] .offer-bundle-card,
:root[data-theme="light"] .offers-topbar {
    background: linear-gradient(135deg, #ffffff 0%, #f4f9ff 100%);
    border: 1px solid rgba(0, 70, 150, 0.08);
    box-shadow: 0 4px 20px rgba(0, 50, 110, 0.05);
    color: var(--text-primary);
}
:root[data-theme="light"] .offers-page-hero h1,
:root[data-theme="light"] .offers-page-hero p,
:root[data-theme="light"] .offers-spotlight h2,
:root[data-theme="light"] .offer-bundle-card h3 {
    color: var(--text-primary);
}

/* Base text overrides inside these dark-gradient sections */
:root[data-theme="light"] .orders-review-banner strong,
:root[data-theme="light"] .referral-link-box strong,
:root[data-theme="light"] .referral-stats strong,
:root[data-theme="light"] .wallet-stats-grid strong {
    color: var(--text-primary);
}

:root[data-theme="light"] .orders-review-banner span,
:root[data-theme="light"] .referral-link-box span,
:root[data-theme="light"] .referral-stats span,
:root[data-theme="light"] .wallet-stats-grid span {
    color: var(--text-secondary);
}

/* Fix any inner nested containers inside the banners that might still be dark */
:root[data-theme="light"] .orders-page-header *,
:root[data-theme="light"] .orders-hero *,
:root[data-theme="light"] .referral-hero *,
:root[data-theme="light"] .wallet-hero *,
:root[data-theme="light"] .offers-page-hero * {
    text-shadow: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   30. MISSED WALLET, HISTORY, AND PORTFOLIO CARDS
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Wallet Top Cards & Forms ── */
:root[data-theme="light"] .wallet-balance-card,
:root[data-theme="light"] .wallet-deposit-shell,
:root[data-theme="light"] .wallet-section,
:root[data-theme="light"] .payment-options,
:root[data-theme="light"] .payment-methods-section,
:root[data-theme="light"] .wallet-method-select-wrap {
    background: linear-gradient(135deg, #ffffff 0%, #f4f9ff 100%);
    border: 1px solid rgba(0, 70, 150, 0.08);
    box-shadow: 0 4px 20px rgba(0, 50, 110, 0.05);
    color: var(--text-primary);
}

:root[data-theme="light"] .wallet-balance-label,
:root[data-theme="light"] .wallet-balance-value,
:root[data-theme="light"] .wallet-balance-hint,
:root[data-theme="light"] .wallet-section-head h3,
:root[data-theme="light"] .wallet-section-head p {
    color: var(--text-primary);
    text-shadow: none !important;
}

:root[data-theme="light"] .payment-option {
    background: #ffffff;
    border: 1px solid rgba(0, 70, 150, 0.08);
    color: var(--text-primary);
}

:root[data-theme="light"] .payment-option-content {
    color: var(--text-primary);
}

/* ── 2. Wallet History Cards ── */
:root[data-theme="light"] .wallet-history-page-hero,
:root[data-theme="light"] .wallet-summary-card {
    background: linear-gradient(135deg, #ffffff 0%, #f4f9ff 100%);
    border: 1px solid rgba(0, 70, 150, 0.08);
    box-shadow: 0 4px 20px rgba(0, 50, 110, 0.05);
    color: var(--text-primary);
}

:root[data-theme="light"] .wallet-summary-label,
:root[data-theme="light"] .wallet-summary-value {
    color: var(--text-primary);
    text-shadow: none !important;
}

/* ── 3. Portfolio Cards ── */
:root[data-theme="light"] .portfolio-page-hero,
:root[data-theme="light"] .portfolio-card,
:root[data-theme="light"] .portfolio-card-info,
:root[data-theme="light"] .portfolio-card-desc,
:root[data-theme="light"] .portfolio-card-meta {
    background: linear-gradient(135deg, #ffffff 0%, #f4f9ff 100%);
    border: 1px solid rgba(0, 70, 150, 0.08);
    box-shadow: 0 4px 20px rgba(0, 50, 110, 0.05);
    color: var(--text-primary);
}

:root[data-theme="light"] .portfolio-page-hero h1,
:root[data-theme="light"] .portfolio-page-hero p,
:root[data-theme="light"] .portfolio-card-title,
:root[data-theme="light"] .portfolio-card-desc {
    color: var(--text-primary);
    text-shadow: none !important;
}

/* Reset text colors in inner elements */
:root[data-theme="light"] .wallet-balance-card *,
:root[data-theme="light"] .wallet-deposit-shell *,
:root[data-theme="light"] .wallet-history-page-hero *,
:root[data-theme="light"] .wallet-summary-card *,
:root[data-theme="light"] .portfolio-page-hero * {
    text-shadow: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   31. GLOBAL TEXT, ICON, AND EMOJI CLEANUP (Light Mode Consistency)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Strip all neon glowing text shadows globally in light mode ── */
:root[data-theme="light"] * {
    text-shadow: none !important;
}

/* ── Prevent emojis and image icons from getting weird filters ── */
:root[data-theme="light"] img,
:root[data-theme="light"] svg,
:root[data-theme="light"] .category-icon,
:root[data-theme="light"] .emoji,
:root[data-theme="light"] .service-icon,
:root[data-theme="light"] .wallet-method-card-icon img {
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
}

/* ── Prevent FontAwesome icons from glowing or taking dark mode colors ── */
:root[data-theme="light"] i.fas,
:root[data-theme="light"] i.fab,
:root[data-theme="light"] i.far,
:root[data-theme="light"] i.fa,
:root[data-theme="light"] .fa-solid,
:root[data-theme="light"] .fa-brands,
:root[data-theme="light"] .fa-regular {
    text-shadow: none !important;
    filter: none !important;
}

/* ── Strip drop-shadows from SVGs and structural boxes ── */
:root[data-theme="light"] svg,
:root[data-theme="light"] .hero-brand-logo,
:root[data-theme="light"] .hero-brand-logo-frame {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.05)) !important;
}

/* ── Fix structural headings and pale text ── */
:root[data-theme="light"] h1,
:root[data-theme="light"] h2,
:root[data-theme="light"] h3,
:root[data-theme="light"] h4,
:root[data-theme="light"] h5,
:root[data-theme="light"] h6 {
    color: var(--text-primary) !important;
}

:root[data-theme="light"] p {
    color: var(--text-secondary);
}

/* Ensure body baseline text is correct and not inherited from dark mode #e8f0f8 */
:root[data-theme="light"] body {
    color: var(--text-primary);
}

/* Restore primary color to accents (they might have been overridden by h1/h2 rules if we're not careful, but the above is standard) */
:root[data-theme="light"] .text-primary,
:root[data-theme="light"] .color-primary,
:root[data-theme="light"] .hero-highlight,
:root[data-theme="light"] .section-title i {
    color: var(--primary) !important;
}

/* ── Any hardcoded #fff, #e8f0f8, or #93e6ff in inner spans should be reset ── */
:root[data-theme="light"] .account-summary-card span,
:root[data-theme="light"] .wallet-history-table span,
:root[data-theme="light"] .order-card span,
:root[data-theme="light"] .rank-card span,
:root[data-theme="light"] .offer-card span,
:root[data-theme="light"] .portfolio-card span {
    color: inherit;
}

/* ── Specifically target the pale blue text from dark mode ── */
:root[data-theme="light"] .orders-eyebrow,
:root[data-theme="light"] .wallet-history-eyebrow,
:root[data-theme="light"] .portfolio-eyebrow,
:root[data-theme="light"] .referral-eyebrow {
    color: var(--primary) !important;
    background: rgba(0, 120, 210, 0.08) !important;
    border-color: rgba(0, 100, 180, 0.15) !important;
}

/* ==================== FINAL LIGHT MODE POLISH — 2026-07-07 ==================== */
:root[data-theme="light"] {
    --light-surface: #ffffff;
    --light-surface-soft: #f7fbff;
    --light-surface-tint: #eef7ff;
    --light-border: rgba(0, 98, 160, 0.14);
    --light-border-strong: rgba(0, 98, 160, 0.22);
    --light-shadow: 0 14px 34px rgba(20, 78, 118, 0.11);
    --light-shadow-soft: 0 8px 20px rgba(20, 78, 118, 0.08);
}

:root[data-theme="light"] body {
    background:
        radial-gradient(circle at 12% 4%, rgba(0, 170, 235, 0.12), transparent 30rem),
        radial-gradient(circle at 88% 0%, rgba(0, 117, 183, 0.1), transparent 28rem),
        linear-gradient(180deg, #f3f9ff 0%, #f8fcff 44%, #ffffff 100%) !important;
    color: #0b1f33 !important;
}

:root[data-theme="light"] .stars-layer {
    display: none !important;
}

:root[data-theme="light"] body::before,
:root[data-theme="light"] body::after {
    opacity: 0.55 !important;
}

:root[data-theme="light"] .header,
:root[data-theme="light"] .modal-overlay .modal,
:root[data-theme="light"] .auth-modal,
:root[data-theme="light"] .profile-modal,
:root[data-theme="light"] .orders-modal,
:root[data-theme="light"] .balance-modal,
:root[data-theme="light"] .purchase-modal,
:root[data-theme="light"] .category-card,
:root[data-theme="light"] .service-card,
:root[data-theme="light"] .order-card,
:root[data-theme="light"] .wallet-history-card,
:root[data-theme="light"] .wallet-method-summary,
:root[data-theme="light"] .wallet-method-chooser,
:root[data-theme="light"] .payment-option,
:root[data-theme="light"] .contact-card,
:root[data-theme="light"] .user-menu-dropdown,
:root[data-theme="light"] .hero-brand-glass,
:root[data-theme="light"] .hero-floating-tile,
:root[data-theme="light"] .review-card,
:root[data-theme="light"] .feature-card,
:root[data-theme="light"] .info-card,
:root[data-theme="light"] .account-panel,
:root[data-theme="light"] .account-summary-card,
:root[data-theme="light"] .api-card,
:root[data-theme="light"] .rank-card,
:root[data-theme="light"] .offer-card,
:root[data-theme="light"] .portfolio-card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 251, 255, 0.92)) !important;
    border-color: var(--light-border) !important;
    box-shadow: var(--light-shadow-soft) !important;
    color: #0b1f33 !important;
}

:root[data-theme="light"] body:not(.admin-page) .header {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(243, 250, 255, 0.9)) !important;
    border-color: var(--light-border-strong) !important;
    box-shadow: var(--light-shadow) !important;
}

:root[data-theme="light"] .modal-overlay {
    background:
        radial-gradient(circle at 18% 8%, rgba(0, 169, 232, 0.14), transparent 28rem),
        linear-gradient(180deg, rgba(239, 248, 255, 0.96), rgba(255, 255, 255, 0.94)) !important;
}

:root[data-theme="light"] .modal-overlay::after {
    opacity: 0.18 !important;
}

:root[data-theme="light"] .modal-header,
:root[data-theme="light"] .data-card-header,
:root[data-theme="light"] .auth-toggle,
:root[data-theme="light"] .order-price-line + .order-price-line,
:root[data-theme="light"] .order-overview-total-rows,
:root[data-theme="light"] .wallet-detail-row,
:root[data-theme="light"] .table-pagination {
    border-color: var(--light-border) !important;
}

:root[data-theme="light"] .section-title,
:root[data-theme="light"] .hero-title,
:root[data-theme="light"] .modal-header h3,
:root[data-theme="light"] .category-card h3,
:root[data-theme="light"] .service-name,
:root[data-theme="light"] .service-card h3,
:root[data-theme="light"] .wallet-history-card-head h4,
:root[data-theme="light"] .order-card h4,
:root[data-theme="light"] .user-name-small,
:root[data-theme="light"] .mobile-nav-account-name,
:root[data-theme="light"] .group-back-text strong,
:root[data-theme="light"] .wallet-item-title,
:root[data-theme="light"] .profile-section-title {
    color: #0b1f33 !important;
    text-shadow: none !important;
}

:root[data-theme="light"] .section-subtitle,
:root[data-theme="light"] .category-card p,
:root[data-theme="light"] .service-description,
:root[data-theme="light"] .form-label,
:root[data-theme="light"] .modal-close,
:root[data-theme="light"] .order-overview-note,
:root[data-theme="light"] .wallet-history-card-head p,
:root[data-theme="light"] .auth-toggle p,
:root[data-theme="light"] .auth-forgot a,
:root[data-theme="light"] .mobile-nav-account-email,
:root[data-theme="light"] .group-back-text span,
:root[data-theme="light"] .wallet-item-meta,
:root[data-theme="light"] .profile-muted {
    color: #526d84 !important;
}

:root[data-theme="light"] .form-input,
:root[data-theme="light"] .form-select,
:root[data-theme="light"] .form-textarea,
:root[data-theme="light"] input,
:root[data-theme="light"] textarea,
:root[data-theme="light"] select {
    background: #f7fbff !important;
    border-color: var(--light-border) !important;
    color: #0b1f33 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

:root[data-theme="light"] .form-input:focus,
:root[data-theme="light"] .form-select:focus,
:root[data-theme="light"] .form-textarea:focus,
:root[data-theme="light"] input:focus,
:root[data-theme="light"] textarea:focus,
:root[data-theme="light"] select:focus {
    border-color: rgba(0, 145, 210, 0.48) !important;
    box-shadow: 0 0 0 3px rgba(0, 145, 210, 0.12) !important;
}

:root[data-theme="light"] .btn-secondary,
:root[data-theme="light"] .lang-btn,
:root[data-theme="light"] .theme-toggle-btn,
:root[data-theme="light"] .wallet-detail-btn,
:root[data-theme="light"] .table-pagination .btn-secondary,
:root[data-theme="light"] .group-back-btn,
:root[data-theme="light"] .filter-btn,
:root[data-theme="light"] .pagination-btn {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: var(--light-border-strong) !important;
    color: #12324c !important;
    box-shadow: var(--light-shadow-soft) !important;
}

:root[data-theme="light"] .btn-secondary:hover,
:root[data-theme="light"] .lang-btn:hover,
:root[data-theme="light"] .theme-toggle-btn:hover,
:root[data-theme="light"] .wallet-detail-btn:hover,
:root[data-theme="light"] .group-back-btn:hover,
:root[data-theme="light"] .filter-btn:hover,
:root[data-theme="light"] .filter-btn.active,
:root[data-theme="light"] .pagination-btn:hover:not(:disabled),
:root[data-theme="light"] .pagination-btn.active {
    background: #ffffff !important;
    border-color: rgba(0, 145, 210, 0.36) !important;
    color: #006cae !important;
}

:root[data-theme="light"] .header-balance-badge,
:root[data-theme="light"] .user-account-stack,
:root[data-theme="light"] .mobile-header-profile,
:root[data-theme="light"] .mobile-header-tools .header-balance-badge,
:root[data-theme="light"] .user-progress-shell,
:root[data-theme="light"] .order-coupon-shell,
:root[data-theme="light"] .order-overview-card,
:root[data-theme="light"] .order-overview-total-card,
:root[data-theme="light"] .wallet-summary-card,
:root[data-theme="light"] .wallet-item-card,
:root[data-theme="light"] .service-price-panel,
:root[data-theme="light"] .service-fact,
:root[data-theme="light"] .service-compact-fact {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(240, 248, 255, 0.86)) !important;
    border-color: var(--light-border) !important;
    box-shadow: var(--light-shadow-soft) !important;
    color: #0b1f33 !important;
}

:root[data-theme="light"] .header-balance-badge-label,
:root[data-theme="light"] .user-progress-caption,
:root[data-theme="light"] .wallet-summary-label,
:root[data-theme="light"] .order-overview-row span,
:root[data-theme="light"] .service-compact-fact-label,
:root[data-theme="light"] .service-price-label {
    color: #5c7489 !important;
}

:root[data-theme="light"] .header-balance-badge-value,
:root[data-theme="light"] .wallet-summary-value,
:root[data-theme="light"] .order-overview-row strong,
:root[data-theme="light"] .service-compact-fact-value,
:root[data-theme="light"] .service-price-value {
    color: #0b1f33 !important;
}

:root[data-theme="light"] .footer {
    background:
        linear-gradient(180deg, rgba(244, 250, 255, 0.94), rgba(255, 255, 255, 0.98)) !important;
    border-color: var(--light-border) !important;
}

:root[data-theme="light"] .footer a,
:root[data-theme="light"] .legacy-footer-links a {
    color: #32566f !important;
}

:root[data-theme="light"] .auth-alert-warning {
    background: rgba(255, 196, 0, 0.14) !important;
    border-color: rgba(184, 130, 0, 0.22) !important;
    color: #8a6200 !important;
}

:root[data-theme="light"] .auth-alert-error {
    background: rgba(255, 68, 102, 0.1) !important;
    border-color: rgba(210, 45, 80, 0.22) !important;
    color: #b42345 !important;
}

:root[data-theme="light"] .auth-alert-success {
    background: rgba(0, 160, 100, 0.1) !important;
    border-color: rgba(0, 136, 86, 0.22) !important;
    color: #007a4e !important;
}

/* Reviews page consistency for pages without late offer CSS. */
:root[data-theme="light"] .reviews-page-hero,
:root[data-theme="light"] .reviews-page-score-card,
:root[data-theme="light"] .reviews-page-distribution-card,
:root[data-theme="light"] .reviews-page-toolbar,
:root[data-theme="light"] .reviews-page-empty,
:root[data-theme="light"] .testimonials-summary,
:root[data-theme="light"] .reviews-summary,
:root[data-theme="light"] .review-card,
:root[data-theme="light"] .testimonial-card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(245, 251, 255, 0.92)) !important;
    border-color: rgba(0, 98, 160, 0.14) !important;
    box-shadow: 0 10px 26px rgba(20, 78, 118, 0.08) !important;
    color: #0b1f33 !important;
}

:root[data-theme="light"] .reviews-page-hero h1,
:root[data-theme="light"] .reviews-page-toolbar-copy h2,
:root[data-theme="light"] .reviews-page-score-value,
:root[data-theme="light"] .testimonial-user h3 {
    color: #0b1f33 !important;
    text-shadow: none !important;
}

:root[data-theme="light"] .reviews-page-hero p,
:root[data-theme="light"] .reviews-page-score-meta,
:root[data-theme="light"] .reviews-page-toolbar-copy p,
:root[data-theme="light"] .reviews-distribution-label,
:root[data-theme="light"] .reviews-distribution-count,
:root[data-theme="light"] .review-date,
:root[data-theme="light"] .review-comment,
:root[data-theme="light"] .testimonial-card p,
:root[data-theme="light"] .testimonial-user span {
    color: #526d84 !important;
}

:root[data-theme="light"] .reviews-page-eyebrow,
:root[data-theme="light"] .review-service-chip {
    background: rgba(230, 247, 255, 0.92) !important;
    border-color: rgba(0, 136, 221, 0.18) !important;
    color: #006cae !important;
}

:root[data-theme="light"] .review-verified-badge {
    background: rgba(13, 150, 104, 0.1) !important;
    border-color: rgba(13, 150, 104, 0.2) !important;
    color: #0d805d !important;
}

:root[data-theme="light"] .reviews-page-score-stars,
:root[data-theme="light"] .reviews-avg-stars,
:root[data-theme="light"] .review-rating,
:root[data-theme="light"] .testimonial-rating {
    color: #f6ad00 !important;
}

:root[data-theme="light"] .review-avatar,
:root[data-theme="light"] .testimonial-avatar:not(.has-image) {
    background: linear-gradient(145deg, #e7f8ff, #ffffff) !important;
    border: 1px solid rgba(0, 98, 160, 0.16) !important;
    color: #0080d4 !important;
    box-shadow: 0 8px 18px rgba(20, 78, 118, 0.08) !important;
}

:root[data-theme="light"] .reviews-filter-btn {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(0, 98, 160, 0.16) !important;
    color: #526d84 !important;
}

:root[data-theme="light"] .reviews-filter-btn:hover,
:root[data-theme="light"] .reviews-filter-btn.active {
    background: linear-gradient(135deg, #e6f7ff, #dff3ff) !important;
    border-color: rgba(0, 136, 221, 0.32) !important;
    color: #006cae !important;
}

:root[data-theme="light"] .reviews-distribution-bar {
    background: #e6f1fb !important;
}

/* ===== إصلاحات الوضع الفاتح (مراجعة الجلسة) ===== */

/* عنوان بطاقة الخدمة: كان نصاً داكناً على خلفية داكنة في الوضع الفاتح */
:root[data-theme="light"] .service-card .service-main h4.service-title-badge,
:root[data-theme="light"] .service-title-badge {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(238, 246, 253, 0.9));
    border: 1px solid rgba(0, 100, 180, 0.16);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
    color: #0b1f33;
}

/* نافذة «عرض السعر والتواصل»: لم يكن لها تنسيق فاتح */
:root[data-theme="light"] .contact-modal {
    background: linear-gradient(180deg, #ffffff, #f2f8ff);
    border: 1px solid rgba(0, 100, 180, 0.16);
    box-shadow: 0 30px 80px rgba(20, 78, 118, 0.22);
}

:root[data-theme="light"] .contact-modal-title {
    color: #0b1f33;
}

:root[data-theme="light"] .contact-modal-hint,
:root[data-theme="light"] .contact-modal-price-label {
    color: #526d84;
}

:root[data-theme="light"] .contact-modal-price {
    color: #0a6cbf;
}

:root[data-theme="light"] .contact-modal-close {
    background: rgba(0, 80, 150, 0.06);
    color: #526d84;
}

:root[data-theme="light"] .contact-modal-close:hover {
    background: rgba(0, 80, 150, 0.12);
    color: #0b1f33;
}