/* =========================================================
   theme.css — سیستم رنگ روشن/تاریک (نسخه‌ی عمومی/wildcard)
   نکته: به‌جای match دقیق روی هر کلاس Tailwind (که با هر پیشوند
   ریسپانسیو مثل md:/lg:/sm: باید جدا نوشته بشه)، اینجا از
   [class*="..."] استفاده شده تا هر کلاسی که این زیررشته رو داشته
   باشه رو بگیره — چه md:bg-zinc-50 چه lg:bg-zinc-50 چه بدون پیشوند.
   دیگه لازم نیست برای صفحه‌ی جدید دستی چیزی اضافه کنی.
   ========================================================= */

:root {
    --page-bg: #ffffff;
    --card-bg: #ffffff;
    --text-main: #18181b;
    --text-dim: #52525b;
    --border-main: #e4e4e7;
    --header-bg: #ffffff;
}

[data-theme="dark"] {
    --page-bg: #0a0a0a;
    --card-bg: #18181b;
    --text-main: #f4f4f5;
    --text-dim: #a1a1aa;
    --border-main: #3f3f46;
    --header-bg: #141416;
}

/* پس‌زمینه و متن پایه‌ی صفحه */
[data-theme="dark"] html,
[data-theme="dark"] body {
    background-color: var(--page-bg);
    color: var(--text-main);
}

/* ---------- پس‌زمینه‌ها (wildcard) ----------
   bg-white جدا نگه داشته شده چون کارت‌ها/هدر باید card-bg بگیرن */
[data-theme="dark"] [class*="bg-white"] {
    background-color: var(--card-bg) !important;
}
[data-theme="dark"] [class*="bg-zinc-50"],
[data-theme="dark"] [class*="bg-zinc-100"],
[data-theme="dark"] [class*="bg-gray-50"],
[data-theme="dark"] [class*="bg-gray-100"],
[data-theme="dark"] [class*="bg-neutral-50"],
[data-theme="dark"] [class*="bg-neutral-100"],
[data-theme="dark"] [class*="bg-slate-50"],
[data-theme="dark"] [class*="bg-slate-100"],
[data-theme="dark"] [class*="bg-stone-50"],
[data-theme="dark"] [class*="bg-stone-100"] {
    background-color: var(--page-bg) !important;
}
[data-theme="dark"] [class*="bg-zinc-200"],
[data-theme="dark"] [class*="bg-gray-200"],
[data-theme="dark"] [class*="bg-neutral-200"],
[data-theme="dark"] [class*="bg-slate-200"],
[data-theme="dark"] [class*="bg-stone-200"] {
    background-color: var(--card-bg) !important;
}

