@charset "UTF-8";
/* ==========================================================================
   ایران مولتی برند — پریمیتیوهای مشترک (واژگان دو-خط تیره / BEM)

   چرا این فایل وجود دارد:
   app.css واژگان تک-خط‌تیره دارد (.btn-primary, .card) ولی تمپلیت‌های بخش
   تراکنشی و حساب کاربری با واژگان BEM نوشته شده‌اند (.btn--primary, .card__head).
   این فایل «تنها منبع حقیقت» برای همان پریمیتیوهای مشترک است تا در چهار
   فایل صفحه‌ای تکرار نشود.

   وابستگی: app.css باید قبلاً لود شده باشد (توکن‌های :root و پایه‌های
   .btn / .card / .field / .badge / .alert / .chip / .table-wrap آنجا هستند).
   ترتیب لود: app → rtl → nav → card → ui → [صفحه] → mobile
   ========================================================================== */


/* ==========================================================================
   ۱. قالب صفحه
   ========================================================================== */

/* .page یک <main> است؛ فاصله عمودی را خودش می‌دهد تا هر ویو مجبور نباشد
   .section بگذارد. صفحه‌های تراکنشی بردکرامب دارند، پس فاصله بالا کم است. */
.page{
  display:block;
  padding-block:var(--sp-5) var(--sp-8);
  min-height:40vh;
}
@media (max-width:639px){
  .page{padding-block:var(--sp-4) var(--sp-6)}
}

/* عنوان اصلی صفحه — یکی در هر صفحه، پس مستقیم روی h1 نمی‌نویسیم که
   عنوان‌های داخل کارت‌ها را هم نگیرد. */
.page__title{
  font-size:clamp(19px,2.4vw,26px);
  font-weight:700;
  line-height:1.6;
  color:var(--c-ink);
  margin-bottom:var(--sp-5);
}
.page__lead{
  font-size:15px;
  line-height:2;
  color:var(--c-ink-3);
  max-width:70ch;
  margin-top:calc(var(--sp-4) * -1);
  margin-bottom:var(--sp-5);
}

/* ستون باریک برای صفحاتی که فقط یک کارت مرکزی دارند (ورود، نتیجه پرداخت، خطا).
   کلاس روی همان .container گذاشته می‌شود، پس فقط max-width را کم می‌کند. */
.container--narrow{max-width:720px}

/* برچسب صفحه‌ها — فعلاً فقط قلاب هستند تا ویوها کلاس بی‌تعریف نداشته باشند
   و بعداً بشود بدون تغییر تمپلیت رفتار صفحه را عوض کرد. */
.page--cart,
.page--checkout,
.page--order,
.page--user,
.page--auth,
.page--payment-result,
.page--error{background:var(--c-bg)}

/* صفحه ورود و نتیجه پرداخت محتوای کمی دارند؛ کارت باید در وسط بنشیند
   نه اینکه به هدر بچسبد. */
.page--auth,
.page--payment-result,
.page--error{padding-block:var(--sp-7) var(--sp-8)}


/* ==========================================================================
   ۲. دکمه‌ها  (.btn پایه در app.css است — اینجا فقط تم رنگی)
   قرارداد متغیرها: --btn-bg / --btn-fg / --btn-bd
   ========================================================================== */

.btn--primary{
  --btn-bg:var(--c-primary); --btn-fg:#fff; --btn-bd:var(--c-primary);
  box-shadow:0 4px 14px rgba(var(--c-primary-rgb),.22);
  font-weight:700;
}
.btn--accent{
  --btn-bg:var(--c-accent); --btn-fg:#fff; --btn-bd:var(--c-accent);
  box-shadow:0 4px 14px rgba(255,122,26,.24);
  font-weight:700;
}
/* دکمه ثانویه: خط دور آبی کم‌رنگ، بدون پرکنندگی — در کنار --primary
   نباید هم‌وزن دیده شود. */
