/* ── Mindway Coverage Map v6 ─────────────────────────────── */
:root {
    --mcm-bg: #f4f5f9;
    --mcm-white: #ffffff;
    --mcm-brand: #455CB5;
    --mcm-brand-light: #eef1fa;
    --mcm-gs: #3498db;
    --mcm-gm: #27ae60;
    --mcm-both: #6C5CE7;
    --mcm-text: #1a1e36;
    --mcm-sub: #5c6280;
    --mcm-muted: #9298b5;
    --mcm-border: #e2e5ef;
    --mcm-border-light: #eceef5;
    --mcm-shadow: 0 1px 3px rgba(26,30,54,0.06), 0 4px 16px rgba(26,30,54,0.04);
    --mcm-shadow-lg: 0 4px 12px rgba(26,30,54,0.08), 0 12px 32px rgba(26,30,54,0.06);
    --mcm-radius: 16px;
    --mcm-radius-sm: 10px;
}

@keyframes mcmCardIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes mcmFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Root wrapper + reset ────────────────────────────────── */
.mcm-wrapper .mcm-wrap {
    background: var(--mcm-bg);
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--mcm-text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
.mcm-wrapper .mcm-wrap * { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Hero ────────────────────────────────────────────────── */
.mcm-wrapper .mcm-hero {
    background: var(--mcm-white);
    padding: 56px 32px 52px;
    text-align: center;
}
.mcm-wrapper .mcm-hero-inner { max-width: 780px; margin: 0 auto; }
.mcm-wrapper .mcm-hero-label {
    display: inline-block;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--mcm-brand);
    margin-bottom: 16px;
}
.mcm-wrapper .mcm-hero-h1 {
    font-family: 'Outfit', sans-serif;
    font-size: 42px; font-weight: 800; line-height: 1.15;
    letter-spacing: -0.03em; color: var(--mcm-text);
    margin-bottom: 16px;
}
.mcm-wrapper .mcm-hl { color: var(--mcm-brand); }
.mcm-wrapper .mcm-hero-sub {
    font-size: 16px; color: var(--mcm-sub); line-height: 1.7;
    max-width: 620px; margin: 0 auto 36px;
}
.mcm-wrapper .mcm-hero-stats {
    display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}
.mcm-wrapper .mcm-stat-card {
    flex: 0 0 auto;
    width: 150px; height: 92px;
    box-sizing: border-box;
    background: var(--mcm-bg); border: 1px solid var(--mcm-border);
    border-radius: 14px; padding: 14px 10px; text-align: center;
}
.mcm-wrapper .mcm-stat-num {
    font-family: 'Outfit', sans-serif;
    font-size: 32px; font-weight: 800; color: var(--mcm-brand);
    letter-spacing: -0.03em; line-height: 1; white-space: nowrap;
}
.mcm-wrapper .mcm-stat-lbl {
    font-size: 11px; font-weight: 700; color: var(--mcm-muted);
    text-transform: uppercase; letter-spacing: 0.08em; margin-top: 8px;
}

/* Product links (between stats and search) */
.mcm-wrapper .mcm-product-links {
    display: flex; gap: 32px; justify-content: center; flex-wrap: wrap;
    margin-top: 28px;
}
.mcm-wrapper .mcm-product-link {
    font-size: 15px; font-weight: 500; color: var(--mcm-brand);
    text-decoration: none; transition: text-decoration-color 0.15s;
}
.mcm-wrapper .mcm-product-link:hover {
    text-decoration: underline;
}

/* ── Search ──────────────────────────────────────────────── */
.mcm-wrapper .mcm-search-section {
    max-width: 520px; margin: 32px auto 0; padding: 0 32px;
}
.mcm-wrapper .mcm-search-box { position: relative; }
.mcm-wrapper .mcm-search-icon {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px; color: var(--mcm-muted); pointer-events: none;
}
.mcm-wrapper .mcm-search-input {
    width: 100% !important; padding: 14px 18px 14px 46px !important;
    border: 1px solid var(--mcm-border) !important; border-radius: 12px !important;
    background: var(--mcm-white) !important; font-family: inherit !important;
    font-size: 14px !important; color: var(--mcm-text) !important;
    outline: none; transition: border-color 0.2s, box-shadow 0.2s;
    box-shadow: none !important;
}
.mcm-wrapper .mcm-search-input::placeholder { color: var(--mcm-muted); }
.mcm-wrapper .mcm-search-input:focus {
    border-color: var(--mcm-brand) !important;
    box-shadow: 0 0 0 3px rgba(69,92,181,0.1) !important;
}
.mcm-wrapper .mcm-instant { margin-top: 10px; }
.mcm-wrapper .mcm-instant-card {
    display: flex; align-items: center; gap: 14px;
    background: var(--mcm-white); border: 1px solid var(--mcm-border);
    border-radius: var(--mcm-radius-sm); padding: 14px 18px;
    box-shadow: var(--mcm-shadow); cursor: pointer;
    transition: border-color 0.15s;
    animation: mcmFadeIn 0.2s ease;
}
.mcm-wrapper .mcm-instant-card:hover { border-color: var(--mcm-brand); }
.mcm-wrapper .mcm-instant-iso {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; letter-spacing: 0.04em; flex-shrink: 0;
}
.mcm-wrapper .mcm-instant-info { flex: 1; }
.mcm-wrapper .mcm-instant-name { font-size: 15px; font-weight: 700; color: var(--mcm-text); }
.mcm-wrapper .mcm-instant-region { font-size: 12px; color: var(--mcm-sub); }
.mcm-wrapper .mcm-instant-pills { display: flex; gap: 6px; flex-shrink: 0; }
.mcm-wrapper .mcm-pill-sm {
    font-size: 11px; font-weight: 600; padding: 4px 10px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--pc) 8%, white);
    color: var(--pc);
}

