/* ======================================================================================================
 * Version: 5.14.0
 * Created: 2026-01-21 09h00 SAST
 * Updated: 2026-03-28
 * File: viridians-jurisdictions-map-popup.css
 * Path: /assets/css/viridians/partials/viridians-jurisdictions-map-popup.css
 * Author: Buktika Webdesk (Binka)
 * Purpose: Viridians map popup — white panel + button preview system + Tippy i18n
 * Type: CSS stylesheet
 * License: © Buktika, 2026. All rights reserved.
 * ISO Reference: ISO 27001, ISO 9241-110
 * Source Naming Standard: Buktika v7.1 (ISO Aligned)
 * Spec ref: BKT-DOC-03 Amendment v2.2.0 §19 BKT Floating Panel Component
 *            BKT-DOC-www-D §6-§8 i18n Runtime Contract & Language Handling
 * ====================================================================================================== */
/*
ChangeLog:
  - v5.14.0 (2026-03-30): Popup header lane alignment refinement.
    * FIXED    - Header title/source collision now resolved via aligned namespace copy.
    * CHANGED  - Header now follows the option-row lane geometry so the flag sits over the colour block and the title centers over the white reading lane.
    * CHANGED  - Flag footprint increased again for stronger visual anchoring.
  - v5.13.0 (2026-03-30): Popup header balance refinement.
    * CHANGED  - Flag given more visual presence through a slightly larger footprint and calmer title sizing.
    * CHANGED  - Popup heading centered within the header block for a steadier first-read.
  - v5.12.0 (2026-03-30): Mobile viewport fit correction.
    * FIXED    - Selection popup now caps itself to the visible mobile viewport and scrolls internally when needed.
    * CHANGED  - Mobile shell, white panel, title, option bars, and CTA spacing reduced so the popup fits comfortably on phone widths.
    * CHANGED  - Mobile channel teaching bar footprint narrowed so label text no longer loses too much horizontal space.
  - v5.11.0 (2026-03-30): Compact popup centering refinement.
    * CHANGED  - Mobile-width hover preview and selection popup now respect centered compact sizing more consistently.
    * CHANGED  - Compact popup shells use symmetric widths so the centered map popup reads balanced.
  - v5.10.0 (2026-03-28): Hover preview redesigned as mini popup.
    * CHANGED  - Hover preview now uses a larger dark outer shell with a white inner panel to match the active-country popup family.
    * CHANGED  - Increased hover preview footprint and typography for easier orientation reading.
  - v5.9.5 (2026-03-28): Hover preview flag redesigned as a pure lift.
    * CHANGED  - Removed the visible edge treatment so the hover flag now separates only through a soft unified shadow, not a box or ring.
  - v5.9.4 (2026-03-28): Hover preview flag lift without white backing.
    * CHANGED  - Removed the visible white flag backing and switched to a subtle edge + shadow lift so the flag reads elevated, not boxed.
  - v5.9.3 (2026-03-28): Hover preview flag lift reduced.
    * CHANGED  - Reduced the hover preview flag treatment back to a quiet popup-family lift so it separates gently without becoming a chip.
  - v5.9.2 (2026-03-28): Hover preview flag lift tuning.
    * CHANGED  - Hover preview flag now sits on a subtle white-backed chip so it reads cleanly against the dark preview card.
  - v5.9.1 (2026-03-28): Hover preview flag + proper tip geometry.
    * FIXED    - Hover preview tip now uses a clean directional triangle instead of a blocky inherited connector.
    * ADDED    - Hover preview header/flag styling to match the popup family more closely.
  - v5.9.0 (2026-03-28): Hover preview orientation card.
    * ADDED    - Small MapLibre hover-preview popup styling for country orientation.
    * CHANGED  - Hover preview uses a lighter, non-working-card footprint distinct from the full selection popup.
  - v5.8.0 (2026-03-28): Revert popup tooltips to canonical system visual.
    * REMOVED  - Popup-specific Tippy theme overrides for CTA/eco/mdx balloons.
    * CHANGED  - Viridians popup now relies on site-wide sentraledex tooltip styling from tippy.css.
    * KEPT     - Only generic popper z-index support for visibility over MapLibre.
  - v5.7.0 (2026-03-28): Tooltip width unification.
    * CHANGED  - Viridians CTA + channel helper tooltips now share a calmer width cap.
    * CHANGED  - Tooltip content now wraps cleanly instead of stretching into long centred strips.
  - v5.6.9 (2026-03-28): TOOLTIP CALMING — arrow visibility and directional anchoring support.
    * CHANGED  - Popup tooltip arrow now carries shadow so it remains visible over the map.
    * CHANGED  - Supports directional placement tuning from JS without visual breakage.
  - v5.6.8 (2026-03-28): CLOSE CHIP DEPTH FIX + OWNER-APPROVED GAP.
    * CHANGED  - White close chip no longer uses a visible border line.
                 Separation now comes from shadow, avoiding the "indented" read.
    * CHANGED  - Popup gap between white well and CTA increased to 2rem.
  - v5.6.7 (2026-03-28): COMFORT GAP + CLOSE CHIP EDGE TUNING.
    * CHANGED  - Added more separation between the white selection well and the CTA.
                 Reduces visual jumping between options and action.
    * CHANGED  - Close chip border darkened to read more clearly against the white backing.
                 Uses the popup-surface family rather than introducing a new accent.
  - v5.6.6 (2026-03-28): CLOSE ICON REBUILD — text glyph replaced with drawn strokes.
    * FIXED    - Native multiplication glyph removed from close control.
                 Button now renders a centered two-stroke close icon for crisp,
                 reliable alignment and clearer recognition.
  - v5.6.5 (2026-03-28): COMFORT TUNING — clearer close button, framed flag, calmer header spacing.
    * CHANGED  - Close button now uses a light backing so the X reads instantly against the dark shell.
    * FIXED    - Flag asset gets a subtle border/background so white flag fields no longer disappear.
    * CHANGED  - More space added between the popup heading and the first option row.
  - v5.6.4 (2026-03-28): CLOSE CONTROL RESET — removed decorative chrome.
    * CHANGED  - Close button simplified to a plain high-contrast X with no circular container.
                 Focus is now on immediate readability instead of styled surface treatment.
  - v5.6.3 (2026-03-28): CLOSE CONTROL VISIBILITY FIX.
    * FIXED    - Close button contrast increased so the X reads clearly at a glance.
                 Surface darkened, glyph enlarged, and glass effect reduced.
  - v5.6.2 (2026-03-28): CHROME REFINEMENT — integrated close control and cleaner CTA edge.
    * CHANGED  - Close button rebuilt as a deliberate circular control within the popup chrome.
                 Better alignment, softer hover, and a calmer visual relationship to the panel.
    * FIXED    - CTA border bleeding removed by replacing the literal border with inset edge treatment.
                 Split eco/MDX state now reads as one clean button instead of colour fill plus border conflict.
  - v5.6.1 (2026-03-28): WIDTH + MARKER PLACEMENT TUNING.
    * CHANGED  - Popup width increased slightly to reduce multi-line row labels.
    * CHANGED  - Selected checkmark moved into the coloured teaching segment.
                 Text field now gets the full neutral width and reads more cleanly.
  - v5.6.0 (2026-03-28): ROW-SELECTION MARKER — checkbox ring removed.
    * REMOVED  - Visible checkbox/radio ring control.
    * ADDED    - Hidden semantic checkbox + single checkmark state marker.
    * ADDED    - RTL mirroring for channel segment and state marker.
  - v5.5.2 (2026-03-28): SINGLE-RING CONTROL FIX.
    * FIXED    - Checkbox control now renders as a single clean ring.
                 Browser appearance fully suppressed (-webkit/-moz appearance:none).
    * REMOVED  - Semi-transparent interior on unchecked state that read as a second line.
  - v5.5.1 (2026-03-28): CHECKMARK SIMPLIFICATION — round control, larger tick, quieter selected outline.
    * CHANGED  - Checkbox square → round token. Double-outline effect removed.
    * CHANGED  - Tick mark enlarged for faster recognition.
    * CHANGED  - Label spacing increased; text starts further from the coloured segment.
    * CHANGED  - Selected-row outline softened from 3px outer ring to a calmer 2px inset confirmation.
  - v5.5.0 (2026-03-28): SELECTION-ROW REDESIGN — strong cue, calm field.
    * REMOVED  - Full-width saturated channel fills on option rows.
    * ADDED    - Leading colour segment pattern: left channel block + neutral text field.
                 Faster recognition than a thin border, lower cognitive load than a full bar.
    * ADDED    - Checkbox restyled as a crisp white-square control inside the colour segment.
    * CHANGED  - CTA button rebuilt with proper depth, inset highlight, and stronger
                 button affordance while keeping channel-state teaching intact.
  - v5.4.0 (2026-03-27): REVERT TO SPEC — Full-width channel colours on option bars.
    * REVERTED - Button colours back to spec (#2e5d3a eco, #8b5cf6 mdx, not custom brights).
    * REVERTED - Checkbox styling back to native browser (removed appearance:none).
    * CHANGED  - Option bar background: now full-width channel colour (#464820 eco, #8b5cf6 mdx).
                 Text on option: white to contrast against channel-colour background.
                 Removed light gray background — entire bar is channel colour.
    * REMOVED  - Custom checkbox appearance and checkmark SVG.
                 Uses native browser checkbox with accent-color for highlight.
  - v5.3.0 (2026-03-27): CRITICAL FIX — Disabled button Tippy, checkbox defaults, brighter colors.
    * FIXED   - Default checkbox appearance now hidden with appearance: none.
                Custom checkboxes: white border, filled color on check, channel color accent.
    * FIXED   - Option backgrounds now visible: added border + !important for scoping (MapLibre).
    * ENHANCED - Button colors now brighter and more visually distinct:
                * Eco: #3aa854 (vibrant saturated green)
                * MDX: #6b3a76 (vibrant saturated purple)
                * Both: gradient(135deg, #3aa854 50%, #6b3a76 50%)
    * ADDED   - Tippy z-index rule to ensure tooltips visible over popup.
    * ADDED   - .viridians-jurisdictions-map-popup-btn-wrap for Tippy wrapper element.
  - v5.2.0 (2026-03-27): CHECKBOX TIPPY + ENHANCED BACKGROUNDS + DYNAMIC BUTTON TOOLTIP.
    * ADDED   - Tippy.js tooltips to eco and mdx checkboxes showing channel-specific guides.
    * ENHANCED - Option item backgrounds now more visible: increased padding, added subtle shadow.
    * ADDED   - Channel-specific checkbox accent colors (eco green #2e5d3a, mdx violet #8b5cf6).
    * FIXED   - Button Tippy now updates dynamically:
                - Disabled state: "Select at least one channel to proceed."
                - Enabled state: "Click to view triggers below"
  - v5.1.0 (2026-03-27): TIPPY i18n WIRING COMPLETE.
  - v4.0.0 (2026-03-27): WHITE PANEL INNER + BUTTON PREVIEW SYSTEM.
    * ADDED   - .sdx-white-panel-inner wrapper for channel selection area. High-contrast
                white background solves text-on-dark-teal legibility issue.
                Selection checkbox area now sits on clean white, not against #123543.
    * CHANGED  - Channel item background: rgba tints (0.65–0.78) on dark →
                 light gray (#f9f9f0) on white. 3px left border accent retained.
                 Checkbox accent color: amber → deep eco green #2e5d3a on white.
                 Span text: white → #123543 dark inside white panel.
    * ADDED   - Button data-state attribute: "none", "eco", "mdx", "both".
                JavaScript (viridianMapPopupUpdateButtonState) updates state on checkbox change.
    * CHANGED  - Button appearance now dynamic, matching selected channels:
                 * none: amber #f5b014 (disabled, utility colour).
                 * eco: deep green #2e5d3a (eco channel selected).
                 * mdx: MamaDEX violet #8b5cf6 (mdx channel selected).
                 * both: linear-gradient(135deg, #2e5d3a 50%, #8b5cf6 50%)
                   Hard-edge razor-split at 135 degrees. Button is a **visual promise**
                   of the dual-channel card rows below.
    * REMOVED - Tinted channel backgrounds on dark panel. No longer needed now that
                content sits on white. Simplifies UI and improves parsing.
    * RULE     - White panel inner is ALWAYS white. Never affected by [data-theme].
                 MapLibre popup sits outside normal cascade, so no dark mode override
                 needed or permitted (§19-HR11 still in force).
  - v3.0.0 (2026-03-27): BKT FLOATING PANEL §19.2 COMPLIANCE — full surface rebuild.
    [Previous changes abbreviated]


/* ==========================================================================
   MAPLIBRE POPUP CONTAINER OVERRIDES
   BKT Floating Panel §19.2 — always-dark surface. Theme-invariant.
   ========================================================================== */

