:root {
  --x-pink: #f833a9;
  --x-purple: #1f2330;
  --z-back: -1;
  --z-normal: 1;
  --z-sticky: 100;
  --z-drawer: 650;
  --z-modal: 1000;
  --z-popover: 2100;
  --z-tooltip: 3000;
  --z-highest: 5000;
  --x-gradient: linear-gradient(135deg, #f833a9 0%, #4819c2 100%);
  --bg: #080d27;
  --panel: rgba(12, 18, 44, 0.92);
  --text: #eaedff;
  --muted: #9aa6d1;
  --border: rgba(51, 70, 121, 0.55);
  --chip: rgba(37, 53, 117, 0.5);
  --chipHover: rgba(60, 82, 217, 0.35);
  --shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
  --radius: 16px;
  --topbarH: 80px;
  --panelW: 360px;
  --xplrit-bg: #080d27;
  --xplrit-bg-2: #0c1431;
  --xplrit-panel: #1b275a;
  --xplrit-panel-2: #0e1434;
  --xplrit-border: #334679;
  --xplrit-border-soft: rgba(51, 70, 121, 0.5);
  --xplrit-text: #eaedff;
  --xplrit-muted: #9aa6d1;
  --xplrit-accent: #f833a9;
  --xplrit-blue: #3c52d9;
  --xplrit-chip: #162561;
  --xplrit-chip-hover: #253575;
  --xplrit-surface: linear-gradient(180deg, #1b275a 0%, #0e1434 100%);
  --xplrit-surface-2: linear-gradient(180deg, #253575 0%, #162561 100%);
  --xplrit-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --border-radius-sm: 6px;
  --border-radius-md: 12px;
  --border-radius-lg: 24px;
  --shadow-light: 0 2px 8px rgba(0,0,0,0.1);
  --shadow-medium: 0 4px 16px rgba(0,0,0,0.2);
  --shadow-heavy: 0 8px 32px rgba(0,0,0,0.3);
}

/* Reset */
* {
  box-sizing: border-box;
  font-family: inherit;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--text);
  background-color: var(--bg);
  /* background-image:
    radial-gradient(900px 420px at 70% 15%, rgba(46, 242, 255, 0.18), transparent 60%),
    radial-gradient(800px 520px at 20% 80%, rgba(60, 82, 217, 0.18), transparent 60%),
    radial-gradient(2px 2px at 20% 30%, rgba(255, 255, 255, 0.16), transparent 60%),
    radial-gradient(1px 1px at 70% 20%, rgba(255, 255, 255, 0.12), transparent 60%),
    radial-gradient(1px 1px at 40% 70%, rgba(255, 255, 255, 0.1), transparent 60%); */
  overflow: hidden;
  /* app scrolls inside panels */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(520px 320px at 62% 25%, rgba(46, 242, 255, 0.35), transparent 65%),
    radial-gradient(460px 300px at 72% 38%, rgba(60, 82, 217, 0.3), transparent 70%),
    radial-gradient(760px 420px at 32% 30%, rgba(12, 24, 56, 0.55), transparent 70%);
  opacity: 0.75;
  pointer-events: none;
  z-index: 0;
}

body::after {
  content: "";
  position: fixed;
  inset: -10%;
  background:
    repeating-radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 280px),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 280px);
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}

[hidden] {
  display: none !important;
}

.app,
.topbar,
.main {
  position: relative;
  z-index: 1;
}

/* App layout */
.app {
  height: 100dvh;
  display: grid;
  grid-template-rows: var(--topbarH) 1fr;
  min-height: 0;
}

/* Top bar */
.topbar {
  height: var(--topbarH);
  position: sticky;
  top: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 18px;
  border-bottom: 1px solid var(--surface-2);
  background: var(--surface-1);
  color: var(--text);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.headerActions{
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.mark img {
  width: auto;
  height: 54px;
  display: block;
  object-fit: contain;
}

.brandName {
  font-size: 20px;
  color: #333
}

/* Flat charcoal header styles */
.search {
  flex: 1 1 auto;
  min-width: 280px;
  display: flex;
  align-items: center;
  height: 42px;
  border: 1px solid var(--input-border);
  border-radius: 999px;
  padding: 0 14px;
  background: var(--surface-3);
  gap: 10px;
  position: relative;
  box-shadow: none;
}

.search:focus-within {
  border-color: #3a79ff;
  box-shadow: none;
}

.ideaBtn {
  border: 1px solid var(--blue-border);
  background: var(--xplrit-blue);
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .01em;
  color: #ffffff;
  box-shadow: none;
  position: relative;
  overflow: hidden;
}

.ideaBtn::before,
.ideaBtn::after {
  content: none;
}

.ideaBtn:hover::before {
  opacity: 0;
}

.ideaBtn span {
  position: relative;
  z-index: 2;
}

.ideaBtn .ideaIcon {
  position: relative;
  z-index: 2;
}

.ideaBtn:hover {
  background: var(--xplrit-blue);
  border-color: var(--blue-border);
  box-shadow: none;
}

.ideaBtn.open,
.ideaBtn.open:hover {
  background: var(--xplrit-blue);
  border-color: var(--blue-border);
  box-shadow: none;
}

.ideaBtn.open::before {
  opacity: 0;
}

.ideaBtn:active {
  transform: translateY(1px);
  background: var(--xplrit-blue);
  border-color: var(--xplrit-blue);
  box-shadow: none;
}

.ideaIcon {
  display: inline-flex;
  align-items: center;
}

.ideaIcon img {
  width: 16px;
  height: 16px;
  display: block;
}

.ideaBadge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(25, 89, 173, 0.35);
  background: rgba(12, 18, 44, 0.85);
  box-shadow: 0 12px 26px rgba(80, 40, 140, 0.35);
  font-size: 12px;
  font-weight: 800;
  color: #eaedff;
  opacity: 0;
  transform: translateY(6px) scale(.98);
  transition: opacity .2s cubic-bezier(0.2, 0.9, 0.2, 1),
    transform .2s cubic-bezier(0.2, 0.9, 0.2, 1);
}

.ideaBadge .presetIcon {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: rgba(25, 89, 173, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ideaBadge .presetIcon img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}

.ideaBadge .presetText {
  display: grid;
  gap: 4px;
}

.ideaBadge .presetLabel {
  font-weight: 800;
  font-size: 14px;
  color: var(--text);
}

.ideaBadge .presetDesc {
  font-size: 12px;
  color: rgba(233, 228, 255, 0.7);
  line-height: 1.3;
}

.floatingBadge {
  position: absolute;
  top: 20px;
  left: calc(20px + var(--panelW) + 12px);
  z-index: 520;
}

.ideaBadge button {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: rgba(233, 228, 255, 0.7);
  padding: 0 2px;
}

.ideaBadge button:hover {
  color: var(--text);
}

.ideaBadge.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.ideaBadge.is-hiding {
  opacity: 0;
  transform: translateY(0) scale(1);
  transition: opacity .14s ease-in;
}

.searchIcon {
  display: inline-flex;
  align-items: center;
}

.searchIcon img {
  width: 16px;
  height: 16px;
  display: block;
  opacity: 0.8;
}

.search input {
  width: 100%;
  border: none;
  outline: none;
  font-size: 13px;
  letter-spacing: .02em;
  background: transparent;
  color: var(--text);
}

.search input::placeholder {
  color: rgba(233, 228, 255, 0.55);
}

.searchMenu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--drawer-bg);
  border: 1px solid var(--drawer-border);
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
  padding: 10px;
  display: grid;
  gap: 8px;
  z-index: 2100;
    z-index: var(--z-popover);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.searchMenuTitle {
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .02em;
  color: rgba(233, 228, 255, 0.6);
  text-transform: uppercase;
}

.searchMenuList {
  display: grid;
  gap: 6px;
}

.searchMenuItem {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(25, 89, 173, 0.2);
  background: rgba(12, 18, 44, 0.85);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}

.searchMenuItem:hover {
  background: rgba(37, 53, 117, 0.75);
  border-color: var(--xplrit-accent);
}

.searchMenuName {
  font-weight: 700;
  font-size: 14px;
  color: #eaedff;
}

.searchMenuMeta {
  font-size: 12px;
  color: rgba(233, 228, 255, 0.7);
}

.searchMenuEmpty {
  font-size: 13px;
  color: rgba(233, 228, 255, 0.6);
  padding: 6px 2px;
}

.iconBtn {
  border: none;
  background: transparent;
  cursor: pointer;
  color: rgba(233, 228, 255, 0.7);
  font-size: 14px;
  padding: 6px;
  border-radius: 10px;
}

.iconBtn:hover {
  background: rgba(25, 89, 173, 0.2);
  color: #fff;
}

.toplinks {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
  color: #c6bedf;
  font-size: 12px;
  white-space: nowrap;
}

.toplinks a {
  color: inherit;
  text-decoration: none;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 600;
}

.toplinks a:hover {
  color: #fff;
}

.topLinkBtn {
  background: transparent;
  border: none;
  color: inherit;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 10px;
}

.topLinkBtn:hover {
  color: #fff;
  background: rgba(25, 89, 173, 0.15);
}

/* Avatar menu popover */
.avatarMenu{
  position: fixed;
  min-width: 200px;
  background: var(--drawer-bg);
  border: 1px solid var(--drawer-border);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 2100;
  opacity: 0;
  transform: translateY(6px) scale(.98);
  transition: opacity .14s cubic-bezier(.33,1,.68,1), transform .14s cubic-bezier(.33,1,.68,1);
}
.avatarMenu.open{
  opacity: 1;
  transform: translateY(0) scale(1);
}
.avatarMenuTitle{
  font-size: 11px;
  font-weight: 800;
  color: rgba(234, 237, 255, 0.6);
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px 6px 8px;
}
.avatarMenuItem{
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: #eaedff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
.avatarMenuItem:hover{
  background: rgba(25, 40, 92, 0.85);
  border-color: rgba(46, 242, 255, 0.25);
}
.avatarMenuDivider{
  height: 1px;
  background: rgba(25,89,173,0.25);
  margin: 6px 2px;
}
.avatarMenuIcon{
  width: 16px;
  height: 16px;
  display: block;
  object-fit: contain;
  opacity: 0.9;
}

.myPlacesItemText {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.myPlacesItemTitle {
  font-weight: 700;
  font-size: 13px;
  color: #eaedff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.myPlacesItemMeta {
  font-size: 12px;
  color: rgba(233, 228, 255, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.myPlacesItemIcon {
  width: 16px;
  height: 16px;
  opacity: 0.85;
  margin: 5px;
}

.segmentIcon {
  width: 14px;
  height: 14px;
  display: block;
  opacity: .85;
}

.toast {
  position: fixed;
  left: 50%;
  top: 100px;
  transform: translate(-50%, -16px);
  padding: 10px 12px 10px 14px;
  border-radius: 12px;
  background: var(--drawer-bg);
  border: 1px solid var(--drawer-border);
  color: #eaedff;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: transform .2s ease-out, opacity .2s ease-out;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: min(92vw, 420px);
}

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

.toast.hide {
  opacity: 0;
  transform: translate(-50%, -16px);
  transition: transform .15s ease-in, opacity .15s ease-in;
}

.toastText {
  min-width: 0;
}

.toastClose {
  border: none;
  background: transparent;
  color: rgba(233, 228, 255, 0.8);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 0;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.toastClose:hover {
  color: #fff;
}

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--surface-1);
  padding: 0;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.avatar.open{
  border-color: #3a79ff;
}
.avatarIcon{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.chipIcon {
  width: 16px;
  height: 16px;
  display: block;
  object-fit: contain;
}

.chip {
  border: 1px solid var(--drawer-border);
  background: linear-gradient(135deg, rgba(25, 53, 117, 0.6), rgba(12, 24, 56, 0.6));
  height: 34px;
  padding: 0 12px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  transition: all .12s ease;
  color: #eaedff;
  position: relative;
  overflow: hidden;
}
.headerChip,
.headerChip.chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  background: #252a35;
  border: 1px solid var(--border-color);
  color: #e7eaf2;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: none;
  transition: background .12s ease, border-color .12s ease;
}
.headerChip:hover{
  background: #3d4450;
  border-color: #3d4450;
  box-shadow: none;
}
.headerChip::before,
.headerChip::after{
  content: none;
}
.headerChip.open,
.headerChip.hasClear{
  background: #2b313d;
  border-color: #3d4450;
  box-shadow: none;
}

.chipIconSvg{
  width: 16px;
  height: 16px;
  fill: currentColor;
  display: block;
}

.chip::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(from 0deg, rgba(46, 242, 255, 0.15), rgb(180 60 217), rgba(46, 242, 255, 0.15));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .2s cubic-bezier(.33, 1, .68, 1);
}


.chip>* {
  position: relative;
  z-index: 1;
}

.chip:hover {
  /* background: linear-gradient(#1b275a, #0e1434); */
  border-color: var(--xplrit-accent);
  box-shadow: 0 10px 24px rgba(8, 13, 39, 0.4);
}

.chip:hover::before,

.chip.primary,
.chip.hasClear,
.hasCaret,
.chip.open {
  background:#d269b7a1;
  border-color: var(--xplrit-accent);
  box-shadow: 0 10px 24px rgba(8, 13, 39, 0.4);
}

.chip.primary::before,
.chip.hasClear::before,
.chip.open::before {
  opacity: 1;
}

/* Hover ring removed for pills/tags/activeFilterChip */
.chipCaret {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  color: inherit;
  position: relative;
}

.chipCaret::before {
  content: "▾";
  font-size: 12px;
  line-height: 1;
}

.chip.primary .chipCaret::before {
  content: "";
}

.chip.primary .chipCaret {
  background: url("../img/close-white.svg") center/12px 12px no-repeat;
  border-radius: 999px;
}

.chip.hasClear .chipCaret::before {
  content: "";
}

.chip.hasClear .chipCaret {
  background: url("../img/close-white.svg") center/12px 12px no-repeat;
  border-radius: 999px;
}

.chip.open {
  color: #eaedff;
}

.chip.primary {
  opacity: 1;
  color: #eaedff;
}

.chip.primary:hover {
  filter: brightness(1.05);
}

/* AllTrails-like popover filters */
.filterPopover {
  position: absolute;
  z-index: 3000;
  width: 280px;
  --arrow-left: 32px;
  background: var(--drawer-bg);
  border: 1px solid var(--drawer-border);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(6px) scale(.98);
  transition: opacity .14s cubic-bezier(.33, 1, .68, 1), transform .14s cubic-bezier(.33, 1, .68, 1);
  pointer-events: auto;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.filterPopover.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.filterPopover:not(.show) {
  pointer-events: none;
}

.filterPopover.exiting {
  opacity: 0;
  transform: translateY(6px) scale(.98);
}

.filterPopover::before {
  content: "";
  position: absolute;
  top: -8px;
  left: var(--arrow-left);
  width: 16px;
  height: 16px;
  background: rgba(12, 18, 44, 0.95);
  border-left: 1px solid var(--drawer-border);
  border-top: 1px solid var(--drawer-border);
  transform: rotate(45deg);
  box-shadow: -3px -3px 10px rgba(0, 0, 0, .2);
}

.filterPopoverBody {
  display: grid;
  padding: 20px 10px;
  border-radius: 18px;
}
.presetsList {
  max-height: 470px;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: #3c52d9 rgba(12, 8, 20, 0.9);
}
.presetsList::-webkit-scrollbar {
  width: 6px;
}
.presetsList::-webkit-scrollbar-track {
  background: rgba(12, 8, 20, 0.9);
  border-radius: 999px;
}
.presetsList::-webkit-scrollbar-thumb {
  background: #3c52d9;
  border-radius: 999px;
  border: 1px solid rgba(12, 8, 20, 0.9);
}

.checkRow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 10px;
  border-radius: 12px;
  font-size: 16px;
  cursor: pointer;
  color: #eaedff;
  transition: background .12s ease, transform .12s ease;
}

.checkRow:hover {
  background: rgba(25, 89, 173, 0.2);
}

.checkRow input[type="checkbox"],
.checkRow input[type="radio"] {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1.6px solid var(--blue-border);
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface-1);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all .12s ease;
}

.checkRow input[type="checkbox"]:checked,
.checkRow input[type="radio"]:checked {
  background: var(--xplrit-blue);
  border-color: var(--xplrit-blue);
  box-shadow: 0 5px 12px rgba(123, 57, 255, .35);
}

.checkRow input[type="checkbox"]:checked::after {
  content: "✓";
  color: #fff;
  font-size: 14px;
  transform: translateY(-1px);
}

.checkRow input[type="radio"] {
  border-radius: 999px;
}

.checkRow input[type="radio"]:checked::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #fff;
}

.filterPopoverHint {
  padding: 4px 0px 0px 0px;
  font-size: 12px;
  color: rgba(233, 228, 255, 0.9);
}

.filterPopoverHint .hintIcon {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin: 0 4px;
}

.filterPopoverHint .hintIcon img {
  width: 14px;
  height: 14px;
  display: block;
}

.distanceEnableRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px 6px;
  border-radius: 12px;
  background: rgba(25, 89, 173, 0.18);
  border: 1px solid rgba(25, 89, 173, 0.25);
  color: rgba(233, 228, 255, 0.9);
  font-size: 13px;
  margin: 2px 10px 6px;
}

.distanceEnableText {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.distanceEnableIcon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 13, 39, 0.7);
  border-radius: 999px;
  border: 1px solid rgba(25, 89, 173, 0.4);
}

