.cameralla-wrapper {
  max-width: 1100px;

  margin: 0 auto;

  padding: 0;

  overflow: visible;
}

.cameralla-wrapper:not(.cameralla-is-inview) .cameralla-map-title,
.cameralla-wrapper:not(.cameralla-is-inview) .cameralla-map-description,
.cameralla-wrapper:not(.cameralla-is-inview) .cameralla-map-header-label,
.cameralla-wrapper:not(.cameralla-is-inview) .cameralla-map-stage {
  opacity: 0;
}

.cameralla-wrapper:not(.cameralla-is-inview) .cameralla-map-title,
.cameralla-wrapper:not(.cameralla-is-inview) .cameralla-map-description,
.cameralla-wrapper:not(.cameralla-is-inview) .cameralla-map-header-label {
  transform: translateY(18px);
}

.cameralla-wrapper:not(.cameralla-is-inview) .cameralla-map-stage {
  transform: translateY(24px) scale(0.98);
}

html.elementor-html .cameralla-wrapper:not(.cameralla-is-inview) .cameralla-map-title,
html.elementor-html .cameralla-wrapper:not(.cameralla-is-inview) .cameralla-map-description,
html.elementor-html .cameralla-wrapper:not(.cameralla-is-inview) .cameralla-map-header-label,
html.elementor-html .cameralla-wrapper:not(.cameralla-is-inview) .cameralla-map-stage,
html.elementor-html .cameralla-wrapper:not(.cameralla-is-inview) .cameralla-region-label,
html.elementor-html .cameralla-wrapper:not(.cameralla-is-inview) .cameralla-region,
html.elementor-html .cameralla-wrapper:not(.cameralla-is-inview) .region[data-region],
html.elementor-html .cameralla-wrapper:not(.cameralla-is-inview) .region[data-region-id],
html.elementor-html .cameralla-region-results-grid > article,
html.elementor-html .cameralla-region-results-grid > .cameralla-region-result-card,
.cameralla-region-results-grid.cameralla-results-editor-preview > article:not(.cameralla-map-post-hidden),
.cameralla-region-results-grid.cameralla-results-editor-preview > .cameralla-region-result-card {
  opacity: 1;

  transform: none;

  animation: none;
}

.cameralla-is-inview .cameralla-map-header-label {
  animation: camerallaFadeUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.cameralla-is-inview .cameralla-map-title {
  animation: camerallaFadeUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) both 0.08s;
}

.cameralla-is-inview .cameralla-map-description {
  animation: camerallaFadeUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) both 0.14s;
}

.cameralla-is-inview .cameralla-map-stage {
  animation: camerallaMapStageIn 0.95s cubic-bezier(0.22, 1, 0.36, 1) both 0.22s;
}

@keyframes camerallaFadeUp {
  from {
    opacity: 0;

    transform: translateY(18px);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }
}

@keyframes camerallaMapStageIn {
  from {
    opacity: 0;

    transform: translateY(24px) scale(0.97);
  }

  to {
    opacity: 1;

    transform: translateY(0) scale(1);
  }
}

.cameralla-map-header {
  margin: 0 0 28px;

  text-align: center;
}

.cameralla-map-header-label {
  display: inline-block;

  margin: 0 0 10px;

  font-size: 0.75rem;

  font-weight: 500;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: #808b96;
}

.cameralla-map-title {
  margin: 0 0 12px;

  font-size: clamp(1.75rem, 3vw, 2.5rem);

  font-weight: 700;

  line-height: 1.2;

  color: #0f172a;
}

.cameralla-map-description {
  margin: 0 auto;

  max-width: 720px;

  font-size: 1.0625rem;

  line-height: 1.6;

  color: #475569;
}

.cameralla-svg-map {
  position: relative;

  overflow: visible;
}

.cameralla-map-stage {
  position: relative;

  width: 100%;
}

.cameralla-region-labels {
  position: absolute;

  inset: 0;

  pointer-events: none;

  z-index: 2;
}

.cameralla-region-label {
  position: absolute;

  transform: translate(-50%, -50%) scale(1);

  padding: 4px 10px;

  border-radius: 999px;

  background: rgba(15, 23, 42, 0.78);

  color: #fff;

  font-size: 11px;

  font-weight: 600;

  letter-spacing: 0.02em;

  line-height: 1.2;

  white-space: nowrap;

  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);

  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.32s ease, box-shadow 0.32s ease, opacity 0.32s ease;
}

