/***********************************************************
 *  WIKIMAPPING (Overlay Banner Version)
 *  Option 1 — Legacy Behavior (Map starts at top)
 ***********************************************************/

/***********************************************************
 * 0) PRE-MAP CONTROL HIDE (prevents flash)
 ***********************************************************/
html.pre-map .mapboxgl-ctrl {
  opacity: 0 !important;
  pointer-events: none;
}
.mapboxgl-ctrl {
  transition: opacity .25s ease;
}

/* Pin marker visibility states — matches canvas layer paint expressions.
   Uses !important so inline styles from other refreshMapData() calls
   cannot accidentally override the dimmed/hidden opacity. */
.wm-pin-hidden { opacity: 0.2 !important; }
.wm-pin-dimmed { opacity: 0.25 !important; }
/* Highlighted feature — yellow glow ring behind pin marker */
.wm-pin-highlighted {
  filter: drop-shadow(0 0 6px #ffc107) drop-shadow(0 0 12px #ffc107) !important;
}
/* Keyboard focus ring for pin markers (WCAG 2.4.7) */
.mapboxgl-marker:focus,
.mapboxgl-marker:focus-visible {
  outline: 2px solid #ffc107 !important;
  outline-offset: 2px !important;
}
/* Touch target sizing for markers is handled in JS (layers.js syncPinMarkers)
   rather than CSS, because min-width/min-height on .mapboxgl-marker creates
   invisible padding that blocks mobile touch events on iOS WebKit. */

/* ── Sync highlight: new/changed features from sheet import ──
   Pulsing cyan glow distinguishes recently synced features.
   Dismissed when the user presses "h" (calls clear-sync-highlights API). */
.wm-sync-new {
  filter: drop-shadow(0 0 6px #00bcd4) drop-shadow(0 0 14px #00bcd4) !important;
  animation: wm-sync-pulse 1.5s ease-in-out infinite alternate;
}
.wm-sync-changed {
  filter: drop-shadow(0 0 6px #ff9800) drop-shadow(0 0 14px #ff9800) !important;
  animation: wm-sync-pulse 1.5s ease-in-out infinite alternate;
}
@keyframes wm-sync-pulse {
  0%   { filter: drop-shadow(0 0 4px #00bcd4) drop-shadow(0 0  8px #00bcd4); }
  100% { filter: drop-shadow(0 0 8px #00bcd4) drop-shadow(0 0 18px #00bcd4); }
}
.wm-sync-changed {
  animation-name: wm-sync-pulse-orange;
}
@keyframes wm-sync-pulse-orange {
  0%   { filter: drop-shadow(0 0 4px #ff9800) drop-shadow(0 0  8px #ff9800); }
  100% { filter: drop-shadow(0 0 8px #ff9800) drop-shadow(0 0 18px #ff9800); }
}

/* ── Flat-scroll modal layout ─────────────────────────── */
/* Border is applied conditionally via Bootstrap .border-top class
   (admin gets divider, public gets clean layout) */
.flat-scroll-section-divider {
  margin-top: 1rem;
  padding-top: 1rem;
}

/***********************************************************
 * 1) Base / Reset
 ***********************************************************/
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0; padding: 0;
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  font-family: Arial, sans-serif;
}

/***********************************************************
 * 2) Fullscreen Map — NO padding
 ***********************************************************/
#map-wrapper {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#map {
  position: absolute;
  inset: 0;
  background: #eaeaea;
  z-index: 1; /* banner + UI overlay above */
}

/***********************************************************
 * 3) Banner Overlay System (legacy behavior)
 ***********************************************************/

/* Always centered at top, floating over the map.
   z-index below #button-panel (1500) so menu buttons render above the
   banner when they overlap — matches live/blue server behavior.
   NOTE: #banner-content position is overridden to relative by
   map-banner-layout.css (it lives inside #wm-header-stack). */
#banner-content,
#banner-area {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;

  display: flex;
  justify-content: center;
  align-items: center;

  pointer-events: none; /* banner content clickable, wrapper not */
}

#banner-content > *,
#banner-area > * {
  pointer-events: auto;
}

/* Banner boxes */
.banner {
  background: rgba(255,255,255,0.92);
  padding: 12px 24px;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.15);
  text-align: center;
  max-width: 90vw;
}

.banner--text {
  white-space: nowrap;
  font-size: 1.4rem;
}

.banner--image img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* Constrain images and tables in all modal bodies (TinyMCE content can be wide) */
.modal-body img {
  max-width: 100%;
  height: auto;
}
.modal-body table {
  max-width: 100%;
}

/* ── Table of Contents modal ──────────────────────────────── */
.wm-toc-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.wm-toc-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font: 500 1rem/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #333;
  text-align: left;
  transition: background 0.15s, border-color 0.15s;
}

.wm-toc-card:hover {
  background: #f0f6ff;
  border-color: #007aff;
}

.wm-toc-card i {
  font-size: 1.25rem;
  color: #007aff;
  width: 1.5rem;
  text-align: center;
  flex-shrink: 0;
}

/* On mobile: text fallback */
@media (max-width: 480px) {
  .banner--image { display: none !important; }
  .banner--mobile { display: block !important; }
}

/***********************************************************
 * 4) UI Offsets (NOT map-wrapper)
 *    Classic & Text themes use controls/pill bar.
 ***********************************************************/

/************* Classic / Text — Left Controls *************/
.controls,
#button-panel {
  position: fixed;
  left: 16px;
  z-index: 1500;
  display: flex;
  flex-direction: column;
}

.controls {
  top: var(--banner-clearance, 120px); /* dynamically set by render.js */
  gap: 12px;
}

#button-panel {
  top: var(--banner-clearance, 120px); /* dynamically set by render.js */
  gap: 10px;
}

/* When collapsed, hide every button except the first (Hide/Show Menu) */
#button-panel.collapsed > *:not(:first-child) {
  display: none !important;
}

/* Icons-only collapse: shrink buttons to icon-only squares/circles.
   Shape follows the motif: pill → circle, rounded → rounded-square.
   Height matches the original text button (~38px).                  */
#button-panel.icons-only > .gbtn {
  position: relative;          /* anchor for hover tooltip */
  padding: 0 !important;
  width: 38px;
  height: 38px;
  border-radius: 50% !important;   /* default: circle (pill motif) */
  justify-content: center;
  gap: 0;
}

/* Rounded motif → rounded square instead of circle */
html[data-ui-motif="rounded"] #button-panel.icons-only > .gbtn {
  border-radius: 10px !important;
}