.maplibregl-popup {
  /* Defensive anchoring for MapLibre's transform translate() */
  position:       absolute;
  top:            0;
  left:           0;
  will-change:    transform;
  pointer-events: none;
  max-width:      392px !important;
  z-index:        1000;
}

body.page-viridians-jurisdictions .maplibregl-popup-content {
  pointer-events: auto;

  /* Keep the outer MapLibre wrapper neutral: delegate visible styling to inner panel. */
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  max-width: 392px;
  min-width: 352px;
}

body.page-viridians-jurisdictions .viridians-jurisdictions-map-popup {
  /* §19.2 surface — always-dark, theme-invariant */
  background:    #123543;                            /* --sdx-color-ui-popup-surface */
  border:        1px solid rgba(245, 176, 20, 0.28); /* mama-amber at 28% — §19.2 */
  border-radius: 0.75rem;
  box-shadow:    0 8px 32px rgba(0, 0, 0, 0.55);    /* §19.2 */
  padding:       1.5rem;
}

body.page-viridians-jurisdictions .maplibregl-popup.viridians-map-hover-preview {
  pointer-events: none;
  max-width: 18rem !important;
  z-index: 1001;
}

body.page-viridians-jurisdictions .maplibregl-popup.viridians-map-hover-preview .maplibregl-popup-content {
  min-width: 0;
  max-width: 18rem;
  padding: 0.875rem;
  background: #123543;
  border: 1px solid rgba(245, 176, 20, 0.28);
  border-radius: 0.75rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.34);
}

