/**
 * ============================================================
 *  Driver Route Style — Info Card Overlay on Map
 *  Trakita Transport Route System (OjekKita, BecaKita, AntarKita)
 * ============================================================
 *
 *  - Info card positioned at bottom of map
 *  - Glassmorphism style
 *  - Responsive: 320px → 430px
 *  - All classes prefixed .driver-route-
 *
 * ============================================================
 */

/* ==================== INFO CARD CONTAINER ==================== */
.driver-route-info-card {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: 88%;
  max-width: 360px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.12),
    0 1px 4px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  padding: 12px 16px;
  box-sizing: border-box;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: auto;
  cursor: default;
}

.driver-route-info-card.driver-route-hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(12px);
  pointer-events: none;
}

.driver-route-info-card.driver-route-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ==================== INFO CARD CONTENT ==================== */
.driver-route-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.driver-route-header-icon {
  font-size: 15px;
  flex-shrink: 0;
}
.driver-route-header-label {
  font-size: 11px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.driver-route-header-label.driver-route-selected {
  color: #2563eb;
}

.driver-route-driver-name {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 4px;
  line-height: 1.3;
}

.driver-route-stats {
  display: flex;
  gap: 10px;
}
.driver-route-stat {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  line-height: 1;
}
.driver-route-stat-icon {
  font-size: 12px;
}
.driver-route-stat-distance {
  color: #16a34a;
  background: #f0fdf4;
}
.driver-route-stat-duration {
  color: #2563eb;
  background: #eff6ff;
}

/* ==================== ERROR / LOADING STATE ==================== */
.driver-route-loading-text {
  font-size: 11px;
  color: #9ca3af;
  font-weight: 500;
}
.driver-route-error-text {
  font-size: 11px;
  color: #dc2626;
  font-weight: 500;
}

/* ==================== PULSE DOT FOR LIVE INDICATOR ==================== */
.driver-route-live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  margin-right: 4px;
  animation: driverRoutePulse 1.5s ease-in-out infinite;
}
@keyframes driverRoutePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

/* ==================== RESPONSIVE: 320px ==================== */
@media (max-width: 340px) {
  .driver-route-info-card {
    width: 92%;
    max-width: 310px;
    padding: 10px 12px;
    border-radius: 12px;
    bottom: 8px;
  }
  .driver-route-header-label {
    font-size: 10px;
  }
  .driver-route-driver-name {
    font-size: 13px;
  }
  .driver-route-stats {
    gap: 6px;
  }
  .driver-route-stat {
    font-size: 11px;
    padding: 2px 6px;
  }
}

/* ==================== RESPONSIVE: 360px - 375px ==================== */
@media (min-width: 341px) and (max-width: 390px) {
  .driver-route-info-card {
    width: 90%;
    max-width: 340px;
  }
}

/* ==================== RESPONSIVE: 390px+ ==================== */
@media (min-width: 391px) {
  .driver-route-info-card {
    width: 88%;
    max-width: 360px;
  }
  .driver-route-driver-name {
    font-size: 15px;
  }
  .driver-route-stat {
    font-size: 13px;
  }
}