/* ================================================================
   FANUS DESIGN SYSTEM v2.0
   Premium Glass UI — Apple visionOS Inspired
   Brand: فانوس (Lantern) — Soft Light, Glass, Warmth
   ================================================================ */

/* ===1. DESIGN TOKENS === */
:root {
  /* Colors - Primary */
  --f-green-50: #f0fdf4;
  --f-green-100: #dcfce7;
  --f-green-200: #bbf7d0;
  --f-green-300: #86efac;
  --f-green-400: #4ade80;
  --f-green-500: #22c55e;
  --f-green-600: #16a34a;
  --f-green-700: #15803d;
  --f-green-800: #166534;
  --f-green-900: #14532d;

  /* Colors - Neutral */
  --f-gray-50: #f8fafc;
  --f-gray-100: #f1f5f9;
  --f-gray-200: #e2e8f0;
  --f-gray-300: #cbd5e1;
  --f-gray-400: #94a3b8;
  --f-gray-500: #64748b;
  --f-gray-600: #475569;
  --f-gray-700: #334155;
  --f-gray-800: #1e293b;
  --f-gray-900: #0f172a;

  /* Colors - Semantic */
  --f-red: #ef4444;
  --f-red-light: #fee2e2;
  --f-amber: #f59e0b;
  --f-amber-light: #fef3c7;
  --f-blue: #3b82f6;
  --f-blue-light: #dbeafe;
  --f-emerald: #10b981;
  --f-emerald-light: #d1fae5;
  --f-purple: #8b5cf6;
  --f-purple-light: #ede9fe;

  /* Brand */
  --f-primary: #14B85C;
  --f-primary-hover: #0D9448;
  --f-primary-light: #4ADE80;
  --f-primary-glow: rgba(20, 184, 92, 0.15);
  --f-primary-glow-strong: rgba(20, 184, 92, 0.25);

  /* Lantern Warmth */
  --f-warm: #F59E0B;
  --f-warm-glow: rgba(245, 158, 11, 0.12);

  /* Glass */
  --f-glass-bg: rgba(255, 255, 255, 0.72);
  --f-glass-bg-strong: rgba(255, 255, 255, 0.88);
  --f-glass-border: rgba(255, 255, 255, 0.45);
  --f-glass-border-subtle: rgba(255, 255, 255, 0.25);
  --f-glass-blur: blur(20px) saturate(180%);
  --f-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.04);
  --f-glass-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.06);
  --f-glass-inner-glow: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* Shadows - Apple Style */
  --f-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --f-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --f-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
  --f-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08);
  --f-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.1);
  --f-shadow-green: 0 8px 24px rgba(20, 184, 92, 0.2);

  /* Radius */
  --f-radius-xs: 8px;
  --f-radius-sm: 12px;
  --f-radius-md: 16px;
  --f-radius-lg: 20px;
  --f-radius-xl: 24px;
  --f-radius-2xl: 32px;
  --f-radius-full: 9999px;

  /* Spacing */
  --f-space-1: 4px;
  --f-space-2: 8px;
  --f-space-3: 12px;
  --f-space-4: 16px;
  --f-space-5: 20px;
  --f-space-6: 24px;
  --f-space-8: 32px;
  --f-space-10: 40px;
  --f-space-12: 48px;

  /* Typography */
  --f-font: 'Vazirmatn', system-ui, -apple-system, sans-serif;
  --f-text-xs: 0.75rem;
  --f-text-sm: 0.8125rem;
  --f-text-base: 0.9375rem;
  --f-text-lg: 1.0625rem;
  --f-text-xl: 1.25rem;
  --f-text-2xl: 1.5rem;
  --f-text-3xl: 1.875rem;
  --f-text-4xl: 2.25rem;

  /* Transitions */
  --f-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --f-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --f-duration-fast: 150ms;
  --f-duration: 250ms;
  --f-duration-slow: 400ms;

  /* Layout */
  --f-sidebar-width: 260px;
  --f-sidebar-collapsed: 72px;
  --f-header-height: 80px;
  --f-bottom-nav-height: 88px;
  --f-max-width: 1500px;
  --f-content-padding: 24px;
}

/* === 2. RESET & BASE === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; width: 100%; }
body {
  font-family: var(--f-font);
  background: var(--f-gray-50);
  color: var(--f-gray-900);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
  width: 100%;
  max-width: 100vw;
}
a { text-decoration: none; color: inherit; }
button { border: none; background: none; cursor: pointer; font-family: inherit; }
input, textarea, select { font-family: inherit; }
img { max-width: 100%; display: block; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--f-green-200); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--f-green-300); }

/* === 3. TYPOGRAPHY === */
.f-text-xs { font-size: var(--f-text-xs); }
.f-text-sm { font-size: var(--f-text-sm); }
.f-text-base { font-size: var(--f-text-base); }
.f-text-lg { font-size: var(--f-text-lg); }
.f-text-xl { font-size: var(--f-text-xl); }
.f-text-2xl { font-size: var(--f-text-2xl); }
.f-text-3xl { font-size: var(--f-text-3xl); }
.f-text-4xl { font-size: var(--f-text-4xl); }
.f-font-medium { font-weight: 500; }
.f-font-semibold { font-weight: 600; }
.f-font-bold { font-weight: 700; }
.f-font-black { font-weight: 900; }
.f-leading-tight { line-height: 1.25; }
.f-leading-normal { line-height: 1.6; }

/* === 4. LAYOUT === */
.f-panel { display: flex; min-height: 100vh; overflow-x: hidden; width: 100%; max-width: 100vw; position: relative; }
.f-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--f-sidebar-width);
  background: var(--f-glass-bg-strong);
  backdrop-filter: var(--f-glass-blur);
  -webkit-backdrop-filter: var(--f-glass-blur);
  border-left: 1px solid var(--f-glass-border);
  z-index: 150;
  display: flex;
  flex-direction: column;
  padding: var(--f-space-6) var(--f-space-4);
  transition: transform var(--f-duration-slow) var(--f-ease);
  overflow-y: auto;
  overflow-x: hidden;
  transform: translateX(100%);
}
.f-sidebar.open { transform: translateX(0); }
.f-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 140;
  touch-action: none;
  overscroll-behavior: contain;
}
.f-sidebar-overlay.open { display: block; }

/* ===== قفل اسکرول سایدبار ===== */
.f-body-scroll-locked,
.f-body-scroll-locked * {
  overflow: hidden !important;
  touch-action: none !important;
  -webkit-overflow-scrolling: auto !important;
  overscroll-behavior: none !important;
}
.f-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--f-radius-sm);
  background: rgba(255, 255, 255, 0.15);
  border: none;
  cursor: pointer;
  transition: all var(--f-duration) var(--f-ease);
  color: white;
}
.f-menu-btn:hover { background: rgba(255, 255, 255, 0.25); }
.f-sidebar-logo {
  display: flex;
  align-items: center;
  gap: var(--f-space-3);
  padding: 0 var(--f-space-3);
  margin-bottom: var(--f-space-8);
}
.f-sidebar-logo img { width: 40px; height: 40px; border-radius: var(--f-radius-sm); }
.f-sidebar-logo span { font-size: var(--f-text-xl); font-weight: 800; color: var(--f-green-700); }
.f-sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: var(--f-space-1); }
.f-sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--f-space-3);
  padding: var(--f-space-3) var(--f-space-4);
  border-radius: var(--f-radius-md);
  font-size: var(--f-text-sm);
  font-weight: 500;
  color: var(--f-gray-500);
  cursor: pointer;
  transition: all var(--f-duration) var(--f-ease);
  position: relative;
}
.f-sidebar-item:hover { background: var(--f-green-50); color: var(--f-green-700); }
.f-sidebar-item.active {
  background: var(--f-primary-glow);
  color: var(--f-green-700);
  font-weight: 700;
}
.f-sidebar-item.active::before {
  content: '';
  position: absolute;
  right: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 24px;
  background: var(--f-primary);
  border-radius: 0 4px 4px 0;
}
.f-sidebar-item svg,
.f-sidebar-item i { width: 20px; height: 20px; flex-shrink: 0; }
.f-sidebar-footer {
  border-top: 1px solid var(--f-gray-200);
  padding-top: var(--f-space-4);
  margin-top: var(--f-space-4);
}
.f-sidebar-profile {
  display: flex;
  align-items: center;
  gap: var(--f-space-3);
  padding: var(--f-space-3);
  border-radius: var(--f-radius-md);
  margin-bottom: var(--f-space-3);
}
.f-sidebar-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: transparent !important;
  background: linear-gradient(135deg, var(--f-green-500), var(--f-green-700));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 800;
  font-size: var(--f-text-base);
  flex-shrink: 0;
}
.f-sidebar-profile-info { flex: 1; min-width: 0; }
.f-sidebar-profile-name { font-size: var(--f-text-sm); font-weight: 700; color: var(--f-gray-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-sidebar-profile-user { font-size: var(--f-text-xs); color: var(--f-gray-400); }

/* Main Content Area */
.f-main {
  flex: 1;
  min-height: 100vh;
  overflow-x: hidden;
  max-width: 100%;
  transition: margin-right var(--f-duration-slow) var(--f-ease);
}
.f-content {
  max-width: var(--f-max-width);
  margin: 0 auto;
  padding: 0 var(--f-space-5);
  padding-bottom: calc(var(--f-bottom-nav-height) + 32px);
  overflow-x: hidden;
}

/* === 5. GLASS SYSTEM === */
.glass {
  background: var(--f-glass-bg);
  backdrop-filter: var(--f-glass-blur);
  -webkit-backdrop-filter: var(--f-glass-blur);
  border: 1px solid var(--f-glass-border);
  box-shadow: var(--f-glass-shadow), var(--f-glass-inner-glow);
}
.glass-card {
  background: var(--f-glass-bg-strong);
  backdrop-filter: var(--f-glass-blur);
  -webkit-backdrop-filter: var(--f-glass-blur);
  border: 1px solid var(--f-glass-border);
  border-radius: var(--f-radius-xl);
  box-shadow: var(--f-glass-shadow), var(--f-glass-inner-glow);
  padding: var(--f-space-5);
  transition: transform var(--f-duration) var(--f-ease),
              box-shadow var(--f-duration) var(--f-ease);
}
.glass-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--f-glass-shadow-lg), var(--f-glass-inner-glow);
}
.glass-card-static {
  background: var(--f-glass-bg-strong);
  backdrop-filter: var(--f-glass-blur);
  -webkit-backdrop-filter: var(--f-glass-blur);
  border: 1px solid var(--f-glass-border);
  border-radius: var(--f-radius-xl);
  box-shadow: var(--f-glass-shadow), var(--f-glass-inner-glow);
  padding: var(--f-space-5);
}

/* === 6. BUTTONS === */
.f-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--f-space-2);
  padding: 14px 24px;
  border-radius: var(--f-radius-md);
  font-size: var(--f-text-sm);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--f-duration) var(--f-ease);
  border: none;
  outline: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.f-btn:active { transform: scale(0.97); }
.f-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.f-btn-primary {
  background: linear-gradient(135deg, var(--f-primary), var(--f-primary-hover));
  color: white;
  box-shadow: var(--f-shadow-green);
}
.f-btn-primary:hover { box-shadow: 0 12px 32px rgba(20, 184, 92, 0.3); transform: translateY(-1px); }
.f-btn-secondary {
  background: var(--f-glass-bg-strong);
  border: 1px solid var(--f-glass-border);
  color: var(--f-green-700);
  backdrop-filter: blur(10px);
}
.f-btn-secondary:hover { background: var(--f-green-50); border-color: var(--f-green-200); }
.f-btn-danger {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.2);
}
.f-btn-ghost {
  background: transparent;
  color: var(--f-gray-500);
}
.f-btn-ghost:hover { background: var(--f-gray-100); color: var(--f-gray-700); }
.f-btn-sm { padding: 10px 16px; font-size: var(--f-text-xs); border-radius: var(--f-radius-sm); }
.f-btn-lg { padding: 16px 32px; font-size: var(--f-text-base); }
.f-btn-full { width: 100%; }
.f-btn-icon {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--f-radius-md);
}
.f-btn-icon-sm {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--f-radius-sm);
}

/* === 7. INPUTS === */
.f-input-group { position: relative; }
.f-input-group label {
  display: block;
  font-size: var(--f-text-xs);
  font-weight: 600;
  color: var(--f-gray-500);
  margin-bottom: 6px;
}
.f-input {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--f-radius-md);
  border: 2px solid transparent;
  background: var(--f-green-50);
  font-size: var(--f-text-sm);
  color: var(--f-gray-900);
  outline: none;
  transition: all var(--f-duration) var(--f-ease);
}
.f-input:focus {
  border-color: var(--f-green-300);
  background: white;
  box-shadow: 0 0 0 4px var(--f-primary-glow);
}
.f-input::placeholder { color: var(--f-gray-300); }
.f-input-icon-wrap {
  position: relative;
}
.f-input-icon-wrap .f-input { padding-right: 44px; }
.f-input-icon-wrap svg,
.f-input-icon-wrap i {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--f-gray-400);
  pointer-events: none;
}
.f-textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--f-radius-md);
  border: 2px solid transparent;
  background: var(--f-green-50);
  font-size: var(--f-text-sm);
  color: var(--f-gray-900);
  outline: none;
  resize: vertical;
  min-height: 80px;
  transition: all var(--f-duration) var(--f-ease);
}
.f-textarea:focus {
  border-color: var(--f-green-300);
  background: white;
  box-shadow: 0 0 0 4px var(--f-primary-glow);
}

/* === 8. CARDS === */
.f-stat-card {
  background: var(--f-glass-bg-strong);
  border: 1px solid var(--f-glass-border);
  border-radius: var(--f-radius-xl);
  padding: var(--f-space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--f-space-2);
  transition: all var(--f-duration) var(--f-ease);
  box-shadow: var(--f-shadow-xs);
  cursor: default;
}
.f-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--f-shadow-md);
}
.f-stat-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--f-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.f-stat-icon svg, .f-stat-icon i { width: 22px; height: 22px; }
.f-stat-icon.green { background: transparent; color: var(--f-green-600); }
.f-stat-icon.amber { background: transparent; color: var(--f-amber-600); }
.f-stat-icon.blue { background: transparent; color: var(--f-blue-600); }
.f-stat-icon.red { background: transparent; color: var(--f-red); }
.f-stat-icon.purple { background: transparent; color: var(--f-purple); }
.f-stat-icon.emerald { background: transparent; color: var(--f-emerald-600); }
.f-stat-value {
  font-size: var(--f-text-2xl);
  font-weight: 900;
  color: var(--f-gray-900);
  line-height: 1.2;
}
.f-stat-label {
  font-size: var(--f-text-xs);
  color: var(--f-gray-400);
  font-weight: 500;
}

/* Action Card */
.f-action-card {
  background: var(--f-glass-bg-strong);
  border: 1px solid var(--f-glass-border);
  border-radius: var(--f-radius-xl);
  padding: var(--f-space-4);
  display: flex;
  align-items: center;
  gap: var(--f-space-3);
  cursor: pointer;
  transition: all var(--f-duration) var(--f-ease);
  box-shadow: var(--f-shadow-xs);
}
.f-action-card:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: var(--f-shadow-md);
  border-color: var(--f-green-200);
}
.f-action-card:active { transform: scale(0.98); }
.f-action-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--f-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.f-action-icon svg, .f-action-icon i { width: 20px; height: 20px; }
.f-action-text { flex: 1; min-width: 0; }
.f-action-title { font-size: var(--f-text-sm); font-weight: 700; color: var(--f-gray-900); }
.f-action-desc { font-size: var(--f-text-xs); color: var(--f-gray-400); margin-top: 2px; }

/* Section Title */
.f-section-title {
  font-size: var(--f-text-base);
  font-weight: 800;
  color: var(--f-gray-900);
  margin-bottom: var(--f-space-4);
  display: flex;
  align-items: center;
  gap: var(--f-space-2);
}
.f-section-title svg, .f-section-title i { width: 18px; height: 18px; color: var(--f-green-500); }

/* === 9. BADGES === */
.f-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--f-radius-xs);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.f-badge-green { background: var(--f-green-100); color: var(--f-green-700); }
.f-badge-red { background: var(--f-red-light); color: #dc2626; }
.f-badge-amber { background: var(--f-amber-light); color: #b45309; }
.f-badge-blue { background: var(--f-blue-light); color: #2563eb; }
.f-badge-gray { background: var(--f-gray-100); color: var(--f-gray-500); }
.f-badge-purple { background: var(--f-purple-light); color: #7c3aed; }
.f-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.f-badge-green .f-badge-dot { background: var(--f-green-500); }
.f-badge-red .f-badge-dot { background: var(--f-red); }
.f-badge-amber .f-badge-dot { background: var(--f-amber); }

/* === 10. BOTTOM NAVIGATION (Mobile) === */
.f-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  padding: 6px 12px;
  padding-bottom: max(8px, env(safe-area-inset-bottom, 8px));
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(248, 250, 252, 0.6) 20%,
    rgba(248, 250, 252, 0.88) 45%,
    rgba(248, 250, 252, 0.96) 65%,
    #f8fafc 100%
  );
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.f-bottom-nav-inner {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--f-radius-xl);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06), var(--f-glass-inner-glow);
  display: flex;
  justify-content: space-around;
  align-items: center;
  max-width: 480px;
  margin: 0 auto;
  padding: 6px 8px;
}
.f-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 14px;
  border-radius: var(--f-radius-md);
  font-size: 10px;
  font-weight: 600;
  color: var(--f-gray-400);
  cursor: pointer;
  transition: all var(--f-duration) var(--f-ease);
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.f-nav-item.active { color: var(--f-green-600); }
.f-nav-item.active::before {
  content: '';
  position: absolute;
  top: 2px;
  width: 20px;
  height: 3px;
  background: var(--f-primary);
  border-radius: var(--f-radius-full);
}
.f-nav-item svg, .f-nav-item i { width: 22px; height: 22px; transition: transform var(--f-duration) var(--f-ease); }
.f-nav-item.active svg, .f-nav-item.active i { transform: scale(1.1); }

/* === 11. FAB (Floating Action Button) === */
.f-fab {
  position: fixed;
  bottom: calc(var(--f-bottom-nav-height) + 20px);
  left: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--f-primary), var(--f-primary-hover));
  color: white;
  border: none;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 28px rgba(20, 184, 92, 0.35);
  z-index: 80;
  cursor: pointer;
  transition: all var(--f-duration) var(--f-ease);
}
.f-fab:hover { transform: scale(1.08); box-shadow: 0 12px 36px rgba(20, 184, 92, 0.4); }
.f-fab:active { transform: scale(0.95); }

/* === 12. SEARCH BAR === */
.f-search {
  display: flex;
  align-items: center;
  gap: var(--f-space-3);
  background: var(--f-green-50);
  border: 2px solid transparent;
  border-radius: var(--f-radius-lg);
  padding: 12px 16px;
  transition: all var(--f-duration) var(--f-ease);
}
.f-search:focus-within {
  border-color: var(--f-green-200);
  background: white;
  box-shadow: 0 0 0 4px var(--f-primary-glow);
}
.f-search svg, .f-search i { width: 20px; height: 20px; color: var(--f-green-400); flex-shrink: 0; }
.f-search input {
  flex: 1;
  border: none;
  background: none;
  font-size: var(--f-text-sm);
  color: var(--f-gray-900);
  outline: none;
}
.f-search input::placeholder { color: var(--f-green-300); }

/* === 13. FILTER CHIPS === */
.f-chips {
  display: flex;
  gap: var(--f-space-2);
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.f-chips::-webkit-scrollbar { display: none; }
.f-chip {
  padding: 8px 16px;
  border-radius: var(--f-radius-full);
  border: 1.5px solid var(--f-green-200);
  font-size: var(--f-text-xs);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--f-duration) var(--f-ease);
  background: white;
  color: var(--f-gray-500);
}
.f-chip:hover { border-color: var(--f-green-300); color: var(--f-green-600); }
.f-chip.active {
  background: var(--f-primary);
  color: white;
  border-color: var(--f-primary);
}

/* === 14. HERO SLIDER === */
.f-hero {
  position: relative;
  border-radius: var(--f-radius-2xl);
  overflow: hidden;
  margin-bottom: var(--f-space-6);
  aspect-ratio: 2.4 / 1;
  min-height: 200px;
  max-width: 100%;
}
.f-hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s var(--f-ease-in-out);
  display: flex;
  align-items: center;
  justify-content: center;
}
.f-hero-slide.active { opacity: 1; z-index: 1; }
.f-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.f-hero-overlay {
  position: absolute;
  inset: 0;
}
.f-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: white;
  padding: var(--f-space-8);
  max-width: 600px;
}
.f-hero-badge {
  display: inline-block;
  padding: 5px 14px;
  border-radius: var(--f-radius-full);
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  font-size: var(--f-text-xs);
  font-weight: 600;
  margin-bottom: var(--f-space-4);
}
.f-hero-title {
  font-size: var(--f-text-2xl);
  font-weight: 900;
  line-height: 1.3;
  margin-bottom: var(--f-space-3);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);
}
.f-hero-subtitle {
  font-size: var(--f-text-sm);
  opacity: 0.9;
  margin-bottom: var(--f-space-5);
  line-height: 1.6;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
}
.f-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--f-radius-md);
  background: white;
  color: var(--f-green-700);
  font-size: var(--f-text-sm);
  font-weight: 700;
  transition: all var(--f-duration) var(--f-ease);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.f-hero-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); }
.f-hero-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 3;
}
.f-hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all var(--f-duration) var(--f-ease);
}
.f-hero-dot.active {
  background: white;
  width: 24px;
  border-radius: 4px;
}

/* === 15. PRODUCT CARD === */
.f-product-card {
  background: var(--f-glass-bg-strong);
  border: 1px solid var(--f-glass-border);
  border-radius: var(--f-radius-xl);
  overflow: hidden;
  transition: all var(--f-duration) var(--f-ease);
  box-shadow: var(--f-shadow-xs);
}
.f-product-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--f-shadow-md);
}
.f-product-img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--f-green-50);
}
.f-product-img-placeholder {
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(135deg, var(--f-green-50), var(--f-green-100));
  display: flex;
  align-items: center;
  justify-content: center;
}
.f-product-img-placeholder svg { width: 40px; height: 40px; color: var(--f-green-300); }
.f-product-info { padding: var(--f-space-4); }
.f-product-name {
  font-size: var(--f-text-sm);
  font-weight: 700;
  color: var(--f-gray-900);
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.f-product-price {
  font-size: var(--f-text-base);
  font-weight: 900;
  color: var(--f-green-700);
  margin-bottom: 6px;
}
.f-product-price-discount {
  font-size: var(--f-text-xs);
  color: var(--f-gray-400);
  text-decoration: line-through;
  margin-right: 6px;
  font-weight: 400;
}
.f-product-actions {
  display: flex;
  gap: 6px;
  margin-top: var(--f-space-3);
}
.f-product-actions button { flex: 1; }

/* Product List Item (horizontal) */
.f-product-item {
  display: flex;
  align-items: center;
  gap: var(--f-space-3);
  padding: var(--f-space-3) var(--f-space-4);
  background: var(--f-glass-bg-strong);
  border: 1px solid var(--f-glass-border);
  border-radius: var(--f-radius-lg);
  transition: all var(--f-duration) var(--f-ease);
  cursor: pointer;
  box-shadow: var(--f-shadow-xs);
}
.f-product-item:hover { transform: translateX(-2px); box-shadow: var(--f-shadow-sm); }
.f-product-item:active { transform: scale(0.99); }
.f-product-item-img {
  width: 56px;
  height: 56px;
  border-radius: var(--f-radius-md);
  object-fit: cover;
  background: var(--f-green-50);
  flex-shrink: 0;
  border: 1px solid var(--f-green-100);
}
.f-product-item-info { flex: 1; min-width: 0; }
.f-product-item-name { font-size: var(--f-text-sm); font-weight: 700; color: var(--f-gray-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-product-item-meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; }

/* === 16. ORDER CARD === */
.f-order-card {
  background: var(--f-glass-bg-strong);
  border: 1px solid var(--f-glass-border);
  border-radius: var(--f-radius-xl);
  overflow: hidden;
  transition: all var(--f-duration) var(--f-ease);
  box-shadow: var(--f-shadow-xs);
}
.f-order-card:hover { box-shadow: var(--f-shadow-sm); }
.f-order-header {
  padding: var(--f-space-4);
  border-bottom: 1px solid var(--f-gray-100);
}
.f-order-body { padding: var(--f-space-3) var(--f-space-4); }
.f-order-footer {
  padding: var(--f-space-3) var(--f-space-4);
  background: var(--f-green-50);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.f-order-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.f-order-row:last-child { margin-bottom: 0; }

/* === 17. SETTINGS === */
.f-settings-section {
  background: var(--f-glass-bg-strong);
  border: 1px solid var(--f-glass-border);
  border-radius: var(--f-radius-xl);
  overflow: hidden;
  margin-bottom: var(--f-space-4);
  box-shadow: var(--f-shadow-xs);
}
.f-settings-header {
  padding: var(--f-space-5);
  border-bottom: 1px solid var(--f-gray-100);
  display: flex;
  align-items: center;
  gap: var(--f-space-3);
}
.f-settings-header-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--f-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.f-settings-header-icon svg { width: 20px; height: 20px; }
.f-settings-header-text { flex: 1; }
.f-settings-header-title { font-size: var(--f-text-sm); font-weight: 800; color: var(--f-gray-900); }
.f-settings-header-desc { font-size: var(--f-text-xs); color: var(--f-gray-400); margin-top: 2px; }
.f-settings-body { padding: var(--f-space-5); }
.f-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--f-space-4) 0;
  border-bottom: 1px solid var(--f-gray-100);
}
.f-settings-row:last-child { border-bottom: none; padding-bottom: 0; }
.f-settings-row:first-child { padding-top: 0; }
.f-settings-row-info { flex: 1; min-width: 0; }
.f-settings-row-label { font-size: var(--f-text-sm); font-weight: 600; color: var(--f-gray-700); }
.f-settings-row-value { font-size: var(--f-text-xs); color: var(--f-gray-400); margin-top: 2px; direction: ltr; text-align: right; }

/* Connection Status Card */
.f-connection-card {
  background: var(--f-glass-bg-strong);
  border: 1px solid var(--f-glass-border);
  border-radius: var(--f-radius-xl);
  padding: var(--f-space-5);
  margin-bottom: var(--f-space-4);
  box-shadow: var(--f-shadow-xs);
}
.f-connection-status {
  display: flex;
  align-items: center;
  gap: var(--f-space-3);
  padding: var(--f-space-3) var(--f-space-4);
  border-radius: var(--f-radius-md);
  margin-bottom: var(--f-space-4);
}
.f-connection-status.active { background: var(--f-green-50); border: 1px solid var(--f-green-200); }
.f-connection-status.inactive { background: var(--f-amber-light); border: 1px solid #fde68a; }
.f-connection-status.off { background: var(--f-gray-100); border: 1px solid var(--f-gray-200); }
.f-connection-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.f-connection-dot.active { background: var(--f-green-500); box-shadow: 0 0 8px rgba(34, 197, 94, 0.4); }
.f-connection-dot.inactive { background: var(--f-amber); }
.f-connection-dot.off { background: var(--f-gray-400); }

/* Color Picker */
.f-color-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
  margin: 12px 0;
}
.f-color-dot {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--f-radius-sm);
  cursor: pointer;
  border: 3px solid transparent;
  transition: all var(--f-duration) var(--f-ease);
}
.f-color-dot:hover { transform: scale(1.15); }
.f-color-dot.active { border-color: var(--f-gray-900); box-shadow: 0 0 0 3px rgba(20, 83, 45, 0.15); }