body.page-viridians-jurisdictions .maplibregl-popup.viridians-map-hover-preview .maplibregl-popup-tip {
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent !important;
}

body.page-viridians-jurisdictions .maplibregl-popup.viridians-map-hover-preview.maplibregl-popup-anchor-top .maplibregl-popup-tip,
body.page-viridians-jurisdictions .maplibregl-popup.viridians-map-hover-preview.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
body.page-viridians-jurisdictions .maplibregl-popup.viridians-map-hover-preview.maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
  border-bottom-color: #123543 !important;
}

body.page-viridians-jurisdictions .maplibregl-popup.viridians-map-hover-preview.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
body.page-viridians-jurisdictions .maplibregl-popup.viridians-map-hover-preview.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
body.page-viridians-jurisdictions .maplibregl-popup.viridians-map-hover-preview.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
  border-top-color: #123543 !important;
}

body.page-viridians-jurisdictions .maplibregl-popup.viridians-map-hover-preview.maplibregl-popup-anchor-left .maplibregl-popup-tip {
  border-right-color: #123543 !important;
}

body.page-viridians-jurisdictions .maplibregl-popup.viridians-map-hover-preview.maplibregl-popup-anchor-right .maplibregl-popup-tip {
  border-left-color: #123543 !important;
}

