/* --------------------------------------------------------------
   Interactive globe
   Colours are exposed as custom properties on .uk-globe so they can
   be overridden per-instance or from the theme without touching JS.
   -------------------------------------------------------------- */

   .uk-globe {
    --globe-ocean:       #082744;
    --globe-mid:         #0B2C4C;
    --globe-land:        #245780;
    --globe-highlight:   #143758;
    --globe-rim:         #2B6291;
    --globe-shadow:      rgba(125, 175, 225, 0.12);
    --globe-marker:      #DB7931;
    --globe-marker-core: #FFE6D2;
    --globe-tip-bg:      #0A2B4D;
    --globe-tip-fg:      #708ea9;
  
    position: relative;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    touch-action: none;
  }
  
  .uk-globe__canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
    outline: none;
    border-radius: 50%;
  }
  
  .uk-globe__canvas:active {
    cursor: grabbing;
  }
  
  .uk-globe__canvas:focus-visible {
    box-shadow: 0 0 0 2px rgba(74, 144, 200, 0.65);
  }
  
  .uk-globe__tip {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -160%);
    padding: 6px 12px;
    border-radius: 100px;
    background: var(--globe-tip-bg);
    color: var(--globe-tip-fg);
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.16s ease;
  }
  
  .uk-globe__tip[data-on] {
    opacity: 1;
  }
  
  .uk-globe__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }