/* track.css — customer tracking page (mobile-first) */
.track-head{text-align:center;margin:24px 0 20px;padding:0 16px}
.track-head h1{font-size:26px}
.track-head p{color:var(--muted);font-size:15px}

.track-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-bottom:14px}
.login-card{max-width:420px;margin:0 auto}
.otp-hint{font-size:14px;color:var(--muted);margin-bottom:14px;line-height:1.5}
.otp-hint i{color:var(--gold-deep)}

/* self-contained login fields (don't depend on checkout.css) */
.fld-label{display:block;font-size:15px;font-weight:600;color:var(--plum);margin-bottom:8px}
.fld{display:block;width:100%;box-sizing:border-box;height:58px;padding:0 18px;
  font-size:17px;font-family:inherit;line-height:58px;
  border:1.5px solid var(--line);border-radius:12px;background:#fff;margin-bottom:18px;
  -webkit-appearance:none;appearance:none}
.fld:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px rgba(74,44,77,.10)}
.fld::placeholder{color:#b9aebb;font-size:16px}
.btn-text{background:transparent;color:var(--plum-soft);box-shadow:none;margin-top:10px;font-size:15px}

/* inline messages (success/error) */
.form-msg{padding:12px 14px;border-radius:10px;font-size:14px;margin-bottom:14px;font-weight:500;line-height:1.45}
.form-msg.err{background:var(--danger-bg);color:var(--danger);border:1px solid #f3c2cb}
.form-msg.ok{background:var(--ok-bg);color:var(--ok);border:1px solid #bfe8d2}

/* top bar with phone + logout */
.track-topbar{max-width:760px;margin:0 auto 14px;display:flex;justify-content:space-between;
  align-items:center;gap:10px;font-weight:600;color:var(--plum);font-size:14px;
  background:#fff;border-radius:12px;padding:12px 16px;box-shadow:var(--shadow)}
.track-topbar i{color:var(--gold-deep)}
.logout{font-size:13px;color:var(--danger);font-weight:600;white-space:nowrap}

/* order card */
.track-card.order{max-width:760px;margin:0 auto 14px}
.order-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.order-id{font-family:'Fraunces',serif;font-weight:700;color:var(--plum);font-size:17px;line-height:1.3}
.order-meta{font-size:13px;color:var(--muted);margin-top:4px;line-height:1.5}
.status-badge{font-size:11px;font-weight:700;padding:6px 11px;border-radius:30px;white-space:nowrap;flex-shrink:0}
.s-ok{background:var(--ok-bg);color:var(--ok)}
.s-transit{background:#fff4e1;color:#b3734a}
.s-new{background:var(--blush-deep);color:var(--plum)}
.s-danger{background:var(--danger-bg);color:var(--danger)}
.awb-line{margin-top:12px;font-size:14px;color:#5a4f5c;word-break:break-word}
.awb-line b{color:var(--plum)}
.muted-line{margin-top:12px;font-size:14px;color:var(--muted);line-height:1.5}

/* tracking timeline */
.timeline{margin-top:16px;padding-left:4px}
.tl-item{display:flex;gap:14px;position:relative;padding-bottom:18px}
.tl-item:not(:last-child)::before{content:'';position:absolute;left:6px;top:16px;bottom:0;width:2px;background:var(--line)}
.tl-dot{width:14px;height:14px;border-radius:50%;background:var(--line);flex-shrink:0;margin-top:3px;z-index:1}
.tl-item.active .tl-dot{background:var(--gold);box-shadow:0 0 0 4px rgba(201,139,94,.18)}
.tl-text{font-size:14px;font-weight:600;color:var(--plum);line-height:1.4}
.tl-item.active .tl-text{color:var(--gold-deep)}
.tl-sub{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.4}
.empty{text-align:center;color:var(--muted);padding:24px 12px}

/* buttons big enough to tap */
.track-card .btn{font-size:16px}

/* tablet/desktop niceties */
@media(min-width:600px){
  .track-head{margin:30px 0 22px}
  .track-head h1{font-size:32px}
  .track-card{padding:24px}
  .order-id{font-size:18px}
  .status-badge{font-size:12px}
}

/* small phones */
@media(max-width:380px){
  .track-card{padding:16px}
  .track-head h1{font-size:23px}
  .order-head{flex-direction:column}
  .status-badge{align-self:flex-start}
}