.distanceEnableIcon img {
  width: 12px;
  height: 12px;
  display: block;
}

.distanceEnableBtn {
  height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(25, 89, 173, 0.5);
  background: rgba(20, 10, 35, 0.8);
  color: #eaedff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.distanceEnableBtn:hover {
  background: rgba(37, 53, 117, 0.8);
  border-color: rgba(46, 242, 255, 0.7);
  box-shadow: 0 4px 10px rgba(123, 57, 255, .25);
}

.distanceEnableBtn:disabled {
  opacity: .55;
  cursor: default;
  box-shadow: none;
}

.distanceSection {
  padding: 6px 0;
}

.distanceSectionTitle {
  font-size: 12px;
  font-weight: 700;
  color: rgba(233, 228, 255, 0.7);
  padding: 0 10px 6px;
}

.distanceHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 10px 6px;
}

.distanceTitle {
  font-size: 12px;
  color: rgba(233, 228, 255, 0.7);
  font-weight: 600;
}

.distanceValue {
  font-size: 12px;
  font-weight: 800;
  color: #eaedff;
}

.distanceRangeMeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: rgba(233, 228, 255, 0.6);
  padding: 0 2px;
}

.filterPopoverFooter {
  border-top: 1px solid var(--drawer-border);
  padding: 12px;
  text-align: center;
  font-weight: 800;
  cursor: pointer;
  color: #eaedff;
}

.filterPopoverFooter:hover {
  background: rgba(25, 89, 173, 0.15);
}

.popoverRangeRow {
  padding: 4px 10px 10px;
  display: grid;
  gap: 8px;
}

.popoverRangeRow input[type="range"] {
  width: 100%;
  accent-color: var(--xplrit-accent);
  height: 4px;
  border-radius: 2px;
  -webkit-appearance: none;
  appearance: none;
}

.ratingHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 10px 6px;
}

.ratingTitle {
  font-weight: 800;
  font-size: 14px;
  color: #eaedff;
}

.ratingValue {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  color: #eaedff;
}

.ratingStar {
  font-size: 16px;
  line-height: 1;
}

.ratingRangeWrap {
  position: relative;
  padding-top: 42px;
}

.ratingRangeBubble {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-50%);
  min-width: 42px;
  height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  background: #3c52d9;
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  line-height: 34px;
  text-align: center;
  pointer-events: none;
}

.ratingRangeBubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 12px;
  height: 12px;
  background: var(--xplrit-blue);
  transform: translateX(-50%) rotate(45deg);
}

.popoverRangeRow input[data-rating-range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  border: none;
  outline: none;
  background:
    linear-gradient(to right, var(--xplrit-blue) 0 var(--rating-pct, 0%), rgba(60, 82, 217, 0.35) var(--rating-pct, 0%) 100%);
  cursor: pointer;
}

.popoverRangeRow input[data-rating-range]::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 999px;
  background: transparent;
}

.popoverRangeRow input[data-rating-range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f2f4f8;
  border: 1px solid rgba(43, 55, 81, 0.35);
  margin-top: -11px;
}

.popoverRangeRow input[data-rating-range]::-moz-range-track {
  height: 10px;
  border-radius: 999px;
  background: transparent;
}

.popoverRangeRow input[data-rating-range]::-moz-range-progress {
  height: 10px;
  border-radius: 999px;
  background: var(--xplrit-blue);
}

.popoverRangeRow input[data-rating-range]::-moz-range-thumb {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f2f4f8;
  border: 1px solid rgba(43, 55, 81, 0.35);
}

.checkRow.disabled {
  opacity: .5;
  cursor: not-allowed;
}

.checkRow.disabled input {
  cursor: not-allowed;
}

.weatherFab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--drawer-border);
  background: rgba(12, 18, 44, 0.85);
  box-shadow: 0 10px 24px rgba(20, 32, 88, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  user-select: none;
}

.layerSelectorModal .weatherFab {
  width: 100%;
  justify-content: space-between;
  margin: 10px 0 6px;
  box-shadow: 0 8px 20px rgba(20, 32, 88, 0.3);
}

.weatherLabel {
  font-size: 12px;
  font-weight: 800;
  color: #eaedff;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.weatherDot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #9ca3af;
  box-shadow: none;
}

.weatherFab.live .weatherDot {
  background: #38bdf8;
  box-shadow: 0 0 8px rgba(56, 189, 248, .8);
}

.weatherSwitch {
  appearance: none;
  -webkit-appearance: none;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.35);
  position: relative;
  outline: none;
  cursor: pointer;
  transition: background .2s ease;
}

.weatherSwitch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #eaedff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
  transition: transform .2s ease;
}

.weatherSwitch:checked {
  background: var(--xplrit-blue);
}

.weatherSwitch:checked::after {
  transform: translateX(16px);
}

