/* Google Maps Integration Styles */

/* Forza visibilità dei marker Google Maps */
gmp-advanced-marker,
gmp-advanced-marker *,
[data-marker-id],
.google-maps-marker,
.google-maps-marker * {
  content-visibility: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 1000 !important;
  pointer-events: auto !important;
  display: block !important;
}

/* Stili specifici per AdvancedMarkerElement */
gmp-advanced-marker {
  position: relative !important;
  transform: translate(-50%, -100%) !important;
}

/* Override per problemi di rendering */
.gm-style-iw,
.gm-style-iw-c,
.gm-style-iw-d {
  content-visibility: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Controlli personalizzati Google Maps */
.google-maps-control-btn {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  border: none !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: var(--text);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin: 4px;
  position: relative;
  z-index: 1000;
  padding: 0 !important;
  font-size: inherit !important;
  font-weight: normal !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
}

.google-maps-control-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.google-maps-control-btn:active {
  transform: scale(0.95);
}

.google-maps-control-btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Pulsante localizzazione - Override completo per Google Maps */
.google-maps-control-btn.location-btn {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  border-radius: 50% !important;
  background: rgba(59, 130, 246, 0.2) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  color: #3b82f6 !important;
  padding: 0 !important;
  margin: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: inherit !important;
  font-weight: normal !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
}

.google-maps-control-btn.location-btn:hover {
  background: rgba(59, 130, 246, 0.3) !important;
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  transform: scale(1.05) !important;
}

/* Pulsante fullscreen - Override completo per Google Maps */
.google-maps-control-btn.fullscreen-btn {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: var(--text) !important;
  padding: 0 !important;
  margin: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: inherit !important;
  font-weight: normal !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
}

.google-maps-control-btn.fullscreen-btn:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  transform: scale(1.05) !important;
}

/* Pulsante interazione */
.google-maps-control-btn.interaction-btn {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  border-radius: 50% !important;
  background: rgba(245, 166, 35, 0.2) !important;
  border: 1px solid rgba(245, 166, 35, 0.3) !important;
  color: #f5a623 !important;
  padding: 0 !important;
  margin: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: inherit !important;
  font-weight: normal !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
}

.google-maps-control-btn.interaction-btn:hover {
  background: rgba(245, 166, 35, 0.3) !important;
  box-shadow: 0 6px 20px rgba(245, 166, 35, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  transform: scale(1.05) !important;
}

.google-maps-control-btn.interaction-btn.active {
  background: rgba(245, 166, 35, 0.4) !important;
  border: 1px solid rgba(245, 166, 35, 0.6) !important;
  box-shadow: 0 6px 20px rgba(245, 166, 35, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

/* Stati di caricamento */
.google-maps-control-btn.loading {
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Override stili Google Maps */
.gm-style-iw {
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
}

.gm-style-iw-d {
  overflow: hidden !important;
  border-radius: 12px !important;
}

.gm-style-iw-c {
  border-radius: 12px !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  background: rgba(255, 255, 255, 0.95) !important;
}

/* Pulsante chiusura info window */
.gm-ui-hover-effect {
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* Controlli zoom personalizzati */
.gm-control-active {
  background: rgba(59, 130, 246, 0.2) !important;
  border-color: rgba(59, 130, 246, 0.5) !important;
}

/* Stili per marker personalizzati */
.custom-marker {
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.custom-marker:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

/* Animazioni per marker */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

.bounce-marker {
  animation: bounce 2s infinite;
}

/* Responsive design */
@media (max-width: 768px) {
  .google-maps-control-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    margin: 2px !important;
  }
  
  .google-maps-control-btn svg {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 480px) {
  .google-maps-control-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    margin: 1px !important;
  }
  
  .google-maps-control-btn svg {
    width: 16px;
    height: 16px;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .google-maps-control-btn {
    background: rgba(31, 41, 55, 0.8);
    border-color: rgba(255, 255, 255, 0.2);
    color: #d1d5db;
  }
  
  .google-maps-control-btn:hover {
    background: rgba(31, 41, 55, 1);
    border-color: rgba(255, 255, 255, 0.3);
  }
  
  .gm-style-iw-c {
    background: rgba(31, 41, 55, 0.95) !important;
    color: #d1d5db !important;
  }
}

/* Stili per selettore tipo mappa */
.map-type-selector {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.map-type-selector select {
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 4px;
  outline: none;
}

.map-type-selector select:focus {
  background: rgba(255, 255, 255, 0.1);
}

/* Stili per notifiche */
.google-maps-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  background: rgba(31, 41, 55, 0.95);
  color: white;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  z-index: 10000;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.google-maps-notification.error {
  background: rgba(239, 68, 68, 0.95);
}

.google-maps-notification.success {
  background: rgba(34, 197, 94, 0.95);
}

.google-maps-notification.warning {
  background: rgba(245, 166, 35, 0.95);
}