/* ---------- Stöd projektet ---------- */
.stod-topp { display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start; padding-top: 72px; padding-bottom: 56px; }
.stod-text { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.stod-text .ingress { max-width: 36rem; }
.bocklista { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 1.0625rem; line-height: 1.5; }
.bocklista li { display: flex; gap: 12px; align-items: flex-start; }
.bocklista svg { flex: 0 0 auto; margin-top: 2px; }
.swishkort { flex: 1 1 460px; min-width: 0; background: var(--yta); border: 1px solid var(--linje); border-radius: 28px; padding: var(--a5); display: flex; flex-direction: column; gap: 26px; box-shadow: 0 20px 40px -28px rgba(15,30,42,0.35); }
.swishkort-huvud { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.swishkort h3 { font-size: 1rem; font-weight: 600; }
@media (max-width: 520px) { .swishkort { padding: 20px; border-radius: 22px; gap: 20px; } .stod-topp { padding-top: 28px; gap: 24px; } }

.belopp { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.belopp legend { padding: 0; margin-bottom: 12px; font-size: 1rem; font-weight: 600; }
.belopp-rutnat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 520px) { .belopp-rutnat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Riktiga radioknappar; den synliga ytan är etiketten. */
.belopp-val { position: relative; display: block; cursor: pointer; }
.belopp:disabled .belopp-val { cursor: not-allowed; }
.belopp:disabled { opacity: 0.65; }
.belopp-val input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.belopp-val span {
  display: flex; align-items: center; justify-content: center; min-height: 56px; border-radius: 14px;
  font-size: 1.125rem; font-weight: 600; border: 2px solid var(--kontroll); background: var(--yta); color: var(--natt);
}
.belopp-eget span { min-height: 48px; font-size: 1rem; }
.belopp-val input:checked + span { background: var(--natt); color: #fff; border-color: var(--natt); }
.belopp-val input:focus-visible + span { outline: 3px solid var(--lank); outline-offset: 3px; }
.eget-falt { display: flex; flex-direction: column; gap: 6px; }
.eget-falt label { font-size: 0.9375rem; font-weight: 600; }
.eget-rad { display: flex; align-items: center; gap: 10px; font-size: 1.0625rem; }
.eget-rad input { width: 160px; max-width: 100%; min-height: 48px; border-radius: 12px; border: 2px solid var(--kontroll); padding: 0 14px; font: inherit; font-size: 1.125rem; color: var(--natt); background: var(--yta); }
.eget-rad input[aria-invalid="true"] { border-color: var(--fel); }
.eget-hjalp { font-size: 0.875rem; color: var(--dimma); }
.eget-hjalp.fel { color: var(--fel); font-weight: 600; }

.samma-telefon { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--linje-svag); padding-top: 22px; }
.swishknapp { justify-content: center; font-size: 1.0625rem; }
.swishknapp:disabled { cursor: not-allowed; opacity: 0.65; }
.qr-ruta { border-top: 1px solid var(--linje-svag); padding-top: 4px; }
.qr-ruta > summary { cursor: pointer; font-size: 1rem; font-weight: 600; padding: 12px 0; color: var(--lank); }
.qr-innehall { display: flex; flex-direction: column; gap: 14px; padding-top: 8px; }
.qr-rad { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
.qr-figur { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.qr-figur figcaption { font-size: 0.8125rem; color: var(--dimma); }
.qr-ram { position: relative; width: 224px; max-width: 100%; padding: 10px; background: var(--yta); border: 1px solid var(--linje); border-radius: 14px; }
.exempel-qr { display: block; width: 100%; height: auto; }
.qr-stampel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-24deg);
  font-family: var(--mono); font-weight: 500; font-size: 1.375rem; letter-spacing: 0.1em;
  color: var(--otillr-fg); background: var(--otillr-bg); border: 2px solid var(--otillr-fg); border-radius: 6px; padding: 4px 10px;
}
.qr-fakta { flex: 1 1 180px; min-width: 0; border-top: 0; padding-top: 0; font-size: 1rem; }
/* Skrivbord: QR-koden syns direkt och ligger före "samma telefon".
   Visuell ordning ändras bara för icke-fokuserbart innehåll (summary döljs). */
@media (min-width: 821px) {
  .js .qr-ruta { order: 1; border-top: 1px solid var(--linje-svag); padding-top: 22px; }
  .js .qr-ruta > summary { display: none; }
  .js .samma-telefon { order: 2; }
}

.stod-fragor { max-width: 880px; padding-top: 72px; padding-bottom: 88px; display: flex; flex-direction: column; gap: 16px; }
.fraga-ruta { border: 1px solid var(--linje); border-radius: var(--horn-litet); padding: 18px 22px; background: var(--yta); }
.fraga-ruta summary { cursor: pointer; font-size: 1.125rem; font-weight: 600; }
.fraga-ruta p { margin-top: 12px; font-size: 1rem; line-height: 1.65; color: var(--skiffer); }