/* --- Layout --- */
.page-wrap{ margin-top:70px; margin-bottom:60px; }
.result-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.map-col{ position:sticky; top:90px; height:calc(100vh - 110px); }
#map{ width:100%; height:100%; border-radius:16px; display:block; }
.cards-col{ min-height:300px; }
#sauna-places-list{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px,1fr));
  gap:16px;
}

.btn-outline-dark{
  border-radius: 50px;
}
@media (max-width: 991.98px){
  .desktop-row{ display:none; }
  .mobile-wrap{ display:block; }
  .map-col{ position:static; height:auto; }
}


.card-address {

  font-size: 12px;
}
/* --- Card polish --- */
.card{ border-radius:20px; border:none; }
.sgg-inner-carousel .carousel-item > *{ height:230px; object-fit:cover; border-top-left-radius:12px; border-top-right-radius:12px; }
.sgg-inner-carousel .carousel-control-prev, .sgg-inner-carousel .carousel-control-next{ width:16%; }
.sgg-inner-carousel .carousel-control-prev-icon, .sgg-inner-carousel .carousel-control-next-icon{ filter:drop-shadow(0 2px 6px rgba(0,0,0,.35)); }

/* --- Utilities --- */
.btn-sm{ border-radius:50px; }
.hidden{ display:none !important; }
</style>

