/**
 * Mapbox GL Controls Styling
 *
 * Beautiful Gepesat-branded styling for Mapbox GL controls
 * Matches the Leaflet control styling for consistency
 *
 * Features:
 * - Custom style switcher with Gepesat orange branding
 * - Custom layer control for POIs/Geofences
 * - Zoom controls with orange branding
 * - Mobile-responsive design
 * - Smooth animations and transitions
 * - Accessible and touch-friendly
 */

/* ============================================
   ZOOM CONTROLS - GEPESAT BRANDED
   ============================================ */

/* Zoom Control Container */
.mapboxgl-ctrl-group {
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  background: white !important;
  border: none !important;
  overflow: hidden !important;
}

/* Zoom Control Buttons */
.mapboxgl-ctrl-zoom-in,
.mapboxgl-ctrl-zoom-out,
.mapboxgl-ctrl-compass {
  width: 44px !important;
  height: 44px !important;
  background-color: white !important;
  border: none !important;
  border-bottom: 1px solid #E5E7EB !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Remove border from last button */
.mapboxgl-ctrl-compass {
  border-bottom: none !important;
}

/* Zoom Button Icons */
.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon,
.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon,
.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon {
  background-size: 20px 20px !important;
  opacity: 0.8 !important;
  transition: opacity 0.2s ease !important;
}

/* Hover State - Orange Background */
.mapboxgl-ctrl-zoom-in:hover,
.mapboxgl-ctrl-zoom-out:hover,
.mapboxgl-ctrl-compass:hover {
  background-color: #FF7C1E !important; /* Gepesat orange */
}

.mapboxgl-ctrl-zoom-in:hover .mapboxgl-ctrl-icon,
.mapboxgl-ctrl-zoom-out:hover .mapboxgl-ctrl-icon,
.mapboxgl-ctrl-compass:hover .mapboxgl-ctrl-icon {
  opacity: 1 !important;
  filter: brightness(0) invert(1) !important; /* Make icons white on hover */
}

/* Active State */
.mapboxgl-ctrl-zoom-in:active,
.mapboxgl-ctrl-zoom-out:active,
.mapboxgl-ctrl-compass:active {
  background-color: #E66A0F !important; /* Darker orange */
  transform: scale(0.95) !important;
}

/* Disabled State */
.mapboxgl-ctrl-zoom-in[aria-disabled="true"],
.mapboxgl-ctrl-zoom-out[aria-disabled="true"],
.mapboxgl-ctrl-compass[aria-disabled="true"] {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

.mapboxgl-ctrl-zoom-in[aria-disabled="true"]:hover,
.mapboxgl-ctrl-zoom-out[aria-disabled="true"]:hover,
.mapboxgl-ctrl-compass[aria-disabled="true"]:hover {
  background-color: white !important;
}

/* Focus State - Accessibility */
.mapboxgl-ctrl-zoom-in:focus,
.mapboxgl-ctrl-zoom-out:focus,
.mapboxgl-ctrl-compass:focus {
  outline: 3px solid #FF7C1E !important;
  outline-offset: 2px !important;
}

/* ============================================
   UNIFIED LAYER CONTROL - GEPESAT BRANDED
   (Combines Map Styles + Overlay Layers like Leaflet)
   ============================================ */

/* Unified Control Container */
.unified-layer-control {
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  background: white !important;
  font-family: 'Montserrat', Arial, sans-serif !important;
  transition: all 0.3s ease !important;
  border: none !important;
}

.unified-layer-control:hover {
  box-shadow: 0 6px 16px rgba(255, 124, 30, 0.25) !important; /* Orange glow on hover */
}

/* Unified Control Button */
.unified-control-button {
  width: 44px !important;
  height: 44px !important;
  background-color: #FF7C1E !important; /* Gepesat orange */
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.unified-control-button:hover {
  background-color: #E66A0F !important; /* Darker orange on hover */
  transform: scale(1.05) !important;
}

.unified-control-button:active {
  transform: scale(0.95) !important;
}

/* Unified Control Icon */
.unified-control-button i {
  color: white !important;
  font-size: 18px !important;
}

/* ============================================
   STYLE SWITCHER MENU - GEPESAT BRANDED
   ============================================ */

/* Style Menu Container */
.style-switcher-menu {
  position: absolute !important;
  top: 0 !important;
  right: 50px !important;
  background: white !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  min-width: 220px !important;
  z-index: 1 !important;
  padding: 12px !important;
  font-family: 'Montserrat', Arial, sans-serif !important;
}

/* Style Menu Header */
.style-switcher-menu h3 {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #071D4A !important; /* Gepesat navy */
  margin: 0 0 8px 0 !important;
  padding: 0 8px !important;
  background: linear-gradient(55deg, rgba(255, 124, 30, 0.1) 0%, rgba(16, 70, 177, 0.1) 100%) !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
}

/* Style Options */
.style-switcher-menu .style-option {
  width: 100% !important;
  padding: 10px 12px !important;
  margin: 2px 0 !important;
  background: white !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #071D4A !important; /* Gepesat navy */
  transition: all 0.2s ease !important;
  text-align: left !important;
  height: auto !important;
}

.style-switcher-menu .style-option:hover {
  background-color: rgba(255, 124, 30, 0.1) !important;
  color: #FF7C1E !important; /* Gepesat orange */
  transform: translateX(2px) !important;
}

/* Active Style */
.style-switcher-menu .style-option.active {
  background-color: rgba(255, 124, 30, 0.15) !important;
  color: #FF7C1E !important;
  font-weight: 600 !important;
  border-left: 3px solid #FF7C1E !important;
  padding-left: 9px !important; /* Compensate for border */
}

/* Style Icons */
.style-switcher-menu .style-option i {
  color: inherit !important;
  font-size: 16px !important;
  width: 20px !important;
  text-align: center !important;
}

/* ============================================
   LAYER CONTROL - GEPESAT BRANDED
   ============================================ */

/* Layer Control Container */
.layer-control-menu {
  position: absolute !important;
  top: 0 !important;
  right: 50px !important;
  background: white !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  min-width: 220px !important;
  z-index: 1 !important;
  padding: 12px !important;
  font-family: 'Montserrat', Arial, sans-serif !important;
}

/* Layer Control Header */
.layer-control-menu h3 {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #071D4A !important; /* Gepesat navy */
  margin: 0 0 8px 0 !important;
  padding: 8px 12px !important;
  background: linear-gradient(55deg, rgba(255, 124, 30, 0.1) 0%, rgba(16, 70, 177, 0.1) 100%) !important;
  border-radius: 6px !important;
}

/* Layer Options */
.layer-control-menu .layer-option {
  display: flex !important;
  align-items: center !important;
  padding: 10px 12px !important;
  margin: 2px 0 !important;
  cursor: pointer !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #071D4A !important; /* Gepesat navy */
}

.layer-control-menu .layer-option:hover {
  background-color: rgba(255, 124, 30, 0.1) !important;
  color: #FF7C1E !important; /* Gepesat orange */
  transform: translateX(2px) !important;
}

/* Checkbox Styling */
.layer-control-menu input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  border: 2px solid #D1D5DB !important;
  border-radius: 4px !important;
  background-color: white !important;
  cursor: pointer !important;
  margin-right: 10px !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
}

.layer-control-menu input[type="checkbox"]:hover {
  border-color: #FF7C1E !important;
  background-color: rgba(255, 124, 30, 0.05) !important;
}

.layer-control-menu input[type="checkbox"]:checked {
  background-color: #FF7C1E !important;
  border-color: #FF7C1E !important;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>') !important;
  background-size: 16px 16px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Layer Icons */
.layer-control-menu .layer-option i {
  margin-right: 8px !important;
  font-size: 16px !important;
  width: 20px !important;
  text-align: center !important;
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */

@media (max-width: 640px) {
  /* Smaller controls on mobile */
  .mapbox-style-switcher-button,
  .mapbox-layer-control-button {
    width: 40px !important;
    height: 40px !important;
  }

  .mapbox-style-switcher-button i,
  .mapbox-layer-control-button i {
    font-size: 16px !important;
  }

  /* Smaller menus on mobile */
  .style-switcher-menu,
  .layer-control-menu {
    min-width: 180px !important;
    max-width: 220px !important;
    padding: 10px !important;
  }

  .style-switcher-menu .style-option,
  .layer-control-menu .layer-option {
    font-size: 13px !important;
    padding: 8px 10px !important;
  }

  .layer-control-menu input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    margin-right: 8px !important;
  }

  /* Zoom control adjustments */
  .mapboxgl-ctrl-zoom-in,
  .mapboxgl-ctrl-zoom-out,
  .mapboxgl-ctrl-compass {
    width: 40px !important;
    height: 40px !important;
  }

  .mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon,
  .mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon,
  .mapboxgl-ctrl-compass .mapboxgl-ctrl-icon {
    background-size: 18px 18px !important;
  }
}

/* ============================================
   ACCESSIBILITY IMPROVEMENTS
   ============================================ */

/* Focus states for keyboard navigation */
.mapbox-style-switcher-button:focus,
.mapbox-layer-control-button:focus {
  outline: 3px solid #FF7C1E !important;
  outline-offset: 2px !important;
}

.layer-control-menu input[type="checkbox"]:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(255, 124, 30, 0.2) !important;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .mapbox-style-switcher-container,
  .mapbox-layer-control-container,
  .mapbox-style-switcher-button,
  .mapbox-layer-control-button,
  .style-switcher-menu .style-option,
  .layer-control-menu .layer-option,
  .layer-control-menu input[type="checkbox"],
  .mapboxgl-ctrl-zoom-in,
  .mapboxgl-ctrl-zoom-out,
  .mapboxgl-ctrl-compass,
  .unified-control-button,
  .control-section .style-option,
  .control-section .layer-option {
    transition: none !important;
  }

  .mapbox-style-switcher-button:hover,
  .mapbox-layer-control-button:hover,
  .style-switcher-menu .style-option:hover,
  .layer-control-menu .layer-option:hover,
  .mapboxgl-ctrl-zoom-in:active,
  .mapboxgl-ctrl-zoom-out:active,
  .mapboxgl-ctrl-compass:active,
  .unified-control-button:hover,
  .control-section .style-option:hover,
  .control-section .layer-option:hover {
    transform: none !important;
  }
}

/* ============================================
   UNIFIED CONTROL MENU STYLES
   (Leaflet-style combined control)
   ============================================ */

/* CRITICAL: Allow menu to overflow the control container */
.mapboxgl-ctrl-group:has(.unified-control-button) {
  overflow: visible !important;
}

/* Unified Menu Container */
.unified-control-menu {
  position: absolute !important;
  top: 0 !important;
  right: 50px !important;
  background: white !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  min-width: 240px !important;
  z-index: 1 !important;
  padding: 12px !important;
  font-family: 'Montserrat', Arial, sans-serif !important;
}

/* Control Sections */
.control-section {
  margin-bottom: 8px !important;
}

.control-section:last-child {
  margin-bottom: 0 !important;
}

/* Section Headers */
.control-section h3 {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #6B7280 !important; /* Gray */
  margin: 0 0 8px 0 !important;
  padding: 0 8px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Section Separator */
.control-separator {
  border-top: 2px solid #E5E7EB !important;
  margin: 12px 0 !important;
  height: 0 !important;
}

/* Style Options (Radio Buttons) */
.control-section .style-option {
  display: flex !important;
  align-items: center !important;
  padding: 10px 12px !important;
  margin: 2px 0 !important;
  cursor: pointer !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #071D4A !important; /* Gepesat navy */
}

.control-section .style-option:hover {
  background-color: rgba(255, 124, 30, 0.1) !important;
  color: #FF7C1E !important; /* Gepesat orange */
  transform: translateX(2px) !important;
}

/* Selected Style - Prominent Background Highlight */
.control-section .style-option:has(input:checked) {
  background-color: rgba(255, 124, 30, 0.15) !important;
  color: #FF7C1E !important; /* Gepesat orange */
  font-weight: 600 !important;
  border-left: 3px solid #FF7C1E !important;
  padding-left: 9px !important; /* Compensate for border */
}

/* Radio Buttons - HIDDEN */
.control-section .style-option input[type="radio"] {
  display: none !important;
}

/* Style Option Icons */
.control-section .style-option i {
  font-size: 16px !important;
  width: 20px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
  margin-right: 10px !important;
}

/* Style Option Text */
.control-section .style-option span {
  flex: 1 !important;
}

/* Layer Options (Checkboxes) */
.control-section .layer-option {
  display: flex !important;
  align-items: center !important;
  padding: 10px 12px !important;
  margin: 2px 0 !important;
  cursor: pointer !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #071D4A !important; /* Gepesat navy */
}

.control-section .layer-option:hover {
  background-color: rgba(255, 124, 30, 0.1) !important;
  color: #FF7C1E !important; /* Gepesat orange */
  transform: translateX(2px) !important;
}

/* Checkbox Styling */
.control-section .layer-option input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  border: 2px solid #D1D5DB !important;
  border-radius: 4px !important;
  background-color: white !important;
  cursor: pointer !important;
  margin-right: 10px !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
}

.control-section .layer-option input[type="checkbox"]:hover {
  border-color: #FF7C1E !important;
  background-color: rgba(255, 124, 30, 0.05) !important;
}

.control-section .layer-option input[type="checkbox"]:checked {
  background-color: #FF7C1E !important;
  border-color: #FF7C1E !important;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>') !important;
  background-size: 16px 16px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Layer Icons */
.control-section .layer-option i {
  margin-right: 8px !important;
  font-size: 16px !important;
  width: 20px !important;
  text-align: center !important;
}