.presetBtn {
  border: 1px solid var(--drawer-border);
  background: rgba(12, 18, 44, 0.85);
  border-radius: 14px;
  padding: 6px 12px;
  text-align: left;
  cursor: pointer;
  display: flex;
  gap: 10px;
  align-items: center;
  box-shadow: 0 12px 26px rgba(80, 40, 140, 0.35);
}

.presetIcon {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: rgba(25, 89, 173, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.presetIcon img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}

.presetText {
  display: grid;
  gap: 4px;
}

.presetBtn:hover {
  background: rgba(37, 53, 117, 0.75);
}

.presetLabel {
  font-weight: 800;
  font-size: 14px;
  color: #eaedff;
}

.presetDesc {
  font-size: 12px;
  color: rgba(233, 228, 255, 0.7);
  line-height: 1.3;
}

.btn {
  height: 38px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid var(--drawer-border);
  background: rgba(8, 13, 39, 0.9);
  cursor: pointer;
  font-weight: 700;
  color: #eaedff;
}

.mainActionBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.btn.primary {
  background: var(--x-gradient);
  color: #fff;
  border-color: rgba(51, 70, 121, 0.7);
}

.btn.accent {
  background: linear-gradient(135deg, #253575, #162561);
  color: #eaedff;
  font-weight: 900;
}

/* Drawer (modern location card) */
.drawer {
  position: absolute;
  left: calc(20px + var(--panelW) + 16px);
  top: 20px;
  bottom: 20px;
  right: auto;
  width: 450px;
  background: rgba(12, 18, 44, 0.95);
  border: 1px solid var(--drawer-border);
  z-index: 650;
  overflow: hidden;
  opacity: 0;
    visibility: hidden;
  transform: translateY(22px);
  transition: transform .36s cubic-bezier(.22, .61, .36, 1), opacity .28s ease, visibility 0s linear .36s;
  will-change: transform;
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.drawer.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s, 0s, 0s;
}

.drawer.closing {
  opacity: 0;
  visibility: hidden;
  transform: translateY(22px);
}

.drawerOverlay {
  position: absolute;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  z-index: var(--z-normal);
  padding: 5px;
  right: 15px;
  top: 10px;
  border-radius: 50px;
  background: transparent;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  --lg-bg-color: rgba(16, 8, 28, 0.45);
  --lg-highlight: rgba(255, 255, 255, 0.2);
}

.glass-container {
  font-weight: 600;
  color: var(--lg-text, #eaedff);
  cursor: pointer;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}

.glass-filter {
  position: absolute;
  inset: 0;
  z-index: 0;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  filter: url(#lg-dist);
  isolation: isolate;
}

.glass-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgb(117 113 123 / 45%);
}

.glass-specular {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  overflow: hidden;
  box-shadow:
    inset 1px 1px 0 var(--lg-highlight),
    inset 0 0 5px var(--lg-highlight);
}

.drawerOverlay>*:not(.glass-filter):not(.glass-overlay):not(.glass-specular) {
  position: relative;
  z-index: 3;
}

.lgFilterDefs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ratingPill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(12, 18, 44, 0.85);
  color: #eaedff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -.01em;
}

.ratingPill .star {
  opacity: .95;
}

.ratingIcon {
  width: 16px;
  height: 16px;
  display: block;
}

.ratingInline {
  padding: 0;
  border: none;
  background: transparent;
  font-size: 14px;
}

.drawerMetaRow {
  align-items: center;
  gap: 8px;
}

.drawerRatingActions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.overlayRight {
  display: flex;
  gap: 10px;
}

.iconPill {
  width: 35px;
  height: 35px;
  border-radius: 999px;
  border: 1px solid var(--drawer-border);
  background: rgba(12, 18, 44, 0.85);
  color: #eaedff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease;
}

.iconPill:hover {
    background: rgb(1 4 15 / 75%);
    border-color: var(--xplrit-accent);
    box-shadow: 0 16px 34px rgba(25, 89, 173, 0.35);
    color: #fff;
}

.iconPill:active {
  transform: translateY(0px) scale(.98);
}

.iconPill .heart {
  font-size: 18px;
  line-height: 1;
}

.iconPill img {
  width: 18px;
  height: 18px;
  display: block;
}

/* Drawer layout */
.drawerBody {
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  scrollbar-gutter: stable;
  scrollbar-color: rgba(60, 82, 217, 0.45) rgba(12, 18, 44, 0.6);
  scrollbar-width: thin;
}

.drawerBody::-webkit-scrollbar {
  width: 10px;
}

.drawerBody::-webkit-scrollbar-track {
  background: rgba(12, 18, 44, 0.6);
  border-radius: 999px;
}

.drawerBody::-webkit-scrollbar-thumb {
  background: rgba(60, 82, 217, 0.45);
  border-radius: 999px;
  border: 2px solid rgba(12, 18, 44, 0.6);
}

.drawerBody::-webkit-scrollbar-thumb:hover {
  background: rgba(60, 82, 217, 0.65);
}

.drawerBody.is-scrolling {
  scrollbar-color: #3c52d9 rgba(12, 8, 20, 0.9);
}

.drawerBody.is-scrolling::-webkit-scrollbar-track {
  background: rgba(12, 8, 20, 0.9);
}

.drawerBody.is-scrolling::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #3c52d9, #3c52d9);
  border: 2px solid rgba(12, 8, 20, 0.9);
}

.drawerBody.is-scrolling::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #3c52d9, #2f6fe0);
}

.galleryWrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.galleryNav {
  position: absolute;
  z-index: 10;
    width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(12, 18, 44, 0.85);
  border: 1px solid var(--drawer-border);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  padding-bottom: 4px; /* Center the arrow visually */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.galleryWrapper:hover .galleryNav {
  opacity: 1;
}
.galleryNav:hover {
  background: var(--xplrit-blue);
  border-color: var(--xplrit-blue);
}
.galleryNav.prev { left: 0px; }
.galleryNav.next { right: 0px; }

.drawerGallery {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
  padding-right: 4px;
  flex: 0 0 auto;
  scroll-snap-type: x mandatory;
  width: 100%;
  scroll-behavior: smooth;
}

.drawerGallery {
  scrollbar-color: #3c52d9 rgba(12, 8, 20, 0.9);
  scrollbar-width: thin;
}

.drawerGallery::-webkit-scrollbar {
  height: 10px;
}

.drawerGallery::-webkit-scrollbar-track {
  background: rgba(12, 8, 20, 0.9);
  border-radius: 999px;
}

.drawerGallery::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #3c52d9, #3c52d9);
  border-radius: 999px;
  border: 2px solid rgba(12, 8, 20, 0.9);
}

.drawerGallery::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #3c52d9, #2f6fe0);
}

.drawerThumb {
  border: 2px solid rgba(51, 70, 121, 0.35);
  background: rgba(12, 18, 44, 0.85);
  border-radius: 14px;
  padding: 0;
  cursor: pointer;
  height: 180px;
  width: 260px;
  flex: 0 0 auto;
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
}

.drawerThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 14px;

}

.drawerThumb:hover {
  border-color: var(--xplrit-accent);
  /* box-shadow: 0 16px 30px rgba(25,89,173,0.45); */
}

.drawerThumbOverlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  backdrop-filter: blur(3px);
  transition: background 0.2s ease;
}

.drawerThumb:hover .drawerThumbOverlay {
  background: rgba(0, 0, 0, 0.4);
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-highest);
  display: grid;
  place-items: center;
}

.lightboxBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 4, 15, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.lightboxImg {
  position: relative;
  max-width: min(90vw, 1200px);
  max-height: 75vh;
  border-radius: 20px;
  border: 1px solid var(--drawer-border);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
  z-index: 1;
  object-fit: cover;
}

.lightboxClose {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--drawer-border);
  background: rgba(12, 18, 44, 0.85);
  color: #eaedff;
  font-size: 18px;
  cursor: pointer;
}

.lightboxClose:hover {
  background: rgba(37, 53, 117, 0.75);
}

.lightboxNav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid var(--drawer-border);
  background: rgba(12, 18, 44, 0.85);
  color: #eaedff;
  font-size: 24px;
  cursor: pointer;
}

.lightboxNav:hover {
  background: rgba(37, 53, 117, 0.75);
  transform: translateY(-50%) !important;
}

.lightboxPrev {
  left: 20px;
}

.lightboxNext {
  right: 20px;
}

.drawerMap {
  position: relative;
  min-height: 240px;
  min-width: 0;
  border-radius: 16px;
  overflow: hidden;
  padding: 10px;
}

#drawerMap {
  position: absolute;
  inset: 0px;
  border-radius: 12px;
  overflow: hidden;
}

.drawerMapControls {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: var(--z-normal);
  border-radius: 50px;
  background: transparent;
  border: 1px solid rgba(51, 70, 121, 0.25);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  padding: 10px;
  overflow: hidden;
  --lg-bg-color: rgba(16, 8, 28, 0.45);
  --lg-highlight: rgba(255, 255, 255, 0.2);
}

.drawerMapControls::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  filter: url(#lg-dist);
  isolation: isolate;
}

.drawerMapControls::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgb(117 113 123 / 45%);
}

.drawerMapControls {
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.45),
    inset 1px 1px 0 var(--lg-highlight),
    inset 0 0 5px var(--lg-highlight);
}

.drawerMapControls .ctrlBtn {
  position: relative;
  z-index: 2;
  width: 30px;
  height: 30px;
}

.drawerMapControls .ctrlBtn img {
  width: 15px;
  height: 15px;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}

.drawerHero {
  width: 100%;
  border-radius: 16px 16px 0px 0px;
  overflow: hidden;
  position: relative;
}

.drawerHero .cardImg {
  height: 320px;
  border-radius: 0;
}

.drawerHero .cardBody {
  left: 14px;
  right: 14px;
  bottom: 14px;
}

.drawerHero .cardPlace {
  font-size: 40px;
  margin: 0 0 4px;
}

.drawerHero .cardTitle {
  font-size: 18px;
  margin-bottom: 6px;
}

.drawerHero .drawerSummary {
  font-size: 12px;
  color: rgba(233, 228, 255, 0.7);
  margin: 6px 0 20px;
}

.drawerHero .cardMeta {
  gap: 8px;
  margin-bottom: 20px;
}

.drawerHero .cardMeta .pill {
  font-size: 11px;
}

.identity {
  display: grid;
  gap: 3px;
  height: 500px;
}

.drawerMetaRow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.drawerMetaSep {
  color: rgba(233, 228, 255, 0.6);
  font-size: 12px;
}

.drawerTitle {
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -.02em;
  color: #eaedff;
  line-height: 1.15;
}

.drawerType {
  font-size: 14px;
  color: rgba(233, 228, 255, 0.7);
  font-weight: 600;
  line-height: 1.15;
}

.drawerLocation {
  margin-top: 4px;
  font-size: 13px;
  color: rgba(233, 228, 255, 0.6);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.drawerLocation .wxInlineIcon {
  margin-right: 0;
}

/* summary */
.drawerSummary {
  font-size: 14px;
  color: rgba(233, 228, 255, 0.75);
  line-height: 1.4;
  max-width: 46ch;
  margin: 0;
}

/* conditions panel */
.conditions {
    border: 1px solid var(--drawer-border);
    border-radius: 0px;
    background: #20265a;
    padding: 10px 12px;
    display: grid;
    gap: 6px;
}

.condRow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(15, 23, 42, .78);
  font-size: 13px;
}



