/* Winnido: säljsida, intervju, panel och kassa. Barnens spel har egen stil i spela/stil.css. */
:root {
  --papper: #fff8ef;
  --kort: #ffffff;
  --text: #2b2233;
  --mjuk: #6f6478;
  --kant: #efe3d3;
  --orange: #ff7a2f;
  --orange-mork: #e2600f;
  --gron: #2fb36b;
  --gron-mork: #22915a;
  --gul: #f5b81f;
  --bla: #3d7be0;
  --lila: #b65cf0;
  --rod: #e5484d;
  --skugga: 0 10px 30px rgba(73, 45, 20, 0.08), 0 2px 6px rgba(73, 45, 20, 0.05);
  --rubrik: 'Fredoka', ui-rounded, 'Segoe UI', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papper); color: var(--text); font: 17px/1.55 -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; overflow-x: hidden; }
h1, h2, h3, h4 { font-family: var(--rubrik); line-height: 1.15; margin: 0 0 0.4em; font-weight: 600; }
a { color: var(--orange-mork); }
img { max-width: 100%; }
button { font: inherit; cursor: pointer; color: inherit; }
.inner { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.svag { color: var(--mjuk); }
.liten { font-size: 14px; }

/* Knappar */
.knapp { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; padding: 14px 26px; font-family: var(--rubrik); font-weight: 600; font-size: 19px; text-decoration: none; background: var(--orange); color: #fff; box-shadow: 0 4px 0 var(--orange-mork); transition: transform 0.12s, box-shadow 0.12s; }
.knapp:hover { transform: translateY(-1px); }
.knapp:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--orange-mork); }
.knapp.gron { background: var(--gron); box-shadow: 0 4px 0 var(--gron-mork); }
.knapp.vit { background: #fff; color: var(--text); box-shadow: 0 4px 0 var(--kant); border: 2px solid var(--kant); }
.knapp.smal { padding: 9px 18px; font-size: 16px; }
.knapp[disabled] { opacity: 0.55; pointer-events: none; }
.lank { background: none; border: 0; color: var(--mjuk); text-decoration: underline; padding: 4px; }

/* Navigering */
.nav { position: sticky; top: 0; z-index: 20; background: rgba(255, 248, 239, 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--kant); }
.nav .inner { display: flex; align-items: center; gap: 18px; height: 64px; }
.logga { font-family: var(--rubrik); font-weight: 700; font-size: 26px; color: var(--text); text-decoration: none; white-space: nowrap; }
.logga span { color: var(--orange); }
.nav .lankar { display: flex; gap: 18px; margin-left: auto; align-items: center; }
.nav .lankar a { color: var(--text); text-decoration: none; font-weight: 500; }
@media (max-width: 760px) { .nav .lankar a.dolj { display: none; } }

/* Hjälte */
.hero { padding: 54px 0 40px; }
.hero .inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; }
.hero h1 { font-size: clamp(40px, 7vw, 68px); letter-spacing: -0.5px; }
.hero h1 em { font-style: normal; color: var(--orange); }
.hero p.ingress { font-size: clamp(18px, 2.4vw, 21px); color: var(--mjuk); max-width: 33em; }
.cta-rad { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 12px; }
.bricka-rad { display: flex; flex-wrap: wrap; gap: 14px; font-size: 15px; color: var(--mjuk); }
.bricka-rad span::before { content: '✓ '; color: var(--gron); font-weight: 700; }
@media (max-width: 860px) { .hero .inner { grid-template-columns: 1fr; } .hero { padding-top: 30px; } }

