/* ===================== خطوات الاستقدام — تصميم v2 ===================== */
.steps{--st-line:#dbe7f3;--st-card:#fff;--st-ink:#15233a;--st-muted:#5d6b7e;overflow:hidden}
.steps .sec-head p{max-width:560px;margin-inline:auto}
.steps .timeline{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;margin-top:44px}
.steps .timeline::before{content:"";position:absolute;top:34px;inset-inline:10%;height:4px;border:0;border-radius:4px;background:var(--st-line);z-index:0}
.steps .timeline::after{content:"";position:absolute;top:34px;inset-inline-start:10%;width:0;height:4px;border-radius:4px;background:var(--grad,linear-gradient(90deg,#c91524,#2b9bd8));z-index:0;transition:width 1.8s cubic-bezier(.2,.8,.2,1) .2s}
.steps .timeline:has(.tl-item.in)::after{width:80%}
.steps .tl-item{position:relative;height:auto!important;display:flex;flex-direction:column;align-items:center;text-align:center;z-index:1}
.steps .tl-dot{position:relative!important;top:auto!important;left:auto!important;transform:none!important;order:-1;display:grid;place-items:center;width:68px;height:68px;margin-bottom:-34px;border-radius:22px;
  background:var(--grad,linear-gradient(135deg,#c91524,#2b9bd8));color:#fff;font-size:24px;font-weight:900;
  box-shadow:0 0 0 8px #fff,0 16px 30px -12px rgba(23,142,137,.55);z-index:2;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-radius .35s}
.steps .tl-box{position:relative!important;inset:auto!important;top:auto!important;bottom:auto!important;flex:1;width:100%;display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:54px 18px 24px;background:var(--st-card);border:1px solid #e4edf6;border-radius:24px;
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 12px 30px -22px rgba(21,35,58,.35);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
.steps .tl-box::after{display:none!important}
.steps .tl-box::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:linear-gradient(160deg,rgba(23,142,137,.55),transparent 45%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s;pointer-events:none}
.steps .tl-item:hover .tl-box{transform:translateY(-6px);border-color:transparent;box-shadow:0 26px 50px -26px rgba(21,35,58,.45)}
.steps .tl-item:hover .tl-box::before{opacity:1}
.steps .tl-item:hover .tl-dot{transform:translateY(-4px) rotate(-6deg)!important;border-radius:50%}
.steps .tl-ic{display:grid;place-items:center;width:54px;height:54px;border-radius:16px;background:linear-gradient(145deg,#fff2f3,#dcebf8);color:#c91524;box-shadow:inset 0 0 0 1px #f0dfe2}
.steps .tl-ic svg{width:26px;height:26px}
.steps .tl-box p{margin:0;display:grid;gap:6px;color:var(--st-muted);font-size:14.5px;line-height:1.75}
.steps .tl-box p .tl-t{display:block;color:var(--st-ink);font-size:16px;font-weight:800;line-height:1.4}
.steps .tl-box p .tl-d{display:block}
.steps .pay-logos{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.steps .pay-logos span{padding:3px 9px;border-radius:8px;background:#f3f7fb;border:1px solid #e1eaf3;font-size:11px;font-weight:800;letter-spacing:.3px;color:#34465e}
.steps .tl-item:last-child .tl-dot{background:linear-gradient(135deg,#16a34a,#22c55e);box-shadow:0 0 0 8px #fff,0 16px 30px -12px rgba(22,163,74,.55)}
.steps .tl-item:last-child .tl-ic{background:linear-gradient(145deg,#ecfdf3,#d9f7e6);color:#16a34a;box-shadow:inset 0 0 0 1px #c9eed8}

@media (max-width:1100px) and (min-width:901px){.steps .timeline{gap:12px}.steps .tl-box{padding:52px 12px 20px}.steps .tl-box p{font-size:13.5px}}
@media (max-width:900px){
  .steps .timeline{grid-template-columns:1fr;gap:14px;margin-top:28px}
  .steps .timeline::before{top:34px;bottom:34px;inset-inline:auto;inset-inline-start:32px;width:4px;height:auto}
  .steps .timeline::after{top:34px;inset-inline:auto;inset-inline-start:32px;width:4px;height:0;transition:height 1.8s cubic-bezier(.2,.8,.2,1) .2s}
  .steps .timeline:has(.tl-item.in)::after{width:4px;height:calc(100% - 68px)}
  .steps .timeline{padding:0!important}
  .steps .timeline::before,.steps .timeline::after{inset-inline-start:26px!important;top:28px!important}
  .steps .timeline::before{bottom:28px!important}
  .steps .timeline:has(.tl-item.in)::after{height:calc(100% - 56px)}
  .steps .timeline .tl-item{flex-direction:row!important;align-items:flex-start;text-align:start;padding:0!important;margin:0!important;width:100%!important;gap:12px}
  .steps .timeline .tl-dot{width:56px;height:56px;margin:0!important;flex:none;border-radius:18px;font-size:20px;box-shadow:0 0 0 6px #fff,0 12px 24px -12px rgba(23,142,137,.55)}
  .steps .timeline .tl-item:last-child .tl-dot{box-shadow:0 0 0 6px #fff,0 12px 24px -12px rgba(22,163,74,.55)}
  .steps .timeline .tl-box{flex:1;min-width:0;flex-direction:column!important;align-items:flex-start;gap:10px;padding:16px 16px 18px;border-radius:20px}
  .steps .tl-box p{font-size:14px}
  .steps .tl-box p .tl-t{font-size:15.5px}
  .steps .pay-logos{justify-content:flex-start}
  .steps .tl-ic{width:46px;height:46px;border-radius:14px}
  .steps .tl-ic svg{width:22px;height:22px}
}
@media (prefers-reduced-motion:reduce){.steps .timeline::after{transition:none}.steps .tl-box,.steps .tl-dot{transition:none}}