/**
 * Custom styles for Mapbox controls
 * Ensures controls are visible on all devices including mobile
 */

/* Custom fullscreen control */
.rd-custom-fullscreen-control {
  margin: 0;
}

.rd-fullscreen-button {
  width: 29px;
  height: 29px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Fullscreen button - not active state (enter fullscreen) */
.rd-fullscreen-button {
  background-color: #2e99ce !important;
  border-radius: 4px !important;
  position: relative !important;
}

.rd-fullscreen-button span {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: block;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M3,3 L9,3 L9,5 L5,5 L5,9 L3,9 L3,3 Z M3,21 L3,15 L5,15 L5,19 L9,19 L9,21 L3,21 Z M21,3 L21,9 L19,9 L19,5 L15,5 L15,3 L21,3 Z M21,21 L15,21 L15,19 L19,19 L19,15 L21,15 L21,21 Z'/%3E%3C/svg%3E") !important;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* Fullscreen button - active state (exit fullscreen) */
.rd-fullscreen-button.active {
  background-color: #e74c3c !important;
}

.rd-fullscreen-button.active span {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M5,5 L9,9 L7,11 L3,7 L3,11 L1,11 L1,3 L9,3 L9,5 L5,5 Z M9,15 L5,15 L5,19 L9,19 L9,21 L1,21 L1,13 L3,13 L3,17 L7,13 L9,15 Z M15,9 L19,5 L15,5 L15,3 L23,3 L23,11 L21,11 L21,7 L17,11 L15,9 Z M21,13 L23,13 L23,21 L15,21 L15,19 L19,19 L15,15 L17,13 L21,17 L21,13 Z'/%3E%3C/svg%3E") !important;
}

/* Fullscreen map styles */
.rd-map-fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 9999 !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  max-height: none !important;
}

/* In fullscreen mode, make sure controls are visible */
.rd-map-fullscreen .mapboxgl-ctrl-top-right {
  top: 60px !important; /* Push controls down below Safari location bar */
}

/* Style the fullscreen button when in fullscreen mode */
.rd-map-fullscreen .mapboxgl-ctrl-group {
  background-color: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) !important;
}

/* Make the exit fullscreen button more prominent */
.rd-fullscreen-button.active {
  background-color: #2e99ce !important;
}

.rd-fullscreen-button.active span {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z'/%3E%3C/svg%3E") !important;
}

/* When fullscreen is active, hide other page elements */
.rd-map-fullscreen-active {
  overflow: hidden !important;
}

/* Ensure the map takes full height in fullscreen mode */
.rd-map-fullscreen .mapboxgl-map {
  height: 100vh !important;
}

/* Make the button more prominent on mobile */
@media (max-width: 768px) {
  .rd-custom-fullscreen-control {
    bottom: 15px;
    right: 15px;
  }

  .rd-fullscreen-button {
    width: 50px;
    height: 50px;
    background-color: #2e99ce;
  }

  .rd-fullscreen-button span {
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='white'%3E%3Cpath d='M5 5h5v2H7v3H5V5zm14 0h5v5h-2V7h-3V5zM5 19h2v3h3v2H5v-5zm14 0h2v5h-5v-2h3v-3z'/%3E%3C/svg%3E");
  }

  .rd-fullscreen-button.active span {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='white'%3E%3Cpath d='M10 5v2H7v3H5V5h5zm9 0v5h-2V7h-3V5h5zm-9 14v5h5v-2h-3v-3H5zm14 0v5h-5v-2h3v-3h2z'/%3E%3C/svg%3E");
  }

  /* No hover effect for mobile buttons */
  .rd-fullscreen-button:hover {
    background-color: #2e99ce;
  }
}

/* ==========================================================================
   LOGIN TOOLTIP (for logged-out users clicking favorites)
   ========================================================================== */

.rd-fav-login-tooltip {
  z-index: 100000;
  pointer-events: none;
  animation: rd-tooltip-fade 3s ease-out forwards;
}

.rd-fav-login-tooltip span {
  display: block;
  background-color: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

@keyframes rd-tooltip-fade {
  0%, 80% { opacity: 1; }
  100% { opacity: 0; }
}

/* ==========================================================================
   FAVORITE TOAST NOTIFICATION
   ========================================================================== */

.rd-fav-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: #1f2937;
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  z-index: 2147483647;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  pointer-events: none;
}

.rd-fav-toast--visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.rd-fav-toast--success {
  background: #059669;
}

.rd-fav-toast--info {
  background: #6366f1;
}

.rd-fav-toast--error {
  background: #dc2626;
}