/* =========================================
   1. Fullscreen Layout (60% Text / 40% Image)
   ========================================= */
body .explore_widget.is-fullscreen .explore_widget-container {
  grid-template-columns: 640px 1fr !important;
  height: 100vh !important;
}

.explore_widget:fullscreen .explore_widget-location_content {
  display: grid !important;
  grid-template-columns: 60% 40% !important;
  align-items: center !important;
  width: 100%;
}

.explore_widget:fullscreen .explore_widget-location_image {
  position: static !important;
  right: auto !important;
  top: auto !important;
  width: 100% !important;
  height: 72px !important;
  margin: 0 !important;
  opacity: 0 !important;
  transform: none !important;
  transition: opacity 0.25s ease !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

.explore_widget:fullscreen .explore_widget-location.no-button:hover .explore_widget-location_image,
.explore_widget:fullscreen .explore_widget-location.no-button.is-active .explore_widget-location_image {
  opacity: 1 !important;
}

.explore_widget:fullscreen .explore_widget-location_image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 8px !important;
}

.explore_widget:fullscreen .explore_widget-location_details {
  padding-right: 0 !important;
}

.explore_widget:fullscreen .explore_widget-location_details:before,
.explore_widget:fullscreen .explore_widget-location_details:after {
  left: 36px !important;
  width: calc(100% - 36px) !important;
}

/* =========================================
   2. Nav Pills (Scrollable)
   ========================================= */
.explore_widget-filters {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  white-space: nowrap;
  cursor: grab;
}

.explore_widget-filters::-webkit-scrollbar {
  display: none;
}

.explore_widget-filter {
  flex-shrink: 0;
  white-space: nowrap;
}

/* =========================================
   3. Icons (SVG)
   ========================================= */
.explore_widget .icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 6px;
  vertical-align: middle;
}

/* CSS Location: /assets/css/ -> SVG Location: /assets/svg/ */
.explore_widget .icon-drive { background-image: url('../svg/drive.svg'); }
.explore_widget .icon-walk  { background-image: url('../svg/walk.svg'); }

/* Maintain icon size in popup */
.explore_widget .mapboxgl-popup-distance .icon {
  width: 16px;
  height: 16px;
  margin-right: 6px;
}

/* =========================================
   4. Mobile Card Layout (Ultra Compact)
   ========================================= */
@media (max-width: 767px) {

  /* Map: Reference for overlays */
  .explore_widget .explore_widget-map {
    position: relative !important;
    min-height: 560px !important;
  }

  /* NAV: Floating Header */
  .explore_widget .on-map-nav {
    position: absolute !important;
    top: 4px;
    left: 0;
    right: 0;
    padding: 0 14px !important;
    z-index: 1002 !important;
  }

  /* CARDS: Bottom Horizontal Scroll */
  .explore_widget .on-map-cards {
    position: absolute !important;
    left: 0;
    right: 0;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    padding: 0 8px !important;

    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    z-index: 1001 !important;
  }
  .explore_widget .on-map-cards::-webkit-scrollbar {
    display: none;
  }

  /* CARD: Left thumb + Right content */
  .explore_widget .on-map-cards .explore_widget-location {
    display: grid !important;
    grid-template-columns: 72px 1fr !important;  /* Reduced from 88px */
    gap: 8px !important;
    align-items: start !important;

    flex: 0 0 268px !important; /* Adjusted width */
    padding: 8px !important;
    margin: 0 !important;
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.10) !important;
    scroll-snap-align: start;
  }

  /* Remove inner wrapper layout effects */
  .explore_widget .on-map-cards .explore_widget-location_content {
    display: contents !important;
  }

  /* Hide large cover; use small thumb */
  .explore_widget .on-map-cards .explore_widget-location_image {
    display: none !important;
  }

  .explore_widget .on-map-cards .explore_widget-location_img {
      display: block !important;
      width: 72px !important;
      height: 72px !important;
      aspect-ratio: 1 / 1 !important; /* Forces square shape */
      object-fit: cover !important;
      border-radius: 10px !important;
      grid-column: 1 / 2 !important;
      grid-row: 1 / 3 !important;
    }

  /* Right content: Clean up */
  .explore_widget .on-map-cards .explore_widget-location_details {
    grid-column: 2 / 3 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .explore_widget .on-map-cards .explore_widget-location_details:before,
  .explore_widget .on-map-cards .explore_widget-location_details:after {
    content: none !important;
  }
  
  .explore_widget .on-map-cards .explore_widget-location_index {
    display: none !important;
  }

  /* Title + Hairline */
  .explore_widget .on-map-cards .explore_widget-location_name {
    margin: 0 !important;
    padding: 0 !important;
    min-height: auto !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    color: #000 !important;
  }
  
  .explore_widget .on-map-cards .explore_widget-location_name::after {
    content: "";
    display: block;
    margin-top: 6px;
    border-bottom: 0.5px solid #d9d9d9;
    width: 100%; /* Extended underline */
  }

  /* Distance Row */
  .explore_widget .on-map-cards .explore_widget-location_distance {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 6px !important;
  }
  
  .explore_widget .on-map-cards .explore_widget-location_distance > span {
    margin: 0 !important;
  }
  
  .explore_widget .on-map-cards .explore_widget-location_drive:not(:last-child) {
    border-right: 1px solid #000 !important;
    padding-right: 8px !important;
    margin-right: 8px !important;
  }
}

