/* ============================================================================
   MAPS RESPONSIVE DESIGN
   Complete mobile responsiveness for all map pages
   ============================================================================ */

/* ============================================================================
   MAP CONTAINERS
   ============================================================================ */
#map,
.map-container,
.gmap,
.google-map,
.leaflet-map {
  width: 100% !important;
  height: 500px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

@media (max-width: 1200px) {
  #map,
  .map-container,
  .gmap,
  .google-map,
  .leaflet-map {
    height: 450px !important;
  }
}

@media (max-width: 992px) {
  #map,
  .map-container,
  .gmap,
  .google-map,
  .leaflet-map {
    height: 400px !important;
    border-radius: 10px !important;
  }
}

@media (max-width: 768px) {
  #map,
  .map-container,
  .gmap,
  .google-map,
  .leaflet-map {
    height: 350px !important;
    border-radius: 8px !important;
  }
}

@media (max-width: 576px) {
  #map,
  .map-container,
  .gmap,
  .google-map,
  .leaflet-map {
    height: 300px !important;
    border-radius: 6px !important;
  }
}

@media (max-width: 400px) {
  #map,
  .map-container,
  .gmap,
  .google-map,
  .leaflet-map {
    height: 250px !important;
  }
}

/* ============================================================================
   MAP WRAPPER & PAGE LAYOUT
   ============================================================================ */
.map-page-wrapper {
  display: flex !important;
  gap: 1.5rem !important;
  padding: 1.5rem !important;
}

.map-sidebar {
  width: 350px !important;
  min-width: 350px !important;
  background: white !important;
  border-radius: 12px !important;
  padding: 1.5rem !important;
  box-shadow: 0 2px 15px rgba(0,0,0,0.1) !important;
}

.map-main {
  flex: 1 !important;
  min-width: 0 !important;
}

@media (max-width: 1200px) {
  .map-page-wrapper {
    gap: 1.25rem !important;
    padding: 1.25rem !important;
  }
  
  .map-sidebar {
    width: 320px !important;
    min-width: 320px !important;
  }
}

@media (max-width: 992px) {
  .map-page-wrapper {
    flex-direction: column !important;
    gap: 1rem !important;
    padding: 1rem !important;
  }
  
  .map-sidebar {
    width: 100% !important;
    min-width: 100% !important;
  }
}

@media (max-width: 768px) {
  .map-page-wrapper {
    padding: 0.75rem !important;
  }
  
  .map-sidebar {
    padding: 1rem !important;
    border-radius: 10px !important;
  }
}

@media (max-width: 576px) {
  .map-page-wrapper {
    padding: 0.5rem !important;
  }
  
  .map-sidebar {
    padding: 0.75rem !important;
    border-radius: 8px !important;
  }
}

/* ============================================================================
   MAP INFO WINDOW / POPUP
   ============================================================================ */
.gm-style-iw,
.leaflet-popup-content-wrapper {
  max-width: 300px !important;
}

.map-popup-title {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  margin-bottom: 0.5rem !important;
}

.map-popup-content {
  font-size: 0.9rem !important;
}

@media (max-width: 768px) {
  .gm-style-iw,
  .leaflet-popup-content-wrapper {
    max-width: 250px !important;
  }
  
  .map-popup-title {
    font-size: 1rem !important;
  }
  
  .map-popup-content {
    font-size: 0.85rem !important;
  }
}

@media (max-width: 576px) {
  .gm-style-iw,
  .leaflet-popup-content-wrapper {
    max-width: 200px !important;
  }
  
  .map-popup-title {
    font-size: 0.95rem !important;
  }
  
  .map-popup-content {
    font-size: 0.8rem !important;
  }
}

/* ============================================================================
   MAP CONTROLS & BUTTONS
   ============================================================================ */
.map-controls {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  z-index: 1000 !important;
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.map-control-btn {
  background: white !important;
  border: none !important;
  padding: 12px 18px !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  font-size: 0.9rem !important;
}

@media (max-width: 768px) {
  .map-controls {
    top: 15px !important;
    right: 15px !important;
    gap: 8px !important;
  }
  
  .map-control-btn {
    padding: 10px 14px !important;
    font-size: 0.85rem !important;
    border-radius: 6px !important;
  }
}

@media (max-width: 576px) {
  .map-controls {
    top: 10px !important;
    right: 10px !important;
    gap: 6px !important;
  }
  
  .map-control-btn {
    padding: 8px 12px !important;
    font-size: 0.8rem !important;
  }
}

/* ============================================================================
   MAP SEARCH BOX
   ============================================================================ */
.map-search {
  position: absolute !important;
  top: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 1000 !important;
  width: 400px !important;
  max-width: 90% !important;
}

.map-search-input {
  width: 100% !important;
  padding: 14px 20px !important;
  border: none !important;
  border-radius: 25px !important;
  box-shadow: 0 3px 12px rgba(0,0,0,0.15) !important;
  font-size: 1rem !important;
}

@media (max-width: 768px) {
  .map-search {
    width: 350px !important;
    top: 15px !important;
  }
  
  .map-search-input {
    padding: 12px 16px !important;
    font-size: 0.9rem !important;
  }
}

@media (max-width: 576px) {
  .map-search {
    width: 300px !important;
    top: 10px !important;
  }
  
  .map-search-input {
    padding: 10px 14px !important;
    font-size: 0.85rem !important;
  }
}

/* ============================================================================
   MAP LEGEND
   ============================================================================ */
.map-legend {
  position: absolute !important;
  bottom: 30px !important;
  left: 20px !important;
  z-index: 1000 !important;
  background: white !important;
  padding: 1rem !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15) !important;
  max-width: 250px !important;
}

.map-legend-title {
  font-weight: 600 !important;
  margin-bottom: 0.5rem !important;
  font-size: 1rem !important;
}

.map-legend-item {
  display: flex !important;
  align-items: center !important;
  margin-bottom: 0.4rem !important;
  font-size: 0.9rem !important;
}

.map-legend-color {
  width: 20px !important;
  height: 20px !important;
  border-radius: 4px !important;
  margin-right: 0.5rem !important;
}

@media (max-width: 768px) {
  .map-legend {
    bottom: 20px !important;
    left: 15px !important;
    padding: 0.75rem !important;
    max-width: 200px !important;
  }
  
  .map-legend-title {
    font-size: 0.9rem !important;
  }
  
  .map-legend-item {
    font-size: 0.85rem !important;
  }
  
  .map-legend-color {
    width: 16px !important;
    height: 16px !important;
  }
}

@media (max-width: 576px) {
  .map-legend {
    bottom: 15px !important;
    left: 10px !important;
    padding: 0.5rem !important;
    max-width: 150px !important;
  }
  
  .map-legend-title {
    font-size: 0.85rem !important;
  }
  
  .map-legend-item {
    font-size: 0.8rem !important;
  }
}

/* ============================================================================
   MAP FILTERS PANEL
   ============================================================================ */
.map-filters-panel {
  background: white !important;
  padding: 1.5rem !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
  margin-bottom: 1.5rem !important;
}

.map-filters-title {
  font-weight: 600 !important;
  margin-bottom: 1rem !important;
  font-size: 1.1rem !important;
}

.map-filter-group {
  margin-bottom: 1rem !important;
}

.map-filter-label {
  display: block !important;
  margin-bottom: 0.5rem !important;
  font-weight: 500 !important;
  font-size: 0.9rem !important;
}

@media (max-width: 992px) {
  .map-filters-panel {
    padding: 1.25rem !important;
    margin-bottom: 1.25rem !important;
  }
}

@media (max-width: 768px) {
  .map-filters-panel {
    padding: 1rem !important;
    margin-bottom: 1rem !important;
  }
  
  .map-filters-title {
    font-size: 1rem !important;
  }
  
  .map-filter-label {
    font-size: 0.85rem !important;
  }
}

@media (max-width: 576px) {
  .map-filters-panel {
    padding: 0.75rem !important;
    margin-bottom: 0.75rem !important;
  }
  
  .map-filters-title {
    font-size: 0.95rem !important;
  }
}

/* ============================================================================
   MAP MARKERS LIST
   ============================================================================ */
.map-markers-list {
  max-height: 400px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.map-marker-item {
  padding: 1rem !important;
  border-bottom: 1px solid #e2e8f0 !important;
  cursor: pointer !important;
  transition: background 0.3s ease !important;
}

.map-marker-item:hover {
  background: #f8fafc !important;
}

.map-marker-title {
  font-weight: 600 !important;
  margin-bottom: 0.25rem !important;
  font-size: 1rem !important;
}

.map-marker-address {
  color: #64748b !important;
  font-size: 0.85rem !important;
}

@media (max-width: 768px) {
  .map-markers-list {
    max-height: 350px !important;
  }
  
  .map-marker-item {
    padding: 0.75rem !important;
  }
  
  .map-marker-title {
    font-size: 0.95rem !important;
  }
  
  .map-marker-address {
    font-size: 0.8rem !important;
  }
}

@media (max-width: 576px) {
  .map-markers-list {
    max-height: 300px !important;
  }
  
  .map-marker-item {
    padding: 0.6rem !important;
  }
  
  .map-marker-title {
    font-size: 0.9rem !important;
  }
}

/* ============================================================================
   MAP ROUTE PANEL
   ============================================================================ */
.map-route-panel {
  background: white !important;
  padding: 1.5rem !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
}

.route-step {
  display: flex !important;
  margin-bottom: 1rem !important;
  padding-bottom: 1rem !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.route-step-number {
  width: 30px !important;
  height: 30px !important;
  background: #1e3a8a !important;
  color: white !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 600 !important;
  margin-right: 1rem !important;
  flex-shrink: 0 !important;
}

.route-step-content {
  flex: 1 !important;
}

.route-distance {
  font-weight: 600 !important;
  color: #1e3a8a !important;
  margin-top: 0.5rem !important;
}

@media (max-width: 768px) {
  .map-route-panel {
    padding: 1rem !important;
  }
  
  .route-step {
    margin-bottom: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }
  
  .route-step-number {
    width: 26px !important;
    height: 26px !important;
    font-size: 0.9rem !important;
  }
}

@media (max-width: 576px) {
  .map-route-panel {
    padding: 0.75rem !important;
  }
  
  .route-step {
    font-size: 0.9rem !important;
  }
  
  .route-step-number {
    width: 24px !important;
    height: 24px !important;
    font-size: 0.85rem !important;
    margin-right: 0.75rem !important;
  }
}

/* ============================================================================
   MAP FULLSCREEN MODE
   ============================================================================ */
.map-fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 9999 !important;
}

.map-fullscreen-exit {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  z-index: 10000 !important;
  background: white !important;
  border: none !important;
  padding: 12px 18px !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
  cursor: pointer !important;
}

@media (max-width: 576px) {
  .map-fullscreen-exit {
    top: 10px !important;
    right: 10px !important;
    padding: 10px 14px !important;
  }
}

/* ============================================================================
   MAP LOADING OVERLAY
   ============================================================================ */
.map-loading-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(255,255,255,0.9) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2000 !important;
}

.map-loading-spinner {
  width: 50px !important;
  height: 50px !important;
}

@media (max-width: 576px) {
  .map-loading-spinner {
    width: 40px !important;
    height: 40px !important;
  }
}

/* ============================================================================
   MAP ZOOM CONTROLS
   ============================================================================ */
.map-zoom-controls {
  position: absolute !important;
  right: 20px !important;
  bottom: 100px !important;
  z-index: 1000 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}

.map-zoom-btn {
  width: 40px !important;
  height: 40px !important;
  background: white !important;
  border: none !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.2rem !important;
}

@media (max-width: 768px) {
  .map-zoom-controls {
    right: 15px !important;
    bottom: 80px !important;
  }
  
  .map-zoom-btn {
    width: 36px !important;
    height: 36px !important;
    font-size: 1.1rem !important;
  }
}

@media (max-width: 576px) {
  .map-zoom-controls {
    right: 10px !important;
    bottom: 70px !important;
  }
  
  .map-zoom-btn {
    width: 32px !important;
    height: 32px !important;
    font-size: 1rem !important;
  }
}

/* ============================================================================
   MAP DIRECTIONS INPUT
   ============================================================================ */
.map-directions-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
  margin-bottom: 1.5rem !important;
}

