/**
 * Zinox | زینوکس — تم برند (لایه نهایی — اولویت بالا)
 * مشکی مات #0B0F14 | آبی #00AEEF | نقره‌ای #D9E2EC | فیروزه‌ای #00FFC6
 */

:root {
    --zinox-bg: #0B0F14;
    --zinox-bg-elevated: #141B24;
    --zinox-bg-card: #1A2330;
    --zinox-brand: #00AEEF;
    --zinox-brand-dark: #0088C2;
    --zinox-brand-light: #33C1F5;
    --zinox-silver: #D9E2EC;
    --zinox-silver-muted: #9AA8B8;
    --zinox-accent: #00FFC6;
    --zinox-text: #D9E2EC;
    --zinox-text-muted: #9AA8B8;
    --zinox-border: rgba(217, 226, 236, 0.12);
    --zinox-glow: 0 0 24px rgba(0, 174, 239, 0.35);
    --zinox-gradient-brand: linear-gradient(135deg, #00AEEF 0%, #0088C2 100%);
    --zinox-gradient-accent: linear-gradient(135deg, #00AEEF 0%, #00FFC6 100%);
    --zinox-gradient-hero: linear-gradient(135deg, #0B0F14 0%, #141B24 45%, #0d1a28 100%);

    --org-primary: var(--zinox-brand);
    --org-primary-light: var(--zinox-brand-light);
    --org-primary-dark: var(--zinox-brand-dark);
    --org-secondary: var(--zinox-silver);
    --org-accent: var(--zinox-accent);
    --org-white: #ffffff;
    --org-light-gray: #E8EDF2;
    --org-gray: rgba(217, 226, 236, 0.25);
    --org-dark-gray: var(--zinox-silver-muted);
    --org-black: var(--zinox-bg);

    --theme-primary: var(--zinox-brand);
    --theme-primary-dark: var(--zinox-brand-dark);
    --theme-secondary: var(--zinox-silver);
    --theme-accent: var(--zinox-accent);
    --theme-text-accent: var(--zinox-brand);
    --hero-primary-color: var(--zinox-brand);
}

/* Bootstrap override */
:root {
    --bs-primary: #00AEEF;
    --bs-primary-rgb: 0, 174, 239;
    --bs-link-color: #00AEEF;
    --bs-link-hover-color: #00FFC6;
}

html,
body {
    background-color: var(--zinox-bg) !important;
    color: var(--zinox-text) !important;
}

[data-theme="light"] body {
    background-color: #F4F7FA !important;
    color: #0B0F14 !important;
}

[data-theme="light"] .navbar,
[data-theme="light"] header {
    background-color: #ffffff !important;
    border-bottom: 1px solid rgba(11, 15, 20, 0.08) !important;
}

a { color: var(--zinox-brand) !important; }
a:hover { color: var(--zinox-accent) !important; }

.btn-primary,
.btn.btn-primary,
.hero-btn,
.btn-subscribe,
.btn-primary.hero-btn {
    background: var(--zinox-gradient-brand) !important;
    border-color: var(--zinox-brand) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn.btn-primary:hover,
.hero-btn:hover,
.btn-subscribe:hover {
    background: linear-gradient(135deg, var(--zinox-brand-light), var(--zinox-brand)) !important;
    box-shadow: var(--zinox-glow) !important;
}

.btn-outline-primary {
    color: var(--zinox-brand) !important;
    border-color: var(--zinox-brand) !important;
}

.btn-outline-primary:hover {
    background: var(--zinox-brand) !important;
    color: var(--zinox-bg) !important;
}

.text-primary { color: var(--zinox-brand) !important; }
.bg-primary { background-color: var(--zinox-brand) !important; }

/* هدر و ناوبری */
header,
.navbar,
.navbar-light {
    background-color: var(--zinox-bg-elevated) !important;
    border-bottom: 1px solid var(--zinox-border) !important;
}

.navbar .nav-link { color: var(--zinox-silver) !important; }
.navbar .nav-link:hover,
.navbar .nav-link.active { color: var(--zinox-brand) !important; }
.navbar-brand { color: var(--zinox-silver) !important; }
.navbar-brand i { color: var(--zinox-brand) !important; }

/* هیرو — اولویت بالا روی استایل‌های قدیمی سبز */
.modern-hero,
[data-theme="dark"] .modern-hero,
[data-theme="light"] .modern-hero {
    background: #0B0F14 !important;
}

.modern-hero .gradient-overlay,
[data-theme="dark"] .hero-background .gradient-overlay {
    background:
        radial-gradient(ellipse 60% 50% at 70% 20%, rgba(0, 174, 239, 0.22) 0%, transparent 55%),
        radial-gradient(ellipse 50% 40% at 15% 80%, rgba(0, 255, 198, 0.12) 0%, transparent 50%),
        linear-gradient(180deg, #0B0F14 0%, #141B24 55%, #0B0F14 100%) !important;
}

.hero-title .title-line,
[data-theme="dark"] .hero-title { color: #D9E2EC !important; }

.hero-title .highlight,
[data-theme="dark"] .hero-title .highlight {
    background: linear-gradient(90deg, #00AEEF, #00FFC6) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

.hero-title .typing-text,
.typing-text {
    color: #00FFC6 !important;
    -webkit-text-fill-color: #00FFC6 !important;
}

.hero-description,
[data-theme="dark"] .hero-description { color: #9AA8B8 !important; }

.hero-badge {
    background: rgba(0, 174, 239, 0.12) !important;
    border-color: rgba(0, 174, 239, 0.35) !important;
    color: #00AEEF !important;
}

.hero-features .feature-item,
[data-theme="dark"] .hero-features .feature-item {
    background: rgba(26, 35, 48, 0.6) !important;
    border: 1px solid rgba(0, 174, 239, 0.2) !important;
    color: #D9E2EC !important;
}

.hero-features .feature-icon,
[data-theme="dark"] .hero-features .feature-icon {
    background: linear-gradient(135deg, rgba(0, 174, 239, 0.25), rgba(0, 255, 198, 0.1)) !important;
    color: #00AEEF !important;
    border: 1px solid rgba(0, 174, 239, 0.4) !important;
}

.modern-hero .hero-btn,
.modern-hero .btn-primary.hero-btn,
[data-theme="dark"] .hero-btn {
    background: linear-gradient(135deg, #00AEEF, #0088C2) !important;
    color: #fff !important;
    border: none !important;
}

.hero-background .shape,
[data-theme="dark"] .hero-background .animated-shapes .shape {
    background: rgba(0, 174, 239, 0.06) !important;
    border: 1px solid rgba(0, 174, 239, 0.25) !important;
    box-shadow: 0 0 40px rgba(0, 174, 239, 0.15) !important;
}

.hero-background .particle,
[data-theme="dark"] .hero-background .floating-particles .particle {
    background: #00AEEF !important;
    box-shadow: 0 0 8px #00AEEF !important;
}

.section-subtitle { color: var(--zinox-silver-muted) !important; }

/* عناوین و خط تزئینی */
h2:after,
.section-line,
.section-header .section-line {
    background: var(--zinox-gradient-accent) !important;
}

.section-title,
.section-title i { color: var(--zinox-silver) !important; }

/* کارت‌ها */
.product-card,
.feature-card,
.category-card,
.faq-item,
.modern-features .feature-card {
    background: var(--zinox-bg-card) !important;
    border-color: var(--zinox-border) !important;
    color: var(--zinox-text) !important;
}

.product-card:hover,
.feature-card:hover {
    border-color: rgba(0, 174, 239, 0.45) !important;
    box-shadow: var(--zinox-glow) !important;
}

.feature-icon i,
.feature-item .feature-icon,
.feature-card .feature-icon i {
    color: var(--zinox-brand) !important;
}

.icon-bg {
    background: rgba(0, 174, 239, 0.15) !important;
}

.feature-badge,
.product-badge,
.badge-new {
    background: var(--zinox-gradient-brand) !important;
    color: #fff !important;
}

/* دکمه‌ها و لینک‌های صفحه اصلی */
.btn-explore,
.btn-view-all,
.view-all-btn,
.category-link {
    background: var(--zinox-gradient-brand) !important;
    color: #fff !important;
    border-color: var(--zinox-brand) !important;
}

.price-current,
.product-price,
.text-success {
    color: var(--zinox-accent) !important;
}

/* فوتر — استایل اصلی در footer.css */

/* FAQ */
.faq-icon,
.faq-q-icon,
.faq-item.active .faq-toggle {
    background: var(--zinox-gradient-brand) !important;
    box-shadow: 0 10px 30px rgba(0, 174, 239, 0.3) !important;
}
.faq-toggle i,
.faq-question:hover { color: var(--zinox-brand) !important; }
.faq-item:hover { border-color: rgba(0, 174, 239, 0.2) !important; }
.faq-question:hover { background: rgba(0, 174, 239, 0.05) !important; }

/* خبرنامه / CTA */
.newsletter-section,
.cta-section,
.features-section,
.modern-features {
    background: var(--zinox-bg-elevated) !important;
}
.cta-icon,
.newsletter-section .cta-icon {
    background: var(--zinox-gradient-brand) !important;
}

/* مگامنو */
.mega-menu,
.mega-menu-dropdown,
.category-mega-menu {
    background: var(--zinox-bg-elevated) !important;
    border-color: var(--zinox-border) !important;
}
.mega-menu a:hover,
.category-item:hover {
    color: var(--zinox-brand) !important;
    background: rgba(0, 174, 239, 0.08) !important;
}

/* فرم */
.form-control:focus,
.form-select:focus {
    border-color: var(--zinox-brand) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 174, 239, 0.25) !important;
}

[data-theme="light"] .form-control,
[data-theme="light"] .form-select {
    background: #fff !important;
    color: #0B0F14 !important;
}

/* اسپلش */
.splash-screen { background: var(--zinox-bg) !important; }
.splash-text { color: var(--zinox-brand) !important; }

/* لودر */
.professional-loader,
.loader-overlay {
    background: var(--zinox-bg) !important;
}
.loader-spinner { border-top-color: var(--zinox-brand) !important; }

/* تم روشن — کارت‌ها روشن‌تر */
[data-theme="light"] .product-card,
[data-theme="light"] .feature-card,
[data-theme="light"] .faq-item {
    background: #fff !important;
    color: #0B0F14 !important;
    border-color: rgba(11, 15, 20, 0.08) !important;
}

[data-theme="light"] .section-title { color: #0B0F14 !important; }
[data-theme="light"] .hero-title .title-line { color: #0B0F14 !important; }

/* اسکرول‌بار */
::-webkit-scrollbar-thumb { background: var(--zinox-brand-dark); }
::-webkit-scrollbar-track { background: var(--zinox-bg); }

/* ── Animated theme switch (View Transition + fallback) ─────── */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.68s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

::view-transition-old(root) {
    animation-name: zinox-theme-fade-out;
    z-index: 1;
}

::view-transition-new(root) {
    animation-name: zinox-theme-circle-in;
    z-index: 2;
}

@keyframes zinox-theme-fade-out {
    from { opacity: 1; }
    to { opacity: 0.35; }
}

@keyframes zinox-theme-circle-in {
    from {
        clip-path: circle(0 at var(--zinox-theme-x, 50vw) var(--zinox-theme-y, 50vh));
    }
    to {
        clip-path: circle(var(--zinox-theme-r, 150vmax) at var(--zinox-theme-x, 50vw) var(--zinox-theme-y, 50vh));
    }
}

.zinox-theme-reveal {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    pointer-events: none;
    clip-path: circle(0 at var(--zinox-theme-x, 50vw) var(--zinox-theme-y, 50vh));
    transition: clip-path 0.72s cubic-bezier(0.4, 0, 0.2, 1);
}

.zinox-theme-reveal[data-theme="dark"] {
    background: #0B0F14;
}

.zinox-theme-reveal[data-theme="light"] {
    background: #F4F7FA;
}

.zinox-theme-reveal.is-expanding {
    clip-path: circle(var(--zinox-theme-r, 150vmax) at var(--zinox-theme-x, 50vw) var(--zinox-theme-y, 50vh));
}

.zinox-theme-reveal.is-fading {
    opacity: 0;
    transition: opacity 0.32s ease;
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none !important;
    }

    .zinox-theme-reveal {
        display: none !important;
    }
}