/* Local Font Definitions */
@font-face {
    font-family: 'Red Hat Display';
    src: url('../fonts/RedHatDisplay-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Red Hat Display';
    src: url('../fonts/RedHatDisplay-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Red Hat Display';
    src: url('../fonts/RedHatDisplay-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Red Hat Display';
    src: url('../fonts/RedHatDisplay-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Red Hat Display';
    src: url('../fonts/RedHatDisplay-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Red Hat Display';
    src: url('../fonts/RedHatDisplay-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Red Hat Display';
    src: url('../fonts/RedHatDisplay-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Red Hat Display';
    src: url('../fonts/RedHatDisplay-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Red Hat Display';
    src: url('../fonts/RedHatDisplay-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Red Hat Display';
    src: url('../fonts/RedHatDisplay-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Red Hat Display';
    src: url('../fonts/RedHatDisplay-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Red Hat Display';
    src: url('../fonts/RedHatDisplay-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Red Hat Display';
    src: url('../fonts/RedHatDisplay-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Red Hat Display';
    src: url('../fonts/RedHatDisplay-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

:root {
  --color-sage: #DEE5DB;
  --color-burgundy: #7B2429;
  --color-green: #91AE7E;
  --color-gray: #B1BBAC;
  --color-dark-gray: #6B7280;
  --shadow-light: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-medium: 0 8px 32px rgba(0, 0, 0, 0.12);
  --border-radius: 0.6vw;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}

body, html {
  height: 100%;
  font-family: 'Red Hat Display', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #ffffff;
  color: var(--color-dark-gray);
  overflow: hidden;
}

/* --- Liquid Glass Background System (ported from public copy) --- */
.glass-bg-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0; /* keep below map (map has z-index:1) */
  overflow: hidden;
}

.glass-bg-layer .map-glass-wrapper {
  position: absolute;
  display: flex;
  overflow: hidden;
  font-weight: 600;
  color: inherit;
  box-shadow: 0 6px 6px rgba(0,0,0,0.18), 0 0 18px rgba(0,0,0,0.10);
  border-radius: var(--border-radius);
  backdrop-filter: blur(3px) saturate(120%);
  -webkit-backdrop-filter: blur(3px) saturate(120%);
}

.map-glass-effect, .map-glass-tint, .map-glass-shine, .map-glass-text {
  position: absolute;
  inset: 0;
  border-radius: var(--border-radius);
}

.map-glass-effect {
  z-index: 0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  isolation: isolate;
}

.map-glass-tint { z-index: 1; background: rgba(255,255,255,0.22); }
.map-glass-shine { z-index: 2; box-shadow: inset 2px 2px 2px rgba(255,255,255,0.45), inset -1px -1px 1px rgba(0,0,0,0.12); }
.map-glass-text { z-index: 3; position: relative; }

/* Individual background panel placements */
.glass-panel.sidebar-back {
  top: 16px;
  left: 16px;
  width: clamp(240px, 26vw, 340px);
  height: calc(100% - 32px);
  border-radius: var(--border-radius);
}

.glass-panel.accent-top-right {
  top: 40px;
  right: 50px;
  width: clamp(180px, 20vw, 260px);
  height: clamp(180px, 24vh, 260px);
  border-radius: var(--border-radius);
}

.glass-panel.accent-bottom-right {
  bottom: 40px;
  right: 60px;
  width: clamp(220px, 24vw, 320px);
  height: clamp(160px, 22vh, 240px);
  border-radius: var(--border-radius);
}

/* Subtle gradient tint variations */
.glass-panel .map-glass-tint {
  background: linear-gradient(135deg, rgba(255,255,255,0.25), rgba(174,187,170,0.18));
}

/* Loading Screen */
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-sage);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loading-screen.hidden {
  opacity: 0;
  visibility: hidden;
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(123, 36, 41, 0.2);
  border-top: 4px solid var(--color-burgundy);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

.loading-text {
  color: var(--color-burgundy);
  font-size: 18px;
  font-weight: 500;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Simple Counter */
.member-counter {
  position: fixed;
  bottom: 1.4vh;
  left: 1.4vh;
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(222, 229, 219, 0.3);
  border-radius: var(--border-radius);
  padding: 1.7vh;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 0.5vw;
  font-weight: 600;
  font-size: 1vw;
  color: var(--color-burgundy);
  box-shadow: var(--shadow-light);
}

.member-counter i {
  color: var(--color-green);
  font-size: 1vw;
}

/* Category Bar */

.category-bar {
  position: fixed;
  top: 1.4vh;
  left: 1.4vh;
  width: calc(100vw - 2.8vh);
  max-width: calc(100vw - 2.8vh);
  display: none;
  border-radius: var(--border-radius);
  overflow: visible;
  z-index: 1001;
  pointer-events: none;
  transform: translateX(0);
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-bar .map-glass-text {
  pointer-events: auto;
  display: flex;
  align-items: stretch;
  overflow: visible;
  min-width: 0;
}

.category-scroll {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1vh;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: thin;
  scrollbar-color: rgba(145, 174, 126, 0.6) rgba(128, 128, 128, 0.2);
  width: 100%;
  min-width: 0;
  height: auto;
  padding-top: 1vh;
  padding-bottom: 0.5vh;
  margin-left: 1vh;
  margin-right: 1vh;
  margin-bottom: 0.5vh;
}

.category-scroll::-webkit-scrollbar {
  height: 10px;
}

.category-scroll::-webkit-scrollbar-track {
  background: rgba(128, 128, 128, 0.5);
  box-shadow: inset 0 0 0 10px rgba(128, 128, 128, 0.5);
  border-radius: 5px;
}

.category-scroll::-webkit-scrollbar-thumb {
  background: rgba(145, 174, 126, 0.45);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.category-pill {
  flex: 0 0 auto;
  border: none;
  border-radius: var(--border-radius);
  padding: 0.55vw 1.25vw;
  font-size: 2.2vh;
  font-weight: 650;
  color: var(--color-burgundy);
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
  box-shadow: none;
  width: auto;
  min-width: fit-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}

/* Add white tint overlay for inactive pills */
.category-pill::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--border-radius);
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: -1;
}

.category-pill.active::before {
  opacity: 0;
}

.category-pill:hover {
  transform: translateY(-1px);
}

.category-pill.active {
  color: #fff;
  background: var(--color-burgundy);
}

/* Category-specific colors - for BOTH active and inactive states */

/* Category pills now share a neutral palette */

body.sidebar-open .category-bar {
  left: calc(1.4vh + 46vh + 2.2vh + 1.4vh);
  width: calc(100vw - 1.4vh - 46vh - 2.2vh - 1.4vh - 1.4vh);
  max-width: calc(100vw - 1.4vh - 46vh - 2.2vh - 1.4vh - 1.4vh);
}

/* Floating Sidebar */
.floating-sidebar {
  display: none;
}

@media (min-width: 769px) {
  .floating-sidebar {
    transform: translateX(calc(-100% - 32px));
    pointer-events: none;
    max-width: none;
    width: auto;
    visibility: hidden;
  }
  .floating-sidebar.open {
    transform: translateX(0);
    pointer-events: auto;
    visibility: visible;
  }
}

.floating-sidebar.map-glass-wrapper { box-shadow: 0 6px 28px rgba(0,0,0,0.18), 0 0 20px rgba(0,0,0,0.08); }
.floating-sidebar.map-glass-wrapper .map-glass-effect { backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); will-change: backdrop-filter; }
.floating-sidebar.map-glass-wrapper .map-glass-tint { background: rgba(255,255,255,0.30); }
.floating-sidebar.map-glass-wrapper .map-glass-shine { box-shadow: inset 2px 2px 2px rgba(255,255,255,0.45), inset -1px -1px 1px rgba(0,0,0,0.10); }
.floating-sidebar .map-glass-text { position: relative; display: flex; flex-direction: column; height: 100%; }

.floating-sidebar .locations-container { position: relative; z-index: 5; }

/* Sidebar close button */
.sidebar-close {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 3.5vh;
  height: 100%;
  border: none;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(10px);
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 0;
}

/* Left-pointing triangle arrow */
.sidebar-close::before {
  content: '';
  width: 0;
  height: 0;
  border-top: 0.6vh solid transparent;
  border-bottom: 0.6vh solid transparent;
  border-right: 0.9vh solid var(--color-burgundy);
  margin-right: 0.15vh; /* Slight adjustment for optical centering */
}

.sidebar-close:hover {
  background: rgba(255, 255, 255, 0.65);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}

.sidebar-close:active {
  transform: scale(0.98);
}

/* Hide close button on mobile (sidebar is always visible there) */
@media (max-width: 768px) {
  .sidebar-close {
    display: none;
  }
}

/* Glassified Map Controls */
.maplibregl-ctrl-group.glassified {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius) !important;
}
.maplibregl-ctrl-group.glassified::before,
.maplibregl-ctrl-group.glassified::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
}
.maplibregl-ctrl-group.glassified::before { backdrop-filter: blur(12px) saturate(130%); -webkit-backdrop-filter: blur(12px) saturate(130%); }
.maplibregl-ctrl-group.glassified::after { box-shadow: inset 2px 2px 2px rgba(255,255,255,0.45), inset -1px -1px 1px rgba(0,0,0,0.10), 0 4px 14px rgba(0,0,0,0.18); background: linear-gradient(135deg, rgba(255,255,255,0.28), rgba(174,187,170,0.18)); }

.maplibregl-ctrl-group.glassified button { background: rgba(255,255,255,0.35) !important; box-shadow: none !important; }
.maplibregl-ctrl-group.glassified button:active { background: rgba(255,255,255,0.55) !important; }

.maplibregl-ctrl-attrib.glassified {
  position: relative;
  background: transparent !important;
  border: none !important;
  padding: 0.15rem 0.45rem !important;
  border-radius: var(--border-radius) !important;
  overflow: hidden;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  margin: 0;
}
.maplibregl-ctrl-attrib.glassified::before { border-radius: var(--border-radius); content: ""; position: absolute; inset: 0; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); pointer-events: none; }
.maplibregl-ctrl-attrib.glassified::after { border-radius: var(--border-radius); content: ""; position: absolute; inset: 0; box-shadow: inset 2px 2px 2px rgba(255,255,255,0.45), inset -1px -1px 1px rgba(0,0,0,0.1); background: linear-gradient(135deg, rgba(255,255,255,0.24), rgba(174,187,170,0.16)); pointer-events: none; }
.maplibregl-ctrl-attrib.glassified .maplibregl-ctrl-attrib-inner {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
}

.locations-container {
  padding: 1.7vh;
  padding-right: 5.2vh;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.5vh;
}

.locations-container::-webkit-scrollbar {
  width: 6px;
}

.locations-container::-webkit-scrollbar-track {
  background: rgba(177, 187, 172, 0.1);
  border-radius: 3px;
}

.locations-container::-webkit-scrollbar-thumb {
  background: var(--color-gray);
  border-radius: 3px;
}

.location-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  color: var(--color-dark-gray);
  padding: 32px 16px;
  font-size: 15px;
}

.location-empty-state i {
  font-size: 28px;
  color: rgba(33, 53, 38, 0.45);
}

/* Location Card with Logo Styles */
.location-card {
  background: white;
  border-radius: var(--border-radius);
  padding: 0.6vw;
  cursor: pointer;
  transition: var(--transition);
  border: 1px solid rgba(177, 187, 172, 0.15);
  position: relative;
  overflow: hidden;
  will-change: transform, box-shadow, border-color;
  width: 41vh;
}

.location-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--color-burgundy);
  transform: scaleY(0);
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.location-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
  border-color: var(--color-green);
}

.location-card:hover::before {
  transform: scaleY(1);
}

.location-card.highlight {
  border-color: var(--color-burgundy);
  box-shadow: 0 0 0 2px rgba(123,36,41,0.25), var(--shadow-medium);
  position: relative;
}

.location-card.highlight::before {
  transform: scaleY(1);
  background: var(--color-green);
}

.location-card-content {
  display: flex;
  align-items: center;
  gap: 1vh;
}

.location-logo {
  width: 3vw;
  height: 3vw;
  border-radius: var(--border-radius);
  object-fit: cover;
  flex-shrink: 0;
}

.location-logo-placeholder {
  width: 48px;
  height: 48px;
  border-radius: var(--border-radius);
  background: var(--color-sage);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray);
  font-size: 20px;
  flex-shrink: 0;
}

.location-title {
  font-size: 2.2vh;
  font-weight: 650;
  color: var(--color-dark-gray);
  line-height: 1.4;
  flex: 1;
}

/* Mobile Toggle with Animation */
.mobile-toggle {
  display: none;
  position: fixed;
  top: calc(1.4vh + 6vh + 1.4vh);
  left: 24px;
  background: var(--color-burgundy);
  color: white;
  border: none;
  width: 48px;
  height: 48px;
  border-radius: var(--border-radius);
  cursor: pointer;
  z-index: 1001;
  box-shadow: var(--shadow-medium);
  transition: var(--transition);
  justify-content: center;
  align-items: center;
}

.mobile-toggle:hover {
  transform: scale(1.05);
}

.hamburger {
  width: 20px;
  height: 16px;
  position: relative;
  transform: rotate(0deg);
  transition: 0.3s ease-in-out;
  cursor: pointer;
}

.hamburger span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: white;
  border-radius: var(--border-radius);
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: 0.25s ease-in-out;
}

.hamburger span:nth-child(1) {
  top: 0px;
}

.hamburger span:nth-child(2) {
  top: 7px;
}

.hamburger span:nth-child(3) {
  top: 14px;
}

.hamburger.open span:nth-child(1) {
  top: 7px;
  transform: rotate(135deg);
}

.hamburger.open span:nth-child(2) {
  opacity: 0;
  left: -60px;
}

.hamburger.open span:nth-child(3) {
  top: 7px;
  transform: rotate(-135deg);
}

/* Custom Map Controls Styling */
.maplibregl-ctrl-group {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(222, 229, 219, 0.3) !important;
  border-radius: var(--border-radius) !important;
  box-shadow: var(--shadow-light) !important;
  margin-bottom: 0 !important;
}

.maplibregl-ctrl-group button {
  background: transparent !important;
  border: none !important;
  color: var(--color-burgundy) !important;
  width: 10vh !important;
  height: 10vh !important;
  border-radius: var(--border-radius) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 10vh !important;
}

.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon,
.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon {
  background-image: none !important;
  font-family: 'Red Hat Display', sans-serif !important;
  font-size: 7vh !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon::before {
  content: '+';
}

.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon::before {
  content: '−';
}

/* Map Lock Control Button */
.maplibregl-ctrl-lock {
  cursor: pointer;
  transition: all 0.2s ease;
}

.maplibregl-ctrl-lock:hover {
  background: rgba(123, 36, 41, 0.1) !important;
}

.maplibregl-ctrl-lock.locked {
  background: rgba(123, 36, 41, 0.15) !important;
}

.maplibregl-ctrl-lock svg {
  transition: transform 0.2s ease;
}

.maplibregl-ctrl-lock.locked svg {
  transform: scale(1.1);
}

.maplibregl-ctrl-bottom-left,
.maplibregl-ctrl-bottom-right {
  margin-bottom: 1.4vh !important;
}

.maplibregl-ctrl-bottom-right .attribution-wrapper {
  margin-bottom: 0 !important;
  align-self: flex-end;
  margin-top: 9.5vh !important;
  transform: translateX(-1vh);
}

.maplibregl-ctrl-bottom-left {
  margin-left: 1.4vh !important;
}

.attribution-wrapper {
  flex-direction: row !important;
}


/* Custom Attribution Control */
.maplibregl-ctrl-icon {
    height: 5vh !important;
    width: 5vh !important;
    background-size: 100% 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

/* Extra small social icons for ultra-narrow screens */
.social-links {
  gap: 1vh; /* Even smaller gap */
}

.social-link {
  width: 5vh !important; /* Smaller icons */
  height: 5vh !important;
  font-size: 3vh !important; /* Smaller icon size */
}

.maplibregl-ctrl-attrib .maplibregl-ctrl-attrib-inner {
  display: block !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  transition: var(--transition) !important;
  font-size: 2vh;
  line-height: 1 !important;
  padding: 0 !important;
}

.maplibregl-ctrl-attrib.expanded .maplibregl-ctrl-attrib-inner {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
}

.vislatvijas-credit.maplibregl-ctrl {
  margin: 0 !important;
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-radius: var(--border-radius) !important;
  border: 1px solid rgba(222, 229, 219, 0.3) !important;
  transition: var(--transition) !important;
  padding: 0 !important;
  line-height: 1 !important;
  height: auto !important;
  min-height: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

.vislatvijas-credit.glassified {
  position: relative;
  background: rgba(221, 229, 219, 0.12) !important;
  display: inline-flex;
  align-items: center;
  padding: 0 0.55rem;
  border-radius: var(--border-radius);
  line-height: 1;
  overflow: hidden;
}

.vislatvijas-credit.glassified::before {
  border-radius: var(--border-radius);
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
  z-index: 1;
  line-height: 1;
}

.vislatvijas-credit.glassified::after {
  border-radius: var(--border-radius);
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 2px 2px 2px rgba(255,255,255,0.45), inset -1px -1px 1px rgba(0,0,0,0.1);
  background: linear-gradient(135deg, rgba(255,255,255,0.24), rgba(174,187,170,0.16));
  pointer-events: none;
  z-index: 1;
  line-height: 1;
}

.vislatvijas-credit.glassified span {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  height: 1em;
}

/* MapLibre Marker Override */
.maplibregl-marker {
  background: #7B2429;
  border: 2px solid white !important;
  border-radius: 50% !important;
  width: 5vh !important;
  height: 5vh !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(123, 36, 41, 0.35);
  will-change: transform;
  transition: none !important; /* prevent wrapper transform interpolation */
  outline: none !important; /* remove default browser focus outline */
}

.maplibregl-marker svg {
  display: none !important;
}

/* Marker hover states for sidebar card interaction */
.maplibregl-marker.marker-highlight > * {
  transform: scale(1.4) !important;
  box-shadow: 0 8px 24px rgba(123, 36, 41, 0.7) !important;
}

.maplibregl-marker.marker-highlight {
  z-index: 1000 !important;
}

.maplibregl-marker.marker-dimmed {
  opacity: 0.15 !important;
}

/* Marker hover tooltip */
.marker-tooltip {
  position: fixed;
  background: white;
  color: var(--color-burgundy);
  padding: 8px 12px;
  border-radius: var(--border-radius);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%, -100%);
  opacity: 0;
  transition: opacity 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  gap: 8px;
}

.marker-tooltip.visible {
  opacity: 1;
}

.marker-tooltip::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid white;
}

.tooltip-logo {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}

.tooltip-logo-placeholder {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  font-size: 12px;
  flex-shrink: 0;
}

.tooltip-title {
  flex: 1;
}

/* Category markers share unified styling via base .maplibregl-marker */

/* Enhanced Business Card Popup Styles */
.maplibregl-popup-content {
  border-radius: var(--border-radius) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  background: white !important;
  overflow: visible !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  left: 0;
  pointer-events: auto !important;
  position: relative;
  z-index: 3;
}

.maplibregl-popup-content.height-locked {
  display: flex !important;
  flex-direction: column;
  max-height: var(--popup-max-height, 75vh) !important;
  overflow: hidden !important;
}

.maplibregl-popup-content.height-locked.scrollable {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.maplibregl-popup-tip {
  pointer-events: none;
  z-index: 2;
}

.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
  border-top-color: #fff !important;
}

.maplibregl-popup-anchor-top .maplibregl-popup-tip,
.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
  border-bottom-color: #fff !important;
}

/* No extra translate; spacing handled via JS offset */

/* Center the arrow under the popup */
/* Center arrow like Google Maps: align to middle under content */
/* Keep default arrow behavior; dynamic JS offset ensures vertical alignment */

.maplibregl-popup-close-button {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 36px !important;
  height: 36px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(222, 229, 219, 0.5) !important;
  border-radius: 50% !important;
  color: var(--color-burgundy) !important;
  font-size: 18px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10 !important;
  transition: var(--transition) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.maplibregl-popup-close-button:hover {
  background: var(--color-sage) !important;
  transform: scale(1.1) !important;
}

/* Toast Notification */
.toast-message {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translate(-50%, 80px);
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--border-radius);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .3px;
  opacity: 0;
  transition: transform .4s ease, opacity .4s ease;
  z-index: 11000;
  pointer-events: none;
}

.toast-message.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.business-card {
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: var(--border-radius);
  overflow: hidden;
  position: relative;
}

.card-image {
  background: var(--color-sage);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray);
  font-size: 48px;
  position: relative;
  order: -1; /* top on mobile */
  overflow: hidden;
}

.card-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(222, 229, 219, 0.8) 0%, rgba(145, 174, 126, 0.6) 100%);
  z-index: 0;
  opacity: 0;
}

.card-image.no-image::before {
  opacity: 1;
}

.card-image.has-image::before {
  opacity: 0;
}

.card-image i {
  z-index: 2;
  position: relative;
}

.card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
}

.card-topbar {
  background: var(--color-burgundy);
  padding: 1vw;
}

.card-topbar .card-title {
  margin: 0;
  color: #ffffff;
  text-align: center;
  display: block;
  width: 100%;
}

.card-title {
  font-size: 3vh;
  font-weight: 700;
  color: var(--color-burgundy);
  margin-bottom: 12px;
  line-height: 1.2;
}

.card-subtitle {
  font-size: 16px;
  color: var(--color-dark-gray);
  font-weight: 500;
  line-height: 1.4;
}

.card-description {
  line-height: 1.6;
  color: var(--color-dark-gray);
  flex-grow: 1;
}

/* Rich text content styling for Strapi content */
.card-description p {
  margin: 0 0 12px 0;
}

.card-description p:last-child {
  margin-bottom: 0;
}

.card-description ul,
.card-description ol {
  padding-left: 2vw;
}

.card-description li {
  margin-bottom: 4px;
  line-height: 1.5;
}

.card-description ul li {
  list-style-type: disc;
}

.card-description ol li {
  list-style-type: decimal;
}

.card-description h1,
.card-description h2,
.card-description h3,
.card-description h4,
.card-description h5,
.card-description h6 {
  margin: 12px 0 8px 0;
  line-height: 1.3;
}

.card-description h1:first-child,
.card-description h2:first-child,
.card-description h3:first-child,
.card-description h4:first-child,
.card-description h5:first-child,
.card-description h6:first-child,
.card-description p:first-child,
.card-description ul:first-child,
.card-description ol:first-child {
  margin-top: 0;
}

.card-description strong {
  font-weight: 600;
}

.card-description em {
  font-style: italic;
}

.card-description a {
  color: var(--color-burgundy);
  text-decoration: none;
}

.card-description a:hover {
  text-decoration: underline;
}

.card-learn-more {
  flex: 0 0 auto;
  width: calc(100% + 1.4vw);
  align-self: stretch;
  margin-top: 1vw;
  margin-left: -0.7vw;
  margin-right: -0.7vw;
}

.learn-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.6vw;
  border-radius: var(--border-radius);
  background: var(--color-green);
  color: #fff;
  font-weight: 600;
  font-size: 1.5vw;
  white-space: normal;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(111, 152, 94, 0.26);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, background-color 1s ease;
  filter: brightness(1);
}

.learn-more-btn:hover,
.learn-more-btn:focus {
  background: var(--color-burgundy);
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(111, 152, 94, 0.32);
  filter: brightness(0.95);
}

.learn-more-btn:focus-visible {
  outline: 3px solid rgba(111, 152, 94, 0.35);
  outline-offset: 2px;
}

.card-footer {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.social-links {
  display: flex;
  gap: 12px;
}

.social-link {
  width: 6vh;
  height: 6vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 3.5vh;
  transition: var(--transition);
  will-change: transform, box-shadow;
}

.social-link.website {
  background: var(--color-green);
}

.social-link:hover {
  transform: translateY(-2px);
}

/* Default: stack columns on mobile */
.card-body-row { display: flex; flex-direction: column; }

/* Desktop horizontal business card layout (image + content side by side) */
@media (min-width: 769px) {
  .maplibregl-popup-content {
    width: 82vw !important;
    min-width: 0 !important;
  }
  .maplibregl-popup-content > .business-card {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .business-card {
    flex-direction: column;
  }
  .card-body-row {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
  .business-card .card-image {
    order: 1; /* move image to middle (content left, actions right) */
    flex: 0 0 46%;
    min-height: 300px;
    height: 100%;
    padding: 12px; /* add inner padding so image never touches edges */
    display: flex;
    align-items: stretch;
    justify-content: center;
    background: var(--color-sage);
    border-right: 1px solid rgba(222,229,219,0.4);
    position: relative;
    overflow: hidden;
  }
  /* Gallery specific */
  .business-card .gallery-column { flex-direction: column; padding: 0.6vw; }
  .business-card .minimal-gallery { position: relative; display:flex; align-items:center; justify-content:center; }
  .business-card .gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 5vh;
    height: 5vh;
    border: none;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    border-radius: var(--border-radius);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-burgundy);
    font-size: 4vh;
    z-index: 3;
    transition: background .2s ease, transform .2s ease;
    line-height: 1;
    pointer-events: auto;
  }
  .business-card .gallery-nav:hover { background:#fff; transform:translateY(-50%) scale(1.07); }
  .business-card .gallery-nav.prev { left:0px; }
  .business-card .gallery-nav.next { right:0px; }
  .business-card .gallery-expand { position:absolute; top:10px; right:10px; width:32px; height:32px; border:1px solid rgba(222,229,219,0.6); background:rgba(255,255,255,0.9); backdrop-filter:blur(4px); border-radius:var(--border-radius); display:flex; align-items:center; justify-content:center; cursor:pointer; color: var(--color-burgundy); font-size:14px; line-height:1; box-shadow:0 2px 6px rgba(0,0,0,0.12); transition:background .2s ease, transform .2s ease, box-shadow .2s ease; z-index:3; }
  .business-card .gallery-expand:hover { background:#fff; transform:translateY(-2px); box-shadow:0 4px 10px rgba(0,0,0,0.18); }
  .business-card .gallery-expand i { pointer-events:none; }
  .business-card .card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .business-card .card-footer {
    margin-top: 24px;
  }
  /* Prevent vertical stretch distortion for placeholder icon */
  .business-card .card-image i { font-size: 64px; }
  /* Social links aligned left on desktop */
  .business-card .social-links { justify-content: flex-start; }
  .business-card .card-image .card-image-el {
    object-fit: contain; /* show full image without cropping */
    display: block;
    background: #fff;
    border-radius: var(--border-radius); /* soften inside */
  }
  /* New vertical actions column */
  .card-actions-vertical {
    order: 2; /* last column */
    flex: 0 0 auto;
    max-width: 9vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.6vw;
    border-left: 1px solid rgba(222,229,219,0.4);
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  }
  .card-actions-vertical .card-close {
    width: 5vh;
    height: 5vh;
    border-radius: 50%;
    border: none;
    background: var(--color-sage);
    color: var(--color-burgundy);
    font-size: 4vh; /* bigger X */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
  }
  .card-actions-vertical .card-close:hover { background: var(--color-green); color: var(--color-sage); transform: translateY(-2px); }
  .card-actions-vertical .card-close:active { transform: scale(.95); }
  .social-links-vertical .social-link { width: 6vh; height: 6vh; }
  /* Hide footer socials on desktop */
  .business-card .card-footer { display: none; }
  .business-card .social-links { display: none; }
  .business-card .card-content { 
    order: 0; /* first column */
    min-width: 0; 
    border-right: 1px solid rgba(222,229,219,0.4);
  }
}
.social-links-vertical {
    display: flex;
    flex-direction: column;
    gap: 1vh !important;
    align-items: center;
  }

/* Disable gradient overlay when using inline <img> so it's not faded */
/* Move close button outside image overlap for desktop */
@media (min-width: 769px) {
  .maplibregl-popup-close-button {
  top: 12px !important;
  left: calc(46% + 16px) !important; /* place over text column, not image */
  right: auto !important;
  background: rgba(255,255,255,0.95) !important;
  border: 1px solid rgba(222,229,219,0.4) !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08) !important;
  }
}

/* Lightbox */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 10000;
}
.lightbox-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}
.lightbox-inner {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--border-radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}
.lightbox-close {
  position: absolute;
  top: -5vh;
  right: -8.5vh;
  width: 7vh;
  height: 7vh;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 5vh;
  cursor: pointer;
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  transition: background .2s ease;
}
.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.35);
}
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 7vh;
  height: 7vh;
  border: none;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 4vh;
  border-radius: var(--border-radius);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  transition: background .2s ease, transform .2s ease;
}
.lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: translateY(-50%) scale(1.04);
}
.lightbox-nav.prev {
  left: -4.5vw;
}
.lightbox-nav.next {
  right: -4.5vw;
}
.lightbox-counter {
  position: absolute;
  bottom: -48px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .5px;
}