.viridians-map-hover-preview-panel {
  display: grid;
  gap: 0.5rem;
  background: #ffffff;
  border-radius: 0.625rem;
  padding: 0.875rem 0.9375rem;
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.08);
}

.viridians-map-hover-preview-header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.viridians-map-hover-preview-flag {
  width: 26px;
  height: 19px;
  border-radius: 0.1875rem;
  box-shadow:
    0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.16),
    0 0.1875rem 0.5rem rgba(0, 0, 0, 0.12);
  flex: 0 0 auto;
  object-fit: cover;
}

.viridians-map-hover-preview-card {
  display: block;
}

.viridians-map-hover-preview-title {
  color: #123543;
  font-size: 1.125rem;
  line-height: 1.15;
  font-weight: 700;
}

.viridians-map-hover-preview-meta {
  font-size: 0.95rem;
  line-height: 1.4;
  color: #415161;
}

/* Close button — white on dark per §19.2 */
body.page-viridians-jurisdictions .maplibregl-popup-close-button {
  position:    absolute;
  top:         0.45rem;
  right:       0.5rem;
  font-size:   0;
  color:       transparent;
  padding:     0;
  width:       2rem;
  height:      2rem;
  line-height: 1;
  display:     flex;
  align-items: center;
  justify-content: center;
  transition:  color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
  background:  rgba(255, 255, 255, 0.94);
  border:      none;
  border-radius: 999px;
  box-shadow:  0 6px 16px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(255, 255, 255, 0.32);
  text-shadow: none;
  cursor:      pointer;
  z-index:     10;
}

