/* ════════════════════════════════════════════════════════════════════
   MARKET PRESENCE — Premium Interactive Logistics Command Center
   Isolated component covering everything except the floating info
   console (that's market-presence-panel.css). Owns: section ambient
   background + header, tab switcher, both map viewports (World +
   India — same SVGs, same real geographic path data, only re-themed
   from dark dashboard to white/orange glass), premium beacons,
   animated glowing trade/logistics routes with traveling particles,
   hover popovers, legend, and the live-metrics row.

   World and India share every class below 1:1 — one visual system,
   never two. Never touches the `d="…"` geometry of .country-shape /
   .state-shape, only their fill/stroke via CSS + <defs> gradients.

   Motion contract: only transform / opacity / filter are animated on
   anything that runs continuously. Width, height, margin, left and
   top are never transitioned.
   ════════════════════════════════════════════════════════════════════ */

/* ── ambient section background (same recipe as Group / Trusted By / Awards).
   top/bottom are deliberately asymmetric: the top edge faces Our Process,
   which sits inside its own `.section` wrapper with real padding between
   the two panels, so it can bleed a full -32px (stepped down responsively
   below). The bottom edge faces Trusted By directly with no divider or
   padding between the two section boxes — the same "self-contained
   sections butted together" gap as .tby-mesh/.awx-bg — so it stays a
   small flat -8px at every breakpoint instead. ── */
.mp-mesh {
  position: absolute;
  top: -32px;
  right: -2%;
  bottom: -8px;
  left: -2%;
  z-index: 0;
  pointer-events: none;
  border-radius: 2rem;
  background:
    radial-gradient(ellipse 55% 45% at 84% 16%, rgba(255, 145, 40, .06), transparent 60%),
    radial-gradient(ellipse 55% 50% at 14% 22%, rgba(241, 243, 246, .85), transparent 60%),
    radial-gradient(ellipse 60% 55% at 50% 100%, rgba(228, 231, 236, .5), transparent 65%),
    linear-gradient(180deg, #FCFCFD 0%, #F5F6F8 100%);
}

.mp-blueprint {
  position: absolute;
  top: -32px;
  right: -2%;
  bottom: -8px;
  left: -2%;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgba(15, 23, 42, .5) 0, rgba(15, 23, 42, .5) 1px, transparent 1px, transparent 42px),
    repeating-linear-gradient(0deg, rgba(15, 23, 42, .5) 0, rgba(15, 23, 42, .5) 1px, transparent 1px, transparent 42px);
  opacity: .03;
  mask-image: radial-gradient(ellipse 75% 65% at 50% 35%, #000 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 35%, #000 30%, transparent 90%);
  animation: mpBlueprintDrift 50s ease-in-out infinite;
}

@keyframes mpBlueprintDrift {

  0%,
  100% {
    background-position: 0 0, 0 0;
  }

  50% {
    background-position: 8px 6px, 8px 6px;
  }
}

.mp-dots {
  position: absolute;
  top: -32px;
  right: -2%;
  bottom: -8px;
  left: -2%;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(15, 23, 42, .06) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 55%, #000 35%, transparent 95%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 55%, #000 35%, transparent 95%);
}

.mp-glow {
  position: absolute;
  left: 50%;
  top: 55%;
  width: 65%;
  height: 55%;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255, 106, 31, .07), transparent 65%);
  filter: blur(46px);
}

