/* Minikartan i köpformulärets steg 2 (templates/_skapa.html #minikarta, static/js/minikarta.js).
   Den valda stjärnbilden i natthimlens blå (samma som himlen-förhandsvisningen i kassa.css), kundens stjärna
   med en guldring, och två rader i vardagsspråk bredvid. Eget blad så att kassa.css inte behöver röras. */
.kop .minikarta { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 18px; align-items: center; margin: 0 0 16px;
  padding: 14px; border-radius: var(--k-r-stor, 14px); background: var(--k-gra, #f5f5f7); }
.kop .minikarta[hidden] { display: none; }
.kop .minikarta-bild { position: relative; aspect-ratio: 1; border-radius: var(--k-r, 10px); background: #0d1430; overflow: hidden; }
.kop .minikarta-bild svg { display: block; width: 100%; height: 100%; }
.kop .minikarta-text { display: grid; gap: 3px; justify-items: start; min-width: 0; }
.kop .minikarta-etikett { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--k-dis, #6e6e73); }
.kop .minikarta-rubrik { font: 600 17px/1.3 var(--k-sans); letter-spacing: -.01em; color: var(--k-text, #1d1d1f); overflow-wrap: anywhere; }
.kop .minikarta-rad { font-size: 14px; line-height: 1.4; color: var(--k-text, #1d1d1f); }
.kop .minikarta-rad + .minikarta-rad { color: var(--k-dis, #6e6e73); }
.kop .minikarta-byt { min-height: 44px; margin: 0 0 -10px; padding: 0; border: 0; background: none; color: var(--k-lank, #0066cc);
  font: 400 14px var(--k-sans); cursor: pointer; }
.kop .minikarta-byt:hover { text-decoration: underline; }
.kop .minikarta-byt:focus-visible { outline: 2px solid var(--k-bla, #0071e3); outline-offset: 2px; border-radius: var(--r-liten, 6px); }

/* Kartans delar. Koordinaterna är -1..1, så linjebredderna är små tal. */
.minikarta svg .mk-grans { fill: none; stroke: rgba(154, 163, 189, .35); stroke-width: .006; stroke-dasharray: .02 .018; }
.minikarta svg .mk-linje { fill: none; stroke: rgba(214, 222, 240, .75); stroke-width: .011; stroke-linecap: round; stroke-linejoin: round; }
.minikarta svg .mk-ring { fill: none; stroke: var(--guld, #e3b04b); stroke-width: .016; }
.minikarta svg .mk-ring2 { fill: none; stroke: var(--guld, #e3b04b); stroke-width: .006; opacity: .55; }

/* Bytet: den gamla kartan tonar ut medan den nya tonar in, linjerna ritas fram och ringen landar runt stjärnan */
.minikarta svg .mk-lager { transition: opacity .45s var(--k-ut, ease-out); }
.minikarta svg .mk-lager.ut { opacity: 0; }
.minikarta svg .mk-lager.in { opacity: 0; }
.minikarta svg .mk-lager .mk-linje { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--k-ut, ease-out); }
.minikarta svg .mk-lager.in .mk-linje { stroke-dashoffset: 1; }
.minikarta svg .mk-mal { transition: transform .6s var(--k-ut, ease-out) .25s, opacity .6s .25s; transform-box: fill-box; transform-origin: center; }
.minikarta svg .mk-lager.in .mk-mal { transform: scale(1.8); opacity: 0; }
.minikarta-text > * { transition: opacity .3s; }
.minikarta.byter .minikarta-text > :not(.minikarta-byt):not(.minikarta-etikett) { opacity: .35; }

@media (prefers-reduced-motion: reduce) {
  .minikarta svg .mk-lager, .minikarta svg .mk-lager .mk-linje, .minikarta svg .mk-mal, .minikarta-text > * { transition: none; }
}

@media (max-width: 560px) {
  .kop .minikarta { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; padding: 12px; }
  .kop .minikarta-rubrik { font-size: 16px; }
  .kop .minikarta-rad { font-size: 13px; }
}