/* Illustration: läxblad → spel */
.forvandling { position: relative; min-height: 420px; }
.laxblad { position: absolute; left: 0; top: 30px; width: 54%; background: #fffdf7; border-radius: 6px; padding: 22px 18px 26px; box-shadow: var(--skugga); transform: rotate(-5deg); font-family: 'Caveat', 'Bradley Hand', cursive; font-size: 21px; line-height: 1.55; background-image: repeating-linear-gradient(transparent 0 31px, #dfe8f5 31px 32px); }
.laxblad b { font-family: var(--rubrik); font-size: 15px; color: var(--mjuk); display: block; margin-bottom: 6px; }
.pil { position: absolute; left: 41%; top: 52%; font-size: 46px; color: var(--orange); transform: rotate(-8deg); z-index: 2; }
.telefon { position: absolute; right: 0; top: 0; width: 56%; max-width: 290px; height: 410px; background: #fff; border-radius: 34px; border: 10px solid #2b2233; box-shadow: var(--skugga); overflow: hidden; display: flex; flex-direction: column; align-items: center; padding: 18px 12px; text-align: center; }
.telefon .tfraga { font-family: var(--rubrik); font-size: 17px; margin-top: 6px; }
.telefon .temoji { font-size: 74px; margin: 6px 0; }
.telefon .tval { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.telefon .tval span { border: 2px solid var(--kant); border-radius: 12px; padding: 9px 4px; font-family: var(--rubrik); font-size: 15px; box-shadow: 0 3px 0 var(--kant); }
.telefon .tval span.ratt { background: #dff6e9; border-color: var(--gron); box-shadow: 0 3px 0 var(--gron); }
.telefon .tkompis { display: flex; align-items: flex-end; gap: 6px; margin-top: auto; width: 100%; }
.telefon .tkompis img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: top; border: 3px solid #fff; box-shadow: var(--skugga); }
.telefon .tkompis div { background: #fff7ec; border-radius: 14px 14px 14px 4px; padding: 6px 10px; font-size: 14px; font-weight: 600; }
.konfettibit { position: absolute; width: 10px; height: 6px; border-radius: 2px; animation: falla 3.2s linear infinite; }
@keyframes falla { from { transform: translateY(-20px) rotate(0); opacity: 1; } to { transform: translateY(420px) rotate(540deg); opacity: 0; } }
@media (max-width: 480px) { .forvandling { min-height: 360px; } .laxblad { font-size: 18px; padding: 16px 12px; } }

/* Sektioner */
section { padding: 64px 0; }
section.vit { background: #fff; }
.sektionsrubrik { text-align: center; max-width: 720px; margin: 0 auto 36px; }
.sektionsrubrik h2 { font-size: clamp(30px, 5vw, 44px); }
.sektionsrubrik p { color: var(--mjuk); font-size: 19px; margin: 0; }
.etikett { display: inline-block; font-family: var(--rubrik); font-weight: 600; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: var(--orange-mork); background: #ffe9d9; padding: 4px 12px; border-radius: 999px; margin-bottom: 12px; }
.rutnat { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ruta { background: var(--kort); border-radius: 22px; padding: 24px; box-shadow: var(--skugga); }
section.vit .ruta { background: var(--papper); box-shadow: none; border: 1px solid var(--kant); }
.ruta .stor-ikon { font-size: 40px; line-height: 1; margin-bottom: 10px; }
.ruta h3 { font-size: 22px; }
.ruta p { margin: 0; color: var(--mjuk); }
.steg { counter-reset: steg; }
.steg .ruta { position: relative; padding-top: 30px; }
.steg .ruta::before { counter-increment: steg; content: counter(steg); position: absolute; top: -16px; left: 22px; width: 38px; height: 38px; border-radius: 50%; background: var(--orange); color: #fff; font-family: var(--rubrik); font-weight: 700; font-size: 20px; display: grid; place-items: center; box-shadow: 0 3px 0 var(--orange-mork); }

.chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.chips span { background: #fff; border: 2px solid var(--kant); border-radius: 999px; padding: 8px 16px; font-weight: 600; }

/* Åldersgrupper */
.alder { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.alder .ruta { text-align: center; }
.figurer { display: flex; justify-content: center; margin-bottom: 12px; }
.figurer img { width: 78px; height: 78px; border-radius: 50%; object-fit: cover; object-position: top; border: 4px solid #fff; box-shadow: var(--skugga); margin: 0 -9px; background: var(--papper); }
.figurer .ikon { width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; font-size: 40px; background: #fff; box-shadow: var(--skugga); }
.alder .spann { font-family: var(--rubrik); font-weight: 600; color: var(--orange-mork); }

/* Priser */
.periodval { display: flex; justify-content: center; gap: 6px; margin: -12px auto 28px; background: #fff; border: 2px solid var(--kant); border-radius: 999px; padding: 5px; width: max-content; }
.periodval button { border: 0; background: none; border-radius: 999px; padding: 8px 18px; font-weight: 600; }
.periodval button.vald { background: var(--text); color: #fff; }
.periodval small { color: var(--gron); font-weight: 700; }
.priser { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; align-items: stretch; }
.pris { background: #fff; border-radius: 24px; padding: 26px 22px; box-shadow: var(--skugga); display: flex; flex-direction: column; border: 3px solid transparent; position: relative; }
.pris.popular { border-color: var(--orange); }
.pris .flagga { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--orange); color: #fff; font-family: var(--rubrik); font-weight: 600; font-size: 14px; padding: 3px 14px; border-radius: 999px; white-space: nowrap; }
.pris h3 { font-size: 24px; margin-bottom: 4px; }
.pris .belopp { font-family: var(--rubrik); font-size: 42px; font-weight: 700; margin: 8px 0 0; }
.pris .belopp small { font-size: 17px; color: var(--mjuk); font-weight: 500; }
.pris .per-dag { color: var(--gron-mork); font-weight: 600; font-size: 15px; min-height: 1.4em; }
.pris ul { list-style: none; padding: 0; margin: 16px 0 22px; flex: 1; }
.pris li { padding: 5px 0 5px 26px; position: relative; }
.pris li::before { content: '✓'; position: absolute; left: 0; color: var(--gron); font-weight: 800; }
.pris .knapp { width: 100%; }
.extra { text-align: center; margin-top: 22px; color: var(--mjuk); }

/* Vanliga frågor */
.faq { max-width: 780px; margin: 0 auto; }
.faq details { background: #fff; border-radius: 18px; padding: 16px 20px; margin-bottom: 10px; box-shadow: var(--skugga); }
.faq summary { cursor: pointer; font-family: var(--rubrik); font-weight: 600; font-size: 19px; list-style: none; }
.faq summary::after { content: '+'; float: right; color: var(--orange); font-size: 24px; line-height: 1; }
.faq details[open] summary::after { content: '–'; }
.faq p { color: var(--mjuk); margin: 10px 0 0; }

.slut-cta { text-align: center; background: var(--orange); color: #fff; border-radius: 30px; padding: 46px 22px; }
.slut-cta h2 { font-size: clamp(30px, 5vw, 44px); }
.slut-cta .knapp { background: #fff; color: var(--orange-mork); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.15); }
footer { padding: 30px 0 50px; color: var(--mjuk); font-size: 15px; text-align: center; }

/* ---------- Intervju ---------- */
.intervju { max-width: 640px; margin: 0 auto; padding: 26px 20px 80px; }
.matare { height: 10px; background: var(--kant); border-radius: 99px; overflow: hidden; margin: 6px 0 28px; }
.matare i { display: block; height: 100%; background: var(--orange); border-radius: 99px; transition: width 0.4s; }
.fragesteg h1 { font-size: clamp(28px, 6vw, 38px); }
.fragesteg .under { color: var(--mjuk); font-size: 18px; margin: -4px 0 22px; }
.val { display: grid; gap: 12px; }
.val.tva { grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .val.tva { grid-template-columns: 1fr; } }
.valruta { background: #fff; border: 3px solid var(--kant); border-radius: 20px; padding: 16px 18px; text-align: left; display: flex; gap: 14px; align-items: center; box-shadow: 0 4px 0 var(--kant); transition: border-color 0.15s, transform 0.12s; }
.valruta:hover { border-color: #ffc59f; }
.valruta.vald { border-color: var(--orange); background: #fff4ea; box-shadow: 0 4px 0 #ffc59f; }
.valruta .i { font-size: 32px; flex: none; }
.valruta b { display: block; font-family: var(--rubrik); font-weight: 600; font-size: 19px; }
.valruta small { color: var(--mjuk); font-size: 15px; }
.chipval { display: flex; flex-wrap: wrap; gap: 10px; }
.chipval button { background: #fff; border: 2px solid var(--kant); border-radius: 999px; padding: 9px 16px; font-weight: 600; }
.chipval button.vald { border-color: var(--orange); background: #fff4ea; }
.falt { display: grid; gap: 6px; margin-bottom: 14px; }
.falt label { font-weight: 600; font-size: 15px; }
.falt input, .falt select, .falt textarea { width: 100%; border: 2px solid var(--kant); border-radius: 14px; padding: 12px 14px; font: inherit; background: #fff; }
.falt input:focus, .falt select:focus, .falt textarea:focus { outline: none; border-color: var(--orange); }
.barnrad { display: grid; grid-template-columns: 1fr 96px 110px 40px; gap: 8px; margin-bottom: 8px; }
.barnrad input, .barnrad select { border: 2px solid var(--kant); border-radius: 12px; padding: 11px 10px; font: inherit; background: #fff; min-width: 0; }
.barnrad button { border: 0; background: none; font-size: 22px; color: var(--mjuk); }
@media (max-width: 520px) { .barnrad { grid-template-columns: 1fr 80px 40px; } .barnrad .ak { display: none; } }
.stegknappar { display: flex; justify-content: space-between; align-items: center; margin-top: 26px; gap: 12px; }
.kryss { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--mjuk); margin: 10px 0; }
.kryss input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--orange); }
.plankort { background: #fff; border-radius: 22px; padding: 20px; box-shadow: var(--skugga); margin-bottom: 14px; display: flex; gap: 14px; align-items: center; }
.plankort img, .plankort .ikon { width: 66px; height: 66px; border-radius: 50%; object-fit: cover; object-position: top; flex: none; border: 3px solid #fff; box-shadow: var(--skugga); font-size: 34px; display: grid; place-items: center; background: var(--papper); }
.plankort p { margin: 2px 0 0; color: var(--mjuk); font-size: 15px; }
.felrad { color: var(--rod); font-weight: 600; min-height: 1.4em; }

/* ---------- Panelen ---------- */
.panel { max-width: 1120px; margin: 0 auto; padding: 22px 20px 90px; }
.panelhuvud { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.panelhuvud h1 { font-size: clamp(28px, 5vw, 38px); margin: 0; }
.kvot { background: #fff; border-radius: 18px; padding: 12px 16px; box-shadow: var(--skugga); min-width: 260px; }
.kvot .stapel { height: 9px; background: var(--kant); border-radius: 99px; overflow: hidden; margin: 6px 0 2px; }
.kvot .stapel i { display: block; height: 100%; background: var(--gron); }
.kolumner { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .kolumner { grid-template-columns: 1fr; } }
.block { background: #fff; border-radius: 24px; padding: 22px; box-shadow: var(--skugga); margin-bottom: 20px; }
.block > h2 { font-size: 24px; display: flex; align-items: center; gap: 10px; }
.block > h2 .antal { background: var(--orange); color: #fff; font-size: 14px; border-radius: 99px; padding: 1px 10px; }
.nylaxa .fotozon { border: 3px dashed #ffc59f; border-radius: 20px; padding: 22px 14px; text-align: center; background: #fff8f1; cursor: pointer; display: block; font-weight: 600; }
.nylaxa .fotozon .stor { font-size: 40px; display: block; }
.forhands { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.forhands img { height: 110px; border-radius: 10px; box-shadow: var(--skugga); }
.vemval { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }
.vemval label { display: flex; align-items: center; gap: 6px; background: var(--papper); border: 2px solid var(--kant); border-radius: 999px; padding: 6px 12px 6px 8px; font-weight: 600; cursor: pointer; }
.vemval label:has(input:checked) { border-color: var(--orange); background: #fff4ea; }
.vemval input { accent-color: var(--orange); }
.laxrad { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--kant); }
.laxrad:first-of-type { border-top: 0; }
.laxrad .ikon { font-size: 30px; width: 44px; text-align: center; flex: none; }
.laxrad .mitt { flex: 1; min-width: 0; }
.laxrad .mitt b { font-family: var(--rubrik); font-weight: 600; font-size: 18px; }
.laxrad .mitt small { display: block; color: var(--mjuk); }
.status { font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 99px; white-space: nowrap; }
.status.granska { background: #fff1c9; color: #8a6200; }
.status.publicerad { background: #dff6e9; color: var(--gron-mork); }
.status.genererar { background: #e6efff; color: var(--bla); }
.status.fel { background: #fde4e4; color: var(--rod); }
.barnkort { border: 1px solid var(--kant); border-radius: 20px; padding: 16px; margin-bottom: 14px; }
.barnkort .topp { display: flex; gap: 12px; align-items: center; }
.barnkort .topp img, .barnkort .topp .ikon { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: top; flex: none; font-size: 30px; display: grid; place-items: center; background: var(--papper); }
.barnkort .topp h3 { margin: 0; font-size: 21px; }
.barnkort .topp small { color: var(--mjuk); }
.siffror { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; text-align: center; }
.siffror div { background: var(--papper); border-radius: 14px; padding: 8px 4px; }
.siffror b { display: block; font-family: var(--rubrik); font-size: 24px; }
.siffror small { color: var(--mjuk); font-size: 13px; }
.minilaxa { display: grid; grid-template-columns: 1fr 120px; gap: 4px 12px; align-items: center; font-size: 15px; padding: 6px 0; }
.minilaxa .stapel { height: 8px; background: var(--kant); border-radius: 99px; overflow: hidden; }
.minilaxa .stapel i { display: block; height: 100%; background: var(--gul); }
.minilaxa .stapel i.klar { background: var(--gron); }
.minilaxa .svara { grid-column: 1 / -1; font-size: 13px; color: var(--mjuk); }
.minilaxa .svara span { background: #fde4e4; color: #a33; border-radius: 6px; padding: 0 6px; margin-right: 4px; display: inline-block; margin-top: 2px; }
.kodruta { background: #2b2233; color: #fff; border-radius: 20px; padding: 18px; text-align: center; }
.kodruta .kod { font-family: ui-monospace, Menlo, monospace; font-size: 34px; letter-spacing: 6px; font-weight: 700; color: var(--gul); }
.kodruta a { color: #ffd9bf; }
.notis { padding: 9px 0; border-top: 1px solid var(--kant); font-size: 15px; }
.notis.ny { font-weight: 700; }
.notis small { color: var(--mjuk); display: block; font-weight: 400; }
.granskning table { width: 100%; border-collapse: collapse; font-size: 15px; }
.granskning th { text-align: left; color: var(--mjuk); font-weight: 600; padding: 4px; font-size: 13px; }
.granskning td { padding: 3px; }
.granskning td input { width: 100%; border: 1px solid var(--kant); border-radius: 8px; padding: 6px 8px; font: inherit; }
.granskning td input:focus { outline: none; border-color: var(--orange); }
.varning { background: #fff1c9; border-radius: 14px; padding: 10px 14px; margin: 10px 0; font-size: 15px; }
.lagenlista { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.lagenlista span { background: var(--papper); border-radius: 99px; padding: 3px 10px; font-size: 14px; }
.dev { background: #2b2233; color: #ddd; font-size: 13px; padding: 7px 14px; text-align: center; z-index: 50; }
.dev a { color: var(--gul); }
.overlay { position: fixed; inset: 0; background: rgba(43, 34, 51, 0.45); display: grid; place-items: center; z-index: 60; padding: 16px; }
.overlay .block { max-width: 760px; width: 100%; max-height: 90dvh; overflow: auto; margin: 0; }
.vaxla { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.vaxla input { accent-color: var(--orange); width: 18px; height: 18px; }
.snurra { width: 26px; height: 26px; border-radius: 50%; border: 4px solid var(--kant); border-top-color: var(--orange); animation: snurr 0.9s linear infinite; flex: none; }
@keyframes snurr { to { transform: rotate(360deg); } }
.toast { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); background: var(--text); color: #fff; padding: 10px 18px; border-radius: 99px; z-index: 80; font-weight: 600; }

.telefon .ttopp { display: flex; align-items: center; gap: 8px; width: 100%; }
.telefon .tmatare { flex: 1; height: 8px; background: var(--kant); border-radius: 99px; overflow: hidden; }
.telefon .tmatare i { display: block; width: 60%; height: 100%; background: var(--orange); }
.telefon .tpill { font-size: 13px; font-weight: 700; background: #fff7ec; border-radius: 99px; padding: 2px 8px; }
.telefon .tsvit { font-family: var(--rubrik); font-weight: 700; color: var(--orange); margin-top: 12px; font-size: 18px; animation: puls 1.6s ease-in-out infinite; }
@keyframes puls { 50% { transform: scale(1.12); } }
@media (max-width: 480px) { .telefon { height: 360px; } .telefon .temoji { font-size: 56px; } }

/* Ikoner */
.ruta .stor-ikon .ik { width: 44px; height: 44px; }
.valruta .i .ik { width: 36px; height: 36px; }
.chips .ik { width: 1.2em; height: 1.2em; }
.figurer .ikon .ik { width: 44px; height: 44px; }
.plankort .ikon .ik { width: 36px; height: 36px; }
.laxrad .ikon .ik { width: 34px; height: 34px; }
.barnkort .topp .ikon .ik { width: 32px; height: 32px; }
.nylaxa .fotozon .stor .ik { width: 48px; height: 48px; }
.knapp .ik { width: 1.1em; height: 1.1em; }
.sprakkod { display: inline-grid; place-items: center; font-size: 0.72em; font-weight: 700; letter-spacing: .5px; background: var(--text); color: #fff; border-radius: 6px; padding: 1px 6px; vertical-align: 0.1em; }

/* ---------- Mobil ---------- */
.kolumner > * { min-width: 0; }
.periodval { max-width: 100%; flex-wrap: wrap; justify-content: center; }
.kvot { min-width: min(260px, 100%); }
.nav .lankar a { white-space: nowrap; }
@media (max-width: 480px) {
  .nav .inner { gap: 10px; }
  .nav .lankar { gap: 12px; font-size: 15px; }
  .nav .lankar .knapp.smal { padding: 8px 14px; font-size: 15px; }
  .logga { font-size: 22px; }
}
.sprakval { font-weight: 600; color: var(--text); text-decoration: none; border: 2px solid var(--kant); border-radius: 999px; padding: 4px 12px; font-size: 14px; }
html[lang="en"] .sprakval .sv-text { display: none; }
html[lang="en"] .sprakval::after { content: 'Svenska'; }