/* gis-logistics.css - frontend styling inspired by your sample layout */

/* page background */
.gis-tracking-page { width:100%; box-sizing:border-box; }

/* centered container */
.gis-container {
  max-width: 1140px;
  margin: 0 auto;
  color: #f3f7f8;
  font-family: "Inter", "Roboto", Arial, sans-serif;
}

/* Header card */
.gis-header-card {
  display:flex;
  justify-content:space-between;
  align-items:center;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border-radius:8px;
  padding:18px 20px;
  box-shadow: inset 0 -2px 0 rgba(255,255,255,0.02);
}
.gis-header-left { display:flex; flex-direction:column; gap:8px; }
.gis-header-top { display:flex; align-items:center; gap:18px; }
.gis-header-small { font-size:14px; opacity:0.9; color:#dbe9ee; }
.gis-track-number { font-size:26px; font-weight:800; color:#ffffff; display:flex; gap:12px; align-items:center; }
.gis-verified { background:rgba(255,255,255,0.12); color:#fff; padding:6px 10px; border-radius:12px; font-weight:700; font-size:13px; }
.gis-header-bottom { display:flex; gap:18px; align-items:center; color:#d7edf0; }
.gis-current-status strong { margin-left:8px; font-size:18px; color:#fff; }
.gis-last-updated { font-size:13px; opacity:0.9; }

/* back button */
.gis-back-home { display:inline-block; color:#073b43; background:#fff; padding:10px 14px; border-radius:8px; text-decoration:none; font-weight:700; }

/* section title */
.gis-section-title { margin:18px 0 12px 6px; color:#e7f2f4; font-size:18px; font-weight:700; }

/* Contact row */
.gis-contact-row { display:flex; gap:18px; }
.gis-contact-card {
  flex:1;
  background:rgba(255,255,255,0.95);
  color:#22323a;
  padding:16px;
  border-radius:10px;
  box-shadow:0 10px 20px rgba(0,0,0,0.08);
}
.gis-contact-icon { font-size:20px; opacity:0.7; display:inline-block; margin-bottom:6px; }
.gis-contact-title { font-weight:700; font-size:16px; margin-bottom:8px; }
.gis-contact-line { font-size:14px; margin-bottom:6px; color:#22323a; }

/* urgent (expanding) */
.gis-urgent { margin:14px 0; padding:10px 14px; border-radius:8px; color:#fff; font-weight:700; text-align:center; }
.gis-urgent-empty { height:0; margin:12px 0; }

/* progress */
.gis-progress-wrap { padding:12px 14px; border-radius:10px; box-shadow:0 10px 20px rgba(0,0,0,0.04); background:transparent; }
.gis-progress-pill-row { display:flex; gap:12px; align-items:center; padding:6px 2px; }
.gis-pill { flex:1; max-width:100%; }
.gis-pill .gis-pill-inner {
  display:flex;
  align-items:center;
  gap:12px;
  background:rgba(255,255,255,0.07);
  border-radius:999px;
  padding:10px 14px;
  color:#e7f2f4;
}
.gis-pill .gis-pill-icon { width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.12);font-weight:800;color:#fff; }
.gis-pill.active .gis-pill-inner { background: linear-gradient(90deg, rgba(96,195,107,0.95), rgba(60,180,120,0.95)); color:#ffffff; }
.gis-pill.active .gis-pill-icon { background: rgba(255,255,255,0.18); }
.gis-pill .gis-pill-text { font-weight:700; font-size:14px; }

/* progress line */
.gis-progress-line { height:8px; background: rgba(255,255,255,0.06); margin-top:12px; border-radius:8px; position:relative; overflow:hidden; }
.gis-progress-fill { height:100%; width:0; background:#60c36b; border-radius:8px; transition:width .6s ease; }

/* history + map */
.gis-history-map { display:flex; gap:18px; margin-top:12px; align-items:flex-start; }
.gis-history { flex:0 0 30%; background:rgba(255,255,255,0.04); border-radius:10px; padding:14px; color:#dfeff1; min-height:260px; max-height:420px; overflow:auto; }
.gis-history h4 { margin-top:0; color:#e7f2f4; }
.gis-history-list { list-style:none; padding:0; margin:6px 0; }
.gis-history-list li { display:flex; gap:10px; align-items:flex-start; padding:8px 0; border-bottom:1px dashed rgba(255,255,255,0.03); }
.gis-history-list li .dot { width:10px; height:10px; background:#60c36b; border-radius:50%; margin-top:8px; }
.gis-history-list li .gis-small { color:#cfe6e8; font-size:13px; margin-top:4px; }

/* map */
.gis-map { flex:0 0 70%; min-height:260px; background:#ffffff; border-radius:10px; overflow:hidden; box-shadow:0 8px 18px rgba(0,0,0,0.06); }

/* parcel / 12-grid */
.gis-parcel { margin-top:18px; background:rgba(255,255,255,0.95); border-radius:12px; padding:18px; box-shadow:0 12px 30px rgba(0,0,0,0.07); color:#22323a; }
.gis-12-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; margin-top:12px; }
.gis-12-item { background:#f8fbfc; border-radius:8px; padding:14px; text-align:center; min-height:78px; display:flex; flex-direction:column; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,0.03); }
.gis-12-label { font-size:13px; color:#6a7d83; margin-bottom:8px; font-weight:700; }
.gis-12-value { font-size:15px; font-weight:800; color:#22323a; }

/* actions */
.gis-parcel-actions { margin-top:16px; display:flex; gap:12px; align-items:center; }
.gis-btn { padding:12px 18px; border-radius:10px; cursor:pointer; font-weight:800; color:#fff; border:none; text-decoration:none; display:inline-block; }
.gis-btn.print { background:#ffffff; color:#22323a; border:1px solid #d4dce0; }

/* responsive */
@media (max-width: 1024px) {
  .gis-12-grid { grid-template-columns: repeat(2, 1fr); }
  .gis-contact-row { flex-direction:column; }
  .gis-history-map { flex-direction:column; }
  .gis-history { max-height:300px; }
  .gis-map { min-height:300px; }
}