/* Map container should be relative for absolute positioning of panels */
.map {
  position: relative;
}

/* When there are more than one location on the map */
.map--more-than-location {
  margin-bottom: 0px !important;
}

/* Nearby Places Panel */
.map-nearby-panel {
  background: white;
  margin: 10px;
  max-width: 300px;
  font-family: Arial, sans-serif;
  transition: background-color 0.3s ease;
  /* Desktop: absolute positioned at top-left */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

.map-nearby-panel--expanded {
  background: white;
}

.map-nearby-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 16px;
  border-bottom: 1px solid #e0e0e0;
  cursor: pointer;
}

.map-nearby-header h3 {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.map-nearby-toggle {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 5px;
  color: #666;
  position: relative;
  width: 40px;
  height: 40px;
}

.map-nearby-toggle:hover {
  color: #333;
}

.map-nearby-toggle::after {
  content: "";
  border-top: 6px solid #666;
  border-left: 4.5px solid transparent;
  border-right: 4.5px solid transparent;
  width: 0;
  height: 0;
  transition: all .3s ease-out;
  display: block;
  position: absolute;
  top: calc(50% - 3px);
  right: 5px;
  transform: rotate(180deg);
}

.map-nearby-toggle:hover::after {
  border-top-color: #333;
}

.map-nearby-toggle--expanded::after {
  transform: rotate(0deg);
}

.map-nearby-content {
  padding: 0;
}

.map-nearby-category {
  padding: 8px 15px;
  cursor: pointer;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.map-nearby-category:hover {
  background-color: #F5F2EF;
}

.map-nearby-category:has(.map-nearby-checkbox-input:checked) {
  background-color: #C7BFB8;
}

.map-nearby-icon {
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.map-nearby-icon svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
  color: #202020;
}

.map-nearby-category label {
  cursor: pointer;
  font-size: 14px;
  color: #333;
  user-select: none;
  flex: 1;
}

.map-nearby-checkbox-input {
  width: 24px;
  height: 24px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB4PSI1IiB5PSI1IiB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHJ4PSIzIiBzdHJva2U9IiMyMDIwMjAiIHN0cm9rZS13aWR0aD0iMiIvPjwvc3ZnPg==") center/contain no-repeat;
  background-color: transparent;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  position: relative;
}

.map-nearby-checkbox-input:checked {
  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB4PSI0IiB5PSI0IiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHJ4PSI0IiBmaWxsPSIjMjAyMDIwIi8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNi43MDcxIDguNzkyODlDMTcuMDk3NiA5LjE4MzQyIDE3LjA5NzYgOS44MTY1OCAxNi43MDcxIDEwLjIwNzFMMTEuMjA3MSAxNS43MDcxQzEwLjgxNjYgMTYuMDk3NiAxMC4xODM0IDE2LjA5NzYgOS43OTI4OSAxNS43MDcxTDcuMjkyODkgMTMuMjA3MUM2LjkwMjM3IDEyLjgxNjYgNi45MDIzNyAxMi4xODM0IDcuMjkyODkgMTEuNzkyOUM3LjY4MzQyIDExLjQwMjQgOC4zMTY1OCAxMS40MDI0IDguNzA3MTEgMTEuNzkyOUwxMC41IDEzLjU4NThMMTUuMjkyOSA4Ljc5Mjg5QzE1LjY4MzQgOC40MDIzNyAxNi4zMTY2IDguNDAyMzcgMTYuNzA3MSA4Ljc5Mjg5WiIgZmlsbD0id2hpdGUiLz48L3N2Zz4=") center/contain no-repeat;
  background-color: transparent;
}

/* Travel Mode Panel */
.map-travel-mode-panel {
  background: white;
  margin: 10px;
  padding: 4px 16px;
  font-family: Arial, sans-serif;
  /* Same position for desktop and mobile: absolute positioned at top-right */
  top: 0;
  right: 0;
  z-index: 10;
}

.map-travel-mode-header {
  display: flex;
  align-items: center;
}

.map-travel-mode-header h3 {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.map-travel-mode-buttons {
  display: flex;
  gap: 10px;
}

.map-travel-mode-btn {
  background: white;
  padding: 8px;
  font-size: 24px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-travel-mode-btn:hover {
  background-color: #F5F2EF;
}

.map-travel-mode-btn[data-active="true"] {
  background-color: #C7BFB8;
  position: relative;
}

/* Directions Search Panel */
.map-directions-search {
  background: white;
  margin: 16px;
  padding: 4px;
  font-family: Arial, sans-serif;
  min-width: 400px;
  max-width: 600px;
  /* Desktop: absolute positioned at bottom-center */
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.map-directions-search-content label {
  color: white;
  font-size: 16px;
  font-weight: 500;
  display: block;
  margin-bottom: 12px;
}

.map-directions-input-group {
  position: relative;
  display: flex;
  align-items: center;  
}

.map-directions-search-icon {
  position: absolute;
  left: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  pointer-events: none;
  z-index: 1;
}

.map-directions-search-icon svg {
  width: 24px;
  height: 24px;
}

.map-directions-input {
  flex: 1;
  padding: 12px 16px 12px 44px;
  border: none;
  font-size: 14px;
  outline: none;
}

.map-directions-input::placeholder {
  color: #999;
}

.map-directions-result {
  display: none;
  padding: 12px;
  background: rgba(255, 255, 255, 0.95);
  border-top: 1px solid #e0e0e0;
}

.map-directions-info {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 15px;
  width: 100%;
}

.map-directions-distance,
.map-directions-duration {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.map-directions-error {
  color: #d32f2f;
  font-size: 14px;
  text-align: center;
}

/* Nearby place info window */
.nearby-infowindow {
  padding: 8px;
  max-width: 200px;
}

.nearby-infowindow h4 {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.nearby-infowindow p {
  margin: 4px 0;
  font-size: 12px;
  color: #666;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  /* Mobile: Position panels below map container in normal flow */
  .map-nearby-panel {
    position: static;
    max-width: 100%;
    margin: 10px;
    order: 3; /* Below search bar */
    background: #f5f2ef;
  }

  /* Travel mode panel stays at top-right on mobile too - no changes needed */

  .map-directions-search {
    position: static;
    min-width: 100%;
    max-width: 100%;
    margin: 10px;
    transform: none;
    order: 2; /* Below map, above nearby */

    @media (max-width: 768px) {
      margin: 0px;
    }
  }

  .map-travel-mode-btn {
    padding: 10px 8px;
    font-size: 20px;
  }

  .map-directions-info {
    gap: 8px;
  }
  
  /* Use flexbox on map container to control order */
  .map {
    display: flex;
    flex-direction: column;
  }
  
  /* Map container should maintain its size */
  .map-container {
    order: 0;
    flex-shrink: 0;
  }
  
  /* Adjust map--wide margin-bottom based on nearby panel expanded state */
  .map.map--wide {
    margin-bottom: 105px; /* Default when collapsed */
  }
  
  .map.map--wide.map--nearby-expanded {
    margin-bottom: 396px; /* When expanded */
  }
  
  /* Fallback using :has() if supported */
  .map.map--wide:has(.map-nearby-panel--expanded) {
    margin-bottom: 396px;
  }

  .map-travel-mode-panel {
    position: relative;
    padding: 0px 16px;
    justify-items: center;
  }

  .map-directions-result {
    padding: 0px;
    margin-top: 0px;
  }
}

/* Animation for markers */
@keyframes markerBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}