/* ================================================
   MAP STYLE TOGGLE - CENTRALIZED STYLES

   This file contains all styles for the map toggle
   component used across the application.

   Components using this:
   - RumbleInfoTop (OngoingEvent)
   - MapSection (StageCreation/Update)
   - BetaManager
   - StageManager
   - UserProfile
   - ProfileHeader
   - StagesList

   DO NOT add map toggle styles elsewhere!
   ================================================ */

/* Main toggle container */
.map-style-toggle-pill {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  cursor: pointer;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

.map-style-toggle-pill:hover {
  opacity: 1;
}

/* Toggle track (background pill) */
.toggle-track {
  position: relative;
  width: 70px; /* Increased for 3 options */
  height: 24px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px;
  border: 1px solid rgba(221, 221, 221, 0.6);
  display: flex;
  align-items: center;
  padding: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.map-style-toggle-pill:hover .toggle-track {
  border-color: #ddd;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Options (icons) */
.toggle-option {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  position: relative;
}

.toggle-option svg {
  transition: color 0.3s ease;
}

.light-option svg {
  color: #666;
}

.dark-option svg {
  color: #666;
}

.satellite-option svg {
  color: #666;
}

/* Thumb (mobile indicator) */
.toggle-thumb {
  position: absolute;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
}

.map-style-toggle-pill.light-active .toggle-thumb {
  transform: translateX(0) translateY(-50%);
}

.map-style-toggle-pill.dark-active .toggle-thumb {
  transform: translateX(24px) translateY(-50%);
}

.map-style-toggle-pill.satellite-active .toggle-thumb {
  transform: translateX(48px) translateY(-50%);
}

.map-style-toggle-pill.light-active .light-option svg {
  color: #f5484d;
}

.map-style-toggle-pill.dark-active .dark-option svg {
  color: #ffd700;
}

.map-style-toggle-pill.satellite-active .satellite-option svg {
  color: #4EA5FF;
}

/* Dark mode styling for the toggle itself */
.map-style-toggle-pill.dark-active .toggle-track {
  background: rgba(60, 60, 60, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: rgba(100, 100, 100, 0.6);
}

.map-style-toggle-pill.dark-active .toggle-thumb {
  background: #333;
}

/* Satellite mode styling */
.map-style-toggle-pill.satellite-active .toggle-track {
  background: rgba(40, 80, 120, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: rgba(78, 165, 255, 0.6);
}

.map-style-toggle-pill.satellite-active .toggle-thumb {
  background: #4EA5FF;
}

/* Accessibility keyboard focus */
.map-style-toggle-pill:focus {
  outline: none;
}

.map-style-toggle-pill:focus-visible {
  outline: 2px solid #f5484d;
  outline-offset: 2px;
}

/* Responsive for mobile */
@media (max-width: 768px) {
  .map-style-toggle-pill {
    top: 5px;
  }

  .toggle-track {
    width: 64px; /* Adjusted for 3 options */
    height: 22px;
  }

  .map-style-toggle-pill.dark-active .toggle-thumb {
    transform: translateX(22px) translateY(-50%);
  }

  .map-style-toggle-pill.satellite-active .toggle-thumb {
    transform: translateX(44px) translateY(-50%);
  }
}

/* Override panels-override.css to ensure correct positioning */
.position-relative > .map-style-toggle-pill,
.createrumble-map-sec > .map-style-toggle-pill,
.main-info-content .map-style-toggle-pill {
  top: 10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: auto !important;
  right: auto !important;
}

/* Specific override for StagesPanel to keep toggle visible */
.expanded-content .rum-data-new-style-container .map-style-toggle-pill {
  display: flex !important;
}

/* ============================================
   FIX FOR BADGE OVERLAY BLOCKING MAP TOGGLE
   ============================================ */

/* Fix for badge overlay container blocking map toggle in OngoingEvent */
.rum-data-new-style-container .badge-overlay-container {
  pointer-events: none !important;
}

.rum-data-new-style-container .badge-overlay-container > * {
  pointer-events: auto !important;
}

/* Ensure map toggle stays clickable with higher z-index */
.rum-data-new-style-container .map-style-toggle-pill {
  z-index: 1000 !important;
  pointer-events: auto !important;
}