/* ============================================================================
 * shop.css — فروشگاه · سبد · تسویه · فاکتور (فاز ۳۶)
 * ----------------------------------------------------------------------------
 * چرا یک فایلِ جدا: این کلاس‌ها فقط در صفحه‌های فروشگاه مصرف می‌شوند و در
 * `site-ui.css`/`admin-ui.css` بارِ اضافه برای بقیهٔ سایت می‌شدند.
 * پنل و سایت هر دو همین فایل را لینک می‌کنند (کلاس‌ها هم‌پوشان‌اند) تا
 * فاکتورِ چاپی و صفحهٔ سبد یکسان دیده شوند.
 *
 * متغیرها از `design-system.css` می‌آیند؛ اینجا هیچ `--x` تازه‌ای تعریف
 * نمی‌شود چون `CssIntegrityTest` تعریف‌نشده‌ها را می‌گیرد و تعریفِ تکراری
 * یعنی دو منبعِ حقیقت برای یک رنگ.
 * ========================================================================== */

/* ---------- قیمت و تخفیف ---------- */
.price { margin: .4rem 0; }
.price del { color: var(--color-ink-muted); margin-inline-end: .35rem; font-size: .9em; }
.price strong { font-weight: 700; }
.price.big { font-size: 1.35rem; }
.price .discount, .discount { color: var(--color-danger); }

.sale-tag {
  display: inline-block;
  margin-inline-start: .4rem;
  padding: .1rem .45rem;
  border-radius: 999px;
  font-size: .75rem;
  background: var(--color-gold-soft);
  color: var(--color-danger);
}

/* ---------- کارت و چیدمان کاتالوگ ---------- */
.product-card { display: flex; flex-direction: column; gap: .35rem; }
.grid-3 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.product-detail { display: grid; gap: 1.5rem; grid-template-columns: 2fr 1fr; align-items: start; }
@media (max-width: 780px) { .product-detail { grid-template-columns: 1fr; } }

.breadcrumb { font-size: .85rem; color: var(--color-ink-muted); margin-bottom: .75rem; }
.meta { list-style: none; padding: 0; margin: .75rem 0; display: grid; gap: .25rem; }
.meta li { font-size: .9rem; color: var(--color-ink-muted); }
.delivery { font-size: .85rem; color: var(--color-ink-muted); background: var(--color-bg-alt); }

/* ---------- سبد و جمعِ مبالغ ---------- */
/* گام ۴۳ — جعبهٔ پرداختِ سفارش.
   ⚠️ دکمهٔ غیرفعال باید *خوانا* بماند: `opacity` خیلی کم یعنی کاربر فکر
   می‌کند رنگش اشتباه است. اینجا فقط کمی کم‌رنگ و بدونِ اثرِ انگشت. */
.pay-box { margin-top: 1rem; }
.pay-box form { margin: 0; }
.pay-box button[disabled] { opacity: .55; cursor: not-allowed; }

.cart-summary { margin-top: 1rem; }
.cart-summary ul.plain { list-style: none; padding: 0; margin: 0 0 .75rem; display: grid; gap: .2rem; }

.totals { display: grid; grid-template-columns: 1fr auto; gap: .2rem .75rem; margin: .75rem 0; }
.totals dt, .totals dd { margin: 0; }
.totals dd { text-align: left; }
.totals .grand { font-weight: 700; border-top: 1px solid var(--color-border); padding-top: .4rem; margin-top: .2rem; }

.checkout-grid { display: grid; gap: 1rem; grid-template-columns: 2fr 1fr; align-items: start; }
@media (max-width: 900px) { .checkout-grid { grid-template-columns: 1fr; } }

.form-grid { display: grid; gap: .6rem; grid-template-columns: repeat(2, 1fr); }
.form-grid .wide { grid-column: 1 / -1; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }

/* ---------- ردیفِ کنترل ---------- */
.row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.inline-form { display: inline; }
.filter-row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: .75rem 0; }
.filter-row label.inline { display: inline-flex; gap: .3rem; align-items: center; }
label.inline { display: inline-flex; gap: .35rem; align-items: center; }
.chip-row { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin: .5rem 0; }

.chip {
  padding: .15rem .6rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: .85rem;
  text-decoration: none;
}

/* ---------- وضعیت سفارش ---------- */
.status-strip { display: flex; gap: 1.5rem; flex-wrap: wrap; margin: .75rem 0 1.25rem; }
.status-strip > div { display: grid; gap: .15rem; }
.status-strip .muted { font-size: .78rem; }

