/* ================================================================
   ZeeMart – Main Stylesheet
   ================================================================ */
@import url('mobile.css');

/* ── Utilities ─────────────────────────────────────────────── */
.fw-800 { font-weight: 800 !important; }
.fw-900 { font-weight: 900 !important; }
.text-green  { color: var(--green) !important; }
.text-gold   { color: var(--gold)  !important; }
.bg-green    { background: var(--green) !important; }
.bg-green-lt { background: #f0fdf4 !important; }

/* ── Page Transition ───────────────────────────────────────── */
main, section, .page-enter { animation: pageEnter .38s ease; }
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Progress bar ──────────────────────────────────────────── */
.progress-bar-zm {
  height: 4px; background: var(--gray-100); border-radius: var(--radius-full); overflow: hidden;
}
.progress-bar-zm .fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green), var(--green-mid));
  border-radius: var(--radius-full);
  transition: width .4s ease;
}

/* ── Order status badge ────────────────────────────────────── */
.status-pending   { @extend .badge-gold; }
.status-confirmed { @extend .badge-blue; }
.status-completed { @extend .badge-green; }
.status-cancelled { @extend .badge-red; }

/* ── Table responsive ──────────────────────────────────────── */
.table-zm { width: 100%; border-collapse: collapse; font-size: 14px; }
.table-zm th { background: var(--gray-50); font-weight: 700; color: var(--gray-600); padding: 12px 16px; text-align: left; border-bottom: 2px solid var(--gray-200); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
.table-zm td { padding: 14px 16px; border-bottom: 1px solid var(--gray-100); color: var(--gray-800); vertical-align: middle; }
.table-zm tr:last-child td { border-bottom: none; }
.table-zm tr:hover td { background: var(--gray-50); }

/* ── Checkout steps ────────────────────────────────────────── */
.checkout-step {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700; color: var(--gray-400);
}
.checkout-step.active { color: var(--green); }
.checkout-step .step-num {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--gray-200); color: var(--gray-600);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; transition: all .2s;
}
.checkout-step.active .step-num { background: var(--green); color: var(--white); }
.checkout-step.done  .step-num { background: #86efac; color: #14532d; }

/* ── Order tracking timeline ───────────────────────────────── */
.timeline { position: relative; padding-left: 28px; }
.timeline::before {
  content: ''; position: absolute; left: 8px; top: 4px; bottom: 4px;
  width: 2px; background: var(--gray-200);
}
.timeline-item { position: relative; margin-bottom: 24px; }
.timeline-item::before {
  content: ''; position: absolute; left: -24px; top: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--gray-300); border: 2px solid var(--white);
  box-shadow: 0 0 0 2px var(--gray-300);
}
.timeline-item.done::before { background: var(--green); box-shadow: 0 0 0 2px var(--green); }
.timeline-item .tl-time { font-size: 11px; color: var(--gray-400); margin-bottom: 3px; }
.timeline-item .tl-text { font-size: 14px; font-weight: 600; color: var(--gray-800); }