/* ── Region tabs above the map ───────────────────────────── */
.mcm-wrapper .mcm-map-tabs-section {
    max-width: 1280px; margin: 24px auto 0; padding: 0 32px;
}
.mcm-wrapper .mcm-map-tabs-section .mcm-tabs {
    margin-bottom: 0; /* map sits directly below — no extra gap */
}

/* ── SVG Map Section ─────────────────────────────────────── */
.mcm-wrapper .mcm-map-section {
    max-width: 1280px; margin: 12px auto 0; padding: 0 32px;
}

/* Scrollable viewport — fixed aspect ratio, scroll-to-pan when zoomed */
.mcm-wrapper .mcm-map-viewport {
    overflow: auto;
    aspect-ratio: 980 / 459;
    border-radius: 20px;
    background: #0a0f1a;
    position: relative;
    scroll-behavior: smooth;
    cursor: grab;
    /* Hide scrollbars but keep scrollable */
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE/Edge */
}
.mcm-wrapper .mcm-map-viewport::-webkit-scrollbar { display: none; }
.mcm-wrapper .mcm-map-viewport.mcm-grabbing { cursor: grabbing; }

/* Inner wrapper — scaled via CSS transform on region zoom.
   Initial transform matches regionZoom.all so NZ sits in frame on first load
   without a visible animation. JS overrides this when other regions are picked. */
.mcm-wrapper .mcm-map-inner {
    width: 100%; height: 100%;
    box-sizing: content-box;
    transform-origin: top left;
    transform: scale(1) translate(0, 0);
    transition: transform 0.5s ease;
}
.mcm-wrapper .mcm-map-viewport.mcm-zoomed .mcm-map-inner {
    padding-right: 30%;
    padding-bottom: 30%;
}

/* Inline SVG fills the inner wrapper */
.mcm-wrapper .mcm-map-inner svg {
    width: 100%; height: 100%;
    display: block;
}

/* Default stroke for all country borders */
.mcm-wrapper .mcm-map-viewport path {
    stroke: #0a0f1a;
    stroke-width: 0.3;
}

/* ── Country coverage classes ────────────────────────────── */
/* Works on both standalone <path id="xx"> and <g id="xx"> elements.
   SVG fill is inherited, so setting it on a <g> propagates to child paths. */
