/*
  --------------------------------------------------
  UltraMap Sidebar & Location Cards
  --------------------------------------------------
  Modern, clean, and responsive design for the location
  list sidebar.
*/

/* --- Container --- */
.location-cards {
  position: absolute;
  top: 80px; /* Below header */
  left: 20px;
  width: 300px;
  /* dvh, not vh: with the iOS URL bar expanded the static viewport unit
     overshoots the visual viewport by ~60-100px and hides the last rows. */
  max-height: calc(100dvh - 100px);
  z-index: 50; /* Above map */
  display: flex;
  flex-direction: column;
  pointer-events: none; /* Let clicks pass through container */
  transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1), opacity 0.3s ease;
  padding-bottom: 20px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Mobile & Tablet responsiveness */
@media (max-width: 768px) {
  .location-cards {
    width: 100%;
    max-width: 100%;
    left: 0;
    top: auto;
    bottom: 0;
    max-height: 40vh;
    padding-bottom: 0;
    transform: translateY(0);
    border-radius: 20px 20px 0 0;
  }
  
  /* Collapsed state for mobile (slide down) */
  .location-cards.collapsed {
    transform: translateY(calc(100% - 60px));
  }
}

/* Desktop Collapsed state (slide left) */
@media (min-width: 769px) {
  .location-cards.collapsed {
    transform: translateX(calc(-100% - 20px));
  }

  /* When collapsed, slide the toggle out to the viewport's left edge so
     it sits flush rather than floating inset from the screen edge. */
  .location-cards.collapsed .location-cards-toggle {
    right: -32px;
  }
}


/* --- Toggle Button (Expand/Collapse) ---
   Visually attached to the right edge of the summary card — flat left
   side, rounded right side, no left border so it reads as a tab pulled
   out of the card rather than a separate floating chip. */
.location-cards-toggle {
  pointer-events: auto;
  position: absolute;
  top: 0;
  right: -27px;
  width: 32px;
  height: 44px;
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-left: none;
  border-radius: 0 10px 10px 0;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.2s, transform 0.2s, right 0.3s;
  z-index: 51;
}

.location-cards-toggle:hover {
  background: rgba(30, 41, 59, 0.95);
  color: white;
}

.location-cards-toggle svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

/* When collapsed, flip the chevron to point right */
.location-cards.collapsed .location-cards-toggle svg {
  transform: rotate(180deg);
}

/* --- Scrollable List Container --- */
.location-cards-list {
  pointer-events: auto;
  flex: 1;
  overflow-y: auto;
  padding-right: 5px; /* Space for scrollbar */
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  /* Scrollbar styling */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.location-cards-list::-webkit-scrollbar {
  width: 6px;
}
.location-cards-list::-webkit-scrollbar-track {
  background: transparent;
}
.location-cards-list::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 20px;
}

/* --- Individual Location Card --- */
.location-card {
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.location-card:hover {
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
}

.location-card.active-card {
  background: rgba(30, 41, 59, 0.95);
  border-color: var(--accent-color, #60a5fa); /* Fallback blue */
  box-shadow: 0 0 0 1px var(--accent-color, #60a5fa), 
              0 10px 15px -3px rgba(0, 0, 0, 0.3);
}

/* --- Card Content --- */
.location-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.location-card-title,
.location-card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: white;
  margin: 0;
  line-height: 1.3;
}

.location-card p {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.75);
  margin: 8px 0 0 0;
  line-height: 1.4;
}

.location-card-meta {
  display: flex;
  gap: 12px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 4px;
}

.location-card-meta span {
  display: flex;
  align-items: center;
}

.location-card-subtitle {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 12px 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Stats Row (Distance, Elevation, etc.) --- */
.location-card-stats {
  display: flex;
  gap: 12px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.8);
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.05);
  padding: 4px 8px;
  border-radius: 6px;
}

.stat-icon {
  width: 14px;
  height: 14px;
  opacity: 0.7;
}

/* --- Difficulty Badge --- */
.difficulty-badge {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: auto; /* Push to right */
}

.difficulty-easy { background: rgba(34, 197, 94, 0.2); color: #4ade80; }
.difficulty-moderate { background: rgba(234, 179, 8, 0.2); color: #facc15; }
.difficulty-hard { background: rgba(239, 68, 68, 0.2); color: #f87171; }
.difficulty-extreme { background: rgba(168, 85, 247, 0.2); color: #c084fc; }

/* --- Summary Card (Header above route list) ---
   Sticks to the top of the scrollable list so the filter + search stay
   available while the user scrolls through trails. position: relative on
   top of position: sticky so the open/close toggle (reparented here at
   runtime) anchors to this card's right edge. */
.location-summary-card {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 12px 16px;
  margin-bottom: 12px;
  pointer-events: auto;
}

.location-summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.location-summary-card h2 {
  font-size: 1rem;
  font-weight: 600;
  color: white;
  margin: 0;
  line-height: 1.3;
}

.summary-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.08);
  padding: 6px 10px;
  border-radius: 8px;
}

.summary-stat-value {
  font-size: 1rem;
  font-weight: 700;
  color: white;
}

.summary-stat-label {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* --- Search Input --- */
.summary-search {
  position: relative;
  margin-bottom: 8px;
}

.summary-search .search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: rgba(255, 255, 255, 0.4);
  pointer-events: none;
}

.summary-search .search-input,
.summary-search input[type="text"].search-input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 6px 10px 6px 32px !important;
  color: white;
  font-size: 0.8rem;
  outline: none;
  transition: all 0.2s ease;
  line-height: 1.2;
}

.summary-search .search-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.summary-search .search-input:focus {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.35);
}
/* Text inputs report :focus-visible on any focus method — the headlamp ring is
   the real indicator here (the border-alpha bump alone is imperceptible on the
   dark glass). Declared locally so it outranks the base `outline: none`. */
.summary-search .search-input:focus-visible,
.summary-search input[type="text"].search-input:focus-visible {
  outline: 2px solid var(--xp-focus-core, #ffd27a);
  outline-offset: 2px;
}

.summary-filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.summary-filter-buttons .region-filter-btn {
  padding: 5px 10px;
  font-size: 0.75rem;
}

/* --- Distance Slider Filter --- */
.summary-distance-filter {
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.distance-filter-label {
  display: flex;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0;
}

.distance-filter-value {
  color: white;
  font-weight: 500;
}

.distance-slider {
  width: 100%;
  height: 18px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 9px;
  cursor: pointer;
  border: none;
}

/* Mouse/drag focus stays quiet; keyboard focus keeps its outline (headlamp
   in-theme, UA ring pre-theme) plus the thumb ring below. */
.distance-slider:focus:not(:focus-visible) {
  outline: none;
}

.distance-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 18px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 9px;
  border: none;
}

.distance-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: rgba(255, 255, 255, 0.35);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
  box-shadow: none;
}

.distance-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.45);
}

.distance-slider::-webkit-slider-thumb:active {
  background: rgba(255, 255, 255, 0.5);
}

.distance-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: rgba(255, 255, 255, 0.35);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: none;
}

.distance-slider::-moz-range-thumb:active {
  background: rgba(255, 255, 255, 0.5);
}

.distance-slider::-moz-range-track {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 9px;
  height: 18px;
  border: none;
}

/* Keyboard focus — dual ring around the thumb (the focused thumb used to be
   styled identical to idle). Mouse interaction keeps the subtle hover/active
   states above. */
.distance-slider:focus-visible::-webkit-slider-thumb {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 2px var(--xp-focus-halo, rgba(8, 6, 4, 0.92)),
    0 0 0 4px var(--xp-focus-core, #ffd27a);
}

.distance-slider:focus-visible::-moz-range-thumb {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 2px var(--xp-focus-halo, rgba(8, 6, 4, 0.92)),
    0 0 0 4px var(--xp-focus-core, #ffd27a);
}

/* --- Region Filter Card --- */

.region-filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.region-filter-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.region-filter-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

.region-filter-btn.active {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border-color: rgba(255, 255, 255, 0.3);
  font-weight: 500;
}

/* --- Search Bar --- */
.location-search-container {
  margin-bottom: 12px;
  position: relative;
}

.location-search-input {
  width: 100%;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 10px 12px 10px 36px;
  color: white;
  font-size: 0.9rem;
  transition: all 0.2s ease;
  outline: none;
}

.location-search-input:focus {
  border-color: var(--accent-color, #60a5fa);
  background: rgba(15, 23, 42, 0.95);
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);
}

.location-search-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.location-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: rgba(255, 255, 255, 0.4);
  pointer-events: none;
}


/* --- Updated Filter Buttons with Icons --- */
/* (SVG styles removed as we switched to emojis) */

/* --- Country sub-filter (appears when a continent is selected) --- */
.summary-country-filter[data-empty="true"] {
    display: none;
}
.summary-country-filter {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.country-filter-label {
    font-size: 0.62rem;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 600;
    margin-bottom: 6px;
}
.country-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-height: 140px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.2) transparent;
    padding-right: 2px;
}
.country-filter-pills::-webkit-scrollbar { width: 4px; }
.country-filter-pills::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 2px; }

