/* ==========================================================================================
   Flera stjärnor i samma köp (docs/flera-stjarnor.md): rutan "Fler stjärnor i samma köp" i köpformuläret
   (templates/_flera.html, static/js/flera.js) och köpets stjärnor på ordersidan och kvittot
   (templates/_kop_stjarnor.html). Kassans tokens (--k-*, static/css/kassa.css), inga egna färger.
   ========================================================================================== */

/* ---------- Köpformuläret ---------- */
.kop .flera .fraga-titel { font-size: clamp(22px, 2vw, 26px); }
.kop .flera-lista { list-style: none; margin: 0 0 16px; padding: 0; border-top: 1px solid var(--k-kant); }
.kop .flera-lista:focus { outline: none; }
.kop .flera-lista:focus-visible { outline: 2px solid var(--k-bla); outline-offset: 4px; border-radius: var(--r-liten, 6px); }
.kop .flera-rad { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline;
  padding: 14px 0; border-bottom: 1px solid var(--k-kant); }
.kop .flera-rad-text { display: grid; gap: 2px; min-width: 0; }
.kop .flera-rad-text b { font-size: 16px; font-weight: 600; color: var(--k-text); overflow-wrap: anywhere; }
.kop .flera-rad-text span { font-size: 14px; line-height: 1.4; color: var(--k-dis); }
.kop .flera-rad-halsning { font-style: italic; overflow-wrap: anywhere; }
.kop .flera-forsta .flera-rad-text b { font-weight: 600; }
.kop .flera-rad-pris { font-size: 15px; color: var(--k-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kop .flera-rad-knappar { grid-column: 1 / -1; display: flex; gap: 20px; }
.kop .flera-rad-knappar .lank { min-height: 44px; font-size: 15px; font-weight: 600; color: var(--k-lank); }
.kop .flera-rad-knappar .lank:hover { text-decoration: underline; }
.kop .flera-rad-knappar .lank:focus-visible { outline: 2px solid var(--k-bla); outline-offset: 2px; border-radius: var(--r-liten, 6px); }

.kop .flera-redigera { margin: 0 0 16px; padding: 20px; border-radius: var(--k-r-stor); background: var(--k-gra); }
.kop .flera-redigera-rubrik { margin: 0 0 16px; font: 600 17px/1.3 var(--k-sans); color: var(--k-text); }
.kop .flera-tva { margin-top: 22px; }
.kop .flera-tva .falt + .falt { margin-top: 0; }
.kop .flera-tva + .falt { margin-top: 22px; }
.kop .flera-redigera select { width: 100%; }
.kop .flera-arver { margin: 16px 0 0; font-size: 14px; line-height: 1.5; color: var(--k-dis); }
.kop .flera-knappar { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

/* Sekundär handling: kontur, så att köpknappen förblir den enda fyllda */
.kop .flera :is(.flera-lagg-till, #flera-avbryt).knapp.tunn { background: transparent; color: var(--k-text); box-shadow: inset 0 0 0 1.5px var(--k-text); }
.kop .flera :is(.flera-lagg-till, #flera-avbryt).knapp.tunn:hover { background: var(--k-gra); color: var(--k-text); }
.kop .flera-lagg-till { width: 100%; }
.kop .flera-max { margin: 0; font-size: 14px; color: var(--k-dis); }
.kop #korg-fel { margin-top: 12px; }

@media (max-width: 560px) {
  .kop .flera-redigera { padding: 16px; margin-inline: -4px; }
  .kop .flera-tva { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .kop .flera-knappar .knapp { flex: 1 1 auto; }
}

/* ---------- Ordersidan och kvittot ---------- */
.kop-stjarnor { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--linje, #dde1ea); font-size: 15px; line-height: 1.45; }
.kop-stjarnor-rubrik { margin: 0 0 6px; }
.kop-stjarnor-lista { margin: 0; padding-left: 1.4em; display: grid; gap: 4px; }
.kop-stjarnor-dis { color: var(--text-2, #5b6275); }
.kop-stjarnor-summa { margin: 8px 0 0; color: var(--text-2, #5b6275); }
@media print { .kop-stjarnor a { color: inherit; text-decoration: none; } }