/* Hide label text, then show as tooltip on hover */
#button-panel.icons-only > .gbtn .menu-label {
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  font-size: 0.85rem;
  padding: 6px 10px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease-in-out;
  z-index: 1000;
  width: auto;
}
#button-panel.icons-only > .gbtn:hover .menu-label {
  opacity: 1;
}

/************* Mapbox Top-Right Controls *************/
.mapboxgl-ctrl-top-right {
  top: var(--banner-clearance, 120px) !important; /* dynamically set by render.js */
  right: 12px !important;
  z-index: 1500 !important;
}

/* ── Hover-popup stacking + text overflow ────────────────────
   Popups must float above all markers. Markers use z-index based
   on display_order (up to ~1002 for aggregate layer stacking).
   Normal text wraps at word boundaries. Continuous strings
   (URLs, long tokens) that still exceed the line break mid-word. */
.mapboxgl-popup {
  z-index: 10000 !important;
}
.mapboxgl-popup-content {
  overflow-wrap: break-word;
  word-break: break-word;
  overflow: hidden;
}

/* ── Feature modal text overflow ───────────────────────────── */
#feature-modal .modal-body {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.survey-response-body > div {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/***********************************************************
 * 5) Zoom-to Dropdown (Centered under banner)
 ***********************************************************/
#zoomto-bar {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1600;
}

#zoomto-bar select {
  padding: 6px 10px;
  border: 1px solid #777;
  border-radius: 6px;
  font-size: 1rem;
}

/***********************************************************
 * 6) Sidebar Theme Overrides
 *    Sidebar theme hides banner by default.
 ***********************************************************/
body[data-ui-theme="sidebar"] #banner-content,
body[data-ui-theme="sidebar"] #banner-area {
  display: none !important;
}

/***********************************************************
 * 7) Modal Z-Index Override
 *    Bootstrap modal default (1050) is below the header stack
 *    (2000) and zoom-to (1600). Bump above everything except
 *    the survey panel (3000).
 ***********************************************************/
.modal { z-index: 2500 !important; }
.modal-backdrop { z-index: 2400 !important; }

/***********************************************************
 * 8) Utility
 ***********************************************************/
.hidden { display: none !important; }
.fade-in { opacity: 1 !important; }
.no-pointer { pointer-events: none; }

/***********************************************************
 *  Make text in buttons contrast with color
 ***********************************************************/
:root {
  --button-text-color: #fff; /* default white */
}

