/* ============================================================================
   Shared design tokens + "Where to Play" map component.
   Brand = Dominican Republic flag. Each option overrides the --map-* / theme
   vars in its own stylesheet, so the same map engine reads differently in A vs B.
   ========================================================================== */
:root {
  /* DR flag palette */
  --navy: #002d62;
  --navy-900: #001a3a;
  --navy-700: #013a7a;
  --red: #ce1126;
  --red-700: #a50d1e;
  --white: #ffffff;
  --gold: #f2c14e;
  --sand: #f5efe3;
  --ink: #11151c;

  /* choropleth defaults (light surfaces) */
  --map-stroke: #ffffff;
  --map-stroke-w: 1;
  --map-emerging: #d7dfea;
  --map-developing: #f2c14e;
  --map-active: #ce1126;
  --map-hover: #013a7a;
  --map-selected: #002d62;
  --map-selected-stroke: #f2c14e;

  /* status accents (dots / badges) */
  --st-active: #ce1126;
  --st-developing: #e0a106;
  --st-emerging: #8aa0bd;
}

/* ---------- Interactive map ---------- */
[data-dr-map] { position: relative; width: 100%; }
[data-dr-map] svg { width: 100%; height: auto; display: block; overflow: visible; }

path.province {
  fill: var(--map-emerging);
  stroke: var(--map-stroke);
  stroke-width: var(--map-stroke-w);
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill .18s ease, filter .18s ease;
  outline: none;
}
path.province.status-active { fill: var(--map-active); }
path.province.status-developing { fill: var(--map-developing); }
path.province.status-emerging { fill: var(--map-emerging); }
path.province:hover,
path.province:focus-visible { fill: var(--map-hover); }
path.province.is-active {
  fill: var(--map-selected);
  stroke: var(--map-selected-stroke);
  stroke-width: 2.5;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35));
}
.dr-map-err { padding: 1rem; color: var(--red); font-weight: 600; }

/* ---------- Legend ---------- */
.dr-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; }
.dr-legend span { display: inline-flex; align-items: center; gap: .45rem; font-size: .82rem; }
.dr-legend i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.dr-leg--active { background: var(--st-active); }
.dr-leg--developing { background: var(--map-developing); }
.dr-leg--emerging { background: var(--map-emerging); }

/* ---------- Region list ---------- */
[data-dr-list] { list-style: none; margin: 0; padding: 0; }
.dr-li-btn {
  width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: .6rem; padding: .6rem .75rem; background: none; border: 0; border-radius: 10px;
  text-align: left; cursor: pointer; font: inherit; color: inherit; transition: background .15s;
}
.dr-li-btn:hover { background: rgba(0, 45, 98, .07); }
.dr-li.is-active .dr-li-btn { background: rgba(0, 45, 98, .12); }
.dr-li-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dr-dot--active { background: var(--st-active); }
.dr-dot--developing { background: var(--st-developing); }
.dr-dot--emerging { background: var(--st-emerging); }
.dr-li-name { font-weight: 600; }
.dr-li-hub { font-size: .78rem; opacity: .6; }