<style>
/* ---------- Eksisterende styles / generelt (BEHOLDT) ---------- */
.search-filter{ border-radius:12px; background:#fff !important; min-height:1000px; padding:20px; position:sticky; top:50px; }
.form-check-input { width:1.3em; height:1.3em; margin-right:14px; }
.form-check { margin:0 0 5px; }
.leaflet-popup-content { margin:8px; line-height:1; font-size:1.08333em; min-height:1px; width:auto !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background:white; color:#333; box-shadow:0 3px 14px rgba(0,0,0,0.4); }
.leaflet-container a.leaflet-popup-close-button { position:absolute; top:0; right:0; border:none; text-align:center; width:24px; height:24px; color:#000; background:transparent; display: none;}
.dropdown-item.active, .dropdown-item:active { color:#fff; background:#000; }

.facility-buttons { flex-wrap:wrap; justify-content:space-between; width:100%; margin-top:25px; }
.facility-buttons .facility-filter { width:calc(50% - 10px); margin-bottom:10px; }
.btn.facility-filter { background:#fff; color:#000; border:1.5px solid #dee2e6; }
.btn.facility-filter.active { background:#0c9b87; color:#fff; border:1.5px solid #0c9b87; }

.btn-link{ padding:0 0 0 8px; color:#fff; text-decoration:none; font-weight:700; vertical-align:middle; }
.btn-link:hover,.btn-link:active{ color:#fff; }

.h3, h3 { font-size:1.45rem; }
.img-border { width:100%; height:225px; border-radius:12px; object-fit:cover; }
.lead-undertitel { font-size:1.2rem; margin-top:1rem; }
.breadcrumbs{ display:; }

/* Kortliste grid (beholdt) */
#sauna-places-list{ display:grid !important; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:16px; }
#sauna-places-list .sauna-place{ margin:0 !important; height:100%; }
#sauna-places-list .sauna-place > a{ display:block; height:100%; }
#sauna-places-list .sauna-card{ height:100%; display:flex; flex-direction:column; }
#sauna-places-list .price-section{ margin-top:auto; }

/* Cards (beholdt) */
.sauna-card{ transition:all .3s ease; border:1px solid #e0e6ed; border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.08); height:100%; }
.badge-category{ position:absolute; top:12px; left:12px; background:rgba(255,255,255,.95); color:#495057; font-size:.75rem; font-weight:600; padding:.4rem .8rem; border-radius:20px; border:1px solid rgba(0,0,0,.08); backdrop-filter: blur(8px); }
.heart-btn{ position:absolute; top:12px; right:12px; background:rgba(255,255,255,.95); border:1px solid rgba(0,0,0,.08); color:#6c757d; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all .3s ease; backdrop-filter: blur(8px); }
.heart-btn:hover{ color:#dc3545; transform:scale(1.1); }

.image-overlay{ position:absolute; bottom:0; left:0; right:0; background:linear-gradient(transparent, rgba(0,0,0,.7)); padding:.7rem; color:#fff; display:flex; align-items:center; }
.company-logo{ width:50px; height:50px; border-radius:50%; border:3px solid #fff; background:#fff; object-fit:cover; box-shadow:0 2px 8px rgba(0,0,0,.2); margin-right:1rem; }
.overlay-title{ color:#fff; font-size:1.1rem; font-weight:700; margin:0; text-shadow:0 1px 3px rgba(0,0,0,.5); line-height:1.3; }
.info-text{ color:#6c757d; font-size:.875rem; margin-bottom:0; }
.info-text i{ color:#868e96; margin-right:.25rem; }
.price-section{ background:#fff; border-top:0; padding:.5rem 1rem 1rem 1.25rem; }
.price-label { font-size:.8rem; color:#6c757d; margin-bottom:.25rem; letter-spacing:.5px; }
.price-amount{ font-size:1.4rem; font-weight:800; color:#212529; margin-bottom:.25rem; }

/* ---------- Pris-bobler & clusters (HVID BG) ---------- */
.price-marker {
    background: #fff;
    color: #000;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 20px;
    font-size: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
    border: 1px solid rgba(0, 0, 0, .12);
    white-space: nowrap;
}
.price-marker.active { background:#000; color:#fff; border-color:#000; }
.marker-cluster-small,.marker-cluster-medium,.marker-cluster-large{ background:transparent; }
.marker-cluster div {
    background: #fff;
    color: #000;
    font-weight: 600;
    border-radius: 999px;
    line-height: 30px;
    min-width: 30px;
    text-align: center;
    padding: 0px 7px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
    border: 1px solid rgba(0, 0, 0, .15);
    font-size: 10px;
}

/* ---------- Fullscreen kort ---------- */
.fullscreen-map{
  position: fixed !important;
  top: calc(var(--fs-offset, 0px) + env(safe-area-inset-top)) !important;
  left: 0 !important;
  width: 100vw !important;
  height: calc(100vh - var(--fs-offset, 0px) - env(safe-area-inset-top)) !important;
  z-index: 1020 !important;
  border-radius: 0 !important;
  margin-top: 0 !important;
}
body.map-fullscreen-active{ overflow:hidden; }

/* ---------- Popup ---------- */
.sgg-popup .leaflet-popup-content-wrapper{
  padding:0; border-radius:20px; box-shadow:0 16px 40px rgba(0,0,0,.2); max-width:700px;
}
.sgg-popup .leaflet-popup-content{ margin:0; width:auto !important; }
.sgg-popup .popup-card{ border-radius:20px; overflow:hidden; background:#fff; width:300px; }
.sgg-popup .popup-img{ width:100%; height:240px; object-fit:cover; display:block; }
.sgg-popup .popup-body{ padding:16px 18px 18px; }
.sgg-popup .popup-title { font-size: 1rem; font-weight: 700; margin: 0 0 10px; color: #111; }
.sgg-popup .popup-price{ font-size:1.05rem; color:#111; margin:0; }

/* ---------- Popup adresse (ingen baggrund) ---------- */
.sgg-popup .popup-address {
    font-size: .85rem;
    color: #6c757d;
    margin: 0 0 8px 0;
    line-height: 1.4;
}
.sgg-popup .popup-address i {
    margin-right: 6px;
    color: #6c757d;
}

/* ---------- Popup lokationer (grå baggrund) ---------- */
.sgg-popup .popup-locations {
    display: inline-block;
    background: #f3f4f6;
    color: #374151;
    font-size: .8rem;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 8px;
    margin-top: 4px;
}
.sgg-popup .popup-locations i {
    margin-right: 6px;
    color: #6b7280;
}

/* Close-knap */
.sgg-popup .leaflet-popup-close-button{
  right:10px; top:10px; width:34px; height:34px; line-height:34px;
  background:#fff; color:#000 !important; border-radius:50%; font-size:20px;
  box-shadow:0 2px 8px rgba(0,0,0,.2); opacity:1; z-index:6;
}
.sgg-popup .leaflet-popup-close-button:hover{ background:#fff; color:#000; opacity:1; }
.sgg-popup .carousel-control-prev, .sgg-popup .carousel-control-next{ z-index:4; }

/* ---------- Mobil: map + bottom-sheet ---------- */
.mobile-wrap{ display:none; }
@media (max-width: 991.98px){
  .mobile-wrap{ display:block; }
  :root { --vh: 1svh; --hdr: 0px; }

  .mobile-map {
    position: sticky;
    top: var(--hdr);
    z-index: 1;
    height: calc(var(--vh) * 57);
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
    overflow: hidden;
    background: #f5f7fb;
  }
  .mobile-map.map-mobile-full {
    height: calc((var(--vh) * 100) - var(--hdr));
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  #map-mobile{ width:100%; height:100%; touch-action: pan-x pan-y; margin-top:65px; }

  .mobile-sheet{
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
    background:#faf9f5; border-top-left-radius:18px; border-top-right-radius:18px;
    box-shadow:0 -8px 24px rgba(0,0,0,.08);
    max-height: calc((var(--vh) * 100) - var(--hdr));
    display:flex; flex-direction:column; will-change: transform; transition: transform .22s ease;
  }
  .mobile-sheet.state-expanded{ border-radius: 0; box-shadow: 0 0 0 rgba(0,0,0,.08); }
  .mobile-sheet.state-mid{}
  .mobile-sheet.state-peek{ top: -40px; }
  .mobile-sheet.state-hidden{ display:none; }
  .mobile-sheet.hidden{ opacity:0; transform:translateY(12px); pointer-events:none; }

  .grabber { width:55px; height:5px; border-radius:999px; background:#d1d5db; margin:10px auto 6px; }
  .sheet-header { padding:12px 16px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; touch-action:none; }

  #sauna-places-list-mobile{
    flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding:0 16px 18px; display:grid; grid-template-columns:1fr; gap:16px;
  }
}