/* ============================================================
   AfricXplore — Interactive African Atlas
   ============================================================ */

.ax-atlas-page {
    background: #07130f;
    color: #eef7f1;
}

.ax-atlas-hero {
    position: relative;
    min-height: 310px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 72% 35%, rgba(36, 170, 116, .28), transparent 35%),
        radial-gradient(circle at 25% 70%, rgba(247, 176, 54, .16), transparent 30%),
        linear-gradient(135deg, #06110d 0%, #0b241a 52%, #07130f 100%);
}

.ax-atlas-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .12;
    background-image: radial-gradient(#fff 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
}

.ax-atlas-hero-inner {
    position: relative;
    z-index: 2;
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}

.ax-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    font-size: .78rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #bde8cf;
}

.ax-atlas-hero h1 {
    max-width: 850px;
    margin: 16px 0 10px;
    color: #fff;
    font-size: clamp(2.2rem, 5vw, 4.6rem);
    font-weight: 700;
    line-height: .98;
}

.ax-atlas-hero p {
    max-width: 760px;
    margin: 0;
    color: rgba(255,255,255,.76);
    font-size: 1.05rem;
}

.ax-atlas-shell {
    width: min(1400px, calc(100% - 28px));
    margin: -42px auto 70px;
    position: relative;
    z-index: 5;
}

.ax-atlas-card {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 24px;
    background: #0c1713;
    box-shadow: 0 28px 90px rgba(0,0,0,.38);
}

.ax-atlas-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 14px;
    background: rgba(13, 28, 22, .98);
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.ax-search {
    position: relative;
    flex: 1 1 320px;
}

.ax-search input {
    width: 100%;
    height: 48px;
    padding: 0 18px 0 45px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 13px;
    outline: none;
    background: #13231c;
    color: #fff;
}

.ax-search i {
    position: absolute;
    left: 17px;
    top: 15px;
    color: #85b89c;
}

.ax-filter-btn,
.ax-reset-btn {
    height: 48px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 13px;
    padding: 0 16px;
    background: #13231c;
    color: #eef7f1;
    cursor: pointer;
    transition: .2s ease;
}

.ax-filter-btn:hover,
.ax-reset-btn:hover {
    background: #1a3327;
    transform: translateY(-1px);
}

.ax-atlas-body {
    position: relative;
    min-height: 690px;
}

#ax-map {
    width: 100%;
    height: 690px;
    background: #06100d;
}

.ax-map-overlay {
    position: absolute;
    left: 18px;
    bottom: 18px;
    z-index: 3;
    max-width: 420px;
    padding: 13px 15px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    background: rgba(5, 15, 11, .86);
    backdrop-filter: blur(12px);
    color: rgba(255,255,255,.78);
    font-size: .83rem;
}

.ax-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 7px;
}

.ax-legend span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.ax-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.ax-dot-country { background: #9be3bd; }
.ax-dot-destination { background: #ffca68; }
.ax-dot-attraction { background: #ef7f66; }

.ax-panel {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 10;
    width: min(390px, calc(100% - 36px));
    max-height: calc(100% - 36px);
    overflow-y: auto;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 20px;
    background: rgba(9, 22, 16, .94);
    backdrop-filter: blur(18px);
    box-shadow: 0 20px 70px rgba(0,0,0,.38);
    transform: translateX(calc(100% + 30px));
    transition: transform .28s ease;
}

.ax-panel.open { transform: translateX(0); }

.ax-panel-close {
    position: absolute;
    right: 13px;
    top: 13px;
    z-index: 2;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    color: #fff;
    cursor: pointer;
}

.ax-panel-image {
    width: 100%;
    height: 175px;
    object-fit: cover;
    background: #15261f;
}

.ax-panel-content { padding: 22px; }

.ax-panel-kicker {
    margin-bottom: 6px;
    color: #91d7ad;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ax-panel h2 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 1.55rem;
}

.ax-panel p {
    color: rgba(255,255,255,.72);
    font-size: .93rem;
    line-height: 1.65;
}

.ax-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
    margin: 16px 0;
}

.ax-stat {
    padding: 12px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    background: rgba(255,255,255,.04);
}

.ax-stat strong {
    display: block;
    color: #fff;
    font-size: 1.2rem;
}

.ax-stat span {
    color: rgba(255,255,255,.58);
    font-size: .75rem;
}

.ax-panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 17px;
}

.ax-panel-actions a,
.ax-panel-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 43px;
    padding: 0 14px;
    border-radius: 11px;
    border: 1px solid rgba(255,255,255,.1);
    background: #173426;
    color: #fff;
    text-decoration: none;
    font-size: .86rem;
    cursor: pointer;
}

