/**
 * توکن‌های دیزاین و استایل پایهٔ مینی‌اپ آرامه.
 *
 * مقادیر عیناً از پروتوتایپ طراحی برداشته شده‌اند.
 * قاعدهٔ نقض‌ناپذیر: هیچ رنگی هاردکد نمی‌شود — همه از متغیر می‌آیند،
 * چون پالت برند در ران‌تایم از تنظیمات عوض می‌شود.
 */

:root {
  /* رنگ برند — پالت پیش‌فرض «بادمجانی».
     جاوااسکریپت این‌ها را از روی تنظیمات بازنویسی می‌کند. */
  --brand-50: #F9F4FA;
  --brand-100: #F1E6F3;
  --brand-200: #E1CCE5;
  --brand-300: #C9A9CF;
  --brand-400: #AD80B6;
  --brand-500: #8F5C99;
  --brand-600: #75437F;
  --brand-700: #5E2B64;
  --brand-800: #4A2150;
  --brand-900: #37183A;
  --brand-950: #231025;

  /* خاکستری‌های گرم */
  --n-0: #FFFFFF;
  --n-50: #FBF9F8;
  --n-100: #F4F1EF;
  --n-200: #E8E3DF;
  --n-300: #D5CEC9;
  --n-400: #A9A29D;
  --n-500: #7C756F;
  --n-600: #5C5651;
  --n-700: #423D39;
  --n-800: #2B2724;
  --n-900: #1A1716;

  /* رنگ‌های وضعیت */
  --ok-50: #EAF6EF;   --ok-500: #2E7D52;   --ok-700: #1D5B3A;
  --warn-50: #FDF4E7; --warn-500: #B87514; --warn-700: #845209;
  --err-50: #FDECEA;  --err-500: #C0392B;  --err-700: #8E2A20;
  --info-50: #EBF1F8; --info-500: #2B6CB0; --info-700: #1F4F82;
  --thread-50: #FBF0ED; --thread-500: #C0705F;

  /* شعاع گوشه */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px;
  --r-xl: 20px; --r-2xl: 24px; --r-3xl: 28px; --r-full: 999px;

  /* سایه */
  --sh-1: 0 1px 2px rgba(26, 23, 22, .05);
  --sh-2: 0 2px 10px rgba(26, 23, 22, .06);
  --sh-3: 0 10px 28px rgba(94, 43, 100, .12);
  --sh-up: 0 -6px 18px rgba(26, 23, 22, .07);

  /* ناحیهٔ امن — جاوااسکریپت از تلگرام مقدار واقعی را می‌گذارد */
  --safe-t: 0px;
  --safe-b: 0px;

  /* ارتفاع نویگیشن پایین، برای فاصلهٔ انتهای صفحه‌ها */
  --nav-h: 62px;

  /* خانوادهٔ فونت — تنظیمات می‌تواند عوضش کند */
  --font: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
}

/* ---------------------------------------------------------------------------
   فونت لوکال — بدون CDN، چون گوگل‌فونت در ایران قابل اتکا نیست
   --------------------------------------------------------------------------- */
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-Medium.woff2') format('woff2');
  font-weight: 500 600;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-ExtraBold.woff2') format('woff2');
  font-weight: 800 900;
  font-display: swap;
}

/* ---------------------------------------------------------------------------
   پایه
   --------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overscroll-behavior-y: none;
}

body {
  background: var(--n-50);
  font-family: var(--font);
  color: var(--n-800);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  /* جلوگیری از انتخاب متن هنگام لمس طولانی — حس اپ، نه صفحهٔ وب */
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

/* متن‌هایی که کاربر باید بتواند کپی کند از قاعدهٔ بالا مستثنا هستند */
.selectable, input, textarea { -webkit-user-select: text; user-select: text; }

button, input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button { cursor: pointer; border: none; background: none; padding: 0; }

a { color: var(--brand-700); text-decoration: none; }

img { max-width: 100%; display: block; }

