/**
 * NettConsent - stiler for samtykkebanner.
 * Alle farger/mål styres via CSS-variabler satt inline fra admin-innstillingene
 * (se public/js/nc-banner.js -> buildRoot()), slik at design enkelt kan
 * tilpasses uten å røre denne filen.
 */

#nettconsent-root {
	--nc-bg: #ffffff;
	--nc-prefs-bg: #ffffff;
	--nc-text: #1a1a1a;
	--nc-prefs-text: #1a1a1a;
	--nc-prefs-close-color: #1a1a1a;
	--nc-switch-active-bg: #2563eb;
	--nc-accent: #2563eb;
	--nc-accept-bg: #000000;
	--nc-accept-text: #ffffff;
	--nc-reject-bg: transparent;
	--nc-reject-text: #1a1a1a;
	--nc-settings-bg: transparent;
	--nc-settings-text: #1a1a1a;
	--nc-btn-border: transparent;
	--nc-btn-border-width: 1px;
	--nc-radius: 10px;
	--nc-panel-radius: 10px;
	--nc-fontsize: 15px;
	--nc-overlay: rgba(0, 0, 0, 0.25);

	position: fixed;
	z-index: 2147483000;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: var(--nc-fontsize);
	line-height: 1.5;
	color: var(--nc-text);
	inset: 0;
	pointer-events: none;
}

#nettconsent-root .nc-overlay {
	position: fixed;
	inset: 0;
	background: var(--nc-overlay);
	pointer-events: auto;
}

#nettconsent-root .nc-panel {
	pointer-events: auto;
	background: var(--nc-bg);
	color: var(--nc-text);
	border-radius: var(--nc-panel-radius);
	box-shadow: 0 10px 40px rgba(0, 0, 0, .18);
	padding: 20px;
	box-sizing: border-box;
}

/* «Tilpass samtykkepreferanser»-vinduet bruker sin egen bakgrunnsfarge/
   -gjennomsiktighet (prefs_background_color/-opacity), ikke den vanlige
   bannerbakgrunnen - se --nc-prefs-bg satt i buildRoot(). Må komme etter
   regelen over i kildeordenen for å vinne på lik spesifisitet. */
#nettconsent-root.nc-prefs-mode .nc-panel {
	background: var(--nc-prefs-bg);
	color: var(--nc-prefs-text);
}

#nettconsent-root .nc-panel:focus {
	outline: none;
}

#nettconsent-root .nc-panel:focus-visible {
	outline: none;
	outline-offset: unset;
}

#nettconsent-root .nc-logo {
	max-height: 32px;
	margin-bottom: 10px;
}

#nettconsent-root .nc-title {
	font-size: 1.15em;
	font-weight: 700;
	margin: 0 0 8px;
	color: var(--nc-text);
}

#nettconsent-root .nc-message {
	margin: 0 0 16px;
	font-size: 0.95em;
}

#nettconsent-root .nc-policy-link {
	color: var(--nc-accent);
	text-decoration: none;
	margin-left: 5px;
}

/* Samme doble fokusring som på knappene (se #nettconsent-root .nc-btn:focus-visible
   over) - med !important, siden temaer ofte fjerner nettleserens
   standard-fokusomriss på lenker helt (f.eks. "a:focus { outline: none; }"),
   noe som ellers gjør "Les mer"-lenken usynlig for tastaturbrukere. */
#nettconsent-root .nc-policy-link:focus-visible {
	outline: 2px solid #000 !important;
	outline-offset: 4px !important;
	box-shadow: 0 0 0 2px #fff !important;
}

#nettconsent-root .nc-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

#nettconsent-root .nc-btn {
	appearance: none;
	box-sizing: border-box;
	border: var(--nc-btn-border-width) solid var(--nc-btn-border);
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	padding: 10px 18px;
	border-radius: var(--nc-radius);
	transition: 300ms;
}

#nettconsent-root .nc-btn:active {
	transform: scale(0.98);
}

#nettconsent-root .nc-btn:hover {
	transform: translateY(-2px);
}

/* Samme doble fokusring (svart indre ring + hvit ytre kant) som på det
   flytende cookie-ikonet (.nc-reopen-fab:focus-visible) - synlig uansett
   hvilken bakgrunnsfarge den enkelte knappen har fått i Utseende, i
   stedet for nettleserens (ofte lite synlige) standard-fokusomriss. */
#nettconsent-root .nc-btn:focus-visible {
	outline: 2px solid #000 !important;
	outline-offset: 4px !important;
	box-shadow: 0 0 0 2px #fff !important;
}

