/* ==========================================================================
   Worldwide kindness map — self-hosted, dependency-free.
   Built on the kc design system (public/css/kc.css): tokens, type, buttons,
   cards, chips, marquee. Everything here is prefixed .wm-.
   The map itself is always LTR (dir="ltr" on .wm-map); the page around it
   follows the document direction.
   ========================================================================== */

.wm-page {
  --wm-ink: #0b1230;
  --wm-land: rgba(132, 160, 240, 0.16);
  --wm-land-stroke: rgba(170, 195, 255, 0.22);
  --wm-land-hot: rgba(150, 180, 255, 0.27);
  --wm-land-hot-stroke: rgba(255, 190, 110, 0.55);
  --wm-glass: rgba(14, 22, 58, 0.62);
  --wm-glass-strong: rgba(12, 19, 50, 0.9);
  --wm-glass-border: rgba(255, 255, 255, 0.14);
  --wm-amber: #ffb347;
  --wm-orange: #ff8e00;
}

/* --------------------------------------------------------------------------
   Stage (night sky, slides under the floating header like the homepage hero)
   -------------------------------------------------------------------------- */
.wm-stage {
  position: relative;
  overflow: hidden;
  overflow: clip;
  color: #fff;
  background:
    radial-gradient(1100px 520px at 85% -5%, rgba(42, 91, 196, 0.85) 0%, rgba(42, 91, 196, 0) 60%),
    radial-gradient(900px 600px at 10% 70%, rgba(24, 111, 174, 0.45) 0%, rgba(24, 111, 174, 0) 60%),
    linear-gradient(180deg, #0f1737 0%, #0b1230 55%, #0a102a 100%);
  margin-top: calc(-1 * var(--nav-h) - 12px);
  padding-top: calc(var(--nav-h) + clamp(2.25rem, 6vw, 4.5rem));
  isolation: isolate;
}
.wm-stage.kc-grain::after { z-index: 0; }
.wm-sky {
  position: absolute; inset: 0; pointer-events: none; z-index: -1; opacity: 0.7;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 8%, rgba(255,255,255,.8) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 44% 22%, rgba(255,214,150,.9) 50%, transparent 51%),
    radial-gradient(1px 1px at 63% 12%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 78% 30%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 91% 16%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 42%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 54% 38%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 86% 48%, rgba(255,214,150,.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 36% 52%, rgba(255,255,255,.5) 50%, transparent 51%);
  background-size: 100% 100%;
  animation: wmTwinkle 6s ease-in-out infinite alternate;
}
@keyframes wmTwinkle { from { opacity: 0.45; } to { opacity: 0.85; } }
.wm-blob-1 { width: 560px; height: 560px; inset-inline-end: -180px; top: -200px; opacity: 0.35; z-index: -1; }
.wm-blob-2 { width: 520px; height: 520px; inset-inline-start: -240px; top: 38%; opacity: 0.4; z-index: -1; }

.wm-intro { z-index: 2; }
.wm-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-bottom: 1.25rem; }
.wm-kicker .kc-chip--live { background: rgba(34, 197, 94, 0.16); color: #86efac; border: 1px solid rgba(134, 239, 172, 0.25); }
.wm-title { color: #fff; margin: 0 0 1.25rem; font-size: clamp(2.6rem, 6.6vw, 5.5rem); }
.wm-title > span { display: block; }
.wm-title-accent {
  background: linear-gradient(100deg, #ffb347 0%, #ff8e00 45%, #ffd08a 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #ff8e00;
  padding-bottom: 0.06em; /* keep descenders inside the clip */
}

/* Live counters */
.wm-counters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}
.wm-counter {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 0.35rem;
  min-width: 0;
  padding: 0.95rem 1rem 0.9rem;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.11);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.wm-counter--hero {
  grid-column: 1 / -1;
  flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 1.25rem;
  background: linear-gradient(135deg, rgba(255, 142, 0, 0.22), rgba(255, 179, 71, 0.08));
  border-color: rgba(255, 179, 71, 0.32);
}
.wm-counter-num {
  font-family: var(--font-display); font-weight: 800; line-height: 0.95; letter-spacing: -0.04em;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.wm-counter--hero .wm-counter-num { font-size: clamp(3rem, 7vw, 4.75rem); color: var(--wm-amber); text-shadow: 0 0 40px rgba(255, 142, 0, 0.45); }
.wm-counter-label {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.82rem; font-weight: 600; line-height: 1.2; color: rgba(255, 255, 255, 0.72);
  min-width: 0;
}
.wm-counter-label i { color: var(--wm-amber); font-size: 0.8em; flex-shrink: 0; }
.wm-counter--hero .wm-counter-label { font-size: 0.95rem; color: rgba(255, 255, 255, 0.88); padding-bottom: 0.35rem; text-align: end; }
[dir="rtl"] .wm-title, [dir="rtl"] .wm-counter-num { letter-spacing: 0; }
/* New strings carry dir="auto" so untranslated English keeps its punctuation in place; keep them right-aligned in Hebrew. */
[dir="rtl"] .wm-page [data-i18n][dir="auto"] { text-align: right; }

/* --------------------------------------------------------------------------
   Map
   -------------------------------------------------------------------------- */
.wm-map-wrap { position: relative; z-index: 1; margin-top: clamp(0.5rem, 3vw, 1.5rem); }
.wm-map {
  position: relative;
  height: clamp(420px, 72vh, 800px);
  overflow: hidden;
  overflow: clip;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.wm-viewport {
  position: absolute; inset: 0;
  cursor: grab;
  touch-action: pan-y;
  outline: none;
  /* fade the map into the night at the top and bottom edges */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 86%, transparent 100%);
}
.wm-viewport.is-zoomed { touch-action: none; }
.wm-viewport.is-dragging { cursor: grabbing; }
.wm-map:has(.wm-viewport:focus-visible) { outline: 3px solid rgb(var(--accent)); outline-offset: -3px; }
.wm-svg, .wm-heat { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wm-heat { pointer-events: none; mix-blend-mode: screen; }
.wm-svg path {
  fill: var(--wm-land);
  stroke: var(--wm-land-stroke);
  stroke-width: 0.6px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: fill 0.4s ease, stroke 0.4s ease;
}
.wm-svg path.has-acts { fill: var(--wm-land-hot); stroke: var(--wm-land-hot-stroke); }
.wm-svg path.wm-graticule { fill: none; stroke: rgba(160, 190, 255, 0.07); stroke-width: 1px; stroke-dasharray: 2 4; }

/* Hotspots (HTML buttons so they are focusable & keep constant size) */
.wm-markers { position: absolute; inset: 0; pointer-events: none; }
.wm-marker {
  position: absolute; left: 0; top: 0;
  pointer-events: auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe2b0 0%, #ffb347 38%, #ff8e00 100%);
  color: var(--wm-ink);
  font: 800 0.72rem/1 var(--font-body);
  font-variant-numeric: tabular-nums;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 3px rgba(255, 142, 0, 0.28), 0 0 18px 2px rgba(255, 142, 0, 0.75), 0 0 46px 6px rgba(255, 142, 0, 0.28);
  cursor: pointer;
  touch-action: none;
  will-change: transform;
  transition: box-shadow 0.25s ease, filter 0.2s ease;
}
.wm-marker.is-single {
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #ffe7c2 45%, #ffb347 100%);
  box-shadow: 0 0 0 3px rgba(255, 220, 160, 0.25), 0 0 14px 2px rgba(255, 190, 100, 0.8);
}
.wm-marker::before {            /* enlarge the touch target to >= 36px */
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
}
.wm-marker::after {             /* slow breathing ring */
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid rgba(255, 179, 71, 0.75);
  animation: wmRing 2.8s var(--ease-out) infinite;
  animation-delay: var(--wm-delay, 0s);
  pointer-events: none;
}
@keyframes wmRing { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(2.6); opacity: 0; } }
.wm-marker:hover { filter: brightness(1.12) saturate(1.1); }
.wm-marker:focus-visible,
.wm-marker.is-active {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
.wm-marker.is-active { background: radial-gradient(circle at 35% 30%, #fff 0%, #ffd08a 40%, #ff8e00 100%); }

/* Ping for the spotlighted act */
.wm-ping {
  position: absolute; left: 0; top: 0; width: 0; height: 0;
  pointer-events: none; will-change: transform;
}
.wm-ping[hidden] { display: none; }
.wm-ping::before, .wm-ping::after, .wm-ping span {
  content: ""; position: absolute; left: -40px; top: -40px; width: 80px; height: 80px; border-radius: 50%;
}
.wm-ping::before { border: 2px solid rgba(255, 220, 160, 0.95); animation: wmPing 2.2s var(--ease-out) infinite; }
.wm-ping::after { border: 2px solid rgba(255, 142, 0, 0.8); animation: wmPing 2.2s 0.7s var(--ease-out) infinite; }
.wm-ping span { background: radial-gradient(circle, rgba(255, 230, 180, 0.55) 0%, rgba(255, 142, 0, 0.25) 30%, rgba(255, 142, 0, 0) 65%); animation: wmGlow 2.2s ease-in-out infinite; }
@keyframes wmPing { 0% { transform: scale(0.15); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes wmGlow { 0%, 100% { transform: scale(0.8); opacity: 0.7; } 50% { transform: scale(1.1); opacity: 1; } }
.wm-ping.is-new::before { animation-duration: 1.4s; border-width: 3px; }

/* Glass chrome on the map */
.wm-glass {
  background: var(--wm-glass);
  border: 1px solid var(--wm-glass-border);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
}
.wm-hint {
  position: absolute; top: 14px; left: 16px; z-index: 2; margin: 0;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-full);
  background: var(--wm-glass); border: 1px solid var(--wm-glass-border);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-size: 0.82rem; font-weight: 600; color: rgba(255, 255, 255, 0.85);
  pointer-events: none;
}
.wm-hint i { color: var(--wm-amber); }

.wm-controls {
  position: absolute; top: 14px; right: 16px; z-index: 3;
  display: flex; flex-direction: column; gap: 4px;
  padding: 4px;
  border-radius: var(--radius-full);
  background: var(--wm-glass); border: 1px solid var(--wm-glass-border);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.6);
}
.wm-ctrl {
  width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  background: transparent;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem;
  transition: background 0.2s ease, color 0.2s ease, transform 0.25s var(--ease-spring);
}
.wm-ctrl:hover { background: rgba(255, 255, 255, 0.12); color: var(--wm-amber); }
.wm-ctrl:active { transform: scale(0.92); }
.wm-ctrl:focus-visible { outline: 3px solid rgb(var(--accent)); outline-offset: 0; }
.wm-ctrl:disabled { color: rgba(255, 255, 255, 0.3); background: transparent; }

.wm-legend {
  position: absolute; right: 16px; bottom: 34px; z-index: 2;
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-full);
  background: var(--wm-glass); border: 1px solid var(--wm-glass-border);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-size: 0.72rem; font-weight: 600; color: rgba(255, 255, 255, 0.8);
}
.wm-legend-bar {
  width: 84px; height: 8px; border-radius: var(--radius-full);
  background: linear-gradient(90deg, rgba(70, 120, 235, 0.35), #4c7cf0 35%, #ff8e00 70%, #ffe7bf);
  box-shadow: 0 0 12px rgba(255, 142, 0, 0.45);
}
[dir="rtl"] .wm-legend { right: auto; left: 16px; flex-direction: row-reverse; }
.wm-credit {
  position: absolute; right: 18px; bottom: 10px; z-index: 2;
  font-size: 0.66rem; color: rgba(255, 255, 255, 0.5);
}
.wm-credit a { color: inherit; }
.wm-credit a:hover { color: #fff; }
[dir="rtl"] .wm-credit { right: auto; left: 18px; }

.wm-status {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  font-size: 0.95rem; font-weight: 600; color: rgba(255, 255, 255, 0.8);
  pointer-events: none;
}
.wm-status[hidden] { display: none; }
.wm-status.is-message {
  inset: auto 50% 50% auto;
  transform: translate(50%, 50%);
  padding: 0.65rem 1.1rem;
  border-radius: var(--radius-full);
  background: var(--wm-glass-strong); border: 1px solid var(--wm-glass-border);
  white-space: nowrap;
}
.wm-loader {
  width: 22px; height: 22px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.18); border-top-color: var(--wm-amber);
  animation: kcSpin 0.8s linear infinite;
  display: inline-block;
}
.wm-loader--dark { width: 30px; height: 30px; border-color: rgba(15, 23, 55, 0.1); border-top-color: rgb(var(--accent)); }

/* Popup (dark glass) */
.wm-popup {
  position: absolute; left: 0; top: 0; z-index: 5;
  width: 320px; max-width: calc(100% - 24px); max-height: calc(100% - 24px);
  display: flex; flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--wm-glass-strong);
  border: 1px solid var(--wm-glass-border);
  backdrop-filter: saturate(1.4) blur(18px);
  -webkit-backdrop-filter: saturate(1.4) blur(18px);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 179, 71, 0.08);
  color: #fff;
  animation: wmPop 0.35s var(--ease-spring);
}
@keyframes wmPop { from { opacity: 0; scale: 0.94; } to { opacity: 1; scale: 1; } }
.wm-popup[hidden] { display: none; }
.wm-popup.is-docked {
  left: 10px !important; right: 10px; top: auto !important; bottom: 10px;
  width: auto; max-width: none; max-height: 74%;
  transform: none !important;
}
.wm-popup-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem;
  padding: 1rem 1rem 0.75rem 1.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.wm-popup[dir="rtl"] .wm-popup-head { padding: 1rem 1.1rem 0.75rem 1rem; }
.wm-popup-title {
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15;
  color: #fff; margin: 0 0 0.2rem;
  overflow-wrap: anywhere;
}
.wm-popup[dir="rtl"] .wm-popup-title { letter-spacing: 0; }
.wm-popup-sub { font-size: 0.8rem; font-weight: 700; color: var(--wm-amber); }
.wm-popup-close {
  flex: 0 0 auto; width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.1); color: #fff;
  display: grid; place-items: center;
  transition: background 0.2s ease, transform 0.25s var(--ease-spring);
}
.wm-popup-close:hover { background: rgba(255, 255, 255, 0.2); transform: rotate(90deg); }
.wm-popup-list { overflow-y: auto; overscroll-behavior: contain; padding: 0.35rem 0; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; }
.wm-popup-item { display: flex; gap: 0.75rem; padding: 0.6rem 1.1rem; align-items: flex-start; }
.wm-popup-item + .wm-popup-item { border-top: 1px solid rgba(255, 255, 255, 0.07); }
.wm-popup .wm-act-title { color: #fff; }
.wm-popup .wm-act-meta { color: rgba(255, 255, 255, 0.62); }
.wm-popup .wm-act-meta i { color: rgba(255, 255, 255, 0.45); }
.wm-popup-foot { padding: 0.65rem 1.1rem 0.9rem; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.wm-popup-foot[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Spotlight — the latest act, live
   -------------------------------------------------------------------------- */
.wm-spotlight {
  position: absolute; z-index: 4;
  inset-inline-start: max(16px, calc((100vw - 1320px) / 2 + 12px));
  bottom: 28px;
  width: min(390px, calc(100% - 32px));
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, rgba(20, 30, 74, 0.86), rgba(12, 19, 50, 0.9));
  border: 1px solid rgba(255, 179, 71, 0.28);
  backdrop-filter: saturate(1.4) blur(18px);
  -webkit-backdrop-filter: saturate(1.4) blur(18px);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.8), 0 0 50px -20px rgba(255, 142, 0, 0.55);
  overflow: hidden;
}
.wm-spotlight[hidden] { display: none; }
.wm-spot-head {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.75rem 0.75rem 0 1.1rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
[dir="rtl"] .wm-spot-head { letter-spacing: 0; padding: 0.75rem 1.1rem 0 0.75rem; }
.wm-spot-label { flex: 1 1 auto; min-width: 0; }
.wm-spot-count { font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.45); letter-spacing: 0.04em; }
.wm-spot-btn {
  width: 32px; height: 32px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 0.7rem;
  display: grid; place-items: center;
}
.wm-spot-btn:hover { background: rgba(255, 255, 255, 0.18); }
.wm-spot-body {
  display: flex; align-items: center; gap: 0.9rem; width: 100%;
  padding: 0.7rem 1.1rem 1rem; border: 0; background: transparent; color: #fff; text-align: start;
  cursor: pointer;
}
.wm-spot-body:focus-visible { outline: 3px solid rgb(var(--accent)); outline-offset: -6px; border-radius: var(--radius-lg); }
.wm-spot-emoji {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 18px;
  display: grid; place-items: center; font-size: 1.8rem;
  background: var(--grad-accent);
  box-shadow: 0 10px 24px -8px rgba(255, 142, 0, 0.7);
  overflow: hidden;
}
.wm-spot-emoji img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wm-spot-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.2rem; }
.wm-spot-title {
  font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; line-height: 1.2; letter-spacing: -0.015em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.wm-spot-meta { font-size: 0.82rem; color: rgba(255, 255, 255, 0.65); display: flex; flex-wrap: wrap; gap: 0 0.6rem; }
.wm-spot-meta i { color: var(--wm-amber); margin-inline-end: 0.3rem; }
.wm-spot-go {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.08); color: var(--wm-amber);
  transition: background 0.2s ease, transform 0.3s var(--ease-spring);
}
.wm-spot-body:hover .wm-spot-go { background: var(--wm-amber); color: var(--wm-ink); transform: scale(1.08); }
.wm-spot-progress { display: block; height: 3px; background: rgba(255, 255, 255, 0.08); }
.wm-spot-progress > span { display: block; height: 100%; width: 0; background: var(--grad-accent); transform-origin: left; }
[dir="rtl"] .wm-spot-progress > span { margin-inline-start: auto; }
.wm-spotlight.is-running .wm-spot-progress > span { animation: wmProgress var(--wm-spot-ms, 6500ms) linear forwards; }
@keyframes wmProgress { from { width: 0; } to { width: 100%; } }
.wm-spot-text.is-swapping, .wm-spot-emoji.is-swapping { animation: wmSwap 0.6s var(--ease-out); }
@keyframes wmSwap { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.wm-spotlight.is-new { animation: wmNewFlash 1.4s ease-out; }
@keyframes wmNewFlash { 0% { box-shadow: 0 0 0 0 rgba(255, 179, 71, 0.9), 0 30px 60px -24px rgba(0,0,0,.8); } 100% { box-shadow: 0 0 0 26px rgba(255, 179, 71, 0), 0 30px 60px -24px rgba(0,0,0,.8); } }

/* Ticker */
.wm-ticker { position: relative; z-index: 2; padding: 1rem 0; border-top: 1px solid rgba(255, 255, 255, 0.08); background: rgba(0, 0, 0, 0.2); }
.wm-ticker[hidden] { display: none; }
.wm-ticker .kc-ticker-item { padding: 0.55rem 1rem; font-size: 0.92rem; }
.wm-ticker .kc-ticker-item time { color: var(--wm-amber); font-weight: 600; font-size: 0.82rem; }

/* --------------------------------------------------------------------------
   Panels
   -------------------------------------------------------------------------- */
.wm-panels { padding-top: clamp(3.5rem, 8vw, 6rem); }
.wm-card-header {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid rgba(15, 23, 55, 0.07);
}
.wm-card-title {
  display: flex; align-items: center; gap: 0.65rem; margin: 0;
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em;
  color: rgb(var(--blue-900));
}
[dir="rtl"] .wm-card-title { letter-spacing: 0; }
.wm-card-icon { font-size: 1.3rem; }
.wm-card-body { padding: 1.1rem 1.5rem 1.5rem; }

/* Feed */
.wm-feed-card { display: flex; flex-direction: column; overflow: hidden; overflow: clip; }
.wm-feed {
  height: clamp(440px, 70vh, 700px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.5rem 0.75rem 0.75rem;
  outline: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 23, 55, 0.2) transparent;
}
.wm-feed:focus-visible { box-shadow: inset 0 0 0 3px rgba(var(--accent), 0.6); }
.wm-feed-item {
  position: relative;
  display: flex; gap: 0.9rem; align-items: center;
  padding: 0.8rem 0.75rem;
  border-radius: var(--radius-md);
  transition: background 0.2s ease;
}
.wm-feed-item:hover { background: rgb(var(--background-secondary)); }
.wm-feed-item + .wm-feed-item::before {
  content: ""; position: absolute; top: 0; inset-inline: 0.75rem; height: 1px; background: rgba(15, 23, 55, 0.06);
}
.wm-feed-item .wm-thumb { width: 64px; height: 64px; border-radius: 16px; font-size: 1.9rem; }
.wm-feed-locate {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgb(var(--blue-100));
  color: rgb(var(--primary));
  display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem;
  margin-inline-start: auto;
  transition: background 0.2s ease, color 0.2s ease, transform 0.25s var(--ease-spring);
}
.wm-feed-locate:hover { background: rgb(var(--blue-900)); color: var(--wm-amber); transform: scale(1.06); }
.wm-feed-locate:focus-visible { outline: 3px solid rgb(var(--accent)); outline-offset: 2px; }
.wm-feed-toggle {
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 36px; padding: 0.3rem 0.85rem;
  border: 1px solid rgba(15, 23, 55, 0.14); border-radius: var(--radius-full);
  background: #fff; color: rgb(var(--text-secondary));
  font-weight: 700; font-size: 0.8rem; white-space: nowrap;
}
.wm-feed-toggle:hover { border-color: rgb(var(--blue-900)); color: rgb(var(--blue-900)); }
.wm-feed-toggle[hidden] { display: none; }
.wm-feed-hearts { display: inline-flex; align-items: center; gap: 0.25rem; color: rgb(var(--heart)); font-weight: 700; }
.wm-feed-hearts i { color: inherit !important; }

/* Shared thumbnail / act text */
.wm-thumb {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  border-radius: 14px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.45rem; line-height: 1;
  border: 0; padding: 0;
  background: linear-gradient(135deg, #ffe6c7, #ffc98a);
}
.wm-thumb.wm-tile-1 { background: linear-gradient(135deg, #dfe9fb, #b8cdf4); }
.wm-thumb.wm-tile-2 { background: linear-gradient(135deg, #fde0e5, #f8b8c4); }
.wm-thumb.wm-tile-3 { background: linear-gradient(135deg, #d9f3e4, #ace3c4); }
.wm-popup .wm-thumb { background: rgba(255, 255, 255, 0.1); }
.wm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
button.wm-thumb { cursor: zoom-in; }
button.wm-thumb:focus-visible { outline: 3px solid rgb(var(--accent)); outline-offset: 2px; }
.wm-act-title {
  font-family: var(--font-display);
  font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em;
  color: rgb(var(--blue-900));
  margin: 0 0 0.15rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
[dir="rtl"] .wm-act-title { letter-spacing: 0; }
.wm-popup .wm-act-title { font-size: 0.95rem; }
.wm-act-desc {
  font-size: 0.88rem; color: rgb(var(--text-secondary));
  margin: 0 0 0.3rem; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.wm-act-meta {
  display: flex; flex-wrap: wrap; gap: 0.15rem 0.85rem;
  font-size: 0.78rem; font-weight: 500;
  color: rgb(var(--text-muted));
}
.wm-act-meta i { color: rgb(var(--accent)); margin-inline-end: 0.3rem; }
.wm-grow { flex: 1 1 auto; }

/* Side column */
.wm-side { display: grid; gap: 1.5rem; }
@media (min-width: 992px) { .wm-side { position: sticky; top: calc(var(--nav-h) + 24px); } }
.wm-countries-card { overflow: hidden; }
.wm-countries-card .wm-card-header { border-bottom-color: rgba(255, 255, 255, 0.1); }
.wm-countries-card .wm-card-title { color: #fff; }

/* Leaderboard */
.wm-leaderboard { display: grid; gap: 0.5rem; }
.wm-lb-row {
  display: grid; grid-template-columns: 1.7rem 1.6rem minmax(0, 1fr) auto; align-items: center; gap: 0.15rem 0.6rem;
  padding: 0.55rem 0.8rem 0.65rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
}
.wm-lb-rank {
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.5); text-align: center;
}
.wm-lb-row:nth-child(-n+3) .wm-lb-rank { color: var(--wm-amber); }
.wm-lb-row:first-child { background: linear-gradient(100deg, rgba(255, 142, 0, 0.24), rgba(255, 255, 255, 0.06)); }
.wm-lb-flag { font-size: 1.2rem; line-height: 1; text-align: center; }
.wm-lb-name { font-weight: 600; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-lb-count { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: #fff; font-variant-numeric: tabular-nums; }
.wm-lb-bar {
  grid-column: 3 / 5;
  height: 5px; border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.wm-lb-bar > span {
  display: block; height: 100%; border-radius: inherit;
  background: var(--grad-accent);
  box-shadow: 0 0 10px rgba(255, 142, 0, 0.6);
  transform-origin: left;
  animation: wmGrow 1.1s var(--ease-out) both;
}
[dir="rtl"] .wm-lb-bar > span { transform-origin: right; }
@keyframes wmGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.wm-countries-card .text-muted { color: rgba(255, 255, 255, 0.65) !important; }

/* CTA card */
.wm-cta { position: relative; padding: clamp(1.5rem, 3vw, 2rem); overflow: hidden; }
.wm-cta .kc-h3 { color: rgb(var(--blue-900)); max-width: 15ch; }
.wm-cta p { color: rgba(15, 23, 55, 0.82); font-weight: 500; max-width: 30rem; }
.wm-cta-pin {
  position: absolute; inset-inline-end: -10px; top: -14px;
  font-size: 7.5rem; line-height: 1; color: rgba(15, 23, 55, 0.1);
  transform: rotate(12deg);
  pointer-events: none;
}

.wm-empty { text-align: center; color: rgb(var(--text-secondary)); padding: 3rem 1rem; list-style: none; }
.wm-empty i { color: rgb(var(--accent)); font-size: 2rem; margin-bottom: 0.75rem; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .wm-map { height: clamp(380px, 64vh, 620px); }
  .wm-spotlight {
    position: relative; inset: auto; bottom: auto;
    width: auto; margin: -0.5rem 16px 1.5rem;
  }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .wm-counters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wm-counter--hero { grid-column: auto; flex-direction: column; align-items: flex-start; }
  .wm-counter--hero .wm-counter-num { font-size: clamp(1.7rem, 3.2vw, 2.4rem); text-shadow: none; }
  .wm-counter--hero .wm-counter-label { font-size: 0.82rem; padding: 0; text-align: start; }
}
@media (max-width: 575.98px) {
  .wm-stage { padding-top: calc(var(--nav-h) + 2rem); }
  .wm-title { font-size: clamp(2.35rem, 11.5vw, 3.2rem); margin-bottom: 1rem; }
  .wm-stage .kc-lead { font-size: 1.02rem; }
  .wm-counters { gap: 0.5rem; }
  .wm-counter { padding: 0.75rem 0.7rem; border-radius: 16px; }
  .wm-counter-num { font-size: 1.55rem; }
  .wm-counter-label { font-size: 0.72rem; gap: 0.3rem; }
  .wm-counter--hero { padding: 0.9rem 1rem; }
  .wm-counter--hero .wm-counter-num { font-size: 3rem; }
  .wm-counter--hero .wm-counter-label { font-size: 0.85rem; max-width: 9rem; }
  .wm-map { height: clamp(340px, 54svh, 460px); }
  .wm-blob-1 { width: 320px; height: 320px; inset-inline-end: -200px; top: -120px; opacity: 0.25; }
  .wm-blob-2 { width: 300px; height: 300px; inset-inline-start: -200px; opacity: 0.3; }
  .wm-hint { top: 10px; left: 10px; font-size: 0.74rem; padding: 0.35rem 0.7rem; max-width: calc(100% - 80px); }
  .wm-hint span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wm-controls { top: 10px; right: 10px; }
  .wm-ctrl { width: 42px; height: 42px; }
  .wm-legend { left: 10px; right: auto; bottom: 10px; font-size: 0.66rem; padding: 0.25rem 0.55rem; }
  [dir="rtl"] .wm-legend { left: 10px; }
  .wm-legend-bar { width: 52px; }
  .wm-credit { right: 12px; left: auto; bottom: 12px; }
  [dir="rtl"] .wm-credit { right: 12px; left: auto; }
  .wm-spot-title { font-size: 1.02rem; }
  .wm-spot-emoji { width: 50px; height: 50px; font-size: 1.6rem; }
  .wm-card-header { padding: 1.1rem 1.1rem 0.9rem; }
  .wm-card-title { font-size: 1.15rem; }
  .wm-card-body { padding: 1rem 1.1rem 1.25rem; }
  .wm-feed { height: 520px; padding: 0.35rem 0.4rem 0.5rem; }
  .wm-feed-item { gap: 0.75rem; padding: 0.75rem 0.6rem; }
  .wm-feed-item .wm-thumb { width: 54px; height: 54px; font-size: 1.6rem; }
  .wm-feed-locate { width: 40px; height: 40px; }
  .wm-cta .kc-btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .wm-svg path { transition: none; }
  .wm-sky, .wm-marker::after, .wm-ping::before, .wm-ping::after, .wm-ping span, .wm-lb-bar > span, .wm-popup { animation: none !important; }
  .wm-ping span { opacity: 1; }
}