/* === Tracker form styling (match card look) === */
.apex-tracker-widget { max-width:760px; margin:0 auto; }
.apx-form { background:#fff; border:1px solid #eef2f7; border-radius:12px; padding:14px; box-shadow:0 8px 30px rgba(3,3,3,.04); display:flex; gap:12px; align-items:center; }
.apx-row { display:flex; gap:12px; width:100%; align-items:center; }
#apex-awb { flex:1; padding:12px 14px; border-radius:10px; border:1px solid #e6eef6; font-size:1rem; box-shadow:inset 0 1px 0 rgba(255,255,255,.6); }
.apx-btn, #apex-track-btn { background:#c21b22; color:#fff; padding:11px 18px; border-radius:10px; border:none; font-weight:700; cursor:pointer; box-shadow:0 8px 24px rgba(194,27,34,.12); }

/* === Modern result card === */
.apx-result-card { border:1px solid #eef2f7; border-radius:12px; padding:14px; background:linear-gradient(180deg,#fff 0,#fffaf9 100%); box-shadow:0 10px 30px rgba(3,3,3,.05); font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial; max-width:760px; margin:12px 0; }
.apx-card-top { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px; }
.apx-awb { font-weight:700; font-size:1.02rem; color:#0b1220; }
.apx-route.small { color:#6b7280; font-size:.95rem; margin-top:4px; }
.apx-status { font-weight:800; padding:8px 12px; border-radius:999px; display:inline-block; font-size:.95rem; }
.apx-status-delivered { background:linear-gradient(90deg,#1ea84d,#0ea65f); color:#fff; }
.apx-status-out { background:linear-gradient(90deg,#ffb020,#ff8a00); color:#111; }
.apx-status-issue { background:linear-gradient(90deg,#ff4757,#ff2e3d); color:#fff; }

/* Entities row: shipper & receiver side-by-side */
.apx-entities { display:flex; gap:20px; align-items:flex-start; margin-bottom:14px; }
.apx-entity { flex:1; min-width:0; background:transparent; padding:6px 0; }
.apx-entity-title { color:#6b7280; font-size:.82rem; margin-bottom:6px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; }
.apx-entity-name { font-size:1rem; color:#0b1220; font-weight:700; }
.apx-phone { color:#6b7280; font-weight:600; font-size:.93rem; margin-left:6px; }
.apx-entity-addr { margin-top:8px; color:#374151; font-size:.94rem; line-height:1.3; }

/* Meta row with status and cod on left, CTA on right */
.apx-meta { display:flex; justify-content:space-between; align-items:center; gap:12px; border-top:1px solid #f1f5f9; padding-top:12px; margin-top:6px; }
.apx-meta-left { display:flex; gap:18px; align-items:center; }
.apx-meta-item { min-width:120px; }
.apx-meta-item strong { display:block; color:#6b7280; font-size:.82rem; margin-bottom:6px; }
.apx-meta-val { font-weight:800; color:#111; font-size:1.02rem; }

/* CTA */
.apx-cta { background:#0b66ff; color:#fff; padding:10px 16px; border-radius:10px; font-weight:800; text-decoration:none; box-shadow:0 10px 28px rgba(11,102,255,.12); }
.apx-cta:hover { transform:translateY(-2px); transition:transform .12s ease; }

/* Responsive tweaks */
@media (max-width:720px) {
  .apx-entities { flex-direction:column; gap:10px; }
  .apx-meta { flex-direction:column; align-items:flex-start; gap:8px; }
  .apx-meta-right { width:100%; display:flex; justify-content:flex-start; }
  .apx-right { text-align:left; }
}
/* Hide any accidental duplicate search form that may appear inside results */
#apex-track-result .apx-form,
.apx-result .apx-form {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Center the result popup */
#apex-track-result,
.apx-result {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  margin-top: 20px;
}

/* Inner card styling */
.apx-result-card {
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.08);
  padding: 25px 35px;
  max-width: 600px;
  width: 100%;
  font-family: 'Inter', 'Segoe UI', sans-serif;
  animation: fadeIn 0.3s ease;
}

/* Center align text elements smartly */
.apx-result-card h3 {
  text-align: center;
  font-size: 1.4rem;
  color: #333;
  margin-bottom: 1rem;
}

.apx-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 10px;
}

/* Make left/right columns consistent */
.apx-col {
  flex: 1;
}

/* CTA button centered below result */
.apx-result-card .apx-cta {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.apx-btn-cta {
  background-color: #e21b2d;
  color: #fff;
  border: none;
  padding: 10px 22px;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.25s ease;
}

.apx-btn-cta:hover {
  background-color: #c01425;
}

/* Subtle entrance animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
