:root {
  --brand-red: #d40511;
  --brand-red-dark: #a80410;
  --brand-yellow: #ffcc00;
  --ink: #111827;
  --ink-soft: #4b5563;
  --muted: #6b7280;
  --border: #e5e7eb;
  --bg-soft: #f4f5f7;
  --white: #ffffff;
  --ok: #16a34a;
  --warn: #d97706;
  --danger: #dc2626;
  --radius: 10px;
  --shadow: 0 4px 16px rgba(17, 24, 39, 0.08);

  /* Structural template tokens (see html[data-template="..."] overrides
     near the bottom of this file): color tokens above come from the
     active row in `color_palettes` via palette_style_tag(); these come
     from the active row in `templates`, independently. */
  --font-heading: inherit;
  --btn-text-transform: none;
  --btn-letter-spacing: normal;
  --header-bg: var(--white);
  --header-ink: var(--ink);
  --header-link: var(--ink-soft);
  --hero-bg: transparent;
  --hero-decoration: none;
}

* { box-sizing: border-box; }

/* overflow-x: clip (not hidden): hidden forces overflow-y to auto per the
   CSS spec, which breaks position:sticky on the header. clip blocks the
   same horizontal scroll/drag without that side effect. */
html { overflow-x: clip; }
body {
  margin: 0;
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.5;
  overflow-x: clip;
  width: 100%;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--font-heading); }

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Top bar ---------- */
.topbar {
  background: var(--ink);
  color: #d1d5db;
  font-size: 13px;
}
.topbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 6px;
  padding-bottom: 6px;
}
.topbar a { color: #d1d5db; }
.topbar a:hover { color: var(--brand-yellow); }
.topbar-links { display: flex; gap: 18px; }

/* ---------- Header / nav ---------- */
.site-header {
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  /* The name and its tagline may shrink; the logo mark may not. Without
     this the flex row would rather squash the image than the text. */
  min-width: 0;
}
/* The width and height attributes on the tag already hold the correct,
   undistorted size for the space (see logo_img_tag). These rules only stop
   anything else in the page squashing it: `flex: none` keeps the flex row
   from shrinking the picture instead of the text, `height: auto` keeps the
   proportions if the width is ever constrained, and object-fit is the
   belt-and-braces guarantee that a logo is never stretched out of shape. */
.logo .mark-img {
  display: block;
  flex: none;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* Dark surfaces: the footer, and the admin sidebar.
   An uploaded logo may have been drawn with dark lettering on a
   transparent background, which vanishes completely on a dark panel. A
   light plate behind it is legible whatever the logo turns out to be, and
   reads as deliberate rather than as a mistake. The marks that ship with
   this codebase were drawn for these surfaces and are left alone. */
.logo.logo-on-dark .mark-img,
.mark-img.logo-plate {
  background: #fff;
  border-radius: 8px;
  padding: 6px;
  box-sizing: content-box;
}

/* A logo that already carries the company name gets the brand area to
   itself, so it can be large enough to read. */
.logo.logo-lockup { gap: 0; }
.logo.logo-lockup .mark-img { max-height: 68px; width: auto; }
@media (max-width: 560px) {
  .logo.logo-lockup .mark-img { max-height: 50px; }
}
@media (max-width: 380px) {
  .logo.logo-lockup .mark-img { max-height: 44px; }
}
.logo .word-cargo { color: var(--header-ink); }

/* ---------- Brand block: company name + tagline ----------
   The header has to hold a four-letter company name and a twenty-four
   letter one equally well, on every screen, without wrapping onto a
   second line or pushing the navigation off the edge.

   Two things do that together. The ceiling (--brand-max) is worked out
   from the name's length in PHP, because CSS cannot count characters, and
   doing it in JavaScript would resize the header after the page is
   already on screen. The clamp() below then shrinks it further as the
   viewport narrows. The result is the right size in the first paint, at
   any width, for any length of name. */
.logo .brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-width: 0;
}
.logo .word-brand {
  color: var(--header-ink);
  /* Floor, fluid middle, ceiling. The ceiling is the per-name value; the
     fluid term is what keeps a long name inside a narrow screen. */
  font-size: clamp(var(--brand-min, 13px), 3.6vw, var(--brand-max, 22px));
  line-height: 1.1;
  /* Never break a company name across two lines: a wrapped name reads as
     two different things. It shrinks instead. */
  white-space: nowrap;
}
.logo .brand-tagline {
  display: block;
  color: var(--muted);
  font-size: clamp(8.5px, 1.5vw, 10.5px);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
  /* Sits under the name, so it must not inherit the name's tight
     tracking, which would close the letters up at this size. */
}

.main-nav { display: flex; align-items: center; gap: 20px; }
.main-nav a {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--header-link);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.main-nav a:hover, .main-nav a.active {
  color: var(--brand-red);
  border-bottom-color: var(--brand-red);
}

.header-actions { display: flex; align-items: center; gap: 10px; }
/* The label stays on one line whatever the width, so the button never grows
   tall enough to push into the logo or the tagline. */
.header-track-btn { white-space: nowrap; flex: none; }
.nav-menu-btn {
  display: none; background: none; border: 1.5px solid var(--border); border-radius: 6px;
  padding: 8px 11px; font-size: 18px; line-height: 1; cursor: pointer; color: var(--header-ink);
}
.nav-menu-btn:hover { border-color: var(--header-ink); }

/* Must stay BELOW .site-header's z-index (50), not above it. The mobile
   nav dropdown lives inside .site-header, and that header is
   position:sticky with a z-index, so it forms its own stacking context, the dropdown's own z-index can never lift it above the header's global
   level. A backdrop stacked above the header therefore covers the open
   menu itself, swallowing every tap on a menu link (the tap hits the
   backdrop, which just closes the menu, so nothing ever navigates).
   Sitting at 45 the backdrop still dims all page content, which is the
   only thing it needs to cover. */
.mobile-nav-backdrop { display: none; position: fixed; inset: 0; background: rgba(17,24,39,0.35); z-index: 45; }
.mobile-nav-backdrop.is-open { display: block; }
.mobile-nav-dropdown {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--white); border-top: 1px solid var(--border);
  max-height: 0; overflow: hidden; z-index: 60;
  transition: max-height 0.25s ease;
  box-shadow: 0 16px 28px rgba(17,24,39,0.14);
}
.mobile-nav-dropdown.is-open { max-height: 420px; overflow-y: auto; }
.mobile-nav-link {
  display: block; padding: 14px 24px; font-weight: 600; font-size: 15.5px;
  color: var(--ink); border-bottom: 1px solid var(--border);
}
.mobile-nav-link:hover, .mobile-nav-link.active { color: var(--brand-red); }

