.where { background: radial-gradient(ellipse at 36% 38%, #263b44 0, #14242f 43%, #0a141f 83%); padding: calc(var(--safe-top) + 64px) 0 calc(var(--safe-bottom) + 24px); display: flex; flex-direction: column; }
.where-heading { padding: 0 var(--pad); position: relative; z-index: 2; }
.where-heading .title { font-size: clamp(34px, 9.6vw, 42px); max-width: 360px; line-height: 1.07; margin: 0; color: #f1eadb; }
.where-heading .sub { font-family: var(--display); font-style: italic; font-size: 17px; margin-top: 12px; color: #c9b995; }
.where-map { flex: 1; min-height: 260px; position: relative; width: 100%; }
.where-map canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; outline-offset: -7px; }
.where-map canvas:active { cursor: grabbing; }
.where-map canvas:focus-visible { outline: 1px solid #ddcba6; border-radius: 12px; }
.where-loading { position: absolute; top: 45%; left: 25px; right: 25px; text-align: center; line-height: 1.8; }
.where-zoom { position: absolute; right: var(--pad); bottom: 8px; display: flex; gap: 0; padding: 1px; border: 1px solid #ddcba62b; border-radius: 25px; background: #0a1822a8; box-shadow: 0 4px 16px #020a1220; }
.where-zoom::after { content: ''; position: absolute; width: 1px; height: 16px; left: 50%; top: 15px; background: #ddcba625; pointer-events: none; }
.where-zoom-btn { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: #e4d6b7; font: 22px var(--display); }
.where-zoom-btn:disabled { opacity: .35; }
.where-zoom-btn:focus-visible { outline: 1px solid #ddcba6; outline-offset: -3px; }
.where-footer { padding: 0 var(--pad); text-align: center; z-index: 2; }
.where-country { font-family: var(--display); font-size: 25px; line-height: 1.2; margin: 6px 0; color: var(--paper); }
.where-move { color: #d1d4ca; font-size: 13px; line-height: 1.5; margin: 14px 0 18px; }
.where-footer .btn { width: 100%; border-radius: 3px; background: #eee6d4; color: #172630; box-shadow: inset 0 0 0 1px #f8f2e4; }
.where-footer .btn:disabled { opacity: .4; }
.where-pin { position: absolute; pointer-events: none; width: 0; height: 0; z-index: 1; }
.where-pin[hidden], .where [hidden] { display: none !important; }
.pin-dot { display: block; position: absolute; left: -7px; top: -18px; width: 14px; height: 18px; background: #cbb382; border: 2px solid #fff1d0; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 3px 9px #020a1680; }
.pin-ring { position: absolute; left: -14px; top: -7px; width: 28px; height: 14px; border: 1px solid #e5cfa0; border-radius: 50%; opacity: calc(.6 - var(--pulse, 0) * .4); transform: scale(calc(1 + var(--pulse, 0) * .7)); }
.where-skip { display: block; width: 100%; min-height: 44px; margin: 4px auto 0; color: #d4c8ad; }
@media (max-height: 730px) { .where { padding-top: calc(var(--safe-top) + 48px); padding-bottom: calc(var(--safe-bottom) + 12px); } .where-heading .title { font-size: 32px; } .where-map { min-height: 180px; } .where-heading .sub { margin-top: 8px; font-size: 15px; } .where-move { margin: 8px 0 12px; } }