:root {
  --primary: #0f6b68;
  /* Accent color: match logo yellow (bright warm yellow) */
  --accent: #ffcc00;
  --muted: #6c757d;
  --bg: #ffffff;
  --surface: #f8f9fa;
  --radius: 10px;
  --max-width-content: 1100px;
}

/* Reusable helpers */
.container.fewo-page {
  max-width: var(--max-width-content);
}

.rounded-lg { border-radius: var(--radius); }

/* Carousel uniform sizing */
#boltenCarousel .carousel-item img,
.carousel .carousel-item img,
.hero img { height: 360px; object-fit: cover; width:100%; }

.features { list-style: none; padding-left: 0; display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 0.4rem; }
.features li { background: var(--surface); padding: 0.35rem 0.6rem; border-radius: 6px; color: #222; display:flex; align-items:center; gap:0.6rem; font-size:0.95rem; }
.feature-item svg.feature-icon, .feature-item svg { width:20px; height:20px; flex: 0 0 20px; color: var(--primary); display:inline-block; }
.feature-item span { display:inline-block; line-height:1.1; }

.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
.gallery-grid img { width:100%; height:160px; object-fit:cover; border-radius:6px; }

/* Sticky booking card on large screens */
.booking-card .btn-primary { background: linear-gradient(90deg,var(--accent), #e6b800); border: none; color: #111; }
.booking-card .btn-primary:hover { background: linear-gradient(90deg,#e6b800, #ccaa00); color: #111; }
/* Allow the booking button to wrap text on small widths */
.booking-card .btn { white-space: normal; }

/* Map helper */
.map { width:100%; height:320px; border-radius:8px; overflow:hidden; background:linear-gradient(180deg,#e9f6f5, #ffffff); }

/* Responsive adjustments */
@media (max-width: 991px) {
  .gallery-grid img { height:120px; }
  .map { height:220px; }
  .fewo-page {
        padding-bottom: 80px;
    }
}

/* Image lightbox styles (global) */
.modal-backdrop.show { background-color: rgba(0,0,0,0.75); }
#imageLightboxModal .modal-dialog { max-width: 95vw; }
#imageLightboxModal .modal-content { background: transparent; border: none; }
#imageLightboxModal .modal-body { padding: 0; display:flex; align-items:center; justify-content:center; }
#imageLightboxModal img { max-width: 95vw; max-height: 90vh; width: auto; height: auto; object-fit: contain; border-radius:8px; display:block; }
#imageLightboxModal .caption { display: none; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.6); position: absolute; left: 1rem; bottom: 1rem; }
#imageLightboxModal.show .caption { display:block; }
#imageLightboxModal .close { background: rgba(0,0,0,0.6); width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.6rem; }
#imageLightboxModal .close:hover { background: rgba(0,0,0,0.8); }

/* ensure gallery items have constrained images inside modal */
.gallery-item { position: relative; }

/* Gallery tile wrapper and overlay for "+N" indicator */
.gallery-tile { position: relative; }
.gallery-tile--hidden { display: none; }
.gallery-overlay { position: absolute; inset: 0; display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,0.45); color: #fff; font-size:1.25rem; font-weight:600; border-radius:6px; }

/* Lightbox navigation buttons */
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index:1052; background: rgba(0,0,0,0.5); border: none; color: #fff; width:48px; height:64px; display:flex; align-items:center; justify-content:center; font-size:2rem; line-height:1; border-radius:6px; }
.lightbox-prev { left: 0.5rem; }
.lightbox-next { right: 0.5rem; }
.lightbox-nav:hover { background: rgba(0,0,0,0.75); }

/* Image wrap to ensure consistent containment and centering */
.lightbox-image-wrap { display:flex; align-items:center; justify-content:center; width:100%; }
#imageLightboxModal img { max-width: 95vw; max-height: 90vh; width: auto; height: auto; object-fit: contain; border-radius:8px; }

/* Make sure hidden thumbs remain accessible in DOM but not visible */
@media (max-width: 767px) {
  .gallery-tile--hidden { display: none !important; }
}

/* Accent button for site (use logo yellow) */
.btn-accent { background: linear-gradient(90deg,var(--accent), #e6b800); color: #111; border: none; }
.btn-accent:hover, .btn-accent:focus { background: linear-gradient(90deg,#e6b800, #ccaa00); color: #111; }

/* Frontpage card tiles */
.front-cards { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin-top:0rem; }
/* Remove extra top margin from Bootstrap container on front-cards */
.front-cards.container { margin-top: 0 !important; }
.front-card { width: 260px; text-decoration: none; color: inherit; }
.front-card .card { position:relative; display:flex; flex-direction:column; height:100%; box-shadow: 0 6px 18px rgba(0,0,0,0.08); border-radius:8px; overflow:hidden; }
.front-card img { width:100%; height:160px; object-fit:cover; display:block; }
.front-card .card-body { flex:1 1 auto; display:flex; flex-direction:column; justify-content:space-between; padding:1rem; }
.front-card .card-title { margin-bottom:0.5rem; }
.front-card .card-text { flex:1 1 auto; margin-bottom:0.7rem; }
.front-card .card-footer-row { display:flex; justify-content:space-between; align-items:center; margin-top:0.5rem; gap:0.5rem; }
.priceTeaser { /* kept for backward compatibility; prefer .price-overlay for front cards */ display:none; }

/* Price overlay on image to avoid footer overlap */
.price-overlay { position:absolute; top:0.6rem; right:0.6rem; z-index:20; background: rgba(255,255,255,0.96); padding:0.35rem 0.6rem; border-radius:8px; font-weight:700; border:1px solid #eee; color:#111; }