/* Namibia interactive area map — shared styles.
   Loads the map image relative to THIS file, so it lives beside
   namibia-map.png in /assets/. Used by any page showing the map. */
/* ---------- the map + panel ---------- */
.areamap{display:block}
.am-map{position:relative;background:#EAF1F6;border:1px solid var(--line);border-radius:4px;
  padding:.8rem;max-width:900px;margin:0 auto}
.am-map-inner{position:relative}
.am-map svg{width:100%;height:auto;display:block}
.am-base{width:100%;height:auto;display:block;border-radius:2px}
.am-svg{position:absolute;inset:0}

.rgn{fill:rgba(47,127,181,.10);stroke:rgba(34,99,143,.55);stroke-width:1.5;cursor:pointer;
  transition:fill .15s ease, stroke .15s ease}
.rgn:hover{fill:rgba(47,127,181,.30);stroke:var(--dune-deep);stroke-width:2}
.rgn:focus-visible{outline:none;fill:rgba(47,127,181,.30);stroke:var(--dusk);stroke-width:2.5}
.rgn.active{fill:rgba(194,74,59,.34);stroke:#C24A3B;stroke-width:2.5}
.rgn-lab{font-family:var(--display);font-weight:700;font-size:13px;fill:#1B2B38;
  paint-order:stroke;stroke:#fff;stroke-width:3.5px;stroke-linejoin:round;pointer-events:none;
  transition:font-size .15s ease}
.rgn-lab.on{font-size:15px;fill:#8C2F22}
.am-hint{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  color:#4A6E86;text-align:center;padding-top:.6rem}

/* ---------- the panel ---------- */
.am-panel{background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden;margin-top:1.6rem}
.am-panel:empty{display:none}
.am-empty{padding:2.2rem 1.6rem;color:var(--ink-soft)}
.am-empty h3{font-family:var(--display);font-weight:700;font-size:1.2rem;color:var(--ink);margin-bottom:.5rem}
.am-empty ul{list-style:none;margin-top:1.1rem;display:flex;flex-wrap:wrap;gap:.45rem}
.am-empty li button{font-family:var(--mono);font-size:.72rem;border:1px solid var(--line);background:var(--pan);
  color:var(--dune-deep);border-radius:999px;padding:.35rem .8rem;cursor:pointer}
.am-empty li button:hover{border-color:var(--dune);background:#EAF2F8}

.am-body{display:none}
.am-body.on{display:block}
.am-head{padding:1.3rem 1.6rem .9rem;border-bottom:1px solid var(--line)}
.am-kicker{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dune);margin-bottom:.3rem}
.am-head h3{font-family:var(--display);font-weight:750;font-size:1.6rem;letter-spacing:-.015em;margin-bottom:.4rem}
.am-facts{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem}
.am-facts span{font-family:var(--mono);font-size:.66rem;background:var(--pan-deep);border-radius:3px;padding:.28rem .6rem;color:var(--ink-soft)}
.am-inner{padding:1.2rem 1.6rem 1.6rem}
.am-cols{display:grid;grid-template-columns:1.4fr 1fr;gap:2rem;align-items:start}
@media(max-width:820px){.am-cols{grid-template-columns:1fr;gap:1rem}}
.am-inner p{font-size:1rem;color:var(--ink-soft);margin-bottom:.9rem}
/* big rotating gallery */
.am-gal{position:relative;width:100%;aspect-ratio:16/9;border-radius:4px;overflow:hidden;
  background:var(--pan-deep);margin-bottom:1.3rem}
.am-gal .gslide{position:absolute;inset:0;opacity:0;transition:opacity .7s ease;
  background-size:cover;background-position:center}
.am-gal .gslide.on{opacity:1}
.am-gal .ph{position:absolute;inset:0;opacity:0;transition:opacity .7s ease;
  background:linear-gradient(135deg,#DCE6EC,#C9D8E2);display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.85rem;color:#6B8299}
.am-gal .ph.on{opacity:1}
.am-gal .gcap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:1.6rem 1.1rem .8rem;
  background:linear-gradient(180deg,rgba(20,30,38,0),rgba(20,30,38,.72));
  color:#fff;font-family:var(--body);font-size:.95rem}
.gnav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:2.4rem;height:2.4rem;
  border:none;border-radius:999px;background:rgba(255,255,255,.85);color:var(--dusk);
  font-size:1.1rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.gnav:hover{background:#fff}
.gprev{left:.7rem} .gnext{right:.7rem}
.gdots{position:absolute;bottom:.7rem;left:0;right:0;z-index:5;display:flex;justify-content:center;gap:.35rem}
.gdots button{width:.5rem;height:.5rem;border-radius:999px;border:none;background:rgba(255,255,255,.5);
  cursor:pointer;padding:0}
.gdots button.on{background:#fff;width:1.4rem}
@media(max-width:640px){.am-gal{aspect-ratio:4/3}}
.am-links{display:flex;flex-wrap:wrap;gap:.7rem}
.btn{font-family:var(--display);font-weight:600;font-size:.95rem;padding:.7rem 1.2rem;border-radius:3px;
  text-decoration:none;display:inline-block;border:1px solid transparent}
.btn-dune{background:var(--dune);color:#fff}
.btn-dune:hover{background:var(--dune-deep)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:#fff}
.btn-ghost:hover{border-color:var(--dune);color:var(--dune-deep)}
.am-back{display:flex;align-items:center;justify-content:center;gap:.55rem;width:100%;margin-top:1.6rem;
  padding:.95rem 1.2rem;border:1px solid var(--line);border-radius:4px;background:var(--pan);
  font-family:var(--display);font-weight:650;font-size:1rem;color:var(--dune-deep);cursor:pointer;
  transition:background .16s ease,border-color .16s ease,transform .16s ease}
.am-back:hover{background:#EAF2F8;border-color:var(--dune);transform:translateY(-2px)}
.am-back:focus-visible{outline:3px solid var(--dune);outline-offset:2px}
.am-back span{transition:transform .16s ease;display:inline-block}
.am-back:hover span{transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){.am-back,.am-back span{transition:none}.am-back:hover{transform:none}}
.am-close{float:right;border:none;background:none;font-size:1.4rem;line-height:1;color:var(--ink-soft);cursor:pointer;padding:0 0 0 .6rem}
.am-close:hover{color:#C24A3B}
@media (prefers-reduced-motion:reduce){.rgn,.rgn-lab{transition:none}}
/* ---------- add to trip ---------- */
.btn-add{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;
  background:var(--dune);color:#fff;border:1px solid var(--dune);cursor:pointer;margin-bottom:.7rem;
  font-family:var(--display);font-weight:650;font-size:1rem;padding:.85rem 1.2rem;border-radius:3px;
  transition:background .16s ease}
.btn-add:hover{background:var(--dune-deep)}
.btn-add.added{background:#2E7D52;border-color:#2E7D52}
.btn-add .tick{font-size:1.1rem;line-height:1}
.am-links{display:flex;flex-wrap:wrap;gap:.7rem}
.am-links .btn{width:100%;text-align:center}
.am-sum{font-size:.98rem;color:var(--ink-soft)}
/* a chosen area shows a tick on the map */
.rgn.chosen{fill:rgba(46,125,82,.30);stroke:#2E7D52;stroke-width:2.5}
.rgn.chosen.active{fill:rgba(46,125,82,.45)}
.rgn-tick{font-family:var(--display);font-weight:700;font-size:15px;fill:#1E6B44;
  paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round;pointer-events:none;opacity:0}
.rgn-tick.on{opacity:1}

/* ---------- the trip bar ---------- */
.tripbar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--dusk);color:#fff;
  box-shadow:0 -4px 20px rgba(15,22,28,.28);transform:translateY(110%);transition:transform .28s ease}
.tripbar.on{transform:translateY(0)}
.tripbar .tb-in{max-width:1120px;margin:0 auto;padding:.85rem 1.25rem;display:flex;align-items:center;
  gap:1rem;flex-wrap:wrap}
.tb-count{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grass)}
.tb-list{flex:1 1 auto;min-width:12rem;font-size:.95rem;color:#D6E0E7;line-height:1.4}
.tb-list b{color:#fff;font-family:var(--display);font-weight:650}
.tb-go{background:var(--dune);color:#fff;border:none;border-radius:3px;padding:.75rem 1.3rem;
  font-family:var(--display);font-weight:650;font-size:1rem;cursor:pointer;text-decoration:none;white-space:nowrap}
.tb-go:hover{background:#3C90C8}
.tb-clear{background:none;border:none;color:#9DB0BD;font-family:var(--mono);font-size:.72rem;
  text-decoration:underline;cursor:pointer}
.tb-clear:hover{color:#fff}
@media(max-width:640px){.tripbar .tb-in{padding:.7rem 1rem;gap:.6rem}
  .tb-go{width:100%;text-align:center}.tb-list{font-size:.88rem}}
body.has-tripbar{padding-bottom:5.5rem}
@media (prefers-reduced-motion:reduce){.tripbar{transition:none}}