/* Results map 2026 (Claude Design "Map v2"), phase 1. Loaded only with map.design = new; everything is scoped
   under body.ch-map-v2-on. Markers and controls are drawn by assets/upgrade/js/ch-map-v2.js. */
.ch-map-v2-on {
  --mv-navy: #313447; --mv-ink: #1A1F36; --mv-muted: #5E6478; --mv-line: #E3E6EF; --mv-orange: #F08A00;
  --mv-warm: #FFF1DE; --mv-warm-ic: #E07B00; --mv-dot: #59607A;
}

/* The old map controls: the four icon filters and the "60 minutes" box (the Within filter does that job) */
.ch-map-v2-on.ch-map-v2-ready .ch-map-header .ch-map-filters,
.ch-map-v2-on.ch-map-v2-ready .ch-map-header .mapmaxdrop,
.ch-map-v2-on.ch-map-v2-ready #map .maplibregl-ctrl-top-right .maplibregl-ctrl-group { display: none !important; }
.ch-map-v2-on .ch-map-panel { position: relative; }
.ch-map-v2-on .ch-map-header { pointer-events: none; background: none !important; box-shadow: none !important; }
/* Expand map / Show list goes top-right, clear of our controls */
.ch-map-v2-on.ch-map-v2-ready .ch-map-header { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 4; display: flex !important;
  justify-content: flex-end !important; align-items: flex-start; padding: 12px !important; margin: 0 !important; width: auto !important; height: auto !important; }
.ch-map-v2-on.ch-map-v2-ready .ch-map-header .expand-map-toggle { position: static !important; margin: 0 !important; }
.ch-map-v2-on .ch-map-header .expand-map-toggle { pointer-events: auto; }

/* ---------- controls ---------- */
.ch-map-v2__ctrls { position: absolute; top: 12px; left: 12px; z-index: 3; display: flex; flex-direction: column; gap: 8px; pointer-events: none; font-family: Inter, Arial, sans-serif; }
.ch-map-v2__row { display: flex; gap: 8px; flex-wrap: wrap; }
.ch-map-v2__seg, .ch-map-v2__zoom, .ch-map-v2__btn { pointer-events: auto; display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: #fff; border-radius: 10px;
  box-shadow: 0 0 0 1px var(--mv-line), 0 2px 8px rgba(26, 31, 54, .12); }
.ch-map-v2__seg button, .ch-map-v2__zoom button, .ch-map-v2__btn { appearance: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; margin: 0; padding: 0 10px; border: 0; border-radius: 8px;
  background: none; color: var(--mv-ink); font: 600 13.5px/1 Inter, Arial, sans-serif; cursor: pointer; white-space: nowrap; }
