/* =========================================
   DESIGN TOKENS & FLUID SETTINGS (تنظیمات هوشمند)
   ========================================= */
:root {
  /* پالت رنگی استاندارد صرافی */
  --color-gold: #C9A84C;
  --color-gold-light: #E8C96A;
  --color-gold-dim: #8a6f30;
  --color-gold-glow: rgba(201, 168, 76, 0.18);
  --color-gold-glow-sm: rgba(201, 168, 76, 0.07);
  --color-bg-base: #0A0A0C;
  --color-bg-surface: #111116;
  --color-bg-card: #16161D;
  --color-bg-card-alt: #1C1C25;
  --color-text-primary: #F2EDE4;
  --color-text-muted: #8A8590;
  --color-text-dim: #4A4655;
  --color-border: rgba(201, 168, 76, 0.16);
  --color-border-dim: rgba(255, 255, 255, 0.06);
  --color-green: #2ECC71;
  --color-red: #E74C3C;
  
  /* فواصل سیال (Fluid Spacing) - تغییر خودکار بر اساس عرض اسکرین */
  --spacing-xs: clamp(4px, 1vw, 8px); 
  --spacing-sm: clamp(8px, 1.5vw, 12px); 
  --spacing-md: clamp(12px, 2vw, 20px); 
  --spacing-lg: clamp(20px, 3.5vw, 32px); 
  --spacing-xl: clamp(28px, 4.5vw, 40px);
  
  --radius-sm: 8px; 
  --radius-md: 14px; 
  --radius-lg: 18px; 
  --radius-xl: 24px;
  
  /* پدینگ لبه‌های صفحه - در موبایل فیت (۱۰ پیکسل) و در دسکتاپ بازتر */
  --layout-px: clamp(10px, 2.5vw, 48px); 
  --layout-py: clamp(32px, 5vw, 80px);
  
  --transition-fast: 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================
   BASE RESETS & OVERFLOW PROTECTION
   ========================================= */
*, *::before, *::after { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
}

html, body {
  width: 100vw;
  max-width: 100%;
  overflow-x: hidden; /* جلوگیری از اسکرول افقی ناخواسته */
  -webkit-overflow-scrolling: touch;
}

body { 
  font-family: 'Vazirmatn', sans-serif; 
  background: var(--color-bg-base); 
  color: var(--color-text-primary); 
  line-height: 1.7; 
  padding-bottom: 80px; 
  position: relative;
  /* سایز متن هوشمند: در موبایل کوچک‌تر و در دسکتاپ استاندارد */
  font-size: clamp(12px, 1.5vw + 10px, 15px); 
}

@media (min-width: 768px) { body { padding-bottom: 0; } }

a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; border: none; background: none; -webkit-tap-highlight-color: transparent;}
img { display: block; max-width: 100%; height: auto; }

/* جلوگیری از بیرون‌زدگی متن و اعداد طولانی در تمام المان‌ها */
p, span, div, h1, h2, h3, h4, h5, h6, a, button { 
  overflow-wrap: break-word; 
  word-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}

/* =========================================
   GLOBAL LAYOUT SYSTEM
   ========================================= */
.ui-section { 
  position: relative; 
  z-index: 1; 
  margin-bottom: var(--spacing-xl); 
  padding: 0 var(--layout-px); 
  width: 100%;
}

/* بخش‌هایی که باید به لبه‌ها بچسبند */
#section-navbar, #section-ticker, #section-slideshow, #section-bottomnav, #section-footer {
  padding: 0;
  margin-bottom: 0;
}

/* 🌟 رفع مشکل Z-Index: منوی زبان همیشه روی سایر المان‌ها باشد */
#section-navbar {
  position: relative;
  z-index: 999 !important;
}

.lang-menu, .dropdown-menu {
  z-index: 1000 !important;
}

.ui-hidden { display: none !important; }
.ui-active { opacity: 1; pointer-events: auto; transition: opacity var(--transition-fast); }
.ui-inactive { opacity: 0.5; pointer-events: none; }

/* =========================================
   SKELETON LOADING SYSTEM & UTILITIES
   ========================================= */
.skeleton-wrapper { 
  display: flex; 
  flex-direction: column; 
  gap: var(--spacing-md); 
  padding: var(--spacing-md) 0; 
  width: 100%; 
}

.skel { 
  background-color: var(--color-bg-card-alt); 
  border-radius: var(--radius-sm); 
  position: relative; 
  overflow: hidden; 
}