.condRow.top {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.88);
}

.condRow.mid {
  font-weight: 650;
  color: rgba(255, 255, 255, 0.72);
}

.condRow.bottom {
  justify-content: space-evenly;
  gap: 24px;
  color: rgba(255, 255, 255, 0.7);
}

.condRow.bottom>span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.condRow.bottom .wxInlineIcon img,
.condRow.bottom .weatherIcon img {
  width: 30px;
  height: 30px;
}

.condRow.bottom .condText {
  white-space: nowrap;
}

.condRow .dot {
  opacity: .45;
  font-weight: 800;
}

.condRow.bottom .dot {
  display: inline-block;
  opacity: .45;
}

.forecastPanel {
border: none;
    overflow: hidden;
    padding: 24px;
}

.forecastRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.forecastRow:first-child {
  border-top: none;
}

.forecastLeft {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.forecastIcon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.forecastDay {
  font-size: 14px;
  font-weight: 700;
  color: #eaedff;
}

.forecastRight {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(233, 228, 255, 0.7);
  font-weight: 700;
  font-size: 13px;
}

.forecastTemps {
  display: flex;
  align-items: center;
  gap: 6px;
}

.forecastHi {
  color: #eaedff;
}

.forecastLo {
  color: rgba(233, 228, 255, 0.6);
}

.forecastDetails {
  padding: 10px 14px 14px;
  display: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(233, 228, 255, 0.7);
  font-size: 13px;
}

.forecastRow.open+.forecastDetails {
  display: grid;
  gap: 6px;
}

.forecastDetailRow {
  display: flex;
  align-items: center;
  gap: 8px;
}

.forecastDetailRow .wxInlineIcon img {
  width: 14px;
  height: 14px;
}

.lightBar {
    height: 9px;
    border-radius: 999px;
    background: #20265a;
    overflow: hidden;
    min-width: 280px;
    position: relative;
}

.lightFill {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #3b82f6 0%, #fbbf24 100%);
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.45);
  transition: width .35s ease;
}

.lightFillNight {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.35) 0%, rgba(99, 102, 241, 0.55) 100%);
  box-shadow: 0 0 8px rgba(99, 102, 241, 0.35);
  transition: width .35s ease;
  opacity: .6;
}

.drawerTabs {
position: relative;
    z-index: 4;
    display: flex;
    gap: 0;
    align-items: center;
    padding: 7px;
    background: rgb(0 0 0 / 50%);
    border: none;
    overflow: hidden;
    width: 100%;
}

.drawerTab {
  position: relative;
  z-index: 2;
  flex: 1 1 0;
  height: 44px;
  background: transparent;
  border: none;
  color: #c4cbf5;
  padding: 0 12px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .25s ease;
}


.drawerTabsSubstrate {
  position: absolute;
  top: 7px;
  left: 7px;
  height: calc(100% - 14px);
  width: calc(25% - 7px);
  background: linear-gradient(#253575, #162561);
  box-shadow: inset 0 2px 4px 0 hsla(0, 0%, 100%, .05);
  transition: transform .35s ease;
  z-index: 1;
}

.drawerTabPanels {
  display: grid;
  gap: 10px;
  /* padding: 24px; */
}

.drawerTabPanels .overview,
.drawerTabPanels .gallery,

.drawerTabPanels .notes,
.drawerTabPanels .reviews {
    padding: 24px;
}

.drawerTabPanel {
  display: none;
}

.drawerTabPanel.active {
  display: block;
  padding-bottom: 20px;
}

.placesPopoverBody {
  max-height: 314px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  scrollbar-color: transparent transparent;
  scrollbar-width: none;
}

.placesPopoverBody::-webkit-scrollbar {
  width: 0;
}

.placesPopoverBody::-webkit-scrollbar-track {
  background: rgba(12, 8, 20, 0.9);
  border-radius: 999px;
}

.placesPopoverBody::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #3c52d9, #3c52d9);
  border-radius: 999px;
  border: 2px solid rgba(12, 8, 20, 0.9);
}

.placesPopoverBody::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #3c52d9, #2f6fe0);
}

.placesPopoverBody.is-scrolling {
  scrollbar-color: #3c52d9 rgba(12, 8, 20, 0.9);
  scrollbar-width: thin;
}

.placesPopoverBody.is-scrolling::-webkit-scrollbar {
  width: 10px;
}

.placesPopoverBody .filterGroup+.filterGroup {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 8px;
  margin-top: 8px;
}

.placesPopoverBody .filterGroupTitle {
  font-size: 11px;
  letter-spacing: .06em;
}

.amenitiesPopoverBody {
  max-height: 314px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  scrollbar-color: transparent transparent;
  scrollbar-width: none;
}

.amenitiesPopoverBody::-webkit-scrollbar {
  width: 0;
}

.amenitiesPopoverBody::-webkit-scrollbar-track {
  background: rgba(12, 8, 20, 0.9);
  border-radius: 999px;
}

.amenitiesPopoverBody::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #3c52d9, #3c52d9);
  border-radius: 999px;
  border: 2px solid rgba(12, 8, 20, 0.9);
}

.amenitiesPopoverBody::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #3c52d9, #2f6fe0);
}

.amenitiesPopoverBody.is-scrolling {
  scrollbar-color: #3c52d9 rgba(12, 8, 20, 0.9);
  scrollbar-width: thin;
}

.amenitiesPopoverBody.is-scrolling::-webkit-scrollbar {
  width: 10px;
}

.amenitiesPopoverBody .filterGroup+.filterGroup {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 8px;
  margin-top: 8px;
}

.amenitiesPopoverBody .filterGroupTitle {
  font-size: 11px;
  letter-spacing: .06em;
}

.drawerEmptyState {
  padding: 16px;
  border-radius: 14px;
  border: 1px dashed rgba(25, 89, 173, 0.25);
  color: rgba(233, 228, 255, 0.6);
  font-size: 13px;
  background: rgba(12, 18, 44, 0.35);
}



.reviewsHeader {
  font-size: 13px;
  font-weight: 800;
  color: rgba(233, 228, 255, 0.8);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.reviewsTopRow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin: 8px 0 6px;
}

.reviewsScore {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.reviewsRatingValue {
  font-size: 38px;
  font-weight: 800;
  color: #eaedff;
}

.reviewsStar {
  font-size: 22px;
  color: #eaedff;
}

.reviewsMeta {
  font-size: 12px;
  color: rgba(233, 228, 255, 0.65);
  text-align: right;
  display: grid;
  gap: 2px;
}

.reviewsBars {
  margin: 8px 0 10px;
  display: grid;
  gap: 6px;
}

.reviewsBarRow {
  display: grid;
  grid-template-columns: 18px 18px 1fr;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(233, 228, 255, 0.75);
}

.reviewsBar {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.reviewsBarFill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--xplrit-blue), var(--xplrit-accent));
}

.reviewsSummary {
  margin: 40px 0 10px;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(233, 228, 255, 0.8);
}

.reviewsDisclaimer {
  margin-top: 20px;
  font-size: 11px;
  border: 1px solid rgb(78, 91, 103);
  border-radius: 8px;
  padding: 5px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.reviewsDisclaimerIcon {
  width: 20px;
  height: 20px;
  display: block;
  opacity: 0.9;
  flex: 0 0 auto;
}

.drawerTabPanel.notes .reviewsDisclaimer {
  margin: 0 0 10px;
}

/* Keep drawer tabs visible while scrolling drawer content */
.drawerBody .drawerTabs {
  position: sticky !important;
  top: 0;
  z-index: 8;
}

.drawerTabPanel.overview .drawerOverviewBlock {
  margin-bottom: 18px;
}

.drawerTabPanel.overview .drawerMap {
  margin-top: 6px;
}

.reviewsCta {
  margin-top: 12px;
  width: 100%;
}

.reviewsList {
  margin-top: 40px;
  display: grid;
  gap: 12px;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-color: #3c52d9 rgba(12, 8, 20, 0.9);
  scrollbar-width: thin;
}

.reviewsList::-webkit-scrollbar {
  width: 10px;
}

.reviewsList::-webkit-scrollbar-track {
  background: rgba(12, 8, 20, 0.9);
  border-radius: 999px;
}

.reviewsList::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #3c52d9, #3c52d9);
  border-radius: 999px;
  border: 2px solid rgba(12, 8, 20, 0.9);
}

.reviewsList::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #3c52d9, #2f6fe0);
}

.reviewItem {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 10px;
  align-items: start;
}

.reviewAvatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, #3c52d9, #3c52d9);
  border: 2px solid rgba(12, 18, 44, 0.7);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

.reviewHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.reviewName {
  font-weight: 700;
  font-size: 13px;
  color: #eaedff;
}

.reviewMeta {
  font-size: 12px;
  color: rgba(233, 228, 255, 0.55);
}

.reviewStars {
  font-size: 12px;
  color: #eaedff;
  margin: 2px 0 4px;
}

.reviewText {
  margin: 0;
  font-size: 13px;
  color: rgba(233, 228, 255, 0.75);
  line-height: 1.45;
}

.drawerNotesLabel {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: rgba(233, 228, 255, 0.7);
  margin-bottom: 8px;
}

.drawerNotesHint {
  font-size: 12px;
  color: rgba(233, 228, 255, 0.55);
  margin-bottom: 10px;
}

.drawerNotesText {
  width: 100%;
  min-height: 140px;
  margin-top: 20px;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.drawerOverviewText {
  color: rgba(233, 228, 255, 0.75);
  font-size: 13px;
  line-height: 1.5;
}

.drawerOverviewStatus {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.heroStatus {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}

.statusPill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(12, 18, 44, 0.7);
  border: 1px solid rgba(25, 89, 173, 0.3);
  color: #eaedff;
  font-size: 12px;
  font-weight: 700;
}

.statusPill img {
  width: 14px;
  height: 14px;
  display: block;
}

.drawerOverviewBlock {
  margin-bottom: 24px;

}

.drawerOverviewTopMeta {
  margin: 0 0 30px;
}

.drawerOverviewLabel {
  font-size: 14px;
  font-weight: 700;
  color: rgba(233, 228, 255, 0.7);
  margin-bottom: 10px;
}

.drawerDivider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 12px 0;
  width: 100%;
}

.drawerOverviewList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#drawerOverviewAmenities {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px 8px;
  align-items: start;
  margin-top: 12px;
}

.amenityItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  min-width: 0;
}

