/* ============================================================
   TRACKING PAGE (public, client view)
   ============================================================ */
.pcg-track {
  font-family: inherit;
  color: #0B1B2F;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.pcg-track * {
  box-sizing: border-box;
}
.pcg-track a {
  color: #FF6A2B;
}
.pcg-track .wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: 8px 20px 56px;
}
.pcg-track .search-card {
  background: #FFFFFF;
  border: 1px solid rgba(11, 27, 47, 0.1);
  border-radius: 14px;
  padding: 28px;
  box-shadow: 0 1px 2px rgba(11, 27, 47, 0.06);
  margin: 8px 0 28px;
}
.pcg-track .search-card h2 {
  font-size: 22px;
  margin: 0 0 4px;
  font-weight: 700;
}
.pcg-track .search-card .sub {
  color: #5B6B7E;
  font-size: 14px;
  margin-bottom: 18px;
}
.pcg-track .search-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.pcg-track .search-row input {
  flex: 1 1 240px;
  min-width: 0;
  background: #fff;
  border: 1px solid rgba(11, 27, 47, 0.1);
  border-radius: 10px;
  padding: 13px 16px;
  font-size: 15px;
  color: #0B1B2F;
  font-family: inherit;
  transition: border-color 0.18s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pcg-track .search-row input::placeholder {
  color: #9AA7B5;
}
.pcg-track .search-row input:focus {
  outline: none;
  border-color: #FF6A2B;
  box-shadow: 0 0 0 3px rgba(255, 106, 43, 0.3);
}
.pcg-track .btn {
  background: #FF6A2B;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 13px 22px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pcg-track .btn:hover {
  background: #E2541C;
}
.pcg-track .btn:active {
  transform: translateY(1px);
}
.pcg-track .btn:focus-visible, .pcg-track a:focus-visible, .pcg-track input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 106, 43, 0.3);
}
.pcg-track .btn.ghost {
  background: transparent;
  border: 1px solid rgba(11, 27, 47, 0.1);
  color: #0B1B2F;
}
.pcg-track .btn.ghost:hover {
  background: #F4F6F9;
}
.pcg-track .helper {
  font-size: 13px;
  color: #5B6B7E;
  margin-top: 12px;
}
.pcg-track .helper .pcg-error {
  color: #DC2B3E;
}
.pcg-track main {
  display: block;
}
.pcg-track .status-banner {
  background: #E8F0FE;
  border: 1px solid rgb(202.675, 220.875, 252.725);
  color: #2563EB;
  border-radius: 10px;
  padding: 13px 18px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.pcg-track .status-banner .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2563EB;
}
.pcg-track .card {
  background: #FFFFFF;
  border: 1px solid rgba(11, 27, 47, 0.1);
  border-radius: 14px;
  padding: 24px 26px;
  margin-bottom: 18px;
  box-shadow: 0 1px 2px rgba(11, 27, 47, 0.06);
}
.pcg-track .card h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #5B6B7E;
  font-weight: 700;
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pcg-track .card h3::before {
  content: "";
  width: 14px;
  height: 2px;
  background: #FF6A2B;
  display: inline-block;
  border-radius: 2px;
}
.pcg-track .stepper {
  display: flex;
  justify-content: space-between;
  position: relative;
  padding: 0 6px;
}
.pcg-track .stepper::before {
  content: "";
  position: absolute;
  top: 17px;
  left: 26px;
  right: 26px;
  height: 2px;
  background: rgba(11, 27, 47, 0.1);
}
.pcg-track .stepper .fill {
  position: absolute;
  top: 17px;
  left: 26px;
  height: 2px;
  background: #FF6A2B;
  transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  border-radius: 2px;
}
.pcg-track .step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
  z-index: 1;
}
.pcg-track .step .node {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(11, 27, 47, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: #5B6B7E;
  transition: all 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pcg-track .step.done .node {
  border-color: #FF6A2B;
  background: #FF6A2B;
  color: #fff;
}
.pcg-track .step.current .node {
  border-color: #FF6A2B;
  background: #fff;
  color: #FF6A2B;
  box-shadow: 0 0 0 3px rgba(255, 106, 43, 0.3);
}
.pcg-track .step .label {
  font-size: 12.5px;
  color: #5B6B7E;
}
.pcg-track .step.current .label {
  color: #0B1B2F;
  font-weight: 600;
}
.pcg-track .ref-row {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.pcg-track .barcode {
  background: repeating-linear-gradient(90deg, #0B1B2F 0 2px, transparent 2px 3px, #0B1B2F 5px 6px, transparent 6px 9px);
  width: 180px;
  height: 56px;
  border-radius: 6px;
  flex-shrink: 0;
}
.pcg-track .ref-meta .k {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #5B6B7E;
}
.pcg-track .ref-meta .v {
  font-size: 20px;
  margin-top: 4px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-family: "SFMono-Regular", "JetBrains Mono", "IBM Plex Mono", Consolas, "Liberation Mono", Menlo, monospace;
}
.pcg-track .pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  margin-top: 10px;
}
.pcg-track .pill.transit {
  background: #E8F0FE;
  color: #2563EB;
}
.pcg-track .pill.pending {
  background: #FBF1DF;
  color: #C9821A;
}
.pcg-track .pill.delivered {
  background: #E7F6EE;
  color: #15A05A;
}
.pcg-track .ref-actions {
  margin-left: auto;
}
.pcg-track .route-row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.pcg-track .route-point {
  flex: 1;
}
.pcg-track .route-point.dest {
  text-align: right;
}
.pcg-track .route-point .tag {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #5B6B7E;
}
.pcg-track .route-point .place {
  font-size: 18px;
  font-weight: 700;
  margin-top: 6px;
}
.pcg-track .route-point .region {
  font-size: 13px;
  color: #5B6B7E;
  margin-top: 2px;
}
.pcg-track .route-line {
  flex: 1.4;
  padding-top: 22px;
  position: relative;
}
.pcg-track .route-line .track {
  height: 2px;
  background: repeating-linear-gradient(90deg, #FF6A2B 0 6px, transparent 6px 11px);
  position: relative;
}
.pcg-track .route-line .beacon {
  position: absolute;
  top: -6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #0B1B2F;
  border: 2px solid #FF6A2B;
  transition: left 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pcg-track .route-line .pct {
  text-align: center;
  font-size: 11px;
  color: #5B6B7E;
  margin-top: 8px;
  font-family: "SFMono-Regular", "JetBrains Mono", "IBM Plex Mono", Consolas, "Liberation Mono", Menlo, monospace;
}
.pcg-track .grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.pcg-track dl.facts {
  display: grid;
  grid-template-columns: auto 1fr;
  row-gap: 12px;
  column-gap: 16px;
  font-size: 14px;
  margin: 0;
}
.pcg-track dl.facts dt {
  color: #5B6B7E;
}
.pcg-track dl.facts dd {
  text-align: right;
  font-weight: 600;
  margin: 0;
}
.pcg-track .pcg-pkg-image {
  margin-top: 14px;
}
.pcg-track .pcg-pkg-image img {
  max-width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(11, 27, 47, 0.1);
}
.pcg-track .map-box {
  height: 260px;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  background: #E9EDF2;
  border: 1px solid rgba(11, 27, 47, 0.1);
}
.pcg-track .map-live {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #fff;
  border: 1px solid rgba(11, 27, 47, 0.1);
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 11px;
  font-weight: 600;
  color: #15A05A;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 500;
}
.pcg-track .map-live .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #15A05A;
}
.pcg-track .current-loc {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px dashed #FF6A2B;
  border-radius: 10px;
  padding: 14px 16px;
}
.pcg-track .current-loc .k {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #5B6B7E;
}
.pcg-track .current-loc .v {
  font-size: 16px;
  font-weight: 700;
  margin-top: 2px;
}
.pcg-track .current-loc .badge {
  margin-left: auto;
  font-size: 12px;
  color: #15A05A;
  font-weight: 600;
}
.pcg-track .timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pcg-track .timeline li {
  display: flex;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid rgba(11, 27, 47, 0.1);
}
.pcg-track .timeline li:first-child {
  border-top: none;
}
.pcg-track .timeline .tdot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
  background: rgba(11, 27, 47, 0.1);
}
.pcg-track .timeline li.active .tdot {
  background: #FF6A2B;
}
.pcg-track .timeline .tbody {
  flex: 1;
}
.pcg-track .timeline .ttitle {
  font-weight: 600;
  font-size: 14px;
}
.pcg-track .timeline .tdesc {
  font-size: 13px;
  color: #5B6B7E;
  margin-top: 2px;
}
.pcg-track .timeline .ttime {
  font-size: 12px;
  color: #5B6B7E;
  font-family: "SFMono-Regular", "JetBrains Mono", "IBM Plex Mono", Consolas, "Liberation Mono", Menlo, monospace;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .pcg-track .grid-2 {
    grid-template-columns: 1fr;
  }
  .pcg-track .ref-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .pcg-track .ref-actions {
    margin-left: 0;
  }
  .pcg-track .route-row {
    flex-direction: column;
  }
  .pcg-track .route-point.dest {
    text-align: left;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pcg-track * {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================
   CLIENT & DRIVER DASHBOARDS
   ============================================================ */
.procargo-client-dashboard,
.procargo-driver-dashboard {
  max-width: 1000px;
  margin: 0 auto;
  padding: 28px 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  color: #0B1B2F;
}
.procargo-client-dashboard h2,
.procargo-driver-dashboard h2 {
  margin: 0 0 22px;
  font-size: 24px;
}
.procargo-client-dashboard .procargo-shipments-list,
.procargo-driver-dashboard .procargo-shipments-list {
  display: grid;
  gap: 18px;
}
.procargo-client-dashboard .procargo-shipment-card,
.procargo-driver-dashboard .procargo-shipment-card {
  background: #FFFFFF;
  border: 1px solid rgba(11, 27, 47, 0.1);
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: 0 1px 2px rgba(11, 27, 47, 0.06);
  transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.procargo-client-dashboard .procargo-shipment-card:hover,
.procargo-driver-dashboard .procargo-shipment-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(11, 27, 47, 0.08);
}
.procargo-client-dashboard .procargo-shipment-card .shipment-header,
.procargo-driver-dashboard .procargo-shipment-card .shipment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(11, 27, 47, 0.1);
}
.procargo-client-dashboard .procargo-shipment-card .shipment-header h3,
.procargo-driver-dashboard .procargo-shipment-card .shipment-header h3 {
  margin: 0;
  font-size: 18px;
}
.procargo-client-dashboard .procargo-shipment-card .shipment-location,
.procargo-driver-dashboard .procargo-shipment-card .shipment-location {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(11, 27, 47, 0.1);
}
.procargo-client-dashboard .procargo-shipment-card .shipment-location h4,
.procargo-driver-dashboard .procargo-shipment-card .shipment-location h4 {
  margin: 0 0 10px;
  color: #FF6A2B;
  font-size: 14px;
}
.procargo-client-dashboard .procargo-shipment-card .procargo-mini-map,
.procargo-driver-dashboard .procargo-shipment-card .procargo-mini-map {
  height: 200px;
  width: 100%;
  border: 1px solid rgba(11, 27, 47, 0.1);
  border-radius: 10px;
}
.procargo-client-dashboard .procargo-shipment-card .shipment-actions,
.procargo-driver-dashboard .procargo-shipment-card .shipment-actions {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(11, 27, 47, 0.1);
}
.procargo-client-dashboard .procargo-shipment-card .shipment-actions .button,
.procargo-driver-dashboard .procargo-shipment-card .shipment-actions .button {
  margin-right: 10px;
}
.procargo-client-dashboard .procargo-status-badge,
.procargo-driver-dashboard .procargo-status-badge {
  padding: 5px 12px;
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.procargo-driver-dashboard .driver-header {
  background: linear-gradient(135deg, #FF6A2B, #E2541C);
  padding: 26px;
  border-radius: 14px;
  margin-bottom: 22px;
  color: #fff;
  box-shadow: 0 6px 20px rgba(11, 27, 47, 0.08);
}
.procargo-driver-dashboard .driver-header h2 {
  margin: 0 0 6px;
  color: #fff;
  font-size: 22px;
}
.procargo-driver-dashboard .driver-header p {
  margin: 0;
  opacity: 0.92;
}
.procargo-driver-dashboard .procargo-assigned-shipments .active-shipment-card {
  background: rgba(255, 106, 43, 0.1);
  padding: 22px;
  border: 1px solid #FF6A2B;
  border-radius: 14px;
  margin-bottom: 18px;
}
.procargo-driver-dashboard .procargo-assigned-shipments .active-shipment-card h4 {
  margin-top: 0;
  color: #E2541C;
}
.procargo-driver-dashboard .procargo-assigned-shipments .active-shipment-card #active-delivery-map {
  height: 300px;
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(11, 27, 47, 0.1);
}
.procargo-driver-dashboard .procargo-assigned-shipments .active-shipment-card .delivery-actions {
  margin-top: 14px;
}
.procargo-driver-dashboard .procargo-assigned-shipments .active-shipment-card .delivery-actions .button {
  margin-right: 10px;
}
.procargo-driver-dashboard .procargo-assigned-shipments .other-shipments {
  background: #FFFFFF;
  padding: 22px;
  border: 1px solid rgba(11, 27, 47, 0.1);
  border-radius: 14px;
}
.procargo-driver-dashboard .procargo-assigned-shipments .other-shipments h4 {
  margin-top: 0;
}
.procargo-driver-dashboard .procargo-assigned-shipments .other-shipments .shipment-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.procargo-driver-dashboard .procargo-assigned-shipments .other-shipments .shipment-list .shipment-item {
  padding: 12px;
  border-bottom: 1px solid rgba(11, 27, 47, 0.1);
}
.procargo-driver-dashboard .procargo-assigned-shipments .other-shipments .shipment-list .shipment-item:last-child {
  border-bottom: none;
}
.procargo-driver-dashboard .procargo-tracking-controls {
  background: #FFFFFF;
  padding: 22px;
  border: 1px solid rgba(11, 27, 47, 0.1);
  border-radius: 14px;
}
.procargo-driver-dashboard .procargo-tracking-controls h3 {
  margin-top: 0;
}
.procargo-driver-dashboard .procargo-tracking-controls #gps-status {
  font-weight: 700;
  margin-bottom: 10px;
  color: #FF6A2B;
}
.procargo-driver-dashboard .procargo-tracking-controls #gps-info {
  margin-top: 14px;
  padding: 14px;
  background: #F4F6F9;
  border-radius: 10px;
}
.procargo-driver-dashboard .procargo-tracking-controls #gps-info #current-coords {
  font-family: "SFMono-Regular", "JetBrains Mono", "IBM Plex Mono", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 14px;
  color: #FF6A2B;
}
.procargo-driver-dashboard .no-assignments {
  background: #FFFFFF;
  padding: 44px;
  text-align: center;
  border: 1px solid rgba(11, 27, 47, 0.1);
  border-radius: 14px;
  color: #5B6B7E;
}

.procargo-mini-map {
  height: 200px;
  width: 100%;
  border: 1px solid rgba(11, 27, 47, 0.1);
  border-radius: 10px;
}

.status-pending {
  background: #C9821A;
  color: #fff;
}

.status-picked_up {
  background: #2563EB;
}

.status-in_transit {
  background: #2563EB;
}

.status-out_for_delivery {
  background: #FF6A2B;
}

.status-delivered {
  background: #15A05A;
}

.status-cancelled {
  background: #DC2B3E;
}

.status-failed {
  background: #5B6B7E;
}

@media (max-width: 768px) {
  .procargo-tracking-wrapper .procargo-tracking-form .form-group {
    flex-direction: column;
  }
  .procargo-tracking-wrapper .procargo-tracking-form .form-group input[type=text] {
    width: 100%;
  }
  .procargo-tracking-wrapper .procargo-tracking-form .form-group .button {
    width: 100%;
  }
  .procargo-ai-container {
    flex-direction: column;
  }
  .procargo-ai-container .procargo-ai-sidebar {
    width: 100%;
  }
}

/*# sourceMappingURL=frontend.css.map */