/* mysabak — Custom Styles */

:root {
  --primary: #FF5722;
  --primary-dark: #E64A19;
  --surface: #FFFFFF;
  --bg: #F9FAFB;
  --text: #111827;
  --muted: #6B7280;
}

/* Map container */
.map-container { width: 100%; height: 300px; border-radius: 1rem; overflow: hidden; }
.map-container.full { height: calc(100vh - 11rem); }

/* Active bottom nav item */
.nav-item.active { color: var(--primary); }

/* Ride status badges */
.badge-pending { background: #FEF3C7; color: #92400E; }
.badge-accepted { background: #DBEAFE; color: #1E40AF; }
.badge-in-progress { background: #D1FAE5; color: #065F46; }
.badge-completed { background: #E5E7EB; color: #374151; }
.badge-cancelled { background: #FEE2E2; color: #991B1B; }

/* Price bubble animation */
@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.animate-slide-up { animation: slideUp 0.3s ease-out; }

/* Pulse for active ride */
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(255, 87, 34, 0.4); }
  70% { box-shadow: 0 0 0 12px rgba(255, 87, 34, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 87, 34, 0); }
}
.pulse { animation: pulse-ring 2s infinite; }