/* =========================================================
   تم رویال (Royal) — لوکس، مشکی اونیکس و طلایی شامپاینی
   ---------------------------------------------------------
   پالت:
     اونیکس             #0A0A0C   --surface-soft (پس‌زمینه)
     زغال               #121216   --surface      (پنل‌ها)
     گرافیت بالاتنه      #18181E   --surface-alt  (کارت‌ها/هدر)
     مروارید گرم        #F6F1E7   --dark         (متن اصلی)
     طلایی شامپاینی     #E9C46A   --primary      (تأکید اصلی)
     طلایی کهربایی      #C29D3E   --primary-dark
     کرم طلایی روشن     #F3DEA4   --primary-light
     برنز کهنه          #A67C2E   --accent
     خاکستری گرم محو    #A9A293   --gray         (متن محو)
     مرز طلایی محو      #312C23   --border

   فایل فقط در صورت فعال‌بودن تم royal روی body بارگذاری می‌شود
   و هیچ تم دیگری را تحت تاثیر قرار نمی‌دهد.
   تمام متن‌ها روی اونیکس حداقل نسبت کنتراست ۴.۵:۱ دارند.
   ========================================================= */

/* ===== پالت و متغیرهای پایه ===== */
body.theme-royal {
    --primary: #E9C46A;
    --primary-dark: #C29D3E;
    --primary-light: #F3DEA4;
    --secondary: #1B1B21;
    --secondary-light: #23232B;
    --accent: #A67C2E;
    --accent-pink: #C9A227;
    --success: #6EE7A8;
    --danger: #FCA5A5;
    --warning: #E9C46A;
    --info: #7DD3FC;
    --dark: #F6F1E7;
    --gray: #A9A293;
    --gray-light: #312C23;
    --gray-lighter: #1E1E24;
    --surface: #121216;
    --surface-soft: #0A0A0C;
    --surface-alt: #18181E;
    --on-surface: #F6F1E7;
    --border: #312C23;
    /* مرزِ قابل‌تشخیص برای کنترل‌های تعاملی (ورودی، دکمه، انتخابگر).
       --borderِ تیره فقط برای جداکننده‌های تزئینی است؛ استانداردِ
       WCAG 1.4.11 برای لبهٔ کنترل‌ها حداقل ۳:۱ می‌خواهد و #312C23 فقط
       ۱.۴:۱ می‌دهد. این مقدار روی همهٔ سطوح ≥ ۳.۴:۱ دارد. */
    --border-strong: #7C6B47;
    --white: #F6F1E7;
    --gradient-primary: linear-gradient(135deg, #E9C46A 0%, #A67C2E 100%);
    --gradient-secondary: linear-gradient(145deg, #0A0A0C 0%, #16161B 100%);
    --gradient-accent: linear-gradient(135deg, #F3DEA4 0%, #A67C2E 100%);
    --gradient-hero: linear-gradient(140deg, #0A0A0C 0%, #14140F 48%, #1A1710 100%);
    --shadow: 0 12px 34px rgba(0, 0, 0, .42);
    --shadow-lg: 0 26px 64px rgba(0, 0, 0, .52);
    --shadow-xl: 0 38px 96px rgba(0, 0, 0, .6);
    --radius: 18px;
    --radius-sm: 12px;
    --radius-xs: 8px;
    --theme-primary-rgb: 233, 196, 106;
    --theme-accent-rgb: 166, 124, 46;
    --royal-gold: #E9C46A;
}

html:has(body.theme-royal) { background: #0A0A0C; }

body.theme-royal {
    color: var(--dark);
    background:
        radial-gradient(circle at 88% 2%, rgba(233, 196, 106, .075), transparent 30rem),
        radial-gradient(circle at 4% 14%, rgba(166, 124, 46, .05), transparent 26rem),
        var(--surface-soft);
}

/* ----- بافت دانه‌ریز طلایی بسیار محو (استاتیک، بدون انیمیشن) ----- */
body.theme-royal::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    opacity: .5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}

/* ----- المان‌های پایه ----- */
body.theme-royal ::-webkit-scrollbar-track { background: #0C0C0F; }
body.theme-royal ::-webkit-scrollbar-thumb { background: #3A3428; border-radius: 99px; }
body.theme-royal ::-webkit-scrollbar-thumb:hover { background: #A67C2E; }
body.theme-royal ::selection { background: rgba(233, 196, 106, .26); color: #FFF9EC; }

/* حلقهٔ فوکوس طلایی برای دسترس‌پذیری صفحه‌کلید */
body.theme-royal :focus-visible {
    outline: 2px solid var(--royal-gold);
    outline-offset: 3px;
    border-radius: 6px;
}

/* ===== هدر ===== */
body.theme-royal .header {
    background: rgba(18, 18, 22, .82);
    backdrop-filter: blur(18px) saturate(150%);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
}
body.theme-royal .header.scrolled {
    background: rgba(10, 10, 12, .94);
    border-bottom-color: rgba(233, 196, 106, .22);
}
body.theme-royal .logo-copy strong { color: var(--dark); }
body.theme-royal .logo-copy small { color: var(--gray); }
body.theme-royal .logo-icon {
    background: var(--gradient-primary);
    color: #1A1408;
    box-shadow: 0 8px 24px rgba(233, 196, 106, .28);
}

/* ===== ناوبری ===== */
body.theme-royal .nav { background: transparent; border: none; padding: 0; border-radius: 0; gap: 2px; }
body.theme-royal .nav-link { color: var(--gray); }
body.theme-royal .nav-link:hover,
body.theme-royal .nav-link.active {
    background: rgba(233, 196, 106, .12);
    color: var(--royal-gold);
    box-shadow: none;
}
body.theme-royal .nav-link::after { display: none; }

/* دکمهٔ همبرگر */
body.theme-royal .menu-toggle {
    background: #14141A;
    border-color: var(--border-strong);
    color: var(--dark);
}
body.theme-royal .menu-toggle:hover { border-color: rgba(233, 196, 106, .5); color: var(--royal-gold); }

/* ===== جستجو، دکمه‌های آیکونی، دراپ‌داون ===== */
body.theme-royal .search-bar { background: #14141A; border-color: var(--border); }
body.theme-royal .search-bar input { background: #0F0F14; border-color: var(--border-strong); color: var(--dark); }
body.theme-royal .search-bar input::placeholder { color: #7D7666; }
body.theme-royal .search-bar input:focus { border-color: rgba(233, 196, 106, .5); box-shadow: 0 0 0 4px rgba(233, 196, 106, .12); }
body.theme-royal .search-bar button { color: var(--gray); }
body.theme-royal .search-bar button:hover { color: var(--royal-gold); }

body.theme-royal .btn-icon { background: #14141A; border-color: var(--border-strong); color: var(--gray); }
body.theme-royal .btn-icon:hover { color: var(--royal-gold); border-color: rgba(233, 196, 106, .45); background: rgba(233, 196, 106, .08); }
body.theme-royal .badge { background: var(--gradient-primary); color: #1A1408; }

body.theme-royal .btn-ghost { background: #14141A; color: var(--dark); border-color: var(--border-strong); }
body.theme-royal .btn-ghost:hover { border-color: rgba(233, 196, 106, .5); color: var(--royal-gold); }

body.theme-royal .user-dropdown .dropdown-menu {
    background: #15151B;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xl);
}
body.theme-royal .user-dropdown .dropdown-menu a { color: var(--gray); }
body.theme-royal .user-dropdown .dropdown-menu a:hover { background: rgba(233, 196, 106, .1); color: var(--royal-gold); }
body.theme-royal .user-dropdown .dropdown-menu a.danger:hover { background: rgba(252, 165, 165, .12); color: var(--danger); }
body.theme-royal .user-dropdown .dropdown-menu .divider { border-top-color: var(--border); }
body.theme-royal .user-dropdown .dropdown-menu .dropdown-header { background: #101015; }
body.theme-royal .user-dropdown .dropdown-menu .dropdown-header small { color: var(--gray); }

/* ===== دکمه‌ها ===== */
body.theme-royal .btn-primary {
    background: var(--gradient-primary);
    color: #1A1408;
    box-shadow: 0 10px 26px rgba(233, 196, 106, .26);
    font-weight: 800;
}
body.theme-royal .btn-primary:hover {
    box-shadow: 0 16px 38px rgba(233, 196, 106, .38);
    transform: translateY(-2px);
}
body.theme-royal .btn-glass {
    color: var(--royal-gold);
    background: rgba(233, 196, 106, .09);
    border: 1px solid rgba(233, 196, 106, .34);
    backdrop-filter: blur(12px);
}
body.theme-royal .btn-glass:hover { background: rgba(233, 196, 106, .18); border-color: rgba(233, 196, 106, .6); }
body.theme-royal .btn-outline { background: #14141A; border-color: var(--border-strong); color: var(--dark); }
body.theme-royal .btn-outline:hover { border-color: rgba(233, 196, 106, .5); color: var(--royal-gold); }
body.theme-royal .btn-light { background: var(--dark); color: #14100A; box-shadow: 0 10px 25px rgba(0,0,0,.3); }
body.theme-royal .btn-secondary { background: var(--secondary); color: var(--dark); }

/* ===== هیرو ===== */
body.theme-royal .hero { color: var(--dark); background: var(--gradient-hero); }
body.theme-royal .hero::before { background: radial-gradient(circle, rgba(233, 196, 106, .12), transparent 66%); }
body.theme-royal .hero::after { background: radial-gradient(circle, rgba(166, 124, 46, .09), transparent 70%); }

/* قاب طلایی ظریف دور سکشن هیرو */
body.theme-royal .home-hero {
    position: relative;
    border-bottom: 1px solid var(--border);
}
body.theme-royal .home-hero::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(233, 196, 106, .55), transparent);
    pointer-events: none;
}

body.theme-royal .hero-text { position: relative; z-index: 2; }

body.theme-royal .hero-badge {
    background: rgba(233, 196, 106, .1);
    border: 1px solid rgba(233, 196, 106, .34);
    color: var(--royal-gold);
    backdrop-filter: blur(8px);
}
body.theme-royal .hero-badge-dot {
    background: var(--royal-gold);
    box-shadow: 0 0 0 5px rgba(233, 196, 106, .16);
}
body.theme-royal .hero-title { color: var(--dark); letter-spacing: -.02em; }
body.theme-royal .hero-title span {
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
body.theme-royal .hero-desc { color: var(--gray); }
body.theme-royal .hero-trust-row { color: #8E8877; }
body.theme-royal .hero-trust-row i { color: var(--royal-gold); }
body.theme-royal .hero-actions .btn-primary { box-shadow: 0 10px 26px rgba(233, 196, 106, .24); }

/* ----- ماکت داشبورد در هیرو ----- */
body.theme-royal .hero-orbit { border-color: rgba(233, 196, 106, .16); }
body.theme-royal .hero-dashboard-card {
    background: #14141A;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xl);
}
body.theme-royal .hero-dashboard-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(140deg, rgba(233, 196, 106, .5), transparent 55%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
body.theme-royal .mock-window-head { background: #101015; border-bottom-color: var(--border); }
body.theme-royal .mock-window-head small { color: var(--gray); }
body.theme-royal .mock-window-head span { background: #2A2A32; }
body.theme-royal .mock-sidebar { background: #101015; border-left-color: var(--border); color: var(--gray); }
body.theme-royal .mock-content { background: #14141A; }
body.theme-royal .mock-kpis span { background: linear-gradient(135deg, rgba(233, 196, 106, .2), rgba(233, 196, 106, .07)); }
body.theme-royal .mock-chart { background: #101015; border-color: var(--border); }
body.theme-royal .mock-chart b { background: var(--gradient-primary); border-radius: 5px 5px 0 0; }
body.theme-royal .mock-products span { background: #101015; border-color: var(--border); }

body.theme-royal .floating-card {
    background: rgba(20, 20, 26, .92);
    border: 1px solid rgba(233, 196, 106, .26);
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow-lg);
    color: var(--dark);
}
body.theme-royal .floating-card small { color: var(--gray); }
body.theme-royal .floating-download > i { background: var(--gradient-primary); color: #1A1408; }
body.theme-royal .floating-rating span { color: var(--royal-gold); }
body.theme-royal .floating-rating i { color: var(--royal-gold); }

/* =========================================================
   استیج سه‌بعدی هیرو — Royal 3D Stage
   ---------------------------------------------------------
   این قسمت فقط رنگ نیست؛ هیرو یک صحنهٔ واقعیِ perspective
   می‌شود: حلقه‌ها به‌حالتِ حلقهٔ کج در فضا، کارتِ داشبورد
   در عمق، کارت‌های شناور در Zهای متفاوت، و کلِ صحنه با
   حرکتِ نشانگر و اسکرول می‌چرخد (در theme-royal.js).
   همه‌چیز transform-only و روی GPU اجرا می‌شود؛ بدون هیچ
   وابستگیِ خارجی (CDN وجود ندارد).
   ========================================================= */

/* نقطهٔ دیدِ دور + حفظِ عمقِ سه‌بعدیِ لایه‌ها */
body.theme-royal .home-hero .hero-visual {
    perspective: 1400px;
    perspective-origin: 50% 42%;
    transform-style: preserve-3d;
}
/* متن کمی جلوتر می‌نشیند تا عمقِ بیشتری حس شود */
body.theme-royal .home-hero .hero-content {
    perspective: 1600px;
    transform-style: preserve-3d;
}
body.theme-royal .home-hero .hero-text { translate: 0 0 35px; }

/* حلقه‌ها: حلقهٔ کج در فضا. چون انیمیشنِ spinOrbit روی transform
   تعریف شده، عمق و کج‌شدن را با خاصیت‌های مستقلِ translate و
   rotate می‌دهیم تا با آن چرخش ترکیب شوند (ترکیب: translate،
   سپس rotate، سپس transform). */
body.theme-royal .hero-orbit { top: 50%; left: 50%; }
body.theme-royal .orbit-one {
    translate: -50% -50% -70px;
    rotate: x 74deg;
    border-color: rgba(233, 196, 106, .12);
}
body.theme-royal .orbit-two {
    translate: -50% -50% -25px;
    rotate: x 74deg;
    border-color: rgba(233, 196, 106, .18);
}

/* کارتِ داشبورد: شناور در عمق + کج‌شدنِ اولیهٔ استاتیک.
   عمق به‌صورتِ خاصیتِ مستقلِ translate است تا JS بتواند
   transform را برای کج‌کردنِ زندهٔ نشانگر بازنویسی کند. */
body.theme-royal .hero-dashboard-card {
    translate: 0 0 65px;
    transform: rotateY(-6deg) rotateX(4deg);
}
/* براقیِ طلایی روی کارت که با جایِ نشانگر حرکت می‌کند (--mx/--my از JS) */
body.theme-royal .hero-dashboard-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    transition: opacity .45s ease;
    background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 28%),
                rgba(233, 196, 106, .22), rgba(233, 196, 106, .06) 34%, transparent 58%);
}
body.theme-royal .hero-dashboard-card:hover::before { opacity: 1; }

/* کارت‌های شناور: هرکدام در عمقِ متفاوت → هنگامِ چرخیدنِ
   صحنه، پارالاکسِ واقعی بین لایه‌ها ساخته می‌شود */
body.theme-royal .floating-download { translate: 0 0 110px; }
body.theme-royal .floating-rating { translate: 0 0 140px; }

/* ===== نوار اعتماد ===== */
body.theme-royal .trust-grid {
    background: #14141A;
    border-color: var(--border);
    box-shadow: var(--shadow);
}
body.theme-royal .trust-item { border-left-color: var(--border); }
body.theme-royal .trust-item > div { color: var(--royal-gold); background: rgba(233, 196, 106, .1); }
body.theme-royal .trust-item strong { color: var(--dark); }
body.theme-royal .trust-item small { color: var(--gray); }

/* ===== سکشن‌ها و عناوین ===== */
body.theme-royal .section-alt { background: #0E0E12; }
body.theme-royal .section-eyebrow { color: var(--royal-gold); }
body.theme-royal .section-title { color: var(--dark); }
body.theme-royal .section-title span { color: var(--royal-gold); }
body.theme-royal .section-desc { color: var(--gray); }
body.theme-royal .section-link {
    color: var(--royal-gold);
    border-color: rgba(233, 196, 106, .3);
    background: rgba(233, 196, 106, .07);
}
body.theme-royal .section-link:hover { background: rgba(233, 196, 106, .16); border-color: rgba(233, 196, 106, .55); }

/* ===== کارت‌های دسته‌بندی (هایلایتِ سه‌بعدی) ===== */
body.theme-royal .home-categories { perspective: 900px; }
body.theme-royal .category-card {
    background: #14141A;
    border: 1px solid var(--border);
    transition: transform .3s cubic-bezier(.4,0,.2,1), border-color .3s, box-shadow .3s;
}
body.theme-royal .category-card:hover {
    transform: translateY(-4px) rotateX(2deg);
    border-color: rgba(233, 196, 106, .45);
    box-shadow: var(--shadow-lg);
}
body.theme-royal .category-icon {
    background: rgba(233, 196, 106, .12);
    color: var(--royal-gold);
    border: 1px solid rgba(233, 196, 106, .22);
}
body.theme-royal .category-content h3 { color: var(--dark); }
body.theme-royal .category-content span { color: var(--gray); }
body.theme-royal .category-arrow { color: var(--gray); }
body.theme-royal .category-card:hover .category-arrow { color: var(--royal-gold); }

/* ===== کارت محصول (هایلایتِ سه‌بعدی) ===== */
body.theme-royal .products-grid { perspective: 1100px; }
body.theme-royal .product-card {
    background: #14141A;
    border: 1px solid var(--border);
    /* نکتهٔ فنی: استایلِ پایه روی این کارت animation: fadeUp … forwards
       دارد که پس از پایان، transform: translateY(0) را برای همیشه در
       خود نگه می‌دارد و هر declaration عادیِ transform را شکست می‌دهد.
       به همین دلیل برآمدن و کج‌شدنِ هاور را روی خاصیت‌های مستقلِ
       translate و rotate می‌دهیم که با آن انیمیشن ترکیب می‌شوند. */
    transition: translate .3s cubic-bezier(.4,0,.2,1), rotate .3s cubic-bezier(.4,0,.2,1), border-color .3s, box-shadow .3s;
}
body.theme-royal .product-card:hover {
    translate: 0 -6px 0;
    rotate: x 2.2deg;
    border-color: rgba(233, 196, 106, .42);
    box-shadow: var(--shadow-lg);
}
body.theme-royal .product-image { background: #0F0F14; border-bottom-color: var(--border); }
body.theme-royal .product-badge { font-weight: 800; }
body.theme-royal .badge-sale { background: var(--gradient-primary); color: #1A1408; }
body.theme-royal .badge-featured { background: rgba(233, 196, 106, .14); color: var(--royal-gold); border: 1px solid rgba(233, 196, 106, .32); }
body.theme-royal .product-overlay { background: linear-gradient(to top, rgba(10,10,12,.94), rgba(10,10,12,.35) 55%, transparent); }
body.theme-royal .product-overlay-btn {
    background: rgba(20, 20, 26, .92);
    border: 1px solid rgba(233, 196, 106, .34);
    color: var(--royal-gold);
    backdrop-filter: blur(8px);
}
body.theme-royal .product-overlay-btn:hover { background: var(--gradient-primary); color: #1A1408; border-color: transparent; }
body.theme-royal .product-category { color: var(--gray); }
body.theme-royal .product-category i { color: var(--royal-gold); }
body.theme-royal .product-title { color: var(--dark); }
body.theme-royal .product-title:hover { color: var(--royal-gold); }
body.theme-royal .product-meta { color: var(--gray); }
body.theme-royal .product-meta i { color: var(--royal-gold); }
body.theme-royal .product-price .price-current { color: var(--royal-gold); }
body.theme-royal .product-price .price-original { color: var(--gray); }
body.theme-royal .product-footer { border-top-color: var(--border); }
body.theme-royal .product-footer > .btn-add-cart,
body.theme-royal .btn-add-cart {
    background: #1E1E25;
    border: 1px solid var(--border);
    color: var(--royal-gold);
}
body.theme-royal .product-footer > .btn-add-cart:hover,
body.theme-royal .btn-add-cart:hover {
    background: var(--gradient-primary);
    color: #1A1408;
    border-color: transparent;
}

/* ===== اعداد و آمار ===== */
body.theme-royal .numbers-card {
    color: var(--dark);
    background:
        radial-gradient(circle at 82% 12%, rgba(233, 196, 106, .16), transparent 24rem),
        var(--gradient-secondary);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xl);
}
body.theme-royal .numbers-copy .section-eyebrow { color: var(--royal-gold); }
body.theme-royal .numbers-copy h2 { color: var(--dark); }
body.theme-royal .numbers-copy p { color: var(--gray); }
body.theme-royal .number-item {
    border-color: rgba(233, 196, 106, .2);
    background: rgba(233, 196, 106, .055);
}
body.theme-royal .number-item strong { color: var(--royal-gold); }
body.theme-royal .number-item span { color: var(--gray); }

/* ===== پیش‌فوتر و فوتر ===== */
body.theme-royal .pre-footer-card {
    background:
        radial-gradient(circle at 12% 50%, rgba(233, 196, 106, .22), transparent 20rem),
        linear-gradient(120deg, #1A1710 0%, #0F0F14 60%);
    color: var(--dark);
    border: 1px solid rgba(233, 196, 106, .26);
    box-shadow: var(--shadow-lg);
}
body.theme-royal .pre-footer-icon { color: var(--royal-gold); }
body.theme-royal .pre-footer-card p { color: var(--gray); }

body.theme-royal .footer { background: #08080A; border-top: 1px solid var(--border); }
body.theme-royal .footer-grid { border-bottom-color: var(--border); }
body.theme-royal .footer-brand p { color: var(--gray); }
body.theme-royal .footer-trust span { color: var(--gray); }
body.theme-royal .footer-trust i { color: var(--royal-gold); }
body.theme-royal .footer-title { color: var(--dark); }
body.theme-royal .footer-title::after { background: var(--gradient-primary); }
body.theme-royal .footer-links a { color: var(--gray); }
body.theme-royal .footer-links a:hover { color: var(--royal-gold); }
body.theme-royal .footer-social a {
    color: var(--gray);
    border-color: var(--border);
    background: #14141A;
}
body.theme-royal .footer-social a:hover { color: var(--royal-gold); border-color: rgba(233, 196, 106, .5); }
body.theme-royal .footer-bottom p { color: var(--gray); }
body.theme-royal .footer-bottom span { color: #6F6A5C; }
body.theme-royal .enamad-badge { border-color: rgba(233, 196, 106, .34); background: rgba(233, 196, 106, .06); }

/* ===== کارت‌ها، فیلترها، فرم‌ها ===== */
body.theme-royal .card,
body.theme-royal .product-panel,
body.theme-royal .filter-panel,
body.theme-royal .filter-bar {
    background: #14141A;
    border-color: var(--border) !important;
    box-shadow: var(--shadow);
}
/* کارت محصول و دسته‌بندی نیز در برابر قاعدهٔ !important پایه محافظت می‌شوند */
body.theme-royal .product-card,
body.theme-royal .category-card { border-color: var(--border) !important; }
body.theme-royal .card-header { border-bottom-color: var(--border); }
body.theme-royal .card-header h3 { color: var(--dark); }
body.theme-royal .card-body { color: var(--gray); }

body.theme-royal .form-input,
body.theme-royal .form-textarea,
body.theme-royal .form-select,
body.theme-royal .filter-select {
    background: #0F0F14;
    border-color: var(--border-strong);
    color: var(--dark);
}
body.theme-royal .form-input::placeholder,
body.theme-royal .form-textarea::placeholder { color: #7D7666; }
body.theme-royal .form-input:focus,
body.theme-royal .form-textarea:focus,
body.theme-royal .form-select:focus,
body.theme-royal .filter-select:focus {
    border-color: rgba(233, 196, 106, .55);
    box-shadow: 0 0 0 4px rgba(233, 196, 106, .13);
}
body.theme-royal .form-label { color: var(--dark); }
body.theme-royal select.form-select option,
body.theme-royal select.filter-select option { background: #14141A; color: var(--dark); }

/* ===== جدول‌ها، صفحه‌بندی ===== */
body.theme-royal .data-table { color: var(--dark); }
body.theme-royal .data-table th { color: var(--royal-gold); border-bottom-color: var(--border); background: #101015; }
body.theme-royal .data-table td { border-bottom-color: var(--border); }
body.theme-royal .data-table tr:nth-child(even) td,
body.theme-royal .data-table tr:nth-child(even) .col-actions { background: #111117; }
body.theme-royal .table-responsive { border-color: var(--border); }
body.theme-royal .pagination a { background: #14141A; border-color: var(--border-strong); color: var(--gray); }
body.theme-royal .pagination a:hover { color: var(--royal-gold); border-color: rgba(233, 196, 106, .45); }

/* ===== فلش، تاست، تب ===== */
body.theme-royal .flash { border-color: var(--border); box-shadow: var(--shadow); }
body.theme-royal .flash-success { background: rgba(110, 231, 168, .12); border-color: rgba(110, 231, 168, .34); color: var(--success); }
body.theme-royal .flash-danger { background: rgba(252, 165, 165, .12); border-color: rgba(252, 165, 165, .34); color: var(--danger); }
body.theme-royal .flash-warning { background: rgba(233, 196, 106, .13); border-color: rgba(233, 196, 106, .36); color: var(--royal-gold); }
body.theme-royal .flash-info { background: rgba(125, 211, 252, .12); border-color: rgba(125, 211, 252, .32); color: var(--info); }

/* ===== صفحات احراز هویت ===== */
body.theme-royal .auth-page {
    background:
        radial-gradient(circle at 22% 18%, rgba(233, 196, 106, .12), transparent 26rem),
        radial-gradient(circle at 78% 82%, rgba(166, 124, 46, .08), transparent 24rem),
        linear-gradient(150deg, #0A0A0C, #121216);
}
body.theme-royal .auth-card {
    background: #14141A;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xl);
}
body.theme-royal .auth-header .logo-icon { box-shadow: 0 16px 38px rgba(233, 196, 106, .3); }
body.theme-royal .auth-header h2 { color: var(--dark); }
body.theme-royal .auth-header p { color: var(--gray); }
body.theme-royal .auth-footer { border-top-color: var(--border); }
body.theme-royal .auth-footer,
body.theme-royal .auth-footer a { color: var(--gray); }
body.theme-royal .auth-footer a:hover { color: var(--royal-gold); }

/* ===== صفحات محصول / مقایسه / سبد ===== */
body.theme-royal .product-detail,
body.theme-royal .checkout-panel { color: var(--dark); }
body.theme-royal .breadcrumb a { color: var(--gray); }
body.theme-royal .breadcrumb a:hover { color: var(--royal-gold); }
body.theme-royal .demo-overlay-btn,
body.theme-royal .btn-demo-live { background: var(--gradient-primary); color: #1A1408; }
body.theme-royal .card-demo-link {
    border-color: rgba(233, 196, 106, .26);
    background: rgba(233, 196, 106, .08);
    color: var(--royal-gold);
}
body.theme-royal .card-demo-link:hover { background: var(--gradient-primary); color: #1A1408; }

/* ===== انیمیشن ظهور نرم سکشن‌ها ===== */
body.royal-js .royal-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.4, 0, .2, 1);
    will-change: opacity, transform;
}
body.royal-js .royal-reveal.in {
    opacity: 1;
    transform: none;
}

/* ===== رفتار واکنش‌گرا ===== */
@media (max-width: 900px) {
    /* هیرو در موبایل تک‌ستونی است: استیجِ سه‌بعدی کاملاً صاف
       می‌شود تا چیزی بریده یا سرریز نشود (JS هم از ۹۰۱px به بالا
       فعال است). حلقه‌ها فقط translate را روی -50% نگه می‌دارند
       چون top/left:50% برای وسط‌چین شدن به آن نیاز دارند. */
    body.theme-royal .home-hero .hero-visual,
    body.theme-royal .home-hero .hero-content {
        perspective: none;
        transform-style: flat;
        transform: none;
    }
    body.theme-royal .home-hero .hero-text,
    body.theme-royal .hero-dashboard-card { translate: none; }
    body.theme-royal .hero-dashboard-card { transform: none; }
    body.theme-royal .floating-download,
    body.theme-royal .floating-rating { translate: none; }
    body.theme-royal .orbit-one,
    body.theme-royal .orbit-two { translate: -50% -50%; rotate: none; }
    body.theme-royal .hero-dashboard-card::before { display: none; }
}

@media (max-width: 980px) {
    /* منوی همبرگری: پس‌زمینهٔ تیره + مرز طلایی تا در تم روشن هم بخواند */
    body.theme-royal .nav {
        background: #121216;
        border: 1px solid var(--border);
        box-shadow: var(--shadow-xl);
    }
    body.theme-royal .nav-link { color: var(--gray); }
    body.theme-royal .nav-link:hover,
    body.theme-royal .nav-link.active { background: rgba(233, 196, 106, .13); color: var(--royal-gold); }
}

@media (max-width: 520px) {
    body.theme-royal .product-card .product-overlay-btn { width: 40px; height: 40px; border-radius: 12px; }
    body.theme-royal .hero-dashboard-card::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    body.theme-royal::before { opacity: .35; }
    body.theme-royal .product-card,
    body.theme-royal .category-card,
    body.theme-royal .btn-primary { transform: none !important; transition: none !important; }
    body.royal-js .royal-reveal { opacity: 1 !important; transform: none !important; }
    /* استیجِ سه‌بعدی هم کاملاً صاف می‌شود؛ حالتِ نهاییِ
       خوانا، بدونِ پارالاکس یا چرخش. */
    body.theme-royal .home-hero .hero-visual,
    body.theme-royal .home-hero .hero-content {
        perspective: none !important;
        transform-style: flat !important;
        transform: none !important;
    }
    body.theme-royal .home-hero .hero-text,
    body.theme-royal .hero-dashboard-card,
    body.theme-royal .floating-download,
    body.theme-royal .floating-rating { translate: none !important; rotate: none !important; }
    body.theme-royal .hero-dashboard-card { transform: none !important; }
    body.theme-royal .hero-orbit { animation: none !important; rotate: none !important; }
    body.theme-royal .hero-dashboard-card::before { display: none; }
}

/* =========================================================
   بومی‌سازی موبایل — مکملِ بلوکِ مشترک در style.css
   هاورهای این تم از خاصیت‌های مستقلِ translate/rotate استفاده
   می‌کنند (چون animation: fadeUp روی transform قفل است)، پس لغوِ
   هاورِ گیرکرده روی تاچ هم باید روی همان خاصیت‌ها انجام شود.
   ========================================================= */
@media (hover: none), (pointer: coarse) {
    body.theme-royal .product-card:hover { translate: none; rotate: none; }
    body.theme-royal .category-card:hover,
    body.theme-royal .btn-primary:hover { transform: none; }
    /* براقیِ هاور روی کارتِ داشبورد هم روی تاچ گیر نکند */
    body.theme-royal .hero-dashboard-card:hover::before { opacity: 0; }
}

@media (pointer: coarse) {
    /* اهداف لمسی به حداقل ۴۴px (الزام اپل) — این تم دکمه‌ها را ۴۰px می‌خواهد */
    body.theme-royal .product-card .product-overlay-btn { width: 44px; height: 44px; }
}