body.page-viridians-jurisdictions .maplibregl-popup-close-button::before,
body.page-viridians-jurisdictions .maplibregl-popup-close-button::after {
  content: "";
  position: absolute;
  width: 0.95rem;
  height: 2px;
  border-radius: 999px;
  background: #123543;
  left: 50%;
  top: 50%;
  transform-origin: center;
  transition: background-color 0.18s ease;
}

body.page-viridians-jurisdictions .maplibregl-popup-close-button::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

body.page-viridians-jurisdictions .maplibregl-popup-close-button::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

body.page-viridians-jurisdictions .maplibregl-popup-close-button:hover {
  background:       #ffffff;
  box-shadow:       0 6px 14px rgba(0, 0, 0, 0.24);
}

body.page-viridians-jurisdictions .maplibregl-popup-close-button:hover::before,
body.page-viridians-jurisdictions .maplibregl-popup-close-button:hover::after {
  background: #0d2e39;
}

body.page-viridians-jurisdictions .maplibregl-popup-close-button:focus-visible {
  outline:        2px solid rgba(245, 176, 20, 0.92);
  outline-offset: 2px;
}

/* Popup tips — match dark surface with directional triangle only */
body.page-viridians-jurisdictions .maplibregl-popup-anchor-top .maplibregl-popup-tip,
body.page-viridians-jurisdictions .maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
body.page-viridians-jurisdictions .maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
  border-bottom-color: #123543 !important;
}

body.page-viridians-jurisdictions .maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
body.page-viridians-jurisdictions .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
body.page-viridians-jurisdictions .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
  border-top-color: #123543 !important;
}

body.page-viridians-jurisdictions .maplibregl-popup-anchor-left .maplibregl-popup-tip {
  border-right-color: #123543 !important;
}

body.page-viridians-jurisdictions .maplibregl-popup-anchor-right .maplibregl-popup-tip {
  border-left-color: #123543 !important;
}

/* ==========================================================================
   POPUP WRAPPER
   ========================================================================== */

.viridians-jurisdictions-map-popup {
  display:        flex;
  flex-direction: column;
  gap:            2rem;
}

/* ==========================================================================
   WHITE PANEL INNER — High-Contrast Selection Container
   Provides clean white background for channel checkboxes + header.
   Solves the "text on teal" contrast issue by moving content to white.
   ========================================================================== */

.sdx-white-panel-inner {
  background:    #ffffff;
  border-radius: 0.5rem;
  padding:       1rem;
  box-shadow:    inset 0 1px 3px rgba(0, 0, 0, 0.10);
}

/* Force high-contrast dark text inside white well */
.sdx-white-panel-inner .viridians-jurisdictions-map-popup-title {
  color:       #123543;
  font-weight: 700;
  margin:      0;
}

/* ==========================================================================
   HEADER — FLAG + TITLE (inside white panel)
   ========================================================================== */

.viridians-jurisdictions-map-popup-header {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  align-items: center;
  column-gap: 0.875rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.viridians-jurisdictions-map-popup-flag {
  width:         42px;
  height:        31px;                               /* fixed asset size — px exception */
  border-radius: 3px;
  justify-self:  center;
  object-fit:    cover;
  background:    #ffffff;
  border:        1px solid rgba(18, 53, 67, 0.14);
  box-shadow:    0 2px 4px rgba(0, 0, 0, 0.16);
}

.viridians-jurisdictions-map-popup-flag[src=""],
.viridians-jurisdictions-map-popup-flag:not([src]) {
  display: none;
}

.viridians-jurisdictions-map-popup-title {
  grid-column: 2;
  font-size:   1.0625rem;
  line-height: 1.22;
  font-family: "Libre Baskerville", Georgia, serif;
  font-weight: 700;
  color:       #ffffff;                              /* default: overridden inside white panel */
  margin:      0;
  text-align:  left;
}

/* ==========================================================================
   CHANNEL CHECKBOXES (inside white panel)
   ========================================================================== */

.viridians-jurisdictions-map-popup-channels {
  display:        flex;
  flex-direction: column;
  gap:            0.75rem;
  margin-top:     1rem;
}

.viridians-jurisdictions-map-popup-channel-item {
  position:      relative;
  display:       block;
  cursor:        pointer;
  user-select:   none;
  min-height:    3.5rem;
  padding:       0;
  border-radius: 0.625rem;
  overflow:      hidden;
  transition:    background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  background:    #f8f8f4;
  box-shadow:    inset 0 1px 0 rgba(255, 255, 255, 0.65);
  border:        1px solid rgba(18, 53, 67, 0.12);
}

.viridians-jurisdictions-map-popup-channel-item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4rem;
}

