/* ============================================================================
   track.css — Visa Application Tracking page (track-request.php)
   Built on the site design tokens (styles.css); themes light/dark automatically.
   ============================================================================ */
.trk{background:var(--paper-alt);min-height:60vh}
.trk-wrap{max-width:920px;margin:0 auto;padding:0 20px}

.trk-hero{background:var(--grad-navy,linear-gradient(160deg,#14153a,#23246b));color:#fff;padding:clamp(38px,7vw,72px) 0 clamp(30px,5vw,52px)}
.trk-hero .trk-eyebrow{font:700 12px/1 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:#ff6b85;margin:0 0 12px}
.trk-hero h1{font-size:clamp(1.7rem,4vw,2.6rem);font-weight:800;margin:0 0 12px;letter-spacing:-.01em}
.trk-hero .trk-lede{font-size:clamp(14px,2vw,16px);line-height:1.6;color:rgba(255,255,255,.82);max-width:56ch;margin:0}

.trk-body{padding:clamp(28px,5vw,52px) 0 clamp(48px,7vw,80px)}

/* ---- Verification form ---- */
.trk-form-wrap{max-width:520px;margin:0 auto;background:var(--paper);border:1px solid var(--ink-300);border-radius:var(--radius-md);
  padding:clamp(22px,4vw,34px);box-shadow:var(--shadow-lg);margin-top:-48px;position:relative}
.trk-form{display:flex;flex-direction:column;gap:16px}
.trk-field{display:flex;flex-direction:column;gap:6px}
.trk-field label{font-size:13px;font-weight:700;color:var(--ink-900)}
.trk-field label span{color:var(--brand-red)}
.trk-field input{padding:12px 14px;border:1px solid var(--ink-300);border-radius:var(--radius-sm);font:inherit;font-size:15px;color:var(--ink-900);background:var(--paper)}
.trk-field input:focus{outline:none;border-color:var(--brand-navy-light);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-navy) 14%,transparent)}
.trk-field small{font-size:11.5px;color:var(--ink-500)}
.trk-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.trk-help{font-size:12.5px;color:var(--ink-500);text-align:center;margin:18px 0 0;line-height:1.6}
.trk-help a{color:var(--brand-red);font-weight:600;text-decoration:none}

.trk-alert{background:color-mix(in srgb,var(--brand-red) 8%,var(--paper));border:1px solid color-mix(in srgb,var(--brand-red) 32%,transparent);
  color:var(--brand-red-dark);font-size:13.5px;line-height:1.55;font-weight:600;border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:16px}

/* ---- Buttons ---- */
.trk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:11px;font-size:14.5px;font-weight:700;
  cursor:pointer;border:1.5px solid var(--ink-300);background:var(--paper);color:var(--ink-900);text-decoration:none;transition:transform .12s,background .15s,border-color .15s}
.trk-btn:hover{transform:translateY(-1px)}
.trk-btn.primary{background:var(--brand-red);border-color:var(--brand-red);color:#fff;box-shadow:var(--shadow-glow)}
.trk-btn.primary:hover{background:var(--brand-red-dark)}
.trk-btn.ghost{background:transparent}

/* ---- Dashboard ---- */
.trk-dash{margin-top:-48px;position:relative}
.trk-dash-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:var(--paper);border:1px solid var(--ink-300);border-radius:var(--radius-md);padding:18px 22px;box-shadow:var(--shadow-lg);margin-bottom:16px}
.trk-code-lbl{font:700 11px/1 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-500);margin:0 0 6px}
.trk-code{font-size:clamp(1.2rem,3vw,1.6rem);font-weight:800;letter-spacing:.05em;color:var(--ink-900);margin:0;font-family:'IBM Plex Mono',ui-monospace,monospace}
.trk-badge{--c:#64748b;font-size:12.5px;font-weight:800;padding:8px 16px;border-radius:999px;
  background:color-mix(in srgb,var(--c) 15%,transparent);color:var(--c);border:1px solid color-mix(in srgb,var(--c) 35%,transparent)}