.country-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
    padding: 4px 8px;
    border-radius: 16px;
    font-size: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.country-filter-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}
.country-filter-btn.active {
    background: rgba(96, 165, 250, 0.22);
    border-color: rgba(96, 165, 250, 0.5);
    color: white;
}
.country-count {
    font-size: 0.62rem;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.25);
    color: rgba(255, 255, 255, 0.75);
    padding: 1px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}
.country-filter-btn.active .country-count {
    background: rgba(96, 165, 250, 0.4);
    color: white;
}

/* --- v2 Card Layout: full-bleed photo + text overlay ---------------------
   Whole card is the trail photo; title/country/stats overlay it via a bottom
   gradient scrim. Heart pinned top-right. */
.location-card.location-card-v2 {
  display: block;
  content-visibility: auto;
  contain-intrinsic-size: auto 140px;
  position: relative;
  padding: 0;
  margin-bottom: 10px;
  border: none;
  outline: none;
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 21 / 9;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.location-card.location-card-v2:hover {
  border: none;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
}
.location-card.location-card-v2.active-card {
  border: none;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
}

/* Keep the selected trail stroke inside the card. The list is vertically
   scrollable, so an outer box-shadow outline gets clipped on the left edge. */
.location-card.location-card-v2.active-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border: 2px solid var(--accent-color, #b85c3c);
  border-radius: inherit;
  pointer-events: none;
}

/* U2.3: trail cards are now real <a> deep-links. Strip link chrome so they
   render pixel-identically to their former <div> selves. Only the v2 trail
   cards become anchors — the summary + no-results cards stay <div>. */
a.location-card {
  text-decoration: none;
  color: inherit;
  display: block;
}
a.location-card:hover,
a.location-card:focus,
a.location-card:focus-visible {
  text-decoration: none;
}

/* Keyboard focus ring for the card link. The base v2 rule sets outline:none,
   and the scroll container (overflow on both axes) clips outer outlines on the
   left edge — so, exactly like .active-card, we draw an INSET headlamp ring via
   ::after. This selector's specificity outranks .active-card::after, so focus
   stays visible even on the currently-selected card. */
a.location-card.location-card-v2:focus-visible {
  outline: none;
}
a.location-card.location-card-v2:focus-visible::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border: 2px solid var(--xp-focus-core, #ffd27a);
  border-radius: inherit;
  box-shadow: 0 0 0 2px var(--xp-focus-halo, rgba(8, 6, 4, 0.92));
  pointer-events: none;
}

/* Heart — pinned top-right of the photo. No chip; just an outlined icon
   with a drop shadow so it stays legible on bright or dark imagery.
   Outlined by default, solid brand red when favorited. */
.location-card-fav {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  -webkit-appearance: none;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.15s ease;
}
.location-card-fav svg {
  width: 18px;
  height: 18px;
  fill: rgba(0, 0, 0, 0.15);
  stroke: currentColor;
  stroke-width: 2;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 1px rgba(0, 0, 0, 0.5));
  transition: fill 0.2s ease, stroke 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.location-card-fav:hover { transform: scale(1.12); }
.location-card-fav:active { transform: scale(0.92); }
.location-card-fav:focus { outline: none; }
.location-card-fav:focus-visible {
  outline: none;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}
.location-card-fav.is-fav { color: #ff3b30; }
.location-card-fav.is-fav svg {
  fill: currentColor;
  stroke-width: 1.6;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
  animation: fav-pop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.location-card-fav.is-fav:hover { color: #ff3b30; }
@keyframes fav-pop {
  0%   { transform: scale(0.6); }
  60%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}

.location-card-v2 .location-card-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
}

.location-card-v2 .location-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.5s ease;
}

/* Loading shimmer — a subtle sweep shown until the photo paints (or fails), so
   a card on a slow connection reads as "loading a photo" instead of a blank
   box. Sits BEHIND the <img> (pseudo ::before paints before in-flow content),
   which fades in on top of it. Reuses @keyframes poi-popup-skeleton (main.css).
   Left unpositioned-z so the gradient scrim (::after) still layers above. */
.location-card-v2 .location-card-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Topo-contour skeleton (shared pattern + brand token, main.css): flat
     terracotta punched through by the contour mask, with the existing sweep
     travelling across it as the highlight. Masked to the lines only, so the
     card reads as a map arriving rather than as a grey box. */
  background-color: var(--earth-terracotta);
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  opacity: 0.32;
  -webkit-mask-image: var(--dbm-contour-tile);
  mask-image: var(--dbm-contour-tile);
  -webkit-mask-size: var(--dbm-contour-size);
  mask-size: var(--dbm-contour-size);
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  animation: poi-popup-skeleton 1.2s ease-in-out infinite;
  pointer-events: none;
}
.location-card-v2 .location-card-thumb.is-loaded img {
  opacity: 1;
}
.location-card-v2 .location-card-thumb.is-loaded::before,
.location-card-v2 .location-card-thumb.img-load-failed::before {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .location-card-v2 .location-card-thumb img { transition: none; }
  /* Static contour pattern: the sweep layer goes, the lines stay. */
  .location-card-v2 .location-card-thumb::before {
    animation: none;
    background-image: none;
  }
}

.location-card-v2 .location-card-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.82) 0%,
    rgba(0, 0, 0, 0.45) 35%,
    rgba(0, 0, 0, 0) 60%
  );
  pointer-events: none;
}