.btn--outline{--btn-bg:transparent; --btn-fg:var(--c-primary-dark); --btn-bd:#B9C6E8}
.btn--ghost{--btn-bg:transparent; --btn-fg:var(--c-ink-2); --btn-bd:var(--c-line)}
.btn--soft{--btn-bg:var(--c-primary-soft); --btn-fg:var(--c-primary-dark); --btn-bd:transparent}

/* کنش‌های ویرانگر (حذف آدرس، حذف از علاقه‌مندی‌ها). عمداً کم‌رنگ است تا
   تصادفاً زده نشود؛ فقط در hover قرمز پر می‌شود. */
.btn--danger-ghost{--btn-bg:transparent; --btn-fg:var(--c-danger); --btn-bd:#F6D4D4}

.btn--block{display:flex; width:100%}

.btn--sm{min-height:36px; padding:0 14px; font-size:13px; border-radius:var(--r-sm)}
.btn--sm svg{width:16px; height:16px}
.btn--lg{min-height:54px; padding:0 28px; font-size:16px; font-weight:700}

/* دکمه‌ای که مثل لینک دیده می‌شود ولی <button> است (ارسال دوباره کد، تغییر شماره).
   ارتفاع ۴۴px نگه داشته می‌شود چون هدف لمسی است، ولی پس‌زمینه ندارد. */
.btn--link{
  --btn-bg:transparent; --btn-fg:var(--c-primary); --btn-bd:transparent;
  min-height:44px; padding:0 6px;
  font-size:13.5px; font-weight:500;
  box-shadow:none;
}
.btn--link:disabled,
.btn--link[aria-disabled=true]{--btn-fg:var(--c-ink-3); opacity:1}

@media (hover:hover){
  .btn--primary:hover{--btn-bg:var(--c-primary-dark); --btn-bd:var(--c-primary-dark)}
  .btn--accent:hover{--btn-bg:#EB6A0C; --btn-bd:#EB6A0C}
  .btn--outline:hover{--btn-bg:var(--c-primary-soft); --btn-bd:var(--c-primary)}
  .btn--ghost:hover{--btn-bg:var(--c-line-2); --btn-fg:var(--c-ink)}
  .btn--soft:hover{--btn-bg:#E2EAFF}
  .btn--danger-ghost:hover{--btn-bg:var(--c-danger); --btn-fg:#fff; --btn-bd:var(--c-danger)}
  .btn--link:hover{--btn-fg:var(--c-primary-dark); text-decoration:underline; transform:none}
}

/* در موبایل هیچ دکمه‌ای نباید زیر ۴۴px شود (WCAG 2.5.5) */
@media (max-width:639px){
  .btn--sm{min-height:44px; padding:0 16px}
}


/* ==========================================================================
   ۳. کارت  (.card پایه در app.css)
   ========================================================================== */

/* سرِ کارت: عنوان در یک سمت و لینک «همه» در سمت مقابل. */
.card__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-3); flex-wrap:wrap;
  margin-bottom:var(--sp-4);
  padding-bottom:12px;
  border-bottom:1px solid var(--c-line-2);
}
.card__head .card__title{margin-bottom:0; padding-bottom:0; border-bottom:0}

.card__title{
  font-size:16px; font-weight:700; line-height:1.7; color:var(--c-ink);
  margin-bottom:var(--sp-4);
  padding-bottom:12px;
  border-bottom:1px solid var(--c-line-2);
}
/* اگر عنوان تنها فرزند کارت باشد خط زیرش اضافی است */
.card__title:last-child{margin-bottom:0; padding-bottom:0; border-bottom:0}

.card__hint{
  font-size:13px; line-height:2; color:var(--c-ink-3);
}
.card__hint:not(:last-child){margin-bottom:var(--sp-3)}

.card__more{
  font-size:13px; font-weight:500; color:var(--c-primary);
  display:inline-flex; align-items:center; gap:5px;
  min-height:32px;
  white-space:nowrap;
}
.card__more::after{content:'‹'; font-size:16px; line-height:1}
@media (hover:hover){.card__more:hover{color:var(--c-primary-dark); text-decoration:underline}}

/* کارت‌های پشت سر هم نباید بچسبند. حاشیه بالا می‌دهیم نه پایین، تا کارت
   آخرِ ستون فاصله اضافی زیر خودش نسازد. */
.card + .card,
section.card{margin-top:var(--sp-4)}
section.card:first-child{margin-top:0}


/* ==========================================================================
   ۴. فرم‌ها  (.field پایه در app.css)
   ========================================================================== */

/* ویوها <label> خام می‌گذارند (نه .label)، پس اینجا استایلش می‌دهیم. */
.field > label{
  display:block;
  font-size:13px; font-weight:500; color:var(--c-ink-2);
  margin-bottom:7px;
}
.field__hint{
  display:block;
  font-size:12.5px; line-height:1.9; color:var(--c-ink-3);
  margin-top:6px;
}

/* داخل گریدهای فرم، این فیلد کل عرض را می‌گیرد (نشانی، توضیح سفارش). */
.field--full{grid-column:1 / -1}

/* فیلد چک‌باکس: برچسب کنار مربع می‌نشیند نه بالای آن، پس margin پیش‌فرض
   label را خنثی می‌کنیم. */
.field--check > label{
  display:flex; align-items:center; gap:10px;
  margin-bottom:0;
  font-size:14px; font-weight:400; color:var(--c-ink-2);
  cursor:pointer;
  min-height:44px;              /* هدف لمسی */
}
.field--check input[type=checkbox]{
  width:20px; height:20px; min-height:0; flex:none;
  margin:0; padding:0;
  border:1.5px solid #CBD2DE; border-radius:6px;
  background:#fff; cursor:pointer;
  position:relative;
  transition:background var(--t-fast), border-color var(--t-fast);
}
.field--check input[type=checkbox]:checked{background:var(--c-primary); border-color:var(--c-primary)}
.field--check input[type=checkbox]:checked::after{
  content:''; position:absolute; inset:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;
}

/* نوار دکمه‌های پایین فرم */
.form-actions{
  display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
  grid-column:1 / -1;
  margin-top:var(--sp-2);
  padding-top:var(--sp-4);
  border-top:1px solid var(--c-line-2);
}
@media (max-width:479px){
  .form-actions{flex-direction:column; align-items:stretch}
  .form-actions .btn{width:100%}
}

/* گرید فرم آدرس — هم در تسویه و هم در پنل کاربر استفاده می‌شود، پس
   اینجاست نه در cart.css. */
.address-form{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 var(--sp-4);
}
@media (max-width:639px){
  .address-form{grid-template-columns:1fr}
}

/* تله ربات — باید از دید کاربر و صفحه‌خوان پنهان باشد ولی نه با
   display:none، چون بعضی ربات‌ها فیلدهای display:none را پر نمی‌کنند. */
.hp{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px; border:0;
  overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap;
  pointer-events:none;
}


/* ==========================================================================
   ۵. هشدارها  (.alert پایه در app.css)
   ========================================================================== */

.alert--success{background:#E9F8F0; border-color:#BFE8D3; color:#0B6E3F}
.alert--danger,
.alert--error{background:#FDECEC; border-color:#F8CFCF; color:#A81919}
.alert--warn,
.alert--warning{background:#FEF6E7; border-color:#FAE2B4; color:#8A5A05}
.alert--info{background:var(--c-primary-soft); border-color:#D5E1FF; color:var(--c-primary-dark)}

/* هشدارهای این صفحات آیکون ندارند (فقط متن)، پس فاصله چپ اضافی لازم نیست */
.alert--warn:not(:has(svg)),
.alert--danger:not(:has(svg)){display:block}


/* ==========================================================================
   ۶. نشان‌ها  (.badge پایه در app.css)
   ========================================================================== */

/* نشان خنثی و کم‌رنگ — «پیش‌فرض» کنار عنوان آدرس. */
.badge--soft{
  background:var(--c-primary-soft); color:var(--c-primary-dark);
  font-style:normal; font-weight:500;
}
.badge--primary{background:var(--c-primary-soft); color:var(--c-primary-dark)}
.badge--accent{background:var(--c-accent-soft); color:var(--c-accent-ink)}
.badge--success{background:#E6F6EE; color:#0B7A44}
.badge--danger{background:#FDECEC; color:#B01B1B}
.badge--warn{background:#FEF5E4; color:#9A6206}
.badge--muted{background:var(--c-line-2); color:var(--c-ink-3)}

/* وضعیت سفارش — نام کلاس مستقیماً از ستون orders.status ساخته می‌شود
   (badge--<?= $order['status'] ?>)، پس هر مقدار enum باید اینجا رنگ داشته باشد
   وگرنه نشان خاکستری بی‌معنی می‌شود. */
.badge--pending{background:#FEF5E4; color:#9A6206}
.badge--paid{background:#E6F6EE; color:#0B7A44}
.badge--processing{background:var(--c-primary-soft); color:var(--c-primary-dark)}
.badge--shipped{background:#E7F1FF; color:#14479B}
.badge--delivered{background:#E6F6EE; color:#0B7A44}
.badge--canceled{background:#FDECEC; color:#B01B1B}
.badge--refunded{background:var(--c-line-2); color:var(--c-ink-2)}
/* نقطه رنگی جلوی نشان وضعیت تا در جدول سیاه‌وسفید هم قابل تفکیک باشد */
.badge--pending::before,
.badge--paid::before,
.badge--processing::before,
.badge--shipped::before,
.badge--delivered::before,
.badge--canceled::before,
.badge--refunded::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:currentColor; flex:none;
}


/* ==========================================================================
   ۷. چیپ‌های فیلتر
   ========================================================================== */

/* در موبایل به‌جای شکستن به چند سطر، افقی اسکرول می‌شود تا ارتفاع صفحه
   را نخورد. نوار اسکرول مخفی است چون خودِ چیپ‌ها بریدگی را نشان می‌دهند. */
.filter-chips{
  display:flex; align-items:center; gap:9px;
  flex-wrap:wrap;
  margin-bottom:var(--sp-5);
}
.filter-chips .chip{min-height:38px}
@media (max-width:767px){
  .filter-chips{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:6px;
    /* لبه‌ها را تا انتهای container می‌کشیم تا چیپ آخر «نصفه» گیر نکند */
    margin-inline:calc(var(--sp-4) * -1);
    padding-inline:var(--sp-4);
  }
  .filter-chips::-webkit-scrollbar{display:none}
  .filter-chips .chip{flex:none; min-height:44px}
}


/* ==========================================================================
   ۸. جدول داده
   ========================================================================== */

/* .table-wrap در app.css همه کار سنگین را می‌کند (اسکرول افقی و تبدیل
   به کارت در موبایل با data-label). اینجا فقط تنظیم‌های ریز جدول. */
.data-table{
  width:100%;
  border-collapse:collapse;
  font-variant-numeric:tabular-nums;
}
.data-table td{vertical-align:middle}
.data-table .badge{vertical-align:middle}
/* ستون آخر فقط دکمه «جزئیات» دارد */
.data-table td:last-child{text-align:end; white-space:nowrap}
@media (max-width:639px){
  /* در حالت کارتی، ردیفِ دکمه برچسب خالی دارد؛ دکمه تمام عرض شود */
  .data-table td:last-child{justify-content:stretch}
  .data-table td:last-child .btn{width:100%}
}


/* ==========================================================================
   ۹. کاشی‌های آمار
   ========================================================================== */

.stat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:var(--sp-3);
  margin-bottom:var(--sp-5);
}
@media (max-width:479px){
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
}

.stat{
  display:flex; flex-direction:column; gap:6px;
  background:var(--c-surface);
  border:1px solid var(--c-line);
  border-radius:var(--r-md);
  padding:16px 18px;
  box-shadow:var(--sh-1);
}
.stat__label{font-size:12.5px; color:var(--c-ink-3); line-height:1.7}
.stat__value{
  font-size:20px; font-weight:700; line-height:1.5;
  color:var(--c-ink);
  font-variant-numeric:tabular-nums;
}
/* کاشی تأکیدی (کیف پول) — مبلغ است، پس با رنگ CTA از بقیه جدا می‌شود. */
.stat--accent{
  background:var(--c-accent-soft);
  border-color:#FFD9BC;
}
.stat--accent .stat__label{color:#9A5410}
.stat--accent .stat__value{font-size:17px; color:#B8480A}
@media (max-width:479px){
  .stat{padding:13px 14px}
  .stat__value{font-size:17px}
  .stat--accent .stat__value{font-size:15px}
}


/* ==========================================================================
   ۱۰. دسترس‌پذیری سراسری
   ========================================================================== */

/* حلقه فوکوس فقط برای ناوبری با کیبورد — با ماوس دیده نمی‌شود.
   :focus-visible روی همه عناصر تعاملی این بخش‌ها. */
.page :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--c-primary);
  outline-offset:2px;
  border-radius:var(--r-sm);
}
/* لیبل‌های رادیویی که خودشان کارت هستند، حلقه را روی کل کارت می‌خواهند */
.page label:has(input:focus-visible){
  outline:2px solid var(--c-primary);
  outline-offset:2px;
}

/* احترام به تنظیم سیستم — هیچ انیمیشن یا حرکتی در این بخش‌ها اجرا نشود. */
@media (prefers-reduced-motion:reduce){
  .page *,
  .page *::before,
  .page *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .btn:hover{transform:none !important}
}