.cameralla-region-label.is-hover,
.cameralla-region-label.is-active {
  transform: translate(-50%, -50%) scale(1.06);

  background: linear-gradient(135deg, #29788e 0%, #9d4c97 100%);

  box-shadow: 0 10px 24px rgba(41, 120, 142, 0.35);
}

.cameralla-wrapper:not(.cameralla-is-inview) .cameralla-region-label {
  opacity: 0;

  transform: translate(-50%, -50%) scale(0.88);
}

.cameralla-region-label--enter {
  animation: camerallaLabelIn 0.62s cubic-bezier(0.34, 1.25, 0.64, 1) both;

  animation-delay: var(--cameralla-label-delay, 0ms);
}

@keyframes camerallaLabelIn {
  from {
    opacity: 0;

    transform: translate(-50%, -50%) scale(0.82);
  }

  to {
    opacity: 1;

    transform: translate(-50%, -50%) scale(1);
  }
}

.cameralla-svg-map .cameralla-popup {
  position: absolute;

  transform: translateY(12px) scale(0.98);

  pointer-events: none;

  opacity: 0;

  transition: opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    left 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    top 0.38s cubic-bezier(0.22, 1, 0.36, 1), filter 0.34s ease;

  z-index: 3;

  will-change: transform, opacity, left, top;
}

.cameralla-popup.is-visible {
  opacity: 1;

  transform: translateY(0) scale(1);

  pointer-events: auto;

  filter: drop-shadow(0 30px 50px rgba(15, 23, 42, 0.38));
}

.cameralla-popup.is-visible.is-appearing {
  transition: none;

  animation: camerallaPopupAppear 0.52s cubic-bezier(0.34, 1.35, 0.64, 1) both;
}

@keyframes camerallaPopupAppear {
  0% {
    opacity: 0;

    transform: translateY(18px) scale(0.92);

    filter: drop-shadow(0 8px 16px rgba(15, 23, 42, 0.12));
  }

  65% {
    opacity: 1;

    transform: translateY(-3px) scale(1.02);
  }

  100% {
    opacity: 1;

    transform: translateY(0) scale(1);

    filter: drop-shadow(0 30px 50px rgba(15, 23, 42, 0.38));
  }
}

.cameralla-popup.is-switching .cameralla-popup-list {
  opacity: 0.55;

  transform: translateY(4px);
}

.cameralla-popup-list {
  display: flex;

  flex-direction: column;

  gap: 10px;

  overflow: visible;

  filter: drop-shadow(0 20px 40px rgba(15, 23, 42, 0.22));

  transition: opacity 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.cameralla-popup-list--scrollable {
  max-height: 360px;

  overflow-y: auto;

  scrollbar-width: thin;

  scrollbar-color: rgba(41, 120, 142, 0.45) transparent;
}

.cameralla-popup-list--scrollable::-webkit-scrollbar {
  width: 6px;
}

.cameralla-popup-list--scrollable::-webkit-scrollbar-thumb {
  border-radius: 999px;

  background: rgba(41, 120, 142, 0.45);
}

.cameralla-svg {
  width: 100%;

  height: auto;

  display: block;
}

/* Decorative stroke-only outlines from Figma export — not interactive */

.cameralla-map-stage path:not(.region):not(.cameralla-region) {
  pointer-events: none;
}

.cameralla-region,
.region[data-region],
.region[data-region-id] {
  cursor: pointer;

  pointer-events: paint;

  transition: fill 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    stroke 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    stroke-width 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.cameralla-wrapper:not(.cameralla-is-inview) .cameralla-region,
.cameralla-wrapper:not(.cameralla-is-inview) .region[data-region],
.cameralla-wrapper:not(.cameralla-is-inview) .region[data-region-id] {
  opacity: 0;
}

.cameralla-region.cameralla-region--enter,
.region.cameralla-region--enter {
  animation: camerallaRegionIn 0.68s cubic-bezier(0.22, 1, 0.36, 1) both;

  animation-delay: var(--cameralla-region-delay, 0ms);
}

@keyframes camerallaRegionIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.cameralla-map-stage path.cameralla-region:not([fill]),
.cameralla-map-stage path.cameralla-region[fill="none"],
.cameralla-map-stage polyline.cameralla-region,
.cameralla-map-stage line.cameralla-region {
  fill: none;

  stroke-width: 8;

  stroke-linecap: round;

  stroke-linejoin: round;
}

/* Filled island regions — teal/purple gradient on hover (reference design) */

.cameralla-region[fill]:not([fill="none"]):hover,
.cameralla-region[fill]:not([fill="none"]).is-hover,
.cameralla-region[fill]:not([fill="none"]).is-active,
.region[data-region][fill]:not([fill="none"]):hover,
.region[data-region][fill]:not([fill="none"]).is-hover,
.region[data-region][fill]:not([fill="none"]).is-active,
.region[data-region-id][fill]:not([fill="none"]):hover,
.region[data-region-id][fill]:not([fill="none"]).is-hover,
.region[data-region-id][fill]:not([fill="none"]).is-active {
  fill: url(#cameralla-hover-gradient) !important;

  opacity: 1;

  filter: none;
}

/* Stroke-only custom paths — darker line on hover */

.cameralla-map-stage path.cameralla-region:not([fill]):hover,
.cameralla-map-stage path.cameralla-region:not([fill]).is-hover,
.cameralla-map-stage path.cameralla-region:not([fill]).is-active,
.cameralla-map-stage path.cameralla-region[fill="none"]:hover,
.cameralla-map-stage path.cameralla-region[fill="none"].is-hover,
.cameralla-map-stage path.cameralla-region[fill="none"].is-active,
.cameralla-map-stage polyline.cameralla-region:hover,
.cameralla-map-stage polyline.cameralla-region.is-hover,
.cameralla-map-stage polyline.cameralla-region.is-active,
.cameralla-map-stage line.cameralla-region:hover,
.cameralla-map-stage line.cameralla-region.is-hover,
.cameralla-map-stage line.cameralla-region.is-active {
  fill: none !important;

  stroke: #3d6f8a !important;

  stroke-width: 10;

  filter: none;
}

.cameralla-region[fill]:not([fill="none"]):hover,
.cameralla-region[fill]:not([fill="none"]).is-active,
.region[data-region][fill]:not([fill="none"]):hover,
.region[data-region][fill]:not([fill="none"]).is-active {
  stroke: url(#cameralla-hover-gradient);

  stroke-width: 3.2;
}

.cameralla-popup-card {
  pointer-events: auto;

  width: 460px;

  max-width: calc(100vw - 48px);

  background: #fff;

  border-radius: 8px;

  border: 1px solid rgba(15, 23, 42, 0.1);

  box-shadow: 0 36px 72px rgba(15, 23, 42, 0.38),
    0 18px 36px rgba(15, 23, 42, 0.26), 0 8px 18px rgba(15, 23, 42, 0.18),
    0 2px 6px rgba(15, 23, 42, 0.12);

  overflow: hidden;

  display: flex;

  flex-direction: row;

  color: #222;

  text-decoration: none;

  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.28s ease;
}

.cameralla-popup-card--enter {
  animation: camerallaPopupCardIn 0.5s cubic-bezier(0.34, 1.28, 0.64, 1) both;

  animation-delay: var(--cameralla-card-delay, 0ms);
}

@keyframes camerallaPopupCardIn {
  from {
    opacity: 0;

    transform: translateY(14px) scale(0.96);
  }

  to {
    opacity: 1;

    transform: translateY(0) scale(1);
  }
}

a.cameralla-popup-card:hover {
  transform: translateY(-2px);

  box-shadow: 0 40px 80px rgba(15, 23, 42, 0.4),
    0 20px 40px rgba(15, 23, 42, 0.28), 0 10px 20px rgba(15, 23, 42, 0.2),
    0 2px 6px rgba(15, 23, 42, 0.12);
}

.cameralla-popup-content {
  flex: 1 1 62%;

  padding: 16px 18px;

  font-family: var(--Font, "Poppins", sans-serif);
}

.cameralla-popup-region {
  display: inline-block;

  margin: 0 0 6px;

  padding: 2px 8px;

  border-radius: 999px;

  background: #eef7fa;

  color: #29788e;

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 0.03em;

  text-transform: uppercase;
}

.cameralla-popup-card img {
  flex: 0 0 38%;

  width: 38%;

  min-height: 120px;

  object-fit: cover;
}

.cameralla-popup-content .card-header {
  margin: 0 0 8px;

  font-family: var(--Font, "Poppins", sans-serif);

  font-size: 22px;

  font-weight: 500;

  line-height: 1.1;

  color: var(--Text, #212121);
}

.cameralla-popup-content .card-text {
  margin: 0;

  font-family: var(--Font, "Poppins", sans-serif);

  font-size: 15px;

  font-weight: 400;

  line-height: 1.4;

  color: var(--Text, #212121);
}

.cameralla-popup-card[role="article"] {
  cursor: default;

  text-decoration: none;
}

.cameralla-popup-details-btn {
  display: inline-block;

  margin-top: 12px;

  padding: 10px 16px;

  border-radius: 6px;

  background: linear-gradient(135deg, #29788e 0%, #9d4c97 100%);

  color: #fff;

  font-size: 14px;

  font-weight: 600;

  line-height: 1.2;

  text-decoration: none;

  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.22s ease, opacity 0.22s ease;
}

.cameralla-popup-details-btn:hover {
  transform: translateY(-1px);

  box-shadow: 0 8px 18px rgba(41, 120, 142, 0.35);
}

@media (max-width: 767px) {
  .cameralla-popup-card {
    width: 330px;
  }

  .cameralla-popup-content .card-header {
    font-size: 18px;
  }
}

.cameralla-region-results-fallback-note {
  margin: 0;

  padding: 16px;

  text-align: center;

  color: #5f6b73;

  font-size: 14px;

  line-height: 1.5;

  border: 1px dashed #b8c4cc;

  border-radius: 8px;
}

.cameralla-region-results-host {
  width: 100%;
}

.cameralla-region-results-content {
  width: 100%;
}

.cameralla-map-post-hidden {
  display: none !important;
}

.cameralla-map-posts-empty {
  margin: 18px 0 0;

  text-align: center;

  color: #5f6b73;

  font-size: 16px;

  line-height: 1.5;
}

.cameralla-region-results {
  margin-top: 34px;

  max-width: var(--cameralla-results-max-width, 1100px);

  margin-left: auto;

  margin-right: auto;

  padding: 26px var(--cameralla-results-padding, 18px) 10px;

  background: transparent;
}

.cameralla-wrapper.cameralla-results-bg .cameralla-region-results {
  background: #eceff1;

  border-radius: 2px;
}

.cameralla-region-results-title {
  margin: 0 0 14px;

  font-size: clamp(1.2rem, 2.2vw, 1.6rem);

  line-height: 1.2;

  color: #0f172a;
}

.cameralla-region-results-empty {
  margin: 0;

  padding: 16px 18px;

  border: 1px dashed rgba(15, 23, 42, 0.2);

  border-radius: 8px;

  color: #64748b;

  background: #f8fafc;
}

.cameralla-region-results-grid {
  display: grid;

  grid-template-columns: repeat(
    var(--cameralla-results-columns, 3),
    minmax(0, 1fr)
  );

  align-items: stretch;

  gap: var(--cameralla-results-gap, 35px);
}

.cameralla-region-results-grid > article:not(.cameralla-result-card--inview):not(.cameralla-map-post-hidden),
.cameralla-region-results-grid > .cameralla-region-result-card:not(.cameralla-result-card--inview) {
  opacity: 0;

  transform: translateY(36px) scale(0.97);
}

.cameralla-region-results-grid > article.cameralla-result-card--inview:not(.cameralla-map-post-hidden),
.cameralla-region-results-grid > .cameralla-region-result-card.cameralla-result-card--inview {
  animation: camerallaResultCardIn 0.82s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--cameralla-card-delay, 0ms);
}

@keyframes camerallaResultCardIn {
  from {
    opacity: 0;

    transform: translateY(36px) scale(0.97);
  }

  to {
    opacity: 1;

    transform: translateY(0) scale(1);
  }
}

.cameralla-region-results-grid > article,
.cameralla-region-results-grid > .cameralla-region-result-card,
.cameralla-region-results-grid > .cameralla-location-result-item,
.cameralla-region-results-grid > .elementor-post {
  display: flex;

  flex-direction: column;

  height: 100%;

  min-height: 100%;
}

.cameralla-region-result-card {
  display: flex;

  flex: 1;

  flex-direction: column;

  height: 100%;

  background: #fff;

  border: 1px solid #e5e7eb;

  border-radius: 0;

  overflow: hidden;

  text-decoration: none;

  color: #212121;

  box-shadow: none;

  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cameralla-region-result-card:hover {
  transform: translateY(-2px);

  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

.cameralla-region-result-card img {
  width: 100%;

  aspect-ratio: var(--cameralla-results-image-ratio, 1.8 / 1);

  object-fit: cover;
}

.cameralla-region-result-content {
  flex: 1;

  width: 100%;

  padding: var(--cameralla-results-padding, 32px) 24px;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: var(--cameralla-results-content-gap, 20px);

  text-align: center;

  background: #fff;

  font-family: var(--Font, "Poppins", sans-serif);
}

.cameralla-region-result-content--location,
.cameralla-results-post-type-location .cameralla-region-result-content {
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #f5fafc 22%,
    #e8f2f7 55%,
    #d9e8ef 100%
  );
}

.cameralla-region-result-content--hikes,
.cameralla-results-post-type-hikes .cameralla-region-result-content {
  padding: 0;

  gap: 0;

  align-items: stretch;

  width: 100%;

  background: #fff;
}

.cameralla-region-result-body {
  flex: 1;

  display: flex;

  flex-direction: column;

  align-items: center;

  align-self: stretch;

  width: 100%;

  gap: var(--cameralla-results-content-gap, 20px);

  padding: var(--cameralla-results-padding, 32px) 24px 22px;

  text-align: center;

  background: #fff;
}

.cameralla-region-result-footer {
  display: flex;

  justify-content: center;

  align-self: stretch;

  width: 100%;

  box-sizing: border-box;

  margin-top: auto;

  padding: 24px 32px 28px;

  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #fffaf5 20%,
    #fdf4e8 55%,
    #fce8cc 100%
  );
}

.cameralla-region-result-meta {
  display: flex;

  flex-direction: column;

  gap: var(--cameralla-results-content-gap, 20px);

  width: 100%;

  margin: 0;
}

.cameralla-region-result-meta-row {
  margin: 0;

  font-family: var(--Font, "Poppins", sans-serif);

  font-size: var(--Subtitle_22px, 22px);

  font-weight: 300;

  line-height: 1.3;

  color: var(--Text, #212121);
}

.cameralla-region-result-meta-row strong {
  font-weight: 500;
}

.cameralla-region-result-content .label {
  display: inline-block;

  margin: 0;

  font-weight: 400;

  font-size: 16px;

  letter-spacing: 2px;

  line-height: 1.1em;

  text-transform: uppercase;

  color: var(--Text, #212121);
}

.cameralla-region-result-content .card-header {
  margin: 0;

  font-family: var(--Font, "Poppins", sans-serif);

  font-size: 32px;

  font-weight: 500;

  letter-spacing: -2px;

  line-height: 1.2em;

  color: var(--Text, #212121);
}

.cameralla-region-result-content .card-text {
  flex: 1;

  margin: 0;

  font-family: var(--Font, "Poppins", sans-serif);

  font-size: 22px;

  font-weight: 300;

  line-height: 1.5em;

  text-align: center;

  color: var(--Text, #212121);
}

.cameralla-region-result-content .button {
  display: inline-block;

  margin-top: auto;

  width: auto;

  font-family: var(--Font, "Poppins", sans-serif);

  font-weight: 500;

  font-size: 16px;

  color: var(--Text, #212121);

  line-height: 1em;

  padding-block-start: 20px;

  padding-block-end: 20px;

  padding-inline-start: 50px;

  padding-inline-end: 50px;

  border-radius: 50px;

  border-width: 1px;

  border-color: var(--Text, #212121);

  border-style: solid;

  background-color: transparent;
}

@media (max-width: 1024px) {
  .cameralla-region-results-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: var(--cameralla-results-gap, 35px);
  }
}

@media (max-width: 767px) {
  .cameralla-region-results {
    margin-top: 24px;

    padding: 16px 12px 8px;
  }

  .cameralla-region-results-grid {
    grid-template-columns: 1fr;

    gap: var(--cameralla-results-gap, 35px);
  }

  .cameralla-region-result-content {
    padding: 20px 20px 24px;

    gap: 20px;
  }

  .cameralla-region-result-body {
    padding: 20px 20px 16px;
  }

  .cameralla-region-result-footer {
    padding: 18px 20px 22px;
  }

  .cameralla-region-result-meta-row {
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cameralla-wrapper:not(.cameralla-is-inview) .cameralla-map-title,
  .cameralla-wrapper:not(.cameralla-is-inview) .cameralla-map-description,
  .cameralla-wrapper:not(.cameralla-is-inview) .cameralla-map-stage,
  .cameralla-wrapper:not(.cameralla-is-inview) .cameralla-region-label,
  .cameralla-wrapper:not(.cameralla-is-inview) .cameralla-region,
  .cameralla-wrapper:not(.cameralla-is-inview) .region[data-region],
  .cameralla-wrapper:not(.cameralla-is-inview) .region[data-region-id],
  .cameralla-region-results-grid > article:not(.cameralla-result-card--inview),
  .cameralla-region-results-grid > .cameralla-region-result-card:not(.cameralla-result-card--inview) {
    opacity: 1;

    transform: none;
  }

  .cameralla-region-results-grid > article,
  .cameralla-region-results-grid > .cameralla-region-result-card {
    animation: none !important;
  }

  .cameralla-svg-map,
  .cameralla-svg-map .cameralla-popup,
  .cameralla-popup-list,
  .cameralla-region-label,
  .cameralla-region,
  .region[data-region],
  .region[data-region-id],
  .cameralla-popup-card,
  .cameralla-popup-details-btn {
    transition: none !important;

    animation: none !important;
  }

  .cameralla-svg-map .cameralla-popup {
    transform: none;
  }

  .cameralla-popup.is-visible {
    transform: none;
  }
}