/* ==========================================================================
   miniapp.css — استایل پایه برای Telegram Mini App
   - موبایل‌محور، بدون grid (فقط flex)
   - رنگ‌ها از تم خود تلگرام (دارک/لایت خودکار)
   - پشتیبانی از RTL/LTR با logical properties
   ========================================================================== */

/* ---------- 1) توکن‌ها (تم تلگرام + مقدار پیش‌فرض برای تست در مرورگر) ---------- */
:root {
  --bg: var(--tg-theme-bg-color, #ffffff);
  --bg-2: var(--tg-theme-secondary-bg-color, #f1f1f4);
  --surface: var(--tg-theme-section-bg-color, #ffffff);
  --text: var(--tg-theme-text-color, #111111);
  --hint: var(--tg-theme-hint-color, #8a8a90);
  --link: var(--tg-theme-link-color, #2481cc);
  --accent: var(--tg-theme-button-color, #2481cc);
  --on-accent: var(--tg-theme-button-text-color, #ffffff);
  --danger: var(--tg-theme-destructive-text-color, #e53935);
  --success: #2e9e5b;
  --line: var(--tg-theme-section-separator-color, rgba(128, 128, 128, 0.25));

  --radius: 12px;
  --radius-sm: 8px;
  --gap: 12px;
  --pad: 16px;
  --control-h: 46px; /* حداقل ارتفاع لمس‌پذیر */

  --font-main: peyda-Medium;
  --font-caption: peyda-Bold;
  --font-en: peyda-digi;
}

@font-face {
  font-family: "peyda-Medium";
  src: url("fonts/PeydaWeb-Medium.woff") format("woff");
  unicode-range: U+0-2f, U+40-10FFFF;
}

@font-face {
  font-family: "peyda-Medium";
  src: url("fonts/iran-yekan-500.woff") format("woff");
  unicode-range: U+30-39;
}

@font-face {
  font-family: "peyda-Bold";
  src: url("fonts/PeydaWeb-Bold.woff") format("woff");
  unicode-range: U+0-2f, U+40-10FFFF;
}

@font-face {
  font-family: "peyda-Bold";
  src: url("fonts/iran-yekan-700.woff") format("woff");
  unicode-range: U+30-39;
}

@font-face {
  font-family: "peyda-digi";
  src: url("fonts/PeydaWeb-Bold.woff") format("woff");
}

/* برای تست در مرورگر وقتی تلگرام تم نمی‌دهد */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--tg-theme-bg-color, #17212b);
    --bg-2: var(--tg-theme-secondary-bg-color, #0e1621);
    --surface: var(--tg-theme-section-bg-color, #1f2c3a);
    --text: var(--tg-theme-text-color, #f5f5f5);
    --hint: var(--tg-theme-hint-color, #7d8b99);
  }
}

/* ---------- 2) ریست و پایه ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  min-height: var(--tg-viewport-stable-height, 100vh);
  background: var(--bg-2);
  color: var(--text);
  font: 400 16px/1.5 var(--font-main);
  overscroll-behavior-y: none;
  /* ناحیه امن (ناچ، نوار پایین) */

  padding-block-start: calc(
    var(--pad) + var(--tg-content-safe-area-inset-top, 0px)
  );
  padding-block-end: calc(
    var(--pad) +
      max(
        var(--tg-safe-area-inset-bottom, 0px),
        env(safe-area-inset-bottom, 0px)
      )
  );
  padding-inline: max(
      var(--pad),
      var(--tg-safe-area-inset-left, 0px),
      env(safe-area-inset-left, 0px)
    )
    max(
      var(--pad),
      var(--tg-safe-area-inset-right, 0px),
      env(safe-area-inset-right, 0px)
    );
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
p {
  margin: 0;
}
h1 {
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
}
h2 {
  font-size: 19px;
  line-height: 1.35;
  font-weight: 600;
}
h3 {
  font-size: 16px;
  font-weight: 600;
}

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

small {
  font-size: 13px;
  color: var(--hint);
}

hr {
  border: 0;
  border-block-start: 1px solid var(--line);
  margin: var(--gap) 0;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- 3) چیدمان (فقط flex) ---------- */

/* کانتینر صفحه */
.page {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: var(--pad);
  max-width: 560px; /* روی تبلت/دسکتاپ تلگرام وسط‌چین می‌شود */
  margin-inline: auto;
}

/* ستون عمودی و ردیف افقی — دو ابزار اصلی چیدمان */
.col {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.row {
  display: flex;
  align-items: center;
  gap: var(--gap);
}

/* تغییر رفتار ردیف/ستون */
.wrap {
  flex-wrap: wrap;
}
.between {
  justify-content: space-between;
}
.center {
  justify-content: center;
  align-items: center;
  text-align: center;
}
.grow {
  flex: 1 1 0;
  min-width: 0;
} /* پر کردن فضای باقی‌مانده (جایگزین ستون‌های grid) */
.gap-s {
  gap: 6px;
}
.gap-l {
  gap: 20px;
}

/* ---------- 4) باکس‌ها (Box) ---------- */
/*
   ساختار:
   <section class="box">
     <div class="box-head">عنوان</div>
     <div class="box-body">محتوا</div>
     <div class="box-foot">دکمه‌ها</div>
   </section>
   مدیفایرها: box-flat (بدون کارت)، box-accent (برجسته)، box-danger (هشدار)
*/
.box {
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
}

.box-head,
.box-body,
.box-foot {
  padding: 14px var(--pad);
}

.box-head {
  font-weight: 600;
  border-block-end: 1px solid var(--line);
}

.box-body {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.box-foot {
  display: flex;
  gap: var(--gap);
  border-block-start: 1px solid var(--line);
}

.box-flat {
  background: transparent;
  border-radius: 0;
}
.box-accent {
  border: 1.5px solid var(--accent);
}
.box-danger {
  border: 1.5px solid var(--danger);
}

/* ---------- 5) کنترل‌های فرم (با selector خود تگ‌ها، بدون کلاس) ---------- */

/* گروه برچسب + کنترل + راهنما */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

label {
  font-size: 14px;
  font-weight: 500;
}

/* راهنما و خطا زیر فیلد */
.hint {
  font-size: 13px;
  color: var(--hint);
}
.error {
  font-size: 13px;
  color: var(--danger);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea,
select {
  width: 100%;
  min-height: var(--control-h);
  padding: 10px 14px;
  font: inherit;
  font-size: 16px; /* زیر 16px، iOS روی فوکوس زوم می‌کند */
  color: var(--text);
  background: var(--bg-2);
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s;
}

textarea {
  min-height: 96px;
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: var(--hint);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent);
}

/* وضعیت خطا: <input aria-invalid="true"> */
[aria-invalid="true"] {
  border-color: var(--danger) !important;
}

input:disabled,
textarea:disabled,
select:disabled,
button:disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* select: فلش سفارشی */
select {
  padding-inline-end: 38px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--hint) 50%),
    linear-gradient(135deg, var(--hint) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) 50%,
    calc(100% - 15px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
[dir="rtl"] select {
  background-position:
    20px 50%,
    15px 50%;
}

/* چک‌باکس و رادیو */
input[type="checkbox"],
input[type="radio"] {
  width: 22px;
  height: 22px;
  margin: 0;
  flex: none;
  accent-color: var(--accent);
}

/* سوییچ: <input type="checkbox" role="switch"> */
input[role="switch"] {
  appearance: none;
  -webkit-appearance: none;
  width: 48px;
  height: 28px;
  border-radius: 14px;
  background: var(--line);
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
}
input[role="switch"]::after {
  content: "";
  position: absolute;
  inset-block-start: 3px;
  inset-inline-start: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s;
}
input[role="switch"]:checked {
  background: var(--accent);
}
input[role="switch"]:checked::after {
  transform: translateX(20px);
}
[dir="rtl"] input[role="switch"]:checked::after {
  transform: translateX(-20px);
}

/* اسلایدر */
input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

/* ردیف چک‌باکس/سوییچ با برچسب: <label class="row between">…</label> */

/* ---------- 6) دکمه‌ها ---------- */
/*
   <button>اصلی</button>
   <button class="soft">ثانویه</button>
   <button class="ghost">متنی</button>
   <button class="danger">حذف</button>
   مدیفایرها: .block (تمام‌عرض)، .sm (کوچک)
*/
button,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--control-h);
  padding: 0 20px;
  font: inherit;
  font-weight: 600;
  color: var(--on-accent);
  background: var(--accent);
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition:
    opacity 0.15s,
    transform 0.1s;
}

button:active,
.btn:active {
  opacity: 0.8;
  transform: scale(0.98);
}

.soft {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.ghost {
  color: var(--link);
  background: transparent;
}
.danger {
  color: #fff;
  background: var(--danger);
}

.block {
  display: flex;
  width: 100%;
}
.sm {
  min-height: 34px;
  padding: 0 12px;
  font-size: 14px;
}

/* ---------- 7) لیست ---------- */
/*
   <ul class="list">
     <li><span class="grow">عنوان</span><small>توضیح</small></li>
   </ul>
   اگر آیتم‌ها کلیک‌پذیر هستند: li را به <a> یا <button class="ghost"> تبدیل کنید.
*/
.list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.list > li,
.list > a {
  display: flex;
  align-items: center;
  gap: var(--gap);
  min-height: 52px;
  padding: 10px var(--pad);
  color: inherit;
}

.list > * + * {
  border-block-start: 1px solid var(--line);
}

/* وقتی داخل box است، لبه‌های کامل بگیرد */
.box > .list > li,
.box > .list > a {
  padding-inline: var(--pad);
}

/* ---------- 8) اجزای کوچک ---------- */

/* تب‌ها: <nav class="tabs"><button aria-selected="true">…</button>…</nav> */
.tabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
}
.tabs > button {
  flex: 1;
  min-height: 38px;
  padding: 0 10px;
  color: var(--hint);
  background: transparent;
}
.tabs > button[aria-selected="true"] {
  color: var(--text);
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* بج / برچسب وضعیت: <span class="tag">جدید</span> — رنگ با .ok / .bad */
.tag {
  display: inline-block;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-radius: 999px;
}
.tag.ok {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 14%, transparent);
}
.tag.bad {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 14%, transparent);
}

/* آواتار/تصویر گرد */
.avatar {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-2);
}

/* نوار پیشرفت: <div class="bar"><i style="width:60%"></i></div> */
.bar {
  height: 6px;
  overflow: hidden;
  background: var(--bg-2);
  border-radius: 3px;
}
.bar > i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
  transition: width 0.3s;
}

/* اسپینر */
.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* اعلان کوتاه (Toast): بالای نوار پایین نمایش داده می‌شود */
.toast {
  position: fixed;
  inset-inline: var(--pad);
  inset-block-end: calc(var(--pad) + var(--tg-safe-area-inset-bottom, 0px));
  max-width: 400px;
  margin-inline: auto;
  padding: 12px 16px;
  color: #fff;
  background: rgba(30, 30, 30, 0.92);
  border-radius: var(--radius-sm);
  text-align: center;
  z-index: 100;
}

/* نوار ثابت پایین صفحه برای دکمه اصلی: <div class="bottom-bar"><button class="block">…</button></div> */
.bottom-bar {
  position: sticky;
  inset-block-end: 0;
  padding: var(--pad);
  background: var(--bg);
  border-block-start: 1px solid var(--line);
}

/* ---------- 9) کلاس‌های کمکی ---------- */
.muted {
  color: var(--hint);
}
.bold {
  font-weight: 600;
}
.small {
  font-size: 13px;
}
.t-center {
  text-align: center;
}
.t-danger {
  color: var(--danger);
}
.hidden {
  display: none !important;
}
.mt {
  margin-block-start: var(--gap);
}
.mb {
  margin-block-end: var(--gap);
}
.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---------- 10) دسترس‌پذیری ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}