#nettconsent-root .nc-btn-accept,
#nettconsent-root .nc-btn-save {
	background: var(--nc-accept-bg);
	color: var(--nc-accept-text);
}

#nettconsent-root .nc-btn-reject {
	background: var(--nc-reject-bg);
	color: var(--nc-reject-text);
}

#nettconsent-root .nc-btn-settings {
	background: var(--nc-settings-bg);
	color: var(--nc-settings-text);
}

/* ---------- Layout: popup (midtstilt modal) ---------- */

#nettconsent-root.nc-type-popup .nc-panel {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(480px, calc(100vw - 32px));
	max-height: calc(100vh - 64px);
	overflow-y: auto;
}

/* Knappene i "popup"-typen skal alltid fylle raden jevnt, uansett
   skjermstørrelse (panelet er allerede breddebegrenset over). */
#nettconsent-root.nc-type-popup .nc-actions {
	flex-wrap: nowrap;
}

#nettconsent-root.nc-type-popup .nc-btn {
	width: 100%;
}

/* ---------- Layout: bar (full bredde, alltid i bunn) ---------- */

#nettconsent-root.nc-type-bar .nc-panel {
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
	max-width: 100%;
	border-radius: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px 10px;
}

#nettconsent-root.nc-type-bar .nc-title {
	flex: 0 0 100%;
	margin-bottom: 0;
}

#nettconsent-root.nc-type-bar .nc-message {
	flex: 1 1 320px;
	margin-bottom: 0;
}

#nettconsent-root.nc-type-bar .nc-actions {
	flex: 0 0 auto;
}

#nettconsent-root.nc-type-bar.nc-pos-bottom .nc-panel {
	bottom: 0;
	box-shadow: 0 -4px 20px rgba(0, 0, 0, .12);
}

/* ---------- Layout: box (liten boks i hjørnet, alltid nede) ---------- */

#nettconsent-root.nc-type-box .nc-panel {
	position: fixed;
	width: min(360px, calc(100vw - 32px));
	max-height: calc(100vh - 48px);
	overflow-y: auto;
}

/* Knappene i "boks"-typen skal alltid fylle raden jevnt, uansett
   skjermstørrelse (panelet er allerede breddebegrenset over). */
#nettconsent-root.nc-type-box .nc-actions {
	flex-wrap: nowrap;
}

#nettconsent-root.nc-type-box .nc-btn {
	width: 100%;
}

#nettconsent-root.nc-type-box.nc-pos-bottom-right .nc-panel {
	right: 20px;
	bottom: 20px;
}

#nettconsent-root.nc-type-box.nc-pos-bottom-left .nc-panel {
	left: 20px;
	bottom: 20px;
}

/* ---------- "Tilpass"-vinduet (alltid midtstilt, uavhengig av banner-typen) ---------- */

#nettconsent-root.nc-prefs-mode .nc-panel {
	position: fixed;
	top: 50%;
	left: 50%;
	right: auto;
	bottom: auto;
	transform: translate(-50%, -50%);
	width: 100%;
	max-width: 845px;
	max-height: calc(100vh - 64px);
	display: flex;
	flex-direction: column;
	border-radius: var(--nc-panel-radius);
	padding: 0;
	overflow: hidden;
}

#nettconsent-root .nc-prefs-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 20px 24px;
	border-bottom: 1px solid rgba(0, 0, 0, .1);
}

#nettconsent-root .nc-prefs-title {
	margin: 0;
	font-size: 1.15em;
	font-weight: 700;
	color: var(--nc-prefs-text);
}

#nettconsent-root .nc-prefs-close {
	appearance: none;
	background: none;
	border: 0;
	cursor: pointer;
	font-size: 26px;
	line-height: 1;
	padding: 0 4px;
	color: var(--nc-prefs-close-color);
}

/* Samme doble fokusring som på de andre knappene - se
   #nettconsent-root .nc-btn:focus-visible over. */
#nettconsent-root .nc-prefs-close:focus-visible {
	outline: 2px solid #000 !important;
	outline-offset: 4px !important;
	box-shadow: 0 0 0 2px #fff !important;
}

#nettconsent-root .nc-prefs-list {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 4px 24px;
}

#nettconsent-root .nc-prefs-intro {
	padding: 14px 0 4px;
	border-bottom: 1px solid rgba(0, 0, 0, .08);
	font-size: .92em;
}