.viridians-jurisdictions-map-popup-channel-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(18, 53, 67, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.viridians-jurisdictions-map-popup-channel-item[data-channel="eco"] {
  color: #123543;
}

.viridians-jurisdictions-map-popup-channel-item[data-channel="eco"]::before {
  background: linear-gradient(180deg, rgba(70, 72, 32, 0.96) 0%, rgba(70, 72, 32, 0.88) 100%);
}

.viridians-jurisdictions-map-popup-channel-item[data-channel="mdx"] {
  color: #123543;
}

.viridians-jurisdictions-map-popup-channel-item[data-channel="mdx"]::before {
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.96) 0%, rgba(139, 92, 246, 0.88) 100%);
}

.viridians-jurisdictions-map-popup-channel-item input[type="checkbox"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.viridians-jurisdictions-map-popup-channel-item:has(input:focus-visible) {
  outline: 2px solid rgba(47, 92, 104, 0.55);
  outline-offset: 2px;
}

.viridians-jurisdictions-map-popup-channel-text {
  position:      relative;
  z-index:       1;
  display:       block;
  padding:       0.875rem 1rem 0.875rem 5rem;
  font-size:     0.9375rem;
  font-weight:   600;
  color:         #123543;
  line-height:   1.35;
  font-family:   "Inter", system-ui, sans-serif;
}

.viridians-jurisdictions-map-popup-channel-mark {
  position:      absolute;
  top:           50%;
  left:          1.25rem;
  transform:     translateY(-50%) scale(0.85);
  z-index:       1;
  width:         1.5rem;
  height:        1.5rem;
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  border-radius: 999px;
  color:         rgba(255, 255, 255, 0.92);
  background:    rgba(255, 255, 255, 0.10);
  font-size:     1rem;
  font-weight:   800;
  line-height:   1;
  border:        1px solid rgba(255, 255, 255, 0.22);
  opacity:       0;
  transition:    color 0.16s ease, background-color 0.16s ease, transform 0.16s ease, opacity 0.16s ease, border-color 0.16s ease;
}

.viridians-jurisdictions-map-popup-channel-item:has(input:checked) .viridians-jurisdictions-map-popup-channel-mark {
  opacity: 1;
  color: #123543;
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(255, 255, 255, 0.92);
  transform: translateY(-50%) scale(1);
  box-shadow: 0 2px 6px rgba(18, 53, 67, 0.16);
}

.viridians-jurisdictions-map-popup-channel-item[data-channel="eco"]:has(input:checked) {
  background: linear-gradient(90deg, rgba(70, 72, 32, 0.16) 0%, rgba(70, 72, 32, 0.08) 100%);
  border-color: rgba(70, 72, 32, 0.32);
  box-shadow: inset 0 0 0 2px rgba(70, 72, 32, 0.16);
}

.viridians-jurisdictions-map-popup-channel-item[data-channel="mdx"]:has(input:checked) {
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.16) 0%, rgba(139, 92, 246, 0.08) 100%);
  border-color: rgba(139, 92, 246, 0.34);
  box-shadow: inset 0 0 0 2px rgba(139, 92, 246, 0.16);
}

body[dir="rtl"] .viridians-jurisdictions-map-popup-channel-item::before {
  inset: 0 0 0 auto;
}

body[dir="rtl"] .viridians-jurisdictions-map-popup-channel-text {
  padding: 0.875rem 5rem 0.875rem 1rem;
  text-align: right;
}

