/* ============================================================
   Parkla — kartstilar (ovanpå Leaflet)
   ============================================================ */

.mapwrap{position:relative;border:1px solid var(--rule);border-radius:var(--r-md);overflow:hidden;
  background:var(--paper-2);isolation:isolate}
.mapwrap.short{height:280px}
.mapwrap.tall{height:min(66vh,620px)}
.mapwrap.full{height:calc(100vh - 210px);min-height:380px}
@media(max-width:980px){.mapwrap.full{height:calc(100vh - 250px)}}
.leafletmap{position:absolute;inset:0;z-index:0;background:var(--paper-2);touch-action:none}
.leaflet-container{touch-action:none!important}
.mapwrap{touch-action:none}

/* Leaflets egna kontroller nedtonade till vår formvärld */
.leaflet-container{font-family:var(--sans);background:var(--paper-2)}
.leaflet-control-zoom{border:0!important;box-shadow:var(--lift)!important;border-radius:var(--r-sm)!important;overflow:hidden}
.leaflet-control-zoom a{width:38px!important;height:38px!important;line-height:36px!important;
  background:var(--card)!important;color:var(--ink)!important;border-bottom:1px solid var(--rule)!important;
  font-size:19px!important;font-weight:400!important;transition:background .2s}
.leaflet-control-zoom a:hover{background:var(--paper-2)!important}
.leaflet-control-zoom a:last-child{border-bottom:0!important}
.leaflet-control-attribution{background:color-mix(in srgb,var(--card) 82%,transparent)!important;
  color:var(--ink-25)!important;font-size:10px!important;
  padding:2px 7px!important;border-radius:var(--r-xs) 0 0 0!important}
.leaflet-control-attribution a{color:var(--ink-45)!important}
.leaflet-bar{border:0!important}

/* ---------- prisnål ---------- */
.mpin{position:relative;transform:translate(-50%,-100%);display:inline-flex;align-items:center;gap:5px;
  padding:6px 11px;border-radius:999px;background:var(--card);color:var(--ink);
  font-size:12.5px;font-weight:600;white-space:nowrap;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  border:1px solid var(--rule-2);box-shadow:0 2px 6px rgba(20,25,26,.16),0 10px 22px -14px rgba(20,25,26,.5);
  transition:transform .22s var(--ease),background .22s,color .22s,border-color .22s;
  animation:pinDrop .45s var(--ease) both;cursor:pointer}
@keyframes pinDrop{from{opacity:0;transform:translate(-50%,-140%) scale(.85)}to{opacity:1;transform:translate(-50%,-100%) scale(1)}}
.mpin::after{content:"";position:absolute;left:50%;bottom:-4px;width:8px;height:8px;background:inherit;
  border-right:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2);
  transform:translateX(-50%) rotate(45deg);border-radius:0 0 2px 0}
.mpin:hover{transform:translate(-50%,-108%) scale(1.04);border-color:var(--ink)}
.mpin.on{background:var(--ink);color:var(--paper);border-color:transparent;z-index:900;
  transform:translate(-50%,-108%) scale(1.06)}
.mpin.on::after{border-color:transparent}
.mpin .b{width:7px;height:7px;border-radius:50%;background:var(--green-lift);flex:0 0 auto;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--green-lift) 26%,transparent)}

/* ledig = grön, upptagen = nedtonad, billigast = markerad */
.mpin.free{border-color:var(--green);color:var(--green);background:var(--card)}
.mpin.free::after{border-color:var(--green)}
.mpin.free .dot{width:7px;height:7px;border-radius:50%;background:var(--green-lift);flex:0 0 auto;
  animation:freePulse 2.4s var(--ease) infinite}
@keyframes freePulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--green-lift) 55%,transparent)}
  60%{box-shadow:0 0 0 5px color-mix(in srgb,var(--green-lift) 0%,transparent)}}
