/**
 * ShipTrack Pro — Public Tracking Page
 * No max-width, inherits theme page width, clean map matching the screenshot
 */

/* ── Wrapper inherits theme ──────────────────────────────────── */
.stp-public-wrap { font-family:inherit; color:inherit; width:100%; }

/* ── Search box ──────────────────────────────────────────────── */
.stp-tracker-box {
  background:linear-gradient(135deg,#1a56db 0%,#2563eb 100%);
  border-radius:14px; padding:32px 28px; color:#fff;
  margin-bottom:24px; text-align:center;
}
.stp-tracker-header h2 { font-size:clamp(20px,4vw,28px); font-weight:900; margin:0 0 8px; color:#fff; }
.stp-tracker-header p  { opacity:.88; margin:0 0 22px; font-size:15px; }
.stp-search-form  { max-width:540px; margin:0 auto; }
.stp-search-row   { display:flex; gap:8px; }
.stp-track-input {
  flex:1; padding:13px 16px; border-radius:9px;
  border:2px solid rgba(255,255,255,.35); font-size:15px;
  background:rgba(255,255,255,.15); color:#fff; outline:none;
  font-family:monospace; letter-spacing:1.5px;
  transition:border-color .15s,background .15s;
}
.stp-track-input::placeholder { color:rgba(255,255,255,.6); }
.stp-track-input:focus { border-color:#fff; background:rgba(255,255,255,.22); }
.stp-track-btn {
  padding:13px 22px; background:#fff; color:#1a56db;
  border:none; border-radius:9px; font-size:15px; font-weight:700;
  cursor:pointer; white-space:nowrap;
  transition:transform .1s,box-shadow .1s;
}
.stp-track-btn:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,.2); }

/* ── Alert ───────────────────────────────────────────────────── */
.stp-alert { padding:14px 18px; border-radius:9px; margin-bottom:20px; font-size:14px; }
.stp-alert-error { background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }

/* ── Result card ─────────────────────────────────────────────── */
.stp-result { background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 2px 16px rgba(0,0,0,.07); border:1px solid #e5e7eb; }

/* Result header */
.stp-result-header {
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:18px 22px; background:#f8faff; border-bottom:1px solid #e5e7eb;
  flex-wrap:wrap; gap:12px;
}
.stp-result-code  { font-family:monospace; font-size:clamp(16px,3vw,22px); font-weight:900; color:#1a56db; letter-spacing:2px; }
.stp-result-names { display:flex; align-items:center; gap:8px; font-size:13px; color:#6b7280; margin-top:4px; flex-wrap:wrap; }
.stp-header-right { display:flex; flex-direction:column; align-items:flex-end; gap:6px; }

/* Live indicator */
.stp-realtime-indicator {
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; color:#10b981; font-weight:600;
  background:#ecfdf5; padding:4px 10px; border-radius:20px; border:1px solid #a7f3d0;
}
.stp-live-dot { width:8px; height:8px; background:#10b981; border-radius:50%; animation:stp-blink 1.8s infinite; }
.stp-realtime-indicator.pulsing .stp-live-dot { background:#f59e0b; animation:none; }
@keyframes stp-blink { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ── Status badges ───────────────────────────────────────────── */
.stp-pub-badge { display:inline-block; padding:5px 16px; border-radius:20px; font-size:13px; font-weight:700; color:#fff; transition:background .3s; }
.stp-pub-badge-pending          { background:#f59e0b; }
.stp-pub-badge-processing       { background:#3b82f6; }
.stp-pub-badge-in_transit       { background:#8b5cf6; }
.stp-pub-badge-out_for_delivery { background:#f97316; }
.stp-pub-badge-delivered        { background:#10b981; }
.stp-pub-badge-failed           { background:#ef4444; }
.stp-pub-badge-cancelled        { background:#6b7280; }
.stp-pub-badge-returned         { background:#ec4899; }

/* ── Progress stepper ────────────────────────────────────────── */
.stp-progress-wrap {
  display:flex; align-items:flex-start; justify-content:center;
  padding:24px 16px 10px; overflow-x:auto; border-bottom:1px solid #f3f4f6;
}
.stp-progress-step { display:flex; flex-direction:column; align-items:center; text-align:center; min-width:72px; }
.stp-progress-dot  { width:18px; height:18px; border-radius:50%; border:3px solid #d1d5db; background:#fff; margin-bottom:7px; transition:all .3s; }
.stp-progress-step.done   .stp-progress-dot { background:#10b981; border-color:#10b981; }
.stp-progress-step.active .stp-progress-dot { background:#1a56db; border-color:#1a56db; box-shadow:0 0 0 4px rgba(26,86,219,.18); }
.stp-progress-label  { font-size:11px; color:#9ca3af; font-weight:500; max-width:72px; line-height:1.3; }
.stp-progress-step.done   .stp-progress-label { color:#10b981; font-weight:700; }
.stp-progress-step.active .stp-progress-label { color:#1a56db; font-weight:700; }
.stp-progress-line { height:3px; flex:1; min-width:14px; background:#d1d5db; margin-bottom:22px; transition:background .3s; }
.stp-progress-line.filled { background:#10b981; }

/* ══════════════════════════════════════════════════════════════
   MAP — matches the screenshot exactly
   OpenStreetMap + coloured teardrop letter pins
══════════════════════════════════════════════════════════════ */
.stp-map-section { padding:0; border-top:1px solid #f3f4f6; }
.stp-map-header  {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 22px 12px; flex-wrap:wrap; gap:8px;
}
.stp-map-header h3 { font-size:15px; font-weight:700; margin:0; display:flex; align-items:center; gap:6px; }

/* Legend pills — matching screenshot style */
.stp-map-legend  { display:flex; gap:10px; flex-wrap:wrap; }
.stp-leg {
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; font-weight:600; color:#374151;
  padding:4px 12px; border-radius:20px; border:1px solid #e5e7eb; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.stp-leg::before {
  content:''; width:10px; height:10px; border-radius:50%; flex-shrink:0;
}
.stp-leg-origin::before      { background:#1a56db; }
.stp-leg-stop::before        { background:#8b5cf6; }
.stp-leg-live::before        { background:#f97316; }
.stp-leg-destination::before { background:#10b981; }

/* The map element itself */
.stp-map {
  width:100%;
  height:clamp(320px,50vw,480px);
  position:relative; z-index:1;
  /* No border-radius — map goes edge-to-edge like screenshot */
}
/* Pulse animation for live marker ring */
@keyframes stp-live-pulse { 0%,100%{opacity:.2;r:19} 50%{opacity:.05;r:24} }
.stp-live-pulse { animation:stp-live-pulse 2s infinite; }

.stp-map-note { font-size:11px; color:#9ca3af; text-align:center; padding:8px 0 14px; margin:0; }

/* ── Info grid ───────────────────────────────────────────────── */
.stp-info-grid { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid #f3f4f6; }
.stp-info-card { padding:14px 18px; border-bottom:1px solid #f3f4f6; border-right:1px solid #f3f4f6; }
.stp-info-card h4 { font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:#1a56db; margin:0 0 7px; }
.stp-info-card p  { margin:2px 0; font-size:14px; }

/* ── Timeline ────────────────────────────────────────────────── */
.stp-pub-timeline { padding:18px 22px 22px; border-top:1px solid #f3f4f6; }
.stp-pub-timeline h3 { font-size:15px; font-weight:700; margin:0 0 18px; }
.stp-pub-timeline ul { list-style:none; border-left:3px solid #e5e7eb; padding-left:20px; margin:0; }
.stp-pub-timeline li { display:flex; gap:10px; position:relative; padding:0 0 18px 8px; }
.stp-pub-dot {
  position:absolute; left:-24px; top:4px;
  width:12px; height:12px; background:#1a56db;
  border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 2px #1a56db;
}
.stp-pub-dot-delivered        { background:#10b981!important; box-shadow:0 0 0 2px #10b981!important; }
.stp-pub-dot-failed           { background:#ef4444!important; box-shadow:0 0 0 2px #ef4444!important; }
.stp-pub-dot-in_transit       { background:#8b5cf6!important; box-shadow:0 0 0 2px #8b5cf6!important; }
.stp-pub-dot-out_for_delivery { background:#f97316!important; box-shadow:0 0 0 2px #f97316!important; }
.stp-pub-dot-cancelled        { background:#6b7280!important; box-shadow:0 0 0 2px #6b7280!important; }
.stp-pub-event { flex:1; }
.stp-pub-event-header { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:4px; }
.stp-pub-event-header strong { font-size:14px; }
.stp-pub-event-header span   { font-size:12px; color:#9ca3af; }
.stp-pub-loc { font-size:12px; color:#6b7280; margin:3px 0 2px; }
.stp-pub-msg { font-size:13px; color:#374151; margin:0; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width:640px) {
  .stp-search-row { flex-direction:column; }
  .stp-info-grid  { grid-template-columns:1fr; }
  .stp-result-header { flex-direction:column; }
  .stp-header-right  { align-items:flex-start; }
  .stp-tracker-box   { padding:22px 16px; }
  .stp-map-header    { padding:14px 14px 10px; }
  .stp-map-legend    { display:none; }
  .stp-pub-timeline  { padding:14px 14px 18px; }
}