.ch-map-v2__seg button[aria-checked="true"] { background: var(--mv-navy); color: #fff; }
.ch-map-v2__seg button[aria-checked="true"] .ch-map-v2__ic { stroke: #FFB24A; }
.ch-map-v2__seg button:not([aria-checked="true"]):hover, .ch-map-v2__zoom button:hover, .ch-map-v2__btn:hover { background: #F4F6FB; }
.ch-map-v2__seg-l { padding: 0 6px 0 8px; font: 500 12px/1 Inter, Arial, sans-serif; color: var(--mv-muted); }
.ch-map-v2__zoom { padding: 0; gap: 0; }
.ch-map-v2__zoom button { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 0; }
.ch-map-v2__zoom button + button { box-shadow: -1px 0 0 var(--mv-line); }
.ch-map-v2__btn { height: 36px; padding: 0 12px; }
.ch-map-v2__ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ch-map-v2__seg button:focus-visible, .ch-map-v2__zoom button:focus-visible, .ch-map-v2__btn:focus-visible { outline: 2px solid var(--mv-orange); outline-offset: 1px; }
/* Expand map, restyled to match */
.ch-map-v2-on .ch-map-header .expand-map-toggle { background: #fff !important; border-radius: 10px !important; box-shadow: 0 0 0 1px var(--mv-line), 0 2px 8px rgba(26, 31, 54, .12) !important; }
/* The small rail (list-first) keeps Drive | Walk and Expand; zoom moves bottom-right */
/* A narrow map (under 420px, e.g. a small window): Drive | Walk and Time | Price stack; no Re-centre or "Label" word */
.ch-map-v2-narrow .ch-map-v2__row:first-child { flex-direction: column; align-items: flex-start; gap: 6px; }
.ch-map-v2-narrow .ch-map-v2__seg-l, .ch-map-v2-narrow [data-chv2-recentre] { display: none; }

/* ---------- hotel pins ---------- */
.ch-map-v2__pin { appearance: none; display: block; margin: 0; padding: 0 0 7px; border: 0; background: none; cursor: pointer; font: 700 12px/1 Inter, Arial, sans-serif; }
.ch-map-v2__pin-body { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: 999px; background: #fff; color: var(--mv-ink);
  box-shadow: 0 0 0 1px rgba(26, 31, 54, .14), 0 2px 6px rgba(26, 31, 54, .18); white-space: nowrap; transition: transform .12s ease; }
.ch-map-v2__pin::after { content: ""; position: absolute; left: 50%; bottom: 1px; width: 10px; height: 10px; margin-left: -5px; background: #fff; transform: rotate(45deg);
  box-shadow: 1px 1px 0 0 rgba(26, 31, 54, .14); border-radius: 0 0 2px 0; }
.ch-map-v2__pin .ch-map-v2__ic { width: 14px; height: 14px; }
.ch-map-v2__pin[data-state="warm"] .ch-map-v2__pin-body, .ch-map-v2__pin[data-state="warm"]::after { background: var(--mv-warm); }
.ch-map-v2__pin[data-state="warm"] .ch-map-v2__pin-body { box-shadow: 0 0 0 1px rgba(224, 123, 0, .35), 0 2px 6px rgba(26, 31, 54, .18); }
.ch-map-v2__pin[data-state="warm"] .ch-map-v2__ic { stroke: var(--mv-warm-ic); }
.ch-map-v2__pin[data-state="selected"] .ch-map-v2__pin-body, .ch-map-v2__pin[data-state="selected"]::after { background: var(--mv-navy); color: #fff; }
.ch-map-v2__pin[data-state="selected"] .ch-map-v2__pin-body { transform: scale(1.08); box-shadow: 0 4px 12px rgba(26, 31, 54, .35); }
.ch-map-v2__pin[data-state="selected"] .ch-map-v2__ic { stroke: #FFB24A; }
.ch-map-v2__pin[data-state="visited"] .ch-map-v2__pin-body { color: #8A90A2; }
.ch-map-v2__pin[data-state="soldout"] .ch-map-v2__pin-body { height: 22px; padding: 0 8px; background: #F7F8FA; color: #8A90A2; font-weight: 500; font-size: 11px; }
.ch-map-v2__pin[data-state="soldout"]::after { background: #F7F8FA; }
.ch-map-v2__pin:hover .ch-map-v2__pin-body { transform: translateY(-1px); }
.ch-map-v2__pin:focus-visible .ch-map-v2__pin-body { outline: 2px solid var(--mv-orange); outline-offset: 2px; }

/* ---------- groups ---------- */
.ch-map-v2__group { appearance: none; display: grid; place-items: center; margin: 0; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--mv-ink);
  font: 700 14px/1 Archivo, Inter, Arial, sans-serif; cursor: pointer; box-shadow: 0 0 0 1px rgba(26, 31, 54, .1), 0 0 0 6px rgba(255, 255, 255, .55), 0 3px 10px rgba(26, 31, 54, .18); }
.ch-map-v2__group[data-size="s"] { width: 34px; height: 34px; font-size: 13px; }
.ch-map-v2__group[data-size="m"] { width: 42px; height: 42px; font-size: 15px; }
.ch-map-v2__group[data-size="l"] { width: 52px; height: 52px; font-size: 17px; }
.ch-map-v2__group-t { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); padding: 3px 7px; border-radius: 999px; background: #fff;
  box-shadow: 0 0 0 1px rgba(26, 31, 54, .1); color: var(--mv-ink); font: 600 11px/1.2 Inter, Arial, sans-serif; white-space: nowrap; }
.ch-map-v2__group:hover { background: var(--mv-navy); color: #fff; }
.ch-map-v2__group:focus-visible { outline: 2px solid var(--mv-orange); outline-offset: 3px; }

/* ---------- your spot ---------- */
.ch-map-v2__spot { cursor: grab; background: none !important; z-index: 6; }
.ch-map-v2__spot:active { cursor: grabbing; }
.ch-map-v2__spot-pin { display: block; width: 30px; height: 38px; filter: drop-shadow(0 3px 4px rgba(26, 31, 54, .35)); }
.ch-map-v2__spot-chip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 4px 0 10px;
  border-radius: 10px; background: #fff; color: var(--mv-ink); box-shadow: 0 0 0 1.5px var(--mv-navy), 0 4px 12px rgba(26, 31, 54, .18); font: 600 13px/1 Inter, Arial, sans-serif; white-space: nowrap; }
.ch-map-v2__spot-name { max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.ch-map-v2__spot-move { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 7px; background: #F4F6FB; color: var(--mv-navy); font-weight: 600; }
.ch-map-v2__spot-chip .ch-map-v2__ic { width: 14px; height: 14px; }
.ch-map-v2__group[data-state="selected"] { background: var(--mv-navy); color: #fff; transform: scale(1.08); z-index: 4; }
.ch-map-v2__group[data-state="selected"] .ch-map-v2__group-t { background: var(--mv-navy); color: #fff; box-shadow: none; }

/* ---------- hover tooltip ---------- */
.ch-map-v2__tip { pointer-events: none; display: flex; flex-direction: column; gap: 2px; max-width: 240px; padding: 8px 12px; border-radius: 10px; background: #fff; color: var(--mv-ink);
  box-shadow: 0 0 0 1px var(--mv-line), 0 8px 20px rgba(26, 31, 54, .2); font: 400 12.5px/1.35 Inter, Arial, sans-serif; z-index: 8; }
.ch-map-v2__tip b { font: 700 13.5px/1.3 Archivo, Inter, Arial, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-map-v2__tip span { color: var(--mv-muted); white-space: nowrap; }

/* ---------- preview card ---------- */
.ch-map-v2__card { position: relative; width: 300px; overflow: hidden; border-radius: 14px; background: #fff; color: var(--mv-ink); z-index: 9; cursor: default;
  box-shadow: 0 0 0 1px var(--mv-line), 0 18px 40px rgba(26, 31, 54, .28); font-family: Inter, Arial, sans-serif; text-align: left; }
.ch-map-v2__card-photo { height: 112px; background: var(--mv-line); }
.ch-map-v2__card-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ch-map-v2__card-x { appearance: none; position: absolute; top: 8px; right: 8px; z-index: 2; display: grid; place-items: center; width: 30px; height: 30px; margin: 0; padding: 0; border: 0; border-radius: 50%;
  background: #fff; color: var(--mv-ink); box-shadow: 0 2px 6px rgba(26, 31, 54, .25); cursor: pointer; }
.ch-map-v2__card-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.ch-map-v2__drive { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--mv-warm); color: var(--mv-ink); font: 700 12.5px/1 Inter, Arial, sans-serif; }
.ch-map-v2__drive .ch-map-v2__ic { width: 14px; height: 14px; stroke: var(--mv-warm-ic); }
.ch-map-v2__card-name { margin: 2px 0 0; padding-right: 26px; font: 800 16px/1.25 Archivo, Inter, Arial, sans-serif; color: var(--mv-ink); }
.ch-map-v2__card-area { font-size: 13px; color: var(--mv-muted); }
.ch-map-v2__card-rev { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--mv-muted); }
.ch-map-v2__score { display: inline-grid; place-items: center; min-width: 30px; height: 22px; padding: 0 6px; border-radius: 6px; background: var(--mv-navy); color: #fff; font: 700 12.5px/1 Archivo, Inter, sans-serif; }
.ch-map-v2__card-foot { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 6px; }
.ch-map-v2__card-price b { font: 800 20px/1 Archivo, Inter, Arial, sans-serif; }
.ch-map-v2__card-price span { margin-left: 4px; font-size: 12px; color: var(--mv-muted); }
.ch-map-v2__card-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ch-map-v2__link { appearance: none; display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 0; border: 0; background: none; color: var(--mv-ink); font: 600 12.5px/1 Inter, Arial, sans-serif;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; white-space: nowrap; }
.ch-map-v2__link .ch-map-v2__ic { width: 14px; height: 14px; }
.ch-map-v2__primary { appearance: none; height: 36px; margin: 0; padding: 0 14px; border: 0; border-radius: 10px; background: var(--mv-orange); color: var(--mv-ink); font: 800 14px/1 Archivo, Inter, Arial, sans-serif; cursor: pointer; white-space: nowrap; }
.ch-map-v2__primary:hover { background: #FF9A12; }
.ch-map-v2__card--compact { width: 240px; }
.ch-map-v2__card--compact .ch-map-v2__card-body { padding: 10px 12px 12px; }
.ch-map-v2__card--compact .ch-map-v2__card-name { font-size: 14px; }
.ch-map-v2__card--compact .ch-map-v2__card-foot { flex-direction: column; align-items: stretch; }
.ch-map-v2__card--compact .ch-map-v2__card-actions { justify-content: space-between; }

/* ---------- "Show on map" on the list cards ---------- */
.ch-map-v2__showmap { appearance: none; display: inline-flex; align-items: center; gap: 4px; margin: 4px 0 2px; padding: 0; border: 0; background: none; color: var(--mv-ink);
  font: 600 13px/1.2 Inter, Arial, sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ch-map-v2__showmap .ch-map-v2__ic { width: 14px; height: 14px; stroke: var(--mv-warm-ic); }
.ch-map-v2__showmap:hover { color: var(--mv-navy); }
.ch-map-v2-on .main-ch-hotelcard.ch-map-v2-selected { box-shadow: 0 0 0 2px var(--mv-navy) !important; }

/* ---------- edge chips (off-screen hovered hotel, or your spot) ---------- */
.ch-map-v2__edge { appearance: none; position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: 6px; height: 32px; margin: 0; padding: 0 12px 0 6px; border: 0; border-radius: 999px;
  background: var(--mv-navy); color: #fff; font: 600 13px/1 Inter, Arial, sans-serif; white-space: nowrap; cursor: pointer; box-shadow: 0 4px 12px rgba(26, 31, 54, .3); }
.ch-map-v2__edge[hidden] { display: none; }
.ch-map-v2__edge-arrow { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.ch-map-v2__edge-arrow .ch-map-v2__ic { width: 14px; height: 14px; stroke: #FFB24A; }
.ch-map-v2__edge--spot { background: #fff; color: var(--mv-ink); box-shadow: 0 0 0 1.5px var(--mv-navy), 0 4px 12px rgba(26, 31, 54, .2); }
.ch-map-v2__edge--spot .ch-map-v2__edge-arrow { background: #F4F6FB; }
.ch-map-v2__edge--spot .ch-map-v2__edge-arrow .ch-map-v2__ic { stroke: var(--mv-navy); }

/* ---------- the docked hotel card (pin click) ---------- */
.ch-map-v2__dock { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 6; display: grid; grid-template-columns: 210px minmax(0, 1fr); max-width: 640px; margin: 0 auto;
  overflow: hidden; border-radius: 16px; background: #fff; color: var(--mv-ink); text-align: left; cursor: default; font-family: Inter, Arial, sans-serif;
  box-shadow: 0 0 0 1px var(--mv-line), 0 18px 44px rgba(26, 31, 54, .3); animation: chv2-dock-in .18s ease-out; }
@keyframes chv2-dock-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ch-map-v2__dock { animation: none; } }
.ch-map-v2__dock-photo { position: relative; min-height: 190px; background: var(--mv-line); }
.ch-map-v2__dock-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ch-map-v2__ph { appearance: none; position: absolute; top: 50%; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; margin: -15px 0 0; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--mv-ink); box-shadow: 0 2px 6px rgba(26, 31, 54, .25); cursor: pointer; opacity: 0; transition: opacity .15s; }
.ch-map-v2__dock-photo:hover .ch-map-v2__ph, .ch-map-v2__ph:focus-visible { opacity: 1; }
.ch-map-v2__ph--prev { left: 8px; } .ch-map-v2__ph--next { right: 8px; }
.ch-map-v2__ph-n { position: absolute; left: 8px; bottom: 8px; padding: 2px 7px; border-radius: 999px; background: rgba(26, 31, 54, .7); color: #fff; font-size: 11px; font-weight: 600; }
.ch-map-v2__save { appearance: none; position: absolute; top: 8px; right: 8px; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; margin: 0; padding: 0; border: 0; border-radius: 50%;
  background: #fff; color: var(--mv-ink); box-shadow: 0 2px 6px rgba(26, 31, 54, .25); cursor: pointer; }
.ch-map-v2__save.is-saved .ch-map-v2__ic { fill: #E0245E; stroke: #E0245E; }
.ch-map-v2__dock-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 12px 14px 14px; }
.ch-map-v2__dock-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ch-map-v2__badges { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.ch-map-v2__dist { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--mv-line); color: var(--mv-muted); font: 600 12.5px/1 Inter, Arial, sans-serif; }
.ch-map-v2__dist .ch-map-v2__ic { width: 13px; height: 13px; }
.ch-map-v2__dock-nav { display: flex; align-items: center; gap: 2px; flex: none; font: 600 12px/1 Inter, Arial, sans-serif; color: var(--mv-muted); }
.ch-map-v2__dock-nav span { padding: 0 4px; white-space: nowrap; }
.ch-map-v2__dock-nav button { appearance: none; display: grid; place-items: center; width: 28px; height: 28px; margin: 0; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--mv-ink); cursor: pointer; }
.ch-map-v2__dock-nav button:hover:not([disabled]) { background: #F4F6FB; }
.ch-map-v2__dock-nav button[disabled] { opacity: .3; cursor: default; }
.ch-map-v2__dock-nav .ch-map-v2__dock-x { margin-left: 4px; background: #F4F6FB; border-radius: 50%; }
.ch-map-v2__dock .ch-map-v2__card-name { padding-right: 0; font-size: 17px; }
.ch-map-v2__dock .ch-map-v2__card-rev b { color: var(--mv-ink); font-weight: 700; }
.ch-map-v2__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ch-map-v2__tag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 6px; background: #F4F6FB; color: var(--mv-ink); font: 600 12px/1 Inter, Arial, sans-serif; }
.ch-map-v2__tag--free { background: #E8F5EE; color: #127A46; }
.ch-map-v2__tag .ch-map-v2__ic { width: 13px; height: 13px; }
.ch-map-v2__dock-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 6px; }
.ch-map-v2__dock-price { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ch-map-v2__dock-price b { font: 800 22px/1 Archivo, Inter, Arial, sans-serif; }
.ch-map-v2__dock-price span { font-size: 12.5px; color: var(--mv-muted); }
.ch-map-v2__dock-price s { margin-left: 6px; font-size: 13px; color: var(--mv-muted); }
.ch-map-v2__dock-price small { font-size: 12px; color: var(--mv-muted); }
.ch-map-v2__left { font: 700 12px/1.2 Inter, Arial, sans-serif; color: #C4320A; }
.ch-map-v2__dock .ch-map-v2__card-actions { flex-direction: column; align-items: flex-end; gap: 8px; }
.ch-map-v2__dock .ch-map-v2__primary { height: 40px; padding: 0 18px; font-size: 15px; }
/* narrow maps: photo on top */
.ch-map-v2__dock--compact { grid-template-columns: 1fr; left: 10px; right: 10px; bottom: 10px; }
.ch-map-v2__dock--compact .ch-map-v2__dock-photo { min-height: 110px; height: 110px; }
.ch-map-v2__dock--compact .ch-map-v2__dock-foot { flex-direction: column; align-items: stretch; }
.ch-map-v2__dock--compact .ch-map-v2__card-actions { flex-direction: row; justify-content: space-between; align-items: center; }

.ch-map-v2__dock--narrow { grid-template-columns: 150px minmax(0, 1fr); left: 10px; right: 10px; bottom: 10px; }
.ch-map-v2__dock--narrow .ch-map-v2__dock-photo { min-height: 0; }
.ch-map-v2__dock--narrow .ch-map-v2__dock-nav span { display: none; }
.ch-map-v2__dock--narrow .ch-map-v2__dist { display: none; }
.ch-map-v2__dock--narrow .ch-map-v2__card-name { font-size: 15.5px; }
.ch-map-v2__dock--narrow .ch-map-v2__dock-foot { flex-direction: column; align-items: stretch; gap: 8px; }
.ch-map-v2__dock--narrow .ch-map-v2__card-actions { flex-direction: row; justify-content: space-between; align-items: center; }
.ch-map-v2__dock--narrow .ch-map-v2__tags { display: none; }