/* Pill-buttons (TEXT theme) */
#button-panel .menu-buttons button,
#button-panel .menu-buttons .menu-btn,
.menu-button,
.controls button {
  color: var(--button-text-color) !important;
}

/* Round controls (CLASSIC theme) */
.controls .control-btn,
.controls button {
  color: var(--button-text-color) !important;
}

/* Ensure icons switch to the same contrast color */
#button-panel .menu-buttons i,
.controls i {
  color: var(--button-text-color) !important;
}

/* ======================================================
   Survey Panel (map-view runtime)
   ====================================================== */

#survey-panel {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(0, 0, 0, 0.35);
}

/* Card that slides in */
.survey-panel-card {
  position: absolute;
  top: 0;
  right: 0;
  width: 420px;
  height: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: -2px 0 12px rgba(0,0,0,0.25);
}

/* Header */
.survey-header {
  padding: 12px 16px;
  border-bottom: 1px solid #ddd;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Body */
#survey-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

/* Footer */
.survey-footer {
  padding: 12px 16px;
  border-top: 1px solid #ddd;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

/* Close button */
#survey-close {
  font-size: 20px;
  background: none;
  border: none;
  cursor: pointer;
}

/* Prevent map scroll when survey open */
body.survey-open {
  overflow: hidden;
}

/* Backdrop should NOT capture clicks */
.survey-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  pointer-events: none;   /* 🔑 THIS IS THE FIX */
}

/* Panel must accept interaction */
.survey-panel-card {
  pointer-events: auto;
}

/* Ensure the survey container provides enough space for the footer buttons */
#feature-modal-survey-form-container {
    display: flex;
    flex-direction: column;
    min-height: 300px;
    padding-bottom: 60px; /* Space for the absolute/fixed button */
}

/* Ensure primary buttons inside the modal have consistent min-width.
   NOTE: Do NOT use display/visibility !important here — it blocks
   Bootstrap's d-none utility, which the footer uses to toggle buttons. */
/* Slightly darken Bootstrap primary for better contrast (~4.8:1 vs borderline 4.50:1) */
.btn-primary {
    --bs-btn-bg: #0b5ed7;
    --bs-btn-border-color: #0b5ed7;
    --bs-btn-hover-bg: #0a58ca;
    --bs-btn-hover-border-color: #0a53be;
}
#feature-modal .btn-primary {
    min-width: 120px;
}

/* Visual separator for logout button — distinguish from editing tools.
   Uses margin-top gap since .round-btn sets border:none and overriding
   that on a circle button would look wrong. The gap alone provides
   sufficient visual separation from the editing tool buttons. */
.controls [data-role="btn-logout"] {
    margin-top: 0.75rem;
}

/* Fix for the spinner: ensure it centers correctly within the tab */
.survey-loading-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
}

.survey-response-entry {
  border-top: 1px solid #eee;
  padding: 8px 0;
  margin-top: 8px;
}

.survey-response-meta {
  font-size: 12px;
  margin-bottom: 4px;
}

/* Space between individual answer rows inside a response */
.survey-response-body > div {
  margin-bottom: .5rem;
}
.survey-response-body > div:last-child {
  margin-bottom: 0;
}

.survey-comment-entry {
  border-top: 1px solid #eee;
  padding: 6px 0;
  margin-top: 6px;
}

.survey-comment-meta {
  font-size: 12px;
}

/* ═════════ Public Modal — Warm Humanist Styling ═════════════════
   Applied when the modal has .wm-public-view class (non-admin visitors).
   Goal: welcoming, readable, focused on content — not chrome. */