.mp-noise {
  position: absolute;
  top: -32px;
  right: -2%;
  bottom: -8px;
  left: -2%;
  z-index: 0;
  pointer-events: none;
  opacity: .02;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── header: animated-underline kicker, matching Group/Trusted-By/Awards ── */
.mp-head {
  position: relative;
  z-index: 1;
  margin-bottom: 1.8rem;
}

.mp-kicker-glow {
  display: block;
  width: 56px;
  height: 2px;
  margin: -.7rem auto 1.2rem;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 12px 1px rgba(255, 106, 31, .55);
  border-radius: 2px;
  animation: mpUnderlinePulse 2.6s ease-in-out infinite;
}

@keyframes mpUnderlinePulse {

  0%,
  100% {
    opacity: .65;
    transform: scaleX(.82);
  }

  50% {
    opacity: 1;
    transform: scaleX(1);
  }
}

/* ── tab switcher ── */
.map-tab-controls {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.map-tab-btn {
  background: rgba(255, 255, 255, .6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid var(--border);
  color: var(--ink-soft);
  padding: 0.65rem 1.4rem;
  border-radius: 30px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: .03em;
  cursor: pointer;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.map-tab-btn.active {
  background: linear-gradient(135deg, var(--accent-hot), var(--accent));
  color: #FFF;
  border-color: transparent;
  box-shadow: 0 8px 22px rgba(255, 106, 31, .35);
  transform: translateY(-2px);
}

@media (hover: hover) and (pointer: fine) {
  .map-tab-btn:hover {
    background: linear-gradient(135deg, var(--accent-hot), var(--accent));
    color: #FFF;
    border-color: transparent;
    box-shadow: 0 8px 22px rgba(255, 106, 31, .35);
    transform: translateY(-2px);
  }
}

/* ── outer card ──
   .market-full-wrapper already carries class="panel" in the markup, so
   the white glass background/border/radius/shadow/hover-lift all come
   from styles.css .panel — only layout properties belong here.
   The 3D cursor-tilt part of .panel:hover is dampened below: at the
   site-wide panel's full ±3deg, a card this large swung very visibly near
   the corners, so this card gets a wider perspective and ~35% of the
   rotation — enough to still feel alive under the cursor without the
   disorienting swing. */
.market-full-wrapper {
  position: relative;
  z-index: 1;
  padding: 2rem 1.5rem;
  overflow: visible;
}
.market-full-wrapper.panel:hover {
  transform: perspective(1800px) rotateX(calc(var(--rx, 0deg) * .35)) rotateY(calc(var(--ry, 0deg) * .35)) translateY(-8px);
}

.market-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(280px,440px);
  gap: 1.5rem;
  align-items: start;
}

/* International tab has no side console anymore (see .world-bottom-grid
   below) — the map column takes the full card width instead of sharing it
   with a 440px sidebar. Toggled by the tab click handlers in the shared
   inline script. Domestic (India) tab is untouched. */
.market-dashboard-grid.mp-tab-world {
  grid-template-columns: 1fr;
}

@media (max-width: 992px) {
  .market-dashboard-grid {
    grid-template-columns: 1fr;
  }
}

/* ── international bottom cards: country-name chips + HQ record ──
   replaces the old hover-driven vendor-details sidebar (#vendorLiveCard).
   Reuses the .mpp premium-card look from market-presence-panel.css so the
   two cards read as the same design language as the India drill-down panel. */
.world-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
  align-items: start;
}

@media (max-width: 768px) {
  .world-bottom-grid {
    grid-template-columns: 1fr;
  }
}

.world-bottom-card.mpp {
  max-width: none;
  margin: 0;
}

.world-country-chips {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem .75rem;
}

@media (max-width: 480px) {
  .world-country-chips {
    grid-template-columns: 1fr;
  }
}


/* ── map viewport card ── */
.world-map-container,
.india-map-container {
  background: linear-gradient(160deg, rgba(255, 255, 255, .85) 0%, rgba(237, 240, 243, .55) 100%);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem;
  position: relative;
  overflow: visible;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(20, 22, 28, .04);
}

.map-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.map-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #FFF4EC;
  color: var(--accent-ink);
  border: 1px solid var(--accent);
  padding: 0.35rem 0.85rem;
  border-radius: 30px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--accent);
  animation: pulseGlow 1.8s infinite;
}

@keyframes pulseGlow {
  0% {
    transform: scale(0.9);
    opacity: 0.7;
  }

  50% {
    transform: scale(1.3);
    opacity: 1;
  }

  100% {
    transform: scale(0.9);
    opacity: 0.7;
  }
}

.map-subtitle {
  font-size: 0.8rem;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.map-viewport-box {
  position: relative;
  width: 100%;
  aspect-ratio: 700 / 800;
  max-height: 620px;
  margin: 0 auto;
  user-select: none;
  overflow: visible;
}

.map-viewport-box.world-box {
  aspect-ratio: 1000 / 500;
  max-height: 460px;
  /* keeps the 2:1 aspect ratio intact once the international tab drops the
     440px sidebar and this box can grow past ~920px wide — past that point
     max-height would otherwise clamp the height while width kept growing,
     stretching the map instead of just enlarging it */
  max-width: 920px;
}

.india-svg,
.world-svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 20px 45px rgba(20, 22, 28, .12)) drop-shadow(0 0 40px rgba(255, 106, 31, .08));
}