.mpin.busy{opacity:.62;border-style:dashed;color:var(--ink-45)}
.mpin.busy .dot{width:7px;height:7px;border-radius:50%;background:var(--ink-25);flex:0 0 auto}
.mpin.best{background:var(--green);color:#fff;border-color:transparent;font-weight:600}
.mpin.best::after{border-color:transparent}
.mpin.best .dot{background:#fff}
.mpin.best .flag{font-size:10.5px;opacity:.85;font-weight:500;margin-left:1px}
.mpin.on{background:var(--ink)!important;color:var(--paper)!important;border-color:transparent!important;opacity:1}
.mpin.on .dot{background:var(--green-lift)}

/* teckenförklaring */
.maplegend{position:absolute;left:12px;bottom:12px;z-index:4;display:flex;gap:14px;align-items:center;
  background:color-mix(in srgb,var(--card) 94%,transparent);backdrop-filter:blur(10px);
  border:1px solid var(--rule);border-radius:999px;padding:7px 14px;box-shadow:var(--lift);
  font-size:.8rem;color:var(--ink-70)}
.maplegend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}
.maplegend .l-free i{background:var(--green-lift)}
.maplegend .l-busy i{background:var(--ink-25)}
.maplegend .l-best i{background:var(--green)}
@media(max-width:560px){.maplegend{gap:10px;padding:6px 11px;font-size:.74rem}.maplegend .l-best{display:none}}
.leaflet-marker-icon{background:transparent!important;border:0!important}

/* ---------- min position ---------- */
.mme{width:18px;height:18px;border-radius:50%;background:#2C7BE5;border:3px solid #fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.18),0 3px 10px rgba(0,0,0,.3);position:relative}
.mme::after{content:"";position:absolute;inset:-10px;border-radius:50%;background:#2C7BE5;opacity:.22;
  animation:mePing 2.4s var(--ease) infinite}
@keyframes mePing{0%{transform:scale(.6);opacity:.3}70%,100%{transform:scale(2.2);opacity:0}}

/* ---------- överlägg på kartan ---------- */
.mapui{position:absolute;z-index:600;pointer-events:none}
.mapui>*{pointer-events:auto}
.mapui.tl{top:12px;left:12px;right:12px;display:flex;gap:9px;align-items:flex-start;z-index:610}
.msearch{max-width:420px}
/* Pa smala skarmar hamnar lagervaljara annars OVANPA sokfaltet */
@media(max-width:760px){ .mapui.tr{top:70px} }
/* Platskortet ska inte tacka zoomknapparna */
.mapwrap.has-card .leaflet-bottom.leaflet-right{bottom:110px}
.mapui.bl{left:12px;bottom:12px}
.mapui.tr{top:12px;right:12px;display:flex;flex-direction:column;gap:9px}

.msearch{flex:1;min-width:0;position:relative}
.msearch input{width:100%;height:46px;padding:0 44px 0 42px;border-radius:999px;border:1px solid var(--rule);
  background:color-mix(in srgb,var(--card) 96%,transparent);backdrop-filter:blur(12px);
  font-size:15px;box-shadow:var(--lift);transition:box-shadow .25s,border-color .2s}
.msearch input:focus{outline:0;border-color:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 15%,transparent),var(--lift)}
.msearch .mi{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--ink-45);pointer-events:none}
.msearch .mx{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:30px;height:30px;
  border-radius:50%;display:none;place-items:center;color:var(--ink-45)}
.msearch.filled .mx{display:grid}
.msearch .mx:hover{background:var(--paper-2);color:var(--ink)}
.mres{position:absolute;top:52px;left:0;right:0;background:var(--card);border:1px solid var(--rule);
  border-radius:var(--r-md);box-shadow:var(--lift-2);overflow:hidden;max-height:270px;overflow-y:auto;
  animation:fadeUp .3s var(--ease) both}
.mres button{display:flex;gap:11px;align-items:center;width:100%;padding:12px 15px;text-align:left;
  border-bottom:1px solid var(--rule);transition:background .18s}
.mres button:last-child{border-bottom:0}
.mres button:hover{background:var(--paper-2)}
.mres .ic{color:var(--ink-25);flex:0 0 auto}
.mres b{display:block;font-size:.9rem;font-weight:600}
.mres span{display:block;font-size:.76rem;color:var(--ink-45);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.mbtn{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--card) 96%,transparent);backdrop-filter:blur(12px);
  border:1px solid var(--rule);color:var(--ink-70);box-shadow:var(--lift);
  transition:transform .18s var(--ease),color .2s,border-color .2s}
.mbtn:hover{color:var(--ink);border-color:var(--ink-25);transform:scale(1.06)}
.mbtn:active{transform:scale(.94)}
.mbtn.on{background:var(--ink);color:var(--paper);border-color:transparent}

.mseg{display:flex;gap:2px;padding:3px;border-radius:999px;box-shadow:var(--lift);
  background:color-mix(in srgb,var(--card) 96%,transparent);backdrop-filter:blur(12px);border:1px solid var(--rule)}
.mseg button{padding:8px 15px;border-radius:999px;font-size:.8rem;font-weight:600;color:var(--ink-45);
  display:flex;align-items:center;gap:6px;transition:all .22s var(--ease)}
.mseg button.on{background:var(--ink);color:var(--paper)}
.mseg button:not(.on):hover{color:var(--ink)}

/* kort som glider upp när en nål väljs */
.mcard{position:absolute;left:12px;right:12px;bottom:12px;z-index:650;
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r-md);box-shadow:var(--lift-2);
  padding:14px;display:grid;grid-template-columns:62px 1fr auto;gap:14px;align-items:center;
  animation:cardUp .38s var(--ease) both;cursor:pointer;max-width:520px;margin:0 auto}
@keyframes cardUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.mcard:hover{border-color:var(--ink-25)}
.mcard .thumb{width:62px;height:56px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--paper-2);border:1px solid var(--rule);color:var(--green)}
.mcard .nm{font-size:.95rem;font-weight:600;letter-spacing:-.012em}
.mcard .ad{font-size:.78rem;color:var(--ink-45);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mcard .tags{display:flex;gap:5px;margin-top:7px;flex-wrap:wrap}
.mcard .pr{text-align:right;white-space:nowrap}
.mcard .pr b{display:block;font-family:var(--display);font-weight:600;font-size:1.18rem;letter-spacing:-.026em;line-height:1.1}
.mcard .pr span{display:block;font-size:.76rem;color:var(--ink-45);margin-top:2px}
@media(max-width:520px){
  .mcard{grid-template-columns:52px 1fr auto;padding:12px;gap:11px}
  .mcard .thumb{width:52px;height:48px}
  .mapui.tl{top:10px;left:10px;right:10px}
}

/* laddindikator */
.mload{position:absolute;top:0;left:0;right:0;height:2px;z-index:700;overflow:hidden;background:transparent}
.mload i{display:block;height:100%;width:36%;background:var(--green);animation:mload 1.1s var(--ease-2) infinite}
@keyframes mload{0%{transform:translateX(-100%)}100%{transform:translateX(380%)}}