/*
 * Variant B preview styles. Globe vendor code and assets live separately in
 * assets/globe-dynamic; SameLatitude-specific integration stays in this file
 * and variant-b-globe.js.
 */

.variant-b-globe-wrap {
  position: relative;
  width: 100%;
  height: clamp(480px, 72vw, 700px);
  margin: 34px 0 4px;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  border: 0;
  box-shadow: none;
}

.variant-b-globe-section .variant-b-globe-wrap {
  width: 100%;
  margin-top: 18px;
}

#globe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}

#globe:active { cursor: grabbing; }
#globe canvas { display: block; }

.variant-b-globe-spinner,
.variant-b-globe-fallback {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 24px;
  color: #475569;
  font-size: 0.875rem;
  text-align: center;
  pointer-events: none;
}

.variant-b-globe-spinner.hidden { display: none; }
.variant-b-globe-fallback { display: none; }

.variant-b-pole-marker {
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(255, 255, 255, 0.68);
  font: 400 16px/1 Arial, sans-serif;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.variant-b-selected-pin {
  position: relative;
  width: 36px;
  height: 88px;
  pointer-events: none;
}

.variant-b-selected-pin__shape {
  position: absolute;
  left: 50%;
  top: 11px;
  width: 27px;
  height: 27px;
  border: 2px solid #fff;
  border-radius: 50% 50% 50% 0;
  background: var(--primary);
  box-shadow:
    0 3px 12px rgba(15, 23, 42, 0.65),
    0 0 0 3px rgba(215, 45, 70, 0.2);
  transform: translateX(-50%) rotate(-45deg);
}

.variant-b-selected-pin__shape span {
  position: absolute;
  width: 7px;
  height: 7px;
  top: 8px;
  left: 8px;
  border-radius: 50%;
  background: #fff;
}

@media (max-width: 640px) {
  .variant-b-globe-wrap,
  .variant-b-globe-section .variant-b-globe-wrap {
    width: 100%;
    height: min(112vw, 540px);
    margin-left: 0;
    transform: none;
    border-radius: 0;
  }

  .variant-b-globe-section .globe-limit-note {
    width: 100%;
    max-width: none;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .variant-b-globe-wrap { scroll-behavior: auto; }
}