/*
 * Seksjonene som var mørke, er lyse i lys modus (inc/topp.php laster
 * stilarket sist på alle sider). I mørk modus gjør tvillingen lys.mork.css
 * dem mørke igjen, som resten av nettstedet.
 *
 *   1. Seksjonene fra Astro-bygget med bg-ink, og de store mørke boksene
 *      (bg-ink med rounded-3xl, vekstpartnerens vp-dark og shift-new). Hvit
 *      tekst, hvite kanter og gjennomsiktige hvite flater inni dem byttes til
 *      mørk tekst, lyse kanter og hvite kort. Knapper og merker med egen
 *      bakgrunn (gradient eller en mørk knapp) beholder fargene sine.
 *   2. Seksjonene i det nye designet med .pf-natt, og de mørke kortene for
 *      det som er med, snittallene og kundecaset på tjenestesidene.
 */

:root {
	--lys-flate: #f7f5ff;
	--lys-blekk: #0a0f1f;
	--lys-tekst: #2b2b3a;
	--lys-gra: #4a4a62;
	--lys-dempet: #6e6e7c;
	--lys-linje: rgba(10, 15, 31, .1);
	--lys-kantlinje: #ebe8f4;
}

/* ---------- 1. Seksjonene og boksene fra Astro-bygget ---------- */

:root body :is(section.bg-ink, div.bg-ink.rounded-3xl, .vp-dark, .shift-new) {
	background-color: var(--lys-flate) !important;
	background-image: none !important;
	color: var(--lys-blekk) !important;
	border-color: var(--lys-kantlinje) !important;
}

/* De store boksene får en kant, så de skiller seg fra seksjonen rundt */
:root body div.bg-ink.rounded-3xl { border: 1px solid var(--lys-kantlinje) !important; }

/* Teksten. Elementer med egen bakgrunn (knapper og merker) og innholdet i dem står urørt. */
:root body :is(section.bg-ink, div.bg-ink.rounded-3xl, .vp-dark, .shift-new) :is(.text-paper, .text-white, .text-paper\/90):not([class*="bg-gradient"], [class*="bg-gradient"] *, [class*="bg-grad-"], [class*="bg-grad-"] *, [class*="btn-"], [class*="btn-"] *, [class*="-submit"], [class*="-submit"] *, .bg-ink .bg-navy, .bg-ink .bg-navy *) { color: var(--lys-blekk) !important; }
/* All annen halvgjennomsiktig hvit tekst blir dempet grå. Reglene under gir de vanligste nivåene egne farger. */
:root body :is(section.bg-ink, div.bg-ink.rounded-3xl, .vp-dark, .shift-new) :is([class*="text-paper/"], [class*="text-white/"]):not([class*="bg-gradient"] *, [class*="btn-"] *, [class*="-submit"] *) { color: var(--lys-dempet) !important; }
:root body :is(section.bg-ink, div.bg-ink.rounded-3xl, .vp-dark, .shift-new) :is(.text-paper\/85, .text-paper\/80, .text-white\/80):not([class*="bg-gradient"] *, [class*="btn-"] *, [class*="-submit"] *) { color: var(--lys-tekst) !important; }
:root body :is(section.bg-ink, div.bg-ink.rounded-3xl, .vp-dark, .shift-new) :is(.text-paper\/75, .text-paper\/70, .text-white\/70):not([class*="bg-gradient"] *, [class*="btn-"] *, [class*="-submit"] *) { color: var(--lys-gra) !important; }
:root body :is(section.bg-ink, div.bg-ink.rounded-3xl, .vp-dark, .shift-new) :is(.text-paper\/60, .text-paper\/50, .text-paper\/40, .text-white\/60, .text-white\/50):not([class*="bg-gradient"] *, [class*="btn-"] *, [class*="-submit"] *) { color: var(--lys-dempet) !important; }

