/* NIKO BATHROOMS MAP - WORKING CSS
 * Fixed: Active states, popup positioning, card display
 */

/* 1. Root Variables */
:root {
  --niko-primary: #4A9B9B;
  --niko-primary-dark: #357575;
  --niko-primary-light: #6BB3B3;
  --niko-white: #ffffff;
  --niko-dark: #2A2A2A;
  --niko-grey-light: #f8f9fa;
  --niko-grey: #e9ecef;
  --niko-text-light: #666666;
  --niko-transition: 0.3s ease;
}

/* 2. Map Container */
#map {
  width: 100% !important;
  height: 100% !important;
  flex: 1 !important;
  min-height: 500px !important;
  position: relative !important;
  max-width: none !important;
}

/* Sidebar Base Styles */
.map_side-bar {
  overflow-y: auto !important;
  background: var(--niko-white) !important;
}

/* 3. Sidebar Styles */
.location-distance_sidebar {
    visibility: hidden; /* Hide element but preserve its space */
    opacity: 0;        /* Make it fully transparent */
    transition: visibility 0s 0.2s, opacity 0.2s linear; /* Smooth transition when shown */
}
.location-distance_sidebar.is--visible {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s, opacity 0.2s linear;
}
/* 3.1. Fixed: Sidebar Location Items - Base Styles only on the outer div */
.location-item_sidebar.w-dyn-item {
  transition: all var(--niko-transition) !important;
  background: var(--niko-white) !important;
  border-left: 4px solid transparent !important;
  cursor: pointer !important;
  position: relative !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--niko-grey) !important;
}

/* 3.2. Hover States - only on the outer div */
.location-item_sidebar.w-dyn-item:hover {
  background: var(--niko-grey-light) !important;
  border-left-color: var(--niko-primary-light) !important;
  transform: translateX(4px) !important;
  box-shadow: 0 4px 12px rgba(74, 155, 155, 0.1) !important;
}

/* 3.3. Fixed: Active States - only on the outer div */
.location-item_sidebar.w-dyn-item.is--active {
  background: linear-gradient(135deg, rgba(74, 155, 155, 0.08), rgba(74, 155, 155, 0.12)) !important;
  border-left: 6px solid var(--niko-primary) !important;
  transform: translateX(6px) !important;
  box-shadow: inset 0 0 0 1px rgba(74, 155, 155, 0.2), 
              0 6px 20px rgba(74, 155, 155, 0.15) !important;
}

/* 3.4. Fixed: Active State Text Styling - only when the outer div is active */
.location-item_sidebar.w-dyn-item.is--active .location-name_sidebar,
.location-item_sidebar.w-dyn-item.is--active [location-name-sidebar] {
  color: var(--niko-primary-dark) !important;
  font-weight: 700 !important;
}

/* 3.5. Typography */
.location-name_sidebar,
[location-name-sidebar] {
  color: var(--niko-dark) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
  transition: all var(--niko-transition) !important;
}

.location-address,
.location-city,
[location-address-sidebar],
[location-city-sidebar] {
  color: var(--niko-text-light) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}

/* 4. Location Cards */
/* 4.1. Fixed: Card Wrappers - map_locations-card_wrapper rules removed */
.locations-map-card-wrapper {
  display: none !important;
  position: relative !important;
}

.locations-map-card-wrapper.is--show {
  display: block !important;
}

/* 4.2. Fixed: Location Cards */
.locations-map-card_item {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.locations-map-card_item.is--show {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: var(--niko-white) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1), 
              0 8px 25px rgba(74, 155, 155, 0.15) !important;
  max-width: 360px !important;
  min-width: 300px !important;
  animation: nikoCardSlideIn 0.4s ease forwards; /* Added forwards to keep end state */
}

/* 5. Mapbox Popups (Click Tooltip/Info) */
/* 5.1. Fixed: Popup Positioning and Styling */
/* Added a more general rule for z-index to ensure it's always above other elements */
.mapboxgl-popup {
    z-index: 10000 !important; /* Ensure popup is on top */
}

/* Remove these transform rules from CSS and control offset in JS */
/*
.niko-branded-popup.mapboxgl-popup.mapboxgl-popup-anchor-bottom {
  transform: translate(-50%, -120%) !important;
}

.niko-branded-popup.mapboxgl-popup.mapboxgl-popup-anchor-top {
  transform: translate(-50%, 20%) !important;
}

.niko-branded-popup.mapboxgl-popup.mapboxgl-popup-anchor-left {
  transform: translate(20%, -50%) !important;
}

.niko-branded-popup.mapboxgl-popup.mapboxgl-popup-anchor-right {
  transform: translate(-120%, -50%) !important;
}
*/

.niko-branded-popup .mapboxgl-popup-content {
  background: var(--niko-white) !important;
  border-radius: 12px !important;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1), 
              0 5px 20px rgba(74, 155, 155, 0.15) !important;
  border: none !important;
  padding: 20px 24px !important;
}

/* 5.2. Fixed: Tooltip Triangle */
.niko-branded-popup .mapboxgl-popup-tip {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.niko-branded-popup.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
  border-top: 10px solid var(--niko-white) !important;
  border-bottom: none !important;
  border-left: 10px solid transparent !important;
  border-right: 10px solid transparent !important;
}

.niko-branded-popup.mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
  border-bottom: 10px solid var(--niko-white) !important;
  border-top: none !important;
  border-left: 10px solid transparent !important;
  border-right: 10px solid transparent !important;
}

.niko-branded-popup.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
  border-right: 10px solid var(--niko-white) !important;
  border-left: none !important;
  border-top: 10px solid transparent !important;
  border-bottom: 10px solid transparent !important;
}

.niko-branded-popup.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
  border-left: 10px solid var(--niko-white) !important;
  border-right: none !important;
  border-top: 10px solid transparent !important;
  border-bottom: 10px solid transparent !important;
}

/* 5.3. Popup Content */
.niko-popup-content {
  text-align: center;
  font-family: inherit;
}

.niko-popup-badge {
  color: var(--niko-primary);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.niko-popup-title {
  font-size: 16px;
  color: var(--niko-dark);
  display: block;
  line-height: 1.3;
  font-weight: 600;
}

/* 5.4. Popup Close Button */
.niko-branded-popup .mapboxgl-popup-close-button {
  color: #999 !important;
  font-size: 18px !important;
  transition: all 0.3s ease !important;
  background: transparent !important;
}

.niko-branded-popup .mapboxgl-popup-close-button:hover {
  color: var(--niko-white) !important;
  background: var(--niko-primary) !important;
}

/* 6. NEW: Hover Tooltip */
.map-tooltip {
    position: absolute;
    background-color: var(--niko-primary); /* Your brand primary color */
    color: var(--niko-white);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none; /* Allows clicks to pass through to map features */
    transform: translate(-50%, -100%); /* Centers horizontally, moves up from cursor */
    z-index: 10000; /* Ensure it's on top of other map elements */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.map-tooltip.is--active {
    opacity: 1;
    visibility: visible;
}


/* 7. Animations */
@keyframes nikoCardSlideIn {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 8. Responsive Styles */
@media (max-width: 480px) {
  .locations-map-card_item.is--show {
    bottom: 12px !important;
    right: 12px !important;
    left: 12px !important;
    max-width: none !important;
    min-width: auto !important;
    width: calc(100% - 24px) !important;
  }
}