.location-card-v2:hover .location-card-thumb img {
  transform: scale(1.04);
}

.location-card-v2 .location-card-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.location-card-v2 .location-card-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.location-card-v2 .location-card-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.75), 0 1px 2px rgba(0, 0, 0, 0.55);
  letter-spacing: -0.005em;
}

.location-card-v2 .location-card-country {
  font-size: 0.62rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.location-card-v2 .location-card-stats-row {
  display: flex;
  gap: 12px;
  margin-top: 4px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
}

.location-card-v2 .location-card-stats-row span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.location-card-v2 .location-card-stats-row svg {
  opacity: 0.7;
  flex-shrink: 0;
}

/* Active state refinements for v2 */
.location-card-v2.active-card {
  background: rgba(30, 41, 59, 0.95);
  border-color: rgba(96, 165, 250, 0.8);
  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.5), 0 8px 20px -4px rgba(0, 0, 0, 0.4);
}

/* Mobile: slightly smaller image, still readable */
@media (max-width: 768px) {
  .location-card.location-card-v2 {
    grid-template-columns: 72px 1fr;
    gap: 10px;
  }
  .location-card-v2 .location-card-thumb {
    width: 72px;
    height: 62px;
  }
  .location-card-v2 .location-card-title {
    font-size: 0.9rem;
  }
}

/* =========================================================================
   EARTHY LIGHT THEME OVERRIDES
   ─────────────────────────────────────────────────────────────────────────
   Flips the sidebar palette from dark navy glass to warm cream. All the
   layout above is untouched — these overrides only change colors, borders,
   and text. Variables match plan-drawer.css.
   ========================================================================= */