@media (max-width: 1024px) {
  .main-nav { display: none; }
  .nav-menu-btn { display: inline-flex; align-items: center; justify-content: center; }
}

/* On a phone the row is logo mark, name, "Track Now", menu button. A long
   company name has the least room here, so the mark gives some back and
   the gaps tighten. Checked at 320px with a 24-character name. */
@media (max-width: 560px) {
  .logo { gap: 8px; }
  /* Tighter side gutter in the header so the logo sits closer to the left
     edge and the row has more room. */
  .site-header .container { padding-left: 14px; padding-right: 14px; }
  /* Height only: the width follows from the logo's own proportions, so a
     wide name-plate is not squeezed into a square. */
  .logo:not(.logo-lockup) .mark-img { height: 40px; width: auto; }
  .header-actions { gap: 7px; }
  /* Compact Track Now so it fits the row beside the logo and menu button,
     on one line, without pushing anything off the edge. */
  .btn.header-track-btn { padding: 8px 12px; font-size: 12.5px; }
}
@media (max-width: 400px) {
  /* Very small phones: trim the button and gutters a touch more so the
     logo, the button and the menu still share the row. */
  .site-header .container { padding-left: 12px; padding-right: 12px; }
  .logo { gap: 6px; }
  .header-actions { gap: 6px; }
  .btn.header-track-btn { padding: 7px 10px; font-size: 12px; }
}
/* On the smallest phones the square logo mark gives up a little height so
   the name, the compact Track Now button and the menu button all fit. */
@media (max-width: 380px) {
  .logo:not(.logo-lockup) .mark-img { height: 36px; width: auto; }
}
@media (min-width: 1025px) {
  .mobile-nav-dropdown, .mobile-nav-backdrop { display: none !important; }
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: min(var(--radius), 14px);
  text-transform: var(--btn-text-transform);
  letter-spacing: var(--btn-letter-spacing);
  font-weight: 700;
  font-size: 14.5px;
  border: 2px solid transparent;
  cursor: pointer;
}
.btn-primary { background: var(--brand-red); color: var(--white); }
.btn-primary:hover { background: var(--brand-red-dark); }
.btn-outline { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--white); }
.btn-yellow { background: var(--brand-yellow); color: var(--ink); }
.btn-yellow:hover { filter: brightness(0.95); }
.btn-block { width: 100%; }
.btn-sm { padding: 7px 14px; font-size: 13px; }

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-red-dark) 100%);
  color: var(--white);
  padding: 64px 0 90px;
  position: relative;
  overflow: hidden;
}
.hero h1 {
  font-size: 42px;
  line-height: 1.15;
  margin: 0 0 16px;
  max-width: 620px;
}
.hero p.lead {
  font-size: 17px;
  color: #ffe6e6;
  max-width: 520px;
  margin: 0 0 32px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
}
.hero-illustration {
  max-width: 100%; width: 100%; aspect-ratio: 1.83 / 1; object-fit: cover;
  border-radius: var(--radius); filter: drop-shadow(0 18px 34px rgba(0,0,0,0.28));
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-illustration { max-width: 420px; margin: 0 auto; }
}

.feature-row {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 56px;
}
.feature-row:last-child { margin-bottom: 0; }
.feature-row.reverse { grid-template-columns: 1.1fr 0.9fr; }
.feature-row.reverse img { order: 2; }
.feature-row img { width: 100%; height: auto; aspect-ratio: 1.83 / 1; object-fit: cover; border-radius: var(--radius); }
.feature-row h3 { font-size: 22px; margin: 0 0 12px; }
.feature-row p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.6; margin: 0; }
@media (max-width: 800px) {
  .feature-row, .feature-row.reverse { grid-template-columns: 1fr; }
  .feature-row.reverse img { order: 0; }
  .feature-row { margin-bottom: 40px; }
}

.page-banner-image {
  width: 100%; height: 320px; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--shadow); margin: 0 0 8px;
}
@media (max-width: 640px) { .page-banner-image { height: 200px; } }

