/* ==========================================================================
   Nikan Shop - Dark Mode (روش فیلتر معکوس‌سازی رنگ)
   ==========================================================================
   همون کاری که کروم با "Enable Automatic Dark Mode" انجام میده (معکوس کردن
   روشنایی رنگ‌ها به‌صورت خودکار روی کل صفحه) رو اینجا با CSS پیاده کردیم،
   چون قالب رنگ‌هاش رو مستقیم با کلاس‌های تیلویند/المنتور روی هر المان
   تعیین می‌کنه (نه با متغیر) و رنگ صفحاتی مثل صفحه اصلی هم داخل دیتابیس
   (المنتور) ذخیره شده، نه فایل قالب. بنابراین به‌جای شکار تک‌تک کلاس‌ها
   (که همیشه یه گوشه‌ای جا می‌افتاد)، کل صفحه رو معکوس می‌کنیم و فقط
   عکس/آیکون/ویدیو رو دوباره به حالت عادی برمی‌گردونیم تا خراب نشن.

   نکته: چون این روش رنگ‌ها رو ریاضی معکوس می‌کنه (نه هوشمند مثل نسخه واقعی
   کروم)، رنگ برند (مثلاً سبز نیکان‌شاپ) ممکنه یه‌کم تن رنگش عوض بشه؛ ولی
   background/text/border در کل سایت درست کار می‌کنه و دیگه هیچ جایی
   (صفحه اصلی، تماس با ما، هر صفحه دیگری که بعداً با المنتور بسازید) جا
   نمی‌افتد.
   ========================================================================== */

/* --- رفع فضای خالی زیر فوتر (چسباندن فوتر به ته صفحه) ---
   این مشکل ربطی به دارک‌مود نداشت (توی لایت‌مود هم بود، فقط چون هر دو
   سفید بودن دیده نمی‌شد). علتش این بود که وقتی محتوای صفحه (مثلاً صفحه
   محصول) از ارتفاع صفحه‌نمایش کوتاه‌تره، فوتر همون‌جا بعد از محتوا میاد
   و فضای باقی‌مونده‌ی صفحه خالی می‌مونه. اینجا body رو فلکس-ستونی کردیم
   و با margin-top: auto روی فوتر، همیشه فوتر رو می‌چسبونیم به ته صفحه. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body > footer,
body footer:last-of-type {
  margin-top: auto;
}

html.dark-mode {
  filter: invert(1) hue-rotate(180deg) contrast(0.92);
  background-color: #fff; /* بعد از معکوس شدن، سفید به مشکی تبدیل می‌شود */
  min-height: 100%;
}

/* اگه محتوای صفحه از ارتفاع صفحه‌نمایش کوتاه‌تر باشه (مثل موبایل)، این
   قانون باعث می‌شه پس‌زمینه تا ته صفحه رو هم بگیره و اون فضای خالی سفید
   زیر فوتر دیده نشه؛ چون فیلتر فقط روی "جعبه"ی واقعی body عمل می‌کنه،
   نه روی کل canvas صفحه */
html.dark-mode body {
  min-height: 100vh;
  background-color: #fff;
}

html {
  transition: filter 0.25s ease;
}

/* رسانه‌ها (عکس، ویدیو، آیکون svg، iframe و پس‌زمینه‌های تصویری) را دوباره
   معکوس می‌کنیم تا به رنگ طبیعی خودشان برگردند و لوگو/عکس محصول خراب دیده نشود */
html.dark-mode img,
html.dark-mode video,
html.dark-mode picture,
html.dark-mode svg,
html.dark-mode iframe,
html.dark-mode canvas,
html.dark-mode [style*="background-image"] {
  filter: invert(1) hue-rotate(180deg);
}

html.dark-mode [style*="background-image"] {
  box-shadow: none !important;
  border-color: transparent !important;
  outline-color: transparent !important;
}

html.dark-mode [class*="drop-shadow"] {
  filter: none !important;
}