/* اعداد همیشه با عرض ثابت تا ستون‌های مبلغ نلرزند */
.num, .price, td { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   انیمیشن — دقیقاً همان زمان‌بندی پروتوتایپ
   --------------------------------------------------------------------------- */
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: translateY(0) } }
@keyframes spin { to { transform: rotate(360deg) } }
@keyframes shimmer { 0% { background-position: -140% 0 } 100% { background-position: 140% 0 } }
@keyframes recPulse { 0%, 100% { transform: scale(1); opacity: 1 } 50% { transform: scale(1.18); opacity: .55 } }
@keyframes sheetUp { from { transform: translateY(100%) } to { transform: translateY(0) } }
@keyframes modalIn { from { opacity: 0; transform: scale(.94) } to { opacity: 1; transform: scale(1) } }

/* احترام به ترجیح کاربر برای کاهش حرکت */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------------------
   چیدمان اصلی
   --------------------------------------------------------------------------- */
#app {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: var(--n-50);
}

/* ناحیهٔ امن بالای صفحه، پشت هدر */
.safe-top { height: var(--safe-t); flex: none; background: var(--brand-700); }

#screen {
  flex: 1;
  min-height: 0;
  animation: fadeIn .22s ease-out;
}

/* فاصلهٔ انتهای صفحه‌هایی که نویگیشن پایین دارند */
.has-nav { padding-bottom: calc(var(--nav-h) + var(--safe-b) + 8px); }

/* ---------------------------------------------------------------------------
   هدر صفحه‌های داخلی
   --------------------------------------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--n-0);
  border-bottom: 1px solid var(--n-200);
}

.topbar h2 {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--n-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.icon-btn {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--n-100);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .12s ease;
}
.icon-btn:active { transform: scale(.94); }

/* ---------------------------------------------------------------------------
   دکمه‌ها — هدف لمسی هیچ‌وقت زیر ۴۴px
   --------------------------------------------------------------------------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 54px;
  padding: 0 20px;
  border-radius: var(--r-lg);
  background: var(--brand-700);
  color: var(--n-0);
  font-size: 16px;
  font-weight: 800;
  box-shadow: var(--sh-3);
  transition: transform .12s ease;
}
.btn:active { transform: scale(.97); }
.btn[disabled] { opacity: .55; pointer-events: none; box-shadow: none; }

.btn.ghost {
  background: var(--n-0);
  color: var(--n-700);
  border: 1.5px solid var(--n-300);
  box-shadow: none;
}
.btn.soft { background: var(--brand-50); color: var(--brand-800); box-shadow: none; }
.btn.danger { background: var(--err-500); box-shadow: none; }
.btn.sm { min-height: 44px; font-size: 14px; border-radius: var(--r-md); }

/* دکمهٔ چسبان پایین صفحه — جزئیات الگو و چک‌اوت */
.sticky-bottom {
  position: sticky;
  bottom: 0;
  z-index: 15;
  padding: 12px 14px calc(12px + var(--safe-b));
  background: var(--n-0);
  border-top: 1px solid var(--n-200);
  box-shadow: var(--sh-up);
}

/* ---------------------------------------------------------------------------
   کارت و فرم
   --------------------------------------------------------------------------- */
.page { padding: 16px 14px 26px; display: flex; flex-direction: column; gap: 14px; }

.card {
  background: var(--n-0);
  border: 1px solid var(--n-200);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  overflow: hidden;
}
.card-body { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.card-head {
  padding: 11px 14px;
  background: var(--n-50);
  border-bottom: 1px solid var(--n-200);
  font-size: 13px;
  font-weight: 800;
  color: var(--n-700);
}

.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 13px; font-weight: 700; color: var(--n-700); }

.field input,
.field textarea,
.field select {
  width: 100%;
  min-height: 48px;
  padding: 0 13px;
  border: 1px solid var(--n-300);
  border-radius: var(--r-md);
  background: var(--n-0);
  font-size: 14.5px;
  color: var(--n-900);
  outline: none;
  transition: border-color .15s ease;
}
.field textarea { padding: 12px 13px; min-height: 96px; line-height: 2; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--brand-600); }

.field input:disabled, .field select:disabled {
  background: var(--n-100);
  color: var(--n-400);
}

