/* Order Flow Live - clean orange/dark premium */
.product-page-body .pd-flow-panel.flow-live-panel,
.pd-flow-panel.flow-live-panel{
  position:relative !important;
  overflow:hidden !important;
  margin:18px 0 10px !important;
  padding:20px !important;
  border-radius:28px !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(255,163,26,.18), transparent 34%),
    radial-gradient(circle at 95% 10%, rgba(55,214,255,.12), transparent 32%),
    linear-gradient(145deg, rgba(12,18,31,.96), rgba(5,8,16,.98)) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:0 20px 55px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.07) !important;
  isolation:isolate !important;
}
.product-page-body .pd-flow-panel.flow-live-panel::before,
.pd-flow-panel.flow-live-panel::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:34px 34px;
  opacity:.32;
  pointer-events:none;
  z-index:-1;
}
.product-page-body .pd-flow-panel.flow-live-panel::after,
.pd-flow-panel.flow-live-panel::after{
  content:"";
  position:absolute;
  width:150px;
  height:150px;
  right:-62px;
  bottom:-70px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(255,154,25,.26), transparent 67%);
  pointer-events:none;
  z-index:-1;
  animation:flowGlow 4.2s ease-in-out infinite alternate;
}
@keyframes flowGlow{from{opacity:.35;transform:scale(.92)}to{opacity:.9;transform:scale(1.12)}}

.product-page-body .flow-live-head,
.flow-live-head{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:12px !important;
  margin-bottom:18px !important;
}
.product-page-body .flow-live-kicker,
.flow-live-kicker{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  min-height:28px !important;
  padding:0 13px !important;
  border-radius:999px !important;
  color:#ffd89a !important;
  background:rgba(255,154,25,.10) !important;
  border:1px solid rgba(255,190,89,.20) !important;
  font-size:11px !important;
  line-height:1 !important;
  font-weight:950 !important;
  letter-spacing:.17em !important;
  text-transform:uppercase !important;
}
.product-page-body .flow-live-kicker i,
.flow-live-kicker i,
.product-page-body .flow-live-status i,
.flow-live-status i{
  width:9px !important;
  height:9px !important;
  border-radius:999px !important;
  background:#24d666 !important;
  box-shadow:0 0 18px rgba(36,214,102,.85) !important;
  display:inline-block !important;
  animation:flowPulse 1.15s ease-in-out infinite !important;
}
@keyframes flowPulse{0%,100%{transform:scale(.82);opacity:.75}50%{transform:scale(1.18);opacity:1}}
.product-page-body .flow-live-head h2,
.flow-live-head h2{
  margin:12px 0 0 !important;
  color:#fff !important;
  font-size:clamp(23px, 5.1vw, 34px) !important;
  line-height:1.04 !important;
  font-weight:950 !important;
  letter-spacing:-.06em !important;
}
.product-page-body .flow-live-status,
.flow-live-status{
  flex:0 0 auto !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:7px !important;
  min-height:34px !important;
  padding:0 13px !important;
  border-radius:999px !important;
  color:#bfffd0 !important;
  background:rgba(33,194,102,.12) !important;
  border:1px solid rgba(49,214,118,.22) !important;
  font-size:12px !important;
  font-weight:950 !important;
  line-height:1 !important;
}

.product-page-body .flow-live-rail,
.flow-live-rail{
  position:absolute !important;
  left:37px !important;
  top:116px !important;
  bottom:36px !important;
  width:2px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.08) !important;
  overflow:hidden !important;
  pointer-events:none !important;
}
.product-page-body .flow-live-rail span,
.flow-live-rail span{
  display:block !important;
  width:100% !important;
  height:38% !important;
  border-radius:999px !important;
  background:linear-gradient(180deg, transparent, #22c55e, #62eaff, transparent) !important;
  box-shadow:0 0 18px rgba(34,197,94,.78) !important;
  animation:flowRailMove 3.5s ease-in-out infinite !important;
}
@keyframes flowRailMove{
  0%{transform:translateY(-95%);opacity:.3}
  16%{opacity:1}
  48%{opacity:1}
  100%{transform:translateY(260%);opacity:.25}
}

.product-page-body .pd-flow-steps.flow-live-steps,
.pd-flow-steps.flow-live-steps{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:12px !important;
  position:relative !important;
}
.product-page-body .flow-step,
.flow-step{
  position:relative !important;
  display:grid !important;
  grid-template-columns:42px minmax(0,1fr) auto !important;
  grid-template-areas:
    "dot title num"
    "dot small num" !important;
  align-items:center !important;
  column-gap:12px !important;
  min-height:76px !important;
  padding:14px 16px 14px 14px !important;
  border-radius:22px !important;
  background:
    linear-gradient(145deg, rgba(20,27,44,.84), rgba(8,12,22,.88)) !important;
  border:1px solid rgba(255,255,255,.09) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 10px 24px rgba(0,0,0,.22) !important;
  overflow:hidden !important;
  transform:translateZ(0) !important;
  transition:transform .35s ease, border-color .35s ease, background .35s ease !important;
}
.product-page-body .flow-step::before,
.flow-step::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:linear-gradient(180deg,#ff9c1a,#62eaff,#a36bff);
  opacity:.42;
}
.product-page-body .flow-step::after,
.flow-step::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg, transparent 0%, rgba(255,255,255,.08) 45%, transparent 70%);
  transform:translateX(-130%);
  opacity:0;
  pointer-events:none;
}
.product-page-body .flow-step.is-current,
.flow-step.is-current{
  border-color:rgba(54,230,125,.34) !important;
  background:
    radial-gradient(circle at 8% 50%, rgba(34,197,94,.18), transparent 35%),
    linear-gradient(145deg, rgba(20,30,43,.95), rgba(8,13,23,.94)) !important;
  transform:translateX(2px) !important;
}
.product-page-body .flow-step.is-current::after,
.flow-step.is-current::after{
  animation:flowSweep 1.45s ease both !important;
}
@keyframes flowSweep{0%{transform:translateX(-130%);opacity:0}25%{opacity:1}100%{transform:translateX(125%);opacity:0}}