/* ── Modal frame: softer shadow, warmer corners ─────────────── */
.wm-public-view .modal-content {
  border: none;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

/* ── Header: warm, generous ─────────────────────────────────── */
.wm-public-view .modal-header {
  border-bottom: none;
  padding: 1.5rem 1.5rem 0.5rem;
}
.wm-public-view .modal-title {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: #2c3e50;
  letter-spacing: -0.01em;
}

/* ── Body: breathing room ───────────────────────────────────── */
.wm-public-view .modal-body {
  padding: 0.75rem 1.5rem 1.5rem;
}

/* ── Photos: fill width, constrain vertical ─────────────────── */
.wm-public-view .feature-photo {
  display: block;          /* override inline-block so it fills width */
  text-align: center;
}
.wm-public-view .feature-photo img {
  width: 100%;
  max-height: 280px;
  object-fit: cover;       /* horizontal fills width; vertical crops gracefully */
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.wm-public-view .feature-carousel {
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.wm-public-view .carousel-photo-wrap img {
  width: 100%;
  max-height: 280px;
  object-fit: cover;
}

/* ── "Expand Photo" label — pill badge (replaces icon-only hint) ── */
.wm-public-view .photo-expand-hint,
.wm-public-view .carousel-expand-hint {
  width: auto;
  height: auto;
  border-radius: 14px;
  padding: 4px 10px;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  gap: 4px;
}

/* ── Description: warm readable text ────────────────────────── */
.wm-public-view .wm-description {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #3a3a3a;
}
.wm-public-view .wm-description p {
  margin: 0;
}

/* ── Survey responses: light gray card with rounded corners ─── */
.wm-public-view .survey-response-entry {
  background: #f5f5f7;
  border: none;
  border-radius: 12px;
  padding: 1rem 1.15rem;
  margin-top: 0;
}
.wm-public-view .survey-response-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;             /* compact — fields are inline now */
}
.wm-public-view .survey-response-body > div,
.wm-public-view .wm-field {
  margin-bottom: 0;
}

/* Fields: label and value on the SAME line to minimize scroll */
.wm-public-view .wm-field {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;         /* wraps gracefully on narrow screens */
}
.wm-public-view .wm-field-label {
  display: inline;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8e8e93;
  white-space: nowrap;
  flex-shrink: 0;
}
.wm-public-view .wm-field-label::after {
  content: ' ';            /* visual separator */
}
.wm-public-view .wm-field-value {
  display: inline;
  font-size: 1rem;
  line-height: 1.45;
  color: #1d1d1f;
}

/* ── Reactions: softer pill buttons ─────────────────────────── */
.wm-public-view .btn-outline-primary,
.wm-public-view .btn-outline-secondary {
  border-radius: 20px;
  padding: 0.35rem 0.85rem;
  font-size: 0.85rem;
}

/* ── Comments: 90% width, gentle styling ────────────────────── */
.wm-public-view .flat-scroll-section-divider {
  border-top: 1px solid #eaeaea;
  margin-top: 1rem;
  padding-top: 1rem;
}
.wm-public-view .feature-comments-list {
  width: 90%;
}
.wm-public-view .feature-comment-entry {
  margin-bottom: 0.35rem !important;
  padding-bottom: 0.35rem !important;
}
/* Comments heading */
.wm-public-view h6 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8e8e93;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* ── Comment form: above the list, 90% width ─────────────── */
.wm-public-view .wm-comment-form {
  width: 90%;
}
.wm-public-view .wm-comment-form textarea {
  border-radius: 8px;
  font-size: 0.9rem;
}

/* ── Inline comments: author + text on same line, 2-line clamp ── */
.comment-author {
  white-space: nowrap;
  margin-right: 0.3rem;
}
.comment-text-inline {
  font-size: 0.92rem;
  color: #3a3a3a;
  line-height: 1.4;
}
/* 2-line clamp with ellipsis — uses -webkit-inline-box for inline flow */
.wm-comment-clamp {
  display: -webkit-inline-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}
.wm-comment-more {
  color: #6c757d;
  text-decoration: none;
  white-space: nowrap;
  font-size: 0.8rem;
}
.wm-comment-more:hover {
  text-decoration: underline;
}

/* ── Footer: minimal for public (just Close button) ─────────── */
.wm-public-view .modal-footer,
.wm-public-view .mt-3.pt-3.border-top {
  border-top: none !important;
  padding-top: 0.5rem;
}

/* ── Empty state: warm, friendly ────────────────────────────── */
.wm-public-view .text-muted em {
  font-style: normal;
  color: #8e8e93;
  font-size: 0.95rem;
}
.wm-empty-state {
  text-align: center;
  color: #8e8e93;
  font-size: 0.95rem;
  padding: 1.5rem 1rem;
  margin: 0;
}

/* ═════════ Screenshot Mode (Puppeteer thumbnail capture) ═════════
   Activated by adding ?screenshotMode=true to the URL.
   Hides all UI chrome so only the map + features are visible.
   Uses `html body` prefix for higher specificity than theme rules
   in map-banner-layout.css (e.g. html[data-ui-theme="sidebar"] #topbar). */
html body.screenshot-mode #topbar,
html body.screenshot-mode #sidebar,
html body.screenshot-mode #banner-wrapper,
html body.screenshot-mode #button-panel,
html body.screenshot-mode .controls,
html body.screenshot-mode #zoomto-bar,
html body.screenshot-mode .mapboxgl-control-container,
html body.screenshot-mode .mapboxgl-ctrl-group,
html body.screenshot-mode .mapboxgl-ctrl-attrib,
html body.screenshot-mode .mapboxgl-ctrl-logo,
html body.screenshot-mode .mapboxgl-ctrl {
  display: none !important;
}

/* ═════════ Photo Lightbox (Feature Set 2) ═════════
   Fullscreen overlay for feature & survey-response photos.
   z-index 3500: above feature modal (2500) but below survey panel (9999). */
#wm-photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 3500;
  opacity: 0;
  transition: opacity 0.25s ease;
}
#wm-photo-lightbox.wm-lightbox-visible {
  opacity: 1;
}

