:root {
  --xamei-blue: #0066FF;
  --xamei-blue-glow: rgba(0, 102, 255, 0.4);
  --xamei-green: #00C853;
  --xamei-green-glow: rgba(0, 200, 83, 0.4);
  --xamei-gold: #FFB300;
  --xamei-dark: #0A0F1D;
  --xamei-card: #131B2E;
  --xamei-border: #1E293B;
}

html, body {
  height: 100%;
  height: 100dvh;
  min-height: 100dvh;
}

body {
  background-color: var(--xamei-dark);
  color: #F8FAFC;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: #0A0F1D;
}
::-webkit-scrollbar-thumb {
  background: #1E293B;
  border-radius: 4px;
}

/* Glassmorphism */
.glass-panel {
  background: rgba(19, 27, 46, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-header {
  background: rgba(10, 15, 29, 0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Pulsing radar effect */
.radar-pulse {
  position: relative;
}
.radar-pulse::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--xamei-blue-glow);
  animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

@keyframes pulse-ring {
  0% {
    width: 60px;
    height: 60px;
    opacity: 0.9;
  }
  100% {
    width: 220px;
    height: 220px;
    opacity: 0;
  }
}

/* Leaflet dark custom tiles */
.leaflet-container {
  background-color: #0A0F1D !important;
  font-family: inherit;
}
.leaflet-tile-pane {
  filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7);
}
.leaflet-bar a {
  background-color: #131B2E !important;
  color: #F8FAFC !important;
  border-color: #1E293B !important;
}

/* Custom Marker Pins */
.custom-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  border: 2px solid #FFFFFF;
}

.pin-pickup {
  background: linear-gradient(135deg, #00C853, #00E676);
  color: #FFFFFF;
}

.pin-destination {
  background: linear-gradient(135deg, #FF1744, #D50000);
  color: #FFFFFF;
}

.pin-driver {
  background: rgba(10, 15, 29, 0.95);
  border: 2px solid #0066FF;
  box-shadow: 0 0 16px rgba(0, 102, 255, 0.7);
  animation: bounce 2s infinite;
}

/* Marcadores de veículos XAMEI no Mapa (Pin 3D Oficial com o X da logo) */
.xamei-pin-leaflet-marker {
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
}

.xamei-pin-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  width: 52px;
  height: 68px;
}

.xamei-pin-wrapper {
  position: relative;
  width: 48px;
  height: 58px;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));
}

.xamei-pin-wrapper:hover {
  transform: translateY(-4px) scale(1.1);
}

.xamei-pin-svg {
  width: 48px;
  height: 58px;
  display: block;
}

.xamei-pin-icon {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 25px;
  height: 25px;
  object-fit: contain;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.8));
  pointer-events: none;
}

/* Sombra âmbar / dourada no asfalto abaixo da ponta do pin */
.xamei-pin-shadow {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 10px;
  background: radial-gradient(ellipse at center, rgba(255, 179, 0, 0.75) 0%, rgba(255, 179, 0, 0.25) 55%, transparent 75%);
  border-radius: 50%;
  pointer-events: none;
}

/* Motorista em corrida ativa (pulso flutuante suave) */
.xamei-pin-active .xamei-pin-wrapper {
  animation: pin-float 2s infinite ease-in-out;
}

@keyframes pin-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

.xamei-pin-active .xamei-pin-shadow {
  animation: shadow-pulse 2s infinite ease-in-out;
}

@keyframes shadow-pulse {
  0%, 100% {
    transform: translateX(-50%) scale(1);
    opacity: 0.8;
  }
  50% {
    transform: translateX(-50%) scale(1.3);
    opacity: 0.35;
  }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Safe area for mobile and iOS notched devices */
.safe-top {
  padding-top: env(safe-area-inset-top, 0px);
}
.safe-bottom {
  padding-bottom: max(10px, env(safe-area-inset-bottom, 10px));
}

/* Animações e Estilos da Intro do XAMEI */
.intro-glow-pulse {
  animation: intro-glow 2.5s infinite ease-in-out;
}

@keyframes intro-glow {
  0%, 100% {
    filter: drop-shadow(0 10px 25px rgba(0, 102, 255, 0.45)) drop-shadow(0 0 15px rgba(0, 200, 83, 0.3));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 15px 35px rgba(0, 102, 255, 0.8)) drop-shadow(0 0 25px rgba(255, 179, 0, 0.5));
    transform: scale(1.03);
  }
}

.intro-shimmer {
  position: relative;
  overflow: hidden;
}

.intro-shimmer::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -150%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    60deg,
    transparent 30%,
    rgba(255, 255, 255, 0.25) 50%,
    transparent 70%
  );
  animation: intro-shimmer-pass 2.4s infinite;
}

@keyframes intro-shimmer-pass {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ===== CATEGORY CAROUSEL SCROLL ===== */

/* Esconde scrollbar nativo do carrossel de categorias */
.category-scroll::-webkit-scrollbar {
  display: none;
}
.category-scroll {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Animação horizontal de bounce para indicador de seta de scroll */
@keyframes bounce-x {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(5px);
  }
}
.animate-bounce-x {
  animation: bounce-x 1.2s ease-in-out infinite;
}

/* Dots de scroll ativo */
.scroll-dot.active {
  width: 16px;
  background-color: #f5b842;
}
.scroll-dot {
  transition: width 0.3s ease, background-color 0.3s ease;
}

/* Bottom sheet: dvh override para celulares reais com barra do navegador */
@supports (height: 100dvh) {
  #bookingBottomSheet > div {
    max-height: calc(100dvh - 280px) !important;
  }
}

/* Animação do feixe laser do leitor QR Code PIX */
@keyframes qr-scan-laser {
  0% {
    top: 6%;
    opacity: 0.7;
  }
  50% {
    top: 90%;
    opacity: 1;
  }
  100% {
    top: 6%;
    opacity: 0.7;
  }
}

.animate-qr-laser {
  animation: qr-scan-laser 2s ease-in-out infinite;
}