.amenityIconBox {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(25, 89, 173, 0.16);
  border: 1px solid rgba(25, 89, 173, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #eaedff;
  transition: background .2s ease, border-color .2s ease;
}

.amenityIconBox:hover {
  background: rgba(37, 53, 117, 0.35);
  border-color: rgba(46, 242, 255, 0.45);
}

.amenityIconImg {
  width: 24px;
  height: 24px;
  display: block;
  object-fit: contain;
}

.amenityLabel {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  color: rgba(233, 228, 255, 0.7);
  word-break: break-word;
}

.amenityMoreBox {
  font-size: 13px;
  font-weight: 700;
  color: rgba(233, 228, 255, 0.8);
}

.amenityEmpty {
  font-size: 12px;
  color: rgba(233, 228, 255, 0.5);
}


.daylightCard {
background: #141d46;
    padding: 24px;
}

.daylightHeader {
  text-align: center;
  margin-bottom: 6px;
}

.daylightLabel {
  color: rgba(233, 228, 255, 0.6);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
}

.daylightDuration {
  color: #eaedff;
  font-size: 26px;
  margin: 4px 0;
  font-weight: 700;
}

.daylightChart {
  height: 120px;
  position: relative;
}

.daylightSvg {
  width: 100%;
  height: auto;
  display: block;
}

.daylightHorizon {
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 2;
}

.daylightPathBg {
  stroke: rgba(25, 89, 173, 0.25);
  stroke-width: 2;
  stroke-dasharray: 4 4;
  fill: none;
}

.daylightFill {
  fill: rgba(251, 191, 36, 0.12);
}

.daylightPathActive {
  fill: none;
  stroke: #fbbf24;
  stroke-width: 3;
  stroke-linecap: round;
}

.daylightSunPoint {
  fill: #f59e0b;
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.6));
}

.daylightFooter {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 15px;
  margin-top: 10px;
}

.daylightCard .drawerGoldenRow {
  margin-top: 12px;
}


.daylightTime {
  display: flex;
  flex-direction: column;
  text-align: left;
  margin-top: 34px;
}

.daylightTimeEnd {
  text-align: right;
}

.daylightCountdown {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: rgba(233, 228, 255, 0.6);
}

.daylightSub {
  font-size: 12px;
  color: rgba(233, 228, 255, 0.6);
  font-weight: 500;
}

.daylightTimeVal {
  font-size: 16px;
  font-weight: 700;
  color: #eaedff;
  margin-top: 4px;
}


.intel-panel {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 16px 24px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}


.chip {
  color: #ffffff;
  height: 32px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(25, 89, 173, 0.45), rgba(46, 242, 255, 0.35));
  border-color: rgba(46, 242, 255, 0.55);
}

.drawerQualityContainer {
    border-radius: 5px;
    color: var(--xplrit-accent);
    font-size: 12px;
    color: rgba(233, 228, 255, 0.6);
    font-weight: 500;
}

#drawerQuality, #drawerConfidence, .drawerQualityBox {
  color: var(--xplrit-accent);
}
/* #map {
  filter: brightness(0.6) saturate(0.8) hue-rotate(10deg);
} */

.drawerTitle {
  font-size: 32px;
  background: linear-gradient(to right, #eaedff, #9aa6d1);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.btnPrimary {
  height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(37, 99, 235, .25);
  background: rgba(37, 99, 235, 1);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform .12s ease, filter .12s ease;
}

.btnPrimary:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.btnPrimary:active {
  transform: translateY(0px) scale(.99);
}

.btnGhost {
  height: 44px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid rgba(25, 89, 173, 0.35);
  background: rgba(12, 18, 44, 0.85);
  color: rgba(233, 228, 255, 0.8);
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform .12s ease, background .12s ease;
}

.btnGhost:hover {
  transform: translateY(-1px);
  background: rgba(37, 53, 117, 0.75);
}

.btnGhost:active {
  transform: translateY(0px) scale(.99);
}

.btnGhost img {
  width: 18px;
  height: 18px;
  display: block;
}

.btnPrimary img {
  width: 16px;
  height: 16px;
  display: block;
}

.navIcon {
  font-size: 14px;
  transform: translateY(-.5px);
}

/* Skeletons */
.skeleton {
  height: 250px;
  border-radius: 18px;
  border: 1px solid rgba(25, 89, 173, 0.2);
  background: linear-gradient(90deg, rgba(40, 20, 70, .4), rgba(80, 40, 150, .35), rgba(40, 20, 70, .4));
  background-size: 200% 100%;
  animation: shimmer 1.1s linear infinite;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* AllTrails-style Layer Selector */
.layerSelectorBackdrop {
  position: fixed;
  inset: 0;
  background: rgba(11, 18, 32, 0.2);
  z-index: 9999;
  display: none;
  pointer-events: none;
}

.layerSelectorBackdrop.active {
  display: block;
  pointer-events: auto;
}

.layerSelectorModal {
  position: fixed;
  top: 80px;
  right: 14px;
  width: 380px;
  max-height: calc(100dvh - 120px);
  background: rgba(8, 13, 39, 0.95);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  pointer-events: auto;
  z-index: 10000;
  transform: scale(0.95) translateY(-10px);
  opacity: 0;
  transition: all 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
  transform-origin: top right;
  border: 1px solid var(--drawer-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.layerSelectorBackdrop.active .layerSelectorModal {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.layerSelectorHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--drawer-border);
  gap: 8px;
}

.layerSelectorHead>div:first-child {
  font-weight: 800;
  font-size: 16px;
  flex: 1;
}

.layerSelectorClose {
  width: 40px;
  height: 40px;
  border: 1px solid var(--drawer-border);
  background: rgba(12, 18, 44, 0.85);
  border-radius: 999px;
  cursor: pointer;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #eaedff;
  flex: 0 0 auto;
}

.layerSelectorClose:hover {
  background: rgba(37, 53, 117, 0.75);
}

.layerSelectorBody {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 8px 10px;
  display: grid;
  gap: 6px;
  min-height: 0;
}

.layerCard {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border: 1.5px solid var(--drawer-border);
  border-radius: 10px;
  background: rgba(12, 18, 44, 0.85);
  cursor: pointer;
  transition: all 0.2s ease;
}

.layerCard:hover {
  border-color: rgba(46, 242, 255, 0.6);
  background: rgba(37, 53, 117, 0.65);
  transform: translateY(-1px);
}

.layerCard.active {
  border-color: rgba(51, 70, 121, 0.7);
  background: rgba(37, 53, 117, 0.75);
}

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

.layerCardTitle {
  font-weight: 800;
  font-size: 13px;
  color: var(--text);
  margin: 0;
  line-height: 1.2;
}

.layerCardDesc {
  font-size: 11px;
  color: var(--muted);
  margin: 2px 0 0;
  line-height: 1.3;
}

/* Mobile bottom sheet */
@media (max-width: 980px) {
  .topbar {
    padding: 8px 12px;
  }

  .ideaBtn span:last-child {
    display: none;
  }

  .main {
    grid-template-columns: 1fr;
  }

  .panel {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    height: 44dvh;
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: var(--shadow);
    z-index: 700;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .panel.collapsed {
    transform: translateY(calc(100% - 60px));
  }

  .activeFilters {
    top: 0;
    border-top: none;
  }



  .drawerOverlay {
    padding-left: 12px;
  }

  .drawerBody {
    padding-left: 14px;
  }

  /* Fix: Position drawer on screen for mobile */
  .drawer {
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    top: 90px !important;
    bottom: 10px !important;
    transform: translateY(110%) !important;
  }
}


.filterPopoverHeader {
  background: var(--drawer-bg);
  border-radius: 10px 10px 0px 0px;
  padding: 10px 10px 8px 10px;
  font-size: 15px;
  color: #eaedff;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  letter-spacing: -.01em;
  min-height: 36px;

}

.filterPopoverTitle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.filterPopoverIcon {
  width: 16px;
  height: 16px;
  display: block;
}

/* ============================================================
   XPLRIT BLUE/CYAN THEME OVERRIDES (STYLING ONLY)
   ============================================================ */
body {
  color: var(--xplrit-text);
  background-color: var(--xplrit-bg);
  background-image:
    radial-gradient(900px 420px at 70% 15%, rgba(46, 242, 255, 0.16), transparent 60%),
    radial-gradient(800px 520px at 20% 80%, rgba(60, 82, 217, 0.18), transparent 60%),
    radial-gradient(1px 1px at 20% 30%, rgba(255, 255, 255, 0.1), transparent 60%),
    radial-gradient(1px 1px at 70% 20%, rgba(255, 255, 255, 0.08), transparent 60%);
}

body::before {
  background:
    radial-gradient(520px 320px at 62% 25%, rgba(46, 242, 255, 0.22), transparent 65%),
    radial-gradient(460px 300px at 72% 38%, rgba(60, 82, 217, 0.24), transparent 70%),
    radial-gradient(760px 420px at 32% 30%, rgba(12, 24, 56, 0.6), transparent 70%);
}

.topbar {
  background: var(--surface-1);
  border-bottom: 1px solid #2a2f38;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.search {
background: var(--surface-3);
border: 1px solid #515459;
  box-shadow: none;
}

.search:focus-within {
  border-color: #3a79ff;
  box-shadow: none;
}

.panel,
.drawer,
.filterPopover,
.myPlacesDrawer,
.layerSelectorModal {
  background: var(--xplrit-surface);
  border: 1px solid var(--xplrit-border);
  box-shadow: var(--xplrit-inset), 0 18px 36px rgba(0, 0, 0, 0.5);
}

/* .chip,
.sortControl,
.iconBtn, */
.btn,
.btnGhost {
  background: var(--xplrit-surface-2);
  border: 1px solid var(--xplrit-border);
  color: var(--xplrit-text);
  box-shadow: var(--xplrit-inset);
}

/* .chip:hover,
.sortControl:hover,
.ideaBtn:hover,
.btn:hover,
.btnGhost:hover{
  background: linear-gradient(180deg, #2a3f82 0%, #1a2a63 100%);
} */
.chip.primary,
.btnPrimary {
  background: var(--xplrit-surface-2);
  border-color: var(--xplrit-border);
  color: var(--xplrit-text);
}

.chip.open {
  border-color: rgba(46, 242, 255, 0.45);
  box-shadow: 0 10px 24px rgba(46, 242, 255, 0.12);
}



.card.selected {
  outline: 2px solid rgba(46, 242, 255, 0.45);
  box-shadow: 0 0 22px rgba(46, 242, 255, 0.2), 0 12px 28px rgba(0, 0, 0, 0.5);
}

.pill,
.ratingPill,
.activeFilterChip,
.presetFeature {
  background: rgba(12, 18, 44, 0.75);
  border: 1px solid var(--xplrit-border-soft);
  color: var(--xplrit-text);
  box-shadow: var(--xplrit-inset);
}

.ideaBadge,
.presetBtn,
.weatherFab,
.ctrlBtn,
.iconPill {
  background: var(--xplrit-surface);
  border: 1px solid var(--xplrit-border-soft);
  box-shadow: var(--xplrit-inset);
}

.filterPopoverHeader {
  background: var(--drawer-bg);
  color: var(--xplrit-text);
}

.checkRow input[type="checkbox"],
.checkRow input[type="radio"] {
  border-color: rgba(25, 89, 173, 0.6);
}

.checkRow input[type="checkbox"]:checked,
.checkRow input[type="radio"]:checked {
  background: var(--xplrit-blue);
  border-color: var(--xplrit-blue);
}



.reviewsBarFill {
  background: linear-gradient(90deg, var(--xplrit-accent), var(--xplrit-blue));
}



.sunsetBadge {
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}

/* Force Xora styling across remaining UI */
.toplinks a,
.topLinkBtn,
.search input,
.search input::placeholder,
.panelHeader h1,
.panelTitleRow h1,
.panelMetaRow,
.drawerTitle,
.drawerSummary,
.cardTitle,
.cardMeta,
.drawerType,
.drawerLocation,
.drawerOverviewLabel,
.drawerNotesLabel,
.drawerNotesHint,
.reviewsHeader,
.reviewsSummary,
.reviewsDisclaimer {
  color: var(--xplrit-text);
}


.searchMenu,
.filterPopoverBody,
.filterPopoverFooter,
.distanceEnableRow,
.ratingPill,
.activeFilterChip,
.presetFeature,
.presetBtn,
.ideaBadge,
.chip,
.btn,
.btnGhost,
.btnPrimary,
.sortControl,
.iconPill,
.ctrlBtn,
.weatherFab {
  background: linear-gradient(#1b275a, #0e1434);
  border-color: var(--xplrit-border);
  color: var(--xplrit-text);
  box-shadow: none;
}

.chip.primary {
  background: #d269b7a1;
  border-color: var(--xplrit-accent);
  color: var(--xplrit-text);
}


.panel,
.drawer,
.filterPopover,
.myPlacesDrawer,
.layerSelectorModal {
  background: linear-gradient(#1b275a, #0e1434);
  border-color: #334679;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.45);
}

.card.selected,
.chip.open {
  outline-color: var(--xplrit-accent);
  border-color: var(--xplrit-accent);
  box-shadow: 0 0 18px rgba(46, 242, 255, 0.2);
}

.results,
.drawerBody,
.drawerGallery {
  scrollbar-color: var(--xplrit-accent) rgba(11, 16, 36, 0.9);
}

.results::-webkit-scrollbar-thumb,
.drawerBody::-webkit-scrollbar-thumb,
.drawerGallery::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--xplrit-accent), var(--xplrit-blue));
}

/* =========================================================
   PATCH V2 — FLAT CHARCOAL FIXES (NO PURPLE / HEADER / CHIPS)
   - No bevels, no highlights, no shadows, no gradients
   - Base surface: #1f2330
   - Keep image fades on cards
   ========================================================= */

/* Header must be square */
.topbar{ border-radius: 0 !important; }

/* Ensure truly flat fills (no gradients/highlights anywhere except image fades) */
.topbar, .panel, .drawer, .myPlacesDrawer, .layerSelectorModal,
.chip, .headerChip, .pill, .iconBtn, .ctrlBtn, .btn, .btnPrimary,
.search, .searchMenu, .avatarMenu, .popover, .menu {
  background-image: none !important;
  box-shadow: none !important;
}

/* Remove any purple/indigo accents from UI chrome */
:root{
  --bg: #0f1116 !important;
  --surface: #1f2330 !important;
  --surface-2: #262b3a !important;
  --surface-3: #2d3346 !important;
  --text: #eef2ff !important;
  --muted: rgba(238,242,255,0.65) !important;
  --muted-2: rgba(238,242,255,0.55) !important;
  --focus: #2a6fdb !important;
}


.chipIconSvg{
  width: 16px !important;
  height: 16px !important;
  display: inline-block !important;
}
.chipIconSvg path{ fill: currentColor !important; }

/* Header action row spacing */
.headerActions{
  display:flex !important;
  align-items:center !important;
  gap: 10px !important;
}

/* Popovers: no underline borders under labels */
.drawerOverviewLabel,
.avatarMenuTitle,
.myPlacesTitle,
.searchMenu .sectionTitle,
.searchMenu .rowLabel{
  border-bottom: none !important;
}

/* Popovers: keep outer border, remove inner separators */
.searchMenu, .avatarMenu, .presetMenu, .popover, .menu{
  background: var(--surface) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}
.searchMenu .item,
.searchMenu .row,
.avatarMenu .row,
.presetMenu .row{
  border-top: none !important;
  border-bottom: none !important;
}

/* Keep image fade overlays (allowed) */
.cardImg::after, .drawerHeroImg::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  background-image: linear-gradient(to bottom,
    rgba(0,0,0,0.00) 0%,
    rgba(0,0,0,0.55) 65%,
    rgba(0,0,0,0.72) 100%
  ) !important;
}

/* Ensure card images render */
.cardImg, .drawerHeroImg{ position:relative !important; overflow:hidden !important; }
.cardImg img, .drawerHeroImg img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  opacity:1 !important;
  visibility:visible !important;
}

/* =========================================================
   DROP-IN FLAT CHARCOAL OVERRIDES (v3)
   - Base surface: #1f2330
   - No shadows / bevels / highlights / gradients
   - No purple anywhere (force neutral + blue)
   - Keep image fade overlays on cards
   ========================================================= */

:root{
  --bg: #0f1116 !important;
  --surface: #1f2330 !important;
  --surface-2: #262b3a !important;
  --surface-3: #2d3346 !important;
  --border: rgba(255,255,255,0.10) !important;
  --text: #eef2ff !important;
  --muted: rgba(238,242,255,0.65) !important;
  --muted-2: rgba(238,242,255,0.55) !important;
  --focus: #2a6fdb !important;
  --pink: #2a6fdb !important;
  --purple: #2a6fdb !important;
}

/* Header must be square and flat */
.topbar{
  border-radius: 0 !important;
  background-color: var(--surface) !important;
  border: 1px solid var(--border) !important;
  background-image: none !important;
}

/* Solid surfaces (no transparency) */
.panel,
.drawer,
.myPlacesDrawer,
.filtersDrawer,
.layerSelectorModal,
.searchMenu,
.avatarMenu,
.presetMenu,
.popover,
.menu{
  background-color: var(--surface) !important;
  opacity: 1 !important;
  border: 1px solid var(--border) !important;
  background-image: none !important;
}

/* Secondary surfaces */

.resultCard,
.chip,
.headerChip,
.pill,
.iconPill,
.iconBtn,
.ctrlBtn,
.btn,
.btnPrimary{
background-color: #0d0d0d;
  border: 1px solid var(--border) !important;
  background-image: none !important;
  color: var(--text) !important;
}

/* Hover/active (fill change only) */
/* .card:hover, */
.search:hover,
.chip:hover,
.headerChip:hover,
.iconBtn:hover,
.ctrlBtn:hover,
.btn:hover,
.btnPrimary:hover{
  background-color: var(--surface-3) !important;
}

/* Focus = border only */
.search:has(input:focus-visible),
.chip:focus-visible,
.headerChip:focus-visible,
.iconBtn:focus-visible,
.ctrlBtn:focus-visible,
.btn:focus-visible,
.btnPrimary:focus-visible{
  outline: none !important;
  border-color: var(--focus) !important;
}

/* Header action spacing */
.headerActions{
  display:flex !important;
  align-items:center !important;
  gap: 10px !important;
}

/* Inspire = solid blue (no gradient) */
#chipInspire,
.inspireBtn{
  background-color: var(--focus) !important;
  border-color: rgba(255,255,255,0.10) !important;
  color:#fff !important;
}

/* Explore with AI chip: normal sizing */
#chipPresets{ background-color: var(--surface-2) !important; }

.chip.headerChip{
display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    background: #252a35;
    border: 1px solid #343a45;
    color: #e7eaf2;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .01em;
    cursor: pointer;
    box-shadow: none;
    transition: none;
}

.chipIconSvg{
  width:16px !important;
  height:16px !important;
  display:inline-block !important;
}
.chipIconSvg path{ fill: currentColor !important; }

/* Popovers: remove underline borders under labels */
.filtersSectionToggle,
.drawerOverviewLabel,
.avatarMenuTitle,
.myPlacesTitle,
.searchMenu .sectionTitle,
.searchMenu .rowLabel{
  border-bottom:none !important;
}

/* Popovers: remove internal separators */
.searchMenu .item,
.searchMenu .row,
.avatarMenu .row,
.presetMenu .row{
  border-top:none !important;
  border-bottom:none !important;
}

/* Keep image fade overlays (allowed) */
.cardImg,
.drawerHeroImg{ position:relative !important; overflow:hidden !important; }

.cardImg::after,
.drawerHeroImg::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  background-image: linear-gradient(to bottom,
    rgba(0,0,0,0.00) 0%,
    rgba(0,0,0,0.55) 65%,
    rgba(0,0,0,0.72) 100%
  ) !important;
}