/* گرادیان‌های سفید/خاکستری روشن (بنر/هیرو/دکمه‌ها) */
[data-theme="dark"] [class*="from-white"],
[data-theme="dark"] [class*="via-white"],
[data-theme="dark"] [class*="to-white"],
[data-theme="dark"] [class*="from-zinc-50"],
[data-theme="dark"] [class*="from-gray-50"],
[data-theme="dark"] [class*="from-neutral-50"],
[data-theme="dark"] [class*="to-zinc-50"],
[data-theme="dark"] [class*="to-gray-50"],
[data-theme="dark"] [class*="to-neutral-50"] {
    --tw-gradient-from: var(--page-bg) !important;
    --tw-gradient-to: var(--page-bg) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

/* ---------- متن‌ها (wildcard) ---------- */
[data-theme="dark"] [class*="text-zinc-700"],
[data-theme="dark"] [class*="text-zinc-800"],
[data-theme="dark"] [class*="text-zinc-900"],
[data-theme="dark"] [class*="text-gray-700"],
[data-theme="dark"] [class*="text-gray-800"],
[data-theme="dark"] [class*="text-gray-900"],
[data-theme="dark"] [class*="text-neutral-700"],
[data-theme="dark"] [class*="text-neutral-800"],
[data-theme="dark"] [class*="text-neutral-900"],
[data-theme="dark"] [class*="text-slate-700"],
[data-theme="dark"] [class*="text-slate-800"],
[data-theme="dark"] [class*="text-slate-900"],
[data-theme="dark"] [class*="text-black"] {
    color: var(--text-main) !important;
}
[data-theme="dark"] [class*="text-zinc-400"],
[data-theme="dark"] [class*="text-zinc-500"],
[data-theme="dark"] [class*="text-zinc-600"],
[data-theme="dark"] [class*="text-gray-400"],
[data-theme="dark"] [class*="text-gray-500"],
[data-theme="dark"] [class*="text-gray-600"],
[data-theme="dark"] [class*="text-neutral-400"],
[data-theme="dark"] [class*="text-neutral-500"],
[data-theme="dark"] [class*="text-neutral-600"],
[data-theme="dark"] [class*="text-slate-400"],
[data-theme="dark"] [class*="text-slate-500"],
[data-theme="dark"] [class*="text-slate-600"] {
    color: var(--text-dim) !important;
}

/* ---------- خط‌ها و بوردرها (wildcard) ---------- */
[data-theme="dark"] [class*="border-zinc-100"],
[data-theme="dark"] [class*="border-zinc-200"],
[data-theme="dark"] [class*="border-zinc-300"],
[data-theme="dark"] [class*="border-gray-100"],
[data-theme="dark"] [class*="border-gray-200"],
[data-theme="dark"] [class*="border-gray-300"],
[data-theme="dark"] [class*="border-neutral-100"],
[data-theme="dark"] [class*="border-neutral-200"],
[data-theme="dark"] [class*="border-neutral-300"],
[data-theme="dark"] [class*="border-slate-100"],
[data-theme="dark"] [class*="border-slate-200"],
[data-theme="dark"] [class*="border-slate-300"] {
    border-color: var(--border-main) !important;
}

/* ---------- آیکون‌های svg (fill/stroke) — wildcard ---------- */
[data-theme="dark"] [class*="fill-zinc-700"],
[data-theme="dark"] [class*="fill-zinc-800"],
[data-theme="dark"] [class*="fill-gray-700"],
[data-theme="dark"] [class*="fill-gray-800"],
[data-theme="dark"] [class*="fill-black"] {
    fill: var(--text-main) !important;
}
[data-theme="dark"] [class*="fill-zinc-400"],
[data-theme="dark"] [class*="fill-zinc-500"],
[data-theme="dark"] [class*="fill-zinc-600"] {
    fill: var(--text-dim) !important;
}
[data-theme="dark"] [class*="stroke-zinc-700"],
[data-theme="dark"] [class*="stroke-gray-700"] {
    stroke: var(--text-main) !important;
}

/* ---------- فرم‌ها ---------- */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background-color: var(--card-bg) !important;
    color: var(--text-main) !important;
    border-color: var(--border-main) !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--text-dim) !important;
    opacity: 1;
}


/* =========================================================
   کارت‌های محصول — بدون نیاز به کلاس .card
   هر جعبه‌ای که rounded-3xl و یه border-zinc-*/border-gray-*
   داره (الگوی مشترک همه‌ی کارت‌های محصول توی سایت، چه توی
   اسلایدر index چه توی گرید shop) رنگ کارت می‌گیره.

   نکته‌ی مهم: از [class~="card"] استفاده شده (نه [class*="card"])
   تا فقط کلاس دقیق "card" مچ بشه، نه هر کلاسی که زیررشته‌ی
   "card" رو داشته باشه (مثل card-wrapper که خودش یه کانتینر
   بزرگ اطراف همه‌ی کارت‌های اسلایدره و نباید پس‌زمینه‌ی تیره
   بگیره — این باگیِ همون کادر بزرگ پشت اسلایدرها بود).
   ========================================================= */
[data-theme="dark"] [class*="rounded-3xl"][class*="border-zinc-"],
[data-theme="dark"] [class*="rounded-3xl"][class*="border-gray-"],
[data-theme="dark"] [class~="card"] {
    background-color: var(--card-bg) !important;
}

/* ---------- بخش هیرو (hero3d-hero) ----------
   این با style جدا و background:#fff هاردکد شده، نه کلاس Tailwind */
[data-theme="dark"] .hero3d-hero {
    background: var(--page-bg) !important;
}
[data-theme="dark"] .hero3d-title {
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.15) !important;
}

/* =========================================================
   هدر: رنگ یکپارچه + آیکون‌های سفید (فقط حالت دارک)
   چون خود header.php فقط یک بار include می‌شه، این بخش با
   wildcard هم هر دو ردیف هدر (بالا/پایین) رو با هر پیشوندی می‌گیره.
   ========================================================= */
[data-theme="dark"] header [class*="bg-white"],
[data-theme="dark"] header [class*="bg-zinc-50"] {
    background-color: var(--header-bg) !important;
}

/* خط موج تزئینی سفید بین دو ردیف هدر */
[data-theme="dark"] header svg[fill="white"] path,
[data-theme="dark"] header svg[fill="white"] {
    fill: var(--header-bg) !important;
}

