/* eetZA Step 35HY — branded TomTom/Leaflet map presentation.
   Keeps the working TomTom raster tiles and Leaflet interactions, while making
   maps visually consistent with the professional eetZA red interface. */

:root {
  --eetza-map-blue: #bd2631;
  --eetza-map-blue-deep: #861d28;
  --eetza-map-blue-soft: #f27f85;
  --eetza-map-ink: #491619;
  --eetza-map-border: rgba(198,95,101, .38);
  --eetza-map-shadow: 0 12px 32px rgba(86,20,23, .14);
}

.location-map,
.order-route-map,
.driver-route-map,
[data-live-delivery-map],
[data-order-route-map],
[data-location-map] {
  position: relative !important;
  isolation: isolate !important;
  border-color: var(--eetza-map-border) !important;
  background: linear-gradient(145deg, #eaf6fc, #d8edf7) !important;
  box-shadow: var(--eetza-map-shadow), inset 0 0 0 1px rgba(255, 255, 255, .7) !important;
}

.eetza-map-custom {
  font-family: inherit !important;
  background: linear-gradient(145deg, #eaf6fc, #d8edf7) !important;
}

.eetza-map-custom .eetza-tomtom-map-tiles {
  filter: saturate(.78) contrast(.965) brightness(1.025) !important;
}

.eetza-map-custom .leaflet-tile-pane {
  background: #e8f5fb !important;
}

.eetza-map-tint {
  position: absolute !important;
  inset: 0 !important;
  z-index: 250 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 72% 18%, rgba(255,255,255,.16), transparent 36%),
    linear-gradient(145deg, rgba(190,27,35,.035), rgba(136,24,29,.015)) !important;
  mix-blend-mode: multiply !important;
}

/* Glassy, thumb-friendly Leaflet controls. */
.eetza-map-custom .leaflet-control-zoom {
  overflow: hidden !important;
  border: 1px solid rgba(212,125,129, .66) !important;
  border-radius: 13px !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 8px 24px rgba(86,20,23,.16) !important;
  backdrop-filter: blur(12px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.08) !important;
}

.eetza-map-custom .leaflet-control-zoom a {
  display: grid !important;
  width: 35px !important;
  height: 35px !important;
  place-items: center !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(212,125,129,.38) !important;
  background: transparent !important;
  color: var(--eetza-map-blue-deep) !important;
  font-family: "Instrument Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 21px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
}

.eetza-map-custom .leaflet-control-zoom a:last-child {
  border-bottom: 0 !important;
}

.eetza-map-custom .leaflet-control-zoom a:hover,
.eetza-map-custom .leaflet-control-zoom a:focus-visible {
  background: #eaf7fd !important;
  color: #6f090e !important;
}

.eetza-map-custom .leaflet-control-attribution {
  margin: 0 !important;
  padding: 2px 6px !important;
  border-radius: 9px 0 0 0 !important;
  background: rgba(255,255,255,.82) !important;
  color: #90474b !important;
  font-size: 8px !important;
  font-weight: 650 !important;
  line-height: 1.25 !important;
  backdrop-filter: blur(9px) !important;
  -webkit-backdrop-filter: blur(9px) !important;
}

.eetza-map-custom .leaflet-control-attribution a {
  color: #961c22 !important;
  text-decoration: none !important;
}

/* Premium map labels. */
.eetza-map-custom .leaflet-tooltip {
  padding: 6px 9px !important;
  border: 1px solid rgba(210,120,124,.54) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.96) !important;
  color: #65191d !important;
  box-shadow: 0 8px 22px rgba(86,20,23,.16) !important;
  font-family: inherit !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.eetza-map-custom .leaflet-tooltip-top::before {
  border-top-color: rgba(255,255,255,.96) !important;
}

.eetza-map-custom .leaflet-popup-content-wrapper {
  overflow: hidden !important;
  border: 1px solid rgba(210,120,124,.45) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.97) !important;
  color: var(--eetza-map-ink) !important;
  box-shadow: 0 14px 38px rgba(86,20,23,.2) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.eetza-map-custom .leaflet-popup-content {
  margin: 12px 14px !important;
  font-family: inherit !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

.eetza-map-custom .leaflet-popup-tip {
  background: rgba(255,255,255,.97) !important;
}

/* Branded map pins. */
.eetza-map-pin,
.eetza-map-driver-marker {
  border: 0 !important;
  background: transparent !important;
}

.eetza-map-pin-shell {
  position: relative !important;
  display: grid !important;
  width: 42px !important;
  height: 42px !important;
  place-items: center !important;
  border: 3px solid rgba(255,255,255,.98) !important;
  border-radius: 15px !important;
  color: #fff !important;
  background: linear-gradient(145deg, #ce1e27, #a40f16) !important;
  box-shadow: 0 9px 24px rgba(107,9,14,.34) !important;
  box-sizing: border-box !important;
}

.eetza-map-pin-shell::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: -7px !important;
  width: 13px !important;
  height: 13px !important;
  border-right: 3px solid rgba(255,255,255,.98) !important;
  border-bottom: 3px solid rgba(255,255,255,.98) !important;
  background: #a40f16 !important;
  transform: translateX(-50%) rotate(45deg) !important;
  box-sizing: border-box !important;
  z-index: -1 !important;
}

.eetza-map-pin-shell svg,
.eetza-map-driver-shell svg {
  display: block !important;
  width: 21px !important;
  height: 21px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  position: relative !important;
  z-index: 1 !important;
}

.eetza-map-pin--store .eetza-map-pin-shell {
  background: linear-gradient(145deg, #c01821, #861d28) !important;
}
.eetza-map-pin--store .eetza-map-pin-shell::after { background: #861d28 !important; }

.eetza-map-pin--customer .eetza-map-pin-shell {
  background: linear-gradient(145deg, #753538, #52181b) !important;
}
.eetza-map-pin--customer .eetza-map-pin-shell::after { background: #52181b !important; }

.eetza-map-pin--location .eetza-map-pin-shell {
  background: linear-gradient(145deg, #dd232c, #ad0f17) !important;
  box-shadow: 0 0 0 6px rgba(221,35,44,.14), 0 9px 24px rgba(107,9,14,.32) !important;
}
.eetza-map-pin--location .eetza-map-pin-shell::after { background: #ad0f17 !important; }

.eetza-map-driver-shell {
  position: relative !important;
  display: grid !important;
  width: 44px !important;
  height: 44px !important;
  place-items: center !important;
  border: 3px solid #fff !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: linear-gradient(145deg, #d7212a, #a40e16) !important;
  box-shadow: 0 0 0 7px rgba(215,33,42,.15), 0 10px 27px rgba(107,9,14,.34) !important;
}

.eetza-map-driver-shell::after {
  content: "" !important;
  position: absolute !important;
  inset: -8px !important;
  border: 2px solid rgba(207,32,40,.3) !important;
  border-radius: 999px !important;
  animation: eetza-map-pulse 2.2s ease-out infinite !important;
}

@keyframes eetza-map-pulse {
  0% { transform: scale(.78); opacity: .8; }
  75%, 100% { transform: scale(1.25); opacity: 0; }
}

/* Route lines receive a soft halo from the SVG path shadow. */
.eetza-map-custom .leaflet-overlay-pane svg path.eetza-map-route,
.eetza-map-custom .leaflet-overlay-pane svg path.eetza-map-guide {
  filter: drop-shadow(0 1px 1px rgba(255,255,255,.96)) drop-shadow(0 3px 6px rgba(125,9,15,.2)) !important;
}

.eetza-map-custom .leaflet-interactive:focus {
  outline: none !important;
}

/* Keep the passive-map button visually connected to the new map language. */
.eetza-map-scroll-cover {
  background: linear-gradient(180deg, rgba(223,244,252,.02), rgba(213,238,249,.12)) !important;
}

.eetza-map-use-button,
.eetza-map-done-button {
  border-color: rgba(209,109,114,.72) !important;
  color: var(--eetza-map-blue-deep) !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 9px 26px rgba(86,20,23,.17) !important;
}

@media (max-width: 560px) {
  .eetza-map-custom .leaflet-control-zoom a {
    width: 33px !important;
    height: 33px !important;
  }

  .eetza-map-custom .leaflet-control-attribution {
    max-width: 72% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .eetza-map-driver-shell::after { animation: none !important; }
}