.timeline { list-style: none; padding-inline-start: 1rem; border-inline-start: 2px solid var(--color-border); margin: .5rem 0 1rem; }
.timeline li { padding: .3rem 0 .3rem .5rem; position: relative; }
.timeline li::before {
  content: '';
  position: absolute;
  inset-inline-start: -1.32rem;
  top: .7rem;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--color-border-strong);
}

/* ---------- هشدار ---------- */
.alert { padding: .5rem .75rem; border-radius: 6px; margin: .5rem 0; }
.alert-warn { background: #fff8e1; border: 1px solid #f0d68a; color: #6b5200; }

/* ---------- پنل ---------- */
.stat-row { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .9rem; }
.stat-row span { color: var(--color-ink-muted); }

.tabs { display: flex; gap: .25rem; flex-wrap: wrap; border-bottom: 1px solid var(--color-border); margin: .75rem 0 1rem; }
.tab { padding: .45rem .8rem; text-decoration: none; border-bottom: 2px solid transparent; }
.tab.active { border-bottom-color: var(--color-navy-2); font-weight: 700; }

.split { display: grid; gap: 1.25rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1000px) { .split { grid-template-columns: 2fr 1fr; } }
.split form.card { display: grid; gap: .5rem; }

/* ---------- جدول و جمعِ ستون ---------- */
.table { width: 100%; border-collapse: collapse; margin: .5rem 0 1rem; }
.table th, .table td { border-bottom: 1px solid var(--color-border); padding: .45rem .5rem; text-align: right; vertical-align: top; }
.table th { font-size: .8rem; color: var(--color-ink-muted); font-weight: 600; }

.pager { display: flex; gap: .3rem; flex-wrap: wrap; margin: .75rem 0; }
.pager a { padding: .25rem .55rem; border: 1px solid var(--color-border); border-radius: 4px; text-decoration: none; }
.pager a.active { background: var(--color-navy-2); color: #fff; border-color: var(--color-navy-2); }

button.link, .link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--color-navy-2);
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
}

details.card { margin: .75rem 0; }
details.card summary { cursor: pointer; font-weight: 600; }

/* ---------- تماشاخانهٔ ویدیو (فاز ۳۶-B) ---------- */
.video-card img,
.video-thumb.placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--color-navy-2);
}
.video-thumb.placeholder { background: linear-gradient(135deg, var(--color-navy), var(--color-navy-3)); }

.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 1rem 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-navy);
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; padding: 0; margin: .4rem 0; }
.chips li {
  padding: .1rem .5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: .75rem;
  color: var(--color-ink-soft);
}

.badge.repost {
  display: inline-block;
  padding: .15rem .5rem;
  border-radius: var(--radius-sm);
  background: var(--color-gold-soft);
  color: var(--color-navy-2);
  font-size: .78rem;
}

ul.plain { list-style: none; padding: 0; margin: .5rem 0; display: grid; gap: .25rem; }

/* ---------- ارزیابی اولیهٔ پرونده (فاز ۳۶-D) ---------- */
.assessment-form { display: grid; gap: 1rem; max-width: 46rem; }
.assessment-form fieldset { border: 1px solid var(--color-border); }
.assessment-form legend { font-weight: 600; padding: 0 .35rem; }
.assessment-form .required { color: var(--color-danger); }

.level-card { display: grid; gap: .3rem; margin-bottom: 1.25rem; }
.level-card .level-label { font-size: 1.4rem; font-weight: 700; }

.findings { list-style: none; padding: 0; display: grid; gap: .6rem; margin: 0 0 1.25rem; }
.finding {
  padding: .6rem .8rem;
  border-inline-start: 4px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
}
.finding p { margin: .25rem 0 0; font-size: .9rem; }
.finding.sev-info     { border-inline-start-color: var(--color-info); }
.finding.sev-warning  { border-inline-start-color: var(--color-warning); }
.finding.sev-critical { border-inline-start-color: var(--color-danger); }

.actions { padding-inline-start: 1.2rem; display: grid; gap: .3rem; }
.ai-card { border: 1px dashed var(--color-gold); }

table.form-grid { display: grid; gap: .6rem; }

