/* Shared city map review. All map styles are isolated from the list version. */
.city-map-comparison .city-review-bar > div { flex-wrap:wrap; }
.city-map-comparison .city-review-compare { margin-left:auto; color:#e8cc85; }
.city-map-section { padding:64px 24px; background:#f4f5f0; }
.location-page .city-map-section { scroll-margin-top:0; }
.city-map-section .location-container { max-width:1200px; }
.city-map-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; margin-bottom:26px; }
.city-map-heading h2 { max-width:none; margin:0; }
.city-map-heading > p { max-width:280px; margin:0 0 3px; color:#536a7b; font-size:15px; line-height:1.55; }
.city-map-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; border:1px solid #d5dfdf; border-radius:10px; overflow:hidden; background:#fff; box-shadow:0 10px 32px rgba(16,46,66,.05); }
.city-map-visual { position:relative; min-width:0; min-height:520px; background:#e7eeeb; }
.city-map-canvas { position:absolute; inset:0; z-index:1; background:#e6ece9; font-family:Barlow,Arial,sans-serif; }
.city-map-canvas .leaflet-tile-pane { filter:saturate(.35) contrast(.93); }
.city-map-canvas .leaflet-control-attribution { max-width:calc(100% - 12px); padding:3px 6px; background:rgba(255,255,255,.94); color:#314b5b; font:11px/1.35 Barlow,Arial,sans-serif; }
.city-map-canvas .leaflet-control-attribution a { color:#244d66; }
.city-map-canvas .leaflet-control-zoom { border:1px solid #bdcbc8; box-shadow:0 2px 10px #102e4214; }
.city-map-canvas .leaflet-control-zoom a { color:#102e42; background:#fff; border-color:#dbe3e1; }
.city-map-canvas .leaflet-control-zoom a:hover { background:#f1f4ef; }
.city-map-topline { position:absolute; z-index:500; top:18px; left:18px; right:18px; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; pointer-events:none; }
.city-map-location { display:grid; gap:4px; padding:11px 14px; background:rgba(255,255,255,.95); border:1px solid #d8e1de; border-radius:5px; box-shadow:0 2px 12px #102e420d; }
.city-map-location strong { color:#102e42; font-size:14px; line-height:1.2; }
.city-map-location span { color:#627580; font-size:11px; line-height:1.2; }
.city-map-reset { pointer-events:auto; min-height:42px; padding:10px 13px; border:1px solid #c3d0cc; border-radius:5px; background:#fff; color:#102e42; font:600 12px/1.35 Barlow,Arial,sans-serif; cursor:pointer; box-shadow:0 2px 12px #102e420d; }
.city-map-reset:hover { background:#f2f5ef; }
.city-map-reset:disabled { opacity:.6; cursor:default; }
.city-map-reset:focus-visible,.city-area-button:focus-visible { outline:3px solid #b08329; outline-offset:-3px; }
.city-map-notice { position:absolute; z-index:450; left:18px; right:18px; bottom:48px; margin:0; padding:10px 13px; border:1px solid #cedbd5; border-radius:5px; background:rgba(255,255,255,.96); color:#425c68; font-size:13px; line-height:1.45; }
.city-map-notice[hidden] { display:none; }
.city-map-nojs { position:absolute; z-index:460; left:24px; right:24px; top:44%; margin:0; padding:16px; border:1px solid #cad6d0; border-radius:5px; background:#fff; color:#425c68; line-height:1.5; }
.city-area-sidebar { min-width:0; border-left:1px solid #d5dfdf; background:#fff; }
.city-area-list { margin:0; padding:0; list-style:none; height:100%; display:grid; grid-template-rows:repeat(var(--area-count), minmax(53px, 1fr)); }
.city-area-list li { margin:0; padding:0; display:flex; }
.city-area-button { width:100%; min-height:53px; display:grid; grid-template-columns:27px minmax(0,1fr) 12px; align-items:center; gap:12px; padding:11px 20px; border:0; border-bottom:1px solid #edf0ed; background:#fff; color:#17394d; text-align:left; font:600 14px/1.35 Barlow,Arial,sans-serif; cursor:pointer; }
.city-area-list li:last-child .city-area-button { border-bottom:0; }
.city-area-button:hover { background:#f5f7f1; }
.city-area-button:disabled { cursor:default; }
.city-area-button:disabled .city-area-arrow { visibility:hidden; }
.city-area-button[aria-pressed="true"] { background:#f4ecd5; box-shadow:inset 3px 0 #a97b22; color:#102e42; }
.city-area-number { display:inline-flex; align-items:center; justify-content:center; width:27px; height:27px; border-radius:50%; background:#edf2ef; color:#294b5d; font-size:12px; font-weight:700; }
.city-area-button[aria-pressed="true"] .city-area-number { background:#ddbd6a; color:#132f43; }
.city-area-arrow { color:#9aaea7; font-size:17px; }
.city-area-button[aria-pressed="true"] .city-area-arrow { color:#8b651e; }
.city-map-foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:12px; margin-top:14px; color:#627580; font-size:12px; line-height:1.5; }
.city-map-foot a { color:#36596c; text-underline-offset:3px; }
.city-map-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.city-area-pin { background:transparent; border:0; }
.city-area-pin span { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border:3px solid #fff; border-radius:50%; background:#163b50; color:#fff; box-shadow:0 2px 8px rgba(6,30,43,.28); font:700 12px/1 Barlow,Arial,sans-serif; transition:background .15s,transform .15s; }
.city-area-pin.is-selected span { background:#dbb85e; color:#102e42; transform:scale(1.17); box-shadow:0 2px 10px rgba(6,30,43,.35); }
.city-area-pin:focus-visible { outline:3px solid #ac7c24; outline-offset:4px; border-radius:50%; }
.city-map-canvas .leaflet-popup-content-wrapper { border-radius:6px; color:#102e42; box-shadow:0 5px 25px #102e4226; }
.city-map-canvas .leaflet-popup-content { margin:14px 18px; font:600 15px/1.4 Barlow,Arial,sans-serif; }
.city-popup-kicker { display:block; margin-bottom:4px; color:#7b621f; font-size:10px; letter-spacing:1px; text-transform:uppercase; }
.city-map-canvas .leaflet-tooltip { border:1px solid #d1dcd7; border-radius:4px; color:#163b50; font:600 12px/1.3 Barlow,Arial,sans-serif; box-shadow:0 2px 8px #102e421a; }
@media(max-width:1000px) { .city-map-layout { grid-template-columns:minmax(0,1fr) 290px; } .city-area-button { padding-left:15px; padding-right:15px; gap:10px; } }
@media(max-width:800px) {
  .city-map-section { padding:44px 20px; }
  .city-map-heading { display:block; margin-bottom:22px; }
  .city-map-heading > p { max-width:none; margin-top:13px; }
  .city-map-layout { grid-template-columns:1fr; }
  .city-map-visual { min-height:420px; scroll-margin-top:0; }
  .city-area-sidebar { border-left:0; border-top:1px solid #d5dfdf; }
  .city-area-list { height:auto; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:none; }
  .city-area-list li { display:flex; }
  .city-area-list li:nth-child(odd) { border-right:1px solid #edf0ed; }
  .city-area-button { min-height:66px; grid-template-columns:27px minmax(0,1fr); padding:12px 16px; font-size:13px; }
  .city-area-arrow { display:none; }
  .city-area-list li:last-child .city-area-button,.city-area-list li:nth-last-child(2):nth-child(odd) .city-area-button { border-bottom:0; }
}
@media(max-width:480px) {
  .city-map-visual { min-height:420px; }
  .city-area-pin span { width:26px; height:26px; border-width:2px; font-size:10px; }
  .city-map-topline { top:12px; left:12px; right:12px; gap:8px; }
  .city-map-location { padding:9px 10px; }
  .city-map-location strong { font-size:12px; }
  .city-map-location span { font-size:10px; }
  .city-map-reset { padding:9px 10px; font-size:11px; min-height:40px; }
  .city-map-notice { left:12px; right:12px; font-size:12px; }
  .city-area-button { min-height:74px; padding:12px 10px; gap:8px; font-size:12px; }
  .city-area-number { width:24px; height:24px; font-size:11px; }
  .city-area-button { grid-template-columns:24px minmax(0,1fr); }
  .city-map-comparison .city-review-bar > div { gap:6px 14px; }
  .city-map-comparison .city-review-compare { margin-left:0; }
}
@media(max-width:800px) {
  .city-map-section-dense .city-map-visual { min-height:620px; }
  .city-map-section-dense .city-area-pin span { width:24px; height:24px; border-width:2px; font-size:10px; }
}
@media(prefers-reduced-motion:reduce) { .city-area-pin span { transition:none; } }