#nettconsent-root .nc-prefs-intro p {
	margin: 0 0 10px;
}

#nettconsent-root .nc-prefs-intro-toggle {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	margin-left: 2px;
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	color: var(--nc-accent);
	cursor: pointer;
	display: inline;
}

#nettconsent-root .nc-prefs-intro-toggle:focus-visible {
	outline: 2px solid var(--nc-accent);
	outline-offset: 2px;
}

#nettconsent-root .nc-pref-item {
	padding: 14px 0;
	border-bottom: 1px solid rgba(0, 0, 0, .08);
}

#nettconsent-root .nc-pref-item:last-child {
	border-bottom: 0;
}

#nettconsent-root .nc-pref-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

#nettconsent-root .nc-pref-toggle-desc {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	flex: 1 1 auto;
}

#nettconsent-root .nc-pref-toggle-desc:focus-visible {
	outline: 2px solid var(--nc-accent);
	outline-offset: 2px;
}

#nettconsent-root .nc-pref-chevron {
	display: inline-block;
	font-size: 1.1em;
	transform: rotate(90deg);
	transition: transform .15s ease;
}

#nettconsent-root .nc-pref-item.is-collapsed .nc-pref-chevron {
	transform: rotate(0deg);
}

#nettconsent-root .nc-pref-item.is-collapsed .nc-pref-desc {
	display: none;
}

#nettconsent-root .nc-pref-name {
	font-weight: 600;
}

#nettconsent-root .nc-pref-status {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

#nettconsent-root .nc-pref-always {
	color: #1a7f4b;
	font-weight: 600;
	font-size: .9em;
}

#nettconsent-root .nc-pref-desc {
	margin: 8px 0 0;
	padding-left: calc(1.1em + 10px);
	font-size: .92em;
	opacity: .8;
}

#nettconsent-root .nc-pref-cookie-list {
	margin-top: 10px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

#nettconsent-root .nc-pref-cookie {
	background: #ededed;
	border-radius: 6px;
	padding: 10px !important;
	border: 1px solid rgba(0, 0, 0, .1);
}

#nettconsent-root .nc-pref-cookie-head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
}

#nettconsent-root .nc-pref-cookie-name {
	font-family: Menlo, Consolas, monospace;
	font-size: .85em;
	background: transparent;
	border-radius: 4px;
}

#nettconsent-root .nc-pref-cookie-duration {
	font-size: .85em;
	opacity: .7;
}

#nettconsent-root .nc-pref-cookie-desc {
	margin: 4px 0 0;
	font-size: .92em;
	opacity: .85;
}

#nettconsent-root .nc-pref-cookie-empty {
	margin-top: 10px;
	padding: 12px 14px;
	background: #ededed;
	border: 1px solid rgba(0, 0, 0, .1);
	color: #1a1a1a;
	border-radius: 6px;
	font-size: .92em;
}

#nettconsent-root .nc-switch {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 22px;
	flex: 0 0 auto;
}

#nettconsent-root .nc-switch input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

#nettconsent-root .nc-switch-track {
	position: absolute;
	inset: 0;
	background: #d1d5db;
	border-radius: 999px;
	cursor: pointer;
	transition: background .15s ease;
}

#nettconsent-root .nc-switch-track::before {
	content: "";
	position: absolute;
	width: 16px;
	height: 16px;
	left: 3px;
	top: 3px;
	background: #ffffff;
	border-radius: 50%;
	transition: transform .15s ease;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

#nettconsent-root .nc-switch input:checked + .nc-switch-track {
	background: var(--nc-switch-active-bg);
}

#nettconsent-root .nc-switch input:checked + .nc-switch-track::before {
	transform: translateX(18px);
}

#nettconsent-root .nc-switch input:focus-visible + .nc-switch-track {
	outline: 2px solid var(--nc-accent);
	outline-offset: 2px;
}

#nettconsent-root .nc-prefs-footer {
	flex: 0 0 auto;
	flex-wrap: nowrap;
	margin: 0;
	padding: 16px 24px;
	border-top: 1px solid rgba(0, 0, 0, .1);
}

#nettconsent-root .nc-prefs-footer .nc-btn {
	flex: 1 1 0;
	text-align: center;
}

/* ---------- "Gjenåpne innstillinger"-knapp (shortcode) ---------- */

.nettconsent-reopen-link {
	background: none;
	border: none;
	padding: 0;
	color: inherit;
	text-decoration: underline;
	cursor: pointer;
	font: inherit;
}

