/**
 * Mappa Imobiliário — Dica Animada de Zoom (Gesto de Pinça)
 * Estilos isolados com prefixo .dz-
 */

/* ==========================================================================
   1) OVERLAY CENTRALIZADO SOBRE O MAPA (CARD COM BOTÃO DE CONFIRMAÇÃO)
   ========================================================================== */
.dz-overlay {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(340px, 88vw) !important;
  max-width: 360px !important;
  background: rgba(15, 23, 42, 0.94) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 2px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 20px !important;
  padding: 24px 20px 20px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  color: #ffffff !important;
  text-align: center !important;
  z-index: 2000 !important;
  pointer-events: auto !important; /* Permite interagir e clicar no botão "Entendi" */
  box-sizing: border-box !important;
  opacity: 1 !important;
  transition: opacity 0.4s ease-out, transform 0.4s ease-out !important;
  will-change: opacity, transform !important;
}

.dz-overlay.dz-oculto {
  opacity: 0 !important;
  transform: translate(-50%, -50%) scale(0.92) !important;
  pointer-events: none !important;
}

/* ==========================================================================
   2) ÍCONE DE GESTO DE PINÇA (SVG ANIMADO COM INDICADOR E POLEGAR)
   ========================================================================== */
.dz-icone-wrapper {
  position: relative !important;
  width: 90px !important;
  height: 90px !important;
  margin: 0 auto 12px auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.dz-svg-pinca {
  width: 90px !important;
  height: 90px !important;
  overflow: visible !important;
}

/* Onda expansiva de toque concêntrico */
.dz-onda {
  transform-origin: 60px 60px !important;
  animation: dzOndaPulse 2.8s cubic-bezier(0.2, 0.8, 0.2, 1) infinite !important;
}

@keyframes dzOndaPulse {
  0%, 15% {
    transform: scale(0.5);
    opacity: 0;
  }
  30% {
    opacity: 0.9;
  }
  75%, 100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

/* Dedo indicador (afastando para cima/esquerda) */
.dz-dedo-1 {
  transform-origin: 48px 48px !important;
  animation: dzDedoAbre1 2.8s cubic-bezier(0.25, 1, 0.5, 1) infinite !important;
  will-change: transform;
}

/* Dedo polegar (afastando para baixo/direita) */
.dz-dedo-2 {
  transform-origin: 72px 72px !important;
  animation: dzDedoAbre2 2.8s cubic-bezier(0.25, 1, 0.5, 1) infinite !important;
  will-change: transform;
}

@keyframes dzDedoAbre1 {
  0%, 15% {
    transform: translate(0, 0);
  }
  50%, 78% {
    transform: translate(-14px, -14px);
  }
  95%, 100% {
    transform: translate(0, 0);
  }
}

@keyframes dzDedoAbre2 {
  0%, 15% {
    transform: translate(0, 0);
  }
  50%, 78% {
    transform: translate(14px, 14px);
  }
  95%, 100% {
    transform: translate(0, 0);
  }
}

/* ==========================================================================
   3) TEXTO GRANDE E LEGÍVEL (MÍNIMO 20px)
   ========================================================================== */
.dz-texto {
  font-size: 21px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  color: #ffffff !important;
  margin: 0 0 6px 0 !important;
  letter-spacing: -0.2px !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6) !important;
}

.dz-subtexto {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #CBD5E1 !important;
  margin: 0 !important;
  opacity: 0.9 !important;
}

/* ==========================================================================
   4) BOTÃO "OK, ENTENDI!" DENTRO DA JANELA (SÓ FECHA AO CLICAR NELE)
   ========================================================================== */
.dz-btn-entendi {
  display: block !important;
  width: 100% !important;
  min-height: 50px !important;
  margin-top: 18px !important;
  padding: 12px 20px !important;
  background: #E52E2E !important;
  color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 14px !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  font-family: inherit !important;
  text-align: center !important;
  letter-spacing: 0.3px !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  box-shadow: 0 4px 14px rgba(229, 46, 46, 0.45), 0 2px 6px rgba(0, 0, 0, 0.2) !important;
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.dz-btn-entendi:hover {
  background: #DC2626 !important;
  box-shadow: 0 6px 18px rgba(229, 46, 46, 0.55) !important;
  transform: translateY(-1px) !important;
}

.dz-btn-entendi:active {
  transform: scale(0.97) !important;
  background: #B91C1C !important;
}

/* ==========================================================================
   5) BOTÃO PERMANENTE "✋ Ver dica de novo" NA LATERAL DO MAPA
   ========================================================================== */
.dz-btn-rever {
  position: absolute !important;
  top: 248px !important;
  left: 12px !important;
  transform: none !important;
  z-index: 998 !important;
  background: #ffffff !important;
  color: #0F172A !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 9999px !important;
  padding: 8px 18px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.16) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  transition: transform 0.15s, background-color 0.15s, box-shadow 0.15s !important;
  user-select: none !important;
  white-space: nowrap !important;
  -webkit-tap-highlight-color: transparent !important;
}

.dz-btn-rever:hover {
  background: #F8FAFC !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.22) !important;
}

.dz-btn-rever:active {
  transform: scale(0.96) !important;
  background: #F1F5F9 !important;
}

/* Desktop: posiciona a dica abaixo dos controles e da barra de regiões */
@media (min-width: 901px) {
  .dz-btn-rever {
    top: 180px !important;
    font-size: 14px !important;
    padding: 9px 20px !important;
  }
}

/* ==========================================================================
   6) ACESSIBILIDADE
   ========================================================================== */

/* Respeito a prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .dz-onda,
  .dz-dedo-1,
  .dz-dedo-2 {
    animation: none !important;
  }
}