/* Error Message Styles */
.error-message {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(4px);
}

.error-content {
  background: white;
  padding: 2rem;
  border-radius: var(--border-radius);
  text-align: center;
  max-width: 400px;
  margin: 0 20px;
  box-shadow: var(--shadow-medium);
}

.error-content i {
  font-size: 3rem;
  color: #ff4757;
  margin-bottom: 1rem;
}

.error-content p {
  font-size: 16px;
  color: var(--color-dark-gray);
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

.error-content button {
  background: var(--color-burgundy);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: var(--border-radius);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: var(--transition);
}

.error-content button:hover {
  background: #5d1b1f;
  transform: translateY(-1px);
}

/* Desktop gallery: vertical thumbnail rail + full-height stage */
@media (min-width: 769px) {
  .business-card .gallery-column.minimal-gallery {
    display: flex;
    flex-direction: row; /* thumbs left, stage right */
    align-items: stretch;
    gap: 12px;
    height: 100%;
  }
  .business-card .gallery-thumbs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 72px;
    max-height: 100%;
    overflow-y: auto;
    padding-right: 4px;
    position: relative;
    z-index: 4;
    pointer-events: auto;
  }
  .business-card .gallery-thumbs::-webkit-scrollbar { width: 6px; }
  .business-card .gallery-thumbs::-webkit-scrollbar-track { background: rgba(177,187,172,0.12); border-radius: 3px; }
  .business-card .gallery-thumbs::-webkit-scrollbar-thumb { background: var(--color-gray); border-radius: 3px; }

  .business-card .gallery-thumb {
    display: block;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--border-radius);
    background: transparent;
    cursor: pointer !important;
    pointer-events: auto !important;
    overflow: hidden;
    transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
  }
  .business-card .gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .business-card .gallery-thumb:hover { transform: translateY(-1px); }
  .business-card .gallery-thumb.active { border-color: var(--color-burgundy); box-shadow: 0 0 0 2px rgba(123,36,41,0.15); }

  .business-card .gallery-stage {
    position: relative;
    flex: 1 1 auto;
    height: 100%;
    border-radius: var(--border-radius);
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Fit helpers when we compute aspect ratio on stage container */
  .business-card .gallery-stage.fit-width .gallery-main-image { width: 100%; height: auto; max-height: 100%; }
  .business-card .gallery-stage.fit-height .gallery-main-image { height: 100%; width: auto; max-width: 100%; }
}

