/* =========================================================
   Dumanic Tracking — HARD RESET inside .dx-track
   Purpose: stop theme/Elementor CSS from breaking layout.
   ========================================================= */

.dx-track,
.dx-track *{
  box-sizing: border-box !important;
}

.dx-tracking-page-wrapper,
.tracking-page-wrapper{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 5 !important;
}

/* Public lookup — theme background shows through wrapper */
.dx-tracking-page-wrapper .dx-track.dx-track--lookup{
  background: transparent !important;
}

.dx-track{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 18px 5vw !important;
  overflow-x: hidden !important;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  color: rgba(255,255,255,.92) !important;
  position: relative !important;
  z-index: 5 !important;
  box-sizing: border-box !important;
}

/* Client dashboard shipment view — no extra side padding (handled by .dx-app-content) */
.dx-track.dx-logistics-track,
.dx-app-content .dx-track.dx-logistics-track{
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

@media (min-width: 1200px){
  .dx-track:not(.dx-logistics-track){
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Public lookup page only — hide stray markup */
.dx-track.dx-track--lookup > *:not(.dx-hero):not(.dx-results){
  display: none !important;
}

/* -----------------------------------------
   HERO (form area)
------------------------------------------ */
.dx-hero{
  width: 100% !important;
  padding: 22px 18px !important;
  border-radius: 18px !important;
  background: rgba(7, 12, 20, .78) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  backdrop-filter: blur(10px) !important;
}

.dx-hero h2{
  margin: 0 0 8px !important;
  font-size: 30px !important;
  line-height: 1.15 !important;
  color: rgba(255,255,255,.95) !important;
}

.dx-hero p{
  margin: 0 0 14px !important;
  color: rgba(255,255,255,.72) !important;
}

/* Form */
.dx-form label{
  display: block !important;
  margin-bottom: 8px !important;
  font-weight: 800 !important;
  color: rgba(255,255,255,.90) !important;
}

.dx-formRow{
  display: flex !important;
  gap: 10px !important;
  align-items: stretch !important;
  width: 100% !important;
}

.dx-form input{
  flex: 1 !important;
  min-width: 0 !important;
  height: 46px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
  outline: none !important;
  box-shadow: none !important;
}

.dx-form input::placeholder{
  color: rgba(255,255,255,.55) !important;
}

.dx-form input:focus{
  border-color: rgba(43,108,255,.65) !important;
}

.dx-form button{
  height: 46px !important;
  padding: 0 18px !important;
  border-radius: 12px !important;
  border: 0 !important;
  background: #e11d48 !important;
  color: #fff !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

.dx-form button:hover{ filter: brightness(1.08) !important; }

.dx-form small{
  display: block !important;
  margin-top: 8px !important;
  color: rgba(255,255,255,.60) !important;
}

.dx-alert{
  margin-top: 12px !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  background: rgba(225, 29, 72, .16) !important;
  border: 1px solid rgba(225, 29, 72, .40) !important;
}

.dx-hide{ display: none !important; }

/* -----------------------------------------
   RESULTS AREA
------------------------------------------ */
.dx-results{
  width: 100% !important;
  margin-top: 14px !important;
}

.dx-topbar{
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
  align-items: flex-end !important;
  margin: 12px 0 !important;
}

.dx-topbar h3{
  margin: 0 !important;
  font-size: 22px !important;
}

.dx-status{
  text-align: right !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  background: rgba(7, 12, 20, .78) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}

.dx-status span{
  display: block !important;
  color: rgba(255,255,255,.55) !important;
  font-size: 12px !important;
}
.dx-status strong{
  display: block !important;
  font-size: 16px !important;
}

.dx-pills{
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin-top: 10px !important;
}

.dx-pill{
  padding: 8px 10px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.07) !important;
  font-size: 13px !important;
}
.dx-pill strong{ margin-right: 6px !important; }

/* Grid layout */
.dx-grid{
  display: grid !important;
  grid-template-columns: 1.35fr 0.85fr !important;
  gap: 14px !important;
  width: 100% !important;
}

.dx-card{
  background: rgba(7, 12, 20, .78) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 18px !important;
  backdrop-filter: blur(10px) !important;
  overflow: hidden !important;
}

/* Map card — no extra empty height below map */
.dx-card--map{
  padding: 14px !important;
  min-height: 0 !important;
  height: auto !important;
  margin-bottom: 12px !important;
}

.dx-progressRow--logistics{
  margin-bottom: 10px !important;
}

.dx-progressHead,
.dx-progressFoot{
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 10px !important;
}

.dx-progressFoot--triple{
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 8px !important;
}

.dx-progressFoot__current{
  text-align: center !important;
  font-size: 12px !important;
}

/* Location names render on map markers only */
.dx-route-locations{
  display: none !important;
}

/* Marker + label inside map canvas */
.dx-pin-labeled-wrap{
  background: transparent !important;
  border: none !important;
}

.dx-marker-labeled{
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

.dx-marker-labeled .dx-pin-dot{
  flex-shrink: 0 !important;
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
}

.shipment-map-label,
.leaflet-tooltip.shipment-map-label{
  display: inline-block !important;
  padding: 4px 9px !important;
  border-radius: 8px !important;
  background: rgba(7, 12, 20, 0.88) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
  white-space: nowrap !important;
  max-width: 140px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.dx-marker-labeled.dx-pin--current .shipment-map-label{
  border-color: rgba(34, 197, 94, 0.45) !important;
}

.dx-marker-labeled.dx-pin--origin .shipment-map-label{
  border-color: rgba(43, 108, 255, 0.45) !important;
}

.dx-marker-labeled.dx-pin--dest .shipment-map-label{
  border-color: rgba(245, 158, 11, 0.45) !important;
}

/* Route lines on map */
.leaflet-overlay-pane path.dx-route-main,
.leaflet-overlay-pane path.dx-route-done,
.leaflet-overlay-pane path.dx-route-remaining,
.leaflet-dxRoutePane-pane path.dx-route-main,
.leaflet-dxRoutePane-pane path.dx-route-done,
.leaflet-dxRoutePane-pane path.dx-route-remaining{
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.leaflet-overlay-pane path.dx-route-main,
.leaflet-dxRoutePane-pane path.dx-route-main{
  filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.75)) !important;
}

.leaflet-overlay-pane path.dx-route-done,
.leaflet-dxRoutePane-pane path.dx-route-done{
  filter: drop-shadow(0 0 7px rgba(34, 197, 94, 0.9)) !important;
}

.leaflet-overlay-pane path.dx-route-remaining,
.leaflet-dxRoutePane-pane path.dx-route-remaining{
  filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.75)) !important;
}

.leaflet-overlay-pane path.dx-route-glow,
.leaflet-dxRoutePane-pane path.dx-route-glow{
  stroke-linecap: round !important;
}

/* Blinking flight / transit at current location */
.dx-flight-marker{
  background: transparent !important;
  border: none !important;
}

.dx-flight-icon-wrap{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  pointer-events: none !important;
}

.dx-flight-icon--blink .dx-transit--live{
  animation: dxFlightBlink 1.2s ease-in-out infinite !important;
  border-color: rgba(0, 212, 255, 0.7) !important;
  color: #00d4ff !important;
  box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.45), 0 0 18px rgba(0, 212, 255, 0.35) !important;
}

.dx-flight-icon--blink .dx-transit--live svg{
  transform: rotate(var(--dx-rot, 0deg)) !important;
  transform-origin: 50% 50% !important;
}

@keyframes dxFlightBlink{
  0%, 100%{
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.5), 0 8px 20px rgba(0, 0, 0, 0.35);
  }
  50%{
    opacity: 0.55;
    transform: scale(1.12);
    box-shadow: 0 0 0 10px rgba(0, 212, 255, 0), 0 8px 20px rgba(0, 0, 0, 0.35);
  }
}