.ax-panel-actions a.primary {
    background: #1c8b58;
}

.ax-loading {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(5, 15, 11, .78);
    backdrop-filter: blur(6px);
}

.ax-loading-box {
    text-align: center;
    color: rgba(255,255,255,.8);
}

.ax-loading-box .spinner {
    width: 42px;
    height: 42px;
    margin: 0 auto 13px;
    border: 3px solid rgba(255,255,255,.15);
    border-top-color: #8ed6aa;
    border-radius: 50%;
    animation: axspin .8s linear infinite;
}

@keyframes axspin { to { transform: rotate(360deg); } }

.ax-map-message {
    position: absolute;
    inset: 20px;
    z-index: 30;
    display: none;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 25px;
    border-radius: 18px;
    background: rgba(7, 18, 13, .9);
}

.ax-map-message.show { display: flex; }

.maplibregl-popup-content {
    color: #16231c;
    border-radius: 12px;
    padding: 12px 14px;
}

.ax-popup-title { font-weight: 700; margin-bottom: 3px; }
.ax-popup-meta { font-size: .78rem; color: #65736b; }


/* ============================================================
   Atlas Phase 2 — Country & Destination Intelligence
   ============================================================ */
.ax-map-intelligence {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 4;
    width: min(360px, calc(100% - 36px));
    padding: 15px 17px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 15px;
    background: rgba(5,15,11,.78);
    backdrop-filter: blur(13px);
    box-shadow: 0 14px 40px rgba(0,0,0,.22);
}
.ax-map-intelligence strong,
.ax-map-intelligence span { display:block; }
.ax-map-intelligence strong { margin-top: 7px; color:#fff; font-size:.94rem; }
.ax-map-intelligence span { margin-top:3px; color:rgba(255,255,255,.58); font-size:.78rem; }
.ax-intel-badge {
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:#9be3bd;
    font-size:.68rem;
    font-weight:700;
    letter-spacing:.09em;
    text-transform:uppercase;
}
.ax-panel-lead { color:rgba(255,255,255,.72)!important; }
.ax-section-title {
    margin: 18px 0 9px;
    color:#fff;
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.09em;
    text-transform:uppercase;
}
.ax-intel-list { display:flex; flex-direction:column; gap:7px; }
.ax-intel-card {
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:11px 12px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
    background:rgba(255,255,255,.035);
    color:#fff;
    text-align:left;
    cursor:pointer;
    transition:.18s ease;
}
.ax-intel-card:hover { background:rgba(73,201,130,.12); border-color:rgba(143,219,176,.25); transform:translateX(2px); }
.ax-intel-card-main { min-width:0; display:block; }
.ax-intel-card strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.87rem; }
.ax-intel-card small { display:block; margin-top:3px; color:rgba(255,255,255,.5); font-size:.7rem; }
.ax-intel-card > i { color:#8ed6aa; font-size:.72rem; }
.ax-intel-meta { display:flex; flex-wrap:wrap; gap:7px; margin:12px 0; }
.ax-intel-meta span {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 8px;
    border-radius:9px;
    background:rgba(255,255,255,.045);
    color:rgba(255,255,255,.66);
    font-size:.69rem;
}
.ax-intel-meta i { color:#8ed6aa; }
.ax-pills { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 2px; }
.ax-pill {
    padding:5px 8px;
    border:1px solid rgba(143,219,176,.18);
    border-radius:999px;
    background:rgba(73,201,130,.08);
    color:#bde8cf;
    font-size:.67rem;
}
.ax-more-btn {
    width:100%;
    margin-top:8px;
    padding:9px;
    border:1px dashed rgba(255,255,255,.14);
    border-radius:10px;
    background:transparent;
    color:#9be3bd;
    font-size:.75rem;
    cursor:pointer;
}
.ax-empty {
    padding:14px;
    border:1px dashed rgba(255,255,255,.1);
    border-radius:11px;
    color:rgba(255,255,255,.5);
    font-size:.78rem;
}
.ax-verification {
    margin-top:15px;
    padding-top:12px;
    border-top:1px solid rgba(255,255,255,.08);
    color:rgba(255,255,255,.45);
    font-size:.68rem;
}
.ax-panel-image-placeholder {
    display:flex;
    align-items:center;
    justify-content:center;
    color:rgba(255,255,255,.22);
    font-size:2.4rem;
    background:radial-gradient(circle at center, #173d2b, #0b1712);
}

@media (max-width: 767px) {
    .ax-atlas-hero { min-height: 260px; }
    .ax-atlas-shell { width: calc(100% - 14px); margin-top: -28px; }
    .ax-atlas-card { border-radius: 18px; }
    .ax-atlas-body { min-height: 620px; }
    #ax-map { height: 620px; }
    .ax-map-intelligence { left: 10px; top: 10px; width: calc(100% - 20px); }
    .ax-map-overlay { left: 10px; right: 10px; bottom: 10px; }
    .ax-panel { top: 10px; right: 10px; width: calc(100% - 20px); max-height: 58%; }
}

/* ============================================================
   Atlas Phase 3 — Visual Discovery Experience
   ============================================================ */
.ax-filter-group { display:flex; flex-wrap:wrap; gap:7px; }
.ax-filter-btn { display:inline-flex; align-items:center; gap:7px; height:48px; padding:0 12px; border:1px solid rgba(255,255,255,.1); border-radius:13px; background:#13231c; color:#cfe9d9; cursor:pointer; transition:.2s ease; }
.ax-filter-btn:hover { background:#1a3327; transform:translateY(-1px); }
.ax-filter-btn.is-active { border-color:rgba(143,219,176,.35); background:rgba(28,139,88,.2); color:#fff; box-shadow:inset 0 0 0 1px rgba(143,219,176,.08); }
.ax-filter-btn i { color:#9be3bd; }
.ax-filter-btn.is-active i { color:#ffd06d; }
.ax-discovery-strip { position:absolute; left:18px; right:18px; top:88px; z-index:4; display:flex; align-items:center; justify-content:space-between; gap:15px; padding:14px 17px; border:1px solid rgba(255,255,255,.1); border-radius:16px; background:linear-gradient(100deg,rgba(6,20,14,.9),rgba(11,37,25,.72)); backdrop-filter:blur(15px); box-shadow:0 15px 45px rgba(0,0,0,.18); }
.ax-discovery-copy { min-width:0; }
.ax-discovery-copy > * { display:block; }
.ax-discovery-kicker { margin-bottom:4px; color:#ffd06d; font-size:.65rem; font-weight:800; letter-spacing:.13em; }
.ax-discovery-copy strong { color:#fff; font-size:1rem; }
.ax-discovery-copy span:last-child { margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:rgba(255,255,255,.58); font-size:.76rem; }
#ax-discovery-random, .ax-discovery-strip button { flex:0 0 auto; border:1px solid rgba(255,255,255,.12); border-radius:11px; padding:10px 13px; background:rgba(255,255,255,.06); color:#fff; cursor:pointer; }
.ax-discovery-strip button:hover { background:rgba(73,201,130,.16); }
.ax-atlas-body::before { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(circle at 50% 45%,rgba(58,194,130,.06),transparent 38%); }
#ax-map { position:relative; z-index:0; }
.ax-panel { z-index:12; }
.maplibregl-ctrl-group { overflow:hidden; border:1px solid rgba(255,255,255,.13)!important; background:rgba(8,23,16,.88)!important; box-shadow:0 8px 25px rgba(0,0,0,.25)!important; }
.maplibregl-ctrl-group button { filter:invert(1) hue-rotate(85deg) saturate(.5); }
.ax-panel-actions a.primary, .ax-panel-actions button.primary { box-shadow:0 8px 22px rgba(28,139,88,.2); }
@media (max-width: 1000px) { .ax-atlas-toolbar { align-items:stretch; } .ax-filter-group { flex:1 1 100%; } .ax-filter-btn { height:42px; } .ax-reset-btn { height:42px; } .ax-discovery-strip { top:106px; } }
@media (max-width: 767px) {
  .ax-atlas-toolbar { padding:10px; }
  .ax-filter-group { width:100%; display:grid; grid-template-columns:repeat(3,1fr); }
  .ax-filter-group .ax-filter-btn { justify-content:center; padding:0 7px; font-size:.7rem; }
  .ax-filter-btn span { display:inline; }
  .ax-discovery-strip { left:10px; right:10px; top:122px; padding:11px 12px; }
  .ax-discovery-copy strong { font-size:.88rem; }
  .ax-discovery-copy span:last-child { font-size:.68rem; }
  .ax-discovery-strip button { padding:8px 10px; font-size:.72rem; }
  .ax-map-overlay { bottom:10px; }
}

/* ============================================================
   Atlas Phase 4 — Immersive Visual Discovery + Ecosystem
   ============================================================ */
:root{--ax-ink:#06130d;--ax-panel:#071b12;--ax-mint:#73e5aa;--ax-gold:#ffd166;--ax-coral:#ff8069}
.ax-atlas-page{font-family:'DM Sans',sans-serif;background:radial-gradient(circle at 50% 0%,rgba(27,103,68,.18),transparent 38%),#06110c;min-height:100vh}
.ax-atlas-hero.ax-hero-immersive{position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 75% 42%,rgba(54,173,113,.19),transparent 24%),linear-gradient(135deg,#06140d 0%,#0a2618 55%,#06110c 100%);min-height:430px}
.ax-hero-immersive:before{content:'';position:absolute;inset:-30%;background:conic-gradient(from 10deg,transparent,rgba(115,229,170,.06),transparent 28%,rgba(255,209,102,.035),transparent 52%);animation:axHeroSpin 24s linear infinite;z-index:-1}
.ax-hero-immersive:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,16,11,.96) 0%,rgba(5,16,11,.72) 44%,rgba(5,16,11,.15) 100%);z-index:-1}
@keyframes axHeroSpin{to{transform:rotate(360deg)}}
.ax-hero-3d{position:absolute;right:2%;top:-20%;width:min(760px,62vw);height:760px;opacity:.92;pointer-events:none;z-index:-1}
.ax-hero-orbit{position:absolute;border:1px solid rgba(115,229,170,.14);border-radius:50%;right:7%;top:9%;width:510px;height:510px;transform:rotate(22deg);pointer-events:none;z-index:-1}
.ax-orbit-2{width:590px;height:260px;top:26%;right:4%;transform:rotate(-28deg);border-color:rgba(255,209,102,.12)}
.ax-hero-badge{display:inline-flex;align-items:center;gap:9px;padding:7px 12px;border:1px solid rgba(115,229,170,.2);background:rgba(115,229,170,.06);border-radius:999px;color:#b8f5d1;font-size:.7rem;font-weight:700;letter-spacing:.14em;margin-bottom:18px;backdrop-filter:blur(8px)}
.ax-live-dot{width:7px;height:7px;border-radius:50%;background:#73e5aa;box-shadow:0 0 0 5px rgba(115,229,170,.09),0 0 18px rgba(115,229,170,.7);animation:axPulse 1.8s infinite}
@keyframes axPulse{50%{transform:scale(.72);opacity:.6}}
.ax-atlas-hero h1{font-family:'Space Grotesk',sans-serif;letter-spacing:-.045em;font-size:clamp(3rem,6.5vw,6.2rem);line-height:.94;max-width:760px;text-shadow:0 12px 40px rgba(0,0,0,.35)}
.ax-atlas-hero p{max-width:650px;font-size:1.04rem;line-height:1.75}
.ax-3d-map-badge{position:absolute;right:24px;bottom:24px;width:112px;height:112px;border-radius:50%;display:grid;place-items:center;z-index:5;pointer-events:none}
.ax-3d-core{width:72px;height:72px;border-radius:50%;background:radial-gradient(circle at 35% 28%,#3b9b6d,#0a2c1c 62%,#030b07);box-shadow:inset -8px -10px 20px rgba(0,0,0,.5),0 0 30px rgba(115,229,170,.18);display:flex;align-items:center;justify-content:center;gap:4px;flex-direction:column;color:#caffdc;border:1px solid rgba(115,229,170,.35);font-family:'Space Grotesk'}
.ax-3d-core i{font-size:18px}.ax-3d-core strong{font-size:12px;letter-spacing:.14em}.ax-3d-ring{position:absolute;inset:4px;border:1px solid rgba(115,229,170,.35);border-radius:50%;transform:rotateX(68deg) rotateZ(20deg);animation:axRing 5s linear infinite}.ring-b{inset:-7px;border-color:rgba(255,209,102,.24);transform:rotateX(68deg) rotateZ(-30deg);animation-duration:7s;animation-direction:reverse}.ax-3d-caption{position:absolute;bottom:-19px;white-space:nowrap;font-size:8px;letter-spacing:.17em;color:rgba(255,255,255,.48)}
@keyframes axRing{to{transform:rotateX(68deg) rotateZ(380deg)}}
.ax-ecosystem-dock{position:absolute;left:20px;bottom:20px;z-index:7;width:min(600px,calc(100% - 40px));padding:14px 16px;border:1px solid rgba(255,255,255,.11);background:rgba(4,18,12,.76);backdrop-filter:blur(16px);border-radius:18px;box-shadow:0 18px 55px rgba(0,0,0,.28)}
.ax-ecosystem-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:10px}.ax-ecosystem-head span{font-size:.63rem;letter-spacing:.14em;color:#8fe9b7;font-weight:800}.ax-ecosystem-head strong{font-family:'Space Grotesk';font-size:.78rem;color:rgba(255,255,255,.76)}
.ax-ecosystem-actions{display:flex;gap:7px;flex-wrap:wrap}.ax-eco-action{display:flex;align-items:center;gap:7px;padding:8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.045);color:#fff;text-decoration:none;font-size:.73rem;transition:.2s ease}.ax-eco-action:hover{transform:translateY(-2px);border-color:rgba(115,229,170,.35);background:rgba(115,229,170,.09);color:#d8ffe8}.ax-eco-action i{color:#8fe9b7}
.ax-panel-actions a.primary,.ax-panel-actions a.primary:hover{background:linear-gradient(135deg,#1d9a61,#12633f);border-color:rgba(115,229,170,.28)}
.ax-panel{box-shadow:-20px 0 55px rgba(0,0,0,.22)}
@media(max-width:900px){.ax-hero-3d{right:-22%;top:-10%;width:680px;height:680px;opacity:.55}.ax-hero-orbit{right:-12%;opacity:.6}.ax-3d-map-badge{display:none}.ax-ecosystem-dock{position:relative;left:auto;bottom:auto;margin:0 12px 12px;width:calc(100% - 24px)}}
@media(max-width:600px){.ax-atlas-hero.ax-hero-immersive{min-height:390px}.ax-atlas-hero h1{font-size:3.1rem}.ax-ecosystem-head strong{display:none}.ax-eco-action{flex:1 1 calc(33.33% - 7px);justify-content:center}.ax-eco-action span{font-size:.67rem}}

/* ============================================================
   Atlas Layout Stabilisation — Desktop Overlay Fix
   ============================================================ */

/* The global template navbar is absolute on desktop. Give the
   Atlas its own top clearance so the hero never sits underneath it. */
@media (min-width: 992px) {
    .ax-atlas-page {
        padding-top: 92px;
    }

    /* Keep the Atlas shell from intruding too far into the hero. */
    .ax-atlas-shell {
        margin-top: -28px;
    }
}

/* Keep the intelligence card and discovery strip on separate rows. */
.ax-map-intelligence {
    top: 18px;
    left: 18px;
    z-index: 6;
}

.ax-discovery-strip {
    top: 118px;
    left: 18px;
    right: 18px;
    z-index: 5;
}

/* When the right intelligence panel is open, don't allow the
   discovery strip to run underneath it. */
.ax-atlas-body:has(.ax-panel.open) .ax-discovery-strip {
    right: 428px;
}

/* The bottom help/legend card and ecosystem dock previously occupied
   the same bottom-left area. Stack them cleanly instead. */
.ax-map-overlay {
    left: 18px;
    bottom: 126px;
    z-index: 6;
}

.ax-ecosystem-dock {
    left: 18px;
    bottom: 18px;
    z-index: 7;
}

/* Give the map enough breathing room so overlays remain readable. */
.ax-atlas-body {
    overflow: hidden;
}

@media (max-width: 1100px) and (min-width: 992px) {
    .ax-discovery-strip {
        right: 18px;
    }

    .ax-atlas-body:has(.ax-panel.open) .ax-discovery-strip {
        right: 408px;
    }

    .ax-map-intelligence {
        width: 330px;
    }
}

@media (max-width: 991.98px) {
    .ax-atlas-page {
        padding-top: 0;
    }

    .ax-discovery-strip {
        top: 122px;
        left: 10px;
        right: 10px;
    }

    .ax-map-intelligence {
        left: 10px;
        top: 10px;
    }

    .ax-map-overlay {
        left: 10px;
        bottom: 118px;
    }

    .ax-ecosystem-dock {
        left: auto;
        bottom: auto;
    }
}

@media (max-width: 767px) {
    .ax-discovery-strip {
        top: 122px;
    }

    .ax-atlas-body:has(.ax-panel.open) .ax-discovery-strip {
        right: 10px;
    }

    .ax-map-overlay {
        bottom: 118px;
    }
}


/* =========================================================
   Phase 2.5 — AfricXplore blue visual atlas
========================================================= */
.ax-atlas-page{background:radial-gradient(circle at 15% 0%,rgba(30,111,214,.16),transparent 32%),#061226}
.ax-atlas-hero.ax-atlas-hero-blue{background:radial-gradient(circle at 78% 38%,rgba(49,144,255,.25),transparent 25%),linear-gradient(135deg,#06152e 0%,#0b2f66 52%,#07172e 100%)}
.ax-atlas-hero-pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}.ax-atlas-hero-pills span{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);backdrop-filter:blur(10px);padding:7px 12px;border-radius:999px;font-size:.78rem;color:#eaf3ff}
.ax-atlas-card{box-shadow:0 30px 90px rgba(0,0,0,.35)}
.ax-atlas-body::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(180deg,rgba(3,17,40,.04),rgba(3,17,40,.18));mix-blend-mode:multiply}
.ax-country-rail{position:absolute;left:18px;bottom:118px;z-index:8;display:flex;gap:7px;max-width:calc(100% - 36px);overflow-x:auto;padding:8px;scrollbar-width:thin;background:rgba(4,16,35,.78);border:1px solid rgba(255,255,255,.14);border-radius:16px;backdrop-filter:blur(12px)}
.ax-country-chip{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.07);color:#fff;border-radius:999px;padding:7px 10px;font-size:.72rem;cursor:pointer}.ax-country-chip:hover{background:rgba(40,132,238,.35);border-color:rgba(135,195,255,.55)}
.ax-flag{width:24px;height:16px;object-fit:cover;border-radius:3px;box-shadow:0 1px 5px rgba(0,0,0,.35);vertical-align:middle}.ax-country-heading{display:flex;align-items:center;gap:12px}.ax-country-heading .ax-flag{width:42px;height:28px}
.ax-panel-kicker .ax-flag{margin-right:5px}
.ax-map-overlay-enhanced{background:rgba(3,16,36,.76)!important;border-color:rgba(104,176,255,.18)!important}
@media(max-width:700px){.ax-country-rail{bottom:102px;left:8px;max-width:calc(100% - 16px)}.ax-country-chip{font-size:.68rem;padding:6px 9px}.ax-atlas-hero-pills{display:none}.ax-atlas-hero h1{font-size:2.65rem}.ax-map-intelligence{display:none}}
.ax-country-marketing-banner{margin:18px 0;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.1);height:150px}.ax-country-marketing-banner img{width:100%;height:100%;object-fit:cover}.ax-country-story{margin:14px 0;padding:15px;border-radius:16px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08)}.ax-country-story p{color:rgba(255,255,255,.72);font-size:.84rem;line-height:1.65;margin:7px 0 0}