.create-listing-location-map{position:relative}.create-listing-location-map__stage{position:relative;min-height:420px;border:1px solid #e9e9e9;border-radius:22px;overflow:hidden;background:linear-gradient(180deg,#ffffffc7,#f4f8fceb),#eef3f7;box-shadow:0 10px 24px #0000000f}body.create-listing-page .create-listing-location-map__stage.is-faux-fullscreen{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;max-width:none;margin:0;border:0;border-radius:0;box-shadow:none;overscroll-behavior:none;z-index:2147483000}body.create-listing-page .create-listing-location-map__stage.is-faux-fullscreen .create-listing-location-map__canvas{min-height:100%;height:100%}body.create-listing-faux-fullscreen-open{overflow:hidden}:root[data-theme=night] .create-listing-location-map__stage{border-color:#ffffff14;background:linear-gradient(180deg,#ffffffc7,#f4f8fceb),#eef3f7;box-shadow:0 14px 30px #ffffff1f}.create-listing-location-map__canvas{position:relative;display:block;width:100%;height:420px;min-height:420px;border-radius:0;background:linear-gradient(180deg,#dfe8ef,#eef4f7)}.create-listing-location-map__canvas:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#ffffff2e,#fff0)}.create-listing-location-map__canvas.has-fallback{pointer-events:none}.create-listing-location-map__canvas .maplibregl-map,.create-listing-location-map__canvas .maplibregl-canvas-container,.create-listing-location-map__canvas .maplibregl-canvas{width:100%;height:100%;pointer-events:auto}.create-listing-location-map__canvas .maplibregl-ctrl-top-left,.create-listing-location-map__canvas .maplibregl-ctrl-bottom-right{display:none}.create-listing-location-map__canvas .maplibregl-ctrl-top-right{top:14px;right:14px;z-index:3;display:flex;flex-direction:column;align-items:flex-end;gap:10px;height:auto}body.create-listing-page .create-listing-location-map__canvas .maplibregl-ctrl-group{overflow:hidden!important;border:1px solid var(--liquid-glass-border)!important;border-radius:16px!important;background:var(--liquid-glass-surface)!important;box-shadow:var(--liquid-glass-shadow)!important;backdrop-filter:blur(22px) saturate(150%)!important;-webkit-backdrop-filter:blur(22px) saturate(150%)!important}.create-listing-location-map__canvas .maplibregl-ctrl-group button{width:42px;height:42px;border:0;background:transparent}.create-listing-location-map__canvas .maplibregl-ctrl-group button+button{border-top:1px solid rgba(23,23,23,.08)}.create-listing-location-map__canvas .create-listing-location-map__edit-btn{display:flex;align-items:center;justify-content:center;color:#171717;transition:background .18s ease,color .18s ease}.create-listing-location-map__canvas .create-listing-location-map__edit-btn svg{display:block}body.create-listing-page .create-listing-location-map__canvas .create-listing-location-map__edit-btn.is-editing,body.create-listing-page .create-listing-location-map__canvas .create-listing-location-map__edit-btn.is-editing:hover{color:#fff;background:linear-gradient(180deg,#6a84ff,#4f68f2)}.create-listing-location-map__canvas .maplibregl-ctrl-group button:hover,.create-listing-location-map__canvas .maplibregl-ctrl-group button:focus-visible{background:#1717170d;outline:none}.create-listing-location-map__canvas .maplibregl-ctrl-icon{opacity:.92;filter:brightness(0) saturate(100%)}.create-listing-location-map__canvas .maplibregl-ctrl-bottom-left{left:10px;bottom:8px}.create-listing-location-map__canvas .maplibregl-ctrl-attrib{color:#404e5b75;background:#ffffff94;border-radius:999px;box-shadow:none;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);padding:2px 7px;font-size:9px;line-height:1.1;opacity:.9}.create-listing-location-map__canvas .maplibregl-ctrl-attrib.maplibregl-compact{padding-right:7px}.create-listing-location-map__canvas .maplibregl-ctrl-attrib-button{display:none}.create-listing-location-map__visitor-marker{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;pointer-events:none}.create-listing-location-map__visitor-ring{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:2px solid #ffffff;border-radius:999px;background:#fff;box-shadow:0 8px 18px #1018283d,0 0 0 1px #ffffff29}.create-listing-location-map__visitor-dot{width:100%;height:100%;border-radius:999px;background:#3b82f6;box-shadow:inset 0 1px #ffffff59,0 0 0 1px #1546922e}.create-listing-location-map__focus{--location-pin-anchor-offset: -25px;position:absolute;inset:0;z-index:2;display:grid;place-items:center;pointer-events:none}.create-listing-location-map__focus-pin{position:absolute;display:inline-flex;align-items:center;justify-content:center;width:38px;height:50px;opacity:1;transform:translateY(var(--location-pin-anchor-offset)) scale(1);transition:opacity .18s ease,transform .18s ease}.create-listing-location-map__focus-pin:before,.create-listing-location-map__focus-pin:after{content:"";position:absolute;display:block}.create-listing-location-map__focus-pin:before{inset:0 auto auto 0;width:38px;height:38px;border-radius:50%;background:linear-gradient(180deg,#e2cfb4fa,#ccb08bf5);box-shadow:0 16px 30px #49331d33,inset 0 1px #ffffff70,inset 0 -1px #7959381f}.create-listing-location-map__focus-pin:after{left:50%;bottom:1px;width:10px;height:10px;background:#ccb08bfa;transform:translate(-50%) rotate(45deg);border-radius:2px;box-shadow:6px 6px 16px #49331d1f}.create-listing-location-map__focus-pin img{position:relative;z-index:1;width:18px;height:18px;object-fit:contain;filter:brightness(0) invert(1);transform:translateY(-6px)}.create-listing-location-map__canvas .maplibregl-canvas{cursor:grab}.create-listing-location-map__canvas .maplibregl-canvas:active{cursor:grabbing}.create-listing-location-map__search{position:absolute;top:14px;left:14px;z-index:6;width:min(340px,calc(100% - 96px))}.create-listing-location-map__search .home-map-search-suggestions{position:absolute;top:58px;left:0;width:100%}.create-listing-location-map__search .home-map-search-suggestions__surface{max-height:min(320px,52vh)}.create-listing-location-map__search .home-map-search-suggestion.is-active{background:var(--liquid-glass-surface, rgba(201, 176, 141, .18))}.create-listing-location-map__status{position:absolute;left:16px;bottom:16px;z-index:4;width:min(360px,calc(100% - 32px));gap:0;padding:12px 14px;border:1px solid rgba(255,255,255,.48);border-radius:16px;background:#ffffffb8;box-shadow:inset 0 1px #ffffffb8,0 12px 26px #11182714;backdrop-filter:blur(14px) saturate(1.12);-webkit-backdrop-filter:blur(14px) saturate(1.12);color:#171717;pointer-events:none}.create-listing-location-map__status strong{font-size:.96rem;line-height:1.2}.create-listing-location-map__status p{margin:0;color:#5e6a75;font-size:.84rem;line-height:1.45}body.create-listing-page .create-listing-location-map__precision{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}body.create-listing-page .create-listing-location-map__precision-copy{display:flex;flex-direction:column;gap:4px;min-width:0;pointer-events:none}body.create-listing-page .create-listing-location-map__precision-copy strong{font-size:.98rem}body.create-listing-page .create-listing-location-map__precision-copy p{font-size:.84rem}body.create-listing-page .create-listing-location-map__precision-toggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;padding:0;border:0;background:transparent;color:inherit;cursor:pointer;pointer-events:auto}body.create-listing-page .create-listing-location-map__precision-toggle:focus-visible{outline:2px solid rgba(94,120,255,.48);outline-offset:4px;border-radius:999px}body.create-listing-page .create-listing-location-map__precision-toggle[aria-checked=true] .mobile-menu-link__theme-switch{background:#5e78ff57;border-color:#90a5ff57;box-shadow:inset 0 1px #ffffff3d,0 10px 20px #4258d629}body.create-listing-page .create-listing-location-map__precision-toggle[aria-checked=true] .mobile-menu-link__theme-thumb{transform:translate(22px)}:root[data-theme=night] body.create-listing-page .create-listing-location-map__canvas .maplibregl-canvas{filter:brightness(.9) contrast(1.02) saturate(.9)}:root[data-theme=night] body.create-listing-page .create-listing-location-map__focus-pin:before{background:linear-gradient(180deg,#d8c2a2fa,#bb9a6ff5);box-shadow:0 16px 30px #060a1247,inset 0 1px #ffffff3d,inset 0 -1px #3a260f2e}:root[data-theme=night] body.create-listing-page .create-listing-location-map__focus-pin:after{background:#bb9a6ff5}:root[data-theme=night] body.create-listing-page .create-listing-location-map__canvas .maplibregl-ctrl-group{border-color:#ffffff24;background:#000000bd;box-shadow:inset 0 1px #ffffff1f,0 14px 24px #ffffff24}:root[data-theme=night] body.create-listing-page .create-listing-location-map__canvas .maplibregl-ctrl-group button+button{border-top-color:#ffffff14}:root[data-theme=night] body.create-listing-page .create-listing-location-map__canvas .maplibregl-ctrl-group button:hover,:root[data-theme=night] body.create-listing-page .create-listing-location-map__canvas .maplibregl-ctrl-group button:focus-visible{background:var(--create-chip-bg)}:root[data-theme=night] body.create-listing-page .create-listing-location-map__canvas .maplibregl-ctrl-icon{filter:brightness(0) invert(1) opacity(.96)}:root[data-theme=night] body.create-listing-page .create-listing-location-map__canvas .create-listing-location-map__edit-btn{color:#fffffff5}:root[data-theme=night] body.create-listing-page .create-listing-location-map__canvas .create-listing-location-map__edit-btn.is-editing,:root[data-theme=night] body.create-listing-page .create-listing-location-map__canvas .create-listing-location-map__edit-btn.is-editing:hover{color:#fff;background:linear-gradient(180deg,#6a84ff,#4f68f2)}:root[data-theme=night] body.create-listing-page .create-listing-location-map__canvas .maplibregl-ctrl-attrib{color:#dce7f58f;background:#00000080}:root[data-theme=night] body.create-listing-page .create-listing-location-map__status{border-color:#ffffff1f;background:#000000b8;box-shadow:inset 0 1px #ffffff1f,0 14px 30px #ffffff24;color:#ecf2fcf0}:root[data-theme=night] body.create-listing-page .create-listing-location-map__status p{color:#adbcd0d6}@media(max-width:900px){body.create-listing-page .create-listing-location-map__stage,body.create-listing-page .create-listing-location-map__canvas{min-height:360px;height:360px}body.create-listing-page .create-listing-location-map__status{left:14px;bottom:14px;width:calc(100% - 28px);padding:12px 14px}body.create-listing-page .create-listing-location-map__focus{--location-pin-anchor-offset: -23px}body.create-listing-page .create-listing-location-map__focus-pin{width:34px;height:46px;transform:translateY(var(--location-pin-anchor-offset)) scale(1)}body.create-listing-page .create-listing-location-map__focus-pin:before{width:34px;height:34px}body.create-listing-page .create-listing-location-map__focus-pin:after{bottom:1px;width:9px;height:9px}body.create-listing-page .create-listing-location-map__focus-pin img{width:16px;height:16px}}

/* The controls stack vertically (see `.maplibregl-ctrl-top-right` above), and
   MapLibre adds the zoom control before ours — pull the edit/confirm button up
   so the +/- sits underneath it. Dropping MapLibre's own 10px margin lets the
   container's inset do the positioning, so the button lines up with the top of
   the search pill and the gap between the two groups is exactly 10px. */
.create-listing-location-map__canvas .create-listing-location-map__edit-ctrl{order:-1}
.create-listing-location-map__canvas .maplibregl-ctrl-top-right .maplibregl-ctrl-group{margin:0}

/* Preview mode: the map is locked (drag/zoom only after clicking edit), so hide
   the +/- zoom control (keep the edit button) and show a default cursor. */
.create-listing-location-map__canvas:not(.is-map-editing) .maplibregl-ctrl-group:not(.create-listing-location-map__edit-ctrl){display:none}
.create-listing-location-map__canvas:not(.is-map-editing) .maplibregl-canvas{cursor:default}

/* Reorder the location step: map first, address fields after — filling in the
   map (search/drag) auto-fills the fields, so this is faster to complete. */
.create-listing-section--location{display:flex;flex-direction:column}



#createListingLocationSearchInput{transform:none;height:auto;line-height:1.2}

/* The homepage pill hard-codes a 220px minimum for the input column, which is
   wider than this pill gets on a phone — the submit button then overflowed the
   pill and landed on top of the edit control. Let the column shrink instead. */
.create-listing-location-map__search .home-map-search{grid-template-columns:minmax(0,1fr) 48px}

/* Search suggestions: align the dropdown with the search pill (the homepage
   `body.has-desktop-sidebar .home-map-search-suggestions` centering rule was
   leaking in and making it 440px wide / off-centre). */
body.has-desktop-sidebar .create-listing-location-map__search .home-map-search-suggestions,
body.has-mobile-tabbar .create-listing-location-map__search .home-map-search-suggestions{left:0;width:100%;transform:none}

/* Search suggestions surface: match the pill's liquid glass instead of a flat
   dark panel. */
.create-listing-location-map__search .home-map-search-suggestions__surface,
:root[data-theme=night] .create-listing-location-map__search .home-map-search-suggestions__surface{
  border:1px solid var(--liquid-glass-border);
  background:var(--liquid-glass-surface-strong, var(--liquid-glass-surface));
  box-shadow:var(--liquid-glass-shadow);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
}

/* Fullscreen editing (see create-listing-location-map.js `M`). The stage is
   moved to <body> and pinned over the viewport; the placeholder left behind
   only marks where to put it back. */
.create-listing-location-map__fullscreen-placeholder{display:none}
body.create-listing-page .create-listing-location-map__stage.is-faux-fullscreen .create-listing-location-map__search{
  top:calc(14px + env(safe-area-inset-top));
  left:calc(14px + env(safe-area-inset-left));
}
body.create-listing-page .create-listing-location-map__stage.is-faux-fullscreen .create-listing-location-map__canvas .maplibregl-ctrl-top-right{
  top:calc(14px + env(safe-area-inset-top));
  right:calc(14px + env(safe-area-inset-right));
}
body.create-listing-page .create-listing-location-map__stage.is-faux-fullscreen .create-listing-location-map__status{
  left:calc(16px + env(safe-area-inset-left));
  bottom:calc(16px + env(safe-area-inset-bottom));
  width:min(360px, calc(100% - 32px - env(safe-area-inset-left) - env(safe-area-inset-right)));
}
body.create-listing-page .create-listing-location-map__stage.is-faux-fullscreen .create-listing-location-map__canvas .maplibregl-ctrl-bottom-left{
  left:calc(10px + env(safe-area-inset-left));
  bottom:calc(8px + env(safe-area-inset-bottom));
}
@media(max-width:900px){
  body.create-listing-page .create-listing-location-map__stage.is-faux-fullscreen .create-listing-location-map__status{
    left:calc(14px + env(safe-area-inset-left));
    width:calc(100% - 28px - env(safe-area-inset-left) - env(safe-area-inset-right));
  }
  /* Editing shows the zoom control next to the check, and the two of them plus
     the search pill do not fit on one phone-width row. Search spans the top,
     controls drop underneath it. */
  body.create-listing-page .create-listing-location-map__stage.is-faux-fullscreen .create-listing-location-map__search{
    width:calc(100% - 28px - env(safe-area-inset-left) - env(safe-area-inset-right));
  }
  body.create-listing-page .create-listing-location-map__stage.is-faux-fullscreen .create-listing-location-map__canvas .maplibregl-ctrl-top-right{
    top:calc(72px + env(safe-area-inset-top));
  }
}

/* Public radius. A range input rather than a +/- stepper: on a phone the whole
   1-20 km range is one drag instead of nineteen taps, and the filled part of
   the track is itself the read-out. create-listing.js writes --range-progress
   on every `input` — one custom-property write per frame, no layout.
   NOTE: nothing here may size the circle on the map. The circle is a real map
   layer (see create-listing-location-map.js), so it scales with the map and
   stays faithful to the km at every zoom; the media-query override that used
   to pin it to 42vw on phones is exactly the bug that removed. */
body.create-listing-page .create-listing-location-map__radius {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(23, 23, 23, .08);
  pointer-events: auto;
}
body.create-listing-page .create-listing-location-map__radius[hidden] { display: none; }
body.create-listing-page .create-listing-location-map__radius-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: inherit;
  font-size: .84rem;
  font-weight: 700;
  line-height: 1.2;
}
body.create-listing-page .create-listing-location-map__radius-value {
  flex: 0 0 auto;
  font-size: .9rem;
  font-weight: 800;
  /* tabular figures so the panel does not twitch on 9 km -> 10 km */
  font-variant-numeric: tabular-nums;
}
body.create-listing-page .create-listing-location-map__radius-slider {
  --range-progress: 47.4%;
  --range-track: rgba(23, 23, 23, .14);
  --range-fill: #4f68f2;
  --range-thumb: 20px;
  display: block;
  width: 100%;
  height: var(--range-thumb);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  touch-action: none;
  -webkit-appearance: none;
  appearance: none;
}
body.create-listing-page .create-listing-location-map__radius-slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--range-fill) 0 var(--range-progress), var(--range-track) var(--range-progress) 100%);
}
body.create-listing-page .create-listing-location-map__radius-slider::-webkit-slider-thumb {
  width: var(--range-thumb);
  height: var(--range-thumb);
  margin-top: calc((6px - var(--range-thumb)) / 2);
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--range-fill);
  box-shadow: 0 2px 6px rgba(17, 24, 39, .28);
  -webkit-appearance: none;
  appearance: none;
}
/* Firefox fills the track itself, so it needs no gradient. */
body.create-listing-page .create-listing-location-map__radius-slider::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--range-track);
}
body.create-listing-page .create-listing-location-map__radius-slider::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--range-fill);
}
body.create-listing-page .create-listing-location-map__radius-slider::-moz-range-thumb {
  width: var(--range-thumb);
  height: var(--range-thumb);
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--range-fill);
  box-shadow: 0 2px 6px rgba(17, 24, 39, .28);
}
body.create-listing-page .create-listing-location-map__radius-slider:focus-visible { outline: none; }
body.create-listing-page .create-listing-location-map__radius-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(94, 120, 255, .42); }
body.create-listing-page .create-listing-location-map__radius-slider:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(94, 120, 255, .42); }
:root[data-theme=night] body.create-listing-page .create-listing-location-map__radius { border-top-color: rgba(255, 255, 255, .08); }
:root[data-theme=night] body.create-listing-page .create-listing-location-map__radius-slider {
  --range-track: rgba(255, 255, 255, .18);
  --range-fill: #6a84ff;
}
:root[data-theme=night] body.create-listing-page .create-listing-location-map__radius-slider::-webkit-slider-thumb { border-color: rgba(255, 255, 255, .92); box-shadow: 0 2px 8px rgba(0, 0, 0, .55); }
:root[data-theme=night] body.create-listing-page .create-listing-location-map__radius-slider::-moz-range-thumb { border-color: rgba(255, 255, 255, .92); box-shadow: 0 2px 8px rgba(0, 0, 0, .55); }
/* Bigger grab target on touch without fattening the track. */
@media (pointer: coarse) {
  body.create-listing-page .create-listing-location-map__radius-slider { --range-thumb: 26px; }
}
