/* ARCANUM DARK CORE — extracted from legacy v3.2 */
/* ======================================================================
   01) CORE - متغیرها و تنظیمات پایه دارک مود کل سایت
====================================================================== */

html.arcanum-dark {
  color-scheme: dark;

  --arc-dark-bg: #050b16;
  --arc-dark-bg-soft: #08111f;
  --arc-dark-bg-deep: #020617;
  --arc-dark-card: #0b1626;
  --arc-dark-card-2: #111c2d;
  --arc-dark-text: #f8fafc;
  --arc-dark-muted: #94a3b8;
  --arc-dark-muted-2: #cbd5e1;
  --arc-dark-border: rgba(255, 255, 255, .10);
  --arc-dark-border-2: rgba(255, 255, 255, .14);
  --arc-dark-blue: #38bdf8;
  --arc-dark-blue-2: #0ea5e9;
  --arc-dark-blue-3: #0284c7;
  --arc-dark-shadow: 0 22px 58px rgba(0, 0, 0, .28);
  --arc-dark-shadow-strong: 0 30px 86px rgba(0, 0, 0, .42);
}

html.arcanum-dark body {
  background: var(--arc-dark-bg) !important;
  color: var(--arc-dark-text) !important;
}

html.arcanum-dark #page,
html.arcanum-dark .site,
html.arcanum-dark .site-content,
html.arcanum-dark main,
html.arcanum-dark .content-area,
html.arcanum-dark .page-content,
html.arcanum-dark .entry-content {
  background: var(--arc-dark-bg) !important;
  color: var(--arc-dark-text) !important;
}

/* والدهای Elementor نباید پس‌زمینه سفید اجباری بدهند */
html.arcanum-dark .elementor,
html.arcanum-dark .elementor-section,
html.arcanum-dark .elementor-top-section,
html.arcanum-dark .elementor-container,
html.arcanum-dark .elementor-column,
html.arcanum-dark .elementor-widget-wrap,
html.arcanum-dark .elementor-widget-container,
html.arcanum-dark .e-con,
html.arcanum-dark .e-con-inner {
  background-color: transparent !important;
}

html.arcanum-dark h1,
html.arcanum-dark h2,
html.arcanum-dark h3,
html.arcanum-dark h4,
html.arcanum-dark h5,
html.arcanum-dark h6 {
  color: var(--arc-dark-text) !important;
}

html.arcanum-dark p,
html.arcanum-dark li {
  color: var(--arc-dark-muted) !important;
}

html.arcanum-dark a:hover {
  color: var(--arc-dark-blue) !important;
}

html.arcanum-dark input,
html.arcanum-dark textarea,
html.arcanum-dark select {
  background: var(--arc-dark-card) !important;
  color: var(--arc-dark-text) !important;
  border-color: var(--arc-dark-border) !important;
}

html.arcanum-dark input::placeholder,
html.arcanum-dark textarea::placeholder {
  color: var(--arc-dark-muted) !important;
}

html.arcanum-dark hr,
html.arcanum-dark .elementor-divider-separator {
  border-color: var(--arc-dark-border) !important;
}


/* ======================================================================
   02) THEME TOGGLE - دکمه دارک مود داخل هدر با آیکن خورشید و ماه
   محل استفاده: داخل header.php کنار سبد خرید / ورود
====================================================================== */

.arcanum-theme-toggle {
  height: 42px;
  padding: 0 13px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(15, 23, 42, .08);
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .045);
  font-size: 12.5px;
  line-height: 1;
  font-weight: 950;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease, color .22s ease;
}

.arcanum-theme-toggle:hover {
  transform: translateY(-2px);
  border-color: rgba(14, 165, 233, .26);
  box-shadow: 0 14px 30px rgba(15, 23, 42, .08);
}

.arcanum-theme-toggle-text {
  color: inherit !important;
}

.arcanum-theme-toggle-icon {
  position: relative;
  width: 20px;
  height: 20px;
  display: inline-block;
  flex: 0 0 auto;
}

.arcanum-theme-toggle-icon::before,
.arcanum-theme-toggle-icon::after {
  content: "";
  position: absolute;
  transition: all .25s ease;
}

/* حالت روشن: خورشید */
.arcanum-theme-toggle-icon::before {
  inset: 2px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow:
    0 0 0 4px rgba(245, 158, 11, .14),
    0 0 18px rgba(245, 158, 11, .30);
}