/* Package / status polish */
.dx-topbar{
  padding: 18px 18px !important;
  border-radius: 16px !important;
  background: rgba(7,12,20,.82) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  margin-bottom: 12px !important;
}

.dx-status strong{
  display: inline-block !important;
  margin-top: 6px !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  background: rgba(34,197,94,.14) !important;
  border: 1px solid rgba(34,197,94,.35) !important;
  font-size: 13px !important;
}

.dx-packageTop{
  gap: 14px !important;
}

.dx-card--package,
.dx-card--sr,
.dx-card--history{
  transition: border-color .2s ease, box-shadow .2s ease !important;
}

.dx-card--package:hover,
.dx-card--sr:hover,
.dx-card--history:hover{
  border-color: rgba(255,255,255,.16) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.22) !important;
}

.dx-step{
  border-radius: 12px !important;
  padding: 4px 0 !important;
}

.dx-step--current .dx-step__body{
  background: rgba(34,197,94,.06) !important;
  border: 1px solid rgba(34,197,94,.2) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
}

.dx-progressLabel{
  font-size: 12px !important;
  color: rgba(255,255,255,.55) !important;
  font-weight: 800 !important;
}

.dx-progress{
  position: relative !important;
  height: 10px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.10) !important;
  overflow: visible !important;
  margin: 10px 0 12px !important;
}

