/* ============================================================
   BestDealz International — Sprint 16 Class B Stage Tracker
   Shared by: order_detail timeline, dashboard "imports in flight" widget
   ============================================================ */

/* ── Vertical stage tracker (order detail page) ──────────────── */
.ot-tracker{
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:24px 28px;
}
.ot-tracker-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:14px; flex-wrap:wrap;
  margin-bottom:18px;
}
.ot-tracker-head h3{
  font-size:16px; font-weight:800; color:var(--ink-900);
  margin:0;
}
.ot-tracker-head .meta{
  font-size:12px; color:var(--ink-500);
}
.ot-tracker-head .eta{
  font-size:12px; font-weight:700;
  background:#dcfce7; color:#14532d;
  padding:5px 12px; border-radius:999px;
}

/* Progress bar at top */
.ot-progress{
  width:100%; height:6px; background:#f3f4f6; border-radius:3px; overflow:hidden;
  margin-bottom:22px;
}
.ot-progress-fill{
  height:100%;
  background:linear-gradient(90deg, var(--bd-blue), var(--bd-orange));
  transition:width .35s ease;
}

/* Stage list */
.ot-stages{
  position:relative;
  list-style:none; padding:0; margin:0;
}
.ot-stages::before{
  content:''; position:absolute;
  left:14px; top:14px; bottom:14px;
  width:2px;
  background:var(--line);
}
.ot-stage{
  position:relative;
  padding:0 0 22px 44px;
  min-height:30px;
}
.ot-stage:last-child{ padding-bottom:0; }
.ot-stage::before{
  content:'';
  position:absolute;
  left:6px; top:4px;
  width:18px; height:18px;
  border-radius:50%;
  background:#fff;
  border:2px solid var(--line);
  z-index:1;
}
.ot-stage.done::before{
  background:#15803d; border-color:#15803d;
}
.ot-stage.current::before{
  background:var(--bd-orange); border-color:var(--bd-orange);
  box-shadow:0 0 0 4px rgba(240,140,0,.18);
  animation:otPulse 1.6s ease-in-out infinite;
}
@keyframes otPulse{
  0%,100% { box-shadow:0 0 0 4px rgba(240,140,0,.18); }
  50%     { box-shadow:0 0 0 8px rgba(240,140,0,.04); }
}
.ot-stage .label{
  font-size:14px; font-weight:700;
  color:var(--ink-900);
  margin-bottom:2px;
}
.ot-stage.pending .label{ color:var(--ink-500); font-weight:600; }
.ot-stage .desc{
  font-size:12px; color:var(--ink-700);
  line-height:1.5;
}
.ot-stage.pending .desc{ color:var(--ink-500); }
.ot-stage .when{
  font-size:11px; color:var(--ink-500);
  margin-top:3px;
  display:inline-flex; align-items:center; gap:4px;
}
.ot-stage.current .when{ color:var(--bd-orange); font-weight:700; }
.ot-stage svg{ width:11px; height:11px; }

