/* ==========================================================================
   Mapa de pontos de venda: marcador em gota de tinta, agrupamento em tampa de lata e cartão do ponto.
   Usado no site (Onde comprar) e no painel (cadastro de revendedor).
   ========================================================================== */

/* --- Marcador: gota de tinta com tinta balançando dentro ------------------- */
.gota-wrap { background: none !important; border: 0 !important; }
.gota {
  --c: #C8102E;
  position: relative; width: 46px; height: 58px; cursor: pointer;
  transform-origin: 50% 100%;
  transition: transform .35s cubic-bezier(.3, 1.6, .5, 1);
  filter: drop-shadow(0 6px 6px rgb(0 0 0 / .28));
}
.gota svg.gota__forma { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* O Leaflet põe z-index: 200 em todo SVG do mapa; dentro da gota a ordem é a do HTML */
.leaflet-map-pane .gota svg, .leaflet-map-pane .tampa svg { z-index: auto; }
.gota__corpo { fill: var(--c); }
.gota__onda { fill: color-mix(in srgb, var(--c) 62%, #000); animation: gota-onda 3.2s ease-in-out infinite; }
.gota__onda2 { fill: color-mix(in srgb, var(--c) 78%, #000); opacity: .75; animation: gota-onda 4.6s ease-in-out infinite reverse; }
.gota__brilho { fill: #fff; opacity: .38; }
.gota__miolo { fill: #fff; }
.gota__ic {
  position: absolute; z-index: 1; left: 50%; top: 20px; width: 18px; height: 18px; translate: -50% -50%; display: block;
  color: color-mix(in srgb, var(--c) 82%, #000);
}
.gota__ic .ic { width: 100%; height: 100%; display: block; }
/* Poça e respingo no chão */
.gota__poca {
  position: absolute; left: 50%; bottom: -4px; width: 22px; height: 7px; translate: -50% 0; border-radius: 50%;
  background: color-mix(in srgb, var(--c) 45%, transparent);
}
.gota__poca::after {
  content: ""; position: absolute; inset: -3px -6px; border-radius: 50%; border: 2px solid var(--c); opacity: 0;
}
/* Etiqueta tipo amostra de cor que sai de lado ao passar o mouse */
.gota__etq {
  position: absolute; z-index: 2; left: 40px; top: 6px; white-space: nowrap; pointer-events: none;
  display: flex; align-items: stretch; border-radius: 6px; overflow: hidden;
  background: #fff; color: #161616; box-shadow: 0 6px 16px rgb(0 0 0 / .18);
  font: 700 12.5px/1.15 Archivo, system-ui, sans-serif;
  opacity: 0; transform: translateX(-8px) scaleX(.9); transform-origin: left center;
  transition: opacity .2s ease, transform .25s cubic-bezier(.2, .8, .2, 1);
}
.gota__etq::before { content: ""; width: 8px; background: var(--c); }
.gota__etq span { padding: 6px 10px 6px 8px; }
.gota__etq small { display: block; font-weight: 500; opacity: .65; font-size: 11px; margin-top: 2px; }

.gota:hover, .gota.is-foco { transform: scale(1.14) translateY(-3px); z-index: 2; }
.gota:hover .gota__etq, .gota.is-foco .gota__etq { opacity: 1; transform: none; }
.gota:hover .gota__poca::after, .gota.is-foco .gota__poca::after { animation: gota-respingo 1.2s ease-out infinite; }
.gota.is-ativo { transform: scale(1.22) translateY(-4px); }
.gota.is-ativo .gota__poca::after { animation: gota-respingo 1.2s ease-out infinite; }
.leaflet-marker-icon:has(.gota.is-ativo), .leaflet-marker-icon:has(.gota:hover) { z-index: 9999 !important; }

/* Queda das gotas ao abrir o mapa, cada uma no seu tempo */
.gota--cai { animation: gota-cai .7s cubic-bezier(.3, 1.4, .6, 1) both; animation-delay: var(--atraso, 0s); }
.gota--cai .gota__poca::after { animation: gota-respingo .7s ease-out both; animation-delay: calc(var(--atraso, 0s) + .45s); }

@keyframes gota-onda { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-14px); } }
@keyframes gota-cai {
  0% { opacity: 0; transform: translateY(-70px) scaleY(1.15); }
  60% { opacity: 1; transform: translateY(0) scale(1.12, .86); }
  80% { transform: translateY(-4px) scale(.96, 1.05); }
  100% { transform: none; }
}
@keyframes gota-respingo { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.9); } }

/* "Você está aqui" */
.voce { width: 22px; height: 22px; border-radius: 50%; background: #1A73E8; border: 3px solid #fff; box-shadow: 0 0 0 0 rgb(26 115 232 / .5); animation: voce-pulsa 1.8s ease-out infinite; }
@keyframes voce-pulsa { 0% { box-shadow: 0 0 0 0 rgb(26 115 232 / .45); } 100% { box-shadow: 0 0 0 18px rgb(26 115 232 / 0); } }

/* --- Agrupamento: tampa de lata vista de cima, com as cores dos tipos ------ */
.tampa-wrap { background: none !important; border: 0 !important; }
.tampa {
  --p: conic-gradient(#C8102E 0 100%);
  position: relative; width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(from 20deg, #f4f4f4, #9a9a9a, #eee, #8c8c8c, #f6f6f6, #a2a2a2, #f4f4f4);
  box-shadow: 0 6px 14px rgb(0 0 0 / .3), inset 0 0 0 2px rgb(255 255 255 / .6);
  transition: transform .3s cubic-bezier(.3, 1.6, .5, 1);
}
.tampa::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--p); box-shadow: inset 0 2px 5px rgb(0 0 0 / .35); }
.tampa::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: radial-gradient(70% 55% at 32% 28%, rgb(255 255 255 / .45), transparent 60%); }
.tampa b {
  position: relative; z-index: 1; display: grid; place-items: center; min-width: 52%; aspect-ratio: 1; border-radius: 50%;
  background: #fff; color: #161616; font: 800 15px/1 Archivo, system-ui, sans-serif; box-shadow: 0 2px 6px rgb(0 0 0 / .25);
}
.tampa:hover { transform: scale(1.1) rotate(-12deg); }
.tampa:hover b { transform: rotate(12deg); }

/* --- Cartão do ponto (popup) ------------------------------------------------ */
.pdv-pop .leaflet-popup-content-wrapper { padding: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 40px rgb(0 0 0 / .25); }
.pdv-pop .leaflet-popup-content { margin: 0; width: 280px !important; font: 400 14px/1.4 Archivo, system-ui, sans-serif; color: #161616; }
.pdv-pop .leaflet-popup-tip { box-shadow: none; }
.pdv-pop a.leaflet-popup-close-button { color: #fff; top: 6px; right: 6px; font-size: 22px; }
.pdv { --c: #C8102E; }
.pdv__topo { position: relative; padding: 14px 40px 14px 16px; color: #fff; background: radial-gradient(90% 140% at 100% 0%, rgb(255 255 255 / .22), transparent 60%), linear-gradient(150deg, var(--c) 30%, color-mix(in srgb, var(--c) 62%, #000)); }
.pdv__tipo { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: rgb(0 0 0 / .22); margin-bottom: 6px; }
.pdv__tipo .ic { width: 14px; height: 14px; }
.pdv__nome { font-weight: 800; font-size: 16px; line-height: 1.15; }
.pdv__corpo { padding: 12px 16px 14px; display: grid; gap: 6px; }
.pdv__linha { display: flex; gap: 8px; align-items: flex-start; }
.pdv__linha .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; color: color-mix(in srgb, var(--c) 80%, #000); }
.pdv__dist { font-weight: 700; color: color-mix(in srgb, var(--c) 80%, #000); }
.pdv__acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pdv__acoes a {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px; text-decoration: none;
  font-weight: 700; font-size: 13px; color: #161616; box-shadow: inset 0 0 0 1.5px #d8d8d8;
}
.pdv__acoes a:first-child { background: var(--c); color: #fff; box-shadow: none; }
.pdv__acoes a:hover { box-shadow: inset 0 0 0 1.5px currentColor; }
.pdv__acoes .ic { width: 15px; height: 15px; }

.leaflet-container { font-family: Archivo, system-ui, sans-serif; }
/* Mapa mais claro e menos saturado: as cores ficam para as gotas */
.mapa-suave { filter: saturate(.35) brightness(1.05) contrast(.92); }

@media (prefers-reduced-motion: reduce) {
  .gota__onda, .gota__onda2, .voce, .gota--cai, .gota--cai .gota__poca::after { animation: none !important; }
  .gota:hover .gota__poca::after, .gota.is-ativo .gota__poca::after { animation: none; }
}