/* The micro engine uses one pin colour. Keep kit aliases local to each globe. */
.visitor-globe {
  --globe-size: 96px;
  --globe-pin-light: var(--colour-berry, #5b1f33);
  --globe-pin-dark: var(--colour-paper, #fff8ee);
  --accent: var(--colour-olive, #4c5229);
  --globe-accent: var(--accent);
  --globe-dot: var(--colour-olive, #4c5229);
  --globe-line: var(--colour-olive, #4c5229);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  box-sizing: border-box;
}
.visitor-globe .visitor-globe-disc {
  position: relative;
  flex: none;
  width: var(--globe-size);
  height: var(--globe-size);
  border-radius: 50%;
  opacity: 0;
  transition: opacity var(--motion-reveal, 300ms) ease;
}
.visitor-globe .visitor-globe-disc::after {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid currentColor;
  color: var(--globe-dot);
  opacity: .18;
  border-radius: 50%;
  pointer-events: none;
}
.visitor-globe[data-state="ready"] .visitor-globe-disc,
.visitor-globe[data-state="empty"] .visitor-globe-disc { opacity: 1; }
.visitor-globe .visitor-globe-disc canvas { display: block; width: 100%; height: 100%; }
.visitor-globe .visitor-globe-line {
  margin: 0;
  min-width: 0;
  max-width: 100%;
  font: 400 12px/1.5 var(--font-body, Arial, sans-serif);
  letter-spacing: 0;
  color: var(--globe-line);
  text-align: center;
  overflow-wrap: anywhere;
  opacity: 0;
}
.visitor-globe-line.is-still { opacity: 1; }
.visitor-globe-line.is-cycling { animation: visitor-globe-pulse 6s ease-in-out infinite; }
.visitor-globe-flag { margin-right: .45em; letter-spacing: 0; }
.booking-globe.visitor-globe {
  --globe-size: min(66.6667cqw, 360px);
  align-items: flex-start;
  justify-content: flex-start;
}
.booking-globe .visitor-globe-line { height: 36px; overflow: hidden; text-align: left; }
.footer-globe.visitor-globe {
  --globe-size: 76px;
  --accent: var(--colour-paper, #fff8ee);
  --globe-dot: var(--colour-wood, #ac8150);
  --globe-line: var(--colour-paper, #fff8ee);
  flex-direction: row;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  max-width: 360px;
  height: 80px;
}
.footer-globe .visitor-globe-line { text-align: left; }
@keyframes visitor-globe-pulse { 0%, 100% { opacity: 0; } 28%, 72% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .visitor-globe .visitor-globe-disc { transition: none; }
  .visitor-globe-line.is-cycling { animation: none; opacity: 1; }
}