/* ---------- Flytende cookie-ikon (kun på personvernerklæringssiden) ---------- */

.nc-reopen-fab {
	/* position: fixed gjør knappen selv til plasseringskontekst for de
	   absolutt posisjonerte barna under (ikon/tekst) - se forklaring der.
	   Bredden/høyden er satt direkte på selve knappen (med !important), i
	   stedet for å stole på at et innhold-element krymper til 0 for å
	   avgjøre knappens totale bredde. Dette er langt mer robust mot
	   temaer/plugins med egne, motstridende regler for knapper - knappen er
	   garantert helt rund (40×40) i ro, uansett hva som skjer inni den,
	   siden overflow: hidden uansett klipper vekk alt som stikker utenfor.
	   border-radius: 999px på en kvadratisk boks (lik bredde/høyde) gir
	   alltid en perfekt sirkel, uansett boksens størrelse. !important her
	   også - en del temaer nullstiller "border-radius" til 0 på alle
	   knapper som en del av sin egen, firkantede knappe-stil. */
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 999999;
	width: 40px !important;
	height: 40px !important;
	padding: 0;
	margin: 0;
	border: none !important;
	outline: none;
	border-radius: 999px !important;
	box-sizing: border-box !important;
	overflow: hidden;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
	cursor: pointer;
	font-family: inherit;
	transition: width 250ms ease, transform 200ms ease, box-shadow 200ms ease;
}

/* !important på alle tre her: garanterer at denne doble fokusringen
   (svart indre ring + hvit ytre kant) alltid vinner, uavhengig av
   bakgrunnsfargen som er satt på selve knappen (design_reopen_fab_*), og
   uavhengig av box-shadow-regelen for :hover/:focus-visible rett under -
   uten !important ville den regelen (som kommer senere i fila) ha
   overstyrt box-shadow her, siden begge selektorene har lik spesifisitet. */
.nc-reopen-fab:focus-visible {
	outline: 2px solid #000 !important;
	outline-offset: 4px !important;
	box-shadow: 0 0 0 2px #fff !important;
}

.nc-reopen-fab:hover,
.nc-reopen-fab:focus-visible {
	width: 200px !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}

.nc-reopen-fab:active {
	transform: scale(0.96);
}

/* Ikonet og teksten er bevisst posisjonert absolutt (ikke med flexbox).
   Vi har to ganger opplevd at temaer/plugins har egne regler som
   overstyrer display: flex på selve knappen (f.eks. "button { display:
   block !important; }"), noe som ødelegger en hvilken som helst
   flex-basert layout inni den. Med "position: absolute" er ikon og tekst
   plassert med faste koordinater i forhold til knappen (som er
   plasseringskontekst via position: fixed), helt uavhengig av hvilken
   "display"-verdi knappen selv ender opp med. Størrelsen på selve SVG-en
   er også satt med !important, slik at vanlige "svg { max-width: 100%;
   height: auto; }"-tilbakestillinger fra temaer ikke kan krympe eller
   forvrenge den. */
.nc-reopen-fab-icon {
	position: absolute !important;
	top: 6px !important;
	left: 6px !important;
	right: auto !important;
	bottom: auto !important;
	width: 28px !important;
	height: 28px !important;
	margin: 0 !important;
	padding: 0 !important;
	display: block !important;
}

.nc-reopen-fab-icon svg {
	display: block !important;
	width: 28px !important;
	height: 28px !important;
	max-width: none !important;
	max-height: none !important;
	pointer-events: none;
}

/* Teksten er skjult som standard (kun det runde ikonet synlig) og vises når
   knappen selv utvider seg ved hover/fokus (se width over) - samme mønster
   som cookie-ikonet hos andre samtykke-verktøy i markedet. Selve
   klippingen skjer via overflow: hidden på knappen. */
.nc-reopen-fab-label {
	position: absolute !important;
	top: 0 !important;
	left: 48px !important;
	right: 16px !important;
	bottom: 0 !important;
	display: flex !important;
	align-items: center !important;
	margin: 0 !important;
	opacity: 0;
	white-space: nowrap;
	overflow: hidden;
	font-size: 14px;
	font-weight: 400;
	transition: opacity 200ms ease;
}

.nc-reopen-fab:hover .nc-reopen-fab-label,
.nc-reopen-fab:focus-visible .nc-reopen-fab-label {
	opacity: 1;
}