body[dir="rtl"] .viridians-jurisdictions-map-popup-channel-mark {
  left: auto;
  right: 1.25rem;
}

/* ==========================================================================
   HELPER TEXT — REMOVED (use Tippy tooltip instead)
   ========================================================================== */

.viridians-jurisdictions-map-popup-helper {
  display: none !important;
}


/* ==========================================================================
   PRIMARY ACTION BUTTON — Visual Preview of Selected Channels
   Dynamic button that changes appearance based on selected channels.
   - data-state="none": muted (disabled)
   - data-state="eco": deep green (eco selected)
   - data-state="mdx": MamaDEX violet (mdx selected)
   - data-state="both": 135-degree hard split (both selected)
   ========================================================================== */

.viridians-jurisdictions-map-popup-btn {
  width:         100%;
  min-height:    3.25rem;
  padding:       0.875rem 1.5rem;
  border-radius: 0.625rem;
  font-weight:   700;
  font-size:     0.9375rem;
  border:        none;
  cursor:        pointer;
  font-family:   "Inter", system-ui, sans-serif;
  text-align:    center;
  line-height:   1.2;
  box-shadow:    0 10px 24px rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition:    background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, filter 0.18s ease;
  overflow:      hidden;
  isolation:     isolate;
}

/* State: None (Disabled, muted) */
.viridians-jurisdictions-map-popup-btn[data-state="none"],
.viridians-jurisdictions-map-popup-btn:disabled {
  background:  linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.08) 100%);
  color:       rgba(240, 235, 227, 0.56);
  cursor:      not-allowed;
  opacity:     1;
  box-shadow:  inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.viridians-jurisdictions-map-popup-btn[data-state="none"]:hover,
.viridians-jurisdictions-map-popup-btn:disabled:hover {
  transform: none;
  filter:    none;
}