/* آیکن‌های svg با رنگ هاردکد (نه کلاس) داخل هدر */
[data-theme="dark"] header svg[fill="#000000"],
[data-theme="dark"] header .menu-mobile {
    fill: #ffffff !important;
}
[data-theme="dark"] header svg path[stroke="#71717b"],
[data-theme="dark"] header svg path[stroke="#3f3f46"],
[data-theme="dark"] header svg path[stroke="#364153"] {
    stroke: #ffffff !important;
}
[data-theme="dark"] header svg path[fill="#71717b"],
[data-theme="dark"] header svg path[fill="#364153"] {
    fill: #ffffff !important;
}


[data-theme="dark"] img[src*="/icons/"] {
    filter: brightness(0) invert(1);
}

/* پنل‌های کشویی (سبد خرید، مگامنو دسته‌بندی) که با bg-white
   ساخته شدن، از قانون بالای [class*="bg-white"] خودکار card-bg
   می‌گیرن؛ نیازی به قانون جدا ندارن. */

/* گذار نرم موقع تعویض تم */
body, header, footer, nav, input, select, textarea,
[class*="rounded-3xl"], [class~="card"] {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
/* =========================================================
   پچ: بهبود کنتراست کارت‌ها، باکس‌های فیلتر و سوییچ‌ها
   ========================================================= */

/* کمی روشن‌تر کردن کارت نسبت به پس‌زمینه صفحه + مرز و سایه واضح */
[data-theme="dark"] [class*="rounded-3xl"][class*="border-zinc-"],
[data-theme="dark"] [class*="rounded-3xl"][class*="border-gray-"],
[data-theme="dark"] [class~="card"] {
    background-color: #1c1c1f !important;
    border-color: #333338 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] [class*="rounded-2xl"][class*="border-zinc-100"] {
    background-color: #2a2a2e !important;
    border-color: #4a4a52 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
/* سوییچ روشن/خاموش (toggle) — باید بعد از قوانین بالا بیاد */
[data-theme="dark"] .peer {
    background-color: #3f3f46 !important;   /* تراک در حالت خاموش، قابل دیدن */
}
[data-theme="dark"] .peer::after {
    background-color: #f4f4f5 !important;   /* دایره، روشن و مشخص */
}
[data-theme="dark"] input:checked ~ .peer,
[data-theme="dark"] .peer-checked\:bg-primary-400 {
    background-color: #5d2028 !important;   /* تراک در حالت روشن، رنگ primary */
}
/* قفل کردن اندازه‌ی عکس محصولات — هر جای سایت،
   صرف‌نظر از کلاس‌های دیگه‌ای که ممکنه تداخل کنن */
.image-box img {
    width: 160px !important;
    height: 160px !important;
    object-fit: cover !important;
    border-radius: 0.75rem;
    margin: 0 auto;
    display: block;
}
@media (max-width: 767px) {
    .image-box img {
        width: 112px !important;
        height: 112px !important;
    }
}
.image-box {
    height: 160px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
@media (max-width: 767px) {
    .image-box {
        height: 112px !important;
    }
}
/* باکس جستجو (موبایل و دسکتاپ) */
[data-theme="dark"] #mobile-search-input,
[data-theme="dark"] #desktop-search-input {
    background-color: #2a2a2e !important;
    color: var(--text-main) !important;
}
[data-theme="dark"] #mobile-search-input::placeholder,
[data-theme="dark"] #desktop-search-input::placeholder {
    color: var(--text-dim) !important;
}
.favorite-btn {
    width: 2.25rem;   /* همون size-9 دسکتاپ */
    height: 2.25rem;
}
@media (max-width: 767px) {
    .favorite-btn {
        width: 1.75rem;  /* همون size-7 موبایل */
        height: 1.75rem;
    }
}
/* برجسته کردن گزینه‌ی انتخاب‌شده (رنگ/ظرفیت/...) در حالت دارک */
[data-theme="dark"] .variant-radio:checked + label {
    border-color: #E8003C !important;
    box-shadow: 0 0 0 1px #E8003C;
    background-color: #2a2a2e !important;
}
/* پنل سبد خرید — پیش‌فرض بیرون از صفحه (بسته) */
#cart-drawer {
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    height: 100vh;
    height: 100dvh; /* پوشش دقیق‌تر در مرورگرهای موبایل با نوار پویا */
}
#cart-drawer.cart-open {
    transform: translateX(0);
}
#cart-overlay {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
#cart-overlay.cart-open {
    opacity: 1;
}