.dx-progressFill{
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  height: 100% !important;
  width: 0;
  min-width: 0 !important;
  max-width: 100% !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg,#2b6cff 0%,#22c55e 55%,#f59e0b 100%) !important;
  transition: width .65s cubic-bezier(.4,0,.2,1) !important;
  box-shadow: 0 0 12px rgba(34,197,94,.35) !important;
  z-index: 1 !important;
}

.dx-progressMarker{
  position: absolute !important;
  top: 50% !important;
  left: 0;
  width: 16px !important;
  height: 16px !important;
  margin-left: -8px !important;
  transform: translateY(-50%) !important;
  border-radius: 999px !important;
  background: #22c55e !important;
  border: 2px solid rgba(255,255,255,.9) !important;
  box-shadow: 0 0 0 4px rgba(34,197,94,.28), 0 0 16px rgba(34,197,94,.55) !important;
  transition: left .65s cubic-bezier(.4,0,.2,1) !important;
  z-index: 2 !important;
  pointer-events: none !important;
  animation: dxProgressMarkerPulse 1.6s ease-in-out infinite !important;
}

@keyframes dxProgressMarkerPulse{
  0%, 100%{
    box-shadow: 0 0 0 4px rgba(34,197,94,.28), 0 0 16px rgba(34,197,94,.55);
    transform: translateY(-50%) scale(1);
  }
  50%{
    box-shadow: 0 0 0 8px rgba(34,197,94,0), 0 0 20px rgba(34,197,94,.75);
    transform: translateY(-50%) scale(1.08);
  }
}

.dx-progressPct{
  font-size: 12px !important;
  font-weight: 900 !important;
  color: #22c55e !important;
  text-align: center !important;
  margin-top: 6px !important;
}

.dx-thumb-placeholder{
  font-size: 12px !important;
  color: rgba(255,255,255,.55) !important;
  text-align: center !important;
  padding: 8px !important;
}

.dx-muted{ color: rgba(255,255,255,.65) !important; font-size: 13px !important; }
.dx-right{ text-align: right !important; }

.dx-map{
  width: 100% !important;
  height: 300px !important;
  min-height: 0 !important;
  max-height: 52vh !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: #0f172a !important;
  position: relative !important;
  z-index: 1 !important;
  margin: 0 !important;
}

.dx-map .leaflet-container{
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  font-family: inherit !important;
  background: #0f172a !important;
}

