/* Only the map's rendered canvas changes; markers, panels and site colours do not. */
html[data-uov-map-look] :is(#map, #luxuryMap) canvas.maplibregl-canvas {
  filter: var(--uov-map-canvas-filter, none);
  transition: filter 280ms ease;
}
html[data-uov-map-look="original"] { --uov-map-canvas-filter: none; }
html[data-uov-map-look="neon"] { --uov-map-canvas-filter: hue-rotate(110deg) saturate(2.1) contrast(1.12); }
html[data-uov-map-look="night"] { --uov-map-canvas-filter: invert(.92) hue-rotate(175deg) saturate(.75) brightness(.82); }
html[data-uov-map-look="warm"] { --uov-map-canvas-filter: sepia(.72) saturate(1.3) hue-rotate(342deg); }
html[data-uov-map-look="inverse"] { --uov-map-canvas-filter: invert(1) hue-rotate(20deg) saturate(1.4); }

.uov-map-look-trigger { touch-action: none; -webkit-touch-callout: none; user-select: none; }
.uov-map-look-trigger.is-map-look-open { outline: 2px solid #fff1b5 !important; outline-offset: 3px; }
.uov-map-look-fan { position: fixed; inset: 0; z-index: 2147483645; pointer-events: none; isolation: isolate; }
.uov-map-look-fan[hidden] { display: none !important; }
.uov-map-look-fan .uov-map-look-choice {
  position: absolute; display: grid; place-items: center; width: var(--map-look-size, 44px); height: var(--map-look-size, 44px);
  min-width: 0 !important; min-height: 0 !important; margin: 0; padding: 0 !important; transform: translate(-50%, -50%);
  border: 2px solid #ffffffab !important; border-radius: 50% !important; background: var(--map-look-colour, #b9e9df) !important;
  color: #153536 !important; font: 700 23px/1 system-ui !important; box-shadow: 0 5px 17px #07182688 !important;
  pointer-events: auto; cursor: pointer; touch-action: none; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: box-shadow 120ms ease, scale 120ms ease; animation: uov-map-fan-appear 130ms ease-out;
}
.uov-map-look-choice[data-map-look="original"] { --map-look-colour: linear-gradient(145deg, #fff8d9, #a6ddca); }
.uov-map-look-choice[data-map-look="neon"] { --map-look-colour: linear-gradient(135deg, #95ff69, #84ecff 50%, #ea91ff); }
.uov-map-look-choice[data-map-look="night"] { --map-look-colour: linear-gradient(135deg, #adb5ff, #6883cf); }
.uov-map-look-choice[data-map-look="warm"] { --map-look-colour: linear-gradient(135deg, #fff0ad, #f4a984); }
.uov-map-look-choice[data-map-look="inverse"] { --map-look-colour: linear-gradient(135deg, #ffb9e5, #c6caff); }
.uov-map-look-fan .uov-map-look-choice[aria-checked="true"]::after {
  content: '✓'; position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 17px; height: 17px;
  border: 1px solid #eefcdd; border-radius: 50%; background: #213934; color: #effde4; font: 800 11px/1 system-ui;
}
.uov-map-look-fan .uov-map-look-choice.is-aimed,
.uov-map-look-fan .uov-map-look-choice:focus-visible {
  outline: 3px solid #fff5c5 !important; outline-offset: 3px; box-shadow: 0 0 23px #f8ffe488, 0 5px 17px #07182688 !important;
}
.uov-map-look-fan .uov-map-look-choice:active { transform: translate(-50%, -50%) !important; scale: .94; }
@keyframes uov-map-fan-appear { from { opacity: 0; scale: .8; } to { opacity: 1; scale: 1; } }
@media (prefers-reduced-motion: reduce) {
  html[data-uov-map-look] :is(#map, #luxuryMap) canvas.maplibregl-canvas,
  .uov-map-look-fan .uov-map-look-choice { transition: none; animation: none; }
}