/* Ensure <img> photos render if used */
.cardImg img,
.drawerHeroImg img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  opacity:1 !important;
  visibility:visible !important;
}


.accent, .accentPink, .accentPurple{ color: var(--focus) !important; }

/* =========================================================
   TARGETED FLAT FIXES (v4)
   - Removes remaining blue/purple from specific components
   ========================================================= */

.filtersDrawerFoot{
  background: var(--surface) !important;
  border-top: 1px solid var(--border) !important;
}

.checkRow input[type="checkbox"],
.checkRow input[type="radio"]{
  border-color: var(--border) !important;
  accent-color: var(--focus) !important; /* tick only */
}

.conditions{
  border: 1px solid var(--border) !important;
  background: var(--surface-2) !important;
  border-radius: 0 !important;
}

.daylightCard{
  background: var(--surface-2) !important;
}

.sunsetBadge,
.myPlacesMore
{
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

.sortControl:hover{
  background: var(--surface-3) !important;
}

/* Inspire Me popover/preset menu */
.presetMenu,
#presetMenu{
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
}
.presetItem,
.presetMenu .item{
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
}
.presetItem:hover,
.presetMenu .item:hover{
  background: var(--surface-3) !important;
}


/* =========================================================
   TARGETED FLAT FIXES (v5)
   - Removes remaining blue gradients everywhere listed
   - Removes hover/active animations (no motion)
   ========================================================= */

/* Remove hover/active "state" styling (keep same fill) */
.chip:hover, .headerChip:hover, .btn:hover, .btnPrimary:hover, .btnGhost:hover,
.iconBtn:hover, .ctrlBtn:hover, .iconPill:hover, .sortControl:hover,
.myPlacesSegmentBtn:hover, .segmentBtn:hover, .weatherFab:hover,
.chip:active, .headerChip:active, .btn:active, .btnPrimary:active, .btnGhost:active,
.iconBtn:active, .ctrlBtn:active, .iconPill:active, .sortControl:active, .weatherFab:active{
  background-color: var(--surface-2) !important;
  background-image: none !important;
}

/* Kill the gradient rule block you pasted */
.activeFilters,
.searchMenu,
.searchMenuItem,
.filterPopoverBody,
.filterPopoverFooter,
.distanceEnableRow,
.ratingPill,
.activeFilterChip,
.presetFeature,
.presetBtn,
.ideaBadge,
.chip,
.btn,
.btnGhost,
.btnPrimary,
.sortControl,
.iconPill,
.ctrlBtn,
.weatherFab{
  background-color: var(--surface-2) !important;
  background-image: none !important;
  color: var(--text) !important;
}

/* Segments (incl My Places tabs) */
.segment,
.segmentBtn,
.myPlacesSegment,
.myPlacesSegmentBtn{
  background-image: none !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}



