/* ---------- متغیرهای کنترلی ---------- */
.wcb-progress-wrap{
  --bar-h:      12px;     /* ارتفاع نوار */
  --dot:        24px;     /* قطر دایره پله */

  /* رنگ‌های اصلی کروسل */
  --track:      #e9f6e6;  /* رنگ زمینه نوار (Track) */
  --accent:     #86d36f;  /* رنگ پرشدگی نوار و پله‌های طی‌شده (Accent) */
  --dotbg:      #ffffff;  /* رنگ داخل دایره (Dot) */
  --ring:       #86d36f;  /* رنگ حلقه/نبض دور دایره (Ring) */
  --ringA45:    rgba(134,211,111,.45); /* حلقه نرم (برای سایه) */
  --ringA55:    rgba(134,211,111,.55); /* رنگ نبض */

  /* رنگ‌های هدر/باکس */
  --chip-bg:    #eef7eb;  /* پس‌زمینه چیپ هدر */
  --chip-border:#cfe8c7;  /* خط دور چیپ هدر */
  --chip-text:  #0f5132;  /* متن چیپ هدر */
  --amount:     #059669;  /* رنگ رقم مبلغ */
  --box-bg:     #f8faf8;  /* پس‌زمینه باکس */
  --box-border: #e5e7eb;  /* کادر باکس */

  /* طول نوار */
  --bar-w:      70%;      /* در موبایل 100٪ می‌شود */
}

/* ظرف اصلی */
.wcb-progress-wrap{
  position:relative; z-index:2; display:block; clear:both;
  margin:12px 0 16px; padding:14px;
  border-radius:12px; background:var(--box-bg); border:1px solid var(--box-border);
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}
/* این خط را حفظ می‌کنیم تا در صورت نیاز شِمای پیش‌فرض هم درست باشد */
.wcb-progress-wrap.wcb-custom{ --track:#e9f6e6; --accent:#86d36f; --dotbg:#fff }

/* هدر */
.wcb-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-weight:700;gap:12px}
.wcb-head-info{display:flex;flex-direction:column;gap:4px}
.wcb-header .wcb-title{color:#111827}
.wcb-amount{font-weight:800;color:var(--amount);line-height:1}
.wcb-header .wcb-badge{
  background:var(--chip-bg);color:var(--chip-text);border:1px solid var(--chip-border);border-radius:999px;
  padding:4px 10px;font-weight:700;white-space:nowrap
}

/* ---------- نوار ---------- */
.wcb-bar{
  position:relative; height:var(--bar-h); border-radius:999px;
  background:var(--track); overflow:visible; width:var(--bar-w);
  /* فضای کافی برای لیبل‌های زیر نوار ایجاد شود تا روی دکمه‌ها نیفتد */
  margin-bottom: calc(var(--dot) + 20px);
}

/* LTR: فاصله سمت راست باکس بماند */
html[dir="ltr"] .wcb-bar{ margin-inline-start:0;  margin-inline-end:auto; }
/* RTL: فاصله سمت راست باکس بماند (نوار از راست جمع شود) */
html[dir="rtl"] .wcb-bar{ margin-inline-start:auto; margin-inline-end:0; }

.wcb-bar-fill{
  position:absolute; left:0; top:0; bottom:0; width:0;
  background:var(--accent); border-radius:999px; transition:width .45s ease;
}

/* ---------- پله‌ها (Pips) ---------- */
.wcb-pips{position:absolute; left:0; right:0; top:0; height:var(--bar-h); pointer-events:none}
.wcb-pip{
  position:absolute; left:0; top:calc(var(--bar-h)/2 - var(--dot)/2);
  width:var(--dot); height:var(--dot); transform:translateX(-50%);
  text-align:center; z-index:3;
}
.wcb-pip-dot{
  display:block; width:100%; height:100%; border-radius:999px;
  background:var(--dotbg); box-shadow:0 0 0 3px var(--ringA45);
}
.wcb-pip.reached .wcb-pip-dot{ background:var(--accent); box-shadow:none }
.wcb-pip.next   .wcb-pip-dot{ animation:wcb-pulse 1.4s ease-in-out infinite }
.wcb-pip-label{
  position:absolute; top:calc(var(--dot) + 8px); left:50%; transform:translateX(-50%);
  color:#6b7280; font-size:.85em; white-space:nowrap;
}

/* ---------- خط کم‌رنگ زیر نوار ---------- */
.wcb-sep{
  width:var(--bar-w); height:1px; background:#e9efe7;
  margin:6px 0 6px;
}
html[dir="ltr"] .wcb-sep{ margin-inline-start:0; margin-inline-end:auto; }
html[dir="rtl"] .wcb-sep{ margin-inline-start:auto; margin-inline-end:0; }

/* پایین ویجت (متن فقط … تا … باقی‌ست) */
.wcb-footer{margin-top:0; color:#6b7280; font-size:.9em}

/* افکت پالس */
@keyframes wcb-pulse{
  0%   { box-shadow:0 0 0 0   var(--ringA55) }
  70%  { box-shadow:0 0 0 10px color-mix(in srgb, var(--ring) 0%, transparent) } /* محو شدن */
  100% { box-shadow:0 0 0 0   color-mix(in srgb, var(--ring) 0%, transparent) }
}

/* ریسپانسیو موبایل: چیدمان ستونی و نوار تمام‌عرض */
@media (max-width:768px){
  .wcb-progress-wrap{ --bar-w:100%; }
  .wcb-header{flex-direction:column;align-items:flex-start;gap:6px}
  .wcb-amount{font-size:1rem}
  .wcb-header .wcb-badge{margin-top:2px}
  .wcb-pip-label{display:none} /* خلوت‌تر شدن زیر نوار در موبایل */
}

/* کمک برای جلوگیری از هم‌پوشانی با دکمه‌های مینی‌کارت در برخی قالب‌ها */
.widget_shopping_cart .wcb-progress-wrap{ margin-bottom:12px; }
.widget_shopping_cart .buttons,
.woocommerce-mini-cart__buttons.buttons{ position:relative; z-index:1; }