.product-page-body .flow-dot,
.flow-dot{
  grid-area:dot !important;
  width:38px !important;
  height:38px !important;
  border-radius:16px !important;
  margin:0 !important;
  display:grid !important;
  place-items:center !important;
  background:rgba(148,163,184,.11) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.product-page-body .flow-dot::before,
.flow-dot::before{
  content:"";
  width:11px;
  height:11px;
  border-radius:999px;
  background:#758094;
  box-shadow:0 0 0 transparent;
  transition:background .3s ease, box-shadow .3s ease, transform .3s ease;
}
.product-page-body .flow-step.is-current .flow-dot,
.flow-step.is-current .flow-dot{
  background:rgba(34,197,94,.16) !important;
  border-color:rgba(76,255,145,.32) !important;
}
.product-page-body .flow-step.is-current .flow-dot::before,
.flow-step.is-current .flow-dot::before{
  background:#22c55e;
  box-shadow:0 0 20px rgba(34,197,94,.95), 0 0 40px rgba(98,234,255,.32);
  transform:scale(1.16);
  animation:flowPulse .98s ease-in-out infinite;
}
.product-page-body .flow-step em,
.flow-step em{
  grid-area:num !important;
  justify-self:end !important;
  color:rgba(255,255,255,.13) !important;
  font-style:normal !important;
  font-size:34px !important;
  line-height:1 !important;
  font-weight:950 !important;
  letter-spacing:-.06em !important;
}
.product-page-body .flow-step b,
.flow-step b{
  grid-area:title !important;
  color:#fff !important;
  font-size:18px !important;
  line-height:1.08 !important;
  font-weight:950 !important;
  letter-spacing:-.035em !important;
}
.product-page-body .flow-step small,
.flow-step small{
  grid-area:small !important;
  display:block !important;
  margin-top:3px !important;
  color:rgba(226,232,240,.68) !important;
  font-size:12.5px !important;
  line-height:1.24 !important;
  font-weight:700 !important;
}

@media (min-width:720px){
  .product-page-body .pd-flow-steps.flow-live-steps,
  .pd-flow-steps.flow-live-steps{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  }
  .product-page-body .flow-live-rail,
  .flow-live-rail{display:none !important;}
  .product-page-body .flow-step,
  .flow-step{
    grid-template-columns:40px minmax(0,1fr) !important;
    grid-template-areas:"dot num" "title title" "small small" !important;
    min-height:138px !important;
  }
}
@media (max-width:520px){
  .product-page-body .pd-flow-panel.flow-live-panel,
  .pd-flow-panel.flow-live-panel{
    margin-top:18px !important;
    padding:17px !important;
    border-radius:25px !important;
  }
  .product-page-body .flow-live-head,
  .flow-live-head{
    align-items:center !important;
    margin-bottom:15px !important;
  }
  .product-page-body .flow-live-head h2,
  .flow-live-head h2{
    font-size:24px !important;
    max-width:260px !important;
  }
  .product-page-body .flow-live-kicker,
  .flow-live-kicker{
    min-height:26px !important;
    font-size:10px !important;
    padding:0 11px !important;
  }
  .product-page-body .flow-live-status,
  .flow-live-status{
    min-height:31px !important;
    padding:0 11px !important;
    font-size:11px !important;
  }
  .product-page-body .flow-live-rail,
  .flow-live-rail{
    left:34px !important;
    top:104px !important;
    bottom:31px !important;
  }
  .product-page-body .flow-step,
  .flow-step{
    grid-template-columns:38px minmax(0,1fr) auto !important;
    min-height:70px !important;
    padding:12px 14px 12px 12px !important;
    border-radius:20px !important;
    column-gap:10px !important;
  }
  .product-page-body .flow-dot,
  .flow-dot{
    width:34px !important;
    height:34px !important;
    border-radius:14px !important;
  }
  .product-page-body .flow-step em,
  .flow-step em{
    font-size:29px !important;
  }
  .product-page-body .flow-step b,
  .flow-step b{
    font-size:16px !important;
  }
  .product-page-body .flow-step small,
  .flow-step small{
    font-size:11.5px !important;
  }
}