/* dynamic.css - styles for the states added when the site became database-driven.
   Link it after your main stylesheet (see head-snippet.php). Adjust colours to taste. */

/* ---------- Shipment status colours (public tracking page) ----------
   green = delivered, red = on hold / cancelled, blue = moving, amber = processing, purple = picked up */
.status-pill.tone-green  { background: #e0f4e9; color: #18825e; }
.status-pill.tone-red    { background: #ffebed; color: #c33d49; }
.status-pill.tone-blue   { background: #eaf2ff; color: #2869c5; }
.status-pill.tone-amber  { background: #fff4dc; color: #a56a11; }
.status-pill.tone-purple { background: #f0eaff; color: #7456bf; }

/* ---------- Simple tracking result ---------- */
.zt-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.zt-head h2 { font: 700 28px var(--font-head); letter-spacing: -1px; margin: 8px 0 0; }
.zt-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.zt-banner { display: flex; flex-direction: column; gap: 3px; border-radius: 14px; padding: 14px 18px; margin-bottom: 20px; font-size: 12px; line-height: 1.6; border: 1px solid transparent; }
.zt-banner b { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.zt-banner.tone-red    { background: #ffebed; border-color: #f4c3c8; color: #8f2630; }
.zt-banner.tone-green  { background: #e5f7ef; border-color: #b9e6d1; color: #14664a; }
.zt-banner.tone-blue   { background: #eaf2ff; border-color: #c4d8f7; color: #1f4f96; }
.zt-banner.tone-amber  { background: #fff4dc; border-color: #f0dba8; color: #85540d; }
.zt-banner.tone-purple { background: #f0eaff; border-color: #d6c8f5; color: #5a3fa0; }
.zt-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 18px; align-items: start; }
.zt-card { border: 1px solid var(--line); border-radius: 18px; padding: 24px; background: #fff; }
.zt-card h3 { font: 700 16px var(--font-head); margin: 0 0 16px; }
.zt-card dl { display: grid; gap: 14px; margin: 0; }
.zt-card dl div { display: grid; gap: 3px; }
.zt-card dt { font-size: 8px; letter-spacing: .1em; color: #8a9797; font-weight: 700; }
.zt-card dd { margin: 0; font-size: 12px; font-weight: 600; color: var(--ink); }
.zt-card dd small { display: block; font-weight: 400; color: #7d8b8a; margin-top: 2px; }
.zt-muted { font-size: 10px; color: #8a9693; margin: 16px 0 0; }
.zt-step .timeline-dot { border-width: 0; background: #c9d3cc; }
.zt-step.tone-green  .timeline-dot { background: #18825e; }
.zt-step.tone-red    .timeline-dot { background: #c33d49; }
.zt-step.tone-blue   .timeline-dot { background: #2869c5; }
.zt-step.tone-amber  .timeline-dot { background: #d98f1f; }
.zt-step.tone-purple .timeline-dot { background: #7456bf; }
.zt-step.current .timeline-dot { box-shadow: 0 0 0 5px #10243012; }
.zt-step.tone-red strong { color: #c33d49; }
.zt-step.tone-green strong { color: #18825e; }
@media (max-width: 860px) { .zt-grid { grid-template-columns: 1fr; } }

/* Honeypot field (also hidden inline; this is a belt-and-braces rule) */
input[name="website"] { position: absolute !important; left: -9999px !important; opacity: 0 !important; }

/* SweetAlert2 - match the site's look */
.swal2-popup { font-family: inherit; border-radius: 22px; }
.swal2-title { letter-spacing: -.02em; color: #102b35; }
.swal2-html-container { color: #667a80; }
.swal2-styled.swal2-confirm, .swal2-styled.swal2-cancel, .swal2-styled.swal2-deny { border-radius: 999px; padding: .7em 1.5em; font-weight: 700; }
.swal2-container { z-index: 10000; }
/* Stage that is on hold / cancelled shows red in the eta-card */
.stages li.current.alert b { background: #c33d49; border-color: #c33d49; }
.stages li.current.alert span { color: #c33d49; }