/* ============================================================
   status.css  —  Order Status Tracker page.
   Cards, badges, buttons & layout come from Bootstrap + the
   global theme. Only the vertical timeline, the green completion
   hero, the dashed note, and team-member rows need custom rules
   (Bootstrap has no equivalents). All scoped to .page-status.
   ============================================================ */

/* ---------- vertical timeline ---------- */
.page-status .st-steps { display: flex; flex-direction: column; }
.page-status .st-step { display: flex; gap: 16px; }
.page-status .st-step-left { display: flex; flex-direction: column; align-items: center; }
.page-status .st-dot { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; border: 2px solid var(--border); }
.page-status .st-dot.done    { background: var(--green); border-color: var(--green); color: #fff; }
.page-status .st-dot.active  { background: var(--navy);  border-color: var(--navy);  color: #fff; }
.page-status .st-dot.pending { background: var(--surface2); border-color: var(--border2); color: var(--muted); }
.page-status .st-line { width: 2px; flex: 1; min-height: 28px; background: var(--border); margin: 3px 0; }
.page-status .st-line.done { background: var(--green); }
.page-status .st-step-right { flex: 1; padding-bottom: 22px; }
.page-status .st-step-name { font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: 3px; }
.page-status .st-step-sub { font-size: 12px; color: var(--muted); line-height: 1.5; }
.page-status .st-step-date { font-size: 11px; color: var(--muted2); margin-top: 4px; }
.page-status .st-here { color: var(--blue); }
.page-status .st-accent { color: var(--orange); }

/* ---------- recently completed (green hero) ---------- */
.page-status .st-complete { position: relative; overflow: hidden; padding: 22px 26px; border-radius: var(--r-lg); color: #fff; background: linear-gradient(135deg, #1a8c5a 0%, #0d7849 100%); box-shadow: 0 12px 30px rgba(26,140,90,0.25); }
.page-status .st-complete::before { content: ''; position: absolute; top: -50px; right: -40px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, transparent 60%); }
.page-status .st-complete-inner { position: relative; z-index: 1; }
.page-status .st-complete-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 11px; font-weight: 600; letter-spacing: 0.7px; text-transform: uppercase; color: rgba(255,255,255,0.85); }
.page-status .st-complete-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; animation: stCompletePulse 1.8s ease-out infinite; }
@keyframes stCompletePulse { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,0.55); } 70% { box-shadow: 0 0 0 8px rgba(74,222,128,0); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } }
.page-status .st-complete-title { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 500; line-height: 1.2; margin-bottom: 8px; }
.page-status .st-complete-sub { font-size: 13px; color: rgba(255,255,255,0.85); margin-bottom: 18px; max-width: 460px; line-height: 1.55; }
.page-status .st-complete-sub strong { color: #fef3d7; }
.page-status .st-complete-btn { background: #fff; color: var(--navy); padding: 12px 22px; border-radius: 10px; font-size: 13.5px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 6px 16px rgba(0,0,0,0.15); transition: transform .2s; }
.page-status .st-complete-btn:hover { transform: translateY(-1px); color: var(--navy); }
.page-status .st-complete-reward { font-size: 11.5px; color: #fef3d7; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; }
.page-status .st-complete-reward strong { color: #fff; }

/* ---------- dashed note ---------- */
.page-status .st-note { border: 1px dashed var(--border2); background: var(--cream); }
.page-status .st-note-ic { width: 36px; height: 36px; border-radius: 50%; background: var(--gold-pale); color: var(--orange); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.page-status .st-accent { color: var(--orange); }

/* ---------- team members ---------- */
.page-status .st-member { display: flex; gap: 11px; padding: 12px 0; border-bottom: 1px dashed var(--border); }
.page-status .st-member:first-child { padding-top: 0; }
.page-status .st-member:last-child { border-bottom: none; padding-bottom: 0; }
.page-status .st-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; position: relative; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 600; font-family: 'Fraunces', serif; }
.page-status .st-avatar.expert { background: linear-gradient(135deg, var(--gold), var(--orange)); color: var(--navy); }
.page-status .st-avatar.backoffice { background: linear-gradient(135deg, var(--blue), var(--navy-light)); }
.page-status .st-avatar.sales { background: linear-gradient(135deg, var(--green), #0f7849); }
.page-status .st-avatar::after { content: ''; position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--green); bottom: 0; right: 0; border: 2px solid var(--surface); }
.page-status .st-member-role { font-size: 11px; color: var(--muted); margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.page-status .st-member-extra { font-size: 11px; color: var(--muted); margin-top: 6px; line-height: 1.4; }
.page-status .st-member-extra strong { color: var(--ink2); font-weight: 500; }
.page-status .st-member .btn { --bs-btn-padding-y: 4px; --bs-btn-padding-x: 9px; --bs-btn-font-size: 10.5px; }

/* ---------- order summary ---------- */
.page-status .st-summary { font-size: 12px; color: var(--muted); }
.page-status .st-sum-row { padding: 5px 0; border-bottom: 1px solid var(--border); }
.page-status .st-sum-row .v { color: var(--ink); }
.page-status .st-sum-row .green { color: var(--green); }
.page-status .st-sum-row.total { border-bottom: none; padding: 8px 0; font-weight: 500; font-size: 13px; color: var(--ink); }
.page-status .st-sum-dl { font-size: 12px; color: var(--blue); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }