/**
 * map-panel.css — gedeelde compacte-kaartband + vensterweergave (nikoc.be)
 * Gebruikt door /trails en /trips. Paginaspecifieke maten (bandhoogte,
 * filterbalk) blijven in de stylesheet van de module zelf staan.
 */

.mp-panel{position:relative}

/* Compacte band: voorproefje, geen bediening (bronvermelding blijft staan),
   één klik opent het venster. */
.mp-panel.mp-compact .mp-mapel{cursor:pointer}
.mp-panel.mp-compact .leaflet-control-zoom,
.mp-panel.mp-compact .leaflet-control-layers{display:none}
.mp-panel.mp-compact .mp-close{display:none}

/* Openknop in de band */
.mp-btn{position:absolute;left:14px;bottom:14px;z-index:800;display:inline-flex;align-items:center;
  gap:8px;padding:10px 18px;background:var(--gold,#C8A84B);color:var(--ink,#181B15);border:none;
  border-radius:5px;cursor:pointer;font-family:'Barlow Condensed',sans-serif;font-weight:600;
  font-size:12px;letter-spacing:.11em;text-transform:uppercase;box-shadow:0 6px 20px rgba(0,0,0,.45)}
.mp-btn:hover{background:var(--gold-d,#A88C39)}
.mp-btn svg{width:14px;height:14px}
.mp-panel.mp-full .mp-btn{display:none}

/* Venster óver de pagina — bewust géén schermvullende weergave: de
   verduisterde pagina blijft zichtbaar, zodat het als dialoog leest en
   niet als een nieuw tabblad. */
.mp-back{position:fixed;inset:0;z-index:8900;background:rgba(12,14,10,.82);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.mp-panel.mp-full{position:fixed;top:4vh;left:3vw;right:3vw;bottom:4vh;z-index:9000;margin:0;
  border:1px solid rgba(200,168,75,.3);border-radius:12px;background:var(--ink,#181B15);
  box-shadow:0 30px 80px rgba(0,0,0,.6);overflow:hidden}
/* De kaarthoogte loopt via --mp-h, zodat de id-regel in de module
   (#tl-map / #tp-map) blijft winnen op specificiteit maar wél meebeweegt.
   De regel eronder is het vangnet voor pagina's zonder eigen id-hoogte. */
.mp-panel.mp-full{--mp-h:100%}
.mp-panel.mp-full .mp-mapel{height:100%}
body.mp-noscroll{overflow:hidden}

/* ── Balk in het venster ──
   Informatie links, knoppen rechts. Gedeeld door trails (met filters) en
   trips (alleen een telling). In de band verborgen; in het venster een
   frosted strook bovenaan. Paginaspecifieke inhoud — selects, sliders —
   blijft in de stylesheet van de module zelf. */
.mp-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;
  background:var(--ink-2,#20241C);border:1px solid var(--line,rgba(240,237,230,.12));
  border-radius:9px;padding:12px 16px;margin:0 0 16px}
.mp-panel.mp-compact .mp-bar{display:none}
.mp-panel.mp-full .mp-bar{display:flex;position:absolute;top:14px;left:14px;right:14px;z-index:800;
  margin:0;background:rgba(24,27,21,.75);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-color:rgba(200,168,75,.28)}
/* Leaflet-bediening onder de balk schuiven; hoogte komt uit syncBar() */
.mp-panel.mp-full .leaflet-top{top:calc(var(--mp-barh, 52px) + 24px)}

.mp-bar .mp-bar-label{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold,#C8A84B)}
.mp-bar .mp-bar-count{margin-left:auto;font-size:12.5px;color:var(--muted,#8C9185)}

.mp-reset{display:inline-flex;align-items:center;gap:6px;background:var(--ink-3,#2A2F26);
  border:1px solid rgba(240,237,230,.15);border-radius:5px;padding:7px 12px;cursor:pointer;
  font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted,#8C9185)}
.mp-reset:hover{color:var(--gold,#C8A84B);border-color:rgba(200,168,75,.4)}
.mp-reset svg{width:13px;height:13px}

/* Sluitknop: als tekstknop in een filterbalk, of als zwevend rondje
   rechtsboven wanneer de pagina geen balk heeft. */
.mp-close{background:var(--ink-3,#2A2F26);border:1px solid rgba(240,237,230,.15);border-radius:5px;
  padding:7px 12px;cursor:pointer;font-family:'Barlow Condensed',sans-serif;font-weight:600;
  font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#8C9185)}
.mp-close:hover{color:var(--gold,#C8A84B);border-color:rgba(200,168,75,.4)}
.mp-close.mp-close-float{position:absolute;top:14px;right:14px;z-index:820;padding:0;
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:rgba(24,27,21,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-color:rgba(200,168,75,.3);color:var(--gold,#C8A84B)}
.mp-close.mp-close-float svg{width:17px;height:17px}

@media (max-width:640px){
  .mp-panel.mp-full{top:2vh;left:2vw;right:2vw;bottom:2vh;border-radius:10px}
  .mp-panel.mp-full .mp-bar{top:10px;left:10px;right:10px;padding:10px 12px;gap:8px 12px}
  .mp-btn{left:10px;bottom:10px;padding:9px 14px;font-size:11px}
}