.location-summary-card {
  background:
    linear-gradient(180deg, rgba(245, 239, 228, 0.66), rgba(226, 216, 196, 0.54)) !important;
  backdrop-filter: blur(30px) saturate(128%);
  -webkit-backdrop-filter: blur(30px) saturate(128%);
  border: none !important;
  color: #2d2620 !important;
  box-shadow:
    0 18px 48px rgba(35, 28, 20, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  padding: 12px 14px;
  /* Square off the top-right corner so the toggle tab merges flush. */
  border-top-right-radius: 0;
}
.location-summary-card h2 {
  color: #2d2620 !important;
}
.summary-stat {
  background: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(224, 213, 194, 0.6);
}
.summary-stat-value { color: #2d2620 !important; }
.summary-stat-label { color: #948a7a !important; }

/* Search input */
.location-search-input,
.search-input {
  background: rgba(255, 255, 255, 0.36) !important;
  border: 1px solid rgba(45, 38, 32, 0.12) !important;
  color: #2d2620 !important;
}
.location-search-input::placeholder,
.search-input::placeholder { color: rgba(93, 84, 72, 0.72) !important; }
.location-search-icon,
.search-icon { color: rgba(93, 84, 72, 0.68) !important; }
.location-search-input:focus,
.search-input:focus {
  border-color: rgba(184, 70, 31, 0.54) !important;
  background: rgba(255, 255, 255, 0.52) !important;
  box-shadow: 0 0 0 3px rgba(184, 70, 31, 0.13);
}
.summary-search .search-input {
  min-height: 44px;
  border-radius: 14px;
  font-size: 0.9rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
}
.summary-search .search-input:focus {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 0 0 3px rgba(184, 70, 31, 0.13);
}

/* Continent filter pills */
.region-filter-btn {
  background: rgba(255, 255, 255, 0.6) !important;
  border: 1px solid rgba(224, 213, 194, 0.6) !important;
  color: #5d5448 !important;
}
.region-filter-btn:hover {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(184, 70, 31, 0.4) !important;
  color: #2d2620 !important;
}
.region-filter-btn.active {
  background: #b85c3c !important;
  border-color: #9a4a2e !important;
  color: white !important;
}

/* Country sub-filter */
.summary-country-filter {
  border-top-color: rgba(255, 255, 255, 0.18) !important;
}
.country-filter-label { color: rgba(255, 255, 255, 0.72) !important; }
.country-filter-btn {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}
.country-filter-btn:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
  color: #fff !important;
}
.country-filter-btn.active {
  background: rgba(184, 70, 31, 0.34) !important;
  border-color: rgba(226, 143, 112, 0.82) !important;
  color: #fff !important;
}
.country-count {
  background: rgba(0, 0, 0, 0.18) !important;
  color: rgba(255, 255, 255, 0.82) !important;
}
.country-filter-btn.active .country-count {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
}

/* Difficulty filter */
.summary-difficulty-filter {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(45, 38, 32, 0.10);
}
.difficulty-filter-label,
.distance-filter-label {
  color: #3d342c !important;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
}
.difficulty-filter-label {
  margin-bottom: 6px;
}
.difficulty-filter-pills {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}
.difficulty-filter-btn {
  appearance: none;
  border: 1px solid rgba(45, 38, 32, 0.10);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
  color: rgba(93, 84, 72, 0.84);
  cursor: pointer;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
  min-width: 0;
  padding: 6px 4px;
  text-align: center;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.difficulty-filter-btn:hover {
  background: rgba(255, 255, 255, 0.42);
  border-color: rgba(45, 38, 32, 0.16);
  color: #2d2620;
  transform: translateY(-1px);
}
.difficulty-filter-btn.active {
  background: rgba(184, 70, 31, 0.78);
  border-color: rgba(154, 74, 46, 0.34);
  color: #fff;
}

/* Distance slider */
.summary-distance-filter { color: #3d342c !important; }
.summary-distance-filter {
  padding-top: 10px;
  border-top: none !important;
}
.distance-filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.distance-filter-value { color: #9a4a2e !important; font-weight: 800; }
.distance-mode-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 3px;
  margin: 0;
  padding: 3px;
  background: rgba(255, 255, 255, 0.24);
  border: 1px solid rgba(45, 38, 32, 0.10);
  border-radius: 999px;
}
.distance-mode-btn {
  appearance: none;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(93, 84, 72, 0.78);
  cursor: pointer;
  font-size: 0.64rem;
  font-weight: 800;
  line-height: 1;
  padding: 6px 8px;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.distance-mode-btn:hover {
  color: #2d2620;
}
.distance-mode-btn.active {
  background: rgba(255, 255, 255, 0.58);
  color: #2d2620;
  box-shadow: 0 1px 4px rgba(60, 45, 30, 0.08);
}
.distance-slider {
  height: 22px;
  background: transparent !important;
}
.distance-slider::-webkit-slider-runnable-track {
  height: 10px;
  background: linear-gradient(
    90deg,
    rgba(184, 70, 31, 0.72) 0%,
    rgba(184, 70, 31, 0.72) var(--distance-progress, 100%),
    rgba(45, 38, 32, 0.14) var(--distance-progress, 100%),
    rgba(45, 38, 32, 0.14) 100%
  ) !important;
  border-radius: 999px;
}
.distance-slider::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  margin-top: -6px;
  background: #b85c3c;
  border: 3px solid rgba(255, 255, 255, 0.96);
  box-shadow: 0 4px 12px rgba(60, 45, 30, 0.24);
}
.distance-slider::-webkit-slider-thumb:hover,
.distance-slider:focus::-webkit-slider-thumb {
  background: #c66a4a;
  box-shadow: 0 5px 14px rgba(60, 45, 30, 0.28), 0 0 0 4px rgba(184, 70, 31, 0.12);
}
.distance-slider::-webkit-slider-thumb:active {
  background: #9a4a2e;
  transform: scale(1.04);
}
.distance-slider::-moz-range-track {
  height: 10px;
  background: rgba(45, 38, 32, 0.14) !important;
  border-radius: 999px;
}
.distance-slider::-moz-range-progress {
  height: 10px;
  background: rgba(184, 70, 31, 0.72);
  border-radius: 999px;
}
.distance-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: #b85c3c;
  border: 3px solid rgba(255, 255, 255, 0.96);
  box-shadow: 0 4px 12px rgba(60, 45, 30, 0.24);
}
.distance-slider::-moz-range-thumb:hover,
.distance-slider:focus::-moz-range-thumb {
  background: #c66a4a;
  box-shadow: 0 5px 14px rgba(60, 45, 30, 0.28), 0 0 0 4px rgba(184, 70, 31, 0.12);
}
.distance-slider::-moz-range-thumb:active {
  background: #9a4a2e;
}
.distance-range-labels {
  /* The "10 km / Any" scale endpoints are redundant with the "Up to N km"
     readout in the header above — hide them to declutter the slider. */
  display: none;
}

/* Toggle button (collapse sidebar) — same chrome as the summary card so
   it reads as one continuous piece, with a soft seam shadow on the left
   edge to subtly suggest the tab is "pulled" out of the card. */
.location-cards-toggle {
  background:
    linear-gradient(180deg, rgba(28, 30, 36, 0.88), rgba(20, 22, 27, 0.84)) !important;
  backdrop-filter: blur(30px) saturate(128%);
  -webkit-backdrop-filter: blur(30px) saturate(128%);
  border: none !important;
  color: #f1ede6 !important;
  box-shadow: inset 6px 0 8px -6px rgba(0, 0, 0, 0.3), 6px 6px 18px rgba(0, 0, 0, 0.4);
}
.location-cards-toggle:hover {
  background: rgba(40, 43, 50, 0.92) !important;
  color: var(--xp-terracotta, #b8461f) !important;
}

/* Legacy v1 trail cards — frosted cream glass, matched to the
   continents/summary card so all major surfaces read as one family.
   v2 cards opt out: they're full-bleed photo cards and shouldn't carry
   the cream tint, the white border, or the backdrop blur (which creates
   a visible halo around the rounded corners against the map). */
.location-card {
  background: rgba(245, 239, 228, 0.62) !important;
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 2px 10px rgba(60, 45, 30, 0.08);
}
.location-card:hover {
  background: rgba(245, 239, 228, 0.78) !important;
  border-color: rgba(184, 70, 31, 0.4) !important;
  box-shadow: 0 10px 24px rgba(60, 45, 30, 0.16) !important;
  transform: translateY(-2px);
}
.location-card.active-card {
  background: rgba(245, 239, 228, 0.85) !important;
  border-color: #b85c3c !important;
  box-shadow: 0 0 0 2px rgba(243, 220, 207, 0.7), 0 10px 24px rgba(60, 45, 30, 0.18) !important;
}

.location-card.location-card-v2 {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}
.location-card.location-card-v2:hover {
  background: transparent !important;
  border: none !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5) !important;
  transform: translateY(-2px);
}
.location-card.location-card-v2.active-card {
  background: transparent !important;
  border: none !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5) !important;
}

/* Card titles + content — white-on-glass with subtle shadow for legibility */
.location-card h3,
.location-card-v2 .location-card-title {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.location-card p,
.location-card-subtitle,
.location-card-meta,
.location-card-v2 .location-card-country {
  color: rgba(255, 255, 255, 0.92) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.location-card-v2 .location-card-stats-row {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.location-card-v2 .location-card-stats-row svg {
  opacity: 0.85;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}

/* Difficulty badges keep their color; just nudge to read on light bg */
.difficulty-easy     { background: rgba(74, 125, 58, 0.15) !important; color: #4a7d3a !important; }
.difficulty-moderate { background: rgba(212, 163, 65, 0.18) !important; color: #997620 !important; }
.difficulty-hard     { background: rgba(184, 80, 64, 0.15) !important; color: #b85040 !important; }
.difficulty-extreme  { background: rgba(122, 80, 174, 0.15) !important; color: #6a3fa6 !important; }

/* Scrollbar — warmer */
.location-cards-list::-webkit-scrollbar-thumb {
  background-color: rgba(202, 187, 160, 0.6) !important;
}

/* "No results" empty state — match the summary filter card chrome. */
.no-results-card {
  background:
    linear-gradient(180deg, rgba(245, 239, 228, 0.66), rgba(226, 216, 196, 0.54)) !important;
  backdrop-filter: blur(30px) saturate(128%);
  -webkit-backdrop-filter: blur(30px) saturate(128%);
  border: none !important;
  color: #2d2620 !important;
  cursor: default;
  box-shadow:
    0 18px 48px rgba(35, 28, 20, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}
.no-results-card:hover {
  background:
    linear-gradient(180deg, rgba(245, 239, 228, 0.66), rgba(226, 216, 196, 0.54)) !important;
  box-shadow:
    0 18px 48px rgba(35, 28, 20, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
  transform: none;
}
.no-results-card h3 {
  color: #2d2620 !important;
  text-shadow: none !important;
}
.no-results-card p {
  color: #5d5448 !important;
  text-shadow: none !important;
}
.no-results-card svg {
  color: rgba(45, 38, 32, 0.52);
  filter: none;
}
.btn-clear-filters {
  background: rgba(255, 255, 255, 0.26) !important;
  border: 1px solid rgba(184, 70, 31, 0.65) !important;
  color: #9a4a2e !important;
}
.btn-clear-filters:hover {
  background: rgba(184, 70, 31, 0.78) !important;
  color: white !important;
}

/* Climate / season badge color tweaks if rendered inside the list */
.climate-verdict-badge {
  filter: brightness(0.95);
}

/* =========================================================================
   World map filter (replaces continent pill row)
   ========================================================================= */

.world-map-section {
  /* Continents map hidden in the left-side column for now */
  display: none;
  margin: 8px 0 0;
}

.world-map-eyebrow {
  margin: 0 0 7px;
  color: rgba(45, 38, 32, 0.72);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.world-map-filter {
  padding: 6px;
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.30), rgba(202, 187, 160, 0.22));
  border: 1px solid rgba(45, 38, 32, 0.10);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.world-map-svg {
  width: 100%;
  height: auto;
  aspect-ratio: 2.35 / 1;
  display: block;
  user-select: none;
  overflow: hidden;
}

/* Continent shapes */
.world-continent {
  fill: rgba(105, 134, 87, 0.66);
  stroke: rgba(54, 72, 44, 0.50);
  stroke-width: 0.75;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill 0.16s ease, stroke 0.16s ease, opacity 0.16s ease;
}
.world-continent:hover {
  fill: rgba(126, 160, 98, 0.96);
  stroke: rgba(41, 59, 33, 0.9);
  stroke-width: 1.15;
  filter: drop-shadow(0 2px 3px rgba(35, 28, 20, 0.18));
}
.world-continent.active {
  fill: var(--earth-terracotta, #b85c3c);
  stroke: var(--earth-terracotta-hover, #9a4a2e);
  stroke-width: 1;
}

/* Continent labels (tiny, only show on hover unless active) */
.world-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.35px;
  text-transform: uppercase;
  fill: rgba(45, 38, 32, 0.86);
  cursor: pointer;
  pointer-events: auto;
  paint-order: stroke;
  stroke: rgba(245, 239, 228, 0.80);
  stroke-width: 2.2;
  stroke-linejoin: round;
  opacity: 0.92;
  transition: opacity 0.15s, fill 0.15s;
}
.world-label:hover { opacity: 1; fill: #2d2620; }
.world-label.active {
  opacity: 1;
  fill: white;
  stroke: var(--earth-terracotta-hover, #9a4a2e);
  stroke-width: 2.5;
}

/* "All continents" reset button under the map */
.world-map-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  margin-top: 10px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.26);
  border: 1px solid rgba(45, 38, 32, 0.10);
  border-radius: 999px;
  color: rgba(45, 38, 32, 0.86);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}
.world-map-all-btn span:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.36);
  color: currentColor;
  font-size: 14px;
  line-height: 1;
  flex: 0 0 auto;
}
.world-map-all-btn:hover {
  background: rgba(255, 255, 255, 0.42);
  color: #2d2620;
  border-color: rgba(45, 38, 32, 0.16);
}
.world-map-all-btn.active {
  background: rgba(255, 255, 255, 0.42);
  border-color: rgba(45, 38, 32, 0.16);
  color: #2d2620;
}

/* Hide the legacy pill row if any legacy code path still emits it. */
.summary-filter-buttons { display: none !important; }

/* Country flag inside country pills */
.country-flag {
  font-size: 0.85em;
  line-height: 1;
  margin-right: 2px;
}

/* ===== Browse / filter summary card — dark theme (all viewports) ==========
   The search panel ("Search N trails", difficulty + distance filters) is
   hardcoded cream above; re-skin it dark to match the rest of the UI.
   Terracotta accents (active pills, slider fill, distance value) are kept.
   Appended last so it overrides the cream rules in this file. */
.location-summary-card {
  background: linear-gradient(180deg, rgba(28, 30, 36, 0.88), rgba(20, 22, 27, 0.84)) !important;
  color: #f1ede6 !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
.location-summary-card h2 { color: #f1ede6 !important; }
.location-summary-card .summary-stat {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}
.location-summary-card .summary-stat-value { color: #f1ede6 !important; }
.location-summary-card .summary-stat-label { color: #b9b2a6 !important; }
/* Search input */
.location-summary-card .search-input,
.location-summary-card .location-search-input {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #f1ede6 !important;
}
.location-summary-card .search-input::placeholder,
.location-summary-card .location-search-input::placeholder { color: rgba(255, 255, 255, 0.5) !important; }
.location-summary-card .search-icon,
.location-summary-card .location-search-icon { color: rgba(255, 255, 255, 0.5) !important; }
.location-summary-card .search-input:focus,
.location-summary-card .location-search-input:focus {
  border-color: rgba(215, 90, 40, 0.6) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}
/* Difficulty filter */
.location-summary-card .difficulty-filter-label,
.location-summary-card .distance-filter-label,
.location-summary-card .summary-difficulty-filter,
.location-summary-card .summary-distance-filter { color: #f1ede6 !important; }
.location-summary-card .summary-difficulty-filter { border-top-color: rgba(255, 255, 255, 0.1) !important; }
.location-summary-card .difficulty-filter-btn {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: rgba(255, 255, 255, 0.82) !important;
}
.location-summary-card .difficulty-filter-btn:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
}
.location-summary-card .difficulty-filter-btn.active {
  background: rgba(184, 70, 31, 0.85) !important;
  border-color: rgba(215, 90, 40, 0.5) !important;
  color: #fff !important;
}
/* Distance filter */
.location-summary-card .distance-filter-value { color: var(--xp-terracotta, #b8461f) !important; }
.location-summary-card .distance-mode-toggle {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}
.location-summary-card .distance-mode-btn { color: rgba(255, 255, 255, 0.6) !important; }
.location-summary-card .distance-mode-btn:hover { color: #fff !important; }
.location-summary-card .distance-mode-btn.active {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #fff !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
}
.location-summary-card .distance-slider::-webkit-slider-runnable-track {
  background: linear-gradient(90deg,
    rgba(215, 90, 40, 0.85) 0%,
    rgba(215, 90, 40, 0.85) var(--distance-progress, 100%),
    rgba(255, 255, 255, 0.16) var(--distance-progress, 100%),
    rgba(255, 255, 255, 0.16) 100%) !important;
}
.location-summary-card .distance-slider::-moz-range-track {
  background: rgba(255, 255, 255, 0.16) !important;
}
/* Continent pills (desktop) */
.location-summary-card .region-filter-btn {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: rgba(255, 255, 255, 0.8) !important;
}
.location-summary-card .region-filter-btn:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
}
.location-summary-card .region-filter-btn.active {
  background: #b85c3c !important;
  border-color: #9a4a2e !important;
  color: #fff !important;
}