.skel::after { 
  content: ''; 
  position: absolute; 
  top: 0; right: 0; bottom: 0; left: 0; 
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.04) 50%, rgba(255,255,255,0) 100%); 
  transform: translateX(-100%); 
  animation: shimmer 1.5s infinite; 
}

@keyframes shimmer { 100% { transform: translateX(100%); } }

.skel-title { width: 40%; height: 32px; margin-bottom: 12px; }
.skel-text { width: 100%; height: 16px; margin-bottom: 8px; }
.skel-avatar { width: 48px; height: 48px; border-radius: 50%; }
.skel-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(200px, 30%, 300px), 1fr)); gap: 16px; width: 100%; }
.skel-flex-row { display: flex; align-items: center; gap: 16px; width: 100%; }

/* 🌟 کلاس‌های کمکی (Utility Classes) برای بهینه‌سازی index.html */
.skel-w-sm { width: 30% !important; max-width: 120px; }
.skel-w-md { width: 50% !important; max-width: 200px; }
.skel-w-lg { width: 80% !important; max-width: 350px; }
.box-sm { height: clamp(35px, 6vw, 45px); border-radius: 8px; margin: 0; width: 100%; }
.box-md { height: clamp(150px, 20vw, 200px); width: 100%; }
.box-lg { height: clamp(220px, 30vw, 280px); width: 100%; }
.box-tall { height: clamp(350px, 45vw, 500px); width: 100%; }
.mb-0 { margin-bottom: 0 !important; }
.mb-20 { margin-bottom: var(--spacing-md) !important; }
.center-content { min-height: 50vh; justify-content: center; }

/* =========================================
   TRADE DASHBOARD (Chart 70% / Orderbook 30%)
   ========================================= */
.trade-dashboard-grid {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl); 
  margin-bottom: var(--spacing-xl); 
  width: 100%;
}

/* در موبایل پدینگ رعایت شود */
.trade-dashboard-grid .ui-section {
  padding: 0 var(--layout-px);
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}

@media (min-width: 992px) {
  .trade-dashboard-grid {
    flex-direction: row;
    align-items: stretch;
    padding: 0 var(--layout-px);
  }
  
  .trade-dashboard-grid .ui-section {
    padding: 0; /* حذف پدینگ داخلی در دسکتاپ چون والد پدینگ دارد */
  }

  /* چارت (بزرگتر) */
  #section-chart {
    flex: 7; 
    width: 70%;
  }
  
  /* دفترچه سفارشات (کوچکتر در کنار) */
  #section-orderbook {
    flex: 3;
    width: 30%;
  }
}

/* =========================================
   3D ICON SYSTEM
   ========================================= */
.icon-3d {
  display: inline-block; 
  transform: translateZ(0); 
  will-change: filter; 
  filter: drop-shadow(-1px -1px 0 rgba(255, 255, 255, 0.08)) drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.6)) drop-shadow(0px 4px 7px rgba(0, 0, 0, 0.3)); 
  transition: filter var(--transition-fast), transform var(--transition-fast); 
}

a:hover .icon-3d, button:hover .icon-3d, .hover-target:hover .icon-3d { 
  filter: drop-shadow(-1px -1px 0 rgba(255, 255, 255, 0.15)) drop-shadow(2px 4px 8px rgba(0, 0, 0, 0.7)) drop-shadow(0px 0px 14px var(--color-gold-glow)); 
  transform: translateY(-2px) translateZ(0); 
}

/* =========================================
   🌍 i18n: SMART MULTI-LANGUAGE SYSTEM
   ========================================= */
html[dir="rtl"] body { direction: rtl; text-align: right; }
html[dir="ltr"] body { direction: ltr !important; text-align: left !important; }

html[dir="ltr"] .lm-table, html[dir="ltr"] .lm-symbol, html[dir="ltr"] .slide-item, html[dir="ltr"] .promo-content, html[dir="ltr"] .lang-option, html[dir="ltr"] .footer-col, html[dir="ltr"] .footer-bottom, html[dir="ltr"] th, html[dir="ltr"] td { 
  text-align: left !important; 
}
html[dir="ltr"] .nav-actions, html[dir="ltr"] .slide-dots, html[dir="ltr"] .lm-footer { 
  flex-direction: row !important; 
}
html[dir="ltr"] .btn-panel-login i, html[dir="ltr"] .btn-lm-more i, html[dir="ltr"] .footer-links a i { 
  transform: scaleX(-1); 
}
html[dir="ltr"] .form-input { 
  padding: 0 16px 0 44px !important; 
}
html[dir="ltr"] .form-icon { 
  right: auto !important; 
  left: 16px !important; 
}