/* ===== FULLSCREEN: 60% TEXT / 40% IMAGE (hover ile görünür) ===== */

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 .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;
}

/* ===== NAV PILLS: scrollable (tek tanım yeterli) ===== */
.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; }

/* ICONS (CSS'ten yükle) */
.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 dosyasının konumu: /assets/css/...  → svg klasörü: /assets/svg/  */
.explore_widget .icon-drive{ background-image:url('../svg/drive.svg'); }
.explore_widget .icon-walk { background-image:url('../svg/walk.svg'); }

/* Popup içindeki ikonlar da aynı boyutta kalsın */
.explore_widget .mapboxgl-popup-distance .icon{
  width:16px; height:16px; margin-right:6px;
}

/* ===== MOBILE CARD ===== */

@media (max-width:767px){

  /* Harita: overlay'ler için referans */
  .explore_widget .explore_widget-map{
    position: relative !important;
    min-height: 560px !important;
  }

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

  /* CARDS*/
  .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; }

  /* KART: sol küçük görsel + sağ içerik, ultra-compact */
  .explore_widget .on-map-cards .explore_widget-location{
    display: grid !important;
    grid-template-columns: 88px 1fr !important;  /* thumb | content */
    gap: 8px !important;
    align-items: start !important;

    flex: 0 0 284px !important;
    padding: 8px !important;
    margin: 0 !important;
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 14px rgba(0,0,0,.10) !important;
    scroll-snap-align: start;
  }

  /* İç wrapper etkisini kaldır (padding/margin birikmesini engeller) */
  .explore_widget .on-map-cards .explore_widget-location_content{
    display: contents !important;
  }

  /* Büyük kapak görselini gizle; küçük thumb kullan */
  .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: 88px !important; height: 88px !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    grid-column: 1 / 2 !important;
    grid-row: 1 / 3 !important;
  }

  /* Sağ içerik: fazlalıkları kapat */
  .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; }

  /* Başlık + ince çizgi */
  .explore_widget .on-map-cards .explore_widget-location_name{
    margin: 0 !important; padding: 0 !important; min-height: auto !important;
    font-size: 17px !important; line-height: 1.2 !important; font-weight: 500 !important; color:#000 !important;
  }
  .explore_widget .on-map-cards .explore_widget-location_name::after{
    content: ""; display: block; margin-top: 6px; border-bottom: .5px solid #d9d9d9; width: 56%;
  }

  /* Mesafe satırı */
  .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;
  }
}

/* === DESKTOP: responsive left panel (min–max control) === */
@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, ideal %40 */
    --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 view override */
@media (max-width: 767px) {
  .explore_widget-content {
    border-top: 0;
    padding-bottom: 20px;
    padding-top: 0;
  }
}

/* Popup içindeki buton yukarıdan biraz ayrılsın */
.mapboxgl-popup-content .mapboxgl-popup-buttons {
  margin-top: 8px;
}

/* Popup içindeki butonu alta full width yap, minimal görünüm */
.mapboxgl-popup-content .mapboxgl-popup-buttons {
  margin-top: 6px;   /* yukarıdan biraz boşluk */
}

.mapboxgl-popup-content .mapboxgl-popup-buttons .button {
  display: block;
  width: 100%;
  padding: 6px 0;             /* minimal yükseklik */
  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;
}

.mapboxgl-popup-content .mapboxgl-popup-buttons .button:hover {
  background: #eee;
  border-color: #bbb;
}
/* Cluster bubble uses admin button_bg color */
.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 location pulsing marker */
.user-location-marker .pulse {
  width: 20px;
  height: 20px;
  background-color: var(--emosm-hotel); /* use admin marker_main color */
  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;
  }
}

.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;
}

/* === Global Scroll Fix: sadece içerideki gold scroll === */

/* === Explore Widget Scroll Fix === */

/* Container dış scroll kapalı, ama tüm siteye dokunma */
.explore_widget .explore_widget-content {
  overflow: hidden !important;
  height: 100% !important;
}

/* İç liste scroll aktif (altın renkli) */
.explore_widget .explore_widget-locations {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: 100% !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: #b88b5e #fff;   /* gold scroll */
  scrollbar-width: thin;
}

/* Chrome/Safari scrollbar */
.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 modda da aynı davranış */
.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 (important to override previous overflow:hidden) */
  .explore_widget .explore_widget-content {
    overflow: visible !important;
  }

  /* make cards horizontally swipeable */
  .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 284px !important;
    scroll-snap-align: start;
  }
}