/* Desktop gallery layout override: place thumbnails horizontally under the main image */
@media (min-width: 769px) {
  .business-card .gallery-column.minimal-gallery {
    flex-direction: column; /* stage on top, thumbs below */
    gap: 10px;
  }
  .business-card .gallery-stage { order: 0; flex: 1 1 auto; }
  .business-card .gallery-thumbs { 
    order: 1; 
    display: flex; 
    flex-direction: row; 
    align-items: center; 
    gap: 0.5vw; 
    width: 100%; 
    max-width: 100%; 
    max-height: none; 
    overflow-x: auto; 
    overflow-y: hidden; 
    position: relative;
    z-index: 4;
    pointer-events: auto;
  }
  .business-card .gallery-thumb { flex: 0 0 auto; width: 5vw; height: 5vw; }
  .business-card .gallery-thumbs::-webkit-scrollbar { height: 8px; }
  .business-card .gallery-thumbs::-webkit-scrollbar-track { background: rgba(177,187,172,0.12); border-radius: 3px; }
  .business-card .gallery-thumbs::-webkit-scrollbar-thumb { background: var(--color-gray); border-radius: 3px; }
}

/* Make popup wider and use near-full viewport height */
@media (min-width: 769px) {
  
  /* Let card fill popup height and allow internal scrolling */
  .business-card { height: 100%; }
  .card-body-row { flex: 1 1 auto; min-height: 0; }
  .business-card .card-content { overflow-y: auto; }
  /* Make image column larger and full-height */
  .business-card .card-image {
    flex: 0 0 52%;
    min-height: 100%;
  }
}

