/* Глобус локаций (/static/js/loc-globe.js) — /order и /locations. Цвета сферы canvas читает
   из --globe-* при перерисовке и при смене темы. */
.loc-globe{
  --globe-ocean:#16191e;--globe-ocean-hi:#232832;--globe-land:#323843;--globe-border:rgba(14,16,20,.85);
  --globe-grat:rgba(255,255,255,.055);--globe-rim:rgba(255,255,255,.14);--globe-glow:rgba(212,168,83,.13);
  position:relative;overflow:hidden;border-radius:20px;touch-action:pan-y;
  user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;cursor:grab}
[data-theme="light"] .loc-globe{
  --globe-ocean:#dfe5ee;--globe-ocean-hi:#f4f7fb;--globe-land:#c3cbd7;--globe-border:rgba(255,255,255,.95);
  --globe-grat:rgba(30,40,60,.07);--globe-rim:rgba(30,40,60,.16);--globe-glow:rgba(110,130,160,.16)}
.loc-globe.is-dragging{cursor:grabbing}
.loc-globe-canvas{display:block;width:100%}
.loc-globe-markers{position:absolute;inset:0;pointer-events:none}

/* точки: позицию задаёт JS (transform), здесь только вид */
.loc-globe .loc-marker{position:absolute;left:0;top:0;width:0;height:0;pointer-events:auto;cursor:pointer;z-index:1}
.loc-globe .loc-marker.back{pointer-events:none}
.loc-globe .loc-marker:hover{z-index:3}
.loc-globe .loc-marker.selected{z-index:2}
.loc-globe .loc-marker::before{content:"";position:absolute;left:-11px;top:-11px;width:22px;height:22px;border-radius:50%}
.loc-globe .loc-marker-dot{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;
  background:#d4a853;box-shadow:0 0 0 2px rgba(14,16,20,.85),0 0 10px rgba(212,168,83,.55);
  transition:transform .18s ease-out,background-color .18s ease-out}
[data-theme="light"] .loc-globe .loc-marker-dot{box-shadow:0 0 0 2px #fff,0 0 8px rgba(212,168,83,.5)}
.loc-globe .loc-marker:hover .loc-marker-dot{transform:scale(1.35)}
.loc-globe .loc-marker.selected .loc-marker-dot{background:#22c55e;transform:scale(1.3);
  box-shadow:0 0 0 2px rgba(14,16,20,.85),0 0 12px rgba(34,197,94,.75)}
[data-theme="light"] .loc-globe .loc-marker.selected .loc-marker-dot{box-shadow:0 0 0 2px #fff,0 0 10px rgba(34,197,94,.6)}
.loc-globe .loc-marker-wave{position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;
  border:2px solid #22c55e;opacity:0;pointer-events:none}
.loc-globe .loc-marker.selected .loc-marker-wave{animation:locGlobeWave 2.2s ease-out infinite}
@keyframes locGlobeWave{0%{transform:scale(1);opacity:.55}100%{transform:scale(3.6);opacity:0}}
.loc-globe .loc-marker.full{cursor:not-allowed}
.loc-globe .loc-marker.full .loc-marker-dot{background:#71717a;box-shadow:0 0 0 2px rgba(14,16,20,.85)}

.loc-globe .loc-marker-label{position:absolute;left:0;bottom:12px;transform:translateX(-50%);padding:3px 8px;border-radius:8px;
  background:rgba(12,13,16,.86);color:#f4f4f5;font-size:12px;font-weight:600;line-height:1.3;white-space:nowrap;
  pointer-events:none;opacity:0;transition:opacity .15s ease-out}
[data-theme="light"] .loc-globe .loc-marker-label{background:rgba(255,255,255,.94);color:#18181b;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.loc-globe .loc-marker:hover .loc-marker-label,
.loc-globe .loc-marker.selected .loc-marker-label,
.loc-globe .labels-all .loc-marker-label{opacity:1}
.loc-globe .loc-marker.selected .loc-marker-label{color:#4ade80}
/* совпавшие точки (Нью-Йорк и Джерси-Сити): подпись западной — слева, восточной — справа */
.loc-globe .loc-marker.fan-w .loc-marker-label{left:auto;right:10px;bottom:auto;top:-10px;transform:none}
.loc-globe .loc-marker.fan-e .loc-marker-label{left:10px;bottom:auto;top:-10px;transform:none}
[data-theme="light"] .loc-globe .loc-marker.selected .loc-marker-label{color:#15803d}

/* кнопки масштаба */
.loc-globe-ui{position:absolute;right:12px;bottom:12px;display:flex;flex-direction:column;gap:6px;z-index:5}
.loc-globe-ui button{width:34px;height:34px;display:grid;place-items:center;padding:0;border:0;border-radius:10px;
  background:rgba(12,13,16,.72);color:#f4f4f5;cursor:pointer;transition:background-color .15s ease-out}
.loc-globe-ui button:hover{background:rgba(12,13,16,.94)}
.loc-globe-ui button:focus-visible{outline:2px solid #d4a853;outline-offset:2px}
.loc-globe-ui svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
[data-theme="light"] .loc-globe-ui button{background:rgba(255,255,255,.9);color:#18181b;box-shadow:0 1px 4px rgba(0,0,0,.14)}
[data-theme="light"] .loc-globe-ui button:hover{background:#fff}

/* подсказка «как крутить» */
.loc-globe-hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);width:max-content;max-width:calc(100% - 110px);padding:6px 12px;
  border-radius:999px;background:rgba(12,13,16,.82);color:#e4e4e7;font-size:12.5px;line-height:1.35;text-align:center;
  pointer-events:none;opacity:0;transition:opacity .25s ease-out;z-index:4}
[data-theme="light"] .loc-globe-hint{background:rgba(255,255,255,.94);color:#27272a;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.loc-globe-hint.show{opacity:1}

@media (prefers-reduced-motion:reduce){
  .loc-globe .loc-marker.selected .loc-marker-wave{animation:none}
}
@media (max-width:639px){
  .loc-globe-ui{right:8px;bottom:8px}
  .loc-globe-ui button{width:32px;height:32px}
  .loc-globe-hint{bottom:8px;font-size:12px}
}