/*
 * Shared styling for the parcel-tracking section (/track/, /track/{carrier}/, /couriers/).
 * Loaded alongside the framework style.css on those pages only, so per-carrier pages
 * stay lightweight (no duplicated inline CSS). The tracking-widget styles live in
 * includes/track-widget.php so the widget is self-contained.
 */
.tzs{--tz-blue:#1C6DA7;--tz-blue-2:#2582C5;--tz-ink:#0f2c43;--tz-muted:#4a6b84;--tz-line:#d7e6f5;--tz-bg:#f0f5ff;
  font-family:"Inter Tight","Inter",system-ui,sans-serif;color:var(--tz-ink)}
.tzs *{box-sizing:border-box}
.tzs__wrap{max-width:1040px;margin:0 auto;padding:0 20px}

/* Hero - top padding clears the theme's header (which floats over the hero) and
   leaves breathing room; mirrors the site's ~13% hero top-padding convention. */
.tzs__hero{background:linear-gradient(180deg,var(--tz-bg) 0%,#fff 100%);
  padding:clamp(140px,13vw,196px) 0 28px;text-align:center}
@media(max-width:768px){.tzs__hero{padding-top:120px}}
.tzs__hero-logo{width:60px;height:60px;object-fit:contain;display:block;margin:0 auto 16px;
  background:#fff;border:1px solid var(--tz-line);border-radius:12px;padding:7px;box-shadow:0 4px 14px rgba(16,44,67,.08)}
.tzs__eyebrow{font-family:"Inter",sans-serif;font-weight:600;font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tz-blue-2);margin:0 0 12px}
.tzs__hero h1{font-family:"Inter",sans-serif;font-weight:600;font-size:clamp(30px,5vw,50px);line-height:1.15;margin:0 0 14px}
.tzs__hero p{font-size:18px;font-weight:300;color:var(--tz-muted);max-width:680px;margin:0 auto 30px}

/* Generic section + prose */
.tzs__section{padding:44px 0}
/* Carrier pages (/track/{slug}/) run tighter - halve the between-section gaps */
.tzs--compact .tzs__section{padding:22px 0}
.tzs__section--alt{background:var(--tz-bg)}
.tzs__section h2{font-family:"Inter",sans-serif;font-weight:600;font-size:clamp(24px,3.5vw,34px);margin:0 0 16px}
.tzs__section h3{font-family:"Inter",sans-serif;font-weight:600;font-size:20px;margin:22px 0 8px}
.tzs__prose{font-size:16px;font-weight:300;line-height:1.7;color:#294156;max-width:820px}
/* Centred section header (heading + intro prose centred above the blocks below) */
.tzs__section--center{text-align:center}
.tzs__section--center .tzs__prose{margin-left:auto;margin-right:auto}
/* keep card contents left-aligned even inside a centred section */
.tzs__section--center .tzs__card{text-align:left}
.tzs__prose p{margin:0 0 14px}
.tzs__prose a{color:var(--tz-blue);text-decoration:underline}
.tzs__lede{font-size:18px;color:var(--tz-muted)}

/* Courier-directory search + country filter.
   Styled by ID so it overrides the site's global input/select rules
   (which force width:100% + border-radius:3px). */
.tzs__filter{display:flex;flex-wrap:wrap;align-items:center;gap:12px;max-width:700px;margin:0 auto 26px}
#tzs-search,#tzs-country{font-family:"Inter Tight","Inter",system-ui,sans-serif;font-size:15px;color:var(--tz-ink);
  box-sizing:border-box;height:50px;line-height:1.2;border:1.5px solid var(--tz-line);border-radius:50px;
  background-color:#f8fbff;transition:border-color .15s,background-color .15s,box-shadow .15s}
#tzs-search{flex:1 1 300px;min-width:0;width:auto;padding:0 22px}
#tzs-search::placeholder{color:#8199ac}
#tzs-country{flex:0 0 auto;width:auto;min-width:200px;cursor:pointer;padding:0 42px 0 20px;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--tz-blue) 50%),linear-gradient(135deg,var(--tz-blue) 50%,transparent 50%);
  background-position:calc(100% - 21px) 55%,calc(100% - 16px) 55%;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
#tzs-search:hover,#tzs-country:hover{border-color:#b9d4ec}
#tzs-search:focus,#tzs-country:focus{outline:none;border-color:var(--tz-blue-2);background-color:#fff;
  box-shadow:0 0 0 3px rgba(37,130,197,.14)}
.tzs__noresults{display:none;text-align:center;color:var(--tz-muted);font-size:15px;padding:18px 2px}
@media(max-width:560px){#tzs-search,#tzs-country{flex:1 1 100%;width:100%}}

/* Info cards / grids */
.tzs__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin:8px 0 0}
.tzs__card{background:#fff;border:1.5px solid var(--tz-line);border-radius:18px;padding:22px 22px;
  box-shadow:0 4px 16px rgba(16,44,67,.06)}
.tzs__card h3{margin:0 0 8px;font-size:18px}
.tzs__card p{margin:0;font-size:14px;font-weight:300;color:var(--tz-muted);line-height:1.6}
/* Courier name + logo row */
.tzs__card__head{display:flex;align-items:center;gap:11px;margin:0 0 8px}
.tzs__card__head h3{margin:0}
.tzs__logo{width:30px;height:30px;object-fit:contain;flex:0 0 auto;border-radius:5px}
.tzs__card--soon .tzs__logo{filter:grayscale(1);opacity:.55}
.tzs__card--link{display:flex;flex-direction:column;justify-content:space-between;text-decoration:none;color:inherit;transition:.15s}
.tzs__card--link:hover{border-color:var(--tz-blue-2);box-shadow:0 8px 24px rgba(16,44,67,.12);transform:translateY(-2px)}
.tzs__card .tzs__pill{align-self:flex-start;margin-top:14px;font-family:"Inter",sans-serif;font-weight:600;font-size:12px;
  color:var(--tz-blue);background:#eaf4ff;border-radius:50px;padding:5px 12px}
.tzs__card--soon{opacity:.7}
.tzs__card--soon .tzs__pill{color:var(--tz-muted);background:#eef2f6}

/* Code chips for tracking-number formats */
.tzs__chips{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 0}
.tzs__chip{font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-size:14px;background:#0f2c43;color:#dbeafe;
  border-radius:8px;padding:8px 14px;letter-spacing:.02em}

/* Status list */
.tzs__statuses{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.tzs__statuses li{display:flex;gap:12px;align-items:flex-start;font-size:15px;font-weight:300;color:#294156}
.tzs__statuses b{font-family:"Inter",sans-serif;font-weight:600;color:var(--tz-ink);min-width:150px;display:inline-block}

/* Workflow (Traizr continues the journey) */
.tzs__flow{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px;margin:22px 0 0;padding:0;counter-reset:step}
.tzs__flow li{list-style:none;flex:1 1 130px;background:#fff;border:1.5px solid var(--tz-line);border-radius:14px;
  padding:16px 14px;text-align:center;position:relative}
.tzs__flow li b{display:block;font-family:"Inter",sans-serif;font-weight:600;font-size:14px;margin-top:6px}
.tzs__flow li span{font-size:12.5px;font-weight:300;color:var(--tz-muted)}
.tzs__flow li::before{counter-increment:step;content:counter(step);display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;background:var(--tz-blue);color:#fff;font-family:"Inter",sans-serif;
  font-weight:600;font-size:13px}

/* FAQ */
.tzs__faq{max-width:820px;margin:6px 0 0}
.tzs__faq details{border-bottom:1px solid var(--tz-line);padding:14px 0}
.tzs__faq summary{font-family:"Inter",sans-serif;font-weight:600;font-size:16px;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:12px}
.tzs__faq summary::-webkit-details-marker{display:none}
.tzs__faq summary::after{content:"+";color:var(--tz-blue-2);font-weight:400;font-size:22px;line-height:1}
.tzs__faq details[open] summary::after{content:"\2212"}
.tzs__faq p{font-size:15px;font-weight:300;line-height:1.7;color:#294156;margin:10px 0 0}

/* CTA band */
.tzs__cta{background:linear-gradient(180deg,var(--tz-blue) 0%,#134f7d 100%);color:#fff;text-align:center;
  border-radius:24px;padding:34px 40px;margin:8px auto;
  box-shadow:0 18px 38px -14px rgba(19,79,125,.55)}
.tzs__cta h2{color:#fff;margin:0 0 10px}
/* wide enough that the last line doesn't orphan a single word ("item.") */
.tzs__cta p{color:#dbeafe;font-weight:300;max-width:760px;margin:0 auto 22px}
.tzs__btn{display:inline-block;font-family:"Inter",sans-serif;font-weight:600;font-size:15px;text-decoration:none;
  border-radius:50px;padding:13px 30px;transition:.15s}
.tzs__btn--primary{background:#fff;color:var(--tz-blue)}
.tzs__btn--primary:hover{background:#eaf4ff}
.tzs__btn--ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.6)}
.tzs__btn--ghost:hover{border-color:#fff}

/* Related carriers row */
.tzs__related{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0}
.tzs__related a{font-family:"Inter",sans-serif;font-weight:600;font-size:14px;text-decoration:none;color:var(--tz-blue);
  background:#fff;border:1.5px solid var(--tz-line);border-radius:50px;padding:9px 18px;transition:.15s}
.tzs__related a:hover{border-color:var(--tz-blue-2);background:#eaf4ff}