/* === 18. MODAL === */
.f-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 200;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  transition: background var(--f-duration) var(--f-ease);
}
.f-modal-overlay.active { display: flex; }
.f-modal {
  background: white;
  border-radius: var(--f-radius-2xl) var(--f-radius-2xl) 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  overflow-y: auto;
  animation: modalSlideUp 0.4s var(--f-ease);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.12);
}
.f-modal-header {
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--f-gray-100);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  background: white;
  z-index: 1;
  border-radius: var(--f-radius-2xl) var(--f-radius-2xl) 0 0;
}
.f-modal-title { font-size: var(--f-text-base); font-weight: 800; color: var(--f-gray-900); }
.f-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--f-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--f-gray-400);
  font-size: 14px;
  transition: all var(--f-duration) var(--f-ease);
}
.f-modal-close:hover { background: var(--f-gray-200); color: var(--f-gray-600); }
.f-modal-body { padding: 20px; }
.f-modal-footer {
  padding: 12px 20px 20px;
  border-top: 1px solid var(--f-gray-100);
  position: sticky;
  bottom: 0;
  background: white;
}

/* === 19. TOAST — قرص مینیمال ورودی (دقیقاً مطابق رفرنس) ===
   تم روشن: بک مشکی / متن سفید — تم دارک: بک سفید / متن مشکی
   کاملاً باریک و ظریف، بدون ایموجی */
.f-toast {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%) translateY(-60px) scale(.95);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: min(85vw, 380px);
  padding: 5px 12px 5px 5px;
  background: #101828;
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 99999;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
  opacity: 0;
  transition: opacity .25s ease, transform .32s cubic-bezier(.22, 1, .36, 1);
}
.f-toast.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
.f-toast-ic {
  width: 20px; height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.f-toast-ic svg { width: 10px; height: 10px; display: block; stroke-width: 3; }
.f-toast-tx { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.f-toast.success .f-toast-ic { background: #22c55e; }
.f-toast.error   .f-toast-ic { background: #ef4444; }
.f-toast.info    .f-toast-ic { background: #3b82f6; }
/* تم تاریک: قرص سفید با متن تیره (مثل رفرنس) */
body.dark .f-toast {
  background: #ffffff;
  color: #111827;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
}
@media (max-width: 560px) {
  .f-toast { top: 10px; font-size: 11.5px; padding: 4px 11px 4px 4px; gap: 6px; }
  .f-toast-ic { width: 18px; height: 18px; }
  .f-toast-ic svg { width: 9px; height: 9px; }
}

/* === 20. SKELETON LOADING === */
.f-skeleton {
  background: linear-gradient(90deg, var(--f-gray-100) 25%, var(--f-gray-50) 50%, var(--f-gray-100) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--f-radius-md);
}
.f-skeleton-card {
  height: 120px;
  border-radius: var(--f-radius-xl);
  margin-bottom: 12px;
}
.f-skeleton-stat {
  height: 100px;
  border-radius: var(--f-radius-xl);
}
.f-skeleton-text { height: 14px; margin-bottom: 8px; border-radius: 6px; }
.f-skeleton-text.w-50 { width: 50%; }
.f-skeleton-text.w-75 { width: 75%; }
.f-skeleton-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

/* === 21. EMPTY STATE === */
.f-empty {
  text-align: center;
  padding: var(--f-space-12) var(--f-space-6);
}
.f-empty-icon {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--f-space-5);
}
.f-empty-icon svg { width: 36px; height: 36px; color: var(--f-green-300); }
.f-empty-title { font-size: var(--f-text-base); font-weight: 700; color: var(--f-gray-700); margin-bottom: 6px; }
.f-empty-desc { font-size: var(--f-text-sm); color: var(--f-gray-400); margin-bottom: var(--f-space-5); }

/* === 22. CHARTS (Pure CSS) === */
.f-chart-bar-wrap {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 120px;
  padding-top: 8px;
}
.f-chart-bar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
  justify-content: flex-end;
}
.f-chart-bar {
  width: 100%;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, var(--f-primary), var(--f-green-400));
  transition: height 0.6s var(--f-ease);
  min-height: 4px;
  position: relative;
}
.f-chart-bar:hover { opacity: 0.85; }
.f-chart-bar-label {
  font-size: 10px;
  color: var(--f-gray-400);
  font-weight: 500;
}

/* === 23. LOGIN === */
.f-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #0a1f12 0%, #0d3320 25%, #1a5c35 50%, #2d8a50 75%, #43b06a 100%);
  padding: 20px;
  position: relative;
  overflow: hidden;
}
.f-login::before {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(20, 184, 92, 0.15), transparent 70%);
  border-radius: 50%;
  top: -100px;
  right: -100px;
}
.f-login::after {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.08), transparent 70%);
  border-radius: 50%;
  bottom: -80px;
  left: -80px;
}
.f-login-card {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--f-radius-2xl);
  padding: 32px 24px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
  animation: modalScaleIn 0.5s var(--f-ease);
  position: relative;
  z-index: 1;
}
.f-login-logo {
  width: 120px;
  height: 120px;
  margin: 0 auto 16px;
}
.f-otp-box {
  width: 52px;
  height: 58px;
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  border: 2px solid var(--f-green-200);
  border-radius: var(--f-radius-md);
  font-family: inherit;
  background: var(--f-green-50);
  color: var(--f-gray-900);
  transition: all var(--f-duration) var(--f-ease);
  outline: none;
}
.f-otp-box:focus {
  border-color: var(--f-primary);
  background: white;
  box-shadow: 0 0 0 4px var(--f-primary-glow);
}

/* === 24. TOGGLE SWITCH === */
.f-toggle {
  overflow: hidden;
  position: relative;
  width: 52px;
  height: 28px;
  flex-shrink: 0;
}
.f-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.f-toggle-track {
  position: absolute;
  inset: 0;
  background: var(--f-gray-300);
  border-radius: 28px;
  cursor: pointer;
  transition: background var(--f-duration) var(--f-ease);
}
.f-toggle-track::before {
  content: '';
  position: absolute;
  height: 22px;
  width: 22px;
  right: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: transform var(--f-duration) var(--f-ease);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.f-toggle input:checked + .f-toggle-track { background: var(--f-primary); }
.f-toggle input:checked + .f-toggle-track::before { transform: translateX(-24px); }

/* === 25. AI INTELLIGENCE CARD === */
.f-ai-card {
  background: linear-gradient(135deg, rgba(20, 184, 92, 0.05), rgba(245, 158, 11, 0.05));
  border: 1px solid rgba(20, 184, 92, 0.15);
  border-radius: var(--f-radius-xl);
  padding: var(--f-space-5);
  position: relative;
  overflow: hidden;
  margin-bottom: var(--f-space-5);
}
.f-ai-card::before {
  content: '';
  position: absolute;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(20, 184, 92, 0.08), transparent);
  border-radius: 50%;
  top: -40px;
  right: -40px;
}
.f-ai-card-header {
  display: flex;
  align-items: center;
  gap: var(--f-space-2);
  margin-bottom: var(--f-space-3);
}
.f-ai-card-badge {
  padding: 4px 12px;
  border-radius: var(--f-radius-full);
  background: linear-gradient(135deg, #0f0c29, #1a1040, #24243e);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  position: relative;
  overflow: hidden;
  z-index: 1;
  text-shadow: 0 0 6px rgba(255,255,255,0.3);
  border: 1px solid rgba(255,215,0,0.25);
  box-shadow: 0 0 8px rgba(255,215,0,0.15), inset 0 0 6px rgba(255,255,255,0.05);
}
.f-ai-card-badge::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    radial-gradient(1.2px 1.2px at 8% 15%, rgba(255,215,0,0.95), transparent),
    radial-gradient(1px 1px at 22% 55%, rgba(255,255,255,0.9), transparent),
    radial-gradient(1.5px 1.5px at 38% 20%, rgba(255,200,50,0.85), transparent),
    radial-gradient(1px 1px at 52% 70%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1.3px 1.3px at 65% 35%, rgba(255,215,0,0.9), transparent),
    radial-gradient(1px 1px at 78% 80%, rgba(255,255,255,0.85), transparent),
    radial-gradient(1.2px 1.2px at 90% 25%, rgba(255,220,80,0.9), transparent),
    radial-gradient(1px 1px at 15% 85%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.4px 1.4px at 45% 45%, rgba(255,215,0,0.8), transparent),
    radial-gradient(1px 1px at 72% 12%, rgba(255,255,255,0.9), transparent),
    radial-gradient(1.1px 1.1px at 30% 65%, rgba(255,230,100,0.85), transparent),
    radial-gradient(1px 1px at 85% 55%, rgba(255,255,255,0.75), transparent);
  z-index: -1;
  animation: glitterSparkle 2.5s ease-in-out infinite alternate;
}
.f-ai-card-badge::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  animation: glitterSweep 3s ease-in-out infinite;
  z-index: -1;
}
@keyframes glitterSparkle {
  0% { opacity: 0.6; filter: brightness(0.9); }
  50% { opacity: 1; filter: brightness(1.4); }
  100% { opacity: 0.7; filter: brightness(1.1); }
}
@keyframes glitterSweep {
  0% { left: -100%; }
  100% { left: 200%; }
}
.f-ai-card-text {
  font-size: var(--f-text-sm);
  color: var(--f-gray-600);
  line-height: 1.7;
}
.f-ai-card-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--f-space-3);
  padding: 8px 16px;
  border-radius: var(--f-radius-md);
  background: white;
  border: 1px solid var(--f-green-200);
  color: var(--f-green-700);
  font-size: var(--f-text-xs);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--f-duration) var(--f-ease);
}
.f-ai-card-action:hover { background: var(--f-green-50); border-color: var(--f-green-300); }

/* === 26. IMAGE UPLOAD === */
.f-upload-area {
  border: 2px dashed var(--f-green-200);
  border-radius: var(--f-radius-xl);
  padding: var(--f-space-6);
  text-align: center;
  cursor: pointer;
  transition: all var(--f-duration) var(--f-ease);
  background: var(--f-green-50);
}
.f-upload-area:hover { border-color: var(--f-green-400); background: var(--f-green-100); }
.f-upload-area.has-image { padding: var(--f-space-3); border-style: solid; border-color: var(--f-green-300); }
.f-upload-area img { max-width: 120px; max-height: 120px; border-radius: var(--f-radius-md); object-fit: cover; margin: 0 auto; }