.arcanum-theme-toggle-icon::after {
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg 10deg,
      rgba(245,158,11,.92) 10deg 20deg,
      transparent 20deg 45deg,
      rgba(245,158,11,.92) 45deg 55deg,
      transparent 55deg 80deg,
      rgba(245,158,11,.92) 80deg 90deg,
      transparent 90deg 115deg,
      rgba(245,158,11,.92) 115deg 125deg,
      transparent 125deg 150deg,
      rgba(245,158,11,.92) 150deg 160deg,
      transparent 160deg 185deg,
      rgba(245,158,11,.92) 185deg 195deg,
      transparent 195deg 220deg,
      rgba(245,158,11,.92) 220deg 230deg,
      transparent 230deg 255deg,
      rgba(245,158,11,.92) 255deg 265deg,
      transparent 265deg 290deg,
      rgba(245,158,11,.92) 290deg 300deg,
      transparent 300deg 325deg,
      rgba(245,158,11,.92) 325deg 335deg,
      transparent 335deg 360deg
    );
  -webkit-mask: radial-gradient(circle, transparent 0 9px, #000 9px);
  mask: radial-gradient(circle, transparent 0 9px, #000 9px);
  opacity: .95;
}

html.arcanum-dark .arcanum-theme-toggle {
  background: var(--arc-dark-card) !important;
  color: #e2e8f0 !important;
  border-color: var(--arc-dark-border-2) !important;
  box-shadow: none !important;
}

html.arcanum-dark .arcanum-theme-toggle:hover {
  border-color: rgba(56, 189, 248, .34) !important;
}

/* حالت دارک: ماه */
html.arcanum-dark .arcanum-theme-toggle-icon::before {
  inset: 2px;
  border-radius: 50%;
  background: #e2e8f0;
  box-shadow:
    inset -4px -4px 0 rgba(148, 163, 184, .20),
    0 0 0 4px rgba(56, 189, 248, .10),
    0 0 16px rgba(56, 189, 248, .18);
}

html.arcanum-dark .arcanum-theme-toggle-icon::after {
  width: 18px;
  height: 18px;
  top: 1px;
  left: 7px;
  transform: none;
  border-radius: 50%;
  background: var(--arc-dark-card);
  box-shadow: none;
  -webkit-mask: none;
  mask: none;
  opacity: 1;
}

@media (max-width: 768px) {
  .arcanum-theme-toggle {
    width: 42px;
    height: 42px;
    min-width: 42px;
    padding: 0;
    border-radius: 15px;
    background: #f8fafc;
  }

  .arcanum-theme-toggle-icon {
    width: 20px;
    height: 20px;
  }

  .arcanum-theme-toggle-text {
    display: none !important;
  }

  html.arcanum-dark .arcanum-theme-toggle {
    background: var(--arc-dark-card) !important;
  }
}

@media (max-width: 640px) {
  .arcanum-theme-toggle {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }
}


/* ======================================================================
   03) HEADER - هدر اصلی دسکتاپ و موبایل
   محل: header.php / کلاس اصلی arcanum-fixed-header-bg
====================================================================== */

html.arcanum-dark .arcanum-fixed-header-bg {
  background:
    radial-gradient(circle at 12% 0%, rgba(14, 165, 233, .12), transparent 28%),
    linear-gradient(180deg, #08111f 0%, #050b16 100%) !important;
  border-bottom-color: var(--arc-dark-border) !important;
}

html.arcanum-dark .arcanum-fixed-header-bg > header.container-main.hidden.mdp\:block.mt-5:first-of-type > div,
html.arcanum-dark .arcanum-fixed-header-bg > header.container-main.mt-5.hidden.mdp\:block:last-of-type > ul,
html.arcanum-dark .nikan-mobile-header-row {
  background: rgba(11, 22, 38, .88) !important;
  border-color: var(--arc-dark-border) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .32) !important;
}

html.arcanum-dark .arcanum-fixed-header-bg span,
html.arcanum-dark .arcanum-fixed-header-bg li,
html.arcanum-dark .arcanum-fixed-header-bg a {
  color: #e2e8f0 !important;
}

html.arcanum-dark .arcanum-fixed-header-bg > header.container-main.mt-5.hidden.mdp\:block:last-of-type > ul > li,
html.arcanum-dark .arcanum-fixed-header-bg > header.container-main.mt-5.hidden.mdp\:block:last-of-type > ul > li a,
html.arcanum-dark #megaTrigger,
html.arcanum-dark #megaTrigger span {
  color: #e2e8f0 !important;
}