/* Venstre-plassering (satt via Utseende, standard er høyre - se
   renderReopenFab() i public/js/nc-banner.js). Kun ankeret (right → left)
   trenger å endres her - selve utvidelsen ved hover (width) fortsetter
   automatisk å vokse bort fra skjermkanten samme vei uansett side, siden
   det kun er den ene av left/right som er satt om gangen, og ikonet/
   teksten inni er posisjonert i forhold til selve knappens boks (se
   .nc-reopen-fab-icon/.nc-reopen-fab-label over), ikke i forhold til
   skjermen. */
.nc-reopen-fab.nc-reopen-fab-left {
	right: auto;
	left: 20px;
}

@media (max-width: 480px) {
	.nc-reopen-fab {
		right: 14px;
		bottom: 14px;
	}

	.nc-reopen-fab.nc-reopen-fab-left {
		right: auto;
		left: 14px;
	}
}

/* Knapperaden får hele sin egen linje (i stedet for å dele plass med
   tittel/tekst i "bar"-typen) på skjermer opp til 644px brede.
   Selektoren må matche ".nc-type-bar .nc-actions" sin spesifisitet
   (ID + 3 klasser) - en generisk "#nettconsent-root .nc-actions" (ID +
   1 klasse) ville tapt mot den regelen uansett kildeorden/media query. */
@media (max-width: 644px) {
	#nettconsent-root.nc-type-bar .nc-panel {
		gap: 15px;
	}
	#nettconsent-root.nc-type-bar .nc-actions {
		flex: 1 0 auto;
	}
	#nettconsent-root .nc-actions {
		flex-wrap: nowrap;
	}
	#nettconsent-root .nc-btn {
		width: 100%;
	}
}

@media (max-width: 480px) {
	#nettconsent-root .nc-panel {
		padding: 18px;
	}
	#nettconsent-root.nc-type-box .nc-panel,
	#nettconsent-root.nc-type-popup .nc-panel {
		left: 16px !important;
		right: 16px !important;
		width: auto !important;
	}

	#nettconsent-root .nc-actions .nc-btn {
		flex: 1 1 0;
		padding: 9px 8px;
		font-size: 0.85em;
	}
}

/* Enda smalere skjermer (eldre/mindre mobiler) - knappene krymper videre
   slik at alle tre fortsatt får plass på én rad uten å bryte om. */
@media (max-width: 360px) {
	#nettconsent-root .nc-actions .nc-btn {
		padding: 8px 6px;
		font-size: 0.78em;
	}
}

/* Kommer etter regelen over i kildeordenen med samme spesifisitet, slik at
   "Tilpass"-vinduet alltid vinner og forblir midtstilt på mobil, uansett
   hvilken banner-type (bar/box/popup) som er valgt i innstillingene. */
@media (max-width: 480px) {
	#nettconsent-root.nc-prefs-mode .nc-panel {
		left: 16px !important;
		right: 16px !important;
		width: auto !important;
		transform: translateY(-50%);
	}
	#nettconsent-root .nc-prefs-footer {
		flex-wrap: wrap;
	}
}

/* ---------- Blokkeringsboks for innebygd innhold (YouTube, Google Maps,
   Vimeo, Spotify m.m.) - se NC_Embed_Blocker/unblockEmbeds(). Fargene
   settes direkte som inline style fra PHP (design.blocked_content_*),
   siden boksen rendres i selve sideinnholdet - ikke inni #nettconsent-root
   der resten av banneret sine CSS-variabler er tilgjengelige. ---------- */
.nettconsent-blocked-embed {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	min-height: 200px;
	padding: 24px;
	text-align: center;
	border: 1px solid #dddddd;
	border-radius: 4px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.nettconsent-blocked-embed-text {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	max-width: 480px;
}

.nettconsent-blocked-embed-link {
	/* Bakgrunn, tekstfarge, kantlinje, avrunding, padding, skrift og cursor
	   settes ALLE inline fra PHP (design.blocked_content_button_bg/_text +
	   de delte knappe-innstillingene) - se
	   NC_Embed_Blocker::build_placeholder(). Denne klassen er derfor bevisst
	   tom på selve utseendet: widgeten/temaet knappen havner inni (f.eks.
	   Elementors egne CSS-regler for <button> inni bestemte widget-typer)
	   kan ellers ha CSS-regler med høyere spesifisitet enn en vanlig klasse
	   her ville hatt, og overstyre den (f.eks. spise opp paddingen).
	   Se også :hover/:focus-visible-regelen under. */
}

.nettconsent-blocked-embed-link:hover,
.nettconsent-blocked-embed-link:focus-visible {
	opacity: 0.8;
}