/* =========================================================
   Pardis Digital — نوار «مراحل خرید» (مشترک)
   ---------------------------------------------------------
   یک مارک‌آپ (template-parts/checkout-steps.php) و یک استایل برای
   سبد خرید، تسویه‌حساب و صفحه‌ی تکمیل سفارش؛ بنابراین اندازه‌ی دایره‌ها،
   متن‌ها، خطوط و فاصله‌ی بالا/پایین در هر سه صفحه دقیقاً یکسان است.
   این فایل فقط روی سبد خرید و تسویه‌حساب لود می‌شود (functions.php).
========================================================= */

/* فاصله‌ی یکسان بالای صفحه (زیر هدر) در سبد خرید و تسویه‌حساب */
html body.woocommerce-cart .pardis-cart-section,
html body.woocommerce-checkout .pardis-checkout-section{
  padding-top:clamp(28px,4vw,52px)!important;
}

.pardis-steps{
  --ps-size:48px;       /* قطر دایره‌ی شماره */
  --ps-gap:12px;        /* فاصله‌ی دایره تا متن */
  --ps-line-gap:18px;   /* فاصله‌ی خط رابط از دو طرف */
  display:flex;
  align-items:center;
  justify-content:center;
  direction:rtl;
  width:100%;
  max-width:880px;
  margin:0 auto clamp(28px,4vw,48px);
  padding:0;
  box-sizing:border-box;
}
.pardis-step{
  display:flex;
  align-items:center;
  gap:var(--ps-gap);
  flex:0 0 auto;
  min-width:0;
  color:#9b98b5;
  text-decoration:none!important;
}
.pardis-step__number{
  width:var(--ps-size);
  height:var(--ps-size);
  flex:0 0 var(--ps-size);
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#f0edff;
  color:#7b72a7;
  border:1px solid #e8e3ff;
  font-size:16px;
  font-weight:800;
  line-height:1;
  box-sizing:border-box;
  transition:transform .2s ease,box-shadow .2s ease;
}
.pardis-step__copy{display:flex;flex-direction:column;gap:2px;line-height:1.6;text-align:right}
.pardis-step__copy strong{font-size:14px;font-weight:700;color:#8e89a8;white-space:nowrap}
.pardis-step__copy small{font-size:11px;font-weight:500;color:#aaa6bf;white-space:nowrap}

.pardis-step.is-active .pardis-step__number,
.pardis-step.is-done .pardis-step__number{
  background:var(--pardis-primary);
  color:#fff;
  border-color:var(--pardis-primary);
  box-shadow:0 8px 22px rgba(var(--pardis-primary-rgb-comma),.24);
}
.pardis-step.is-active .pardis-step__copy strong{color:#2c2850}
.pardis-step.is-done:not(.is-active) .pardis-step__copy strong{color:var(--pardis-primary)}
a.pardis-step:hover .pardis-step__number{transform:translateY(-1px);box-shadow:0 10px 24px rgba(var(--pardis-primary-rgb-comma),.3)}

.pardis-step__line{
  flex:1 1 60px;
  min-width:28px;
  max-width:140px;
  height:2px;
  border-radius:2px;
  margin:0 var(--ps-line-gap);
  background:#e7e3f0;
}
.pardis-step__line.is-done{background:rgba(var(--pardis-primary-rgb-comma),.4)}

/* تبلت */
@media (max-width:1000px){
  .pardis-steps{--ps-size:44px;--ps-line-gap:14px}
  .pardis-step__number{font-size:15px}
  .pardis-step__copy strong{font-size:13px}
  .pardis-step__copy small{font-size:10.5px}
}

/* موبایل: متن زیر دایره قرار می‌گیرد تا هر سه مرحله در عرض‌های کوچک
   (تا ۳۲۰px) بدون بریده شدن متن یا اسکرول افقی جا شوند؛ خط رابط هم‌تراز
   با مرکز دایره‌ها می‌ماند. */
@media (max-width:700px){
  .pardis-steps{--ps-size:40px;--ps-gap:8px;--ps-line-gap:4px;align-items:flex-start}
  .pardis-step{flex-direction:column;text-align:center}
  .pardis-step__number{font-size:14px}
  .pardis-step__copy{text-align:center}
  .pardis-step__copy strong{font-size:12px}
  .pardis-step__copy small{display:none}
  .pardis-step__line{
    flex:1 1 auto;
    min-width:16px;
    max-width:90px;
    margin-top:calc(var(--ps-size) / 2 - 1px);
  }
}
@media (max-width:380px){
  .pardis-steps{--ps-size:36px;--ps-gap:6px}
  .pardis-step__number{font-size:13px}
  .pardis-step__copy strong{font-size:11px}
  .pardis-step__line{min-width:10px}
}

/* حالت تیره (.dark روی <html>) */
.dark .pardis-step{color:#6f6c8f}
.dark .pardis-step__number{background:rgba(var(--pardis-primary-rgb-comma),.14);color:var(--pardis-primary-tint);border-color:rgba(var(--pardis-primary-rgb-comma),.25)}
.dark .pardis-step__copy strong{color:#9895c0}
.dark .pardis-step__copy small{color:#6f6c8f}
.dark .pardis-step.is-active .pardis-step__number,
.dark .pardis-step.is-done .pardis-step__number{background:var(--pardis-primary);color:#fff;border-color:var(--pardis-primary)}
.dark .pardis-step.is-active .pardis-step__copy strong{color:#f0eeff}
.dark .pardis-step.is-done:not(.is-active) .pardis-step__copy strong{color:var(--pardis-primary-tint)}
.dark .pardis-step__line{background:var(--border)}
.dark .pardis-step__line.is-done{background:rgba(var(--pardis-primary-rgb-comma),.45)}

/* =========================================================
   رفع اسکرول افقی در موبایل (به‌خصوص حالت Responsive در Inspect مرورگر)
   ---------------------------------------------------------
   ووکامرس سلکت اصلی «کشور/استان» را بعد از فعال شدن select2 با کلاس
   select2-hidden-accessible به یک جعبه‌ی ۱ پیکسلی نامرئی تبدیل می‌کند.
   قانون ‎.pardis-checkout-fields select{width:100%!important}‎ این عرض را
   بازنویسی می‌کرد و آن سلکت نامرئی (position:absolute) به اندازه‌ی کل صفحه
   پهن و به بیرون از صفحه (سمت چپ در RTL) کشیده می‌شد. نتیجه: عرض سند
   بیشتر از عرض گوشی می‌شد، مرورگر در حالت شبیه‌ساز موبایل صفحه را کوچک
   (zoom out) می‌کرد و منوی کناری که بیرون از صفحه پنهان است دیده می‌شد.
   ========================================================= */
html body select.select2-hidden-accessible,
html body .select2-hidden-accessible{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  min-height:0!important;
  max-width:1px!important;
  margin:-1px!important;
  padding:0!important;
  border:0!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
}

/* لایه‌ی ایمنی: هیچ محتوایی در این دو صفحه نتواند عرض سند را بیشتر از
   عرض صفحه کند (overflow:clip برخلاف hidden، position:sticky ستون خلاصه‌ی
   سفارش را خراب نمی‌کند). */
html body.woocommerce-cart .pardis-cart-section,
html body.woocommerce-checkout .pardis-checkout-section{
  overflow-x:clip;
}