.wm-lightbox-backdrop {
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.wm-lightbox-backdrop img {
  max-width: 92vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.5);
  cursor: default;
}

.wm-lightbox-close {
  position: absolute;
  top: 16px; right: 24px;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  color: #fff;
  font-size: 2.5rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.85;
  z-index: 3501;
  border-radius: 50%;
  width: 48px; height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s, background 0.15s;
}
.wm-lightbox-close:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.75);
}

/* ── Lightbox Navigation (prev/next arrows) ─────────────────────── */
.wm-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.45);
  border: none;
  color: #fff;
  font-size: 3rem;
  line-height: 1;
  cursor: pointer;
  z-index: 3502;
  border-radius: 50%;
  width: 52px; height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.15s, background 0.15s;
}
.wm-lightbox-nav:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.7);
}
.wm-lightbox-prev { left: 16px; }
.wm-lightbox-next { right: 16px; }

/* ── Lightbox Photo Counter ("2 / 5") ───────────────────────────── */
.wm-lightbox-counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  background: rgba(0, 0, 0, 0.45);
  padding: 4px 14px;
  border-radius: 20px;
  z-index: 3502;
  user-select: none;
}

/* ── Lightbox: hide nav arrows on narrow screens (touch-swipe instead) ── */
@media (max-width: 576px) {
  .wm-lightbox-nav { display: none; }
}

/* ═════════ Photo Carousel (Feature Set 3 — Gallery Mode) ═════════
   CSS scroll-snap carousel for multi-photo gallery features
   inside the map-view feature modal. */

.feature-carousel {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: #f8f9fa;
}

.carousel-viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;          /* Firefox */
}
.carousel-viewport::-webkit-scrollbar {
  display: none;                  /* Chrome/Safari */
}

.carousel-track {
  display: flex;
}

.carousel-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  text-align: center;
  position: relative;
}
.carousel-photo-wrap {
  display: inline-block;
  position: relative;
  max-width: 100%;
  vertical-align: top;
}
.carousel-photo-wrap img {
  display: block;
  max-width: 100%;
  max-height: 340px;
}
.carousel-caption {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  padding: 5px 14px;
  font-size: 0.85rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  text-align: center;
}

/* ── Carousel nav arrows ──────────────────────────────────────────── */
.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.35);
  border: none;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  width: 38px; height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.15s, background 0.15s;
  z-index: 2;
}
.carousel-nav:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.6);
}
.carousel-nav-prev { left: 8px; }
.carousel-nav-next { right: 8px; }

/* ── Thumbnail strip ──────────────────────────────────────────────── */
.carousel-thumbs {
  display: flex;
  gap: 4px;
  padding: 6px 8px;
  overflow-x: auto;
  background: #f0f0f0;
  scrollbar-width: thin;
}
.carousel-thumb {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 4px;
  border: 2px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity 0.15s, border-color 0.15s;
}
.carousel-thumb:hover { opacity: 0.85; }
.carousel-thumb.active {
  opacity: 1;
  border-color: #0d6efd;
}

/* ── Mobile: hide carousel nav arrows (swipe instead) ─────────────── */
@media (max-width: 576px) {
  .carousel-nav { display: none; }
  .carousel-slide img { max-height: 260px; }
  .carousel-thumb { width: 40px; height: 40px; }
}

/* ── Expand-to-fullscreen hint (carousel + single photo) ─────────── */
.carousel-expand-hint,
.photo-expand-hint {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 2;
  font-size: 0.8rem;
}
.carousel-slide:hover .carousel-expand-hint,
.feature-photo:hover .photo-expand-hint {
  opacity: 0.8;
}
.carousel-expand-hint:hover,
.photo-expand-hint:hover {
  opacity: 1 !important;
  background: rgba(0, 0, 0, 0.75);
}
/* On mobile/touch: always show the hint (no hover) */
@media (hover: none) {
  .carousel-expand-hint,
  .photo-expand-hint {
    opacity: 0.6;
  }
}