/* =========================================
   Modern Checkout Steps - WoodMart
   ========================================= */
.wd-checkout-steps{
  --st-primary:#2563eb;
  --st-primary-soft:rgba(37,99,235,.15);
  --st-done:#16a34a;
  --st-done-soft:rgba(22,163,74,.15);
  --st-idle-bg:#f1f5f9;
  --st-idle-border:#e2e8f0;
  --st-idle-text:#94a3b8;
  --st-line:#e2e8f0;
  --st-size:54px;

  --ic-cart-g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
  --ic-pay-g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2'/%3E%3Cline x1='1' y1='10' x2='23' y2='10'/%3E%3Cline x1='5' y1='15' x2='9' y2='15'/%3E%3C/svg%3E");
  --ic-done-g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");
  --ic-cart-w:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
  --ic-pay-w:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2'/%3E%3Cline x1='1' y1='10' x2='23' y2='10'/%3E%3Cline x1='5' y1='15' x2='9' y2='15'/%3E%3C/svg%3E");
  --ic-done-w:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");
  --ic-check-w:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* ---------- Page title bar: light & clean ---------- */
/* اگر می‌خواهید پس‌زمینه تیره فعلی بماند، این بلوک را حذف کنید */
.wd-page-title:has(.wd-checkout-steps){
  padding:34px 0 30px!important;
  background:linear-gradient(180deg,#f8fafc 0%,#ffffff 100%)!important;
  border-bottom:1px solid #eef2f7;
}
.wd-page-title:has(.wd-checkout-steps) .wd-page-title-bg{display:none!important}

/* ---------- Container ---------- */
.wd-page-title ul.wd-checkout-steps{
  display:flex!important;justify-content:center;align-items:flex-start;flex-wrap:nowrap!important;
  gap:0!important;margin:0 auto!important;padding:0!important;list-style:none!important;
  max-width:640px;width:100%;
}

/* ---------- Each step ---------- */
.wd-checkout-steps > li{
  position:relative;flex:1 1 0;min-width:0;
  display:flex!important;flex-direction:column;align-items:center;text-align:center;
  margin:0!important;padding:0!important;list-style:none!important;
  color:var(--st-idle-text)!important;opacity:1!important;
}

/* Reset WoodMart link/span styles */
.wd-checkout-steps > li a,
.wd-checkout-steps > li span,
.wd-checkout-steps > li a span{
  display:block;color:inherit!important;
  font-size:14px!important;font-weight:700!important;line-height:1.6!important;
  text-transform:none!important;letter-spacing:0!important;text-decoration:none!important;
  padding:0!important;margin:0!important;border:none!important;background:none!important;box-shadow:none!important;
  white-space:nowrap;opacity:1!important;
}
.wd-checkout-steps > li a::before,.wd-checkout-steps > li a::after,
.wd-checkout-steps > li span::before,.wd-checkout-steps > li span::after{display:none!important;content:none!important}

/* ---------- Circle + icon ---------- */
.wd-checkout-steps > li::before{
  content:""!important;display:block!important;position:relative;z-index:2;
  width:var(--st-size);height:var(--st-size);border-radius:50%;margin:0 0 10px!important;
  background-color:var(--st-idle-bg);background-repeat:no-repeat;background-position:center;background-size:22px 22px;
  border:2px solid var(--st-idle-border);
  font-family:inherit!important;font-size:0!important;
  transform:none!important;opacity:1!important;transition:all .3s ease;
}
.wd-checkout-steps > li.step-cart::before{background-image:var(--ic-cart-g)}
.wd-checkout-steps > li.step-checkout::before{background-image:var(--ic-pay-g)}
.wd-checkout-steps > li.step-complete::before{background-image:var(--ic-done-g)}

/* ---------- Connector line ---------- */
.wd-checkout-steps > li::after{
  content:""!important;display:block!important;position:absolute;z-index:1;
  top:calc(var(--st-size) / 2 - 1.5px);
  inset-inline-start:calc(50% + var(--st-size) / 2 + 6px);
  width:calc(100% - var(--st-size) - 12px);height:3px;border-radius:3px;
  background:var(--st-line)!important;border:none!important;
  font-size:0!important;transform:none!important;margin:0!important;
  transition:background .3s ease;
}
.wd-checkout-steps > li:last-child::after{display:none!important}

/* ---------- Active ---------- */
.wd-checkout-steps > li.step-active{color:var(--st-primary)!important}
.wd-checkout-steps > li.step-active::before{
  background-color:var(--st-primary);border-color:var(--st-primary);
  box-shadow:0 0 0 6px var(--st-primary-soft),0 8px 20px rgba(37,99,235,.35);
  animation:mcStepPulse 2.2s ease-in-out infinite;
}
.wd-checkout-steps > li.step-cart.step-active::before{background-image:var(--ic-cart-w)}
.wd-checkout-steps > li.step-checkout.step-active::before{background-image:var(--ic-pay-w)}
.wd-checkout-steps > li.step-complete.step-active{color:var(--st-done)!important}
.wd-checkout-steps > li.step-complete.step-active::before{
  background-image:var(--ic-done-w);background-color:var(--st-done);border-color:var(--st-done);
  box-shadow:0 0 0 6px var(--st-done-soft),0 8px 20px rgba(22,163,74,.35);animation:none;
}

@keyframes mcStepPulse{
  0%,100%{box-shadow:0 0 0 6px var(--st-primary-soft),0 8px 20px rgba(37,99,235,.35)}
  50%{box-shadow:0 0 0 10px rgba(37,99,235,.08),0 8px 20px rgba(37,99,235,.35)}
}

/* ---------- Completed (before active) ---------- */
.wd-checkout-steps > li:has(~ li.step-active){color:var(--st-done)!important}
.wd-checkout-steps > li:has(~ li.step-active)::before{
  background-color:var(--st-done)!important;border-color:var(--st-done)!important;background-image:var(--ic-check-w)!important;
}
.wd-checkout-steps > li:has(~ li.step-active)::after{background:var(--st-done)!important}

/* ---------- Hover ---------- */
.wd-checkout-steps > li:not(.step-active) a:hover{color:var(--st-primary)!important}
.wd-checkout-steps > li:not(.step-active):hover::before{border-color:var(--st-primary)}

/* ---------- Mobile ---------- */
@media (max-width:576px){
  .wd-checkout-steps{--st-size:44px}
  .wd-page-title:has(.wd-checkout-steps){padding:22px 0 18px!important}
  .wd-checkout-steps > li a,.wd-checkout-steps > li span,.wd-checkout-steps > li a span{font-size:12px!important}
  .wd-checkout-steps > li::before{background-size:18px 18px;margin-bottom:8px!important}
  .wd-checkout-steps > li.step-active::before{animation:none;box-shadow:0 0 0 4px var(--st-primary-soft)}
}

/* =========================================
   (اختیاری) حالت پس‌زمینه تیره
   اگر بلوک «Page title bar» بالا را حذف کردید،
   این بلوک را از کامنت خارج کنید:
   =========================================
.wd-page-title.color-scheme-light .wd-checkout-steps{
  --st-idle-bg:rgba(255,255,255,.12);
  --st-idle-border:rgba(255,255,255,.25);
  --st-idle-text:rgba(255,255,255,.75);
  --st-line:rgba(255,255,255,.25);
}
*/