/* ============================================================================
   sections/markets.css — Real (equirectangular) golden world map
   ----------------------------------------------------------------------------
   Map markup is in sections/markets.html (viewBox 0 0 360 180, degree-space).
   assets/js/markets-map.js injects the routes + pins and toggles .is-drawn on
   the <svg> to animate the trade-route arcs from the Dubai hub.
   ========================================================================== */

.markets { position: relative; }
.markets .map-wrap {
  position: relative; margin-top: var(--space-5);
  max-width: 1040px; margin-inline: auto;
  padding: clamp(.75rem, 2.5vw, 1.75rem);
  border: 3.5px solid var(--line); border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(201,162,75,.06), transparent 60%),
    linear-gradient(180deg, rgba(8,41,30,.5), rgba(8,41,30,.2));
  box-shadow: var(--glow-gold);
}
.markets svg.world { width: 100%; height: auto; display: block; }

/* Lat/long graticule — barely-there gold grid. */
.markets .graticule path { fill: none; stroke: var(--gold-500); stroke-width: .25; opacity: .14; }

/* Landmasses — faint gold fill, gold coastline. */
.markets .land path {
  fill: rgba(201,162,75,.10);
  stroke: var(--gold-500); stroke-width: .5; stroke-linejoin: round;
  opacity: .85;
}

/* Trade-route arcs draw in via stroke-dashoffset (set inline by JS). */
.markets .route {
  fill: none; stroke: var(--gold-300); stroke-width: .7; opacity: .9;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.8s var(--ease);
}
.markets svg.is-drawn .route { stroke-dashoffset: 0 !important; }

/* Pins — layered glow / halo / core dot. */
.markets .pin-glow { fill: var(--gold-500); opacity: .18; animation: pin-pulse 2.6s ease-in-out infinite; }
.markets .pin-halo { fill: var(--gold-300); opacity: .35; }
.markets .pin { fill: var(--gold-300); cursor: pointer; transition: fill var(--dur-fast) var(--ease); }
.markets .pin:hover { fill: var(--saffron); }
.markets .pin-group.is-hub .pin { fill: #fff; }
.markets .pin-group.is-hub .pin-glow { fill: var(--gold-300); opacity: .28; }

@keyframes pin-pulse { 0%,100% { opacity: .10; } 50% { opacity: .30; } }

/* Fallback / accessible legend of markets under the map. */
.market-legend { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: var(--space-5); }
.market-legend li { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-small); color: var(--text-muted-on-dark); }
.market-legend .flag { font-size: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .markets .route { stroke-dashoffset: 0; transition: none; }
  .markets .pin-glow { animation: none; }
}

/* ---- "See all markets" chip/button + modal (when > 10 countries) ------ */
.see-all-markets {
  cursor: pointer; background: transparent; color: var(--gold-300);
  border: 1px dashed var(--gold-500); font: inherit; font-size: var(--fs-small);
  letter-spacing: .02em; border-radius: 999px; padding: .28rem .8rem;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.market-legend li .see-all-markets { padding: .1rem .55rem; }
.see-all-markets:hover { background: var(--gold-metallic); color: var(--green-900); border-style: solid; }

.markets-modal {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  display: grid; place-items: center; padding: var(--gutter);
  background: rgba(8,41,30,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.markets-modal.is-open { opacity: 1; visibility: visible; }
.markets-modal .mm-panel {
  position: relative; width: min(560px, 100%); max-height: 82vh; overflow: auto;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: linear-gradient(180deg, var(--green-800), var(--green-900));
  border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift);
  transform: translateY(16px) scale(.98); transition: transform var(--dur) var(--ease);
}
.markets-modal.is-open .mm-panel { transform: none; }
.markets-modal h3 { color: var(--cream-100); font-size: 1.6rem; margin: .25rem 0 1.1rem; }
.markets-modal .mm-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem 1rem;
}
.markets-modal .mm-list li { display: inline-flex; align-items: center; gap: .5rem; color: var(--cream-100); font-size: .95rem; }
.markets-modal .mm-list .flag { font-size: 1.15rem; }
.markets-modal .mm-close {
  position: absolute; top: .75rem; right: .75rem; width: 40px; height: 40px;
  display: grid; place-items: center; border-radius: 50%; font-size: 1.4rem;
  background: rgba(8,41,30,.6); border: 1px solid var(--line); color: var(--gold-300); cursor: pointer;
}