/* === 27. KEYFRAME ANIMATIONS === */
@keyframes modalSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@keyframes modalScaleIn {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes viewEnter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(20, 184, 92, 0.3); }
  50% { box-shadow: 0 0 0 8px rgba(20, 184, 92, 0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes countUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.f-view { display: none; animation: viewEnter 0.4s var(--f-ease); }
.f-view.active { display: block; }
.f-animate-in { animation: fadeIn 0.5s var(--f-ease); }
.f-float { animation: float 3s ease-in-out infinite; }

/* === 28. GRID LAYOUTS === */
.f-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.f-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.f-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.f-grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.f-flex { display: flex; }
.f-flex-col { flex-direction: column; }
.f-items-center { align-items: center; }
.f-justify-between { justify-content: space-between; }
.f-gap-1 { gap: var(--f-space-1); }
.f-gap-2 { gap: var(--f-space-2); }
.f-gap-3 { gap: var(--f-space-3); }
.f-gap-4 { gap: var(--f-space-4); }
.f-gap-5 { gap: var(--f-space-5); }
.f-mb-2 { margin-bottom: var(--f-space-2); }
.f-mb-3 { margin-bottom: var(--f-space-3); }
.f-mb-4 { margin-bottom: var(--f-space-4); }
.f-mb-5 { margin-bottom: var(--f-space-5); }
.f-mb-6 { margin-bottom: var(--f-space-6); }
.f-mt-3 { margin-top: var(--f-space-3); }
.f-mt-4 { margin-top: var(--f-space-4); }
.f-pt-4 { padding-top: var(--f-space-4); }
.f-pb-4 { padding-bottom: var(--f-space-4); }
.f-hidden { display: none !important; }
.f-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-text-center { text-align: center; }
.f-relative { position: relative; }
.f-w-full { width: 100%; }


/* === FANOUS COLOR PICKER === */
.fcp-overlay{position:fixed;inset:0;background:rgba(0,0,0,0);z-index:500;display:none;align-items:flex-end;justify-content:center;padding:0;transition:background .25s ease}
.fcp-overlay.active{display:flex;background:rgba(0,0,0,.45)}
.fcp-sheet{background:#fff;border-radius:24px 24px 0 0;width:100%;max-width:520px;max-height:90vh;overflow-y:auto;transform:translateY(100%);transition:transform .3s cubic-bezier(.16,1,.3,1);box-shadow:0 -10px 40px rgba(0,0,0,.15);direction:rtl}
.fcp-overlay.active .fcp-sheet{transform:translateY(0)}
@media(min-width:520px){.fcp-overlay{align-items:center;padding:16px}.fcp-sheet{border-radius:24px;max-height:min(800px,90vh)}}

/* === Custom Icon Images === */
.f-stat-icon img,.f-action-icon img,.f-settings-header-icon img{width:100%!important;height:100%!important;object-fit:contain!important;transform:scale(1.45);transform-origin:center}

body.dark .fcp-sheet{background:#162419;border:1px solid #1e3a24;color:#d1fae5}
.fcp-header{padding:18px 20px 14px;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:center}
body.dark .fcp-header{border-color:#1e3a24}
.fcp-body{padding:18px 20px}
.fcp-tabs{display:flex;gap:6px;margin-bottom:14px;background:#f0fdf4;border-radius:12px;padding:4px}
body.dark .fcp-tabs{background:#0f1a12}
.fcp-tab{flex:1;padding:8px 6px;border-radius:10px;border:none;background:transparent;color:#6b7280;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s}
.fcp-tab.active{background:#fff;color:#16a34a;box-shadow:0 2px 8px rgba(22,163,74,.12)}
body.dark .fcp-tab{color:#6ee7b7}
body.dark .fcp-tab.active{background:#1a2e1f;color:#22c55e}
.fcp-palette{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:14px}
.fcp-palette-dot{width:100%;aspect-ratio:1;border-radius:12px;cursor:pointer;border:3px solid transparent;transition:all .15s}
.fcp-palette-dot:hover{transform:scale(1.1)}
.fcp-palette-dot.active{box-shadow:0 0 0 3px rgba(22,163,74,.2);border-color:#14532d}
body.dark .fcp-palette-dot.active{border-color:#d1fae5}
.fcp-wheel-wrap{position:relative;margin:0 auto 18px;width:min(100%,280px);aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.08);touch-action:none;border:4px solid rgba(255,255,255,.6)}
body.dark .fcp-wheel-wrap{border-color:rgba(30,58,36,.6)}
.fcp-wheel-canvas{display:block;width:100%;height:100%;border-radius:50%;cursor:crosshair}
.fcp-thumb{position:absolute;width:18px;height:18px;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.35);pointer-events:none;transform:translate(-50%,-50%);transition:transform .05s}
.fcp-brightness{height:20px;border-radius:10px;margin-bottom:18px;position:relative;cursor:pointer;border:2px solid rgba(0,0,0,.06);box-shadow:inset 0 1px 3px rgba(0,0,0,.05);touch-action:none}
.fcp-brightness-thumb{position:absolute;top:50%;width:20px;height:26px;background:#fff;border:2px solid rgba(0,0,0,.1);border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,.2);transform:translate(-50%,-50%);pointer-events:none}
.fcp-input-row{display:flex;gap:10px;align-items:center;margin-bottom:14px}
.fcp-input-row label{font-size:12px;font-weight:600;color:#6b7280;min-width:26px}
body.dark .fcp-input-row label{color:#6ee7b7}
.fcp-input-row input{flex:1;padding:10px 12px;border-radius:12px;background:#f0fdf4;border:2px solid transparent;font-family:'Vazirmatn',monospace;font-size:14px;outline:none;transition:all .2s;text-transform:uppercase}
body.dark .fcp-input-row input{background:#0f1a12;color:#d1fae5;border-color:#1e3a24}
.fcp-input-row input:focus{border-color:#16a34a;background:#fff}
body.dark .fcp-input-row input:focus{background:#162419}
.fcp-preview-row{display:flex;gap:12px;align-items:center;margin-bottom:14px;padding:12px;border-radius:16px;background:#f8faf9;border:1px solid #e5e7eb}
body.dark .fcp-preview-row{background:#0f1a12;border-color:#1e3a24}
.fcp-preview-swatch{width:40px;height:40px;border-radius:12px;border:2px solid rgba(0,0,0,.06)}
.fcp-preview-text{flex:1}
.fcp-preview-name{font-size:13px;font-weight:700}
.fcp-preview-contrast{font-size:11px;color:#6b7280;margin-top:2px}
body.dark .fcp-preview-contrast{color:#6ee7b7}
.fcp-suggest-title{font-size:12px;font-weight:700;color:#6b7280;margin-bottom:8px;margin-top:4px}
body.dark .fcp-suggest-title{color:#6ee7b7}
.fcp-suggest-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.fcp-suggest-chip{display:flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:50px;background:#f0fdf4;border:1px solid #e5e7eb;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;direction:ltr}
body.dark .fcp-suggest-chip{background:#0f1a12;border-color:#1e3a24;color:#d1fae5}
.fcp-suggest-chip:hover{transform:translateY(-1px)}
.fcp-swatch-mini{width:20px;height:20px;border-radius:50%;border:2px solid #fff}
body.dark .fcp-swatch-mini{border-color:#1a2e1f}
.fcp-footer{padding:12px 20px 18px;border-top:1px solid #e5e7eb;display:flex;gap:10px}
body.dark .fcp-footer{border-color:#1e3a24}
.fcp-btn{flex:1;padding:11px 0;border-radius:14px;border:none;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:all .2s}
.fcp-btn-secondary{background:#f0fdf4;color:#16a34a}
body.dark .fcp-btn-secondary{background:#0f1a12;color:#4ade80}
.fcp-btn-primary{background:linear-gradient(135deg,#16a34a,#15803d);color:#fff}
.fcp-btn:active{transform:scale(.98)}
.fcp-palette-dot:focus-visible,.color-dot:focus-visible,.fcp-suggest-chip:focus-visible{outline:3px solid #16a34a;outline-offset:2px}
.fcp-tab:focus-visible{outline:2px solid #16a34a;outline-offset:1px}
.fcp-btn:focus-visible{outline:2px solid #16a34a;outline-offset:2px}


/* === SETTINGS ACCORDION === */
.f-settings-section .f-settings-body { display: none; padding: 0 var(--f-space-5); max-height: 0; overflow: hidden; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.f-settings-section.open .f-settings-body { display: block; padding: var(--f-space-5); max-height: 2000px; }
.f-settings-header { cursor: pointer; user-select: none; transition: background 0.2s; }
.f-settings-header:hover { background: rgba(0,0,0,0.02); }
body.dark .f-settings-header:hover { background: rgba(255,255,255,0.03); }
.f-settings-arrow { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); flex-shrink: 0; }
.f-settings-section.open .f-settings-arrow { transform: rotate(180deg); }

/* === 29. DARK MODE (OLED / SaaS Premium) === */
:root {
  --dark-base: #1A1C23;
  --dark-card: #22252E;
  --dark-card-border: #2F3340;
  --dark-card-glass: rgba(34, 37, 46, 0.9);
  --dark-text: #F1F5F9;
  --dark-text-sub: #94A3B8;
  --dark-text-muted: #64748B;
  --dark-accent-teal: #2DD4BF;
  --dark-accent-blue: #3B82F6;
  --dark-accent-purple: #8B5CF6;
  --dark-accent-amber: #F59E0B;
  --dark-accent-pink: #EC4899;
  --dark-accent-green: #10B981;
  --dark-surface: #111620;
  --dark-input: #0F1219;
  --dark-border: #1E293B;
  --dark-hover: rgba(255, 255, 255, 0.04);
}

body.dark {
  background: var(--dark-base) !important;
  color: var(--dark-text) !important;
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

/* Cards */
body.dark .glass-card,
body.dark .glass-card-static {
  background: var(--dark-card-glass) !important;
  backdrop-filter: blur(24px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
  border-color: var(--dark-card-border) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

body.dark .f-stat-card {
  background: var(--dark-card-glass) !important;
  border-color: var(--dark-card-border) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}
body.dark .f-stat-card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
}

/* Stat icon colors in dark mode - بدون بک‌گراند */
body.dark .f-stat-icon.green { background: transparent !important; color: #34D399 !important; }
body.dark .f-stat-icon.amber { background: transparent !important; color: #FBBF24 !important; }
body.dark .f-stat-icon.blue { background: transparent !important; color: #60A5FA !important; }
body.dark .f-stat-icon.red { background: transparent !important; color: #F87171 !important; }
body.dark .f-stat-icon.purple { background: transparent !important; color: #A78BFA !important; }
body.dark .f-stat-icon.emerald { background: transparent !important; color: #2DD4BF !important; }

body.dark .f-action-card {
  background: var(--dark-card-glass) !important;
  border-color: var(--dark-card-border) !important;
}
body.dark .f-action-card:hover {
  border-color: rgba(45, 212, 191, 0.2) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

body.dark .f-order-card {
  background: var(--dark-card-glass) !important;
  border-color: var(--dark-card-border) !important;
}
body.dark .f-order-header { border-color: var(--dark-border) !important; }

body.dark .f-settings-section {
  background: var(--dark-card-glass) !important;
  border-color: var(--dark-card-border) !important;
}
body.dark .f-settings-header { border-color: var(--dark-border) !important; }
body.dark .f-settings-header:hover { background: var(--dark-hover) !important; }
body.dark .f-settings-row { border-color: rgba(30, 41, 59, 0.5) !important; }

body.dark .f-connection-card {
  background: var(--dark-card-glass) !important;
  border-color: var(--dark-card-border) !important;
}
body.dark .f-connection-status.active { background: rgba(16, 185, 129, 0.08) !important; border-color: rgba(16, 185, 129, 0.2) !important; }
body.dark .f-connection-status.inactive { background: rgba(245, 158, 11, 0.08) !important; border-color: rgba(245, 158, 11, 0.2) !important; }
body.dark .f-connection-status.off { background: rgba(100, 116, 139, 0.08) !important; border-color: rgba(100, 116, 139, 0.2) !important; }

body.dark .f-product-card {
  background: var(--dark-card-glass) !important;
  border-color: var(--dark-card-border) !important;
}
body.dark .f-product-item {
  background: var(--dark-card-glass) !important;
  border-color: var(--dark-card-border) !important;
}

/* AI Card */
body.dark .f-ai-card {
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.06), rgba(59, 130, 246, 0.04)) !important;
  border-color: rgba(45, 212, 191, 0.15) !important;
}

/* Hero overlay */
body.dark .f-hero-overlay {
  background: linear-gradient(135deg, rgba(11, 14, 20, 0.3), rgba(11, 14, 20, 0.2)) !important;
}

/* Text colors */
body.dark .f-stat-value,
body.dark .f-product-name,
body.dark .f-product-price,
body.dark .f-section-title,
body.dark .f-modal-title,
body.dark .f-settings-header-title,
body.dark .f-settings-row-label,
body.dark .f-action-title,
body.dark .f-empty-title { color: var(--dark-text) !important; }

body.dark .f-stat-label,
body.dark .f-product-item-meta span,
body.dark .f-settings-row-value,
body.dark .f-action-desc,
body.dark .f-empty-desc { color: var(--dark-text-sub) !important; }

/* Inputs */
body.dark .f-input,
body.dark .f-textarea {
  background: var(--dark-input) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}
body.dark .f-input:focus,
body.dark .f-textarea:focus {
  background: var(--dark-surface) !important;
  border-color: var(--dark-accent-teal) !important;
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.1) !important;
}

/* Search */
body.dark .f-search { background: var(--dark-input) !important; border-color: var(--dark-border) !important; }
body.dark .f-search:focus-within { background: var(--dark-surface) !important; border-color: var(--dark-accent-teal) !important; }
body.dark .f-search input { color: var(--dark-text) !important; }
body.dark .f-search i { color: var(--dark-accent-teal) !important; }

/* Chips */
body.dark .f-chip {
  background: var(--dark-input) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text-sub) !important;
}
body.dark .f-chip.active {
  background: linear-gradient(135deg, #0EA5E9, #10B981) !important;
  color: white !important;
  border-color: transparent !important;
}

/* Badges */
body.dark .f-badge-green { background: rgba(16, 185, 129, 0.12) !important; color: #34D399 !important; }
body.dark .f-badge-red { background: rgba(239, 68, 68, 0.12) !important; color: #F87171 !important; }
body.dark .f-badge-amber { background: rgba(245, 158, 11, 0.12) !important; color: #FBBF24 !important; }
body.dark .f-badge-blue { background: rgba(59, 130, 246, 0.12) !important; color: #60A5FA !important; }
body.dark .f-badge-gray { background: rgba(100, 116, 139, 0.12) !important; color: var(--dark-text-sub) !important; }

/* Order footer */
body.dark .f-order-footer { background: rgba(45, 212, 191, 0.05) !important; }

/* Modal */
body.dark .f-modal { background: var(--dark-card) !important; }
body.dark .f-modal-header { background: var(--dark-card) !important; border-color: var(--dark-border) !important; }
body.dark .f-modal-footer { background: var(--dark-card) !important; border-color: var(--dark-border) !important; }
body.dark .f-modal-close { background: rgba(100, 116, 139, 0.15) !important; color: var(--dark-text-sub) !important; }

/* Upload area */
body.dark .f-upload-area { background: var(--dark-input) !important; border-color: var(--dark-border) !important; }

/* Login */
body.dark .f-login-card { background: rgba(20, 24, 32, 0.95) !important; }
body.dark .f-otp-box { background: var(--dark-input) !important; color: var(--dark-text) !important; border-color: var(--dark-border) !important; }

/* Bottom nav */
body.dark .f-bottom-nav {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(26, 28, 35, 0.6) 20%,
    rgba(26, 28, 35, 0.88) 45%,
    rgba(26, 28, 35, 0.96) 65%,
    #1A1C23 100%
  ) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
}
body.dark .f-bottom-nav-inner {
  background: rgba(11, 14, 20, 0.92) !important;
  border-color: var(--dark-card-border) !important;
  backdrop-filter: blur(24px) !important;
}

/* Sidebar */
body.dark .f-sidebar {
  background: rgba(11, 14, 20, 0.95) !important;
  border-color: var(--dark-card-border) !important;
}
body.dark .f-sidebar-item { color: var(--dark-text-sub) !important; }
body.dark .f-sidebar-item:hover { background: var(--dark-hover) !important; color: var(--dark-text) !important; }
body.dark .f-sidebar-item.active {
  background: rgba(45, 212, 191, 0.08) !important;
  color: var(--dark-accent-teal) !important;
}
body.dark .f-sidebar-item.active::before { background: linear-gradient(180deg, #0EA5E9, #10B981) !important; }
body.dark .f-sidebar-profile-name { color: var(--dark-text) !important; }
body.dark .f-sidebar-profile-user { color: var(--dark-text-sub) !important; }
body.dark .f-sidebar-footer { border-color: var(--dark-border) !important; }

/* Color dots */
body.dark .f-color-dot.active { border-color: var(--dark-text) !important; }

/* FAB */
body.dark .f-fab { box-shadow: 0 8px 28px rgba(16, 185, 129, 0.2) !important; }
body.dark #globalFab { box-shadow: 0 8px 28px rgba(16, 185, 129, 0.35) !important; }

/* Hero CTA */
body.dark .f-hero-cta {
  background: rgba(255, 255, 255, 0.1) !important;
  color: white !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Buttons */
body.dark .f-btn-secondary {
  background: var(--dark-card-glass) !important;
  border-color: var(--dark-card-border) !important;
  color: var(--dark-accent-teal) !important;
}
body.dark .f-btn-secondary:hover { background: rgba(45, 212, 191, 0.08) !important; }

/* Skeleton */
body.dark .f-skeleton {
  background: linear-gradient(90deg, rgba(20, 24, 32, 0.6), rgba(30, 41, 59, 0.4), rgba(20, 24, 32, 0.6)) !important;
}

/* Chart */
body.dark .f-chart-bar { background: linear-gradient(180deg, #2DD4BF, #10B981) !important; }
body.dark .f-chart-bar-label { color: var(--dark-text-sub) !important; }

/* AI Card action */
body.dark .f-ai-card-action {
  background: var(--dark-card) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-accent-teal) !important;
}

/* Input labels */
body.dark .f-input-group label { color: var(--dark-text-sub) !important; }

/* Wallet */

/* Settings header icons */

/* === آیکون فاکتورساز - بزرگ‌تر === */
.f-icon-factor {
  width: 56px !important;
  height: 56px !important;
}
.f-icon-factor img {
  width: 100% !important;
  height: 100% !important;
  transform: scale(1.6) !important;
}
body.dark .f-icon-factor {
  width: 56px !important;
  height: 56px !important;
}
body.dark .f-icon-factor img {
  width: 100% !important;
  height: 100% !important;
  transform: scale(1.6) !important;
}

/* === تنظیمات اعلان‌ها - بدون بک‌گراند، آیکون بزرگ‌تر === */
.f-notif-settings .f-settings-header-icon {
  background: transparent !important;
  width: 62px !important;
  height: 62px !important;
}
.f-notif-settings .f-settings-header-icon img {
  width: 100% !important;
  height: 100% !important;
  transform: scale(1.7) !important;
}
body.dark .f-notif-settings .f-settings-header-icon {
  background: transparent !important;
  width: 62px !important;
  height: 62px !important;
}
body.dark .f-notif-settings .f-settings-header-icon img {
  width: 100% !important;
  height: 100% !important;
  transform: scale(1.7) !important;
}

/* Toggle */
body.dark .f-toggle-track { background: var(--dark-border) !important; }
body.dark .f-toggle input:checked + .f-toggle-track { background: var(--dark-accent-teal) !important; }

/* Scrollbar */
body.dark ::-webkit-scrollbar-thumb { background: rgba(45, 212, 191, 0.3); }
body.dark ::-webkit-scrollbar-thumb:hover { background: rgba(45, 212, 191, 0.5); }


/* === COMPREHENSIVE DARK TEXT FIX === */
body.dark p,
body.dark span,
body.dark div,
body.dark label,
body.dark td,
body.dark th,
body.dark h1, body.dark h2, body.dark h3, body.dark h4, body.dark h5, body.dark h6 {
  color: inherit;
}

/* Store name in settings card */
body.dark #settingsStoreName { color: var(--dark-text) !important; }
body.dark #settingsStoreUser { color: var(--dark-text-sub) !important; }
body.dark #settingsStoreAvatar { color: white !important; }

/* Sidebar profile */
body.dark .f-sidebar-profile-name { color: var(--dark-text) !important; }
body.dark .f-sidebar-profile-user { color: var(--dark-text-sub) !important; }

/* Header */
body.dark [style*="font-size:16px"][style*="font-weight:900"] { color: white !important; }
body.dark [style*="font-size:12px"][style*="font-weight:700"] { color: rgba(255,255,255,0.7) !important; }

/* All card text */
body.dark .glass-card-static p,
body.dark .f-settings-section p,
body.dark .f-order-card p,
body.dark .f-product-item p,
body.dark .f-action-card p,
body.dark .f-stat-card p { color: var(--dark-text) !important; }

/* Settings section titles and descriptions */
body.dark .f-settings-header-title { color: var(--dark-text) !important; }
body.dark .f-settings-header-desc { color: var(--dark-text-sub) !important; }

/* Input labels */
body.dark .f-input-group label { color: var(--dark-text-sub) !important; }

/* All generic text colors */
body.dark .text-gray-900,
body.dark .text-gray-800,
body.dark [class*="text-gray-9"],
body.dark [class*="text-gray-8"] { color: var(--dark-text) !important; }

body.dark .text-gray-500,
body.dark .text-gray-400,
body.dark .text-gray-600,
body.dark [class*="text-gray-4"],
body.dark [class*="text-gray-5"],
body.dark [class*="text-gray-6"] { color: var(--dark-text-sub) !important; }

/* Store link button */
body.dark a[href*="/"][target="_blank"] { color: var(--dark-accent-teal) !important; }

/* Arrow icons */
body.dark .f-settings-arrow { color: var(--dark-text-sub) !important; }

/* Modal */
body.dark .f-modal-title { color: var(--dark-text) !important; }
body.dark .f-modal-close { color: var(--dark-text-sub) !important; background: rgba(100,116,139,0.15) !important; }

/* Connection status text */
body.dark .f-connection-status span { color: var(--dark-text) !important; }

/* Button text in dark */
body.dark .f-btn-primary { color: white !important; }
body.dark .f-btn-secondary { color: var(--dark-accent-teal) !important; }
body.dark .f-btn-ghost { color: var(--dark-text-sub) !important; }
body.dark .f-btn-ghost:hover { color: var(--dark-text) !important; background: rgba(255,255,255,0.05) !important; }

/* Logout link */
body.dark a[style*="color:var(--f-red)"] { color: #F87171 !important; }


/* Divider */
body.dark .f-divider { background: var(--dark-border) !important; }

/* Toast — حالت تاریک در بلوک اصلی (.f-toast) تعریف شده است */

/* Overlay (modals, sidebar) */
body.dark .f-sidebar-overlay { background: rgba(0, 0, 0, 0.6) !important; }
body.dark .f-modal-overlay { background: rgba(0, 0, 0, 0.6) !important; }

/* Color picker */
body.dark .fcp-sheet { background: var(--dark-card) !important; border-color: var(--dark-border) !important; }
body.dark .fcp-header { border-color: var(--dark-border) !important; }
body.dark .fcp-tabs { background: var(--dark-input) !important; }
body.dark .fcp-tab.active { background: var(--dark-card) !important; color: var(--dark-accent-teal) !important; }
body.dark .fcp-input-row input { background: var(--dark-input) !important; color: var(--dark-text) !important; border-color: var(--dark-border) !important; }
body.dark .fcp-preview-row { background: var(--dark-input) !important; border-color: var(--dark-border) !important; }
body.dark .fcp-suggest-chip { background: var(--dark-input) !important; border-color: var(--dark-border) !important; color: var(--dark-text) !important; }
body.dark .fcp-footer { border-color: var(--dark-border) !important; }
body.dark .fcp-btn-secondary { background: var(--dark-input) !important; color: var(--dark-accent-teal) !important; }

/* === MOBILE RESPONSIVE FIXES === */
@media (max-width: 767px) {
  .f-header-right { display: none !important; }
  .f-stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .f-quick-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .f-chart-grid { grid-template-columns: 1fr !important; }
  .f-hero { min-height: 220px !important; aspect-ratio: 2 / 1 !important; max-width: 100% !important; }
  .f-hero-title { font-size: 1.125rem !important; }
  .f-hero-subtitle { font-size: 0.8125rem !important; }
  .f-hero-content { padding: 16px !important; }
  .f-hero-cta { padding: 10px 20px !important; font-size: 12px !important; }
  .f-ai-card-text { font-size: 13px !important; }
  .f-ai-card { padding: 16px !important; max-width: 100% !important; overflow: hidden !important; }
  .f-section-title { font-size: 14px !important; }
  .f-fab { bottom: 96px !important; left: 16px !important; width: 50px !important; height: 50px !important; }
  .glass-card-static { overflow: hidden !important; }
  .f-settings-section { overflow: hidden !important; }
  .f-order-card { overflow: hidden !important; }
  .f-product-item { overflow: hidden !important; }
  .f-action-card { overflow: hidden !important; }
  .f-stat-card { overflow: hidden !important; }
}




/* === LOGIN DARK MODE FIX === */
body.dark .f-login { background: linear-gradient(160deg, #0B0E14 0%, #1A1C23 50%, #0B0E14 100%) !important; }
body.dark .f-login-card { background: rgba(26, 28, 35, 0.95) !important; border: 1px solid #2F3340 !important; }
body.dark .f-login-card h1 { color: white !important; }
body.dark .f-login-card p { color: var(--dark-text-sub) !important; }
body.dark .f-login-card h2 { color: var(--dark-text) !important; }
body.dark .f-login-card .text-gray-900 { color: var(--dark-text) !important; }
body.dark .f-login-card .text-gray-400 { color: var(--dark-text-sub) !important; }
body.dark .f-login h1,
body.dark .f-login .f-login-title,
body.dark .f-login-card h1 { color: white !important; }
body.dark .f-login p { color: var(--dark-text-sub) !important; }



/* === DESKTOP LAYOUT FIX (Podro-like) === */
@media (min-width: 1024px) {
  body {
    background: var(--f-gray-100) !important;
  }
  body.dark {
    background: #111318 !important;
  }
  .f-sidebar { transform: translateX(0); }
  .f-sidebar-overlay { display: none !important; }
  .f-menu-btn { display: none !important; }
  .f-bottom-nav { display: none; }
  .f-main { margin-right: var(--f-sidebar-width); }
  .f-content {
    padding: 0 4px !important;
    padding-bottom: var(--f-space-8) !important;
    overflow-x: hidden !important;
    max-width: none !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .f-fab { bottom: 32px; left: 32px; }
  .f-hero { overflow: hidden; max-height: 360px; }
  .f-settings-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .f-settings-grid .f-settings-section { margin-bottom: 0; }
}



/* === 30. RESPONSIVE === */
@media (min-width: 768px) {
  .f-content { padding: 0 var(--f-space-8); padding-bottom: var(--f-space-8); }
  .f-hero { aspect-ratio: 3 / 1; min-height: 280px; }
  .f-hero-title { font-size: var(--f-text-3xl); }
  .f-modal { border-radius: var(--f-radius-2xl); max-width: 480px; margin: auto; }
  .f-modal-overlay { align-items: center; padding: 20px; }
  .f-modal-header { border-radius: var(--f-radius-2xl) var(--f-radius-2xl) 0 0; }
  .f-grid-2 { gap: 16px; }
}



@media (min-width: 1280px) {
  .f-content { padding-left: calc(var(--f-sidebar-width) + var(--f-space-10)); padding-right: var(--f-space-10); }
  .f-hero { min-height: 360px; }
}

/* === 31. ACCESSIBILITY === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
.f-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
:focus-visible {
  outline: 2px solid var(--f-primary);
  outline-offset: 2px;
}

/* === 32. MISC UTILITIES === */
.f-divider { height: 1px; background: var(--f-gray-100); margin: var(--f-space-4) 0; }
.f-gradient-text {
  background: linear-gradient(135deg, var(--f-green-600), var(--f-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.f-glow { box-shadow: 0 0 20px rgba(20, 184, 92, 0.15); }
.f-blur-backdrop { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.f-overflow-hidden { overflow: hidden; }
.f-wallet-balance {
  background: url('/wallet1.webp') center/cover no-repeat;
  border-radius: var(--f-radius-2xl);
  padding: var(--f-space-8) var(--f-space-5);
  text-align: center;
  color: white;
  position: relative;
  overflow: hidden;
  margin-bottom: var(--f-space-6);
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.f-wallet-balance::before {
  content: '';
  position: absolute;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent);
  border-radius: 50%;
  top: -60px;
  right: -30px;
}
.f-wallet-balance::after {
  content: '';
  position: absolute;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.06), transparent);
  border-radius: 50%;
  bottom: -40px;
  left: -20px;
}

/* Desktop: ارتفاع بیشتر تا تصویر کمتر بریده بشه */
@media (min-width: 768px) {
  .f-wallet-balance {
    min-height: 260px;
  }
}
@keyframes slideDown { from { transform: translateX(-50%) translateY(-20px); opacity: 0; } to { transform: translateX(-50%) translateY(0); opacity: 1; } }

/* ========================================
   GLOBAL FAB - Fixed Position (outside views)
   ======================================== */
#globalFab {
  position: fixed;
  bottom: calc(var(--f-bottom-nav-height) + 20px);
  left: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--f-primary), var(--f-primary-hover));
  color: white;
  border: none;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 28px rgba(20, 184, 92, 0.35);
  z-index: 80;
  cursor: pointer;
  transition: all var(--f-duration) var(--f-ease);
}
#globalFab:hover { transform: scale(1.08); box-shadow: 0 12px 36px rgba(20, 184, 92, 0.4); }
#globalFab:active { transform: scale(0.95); }

/* ========================================
   PAGE LOADER - Professional Green Loading
   ======================================== */
.f-page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #f0faf4;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  opacity: 1;
  visibility: visible;
}
.f-page-loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.f-page-loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.f-page-loader-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(20, 184, 92, 0.15);
  border-top-color: #14b85c;
  border-radius: 50%;
  animation: loaderSpin 0.8s linear infinite;
}
@keyframes loaderSpin {
  to { transform: rotate(360deg); }
}
.f-page-loader-text {
  font-size: 18px;
  font-weight: 800;
  background: linear-gradient(135deg, #14532d, #16a34a, #22c55e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: loaderPulse 1.5s ease-in-out infinite;
}
@keyframes loaderPulse {
  0%, 100% { opacity: 0.6; transform: scale(0.98); }
  50% { opacity: 1; transform: scale(1); }
}

/* View transition loading overlay (smaller, faster) */
.f-view-loader {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: #f0faf4;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  pointer-events: none;
}
.f-view-loader.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.f-view-loader-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(20, 184, 92, 0.15);
  border-top-color: #14b85c;
  border-radius: 50%;
  animation: loaderSpin 0.7s linear infinite;
}

/* Dark mode loader */
body.dark .f-page-loader { background: #0a0c10; }
body.dark .f-page-loader-spinner { border-color: rgba(16, 185, 129, 0.15); border-top-color: #10b981; }
body.dark .f-page-loader-text { background: linear-gradient(135deg, #10b981, #34d399); -webkit-background-clip: text; background-clip: text; }
body.dark .f-view-loader { background: #0a0c10; }
body.dark .f-view-loader-spinner { border-color: rgba(16, 185, 129, 0.15); border-top-color: #10b981; }

/* Mobile responsive */
@media (max-width: 767px) {
  #globalFab { bottom: 100px !important; left: 16px !important; width: 50px !important; height: 50px !important; }
}
@media (min-width: 1024px) {
  #globalFab { bottom: 32px; left: 32px; }
}

/* Override old .f-fab styles to not affect global FAB */
.f-fab:not(#globalFab) { display: none !important; }

/* ========================================
   SUBSCRIPTION CARDS - Enhanced Styles
   ======================================== */
.f-sub-header {
  border-radius: 20px !important;
  transition: transform var(--f-duration) var(--f-ease);
}
.f-sub-header:active { transform: scale(0.98); }
#subscriptionPlans {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.f-sub-plan-card {
  transition: transform var(--f-duration) var(--f-ease), box-shadow var(--f-duration) var(--f-ease);
  min-height: 200px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.f-sub-plan-card:active { transform: scale(0.98); }
.f-sub-plan-card .f-btn-primary {
  background: linear-gradient(135deg, var(--f-primary), var(--f-primary-hover)) !important;
  color: white !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(20, 184, 92, 0.3);
}
.f-sub-plan-card .f-btn-primary:disabled {
  background: rgba(255,255,255,0.2) !important;
  box-shadow: none !important;
}
@media (min-width: 1024px) {
  #subscriptionPlans { grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; }
  .f-sub-plan-card { min-height: 380px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  #subscriptionPlans { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 767px) {
  .f-sub-header { padding: 24px 20px !important; }
}
/* ================================================================
   FANUS UI/UX UPGRADE PATCH — بخش اصلاحات حرفه‌ای
   ================================================================ */

/* === DARK MODE: Icon Backdrop System === */
/* داشبورد: 8 آیکون کارت آمار + دسترسی سریع - بدون بک‌گراند */
body.dark .f-stat-icon,
body.dark .f-action-card .f-action-icon {
  background: transparent !important;
}



/* تنظیمات: آیکون‌های WebP - بدون بک‌گراند */
body.dark .f-settings-header-icon {
  background: transparent !important;
}

/* === DARK MODE: Improve icon image visibility specifically === */
body.dark .f-stat-icon img,
body.dark .f-action-icon img,
body.dark .f-settings-header-icon img {
  filter: none !important;
  transform: scale(1.45) !important;
}

/* === SEARCH BAR ENHANCEMENT === */
.f-search {
  background: #FFFFFF !important;
  border: 1.5px solid var(--f-gray-200) !important;
  border-radius: var(--f-radius-lg) !important;
  padding: 14px 18px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
  transition: all var(--f-duration) var(--f-ease) !important;
}
.f-search:focus-within {
  border-color: var(--f-primary) !important;
  box-shadow: 0 0 0 3px var(--f-primary-glow), 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  background: #FFFFFF !important;
}
.f-search svg, .f-search i {
  color: var(--f-gray-500) !important;
  width: 20px !important;
  height: 20px !important;
}
.f-search input::placeholder {
  color: var(--f-gray-400) !important;
  font-weight: 500 !important;
}

/* Dark mode search */
body.dark .f-search {
  background: var(--dark-input) !important;
  border-color: var(--dark-border) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
}
body.dark .f-search:focus-within {
  border-color: var(--dark-accent-teal) !important;
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.15), 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}
body.dark .f-search input::placeholder {
  color: var(--dark-text-muted) !important;
}
body.dark .f-search svg,
body.dark .f-search i {
  color: var(--dark-accent-teal) !important;
}

/* === BOTTOM NAVIGATION SAFE AREA FIX === */
.f-bottom-nav {
  padding-bottom: max(8px, env(safe-area-inset-bottom, 8px)) !important;
}
.f-bottom-nav-inner {
  padding: 8px 10px !important;
  margin-bottom: 4px !important;
}
.f-nav-item {
  padding: 8px 12px !important;
}
.f-nav-item.active::before {
  top: 4px !important;
  width: 20px !important;
  height: 3px !important;
}

/* === CUSTOMER DETAIL BOTTOM SHEET === */
.f-customer-sheet-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 250;
  align-items: flex-end;
  justify-content: center;
  transition: background var(--f-duration) var(--f-ease);
}
.f-customer-sheet-overlay.active {
  display: flex;
}
.f-customer-sheet {
  background: white;
  border-radius: var(--f-radius-2xl) var(--f-radius-2xl) 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  overflow-y: auto;
  animation: modalSlideUp 0.4s var(--f-ease);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.12);
}
body.dark .f-customer-sheet {
  background: var(--dark-card) !important;
  border: 1px solid var(--dark-border);
}

/* Customer sheet header */
.f-cs-header {
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--f-gray-100);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  background: white;
  z-index: 1;
  border-radius: var(--f-radius-2xl) var(--f-radius-2xl) 0 0;
}
body.dark .f-cs-header {
  background: var(--dark-card);
  border-color: var(--dark-border);
}
.f-cs-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #059669, #047857);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 900;
  font-size: 20px;
  flex-shrink: 0;
}
.f-cs-name {
  font-size: 17px;
  font-weight: 800;
  color: var(--f-gray-900);
  margin-bottom: 2px;
}
body.dark .f-cs-name { color: var(--dark-text); }
.f-cs-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
}
.f-cs-status.active {
  background: #dcfce7;
  color: #16a34a;
}
body.dark .f-cs-status.active {
  background: rgba(16, 185, 129, 0.12);
  color: #34D399;
}

/* Customer sheet sections */
.f-cs-section {
  padding: 16px 20px;
  border-bottom: 1px solid var(--f-gray-100);
}
body.dark .f-cs-section {
  border-color: var(--dark-border);
}
.f-cs-section:last-child {
  border-bottom: none;
}
.f-cs-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--f-gray-400);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
body.dark .f-cs-section-title { color: var(--dark-text-muted); }
.f-cs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
}
.f-cs-row-label {
  font-size: 13px;
  color: var(--f-gray-500);
  font-weight: 500;
}
body.dark .f-cs-row-label { color: var(--dark-text-sub); }
.f-cs-row-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--f-gray-900);
  display: flex;
  align-items: center;
  gap: 6px;
}
body.dark .f-cs-row-value { color: var(--dark-text); }
.f-cs-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--f-green-50);
  color: var(--f-green-600);
  cursor: pointer;
  transition: all var(--f-duration) var(--f-ease);
  flex-shrink: 0;
}
.f-cs-copy-btn:active {
  transform: scale(0.9);
}
body.dark .f-cs-copy-btn {
  background: rgba(45, 212, 191, 0.1);
  color: var(--dark-accent-teal);
}
.f-cs-call-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #dcfce7;
  color: #16a34a;
  cursor: pointer;
  transition: all var(--f-duration) var(--f-ease);
}
body.dark .f-cs-call-btn {
  background: rgba(16, 185, 129, 0.12);
  color: #34D399;
}
.f-cs-call-btn:active { transform: scale(0.9); }

/* Customer stat cards in sheet */
.f-cs-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 4px;
}
.f-cs-stat-item {
  text-align: center;
  padding: 12px 8px;
  border-radius: var(--f-radius-md);
  background: var(--f-green-50);
}
body.dark .f-cs-stat-item {
  background: rgba(45, 212, 191, 0.06);
}
.f-cs-stat-value {
  font-size: 18px;
  font-weight: 900;
  color: var(--f-green-700);
}
body.dark .f-cs-stat-value { color: var(--dark-accent-teal); }
.f-cs-stat-label {
  font-size: 10px;
  color: var(--f-gray-400);
  margin-top: 2px;
}
body.dark .f-cs-stat-label { color: var(--dark-text-muted); }

/* === ORDER DETAIL MODAL IMPROVEMENTS === */
.f-order-detail-section {
  background: var(--f-gray-50);
  border-radius: var(--f-radius-md);
  padding: 16px;
  border: 1px solid var(--f-gray-100);
}
body.dark .f-order-detail-section {
  background: rgba(45, 212, 191, 0.04) !important;
  border-color: var(--dark-border) !important;
}
.f-order-detail-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: white;
  border: 1px solid var(--f-gray-100);
  border-radius: var(--f-radius-md);
  padding: 12px;
}
body.dark .f-order-detail-item {
  background: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
}

/* === TYPOGRAPHY HIERARCHY IMPROVEMENTS === */
/* Order number weight */
body.dark .f-order-header span[style*="font-weight:700"],
body.dark .f-order-header span[style*="font-weight:800"] {
  color: var(--dark-text) !important;
}

/* === GENERAL DARK MODE FIXES FOR NEW COMPONENTS === */
body.dark .f-customer-sheet-overlay {
  background: rgba(0, 0, 0, 0.6) !important;
}
body.dark .f-modal-overlay {
  background: rgba(0, 0, 0, 0.6) !important;
}



/* === MOBILE RESPONSIVE: Customer Sheet === */
@media (min-width: 520px) {
  .f-customer-sheet-overlay {
    align-items: center;
    padding: 16px;
  }
  .f-customer-sheet {
    border-radius: var(--f-radius-2xl);
    max-height: 80vh;
  }
}


/* ================================================================
   DARK MODE: COMPREHENSIVE TEXT COLOR FIX (Round 2)
   ================================================================ */

/* Override all inline var(--f-gray-900) in dark mode */
body.dark [style*="var(--f-gray-900)"] {
  color: var(--dark-text) !important;
}
body.dark [style*="var(--f-gray-800)"] {
  color: var(--dark-text) !important;
}

/* Override all inline var(--f-gray-700) in dark mode */
body.dark [style*="var(--f-gray-700)"] {
  color: var(--dark-text) !important;
}

/* Override all inline var(--f-green-700) in dark mode */
body.dark [style*="var(--f-green-700)"] {
  color: #34D399 !important;
}

/* Override all inline var(--f-green-600) in dark mode */
body.dark [style*="var(--f-green-600)"] {
  color: #4ADE80 !important;
}

/* Section titles in dark mode */
body.dark .f-section-title {
  color: var(--dark-text) !important;
}
body.dark .f-section-title svg,
body.dark .f-section-title i {
  color: #4ADE80 !important;
}

/* Subscription header text */
body.dark #currentPlanCard p {
  color: white !important;
}
body.dark #currentPlanName {
  color: white !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
}
body.dark #currentPlanExpiry {
  color: rgba(255,255,255,0.85) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4) !important;
}

/* Subscription "انتخاب پلن اشتراک" title */
body.dark #view-subscription h3 {
  color: var(--dark-text) !important;
}

/* Dashboard stat values and labels */
body.dark .f-stat-value {
  color: var(--dark-text) !important;
}
body.dark .f-stat-label {
  color: var(--dark-text-sub) !important;
}

/* Quick access cards */
body.dark .f-action-card .f-action-title {
  color: var(--dark-text) !important;
}

/* Order cards in dark */
body.dark .f-order-card p {
  color: var(--dark-text) !important;
}

/* Product items in dark */
body.dark .f-product-item p {
  color: var(--dark-text) !important;
}

/* Settings labels */
body.dark .f-input-group label {
  color: var(--dark-text-sub) !important;
}

/* All inline font-weight:800/900 text in dark mode */
body.dark [style*="font-weight:800"] {
  color: var(--dark-text) !important;
}
body.dark [style*="font-weight:900"] {
  color: var(--dark-text) !important;
}

/* Chart labels */
body.dark .f-chart-bar-label {
  color: var(--dark-text-sub) !important;
}

/* Order detail sections in dark mode */
body.dark .f-order-detail-section {
  background: rgba(45, 212, 191, 0.04) !important;
  border-color: var(--dark-border) !important;
}

/* Customer search input dark */
body.dark #customerSearch {
  background: var(--dark-input) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

/* Subscription plan cards dark text */
body.dark .f-sub-plan-card {
  color: white !important;
}

/* Dark mode page loader text */
body.dark .f-page-loader {
  background: #0a0c10 !important;
}

/* Dark mode bottom nav safe area fix - ensure enough bottom padding */
.f-bottom-nav {
  padding-bottom: max(10px, env(safe-area-inset-bottom, 10px)) !important;
}
.f-bottom-nav-inner {
  padding: 8px 8px !important;
}

/* Dark mode: stat cards should have no visible border clash */
body.dark .f-stat-card {
  border: 1px solid var(--dark-card-border) !important;
}


/* ================================================================
   ROUND 3 FIXES — Precise targeted dark mode fixes
   ================================================================ */

/* 1. Order detail address card in dark mode */
body.dark .f-order-detail-section[style*="f-green-50"],
body.dark .f-order-detail-section:last-child {
  background: rgba(16, 185, 129, 0.06) !important;
  border-color: var(--dark-border) !important;
}

/* Address card inside order detail - make it dark readable */
body.dark #orderDetailBody [style*="f-green-50"] {
  background: rgba(16, 185, 129, 0.06) !important;
}
body.dark #orderDetailBody [style*="f-green-50"] p {
  color: var(--dark-text) !important;
}
body.dark #orderDetailBody [style*="f-green-50"] [style*="f-gray-500"] {
  color: var(--dark-text-sub) !important;
}

/* Generic address block inside order detail */
body.dark #orderDetailBody [style*="background:var(--f-green-50)"] {
  background: rgba(16, 185, 129, 0.06) !important;
}
body.dark #orderDetailBody [style*="background:var(--f-green-50)"] p {
  color: var(--dark-text) !important;
}

/* 2. فاکتورساز هوشمند icon - بدون بک‌گراند */
body.dark .f-settings-section:last-of-type .f-settings-header-icon {
  background: transparent !important;
  width: 90px !important;
  height: 90px !important;
}
body.dark .f-settings-section:last-of-type .f-settings-header-icon img {
  width: 100% !important;
  height: 100% !important;
  transform: scale(2.2) !important;
}

/* 3. Sidebar "دستیار بومین" - white text in dark mode */
body.dark .f-sidebar-footer [style*="linear-gradient(135deg,#059669,#047857)"] {
  color: white !important;
}
body.dark .f-sidebar-footer [style*="linear-gradient(135deg,#059669,#047857)"] span {
  color: white !important;
}
body.dark .f-sidebar-footer [style*="linear-gradient(135deg,#059669,#047857)"] i,
body.dark .f-sidebar-footer [style*="linear-gradient(135deg,#059669,#047857)"] svg {
  color: white !important;
}

/* Also target by the sparkles icon context */
body.dark .f-sidebar-item[style*="linear-gradient"] {
  color: white !important;
}
body.dark .f-sidebar-item[style*="linear-gradient"] span {
  color: white !important;
}
body.dark .f-sidebar-item[style*="linear-gradient"] i,
body.dark .f-sidebar-item[style*="linear-gradient"] svg {
  color: white !important;
}


/* === ORDER DETAIL DARK MODE INLINE STYLE FIXES === */
/* Override inline green-50 backgrounds inside order detail */
body.dark #orderDetailBody > div > div[style*="green-50"],
body.dark #orderDetailBody div[style*="green-50"] {
  background: rgba(16, 185, 129, 0.06) !important;
  border: 1px solid rgba(16, 185, 129, 0.12) !important;
}

/* All text inside green-50 boxes in dark mode */
body.dark #orderDetailBody div[style*="green-50"] p,
body.dark #orderDetailBody div[style*="green-50"] span {
  color: var(--dark-text) !important;
}

/* Gray-50 background sections in dark mode */
body.dark #orderDetailBody div[style*="gray-50"],
body.dark #orderDetailBody > div > div[style*="gray-50"] {
  background: rgba(30, 41, 59, 0.5) !important;
}

body.dark #orderDetailBody div[style*="gray-50"] p,
body.dark #orderDetailBody div[style*="gray-50"] span {
  color: var(--dark-text-sub) !important;
}

/* White background items in dark mode */
body.dark #orderDetailBody div[style*="background:white"] {
  background: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
}
body.dark #orderDetailBody div[style*="background:white"] p {
  color: var(--dark-text) !important;
}

/* Address text specifically */
body.dark #orderDetailBody [style*="f-green-700"] {
  color: #34D399 !important;
}
body.dark #orderDetailBody [style*="f-gray-900"] {
  color: var(--dark-text) !important;
}
body.dark #orderDetailBody [style*="f-gray-700"] {
  color: var(--dark-text) !important;
}
body.dark #orderDetailBody [style*="f-gray-500"] {
  color: var(--dark-text-sub) !important;
}
body.dark #orderDetailBody [style*="f-gray-400"] {
  color: var(--dark-text-muted) !important;
}

/* Last orders card on dashboard - dark mode */
body.dark #recentOrders .f-order-card {
  background: var(--dark-card-glass) !important;
  border-color: var(--dark-card-border) !important;
}
body.dark #recentOrders .f-order-card p {
  color: var(--dark-text) !important;
}
body.dark #recentOrders .f-order-card span {
  color: var(--dark-text-sub) !important;
}
body.dark #recentOrders .f-badge-green {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #34D399 !important;
}
body.dark #recentOrders .f-badge-red {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #F87171 !important;
}
body.dark #recentOrders .f-badge-amber {
  background: rgba(245, 158, 11, 0.12) !important;
  color: #FBBF24 !important;
}
body.dark #recentOrders .f-badge-blue {
  background: rgba(59, 130, 246, 0.12) !important;
  color: #60A5FA !important;
}
body.dark #recentOrders .f-badge-gray {
  background: rgba(100, 116, 139, 0.12) !important;
  color: var(--dark-text-sub) !important;
}

/* Price text green in dark */
body.dark #recentOrders [style*="f-green-700"] {
  color: #34D399 !important;
}


/* ================================================================
   ROUND 4 FIXES
   ================================================================ */

/* 1. Hide scrollbar in order detail modal (keep scrollable) */
.f-modal::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
.f-modal { -ms-overflow-style: none !important; scrollbar-width: none !important; }

/* 2. OTP Method Modal dark mode - icons & cards */
body.dark #otpMethodModal .f-modal {
  background: var(--dark-card) !important;
  border: 1px solid var(--dark-card-border) !important;
}
body.dark #otpMethodModal .f-modal-header {
  background: var(--dark-card) !important;
  border-color: var(--dark-border) !important;
}
body.dark #otpMethodModal .f-modal-title {
  color: var(--dark-text) !important;
}
body.dark #otpMethodModal .f-modal-close {
  background: rgba(100, 116, 139, 0.15) !important;
  color: var(--dark-text-sub) !important;
}
body.dark #otpMethodModal .f-action-card {
  background: var(--dark-card-glass) !important;
  border-color: var(--dark-card-border) !important;
}
body.dark #otpMethodModal .f-action-title {
  color: var(--dark-text) !important;
}
body.dark #otpMethodModal .f-action-desc {
  color: var(--dark-text-sub) !important;
}
/* Fix OTP method icon containers - keep colored backgrounds, remove white */
body.dark #otpMethodModal .f-action-icon {
  background: transparent !important;
}
body.dark #otpMethodModal .f-action-icon[style*="gradient(135deg,var(--f-green-400),var(--f-green-600))"] {
  background: linear-gradient(135deg, #059669, #047857) !important;
}
body.dark #otpMethodModal .f-action-icon[style*="gradient(135deg,var(--f-blue),#1d4ed8)"] {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
}

/* 3. فاکتورساز هوشمند - keep blue bg in dark mode */
/* Target by the last settings section's icon specifically */
body.dark .f-settings-section:nth-last-of-type(2) .f-settings-header-icon {
  background: transparent !important;
}

/* بوردر و بک‌گراند از همه آیکون‌های تنظیمات حذف شد */

/* 4. Profile avatar initials - two letters in green bubble */
.settings-avatar-initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  color: white;
  background: linear-gradient(135deg, var(--f-green-500), var(--f-green-700));
  border-radius: inherit;
}


/* فاکتورساز icon - always keep blue gradient */
body.dark .f-icon-factor {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
}
body.dark .f-icon-factor svg,
body.dark .f-icon-factor i {
  color: white !important;
}



/* OTP Method Modal - fix icon backgrounds in dark mode */
body.dark #otpMethodModal .f-action-icon {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
/* SMS icon - green gradient */
body.dark #otpMethodModal .f-action-icon[style*="gradient(135deg,var(--f-green-400),var(--f-green-600))"] {
  background: linear-gradient(135deg, #22c55e, #16a34a) !important;
}
/* Bale icon - blue gradient */
body.dark #otpMethodModal .f-action-icon[style*="gradient(135deg,var(--f-blue),#1d4ed8)"] {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
}
/* Icon colors inside OTP modal */
body.dark #otpMethodModal .f-action-icon svg,
body.dark #otpMethodModal .f-action-icon i {
  color: white !important;
}

/* Settings "تنظیمات" icon - keep green gear in dark mode */
body.dark .f-settings-section:first-of-type .f-settings-header-icon {
  background: transparent !important;
}
body.dark .f-settings-section:first-of-type .f-settings-header-icon svg,
body.dark .f-settings-section:first-of-type .f-settings-header-icon i {
  color: var(--dark-accent-teal) !important;
}
body.dark .f-settings-section:first-of-type .f-settings-header-icon img {
  filter: none !important;
}

/* === Chart Tabs & Range Buttons === */
.f-chart-tab {
  padding: 5px 14px;
  border-radius: 8px;
  border: none;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s var(--f-ease);
  background: transparent;
  color: var(--f-gray-400);
  font-family: inherit;
}
.f-chart-tab.active {
  background: var(--f-primary, #10b981);
  color: white;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}
.f-chart-tab:hover:not(.active) {
  color: var(--f-gray-600);
  background: rgba(0,0,0,0.04);
}

.f-range-btn {
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid var(--f-gray-200);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  background: transparent;
  color: var(--f-gray-400);
  font-family: inherit;
}
.f-range-btn.active {
  background: var(--f-primary, #10b981);
  color: white;
  border-color: var(--f-primary, #10b981);
}
.f-range-btn:hover:not(.active) {
  border-color: var(--f-gray-300);
  color: var(--f-gray-600);
}

/* === Chart Enhanced === */
.f-chart-bar-wrap {
  height: 140px;
  gap: 4px;
}
.f-chart-bar-item {
  gap: 4px;
}
.f-chart-bar {
  border-radius: 6px 6px 2px 2px;
  position: relative;
  transition: height 0.5s var(--f-ease), background 0.3s;
}
.f-chart-bar-item:hover .f-chart-bar {
  opacity: 0.85;
  transform: scaleY(1.02);
  transform-origin: bottom;
}
.f-chart-bar-value {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 700;
  color: var(--f-primary, #10b981);
  opacity: 0;
  transition: opacity 0.2s;
  white-space: nowrap;
}
.f-chart-bar-item:hover .f-chart-bar-value {
  opacity: 1;
}

/* Dark mode */
/* === Chart Tabs Container (Light/Dark) === */
.f-chart-tabs-container { background: var(--f-gray-100); }
body.dark .f-chart-tabs-container { background: rgba(0,0,0,0.3) !important; }

body.dark .f-chart-tab { color: var(--dark-text-sub); }
body.dark .f-chart-tab.active { background: #10b981; color: white; }
body.dark .f-range-btn { border-color: rgba(255,255,255,0.1); color: var(--dark-text-sub); }
body.dark .f-range-btn.active { background: #10b981; border-color: #10b981; color: white; }
body.dark .f-chart-bar-value { color: #34d399; }


/* === Enhanced Chart - Three State Bars === */

/* --- Actual Data Bar --- */
.f-chart-bar-actual {
  box-shadow: none;
  transition: height 0.5s var(--f-ease), background 0.3s;
}
.f-chart-bar-today {
  box-shadow: 0 6px 18px rgba(34, 197, 94, 0.15) !important;
}
.f-chart-bar-today-empty {
  background: linear-gradient(180deg, var(--f-gray-200), var(--f-gray-100)) !important;
  opacity: 0.3;
  border: none !important;
}

/* --- Zero Visits Bar (Horizontal Line) --- */
.f-chart-bar-empty {
  width: 100%;
  height: 2px !important;
  min-height: 2px !important;
  max-height: 2px !important;
  background: var(--f-gray-300) !important;
  border-radius: 1px;
  opacity: 0.4;
  flex-shrink: 0;
}

/* --- Prediction Bar (Dashed) --- */
.f-chart-bar-predict {
  background: transparent !important;
  border: 1.5px dashed var(--f-gray-300) !important;
  border-radius: 6px 6px 2px 2px !important;
  opacity: 0.6;
  transition: height 0.5s var(--f-ease);
}
.f-chart-bar-predict:hover {
  opacity: 0.8;
  border-color: var(--f-gray-400) !important;
}

/* --- Today Badge --- */
.f-chart-today-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  font-size: 9px;
  font-weight: 700;
  color: var(--f-primary, #10b981);
  background: white;
  border: 1px solid var(--f-primary, #10b981);
  border-radius: 50px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.12);
  position: relative;
  z-index: 2;
  margin-bottom: 4px;
  animation: badgePopIn 0.3s ease-out both;
}

/* --- Today Bar Wrapper (extra glow) --- */
.f-chart-bar-today-wrap {
  position: relative;
}
.f-chart-bar-today-wrap::after {
  content: '';
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  height: 80%;
  background: radial-gradient(ellipse, rgba(16, 185, 129, 0.08), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* --- Legend --- */
.f-chart-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 10px;
  padding-top: 6px;
  direction: rtl;
}
.f-chart-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  color: var(--f-gray-400);
  font-weight: 500;
}
.f-chart-legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  flex-shrink: 0;
}
.f-chart-legend-actual {
  background: var(--f-primary, #10b981);
  border-radius: 50%;
}
.f-chart-legend-empty {
  background: var(--f-gray-300);
  border-radius: 1px;
  height: 2px;
  width: 10px;
  opacity: 0.5;
}
.f-chart-legend-predict {
  background: transparent;
  border: 1.5px dashed var(--f-gray-300);
  border-radius: 2px;
  width: 8px;
  height: 8px;
}

/* --- Animations --- */
@keyframes chartBarGrow {
  from {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: bottom;
  }
  to {
    opacity: 1;
    transform: scaleY(1);
    transform-origin: bottom;
  }
}

@keyframes chartBarFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes chartBarPredict {
  from {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: bottom;
  }
  to {
    opacity: 0.6;
    transform: scaleY(1);
    transform-origin: bottom;
  }
}

@keyframes badgePopIn {
  from {
    opacity: 0;
    transform: scale(0.7) translateY(4px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* --- Dark Mode Support --- */
body.dark .f-chart-bar-empty {
  background: rgba(255,255,255,0.15) !important;
}
body.dark .f-chart-bar-predict {
  border-color: rgba(255,255,255,0.2) !important;
}
body.dark .f-chart-bar-predict:hover {
  border-color: rgba(255,255,255,0.35) !important;
}
body.dark .f-chart-today-badge {
  background: rgba(0,0,0,0.6);
  color: #34d399;
  border-color: #34d399;
}
body.dark .f-chart-legend-item {
  color: rgba(255,255,255,0.4);
}
body.dark .f-chart-legend-actual {
  background: #34d399;
}
body.dark .f-chart-legend-empty {
  background: rgba(255,255,255,0.2);
}
body.dark .f-chart-legend-predict {
  border-color: rgba(255,255,255,0.2);
}



/* --- Month Group Labels (30-day chart) --- */
.f-chart-month-groups {
  display: flex;
  direction: rtl;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--f-gray-100);
}
.f-chart-month-group {
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  color: var(--f-gray-400);
  letter-spacing: -0.2px;
  padding: 2px 0;
}
body.dark .f-chart-month-group {
  color: rgba(255,255,255,0.35);
}

/* === Notification Chips === */
.f-notif-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--f-gray-200);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  background: transparent;
  color: var(--f-gray-400);
  font-family: inherit;
}
.f-notif-chip.active {
  border-color: var(--f-primary, #10b981);
  background: rgba(16, 185, 129, 0.08);
  color: var(--f-primary, #10b981);
}
.f-notif-chip:hover:not(.active) {
  border-color: var(--f-gray-300);
  color: var(--f-gray-600);
}

/* Dark mode */
body.dark .f-notif-chip { border-color: rgba(255,255,255,0.1); color: var(--dark-text-sub); }
body.dark .f-notif-chip.active { border-color: #10b981; background: rgba(16,185,129,0.15); color: #34d399; }
body.dark .f-toggle-slider { background-color: rgba(255,255,255,0.15); }

/* === Custom Status Dropdown === */
.f-status-dropdown-menu { display: none; }
.f-status-dropdown-menu.open {
  display: block;
  animation: ddSlideIn 0.2s ease;
}
@keyframes ddSlideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.f-status-opt:hover:not(.f-disabled) {
  background: var(--f-gray-50) !important;
}
body.dark .f-status-dropdown-menu {
  background: var(--dark-card) !important;
  border-color: var(--dark-border) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.4) !important;
}

/* === Custom Status Dropdown === */
.f-status-dropdown-menu { display: none; }
.f-status-dropdown-menu.open {
  display: block;
  animation: ddSlideIn 0.2s ease;
}
@keyframes ddSlideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.f-status-opt:hover:not(.f-disabled) {
  background: var(--f-gray-50) !important;
}
/* Dark mode */
body.dark .f-status-dropdown-menu {
  background: var(--dark-card) !important;
  border-color: var(--dark-border) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.4) !important;
}
body.dark .f-status-opt:hover:not(.f-disabled) {
  background: rgba(255,255,255,0.05) !important;
}
body.dark #statusDDBtn {
  background: rgba(255,255,255,0.06) !important;
}
/* RTL fix for dropdown button */
[dir="rtl"] #statusDDBtn svg {
  transform: scaleX(-1);
}

/* === Stepper Action Button === */
.f-action-stepper-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(16,185,129,0.4) !important;
}
.f-action-stepper-btn:active {
  transform: scale(0.98) !important;
}
.f-three-dot-menu:hover {
  background: var(--f-gray-50) !important;
}
/* Dark mode */
body.dark .f-three-dot-menu {
  background: var(--dark-card) !important;
  border-color: var(--dark-border) !important;
}
body.dark .f-order-detail-section .f-order-row span {
  color: var(--dark-text) !important;
}

/* === Dark Mode: Shipping Modal === */
body.dark .f-ship-prov {
  background: var(--dark-card) !important;
  border-color: var(--dark-border) !important;
}
body.dark .f-ship-prov span {
  color: var(--dark-text) !important;
}
body.dark #shipTrackIn {
  background: var(--dark-input) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}
body.dark #shipRecArea {
  border-color: var(--dark-border) !important;
}
body.dark .f-modal {
  background: var(--dark-card) !important;
}
body.dark .f-modal h3,
body.dark .f-modal p {
  color: var(--dark-text) !important;
}
body.dark .f-sh-cancel {
  color: var(--dark-text-sub) !important;
}
body.dark .f-sh-close {
  background: var(--dark-border) !important;
}

/* ===== Subscription Plans Grid ===== */
/* موبایل: عمودی (یک ستون) - پیش‌فرض */
.f-plans-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

/* دسکتاپ: افقی (۳ ستون) */
@media (min-width: 1024px) {
  .f-plans-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

/* === Category Selection Modal === */
.f-cat-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  cursor: pointer;
  transition: all 0.2s;
  border-bottom: 1px solid var(--f-gray-100);
  position: relative;
}
.f-cat-item:last-child { border-bottom: none; }
.f-cat-item:hover:not(.disabled) { background: var(--f-gray-50); }
.f-cat-item.selected { background: rgba(22,163,74,0.06); }
.f-cat-item.selected::before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--f-green-600);
  border-radius: 0 3px 3px 0;
}
.f-cat-item.disabled { opacity: 0.45; cursor: not-allowed; }
.f-cat-item.disabled:hover { background: transparent; }
.f-cat-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
  transition: all 0.2s;
}
.f-cat-item.selected .f-cat-icon {
  background: var(--f-green-100) !important;
  color: var(--f-green-700) !important;
}
.f-cat-item.disabled .f-cat-icon { opacity: 0.4; }
.f-cat-info { flex: 1; min-width: 0; }
.f-cat-name { font-size: 14px; font-weight: 700; color: var(--f-gray-900); margin-bottom: 2px; }
.f-cat-item.selected .f-cat-name { color: var(--f-green-700); }
.f-cat-item.disabled .f-cat-name { color: var(--f-gray-400); }
.f-cat-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 600;
  white-space: nowrap;
}
.f-cat-badge.default {
  background: var(--f-green-100);
  color: var(--f-green-700);
}
.f-cat-badge.locked {
  background: var(--f-gray-100);
  color: var(--f-gray-500);
}
.f-cat-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--f-gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}
.f-cat-item.selected .f-cat-check {
  border-color: var(--f-green-600);
  background: var(--f-green-600);
  color: white;
}
.f-cat-item.disabled .f-cat-check { opacity: 0; }

/* Store advertising editor */

/* ===== Store Advertising Editor ===== */
.ad-editor-note{padding:12px 14px;border:1px solid rgba(245,158,11,.22);background:linear-gradient(135deg,rgba(245,158,11,.08),rgba(239,68,68,.06));border-radius:14px;color:var(--f-gray-600);font-size:12px;line-height:1.9;margin-bottom:16px}
.ad-sync-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--f-gray-600);margin:4px 0 16px}
.ad-sync-row input{accent-color:var(--f-green-600)}
.ad-preview-wrap{padding:12px;background:var(--f-gray-50);border-radius:16px;margin-bottom:12px}
.ad-preview-label{font-size:11px;color:var(--f-gray-400);margin-bottom:8px}
.ad-enable-card{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 16px;border:1px solid var(--f-gray-200);border-radius:16px;background:var(--f-gray-50);margin-bottom:16px}
.ad-enable-card.is-on{border-color:rgba(16,185,129,.35);background:rgba(16,185,129,.06)}
.ad-enable-card b{font-size:14px}
.f-switch-lg{position:relative;display:inline-flex;cursor:pointer;flex-shrink:0}
.f-switch-lg input{position:absolute;opacity:0}
.f-switch-track{width:54px;height:30px;border-radius:999px;background:#cbd5e1;padding:3px;transition:.2s;display:block}
.f-switch-thumb{display:block;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 5px #0002;transition:.2s}
.f-switch-lg input:checked+.f-switch-track{background:var(--f-green-600)}
.f-switch-lg input:checked+.f-switch-track .f-switch-thumb{transform:translateX(-24px)}
.ad-ticker-link-group{margin-top:14px}
.ad-message-rows{display:flex;flex-direction:column;gap:8px}
.ad-message-row{display:flex;align-items:center;gap:7px}
.ad-message-row .ad-message-input{flex:1;min-width:0}
.ad-message-number{width:24px;height:24px;border-radius:8px;background:var(--f-gray-100);color:var(--f-gray-500);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800}
.ad-remove-message,.ad-add-message{border:0;cursor:pointer;border-radius:10px}
.ad-remove-message{width:34px;height:34px;background:var(--f-red-light);color:var(--f-red);font-size:20px;line-height:1}
.ad-remove-message:disabled{opacity:.35;cursor:not-allowed}
.ad-add-message{margin-top:10px;padding:9px 14px;background:var(--f-green-50);color:var(--f-green-700);font-size:12px;font-weight:800}
.store-ad-button.is-disabled{opacity:.7;cursor:default}

/* ===== Ad Preview: Card ===== */
.ad-preview-box{--ad-preview-color:#22c55e;overflow:hidden;border-radius:14px;min-height:48px;background:#fff}
.ad-preview-card{margin:8px;padding:18px;border-radius:16px;color:#fff;background:var(--ad-preview-color);background:linear-gradient(135deg,var(--ad-preview-color),var(--ad-preview-color-dark,var(--ad-preview-color)));display:flex;flex-direction:column;gap:8px;text-align:right}
.ad-preview-card b{font-size:17px}
.ad-preview-card span{font-size:12px;opacity:.9}
.ad-preview-card em{font-style:normal;align-self:flex-end;background:#fff;color:var(--ad-preview-color);padding:8px 14px;border-radius:10px;font-size:11px;font-weight:800}
.ad-preview-box.effect-pulse .ad-preview-card{animation:adPulse 2.2s ease-in-out infinite}
@keyframes adPulse{50%{filter:brightness(1.12);transform:scale(.99)}}

/* ===== Ad Preview: Ticker (Marquee) ===== */
.ad-preview-ticker{background:var(--ad-preview-color);color:#fff;padding:13px 16px;text-align:center;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden}
.ad-preview-ticker-track{display:flex;gap:64px;min-width:max-content;padding:0 16px}
.ad-preview-ticker-track span{display:inline-block}
.ad-preview-box.effect-marquee .ad-preview-ticker{overflow:hidden}
.ad-preview-box.effect-marquee .ad-preview-ticker-track{animation:adPreviewMarquee 8s linear infinite}
@keyframes adPreviewMarquee{from{transform:translateX(10%)}to{transform:translateX(-100%)}}

/* ===== Ad Preview: Fade & Slide (single message visible at a time) ===== */
.ad-preview-ticker.effect-fade,.ad-preview-ticker.effect-slide{position:relative;min-height:44px;display:flex;align-items:center;justify-content:center}
.ad-preview-ticker.effect-fade .ad-preview-ticker-track,.ad-preview-ticker.effect-slide .ad-preview-ticker-track{position:relative;width:100%;display:flex;justify-content:center;animation:none!important}
.ad-preview-message{position:absolute;top:0;left:0;right:0;opacity:0;transform:translateY(0);pointer-events:none;transition:opacity .55s ease,transform .55s ease;text-align:center;padding:0}
.ad-preview-message.active{position:relative;opacity:1;transform:translateY(0);pointer-events:auto}
.ad-preview-box.effect-slide .ad-preview-message{transform:translateY(14px)}
.ad-preview-box.effect-slide .ad-preview-message.active{transform:translateY(0)}
.ad-preview-box.effect-pulse .ad-preview-ticker{animation:adPulse 2.2s ease-in-out infinite}


/* Custom Select Dropdown */
.f-select-wrap{position:relative}
.f-select-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px 16px;border:1px solid var(--f-gray-200);border-radius:14px;background:var(--f-gray-50);font-size:14px;font-weight:600;color:var(--f-gray-800);cursor:pointer;transition:all .2s;min-height:48px;user-select:none}
.f-select-trigger:active{transform:scale(.98)}
.f-select-trigger.has-value{color:var(--f-gray-900)}
.f-select-trigger .f-select-chevron{transition:transform .25s ease;color:var(--f-gray-400);flex-shrink:0;margin-left:8px}
.f-select-wrap.is-open .f-select-trigger{border-color:var(--f-green-500);box-shadow:0 0 0 3px rgba(16,185,129,.12)}
.f-select-wrap.is-open .f-select-chevron{transform:rotate(180deg)}
.f-select-dropdown{position:absolute;top:calc(100% + 6px);left:0;right:0;background:white;border:1px solid var(--f-gray-200);border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.12);z-index:999;opacity:0;transform:translateY(-8px);pointer-events:none;transition:all .2s ease;overflow:hidden}
.f-select-wrap.is-open .f-select-dropdown{opacity:1;transform:translateY(0);pointer-events:auto}
.f-select-option{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;font-size:14px;font-weight:600;color:var(--f-gray-700);cursor:pointer;transition:background .15s;border-bottom:1px solid var(--f-gray-100)}
.f-select-option:last-child{border-bottom:0}
.f-select-option:active{background:var(--f-gray-50)}
.f-select-option.is-selected{color:var(--f-green-700);background:rgba(16,185,129,.06)}
.f-select-option .f-select-check{width:20px;height:20px;border-radius:50%;border:2px solid var(--f-gray-300);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s}
.f-select-option.is-selected .f-select-check{border-color:var(--f-green-600);background:var(--f-green-600)}
.f-select-option.is-selected .f-select-check::after{content:"✓";color:white;font-size:11px;font-weight:900}
.f-select-overlay{position:fixed;inset:0;z-index:998;display:none}
.f-select-wrap.is-open .f-select-overlay{display:block}/* ============================================
   ✨ BUMIN ORBIT - Canvas Comet Effect
   ============================================ */
.f-bumin-orbit-wrap {
  position: relative;
  width: 100%;
  margin-bottom: 8px;
}
body.dark .f-sidebar-footer .f-bumin-orbit-wrap + .f-sidebar-profile {
  border-top-color: var(--dark-border);
}
/* === BUMIN DESC EDITOR (Markdown Support) === */
.f-desc-wrap {
  position: relative;
  background: var(--f-green-50);
  border-radius: 16px;
  border: 2px solid transparent;
  transition: all var(--f-duration) var(--f-ease);
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 210px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.f-desc-wrap::-webkit-scrollbar { display: none; }
.f-desc-wrap:focus-within {
  border-color: var(--f-green-300);
  background: white;
  box-shadow: 0 0 0 4px var(--f-primary-glow);
}
.f-desc-editor {
  width: 100%;
  min-height: 110px;
  padding: 10px 14px;
  padding-top: 10px;
  border: none;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  outline: none;
  font-size: var(--f-text-sm);
  color: var(--f-gray-900);
  line-height: 1.7;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  cursor: text;
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
  -webkit-tap-highlight-color: rgba(0,0,0,0.05);
}
.f-desc-editor::-webkit-scrollbar { display: none; }
.f-desc-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--f-gray-300);
  pointer-events: none;
}
.f-desc-editor:focus { outline: none; }
.f-bumin-desc-btn {
  position: relative;
  float: left;
  margin: 7px 9px 4px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.14),
              0 0 0 1px rgba(148, 163, 184, 0.22),
              0 0 0 3px rgba(148, 163, 184, 0.07);
  cursor: pointer;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
  z-index: 5;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
.f-bumin-desc-btn::after {
  content: '';
  position: absolute;
  top: -55%;
  left: -65%;
  width: 55%;
  height: 210%;
  background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0) 100%);
  transform: rotate(18deg);
  animation: buminShine 3.6s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
.f-bumin-desc-btn:hover {
  transform: scale(1.18);
  box-shadow: 0 5px 14px rgba(59, 130, 246, 0.32),
              0 0 0 1px rgba(59, 130, 246, 0.35),
              0 0 0 5px rgba(59, 130, 246, 0.12);
}
.f-bumin-desc-btn:active {
  transform: scale(0.92);
}
.f-bumin-desc-btn #buminDescIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  line-height: 1;
  position: relative;
  z-index: 1;
  animation: buminFloat 3.2s ease-in-out infinite;
}
.f-bumin-desc-btn #buminDescIcon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 4px;
  -webkit-user-drag: none;
  user-select: none;
}
.f-bumin-desc-btn.loading {
  pointer-events: none;
}
.f-bumin-desc-btn.loading::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #3b82f6, #22c55e, #a855f7, #f59e0b, #3b82f6);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3.5px));
  animation: buminSpin 1.1s linear infinite;
  z-index: 2;
  pointer-events: none;
}
@keyframes buminFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
@keyframes buminShine {
  0%       { left: -65%; opacity: 0; }
  35%      { opacity: 1; }
  55%, 100%{ left: 130%; opacity: 0; }
}
@keyframes buminSpin {
  to { transform: rotate(360deg); }
}
/* فال‌بک برای مرورگرهای قدیمی بدون پشتیبانی mask: به‌جای حلقه، هاله ظاهر می‌شود */
@supports not ((-webkit-mask-image: radial-gradient(#000, #000)) or (mask-image: radial-gradient(#000, #000))) {
  .f-bumin-desc-btn.loading::before {
    -webkit-mask: none;
    mask: none;
    inset: -3px;
    opacity: .55;
    filter: blur(3px);
  }
}
.f-desc-glow {
  animation: descGlow 1s ease-out;
}
@keyframes descGlow {
  0% { box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.3); }
  100% { box-shadow: 0 0 0 4px transparent; }
}
/* Dark mode - desc editor */
body.dark .f-desc-wrap {
  background: rgba(255, 255, 255, 0.05);
}
body.dark .f-desc-wrap:focus-within {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--f-green-500);
}
body.dark .f-desc-editor {
  color: #e2e8f0 !important;
}
body.dark .f-desc-editor:empty::before {
  color: rgba(255, 255, 255, 0.3);
}
body.dark .f-bumin-desc-btn {
  background: linear-gradient(145deg, #334155 0%, #1e293b 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45),
              0 0 0 1px rgba(148, 163, 184, 0.28),
              0 0 0 3px rgba(148, 163, 184, 0.06);
}
body.dark .f-bumin-desc-btn::after {
  background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.25) 50%, rgba(255,255,255,0) 100%);
}
body.dark .f-bumin-desc-btn:hover {
  background: linear-gradient(145deg, #3b4f6b 0%, #263449 100%);
  box-shadow: 0 5px 14px rgba(59, 130, 246, 0.4),
              0 0 0 1px rgba(59, 130, 246, 0.45),
              0 0 0 5px rgba(59, 130, 246, 0.14);
}
/* Product unsaved modal - above product modal */
#productUnsavedModal {
  z-index: 300 !important;
}

/* ========================================
   WITHDRAW & DEPOSIT - BOTTOM SHEETS
   Dark Mode Compatible - v2.0
   ======================================== */

/* ── Sheet Overlay ── */
.f-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  align-items: flex-end;
  justify-content: center;
}
.f-sheet-overlay.active { display: flex; overflow: hidden; }

/* ── Sheet Panel ── */
.f-sheet {
  background: var(--bg-1, #ffffff);
  border: 1px solid var(--br-2, #e5e7eb);
  border-radius: 24px 24px 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  overflow: hidden;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  animation: sheetSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
}
.f-sheet::-webkit-scrollbar { display: none; }

.f-sheet-handle {
  width: 40px; height: 4px;
  background: var(--f-gray-300, #d1d5db);
  border-radius: 4px;
  margin: 10px auto 0;
}

.f-sheet-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--br-1, #f1f5f9);
  flex-shrink: 0;
  
}
.f-sheet-title {
  font-size: 16px; font-weight: 800;
  color: var(--tx-1, #0f172a);
  display: flex; align-items: center; gap: 8px; margin: 0;
}
.f-sheet-close {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg-2, #f1f5f9); border: none;
  color: var(--tx-2, #64748b); font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.f-sheet-close:hover { background: var(--br-2, #e2e8f0); color: var(--tx-1, #334155); }

.f-sheet-body { padding: 20px; overflow-y: auto; overflow-x: hidden; flex: 1; -webkit-overflow-scrolling: touch; }

@keyframes sheetSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* ── Info Banners ── */
.f-wd-info-banner {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border-bottom: 1px solid #bbf7d0;
  padding: 12px 20px;
  font-size: 12px; line-height: 1.8; color: #166534;
  position: relative; z-index: 1;
}
.f-wd-info-banner b { color: #059669; }

.f-dep-info-banner {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-bottom: 1px solid #bfdbfe;
  padding: 12px 20px;
  font-size: 12px; line-height: 1.8; color: #1e40af;
  position: relative; z-index: 1;
}
.f-dep-info-banner b { color: #2563eb; }

/* ── Float Buttons (inside wallet balance) ── */
.f-wd-btn-float {
  position: absolute;
  bottom: 14px;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.25);
  color: white;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 11px; font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2; letter-spacing: 0.3px; white-space: nowrap;
}
.f-wd-btn-float:hover {
  background: rgba(255,255,255,0.32);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.f-wd-btn-float:active { transform: scale(0.96); }
.f-wd-btn-float i, .f-wd-btn-float svg { width: 13px; height: 13px; opacity: 0.9; }
.f-wd-btn-withdraw { left: 14px; }
.f-wd-btn-deposit { right: 14px; }

/* ── Custom Bank Select ── */
.f-bank-select-wrap { position: relative; }
.f-bank-select-trigger {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  background: var(--bg-1, #fff);
  border: 1.5px solid var(--br-2, #e2e8f0);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  min-height: 46px;
}
.f-bank-select-trigger:hover { border-color: var(--f-gray-300, #9ca3af); }
.f-bank-select-trigger.active {
  border-color: var(--f-green-500, #22c55e);
  box-shadow: 0 0 0 3px rgba(34,197,94,0.1);
}
.f-bank-select-trigger .f-bank-placeholder { color: var(--f-gray-400, #9ca3af); font-size: 14px; }
.f-bank-select-trigger .f-bank-selected { color: var(--tx-1, #0f172a); font-size: 14px; font-weight: 600; }
.f-bank-select-trigger .f-bank-chevron { transition: transform 0.2s; color: var(--tx-3, #9ca3af); }
.f-bank-select-trigger.active .f-bank-chevron { transform: rotate(180deg); }

.f-bank-dropdown {
  position: absolute; bottom: calc(100% + 6px); left: 0; right: 0;
  background: var(--bg-1, #fff);
  border: 1px solid var(--br-2, #e2e8f0);
  border-radius: 14px;
  box-shadow: 0 -8px 30px rgba(0,0,0,0.12);
  max-height: 260px; overflow-y: auto; scrollbar-width: none;
  z-index: 100; display: none;
  animation: bankDropIn 0.2s ease;
}
.f-bank-dropdown::-webkit-scrollbar { display: none; }
.f-bank-dropdown.active { display: block; }

@keyframes bankDropIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.f-bank-option {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; cursor: pointer;
  transition: background 0.12s;
  border-bottom: 1px solid var(--br-1, #f8fafc);
  font-size: 13px; color: var(--tx-1, #1e293b);
}
.f-bank-option:last-child { border-bottom: none; }
.f-bank-option:hover { background: var(--bg-2, #f8fafc); }
.f-bank-option.selected { background: rgba(34,197,94,0.08); color: var(--f-green-700, #15803d); font-weight: 700; }
.f-bank-option .f-bank-icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; background: #fff; border: 1px solid #f0f0f0;
  overflow: hidden; padding: 2px;
}
.f-bank-option .f-bank-icon img {
  width: 100%; height: 100%; object-fit: contain;
}

/* ── Deposit Amount Chips ── */
.f-dep-chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
.f-dep-chip {
  padding: 14px 10px; border-radius: 14px;
  border: 2px solid var(--br-2, #e2e8f0);
  background: var(--bg-1, #fff);
  text-align: center; cursor: pointer;
  transition: all 0.2s;
}
.f-dep-chip:hover { border-color: var(--f-blue-300, #93c5fd); background: var(--bg-2, #f8fafc); }
.f-dep-chip.active {
  border-color: var(--f-blue-500, #3b82f6);
  background: rgba(59,130,246,0.06);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}
.f-dep-chip-amount { font-size: 17px; font-weight: 800; color: var(--tx-1, #0f172a); }
.f-dep-chip-label { font-size: 11px; color: var(--tx-3, #94a3b8); margin-top: 2px; }

/* ── Withdraw Method Buttons ── */
.f-wd-method {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 12px; border-radius: 12px;
  border: 2px solid var(--br-2, #e2e8f0);
  background: var(--bg-1, #fff);
  color: var(--tx-3, #64748b);
  font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.f-wd-method.active {
  border-color: var(--f-green-600, #059669);
  background: rgba(34,197,94,0.06);
  color: var(--f-green-700, #059669);
  box-shadow: 0 0 0 3px rgba(5,150,105,0.1);
}
.f-wd-method:hover:not(.active) { border-color: var(--f-gray-300, #cbd5e1); background: var(--bg-2, #f8fafc); }

/* ── Withdraw History ── */
.f-wd-history-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px;
  background: var(--bg-2, #f8fafc); margin-bottom: 8px;
}
.f-wd-status-badge { font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
.f-wd-status-pending { background: #fef3c7; color: #92400e; }
.f-wd-status-done { background: #d1fae5; color: #065f46; }
.f-wd-status-rejected { background: #fee2e2; color: #991b1b; }

/* ════════════════════════════════════════════
   DARK MODE - ALL SHEET COMPONENTS
   ════════════════════════════════════════════ */

body.dark .f-sheet-overlay { background: rgba(0, 0, 0, 0.7); }
.f-sheet-overlay.active { overflow: hidden; }

body.dark .f-sheet {
  background: #1a1d24;
  border-color: #2a2d35;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
}
body.dark .f-sheet-handle { background: #4a4d55; }
body.dark .f-sheet-header { background: #1a1d24; border-bottom-color: #2a2d35; }
body.dark .f-sheet-title { color: #e2e8f0; }
body.dark .f-sheet-close { background: #2a2d35; color: #94a3b8; }
body.dark .f-sheet-close:hover { background: #3a3d45; color: #e2e8f0; }

/* Dark: Info Banners */
body.dark .f-wd-info-banner {
  background: linear-gradient(135deg, rgba(22,101,52,0.3), rgba(5,150,105,0.15));
  border-bottom-color: rgba(34,197,94,0.2); color: #86efac;
}
body.dark .f-wd-info-banner b { color: #4ade80; }

body.dark .f-dep-info-banner {
  background: linear-gradient(135deg, rgba(30,64,175,0.3), rgba(59,130,246,0.15));
  border-bottom-color: rgba(96,165,250,0.2); color: #93c5fd;
}
body.dark .f-dep-info-banner b { color: #60a5fa; }

/* Dark: Bank Select */
body.dark .f-bank-select-trigger { background: #22252e; border-color: #363a45; color: #e2e8f0; }
body.dark .f-bank-select-trigger:hover { border-color: #4a4d55; }
body.dark .f-bank-select-trigger.active { border-color: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.15); }
body.dark .f-bank-dropdown { background: #1a1d24; border-color: #2a2d35; box-shadow: 0 -8px 30px rgba(0,0,0,0.5); }
body.dark .f-bank-option { color: #cbd5e1; border-bottom-color: #2a2d35; }
body.dark .f-bank-option:hover { background: #22252e; }
body.dark .f-bank-option.selected { background: rgba(34,197,94,0.12); color: #4ade80; }
body.dark .f-bank-option .f-bank-icon { background: #2a2d35; border-color: #3a3d45; }

/* Dark: Deposit Chips */
body.dark .f-dep-chip { background: #22252e; border-color: #363a45; }
body.dark .f-dep-chip:hover { border-color: #60a5fa; background: #2a2d35; }
body.dark .f-dep-chip.active { border-color: #3b82f6; background: rgba(59,130,246,0.12); }
body.dark .f-dep-chip-amount { color: #e2e8f0; }
body.dark .f-dep-chip-label { color: #64748b; }

/* Dark: Method Buttons */
body.dark .f-wd-method { background: #22252e; border-color: #363a45; color: #94a3b8; }
body.dark .f-wd-method.active { border-color: #22c55e; background: rgba(34,197,94,0.12); color: #4ade80; }
body.dark .f-wd-method:hover:not(.active) { background: #2a2d35; border-color: #4a4d55; }

/* Dark: History */
body.dark .f-wd-history-item { background: #22252e; }

/* Dark: Balance Boxes */





/* Override all inline background colors inside the modal */
body.dark .wallet-detail-box > div {
  border-color: #2a2d35 !important;
}
body.dark .wallet-detail-box [style*="background:#f8fafc"] {
  background: #22252e !important;
}
body.dark .wallet-detail-box [style*="background:#f0fdf4"] {
  background: rgba(34,197,94,0.08) !important;
}
body.dark .wallet-detail-box [style*="color:#1e293b"] {
  color: #e2e8f0 !important;
}
body.dark .wallet-detail-box [style*="color:#64748b"] {
  color: #94a3b8 !important;
}
body.dark .wallet-detail-box [style*="color:#0f172a"] {
  color: #e2e8f0 !important;
}
body.dark .wallet-detail-box [style*="border-bottom:1px dashed #e5e7eb"] {
  border-color: #3a3d45 !important;
}
body.dark .wallet-detail-box [style*="border-bottom:1px dashed #bbf7d0"] {
  border-color: rgba(34,197,94,0.2) !important;
}
body.dark .wallet-detail-box [style*="color:#166534"] {
  color: #86efac !important;
}
body.dark .wallet-detail-box [style*="color:#15803d"] {
  color: #4ade80 !important;
}
body.dark .wallet-detail-box [style*="color:#475569"] {
  color: #cbd5e1 !important;
}
body.dark .wallet-detail-box [style*="color:#94a3b8"] {
  color: #64748b !important;
}
body.dark .wallet-detail-box [style*="color:#1e293b"] {
  color: #e2e8f0 !important;
}
body.dark .wallet-detail-box [style*="border-bottom:1px solid #f1f5f9"] {
  border-color: #2a2d35 !important;
}

/* ═══ DARK MODE: Wallet Transaction Detail Modal ═══ */
.dark-modal-box {
  background: #1a1d24 !important;
  border: 1px solid #2a2d35 !important;
}
.dark-modal-box h2 { color: #e2e8f0 !important; }
.dark-modal-box > div { border-color: #2a2d35 !important; }
.dark-modal-box [style*="background:#f8fafc"],
.dark-modal-box [style*="background: rgb(248, 250, 252)"] {
  background: #22252e !important;
}
.dark-modal-box [style*="background:#f0fdf4"],
.dark-modal-box [style*="background: rgb(240, 253, 244)"] {
  background: rgba(34,197,94,0.08) !important;
}
.dark-modal-box [style*="color:#0f172a"],
.dark-modal-box [style*="color:#1e293b"] {
  color: #e2e8f0 !important;
}
.dark-modal-box [style*="color:#64748b"] {
  color: #94a3b8 !important;
}
.dark-modal-box [style*="color:#475569"] {
  color: #cbd5e1 !important;
}
.dark-modal-box [style*="color:#94a3b8"] {
  color: #64748b !important;
}
.dark-modal-box [style*="color:#166534"] {
  color: #86efac !important;
}
.dark-modal-box [style*="color:#15803d"] {
  color: #4ade80 !important;
}
.dark-modal-box [style*="border-bottom:1px dashed #e5e7eb"] {
  border-bottom-color: #3a3d45 !important;
}
.dark-modal-box [style*="border-bottom:1px dashed #bbf7d0"] {
  border-bottom-color: rgba(34,197,94,0.2) !important;
}
.dark-modal-box [style*="border-bottom:1px solid #f1f5f9"],
.dark-modal-box > div:first-child {
  border-bottom-color: #2a2d35 !important;
}

/* ═══ DARK MODE: Overlay backdrop ═══ */
.dark-overlay {
  background: rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(10px) !important;
}

/* ═══ Balance Boxes (Light + Dark) ═══ */
.f-balance-box {
  border-radius: 14px;
  padding: 16px;
  text-align: center;
  margin-bottom: 20px;
}
.f-balance-green {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
}
.f-balance-blue {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
}
.f-balance-box p { margin: 0; }
.f-balance-box p:first-child { font-size: 12px; }
.f-balance-box p:last-child { font-size: 24px; font-weight: 900; }

/* Dark variants */
body.dark .f-balance-green {
  background: linear-gradient(135deg, rgba(22,101,52,0.25), rgba(5,150,105,0.1));
  border: 1px solid rgba(34,197,94,0.15);
}
body.dark .f-balance-green p:first-child { color: #86efac; }
body.dark .f-balance-green p:last-child { color: #4ade80; }

body.dark .f-balance-blue {
  background: linear-gradient(135deg, rgba(30,64,175,0.25), rgba(59,130,246,0.1));
  border: 1px solid rgba(96,165,250,0.15);
}
body.dark .f-balance-blue p:first-child { color: rgba(255,255,255,0.7); }
body.dark .f-balance-blue p:last-child { color: #ffffff; font-weight:900; }

/* Light mode text */
.f-balance-green p:first-child { color: #166534; }
.f-balance-green p:last-child { color: #059669; }
.f-balance-blue p:first-child { color: #1e40af; }
.f-balance-blue p:last-child { color: #2563eb; }

/* Dark: Close button in tx detail modal */
.dark-modal-box button[style*="background:#f1f5f9"],
.dark-modal-box [onclick*="remove()"] {
  background: #1e3a5f !important;
  color: #ffffff !important;
}
.dark-modal-box [style*="background:#f1f5f9"]:hover {
  background: #2563eb !important;
}

/* ============================================
   FANUS INVENTORY SYSTEM - Material Design 3
   ============================================ */

/* === Inventory Stats Cards === */
.f-inventory-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .f-inventory-stats { grid-template-columns: repeat(4, 1fr); }
}

.f-inventory-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.f-inventory-actions .f-btn {
  flex: 1;
  min-width: 140px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.f-inventory-actions .f-btn i { width: 16px; height: 16px; }

/* === Inventory Item Card === */
.f-inventory-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--md-surface, #fff);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.10);
  cursor: pointer;
  transition: all .15s cubic-bezier(.2,0,0,1);
  border: 1px solid transparent;
}
.f-inventory-item:hover {
  box-shadow: 0 4px 16px rgba(99,102,241,0.12), 0 2px 6px rgba(0,0,0,.06);
  transform: translateY(-2px);
  border-color: rgba(99,102,241,0.2);
}
.f-inventory-item-img {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--f-gray-100, #f3f4f6);
}
.f-inventory-item-info { flex: 1; min-width: 0; }
.f-inventory-item-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--md-on-surface, #161D1C);
  margin: 0 0 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.f-inventory-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.f-inventory-item-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.f-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: var(--f-gray-100, #f3f4f6);
  color: var(--f-gray-700, #374151);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s cubic-bezier(.2,0,0,1);
}
.f-icon-btn:hover { background: var(--f-green-100, #dcfce7); color: var(--f-green-700, #047857); }
.f-icon-btn i { width: 16px; height: 16px; }
.f-icon-btn-add:hover { background: rgba(99,102,241,0.1); color: #6366f1; }
.f-icon-btn-sub:hover { background: #fee2e2; color: #ef4444; }

/* === Badges === */
.f-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  line-height: 1.6;
}
.f-badge-green { background: #dcfce7; color: #047857; }
.f-badge-red { background: #fee2e2; color: #ef4444; }
.f-badge-orange { background: #fed7aa; color: #c2410c; }
.f-badge-gray { background: var(--f-gray-100, #f3f4f6); color: var(--f-gray-600, #4b5563); }
.f-badge-purple { background: #ede9fe; color: #6366f1; }

/* === SKU display === */
.f-inventory-sku {
  font-family: 'Courier New', monospace;
  font-size: 10px;
  color: var(--f-gray-500, #6b7280);
  background: var(--f-gray-100, #f3f4f6);
  padding: 1px 6px;
  border-radius: 4px;
}
.f-inventory-qty {
  font-size: 12px;
  font-weight: 700;
  color: #047857;
}

/* === Sidebar Badge === */
.f-sidebar-badge {
  margin-right: auto;
  margin-left: 8px;
  background: #f59e0b;
  color: white;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 9999px;
  min-width: 18px;
  text-align: center;
  line-height: 1.4;
}

/* === Channel Buttons === */
.f-channel-btn {
  padding: 10px 8px;
  background: var(--f-gray-50, #f9fafb);
  border: 1.5px solid var(--f-gray-200, #e5e7eb);
  border-radius: 12px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--f-gray-700, #374151);
  transition: all .15s cubic-bezier(.2,0,0,1);
  font-family: inherit;
}
.f-channel-btn:hover { border-color: #10b981; }
.f-channel-btn.active {
  background: #f0fdf4;
  border-color: #10b981;
  color: #047857;
}

/* === Stock Log Timeline === */
.f-stock-log-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: var(--f-gray-50, #f9fafb);
  border-radius: 12px;
  position: relative;
  border: 1px solid var(--f-gray-100, #f3f4f6);
}
.f-stock-log-item::before {
  content: '';
  position: absolute;
  right: 22px;
  top: 44px;
  bottom: -8px;
  width: 2px;
  background: var(--f-gray-200, #e5e7eb);
}
.f-stock-log-item:last-child::before { display: none; }
.f-stock-log-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
  z-index: 1;
  font-weight: 800;
}
.f-stock-log-icon.add { background: #dcfce7; color: #047857; }
.f-stock-log-icon.subtract { background: #fee2e2; color: #ef4444; }
.f-stock-log-icon.set { background: #dbeafe; color: #2563eb; }
.f-stock-log-content { flex: 1; }
.f-stock-log-text { font-size: 13px; font-weight: 600; color: var(--md-on-surface, #161D1C); }
.f-stock-log-meta { font-size: 11px; color: var(--f-gray-500, #6b7280); margin-top: 2px; }
.f-stock-log-change { font-size: 13px; font-weight: 800; }

/* === Stock Adjust Preview === */
#adjustPreview {
  transition: all .15s cubic-bezier(.2,0,0,1);
}

/* === Track Inventory Checkbox Area === */
#inventoryFields {
  border: 1.5px dashed #991b1b;
  border-radius: 14px;
  transition: all .25s cubic-bezier(.2,0,0,1);
  animation: fadeIn .25s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* === Spinner === */
.f-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--f-gray-200, #e5e7eb);
  border-top-color: #10b981;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* === Adjust Buttons active state === */
#btnAdjustAdd.active,
#btnAdjustSub.active,
#btnAdjustSet.active {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(16,185,129,0.3);
}

/* === Dark Mode === */
body.dark .f-inventory-item,
body.dark .f-stat-card {
  background: #1a1d1c;
  border-color: rgba(255,255,255,0.08);
}
body.dark .f-stock-log-item {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.06);
}
body.dark .f-inventory-sku {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.6);
}
body.dark .f-icon-btn {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.8);
}
body.dark .f-channel-btn {
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.8);
  border-color: rgba(255,255,255,0.1);
}
body.dark #inventoryFields {
  background: rgba(0,0,0,0.2) !important;
  border-color: rgba(153,27,27,0.5) !important;
}
body.dark .f-inventory-item-name { color: rgba(255,255,255,0.95); }
body.dark .f-stock-log-text { color: rgba(255,255,255,0.9); }
body.dark #stockLogProductInfo,
body.dark #stockAdjustProductInfo {
  background: rgba(255,255,255,0.04) !important;
  color: rgba(255,255,255,0.9);
}
body.dark #adjustPreview {
  background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(14,165,233,0.1)) !important;
  color: rgba(255,255,255,0.9);
}



/* =============================================
   INVENTORY PRODUCT SECTION - فرم ویرایش محصول
   ============================================= */

.inv-product-section {
  background: linear-gradient(145deg, rgba(99,102,241,0.03) 0%, rgba(139,92,246,0.02) 50%, rgba(16,185,129,0.03) 100%);
  border: 1px solid rgba(99,102,241,0.12);
  border-radius: 20px;
  padding: 4px 0;
  margin-top: 12px;
  margin-bottom: 16px;
  overflow: hidden;
}

/* ── ردیف‌های عمودی ── */
.inv-product-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  gap: 12px;
  direction: rtl;
}
.inv-product-row-border {
  border-top: 1px solid rgba(99,102,241,0.08);
}
.inv-product-label {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  white-space: nowrap;
}
body.dark .inv-product-label { color: rgba(255,255,255,0.9); }

/* ── شمارنده +/- اصلی ── */
.inv-counter-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid rgba(99,102,241,0.15);
  background: white;
  transition: border-color .2s, box-shadow .2s;
}
.inv-counter-wrap:focus-within {
  border-color: rgba(99,102,241,0.5);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
}
body.dark .inv-counter-wrap { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.15); }
body.dark .inv-counter-wrap:focus-within { border-color: rgba(139,92,246,0.6); }

.inv-counter-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  cursor: pointer;
  transition: all .15s cubic-bezier(.4,0,.2,1);
  flex-shrink: 0;
  font-size: 18px;
  font-weight: 800;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.inv-counter-btn:active {
  transform: scale(0.92);
}
.inv-counter-minus {
  background: transparent;
  color: #6366f1;
}
.inv-counter-minus:hover {
  background: rgba(99,102,241,0.08);
}
.inv-counter-minus:active {
  background: rgba(99,102,241,0.15);
}

.inv-counter-plus {
  background: #6366f1;
  color: white;
  border-radius: 0;
}
.inv-counter-plus:hover {
  background: #5558e6;
}
.inv-counter-plus:active {
  background: #4f46e5;
}
.inv-counter-plus svg {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}

.inv-counter-value {
  width: 64px;
  height: 44px;
  border: none;
  outline: none;
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  color: #1e293b;
  background: transparent;
  font-family: inherit;
  direction: ltr;
  -moz-appearance: textfield;
  letter-spacing: 0.5px;
}
.inv-counter-value::-webkit-outer-spin-button,
.inv-counter-value::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
body.dark .inv-counter-value { color: rgba(255,255,255,0.95); }

/* ── شمارنده کوچک (آستانه هشدار) ── */
.inv-counter-sm .inv-counter-btn { width: 40px; height: 40px; border-radius: 10px; }
.inv-counter-sm .inv-counter-btn.inv-counter-minus { border-radius: 0 10px 10px 0; }
.inv-counter-sm .inv-counter-btn.inv-counter-plus { border-radius: 10px 0 0 10px; }
.inv-counter-sm .inv-counter-value { width: 56px; height: 40px; font-size: 17px; font-weight: 800; }
.inv-counter-sm { border-radius: 12px; border-width: 2px; gap: 0; }

/* ── تگل مدیریت انبارداری ── */
/* ═══ مخفی کردن کل بخش موجودی (وقتی تگل «موجود در فروشگاه» خاموشه) ═══ */
.inv-product-section.inv-hidden {
  display: none !important;
}


/* ═══ حالت غیرفعال بخش موجودی (وقتی تگل «موجود در فروشگاه» خاموشه) ═══ */
.f-ps-inv-section.inv-disabled {
  opacity: 0.55;
  pointer-events: none;
  position: relative;
}
.f-ps-inv-section.inv-disabled .f-ps-inv-counter-btn {
  opacity: 0.3;
  cursor: not-allowed;
}
.f-ps-inv-section.inv-disabled .f-ps-inv-counter-val {
  color: var(--f-gray-400);
  cursor: not-allowed;
}
.f-ps-inv-section.inv-disabled .f-toggle {
  opacity: 0.35;
  cursor: not-allowed;
}
.f-ps-inv-section.inv-disabled .f-ps-inv-row-title,
.f-ps-inv-section.inv-disabled .f-ps-inv-row-desc {
  color: var(--f-gray-400);
}
.f-ps-inv-section.inv-disabled .f-ps-inv-history {
  opacity: 0.3;
}
/* ═══ تگل اصلی: موجود در فروشگاه ═══ */
.inv-store-toggle-row {
  background: linear-gradient(135deg, rgba(16,185,129,0.04), rgba(16,185,129,0.02));
  border-radius: 12px;
  margin: 8px 18px 4px;
  border: 1px solid rgba(16,185,129,0.1);
}
body.dark .inv-store-toggle-row {
  background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(16,185,129,0.04));
  border-color: rgba(16,185,129,0.15);
}

.inv-track-toggle-wrap {
  padding: 14px 18px 6px;
  position: relative;
}

/* ═══ تگل مدیریت تعداد موجودی - بازنویسی حرفه‌ای شبیه f-toggle ═══ */
.inv-track-toggle {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  cursor: pointer;
  transition: all .2s;
  background: rgba(99,102,241,0.04);
  border: 1px solid rgba(99,102,241,0.08);
  position: relative;  /* برای absolute کردن زنگوله */
  overflow: visible;
}
.inv-track-toggle-main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.inv-track-toggle:hover {
  background: rgba(99,102,241,0.07);
  border-color: rgba(99,102,241,0.15);
}
body.dark .inv-track-toggle { background: rgba(139,92,246,0.08); border-color: rgba(139,92,246,0.15); }
body.dark .inv-track-toggle:hover { background: rgba(139,92,246,0.12); }

/* ═══ حالت فعال: پس‌زمینه پررنگ‌تر ═══ */
.inv-track-toggle.active {
  background: linear-gradient(135deg, rgba(99,102,241,0.12) 0%, rgba(139,92,246,0.08) 100%);
  border-color: rgba(99,102,241,0.25);
}
body.dark .inv-track-toggle.active {
  background: linear-gradient(135deg, rgba(139,92,246,0.15) 0%, rgba(99,102,241,0.1) 100%);
  border-color: rgba(139,92,246,0.3);
}

/* ═══ حالت غیرفعال: آیکون و متن کم‌رنگ ═══ */
.inv-track-toggle:not(.active) .inv-track-toggle-icon {
  background: #cbd5e1 !important;
  color: #94a3b8 !important;
  box-shadow: none !important;
}
body.dark .inv-track-toggle:not(.active) .inv-track-toggle-icon {
  background: rgba(255,255,255,0.15) !important;
  color: rgba(255,255,255,0.5) !important;
}
.inv-track-toggle:not(.active) .inv-track-toggle-title {
  color: #94a3b8 !important;
}
body.dark .inv-track-toggle:not(.active) .inv-track-toggle-title {
  color: rgba(255,255,255,0.5) !important;
}
.inv-track-toggle:not(.active) .inv-track-toggle-desc {
  color: #cbd5e1 !important;
}
body.dark .inv-track-toggle:not(.active) .inv-track-toggle-desc {
  color: rgba(255,255,255,0.35) !important;
}

.inv-track-toggle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(99,102,241,0.25);
  transition: all .2s;
}
.inv-track-toggle-text {
  flex: 1;
  min-width: 0;
}
.inv-track-toggle-title {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.3;
  transition: color .2s;
}
body.dark .inv-track-toggle-title { color: rgba(255,255,255,0.95); }
.inv-track-toggle-desc {
  display: block;
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
  line-height: 1.4;
  transition: color .2s;
}
body.dark .inv-track-toggle-desc { color: rgba(255,255,255,0.5); }

/* ═══ سوئیچ تگل - برعکس f-toggle: دایره سمت راست، وقتی روشن میره سمت چپ ═══ */
.inv-track-toggle input:checked ~ .inv-track-toggle-main ~ .inv-track-toggle-switch .inv-track-toggle-track {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
}
.inv-track-toggle input:checked ~ .inv-track-toggle-main ~ .inv-track-toggle-switch .inv-track-toggle-track::before {
  transform: translateX(-20px);
}
.inv-track-toggle-switch {
  flex-shrink: 0;
  order: 2;
}
.inv-track-toggle-track {
  display: block;
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: #cbd5e1;
  position: relative;
  transition: background .25s;
}
.inv-track-toggle-track::before {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;   /* پیش‌فرض: دایره سمت راست */
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  transition: transform .25s cubic-bezier(.4,0,.2,1);
}
body.dark .inv-track-toggle-track { background: rgba(255,255,255,0.2); }


/* ═══ زنگوله شناور آستانه هشدار - گوشه پایین تگل ═══ */
.inv-alert-float-btn {
  position: absolute;
  bottom: -6px;
  left: 16px;
  display: none;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border: 2px solid white;
  color: white;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
  z-index: 5;
  box-shadow: 0 3px 10px rgba(99,102,241,0.4);
  line-height: 1;
}
.inv-alert-float-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 5px 14px rgba(99,102,241,0.55);
}
.inv-alert-float-btn:active {
  transform: scale(0.95);
}
.inv-alert-float-btn.visible {
  display: inline-flex;
}
body.dark .inv-alert-float-btn {
  border-color: #1e293b;
  box-shadow: 0 3px 10px rgba(139,92,246,0.5);
}

/* ═══ پاپ‌آور آستانه هشدار ═══ */
.inv-alert-popover {
  position: absolute;
  top: calc(100% + 14px);
  left: 12px;
  right: 12px;
  background: white;
  border-radius: 18px;
  padding: 20px 18px 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.15), 0 4px 12px rgba(0,0,0,0.08);
  border: 1px solid rgba(99,102,241,0.12);
  display: none;
  z-index: 50;
  animation: invSlideDown .25s cubic-bezier(.4,0,.2,1);
}
.inv-alert-popover.open {
  display: block;
}
.inv-alert-popover-title {
  font-size: 15px;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 4px;
  text-align: center;
}
.inv-alert-popover-desc {
  font-size: 11px;
  color: #94a3b8;
  margin-bottom: 14px;
  line-height: 1.6;
  text-align: center;
}
.inv-alert-popover-counter {
  margin: 0 auto 14px;
  display: flex;
  justify-content: center;
}

.inv-alert-popover-close {
  width: 100%;
  padding: 11px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
}
.inv-alert-popover-close:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(99,102,241,0.4);
}
body.dark .inv-alert-popover {
  background: #1e293b;
  border-color: rgba(139,92,246,0.3);
}
body.dark .inv-alert-popover-title {
  color: rgba(255,255,255,0.95);
}
body.dark .inv-alert-popover-desc {
  color: rgba(255,255,255,0.5);
}
body.dark .inv-alert-popover-counter {
  background: #0f172a;
  border-color: rgba(139,92,246,0.25);
}
body.dark .inv-alert-popover-counter .inv-counter-value {
  color: rgba(255,255,255,0.95);
}
body.dark .inv-alert-popover-counter .inv-counter-btn.inv-counter-minus {
  background: linear-gradient(135deg, #334155, #475569);
  color: rgba(255,255,255,0.85);
  border-color: rgba(139,92,246,0.25);
}
body.dark .inv-alert-popover-counter .inv-counter-btn.inv-counter-minus:hover {
  background: linear-gradient(135deg, #475569, #64748b);
}

.inv-history-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(99,102,241,0.06) 0%, rgba(139,92,246,0.04) 100%);
  color: #6366f1;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all .2s;
  border: 1px solid rgba(99,102,241,0.12);
}
.inv-history-btn:hover {
  background: linear-gradient(135deg, rgba(99,102,241,0.1) 0%, rgba(139,92,246,0.07) 100%);
  border-color: rgba(99,102,241,0.25);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99,102,241,0.12);
}
.inv-history-btn:active {
  transform: translateY(0);
}
body.dark .inv-history-btn { color: #a78bfa; }

/* ── حالت غیرفعال شمارنده ── */
.inv-counter-wrap.disabled {
  opacity: 0.45;
  pointer-events: none;
}
.inv-product-row.disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* ── حالت تمرکز روی فیلدها ── */
.f-input-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--f-gray-600, #64748b);
  margin-bottom: 4px;
  display: block;
}
body.dark .f-input-group label { color: rgba(255,255,255,0.6); }

/* ── Responsive ── */
@media (max-width: 480px) {
  .inv-product-row { padding: 12px 14px; }
  .inv-counter-btn { width: 40px; height: 40px; }
  .inv-counter-value { width: 56px; height: 40px; font-size: 16px; }
  .inv-advanced-grid { grid-template-columns: 1fr; gap: 10px; }
  .inv-counter-sm .inv-counter-btn { width: 30px; height: 30px; }
  .inv-counter-sm .inv-counter-value { width: 42px; height: 30px; font-size: 14px; }
}



/* === Inventory Products List (style.css fallback) === */
.inv-products-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* === Responsive === */
@media (max-width: 640px) {
  .f-inventory-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .f-inventory-item { padding: 10px; gap: 10px; }
  .f-inventory-item-img { width: 48px; height: 48px; }
  .f-inventory-item-actions { gap: 2px; }
  .f-icon-btn { width: 28px; height: 28px; }
  .f-icon-btn i { width: 14px; height: 14px; }
  .f-inventory-actions .f-btn { font-size: 13px; padding: 10px; }
}

/* ══════════════════════════════════════════════════════════════ */
/* سیستم تنوع محصولات - نسخه حرفه‌ای */
/* ══════════════════════════════════════════════════════════════ */

/* هاور دکمه تنوع */
#variantBtn { transition: all .2s cubic-bezier(.4,0,.2,1); }
#variantBtn:hover { border-color: #8b5cf6 !important; background: #faf5ff !important; box-shadow: 0 4px 16px rgba(139,92,246,0.12); }
#variantBtn:active { transform: scale(0.98); }
body.dark #variantBtn { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
body.dark #variantBtn:hover { border-color: rgba(139,92,246,0.4) !important; background: rgba(139,92,246,0.08) !important; }
body.dark #variantBtn .f-card-subtitle { color: rgba(255,255,255,0.5); }
body.dark #variantModal .f-modal { background: #1e293b !important; }
body.dark #variantModal .f-modal > div:first-child { border-bottom-color: rgba(255,255,255,0.06) !important; }
body.dark #variantModal h3 { color: rgba(255,255,255,0.95) !important; }
body.dark #variantModal p { color: rgba(255,255,255,0.4) !important; }
body.dark #variantModal .f-modal > div:last-child { border-top-color: rgba(255,255,255,0.06) !important; }

/* چیپ‌های ویژگی */
.var-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; background: #fff; border: 2px solid #e2e8f0;
  border-radius: 50px; cursor: pointer; font-family: inherit;
  font-size: 14px; font-weight: 600; color: #475569;
  transition: all .2s cubic-bezier(.4,0,.2,1); white-space: nowrap; user-select: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.var-chip:hover { border-color: #c4b5fd; color: #7c3aed; background: #faf5ff; box-shadow: 0 2px 8px rgba(139,92,246,0.1); }
.var-chip:active { transform: scale(0.96); }
.var-chip.selected {
  background: linear-gradient(135deg, #f5f3ff, #ede9fe); border-color: #8b5cf6;
  color: #7c3aed; box-shadow: 0 2px 12px rgba(139,92,246,0.15);
}
.var-chip.disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
.var-chip-emoji { font-size: 18px; line-height: 1; }

/* سکشن ویژگی inline */
.var-attr-section {
  background: #f8f9fb; border: 1px solid #f1f3f5; border-radius: 18px;
  padding: 20px; margin-bottom: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}
.var-attr-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
}
.var-attr-title {
  font-size: 16px; font-weight: 800; color: #1e293b; margin: 0;
  display: flex; align-items: center; gap: 8px;
}
.var-attr-delete {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
  cursor: pointer; color: #9ca3af; transition: all .15s;
}
.var-attr-delete:hover { color: #ef4444; border-color: #fecaca; background: #fef2f2; }
.var-attr-hint {
  font-size: 13px; color: #94a3b8; margin: 0 0 14px; text-align: center;
  font-weight: 500;
}

/* کارت مقدار */
.var-val-card {
  display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  padding: 12px 14px; background: #fff; border: 1px solid #e8eaed;
  border-radius: 14px; margin-bottom: 8px;
  transition: all .2s; box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.var-val-card:hover { border-color: #d1d5db; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.var-val-text {
  flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: #1e293b;
  display: flex; align-items: center; gap: 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.var-val-remove {
  width: 32px; height: 32px; margin-inline-start: auto; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid transparent; border-radius: 8px;
  cursor: pointer; color: #cbd5e1; transition: all .15s; flex-shrink: 0;
}
.var-val-remove:hover { color: #ef4444; border-color: #fecaca; background: #fef2f2; }

/* فیلد ورودی مقدار */
.var-val-input {
  width: 100%; border: 2px solid #e8eaed; border-radius: 14px;
  padding: 14px 18px; font-size: 14px; font-family: inherit;
  background: #fff; outline: none; transition: all .2s;
  box-sizing: border-box; color: #1e293b;
}
.var-val-input:focus { border-color: #8b5cf6; box-shadow: 0 0 0 4px rgba(139,92,246,0.08); }
.var-val-input::placeholder { color: #b0b8c4; font-weight: 400; }

/* هاور دکمه ویژگی دلخواه */
#addCustomAttrBtn {
  transition: all .2s cubic-bezier(.4,0,.2,1);
}
#addCustomAttrBtn:hover { border-color: #8b5cf6 !important; color: #7c3aed !important; background: #faf5ff !important; }

/* انیمیشن ظاهر شدن سکشن */
@keyframes varSectionFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.var-attr-section { animation: varSectionFadeIn .3s cubic-bezier(.4,0,.2,1); }

/* انیمیشن مقدار جدید */
@keyframes varValFadeIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.var-val-card { animation: varValFadeIn .25s cubic-bezier(.4,0,.2,1); }

/* Dark mode */
body.dark .var-chip { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.7); }
body.dark .var-chip:hover { border-color: rgba(139,92,246,0.4); color: #a78bfa; }
body.dark .var-chip.selected { background: rgba(139,92,246,0.15); border-color: #8b5cf6; color: #a78bfa; }
body.dark .var-attr-section { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.06); }
body.dark .var-attr-title { color: rgba(255,255,255,0.95); }
body.dark .var-attr-hint { color: rgba(255,255,255,0.4); }
body.dark .var-attr-delete { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.4); }
body.dark .var-attr-delete:hover { color: #f87171; background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.3); }
body.dark .var-val-card { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.08); }
body.dark .var-val-text { color: rgba(255,255,255,0.9); }
body.dark .var-val-remove { color: rgba(255,255,255,0.3); }
body.dark .var-val-remove:hover { color: #f87171; background: rgba(239,68,68,0.1); }
body.dark .var-val-input { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.9); }
body.dark .var-val-input::placeholder { color: rgba(255,255,255,0.3); }
body.dark .var-val-input:focus { border-color: #8b5cf6; box-shadow: 0 0 0 4px rgba(139,92,246,0.15); }

/* ── دارک مود bottom sheet حذف ویژگی ── */
body.dark #deleteAttrSheet > div { background: #1e293b; }
body.dark #deleteAttrSheet h3 { color: rgba(255,255,255,0.95); }
body.dark #deleteAttrSheet p { color: rgba(255,255,255,0.5); }
body.dark #deleteAttrSheet button:first-of-type { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.8); }


/* ═══════════════════════════════════════════════════════════════════
   VARIANT TAG INPUT SYSTEM v2 — سیستم ورودی تگ پویا
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tag Container ── */
.var-tag-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  min-height: 48px;
  background: #fff;
  border: 2px solid #e8eaed;
  border-radius: 14px;
  transition: all .2s;
  cursor: text;
}
.var-tag-wrap:focus-within {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 4px rgba(139,92,246,0.08);
}

/* ── Individual Tag ── */
.var-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: linear-gradient(135deg, #f5f3ff, #ede9fe);
  border: 1px solid #c4b5fd;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  color: #7c3aed;
  animation: varTagPop .2s cubic-bezier(.34,1.56,.64,1);
  user-select: none;
}
.var-tag-text {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.var-tag-remove {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(139,92,246,0.15);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: #7c3aed;
  font-size: 12px;
  line-height: 1;
  transition: all .15s;
  padding: 0;
  flex-shrink: 0;
}
.var-tag-remove:hover {
  background: #ef4444;
  color: #fff;
}

@keyframes varTagPop {
  from { opacity: 0; transform: scale(0.7); }
  to { opacity: 1; transform: scale(1); }
}

/* ── Tag Input (inline inside tag wrap) ── */
.var-tag-input {
  flex: 1;
  min-width: 120px;
  border: none;
  outline: none;
  font-size: 14px;
  font-family: inherit;
  background: transparent;
  color: #1e293b;
  padding: 4px 0;
  direction: rtl;
}
.var-tag-input::placeholder {
  color: #b0b8c4;
  font-weight: 400;
}

/* ── Bulk Operations Bar ── */
.var-bulk-bar {
  background: #f8f9fb;
  border: 1px solid #f1f3f5;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.var-bulk-title {
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 6px;
}
.var-bulk-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.var-bulk-input {
  flex: 1;
  padding: 10px 14px;
  border: 2px solid #e8eaed;
  border-radius: 12px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
  color: #1e293b;
  outline: none;
  transition: all .2s;
  direction: rtl;
}
.var-bulk-input:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139,92,246,0.08);
}
.var-bulk-input::placeholder {
  color: #b0b8c4;
}
.var-bulk-btn {
  padding: 10px 16px;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
  font-family: inherit;
}
.var-bulk-btn:hover {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  box-shadow: 0 2px 8px rgba(139,92,246,0.25);
}
.var-bulk-btn:active {
  transform: scale(0.96);
}
.var-bulk-btn-outline {
  background: #fff;
  color: #8b5cf6;
  border: 1.5px solid #c4b5fd;
}
.var-bulk-btn-outline:hover {
  background: #faf5ff;
  border-color: #8b5cf6;
}

/* ── Variants Table ── */
.var-table-wrap {
  border: 1px solid #f1f3f5;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}
.var-table-header {
  display: grid;
  grid-template-columns: 1fr 100px 90px 90px 40px;
  gap: 8px;
  padding: 12px 16px;
  background: #f8f9fb;
  border-bottom: 1px solid #f1f3f5;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.var-table-row {
  display: grid;
  grid-template-columns: 1fr 100px 90px 90px 40px;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid #f8f9fb;
  align-items: center;
  transition: background .15s;
}
.var-table-row:last-child {
  border-bottom: none;
}
.var-table-row:hover {
  background: #faf5ff;
}
.var-table-combo {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.var-combo-tag {
  padding: 3px 8px;
  background: #f5f3ff;
  border: 1px solid #ede9fe;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #7c3aed;
}
.var-table-input {
  width: 100%;
  padding: 8px 10px;
  border: 1.5px solid #e8eaed;
  border-radius: 10px;
  font-size: 12px;
  font-family: inherit;
  text-align: center;
  background: #fff;
  color: #1e293b;
  outline: none;
  transition: all .2s;
  direction: rtl;
}
.var-table-input:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 2px rgba(139,92,246,0.08);
}
.var-table-remove {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  color: #cbd5e1;
  transition: all .15s;
}
.var-table-remove:hover {
  color: #ef4444;
  border-color: #fecdd3;
  background: #fff1f2;
}

/* ── Variant Summary ── */
.var-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(135deg, #f5f3ff, #ede9fe);
  border: 1px solid #e0d7fa;
  border-radius: 14px;
  margin-bottom: 16px;
}
.var-summary-text {
  font-size: 13px;
  font-weight: 700;
  color: #7c3aed;
}
.var-summary-count {
  font-size: 20px;
  font-weight: 900;
  color: #7c3aed;
}

/* ── Empty tag wrap ── */
.var-tag-wrap:empty::before {
  content: attr(data-placeholder);
  color: #b0b8c4;
  font-size: 14px;
  pointer-events: none;
}

/* ── Dark mode tag system ── */
body.dark .var-tag-wrap {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
}
body.dark .var-tag-wrap:focus-within {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 4px rgba(139,92,246,0.15);
}
body.dark .var-tag {
  background: rgba(139,92,246,0.15);
  border-color: rgba(139,92,246,0.3);
  color: #a78bfa;
}
body.dark .var-tag-remove {
  background: rgba(139,92,246,0.2);
  color: #a78bfa;
}
body.dark .var-tag-input {
  color: rgba(255,255,255,0.9);
}
body.dark .var-tag-input::placeholder {
  color: rgba(255,255,255,0.3);
}
body.dark .var-bulk-bar {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.06);
}
body.dark .var-bulk-title {
  color: rgba(255,255,255,0.5);
}
body.dark .var-bulk-input {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.9);
}
body.dark .var-bulk-input::placeholder {
  color: rgba(255,255,255,0.3);
}
body.dark .var-table-wrap {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.06);
}
body.dark .var-table-header {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.4);
}
body.dark .var-table-row {
  border-color: rgba(255,255,255,0.04);
}
body.dark .var-table-row:hover {
  background: rgba(139,92,246,0.05);
}
body.dark .var-combo-tag {
  background: rgba(139,92,246,0.1);
  border-color: rgba(139,92,246,0.2);
  color: #a78bfa;
}
body.dark .var-table-input {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.9);
}
body.dark .var-table-input::placeholder {
  color: rgba(255,255,255,0.3);
}
body.dark .var-summary {
  background: rgba(139,92,246,0.1);
  border-color: rgba(139,92,246,0.2);
}
body.dark .var-summary-text,
body.dark .var-summary-count {
  color: #a78bfa;
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .var-table-header,
  .var-table-row {
    grid-template-columns: 1fr 80px 70px 70px 32px;
    gap: 6px;
    padding: 10px 12px;
  }
  .var-bulk-row {
    flex-direction: column;
  }
  .var-bulk-input {
    width: 100%;
  }
  .var-bulk-btn {
    width: 100%;
    text-align: center;
  }
}

/* ═══════════════════════════════════════════════════════════════════

/* ═══════════════════════════════════════════════════════════════════
   PRICING MODAL — مودال قیمت‌گذاری تنوع‌ها
   ═══════════════════════════════════════════════════════════════════ */

/* ── Accordion ── */
.pricing-acc {
  border: 1px solid #f1f3f5;
  border-radius: 16px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: all .2s;
  background: #fff;
}
.pricing-acc:hover {
  border-color: #e2e8f0;
}
.pricing-acc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 20px;
  background: #fff;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  transition: all .15s;
  text-align: right;
}
.pricing-acc-header:hover {
  background: #fafbfc;
}
.pricing-acc-label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pricing-acc-arrow {
  transition: transform .25s cubic-bezier(.4,0,.2,1);
  color: #94a3b8;
  flex-shrink: 0;
}
.pricing-acc-body {
  max-height: 0;
  overflow: hidden;
  padding: 0 20px;
  opacity: 0;
  transition: max-height .3s cubic-bezier(.4,0,.2,1), opacity .2s, padding .2s;
}

/* ── Field Groups ── */
.pricing-field-group {
  padding-top: 16px;
  border-top: 1px solid #f1f3f5;
}
.pricing-field-group:first-child {
  border-top: none;
  padding-top: 0;
}
.pricing-field-title {
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 10px;
}
.pricing-field {
  margin-bottom: 12px;
}
.pricing-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 6px;
}
.pricing-input-wrap {
  display: flex;
  align-items: center;
  background: #fff;
  border: 2px solid #e8eaed;
  border-radius: 14px;
  padding: 0 14px;
  transition: all .2s;
}
.pricing-input-wrap:focus-within {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 4px rgba(139,92,246,0.08);
}
.pricing-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 14px 0;
  font-size: 14px;
  font-family: inherit;
  background: transparent;
  color: #1e293b;
  direction: rtl;
  text-align: right;
}
.pricing-input::placeholder {
  color: #b0b8c4;
}
.pricing-unit {
  font-size: 13px;
  font-weight: 600;
  color: #94a3b8;
  white-space: nowrap;
  padding-right: 8px;
  border-right: 1px solid #e8eaed;
}

/* ── Quantity Control ── */
.pricing-qty-btn {
  width: 42px;
  height: 42px;
  border: 2px solid #e8eaed;
  border-radius: 12px;
  background: #fff;
  color: #64748b;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  font-family: inherit;
}
.pricing-qty-btn:hover {
  border-color: #8b5cf6;
  color: #8b5cf6;
  background: #faf5ff;
}
.pricing-qty-btn:active {
  transform: scale(0.95);
}
.pricing-qty-input {
  width: 60px;
  text-align: center;
  border: 2px solid #e8eaed;
  border-radius: 12px;
  padding: 10px;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  color: #1e293b;
  background: #fff;
  outline: none;
  transition: all .2s;
}
.pricing-qty-input:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139,92,246,0.08);
}

/* ── Toggle Switch ── */
.pricing-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  cursor: pointer;
}
.pricing-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.pricing-toggle-slider {
  position: absolute;
  inset: 0;
  background: #d1d5db;
  border-radius: 24px;
  transition: all .25s;
}
.pricing-toggle-slider::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  left: 2px;
  bottom: 2px;
  background: #fff;
  border-radius: 50%;
  transition: all .25s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.pricing-toggle input:checked + .pricing-toggle-slider {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}
.pricing-toggle input:checked + .pricing-toggle-slider::before {
  transform: translateX(20px);
}

/* ── Dark mode ── */
body.dark #pricingModal .f-modal {
  background: #1e293b !important;
}
body.dark #pricingModal h3 {
  color: rgba(255,255,255,0.95) !important;
}
body.dark #pricingModal .pricing-body {
  color: rgba(255,255,255,0.7);
}
body.dark .pricing-acc {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.06);
}
body.dark .pricing-acc-header {
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.9);
}
body.dark .pricing-acc-header:hover {
  background: rgba(255,255,255,0.05);
}
body.dark .pricing-field-group {
  border-color: rgba(255,255,255,0.06);
}
body.dark .pricing-label {
  color: rgba(255,255,255,0.7);
}
body.dark .pricing-input-wrap {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
}
body.dark .pricing-input {
  color: rgba(255,255,255,0.9);
}
body.dark .pricing-input::placeholder {
  color: rgba(255,255,255,0.3);
}
body.dark .pricing-unit {
  color: rgba(255,255,255,0.4);
  border-color: rgba(255,255,255,0.1);
}
body.dark .pricing-qty-btn {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.6);
}
body.dark .pricing-qty-input {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.9);
}
body.dark .pricing-toggle-slider {
  background: rgba(255,255,255,0.15);
}

   PRODUCT MODAL v2 — بازطراحی حرفه‌ای
   ═══════════════════════════════════════════════════════════════════ */

/* ── Modal Container ── */
.f-product-modal {
  display: flex !important;
  flex-direction: column;
  max-height: 100vh;
  height: 100vh;
  border-radius: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
}
@media (min-width: 481px) {
  .f-product-modal {
    max-height: 92vh;
    height: auto;
    max-width: 480px;
    margin: auto !important;
    border-radius: var(--f-radius-2xl) !important;
  }
}

/* ── Header ── */
.f-product-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  background: white;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 10;
}
body.dark .f-product-header { background: #1e293b; border-color: rgba(255,255,255,0.06); }

.f-product-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: var(--f-gray-100);
  border-radius: 12px;
  cursor: pointer;
  color: var(--f-gray-700);
  transition: all 0.15s;
}
.f-product-back:active { transform: scale(0.92); background: var(--f-gray-200); }
body.dark .f-product-back { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.8); }

.f-product-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--f-gray-900);
  margin: 0;
}
body.dark .f-product-title { color: rgba(255,255,255,0.95); }

/* ── Body (scrollable) ── */
.f-product-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  padding-bottom: 0;
  -webkit-overflow-scrolling: touch;
}
.f-product-body::-webkit-scrollbar { display: none; }
.f-product-body { -ms-overflow-style: none; scrollbar-width: none; }

/* ── Sticky Footer ── */
.f-product-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(0,0,0,0.06);
  background: white;
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  z-index: 10;
}
body.dark .f-product-footer { background: #1e293b; border-color: rgba(255,255,255,0.06); }

.f-product-footer-cancel {
  flex: 0 0 auto;
  padding: 12px 20px;
  border: none;
  background: var(--f-gray-100);
  color: var(--f-gray-600);
  font-size: 14px;
  font-weight: 600;
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.f-product-footer-cancel:active { transform: scale(0.96); }
body.dark .f-product-footer-cancel { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); }

.f-product-footer-save {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  border: none;
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  font-size: 15px;
  font-weight: 700;
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
  box-shadow: 0 4px 16px rgba(16,185,129,0.3);
}
.f-product-footer-save:active { transform: scale(0.97); box-shadow: 0 2px 8px rgba(16,185,129,0.2); }
.f-product-footer-save:disabled { opacity: 0.6; cursor: not-allowed; }

/* ═══ Sections ═══ */
.f-ps-section {
  background: white;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
  border: 1px solid rgba(0,0,0,0.05);
}
body.dark .f-ps-section { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.06); }

.f-ps-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.f-ps-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--f-gray-800);
}
body.dark .f-ps-label { color: rgba(255,255,255,0.9); }
.f-ps-hint {
  font-size: 11px;
  color: var(--f-gray-400);
}

/* ═══ Fields ═══ */
.f-ps-field {
  margin-bottom: 14px;
}
.f-ps-field:last-child {
  margin-bottom: 0;
}
.f-ps-field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--f-gray-500);
  margin-bottom: 6px;
}
body.dark .f-ps-field-label { color: rgba(255,255,255,0.5); }
.f-ps-required {
  color: #ef4444;
  font-weight: 700;
}
.f-ps-unit {
  font-size: 11px;
  color: var(--f-gray-400);
  font-weight: 400;
}

.f-ps-input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--f-gray-900);
  background: var(--f-gray-50);
  transition: all 0.2s;
  outline: none;
  box-sizing: border-box;
}
.f-ps-input:focus {
  border-color: var(--f-green-400);
  background: white;
  box-shadow: 0 0 0 3px rgba(16,185,129,0.1);
}
.f-ps-input::placeholder {
  color: var(--f-gray-300);
}
.f-ps-input-price {
  font-size: 18px;
  font-weight: 700;
  direction: ltr;
  text-align: right;
}
body.dark .f-ps-input {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.95);
}
body.dark .f-ps-input:focus {
  border-color: var(--f-green-400);
  background: rgba(255,255,255,0.08);
}

/* ── Select (Category) ── */
.f-ps-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border: 1.5px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  background: var(--f-gray-50);
  cursor: pointer;
  transition: all 0.2s;
  min-height: 46px;
}
.f-ps-select:active { background: var(--f-gray-100); }
.f-ps-select-text {
  font-size: 14px;
  color: var(--f-gray-400);
}
body.dark .f-ps-select { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); }

/* ═══ Error ═══ */
.f-ps-error {
  font-size: 12px;
  color: #ef4444;
  margin-top: 4px;
  display: none;
  font-weight: 500;
}
.f-ps-error.visible {
  display: block;
  animation: shakeIn 0.3s ease;
}
@keyframes shakeIn {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}

/* ═══ Toggle Row ═══ */
.f-ps-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  gap: 12px;
}
.f-ps-toggle-row-border {
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
body.dark .f-ps-toggle-row-border { border-color: rgba(255,255,255,0.06); }
.f-ps-toggle-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.f-ps-toggle-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--f-gray-800);
}
body.dark .f-ps-toggle-title { color: rgba(255,255,255,0.9); }
.f-ps-toggle-desc {
  font-size: 11px;
  color: var(--f-gray-400);
}

/* ═══ Collapsible ═══ */
.f-ps-collapsible-section .f-ps-collapse-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  margin: -4px -4px 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}
.f-ps-collapse-header:active { opacity: 0.7; }
.f-ps-collapse-arrow {
  transition: transform 0.3s;
  color: var(--f-gray-400);
}
.f-ps-collapse-arrow.rotated {
  transform: rotate(180deg);
}
.f-ps-collapse-body {
  padding-top: 14px;
}

/* ═══ Price Preview ═══ */
.f-ps-price-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(16,185,129,0.06), rgba(16,185,129,0.03));
  border-radius: 10px;
  margin-top: 10px;
  border: 1px solid rgba(16,185,129,0.12);
}
.f-ps-price-preview-label {
  font-size: 12px;
  color: var(--f-gray-500);
  font-weight: 500;
}
.f-ps-price-preview-value {
  font-size: 15px;
  font-weight: 800;
  color: var(--f-green-600);
  direction: ltr;
}
body.dark .f-ps-price-preview { background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.2); }

/* ═══ Stock Counter ═══ */
.f-ps-stock-counter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 14px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
body.dark .f-ps-stock-counter { border-color: rgba(255,255,255,0.06); }

/* ═══ History Button ═══ */
.f-ps-history-btn {
  padding: 10px 0 4px;
}
.f-ps-history-btn button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid rgba(99,102,241,0.12);
  border-radius: 10px;
  background: rgba(99,102,241,0.04);
  color: #6366f1;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
}
.f-ps-history-btn button:active { background: rgba(99,102,241,0.1); }
body.dark .f-ps-history-btn button { background: rgba(99,102,241,0.1); border-color: rgba(99,102,241,0.2); }

/* ═══ Variant Button ═══ */
.f-ps-variant-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background: white;
  border: 1.5px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.f-ps-variant-btn:active { background: var(--f-gray-50); transform: scale(0.98); }
body.dark .f-ps-variant-btn { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); }

.f-ps-variant-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(139,92,246,0.08);
  flex-shrink: 0;
}

.f-ps-variant-text {
  flex: 1;
  text-align: right;
  display: flex;
  flex-direction: column;
}
.f-ps-variant-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--f-gray-800);
}
body.dark .f-ps-variant-title { color: rgba(255,255,255,0.9); }
.f-ps-variant-desc {
  font-size: 11px;
  color: var(--f-gray-400);
  margin-top: 2px;
}

.f-ps-variant-badge {
  background: #8b5cf6;
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
}

/* ═══ Delete ═══ */
.f-ps-delete-wrap {
  padding-top: 12px;
  margin-top: 4px;
}
.f-ps-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  border: none;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  font-size: 14px;
  font-weight: 700;
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
  box-shadow: 0 4px 16px rgba(239,68,68,0.25);
}
.f-ps-delete-btn:active { transform: scale(0.97); box-shadow: 0 2px 8px rgba(239,68,68,0.2); }

/* ═══════════════════════════════════════════════════════════════════
   IMAGE GALLERY
   ═══════════════════════════════════════════════════════════════════ */

.f-gallery-wrap {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 0 8px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}
.f-gallery-wrap::-webkit-scrollbar { display: none; }
.f-gallery-wrap { -ms-overflow-style: none; scrollbar-width: none; }

.f-gallery-scroll {
  display: flex;
  gap: 10px;
}

/* ── Gallery Item ── */
.f-gallery-item {
  position: relative;
  width: 90px;
  height: 90px;
  flex-shrink: 0;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  scroll-snap-align: start;
  border: 2px solid transparent;
  transition: all 0.2s;
}
.f-gallery-item:active { transform: scale(0.95); }
.f-gallery-item.is-main {
  border-color: var(--f-green-400);
  box-shadow: 0 0 0 2px rgba(16,185,129,0.2);
}
.f-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Main Badge ── */
.f-gallery-main-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  line-height: 1.3;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* ── Context Menu Button ── */
.f-gallery-ctx {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  border: none;
  border-radius: 8px;
  color: white;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
}
.f-gallery-item:hover .f-gallery-ctx,
.f-gallery-item:active .f-gallery-ctx {
  opacity: 1;
}
@media (hover: none) {
  .f-gallery-ctx { opacity: 1; }
}

/* ── Upload Progress ── */
.f-gallery-item-uploading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.f-gallery-item-uploading::before {
  content: '⏳';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  z-index: 2;
  animation: pulse 1s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ── Add Button ── */
.f-gallery-add {
  width: 90px;
  height: 90px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 2px dashed rgba(0,0,0,0.12);
  border-radius: 14px;
  background: transparent;
  color: var(--f-gray-400);
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  scroll-snap-align: start;
}
.f-gallery-add:active {
  border-color: var(--f-green-400);
  color: var(--f-green-500);
  background: rgba(16,185,129,0.04);
}
.f-gallery-add span {
  font-size: 10px;
  font-weight: 600;
}
body.dark .f-gallery-add { border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.4); }

/* ═══════════════════════════════════════════════════════════════════
   BOTTOM SHEETS (Image Add / Context Menu)
   ═══════════════════════════════════════════════════════════════════ */

.f-ps-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 9999;
  display: none;
  align-items: flex-end;
  justify-content: center;
  animation: fadeIn 0.2s;
}
.f-ps-sheet-overlay.active {
  display: flex;
}

.f-ps-sheet {
  width: 100%;
  max-width: 480px;
  background: white;
  border-radius: 20px 20px 0 0;
  padding: 12px 20px 24px;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  animation: sheetSlideUp 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
body.dark .f-ps-sheet { background: #1e293b; }

.f-ps-sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--f-gray-200);
  margin: 0 auto 16px;
}
body.dark .f-ps-sheet-handle { background: rgba(255,255,255,0.15); }

.f-ps-sheet-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--f-gray-900);
  text-align: center;
  margin-bottom: 16px;
}
body.dark .f-ps-sheet-title { color: rgba(255,255,255,0.95); }

.f-ps-sheet-option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  border: none;
  background: var(--f-gray-50);
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--f-gray-800);
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
  margin-bottom: 8px;
}
.f-ps-sheet-option:last-child { margin-bottom: 0; }
.f-ps-sheet-option:active { background: var(--f-gray-100); transform: scale(0.98); }
body.dark .f-ps-sheet-option { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.9); }

.f-ps-sheet-option-danger {
  color: #ef4444 !important;
  background: rgba(239,68,68,0.06) !important;
}
.f-ps-sheet-option-danger:active { background: rgba(239,68,68,0.12) !important; }

@keyframes sheetSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ═══ Drag & Drop Visual ═══ */
.f-gallery-item.dragging {
  opacity: 0.5;
  transform: scale(0.95);
}
.f-gallery-item.drag-over {
  border-color: var(--f-green-400);
  transform: scale(1.05);
}

/* ═══ Dark mode overrides for inventory section inside product modal ═══ */
body.dark .f-product-body .inv-product-section {
  background: rgba(255,255,255,0.02) !important;
  border-color: rgba(255,255,255,0.06) !important;
}
body.dark .f-product-body .inv-counter-wrap {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
}
body.dark .f-product-body .inv-counter-value {
  color: rgba(255,255,255,0.95);
}
body.dark .f-product-body .inv-counter-plus {
  background: #6366f1;
}
body.dark .f-product-body .inv-counter-minus {
  background: transparent;
  color: #818cf8;
}

/* ═══ Compact toggle sm ═══ */
.f-toggle-sm .f-toggle-track {
  width: 36px;
  height: 20px;
}
.f-toggle-sm .f-toggle-track::after {
  width: 16px;
  height: 16px;
}

/* ═══════════════════════════════════════════════════════════════════
   INVENTORY SECTION — بازطراحی تمیز
   ═══════════════════════════════════════════════════════════════════ */

.f-ps-inv-section {
  border-top: 1px solid rgba(0,0,0,0.05);
  margin-top: 4px;
}
body.dark .f-ps-inv-section { border-color: rgba(255,255,255,0.06); }

.f-ps-inv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 12px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.f-ps-inv-row:last-child { border-bottom: none; }
body.dark .f-ps-inv-row { border-color: rgba(255,255,255,0.04); }

.f-ps-inv-row-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.f-ps-inv-row-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--f-gray-800);
}
body.dark .f-ps-inv-row-title { color: rgba(255,255,255,0.9); }
.f-ps-inv-row-desc {
  font-size: 11px;
  color: var(--f-gray-400);
}

/* ── شمارنده موجودی ── */
.f-ps-inv-counter {
  display: flex;
  align-items: center;
  border-radius: 12px;
  overflow: hidden;
  border: 1.5px solid rgba(99,102,241,0.15);
  background: white;
  flex-shrink: 0;
}
body.dark .f-ps-inv-counter { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }

.f-ps-inv-counter-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.f-ps-inv-counter-btn:active { transform: scale(0.9); }
.f-ps-inv-counter-btn.minus {
  background: transparent;
  color: #6366f1;
}
.f-ps-inv-counter-btn.minus:active { background: rgba(99,102,241,0.08); }
.f-ps-inv-counter-btn.plus {
  background: #6366f1;
  color: white;
}
.f-ps-inv-counter-btn.plus:active { background: #4f46e5; }
.f-ps-inv-counter-btn.plus svg {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}

.f-ps-inv-counter-val {
  width: 56px;
  height: 42px;
  border: none;
  border-left: 1px solid rgba(99,102,241,0.1);
  border-right: 1px solid rgba(99,102,241,0.1);
  outline: none;
  text-align: center;
  font-size: 17px;
  font-weight: 800;
  color: var(--f-gray-900);
  background: transparent;
  font-family: inherit;
  direction: ltr;
  -moz-appearance: textfield;
}
.f-ps-inv-counter-val::-webkit-outer-spin-button,
.f-ps-inv-counter-val::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
body.dark .f-ps-inv-counter-val { color: rgba(255,255,255,0.95); }

/* ── فیلدهای پیشرفته موجودی ── */
.f-ps-inv-advanced {
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  max-height: 0;
  opacity: 0;
}
.f-ps-inv-advanced.active {
  max-height: 200px;
  opacity: 1;
  padding-top: 8px;
}
.f-ps-inv-advanced-inner {
  padding: 14px;
  background: var(--f-gray-50);
  border-radius: 12px;
}
body.dark .f-ps-inv-advanced-inner { background: rgba(255,255,255,0.04); }

/* ── دکمه تاریخچه ── */
.f-ps-inv-history {
  padding-top: 8px;
}
.f-ps-inv-history button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid rgba(99,102,241,0.12);
  border-radius: 10px;
  background: rgba(99,102,241,0.04);
  color: #6366f1;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
}
.f-ps-inv-history button:active { background: rgba(99,102,241,0.1); }
body.dark .f-ps-inv-history button { background: rgba(99,102,241,0.1); border-color: rgba(99,102,241,0.2); }


/* ═══════════════════════════════════════════════════════════════════
   INVENTORY REDESIGN - Premium SaaS UI
   ═══════════════════════════════════════════════════════════════════ */

/* ── Settings Button ── */
.inv-settings-btn {
  width: 40px; height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.06);
  background: #fff;
  color: var(--f-gray-500, #6b7280);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.inv-settings-btn:hover { background: var(--f-gray-50, #f9fafb); color: var(--f-gray-700, #374151); border-color: rgba(0,0,0,0.1); }
body.dark .inv-settings-btn { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.08); color: rgba(255,255,255,0.5); }
body.dark .inv-settings-btn:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.8); }

/* ═══════════════════════════════════════════
   KPI CARDS
   ═══════════════════════════════════════════ */
.inv-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
@media (max-width: 900px) {
  .inv-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .inv-kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
}
.inv-kpi-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.04);
  border-radius: 14px;
  padding: 18px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all 0.2s ease;
  cursor: default;
}
.inv-kpi-card.inv-kpi-clickable { cursor: pointer; }
.inv-kpi-card.inv-kpi-clickable:hover { border-color: rgba(0,0,0,0.08); box-shadow: 0 2px 12px rgba(0,0,0,0.04); transform: translateY(-1px); }
body.dark .inv-kpi-card { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.06); }
body.dark .inv-kpi-card.inv-kpi-clickable:hover { border-color: rgba(255,255,255,0.1); box-shadow: 0 2px 12px rgba(0,0,0,0.2); }

.inv-kpi-icon {
  width: 60px; height: 60px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.inv-kpi-blue { background: transparent; }
.inv-kpi-amber { background: transparent; }
.inv-kpi-red { background: transparent; }
.inv-kpi-green { background: transparent; }

.inv-kpi-data {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.inv-kpi-number {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--f-gray-900, #111827);
}
body.dark .inv-kpi-number { color: rgba(255,255,255,0.95); }
.inv-kpi-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--f-gray-500, #6b7280);
  margin-top: 2px;
}
body.dark .inv-kpi-label { color: rgba(255,255,255,0.45); }

/* ═══════════════════════════════════════════
   ATTENTION SECTION
   ═══════════════════════════════════════════ */
.inv-attention-section {
  background: linear-gradient(135deg, rgba(245,158,11,0.04), rgba(239,68,68,0.03));
  border: 1px solid rgba(245,158,11,0.12);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 20px;
}
body.dark .inv-attention-section {
  background: linear-gradient(135deg, rgba(245,158,11,0.06), rgba(239,68,68,0.04));
  border-color: rgba(245,158,11,0.15);
}
.inv-attention-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.inv-attention-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #b45309;
}
body.dark .inv-attention-title { color: #fbbf24; }
.inv-attention-count {
  background: rgba(245,158,11,0.12);
  color: #b45309;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
}
body.dark .inv-attention-count { background: rgba(245,158,11,0.15); color: #fbbf24; }

.inv-attention-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.inv-attention-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-radius: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,0.04);
  transition: all 0.2s ease;
}
.inv-attention-item:hover { border-color: rgba(0,0,0,0.08); }
body.dark .inv-attention-item { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.06); }

.inv-attention-img {
  width: 40px; height: 40px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.inv-attention-info { flex: 1; min-width: 0; }
.inv-attention-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--f-gray-800, #1f2937);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.dark .inv-attention-name { color: rgba(255,255,255,0.9); }
.inv-attention-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}
.inv-attention-stock {
  font-size: 12px;
  font-weight: 700;
  color: #ef4444;
}
.inv-attention-threshold {
  font-size: 11px;
  color: var(--f-gray-400, #9ca3af);
}
.inv-attention-action {
  padding: 6px 14px;
  border-radius: 8px;
  background: rgba(16,185,129,0.08);
  color: #059669;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid rgba(16,185,129,0.15);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.inv-attention-action:hover { background: rgba(16,185,129,0.14); border-color: rgba(16,185,129,0.25); }
body.dark .inv-attention-action { background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.2); color: #34d399; }

/* ═══════════════════════════════════════════
   ACTION BAR
   ═══════════════════════════════════════════ */
.inv-action-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.inv-search-wrap {
  flex: 1;
  min-width: 200px;
  position: relative;
}
.inv-search-input {
  width: 100%;
  height: 42px;
  padding: 0 14px 0 40px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  background: #fff;
  font-size: 13px;
  color: var(--f-gray-800, #1f2937);
  outline: none;
  transition: all 0.2s ease;
  font-family: inherit;
}
.inv-search-input::placeholder { color: var(--f-gray-400, #9ca3af); }
.inv-search-input:focus { border-color: rgba(16,185,129,0.4); box-shadow: 0 0 0 3px rgba(16,185,129,0.08); }
body.dark .inv-search-input { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: rgba(255,255,255,0.9); }
body.dark .inv-search-input:focus { border-color: rgba(16,185,129,0.4); }
.inv-search-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--f-gray-400, #9ca3af);
  pointer-events: none;
}
.inv-btn-add-sale {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 42px;
  padding: 0 18px;
  border-radius: 10px;
  background: #10b981;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  font-family: inherit;
}
.inv-btn-add-sale:hover { background: #059669; }
.inv-btn-add-sale:active { transform: scale(0.97); }

/* ═══════════════════════════════════════════
   FILTER CHIPS
   ═══════════════════════════════════════════ */
.inv-filter-chips {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.inv-chip {
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
  font-size: 12px;
  font-weight: 500;
  color: var(--f-gray-600, #4b5563);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
}
.inv-chip:hover { border-color: rgba(0,0,0,0.14); background: var(--f-gray-50, #f9fafb); }
.inv-chip.active {
  background: #10b981;
  color: #fff;
  border-color: #10b981;
}
body.dark .inv-chip { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6); }
body.dark .inv-chip:hover { background: rgba(255,255,255,0.06); }
body.dark .inv-chip.active { background: #10b981; color: #fff; border-color: #10b981; }

/* ═══════════════════════════════════════════
   PRODUCTS TABLE
   ═══════════════════════════════════════════ */
.inv-table-wrap {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.04);
  border-radius: 14px;
  overflow: hidden;
}
body.dark .inv-table-wrap { background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.06); }

.inv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.inv-th {
  text-align: right;
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 600;
  color: var(--f-gray-500, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--f-gray-50, #f9fafb);
  border-bottom: 1px solid rgba(0,0,0,0.04);
  white-space: nowrap;
}
.inv-th-center { text-align: center; }
body.dark .inv-th { background: rgba(255,255,255,0.03); color: rgba(255,255,255,0.4); border-color: rgba(255,255,255,0.04); }

.inv-td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.03);
  vertical-align: middle;
}
body.dark .inv-td { border-color: rgba(255,255,255,0.03); }
.inv-tr:last-child .inv-td { border-bottom: none; }
.inv-tr:hover .inv-td { background: rgba(0,0,0,0.01); }
body.dark .inv-tr:hover .inv-td { background: rgba(255,255,255,0.02); }

.inv-td-product {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 180px;
}
.inv-td-img {
  width: 40px; height: 40px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--f-gray-100, #f3f4f6);
}
.inv-td-name {
  font-weight: 600;
  color: var(--f-gray-800, #1f2937);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
body.dark .inv-td-name { color: rgba(255,255,255,0.9); }
.inv-td-sku {
  font-size: 11px;
  color: var(--f-gray-400, #9ca3af);
  font-family: monospace;
  direction: ltr;
}
.inv-td-center { text-align: center; }
.inv-td-number {
  font-weight: 700;
  font-size: 14px;
  color: var(--f-gray-800, #1f2937);
}
body.dark .inv-td-number { color: rgba(255,255,255,0.9); }

/* Status Badges */
.inv-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.inv-badge-green { background: rgba(16,185,129,0.08); color: #059669; }
.inv-badge-amber { background: rgba(245,158,11,0.08); color: #b45309; }
.inv-badge-red { background: rgba(239,68,68,0.08); color: #dc2626; }
.inv-badge-gray { background: rgba(107,114,128,0.08); color: #6b7280; }
body.dark .inv-badge-green { background: rgba(16,185,129,0.12); color: #34d399; }
body.dark .inv-badge-amber { background: rgba(245,158,11,0.12); color: #fbbf24; }
body.dark .inv-badge-red { background: rgba(239,68,68,0.12); color: #f87171; }
body.dark .inv-badge-gray { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.5); }

/* Table Actions */
.inv-td-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}
.inv-td-btn {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.06);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--f-gray-500, #6b7280);
}
.inv-td-btn:hover { background: var(--f-gray-50, #f9fafb); border-color: rgba(0,0,0,0.1); color: var(--f-gray-700, #374151); }
.inv-td-btn-green { color: #059669; border-color: rgba(16,185,129,0.15); }
.inv-td-btn-green:hover { background: rgba(16,185,129,0.06); border-color: rgba(16,185,129,0.25); }
body.dark .inv-td-btn { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.06); }
body.dark .inv-td-btn:hover { background: rgba(255,255,255,0.06); }

/* ═══════════════════════════════════════════
   EMPTY & LOADING STATE
   ═══════════════════════════════════════════ */
.inv-empty-state {
  text-align: center;
  padding: 48px 24px;
}
.inv-empty-icon {
  width: 80px; height: 80px;
  border-radius: 20px;
  background: var(--f-gray-50, #f9fafb);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: var(--f-gray-300, #d1d5db);
}
body.dark .inv-empty-icon { background: rgba(255,255,255,0.04); }
.inv-empty-state h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--f-gray-700, #374151);
  margin: 0 0 8px;
}
body.dark .inv-empty-state h3 { color: rgba(255,255,255,0.85); }
.inv-empty-state p {
  font-size: 13px;
  color: var(--f-gray-500, #6b7280);
  margin: 0 0 20px;
}
body.dark .inv-empty-state p { color: rgba(255,255,255,0.45); }
.inv-empty-btn {
  padding: 10px 24px;
  border-radius: 10px;
  background: #10b981;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s ease;
}
.inv-empty-btn:hover { background: #059669; }

.inv-loading-state {
  text-align: center;
  padding: 48px 24px;
}

/* ═══════════════════════════════════════════
   SETTINGS MODAL - New Design
   ═══════════════════════════════════════════ */
.inv-set-block {
  padding: 16px 0;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.inv-set-block:last-child { border-bottom: none; }
.inv-set-block-last { border-bottom: none; }
body.dark .inv-set-block { border-color: rgba(255,255,255,0.04); }

.inv-set-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--f-gray-800, #1f2937);
  margin-bottom: 4px;
}
body.dark .inv-set-label { color: rgba(255,255,255,0.9); }
.inv-set-desc {
  font-size: 12px;
  color: var(--f-gray-500, #6b7280);
  line-height: 1.6;
  margin-bottom: 14px;
}
body.dark .inv-set-desc { color: rgba(255,255,255,0.45); }

/* Toggle Row */
.inv-set-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.inv-set-toggle-info { flex: 1; min-width: 0; }
.inv-set-toggle-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--f-gray-800, #1f2937);
}
body.dark .inv-set-toggle-title { color: rgba(255,255,255,0.9); }
.inv-set-toggle-desc {
  font-size: 12px;
  color: var(--f-gray-500, #6b7280);
  line-height: 1.6;
  margin-top: 4px;
}
body.dark .inv-set-toggle-desc { color: rgba(255,255,255,0.45); }

/* Custom Toggle */
.f-inv-toggle {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  flex-shrink: 0;
  cursor: pointer;
}
.f-inv-toggle input { opacity: 0; width: 0; height: 0; }
.f-inv-toggle-track {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.12);
  border-radius: 26px;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.f-inv-toggle-track::after {
  content: '';
  position: absolute;
  width: 20px; height: 20px;
  left: 3px; top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.f-inv-toggle input:checked + .f-inv-toggle-track {
  background: #10b981;
}
.f-inv-toggle input:checked + .f-inv-toggle-track::after {
  transform: translateX(22px);
}

/* Threshold Input */
.inv-threshold-wrap {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
body.dark .inv-threshold-wrap { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
.inv-threshold-btn {
  width: 40px; height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--f-gray-600, #4b5563);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.inv-threshold-btn:hover { background: var(--f-gray-50, #f9fafb); }
.inv-threshold-btn:active { background: rgba(16,185,129,0.06); color: #10b981; }
body.dark .inv-threshold-btn { color: rgba(255,255,255,0.6); }
body.dark .inv-threshold-btn:hover { background: rgba(255,255,255,0.06); }
.inv-threshold-input {
  width: 60px; height: 40px;
  text-align: center;
  border: none;
  border-inline: 1px solid rgba(0,0,0,0.06);
  background: transparent;
  font-size: 16px;
  font-weight: 700;
  color: var(--f-gray-800, #1f2937);
  outline: none;
  font-family: inherit;
  -moz-appearance: textfield;
}
.inv-threshold-input::-webkit-outer-spin-button,
.inv-threshold-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
body.dark .inv-threshold-input { color: rgba(255,255,255,0.9); }

/* ═══════════════════════════════════════════
   CHANNEL SELECTION CARDS
   ═══════════════════════════════════════════ */
.inv-channel-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.inv-channel-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
  position: relative;
}
.inv-channel-card:hover {
  border-color: rgba(0,0,0,0.12);
  background: var(--f-gray-50, #f9fafb);
}
body.dark .inv-channel-card { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.06); }
body.dark .inv-channel-card:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }

/* Selected State */
.inv-channel-card.active {
  border-color: #10b981;
  background: rgba(16,185,129,0.03);
  box-shadow: 0 0 0 3px rgba(16,185,129,0.08);
}
body.dark .inv-channel-card.active { background: rgba(16,185,129,0.06); box-shadow: 0 0 0 3px rgba(16,185,129,0.1); }

.inv-channel-logo {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--f-gray-50, #f9fafb);
}
body.dark .inv-channel-logo { background: rgba(255,255,255,0.06); }
.inv-channel-logo img { width: 26px; height: 26px; object-fit: contain; }

.inv-channel-logo-duo {
  position: relative;
}
.inv-channel-logo-duo img { width: 20px; height: 20px; }
.inv-channel-logo-duo img:first-child { margin-left: -4px; }

.inv-channel-logo-fcm {
  color: #10b981;
  background: rgba(16,185,129,0.08);
}
body.dark .inv-channel-logo-fcm { background: rgba(16,185,129,0.12); }

.inv-channel-logo-multi {
  gap: 3px;
}
.inv-channel-logo-multi img { width: 14px; height: 14px; }

.inv-channel-info { flex: 1; min-width: 0; }
.inv-channel-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--f-gray-800, #1f2937);
}
body.dark .inv-channel-name { color: rgba(255,255,255,0.9); }
.inv-channel-desc {
  font-size: 11px;
  color: var(--f-gray-500, #6b7280);
  margin-top: 1px;
}
body.dark .inv-channel-desc { color: rgba(255,255,255,0.4); }

.inv-channel-check {
  width: 22px; height: 22px;
  color: var(--f-gray-300, #d1d5db);
  transition: all 0.25s ease;
  flex-shrink: 0;
}
.inv-channel-check .inv-check-path {
  stroke-dasharray: 14;
  stroke-dashoffset: 14;
  transition: stroke-dashoffset 0.3s ease;
}
.inv-channel-card.active .inv-channel-check {
  color: #10b981;
}
.inv-channel-card.active .inv-channel-check .inv-check-path {
  stroke-dashoffset: 0;
}
body.dark .inv-channel-check { color: rgba(255,255,255,0.2); }
body.dark .inv-channel-card.active .inv-channel-check { color: #10b981; }

/* ═══════════════════════════════════════════
   INFO BOX
   ═══════════════════════════════════════════ */
.inv-set-info-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(16,185,129,0.04);
  border: 1px solid rgba(16,185,129,0.1);
  border-radius: 10px;
  margin: 4px 0;
}
body.dark .inv-set-info-box { background: rgba(16,185,129,0.06); border-color: rgba(16,185,129,0.12); }
.inv-set-info-box span {
  font-size: 12px;
  color: var(--f-gray-600, #4b5563);
  line-height: 1.7;
}
body.dark .inv-set-info-box span { color: rgba(255,255,255,0.6); }

/* ═══════════════════════════════════════════
   NOTIFICATION PREVIEW
   ═══════════════════════════════════════════ */
.inv-notif-preview {
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
body.dark .inv-notif-preview { border-color: rgba(255,255,255,0.06); background: rgba(255,255,255,0.03); }
.inv-notif-preview-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(245,158,11,0.06);
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
body.dark .inv-notif-preview-header { background: rgba(245,158,11,0.08); border-color: rgba(255,255,255,0.04); }
.inv-notif-emoji { font-size: 16px; }
.inv-notif-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--f-gray-800, #1f2937);
}
body.dark .inv-notif-title { color: rgba(255,255,255,0.9); }

.inv-notif-preview-body {
  padding: 14px;
}
.inv-notif-text {
  font-size: 13px;
  color: var(--f-gray-600, #4b5563);
  margin: 0 0 10px;
}
body.dark .inv-notif-text { color: rgba(255,255,255,0.6); }
.inv-notif-product {
  font-size: 14px;
  margin-bottom: 12px;
  color: var(--f-gray-800, #1f2937);
}
body.dark .inv-notif-product { color: rgba(255,255,255,0.9); }
.inv-notif-stats {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}
.inv-notif-stat {
  flex: 1;
  background: var(--f-gray-50, #f9fafb);
  border-radius: 8px;
  padding: 8px 10px;
  text-align: center;
}
body.dark .inv-notif-stat { background: rgba(255,255,255,0.04); }
.inv-notif-stat-label {
  display: block;
  font-size: 10px;
  color: var(--f-gray-500, #6b7280);
  margin-bottom: 2px;
}
body.dark .inv-notif-stat-label { color: rgba(255,255,255,0.4); }
.inv-notif-stat-value {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--f-gray-800, #1f2937);
}
.inv-stat-red { color: #ef4444 !important; }
body.dark .inv-notif-stat-value { color: rgba(255,255,255,0.9); }
.inv-notif-footer {
  font-size: 12px;
  color: var(--f-gray-500, #6b7280);
  margin: 0;
  line-height: 1.6;
}
body.dark .inv-notif-footer { color: rgba(255,255,255,0.4); }

/* ═══════════════════════════════════════════
   RESPONSIVE: TABLE -> CARD (MOBILE)
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
  .inv-table-wrap { display: none; }
  .inv-products-list { display: flex !important; flex-direction: column; gap: 10px; }
  .inv-action-bar { flex-direction: column; align-items: stretch; }
  .inv-search-wrap { min-width: auto; }
  .inv-btn-add-sale { justify-content: center; }
  .inv-filter-chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .inv-kpi-grid { gap: 10px; }
  .inv-kpi-card { padding: 14px 12px; }
  .inv-kpi-number { font-size: 18px; }
  .inv-kpi-icon { width: 48px; height: 48px; }
  .inv-threshold-wrap { width: 100%; }
  .inv-threshold-input { flex: 1; }
}
@media (min-width: 769px) {
  .inv-products-list { display: none !important; }
}

/* ═══════════════════════════════════════════
   MOBILE PRODUCT CARDS (inv-products-list)
   ═══════════════════════════════════════════ */
.inv-mobile-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.04);
  border-radius: 12px;
  padding: 12px;
  transition: all 0.2s ease;
}
body.dark .inv-mobile-card { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.06); }
.inv-mobile-card:hover { border-color: rgba(0,0,0,0.08); }
.inv-mobile-card-img {
  width: 52px; height: 52px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--f-gray-100, #f3f4f6);
}
.inv-mobile-card-info { flex: 1; min-width: 0; }
.inv-mobile-card-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--f-gray-800, #1f2937);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.dark .inv-mobile-card-name { color: rgba(255,255,255,0.9); }
.inv-mobile-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.inv-mobile-card-sku {
  font-size: 10px;
  color: var(--f-gray-400, #9ca3af);
  font-family: monospace;
}
.inv-mobile-card-stock {
  font-size: 13px;
  font-weight: 800;
  color: var(--f-gray-800, #1f2937);
}
body.dark .inv-mobile-card-stock { color: rgba(255,255,255,0.9); }
.inv-mobile-card-threshold {
  font-size: 11px;
  color: var(--f-gray-500, #6b7280);
}
.inv-mobile-card-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.inv-mobile-card-btn {
  width: 34px; height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.06);
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--f-gray-500, #6b7280);
}
.inv-mobile-card-btn:hover { background: var(--f-gray-50, #f9fafb); }
.inv-mobile-card-btn-green { color: #059669; border-color: rgba(16,185,129,0.15); }
.inv-mobile-card-btn-green:hover { background: rgba(16,185,129,0.06); }
body.dark .inv-mobile-card-btn { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.06); }

/* === FANUS APP NATIVE INSETS v4: one bottom-safe-area contract === */
html.fanus-app-panel .f-bottom-nav {
  bottom: 0 !important;
  padding: 6px 12px var(--fanus-inset-bottom, 0px) !important;
  box-sizing: border-box !important;
}
html.fanus-app-panel .f-bottom-nav-inner {
  margin-bottom: 0 !important;
  min-height: 76px;
}
html.fanus-app-panel .f-content {
  padding-bottom: calc(108px + var(--fanus-inset-bottom, 0px)) !important;
}
html.fanus-app-panel .f-modal-overlay,
html.fanus-app-panel .f-customer-sheet-overlay,
html.fanus-app-panel .f-page-loader,
html.fanus-app-panel .f-view-loader {
  padding-bottom: var(--fanus-inset-bottom, 0px) !important;
}

/* ===== OTP METHOD ICONS (پیامک / پیام‌رسان بله) — تصاویر اختصاصی =====
   آیکن‌های واقعی، بدون حلقه و پس‌زمینه رنگی، در اندازه بزرگ و خوانا.
   هماهنگ با لاگین ادمین و ویزارد.                                        */
.f-action-icon.f-otp-icon{
  position:relative;
  width:64px;height:64px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:transform var(--f-duration) var(--f-ease);
}
.f-action-icon.f-otp-icon img{
  width:100%!important;height:100%!important;
  object-fit:contain!important;
  transform:none!important;              /* خنثی‌سازی scale(1.45) عمومی */
  transform-origin:center;
  filter:none!important;
  padding:0;                            /* بدون حاشیه داخلی */
  box-sizing:border-box;
  display:block;
}
/* افکت هاور ملایم */
.f-action-card:hover .f-action-icon.f-otp-icon{transform:scale(1.06)}

/* ریسپانسیو موبایل */
@media(max-width:520px){
  .f-action-icon.f-otp-icon{width:56px;height:56px}
}


/* ================================================================
   FANUS: NO SCROLLBAR IN PANEL LAYOUT
   -----------------------------------------------------------------
   هدف: نوارِ اسکرول در چیدمانِ پنل دیده نشود، ولی اسکرول کردن
   کاملاً سالم بماند (چرخ ماوس، کیبورد، لمس، swipe).

   • html / body          → نوار اسکرول خودِ صفحه
   • .f-sidebar           → نوار اسکرول داخل سایدبار
   • .f-main / .f-content → نوار اسکرول ستونِ محتوا

   فقط همین چهار ناحیه؛ اسکرولِ جدول‌ها، لیست‌ها و مودال‌ها دست‌نخورده
   می‌ماند تا کاربر بفهمد آن‌ها اسکرولِ بیشتری دارند.
   ================================================================ */
html,
body,
.f-panel,
.f-sidebar,
.f-main,
.f-content {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.f-panel::-webkit-scrollbar,
.f-sidebar::-webkit-scrollbar,
.f-main::-webkit-scrollbar,
.f-content::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* ------------------------------------------------------------
   نمایشگرهای کوتاه (لپ‌تاپ): فاصله‌های عمودی سایدبار جمع می‌شود تا
   محتوایش (~۷۹۸px) در ارتفاع کم هم جا شود و اصلاً نیازی به اسکرول
   پیدا نکند. ارتفاعِ محتوای سایدبار بعد از این فشرده‌سازی ~۶۸۶px می‌شود.
   ------------------------------------------------------------ */
@media (min-width: 1024px) and (max-height: 900px) {
  .f-sidebar {
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .f-sidebar-logo { margin-bottom: 16px; }
  .f-sidebar-item { padding-top: 9px; padding-bottom: 9px; }
  .f-sidebar-footer {
    padding-top: 12px;
    margin-top: 12px;
  }
  .f-sidebar-profile {
    padding: 8px;
    margin-bottom: 8px;
  }
}

/* === دکمهٔ راهنما (آکاردئون توکن بات) ============================
   فقط وقتی آکاردئون باز است دیده می‌شود؛ کلیک روی آن نباید
   آکاردئون را دوباره ببندد، برای همین stopPropagation دارد. */
.f-guide-btn{display:none;align-items:center;gap:5px;padding:7px 13px;border-radius:10px;
  background:rgba(22,163,74,.08);border:1px solid rgba(22,163,74,.25);color:var(--f-green-600);
  font-size:12px;font-weight:700;font-family:inherit;cursor:pointer;flex-shrink:0;
  transition:all .2s var(--f-ease);-webkit-tap-highlight-color:transparent;white-space:nowrap;text-decoration:none}
.f-guide-btn:hover{background:var(--f-green-600);border-color:var(--f-green-600);color:#fff}
.f-guide-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;flex-shrink:0}
.f-settings-section.open .f-guide-btn{display:inline-flex}
body.dark .f-guide-btn{background:rgba(22,163,74,.14);border-color:rgba(22,163,74,.38);color:#4ade80}
body.dark .f-guide-btn:hover{background:#16a34a;border-color:#16a34a;color:#fff}

/* ═══════════════════════════════════════════════════════════════════════════
   فاز ۳ — انتخابگر رنگِ مقادیرِ ویژگی + ویرایشگرِ موجودیِ تنوع‌ها
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── دایرهٔ رنگ کنار هر مقدارِ ویژگیِ رنگی ─────────────────────────────
   حسِ «اکلیلی»: یک لایهٔ نرمِ نورِ بالا-چپ + سایهٔ ملایمِ پایین-راست،
   و یک حلقهٔ نازکِ داخلی تا رنگ‌های روشن (سفید/کرم) گم نشوند. */
.var-color {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
  flex-shrink: 0; cursor: pointer; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .12), 0 1px 3px rgba(15, 23, 42, .14);
  transition: transform .16s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s;
  -webkit-tap-highlight-color: transparent;
}
.var-color:hover  { transform: scale(1.09); box-shadow: 0 0 0 2px rgba(139,92,246,.35), 0 3px 10px rgba(15,23,42,.18); }
.var-color:active { transform: scale(.96); }
.var-color:focus-visible { outline: 2px solid #8b5cf6; outline-offset: 2px; }
.var-color-fill {
  position: absolute; inset: 0; border-radius: 50%; background: transparent;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .13);
}
/* همان لایهٔ اکلیلی، روی رنگِ انتخاب‌شده */
.var-color-fill::after,
.var-color::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(120% 95% at 26% 12%, rgba(255, 255, 255, .58) 0%, rgba(255, 255, 255, 0) 48%),
    linear-gradient(150deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, .16) 100%);
}
.var-color.is-empty { background: repeating-linear-gradient(45deg, #f1f5f9 0 5px, #e2e8f0 5px 10px); }
.var-color.is-empty::after { background: none; }
.var-color.is-empty::before {
  content: ''; position: absolute; inset: 11px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(139,92,246,.85), rgba(99,102,241,.85));
  box-shadow: 0 1px 3px rgba(15, 23, 42, .2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   انتخابگرِ رنگِ محصول (FanusColorPicker) — هم‌مایه با پالتِ ظاهر فروشگاه
   ═══════════════════════════════════════════════════════════════════════════ */
.vcp-root { position: fixed; inset: 0; z-index: 9700; display: none; }
.vcp-root.is-open { display: block; }
.vcp-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .35); backdrop-filter: blur(2px); animation: vcpFade .18s ease; }
@keyframes vcpFade { from { opacity: 0; } to { opacity: 1; } }

.vcp-panel {
  position: absolute; background: #fff; border-radius: 22px; overflow: hidden;
  width: min(360px, calc(100vw - 16px)); max-height: min(78vh, 620px);
  display: flex; flex-direction: column;
  box-shadow: 0 18px 52px rgba(15, 23, 42, .24), 0 2px 8px rgba(15, 23, 42, .1);
  border: 1px solid rgba(226, 232, 240, .9);
  animation: vcpPop .2s cubic-bezier(.22, 1, .36, 1);
}
@keyframes vcpPop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@media (max-width: 639px) {
  .vcp-panel {
    left: 0 !important; right: 0; bottom: 0 !important; top: auto !important;
    width: 100%; border-radius: 24px 24px 0 0; max-height: 86vh;
    box-shadow: 0 -14px 48px rgba(15, 23, 42, .26);
    animation: vcpUp .26s cubic-bezier(.22, 1, .36, 1);
  }
  @keyframes vcpUp { from { transform: translateY(30px); } to { transform: none; } }
}
.vcp-grip { display: none; }
@media (max-width: 639px) { .vcp-grip { display: block; width: 42px; height: 4px; border-radius: 99px; background: #e2e8f0; margin: 9px auto 0; flex-shrink: 0; } }

/* ── سربرگ: پیش‌نمایش بزرگ + نام + کنتراست ── */
.vcp-head {
  display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center; gap: 10px; padding: 14px 14px 12px; flex-shrink: 0;
}
/* نامِ رنگ دقیقاً وسطِ پنل: دو ستونِ کناری 1frِ برابرند ⇒ ستونِ وسط همیشه مرکزِ پنل است */
.vcp-head > .vcp-preview { justify-self: start; }
.vcp-head > .vcp-x { justify-self: end; }
.vcp-preview {
  position: relative; width: 54px; height: 54px; border-radius: 16px; flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .14), 0 3px 10px rgba(15, 23, 42, .16);
  background: #94a3b8; overflow: hidden;
}
.vcp-preview::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(120% 95% at 26% 12%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 48%),
    linear-gradient(150deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 42%, rgba(0, 0, 0, .18) 100%);
}
.vcp-headmeta { min-width: 0; text-align: center; }
.vcp-name { font-size: 15px; font-weight: 800; color: #0f172a; }
.vcp-sub { font-size: 11.5px; color: #94a3b8; margin-top: 3px; }
.vcp-x {
  width: 32px; height: 32px; flex-shrink: 0; border: 1px solid #e8eaed; border-radius: 10px;
  background: #f8f9fb; color: #64748b; font-size: 20px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all .15s; padding: 0;
}
.vcp-x:hover { background: #f1f5f9; color: #0f172a; }

/* ── زبانه‌ها ── */
.vcp-tabs { display: flex; gap: 4px; padding: 0 14px 12px; flex-shrink: 0; }
.vcp-tab {
  flex: 1; padding: 9px 0; border: 0; border-radius: 11px; background: #f1f5f9;
  color: #64748b; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: all .18s; -webkit-tap-highlight-color: transparent;
}
.vcp-tab:hover { background: #e8ebf0; }
.vcp-tab.is-on {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed); color: #fff;
  box-shadow: 0 2px 9px rgba(139, 92, 246, .3);
}

/* ── بدنه ── */
.vcp-body { flex: 1; overflow-y: auto; padding: 0 14px 6px; -webkit-overflow-scrolling: touch; }
.vcp-group { margin-bottom: 14px; }
.vcp-group-t { font-size: 11.5px; font-weight: 800; color: #94a3b8; margin-bottom: 8px; }
.vcp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 8px; }
.vcp-sw {
  position: relative; aspect-ratio: 1 / 1; padding: 0; border: 0; border-radius: 50%;
  cursor: pointer; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .12), 0 1px 3px rgba(15, 23, 42, .12);
  transition: transform .16s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s;
  -webkit-tap-highlight-color: transparent;
}
.vcp-sw:hover { transform: scale(1.13); box-shadow: 0 0 0 2px rgba(139, 92, 246, .35), 0 4px 12px rgba(15, 23, 42, .2); }
.vcp-sw:focus-visible { outline: 2px solid #8b5cf6; outline-offset: 2px; }
.vcp-sw::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(120% 95% at 26% 12%, rgba(255, 255, 255, .58) 0%, rgba(255, 255, 255, 0) 48%),
    linear-gradient(150deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, .16) 100%);
}
/* ⚠ این قاعده بود و جا افتاده بود: بدونِ آن، رنگِ inline روی یک <i> بی‌قالب
   می‌ماند و خودِ دکمه پس‌زمینه نداشت ⇒ همهٔ سواچ‌ها سفید دیده می‌شدند. */
.vcp-sw-fill { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.vcp-sw.is-sel { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #8b5cf6, 0 3px 10px rgba(15, 23, 42, .2); }
.vcp-sw.is-sel::before {
  content: ''; position: absolute; z-index: 2; inset: 0; margin: auto;
  width: 9px; height: 9px; border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .9);
}

/* ── پیشرفته: لغزنده‌ها ── */
.vcp-sliders { display: flex; flex-direction: column; gap: 11px; margin-bottom: 16px; }
.vcp-range-row { display: flex; align-items: center; gap: 10px; }
.vcp-range-row > span { font-size: 12px; font-weight: 700; color: #64748b; width: 62px; flex-shrink: 0; }
.vcp-range-row input[type=range] {
  flex: 1; -webkit-appearance: none; appearance: none; height: 12px; border-radius: 99px;
  background: #e2e8f0; outline: none; margin: 0;
}
.vcp-range-row input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; border: 2px solid #8b5cf6; cursor: pointer;
  box-shadow: 0 2px 7px rgba(15, 23, 42, .24);
}
.vcp-range-row input[type=range]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: #fff;
  border: 2px solid #8b5cf6; cursor: pointer; box-shadow: 0 2px 7px rgba(15, 23, 42, .24);
}
.vcp-row { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.vcp-lbl { font-size: 12px; font-weight: 700; color: #64748b; flex-shrink: 0; }
.vcp-hex {
  flex: 1; min-width: 0; height: 42px; padding: 0 12px; border: 1px solid #e2e8f0;
  border-radius: 12px; font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 14px; font-weight: 700; letter-spacing: .5px; color: #0f172a; background: #fff;
  text-align: center;
}
.vcp-hex:focus { outline: none; border-color: #a78bfa; box-shadow: 0 0 0 3px rgba(139, 92, 246, .16); }
.vcp-eye {
  width: 42px; height: 42px; flex-shrink: 0; border: 1px solid #e2e8f0; border-radius: 12px;
  background: #f8f9fb; color: #475569; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center; transition: all .15s;
}
.vcp-eye:hover { background: #ede9fe; border-color: #c4b5fd; color: #6d28d9; }
.vcp-sugg-t { font-size: 11.5px; font-weight: 800; color: #94a3b8; margin-bottom: 8px; }
.vcp-sugg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

/* ── فوتر ── */
.vcp-foot { display: flex; gap: 9px; padding: 12px 14px 14px; border-top: 1px solid #f1f5f9; flex-shrink: 0; }
.vcp-btn { flex: 1; height: 44px; border: 0; border-radius: 13px; font-family: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; transition: all .15s; }
.vcp-btn.ghost { background: #f1f5f9; color: #64748b; }
.vcp-btn.ghost:hover { background: #fee2e2; color: #b91c1c; }
.vcp-btn.primary { background: linear-gradient(135deg, #8b5cf6, #7c3aed); color: #fff; box-shadow: 0 3px 12px rgba(139, 92, 246, .3); }
.vcp-btn.primary:hover { filter: brightness(1.06); }
.vcp-btn.primary:active { transform: scale(.97); }

/* ═══════════════════════════════════════════════════════════════════════════
   ویرایشگرِ موجودیِ تنوع‌ها (Variants Stock Manager)
   ═══════════════════════════════════════════════════════════════════════════ */
.vsm-overlay { position: fixed; inset: 0; z-index: 9600; display: none; }
.vsm-overlay.is-open { display: block; }
.vsm-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .45); backdrop-filter: blur(3px); animation: vsmFade .2s ease; }
@keyframes vsmFade { from { opacity: 0; } to { opacity: 1; } }
.vsm-sheet {
  position: absolute; inset-inline: 0; bottom: 0; margin: 0 auto;
  max-width: 560px; background: #fff; border-radius: 26px 26px 0 0;
  display: flex; flex-direction: column; max-height: 88vh;
  box-shadow: 0 -12px 48px rgba(15, 23, 42, .22); animation: vsmUp .28s cubic-bezier(.22,1,.36,1);
}
@keyframes vsmUp { from { transform: translateY(26px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (min-width: 640px) {
  .vsm-sheet { inset-inline: 0; bottom: 5vh; border-radius: 26px; max-height: 82vh; }
}
.vsm-grip { width: 42px; height: 4px; border-radius: 99px; background: #e2e8f0; margin: 10px auto 0; flex-shrink: 0; }
.vsm-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px 12px; border-bottom: 1px solid #f1f5f9; flex-shrink: 0; }
.vsm-title { margin: 0; font-size: 17px; font-weight: 800; color: #0f172a; letter-spacing: -.3px; }
.vsm-sub { margin: 5px 0 0; font-size: 12.5px; color: #94a3b8; }
.vsm-x {
  width: 34px; height: 34px; flex-shrink: 0; margin-inline-start: auto;
  border: 1px solid #e8eaed; border-radius: 11px; background: #f8f9fb;
  color: #64748b; font-size: 22px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all .15s;
}
.vsm-x:hover { background: #f1f5f9; color: #0f172a; }
.vsm-body { flex: 1; overflow-y: auto; padding: 16px 20px; -webkit-overflow-scrolling: touch; }
.vsm-loading { text-align: center; color: #94a3b8; font-size: 13px; padding: 28px 0; }
.vsm-total {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(135deg, #f5f3ff, #ede9fe); border: 1px solid #ddd6fe;
  border-radius: 14px; padding: 12px 16px; margin-bottom: 14px;
  font-size: 13px; font-weight: 700; color: #5b21b6;
}
.vsm-total b { font-size: 17px; font-weight: 800; }
.vsm-row {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border: 1px solid #e8eaed; border-radius: 14px; margin-bottom: 8px; background: #fff;
  transition: border-color .15s, background .15s;
}
.vsm-row.is-zero { background: #fff7ed; border-color: #fed7aa; }
.vsm-info { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.vsm-dot { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(15,23,42,.14); }
.vsm-label { font-size: 13.5px; font-weight: 700; color: #0f172a; line-height: 1.6; }
.vsm-sku { font-size: 11px; color: #94a3b8; font-family: ui-monospace, Menlo, Consolas, monospace; direction: ltr; text-align: start; }
.vsm-stepper { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.vsm-stepper button {
  width: 30px; height: 30px; border-radius: 9px; border: 1px solid #e2e8f0;
  background: #f8f9fb; color: #334155; font-size: 17px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all .15s; padding: 0; font-family: inherit;
}
.vsm-stepper button:hover { background: #ede9fe; border-color: #c4b5fd; color: #6d28d9; }
.vsm-stepper input {
  width: 54px; height: 30px; text-align: center; font: inherit; font-size: 13.5px; font-weight: 800;
  border: 1px solid #e2e8f0; border-radius: 9px; color: #0f172a; background: #fff; -moz-appearance: textfield;
}
.vsm-stepper input::-webkit-outer-spin-button, .vsm-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vsm-stepper input:focus { outline: none; border-color: #a78bfa; box-shadow: 0 0 0 3px rgba(139,92,246,.15); }
.vsm-badge { font-size: 11.5px; font-weight: 700; color: #64748b; min-width: 62px; text-align: center; flex-shrink: 0; }
.vsm-row.is-zero .vsm-badge { color: #ea580c; }
.vsm-note { font-size: 13px; line-height: 2; color: #475569; background: #f8f9fb; border: 1px solid #e8eaed; border-radius: 14px; padding: 16px; }
.vsm-note.warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.vsm-note.err { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.vsm-foot { display: flex; gap: 10px; padding: 14px 20px 20px; border-top: 1px solid #f1f5f9; flex-shrink: 0; }
.vsm-btn { flex: 1; padding: 14px; border-radius: 14px; font-family: inherit; font-size: 14px; font-weight: 800; cursor: pointer; border: 0; transition: all .15s; }
.vsm-btn.ghost { background: #f1f5f9; color: #64748b; }
.vsm-btn.ghost:hover { background: #e2e8f0; }
.vsm-btn.primary { background: linear-gradient(135deg, #8b5cf6, #7c3aed); color: #fff; box-shadow: 0 4px 14px rgba(139,92,246,.28); }
.vsm-btn.primary:disabled { background: #d1d5db; box-shadow: none; cursor: not-allowed; }

/* ═══════════════════════════════════════════════════════════════════════════
   فاز ۳ — ویرایشگرِ موجودیِ تنوع‌ها (جایگزین استایل‌های قدیمیِ vsm-*)
   نکته: استایل‌های اصلیِ vsm-* در انتهای همین فایل (بخش فاز ۳) هستند.
   این بخش فقط شفاف‌سازیِ اولویت است تا هر دو منبع یکی دیده شوند.
   ═══════════════════════════════════════════════════════════════════════════ */

/* === مسیر کامل دسته در مودال انتخاب دسته‌بندی === */
.f-cat-path {
  font-size: 11px;
  color: var(--f-gray-400);
  font-weight: 500;
  direction: rtl;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.f-cat-item .f-cat-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* === مودال دسته‌بندی: گروه‌بندی ریشه/زیردسته (v3) === */
.f-cat-groups { padding-bottom: 6px; }
.f-cat-group { border-bottom: 1px solid var(--f-gray-100); }
.f-cat-group:last-child { border-bottom: none; }
.f-cat-group-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px 8px;
  position: sticky; top: 0; z-index: 2;
  background: var(--f-white, #fff);
  border-bottom: 1px solid var(--f-gray-100);
}
.f-cat-group-head .f-cat-icon { width: 34px; height: 34px; border-radius: 10px; }
.f-cat-group-head .f-cat-name { font-size: 13.5px; font-weight: 800; color: var(--f-gray-900); }
.f-cat-group-head .f-cat-path { font-size: 11px; color: var(--f-gray-400); }
.f-cat-parent { cursor: pointer; opacity: .92; }
.f-cat-parent:hover { background: var(--f-gray-50) !important; }
.f-cat-parent .f-cat-name { font-weight: 600; color: var(--f-gray-700); }
.f-cat-parent .f-cat-path { font-size: 11px; color: var(--f-gray-400); }
.f-cat-chevron { color: var(--f-gray-400); transition: transform .18s; flex-shrink: 0; }
.f-cat-chevron.up { transform: rotate(180deg); }
.f-cat-leaf { cursor: pointer; }
.f-cat-leaf .f-cat-name { font-weight: 600; }