/* Filter popover body/header/footer specifically */


/* Layer selector modal (and its inner elements) */
.layerSelectorModal,
.layerSelectorModal *{
  background-image: none !important;
  box-shadow: none !important;
}
.layerSelectorModal{
  background-color: var(--surface) !important;
  border: 1px solid var(--border) !important;
}
.layerSelectorModal .layerRow,
.layerSelectorModal .layerItem,
.layerSelectorModal .layerBtn{
  background-color: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

/* =========================================================
   TARGETED FLAT FIXES (v6)
   - FilterPopover still blue + remove label underline
   - Segments + drawer tabs active blue fixes
   - Remove daylightSunsetGroup background
   - Distance enable button + Layer selector cards/close
   ========================================================= */

/* Filter popover: flat container + NO blue border + NO label underline */
.filterPopover,
.filterPopoverHeader,
.filterPopoverBody,
.filterPopoverFooter{
  background-color: var(--surface) !important;
  background-image: none !important;
  color: var(--text) !important;
}
.filterPopover *{
  background-image: none !important;
  box-shadow: none !important;
}
.filterPopoverHeader,
.filterPopoverBody,
.filterPopoverFooter{
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}
.filterPopoverHeader{ border-bottom: none !important; }
.filterPopoverBody{ border-bottom: none !important; }

/* Any label/heading rows inside popovers should NOT have underline borders */
.filterPopoverHeader .row,
.filterPopoverHeader .title,
.filterPopoverBody .rowLabel,
.filterPopoverBody .sectionTitle,
.filterPopoverBody label,
.filterPopoverBody h4,
.filterPopoverBody h5{
  border-bottom: none !important;
}

/* Segments: restore flat segmented control look */
.segment,
.drawerTabRow{
  display: inline-flex !important;
  gap: 6px !important;
  padding: 6px !important;
  background-color: #2a2f38;
  background-image: none !important;
}

.segmentBtn,
.myPlacesSegmentBtn,
.drawerTab{
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  background-image: none !important;
}

/* Active segment/tab: flat (no blue fill). Use border only */
.drawerTab.isActive,
.drawerTab[aria-selected="true"]{
  background-color: var(--surface-2) !important;
  border-color: var(--focus) !important;
  color: var(--text) !important;
}

/* Remove daylightSunsetGroup background */
.daylightSunsetGroup{
  background: transparent !important;
}

/* Distance enable button: flat */
.distanceEnableBtn,
.distanceEnableRow .btn,
.distanceEnableRow button{
  background-color: var(--surface-2) !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
.distanceEnableBtn.isActive,
.distanceEnableRow .btn.isActive,
.distanceEnableRow button[aria-pressed="true"]{
  border-color: var(--focus) !important;
}

/* Layer selector cards: flat */
.layerCard,
.layerItem,
.layerRow{
  background-color: var(--surface-2) !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
.layerCard.isActive,
.layerItem.isActive,
.layerRow.isActive,
.layerCard[aria-selected="true"],
.layerItem[aria-selected="true"]{
  border-color: var(--focus) !important;
  background-color: var(--surface-2) !important;
}

/* Layer selector close button */
.layerSelectorClose,
.layerSelectorClose *{
  background-color: var(--surface-2) !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
/* ===============================
   🔥 GLOBAL COLOR PURGE (FINAL)
   =============================== */

/* Kill theme colors */
:root {
  --x-purple: #000;
  --x-gradient: none;
  --chipHover: transparent;
  --border: #343a45;
}

/* Universal flat surfaces */
.filterPopover,
.filterPopoverFooter,
.layerSelectorModal,
.layerCard,
.layerCard.active,
.distanceEnableRow,
.distanceEnableBtn,
.ratingPill,
.activeFilterChip,
.presetFeature,
.presetBtn,
.ideaBadge,
.chip,
.btn,
.btnPrimary,
.btnGhost,
.sortControl,
.iconPill,
.ctrlBtn,
.weatherFab,
.conditions,
.daylightCard {
  background: #1f2330 !important;
  border: 1px solid #343a45 !important;
  box-shadow: none !important;
  color: #eaedff;
}

/* Remove blue hover / active states */
button:hover,
button:active,
.chip:hover,
.chip.open,
.drawerTab.active {
background: var(--xplrit-blue);
  border-color: var(--xplrit-blue);
  transform: none !important;
}

/* Popovers fully flat */
.filterPopover::before {
  display: none !important;
}

/* Remove borders under labels */
.filterPopoverBody label,
.drawerOverviewLabel,
.drawerNotesLabel {
  border: none !important;
}

/* Drawer tabs */
.drawerTab {
  background: transparent;
  border: none;
  color: #9aa0b5;
}
.drawerTab.active {
  color: #ffffff;
}

/* Remove daylightSunsetGroup background */
.daylightSunsetGroup {
  background: transparent !important;
padding: 24px !important;
}

/* Layer selector */
.layerSelectorClose,
.layerSelectorModal,
.layerSelectorBody {
  background: #1f2330 !important;
  border-color: #343a45 !important;
}

/* =====================================
   Targeted UI behavior fixes
   ===================================== */

/* 1) Hide scrollbars in Drawer + Filters drawer body */
.drawerBody,
.filtersDrawerBody {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  padding-right: 0 !important;
}

.drawerBody::-webkit-scrollbar,
.filtersDrawerBody::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.drawerBody.is-scrolling::-webkit-scrollbar,
.filtersDrawerBody.is-scrolling::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* 4) Restore sliding substrate animation for drawer tabs and my places segment */
.drawerTabs,
.myPlacesSegment,
.myPlacesSegmentWide {
  position: relative !important;
}

.drawerTabsSubstrate,
.myPlacesSegmentSubstrate {
  display: block !important;
  opacity: 1 !important;
  transition: transform .35s cubic-bezier(0.22, 0.61, 0.36, 1), width .35s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
  z-index: 1 !important;
}

.drawerTab,
.myPlacesSegmentBtn {
  border: none !important;
  position: relative !important;
  z-index: 2 !important;
}



/* 5) Major button radius consistency (no pill buttons) */
.ideaBtn,
.chip,
.headerChip,
.sortControl,
.btn,
.btnPrimary,
.btnGhost,
.cardDetailsBtn,
.myPlacesMore,
.ctrlBtn,
.layerSelectorClose,
.reviewsCta,
.distanceEnableBtn,
.weatherFab {
  border-radius: 10px !important;
}

/* 6) Strong active-state signal when All Filters has active filters */
.chip.headerChip.hasClear,
#chipAll.hasClear {
  background: var(--xplrit-blue) !important;
  border-color: #2f62c8 !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset, 0 8px 18px rgba(59, 111, 218, 0.35) !important;
}

/* 7) Clear non-blue active tab color */
.drawerTab.active,
.drawerTab[aria-selected="true"] {
  color: #fff !important;
}



/* 9) Re-enable drawer motion (overrides global transition reset) */
.drawer {
  transition: transform .36s cubic-bezier(.22, .61, .36, 1), opacity .28s ease, visibility 0s linear .36s !important;
}

.drawer.open {
  transition-delay: 0s, 0s, 0s !important;
}

/* 10) Drawer should fully slide out/in (override) */
.drawer {
  opacity: 1 !important;
  visibility: hidden !important;
  transform: translateY(110%) !important;
  transition: transform .46s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .46s !important;
}

.drawer.open {
  visibility: visible !important;
  transform: translateY(0) !important;
  transition-delay: 0s, 0s !important;
}

.drawer.closing {
  visibility: hidden !important;
  transform: translateY(110%) !important;
}

/* 11) Make drawer tabs match My Places segment styling exactly */
.drawerTabs {
  position: relative !important;
  display: flex !important;
  gap: 0 !important;
  padding: 7px !important;
  min-height: 52px !important;
  /* background: rgba(8, 13, 39, .5) !important; */
  border: 3px solid rgba(25, 89, 173, .25) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  overflow: hidden !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
  width: 100% !important;
}

.drawerTab {
  position: relative !important;
  z-index: 2 !important;
  flex: 1 1 0 !important;
  height: 100% !important;
  background: transparent !important;
  border: none !important;
  color: #c4cbf5 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 !important;
}

.drawerTab + .drawerTab {
  border-left: 1px solid rgba(25, 89, 173, 0.15) !important;
}

.drawerTab.active,
.drawerTab[aria-selected="true"] {
  color: #eaedff !important;
}

.drawerTabsSubstrate {
  position: absolute !important;
  top: 7px !important;
  left: 7px !important;
  height: calc(100% - 14px) !important;
  background: linear-gradient(#253575, #162561) !important;
  box-shadow: inset 0 2px 4px 0 hsla(0, 0%, 100%, .05) !important;
  border-radius: 14px !important;
  transition: transform .35s cubic-bezier(0.22, 0.61, 0.36, 1), width .35s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
  z-index: 1 !important;
  display: block !important;
  opacity: 1 !important;
}

/* 12) Final drawer tabs reset: mirror current My Places segment look */
.drawerTabs {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px !important;
  min-height: 52px !important;
  /* background: #1f2330 !important; */
  border: 1px solid #343a45 !important;
}

.drawerTabsSubstrate {
  display: none !important;
}

.drawerTab {
  flex: 1 1 0 !important;
  height: 36px !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 0 12px !important;
  background: transparent !important;
  color: #cfd5e6 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
}

.drawerTab + .drawerTab {
  border-left: none !important;
}

.drawerTab.active,
.drawerTab[aria-selected="true"] {
background: #253658 !important;
  border: 1px solid #2f62c8 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* Adaptive search mode */
.searchModeLine {
  position: absolute;
  left: 42px;
  bottom: -17px;
  font-size: 11px;
  color: rgba(233, 228, 255, 0.72);
  letter-spacing: .02em;
  pointer-events: none;
}

.searchMenuItemSoft {
  opacity: 0.58;
  transform: scale(.985);
}

.askSuggestionItem .searchMenuMeta {
  color: rgba(146, 197, 255, 0.85);
}

/* Ask-mode result hierarchy */
.panel.askActive .card.askPrimary {
  opacity: 1;
  box-shadow: 0 14px 34px rgba(34, 109, 219, 0.35);
  border: 1px solid rgba(146, 197, 255, 0.34);
}

.panel.askActive .card.askSecondary {
  opacity: 0.6;
  box-shadow: 0 6px 14px rgba(2, 6, 23, 0.32);
  border: 1px solid rgba(146, 197, 255, 0.14);
}

.panel.askActive .card.askSecondary .cardImg {
  height: 360px;
}

.askRecoBadge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(31, 96, 186, 0.88);
  border: 1px solid rgba(191, 232, 255, 0.45);
  color: #eff8ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
}

.askWhyText {
  margin: 6px 0 8px;
  color: rgba(194, 228, 255, 0.92);
  font-size: 12px;
  line-height: 1.35;
}

/* Ask-mode map pins */
.pinDotWrap.pinRecoDimmed {
  opacity: 0.28;
  filter: saturate(.42);
}

.pinDotWrap.pinRecoRecommended .pinDot {
  background: #2563eb;
  border-color: #dbeafe;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.5);
}

.pinRecoTag {
  position: absolute;
  top: -10px;
  left: 20px;
  transform: translateY(-100%);
  background: rgba(15, 23, 42, 0.92);
  color: #dbeafe;
  border: 1px solid rgba(147, 197, 253, 0.45);
  border-radius: 999px;
  font-size: 10px;
  line-height: 1;
  padding: 4px 8px;
  white-space: nowrap;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pinTagIcon {
  width: 12px;
  height: 12px;
  display: block;
}


/* Search field status/clear controls */
.search {
  position: relative;
}

.search input {
  padding-right: 132px !important;
}

.searchModePill {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(25, 89, 173, 0.35);
  background: rgba(12, 18, 44, 0.85);
  color: rgba(233, 228, 255, 0.9);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  pointer-events: none;
  z-index: 3;
}

.searchModePill.ask {
  border-color: rgba(96, 165, 250, 0.55);
  background: rgba(30, 64, 175, 0.45);
  color: #dbeafe;
}

.searchClearBtn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(25, 89, 173, 0.35);
  background: rgba(12, 18, 44, 0.92);
  color: rgba(233, 228, 255, 0.9);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.searchClearBtn:hover {
  border-color: rgba(147, 197, 253, 0.6);
}

.searchModeLine {
  display: none !important;
}

/* Move recommendation badge away from rating */
.askRecoBadge {
  left: auto !important;
  right: 12px;
  top: 12px;
}

/* Filters chip icon-only */
#chipAll {
  width: 38px;
  min-width: 38px;
  padding: 0;
  justify-content: center;
  overflow: visible !important;
}

#chipAll::before {
  content: none !important;
}

#chipAll .chipCaret {
  display: none;
}

#chipAll .chipCount {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  padding: 0 5px;
  background: #3b82f6;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#chipAll .chipCount[hidden] {
  display: none !important;
}