/* ---------- PWA و آفلاین (فاز ۳۶-E) ---------- */
/* نوارِ «نسخهٔ تازه آماده است». عمداً `position: fixed` و `role="status"`
 * است تا با صفحه‌خوان خوانده شود؛ یک به‌روزرسانیِ نامرئی یعنی کاربر تا
 * ابد روی نسخهٔ کهنه می‌ماند. */
.pwa-update {
  position: fixed;
  inset-block-end: 1rem;
  inset-inline: 1rem;
  margin-inline: auto;
  max-inline-size: 34rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .7rem 1rem;
  background: var(--color-navy-2);
  color: #fff;
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 24px rgb(0 0 0 / 25%);
  z-index: 999;
}
.pwa-update .btn-primary { white-space: nowrap; }

.offline-actions { display: grid; gap: .5rem; }
.offline-law-list { list-style: none; padding: 0; display: grid; gap: .4rem; }
.offline-law-list li { display: flex; justify-content: space-between; gap: 1rem; }

/* ---------- پروندهٔ موکل (فاز ۳۶-F) ---------- */
.portal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 1.25rem 0;
  padding-block: .5rem;
  border-block: 1px solid var(--color-border);
}
.portal-nav a {
  padding: .35rem .8rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.portal-nav a:hover { background: var(--color-bg-alt); }

/* «کارِ در انتظارِ من» — تنها چیزی که بالای صفحه می‌آید چون تنها چیزی است که
 * باید کاری بکند. شدت از چپ (کم) به راست (زیاد). */
.todo-list { display: grid; gap: .5rem; margin-bottom: 1.5rem; }
.todo {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .8rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  border-inline-start: 5px solid var(--color-border-strong);
  text-decoration: none;
  color: inherit;
  background: var(--color-bg-alt);
}
.todo-count {
  min-inline-size: 2.2rem;
  text-align: center;
  font-weight: 700;
  font-size: 1.15rem;
}
.todo-warning  { border-inline-start-color: var(--color-warning); }
.todo-danger   { border-inline-start-color: var(--color-danger); }

.card.stat { display: grid; gap: .2rem; }
.card.stat .stat-value { font-size: 1.6rem; font-weight: 700; }
.card.stat .stat-label { color: var(--color-ink-muted); font-size: .9rem; }

.neg { color: var(--color-danger); }
.pos { color: var(--color-success); }

.timeline { padding-inline-start: 1.2rem; display: grid; gap: .8rem; }
.timeline li::marker { color: var(--color-ink-muted); }

/* نوارِ صفحه‌بندی. `.on` قبلاً در `admin-ui.css` هست؛ این‌ها برای صفحاتِ
 * عمومی‌اند و آن استایل فقط در چیدمانِ ادمین بارگذاری می‌شود. */
.pager { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: 1rem; }
.pager a, .pager span {
  min-inline-size: 2.2rem;
  padding: .3rem .55rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  text-align: center;
  text-decoration: none;
}
.pager a.on { background: var(--color-navy-2); color: #fff; border-color: var(--color-navy-2); }
.pager-prev, .pager-next { font-weight: 600; }

/* ---------- هستهٔ سئو (فاز ۳۶-C) ---------- */
.serp {
  display: grid;
  gap: .2rem;
  padding: .75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
}
.serp-url    { color: var(--color-success); font-size: .8rem; direction: ltr; text-align: left; }
.serp-title  { color: #1a0dab; font-size: 1.05rem; }
.serp-desc   { color: var(--color-ink-soft); font-size: .88rem; }

pre {
  background: var(--color-navy);
  color: #dbe6f5;
  padding: .75rem;
  border-radius: var(--radius-sm);
  overflow: auto;
  max-height: 22rem;
  font-size: .8rem;
  direction: ltr;
  text-align: left;
}

details.card > summary, .card > details > summary { cursor: pointer; font-weight: 600; margin: .25rem 0; }

/* ---------- چاپ ---------- */
.print-sheet table { width: 100%; border-collapse: collapse; margin: .75rem 0; }
.print-sheet th, .print-sheet td { border: 1px solid #ddd; padding: .4rem; text-align: right; }
.print-sheet .totals { margin-inline-start: auto; max-width: 320px; display: grid; grid-template-columns: 1fr auto; gap: .15rem .6rem; }
.print-sheet .totals dt, .print-sheet .totals dd { margin: 0; padding: .2rem .4rem; }
.print-sheet .totals dd { text-align: left; }
.print-only { display: block; margin-bottom: 1rem; }
@media print { .print-only { display: none; } }