/**
 * Anime Island Shop - Midnight Obsidian & Cyber Slate Dark Theme
 * پالت رنگی حرفه‌ای تم تاریک با کنتراست شفاف، بدون بنفش کدر و کاملاً مدرن
 */

/* ============================================================
   DARK MODE STYLES (Triggered by html.dark or body.dark-mode)
   ============================================================ */
html.dark,
body.dark-mode {
  --color-surface: #0B0F19 !important;
  --color-surface-dim: #0F172A !important;
  --color-surface-bright: #1E293B !important;
  --color-surface-container-lowest: #070B14 !important;
  --color-surface-container-low: #0F172A !important;
  --color-surface-container: #131B2E !important;
  --color-surface-container-high: #162238 !important;
  --color-surface-container-highest: #1E293B !important;
  --color-on-surface: #FFFFFF !important;
  --color-on-surface-variant: #94A3B8 !important;
  --color-outline: rgba(255, 255, 255, 0.08) !important;
  --color-outline-variant: rgba(255, 255, 255, 0.05) !important;

  background-color: #0B0F19 !important;
  color: #E2E8F0 !important;
}

/* Base Body Background */
html.dark body,
body.dark-mode {
  background-color: #0B0F19 !important;
  color: #E2E8F0 !important;
}

/* Containers, Cards & Boxes */
html.dark .bg-white,
body.dark-mode .bg-white,
html.dark .bg-slate-50,
body.dark-mode .bg-slate-50,
html.dark .bg-slate-50\/70,
html.dark .bg-slate-50\/80 {
  background-color: #131B2E !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark .bg-slate-100,
body.dark-mode .bg-slate-100 {
  background-color: #162238 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Headings and High Contrast Text */
html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6,
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6,
html.dark .text-slate-800,
body.dark-mode .text-slate-800,
html.dark .text-slate-900,
body.dark-mode .text-slate-900,
html.dark .text-gray-800,
body.dark-mode .text-gray-800,
html.dark .text-gray-900,
body.dark-mode .text-gray-900 {
  color: #FFFFFF !important;
}

/* Body & Medium Contrast Text */
html.dark .text-slate-700,
body.dark-mode .text-slate-700,
html.dark .text-slate-600,
body.dark-mode .text-slate-600,
html.dark .text-slate-500,
body.dark-mode .text-slate-500 {
  color: #CBD5E1 !important;
}

/* Muted Secondary Text (Only for subtle labels & hints) */
html.dark .text-slate-400:not(.font-mono),
body.dark-mode .text-slate-400:not(.font-mono) {
  color: #94A3B8 !important;
}

/* Borders */
html.dark .border-slate-100,
body.dark-mode .border-slate-100,
html.dark .border-slate-200,
body.dark-mode .border-slate-200,
html.dark .border-slate-200\/70,
html.dark .border-slate-200\/80,
html.dark .border-slate-300 {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
body.dark-mode .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgba(255, 255, 255, 0.07) !important;
}

/* Inputs, Selects, and Textareas */
html.dark input[type="text"],
html.dark input[type="number"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="tel"],
html.dark input[type="url"],
html.dark input[type="search"],
html.dark select,
html.dark textarea,
body.dark-mode input[type="text"],
body.dark-mode input[type="number"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode input[type="tel"],
body.dark-mode input[type="url"],
body.dark-mode input[type="search"],
body.dark-mode select,
body.dark-mode textarea {
  background-color: #0F172A !important;
  color: #FFFFFF !important;
  border-color: #334155 !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder,
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: #64748B !important;
}

html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus,
body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
  border-color: #EC4899 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.25) !important;
}

/* Tables */
html.dark table thead tr,
body.dark-mode table thead tr {
  background-color: #1E293B !important;
  color: #F8FAFC !important;
}

html.dark table tbody tr:hover,
body.dark-mode table tbody tr:hover {
  background-color: #162238 !important;
}

/* Header & Navbars */
html.dark header,
body.dark-mode header {
  background-color: rgba(19, 27, 46, 0.95) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark .bg-slate-900,
body.dark-mode .bg-slate-900 {
  background-color: #0B0F19 !important;
}

/* Admin Specific Overrides */
html.dark aside#adminSidebar,
body.dark-mode aside#adminSidebar {
  background: #0B0F19 !important;
  border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html.dark .admin-sidebar {
  background: #0B0F19 !important;
  border-left-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark .admin-topbar {
  background: #131B2E !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark .admin-content,
html.dark main {
  background-color: #0B0F19 !important;
}

/* Shadows in Dark Mode */
html.dark .shadow-sm,
html.dark .shadow-md,
html.dark .shadow-lg,
html.dark .shadow-xl {
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5) !important;
}

/* Badges adjustments */
html.dark .bg-blue-50 {
  background-color: rgba(59, 130, 246, 0.15) !important;
  color: #93C5FD !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
}
html.dark .bg-emerald-50 {
  background-color: rgba(16, 185, 129, 0.15) !important;
  color: #6EE7B7 !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
}
html.dark .bg-rose-50,
html.dark .bg-red-50 {
  background-color: rgba(244, 63, 94, 0.15) !important;
  color: #FDA4AF !important;
  border-color: rgba(244, 63, 94, 0.3) !important;
}
html.dark .bg-amber-50,
html.dark .bg-orange-50 {
  background-color: rgba(245, 158, 11, 0.15) !important;
  color: #FCD34D !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
}
html.dark .bg-purple-50 {
  background-color: rgba(168, 85, 247, 0.15) !important;
  color: #D8B4FE !important;
  border-color: rgba(168, 85, 247, 0.3) !important;
}
html.dark .bg-pink-50 {
  background-color: rgba(236, 72, 153, 0.15) !important;
  color: #F472B6 !important;
  border-color: rgba(236, 72, 153, 0.3) !important;
}
html.dark .bg-indigo-50 {
  background-color: rgba(99, 102, 241, 0.15) !important;
  color: #A5B4FC !important;
  border-color: rgba(99, 102, 241, 0.3) !important;
}

/* Theme Toggle Button Styling (Kawaii Pill Switch) */
.theme-toggle-btn {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 58px !important;
  height: 30px !important;
  padding: 0 !important;
  border-radius: 9999px !important;
  background: #E2E8F0 !important;
  border: 1.5px solid #CBD5E1 !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  user-select: none !important;
  outline: none !important;
  flex-shrink: 0 !important;
}

.theme-toggle-btn:hover {
  border-color: #EC4899 !important;
  box-shadow: 0 0 10px rgba(236, 72, 153, 0.3) !important;
}

html.dark .theme-toggle-btn,
body.dark-mode .theme-toggle-btn {
  background: #1e1b4b !important;
  border-color: rgba(168, 85, 247, 0.5) !important;
  box-shadow: 0 0 14px rgba(131, 82, 253, 0.35) !important;
}

.theme-toggle-track {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 7px;
  font-size: 11px;
  pointer-events: none;
}

.theme-toggle-track .fa-sun {
  color: #F59E0B;
}

.theme-toggle-track .fa-moon {
  color: #A5B4FC;
}

.theme-toggle-thumb {
  position: absolute;
  top: 2px;
  right: 3px;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease;
  pointer-events: none;
}

html.dark .theme-toggle-thumb,
body.dark-mode .theme-toggle-thumb {
  transform: translateX(-27px);
  background: linear-gradient(135deg, #8352FD, #FF4D80) !important;
  box-shadow: 0 0 10px rgba(255, 77, 128, 0.6) !important;
}

.theme-toggle-thumb .thumb-icon-sun {
  color: #F59E0B;
  font-size: 11px;
  display: inline-block;
}

.theme-toggle-thumb .thumb-icon-moon {
  color: #FFFFFF;
  font-size: 10px;
  display: none;
}

html.dark .theme-toggle-thumb .thumb-icon-sun,
body.dark-mode .theme-toggle-thumb .thumb-icon-sun {
  display: none !important;
}

html.dark .theme-toggle-thumb .thumb-icon-moon,
body.dark-mode .theme-toggle-thumb .thumb-icon-moon {
  display: inline-block !important;
}

/* Header, Navbar and Menu Borders in Dark Mode */
html.dark header,
body.dark-mode header {
  background-color: rgba(14, 21, 38, 0.96) !important;
  border-bottom: 1px solid rgba(168, 85, 247, 0.25) !important;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.5) !important;
}

html.dark header nav,
body.dark-mode header nav {
  background-color: rgba(10, 15, 29, 0.94) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: 1px solid rgba(168, 85, 247, 0.2) !important;
}

html.dark header nav ul li a,
html.dark header nav a {
  color: #E2E8F0 !important;
}

html.dark header nav ul li a:hover,
html.dark header nav a:hover {
  color: #FF75A0 !important;
  text-shadow: 0 0 8px rgba(255, 117, 160, 0.4);
}

/* Beautiful borders for dropdowns in Dark Mode */
html.dark .search-dropdown,
html.dark header .group:hover > div,
html.dark header .group-hover\:block > div {
  background-color: #131B2E !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(131, 82, 253, 0.15) !important;
}

html.dark header input#liveSearchInput {
  background-color: #1A2238 !important;
  border-color: rgba(168, 85, 247, 0.3) !important;
  color: #F8FAFC !important;
}

html.dark header input#liveSearchInput:focus {
  border-color: #FF4D80 !important;
  box-shadow: 0 0 15px rgba(255, 77, 128, 0.25) !important;
}


/* ============================================================
   ADVANCED DARK THEME FIXES & HIGH-CONTRAST READABILITY
   ============================================================ */

/* 1. 3D Product Cards in Dark Mode */
html.dark .card-3d,
body.dark-mode .card-3d {
  background: #131B2E !important;
  background-color: #131B2E !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6) !important;
}

html.dark .card-3d:hover,
body.dark-mode .card-3d:hover {
  border-color: rgba(255, 51, 102, 0.6) !important;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.85), 0 0 25px rgba(255, 51, 102, 0.3) !important;
}

/* 2. Product Card Inner Elements */
html.dark .card-3d .aspect-square,
body.dark-mode .card-3d .aspect-square {
  background-color: #070B14 !important;
}

/* Product Titles inside Cards - Ultra-Crisp Pure White */
html.dark .card-3d a,
body.dark-mode .card-3d a,
html.dark .card-3d h3,
body.dark-mode .card-3d h3,
html.dark .card-3d h4,
body.dark-mode .card-3d h4,
html.dark .card-3d .line-clamp-2,
body.dark-mode .card-3d .line-clamp-2,
html.dark .card-3d [class*="text-slate-800"],
body.dark-mode .card-3d [class*="text-slate-800"],
html.dark .card-3d [class*="text-slate-900"],
body.dark-mode .card-3d [class*="text-slate-900"] {
  color: #FFFFFF !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

html.dark .card-3d a:hover,
body.dark-mode .card-3d a:hover {
  color: #FF5388 !important;
  text-shadow: 0 0 12px rgba(255, 83, 136, 0.5) !important;
}

/* 3. High-Contrast Prices */
/* Regular Price - Crisp Pure White */
html.dark .card-3d .font-mono:not(.line-through),
body.dark-mode .card-3d .font-mono:not(.line-through),
html.dark .font-mono.text-slate-800,
body.dark-mode .font-mono.text-slate-800,
html.dark .font-mono.text-slate-900,
body.dark-mode .font-mono.text-slate-900 {
  color: #FFFFFF !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Sale Price - Neon Electric Pink */
html.dark .card-3d .text-pink-600.font-mono,
body.dark-mode .card-3d .text-pink-600.font-mono,
html.dark .card-3d [class*="text-pink"].font-mono,
body.dark-mode .card-3d [class*="text-pink"].font-mono,
html.dark .text-pink-600.font-mono,
body.dark-mode .text-pink-600.font-mono {
  color: #FF3366 !important;
  font-weight: 900 !important;
  text-shadow: 0 0 14px rgba(255, 51, 102, 0.6) !important;
}

/* Strikethrough Old Price */
html.dark .card-3d .line-through,
body.dark-mode .card-3d .line-through,
html.dark .line-through,
body.dark-mode .line-through {
  color: #94A3B8 !important;
  text-decoration-color: #F43F5E !important;
  opacity: 0.8 !important;
}

/* Anime Category & Series Tags on Cards */
html.dark .card-3d .text-purple-600,
body.dark-mode .card-3d .text-purple-600 {
  color: #C084FC !important;
  font-weight: 700 !important;
}

html.dark .card-3d .text-slate-400:not(.line-through),
body.dark-mode .card-3d .text-slate-400:not(.line-through) {
  color: #CBD5E1 !important;
  font-weight: 600 !important;
}

/* Quick Add button in Card */
html.dark .card-3d button.bg-pink-50,
body.dark-mode .card-3d button.bg-pink-50 {
  background-color: rgba(255, 51, 102, 0.18) !important;
  color: #FF5388 !important;
  border: 1px solid rgba(255, 51, 102, 0.35) !important;
}
html.dark .card-3d button.bg-pink-50:hover,
body.dark-mode .card-3d button.bg-pink-50:hover {
  background-color: #FF3366 !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 16px rgba(255, 51, 102, 0.6) !important;
}

/* Card Wishlist / Quickview floating buttons */
html.dark .card-3d .bg-white\/90,
body.dark-mode .card-3d .bg-white\/90 {
  background-color: rgba(19, 27, 46, 0.9) !important;
  color: #E2E8F0 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}
html.dark .card-3d .bg-white\/90:hover,
body.dark-mode .card-3d .bg-white\/90:hover {
  background-color: #1E293B !important;
  color: #FF5388 !important;
  border-color: #FF5388 !important;
}

/* 4. Hero Stage Banner in Dark Mode */
html.dark .hero-stage,
body.dark-mode .hero-stage {
  background: radial-gradient(ellipse at 70% 30%, #251238 0%, #11071B 65%, #08030D 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.85), 0 0 35px rgba(131, 82, 253, 0.2) !important;
}

html.dark .hero-stage h1,
body.dark-mode .hero-stage h1 {
  color: #FFFFFF !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9) !important;
}

html.dark .hero-stage p,
body.dark-mode .hero-stage p,
html.dark .hero-stage .text-slate-300,
body.dark-mode .hero-stage .text-slate-300 {
  color: #F1F5F9 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important;
}

html.dark .hero-stage .floating-badge,
html.dark .hero-stage .floating-badge-2,
body.dark-mode .hero-stage .floating-badge,
body.dark-mode .hero-stage .floating-badge-2 {
  background: rgba(19, 27, 46, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* 5. Dual Promo 3D Banners in Dark Mode */
html.dark .promo-3d-banner,
body.dark-mode .promo-3d-banner {
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.85) !important;
}

html.dark .promo-3d-banner:first-of-type,
body.dark-mode .promo-3d-banner:first-of-type {
  background: linear-gradient(135deg, #280E3C 0%, #140622 100%) !important;
  border-color: rgba(255, 77, 128, 0.25) !important;
}

html.dark .promo-3d-banner:last-of-type,
body.dark-mode .promo-3d-banner:last-of-type {
  background: linear-gradient(135deg, #1A1142 0%, #0B0526 100%) !important;
  border-color: rgba(131, 82, 253, 0.25) !important;
}

html.dark .promo-3d-banner h3,
body.dark-mode .promo-3d-banner h3 {
  color: #FFFFFF !important;
  font-weight: 900 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9) !important;
}

html.dark .promo-3d-banner p,
body.dark-mode .promo-3d-banner p,
html.dark .promo-3d-banner .text-white\/70,
body.dark-mode .promo-3d-banner .text-white\/70,
html.dark .promo-3d-banner .text-white\/80,
body.dark-mode .promo-3d-banner .text-white\/80 {
  color: #F8FAFC !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
  font-weight: 500 !important;
}

html.dark .promo-3d-banner span[class*="text-pink-300"],
body.dark-mode .promo-3d-banner span[class*="text-pink-300"] {
  color: #FFB3CA !important;
  font-weight: 800 !important;
}

html.dark .promo-3d-banner span[class*="text-purple-300"],
body.dark-mode .promo-3d-banner span[class*="text-purple-300"] {
  color: #E9D5FF !important;
  font-weight: 800 !important;
}

/* 6. Popular Category 3D Cards in Dark Mode */
html.dark .category-3d-card,
body.dark-mode .category-3d-card {
  background: #131B2E !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5) !important;
}

html.dark .category-3d-card:hover,
body.dark-mode .category-3d-card:hover {
  border-color: rgba(255, 77, 128, 0.5) !important;
  box-shadow: 0 20px 35px -8px rgba(255, 77, 128, 0.3) !important;
}

html.dark .category-3d-card h3,
body.dark-mode .category-3d-card h3 {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}

html.dark .category-3d-card p,
body.dark-mode .category-3d-card p {
  color: #CBD5E1 !important;
}

html.dark .category-img-badge,
body.dark-mode .category-img-badge {
  background: #070B14 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* 7. Otaku Services 3D Boxes in Dark Mode */
html.dark .service-3d-box,
body.dark-mode .service-3d-box {
  background: #131B2E !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5) !important;
}

html.dark .service-3d-box:hover,
body.dark-mode .service-3d-box:hover {
  border-color: rgba(131, 82, 253, 0.45) !important;
  box-shadow: 0 15px 35px -5px rgba(131, 82, 253, 0.35) !important;
}

html.dark .service-3d-box h3,
body.dark-mode .service-3d-box h3 {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}

html.dark .service-3d-box p,
body.dark-mode .service-3d-box p {
  color: #CBD5E1 !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
}

/* 8. Shop Page Catalog Banner & Filters */
html.dark .bg-gradient-to-r.from-pink-100.via-purple-50.to-pink-50,
body.dark-mode .bg-gradient-to-r.from-pink-100.via-purple-50.to-pink-50,
html.dark [class*="from-pink-100"][class*="to-pink-50"] {
  background: linear-gradient(135deg, #1F1535 0%, #131B2E 50%, #161F38 100%) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark .bg-gradient-to-r.from-pink-100.via-purple-50.to-pink-50 h1,
body.dark-mode .bg-gradient-to-r.from-pink-100.via-purple-50.to-pink-50 h1,
html.dark .bg-gradient-to-r.from-pink-100.via-purple-50.to-pink-50 .text-slate-800 {
  color: #FFFFFF !important;
}

html.dark .bg-gradient-to-r.from-pink-100.via-purple-50.to-pink-50 p,
body.dark-mode .bg-gradient-to-r.from-pink-100.via-purple-50.to-pink-50 p,
html.dark .bg-gradient-to-r.from-pink-100.via-purple-50.to-pink-50 .text-slate-600 {
  color: #CBD5E1 !important;
}

/* 9. Shop Sidebar & Sorting Bar */
html.dark aside .bg-white,
body.dark-mode aside .bg-white,
html.dark main .bg-white,
body.dark-mode main .bg-white {
  background-color: #131B2E !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark a.hover\:bg-slate-50:hover,
body.dark-mode a.hover\:bg-slate-50:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* 10. Breadcrumb in Dark Mode */
html.dark nav.text-slate-400 a,
body.dark-mode nav.text-slate-400 a {
  color: #94A3B8 !important;
}
html.dark nav.text-slate-400 a:hover,
body.dark-mode nav.text-slate-400 a:hover {
  color: #FF5388 !important;
}
html.dark nav.text-slate-400 .text-slate-800,
body.dark-mode nav.text-slate-400 .text-slate-800 {
  color: #FFFFFF !important;
}

/* 11. Modal Windows & Popups in Dark Mode */
html.dark .modal-content,
html.dark .swal2-popup,
body.dark-mode .modal-content {
  background-color: #131B2E !important;
  color: #F8FAFC !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 12. Fix for empty state boxes */
html.dark .border-slate-100,
body.dark-mode .border-slate-100 {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* 13. Trust Badges Strip in Dark Mode */
html.dark [class*="from-[#fdf8ff]"],
body.dark-mode [class*="from-[#fdf8ff]"] {
  background: #0B0F19 !important;
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark .text-\[\#180a22\],
body.dark-mode .text-\[\#180a22\],
html.dark [class*="text-[#180a22]"],
body.dark-mode [class*="text-[#180a22]"] {
  color: #FFFFFF !important;
}

/* ============================================================
   14. HIGH-VISIBILITY DARK MODE CONTRAST OVERRIDES
   ============================================================ */
/* Product Card Titles - Ultra-Crisp White */
html.dark .card-3d a.text-slate-800,
body.dark-mode .card-3d a.text-slate-800,
html.dark .card-3d a[class*="text-slate"],
body.dark-mode .card-3d a[class*="text-slate"],
html.dark .card-3d .line-clamp-2 {
  color: #FFFFFF !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

html.dark .card-3d a:hover,
body.dark-mode .card-3d a:hover {
  color: #FF5388 !important;
  text-shadow: 0 0 10px rgba(255, 83, 136, 0.5) !important;
}

/* Product Card Prices - Crystal Clear Contrast */
html.dark .card-3d .font-mono.text-slate-800,
body.dark-mode .card-3d .font-mono.text-slate-800,
html.dark .card-3d span.font-mono:not(.line-through):not(.text-pink-600) {
  color: #10B981 !important; /* Crisp emerald highlight for regular price */
  font-weight: 900 !important;
  text-shadow: 0 0 8px rgba(16, 185, 129, 0.3) !important;
}

html.dark .card-3d .font-mono.text-pink-600,
body.dark-mode .card-3d .font-mono.text-pink-600,
html.dark .card-3d [class*="text-pink"].font-mono {
  color: #FF3366 !important; /* Neon electric pink for sale prices */
  font-weight: 900 !important;
  text-shadow: 0 0 12px rgba(255, 51, 102, 0.6) !important;
}

/* Strikethrough Original Price */
html.dark .card-3d .line-through.font-mono {
  color: #94A3B8 !important;
  opacity: 0.85 !important;
}

/* Banners Text Contrast */
html.dark .promo-3d-banner p,
body.dark-mode .promo-3d-banner p,
html.dark .promo-3d-banner .text-white\/70,
body.dark-mode .promo-3d-banner .text-white\/70,
html.dark .promo-3d-banner .text-white\/80,
body.dark-mode .promo-3d-banner .text-white\/80,
html.dark .hero-stage p,
body.dark-mode .hero-stage p {
  color: #F8FAFC !important;
  opacity: 0.95 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

/* Navbar, Menu Borders & Dropdowns - Sleek Anime Neon Contrast */
html.dark header,
body.dark-mode header {
  border-bottom: 1.5px solid rgba(168, 85, 247, 0.35) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(168, 85, 247, 0.2) !important;
}

html.dark header nav,
body.dark-mode header nav {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: 1.5px solid rgba(168, 85, 247, 0.3) !important;
}

html.dark #userDropdownMenu > div,
html.dark .search-dropdown {
  border: 1.5px solid rgba(168, 85, 247, 0.4) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.85), 0 0 20px rgba(131, 82, 253, 0.2) !important;
}

/* ============================================================
   15. DIGIKALA-STYLE SPECIFICATIONS TABLES & CARDS
   ============================================================ */
.digikala-specs-content table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 12px !important;
}
.digikala-specs-content tr {
  border-bottom: 1px solid #E2E8F0;
}
html.dark .digikala-specs-content tr,
body.dark-mode .digikala-specs-content tr {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
.digikala-specs-content th,
.digikala-specs-content td:first-child {
  padding: 10px 14px !important;
  color: #64748B !important;
  font-weight: 700 !important;
  width: 32% !important;
  vertical-align: top !important;
}
html.dark .digikala-specs-content th,
html.dark .digikala-specs-content td:first-child,
body.dark-mode .digikala-specs-content th,
body.dark-mode .digikala-specs-content td:first-child {
  color: #94A3B8 !important;
}
.digikala-specs-content td:last-child {
  padding: 10px 14px !important;
  color: #0F172A !important;
  font-weight: 800 !important;
  vertical-align: top !important;
}
html.dark .digikala-specs-content td:last-child,
body.dark-mode .digikala-specs-content td:last-child {
  color: #FFFFFF !important;
}