html.arcanum-dark .arcanum-fixed-header-bg > header.container-main.mt-5.hidden.mdp\:block:last-of-type > ul > li a:hover,
html.arcanum-dark #megaTrigger:hover,
html.arcanum-dark #megaTrigger:hover span {
  color: var(--arc-dark-blue) !important;
}

html.arcanum-dark .arcanum-fixed-header-bg .bg-gray-300 {
  background: rgba(255, 255, 255, .12) !important;
}

/* لوگو و آیکن‌های مشکی هدر */
html.arcanum-dark .arcanum-fixed-header-bg .site-header-logo-img {
  filter: brightness(0) invert(1) !important;
}

html.arcanum-dark .arcanum-fixed-header-bg img[src*="/icons/"],
html.arcanum-dark .arcanum-dk-cart-icon img,
html.arcanum-dark .nikan-mobile-menu-wrap img,
html.arcanum-dark .nikan-mobile-actions-wrap img {
  filter: brightness(0) invert(1) opacity(.9) !important;
}

html.arcanum-dark .arcanum-fixed-header-bg form[method="get"] button img {
  filter: brightness(0) invert(1) opacity(.75) !important;
}


/* ======================================================================
   04) HEADER SEARCH / LOGIN / CART - سرچ، ورود و سبد خرید
====================================================================== */

html.arcanum-dark .arcanum-fixed-header-bg form[method="get"],
html.arcanum-dark .nikan-mobile-main-header .search-section input {
  background: var(--arc-dark-card) !important;
  border-color: var(--arc-dark-border) !important;
  box-shadow: none !important;
  color: var(--arc-dark-text) !important;
}

html.arcanum-dark .arcanum-fixed-header-bg form[method="get"]:focus-within,
html.arcanum-dark .nikan-mobile-main-header .search-section input:focus {
  background: var(--arc-dark-card-2) !important;
  border-color: rgba(56, 189, 248, .42) !important;
  box-shadow: 0 0 0 4px rgba(14, 165, 233, .12) !important;
}

html.arcanum-dark .arcanum-fixed-header-bg form[method="get"] input {
  color: var(--arc-dark-text) !important;
}

html.arcanum-dark .arcanum-fixed-header-bg form[method="get"] input::placeholder,
html.arcanum-dark .nikan-mobile-main-header .search-section input::placeholder {
  color: var(--arc-dark-muted) !important;
}

html.arcanum-dark .arcanum-fixed-header-bg a[href*="my-account"],
html.arcanum-dark .arcanum-fixed-header-bg a[href*="myaccount"],
html.arcanum-dark .arcanum-dk-cart,
html.arcanum-dark .nikan-mobile-menu-wrap,
html.arcanum-dark .nikan-mobile-actions-wrap a {
  background: var(--arc-dark-card) !important;
  color: var(--arc-dark-text) !important;
  border-color: var(--arc-dark-border-2) !important;
  box-shadow: none !important;
}

html.arcanum-dark .arcanum-fixed-header-bg a[href*="my-account"]:hover,
html.arcanum-dark .arcanum-fixed-header-bg a[href*="myaccount"]:hover,
html.arcanum-dark .arcanum-dk-cart:hover {
  border-color: rgba(56, 189, 248, .34) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .22) !important;
}

html.arcanum-dark .arcanum-dk-cart-title {
  color: var(--arc-dark-text) !important;
}

html.arcanum-dark .arcanum-dk-cart-badge {
  border-color: var(--arc-dark-card) !important;
}


/* ======================================================================
   05) CART PANELS - مینی‌کارت دسکتاپ و دراور سبد خرید موبایل
====================================================================== */

html.arcanum-dark .arcanum-mini-cart-panel {
  background: var(--arc-dark-card) !important;
  border-color: var(--arc-dark-border) !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .40) !important;
}

html.arcanum-dark .arcanum-mini-cart-panel::before {
  background: var(--arc-dark-card) !important;
  border-color: var(--arc-dark-border) !important;
}