/* State: ECO (Spec green) */
.viridians-jurisdictions-map-popup-btn[data-state="eco"]:not(:disabled) {
  background: linear-gradient(180deg, rgba(70, 72, 32, 0.96) 0%, rgba(70, 72, 32, 0.88) 100%);
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(70, 72, 32, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  font-weight: 700;
}

.viridians-jurisdictions-map-popup-btn[data-state="eco"]:not(:disabled):hover {
  filter:     brightness(1.06);
  transform:  translateY(-2px);
  box-shadow: 0 14px 28px rgba(70, 72, 32, 0.56), inset 0 0 0 1px rgba(255, 255, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* State: MDX (Spec purple) */
.viridians-jurisdictions-map-popup-btn[data-state="mdx"]:not(:disabled) {
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.98) 0%, rgba(139, 92, 246, 0.88) 100%);
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(139, 92, 246, 0.34), inset 0 0 0 1px rgba(255, 255, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  font-weight: 700;
}

.viridians-jurisdictions-map-popup-btn[data-state="mdx"]:not(:disabled):hover {
  filter:     brightness(1.06);
  transform:  translateY(-2px);
  box-shadow: 0 14px 28px rgba(139, 92, 246, 0.44), inset 0 0 0 1px rgba(255, 255, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* State: BOTH (The 135-degree Hard Split) — Visual Promise */
.viridians-jurisdictions-map-popup-btn[data-state="both"]:not(:disabled) {
  background: linear-gradient(135deg, rgba(70, 72, 32, 0.98) 0 48%, rgba(139, 92, 246, 0.96) 52% 100%);
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.60);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.30), inset 0 0 0 1px rgba(255, 255, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  font-weight: 700;
}

.viridians-jurisdictions-map-popup-btn[data-state="both"]:not(:disabled):hover {
  filter:     brightness(1.08);
  transform:  translateY(-2px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.40), inset 0 0 0 1px rgba(255, 255, 255, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.viridians-jurisdictions-map-popup-btn:focus:not(:disabled),
.viridians-jurisdictions-map-popup-btn:focus-visible {
  outline:        3px solid rgba(245, 176, 20, 0.90);
  outline-offset: 3px;
  box-shadow:     0 0 0 3px rgba(245, 176, 20, 0.25);
}

/* Tippy popper styles — ensure visibility over MapLibre popup */
.tippy-box {
  z-index: 9999 !important;
}


/* ==========================================================================
   MOBILE RESPONSIVE
   ========================================================================== */

@media (max-width: 480px) {
  body.page-viridians-jurisdictions .maplibregl-popup {
    max-width: calc(100vw - 0.75rem) !important;
  }

  body.page-viridians-jurisdictions .maplibregl-popup.viridians-map-hover-preview {
    max-width: calc(100vw - 1rem) !important;
  }

  body.page-viridians-jurisdictions .maplibregl-popup-content {
    min-width: 0;
    width: min(18.5rem, calc(100vw - 1rem));
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    padding: 0.625rem;
  }

  body.page-viridians-jurisdictions .maplibregl-popup.viridians-map-hover-preview .maplibregl-popup-content {
    max-width: calc(100vw - 1rem);
    width: min(16rem, calc(100vw - 1rem));
    padding: 0.75rem;
  }

  body.page-viridians-jurisdictions .viridians-jurisdictions-map-popup {
    gap: 1rem;
    padding: 0.875rem;
    border-radius: 0.6875rem;
  }

  .sdx-white-panel-inner {
    padding: 0.75rem;
  }

  .viridians-jurisdictions-map-popup-header {
    grid-template-columns: 3.5rem minmax(0, 1fr);
    column-gap: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .viridians-jurisdictions-map-popup-flag {
    width: 36px;
    height: 27px;
  }

  .viridians-jurisdictions-map-popup-title {
    font-size: 0.9375rem;
    line-height: 1.25;
  }

  .viridians-jurisdictions-map-popup-channels {
    gap: 0.625rem;
    margin-top: 0.75rem;
  }

  .viridians-jurisdictions-map-popup-channel-item {
    min-height: 3rem;
  }

  .viridians-jurisdictions-map-popup-channel-item::before {
    width: 3.25rem;
  }

  .viridians-jurisdictions-map-popup-channel-text {
    padding: 0.75rem 0.75rem 0.75rem 4rem;
    font-size: 0.875rem;
    line-height: 1.3;
  }

  .viridians-jurisdictions-map-popup-channel-mark {
    left: 0.9375rem;
    width: 1.25rem;
    height: 1.25rem;
    font-size: 0.875rem;
  }

  body[dir="rtl"] .viridians-jurisdictions-map-popup-channel-text {
    padding: 0.75rem 4rem 0.75rem 0.75rem;
  }

  body[dir="rtl"] .viridians-jurisdictions-map-popup-channel-mark {
    right: 0.9375rem;
  }

  .viridians-jurisdictions-map-popup-btn {
    min-height: 3rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
  }
}

@media (min-width: 481px) and (max-width: 767px) {
  body.page-viridians-jurisdictions .maplibregl-popup {
    max-width: calc(100vw - 1rem) !important;
  }

  body.page-viridians-jurisdictions .maplibregl-popup.viridians-map-hover-preview {
    max-width: calc(100vw - 1.5rem) !important;
  }

  body.page-viridians-jurisdictions .maplibregl-popup-content {
    min-width: 0;
    width: min(19.5rem, calc(100vw - 1rem));
    max-height: calc(100vh - 6.5rem);
    overflow-y: auto;
    padding: 0.75rem;
  }

  body.page-viridians-jurisdictions .maplibregl-popup.viridians-map-hover-preview .maplibregl-popup-content {
    max-width: calc(100vw - 1.5rem);
    width: min(17rem, calc(100vw - 1.5rem));
  }

  body.page-viridians-jurisdictions .viridians-jurisdictions-map-popup {
    gap: 1.25rem;
    padding: 1rem;
  }

  .sdx-white-panel-inner {
    padding: 0.875rem;
  }

  .viridians-jurisdictions-map-popup-channel-item::before {
    width: 3.5rem;
  }

  .viridians-jurisdictions-map-popup-channel-text {
    padding: 0.8125rem 0.875rem 0.8125rem 4.25rem;
  }

  body[dir="rtl"] .viridians-jurisdictions-map-popup-channel-text {
    padding: 0.8125rem 4.25rem 0.8125rem 0.875rem;
  }
}

/* ==========================================================================
   NO DARK MODE OVERRIDE — §19-HR11
   Surface is always-dark by design. #123543 in both themes.
   [data-theme="dark"] override blocks are PROHIBITED on this component.
   ========================================================================== */