/* ---------- Detail panel ---------- */
.drp-badge {
  display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; padding: .3rem .6rem; border-radius: 999px; color: #fff;
}
.drp-badge--active { background: var(--st-active); }
.drp-badge--developing { background: var(--st-developing); color: #2a2202; }
.drp-badge--emerging { background: var(--st-emerging); }
.drp-name { margin: .55rem 0 .15rem; line-height: 1.05; }
.drp-hub { opacity: .7; margin: 0 0 1rem; font-size: .95rem; }
.drp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: 0 0 1rem; }
.drp-stat { text-align: center; padding: .7rem .25rem; border-radius: 12px; background: rgba(0, 45, 98, .06); }
.drp-stat span { display: block; font-size: 1.5rem; font-weight: 800; line-height: 1; color: var(--navy); }
.drp-stat small { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; opacity: .65; }
.drp-blurb { margin: 0 0 1rem; line-height: 1.5; }
.drp-programs { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.drp-programs li { font-size: .78rem; padding: .3rem .6rem; border-radius: 999px; background: rgba(0, 45, 98, .08); font-weight: 600; }
.drp-row { display: flex; justify-content: space-between; padding: .5rem 0; border-top: 1px solid rgba(0, 0, 0, .08); font-size: .9rem; }
.drp-row span { opacity: .6; }
.drp-cta {
  display: inline-block; margin-top: 1rem; font-weight: 700; text-decoration: none;
  color: #fff; background: var(--navy); padding: .7rem 1.1rem; border-radius: 10px; transition: background .15s;
}
.drp-cta:hover { background: var(--navy-700); }
.drp-cta--start { background: var(--red); }
.drp-cta--start:hover { background: var(--red-700); }
.drp-empty { text-align: center; padding: 1.5rem 1rem; opacity: .85; }
.drp-empty h3 { margin: .25rem 0 .5rem; }
.drp-empty p { margin: 0; line-height: 1.5; opacity: .8; }
.drp-empty-mark {
  width: 54px; height: 54px; display: inline-block; border-radius: 14px;
  background: conic-gradient(from 45deg, var(--navy) 0 25%, var(--red) 0 50%, var(--navy) 0 75%, var(--red) 0);
  position: relative;
}
.drp-empty-mark::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 10px; height: 10px;
  background: #fff; border-radius: 50%;
}

/* utility: visually-hidden */
.dr-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Pins map (stylized SVG island + status pins + floating popup) ---------- */
.dr-pinmap { position: relative; }
.dr-pinwrap { position: relative; }
.dr-pinwrap svg { width: 100%; height: auto; display: block; overflow: visible; filter: drop-shadow(0 10px 20px rgba(10, 20, 40, .16)); }
.dr-pinmap path.province { fill: var(--map-land, #d7e0ec); stroke: var(--map-stroke, #fff); stroke-width: 1; transition: fill .15s; cursor: pointer; }
.dr-pinmap path.province.hover { fill: var(--map-land-hover, #c5d2e4); }
.dr-pinmap path.province.is-active { fill: var(--map-land-active, #b6c6df); }
.dr-pins .dr-pin { stroke: #fff; stroke-width: 2; cursor: pointer; transition: transform .15s; transform-box: fill-box; transform-origin: center; outline: none; }
.dr-pin--active { fill: var(--st-active, #d81f2a); }
.dr-pin--developing { fill: var(--st-developing, #e0a106); }
.dr-pin--emerging { fill: var(--st-emerging, #8aa0bd); }
.dr-pin:hover, .dr-pin:focus-visible { transform: scale(1.4); }
.dr-pin.is-active { stroke: var(--map-pin-active-stroke, #16245e); stroke-width: 3; transform: scale(1.35); }
.dr-popup { position: absolute; transform: translate(-50%, calc(-100% - 16px)); background: var(--popup-bg, #fff); color: var(--popup-text, #14233a); border-radius: 12px; box-shadow: 0 16px 38px rgba(8, 16, 40, .28); padding: .7rem .85rem .8rem; min-width: 168px; z-index: 6; }
.dr-popup::after { content: ""; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%) rotate(45deg); width: 14px; height: 14px; background: var(--popup-bg, #fff); }
.dr-popup .dr-pop-badge { display: inline-block; font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #fff; padding: .12rem .4rem; border-radius: 4px; margin-bottom: .25rem; }
.dr-pop-badge.dr-dot--active { background: var(--st-active, #d81f2a); }
.dr-pop-badge.dr-dot--developing { background: var(--st-developing, #e0a106); }
.dr-pop-badge.dr-dot--emerging { background: var(--st-emerging, #8aa0bd); }
.dr-popup strong { display: block; font-size: 1rem; line-height: 1.15; }
.dr-popup .dr-pop-hub { display: block; font-size: .78rem; opacity: .7; margin-bottom: .4rem; }
.dr-popup .dr-pop-cta { font-size: .76rem; font-weight: 700; color: var(--st-active, #d81f2a); }