html.dark-mode img[src*="/src/icons/"] {
  filter: none;
}

/* پاپ‌آور "سبد خرید" (نوشته‌ی X محصول در سبد خرید است) از قبل با پس‌زمینه
   تیره و متن سفید طراحی شده (با !important در style.css)، پس نیازی به
   معکوس شدن نداره؛ معکوسش می‌کنیم تا همیشه با همون ظاهر درست دیده بشه */
html.dark-mode .nikan-cart-hover-popover,
html.dark-mode .nikan-cart-hover-popover::before {
  filter: invert(1) hue-rotate(180deg);
}

/* ==========================================================================
   سایدبار سبد خرید (mini-cart)
   ========================================================================== */
.nikan-cart-sidebar-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s;
  z-index: 999998;
  pointer-events: none;
}
.nikan-cart-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(380px, 92vw);
  background-color: #ffffff;
  box-shadow: 10px 0 30px rgba(0, 0, 0, 0.15);
  z-index: 999999;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}
html.dark-mode .nikan-cart-sidebar {
  box-shadow: 10px 0 30px rgba(255, 255, 255, 0.15);
}

html.nikan-cart-sidebar-open .nikan-cart-sidebar-overlay {
  opacity: 1;
  visibility: visible;
}

html.nikan-cart-sidebar-open .nikan-cart-sidebar {
  transform: translateX(0);
}

.nikan-cart-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid #eef0f2;
  font-weight: 700;
  font-size: 16px;
}

.nikan-cart-sidebar-close {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: #6b7280;
  padding: 4px 8px;
}

.nikan-cart-sidebar-close:hover {
  color: #111827;
}

.nikan-cart-sidebar-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 20px;
}

.nikan-cart-sidebar-empty {
  text-align: center;
  color: #6b7280;
  padding: 40px 10px;
  font-size: 14px;
}

.nikan-cart-sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nikan-cart-sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #f3f4f6;
}

.nikan-cart-sidebar-item-img {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #eef0f2;
}

.nikan-cart-sidebar-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nikan-cart-sidebar-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nikan-cart-sidebar-item-title {
  font-size: 13px;
  color: #111827;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nikan-cart-sidebar-item-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6b7280;
}

.nikan-cart-sidebar-item-price {
  color: #059669;
  font-weight: 600;
}

.nikan-cart-sidebar-item-remove {
  flex-shrink: 0;
  color: #9ca3af;
  font-size: 20px;
  text-decoration: none;
  padding: 4px 8px;
}

.nikan-cart-sidebar-item-remove:hover {
  color: #dc2626;
}

.nikan-cart-sidebar-subtotal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0 4px;
  font-size: 14px;
  border-top: 1px solid #f3f4f6;
  margin-top: 6px;
}

.nikan-cart-sidebar-footer {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid #eef0f2;
}

.nikan-cart-sidebar-btn {
  display: block;
  text-align: center;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.nikan-cart-sidebar-btn:hover {
  opacity: 0.9;
}

.nikan-cart-sidebar-btn-primary {
  background-color: #059669;
  color: #ffffff;
}

.nikan-cart-sidebar-btn-secondary {
  background-color: #f3f4f6;
  color: #111827;
}

/* ==========================================================================
   منوی سریع کاربر (پروفایل / سفارشات / خروج) کنار دکمه‌ی نام کاربری در هدر
   ========================================================================== */
.nikan-account-menu {
  z-index: 40;
}

.nikan-account-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 200px;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 50;
}

.nikan-account-menu:hover .nikan-account-dropdown,
.nikan-account-menu:focus-within .nikan-account-dropdown,
.nikan-account-menu.nikan-account-open .nikan-account-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* موبایل: چون آیکون کاربر معمولاً نزدیک لبه‌ی راست صفحه‌ست، منو رو از
   چپ باز نمی‌کنیم (بیرون از صفحه می‌ره)، از راست باز می‌شه */
.nikan-account-dropdown-mobile {
  left: auto;
  right: 0;
}

