/* Pakkevælgeren på /priser/vaelg-pakke.
   Bygget efter pakke-website/pakkevaelger.html. */

.vaelger-top{padding:64px 0 10px;}
.vaelger-top h1{max-width:22ch;}
.vaelger-top .lead{max-width:52ch;font-size:19px;}

.vaelger{max-width:66ch;padding:34px 0 90px;}

/* Uden JavaScript virker vælgeren ikke, og så skal der stå hvor priserne er.
   Scriptet skjuler linjen, når det kører. */
.uden-js{margin-bottom:28px;padding:16px 18px;border:1px solid var(--blaa-kant);border-radius:12px;background:var(--blaa-lys);font-size:16.5px;color:var(--blaa-dyb);}
.uden-js a{color:var(--blaa);}

/* Fremdrift. Stregerne er dekoration, og teksten ved siden af er den, en
   skærmlæser får. */
.fremdrift{display:flex;gap:6px;margin:0 0 10px;}
.fremdrift i{height:4px;flex:1;border-radius:2px;background:var(--kant);}
.fremdrift i.on{background:var(--blaa);}
.fremdrift-tekst{margin:0 0 30px;font-size:15px;color:var(--tekst-2);}

/* Ét spørgsmål ad gangen. Ubesvarede er skjulte, ikke nedtonede. */
.sp{margin:0 0 22px;}
.sp h2{margin:0 0 6px;font-size:26px;line-height:1.22;letter-spacing:-.02em;}
.sp h2:focus-visible{outline:2px solid var(--blaa);outline-offset:4px;border-radius:4px;}
.sp .hj{margin:0 0 20px;font-size:16.5px;color:var(--tekst-2);}

/* Besvarede spørgsmål bliver liggende som en kompakt linje. */
.sp.svaret h2{font-size:18px;font-weight:600;color:var(--tekst-2);letter-spacing:0;margin:0 0 7px;}
.sp.svaret .hj,
.sp.svaret .valg,
.sp.svaret .soeg,
.sp.svaret .grupper,
.sp.svaret .andet,
.sp.svaret label{display:none;}

.valg{display:grid;gap:10px;}
.valg button{font:inherit;text-align:left;background:var(--hvid);border:1px solid var(--blaa-kant);border-radius:12px;padding:15px 18px;cursor:pointer;font-size:17px;color:var(--tekst);line-height:1.4;}
.valg button:hover{border-color:var(--blaa);background:var(--blaa-lys);}
.valg button b{display:block;font-weight:600;color:var(--blaa-dyb);}
.valg button span{display:block;font-size:15.5px;color:var(--tekst-2);margin-top:3px;}

.soeg{width:100%;font:inherit;font-size:17px;padding:14px 16px;border:1px solid var(--blaa-kant);border-radius:10px;margin:0 0 18px;}
.soeg:focus{outline:2px solid var(--blaa);outline-offset:1px;border-color:var(--blaa);}

.gruppe{margin:0 0 18px;}
.gruppe h3{margin:0 0 9px;font-size:14.5px;font-weight:600;color:var(--tekst-2);}
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chips button{font:inherit;font-size:16px;background:var(--hvid);border:1px solid var(--blaa-kant);border-radius:99px;padding:9px 16px;cursor:pointer;color:var(--tekst);}
.chips button:hover{border-color:var(--blaa);background:var(--blaa-lys);color:var(--blaa-dyb);}

.andet{margin:6px 0 0;padding:16px 0 0;border-top:1px solid var(--kant);display:flex;gap:10px;flex-wrap:wrap;}
.andet input{flex:1;min-width:220px;font:inherit;font-size:16.5px;padding:12px 14px;border:1px solid var(--kant);border-radius:10px;}
.tom{margin:0;font-size:16px;color:var(--tekst-2);}

.valgt{display:none;justify-content:space-between;align-items:baseline;gap:14px;padding:12px 16px;border:1px solid var(--kant);border-radius:10px;background:var(--blaa-lys);}
.sp.svaret .valgt{display:flex;}
.valgt b{font-size:17px;font-weight:600;color:var(--blaa-dyb);}
.valgt button{font:inherit;font-size:15.5px;background:none;border:0;color:var(--blaa);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:0;white-space:nowrap;}

/* Resultatet */
.anb{border:1px solid var(--blaa-kant);border-radius:16px;padding:28px 30px;background:var(--hvid);box-shadow:0 18px 40px -30px rgba(17,99,255,.5);}
.anb-label{margin:0 0 2px;font-size:15.5px;color:var(--tekst-2);}
.anb h2{margin:0 0 4px;font-size:36px;letter-spacing:-.028em;color:var(--blaa);}
.anb-pris{margin:0 0 18px;font-size:17px;color:var(--tekst-2);}
.anb-hvorfor{margin:0 0 22px;font-size:17.5px;line-height:1.55;}

.opm{margin:22px 0 0;padding:20px 22px;background:var(--blaa-lys);border-radius:12px;}
.opm h3{margin:0 0 10px;font-size:16.5px;font-weight:600;}
.opm ul{margin:0;padding-left:20px;font-size:16.5px;line-height:1.55;}
.opm li{margin:0 0 8px;color:var(--tekst);}

.forbehold{margin:22px 0 0;font-size:15px;color:var(--tekst-2);line-height:1.5;}
.forfra{margin:24px 0 0;background:none;border:0;font:inherit;font-size:16px;color:var(--tekst-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:0;}

@media(max-width:900px){.vaelger-top{padding:40px 0 6px;}}