html.arcanum-dark .arcanum-mini-cart-head,
html.arcanum-dark .arcanum-mini-cart-actions {
  border-color: var(--arc-dark-border) !important;
}

html.arcanum-dark .arcanum-mini-cart-head strong,
html.arcanum-dark .arcanum-cart-item-info a,
html.arcanum-dark .arcanum-cart-item-info strong,
html.arcanum-dark .arcanum-cart-empty-state strong,
html.arcanum-dark .arcanum-mobile-cart-head strong {
  color: var(--arc-dark-text) !important;
}

html.arcanum-dark .arcanum-mini-cart-head span,
html.arcanum-dark .arcanum-cart-item-info span,
html.arcanum-dark .arcanum-cart-empty-state p,
html.arcanum-dark .arcanum-mobile-cart-head span {
  color: var(--arc-dark-muted) !important;
}

html.arcanum-dark .arcanum-cart-item {
  background: var(--arc-dark-bg-soft) !important;
  border-color: var(--arc-dark-border) !important;
}

html.arcanum-dark .arcanum-cart-item-info span {
  background: var(--arc-dark-card) !important;
  border-color: var(--arc-dark-border) !important;
}

html.arcanum-dark .arcanum-mini-cart-close,
html.arcanum-dark .arcanum-mobile-cart-close {
  background: var(--arc-dark-bg-soft) !important;
  color: var(--arc-dark-muted-2) !important;
}

html.arcanum-dark .arcanum-mobile-cart-drawer,
html.arcanum-dark .arcanum-mobile-cart-head,
html.arcanum-dark .arcanum-mobile-cart-footer {
  background: var(--arc-dark-card) !important;
  border-color: var(--arc-dark-border) !important;
}

html.arcanum-dark .arcanum-mobile-cart-body {
  background: var(--arc-dark-bg-soft) !important;
}


/* ======================================================================
   06) MEGA MENU + MOBILE MENU - مگامنو دسکتاپ و منوی کشویی موبایل
====================================================================== */

html.arcanum-dark #megaPanel {
  z-index: 999999 !important;
}

html.arcanum-dark .mega-panel-box {
  background: var(--arc-dark-card) !important;
  border: 1px solid var(--arc-dark-border-2) !important;
  box-shadow: 0 34px 90px rgba(0, 0, 0, .48) !important;
}

html.arcanum-dark #megaPanelInner,
html.arcanum-dark .mega-left-content,
html.arcanum-dark .mega-content {
  background: var(--arc-dark-card) !important;
}

html.arcanum-dark #megaPanelInner > div:first-child {
  background: #071120 !important;
  border-left-color: var(--arc-dark-border) !important;
}

html.arcanum-dark #megaPanelInner > div:first-child > div > div {
  background: rgba(255, 255, 255, .06) !important;
  border-color: var(--arc-dark-border-2) !important;
}

html.arcanum-dark #megaPanelInner > div:first-child > div > div span {
  color: #e2e8f0 !important;
}

html.arcanum-dark .mega-tab {
  background: transparent !important;
  color: #cbd5e1 !important;
}

html.arcanum-dark .mega-tab span {
  color: #cbd5e1 !important;
}

html.arcanum-dark .mega-tab:hover,
html.arcanum-dark .mega-tab.bg-white {
  background: rgba(14, 165, 233, .12) !important;
  color: var(--arc-dark-blue) !important;
  box-shadow: none !important;
}

html.arcanum-dark .mega-tab:hover span,
html.arcanum-dark .mega-tab.bg-white span {
  color: var(--arc-dark-blue) !important;
}

html.arcanum-dark .mega-content a {
  color: var(--arc-dark-text) !important;
}

html.arcanum-dark .mega-content a:hover {
  color: var(--arc-dark-blue) !important;
}

html.arcanum-dark .mega-content ul a,
html.arcanum-dark .mega-content li a {
  color: var(--arc-dark-muted) !important;
}

html.arcanum-dark .mega-content ul a:hover,
html.arcanum-dark .mega-content li a:hover {
  color: var(--arc-dark-blue) !important;
}

html.arcanum-dark .mega-panel-box .text-gray-900,
html.arcanum-dark .mega-panel-box .text-gray-800 {
  color: var(--arc-dark-text) !important;
}