/* India domestic map: plain black-outline coloring-map look (kept apart
   from the world map's warmer glow so state highlighting still reads
   clearly) — no drop-shadow, so it sits flat like a printed map */
.india-svg {
  filter: none;
}

/* faint blueprint reference grid inside the map itself (raw stroke= attribute
   on the <g> is invisible on a light map — this class rule wins the cascade) */
.mp-graticule {
  stroke: rgba(15, 23, 42, .08) !important;
}

/* Real, geographically-accurate country / state silhouettes — `d` geometry
   untouched, only fill/stroke restyled */
.country-shape {
  fill: url(#worldGrad);
  stroke: #FF6A1F;
  stroke-width: 0.6;
  stroke-opacity: 0.55;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill 0.25s ease, stroke-opacity 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
  .country-shape:hover {
    fill: #FFE3C4;
    stroke-opacity: 0.9;
  }
}

.country-shape.india-hi {
  fill: url(#worldGradIndia);
  stroke: var(--accent-hot);
  stroke-width: 1.4;
  stroke-opacity: 0.95;
}

@media (hover: hover) and (pointer: fine) {
  .country-shape.india-hi:hover {
    fill: url(#worldGradIndia);
  }
}

.state-shape {
  fill: url(#indiaGrad);
  stroke: var(--accent);
  stroke-width: 1;
  stroke-opacity: 0.85;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill 0.3s ease, stroke 0.3s ease, stroke-opacity 0.3s ease, stroke-width 0.3s ease, opacity 0.35s ease, filter 0.35s ease;
}

@media (hover: hover) and (pointer: fine) {
  .state-shape:hover {
    fill: #FFE3C4;
    stroke: var(--accent-hot);
    stroke-opacity: 0.95;
  }
}

/* selection state machine: while any state is hovered/focused/clicked,
   dim the rest so the active region reads clearly against the map */
.states-group.has-active .state-shape {
  opacity: .5;
}

.states-group.has-active .state-shape.state-active {
  opacity: 1;
  fill: #FFE3C4;
  stroke: var(--accent-hot);
  stroke-width: 1.8;
  stroke-opacity: 1;
  filter: drop-shadow(0 0 8px rgba(255, 106, 31, .5));
}

/* ── logistics routes: soft glowing dashed flow + traveling light particles ── */
.mp-route {
  fill: none;
  stroke: rgba(255, 106, 31, .38);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-dasharray: 3 9;
  animation: mpRouteFlow 14s linear infinite;
  transition: stroke .3s ease, stroke-width .3s ease, filter .3s ease;
}

@keyframes mpRouteFlow {
  to {
    stroke-dashoffset: -240;
  }
}

.mp-route.is-active-route {
  stroke: var(--accent);
  stroke-width: 2.1;
  filter: drop-shadow(0 0 5px rgba(255, 106, 31, .55));
}

.mp-route-particles {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .mp-route-particles {
    display: block;
  }
}

.mp-route-particle {
  fill: var(--accent-hot);
  filter: drop-shadow(0 0 3px rgba(255, 178, 75, .9));
  opacity: .85;
  transition: fill .3s ease, opacity .3s ease;
}

.mp-route-particle.is-active-route {
  fill: #FFF;
  opacity: 1;
}

/* ── premium beacon marker (replaces a plain dot) ──
   layers: ambient glow (::before) + rotating halo (::after, static ring
   until entrance) + outer sonar ring (.pin-pulse) + second staggered ring
   (.pin-ripple) + glowing core (.pin-core) */
.map-pins-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.map-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: pointer;
  z-index: 20;
  transition: opacity .3s ease, filter .3s ease;
  /* GPU hint: the beacon inside keeps animating (pulse/ripple/breathe)
     continuously — promoting the pin to its own compositor layer keeps
     that animation isolated so it never forces a repaint of the map/SVG
     underneath it (rule 5 / rule 2 "excessive repaint regions") */
  backface-visibility: hidden;
}

.map-pin.active,
.map-pin.preview,
.map-pin:focus-visible {
  z-index: 999 !important;
}

@media (hover: hover) and (pointer: fine) {
  .map-pin:hover {
    z-index: 999 !important;
  }
}

.map-pin:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 50%;
}

/* CSS fallback for the hover/active/preview scale-up — JS drives the same
   effect on .pin-beacon via GSAP with a springier ease when available;
   GSAP's inline style simply takes precedence over this rule when present. */
.map-pin.active .pin-beacon,
.map-pin.preview .pin-beacon,
.map-pin:focus-visible .pin-beacon {
  transform: scale(1.25);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (hover: hover) and (pointer: fine) {
  .map-pin:hover .pin-beacon {
    transform: scale(1.25);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}

/* search: fade out non-matching markers instead of removing them, so the
   layout never reflows and the transition stays smooth */
.map-pin.search-dim {
  opacity: .22;
  filter: grayscale(.6);
}

.pin-beacon {
  width: 24px;
  height: 24px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* this is the element JS scales on hover/active (scaleBeacon()) — hinting
     the browser up front avoids the first-frame paint jump that otherwise
     reads as a flicker when a fresh compositor layer is created mid-hover */
  will-change: transform;
}

/* the visible beacon graphic stays 24px (matches the map's visual scale),
   but the tappable area on touch devices needs to meet the ~32px minimum —
   grow .map-pin's own box rather than resizing the beacon, so nearby pins
   on crowded clusters (e.g. North India states) don't visually overlap. */
.map-pin{
  min-width: 32px;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pin-beacon::before {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 106, 31, .45), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

.pin-beacon::after {
  content: '';
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 106, 31, .4);
  animation: pinHaloSpin 7s linear infinite;
  pointer-events: none;
}

@keyframes pinHaloSpin {
  to {
    transform: rotate(360deg);
  }
}

.pin-pulse,
.pin-ripple {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0.85;
  animation: pinWave 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
  animation-delay: var(--pulse-jitter, 0s);
  /* runs forever, independent of hover — its own layer keeps this endless
     scale/opacity loop from repainting siblings on every frame */
  will-change: transform, opacity;
}

.pin-ripple {
  border-color: var(--accent-hot);
  animation-delay: calc(var(--pulse-jitter, 0s) + 1s);
}

@keyframes pinWave {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }

  100% {
    transform: scale(2.0);
    opacity: 0;
  }
}

.pin-core {
  width: 15px;
  height: 15px;
  background: radial-gradient(circle, #FFF 0%, #FFC24B 40%, #FF6A1F 100%);
  border: 2.5px solid #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(255, 106, 31, 0.85), 0 2px 6px rgba(20, 22, 28, .25);
  transition: background 0.3s ease, box-shadow 0.3s ease;
  animation: pinBreathe var(--breathe-dur, 3.2s) ease-in-out infinite;
  animation-delay: var(--breathe-delay, 0s);
  will-change: transform;
  backface-visibility: hidden;
}

@keyframes pinBreathe {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }
}

.map-pin.is-hq .pin-core {
  background: radial-gradient(circle, #FFF 0%, #FFE082 50%, #FF6A1F 100%);
  border-color: #FFF;
  box-shadow: 0 0 22px rgba(255, 194, 75, .85), 0 0 35px rgba(255, 106, 31, 0.6), 0 2px 6px rgba(20, 22, 28, .25);
  width: 18px;
  height: 18px;
}

/* clicked/locked marker glows continuously until another is selected */
.map-pin.active .pin-core {
  animation: pinBreathe var(--breathe-dur, 3.2s) ease-in-out infinite, pinActiveGlow 2.2s ease-in-out infinite;
}

@keyframes pinActiveGlow {

  0%,
  100% {
    box-shadow: 0 0 14px rgba(255, 106, 31, .85), 0 2px 6px rgba(20, 22, 28, .25);
  }

  50% {
    box-shadow: 0 0 26px rgba(255, 106, 31, 1), 0 0 42px rgba(255, 106, 31, .55), 0 2px 6px rgba(20, 22, 28, .25);
  }
}

.pin-tag {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: rgba(255, 255, 255, .95);
  border: 1px solid var(--border);
  color: var(--ink);
  padding: 0.15rem 0.55rem;
  border-radius: 8px;
  font-size: 0.68rem;
  font-weight: 700;
  margin-top: 3px;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(20, 22, 28, .12);
  opacity: 0.9;
  transition: opacity 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.map-pin.active .pin-tag,
.map-pin.preview .pin-tag,
.map-pin:focus-visible .pin-tag {
  opacity: 1;
  background: var(--accent);
  color: #FFF;
  border-color: transparent;
  box-shadow: 0 0 12px rgba(255, 106, 31, 0.5);
}

@media (hover: hover) and (pointer: fine) {
  .map-pin:hover .pin-tag {
    opacity: 1;
    background: var(--accent);
    color: #FFF;
    border-color: transparent;
    box-shadow: 0 0 12px rgba(255, 106, 31, 0.5);
  }
}

/* premium floating tooltip — white glass, orange accent border */
.pin-popover {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  /* clamp instead of a flat 270px so pins near the map's edge on narrow
     phones can't push the popover past the (silently clipped) viewport */
  width: clamp(230px, 70vw, 300px);
  max-width: calc(100vw - 2rem);
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(255, 106, 31, 0.5);
  border-radius: 14px;
  padding: 1.1rem;
  box-shadow: 0 18px 45px rgba(20, 22, 28, 0.16), 0 0 25px rgba(255, 106, 31, 0.15);
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
  z-index: 1000;
}

.pin-popover::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 8px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.97) transparent transparent transparent;
  filter: drop-shadow(0 4px 3px rgba(20, 22, 28, .08));
}

.pin-popover.popover-below {
  bottom: auto;
  top: calc(100% + 14px);
  transform: translateX(-50%) translateY(-8px);
}

.pin-popover.popover-below::after {
  top: auto;
  bottom: 100%;
  border-color: transparent transparent rgba(255, 255, 255, 0.97) transparent;
}

.pin-popover.popover-left {
  left: auto;
  right: -15px;
  transform: translateY(8px);
}

.pin-popover.popover-left::after {
  left: auto;
  right: 25px;
  transform: none;
}

.pin-popover.popover-left.popover-below {
  transform: translateY(-8px);
}

.map-pin.active .pin-popover,
.map-pin.preview .pin-popover,
.map-pin:focus-visible .pin-popover {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

@media (hover: hover) and (pointer: fine) {
  .map-pin:hover .pin-popover {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
}

.map-pin:hover .pin-popover.popover-left,
.map-pin.active .pin-popover.popover-left,
.map-pin.preview .pin-popover.popover-left,
.map-pin:focus-visible .pin-popover.popover-left {
  transform: translateY(0);
}

.pop-state {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--accent-ink);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pop-badge-type {
  background: #FFF4EC;
  border: 1px solid rgba(255, 106, 31, 0.4);
  color: var(--accent-ink);
  padding: 0.15rem 0.45rem;
  border-radius: 10px;
  font-size: 0.62rem;
  text-transform: none;
  letter-spacing: normal;
}

.pop-vendor {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 0.6rem;
}

.pop-detail-line {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-bottom: 0.35rem;
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  line-height: 1.4;
}

.pop-detail-line strong {
  color: var(--ink);
}

.pop-detail-icon {
  flex-shrink: 0;
}

.pop-detail-text {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.pop-detail-text .pop-link {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.pop-link {
  color: var(--accent-ink);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

.pop-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* micro-detail logistics glyphs — hover/active-gated only, via .pin-popover's
   own visibility, so they never clutter the default map view */
.pop-icons {
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px solid var(--border);
  font-size: .85rem;
  letter-spacing: .3em;
  opacity: .75;
}

.pop-cta {
  margin-top: .55rem;
  padding-top: .55rem;
  border-top: 1px dashed rgba(255, 106, 31, 0.35);
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--accent-ink);
}

/* ── legend ── */
.map-legend {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  margin-top: 1rem;
  font-size: 0.75rem;
  color: var(--ink-soft);
  flex-wrap: wrap;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}

.legend-dot.HQ {
  background: var(--accent-hot);
  box-shadow: 0 0 8px var(--accent-hot);
}

/* ── live metrics row (below the map + panel, full width) ── */
.mp-metrics-row {
  position: relative;
  z-index: 1;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

@media (max-width: 640px) {
  .mp-metrics-row {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
  }

  /* pill button's vertical padding + font left it a couple px shy of a
     40px tap target on phones */
  .map-tab-btn {
    padding: 0.85rem 1.3rem;
  }

  /* the outer card + inner map card both carried their full desktop
     padding down to phone width, eating into the already-narrow map —
     tighten both so the SVG gets more room to breathe */
  .market-full-wrapper {
    padding: 1.5rem 1.1rem;
  }

  .world-map-container,
  .india-map-container {
    padding: 1.1rem;
  }
}

/* narrow phones: the two-pill tab switcher and the 2:1 world map both
   need dedicated handling below ~480px rather than just scaling down */
@media (max-width: 480px) {
  /* .section's padding shrinks again at this breakpoint (styles.css) —
     see the matching -16px step at 760px above for why this tracks it.
     bottom stays untouched: unlike the top edge (which faces the Our
     Process section's own .section padding), the bottom edge faces the
     Trusted By section directly with no divider/padding buffer between
     them, so it stays pinned at the small flat value set on the base
     rule regardless of breakpoint (see the base .mp-mesh comment). */
  .mp-mesh,
  .mp-blueprint,
  .mp-dots,
  .mp-noise {
    top: -12px;
  }

  .market-full-wrapper {
    padding: 1.25rem 0.85rem;
  }

  .world-map-container,
  .india-map-container {
    padding: 0.85rem;
  }

  .map-header {
    margin-bottom: 1rem;
  }

  /* side-by-side pills were wrapping unevenly once labels no longer fit
     one row at this width — stack them full-width instead */
  .map-tab-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .map-tab-btn {
    justify-content: center;
  }

  /* the world map's 2:1 aspect ratio left it only ~150px tall at phone
     widths, crowding pins/routes into an unusably thin strip — let it
     go taller here; the SVG's own viewBox keeps proportions via its
     default preserveAspectRatio (letterboxes instead of stretching) */
  .map-viewport-box.world-box {
    aspect-ratio: 4 / 3;
    max-height: 340px;
  }

  .map-legend {
    gap: 0.85rem;
    font-size: 0.7rem;
  }
}

/* ── accessibility ── */
@media (prefers-reduced-motion: reduce) {

  .mp-kicker-glow,
  .pulse-dot,
  .pin-pulse,
  .pin-ripple,
  .pin-beacon::after,
  .pin-core,
  .map-pin.active .pin-core,
  .mp-blueprint,
  .mp-route {
    animation: none;
  }

  .map-pin,
  .state-shape {
    transition: none;
  }
}

/* ══ DARK MODE ══ */
/* whole-section ambient "paper" background — was solid near-white
   (#FCFCFD → #F5F6F8), which is the main reason this section rendered
   as a bright white block against the dark page in dark mode */
html[data-theme="dark"] .mp-mesh {
  background:
    radial-gradient(ellipse 55% 45% at 84% 16%, rgba(255, 145, 40, .08), transparent 60%),
    radial-gradient(ellipse 55% 50% at 14% 22%, rgba(255, 255, 255, .03), transparent 60%),
    radial-gradient(ellipse 60% 55% at 50% 100%, rgba(255, 255, 255, .02), transparent 65%),
    linear-gradient(180deg, #12151A 0%, #0E1013 100%);
}

html[data-theme="dark"] .map-tab-btn {
  background: rgba(27, 31, 38, .6);
}

html[data-theme="dark"] .world-map-container,
html[data-theme="dark"] .india-map-container {
  background: linear-gradient(160deg, rgba(27, 31, 38, .85) 0%, rgba(18, 21, 26, .55) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 1px 2px rgba(0, 0, 0, .2);
}

html[data-theme="dark"] .map-badge {
  background: rgba(255, 122, 51, .15);
}

html[data-theme="dark"] .pin-tag {
  background: rgba(27, 31, 38, .95);
}

html[data-theme="dark"] .pin-popover {
  background: rgba(27, 31, 38, 0.97);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.5), 0 0 25px rgba(255, 106, 31, 0.15);
}

html[data-theme="dark"] .pin-popover::after {
  border-color: rgba(27, 31, 38, 0.97) transparent transparent transparent;
}

html[data-theme="dark"] .pin-popover.popover-below::after {
  border-color: transparent transparent rgba(27, 31, 38, 0.97) transparent;
}

html[data-theme="dark"] .pop-badge-type {
  background: rgba(255, 122, 51, .15);
}

/* ── India pins only: don't keep the popover permanently open on .active ──
   World's pins are spread across a whole globe, so a locked pin's popover
   staying open rarely overlaps a neighbor. India's covered states cluster
   tightly in places (all six North India states sit in one corner of the
   map), so a permanently-open popover for whichever state is selected can
   sit directly on top of — and intercept hover/click for — the pins next
   to it. The right-hand drill-down panel already shows the same info in
   full and persistently, so the on-map popover only needs to appear on
   actual hover/focus here; the beacon glow (.pin-core, untouched) remains
   the persistent "this one's selected" indicator. Scoped to #pinsLayer
   (India) via ID specificity so World's #worldPinsLayer is unaffected. */
#pinsLayer .map-pin.active .pin-popover {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-8px);
}

#pinsLayer .map-pin.active:hover .pin-popover,
#pinsLayer .map-pin.active:focus-visible .pin-popover,
#pinsLayer .map-pin.active.preview .pin-popover {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

#pinsLayer .map-pin.active .pin-popover.popover-left {
  transform: translateY(-8px);
}

#pinsLayer .map-pin.active:hover .pin-popover.popover-left,
#pinsLayer .map-pin.active:focus-visible .pin-popover.popover-left,
#pinsLayer .map-pin.active.preview .pin-popover.popover-left {
  transform: translateY(0);
}

/* ══ LOW-END MOBILE: decorative background-position sweep/drift forces a
   repaint every frame and (where paired) costs extra compositing via
   mix-blend-mode; simplify it away below the tablet breakpoint regardless
   of the user's reduced-motion preference, since most low-end-phone users
   won't have that OS setting enabled ══ */
@media (max-width: 760px) {
  /* .section's own padding (styles.css) shrinks at this same breakpoint,
     so the fixed top bleed on these ambient layers has to shrink in step
     or it eats into the process-carousel panel right above. bottom is
     untouched here — see the 480px block's comment for why. */
  .mp-mesh,
  .mp-blueprint,
  .mp-dots,
  .mp-noise {
    top: -16px;
  }

  .mp-blueprint { animation: none !important; }

  /* Every pin on the World tab runs 3 independent infinite animations
     (halo-spin + pulse/ripple wave + breathe) — with ~19 pins that's
     ~60+ continuously-animating elements the compositor has to keep
     awake even when nothing is being tapped. Collapse it to a single
     static beacon on phones; the orange dot + tag/popover-on-tap still
     communicate "this is an export destination" without the motion. */
  .pin-beacon::before,
  .pin-beacon::after,
  .pin-pulse,
  .pin-ripple {
    display: none;
  }

  .pin-core,
  .map-pin.active .pin-core {
    animation: none;
  }

  .map-pin.is-hq .pin-core {
    box-shadow: 0 0 14px rgba(255, 194, 75, .85), 0 2px 6px rgba(20, 22, 28, .25);
  }

  /* native SVG animateMotion on each trade-route particle keeps running
     even while off-screen; six of them chasing dashed paths behind the
     pins is pure decoration at this size */
  .mp-route-particles {
    display: none !important;
  }

  .india-svg,
  .world-svg {
    filter: none;
  }

  .pin-popover {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .map-tab-btn {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
}

/* ══ LOW-POWER MODE: same pin/particle simplification as the mobile
   breakpoint above, but keyed off .low-power-mode (styles.css) instead
   of viewport width — a desktop/tablet visitor on weak hardware, or
   anyone who's flipped the footer Lite Mode toggle, gets the same ~60-
   fewer-animating-elements win regardless of screen size. Backdrop-
   filter removal and the top/bottom bleed padding fix above are already
   handled sitewide/by the matching viewport breakpoint respectively, so
   they're not repeated here. ══ */
.low-power-mode .pin-beacon::before,
.low-power-mode .pin-beacon::after,
.low-power-mode .pin-pulse,
.low-power-mode .pin-ripple {
  display: none;
}

.low-power-mode .pin-core,
.low-power-mode .map-pin.active .pin-core {
  animation: none;
}

.low-power-mode .map-pin.is-hq .pin-core {
  box-shadow: 0 0 14px rgba(255, 194, 75, .85), 0 2px 6px rgba(20, 22, 28, .25);
}

.low-power-mode .mp-route-particles {
  display: none !important;
}

.low-power-mode .india-svg,
.low-power-mode .world-svg {
  filter: none;
}