.nikan-account-menu-toggle {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.nikan-account-dropdown a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  font-size: 14px;
  color: #1f2937;
  text-decoration: none;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.15s ease;
}

.nikan-account-dropdown a:last-child {
  border-bottom: none;
}

.nikan-account-dropdown a:hover {
  background-color: #f8fafc;
}

.nikan-account-dropdown a svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.6;
}

.nikan-account-dropdown a.nikan-account-logout {
  color: #dc2626;
  font-weight: 600;
}

.nikan-account-dropdown a.nikan-account-logout:hover {
  background-color: #fef2f2;
}

/* ==========================================================================
   فوتر کلاً از دارک‌مود مستثنی شود (نه دارک، نه لایت‌مود جدا؛ همیشه دقیقاً
   همون رنگ‌بندی ثابت خودش رو داشته باشه، صرف‌نظر از وضعیت دکمه سوییچ)
   چند تا سلکتور اضافه (nikan-footer / المنتور فوتر) هم گذاشتیم چون اگه
   فوتر رو هم مثل هدر با المنتور بازسازی کرده باشید، دیگه تگ <footer>
   نیست و باید از کلاس‌های ویجت المنتور استفاده کنیم */
html.dark-mode footer,
html.dark-mode .nikan-footer,
html.dark-mode .nikan-el-footer-two,
html.dark-mode .elementor-location-footer,
html.dark-mode [data-elementor-type="footer"],
html.dark-mode [data-elementor-id][class*="location-footer"] {
  /* ترتیب برعکسِ فیلتر html (که invert → hue-rotate → contrast هست) تا
     خنثی‌سازی کاملاً دقیق باشه، از جمله contrast(0.92) کل صفحه */
  filter: contrast(1.0870) hue-rotate(180deg) invert(1) !important;
}

/* چون فوتر خودش یک‌بار خنثی‌سازی شد، دیگه لازم نیست عکس/آیکون‌های داخلش
   دوباره خنثی بشن (وگرنه رنگشون برعکس می‌شد) */
html.dark-mode footer img,
html.dark-mode footer svg,
html.dark-mode footer video,
html.dark-mode footer picture,
html.dark-mode footer iframe,
html.dark-mode footer canvas,
html.dark-mode footer [style*="background-image"],
html.dark-mode .nikan-footer img,
html.dark-mode .nikan-footer svg,
html.dark-mode .nikan-el-footer-two img,
html.dark-mode .nikan-el-footer-two svg,
html.dark-mode .elementor-location-footer img,
html.dark-mode .elementor-location-footer svg,
html.dark-mode [data-elementor-type="footer"] img,
html.dark-mode [data-elementor-type="footer"] svg {
  filter: none !important;
}

/* ==========================================================================
   دکمه سوییچ دارک مود / لایت مود
   این دکمه عمداً از فیلتر گلوبال مستثنی شده (با یک فیلتر معکوسِ خنثی‌کننده)
   تا همیشه با همون ظاهر ثابت و خوانا دیده شود، مستقل از تیره/روشن بودن صفحه
   ========================================================================== */
#nikan-theme-toggle {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9999;
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  border: 1px solid #e5e5e5;
  background-color: #ffffff;
  color: #1c1c1e;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease;
}

#nikan-theme-toggle:hover {
  transform: scale(1.06);
}

#nikan-theme-toggle svg {
  width: 22px;
  height: 22px;
}

/* خنثی کردن فیلتر گلوبال روی خود دکمه (svg داخلش با قانون بالا یک بار دیگر
   معکوس می‌شود و در مجموع رنگ دکمه و آیکون هر دو درست دیده می‌شوند) */
html.dark-mode #nikan-theme-toggle {
  filter: invert(1) hue-rotate(180deg);
}

@media (max-width: 640px) {
  #nikan-theme-toggle {
    bottom: 14px;
    left: 14px;
    width: 44px;
    height: 44px;
  }
}