html.arcanum-dark .mega-panel-box .text-gray-700,
html.arcanum-dark .mega-panel-box .text-gray-600,
html.arcanum-dark .mega-panel-box .text-gray-500,
html.arcanum-dark .mega-panel-box .text-gray-400 {
  color: var(--arc-dark-muted) !important;
}

html.arcanum-dark .mega-panel-box .border-gray-100,
html.arcanum-dark .mega-panel-box .border-gray-200 {
  border-color: var(--arc-dark-border) !important;
}

html.arcanum-dark .nikan-mega-accent {
  background: var(--arc-dark-blue) !important;
}

/* منوی موبایل */
html.arcanum-dark #menuPanel {
  background: var(--arc-dark-bg-soft) !important;
  border-left-color: var(--arc-dark-border) !important;
}

html.arcanum-dark #menuPanel > div:first-child {
  background: var(--arc-dark-card) !important;
  border-color: var(--arc-dark-border) !important;
}

html.arcanum-dark #menuPanel nav a,
html.arcanum-dark #menuPanel nav .menu-item,
html.arcanum-dark #menuPanel nav span,
html.arcanum-dark #menuPanel span {
  color: #e2e8f0 !important;
}

html.arcanum-dark #menuPanel .sub-menu {
  background: rgba(255, 255, 255, .025) !important;
  border-color: rgba(56, 189, 248, .18) !important;
}

html.arcanum-dark #menuPanel .sub-menu a {
  color: #cbd5e1 !important;
  background: transparent !important;
}

html.arcanum-dark #menuPanel .hover\:bg-blue-50:hover,
html.arcanum-dark #menuPanel .hover\:bg-blue-100:hover,
html.arcanum-dark #menuPanel .group:hover,
html.arcanum-dark #menuPanel .menu-item:hover,
html.arcanum-dark #menuPanel a:hover,
html.arcanum-dark #menuPanel a:focus,
html.arcanum-dark #menuPanel a:active,
html.arcanum-dark #menuPanel .dd-toggle:hover,
html.arcanum-dark #menuPanel .dd-toggle:focus,
html.arcanum-dark #menuPanel .dd-toggle:active,
html.arcanum-dark #menuPanel nav div:hover,
html.arcanum-dark #menuPanel nav div:focus-within {
  background: rgba(14, 165, 233, .12) !important;
  color: var(--arc-dark-blue) !important;
  border-color: rgba(56, 189, 248, .22) !important;
}

html.arcanum-dark #menuPanel nav div:hover a,
html.arcanum-dark #menuPanel nav div:hover span,
html.arcanum-dark #menuPanel nav div:focus-within a,
html.arcanum-dark #menuPanel nav div:focus-within span,
html.arcanum-dark #menuPanel .sub-menu a:hover,
html.arcanum-dark #menuPanel .sub-menu a:focus,
html.arcanum-dark #menuPanel .sub-menu a:active {
  color: var(--arc-dark-blue) !important;
}

html.arcanum-dark #menuPanel .dd-toggle {
  background: rgba(255, 255, 255, .04) !important;
  color: #e2e8f0 !important;
}

html.arcanum-dark #menuPanel .dd-toggle:hover,
html.arcanum-dark #menuPanel .dd-toggle:focus,
html.arcanum-dark #menuPanel .dd-toggle:active {
  background: rgba(14, 165, 233, .16) !important;
  color: var(--arc-dark-blue) !important;
}

html.arcanum-dark #menuPanel .icon-plus {
  color: #e2e8f0 !important;
}

html.arcanum-dark #menuPanel .dd-toggle:hover .icon-plus,
html.arcanum-dark #menuPanel div:hover .icon-plus {
  color: var(--arc-dark-blue) !important;
}

html.arcanum-dark #menuPanel li,
html.arcanum-dark #menuPanel li:hover,
html.arcanum-dark #menuPanel li:focus-within {
  background: transparent !important;
}

html.arcanum-dark #menuPanel .bg-blue-50,
html.arcanum-dark #menuPanel .bg-blue-100,
html.arcanum-dark #menuPanel .bg-white {
  background: rgba(14, 165, 233, .12) !important;
}

html.arcanum-dark #menuPanel .border-gray-200,
html.arcanum-dark #menuPanel .border-gray-100,
html.arcanum-dark #menuPanel .border-gray-50 {
  border-color: rgba(255, 255, 255, .10) !important;
}