/* ==========================================================================
   Country Map Picker — page theme (scoped to body.page-country-map-picker)
   Page chrome follows the site theme (var --theme-*); the MAP keeps its own fixed
   palette (a map should look like a map in every theme).
   ========================================================================== */

.page-country-map-picker {
    --cmp-ink:     var(--theme-surface-text, #14212b);
    --cmp-muted:   var(--theme-muted, #4f5f6d);
    --cmp-surface: var(--theme-surface, #ffffff);
    --cmp-soft:    var(--theme-surface, #eef6fb);
    --cmp-border:  var(--theme-border, #cfe0ec);
    --cmp-primary:  #0d9488;
    --cmp-primary-2:#0f766e;
    --cmp-accent:   #f59e0b;
    --cmp-ring:     rgba(13, 148, 136, 0.22);
    --cmp-grad:     linear-gradient(135deg, #14b8a6, #0f766e);
    /* MAP palette — light (default). Deeper than before so the map isn't washed out. */
    --map-water:  #9cc3de;
    --map-land:   #8fa6b3;
    --map-stroke: #f4f8fb;
    --map-play:   #0ea5a0;
    --map-lit:    #c2410c;
    --map-landed: #059669;
    --map-loc:    #b45309;
}
/* Dark / themed map (dark, gaming, crypto, studio, high-contrast) */
body[data-theme="dark"].page-country-map-picker,
body[data-theme="gaming"].page-country-map-picker,
body[data-theme="crypto"].page-country-map-picker,
body[data-theme="studio"].page-country-map-picker,
body[data-theme="high-contrast"].page-country-map-picker {
    --map-water:  #132430;
    --map-land:   #38505f;
    --map-stroke: #1c2c37;
    --map-play:   #14b8a6;
    --map-lit:    #fbbf24;
    --map-landed: #34d399;
    --map-loc:    #fcd34d;
}

/* ---- Ambient backdrop (subtle branded glow, like the gold-standard pages) - */
.page-country-map-picker::before {
    content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
    background:
        radial-gradient(1100px 560px at 6% -6%, rgba(13, 148, 136, 0.10), transparent 60%),
        radial-gradient(950px 520px at 96% 2%, rgba(15, 118, 110, 0.07), transparent 62%),
        radial-gradient(880px 640px at 50% 108%, rgba(20, 184, 166, 0.05), transparent 60%);
}

/* ---- Layout ------------------------------------------------------------- */
.page-country-map-picker .cmp-stage { position: relative; }
.page-country-map-picker .cmp-map-wrap { position: relative; }
.page-country-map-picker .cmp-map {
    position: relative; width: 100%; aspect-ratio: 1000 / 507; max-height: 56vh; margin: 0 auto;
    background: var(--map-water); border: 1px solid var(--cmp-border); border-radius: 14px;
    overflow: hidden; box-shadow: inset 0 1px 6px rgba(8, 47, 73, 0.12);
    display: grid; place-items: center;
}
.page-country-map-picker .cmp-map:not(.is-ready)::after {
    content: "Loading map…"; color: var(--cmp-muted); font-size: 0.95rem;
}
.page-country-map-picker .cmp-svg { width: 100%; height: 100%; display: block; }
.page-country-map-picker .cmp-map-fail { color: var(--cmp-muted); padding: 2rem; text-align: center; }

/* ---- Map fills ---------------------------------------------------------- */
.page-country-map-picker .cmp-svg #World,
.page-country-map-picker .cmp-svg #Ocean { fill: var(--map-water); stroke: none; }
.page-country-map-picker .cmp-svg g[id] path {
    fill: var(--map-land); stroke: var(--map-stroke); stroke-width: 0.2;
    transition: fill 0.12s ease, opacity 0.25s ease;
}
/* Dark themes need a LITERAL land fill: Chromium won't repaint `fill: var()` across
   the 2213 paths when only the custom property changes, so a changed declaration
   (literal colour) is required to force the repaint on theme toggle. */
body[data-theme="dark"].page-country-map-picker .cmp-svg g[id] path,
body[data-theme="gaming"].page-country-map-picker .cmp-svg g[id] path,
body[data-theme="crypto"].page-country-map-picker .cmp-svg g[id] path,
body[data-theme="studio"].page-country-map-picker .cmp-svg g[id] path,
body[data-theme="high-contrast"].page-country-map-picker .cmp-svg g[id] path { fill: #38505f; }
/* In continent mode the pool countries are tinted so they stand out; nothing is
   faded to white (the old opacity dim washed the whole map out). */
.page-country-map-picker .cmp-svg .cmp-inplay path { fill: var(--map-play); }
.page-country-map-picker .cmp-svg .cmp-lit path { fill: var(--map-lit) !important; }
.page-country-map-picker .cmp-svg .cmp-landed path { fill: var(--map-landed) !important; }
/* Ambient idle drift — a soft, self-returning shimmer that hops between countries
   while the map is at rest (works from any base fill, so it's theme/mode agnostic). */
.page-country-map-picker .cmp-svg .cmp-ambient path { animation: cmpAmbientDrift 1.2s ease-in-out; }
@keyframes cmpAmbientDrift {
    0%, 100% { filter: none; }
    50% { filter: brightness(1.45) saturate(1.35); }
}

/* ---- Continent chips ---------------------------------------------------- */
.page-country-map-picker .cmp-chips {
    display: flex; flex-wrap: wrap; gap: 0.45rem; justify-content: center; margin: 0 0 0.75rem;
}
.page-country-map-picker .cmp-chip {
    border: 1.5px solid var(--cmp-border); background: var(--cmp-surface); color: var(--cmp-ink);
    border-radius: 999px; padding: 0.34rem 0.9rem; font-weight: 700; font-size: 0.85rem; cursor: pointer;
    transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.page-country-map-picker .cmp-chip:hover { transform: translateY(-2px); border-color: var(--cmp-primary); }
.page-country-map-picker .cmp-chip.is-active { background: var(--cmp-grad); color: #fff; border-color: transparent; }

/* ---- Controls ----------------------------------------------------------- */
.page-country-map-picker .cmp-count { text-align: center; font-size: 0.9rem; color: var(--cmp-muted); margin: 0.75rem 0 0.25rem; }
.page-country-map-picker .cmp-status { text-align: center; font-size: 0.85rem; color: var(--cmp-muted); min-height: 1.2rem; margin: 0 0 0.5rem; }
.page-country-map-picker .cmp-pick-btn {
    display: block; width: 100%; border: 0; border-radius: 12px; padding: 0.9rem 1rem;
    font-size: 1.05rem; font-weight: 800; letter-spacing: 0.02em; color: #fff; background: var(--cmp-grad);
    cursor: pointer; box-shadow: 0 10px 24px -12px rgba(15, 118, 110, 0.8); transition: transform 0.12s ease, filter 0.12s ease;
}
.page-country-map-picker .cmp-pick-btn:hover:not(:disabled) { transform: translateY(-2px); }
.page-country-map-picker .cmp-pick-btn:disabled { filter: grayscale(0.35) opacity(0.75); cursor: default; }
.page-country-map-picker .cmp-pick-btn.is-busy { animation: cmpBusy 0.9s ease-in-out infinite; }
@keyframes cmpBusy { 50% { filter: brightness(1.12); } }

.page-country-map-picker .cmp-effects { display: flex; gap: 1.2rem; justify-content: center; margin-top: 0.75rem; }
.page-country-map-picker .cmp-effects label { font-size: 0.85rem; color: var(--cmp-muted); display: inline-flex; align-items: center; gap: 0.35rem; }

/* ---- Hop-duration slider (sits below the Pick button) ------------------- */
.page-country-map-picker .cmp-duration { margin: 0.9rem 0 0.35rem; }
.page-country-map-picker .cmp-duration > label {
    display: flex; align-items: center; gap: 0.35rem;
    font-size: 0.85rem; font-weight: 600; color: var(--cmp-muted); margin-bottom: 0.4rem;
}
.page-country-map-picker .cmp-duration-val {
    margin-left: auto; font-weight: 800; color: var(--map-play, #0ea5a0);
    font-variant-numeric: tabular-nums;
}
.page-country-map-picker .cmp-range {
    -webkit-appearance: none; appearance: none; width: 100%; height: 6px;
    border-radius: 999px; background: var(--cmp-track, rgba(120,120,120,0.25)); outline: none; cursor: pointer;
}
.page-country-map-picker .cmp-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%;
    background: var(--cmp-grad); border: 2px solid #fff; box-shadow: 0 2px 6px -1px rgba(15,118,110,0.7);
}
.page-country-map-picker .cmp-range::-moz-range-thumb {
    width: 18px; height: 18px; border-radius: 50%; background: #0ea5a0; border: 2px solid #fff;
    box-shadow: 0 2px 6px -1px rgba(15,118,110,0.7);
}
.page-country-map-picker .cmp-range-ends {
    display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--cmp-muted);
    opacity: 0.75; margin-top: 0.25rem;
}

/* ---- Floating reveal card (overlays the bottom of the map, near the country) */
.page-country-map-picker .cmp-reveal {
    position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
    width: min(380px, calc(100% - 20px)); z-index: 6;
    display: flex; gap: 0.7rem; align-items: center; text-align: left;
    background: var(--cmp-surface); border: 1px solid var(--cmp-border); border-radius: 12px;
    padding: 0.6rem 0.75rem; box-shadow: 0 14px 34px -14px rgba(8, 47, 73, 0.6);
    animation: cmpCardIn 0.28s ease-out;
}
@keyframes cmpCardIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.page-country-map-picker .cmp-reveal[hidden] { display: none; }
.page-country-map-picker .cmp-flag {
    flex-shrink: 0; width: 58px; height: auto; display: block; border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.14); box-shadow: 0 4px 10px -4px rgba(8, 47, 73, 0.5); background: #fff;
}
.page-country-map-picker .cmp-rev-txt { min-width: 0; }
.page-country-map-picker .cmp-rev-top { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.page-country-map-picker .cmp-reveal-name { font-size: 1.05rem; font-weight: 800; color: var(--cmp-ink); line-height: 1.2; }
.page-country-map-picker .cmp-fact-cont {
    font-size: 0.62rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
    color: #fff; background: var(--cmp-grad); border-radius: 999px; padding: 0.12rem 0.5rem;
}
.page-country-map-picker .cmp-rev-cap { font-size: 0.86rem; color: var(--cmp-ink); margin-top: 0.15rem; }
.page-country-map-picker .cmp-rev-cap strong { color: var(--cmp-primary-2); }
.page-country-map-picker .cmp-rev-fact { font-size: 0.8rem; color: var(--cmp-muted); line-height: 1.4; margin-top: 0.2rem; }
@media (max-width: 575.98px) {
    .page-country-map-picker .cmp-reveal { bottom: 8px; padding: 0.5rem 0.6rem; gap: 0.55rem; }
    .page-country-map-picker .cmp-flag { width: 46px; }
    .page-country-map-picker .cmp-rev-fact { display: none; }
}

/* ---- SEO content (.cmp-content — carries .content-guide for shared type scale) -- */
.page-country-map-picker .cmp-content { color: var(--cmp-ink); background: linear-gradient(180deg, #ffffff 0%, #eef6fb 100%); padding: 3.5rem 0 3.75rem; }
body[data-theme].page-country-map-picker .cmp-content { background: var(--theme-bg); }
.page-country-map-picker .cmp-inner { max-width: 860px; margin: 0 auto; padding: 0 1rem; }
.page-country-map-picker .cmp-content h2, .page-country-map-picker .cmp-content h3 { color: var(--cmp-ink); }
.page-country-map-picker .cmp-content p, .page-country-map-picker .cmp-content li { color: var(--cmp-muted); }
.page-country-map-picker .cmp-content strong { color: var(--cmp-ink); }
.page-country-map-picker .cmp-content a { color: var(--cmp-primary); text-decoration: underline; text-underline-offset: 2px; }
.page-country-map-picker .cmp-content a:hover { color: var(--cmp-primary-2); }
.page-country-map-picker .cmp-kicker {
    display: inline-block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
    color: #fff; background: var(--cmp-grad); border-radius: 999px; padding: 0.3rem 0.8rem; margin-bottom: 0.85rem;
}
.page-country-map-picker .cmp-lead { font-size: 1.2rem; line-height: 1.7; color: var(--cmp-ink); }
.page-country-map-picker .cmp-section { margin-top: 3rem; }
.page-country-map-picker .cmp-steps { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.9rem; }
.page-country-map-picker .cmp-step { display: flex; gap: 1rem; align-items: flex-start; background: var(--cmp-soft); border: 1px solid var(--cmp-border); border-radius: 14px; padding: 1.05rem 1.2rem; }
.page-country-map-picker .cmp-step p { margin: 0.1rem 0 0; }
.page-country-map-picker .cmp-step-num { flex-shrink: 0; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; font-weight: 800; color: #fff; background: var(--cmp-grad); }
.page-country-map-picker .cmp-content .accordion { margin-top: 1.25rem; border-radius: 14px; overflow: hidden; border: 1px solid var(--cmp-border); }
.page-country-map-picker .cmp-content .accordion-item { border: 0; border-bottom: 1px solid var(--cmp-border); background: var(--cmp-surface); }
.page-country-map-picker .cmp-content .accordion-item:last-child { border-bottom: 0; }
.page-country-map-picker .cmp-content .accordion-button { font-weight: 700; color: var(--cmp-ink); background: var(--cmp-surface); }
.page-country-map-picker .cmp-content .accordion-button:not(.collapsed) { color: var(--cmp-primary); background: var(--cmp-soft); box-shadow: none; }
.page-country-map-picker .cmp-content .accordion-body { color: var(--cmp-muted); }

/* Continents table (signature asset — matches the shared gold-standard table style) */
.page-country-map-picker .cmp-table-wrap { margin-top: 1.5rem; overflow-x: auto; border-radius: 14px; border: 1px solid var(--cmp-border); }
.page-country-map-picker .cmp-table { width: 100%; border-collapse: collapse; min-width: 480px; background: var(--cmp-surface); }
.page-country-map-picker .cmp-table th,
.page-country-map-picker .cmp-table td { text-align: left; padding: 0.8rem 1rem; border-bottom: 1px solid var(--cmp-border); font-size: 0.95rem; }
.page-country-map-picker .cmp-table thead th { background: var(--cmp-soft); color: var(--cmp-ink); font-weight: 800; font-size: 0.82rem; letter-spacing: 0.03em; text-transform: uppercase; }
.page-country-map-picker .cmp-table tbody tr:last-child td { border-bottom: 0; }
.page-country-map-picker .cmp-table td:first-child { font-weight: 800; color: var(--cmp-primary); white-space: nowrap; }
.page-country-map-picker .cmp-table td:nth-child(2) { font-weight: 800; color: var(--cmp-ink); font-variant-numeric: tabular-nums; }

/* ---- Motion / accessibility -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .page-country-map-picker .cmp-reveal { animation: none; }
    .page-country-map-picker .cmp-chip, .page-country-map-picker .cmp-pick-btn { transition: none !important; }
}