/* ── Compact (horizontal) version — used inside dashboard widget ── */
.ot-tracker.compact{
  padding:14px 18px;
}
.ot-tracker.compact .ot-stages{
  display:flex;
  flex-wrap:nowrap;
  overflow-x:auto;
  gap:0;
  margin:0;
}
.ot-tracker.compact .ot-stages::before{
  display:none;
}
.ot-tracker.compact .ot-stage{
  flex:1;
  min-width:80px;
  padding:14px 8px 0;
  text-align:center;
  position:relative;
}
.ot-tracker.compact .ot-stage::before{
  left:50%; transform:translateX(-50%);
  top:0;
  width:14px; height:14px;
}
.ot-tracker.compact .ot-stage:not(:last-child)::after{
  content:'';
  position:absolute;
  top:6px;
  left:50%; right:-50%;
  height:2px; background:var(--line);
  z-index:0;
}
.ot-tracker.compact .ot-stage.done:not(:last-child)::after{ background:#15803d; }
.ot-tracker.compact .ot-stage .label{
  font-size:10px;
  font-weight:600;
  margin-top:6px;
  line-height:1.2;
}
.ot-tracker.compact .ot-stage .desc, .ot-tracker.compact .ot-stage .when{ display:none; }

/* ── Imports in-flight widget (dashboard landing) ─────────────── */
.bd-imports-widget{
  background:linear-gradient(135deg, #fff8ee 0%, #fff 60%, #eef3ff 100%);
  border:1px solid var(--line);
  border-radius:14px;
  padding:22px 24px;
  margin-bottom:18px;
}
.bd-imports-widget-head{
  display:flex; justify-content:space-between; align-items:center;
  gap:14px;
  margin-bottom:14px;
}
.bd-imports-widget-head h3{
  font-size:16px; font-weight:800; color:var(--ink-900); margin:0;
  display:flex; align-items:center; gap:8px;
}
.bd-imports-widget-head .badge{
  background:var(--bd-orange); color:#fff;
  font-size:11px; font-weight:800;
  padding:3px 9px; border-radius:999px;
}
.bd-imports-widget-head a.view-all{
  font-size:12.5px; font-weight:700; color:var(--bd-orange); text-decoration:none;
}
.bd-imports-widget .import-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px 16px;
  margin-bottom:10px;
  transition:border-color .15s, transform .15s;
}
.bd-imports-widget .import-card:hover{
  border-color:var(--bd-orange);
  transform:translateY(-1px);
}
.bd-imports-widget .import-card:last-child{ margin-bottom:0; }
.bd-imports-widget .ic-head{
  display:flex; justify-content:space-between; gap:8px; align-items:center;
  margin-bottom:8px;
}
.bd-imports-widget .ic-head .ref{
  font-size:13px; font-weight:700; color:var(--ink-900);
  text-decoration:none;
}
.bd-imports-widget .ic-head .ref:hover{ color:var(--bd-orange); }
.bd-imports-widget .ic-head .eta{
  font-size:11px; color:var(--ink-500);
  font-weight:600;
}
.bd-imports-widget .ic-stage{
  display:flex; justify-content:space-between; align-items:center;
  font-size:12px; color:var(--ink-700);
  margin-bottom:6px;
}
.bd-imports-widget .ic-stage strong{ color:var(--ink-900); font-weight:700; }
.bd-imports-widget .ic-pct{
  font-size:11px; font-weight:700; color:var(--bd-orange);
}

/* ── Per-class dashboard stat cards (Sprint 16 refresh) ──────── */
.bd-class-stats{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
  margin-bottom:18px;
}
.bd-class-stats .stat{
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:16px 18px;
  text-align:left;
  display:flex; gap:12px; align-items:center;
}
.bd-class-stats .stat .ic{
  width:42px; height:42px;
  background:#fff8ee;
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.bd-class-stats .stat .ic svg{ width:22px; height:22px; color:var(--bd-orange); }
.bd-class-stats .stat.green .ic{ background:#dcfce7; }
.bd-class-stats .stat.green .ic svg{ color:#15803d; }
.bd-class-stats .stat.blue .ic{ background:#dbeafe; }
.bd-class-stats .stat.blue .ic svg{ color:#1e40af; }
.bd-class-stats .stat.orange .ic{ background:#ffe6c4; }
.bd-class-stats .stat.orange .ic svg{ color:#d97700; }
.bd-class-stats .stat .body .n{
  font-size:20px; font-weight:900; color:var(--ink-900); line-height:1;
}
.bd-class-stats .stat .body .l{
  font-size:11.5px; color:var(--ink-500); margin-top:3px;
  text-transform:uppercase; letter-spacing:.4px; font-weight:700;
}
.bd-class-stats .stat .sub{
  font-size:11px; color:var(--ink-700); margin-top:4px;
}

/* ── Wallet + Loyalty + Credit cards (dashboard refresh) ───── */
.bd-account-cards{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:12px;
  margin-bottom:18px;
}
.bd-account-cards .card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:18px 20px;
  position:relative;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  display:block;
  transition:border-color .15s, transform .15s;
}
.bd-account-cards .card:hover{
  border-color:var(--bd-orange);
  transform:translateY(-1px);
}
.bd-account-cards .card.wallet{
  background:linear-gradient(135deg, #003c8c, #001e5c);
  color:#fff;
  border-color:transparent;
}
.bd-account-cards .card.wallet::before{
  content:''; position:absolute;
  top:-40px; right:-40px;
  width:120px; height:120px;
  background:radial-gradient(circle, rgba(240,140,0,.4), transparent 70%);
  border-radius:50%;
}
.bd-account-cards .card .label{
  font-size:11px; font-weight:800;
  text-transform:uppercase; letter-spacing:.5px;
  color:var(--ink-500); margin:0 0 4px;
}
.bd-account-cards .card.wallet .label{ color:rgba(255,255,255,.7); }
.bd-account-cards .card .value{
  font-size:24px; font-weight:900; line-height:1;
  color:var(--ink-900);
}
.bd-account-cards .card.wallet .value{ color:#fff; }
.bd-account-cards .card .sub{
  font-size:12px; color:var(--ink-700);
  margin-top:6px;
}
.bd-account-cards .card.wallet .sub{ color:rgba(255,255,255,.85); }
.bd-account-cards .card .cta{
  margin-top:8px;
  display:inline-block;
  font-size:11.5px; font-weight:700;
  color:var(--bd-orange);
  text-decoration:none;
}
.bd-account-cards .card.wallet .cta{ color:#ffd479; }

.bd-tier-icon{
  font-size:28px;
  position:absolute; top:14px; right:18px;
}

/* ── Mobile ────────────────────────────────────────────────── */
@media (max-width:900px){
  .bd-class-stats{ grid-template-columns:repeat(2, 1fr); }
  .bd-account-cards{ grid-template-columns:1fr; }
  .ot-tracker.compact .ot-stages .ot-stage{ min-width:65px; }
}
@media (max-width:600px){
  .bd-class-stats{ grid-template-columns:1fr 1fr; }
  .bd-class-stats .stat{ padding:12px; }
  .bd-class-stats .stat .ic{ width:36px; height:36px; }
  .bd-class-stats .stat .body .n{ font-size:18px; }
  .ot-tracker{ padding:18px; }
  .ot-stage{ padding:0 0 18px 38px; }
}