.trk-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:760px){.trk-cards{grid-template-columns:1fr}}
.trk-card{background:var(--paper);border:1px solid var(--ink-300);border-radius:var(--radius-md);padding:20px 22px;box-shadow:var(--shadow-md)}
.trk-card h2{font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-500);margin:0 0 14px}
.trk-kv{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--ink-100);font-size:13.5px}
.trk-kv:last-child{border-bottom:0}
.trk-kv span{color:var(--ink-500)}
.trk-kv b{color:var(--ink-900);font-weight:700;text-align:right;word-break:break-word}

/* ---- Timeline ---- */
.trk-flag{font-size:13px;line-height:1.5;border-radius:var(--radius-sm);padding:10px 12px;margin-bottom:14px}
.trk-flag.approved{background:color-mix(in srgb,#0f9d58 12%,transparent);color:#0b6b39;border:1px solid color-mix(in srgb,#0f9d58 30%,transparent)}
.trk-flag.refused{background:color-mix(in srgb,var(--brand-red) 10%,transparent);color:var(--brand-red-dark);border:1px solid color-mix(in srgb,var(--brand-red) 30%,transparent)}
.trk-flag.cancelled{background:color-mix(in srgb,#94a3b8 16%,transparent);color:var(--ink-700);border:1px solid color-mix(in srgb,#94a3b8 34%,transparent)}
.trk-timeline{list-style:none;margin:0;padding:0;position:relative}
.trk-stage{position:relative;padding:0 0 18px 30px}
.trk-stage:last-child{padding-bottom:0}
.trk-stage::before{content:"";position:absolute;left:9px;top:20px;bottom:-2px;width:2px;background:var(--ink-300)}
.trk-stage:last-child::before{display:none}
.trk-dot{position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:900;color:#fff;background:var(--ink-300);border:2px solid var(--paper);box-shadow:0 0 0 1px var(--ink-300)}
.trk-stage.done .trk-dot{background:#0f9d58;box-shadow:0 0 0 1px #0f9d58}
.trk-stage.done::before{background:#0f9d58}
.trk-stage.current .trk-dot{background:var(--brand-navy-light);box-shadow:0 0 0 1px var(--brand-navy-light);animation:trk-pulse 1.6s ease-in-out infinite}
.trk-stage.refused .trk-dot{background:var(--brand-red);box-shadow:0 0 0 1px var(--brand-red)}
@keyframes trk-pulse{0%,100%{box-shadow:0 0 0 1px var(--brand-navy-light)}50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--brand-navy) 25%,transparent)}}
.trk-stage-label{font-size:13.5px;font-weight:700;color:var(--ink-900);display:flex;flex-direction:column}
.trk-stage.pending .trk-stage-label{color:var(--ink-500);font-weight:600}
.trk-stage-label em{font-style:normal;font-size:11.5px;font-weight:600;color:var(--ink-500);margin-top:1px}
.trk-stage.current .trk-stage-label em{color:var(--brand-navy-light)}
.trk-stage.done .trk-stage-label em{color:#0f9d58}
.trk-stage.refused .trk-stage-label em{color:var(--brand-red-dark)}

/* ---- Updates ---- */
.trk-updates{margin-top:16px}
.trk-update{border-left:3px solid var(--brand-navy-light);padding:4px 0 4px 14px;margin-bottom:14px}
.trk-update:last-child{margin-bottom:0}
.trk-update-top{display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap}
.trk-update-top b{font-size:13.5px;color:var(--ink-900)}
.trk-update-top time{font-size:11.5px;color:var(--ink-500)}
.trk-update p{font-size:13px;line-height:1.55;color:var(--ink-700);margin:4px 0 0}

.trk-dash-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.trk-privacy{font-size:11.5px;color:var(--ink-500);margin:12px 0 0}
@media(max-width:520px){.trk-dash-actions{flex-direction:column}.trk-dash-actions .trk-btn{width:100%}}

/* Payment status badge + Pay Now button */
.trk-paybadge{--c:#64748b;display:inline-block;font-size:11.5px;font-weight:800;padding:2px 10px;border-radius:999px;
  background:color-mix(in srgb,var(--c) 15%,transparent);color:var(--c);border:1px solid color-mix(in srgb,var(--c) 34%,transparent)}
.trk-btn.pay{background:#0f9d58;border-color:#0f9d58;color:#fff}
.trk-btn.pay:hover{background:#0c7c46}