.dx-mapLegend{
  margin-top: 8px !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.dx-map .leaflet-pane,
.dx-map .leaflet-map-pane,
.dx-map .leaflet-marker-pane,
.dx-map .leaflet-overlay-pane{
  z-index: auto !important;
}

.dx-map .leaflet-marker-icon,
.dx-map .leaflet-div-icon{
  background: transparent !important;
  border: none !important;
}

.dx-mapLegend{
  display: flex !important;
  gap: 14px !important;
  align-items: center !important;
  margin-top: 10px !important;
  color: rgba(255,255,255,.75) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}
.dx-mapLegend span{ display:flex !important; align-items:center !important; gap:8px !important; }

.dx-dot{ width:10px !important; height:10px !important; border-radius:50% !important; display:inline-block !important; }
.dx-dot--from{ background:#2b6cff !important; }
.dx-dot--current{ background:#22c55e !important; }
.dx-dot--to{ background:#f59e0b !important; }

/* Side column */
.dx-side{ display:flex !important; flex-direction:column !important; gap:14px !important; }

.dx-card--package{ padding:14px !important; }
.dx-packageTop{ display:flex !important; gap:12px !important; align-items:stretch !important; }

.dx-thumb{
  width: 110px !important;
  height: 90px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.07) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
}
.dx-thumb img{ width:100% !important; height:100% !important; object-fit:cover !important; }
.dx-thumb span{ font-size:12px !important; color: rgba(255,255,255,.55) !important; }

.dx-packageMeta h4{ margin:0 0 8px !important; font-size:16px !important; }
.dx-kv{ display:flex !important; justify-content:space-between !important; gap:10px !important; margin:6px 0 !important; }
.dx-kv span{ color: rgba(255,255,255,.55) !important; font-size:12px !important; }
.dx-kv strong{ font-size:13px !important; }

/* Sender/Receiver */
.dx-card--sr{ padding:14px !important; }
.dx-card--sr h4{ margin:0 0 10px !important; font-size:16px !important; }

.dx-srGrid{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:10px !important; }
.dx-srBox{
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.06) !important;
  border-radius: 14px !important;
  padding: 12px !important;
}
.dx-srTitle{
  font-size: 11px !important;
  color: rgba(255,255,255,.55) !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
  margin-bottom: 6px !important;
}

/* History */
.dx-card--history{ padding:14px !important; }
.dx-cardHead{ display:flex !important; justify-content:space-between !important; align-items:center !important; margin-bottom:10px !important; }
.dx-card--history h4{ margin:0 !important; font-size:16px !important; }

.dx-timeline{ list-style:none !important; margin:0 !important; padding:0 !important; display:flex !important; flex-direction:column !important; gap:10px !important; }
.dx-step{
  display:flex !important;
  gap:10px !important;
  padding:12px !important;
  border-radius:16px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.05) !important;
}
.dx-step__dot{
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.28) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.10) !important;
  flex: 0 0 10px !important;
  margin-top: 6px !important;
}
.dx-step--current .dx-step__dot{
  background: #22c55e !important;
  box-shadow: 0 0 0 3px rgba(34,197,94,.25), 0 0 14px rgba(34,197,94,.35) !important;
}

.dx-step__top{ display:flex !important; justify-content:space-between !important; gap:10px !important; }
.dx-step__time{ color: rgba(255,255,255,.55) !important; font-size:12px !important; }

.dx-step__meta{ margin-top: 10px !important; }
.dx-chip{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.07) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}
.dx-chip--current{
  border-color: rgba(34,197,94,.4) !important;
  background: rgba(34,197,94,.12) !important;
}

.dx-step__remarks{
  margin-top: 10px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  line-height: 1.45 !important;
  white-space: normal !important;
  word-break: break-word !important;
}

/* Map pins */
.dx-pin-dot{
  display:block !important;
  width:18px !important;
  height:18px !important;
  border-radius:50% !important;
  background: var(--dx-pin-color, #2b6cff) !important;
  border: 3px solid #fff !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.45) !important;
  margin: 5px auto !important;
}

.dx-pin-dot--pulse{
  animation: dxPinPulse 1.4s ease-in-out infinite !important;
}

@keyframes dxPinPulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(34,197,94,.55), 0 4px 14px rgba(0,0,0,.45); transform: scale(1); }
  50%{ box-shadow: 0 0 0 12px rgba(34,197,94,0), 0 4px 14px rgba(0,0,0,.45); transform: scale(1.15); }
}

.dx-pin--origin .dx-pin-dot{ background:#2b6cff !important; }
.dx-pin--current .dx-pin-dot{ background:#22c55e !important; }
.dx-pin--dest .dx-pin-dot{ background:#f59e0b !important; }

.dx-progressFill--complete{
  background: linear-gradient(90deg,#22c55e,#16a34a) !important;
}

.dx-map-popup-wrap .leaflet-popup-content-wrapper{
  background: rgba(7,12,20,.95) !important;
  color: #fff !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}

.dx-map-popup strong{ font-size: 13px !important; }

.dx-progressLabel--center#dxProgressPhaseLabel,
#dxProgressPhaseLabel{
  color: #22c55e !important;
  font-weight: 900 !important;
  text-transform: capitalize !important;
  transition: color .35s ease, text-shadow .35s ease !important;
}

#dxProgressPhaseLabel.dx-progressLabel--live{
  color: #4ade80 !important;
  text-shadow: 0 0 14px rgba(74,222,128,.55) !important;
  animation: dxProgressLabelGlow 1.8s ease-in-out infinite !important;
}

#dxProgressPhaseLabel.dx-progressLabel--done{
  color: #22c55e !important;
  text-shadow: none !important;
}

@keyframes dxProgressLabelGlow{
  0%, 100%{ opacity: 1; }
  50%{ opacity: .82; }
}

/* Tooltip labels */
.leaflet-tooltip.dx-maplabel{
  background: rgba(7,12,20,.88) !important;
  color: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 999px !important;
  padding: 6px 10px !important;
  font-weight: 900 !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.35) !important;
}

/* Transit icon */
.dx-transitWrap{ filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)) !important; }
.dx-transit{
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  background: rgba(7,12,20,.92) !important;
  border: 2px solid rgba(34,197,94,.55) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color: #22c55e !important;
  box-shadow: 0 0 0 6px rgba(34,197,94,.15), 0 8px 20px rgba(0,0,0,.35) !important;
}

