/* ==========================================================================
   Ikabin — "find your country" interactive world map
   Pairs with /assets/js/worldmap.js. No dependencies.

   Usage:
     <div class="worldmap" data-worldmap></div>                 dark sections
     <div class="worldmap" data-worldmap data-worldmap-light></div>  light

   Theme hooks (set on the container or an ancestor):
     --wm-land      non-market country fill
     --wm-border    country border stroke
     --wm-market    market country fill
     --wm-home      UAE fill + home-base marker
     --wm-hover     hover/focus fill for market countries
   ========================================================================== */

[data-worldmap] {
  /* Dark-section defaults: muted blue-grey land, warm amber markets */
  --wm-land: rgba(127, 148, 173, 0.28);
  --wm-border: rgba(170, 190, 212, 0.38);
  --wm-market: rgba(240, 168, 104, 0.52);
  --wm-home: #ffc98a;
  --wm-hover: #f0a868;

  position: relative;
  width: 100%;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  -webkit-tap-highlight-color: transparent;
}

[data-worldmap].is-ready {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-worldmap] {
    transition: opacity 0.4s ease;
    transform: none;
  }
}

/* Light-section variant */
[data-worldmap][data-worldmap-light] {
  --wm-land: rgba(93, 107, 126, 0.20);
  --wm-border: rgba(93, 107, 126, 0.42);
  --wm-market: rgba(217, 123, 47, 0.42);
  --wm-home: #c2601c;
  --wm-hover: #d97b2f;
}

/* --------------------------------------------------------------------------
   Map + pan wrapper — svg scales with its container; on small screens the
   wrapper scrolls horizontally so countries stay tappable.
   -------------------------------------------------------------------------- */

.wm-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.wm-svg {
  display: block;
  width: 100%;
  height: auto;
  outline: none;
}

@media (max-width: 720px) {
  .wm-svg {
    min-width: 720px;
  }
}

/* --------------------------------------------------------------------------
   Countries
   -------------------------------------------------------------------------- */

.wm-country {
  fill: var(--wm-land);
  stroke: var(--wm-border);
  stroke-width: 0.5px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: fill 0.22s ease;
}

a.wm-link {
  cursor: pointer;
  outline: none;
}

a.wm-link:hover .wm-country,
a.wm-link:focus-visible .wm-country {
  fill: color-mix(in srgb, var(--wm-land) 72%, var(--wm-hover));
}

.wm-country.wm-market {
  fill: var(--wm-market);
}

a.wm-link:hover .wm-country.wm-market,
a.wm-link:focus-visible .wm-country.wm-market {
  fill: var(--wm-hover);
}

.wm-country.wm-home {
  fill: var(--wm-home);
}

a.wm-link:hover .wm-country.wm-home,
a.wm-link:focus-visible .wm-country.wm-home {
  fill: var(--wm-hover);
}

a.wm-link:focus-visible .wm-country {
  stroke: var(--wm-hover);
  stroke-width: 1.4px;
}

/* Dot markers for tiny markets (Singapore, Hong Kong, Bahrain, Luxembourg…) */
.wm-dot {
  fill: var(--wm-market);
  stroke: var(--wm-border);
  stroke-width: 0.6px;
  vector-effect: non-scaling-stroke;
  transition: fill 0.22s ease;
}

a.wm-link:hover .wm-dot,
a.wm-link:focus-visible .wm-dot {
  fill: var(--wm-hover);
}

/* --------------------------------------------------------------------------
   Pulsing home-base marker (UAE)
   -------------------------------------------------------------------------- */

.wm-homebase {
  pointer-events: none;
}

.wm-homebase .wm-core {
  fill: var(--wm-home);
}

.wm-homebase .wm-pulse {
  fill: none;
  stroke: var(--wm-home);
  stroke-width: 1px;
  transform-box: fill-box;
  transform-origin: center;
  animation: wm-pulse 2.4s cubic-bezier(0.25, 0.6, 0.4, 1) infinite;
}

@keyframes wm-pulse {
  0%   { transform: scale(0.5); opacity: 0.9; }
  70%  { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .wm-homebase .wm-pulse {
    animation: none;
    transform: scale(1.3);
    opacity: 0.6;
  }
}

/* --------------------------------------------------------------------------
   Tooltip — same dark-pill language as the globe tooltip
   -------------------------------------------------------------------------- */

.wm-tooltip {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 16px));
  background: rgba(16, 18, 22, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  padding: 8px 13px 9px;
  white-space: nowrap;
  text-align: left;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s ease;
  font-family: inherit;
}

.wm-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
}

.wm-tooltip.is-below {
  transform: translate(-50%, 20px);
}

.wm-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 10px;
  height: 10px;
  transform: translateX(-50%) rotate(45deg);
  background: rgba(16, 18, 22, 0.92);
  border-right: 1px solid rgba(255, 255, 255, 0.09);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.wm-tooltip.is-below::after {
  bottom: auto;
  top: -5px;
  transform: translateX(-50%) rotate(225deg);
}

.wm-tooltip-name {
  display: block;
  color: #f5f6f7;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.wm-tooltip-link {
  display: block;
  margin-top: 1px;
  color: var(--wm-hover, #f0a868);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.35;
}

.wm-tooltip.is-home .wm-tooltip-link {
  color: var(--wm-home, #ffc98a);
}

.wm-tooltip-sub {
  display: block;
  margin-top: 1px;
  color: rgba(245, 246, 247, 0.62);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.35;
}

.wm-tooltip-sub:empty {
  display: none;
}