/* Kantene og de gjennomsiktige flatene */
:root body :is(section.bg-ink, div.bg-ink.rounded-3xl, .vp-dark, .shift-new) :is(.border-white\/5, .border-white\/10, .border-white\/15, .border-white\/20, .border-white\/30, .border-ink) { border-color: var(--lys-linje) !important; }
:root body :is(section.bg-ink, div.bg-ink.rounded-3xl, .vp-dark, .shift-new) :is(.bg-white\/5, .bg-white\/10, .bg-white\/\[0\.08\], .bg-white\/\[0\.04\], .bg-white\/\[0\.06\]) { background-color: #fff !important; border-color: var(--lys-kantlinje) !important; }

/* Lenker og knapper som skiftet til hvitt når man holdt over */
:root body :is(section.bg-ink, div.bg-ink.rounded-3xl, .vp-dark, .shift-new) .hover\:text-white:hover:not([class*="bg-gradient"]) { color: #6d28d9 !important; }
:root body :is(section.bg-ink, div.bg-ink.rounded-3xl, .vp-dark, .shift-new) .hover\:bg-white\/10:hover { background-color: rgba(124, 58, 237, .06) !important; }

/* Mørke flater inni seksjonene: rutene i rutenettene og den indre flaten i kortene med gradientkant.
   Rutenettene har 1 px mellomrom som tegner strekene mellom rutene. */
:root body :is(section.bg-ink, div.bg-ink.rounded-3xl) .bg-ink { background-color: #fff !important; }
:root body :is(section.bg-ink, div.bg-ink.rounded-3xl) .gap-px:is(.bg-white\/10, .bg-white\/5, .bg-paper\/10) { background-color: var(--lys-kantlinje) !important; }

/* Quizen på tilbudssidene (GrowthQuiz). Kortet har en gradientkant rundt seg. */
:root body section.bg-ink .quiz-card { background: #fff !important; }
:root body section.bg-ink .quiz-count { color: var(--lys-dempet) !important; }
:root body section.bg-ink .quiz-timechip { border-color: var(--lys-kantlinje) !important; background: var(--lys-flate) !important; color: var(--lys-blekk) !important; }
:root body section.bg-ink .quiz-progress { background: rgba(10, 15, 31, .08) !important; }
:root body section.bg-ink :is(.quiz-q, .quiz-result-price) { color: var(--lys-blekk) !important; }
:root body section.bg-ink .quiz-opt { border-color: var(--lys-kantlinje) !important; background: var(--lys-flate) !important; color: var(--lys-blekk) !important; }
:root body section.bg-ink .quiz-opt:hover { border-color: rgba(124, 58, 237, .35) !important; background: #fff !important; }
:root body section.bg-ink .quiz-opt:not(:hover) .quiz-opt-key { border-color: var(--lys-kantlinje) !important; background: #fff !important; color: var(--lys-gra) !important; }
:root body section.bg-ink .quiz-opt-arrow { color: #c2410c !important; }
:root body section.bg-ink .quiz-result-points li { color: var(--lys-tekst) !important; }
:root body section.bg-ink .quiz-cta-secondary { border-color: rgba(10, 15, 31, .18) !important; color: var(--lys-blekk) !important; }
:root body section.bg-ink .quiz-cta-secondary:hover { border-color: rgba(10, 15, 31, .4) !important; }
:root body section.bg-ink .quiz-input { border-color: var(--lys-kantlinje) !important; background: #fff !important; color: var(--lys-blekk) !important; }
:root body section.bg-ink .quiz-input::placeholder { color: #9a9aab !important; }
:root body section.bg-ink :is(.quiz-label, .quiz-consent) { color: var(--lys-gra) !important; }
:root body section.bg-ink .quiz-consent input:not(:checked) { border-color: rgba(10, 15, 31, .25) !important; background: #fff !important; }
:root body section.bg-ink .quiz-consent a { color: var(--lys-blekk) !important; }

/* Oransje etiketter er for svake på lys bakgrunn */
:root body :is(section.bg-ink, div.bg-ink.rounded-3xl) .text-grad-orange { color: #c2410c !important; }

/* Pakkekortene på /meta-nettside/ (HomePricing). Kortene er dempet til man holder over dem. */
:root body section.bg-ink .hp-billing-toggle { border-color: var(--lys-kantlinje) !important; background: #fff !important; }
:root body section.bg-ink .hp-billing-toggle button:not(.active) { color: var(--lys-gra) !important; }
:root body section.bg-ink .hp-billing-toggle button:not(.active):hover { color: var(--lys-blekk) !important; }
:root body section.bg-ink .hp-card { border-color: var(--lys-kantlinje) !important; background: #fff !important; }
:root body section.bg-ink .hp-blurb { border-top-color: var(--lys-kantlinje) !important; }
:root body section.bg-ink .hp-price-num { color: var(--lys-blekk) !important; }
@media (hover: hover) and (pointer: fine) {
	:root body section.bg-ink .hp-card:not(:hover) :is(.hp-name, .hp-price-num) { color: #85859a !important; }
	:root body section.bg-ink .hp-card:not(:hover) .hp-chip { border-color: var(--lys-kantlinje) !important; }
	:root body section.bg-ink .hp-card:not(:hover) .hp-chip-label { color: var(--lys-dempet) !important; }
}

/* Det nye mot det gamle på /meta-nettside/. Kortet har en gradientkant rundt seg. */
:root body .shift-new { background: #fff !important; }
:root body .shift-new :is(.shift-new-badge, .shift-new-cta) { border-color: rgba(124, 58, 237, .22) !important; background: rgba(124, 58, 237, .06) !important; color: var(--lys-blekk) !important; }
:root body .shift-new .shift-new-cta:hover { background: rgba(124, 58, 237, .12) !important; }

/* Skjemaet i «Hver dag uten» (tilbudssidene) */
:root body section.bg-ink .fomo-input { border-color: var(--lys-kantlinje) !important; background: #fff !important; color: var(--lys-blekk) !important; }
:root body section.bg-ink .fomo-input::placeholder { color: #9a9aab !important; }
:root body section.bg-ink .fomo-note { color: var(--lys-dempet) !important; }
:root body section.bg-ink .fomo-note a { color: var(--lys-tekst) !important; }

/* Vekstpartner: kalkulatoren, skjemaet og «Er vi en god match» */
:root body .vp-dark .vp-eyebrow--dark { color: var(--lys-dempet) !important; }
:root body .vp-dark .vp-pill { border-color: var(--lys-kantlinje) !important; background: #fff !important; color: #33334a !important; }
:root body .vp-dark :is(.vp-kalk, .vp-skjema, .vp-kalk-trygg) { border-color: var(--lys-kantlinje) !important; background: #fff !important; }
:root body .vp-dark .vp-kalk-etikett { color: var(--lys-tekst) !important; }
:root body .vp-dark .vp-kalk-verdi { border-color: var(--lys-kantlinje) !important; background: var(--lys-flate) !important; }
:root body .vp-dark .vp-kalk-verdi input { color: var(--lys-blekk) !important; }
:root body .vp-dark :is(.vp-kalk-verdi i, .vp-kalk-skala, .vp-steg-linje, .vp-skjema-eller, .vp-skjema-personvern, .vp-skjema-book i, .vp-kalk-trygg i, .vp-match-etikett, .vp-match-strimmel i, .vp-felt em) { color: var(--lys-dempet) !important; }
:root body .vp-dark :is(.vp-kalk-svar, .vp-kalk-trygg > div + div, .vp-match-strimmel > div + div) { border-color: var(--lys-kantlinje) !important; }
:root body .vp-dark :is(.vp-kalk-svar-topp, .vp-skjema-tittel, .vp-kalk-trygg b, .vp-match-tittel, .vp-match-bunn b, .vp-match-strimmel b) { color: var(--lys-blekk) !important; }
:root body .vp-dark .vp-kalk-formel { border-color: var(--lys-kantlinje) !important; background: var(--lys-flate) !important; color: var(--lys-gra) !important; }
:root body .vp-dark .vp-steg-bar { background: rgba(10, 15, 31, .08) !important; }
:root body .vp-dark .vp-steg-lukk { border-color: var(--lys-kantlinje) !important; background: var(--lys-flate) !important; color: var(--lys-gra) !important; }
:root body .vp-dark .vp-skjema-under { color: var(--lys-gra) !important; }
:root body .vp-dark .vp-felt > span:first-child { color: var(--lys-tekst) !important; }
:root body .vp-dark :is(.vp-felt input, .vp-felt select, .vp-felt textarea) { border-color: var(--lys-kantlinje) !important; background: #fff !important; color: var(--lys-blekk) !important; }
:root body .vp-dark :is(.vp-felt input, .vp-felt textarea)::placeholder { color: #9a9aab !important; }
:root body .vp-dark .vp-felt select option { background: #fff !important; color: var(--lys-blekk) !important; }
:root body .vp-dark .vp-skjema-personvern a { color: var(--lys-tekst) !important; }
:root body .vp-dark .vp-skjema-eller::before,
:root body .vp-dark .vp-skjema-eller::after { background: var(--lys-kantlinje) !important; }
:root body .vp-dark .vp-skjema-book { border-color: var(--lys-kantlinje) !important; background: #fff !important; color: var(--lys-blekk) !important; }
:root body .vp-dark .vp-match-kort { border-color: rgba(16, 185, 129, .3) !important; background: linear-gradient(160deg, rgba(16, 185, 129, .1), #fff 60%) !important; }
:root body .vp-dark .vp-match-kort--nei { border-color: rgba(244, 63, 94, .28) !important; background: linear-gradient(200deg, rgba(244, 63, 94, .08), #fff 60%) !important; }
:root body .vp-dark .vp-match-liste li { border-bottom-color: var(--lys-kantlinje) !important; color: var(--lys-tekst) !important; }
:root body .vp-dark .vp-match-bunn { color: var(--lys-tekst) !important; }
:root body .vp-dark .vp-match-strimmel > div > span:first-child { border-color: var(--lys-kantlinje) !important; background: #fff !important; color: #7c3aed !important; }

/* ---------- 2. Det nye designet ---------- */

:root body .pf-natt { background: var(--lys-flate) !important; color: var(--lys-blekk) !important; }
:root body .pf-natt :is(.pf-merke, .pf-ingress) { color: var(--lys-dempet) !important; }
:root body .pf-natt :is(.pf-h2, .pf-h3) { color: var(--lys-blekk) !important; }
:root body .pf-natt .pf-lenke { color: #6d28d9 !important; }

/* Heltene på forsiden: fanene, teksten ved siden av panelet og spørsmålspillen */
:root body .pf-natt { --pf-natt: var(--lys-flate); --pf-gra-lys: var(--lys-dempet); }
:root body .pf-natt .pf-heltfane { border-color: var(--lys-kantlinje) !important; background: #fff !important; color: var(--lys-blekk) !important; }
:root body .pf-natt .pf-heltfane:hover { border-color: rgba(124, 58, 237, .25) !important; }
:root body .pf-natt .pf-heltfane.er-aktiv { border-color: color-mix(in oklab, var(--aksent) 55%, transparent) !important; background: color-mix(in oklab, var(--aksent) 9%, #fff) !important; }
:root body .pf-natt .pf-heltfane > span { color: var(--lys-dempet) !important; }
:root body .pf-natt .pf-heltfane > span b { color: var(--lys-blekk) !important; }
:root body .pf-natt .pf-heltfane-tid { background: rgba(10, 15, 31, .08) !important; }
:root body .pf-natt .pf-steg-helt .pf-avatar { background: #fff !important; box-shadow: inset 0 0 0 1px var(--lys-kantlinje) !important; }
:root body .pf-natt .pf-steg-helt b { color: var(--lys-blekk) !important; }
:root body .pf-natt .pf-steg > p { color: var(--lys-gra) !important; }
:root body .pf-natt .pf-steg-snart { background: rgba(124, 58, 237, .08) !important; color: #6d28d9 !important; }
:root body .pf-natt .pf-steg-sporsmal { background: color-mix(in oklab, var(--aksent) 11%, #fff) !important; color: color-mix(in oklab, var(--aksent) 70%, #0a0f1f) !important; }
:root body .pf-natt .pf-steg-sporsmal b { color: var(--lys-blekk) !important; }

/* Spørsmålene på sidene til hver helt */
:root body .pf-natt :is(.pf-hs-svardeler, .pf-hs-svardeler li) { border-color: var(--lys-kantlinje) !important; }
:root body .pf-natt .pf-hs-svardeler b { color: var(--lys-blekk) !important; }
:root body .pf-natt .pf-hs-svardeler span { color: var(--lys-gra) !important; }
:root body .pf-natt .pf-hs-svarkort-inn { box-shadow: 0 40px 90px -40px rgba(23, 14, 61, .35), 0 0 0 1px rgba(10, 15, 31, .05) !important; }

/* Det som er med (tjenestesidene) */
:root body .ns-includes-kort li { border-color: var(--lys-kantlinje) !important; background: #fff !important; }
:root body .ns-includes-kort li:hover { background: #fff !important; }
:root body .ns-includes-kort h3 { color: var(--lys-blekk) !important; }
:root body .ns-includes-kort p { color: var(--lys-gra) !important; }

/* Snittallene */
:root body .ns-tall-kort { border: 1px solid var(--lys-kantlinje); background: var(--lys-flate) !important; color: var(--lys-blekk) !important; }
:root body .ns-tall-kort > div { border-color: var(--lys-kantlinje) !important; background: #fff !important; }
:root body .ns-tall-kort > .ns-tall-stor { background: linear-gradient(135deg, #f0e9ff, #fde8f3) !important; }
:root body .ns-tall-kort b { color: var(--lys-blekk) !important; }
:root body .ns-tall-kort :is(span, p) { color: var(--lys-gra) !important; }

/* Kundecaset */
:root body .ns-case-kort { border: 1px solid var(--lys-kantlinje); background: #fff !important; color: var(--lys-blekk) !important; }
:root body .ns-case-merke { color: #2563eb !important; }
:root body .ns-case-tekst h3 { color: var(--lys-blekk) !important; }
:root body .ns-case-tekst p { color: var(--lys-gra) !important; }
:root body .ns-case-tekst .pf-lenke { color: #6d28d9 !important; }
:root body .ns-case-tall { background: linear-gradient(160deg, #f6f2ff, #fbf4fa) !important; }
:root body .ns-case-tall dl > div { border-color: var(--lys-kantlinje) !important; background: #fff !important; }
:root body .ns-case-tall dt,
:root body .ns-case-kilde { color: var(--lys-dempet) !important; }
:root body .ns-case-tall dd { color: var(--lys-blekk) !important; }