.mcm-wrapper .mcm-country--inactive       { fill: #3a4658; }
.mcm-wrapper .mcm-country--gs             { fill: var(--mcm-gs);   cursor: pointer; }
.mcm-wrapper .mcm-country--gm             { fill: var(--mcm-gm);   cursor: pointer; }
.mcm-wrapper .mcm-country--both           { fill: var(--mcm-both); cursor: pointer; }

/* Explicit child-path rules for grouped countries (belt & suspenders) */
.mcm-wrapper g.mcm-country--inactive path { fill: #3a4658; }
.mcm-wrapper g.mcm-country--gs       path { fill: var(--mcm-gs); }
.mcm-wrapper g.mcm-country--gm       path { fill: var(--mcm-gm); }
.mcm-wrapper g.mcm-country--both     path { fill: var(--mcm-both); }

/* Hover — brightness lift on both path and group */
.mcm-wrapper .mcm-country--gs:hover,
.mcm-wrapper .mcm-country--gm:hover,
.mcm-wrapper .mcm-country--both:hover  { filter: brightness(1.35); }

/* Card-hover cross-highlight */
.mcm-wrapper .mcm-country--hl          { filter: brightness(1.25); }

/* Selected (clicked) country */
.mcm-wrapper .mcm-country--sel         { filter: brightness(1.6) !important; }

/* Dimmed when region tab filters out this country */
.mcm-wrapper .mcm-country--dim         { opacity: 0.15; }

/* ── Legend filter — fade non-matching countries to inactive grey ── */
/* Smooth fill transition for the fade animation. Each filter rule must
   include both the standalone .mcm-country--XX path AND the
   g.mcm-country--XX > path child selector to win specificity over the
   base coverage rules. */
.mcm-wrapper .mcm-map-viewport path { transition: fill 0.3s ease; }

/* Filter: GameScanner — fade GM-only countries (GS-only & Both stay coloured) */
.mcm-wrapper .mcm-map-viewport.mcm-filter-gs .mcm-country--gm,
.mcm-wrapper .mcm-map-viewport.mcm-filter-gs g.mcm-country--gm path { fill: #3a4658; }

/* Filter: Gamalyze — fade GS-only countries (GM-only & Both stay coloured) */
.mcm-wrapper .mcm-map-viewport.mcm-filter-gm .mcm-country--gs,
.mcm-wrapper .mcm-map-viewport.mcm-filter-gm g.mcm-country--gs path { fill: #3a4658; }

/* Filter: Both Solutions — fade GS-only AND GM-only (only purple stays) */
.mcm-wrapper .mcm-map-viewport.mcm-filter-both .mcm-country--gs,
.mcm-wrapper .mcm-map-viewport.mcm-filter-both .mcm-country--gm,
.mcm-wrapper .mcm-map-viewport.mcm-filter-both g.mcm-country--gs path,
.mcm-wrapper .mcm-map-viewport.mcm-filter-both g.mcm-country--gm path { fill: #3a4658; }

/* ── Path tooltip ────────────────────────────────────────── */
/* Absolute inside .mcm-map-viewport (which is position:relative) */
.mcm-wrapper .mcm-path-tooltip {
    position: absolute; z-index: 20;
    background: var(--mcm-white);
    border: 1px solid var(--mcm-border);
    border-radius: var(--mcm-radius-sm);
    padding: 10px 12px;
    box-shadow: var(--mcm-shadow-lg);
    pointer-events: none;
    min-width: 148px; max-width: 220px;
    animation: mcmFadeIn 0.12s ease;
}
.mcm-wrapper .mcm-tip-header {
    display: flex; align-items: center; gap: 8px;
}
.mcm-wrapper .mcm-tip-iso {
    width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
}
.mcm-wrapper .mcm-tip-body  { flex: 1; min-width: 0; }
.mcm-wrapper .mcm-tip-name  {
    font-size: 13px; font-weight: 700; color: var(--mcm-text);
    line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mcm-wrapper .mcm-tip-region { font-size: 11px; color: var(--mcm-sub); margin-top: 2px; }
.mcm-wrapper .mcm-tip-pills  { display: flex; gap: 4px; margin-top: 7px; flex-wrap: wrap; }

/* Arrow pointer — rotated square at the edge of the tooltip card */
.mcm-wrapper .mcm-path-tooltip::after {
    content: ''; position: absolute;
    width: 8px; height: 8px;
    background: var(--mcm-white);
}
/* Tooltip above cursor → arrow points down */
.mcm-wrapper .mcm-path-tooltip[data-arrow="down"]::after {
    bottom: -5px; left: 18px;
    border-right: 1px solid var(--mcm-border);
    border-bottom: 1px solid var(--mcm-border);
    transform: rotate(45deg);
}
/* Tooltip below cursor (near top edge) → arrow points up */
.mcm-wrapper .mcm-path-tooltip[data-arrow="up"]::after {
    top: -5px; left: 18px;
    border-left: 1px solid var(--mcm-border);
    border-top: 1px solid var(--mcm-border);
    transform: rotate(45deg);
}

/* ── Standalone legend (below the map, outside dark container) ── */
.mcm-wrapper .mcm-legend-section {
    max-width: 1280px; margin: 20px auto 0; padding: 0 32px;
    display: flex; gap: 32px; justify-content: center;
    align-items: center; flex-wrap: wrap;
}
/* Each legend item is a clickable filter <button> — reset native button
   styling and dress it as a pill that shows hover + active states. */
.mcm-wrapper .mcm-lg-item {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: inherit; font-size: 14px; font-weight: 500;
    color: var(--mcm-sub);
    background: transparent;
    border: 1px solid transparent;
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.mcm-wrapper .mcm-lg-item:hover {
    background: rgba(69, 92, 181, 0.06);
    border-color: var(--mcm-border);
    color: var(--mcm-text);
}
.mcm-wrapper .mcm-lg-item.mcm-lg-active {
    background: rgba(69, 92, 181, 0.10);
    border-color: var(--mcm-brand);
    color: var(--mcm-brand);
}
.mcm-wrapper .mcm-lg-dot { width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0; }

/* ── Country Detail Card ─────────────────────────────────── */
.mcm-wrapper .mcm-detail {
    max-width: 1280px; margin: 16px auto 0; padding: 0 32px;
    scroll-margin-top: 120px; /* clears fixed nav on the Mindway site */
}
.mcm-wrapper .mcm-detail-inner {
    display: flex; align-items: center; gap: 16px;
    background: var(--mcm-white); border: 1px solid var(--mcm-border);
    border-radius: var(--mcm-radius); padding: 18px 24px;
    box-shadow: var(--mcm-shadow);
    animation: mcmCardIn 0.25s ease both;
}
.mcm-wrapper .mcm-detail-iso {
    width: 48px; height: 48px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 700; letter-spacing: 0.04em; flex-shrink: 0;
}
.mcm-wrapper .mcm-detail-info { flex: 1; }
.mcm-wrapper .mcm-detail-name {
    font-family: 'Outfit', sans-serif;
    font-size: 18px; font-weight: 700; color: var(--mcm-text);
}
.mcm-wrapper .mcm-detail-region { font-size: 13px; color: var(--mcm-sub); }
.mcm-wrapper .mcm-detail-pills { display: flex; gap: 8px; flex-shrink: 0; }
.mcm-wrapper .mcm-pill-tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 8px; font-size: 12px; font-weight: 600;
    background: color-mix(in srgb, var(--pc) 8%, white);
    color: var(--pc); border: 1px solid color-mix(in srgb, var(--pc) 18%, white);
}
.mcm-wrapper .mcm-pill-d { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.mcm-wrapper .mcm-detail-x {
    width: 32px; height: 32px;
    border: none !important; background: var(--mcm-bg) !important;
    border-radius: 8px !important; cursor: pointer; font-size: 18px;
    color: var(--mcm-muted) !important;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: background 0.15s, color 0.15s;
    box-shadow: none !important;
}
.mcm-wrapper .mcm-detail-x:hover {
    background: var(--mcm-border) !important;
    color: var(--mcm-text) !important;
}

/* ── Explore: Tabs + Grid ────────────────────────────────── */
.mcm-wrapper .mcm-explore {
    max-width: 1280px; margin: 48px auto 0; padding: 0 32px 64px;
}
.mcm-wrapper .mcm-explore-title {
    font-family: 'Outfit', sans-serif;
    font-size: 24px; font-weight: 800; color: var(--mcm-text);
    letter-spacing: -0.02em; margin-bottom: 18px;
}
.mcm-wrapper .mcm-tabs {
    display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap;
}
.mcm-wrapper .mcm-tab {
    padding: 10px 20px !important;
    border-radius: 10px !important;
    border: 1px solid var(--mcm-border) !important;
    background: var(--mcm-white) !important;
    cursor: pointer; font-family: inherit !important;
    font-size: 13px !important; font-weight: 600 !important;
    color: var(--mcm-sub) !important;
    transition: all 0.15s;
    text-decoration: none !important;
    box-shadow: none !important;
    line-height: 1.4 !important;
}
.mcm-wrapper .mcm-tab:hover {
    border-color: var(--mcm-brand) !important;
    color: var(--mcm-brand) !important;
    background: var(--mcm-white) !important;
}
.mcm-wrapper .mcm-tab-on {
    background: var(--mcm-brand) !important;
    border-color: var(--mcm-brand) !important;
    color: #fff !important;
}
.mcm-wrapper .mcm-tab-on:hover {
    background: #3a4fa3 !important;
    color: #fff !important;
}
.mcm-wrapper .mcm-tab-ct { font-weight: 400; opacity: 0.7; }

.mcm-wrapper .mcm-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.mcm-wrapper .mcm-card {
    display: flex; align-items: center; gap: 14px;
    background: var(--mcm-white); border: 1px solid var(--mcm-border);
    border-radius: var(--mcm-radius-sm); padding: 16px 18px;
    cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
    animation: mcmCardIn 0.35s ease both;
}
.mcm-wrapper .mcm-card:hover,
.mcm-wrapper .mcm-card.mcm-card-hl {
    border-color: var(--mcm-brand); box-shadow: var(--mcm-shadow-lg);
    transform: translateY(-2px);
}
.mcm-wrapper .mcm-card-iso {
    width: 38px; height: 38px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; letter-spacing: 0.04em; flex-shrink: 0;
}
.mcm-wrapper .mcm-card-body { flex: 1; min-width: 0; }
.mcm-wrapper .mcm-card-name {
    font-size: 14px; font-weight: 600; color: var(--mcm-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mcm-wrapper .mcm-card-region { font-size: 11px; color: var(--mcm-muted); margin-top: 1px; }
.mcm-wrapper .mcm-card-dots { display: flex; gap: 4px; flex-shrink: 0; }
.mcm-wrapper .mcm-cd { width: 7px; height: 7px; border-radius: 50%; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
    .mcm-wrapper .mcm-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .mcm-wrapper .mcm-hero                { padding: 40px 20px; }
    .mcm-wrapper .mcm-hero-h1             { font-size: 32px; }
    .mcm-wrapper .mcm-hero-stats          { gap: 10px; }
    .mcm-wrapper .mcm-stat-card           { padding: 16px 10px; }
    .mcm-wrapper .mcm-stat-num            { font-size: 26px; }
    .mcm-wrapper .mcm-search-section,
    .mcm-wrapper .mcm-map-tabs-section,
    .mcm-wrapper .mcm-map-section,
    .mcm-wrapper .mcm-legend-section,
    .mcm-wrapper .mcm-explore             { padding-left: 16px; padding-right: 16px; }
    .mcm-wrapper .mcm-grid                { grid-template-columns: repeat(2, 1fr); }
    .mcm-wrapper .mcm-detail              { padding: 0 16px; }
    .mcm-wrapper .mcm-detail-inner        { flex-wrap: wrap; }
    .mcm-wrapper .mcm-detail-pills        { width: 100%; margin-top: 4px; }
}
@media (max-width: 480px) {
    .mcm-wrapper .mcm-hero-h1             { font-size: 26px; }
    .mcm-wrapper .mcm-hero-stats          { flex-direction: column; align-items: center; }
    .mcm-wrapper .mcm-stat-card           { max-width: 100%; width: 100%; }
    .mcm-wrapper .mcm-grid                { grid-template-columns: 1fr; }
    .mcm-wrapper .mcm-tabs                { gap: 6px; }
    .mcm-wrapper .mcm-tab                 { padding: 8px 14px !important; font-size: 12px !important; }
    .mcm-wrapper .mcm-map-viewport        { border-radius: 14px; }
    .mcm-wrapper .mcm-legend-section      { gap: 20px; }
    .mcm-wrapper .mcm-lg-item             { font-size: 13px; }
}