.searchModePill {
position: absolute;
right: 40px;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 62px;
height: 24px;
padding: 0 10px;
border-radius: 999px;
/* border: 1px solid rgba(25, 89, 173, 0.35); */
background: rgba(28, 33, 40, 1);
color: rgba(233, 228, 255, 0.9);
font-size: 11px;
font-weight: 700;
letter-spacing: .02em;
pointer-events: none;
z-index: 3;
}

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

.searchModePill.ask {
  background: rgba(35, 78, 146, 1);
  color: rgba(233, 244, 255, 0.95);
}

.searchClearBtn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(46, 56, 68, 1);
  background: rgba(28, 33, 40, 1);
  color: rgba(233, 228, 255, 0.9);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  box-sizing: border-box;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.searchClearBtn:hover {
  transform: translateY(-50%);
  border-color: rgba(76, 91, 108, 1);
  background: rgba(34, 41, 50, 1);
}

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

.askRecoBadge {
  top: 12px;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
}

/* Final header/search polish overrides */
#chipInspire,
.inspireBtn,
#chipAll {
  background-color: #262b3a !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: #fff !important;
}

.headerActions {
  gap: 16px !important;
  margin-left: 18px !important;
}

.topbar {
  gap: 20px !important;
}

.search {
  flex: 1 1 620px !important;
  max-width: 620px !important;
}

.searchClearBtn {
  right: 8px !important;
  top: 0 !important;
  bottom: 0 !important;
  margin: auto 0 !important;
  transform: none !important;
}

.searchClearBtn:hover,
button.searchClearBtn:hover,
button.searchClearBtn:active,
.searchClearBtn:focus-visible {
  right: 8px !important;
  top: 0 !important;
  bottom: 0 !important;
  margin: auto 0 !important;
  transform: none !important;
  background: rgba(34, 41, 50, 1) !important;
  border-color: rgba(76, 91, 108, 1) !important;
}

/* Placeholder fade-only rotation (premium subtle) */
.search input::placeholder {
  opacity: 0.72;
  transition: opacity 220ms ease !important;
}

.search input.placeholder-fade::placeholder {
  opacity: 0 !important;
}

/* Search row with external actions */
.searchRow {
  flex: 1 1 620px;
  max-width: 760px;
  min-width: 320px;
  display: flex !important;
  align-items: center;
  gap: 10px;
}

.searchRow .search {
  flex: 1 1 auto !important;
  max-width: none !important;
}

.searchActions {
  display: flex !important;
  align-items: center;
  gap: 10px;
}

.searchActions #chipInspire,
.searchActions #chipAll {
  height: 42px !important;
  min-height: 42px;
  padding: 0 12px;
}

@media (max-width: 900px) {
  .searchRow {
    min-width: 0;
    max-width: none;
    flex: 1 1 auto;
  }
  .searchActions #chipInspire span:last-child {
    display: none;
  }
  .searchActions #chipInspire,
  .searchActions #chipAll {
    width: 30px;
    min-width: 30px;
    padding: 0;
    justify-content: center;
  }
  .searchActions #chipAll .chipCount,
  .searchActions #chipAll .chipCaret {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .search input::placeholder {
    transition: none !important;
  }
}

/* Golden hour card redesign */
.daylightSunsetGroup {
position: relative;
display: grid;
gap: 14px;
padding: 18px 16px 14px !important;
background: radial-gradient(140% 140% at 12% 10%, rgba(246, 133, 0, 0.23), rgba(32, 36, 48, 1) 44%, rgba(32, 36, 48, 1)) ;
overflow: hidden;
width: 100%;
border-bottom: 1px solid #343a45 ;
}

.daylightSunsetTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.daylightSunsetGroup .drawerGoldenRow {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.daylightGoldenIcon {
  line-height: 1;
  filter: drop-shadow(0 4px 10px rgba(250, 190, 74, 0.35));
}

.daylightGoldenIcon img {
  width: 34px;
  height: 34px;
  display: block;
}

.daylightGoldenTextWrap {
  display: grid;
  gap: 2px;
}

.daylightGoldenLabel {
  font-size: 13px;
  font-weight: 700;
  color: rgba(241, 238, 255, 0.9);
  letter-spacing: 0.01em;
}

.daylightSunsetGroup .condMain {
  font-size: 26px;
  line-height: 1;
  font-weight: 800;
  color: #f5f7ff;
}

.daylightSunsetGroup .drawerSunsetRow {
  display: flex;
  justify-content: flex-end;
  flex: 0 0 auto;
  margin-left: auto;
}

.daylightSunsetGroup .drawerQualityContainer {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 10px 12px;
  min-width: 148px;
  border-radius: 14px;
  border: 1px solid rgba(71, 80, 107, 0.45);
  background: rgba(32, 36, 48, 1);
  color: rgba(242, 236, 255, 0.95);
}

.drawerQualityLabel {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(225, 230, 255, 0.86);
}

.daylightSunsetGroup .drawerQualityBox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #d7426f;
  border: 1px solid rgba(255, 146, 171, 0.5);
  color: #ffeef5;
  font-size: 12px;
  font-weight: 700;
}

.daylightSunsetGroup .drawerQualityBox.poor {
  background: #d7426f;
  border-color: rgba(255, 146, 171, 0.5);
}

.daylightSunsetGroup .drawerQualityBox.fair {
  background: #b87821;
  border-color: rgba(255, 204, 130, 0.5);
}

.daylightSunsetGroup .drawerQualityBox.good {
  background: #1e8d60;
  border-color: rgba(120, 237, 189, 0.45);
}

.daylightSunsetGroup #drawerQuality {
  text-transform: uppercase;
  font-weight: 800;
  color: inherit;
}

.daylightSunsetGroup #drawerConfidence {
  color: inherit;
}

.daylightTrack {
  display: grid;
  gap: 8px;
  width: 100%;
}

.daylightSunsetGroup .lightBar {
position: relative;
width: 100%;
min-width: 0;
height: 24px;
border-radius: 999px;
border: 1px solid rgba(83, 101, 153, 0.55);
background: linear-gradient(to right, rgba(32, 36, 48, 1), rgba(38, 46, 80, 0.65));
overflow: hidden;
}

.daylightSunsetGroup .lightFillNight {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  opacity: 0.95;
  background: linear-gradient(90deg, rgba(115, 132, 255, 0.78), rgba(113, 128, 255, 0.16));
  box-shadow: none;
}

.daylightSunsetGroup .lightFill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, rgba(113, 131, 255, 0.96) 0%, rgba(243, 191, 82, 0.92) 88%);
  box-shadow: 0 0 16px rgba(248, 187, 68, 0.5);
}

.lightSunNode {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 36% 36%, #fff6cf 0%, #ffd66f 52%, #f8b019 100%);
  border: 1px solid rgba(255, 214, 111, 0.95);
  box-shadow: 0 0 0 3px rgba(248, 176, 25, 0.2), 0 0 14px rgba(248, 176, 25, 0.85);
  z-index: 2;
}

.daylightTrackMeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 12px;
  line-height: 1;
  color: rgba(228, 233, 255, 0.95);
  font-weight: 700;
}

.daylightTrackMeta span {
  white-space: nowrap;
}

@media (max-width: 560px) {
  .daylightSunsetGroup .condMain {
    font-size: 26px;
  }

  .daylightTrackMeta {
    font-size: 12px;
  }
}

/* Strong selected-layer highlight in layer selector */
.layerSelectorBody .layerCard.active,
.layerSelectorBody .layerCard[aria-selected="true"] {
  background: #253658 !important;
  border-color: #2f62c8 !important;
  outline: 1px solid rgba(47, 98, 200, 0.45);
}

.layerSelectorBody .layerCard.active .layerCardTitle,
.layerSelectorBody .layerCard[aria-selected="true"] .layerCardTitle {
  color: #ffffff !important;
}

.layerSelectorBody .layerCard.active .layerCardDesc,
.layerSelectorBody .layerCard[aria-selected="true"] .layerCardDesc {
  color: rgba(223, 234, 255, 0.9) !important;
}

/* Brand gradient for active filters chips */
.activeFilters .activeFilterChip {
  background: linear-gradient(135deg, #f833a9 0%, #3c52d9 100%) !important;
  color: #ffffff !important;
}

.activeFilters .activeFilterChip button {
  color: rgba(255, 255, 255, 0.88) !important;
}



/* filepath: /Users/revie/Library/Mobile Documents/com~apple~CloudDocs/Documents/XPLRIT/app.css */
/* Add to :root or global styles */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Optimize animations */
.card, .chip {
  will-change: transform; /* Only on animated elements */
  transition: transform 0.2s ease; /* Use transform instead of margin */
}

/* Final hard override: header search row must remain one horizontal line */
.topbar {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  column-gap: 12px !important;
}

.searchRow {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  gap: 10px !important;
}

.searchRow > .search {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
}

.searchRow > .search input {
  min-width: 0 !important;
  padding-right: 42px !important;
}

.searchActions {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  gap: 10px !important;
}

.searchActions #chipInspire,
.searchActions #chipAll {
  display: inline-flex !important;
  align-items: center !important;
  height: 42px !important;
  min-height: 42px !important;
}

/* Explicit request: enforce flex centering on wrapper rows */
.searchRow {
  display: flex !important;
  align-items: center !important;
}

.searchActions {
  display: flex !important;
  align-items: center !important;
}