/* خطای فرم همیشه زیر همان فیلد — قاعدهٔ ۵ سند طراحی */
.field .error { font-size: 12px; font-weight: 700; color: var(--err-700); }
.field.invalid input, .field.invalid textarea, .field.invalid select { border-color: var(--err-500); }

.field .hint { font-size: 11.5px; line-height: 1.85; color: var(--n-500); }

/* ورودی‌هایی که محتوایشان لاتین است (شماره کارت، آدرس) */
.ltr { direction: ltr; text-align: left; font-family: ui-monospace, Menlo, monospace; }

/* ---------------------------------------------------------------------------
   بَج و چیپ
   --------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 14px 8px;
  margin: 0 -14px;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }

.chip {
  flex: none;
  min-height: 38px;
  padding: 0 14px;
  border-radius: var(--r-full);
  border: 1px solid var(--n-200);
  background: var(--n-0);
  font-size: 13px;
  font-weight: 700;
  color: var(--n-600);
  display: flex;
  align-items: center;
  transition: transform .12s ease;
}
.chip:active { transform: scale(.96); }
.chip.on { background: var(--brand-700); border-color: var(--brand-700); color: var(--n-0); }

/* ---------------------------------------------------------------------------
   حالت‌های داده — هر لیست چهار حالت دارد (قاعدهٔ ۴)
   --------------------------------------------------------------------------- */
.skeleton {
  border-radius: var(--r-md);
  background: linear-gradient(100deg, var(--n-100) 30%, var(--n-200) 50%, var(--n-100) 70%);
  background-size: 240% 100%;
  animation: shimmer 1.4s linear infinite;
}

.state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 44px 28px;
  text-align: center;
}
.state .circle {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 2px dashed var(--brand-300);
  background: var(--brand-50);
  display: flex;
  align-items: center;
  justify-content: center;
}
.state h3 { margin: 0; font-size: 17px; font-weight: 800; color: var(--n-900); }
.state p {
  margin: 0;
  font-size: 14px;
  line-height: 2;
  color: var(--n-600);
  max-width: 280px;
  text-wrap: pretty;
}

/* ---------------------------------------------------------------------------
   توست — پایین صفحه، ۳٫۲ ثانیه
   --------------------------------------------------------------------------- */
#toast {
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: calc(var(--nav-h) + var(--safe-b) + 14px);
  z-index: 90;
  display: none;
  padding: 14px 16px;
  border-radius: var(--r-md);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.8;
  color: var(--n-0);
  box-shadow: var(--sh-3);
  animation: toastIn .22s ease-out;
}
#toast.show { display: block; }
#toast.ok { background: var(--ok-500); }
#toast.err { background: var(--err-500); }

/* ---------------------------------------------------------------------------
   مودال و شیت
   --------------------------------------------------------------------------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  background: rgba(26, 23, 22, .45);
  animation: fadeIn .18s ease-out;
}
.overlay.center { align-items: center; justify-content: center; padding: 24px; }
.overlay.bottom { align-items: flex-end; }

.modal {
  width: 100%;
  max-width: 330px;
  background: var(--n-0);
  border-radius: var(--r-xl);
  padding: 22px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
  animation: modalIn .18s ease-out;
}
.modal h3 { margin: 0; font-size: 17px; font-weight: 800; color: var(--n-900); }
.modal p { margin: 0; font-size: 14px; line-height: 2; color: var(--n-600); text-wrap: pretty; }
.modal .actions { display: flex; gap: 10px; }
.modal .actions .btn { min-height: 48px; font-size: 15px; }

.sheet {
  width: 100%;
  max-height: 86%;
  background: var(--n-0);
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  padding: 10px 0 calc(12px + var(--safe-b));
  display: flex;
  flex-direction: column;
  animation: sheetUp .22s ease-out;
}
.sheet .grip {
  width: 42px;
  height: 4px;
  border-radius: var(--r-full);
  background: var(--n-300);
  margin: 4px auto 12px;
  flex: none;
}
.sheet h3 {
  margin: 0 0 6px;
  padding: 0 18px;
  font-size: 16px;
  font-weight: 800;
  color: var(--n-900);
  flex: none;
}
.sheet .sheet-body { overflow-y: auto; padding: 6px 14px 0; }

/* ---------------------------------------------------------------------------
   نویگیشن پایین ۶ آیتمه
   --------------------------------------------------------------------------- */
#nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: none;
  background: var(--n-0);
  border-top: 1px solid var(--n-200);
  box-shadow: var(--sh-up);
  padding-bottom: var(--safe-b);
}
#nav.show { display: flex; }

#nav button {
  flex: 1;
  min-height: var(--nav-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  position: relative;
  color: var(--n-500);
  font-size: 10.5px;
  font-weight: 700;
  transition: color .15s ease;
}
#nav button.on { color: var(--brand-700); }

/* بَج تعداد سبد و پیام خوانده‌نشده */
#nav .dot {
  position: absolute;
  top: 8px;
  inset-inline-end: calc(50% - 20px);
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--r-full);
  background: var(--err-500);
  color: var(--n-0);
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------------------------------------------------------------------------
   اسپینر
   --------------------------------------------------------------------------- */
.spinner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2.4px solid var(--brand-100);
  border-top-color: var(--brand-700);
  animation: spin .9s linear infinite;
  flex: none;
}
.spinner.light { border-color: rgba(255, 255, 255, .25); border-top-color: var(--n-0); }

/* ---------------------------------------------------------------------------
   سوییچ
   --------------------------------------------------------------------------- */
.switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 13px;
  border: 1px solid var(--n-200);
  border-radius: var(--r-md);
  background: var(--n-50);
  text-align: start;
}
.switch .track {
  flex: none;
  width: 46px;
  height: 26px;
  border-radius: var(--r-full);
  background: var(--n-300);
  position: relative;
  transition: background .18s ease;
}
.switch .track::after {
  content: '';
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--n-0);
  transition: inset-inline-start .18s ease;
}
.switch.on .track { background: var(--brand-600); }
.switch.on .track::after { inset-inline-start: 23px; }

/* ---------------------------------------------------------------------------
   پیام‌های راهنما و هشدار
   --------------------------------------------------------------------------- */
.note {
  padding: 13px 15px;
  border-radius: var(--r-md);
  font-size: 12.5px;
  line-height: 1.95;
}
.note.info { background: var(--info-50); color: var(--info-700); }
.note.warn { background: var(--warn-50); color: var(--warn-700); }
.note.err  { background: var(--err-50);  color: var(--err-700); }
.note.ok   { background: var(--ok-50);   color: var(--ok-700); }

/* ---------------------------------------------------------------------------
   تصویر جای‌گزین وقتی الگو عکس ندارد
   --------------------------------------------------------------------------- */
.ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(135deg, var(--brand-50) 0 9px, var(--brand-100) 9px 18px);
  color: var(--brand-600);
  font-size: 10px;
}

/* ---------------------------------------------------------------------------
   نوار پیشرفت آپلود — حلقهٔ دایره‌ای مثل تلگرام
   --------------------------------------------------------------------------- */
.upload-wrap { position: relative; overflow: hidden; border-radius: var(--r-md); }

.upload-veil {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(26, 23, 22, .55);
  color: var(--n-0);
  backdrop-filter: blur(2px);
}
.upload-veil.failed { background: rgba(192, 57, 43, .72); }

.ring { position: relative; width: 54px; height: 54px; }
.ring svg { transform: rotate(-90deg); display: block; }
.ring circle { fill: none; stroke-width: 4; }
.ring .bg { stroke: rgba(255, 255, 255, .28); }
.ring .fg {
  stroke: var(--n-0);
  stroke-linecap: round;
  transition: stroke-dashoffset .2s linear;
}
.ring .pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
}
/* ضربدر لغو، وسط حلقه */
.ring .cancel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.upload-veil .size { font-size: 11px; font-weight: 700; opacity: .9; }

/* نوار خطی، برای آپلود چانکی ویدیو */
.bar {
  width: 100%;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--n-200);
  overflow: hidden;
}
.bar i {
  display: block;
  height: 100%;
  border-radius: var(--r-full);
  background: var(--brand-600);
  transition: width .2s linear;
}