/* =========================================
   5. Desktop: Responsive Left Panel
   ========================================= */
@media (min-width: 1024px) {
  html, body {
    height: 100% !important;
    overflow: auto !important;
  }

  .explore_widget {
    --panel-width-desktop: clamp(480px, 50%, 800px); /* min 480px, max 800px */
    --map-height-desktop: 90vh;
    --panel-padding-desktop: 40px 32px 32px 32px;
  }

  .explore_widget .explore_widget-container {
    display: grid !important;
    grid-template-columns: var(--panel-width-desktop) 1fr !important;
    height: var(--map-height-desktop) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box;
    overflow: hidden !important;
  }

  .explore_widget .explore_widget-content {
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: var(--panel-padding-desktop) !important;
    margin: 0 !important;
    border-right: 1px solid #eee;
    box-sizing: border-box;
  }

  .explore_widget .explore_widget-map {
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Mobile Content Reset */
@media (max-width: 767px) {
  .explore_widget-content {
    border-top: 0;
    padding-bottom: 20px;
    padding-top: 0;
  }
}

/* =========================================
   6. Popup Styling
   ========================================= */
.mapboxgl-popup-content .mapboxgl-popup-buttons {
  margin-top: 8px;
}

.mapboxgl-popup-content .mapboxgl-popup-buttons .button {
  display: block;
  width: 100%;
  padding: 8px 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.2;
  border: 1px solid #ccc !important;
  border-radius: 6px;
  color: #333;
  text-decoration: none;
  cursor: pointer;
  transition: 0.2s;
}

.mapboxgl-popup-content .mapboxgl-popup-buttons .button:hover {
  background: #eee;
  border-color: #bbb;
}

/* =========================================
   7. Map Markers & User Location
   ========================================= */
/* Cluster Bubbles */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
  background-color: color-mix(in srgb, var(--emosm-marker_main) 60%, transparent) !important;
}

.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
  background-color: var(--emosm-marker_main) !important;
  color: #fff !important;
}

/* User Pulsing Marker */
.user-location-marker .pulse {
  width: 20px;
  height: 20px;
  background-color: var(--emosm-hotel);
  border-radius: 50%;
  position: relative;
}

.user-location-marker .pulse::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--emosm-hotel);
  top: 0;
  left: 0;
  animation: pulse-animation 2s infinite;
  opacity: 0.6;
}

@keyframes pulse-animation {
  0% { transform: scale(1); opacity: 0.6; }
  70% { transform: scale(2); opacity: 0; }
  100% { transform: scale(2); opacity: 0; }
}

/* =========================================
   8. Global Typography & Scroll Fixes
   ========================================= */
.explore_widget-actions {
  background-color: transparent !important;
}

.explore_widget-richtext {
  font-size: 14px !important;
  line-height: 150% !important;
  max-width: none !important;
  width: 100% !important;
}

/* Disable Container Outer Scroll */
.explore_widget .explore_widget-content {
  overflow: hidden !important;
  height: 100% !important;
}

/* Enable Inner List Scroll (Custom Colored) */
.explore_widget .explore_widget-locations {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: 100% !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: var(--emosm-btn-bg) #fff;
  scrollbar-width: thin;
}

.explore_widget .explore_widget-locations::-webkit-scrollbar {
  width: 10px;
}
.explore_widget .explore_widget-locations::-webkit-scrollbar-track {
  background: #fff;
}
.explore_widget .explore_widget-locations::-webkit-scrollbar-thumb {
  background-color: #b88b5e;
  border-radius: 8px;
}

/* Fullscreen Scroll Logic */
.explore_widget.is-fullscreen .explore_widget-content {
  overflow: hidden !important;
}
.explore_widget.is-fullscreen .explore_widget-locations {
  overflow-y: auto !important;
  flex: 1 1 auto;
}

/* Fix: Enable horizontal swipe for mobile cards */
@media (max-width: 767px) {
  /* Allow children to scroll */
  .explore_widget .explore_widget-content {
    overflow: visible !important;
  }

  /* Horizontal swipe container */
  .explore_widget .on-map-cards {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 8px !important;
    padding: 0 8px 12px !important;
  }

  .explore_widget .on-map-cards::-webkit-scrollbar {
    display: none;
  }

  .explore_widget .on-map-cards .explore_widget-location {
    flex: 0 0 268px !important; /* Matches thumbnail calc */
    scroll-snap-align: start;
  }
}