/* Adjust desktop close button position to new image width */
@media (min-width: 769px) {
  .maplibregl-popup-close-button { left: calc(52% + 16px) !important; }
}

/* Improved, scrollable description (desktop) */
@media (min-width: 769px) {
  /* Ensure only the description scrolls, not the whole content column */
  .business-card .card-content {
    overflow: visible; /* override earlier auto */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* avoid big gaps */
    gap: 12px;
    min-height: 0; /* enable children to shrink for flex scrolling */
  }
  .business-card .card-subtitle { margin-bottom: 4px; }
  .business-card .card-description {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;              /* critical for scroll inside flex */
    overflow-y: auto;           /* make only description scroll */
    padding-right: 8px;         /* room for scrollbar */
    line-height: 1.65;
    font-size: 2.5vh;
    color: var(--color-dark-gray);
    letter-spacing: 0.2px;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  /* Subtle custom scrollbar for description */
  .business-card .card-description::-webkit-scrollbar { width: 6px; }
  .business-card .card-description::-webkit-scrollbar-track { background: rgba(177,187,172,0.12); border-radius: 4px; }
  .business-card .card-description::-webkit-scrollbar-thumb { background: var(--color-gray); border-radius: 4px; }
}

/* Final desktop sizing + tighter text padding */
@media (min-width: 769px) {
  .business-card .card-description { padding-right: 6px; }
}

/* Ensure description scrolls by fixing popup height and flexing inner layout (desktop) */
@media (min-width: 769px) {
  .business-card { height: 100%; }
  .card-body-row { flex: 1 1 auto; min-height: 0; }
  .business-card .card-content { flex: 1 1 auto; min-height: 0; }
  .business-card .card-description { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
}

@media (min-width: 769px) {
  .business-card .card-description {
    overscroll-behavior: contain; /* prevent scroll chaining to map */
    -webkit-overflow-scrolling: touch; /* smooth scrolling */
  }
}

/* Final consolidated desktop popup sizing */
@media (min-width: 769px) {
  .business-card { 
    height: 100% !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .business-card .card-description { padding-right: 6px; }
  .card-body-row { 
    flex: 1 1 auto !important; 
    min-height: 0 !important;
    display: flex !important;
    flex-direction: row !important;
  }
  /* Keep actions column fixed and X button stable */
  .card-actions-vertical { 
    flex: 0 0 72px; 
    min-height: 0;
    display: flex !important;
  }
  .card-actions-vertical .card-close {
    flex-shrink: 0;
  }
  /* Let the image column and stage use full available height */
  .business-card .card-image { 
    flex: 0 0 52% !important;
    height: 100% !important; 
    min-height: 0 !important;
    display: flex !important;
  }
  .business-card .gallery-stage { 
    height: 100% !important; 
    min-height: 0 !important; 
  }
  /* Main image fills stage without cropping */
  .business-card .gallery-stage .gallery-main-image { 
    width: 100% !important; 
    height: 100% !important; 
    object-fit: contain !important; 
  }
}

/* Remove top/bottom bars for horizontal images by adapting frame to image aspect */
@media (min-width: 769px) {
  /* When JS marks the image as wide, don't force full height */
  .business-card .card-image.wide { height: auto !important; }
  .business-card .gallery-stage.wide { height: auto !important; background: transparent; }
  .business-card .gallery-stage.wide .gallery-main-image { height: auto !important; width: 100% !important; object-fit: contain !important; }
  /* Keep vertical/tall filling the available height */
  .business-card .gallery-stage.tall { height: 100% !important; }
  .business-card .gallery-stage.tall .gallery-main-image { height: 100% !important; width: auto !important; object-fit: contain !important; }
}

@media (min-width: 769px) {
  /* Lock frame height for vertical images to avoid layout shifts */
  .business-card .card-image.tall { height: 100% !important; }
  .business-card .card-image.tall .gallery-stage { flex: 1 1 auto; height: 100% !important; }
}

/* Center thumbnail row vertically in the remaining space for horizontal images */
@media (min-width: 769px) {
  .business-card .card-image.wide .gallery-stage { flex: 0 0 auto; }
}

/* Remove outer ring around active thumbnail and fix bottom clip */
@media (min-width: 769px) {
  .business-card .gallery-thumb.active {
    box-shadow: none !important; /* remove second border */
    border-color: var(--color-burgundy) !important; /* keep solid red border */
  }
  /* Prevent default focus outline from adding another border on click */
  .business-card .gallery-thumb { outline: none; }
  .business-card .gallery-thumb:focus { outline: none; }
  /* Keep keyboard accessibility with a subtle offset outline (only on keyboard focus) */
  .business-card .gallery-thumb:focus-visible {
    outline: 2px solid var(--color-burgundy);
    outline-offset: 2px;
  }
}

/* Ensure vertical images don't expand the frame (final overrides) */
@media (min-width: 769px) {
  .business-card .gallery-column.minimal-gallery { min-height: 0; }
  .business-card .gallery-stage { min-height: 0; }
  .business-card .gallery-stage.tall {
    height: auto !important;
    max-height: 100% !important;
    flex: 1 1 auto !important;
  }
}

/* Final orientation-safe sizing so vertical images don't grow the frame */
@media (min-width: 769px) {
  .business-card .gallery-column.minimal-gallery { display:flex; flex-direction: column; height: 100%; min-height: 0; }
  .business-card .gallery-stage { flex: 1 1 auto; min-height: 0; height: auto !important; max-height: 100% !important; }
  .business-card .gallery-stage.wide { max-height: 100% !important; }
  .business-card .gallery-stage .gallery-main-image { width: auto !important; height: auto !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; }
  .business-card .gallery-stage.wide .gallery-main-image { width: 100% !important; height: auto !important; }
  .business-card .gallery-stage.tall .gallery-main-image { height: 100% !important; width: auto !important; }
}

/* Final lock: tall images fill, never grow the frame */
@media (min-width: 769px) {
  .business-card .card-image { display:flex; flex-direction: column; }
  .business-card .card-image .gallery-stage { flex: 1 1 auto; min-height: 0; }
  /* Assume ~88px thumb + ~10px gap + paddings => reserve ~110px */
  .business-card .card-image.tall .gallery-stage { height: auto !important; max-height: calc(100% - 110px) !important; }
  .business-card .card-image.tall .gallery-stage .gallery-main-image { max-height: 100% !important; width: auto !important; }
  .business-card .card-image .gallery-thumbs { flex: 0 0 auto; }
}

/* Make gallery prev/next buttons more transparent on desktop */
@media (min-width: 769px) {
  .business-card .gallery-nav {
    background: rgba(255, 255, 255, 0.45) !important; /* was ~0.85 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  }
  .business-card .gallery-nav:hover {
    background: rgba(255, 255, 255, 0.65) !important; /* subtle on hover */
  }
}

/* Remove final override that forced width:auto on desktop */
/* (Reverted to allow designed wide desktop width) */
@media (min-width: 769px) {
}

/* Small desktop clamp: prevent popup/image from expanding after load */
@media (min-width: 769px) and (max-width: 1200px) {
  .maplibregl-popup-content.height-locked {
    max-height: min(calc(100vh - 64px), var(--popup-max-height, 75vh)) !important;
  }
  .business-card .card-body-row { max-height: inherit; }
}

/* Force desktop card layout when iframe viewport is narrow but host device is desktop */
@media (max-width: 768px) {
  body.host-desktop .maplibregl-popup-content {
    transform: translateX(-25%) !important;
    width: 82vw !important;
    min-width: 0 !important;
  }
  body.host-desktop .maplibregl-popup-content.height-locked {
    max-height: var(--popup-max-height, 75vh) !important;
  }
  body.host-desktop .card-body-row {
    display: flex;
    flex-direction: row;
    min-height: 0;
  }
  body.host-desktop .business-card .card-image {
    order: 1;
    flex: 0 0 48%;
    min-height: 300px;
    height: 100%;
    padding: 4vw;
    display: flex;
    align-items: stretch;
    justify-content: center;
    background: var(--color-sage);
    border-right: 1px solid rgba(222,229,219,0.4);
    position: relative;
    overflow: hidden;
  }
  body.host-desktop .business-card .card-image .card-image-el {
    object-fit: contain;
    display: block;
    background: #fff;
    border-radius: var(--border-radius);
  }
  body.host-desktop .card-actions-vertical {
    order: 2;
    flex: 0 0 auto;
    max-width: 9vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1vh;
    padding: 0.6vw;
    border-left: 1px solid rgba(222,229,219,0.4);
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  }
  body.host-desktop .card-actions-vertical .card-close {
    width: 5vh;
    height: 5vh;
    border-radius: 50%;
    border: none;
    background: var(--color-sage);
    color: var(--color-burgundy);
    font-size: 4vh;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
  }
  body.host-desktop .business-card .card-content {
    order: 0;
    min-width: 0;
    flex: 1 1 auto;
    border-right: 1px solid rgba(222,229,219,0.4);
    padding: 1vw 2vw;
    display: flex;
    flex-direction: column;
  }
  body.host-desktop .business-card .card-footer,
  body.host-desktop .business-card .social-links {
    display: none;
  }
  body.host-desktop .business-card .gallery-column.minimal-gallery {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
  }
  body.host-desktop .business-card .gallery-stage {
    position: relative;
    flex: 1 1 auto;
    border-radius: var(--border-radius);
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
  }
  body.host-desktop .business-card .gallery-thumbs {
    order: 1;
    display: flex;
    flex-direction: row;
    gap: 0.5vw;
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    scrollbar-width: thin;
    position: relative;
    z-index: 4;
    pointer-events: auto;
  }
  body.host-desktop .business-card .gallery-thumbs::-webkit-scrollbar { height: 6px; }
  body.host-desktop .business-card .gallery-thumbs::-webkit-scrollbar-track { background: rgba(177,187,172,0.12); border-radius: 3px; }
  body.host-desktop .business-card .gallery-thumbs::-webkit-scrollbar-thumb { background: var(--color-green); border-radius: 3px; }
  body.host-desktop .business-card .gallery-thumb {
    flex: 0 0 auto;
    width: 5vw;
    height: 5vw;
    border: 2px solid transparent;
    border-radius: var(--border-radius);
    background: transparent;
    cursor: pointer;
    transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
    pointer-events: auto;
  }
  body.host-desktop .business-card .gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  body.host-desktop .business-card .gallery-thumb:hover { transform: translateY(-1px); }
  body.host-desktop .business-card .gallery-thumb.active {
    border-color: var(--color-burgundy);
    box-shadow: 0 0 0 2px rgba(123,36,41,0.15);
  }
  body.host-desktop .business-card .gallery-stage .gallery-main-image {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
  }
  body.host-desktop .business-card .gallery-stage.wide .gallery-main-image {
    width: 100%;
    height: auto;
  }
  body.host-desktop .business-card .gallery-stage.tall .gallery-main-image {
    height: 100%;
    width: auto;
  }
  body.host-desktop .maplibregl-popup-close-button {
    top: 12px !important;
    left: calc(48% + 16px) !important;
    right: auto !important;
    background: rgba(255,255,255,0.95) !important;
    border: 1px solid rgba(222,229,219,0.4) !important;
    backdrop-filter: blur(8px) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08) !important;
  }
  body.host-desktop .business-card .gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 5vh;
    height: 5vh;
    border: none;
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    border-radius: var(--border-radius);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-burgundy);
    font-size: 4vh;
    z-index: 3;
    transition: background .2s ease, transform .2s ease;
    line-height: 1;
    pointer-events: auto;
  }
  body.host-desktop .business-card .gallery-nav.prev { left: -25px; }
  body.host-desktop .business-card .gallery-nav.next { right: -25px; }
  body.host-desktop .business-card .gallery-nav:hover { background:#fff; transform: translateY(-50%) scale(1.07); }
  body.host-desktop .gallery-dots { display: none !important; }
}

.maplibregl-ctrl-compass,
.maplibregl-ctrl-icon.maplibregl-ctrl-compass,
button.maplibregl-ctrl-compass,
.maplibregl-ctrl-group button.maplibregl-ctrl-compass {
  display: none !important;
}

.maplibregl-ctrl-icon {
    height: 3.5vh !important;
    width: 3.5vh !important;
    background-size: 100% 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

/* Mobile popup overlay for iframe embeds */
body.mobile-popup-open {
  overflow: hidden;
  touch-action: none;
}

#mobile-popup {
  position: fixed;
  inset: 0;
  padding: clamp(16px, 4vh, 32px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(8, 16, 9, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

body.mobile-popup-open #mobile-popup {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#mobile-popup .mobile-popup-inner {
  position: relative;
  width: min(520px, 94vw);
  max-height: 90vh;
  overflow-y: auto;
  border-radius: calc(var(--border-radius) * 1.5);
  background: #fff;
  padding: clamp(20px, 4vw, 28px);
  padding-top: clamp(44px, 8vw, 56px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}

#mobile-popup .mobile-popup-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(222, 229, 219, 0.95);
  color: var(--color-burgundy);
  font-size: 26px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-light);
  transition: transform 0.2s ease, background 0.2s ease;
}

#mobile-popup .mobile-popup-close:hover {
  background: rgba(222, 229, 219, 1);
}

#mobile-popup .mobile-popup-close:active {
  transform: scale(0.95);
}

#mobile-popup .business-card {
  max-height: none;
}

#mobile-popup .card-body-row {
  flex-direction: column;
}

#mobile-popup .card-actions-vertical {
  flex-direction: row;
  justify-content: flex-end;
  border-left: none;
  border-top: 1px solid rgba(222,229,219,0.4);
  max-width: none;
}


/* Extra small social icons for ultra-narrow screens */
.social-links {
  gap: 1vh; /* Even smaller gap */
}

.social-link {
  width: 5vh !important; /* Smaller icons */
  height: 5vh !important;
  font-size: 3vh !important; /* Smaller icon size */
}

.maplibregl-ctrl-attrib-button {
  display: none !important;
}