@import url("./camper-spots-v11.css");

/* =========================================================
   Camper Spots v12 — desktop fits into one browser viewport
   ========================================================= */
@media (min-width: 981px) {
  html,
  body.camperPage {
    height: 100%;
    min-height: 100%;
  }

  body.camperPage {
    overflow: hidden !important;
  }

  .camperShell {
    box-sizing: border-box !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    padding-top: 14px !important;
    padding-bottom: 12px !important;
    overflow: hidden !important;
  }

  .camperShell > .topbar {
    flex: 0 0 auto !important;
    min-height: 84px !important;
    height: 84px !important;
  }

  .camperHero {
    display: none !important;
  }

  .camperToolbar {
    flex: 0 0 48px !important;
    min-height: 48px !important;
    height: 48px !important;
    margin-top: 16px !important;
    margin-bottom: 0 !important;
  }

  .camperSearch,
  .camperToolbar select {
    height: 48px !important;
  }

  .camperWorkspace {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    margin-top: 12px !important;
    margin-bottom: 0 !important;
    overflow: hidden !important;
    align-items: stretch !important;
  }

  .camperMapCard,
  .camperListPanel {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .camperMapCard {
    display: flex !important;
    position: relative !important;
  }

  .camperMap {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  .camperListPanel {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .camperPanelHead {
    flex: 0 0 58px !important;
    height: 58px !important;
  }

  .camperList {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  /* Legend remains visible without taking too much map space. */
  .camperMapLegend {
    max-height: 152px !important;
    overflow: hidden !important;
  }
}

.camperLocateBtn {
  position: absolute;
  z-index: 1100;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(15, 23, 42, .14);
  border-radius: 999px;
  background: #fff;
  color: #111827;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .14);
  font: 800 24px/1 system-ui, sans-serif;
  cursor: pointer;
}

.camperLocateBtn:focus-visible {
  outline: 3px solid rgba(126, 34, 206, .36);
  outline-offset: 2px;
}

.camperLocateBtn:disabled {
  opacity: .55;
  cursor: wait;
}

@media (max-width: 980px) {
  .camperLocateBtn {
    position: fixed;
    top: calc(max(8px, env(safe-area-inset-top)) + 174px);
    right: 12px;
    z-index: 1500;
  }
}

/* Very short laptop/browser windows: compress header slightly more. */
@media (min-width: 981px) and (max-height: 760px) {
  .camperShell {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .camperShell > .topbar {
    min-height: 74px !important;
    height: 74px !important;
  }

  .camperToolbar {
    flex-basis: 44px !important;
    min-height: 44px !important;
    height: 44px !important;
    margin-top: 10px !important;
  }

  .camperSearch,
  .camperToolbar select {
    height: 44px !important;
  }

  .camperWorkspace {
    margin-top: 8px !important;
  }

  .camperPanelHead {
    flex-basis: 52px !important;
    height: 52px !important;
  }
}

/* Mobile/tablet keeps the existing natural scrolling layout. */
@media (max-width: 980px) {
  body.camperPage {
    overflow-y: auto !important;
  }
}


/* =========================================================
   Camper Spots v13 — account dropdown same behaviour as site
   ========================================================= */
.topbarRight {
  position: relative;
}

.camperAccountWrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  z-index: 1400;
}

.camperAccountWrap .userpill {
  cursor: pointer;
}

.camperAccountWrap.is-open .userpill {
  box-shadow: 0 7px 24px rgba(25, 57, 38, .13);
}

.camperAccountWrap.is-open .caret {
  transform: rotate(180deg);
}

.camperAccountWrap .caret {
  transition: transform .18s ease;
}

.camperAccountMenu {
  position: absolute;
  z-index: 2200;
  top: calc(100% + 10px);
  right: 0;
  width: 210px;
  padding: 8px;
  background: #fff;
  border: 1px solid rgba(31, 80, 48, .13);
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(33, 53, 41, .16);
}

.camperAccountMenu[hidden] {
  display: none !important;
}

.camperAccountMenu a,
.camperAccountMenu button {
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #17211b;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.15;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.camperAccountMenu a:hover,
.camperAccountMenu button:hover {
  background: #f3f7f4;
}

.camperAccountIcon {
  flex: 0 0 19px;
  width: 19px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #26342b;
  font-size: 17px;
  line-height: 1;
}

.camperAccountMenu .camperAccountLogout {
  color: #d62424;
}

.camperAccountMenu .camperAccountLogout .camperAccountIcon {
  color: #d62424;
}

@media (max-width: 680px) {
  .camperAccountMenu {
    position: fixed;
    top: 78px;
    right: 12px;
    width: min(230px, calc(100vw - 24px));
    border-radius: 16px;
  }
}

/* =========================================================
   Camper Spots v14 — mobile full-screen map experience
   ========================================================= */
@media (max-width: 680px) {
  html,
  body.camperPage {
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden !important;
  }

  body.camperPage {
    background: #edf4ef !important;
  }

  .camperShell {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  /* Map becomes the entire mobile screen. */
  .camperWorkspace {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    z-index: 1 !important;
  }

  .camperMapCard {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  .camperMap {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    border-radius: 0 !important;
  }

  /* Mobile does not render the long right-hand/list panel. */
  .camperListPanel {
    display: none !important;
  }

  /* Compact floating Voyatale header. */
  .camperPage .topbar {
    position: fixed !important;
    top: max(8px, env(safe-area-inset-top)) !important;
    left: 10px !important;
    right: 10px !important;
    z-index: 1600 !important;
    width: auto !important;
    min-height: 58px !important;
    height: 58px !important;
    padding: 6px 9px 6px 13px !important;
    margin: 0 !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.94) !important;
    backdrop-filter: blur(14px) !important;
    box-shadow: 0 9px 28px rgba(24,58,36,.16) !important;
  }

  .camperPage .brandLogo {
    width: auto !important;
    max-width: 118px !important;
    height: 30px !important;
    object-fit: contain !important;
  }

  .camperPage .userpill {
    min-width: 54px !important;
    width: 54px !important;
    height: 46px !important;
    padding: 4px !important;
    border-radius: 16px !important;
    justify-content: center !important;
  }

  .camperPage .userpill > div:not(.caret),
  .camperPage .userpill .caret {
    display: none !important;
  }

  .camperPage .userpill img {
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
  }

  /* Search controls float above the map. */
  .camperToolbar {
    position: fixed !important;
    z-index: 1500 !important;
    top: calc(max(8px, env(safe-area-inset-top)) + 68px) !important;
    left: 10px !important;
    right: 10px !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 132px !important;
    gap: 7px !important;
    width: auto !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .camperSearch,
  .camperToolbar select {
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.96) !important;
    border: 1px solid rgba(27,71,39,.12) !important;
    box-shadow: 0 6px 18px rgba(24,58,36,.12) !important;
    backdrop-filter: blur(12px) !important;
  }

  .camperCount {
    display: none !important;
  }

  .camperHero {
    display: none !important;
  }

  .camperMapLegend {
    display: none !important;
  }

  /* Search-this-area stays available below search controls. */
  .camperSearchAreaBtn {
    position: fixed !important;
    top: calc(max(8px, env(safe-area-inset-top)) + 120px) !important;
    left: 50% !important;
    bottom: auto !important;
    z-index: 1500 !important;
    transform: translateX(-50%) !important;
    min-height: 38px !important;
    white-space: nowrap !important;
    background: #21854e !important;
    color: #fff !important;
    box-shadow: 0 8px 22px rgba(18,91,49,.26) !important;
  }

  /* Keep Leaflet controls away from the floating site controls. */
  .leaflet-top.leaflet-left {
    top: 160px !important;
    left: 4px !important;
  }

  .leaflet-control-attribution {
    font-size: 8px !important;
  }

  /* Bottom place preview — first tap on map marker. */
  .camperMobilePreview {
    position: fixed !important;
    z-index: 2100 !important;
    left: 10px !important;
    right: 10px !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    pointer-events: none;
  }

  .camperMobilePreview[hidden] {
    display: none !important;
  }

  .camperMobilePreviewCard {
    pointer-events: auto;
    width: 100%;
    min-height: 108px;
    display: grid;
    grid-template-columns: 104px minmax(0,1fr) 22px;
    gap: 10px;
    align-items: stretch;
    padding: 9px;
    border: 1px solid rgba(20,65,38,.13);
    border-radius: 18px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 15px 42px rgba(19,47,29,.24);
    backdrop-filter: blur(16px);
    color: #17231b;
    text-align: left;
    overflow: hidden;
  }

  .camperMobilePreviewMedia {
    width: 104px;
    height: 92px;
    border-radius: 13px;
    overflow: hidden;
    background: #e8efea;
  }

  .camperMobilePreviewMedia > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .camperMobilePreviewPlaceholder,
  .camperMobilePreviewPlaceholder .camperSpotPhoto {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    place-items: center !important;
    background: #edf3ef !important;
  }

  .camperMobilePreviewPlaceholder img {
    width: 48px !important;
    height: 54px !important;
    object-fit: contain !important;
  }

  .camperMobilePreviewInfo {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .camperMobilePreviewTop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
  }

  .camperMobilePreviewType {
    color: #2e8651;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .02em;
  }

  .camperMobilePreviewRating {
    color: #e5a400;
    font-size: 10px;
    font-weight: 850;
    white-space: nowrap;
  }

  .camperMobilePreviewTitle {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    line-height: 1.18;
    margin-bottom: 5px;
  }

  .camperMobilePreviewAddress,
  .camperMobilePreviewMeta {
    display: block;
    color: #637068;
    font-size: 10px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .camperMobilePreviewMeta {
    margin-top: 4px;
    color: #263e2d;
    font-weight: 800;
  }

  .camperMobilePreviewArrow {
    align-self: center;
    color: #758078;
    font-size: 30px;
    line-height: 1;
  }

  /* Second tap opens a genuine full-screen place detail. */
  .camperDetailBackdrop {
    inset: 0 !important;
    padding: 0 !important;
    background: #f7f9f7 !important;
    backdrop-filter: none !important;
  }

  .camperDetail {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overscroll-behavior: contain;
  }

  .camperDetailClose {
    position: fixed !important;
    top: calc(10px + env(safe-area-inset-top)) !important;
    right: 10px !important;
    z-index: 9500 !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.95) !important;
    box-shadow: 0 5px 18px rgba(0,0,0,.16) !important;
  }

  .camperDetailCarousel,
  .camperDetailCarouselTrack .camperDetailHero {
    height: min(42vh, 330px) !important;
  }

  .camperDetailContent {
    padding: 18px 16px calc(30px + env(safe-area-inset-bottom)) !important;
  }

  /* Account dropdown still floats above the map. */
  .camperAccountMenu {
    z-index: 2600 !important;
  }
}


/* =========================================================
   Camper Spots v15 — persistent mobile preview + swipe cards
   ========================================================= */
@media (max-width: 680px) {
  .camperMobilePreviewCard {
    touch-action: pan-y;
    will-change: transform, opacity;
    transition: transform .18s ease, opacity .18s ease;
  }

  .camperMobilePreviewCard.is-swiping {
    transition: none !important;
  }

  .camperMobilePreviewCard.swipe-left {
    transform: translateX(-38px) !important;
    opacity: .35 !important;
  }

  .camperMobilePreviewCard.swipe-right {
    transform: translateX(38px) !important;
    opacity: .35 !important;
  }

  .camperMobilePreview::after {
    content: "‹  Viipa kohtade vahel  ›";
    display: block;
    width: max-content;
    max-width: calc(100vw - 40px);
    margin: 5px auto 0;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(20, 45, 28, .76);
    color: #fff;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .01em;
    pointer-events: none;
  }
}


/* v16: preview must stay above Leaflet and never be dismissed by map gestures */
@media (max-width:680px){
  .camperMobilePreview{z-index:3000!important;pointer-events:none!important;}
  .camperMobilePreviewCard{pointer-events:auto!important;touch-action:pan-y!important;}
}


/* =========================================================
   Camper Spots v17 — desktop header + compact legend cleanup
   ========================================================= */
@media (min-width: 981px) {
  /* Keep language + profile inside the topbar grid instead of the old
     absolute-positioned layout that can overlap the toolbar below. */
  .camperPage .topbar {
    grid-template-columns: auto minmax(0,1fr) auto !important;
    align-items: center !important;
    column-gap: 18px !important;
    overflow: visible !important;
  }

  /* The source logo is visually enlarged with a transform in styles.css.
     Keep its transparent transformed pixels from covering the filter buttons. */
  .camperPage .topbar > .brand,
  .camperPage .topbar .brand {
    position: relative !important;
    width: 230px !important;
    min-width: 230px !important;
    max-width: 230px !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    overflow: visible !important;
  }

  .camperPage .topbar .brandLogo {
    pointer-events: none !important;
  }

  .camperPage .topbarRight {
    position: static !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    justify-self: end !important;
    align-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    z-index: 6000 !important;
  }

  .camperPage .langSelect,
  .camperPage .camperAccountWrap {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  .camperPage .langBtn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    flex: 0 0 32px !important;
    margin: 0 !important;
  }

  .camperPage .userpill {
    min-width: 196px !important;
    width: auto !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 6px 9px !important;
    gap: 8px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .camperPage .userpill img {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
  }

  .camperPage .userpill .name {
    font-size: 12px !important;
    line-height: 1.1 !important;
  }

  .camperPage .userpill .small {
    margin-top: 2px !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
  }

  .camperPage .userpill .caret {
    margin-left: auto !important;
  }

  .camperAccountMenu {
    top: calc(100% + 8px) !important;
    right: 0 !important;
  }

  /* Compact, vertically aligned map legend. */
  .camperMapLegend {
    left: 14px !important;
    bottom: 14px !important;
    width: 220px !important;
    max-width: 220px !important;
    min-width: 0 !important;
    padding: 10px 12px !important;
    gap: 7px !important;
    border-radius: 14px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-content: start !important;
  }

  .camperMapLegend::before {
    display: none !important;
  }

  .camperLegendItem {
    display: grid !important;
    grid-template-columns: 30px minmax(0,1fr) !important;
    align-items: center !important;
    justify-items: start !important;
    gap: 9px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.1 !important;
  }

  .camperLegendItem > img {
    display: block !important;
    width: 28px !important;
    height: 32px !important;
    max-width: 28px !important;
    max-height: 32px !important;
    object-fit: contain !important;
    object-position: center !important;
    justify-self: center !important;
    align-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .camperLegendItem > span {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 1px !important;
    margin: 0 !important;
  }

  .camperLegendItem b {
    font-size: 11px !important;
    line-height: 1.08 !important;
    margin: 0 !important;
  }

  .camperLegendItem small {
    font-size: 9px !important;
    line-height: 1.05 !important;
    margin: 0 !important;
  }
}


/* =========================================================
   Around me — current location, 30 km radius
   ========================================================= */
.camperAroundMeBtn {
  position: absolute;
  z-index: 900;
  top: 92px;
  left: 12px;
  width: 54px;
  min-height: 54px;
  padding: 7px 4px 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 1px solid rgba(20, 55, 35, .16);
  border-radius: 12px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 4px 14px rgba(25,55,36,.14);
  color: #6f7897;
  cursor: pointer;
}

.camperAroundMeBtn:hover { background: #fff; }
.camperAroundMeBtn:disabled { cursor: wait; opacity: .72; }

.camperAroundMeIcon {
  position: relative;
  display: block;
  width: 22px;
  height: 22px;
  border: 3px solid currentColor;
  border-radius: 50%;
  box-sizing: border-box;
}
.camperAroundMeIcon::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  left: 5px;
  top: 5px;
  border-radius: 50%;
  background: currentColor;
}
.camperAroundMeIcon::after {
  content: "";
  position: absolute;
  inset: -7px;
  background:
    linear-gradient(currentColor,currentColor) center top / 3px 7px no-repeat,
    linear-gradient(currentColor,currentColor) center bottom / 3px 7px no-repeat,
    linear-gradient(currentColor,currentColor) left center / 7px 3px no-repeat,
    linear-gradient(currentColor,currentColor) right center / 7px 3px no-repeat;
}
.camperAroundMeLabel {
  font-size: 8px;
  line-height: 1;
  font-weight: 800;
  white-space: nowrap;
}
.camperAroundMeBtn.is-loading .camperAroundMeIcon { animation: camperAroundSpin .8s linear infinite; }
@keyframes camperAroundSpin { to { transform: rotate(360deg); } }

.camperAroundMeLocation {
  stroke: #fff;
  fill: #2687ff;
}

@media (max-width: 680px) {
  .camperAroundMeBtn {
    position: fixed !important;
    top: calc(max(8px, env(safe-area-inset-top)) + 218px) !important;
    left: 14px !important;
    width: 48px;
    min-height: 48px;
    border-radius: 12px;
    z-index: 1500 !important;
  }
  .camperAroundMeLabel { display: none; }
}

/* =========================================================
   Camper Spots — visible place-type buttons replace search
   and the former type dropdown on desktop/tablet.
   ========================================================= */
.camperToolbar {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
}

.camperTypeFilterSelect {
  display: none !important;
}

.camperTypeFilterBar {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 2px;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}

.camperTypeFilterBar::-webkit-scrollbar {
  display: none;
}

.camperTypeFilterBtn {
  flex: 0 0 auto;
  min-width: max-content;
  height: 36px;
  padding: 0 8px 0 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid #dfe6e1;
  border-radius: 999px;
  background: #fff;
  color: #26342b;
  box-shadow: 0 3px 10px rgba(26,63,39,.05);
  font: 600 11px/1.1 Inter, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}

.camperTypeFilterBtn:hover {
  transform: translateY(-1px);
  border-color: rgba(47,128,76,.48);
}

.camperTypeFilterBtn:focus-visible {
  outline: 3px solid rgba(47,128,76,.18);
  outline-offset: 2px;
}

.camperTypeFilterBtn.is-active {
  border-color: #2f804c;
  background: #eaf6ed;
  color: #245b38;
  box-shadow: 0 7px 18px rgba(40,100,58,.12);
}

.camperTypeFilterBtn img {
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  object-fit: contain;
}

.camperTypeFilterBtnAll {
  min-width: 94px;
  padding-inline: 12px;
}

/* Desktop: keep map markers and result cards visually connected on hover. */
@media (min-width: 981px) and (hover: hover) and (pointer: fine) {
  .leaflet-marker-icon.vgCamperMarker .vgPlaceMarker {
    transform-origin: 50% 100%;
    transition: transform .16s ease, filter .16s ease, opacity .16s ease !important;
  }

  .leaflet-marker-icon.vgCamperMarker.is-hover-focused .vgPlaceMarker {
    transform: translateY(-5px) scale(1.45) !important;
    filter: drop-shadow(0 12px 14px rgba(22, 55, 35, .38)) !important;
    opacity: 1 !important;
  }

  .leaflet-marker-icon.vgCamperMarker.is-hover-muted .vgPlaceMarker {
    transform: scale(.66) !important;
    filter: drop-shadow(0 2px 3px rgba(22, 55, 35, .14)) !important;
    opacity: .42 !important;
  }

  .camperSpotCard.is-hover-focused {
    position: relative;
    z-index: 2;
    transform: translateY(-2px) scale(1.012) !important;
    border-color: #2f804c !important;
    background: #f2faf4 !important;
    box-shadow: 0 14px 32px rgba(35, 103, 55, .20) !important;
    opacity: 1 !important;
  }

  .camperSpotCard.is-hover-muted {
    transform: scale(.985) !important;
    opacity: .52;
  }
}

/* =========================================================
   Camper Spots v18 — resilient first-party mobile map shell
   ========================================================= */
@media (max-width: 680px) {
  html,
  body.camperPage {
    height: 100vh !important;
    min-height: 100vh !important;
  }

  @supports (height: 100dvh) {
    html,
    body.camperPage {
      height: 100dvh !important;
      min-height: 100dvh !important;
    }
  }

  body.camperPage .camperShell {
    height: 100vh !important;
    max-height: 100vh !important;
  }

  @supports (height: 100dvh) {
    body.camperPage .camperShell {
      height: 100dvh !important;
      max-height: 100dvh !important;
    }
  }

  body.camperPage .v2PlacesSwitcher {
    position: fixed !important;
    top: calc(max(8px, env(safe-area-inset-top)) + 66px) !important;
    left: 10px !important;
    right: 10px !important;
    z-index: 1550 !important;
    width: auto !important;
    margin: 0 !important;
  }

  body.camperPage .camperToolbar {
    top: calc(max(8px, env(safe-area-inset-top)) + 178px) !important;
  }

  body.camperPage .camperWorkspace {
    top: calc(max(8px, env(safe-area-inset-top)) + 224px) !important;
    bottom: calc(66px + env(safe-area-inset-bottom)) !important;
    height: auto !important;
  }

  body.camperPage .camperMapCard,
  body.camperPage .camperMap {
    height: 100% !important;
    min-height: 0 !important;
  }

  body.camperPage .camperLocateBtn {
    top: calc(max(8px, env(safe-area-inset-top)) + 236px) !important;
  }

  body.camperPage .leaflet-top.leaflet-left {
    top: 10px !important;
    left: 4px !important;
  }

body.camperPage > nav[aria-label="Voyatale main pages"] {
    display: none !important;
  }
}

/* =========================================================
   Camper Spots v19 — measured mobile sequence
   header -> filters -> map -> bottom navigation
   ========================================================= */
@media (max-width: 767px) {
  html,
  body.camperPage {
    width: 100% !important;
    height: 100vh !important;
    min-height: 100vh !important;
    overflow: hidden !important;
  }

  @supports (height: 100dvh) {
    html,
    body.camperPage {
      height: 100dvh !important;
      min-height: 100dvh !important;
    }
  }

  body.camperPage .camperShell {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100vh !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  @supports (height: 100dvh) {
    body.camperPage .camperShell {
      height: 100dvh !important;
    }
  }

  body.camperPage .camperHero,
  body.camperPage .v2PlacesSwitcher,
  body.camperPage .v2PlacesViews,
  body.camperPage .camperListPanel,
  body.camperPage > nav[aria-label="Voyatale main pages"] {
    display: none !important;
  }

  body.camperPage .v2PlacesDiscovery {
    display: block !important;
    width: 100% !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.camperPage .camperToolbar {
    position: fixed !important;
    z-index: 1550 !important;
    top: var(--camper-mobile-header-bottom, 66px) !important;
    left: 0 !important;
    right: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 3px 10px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: 0 1px 0 rgba(25,31,28,.09) !important;
  }

  body.camperPage .camperTypeFilterBar {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    height: 38px !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 1px 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x !important;
  }

  body.camperPage .camperTypeFilterBar::-webkit-scrollbar {
    display: none;
  }

  body.camperPage .camperWorkspace {
    position: fixed !important;
    z-index: 1 !important;
    top: var(--camper-mobile-filter-bottom, 110px) !important;
    right: 0 !important;
    bottom: var(--camper-mobile-nav-height, 66px) !important;
    left: 0 !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.camperPage .camperMapCard,
  body.camperPage .camperMap {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  body.camperPage .leaflet-top.leaflet-left {
    top: 10px !important;
    left: 4px !important;
  }

  body.camperPage .camperLocateBtn {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    bottom: auto !important;
    left: auto !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  body.camperPage .camperSearchAreaBtn {
    position: absolute !important;
    z-index: 1400 !important;
    top: auto !important;
    right: auto !important;
    bottom: 14px !important;
    left: 50% !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content !important;
    max-width: calc(100% - 24px) !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    transform: translateX(-50%) !important;
    overflow: hidden;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #7d0088, #ff7900) !important;
    box-shadow: 0 10px 24px rgba(93,20,99,.24) !important;
    color: #fff !important;
    font: 800 13px/1.15 Inter, sans-serif !important;
    text-align: center;
    white-space: nowrap !important;
  }

  body.camperPage .camperSearchAreaBtn[hidden] {
    display: none !important;
  }

  body.camperPage .camperSearchAreaBtn:disabled {
    cursor: wait;
    opacity: .76 !important;
  }
}