.dx-transit--pulse{
  animation: dxPulse 1.1s ease-in-out infinite !important;
}
.dx-transit--road{ color:#f59e0b !important; }
.dx-transit--sea{ color:#60a5fa !important; }
.dx-transit--rail{ color:#a78bfa !important; }

.dx-transit svg{
  transform: rotate(var(--dx-rot, 0deg)) !important;
  transform-origin: 50% 50% !important;
}

@keyframes dxPulse{
  0%,100%{opacity:1; transform:scale(1)}
  50%{opacity:.55; transform:scale(1.12)}
}

/* -----------------------------------------
   Mobile fixes
------------------------------------------ */
@media (max-width: 980px){
  .dx-grid{ grid-template-columns: 1fr !important; }
  .dx-map{ height: 320px !important; }
  .dx-topbar{ flex-direction: column !important; align-items:flex-start !important; }
  .dx-status{ text-align:left !important; width:100% !important; }
}

/* =========================================================
   MOBILE FULL WIDTH — single 5vw gutter, no narrow center box
   ========================================================= */
@media (max-width: 768px){
  html,
  body{
    overflow-x: hidden !important;
  }

  .dx-tracking-page-wrapper,
  .tracking-page-wrapper,
  .dx-tracking-container,
  .tracking-container,
  .dx-track,
  .dx-track.dx-track--lookup,
  .dx-track.dx-logistics-track,
  .dx-results,
  .dx-grid,
  .dx-side,
  .dx-hero,
  .dx-form,
  .dx-topbar,
  .dx-card,
  .dx-card--map,
  .dx-card--package,
  .dx-card--sr,
  .dx-card--history{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  .dx-tracking-page-wrapper,
  .tracking-page-wrapper{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body:not(.dx-has-tracking) .dx-track,
  body:not(.dx-has-tracking) .dx-track.dx-track--lookup{
    padding-left: 5vw !important;
    padding-right: 5vw !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  body.dx-has-tracking .dx-tracking-page-wrapper{
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 5vw !important;
    padding-right: 5vw !important;
  }

  body.dx-has-tracking .dx-track.dx-track--lookup{
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  /* Dashboard shipment: gutter only on .dx-app-content (see tracking-page.css) */
  .dx-app-content .dx-track,
  .dx-app-content .dx-logistics-track{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .dx-results,
  .dx-grid,
  .dx-side,
  .dx-topbar,
  .dx-card,
  .dx-card--map,
  .dx-card--package,
  .dx-card--sr,
  .dx-card--history{
    border-radius: 16px !important;
  }

  .dx-card,
  .dx-topbar,
  .dx-hero{
    padding: 14px !important;
  }

  .dx-card--map{
    padding: 14px !important;
  }

  .dx-map,
  .dx-map .leaflet-container,
  .leaflet-container{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .dx-map{
    height: min(46vh, 320px) !important;
    min-height: 0 !important;
  }

  .shipment-map-label{
    max-width: 110px !important;
    font-size: 10px !important;
  }

  /* Elementor / theme containers must not squeeze shortcode */
  .elementor-section .elementor-container:has(.dx-track),
  .elementor-section .elementor-container:has(.dx-tracking-page-wrapper),
  .elementor-column:has(.dx-track),
  .elementor-column:has(.dx-tracking-page-wrapper),
  .elementor-widget-wrap:has(.dx-track),
  .elementor-widget-shortcode:has(.dx-track),
  .elementor-widget-shortcode:has(.dx-tracking-page-wrapper),
  .entry-content:has(.dx-track),
  .wp-block-shortcode:has(.dx-track){
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 640px){
  .dx-track,
  .dx-results,
  .dx-grid,
  .dx-side,
  .dx-card,
  .dx-hero,
  .dx-topbar{
    overflow-x: hidden !important;
  }

  .dx-timeline li{
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  .dx-hero h2{ font-size: 22px !important; }

  .dx-formRow{
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .dx-form button{ width: 100% !important; }

  .dx-srGrid{ grid-template-columns: 1fr !important; }
  .dx-packageTop{ flex-direction: column !important; }
  .dx-thumb{ width: 100% !important; height: 160px !important; }

  .dx-topbar{
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    margin-bottom: 10px !important;
  }
}

/* Elementor boxed layout — full bleed on public tracking pages */
body.dx-has-tracking{
  overflow-x: hidden !important;
}

/* Only widen containers that wrap the tracking shortcode — never the site footer */
body.dx-has-tracking .elementor-section .elementor-container:has(.dx-tracking-page-wrapper),
body.dx-has-tracking .elementor-section .elementor-container:has(.dx-track),
body.dx-has-tracking .e-con:has(.dx-tracking-page-wrapper),
body.dx-has-tracking .e-con:has(.dx-track),
body.dx-has-tracking .e-con-inner:has(.dx-tracking-page-wrapper),
body.dx-has-tracking .e-con-inner:has(.dx-track),
body.dx-has-tracking .elementor-widget-wrap:has(.dx-track),
body.dx-has-tracking .elementor-column > .elementor-element-populated:has(.dx-track),
body.dx-has-tracking .entry-content:has(.dx-track),
body.dx-has-tracking .wp-block-shortcode:has(.dx-track){
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

body.dx-has-tracking .dx-tracking-page-wrapper{
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: 5vw !important;
  padding-right: 5vw !important;
  box-sizing: border-box !important;
}

body.dx-has-tracking .dx-track.dx-track--lookup{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}