.photo-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.photo-gallery img { width: 100%; height: 220px; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
.photo-gallery img:first-child { grid-column: span 2; grid-row: span 2; height: 100%; min-height: 456px; }
@media (max-width: 900px) {
  .photo-gallery { grid-template-columns: repeat(2, 1fr); }
  .photo-gallery img:first-child { grid-column: span 2; min-height: 220px; height: 220px; }
}
@media (max-width: 560px) {
  .photo-gallery { grid-template-columns: 1fr; }
  .photo-gallery img:first-child { grid-column: span 1; }
}

/* Tracking search card */
.track-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  max-width: 640px;
  margin-top: -54px;
  position: relative;
  z-index: 5;
}
.track-card h3 { margin: 0 0 4px; font-size: 18px; }
.track-card p { margin: 0 0 16px; color: var(--muted); font-size: 14px; }
.track-form { display: flex; gap: 10px; }
.track-form input[type="text"] {
  flex: 1;
  padding: 13px 14px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  font-size: 15px;
}
.track-form input[type="text"]:focus { outline: none; border-color: var(--brand-red); }
.demo-hint { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.demo-hint code { background: var(--bg-soft); padding: 2px 6px; border-radius: 4px; }

/* ---------- Sections ---------- */
.section { padding: 72px 0; }
.section-soft { background: var(--bg-soft); }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.section-head .eyebrow {
  color: var(--brand-red);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.section-head h2 { font-size: 30px; margin: 8px 0 12px; }
.section-head p { color: var(--muted); }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
}
.card .icon {
  width: 46px; height: 46px;
  border-radius: 10px;
  background: #fdecec;
  color: var(--brand-red);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin-bottom: 16px;
}
.card h3 { margin: 0 0 8px; font-size: 17px; }
.card p { margin: 0; color: var(--muted); font-size: 14.5px; }

.stats-strip {
  background: var(--ink);
  color: var(--white);
  padding: 36px 0;
}
.stats-strip .grid-4 { text-align: center; }
.stats-strip .stat-num { font-size: 30px; font-weight: 800; color: var(--brand-yellow); }
.stats-strip .stat-label { font-size: 13.5px; color: #d1d5db; margin-top: 4px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #d1d5db; padding: 56px 0 24px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.footer-grid h4 { color: var(--white); font-size: 14px; margin: 0 0 14px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 10px; font-size: 14px; }
.footer-grid a:hover { color: var(--brand-yellow); }
.footer-bottom {
  border-top: 1px solid #374151;
  margin-top: 40px;
  padding-top: 20px;
  font-size: 13px;
  color: #9ca3af;
  display: flex;
  justify-content: space-between;
}

/* ---------- Tracking / map page ---------- */
.track-hero {
  background: var(--ink);
  color: var(--white);
  padding: 34px 0;
}
.track-hero .track-form input[type="text"] { border: none; }
.tracking-result { padding: 40px 0 72px; }
.tn-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 22px; }
.tn-heading h2 { margin: 0; font-size: 22px; }
.tn-heading .tn-code { color: var(--muted); font-size: 14px; }
.doc-actions { display: flex; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }

.badge {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}
.badge-delivered { background: #dcfce7; color: var(--ok); }
.badge-transit { background: #fef3c7; color: var(--warn); }
.badge-pending { background: #e5e7eb; color: var(--ink-soft); }
.badge-alert { background: #fee2e2; color: var(--danger); }
.badge-hold { background: #ede9fe; color: #6d28d9; }

.tracking-layout { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 28px; align-items: start; }
/* Contact puts the form on the wider right column on desktop; it stacks
   on the same breakpoint as every other two-column layout below. The
   columns live here rather than inline on the element, because an
   inline value would beat the media query and stay two-up on a phone. */
.tracking-layout--contact { grid-template-columns: 0.9fr 1.1fr; }
#map {
  height: 460px;
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  z-index: 1;
}
/* Shown by assets/js/map.js when the Leaflet library can't be reached
   (CDN blocked/offline), an explained empty state instead of a blank box. */
#map.map-unavailable {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft);
  height: auto;
  min-height: 180px;
  padding: 28px 22px;
}
.map-unavailable-inner {
  display: flex; flex-direction: column; gap: 6px;
  text-align: center; max-width: 420px;
}
.map-unavailable-inner strong { font-size: 15px; color: var(--ink); }
.map-unavailable-inner span { font-size: 13.5px; color: var(--muted); line-height: 1.55; }
/* Shown under the map when tile images keep failing (OSM outage / blocked
   host). The map itself still works. This only explains the plain
   background so it doesn't read as a broken page. */
.map-tile-note {
  margin-top: 8px; padding: 8px 12px;
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 12.5px; color: var(--muted); line-height: 1.5;
}
.map-live-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; color: var(--ok);
  margin-top: 10px;
}
.map-live-tag .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ok);
  animation: pulse 1.6s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(22,163,74,0.5); }
  70% { box-shadow: 0 0 0 8px rgba(22,163,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}

.map-legend {
  display: flex; flex-wrap: wrap; gap: 12px 18px;
  margin-top: 12px; padding: 10px 14px;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px;
  font-size: 12.5px; color: var(--ink-soft);
}
.map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.map-legend .swatch { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.map-legend .swatch-line { width: 16px; height: 0; border-top: 2.5px solid; flex: none; }
.map-legend .swatch-origin { background: #111827; }
.map-legend .swatch-history { background: #fde68a; border: 2px solid #d97706; }
.map-legend .swatch-current { background: #4285f4; }
.map-legend .swatch-dest { background: #374151; }
.map-legend .swatch-line-traveled { border-top-color: #111827; opacity: 0.6; }
.map-legend .swatch-line-remaining { border-top-style: dashed; border-top-color: #d40511; }

/* Current-position map marker: blue, idling pulse ring (like Google Maps'
   live location dot) + a permanent label above it. */
.current-marker-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  background: rgba(66, 133, 244, 0.35);
  animation: current-idle-pulse 2.2s ease-out infinite;
}
@keyframes current-idle-pulse {
  0% { transform: scale(0.6); opacity: 0.85; }
  70% { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}
.leaflet-tooltip.current-location-tooltip {
  background: #4285f4;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.leaflet-tooltip.current-location-tooltip::before {
  border-top-color: #4285f4;
}

.timeline { border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
.timeline h3 { margin: 0 0 18px; font-size: 16px; }
.timeline-item { display: flex; gap: 14px; padding-bottom: 22px; position: relative; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: 7px; top: 20px; bottom: 0;
  width: 2px;
  background: var(--border);
}
.timeline-item:last-child::before { display: none; }
.timeline-dot {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--white); border: 3px solid var(--brand-red);
  flex: none; margin-top: 2px;
}
.timeline-item.past .timeline-dot { border-color: #d1d5db; }
.timeline-body .t-status { font-weight: 700; font-size: 14.5px; }
.timeline-body .t-loc { color: var(--ink-soft); font-size: 13.5px; margin-top: 2px; }
.timeline-body .t-note { color: var(--muted); font-size: 13px; margin-top: 4px; }
.timeline-body .t-time { color: #9ca3af; font-size: 12px; margin-top: 4px; }

.shipment-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
/* min-width: 0 lets a column shrink below its content, so a long address
   or email in one of these tiles cannot widen the grid and push the whole
   page sideways. */
.shipment-meta .meta-box { border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; min-width: 0; }
.shipment-meta .meta-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.shipment-meta .meta-value { font-size: 14.5px; font-weight: 600; margin-top: 3px; overflow-wrap: anywhere; }

.alert {
  padding: 14px 18px;
  border-radius: 8px;
  font-size: 14.5px;
  margin-bottom: 18px;
}
.alert-error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.alert-success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.alert-info { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }

/* ---------- Forms (admin + contact) ---------- */
.form-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  max-width: 480px;
  margin: 0 auto;
  box-shadow: var(--shadow);
}
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  font-size: 14.5px;
  font-family: inherit;
}
/* The rule above is written for text boxes, and a checkbox is not one.
   Left to inherit it, every tick box and radio button in the panel was
   stretched to the full width of the form with 11px of padding and a
   border around it, which is why they sat marooned in the middle of their
   own row with the wording pushed to the far edge. They size themselves. */
.form-group input[type="checkbox"],
.form-group input[type="radio"] {
  width: auto;
  flex: none;
  padding: 0;
  border: none;
  margin: 0;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { outline: none; border-color: var(--brand-red); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.input-with-button { display: flex; gap: 8px; }
.input-with-button input { flex: 1; }
.input-with-button .btn { flex: none; white-space: nowrap; }
.geocode-status { display: block; font-size: 12.5px; margin-top: 6px; min-height: 16px; }
.geocode-status.geocode-success { color: var(--ok); }
.geocode-status.geocode-error { color: var(--danger); }

/* ---------- Admin layout ---------- */
.admin-wrap { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.admin-sidebar { background: var(--ink); color: var(--white); padding: 24px 18px; }
.admin-sidebar .logo { color: var(--white); margin-bottom: 30px; }
.admin-sidebar .logo .word-cargo { color: var(--white); }
.admin-sidebar nav a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 12px; border-radius: 6px;
  color: #d1d5db; font-weight: 600; font-size: 14px; margin-bottom: 2px;
}
.admin-sidebar nav a:hover, .admin-sidebar nav a.active { background: rgba(255,255,255,0.08); color: var(--white); }

/* Section headings group the menu so a long list of links reads as a few
   short ones. Quiet by design: they label, they are not clickable. */
.admin-sidebar .nav-section-title {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: #6b7280; padding: 0 12px; margin: 18px 0 7px;
}
.admin-sidebar .nav-section-title:first-of-type { margin-top: 4px; }
.admin-sidebar .nav-section-divider {
  height: 1px; background: rgba(255,255,255,0.10); margin: 16px 8px 12px;
}

/* Super-admin-only links carry their own colour and a small badge, so a
   super admin can see at a glance which controls a regular admin will
   never have. Amber, distinct from the red used for the active item, and
   from the greys of the ordinary links. Regular admins never see these
   links at all, so the colour is information for the super admin, not
   decoration. */
.admin-sidebar nav a.nav-super { color: #fcd34d; }
.admin-sidebar nav a.nav-super:hover,
.admin-sidebar nav a.nav-super.active { background: rgba(252,211,77,0.14); color: #fde68a; }
.admin-sidebar nav a.nav-super .nav-super-badge {
  font-size: 8.5px; font-weight: 800; letter-spacing: 0.06em;
  background: rgba(252,211,77,0.18); color: #fcd34d;
  padding: 2px 5px; border-radius: 4px; flex: none;
}
.admin-sidebar nav a.nav-logout { color: #fca5a5; margin-top: 2px; }
.admin-sidebar nav a.nav-logout:hover { background: rgba(248,113,113,0.14); color: #fecaca; }

/* A card holding controls only a super admin can reach, so the same amber
   cue carries over from the menu to the page. */
.form-card.form-card--super { border-left: 3px solid #f59e0b; }
.form-card.form-card--super > h3:first-child::after {
  content: 'SUPER ADMIN';
  font-size: 9px; font-weight: 800; letter-spacing: 0.06em; vertical-align: middle;
  background: rgba(245,158,11,0.14); color: #b45309;
  padding: 2px 6px; border-radius: 4px; margin-left: 8px;
}
.admin-main { padding: 30px 36px; background: var(--bg-soft); min-width: 0; }
.admin-topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
.admin-topbar h1 { font-size: 22px; margin: 0; }

.image-slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.image-slot-card { max-width: none; margin: 0; padding: 18px; }
.image-slot-preview {
  width: 100%; height: 140px; object-fit: contain; background: var(--bg-soft);
  border-radius: 8px; border: 1px solid var(--border); margin-bottom: 12px;
}
.image-slot-card h3 { margin: 0 0 4px; font-size: 15px; }
.image-slot-where { margin: 0 0 12px; font-size: 12.5px; color: var(--muted); }
.image-slot-card input[type="file"] { width: 100%; font-size: 12.5px; }

.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.theme-card {
  background: var(--white); border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; box-shadow: var(--shadow);
}
.theme-card-active { outline: 2px solid var(--brand-red); outline-offset: -2px; }
.theme-swatches { display: flex; height: 40px; }
.theme-swatches span { flex: 1; }
.theme-card-body { padding: 16px; }
.theme-card-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; margin-bottom: 3px; }
.theme-card-meta { font-size: 12.5px; color: var(--muted); margin-bottom: 14px; }
.theme-card-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.theme-card-actions form { display: inline; }

.theme-color-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.theme-color-field label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; }
.theme-color-input { display: flex; gap: 8px; align-items: center; }
.theme-color-input input[type="color"] { width: 42px; height: 40px; padding: 2px; border: 1.5px solid var(--border); border-radius: 6px; cursor: pointer; flex: none; }
.theme-color-input input[type="text"] { flex: 1; min-width: 0; font-family: ui-monospace, monospace; text-transform: lowercase; }

.admin-mobile-bar { display: none; }
.admin-menu-btn { display: none; }
.admin-sidebar-backdrop { display: none; }

.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

.content-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
.content-tab { padding: 10px 16px; font-size: 14px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.content-tab:hover { color: var(--ink); }
.content-tab.active { color: var(--brand-red); border-bottom-color: var(--brand-red); }

.status-pill { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.status-new { background: #dbeafe; color: #1e40af; }
.status-contacted { background: #fef3c7; color: #92400e; }
.status-converted { background: #dcfce7; color: #166534; }
.status-closed { background: #e5e7eb; color: #4b5563; }

.countries-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.country-chip {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--ink);
}
@media (max-width: 900px) { .countries-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .countries-grid { grid-template-columns: 1fr; } }

.wizard-steps { display: flex; align-items: flex-start; margin-bottom: 28px; }
.wizard-step-node { display: flex; flex-direction: column; align-items: center; text-align: center; width: 120px; }
.wizard-step-node.done, .wizard-step-node.active { cursor: pointer; }
.wizard-step-circle {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
  border: 2px solid var(--border); background: var(--white); color: var(--muted);
}
.wizard-step-node.active .wizard-step-circle { background: var(--brand-red); border-color: var(--brand-red); color: var(--white); }
.wizard-step-node.done .wizard-step-circle { background: var(--white); border-color: var(--brand-red); color: var(--brand-red); }
.wizard-step-label { font-size: 12px; color: var(--muted); margin-top: 8px; }
.wizard-step-node.active .wizard-step-label { color: var(--ink); font-weight: 700; }
.wizard-step-line { flex: 1; height: 2px; background: var(--border); margin-top: 17px; }
.wizard-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--border); }
.review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 4px; }
@media (max-width: 700px) {
  .wizard-step-label { display: none; }
  .wizard-step-node { width: auto; }
  .review-grid { grid-template-columns: 1fr; }
}

.calculator-box {
  background: var(--bg-soft);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
  margin: 24px 0;
}
.calculator-label { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); font-weight: 700; }
.calculator-amount { font-size: 34px; font-weight: 800; color: var(--brand-red); margin: 4px 0; }
.calculator-note { font-size: 12.5px; color: var(--muted); }

table.data-table { width: 100%; border-collapse: collapse; background: var(--white); border-radius: var(--radius); overflow: hidden; table-layout: fixed; }
table.data-table th, table.data-table td { padding: 12px 16px; text-align: left; font-size: 14px; border-bottom: 1px solid var(--border); overflow-wrap: break-word; }
table.data-table th { background: #f9fafb; font-weight: 700; color: var(--ink-soft); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap; }
table.data-table tr:last-child td { border-bottom: none; }
table.data-table td.actions { display: flex; }
table.data-table th:last-child, table.data-table td.actions { width: 90px; }
.table-responsive table.data-table { border-radius: 0; }
.table-responsive { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); }
.btn-danger { background: transparent; border: 1.5px solid var(--danger); color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: var(--white); }

/* Per-row actions: a single compact button that opens a small menu, instead
   of a full row of buttons, keeps every table column visible without
   forcing horizontal scrolling at normal desktop widths. */
.row-actions { display: inline-block; }
.row-actions-btn {
  background: none; border: 1.5px solid var(--border); border-radius: 6px;
  width: 32px; height: 32px; font-size: 18px; line-height: 1; cursor: pointer; color: var(--ink-soft);
}
.row-actions-btn:hover, .row-actions-btn[aria-expanded="true"] { border-color: var(--ink); color: var(--ink); }
.row-actions-menu {
  position: fixed; z-index: 200; min-width: 160px;
  background: var(--white); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 10px 28px rgba(17,24,39,0.18); overflow: hidden;
}
.row-actions-menu a, .row-actions-menu button {
  display: block; width: 100%; text-align: left; padding: 10px 14px;
  font-size: 13.5px; font-weight: 600; color: var(--ink); background: none; border: none;
  border-bottom: 1px solid var(--border); cursor: pointer;
}
.row-actions-menu > a:last-child, .row-actions-menu > form:last-child button { border-bottom: none; }
.row-actions-menu a:hover, .row-actions-menu button:hover { background: var(--bg-soft); }
.row-actions-menu .danger { color: var(--danger); }
.row-actions-menu .danger:hover { background: #fee2e2; }
.row-actions-menu .row-actions-status { padding: 10px 14px; border-bottom: 1px solid var(--border); }
.row-actions-menu .row-actions-status label {
  display: block; font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 6px;
}
.row-actions-menu .row-actions-status select {
  width: 100%; padding: 6px 8px; border: 1.5px solid var(--border); border-radius: 6px; font-size: 13px;
}

/* Below 680px, data tables become stacked cards instead of a horizontally
   scrolling table, there's nothing left to scroll sideways on a phone. */
@media (max-width: 680px) {
  .table-responsive { overflow-x: visible; box-shadow: none; background: none; }
  table.data-table { min-width: 0; width: 100%; }
  table.data-table thead { display: none; }
  table.data-table, table.data-table tbody, table.data-table tr, table.data-table td {
    display: block; width: 100%;
  }
  table.data-table tr {
    margin-bottom: 14px; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--white); box-shadow: var(--shadow); overflow: hidden;
  }
  table.data-table td {
    white-space: normal; text-align: right; padding: 10px 14px 10px 42%;
    position: relative; border-bottom: 1px solid var(--border); min-height: 20px;
  }
  table.data-table td[data-label]::before {
    content: attr(data-label);
    position: absolute; left: 14px; text-align: left;
    font-weight: 700; font-size: 12px; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.3px;
  }
  table.data-table tr:last-child, table.data-table td:last-child { margin-bottom: 0; }
  table.data-table td:last-child { border-bottom: none; }
  table.data-table td.actions {
    justify-content: flex-end; padding: 34px 14px 10px; text-align: left;
  }
  table.data-table td.actions::before {
    top: 10px;
  }
  table.data-table td[colspan] { padding-left: 14px; text-align: center; }
}

.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--ink); padding: 20px; }

@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
  .tracking-layout, .tracking-layout--contact { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }

  .admin-wrap { grid-template-columns: 1fr; }
  .admin-main { padding: 20px 16px; }

  .admin-mobile-bar {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--ink); color: var(--white); padding: 14px 18px;
    /* Above .admin-sidebar-backdrop (100) so the ☰ button stays crisp and
       directly tappable while the sidebar is open, otherwise the backdrop
       covers it and the button's own open/close toggle never runs. */
    position: relative; z-index: 102;
  }
  .admin-mobile-bar .logo { color: var(--white); margin-bottom: 0; }
  .admin-mobile-bar .logo .word-cargo { color: var(--white); }
  .admin-menu-btn {
    display: block; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.3);
    color: var(--white); border-radius: 6px; padding: 7px 11px; font-size: 18px; line-height: 1; cursor: pointer;
  }

  .admin-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 260px; max-width: 80vw;
    z-index: 101; overflow-y: auto;
    transform: translateX(-100%); transition: transform 0.2s ease;
  }
  .admin-sidebar.is-open { transform: translateX(0); }
  .admin-sidebar-backdrop {
    display: none; position: fixed; inset: 0; background: rgba(17,24,39,0.5); z-index: 100;
  }
  .admin-sidebar-backdrop.is-open { display: block; }
}
@media (max-width: 640px) {
  .grid-3, .grid-4, .form-row, .shipment-meta { grid-template-columns: 1fr; }
  .hero h1 { font-size: 30px; }
  .track-form { flex-direction: column; }
}
/* The standalone "Track Now" stays on mobile, just smaller, so it fits the
   row with the logo and the menu button rather than wrapping or crowding.
   The per-width sizing is in the header media queries below. */

/* ---------------------------------------------------------------
   Templates, structural design variants selected by the active row
   in `templates` (html[data-template="..."] / [data-animation="..."],
   set by active_template_layout_key()/active_template_animation_key()
   in includes/design.php). Colors are entirely separate, coming from
   the active color palette's palette_style_tag(): a template never
   changes colors, and a palette never changes any of this. Managed
   only by super admins at /admin/templates.php.
   --------------------------------------------------------------- */

/* Homepage sections admins can reorder per template, see the
   .home-sections wrapper in index.php. Order values below are the
   original/default sequence; templates override specific ones. */
.home-sections { display: flex; flex-direction: column; }
.home-sec-stats    { order: 1; }
.home-sec-features { order: 2; }
.home-sec-operate  { order: 3; }
.home-sec-steps    { order: 4; }
.home-sec-gallery  { order: 5; }

/* Scroll-reveal (assets/js/reveal.js toggles .is-visible; how that
   transition looks is entirely up to the active template below).

   Every "hide it until revealed" rule below is gated on html.js-anim, a
   class added by a small inline script in includes/header.php and removed
   again by that script's own failsafe if reveal.js never starts. Without
   that gate, anything that stops reveal.js from running: JavaScript
   turned off, an ad/privacy blocker, a botched deploy that 404s the file,
   a stricter CSP later on, would leave these sections stuck at opacity 0
   and silently erase most of the homepage. Content-hiding must never be
   the default state; it's opt-in, and only once JS has proven it can undo
   it. */
[data-reveal] { opacity: 1; transform: none; }
html.js-anim[data-animation="fade"] [data-reveal] { opacity: 0; transition: opacity 0.6s ease; }
html.js-anim[data-animation="fade"] [data-reveal].is-visible { opacity: 1; }
html.js-anim[data-animation="fade-up"] [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
html.js-anim[data-animation="fade-up"] [data-reveal].is-visible { opacity: 1; transform: translateY(0); }
html.js-anim[data-animation="scale-in"] [data-reveal] { opacity: 0; transform: scale(0.92); transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
html.js-anim[data-animation="scale-in"] [data-reveal].is-visible { opacity: 1; transform: scale(1); }
html.js-anim[data-animation="slide-in"] [data-reveal] { opacity: 0; transform: translateX(-28px); transition: opacity 0.6s ease, transform 0.6s ease; }
html.js-anim[data-animation="slide-in"] [data-reveal].is-visible { opacity: 1; transform: translateX(0); }

html[data-template="modern"] {
  --radius: 16px;
  --shadow: 0 10px 30px rgba(17, 24, 39, 0.14);
}
html[data-template="modern"] .hero {
  background: radial-gradient(ellipse at top right, var(--brand-red-dark) 0%, var(--brand-red) 55%, var(--brand-red) 100%);
}
html[data-template="modern"] .hero::after {
  content: ""; position: absolute; right: -80px; bottom: -120px; width: 320px; height: 320px;
  border-radius: 50%; background: rgba(255,255,255,0.08); pointer-events: none;
}
html[data-template="modern"] .home-sec-gallery { order: 2; }
html[data-template="modern"] .home-sec-features { order: 3; }
html[data-template="modern"] .card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
html[data-template="modern"] .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

html[data-template="minimal"] {
  --radius: 4px;
  --shadow: none;
}
html[data-template="minimal"] .table-responsive,
html[data-template="minimal"] .form-card,
html[data-template="minimal"] .timeline {
  box-shadow: none;
  border: 1px solid var(--border);
}
html[data-template="minimal"] .hero {
  background: var(--ink);
}
html[data-template="minimal"] .hero p.lead { color: #d1d5db; }

html[data-template="bold"] {
  --radius: 8px;
  --shadow: 0 14px 34px rgba(17, 24, 39, 0.22);
  --btn-text-transform: uppercase;
  --btn-letter-spacing: 0.5px;
}
html[data-template="bold"] .hero {
  background: linear-gradient(115deg, var(--brand-red) 0%, var(--brand-red-dark) 60%, var(--ink) 130%);
  clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
  padding-bottom: 120px;
}
html[data-template="bold"] .home-sec-steps { order: 1; }
html[data-template="bold"] .home-sec-stats { order: 2; }
html[data-template="bold"] .home-sec-features { order: 3; }
html[data-template="bold"] .card:hover { transform: scale(1.03); transition: transform 0.2s ease; }

html[data-template="corporate"] {
  --radius: 6px;
  --shadow: 0 6px 20px rgba(17, 24, 39, 0.10);
  --font-heading: Georgia, "Times New Roman", Times, serif;
}
html[data-template="corporate"] .hero {
  background: var(--brand-red-dark);
  border-bottom: 4px solid var(--brand-yellow);
}
html[data-template="corporate"] .home-sec-operate { order: 5; }
html[data-template="corporate"] .home-sec-gallery { order: 3; }

html[data-template="dark-header"] {
  --header-bg: var(--ink);
  --header-ink: #ffffff;
  --header-link: #d1d5db;
}
html[data-template="dark-header"] .main-nav a:hover,
html[data-template="dark-header"] .main-nav a.active {
  color: var(--brand-yellow);
  border-bottom-color: var(--brand-yellow);
}
html[data-template="dark-header"] .nav-menu-btn { border-color: rgba(255,255,255,0.35); }
html[data-template="dark-header"] .nav-menu-btn:hover { border-color: #ffffff; }
html[data-template="dark-header"] .hero {
  background: linear-gradient(180deg, var(--ink) 0%, #1f2937 100%);
}
html[data-template="dark-header"] .hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.08) 1.5px, transparent 1.5px);
  background-size: 22px 22px; pointer-events: none;
}
html[data-template="dark-header"] .home-sec-stats { order: 5; }
html[data-template="dark-header"] .home-sec-gallery { order: 1; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* System Health page (admin/health.php), a plain-English install check. */
.health-summary { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; }
.health-pill {
  font-size: 12.5px; font-weight: 700; padding: 6px 12px;
  border-radius: 999px; border: 1px solid var(--border); background: var(--bg-soft);
}
.health-pill-ok { color: var(--ok); border-color: var(--ok); }
.health-pill-warn { color: var(--warn); border-color: var(--warn); }
.health-pill-fail { color: var(--danger); border-color: var(--danger); }

.health-list { display: flex; flex-direction: column; gap: 10px; max-width: 860px; }
.health-item {
  border: 1px solid var(--border); border-left-width: 4px;
  border-radius: var(--radius); background: var(--white); padding: 14px 16px;
}
.health-item-ok { border-left-color: var(--ok); }
.health-item-warn { border-left-color: var(--warn); }
.health-item-fail { border-left-color: var(--danger); }
.health-item-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.health-item-head strong { font-size: 14.5px; color: var(--ink); }
.health-badge {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.6px;
  padding: 3px 8px; border-radius: 4px; color: #fff; flex-shrink: 0;
}
.health-badge-ok { background: var(--ok); }
.health-badge-warn { background: var(--warn); }
.health-badge-fail { background: var(--danger); }
.health-item-detail { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; }
.health-item-fix {
  margin-top: 8px; padding: 9px 11px; background: var(--bg-soft);
  border-radius: var(--radius); font-size: 13px; color: var(--ink-soft); line-height: 1.55;
}

/* ---------------------------------------------------------------
   Tracking page: company logo band, sender and receiver cards.

   The two party cards are told apart by contrast alone, not by hue. Both
   are grey: the sender is the lighter of the pair, the receiver the darker
   and heavier one, since the person tracking is usually the receiver. That
   keeps the pair neutral under every colour palette, and it still reads
   for anyone who cannot distinguish colours.

   They stay side by side at every width. The columns are allowed to shrink
   (min-width: 0) and the label/value pairs stack inside each card on small
   screens, so two narrow columns still fit a phone without the page
   scrolling sideways.
   --------------------------------------------------------------- */
.tracking-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  margin-bottom: 18px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.tracking-brand img {
  border-radius: 6px;
  flex: none;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
.tracking-brand strong { display: block; font-size: 17px; color: var(--ink); line-height: 1.25; }
.tracking-brand span { display: block; font-size: 12.5px; color: var(--muted); }

.parties {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 14px;
  margin: 0 0 20px;
}
.party {
  min-width: 0;                /* lets a column shrink below its content */
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}

/* Lighter of the two. */
.party-sender {
  border-left: 4px solid var(--muted);
}
/* Darker and heavier, with a tinted fill so the difference survives even
   when the two cards are not next to each other on screen. */
.party-receiver {
  background: #f9fafb;
  border-left: 4px solid var(--ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

.party-tag {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: var(--muted);
}
.party-receiver .party-tag { color: var(--ink); }

.party-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 10px;
  overflow-wrap: anywhere;
}

.party-lines { margin: 0; display: grid; grid-template-columns: 74px 1fr; gap: 4px 10px; }
.party-lines dt {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  padding-top: 1px;
}
.party-lines dd {
  margin: 0;
  font-size: 14px;
  color: var(--ink);
  overflow-wrap: anywhere;     /* long emails cannot widen the column */
}

.party-arrow {
  align-self: center;
  font-size: 22px;
  color: var(--muted);
  padding: 0 2px;
}

@media (max-width: 760px) {
  .parties { gap: 8px; }
  .party { padding: 12px 12px; }
  .party-tag { font-size: 10.5px; letter-spacing: .4px; }
  .party-name { font-size: 15px; margin-bottom: 8px; }
  /* Label above value: a 74px label column plus an address does not fit
     two-across on a phone. */
  .party-lines { grid-template-columns: 1fr; gap: 1px; }
  .party-lines dt { font-size: 10.5px; padding-top: 5px; }
  .party-lines dd { font-size: 13px; }
  .party-arrow { font-size: 16px; padding: 0; }
}

@media (max-width: 400px) {
  .parties { gap: 6px; }
  .party { padding: 10px 9px; }
  .party-tag { font-size: 9.5px; }
  .party-name { font-size: 13.5px; }
  .party-lines dt { font-size: 9.5px; }
  .party-lines dd { font-size: 12px; }
  .party-arrow { font-size: 13px; }
}

/* ---------------------------------------------------------------
   Tracking page: the full update history table at the bottom, shown
   when a super admin has it switched on. The short timeline beside the
   map stays either way; this is the fuller dated record.
   --------------------------------------------------------------- */
.update-history { margin: 28px 0 10px; }
.update-history h3 { margin: 0 0 4px; font-size: 18px; }
.update-history-lead { margin: 0 0 14px; color: var(--muted); font-size: 14px; }
.update-history-table { table-layout: auto; }
.update-history-table td { vertical-align: top; }
/* .data-table pins its last column to 90px for a row-actions button. This
   table's last column is the remark, which needs the room instead, so the
   width rule is undone and the columns are shared out deliberately. */
.update-history-table th:last-child,
.update-history-table td:last-child { width: auto; }
.update-history-table th:nth-child(1) { width: 170px; }
.update-history-table th:nth-child(2) { width: 150px; }
.update-history-table th:nth-child(3) { width: 30%; }

/* The tracking number in the Shipments list is a link into Add Update.
   Styled as ordinary text until hovered, so the table does not turn into a
   wall of blue, but with an underline on hover so it is discoverable. */
.tracking-link { color: inherit; text-decoration: none; }
.tracking-link:hover,
.tracking-link:focus { color: var(--brand-red); text-decoration: underline; }

/* ---------------------------------------------------------------
   Stop mobile browsers zooming in when a form field is tapped.
   iOS and Android auto-zoom into any text field whose font is smaller
   than 16px, and that zoom is what made the contact and Ship Now forms
   look like they overflowed the moment a field was focused. Sixteen
   pixels on touch-sized screens removes the trigger. Pinch-to-zoom is
   untouched, so nothing is lost for accessibility.
   --------------------------------------------------------------- */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  input[type="search"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  select,
  textarea,
  .form-group input,
  .form-group select,
  .form-group textarea,
  .track-form input[type="text"] {
    font-size: 16px;
  }
}