/* Shared detail-page UI for saunagus and svømmehaller. */

:root{ --sgg-primary:#0c9b87; }



.badge-category{display:inline-block;margin-top:10px;margin-bottom:8px;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)}

.badge.text-bg-dark a{color:#fff;text-decoration:none}

.badge.text-bg-dark a:hover{text-decoration:underline}

.tab-pane{border-radius:20px;min-height:700px;padding:14px 0 2px;margin-bottom:30px}

#btn-book{background:#15986d;border:0;min-height:42px;margin-right:8px;color:#fff!important;font-weight:700;padding:10px 16px;border-radius:50px}

#btn-website{background:#f2f2f2;border:0;min-height:42px;margin-right:8px;color:#000!important;font-weight:700;padding:10px 16px;border-radius:50px}

.pris-gus{text-align:right;font-weight:800;font-size:2.15rem;line-height:1.2;margin:0}

.pris-fra{text-align:right;font-size:0.85rem;font-weight:500;color:#6b7280;margin:0 0 2px 0}

.meta-line{color:#95a5a6;font-weight:500;font-size:14px;margin:10px 0 8px}

.photo-wrap{padding:8px 0}

.photo-shell{position:relative;border-radius:24px;overflow:hidden}

.photo-grid{display:grid;gap:8px;height:620px;background:#f3f4f6}

.video-container{position:relative;width:100%;height:100%;background:#000;overflow:hidden}

.video-container iframe{position:absolute;top:50%;left:50%;width:177.77%;height:177.77%;min-width:100%;min-height:100%;border:0;transform:translate(-50%,-50%);object-fit:cover}

.photo-grid.grid--1{grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:"p1"}

.photo-grid.grid--2{grid-template-columns:1fr 1fr;grid-template-rows:1fr;grid-template-areas:"p1 p2"}

.photo-grid.grid--3{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;grid-template-areas:"p1 p2" "p1 p3"}

.photo-grid.grid--4{grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;grid-template-areas:"p1 p2 p3" "p1 p4 p4"}

.photo-grid.grid--5{grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;grid-template-areas:"p1 p2 p3" "p1 p4 p5"}

.photo-item{position:relative;background:#ddd;min-width:0;min-height:0}

.photo-item img{width:100%;height:100%;object-fit:cover;object-position:center center;display:block}

.photo-item.photo-1{grid-area:p1}

.photo-item.photo-2{grid-area:p2}

.photo-item.photo-3{grid-area:p3}

.photo-item.photo-4{grid-area:p4}

.photo-item.photo-5{grid-area:p5}

.view-all-btn{position:absolute;right:16px;bottom:16px;background:#fff;border-radius:999px;border:1px solid rgba(0,0,0,.08);padding:10px 14px;font-weight:600;box-shadow:0 6px 20px rgba(0,0,0,.15);font-size:14px;color:#000!important;z-index:10}

.top-actions{position:absolute;right:16px;top:16px;display:flex;gap:8px;z-index:2}

.top-actions .btn{border-radius:999px;padding:8px 12px;background:#fff;border:1px solid rgba(0,0,0,.08);font-weight:600;font-size:14px}

.top-actions .btn i{vertical-align:-2px}

.vertical-timeline .circle-list{counter-reset:item;list-style:none;margin:0;padding:0}

.vertical-timeline .circle-list li{position:relative;margin:.6rem 0 .6rem 2.2rem;padding-left:.6rem}

.vertical-timeline .circle-list li::before{content:counter(item);counter-increment:item;position:absolute;left:-2.2rem;top:.15rem;background:var(--sgg-primary);color:#fff;width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.15)}

.ul-diagnose{width:30%;padding:4px;display:inline-block;vertical-align:top}

.ul-diagnose ul{list-style:none;font-size:16px;margin:5px 0 10px;padding-left:1rem}

.ul-diagnose .top-front-li{padding-bottom:10px}

.ul-diagnose li::before{content:"✓";padding-left:6px;color:var(--sgg-primary);font-weight:800;display:inline-block;width:1.5em;margin-left:-1em;background:#eee;margin-right:10px;border-radius:50%}

.sgg-title-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}

.sgg-title-img{width:60px;height:60px;border-radius:50%;object-fit:cover;object-position:center;flex-shrink:0;margin-top:-5px}

.sgg-sticky-bar{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #e9ecef;box-shadow:0 -4px 12px rgba(0,0,0,.08);transform:translateY(100%);transition:transform .28s ease;z-index:1030}

.sgg-sticky-bar.show{transform:translateY(0)}

.sgg-sticky-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0}

.sgg-sticky-left{display:flex;align-items:center;gap:12px;min-width:0}

.sgg-sticky-title{font-size:1.1rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:clamp(140px,40vw,520px);line-height:1.2}

.sgg-sticky-right{display:flex;align-items:center;gap:10px;flex-shrink:0}

.sgg-sticky-price{margin:0;font-weight:800;font-size:1.35rem;line-height:1;white-space:nowrap}

.sgg-sticky-price span{font-weight:500}

.sgg-sticky-bar #btn-book{background:#15986d;border:0;min-height:42px;color:#fff!important;font-weight:700;padding:10px 16px;border-radius:50px;min-width:115px}

.saunagus-header{margin-top:85px}

.sgg-sticky-bar #btn-book:hover,.sgg-sticky-bar #btn-book:focus{filter:brightness(0.95);text-decoration:none}

.sgg-icon-row{display:flex;flex-wrap:wrap;gap:30px;margin-top:20px}

.sgg-icon-col{flex:1 1 300px}

.sgg-icon-list{list-style:none;padding:0;margin:0}

.sgg-icon-list li{display:flex;align-items:center;gap:15px;margin-bottom:20px;font-size:16px;font-weight:500}

.sgg-icon{width:38px;height:38px;flex-shrink:0}

.top-actions-left{position:absolute;left:16px;top:16px;z-index:2}

.top-actions-left .btn{border-radius:999px;padding:8px 12px;background:#fff;border:1px solid rgba(0,0,0,.08);font-weight:600;font-size:14px}

.top-actions-left .btn i{vertical-align:-2px}

.m-hero-actions{display:none}

.list-group-item{margin-bottom:20px;border-radius:20px!important;min-height:146px}

.sgg-title-icons{font-size:1rem;color:#6c757d;}

.btn-dark{
 color: #fff !important;
 border-radius: 50px;
background-color: #000 !important;
}

.sgg-address-list{list-style:none;padding:0;margin:0 0 16px 0}

.sgg-address-item{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid #f0f0f0}

.sgg-address-item:last-child{border-bottom:none}

.sgg-address-icon{width:20px;height:20px;flex-shrink:0;color:#6b7280;margin-top:2px}

.sgg-address-text{font-size:15px;line-height:1.5;color:#374151}

.sgg-address-label{font-weight:600;color:#111;display:block;margin-bottom:2px}

#exampleModalFullscreen {
  background: #000 !important;
  z-index: 99999 !important;
}

#exampleModalFullscreen .modal-dialog {
  margin: 0;
  max-width: 100%;
  width: 100%;
  height: 100%;
  z-index: 99999;
}

#exampleModalFullscreen .modal-content {
  background: #000 !important;
  border: none;
  border-radius: 0;
  height: 100%;
  z-index: 99999;
}

#exampleModalFullscreen .modal-body {
  background: #000 !important;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  overflow: hidden;
}

.sgg-modal-close {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 999999;
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.95);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease, background 0.2s ease;
}

.sgg-modal-close:hover,
.sgg-modal-close:focus {
  background: #fff;
  transform: scale(1.05);
  outline: none;
}

.sgg-modal-close svg {
  color: #111;
}

#carouselPhotos {
  width: 100%;
  height: 100%;
  background: #000;
  position: relative;
  z-index: 99999;
}

#carouselPhotos .carousel-inner {
  height: 100%;
  background: #000;
}

#carouselPhotos .carousel-item {
  height: 100%;
  background: #000 !important;
}

.sgg-slide-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%;
  padding: 60px 20px;
  box-sizing: border-box;
  background: #000;
}

.sgg-slide-wrap img {
  max-width: 100%;
  max-height: calc(100vh - 120px);
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.sgg-carousel-counter {
  position: fixed;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999999;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

#carouselPhotos .carousel-control-prev,
#carouselPhotos .carousel-control-next {
  width: 80px;
  opacity: 1;
  z-index: 999999;
  background: transparent;
  top: 50%;
  transform: translateY(-50%);
  height: auto;
  padding: 40px 0;
}

.sgg-nav-btn {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease, background 0.2s ease;
}

.sgg-nav-btn svg {
  color: #111;
}

#carouselPhotos .carousel-control-prev:hover .sgg-nav-btn,
#carouselPhotos .carousel-control-next:hover .sgg-nav-btn {
  background: #fff;
  transform: scale(1.05);
}

#carouselPhotos .carousel-control-prev-icon,
#carouselPhotos .carousel-control-next-icon {
  display: none !important;
}

#carouselPhotos .carousel-indicators {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999999;
  margin: 0;
  padding: 10px 16px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 20px;
  display: flex;
  gap: 10px;
  justify-content: center;
}

#carouselPhotos .carousel-indicators button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  opacity: 1;
}

#carouselPhotos .carousel-indicators button:hover {
  background: rgba(255, 255, 255, 0.7);
}

#carouselPhotos .carousel-indicators button.active {
  background: #fff;
  transform: scale(1.2);
}

.sgg-no-images {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #666;
  font-size: 18px;
}

.modal-backdrop {
  background-color: #000 !important;
  z-index: 99998 !important;
}

.modal-backdrop.show {
  opacity: 1 !important;
}

#carouselPhotos {
  touch-action: pan-y pinch-zoom;
}

#carouselPhotos .carousel-item {
  touch-action: pan-y pinch-zoom;
}

.sgg-views-text{font-size:14px;color:#6b7280;display:flex;align-items:center;gap:6px}

.sgg-views-text i{font-size:16px}