/* ریسپانسیو: موبایل تمام‌عرض، دسکتاپ عرض ثابت */
@media (min-width: 640px) {
    #cart-drawer {
        width: 24rem; /* 384px = w-96 */
    }
}
/* ============================================================
   پچ: خطوط بین مراحل (سبدخرید / اطلاعات پرداخت) + کادر لیست سبد
   ============================================================ */

/* خط گرادیانی بین مراحل نوار بالای صفحه — الان توی دارک مود
   محو می‌شه چون رنگ‌های from-white/to-white صفحه‌رنگ می‌شن ولی
   via-zinc-300 دست نخورده باقی می‌مونه و روی پس‌زمینه‌ی تیره دیده نمیشه */
[data-theme="dark"] [class*="from-white"][class*="via-zinc-300"][class*="to-white"] {
    background: var(--border-main) !important;
    background-image: none !important;
}

/* کادر اصلی لیست محصولات سبد خرید (border border-zinc-200 rounded-xl) */
[data-theme="dark"] [class*="rounded-xl"][class*="border-zinc-200"] {
    background-color: var(--card-bg) !important;
    border-color: var(--border-main) !important;
}

/* خطوط جداکننده‌ی بین آیتم‌های داخل همون کادر (divide-y divide-zinc-200) */
[data-theme="dark"] [class*="divide-zinc-200"] > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--border-main) !important;
}
/* ============================================================
   پچ: فیلدهای فرم چک‌اوت (bg-[#f0f0f0]) — هم‌رنگ باکس کد تخفیف
   ============================================================ */
[data-theme="dark"] [class*="bg-\[\#f0f0f0\]"] {
    background-color: #2a2a2e !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-main) !important;
}
[data-theme="dark"] [class*="bg-\[\#f0f0f0\]"]::placeholder {
    color: var(--text-dim) !important;
    opacity: 1;
}
/* ============================================================
   پچ: هم‌ارتفاع کردن کادر خلاصه سفارش با کادر اطلاعات گیرنده
   ============================================================ */
[data-theme="dark"] form[class*="lg:flex-row"] {
    align-items: stretch !important;
}

[data-theme="dark"] .checkout-summary-box {
    background-color: var(--card-bg);
    border: 1px solid var(--border-main);
    border-radius: 0.75rem;
    padding: 1.25rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    align-self: stretch;
}
/* ============================================================
   پچ: برجسته کردن گزینه‌ی انتخاب‌شده (رادیو باتن‌های ارسال/پرداخت)
   با رنگ قرمز گیلاسی (چری) — فقط دارک مود
   ============================================================ */
[data-theme="dark"] .peer:checked + label,
[data-theme="dark"] input[type="radio"]:checked + label {
    border-color: #E8003C !important;
    color: #ff4d6d !important;
    background-color: #2a1418 !important;
    box-shadow: 0 0 0 1px #E8003C, 0 0 12px rgba(232, 0, 60, 0.35) !important;
}
/* ============================================================
   پچ نهایی: صفحه فاکتور — دارک مود سبک چری، بدون وابستگی به
   متغیرهای CSS چون خود صفحه یک :root مجزا با --card-bg سفید
   تعریف کرده و رو متغیرهای سایت رو override می‌کنه.
   ============================================================ */

[data-theme="dark"] body:has(.invoice-wrapper) {
    background-color: #0a0a0a !important;
    background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px) !important;
}

[data-theme="dark"] .invoice-wrapper {
    background: #18181b !important;
    border: 1px solid #3f3f46 !important;
    box-shadow: 0 20px 60px -15px rgba(0, 0, 0, 0.6) !important;
}

