/* =========================================================
   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-track{
  width: 100% !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 18px 14px !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;
}

/* If any old/extra markup is accidentally printed inside dx-track, hide it */
.dx-track > *: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 */
.dx-card--map{ padding: 14px !important; }

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

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

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

.dx-progressFill{
  height: 100% !important;
  width: 18% !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg,#2b6cff,#22c55e,#f59e0b) !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: 360px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.04) !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 span{
  display:block !important;
  width:16px !important;
  height:16px !important;
  border-radius:50% !important;
  border: 2px solid rgba(255,255,255,.85) !important;
  box-shadow: 0 10px 20px rgba(0,0,0,.35) !important;
}
.dx-pin--origin span{ background:#2b6cff !important; }
.dx-pin--current span{ background:#22c55e !important; }
.dx-pin--dest span{ background:#f59e0b !important; }

/* 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: 28px !important;
  height: 28px !important;
  border-radius: 999px !important;
  background: rgba(7,12,20,.85) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color: #22c55e !important;
  animation: dxPulse 1.2s 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; }
}

@media (max-width: 640px){
  .dx-track{ padding: 14px 10px !important; }
  .dx-hero{ padding: 18px 14px !important; }
  .dx-hero h2{ font-size: 24px !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: 150px !important; }
}