/* ═══════════════════════════════════════════════════════
   LocalMart — Shared Components: Cards, Stats, Buttons
   ═══════════════════════════════════════════════════════ */
/* ─── Stats Row ─── */
.stats-row { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin-bottom: 22px; }
@media(min-width:500px) { .stats-row { grid-template-columns: repeat(4,1fr); } }
.st { background: #fff; border-radius: var(--r16); padding: 15px; border: 1.5px solid var(--lt); }
.st-v { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1.5rem; letter-spacing: -1px; }
.st-l { font-size: .7rem; color: var(--gy); margin-top: 2px; }
/* ─── Cards ─── */
.card { background: #fff; border-radius: var(--r20); border: 1.5px solid var(--lt); padding: 20px; }
.card+.card { margin-top: 12px; }
.card-h { font-family: 'Syne', sans-serif; font-weight: 700; font-size: .96rem; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* ─── Order Cards ─── */
.order-card { background: #fff; border-radius: var(--r16); border: 1.5px solid var(--lt);
  padding: 14px 16px; margin-bottom: 10px; transition: all .2s; }
.order-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.07); }
.oc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.oc-id { font-family: 'Syne', sans-serif; font-weight: 700; font-size: .86rem; }
.oc-cust { font-size: .72rem; color: var(--gy); margin-top: 2px; }
.oc-status { font-size: .65rem; font-weight: 700; padding: 3px 9px; border-radius: var(--r100); white-space: nowrap; }
.s-pending { background: var(--yg); color: var(--y); }
.s-accepted { background: var(--og); color: var(--o); }
.s-assigned { background: var(--bg); color: var(--bl); }
.s-pickedup { background: var(--pg); color: var(--pl); }
.s-delivered { background: var(--gg); color: var(--gl); }
.s-cancelled { background: rgba(217,48,37,.1); color: var(--rd); }
.s-scheduled { background: var(--bg); color: var(--bl); }
.s-requested { background: var(--yg); color: var(--y); }
.oc-items { font-size: .78rem; color: var(--gy); margin-bottom: 10px; line-height: 1.6; }
.oc-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.oc-total { font-family: 'Syne', sans-serif; font-weight: 700; font-size: .9rem; color: var(--o); }
.oc-addr { font-size: .7rem; color: var(--gy); flex: 1; }
.oc-actions { display: flex; gap: 6px; }
.oa-btn { padding: 6px 13px; border-radius: var(--r100); border: none; cursor: pointer;
  font-family: 'Syne', sans-serif; font-weight: 700; font-size: .72rem; transition: all .18s; }
.oa-btn:hover { transform: scale(1.04); }
.btn-accept { background: var(--gg); color: var(--gl); }
.btn-reject { background: rgba(217,48,37,.09); color: var(--rd); }
.btn-pickup { background: var(--og); color: var(--o); }
.btn-deliver { background: var(--gg); color: var(--gl); }
.btn-blue { background: var(--bg); color: var(--bl); }
/* ─── Inventory Grid ─── */
.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap: 11px; }
.icard { background: #fff; border-radius: var(--r20); border: 1.5px solid var(--lt); overflow: hidden; transition: transform .2s; }
.icard:hover { transform: translateY(-2px); }
.icard.oos-card { opacity: .58; }
.ic-top { padding: 15px 15px 11px; display: flex; gap: 10px; align-items: flex-start; }
.ic-em { width: 46px; height: 46px; border-radius: var(--r12); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; flex-shrink: 0; }
.ic-inf { flex: 1; min-width: 0; }
.ic-nm { font-family: 'Syne', sans-serif; font-weight: 700; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ic-ut { font-size: .69rem; color: var(--gy); margin-top: 2px; }
.ic-pr { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1rem; color: var(--o); margin-top: 4px; }
.ic-bot { padding: 8px 15px 12px; border-top: 1px solid var(--lt); display: flex; gap: 5px; }
.icb { flex: 1; padding: 6px 2px; border-radius: var(--r8); border: none; font-size: .68rem; font-weight: 600; cursor: pointer; transition: all .16s; }
.icb:hover { transform: scale(1.04); }
.b-edit { background: rgba(26,107,60,.08); color: var(--g); }
.b-oos { background: rgba(244,99,30,.08); color: var(--o); }
.b-del { background: rgba(217,48,37,.08); color: var(--rd); }
.b-rst { background: var(--gg); color: var(--gl); }
/* ─── Live Tracking Map ─── */
.track-map-wrap { position: relative; background: #EDE4D8; border-radius: var(--r16); overflow: hidden;
  margin: 14px 0; border: 1.5px solid var(--lt); }
#trackMapSvg { display: block; width: 100%; }
/* ─── Success Box ─── */
.success-box { text-align: center; padding: 24px 12px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.suc-ring { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; border: 3px solid; animation: scpop .4s cubic-bezier(.34,1.56,.64,1); }
.suc-g { background: var(--gg); border-color: var(--gl); }
.suc-b { background: var(--bg); border-color: var(--bl); }
/* ─── Rider Earnings ─── */
.rider-map-wrap { background: #EDE4D8; border-radius: var(--r20); overflow: hidden;
  margin-bottom: 14px; border: 1.5px solid var(--lt); }
.earnings-bar { background: #fff; border-radius: var(--r16); padding: 16px; border: 1.5px solid var(--lt);
  display: flex; gap: 20px; margin-bottom: 14px; flex-wrap: wrap; }
.earn-item { text-align: center; }
.earn-val { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1.4rem; letter-spacing: -1px; }
.earn-lbl { font-size: .68rem; color: var(--gy); margin-top: 2px; }
/* ─── Service Request ─── */
.svc-req-box { background: #fff; border-radius: var(--r20); padding: 20px; border: 1.5px solid var(--lt); margin-top: 20px; }
.svc-req-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: .95rem; margin-bottom: 4px; }
.svc-req-sub { font-size: .78rem; color: var(--gy); margin-bottom: 16px; line-height: 1.6; }