/* هدر بالای فاکتور */
[data-theme="dark"] .invoice-header {
    background: linear-gradient(135deg, #2a1418 0%, #18181b 100%) !important;
    border-bottom-color: #3f3f46 !important;
}
[data-theme="dark"] .logo-container {
    background: #2a2a2e !important;
    border-color: #3f3f46 !important;
}
[data-theme="dark"] .invoice-header h1,
[data-theme="dark"] .invoice-header p {
    color: #ffffff !important;
}
[data-theme="dark"] .status-pill {
    background: #3a1016 !important;
    color: #ff5c78 !important;
    border-color: #E8003C !important;
}
[data-theme="dark"] .status-pill span.bg-green-500 {
    background-color: #E8003C !important;
}

/* عنوان بخش‌ها */
[data-theme="dark"] .section-title {
    color: #a1a1aa !important;
}

/* کادرهای «شماره سفارش» / «تاریخ ثبت» — دقیقاً سبک کارت خدمات نرم‌افزاری */
[data-theme="dark"] .invoice-section .bg-slate-50 {
    background-color: #1c1c1f !important;
    border: 1px solid #333338 !important;
    border-radius: 1rem !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
}
[data-theme="dark"] .invoice-section .bg-slate-50 span {
    color: #ffffff !important;
}

/* آیتم‌های محصول */
[data-theme="dark"] .product-item {
    border-bottom-color: #3f3f46 !important;
}
[data-theme="dark"] .product-info h4,
[data-theme="dark"] .price-val {
    color: #ffffff !important;
}
[data-theme="dark"] .product-meta,
[data-theme="dark"] .price-unit {
    color: #a1a1aa !important;
}
[data-theme="dark"] .badge-qty {
    background: #2a2a2e !important;
    color: #a1a1aa !important;
}
[data-theme="dark"] .variant-tag {
    background: #3a1016 !important;
    color: #ff8fa3 !important;
    border-color: #E8003C !important;
}

/* باکس محاسبات */
[data-theme="dark"] .summary-box {
    background: #1c1c1f !important;
    border: 1px solid #333338 !important;
}
[data-theme="dark"] .summary-row {
    color: #a1a1aa !important;
}
[data-theme="dark"] .summary-row.final {
    border-top-color: #3f3f46 !important;
    color: #ffffff !important;
}
[data-theme="dark"] .summary-row.final span:last-child {
    color: #ff4d6d !important;
}
[data-theme="dark"] .summary-row .text-blue-600 {
    color: #ff8fa3 !important;
}
[data-theme="dark"] .summary-row .text-red-500 {
    color: #ff4d6d !important;
}

/* کارت‌های اطلاعات (ارسال، پرداخت) */
[data-theme="dark"] .info-card {
    background: #1c1c1f !important;
    border: 1px solid #333338 !important;
}
[data-theme="dark"] .info-label {
    color: #a1a1aa !important;
}
[data-theme="dark"] .info-value {
    color: #ffffff !important;
}
[data-theme="dark"] .invoice-wrapper .text-slate-800,
[data-theme="dark"] .invoice-wrapper .text-slate-900,
[data-theme="dark"] .invoice-wrapper .text-slate-700 {
    color: #ffffff !important;
}
[data-theme="dark"] .invoice-wrapper .text-slate-400,
[data-theme="dark"] .invoice-wrapper .text-slate-500 {
    color: #a1a1aa !important;
}
[data-theme="dark"] .invoice-wrapper .border-slate-100 {
    border-color: #3f3f46 !important;
}
[data-theme="dark"] .info-card .bg-slate-50 {
    background-color: #2a2a2e !important;
    border: 1px solid #3f3f46 !important;
}
[data-theme="dark"] .info-card .bg-slate-50 span {
    color: #ffffff !important;
}
[data-theme="dark"] .info-card .bg-blue-50 {
    background: #3a1016 !important;
    color: #ff8fa3 !important;
}
[data-theme="dark"] .info-card .text-green-600 {
    color: #4ade80 !important;
}

/* خطوط چین‌دار جداکننده بین بخش‌ها */
[data-theme="dark"] main div[style*="border-top"] {
    border-top-color: #3f3f46 !important;
}

/* دکمه‌ی دانلود فاکتور */
[data-theme="dark"] .print-btn-custom {
    background: #18181b !important;
    color: #ffffff !important;
    border-color: #3f3f46 !important;
}
[data-theme="dark"] .print-btn-custom:hover {
    background: #2a1418 !important;
    border-color: #E8003C !important;
}
/* ============================================================
   پچ حیاتی: قفل کردن متغیرهای رنگی دارک‌مود با !important
   چون صفحه‌ی فاکتور یک :root مجزا با --card-bg سفید تعریف کرده
   که سراسریه و باعث می‌شه فوتر و هر چیز دیگه‌ای که از این
   متغیرها استفاده می‌کنه (نه فقط داخل .invoice-wrapper) روی
   این صفحه‌ی خاص خراب بشه.
   ============================================================ */
[data-theme="dark"] {
    --page-bg: #0a0a0a !important;
    --card-bg: #18181b !important;
    --text-main: #f4f4f5 !important;
    --text-dim: #a1a1aa !important;
    --border-main: #3f3f46 !important;
    --header-bg: #141416 !important;
}