.map-location-input {
  padding: 12px !important;
  border: 2px solid #e2e8f0 !important;
  border-radius: 8px !important;
  font-size: 1rem !important;
}

.map-swap-locations {
  align-self: center !important;
  background: #f1f5f9 !important;
  border: none !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
}

@media (max-width: 576px) {
  .map-directions-form {
    gap: 0.75rem !important;
    margin-bottom: 1rem !important;
  }
  
  .map-location-input {
    padding: 10px !important;
    font-size: 0.9rem !important;
  }
  
  .map-swap-locations {
    width: 36px !important;
    height: 36px !important;
  }
}

/* ============================================================================
   TOUCH OPTIMIZATIONS FOR MAPS
   ============================================================================ */
@media (hover: none) and (pointer: coarse) {
  /* Touch-specific styles */
  .map-control-btn,
  .map-zoom-btn,
  .map-marker-item {
    min-height: 44px !important;
    min-width: 44px !important;
  }
  
  /* Larger touch targets */
  .gm-style-iw button,
  .leaflet-popup-close-button {
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

/* ============================================================================
   LANDSCAPE MODE ADJUSTMENTS
   ============================================================================ */
@media (max-width: 768px) and (orientation: landscape) {
  #map,
  .map-container,
  .gmap,
  .google-map,
  .leaflet-map {
    height: calc(100vh - 100px) !important;
  }
  
  .map-search {
    top: 10px !important;
  }
  
  .map-controls {
    top: 10px !important;
  }
  
  .map-legend {
    bottom: 10px !important;
  }
}

/* ============================================================================
   PRINT STYLES FOR MAPS
   ============================================================================ */
@media print {
  #map,
  .map-container,
  .gmap,
  .google-map,
  .leaflet-map {
    height: 400px !important;
    page-break-inside: avoid !important;
  }
  
  .map-controls,
  .map-search,
  .map-zoom-controls {
    display: none !important;
  }
}