/**
 * Samtykkr banner styling.
 *
 * The legal contract lives partly here: .nf-btn--primary is the ONE button style
 * used for Godta / Avvis / Lagre. They are identical in size, colour and
 * contrast by construction. "Tilpass" uses a visually quieter ghost style but is
 * never the only way to reach reject. Do not add a louder accept variant.
 *
 * Colours are overridable via CSS custom properties set inline by the renderer,
 * but the equal-button rule is structural and cannot be themed away.
 *
 * License: GPL-2.0-or-later
 */

.nf-banner,
.nf-manage {
	--nf-bg: #ffffff;
	--nf-fg: #1a1a1a;
	--nf-muted: #555b66;
	--nf-border: #d4d8de;
	--nf-btn-bg: #0b3d2e;
	--nf-btn-fg: #ffffff;
	--nf-btn-bg-hover: #0a5440;
	--nf-accent: #0b3d2e;
	--nf-radius: 12px;
	--nf-shadow: 0 8px 40px rgba(16, 24, 40, 0.18);
	box-sizing: border-box;
}

.nf-banner *,
.nf-banner *::before,
.nf-banner *::after,
.nf-manage * {
	box-sizing: border-box;
}

/* ------------------------------- banner ------------------------------- */

.nf-banner {
	position: fixed;
	z-index: 2147483646;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	padding: 16px;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.5;
	color: var(--nf-fg);
}

.nf-banner--center {
	align-items: center;
	top: 0;
	background: rgba(16, 24, 40, 0.45);
}

.nf-banner--bottom-left {
	justify-content: flex-start;
}

.nf-banner--bottom-right {
	justify-content: flex-end;
}

.nf-banner__dialog {
	background: var(--nf-bg);
	color: var(--nf-fg);
	border: 1px solid var(--nf-border);
	border-radius: var(--nf-radius);
	box-shadow: var(--nf-shadow);
	width: 100%;
	max-width: 560px;
	padding: 22px 24px 20px;
}

.nf-banner--center .nf-banner__dialog {
	max-width: 600px;
	max-height: 90vh;
	overflow-y: auto;
}

.nf-banner__title {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 700;
	color: var(--nf-fg);
}

.nf-banner__intro {
	margin: 0 0 18px;
	color: var(--nf-muted);
	font-size: 14.5px;
}

.nf-banner__link {
	color: var(--nf-accent);
	text-decoration: underline;
	cursor: pointer;
}

/* ----------------------- in-banner declaration ----------------------- */
/* Scrolls within the dialog so the panel works in both center and corner. */
.nf-decl {
	max-height: 50vh;
	overflow-y: auto;
	margin: 0 0 18px;
	padding-right: 4px;
}
.nf-decl__section { margin: 0 0 16px; }
.nf-decl__h {
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--nf-accent);
}
.nf-decl__p {
	margin: 0 0 6px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--nf-fg);
}
.nf-decl__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12.5px;
	margin-top: 4px;
}
.nf-decl__table th {
	text-align: left;
	font-weight: 600;
	color: var(--nf-muted);
	text-transform: uppercase;
	font-size: 10.5px;
	letter-spacing: 0.04em;
	padding: 4px 8px;
	border-bottom: 1px solid var(--nf-border);
}
.nf-decl__table td {
	padding: 6px 8px;
	border-bottom: 1px solid var(--nf-border);
	color: var(--nf-muted);
	vertical-align: top;
}
.nf-decl__table .nf-decl__cat { color: var(--nf-fg); font-weight: 600; white-space: nowrap; }
.nf-decl__footer {
	margin: 4px 0 0;
	font-size: 12px;
	color: var(--nf-muted);
}

/* Document tabs (Personvern / Informasjonskapsler) */
.nf-doc-tabs {
	display: flex;
	gap: 6px;
	margin: 0 0 14px;
	border-bottom: 1px solid var(--nf-border);
}
.nf-doc-tab {
	appearance: none;
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	padding: 6px 4px;
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
	color: var(--nf-muted);
	cursor: pointer;
}
.nf-doc-tab--on {
	color: var(--nf-accent);
	border-bottom-color: var(--nf-accent);
}

.nf-banner__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* ------------------------------- buttons ------------------------------ */
/* Godta / Avvis / Lagre all share .nf-btn--primary: identical by design. */

.nf-btn {
	appearance: none;
	border: 1px solid transparent;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	font-family: inherit;
	line-height: 1.2;
	padding: 12px 20px;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.nf-btn--primary {
	background: var(--nf-btn-bg);
	color: var(--nf-btn-fg);
	border-color: var(--nf-btn-bg);
	flex: 1 1 auto;
	min-width: 130px;
	text-align: center;
}

.nf-btn--primary:hover {
	background: var(--nf-btn-bg-hover);
	border-color: var(--nf-btn-bg-hover);
}

.nf-btn--ghost {
	background: transparent;
	color: var(--nf-accent);
	border-color: var(--nf-border);
	flex: 1 1 auto;
	min-width: 130px;
	text-align: center;
}

.nf-btn--ghost:hover {
	background: rgba(11, 61, 46, 0.06);
}

.nf-btn:focus-visible,
.nf-toggle__input:focus-visible + .nf-toggle__label .nf-toggle__switch,
.nf-manage:focus-visible {
	outline: 3px solid #1a73e8;
	outline-offset: 2px;
}

/* ------------------------------- toggles ------------------------------ */

.nf-banner__toggles {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 4px 0 18px;
	border-top: 1px solid var(--nf-border);
	padding-top: 14px;
}

.nf-toggle {
	position: relative;
	padding: 10px 0;
	border-bottom: 1px solid var(--nf-border);
}

.nf-toggle:last-child {
	border-bottom: 0;
}

.nf-toggle__label {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	cursor: pointer;
}

.nf-toggle--locked .nf-toggle__label {
	cursor: default;
}

.nf-toggle__input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.nf-toggle__switch {
	flex: 0 0 auto;
	position: relative;
	width: 44px;
	height: 24px;
	margin-top: 2px;
	background: #c4c9d1;
	border-radius: 999px;
	transition: background-color 0.15s ease;
}

.nf-toggle__switch::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 20px;
	height: 20px;
	background: #ffffff;
	border-radius: 50%;
	transition: transform 0.15s ease;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.nf-toggle__input:checked + .nf-toggle__label .nf-toggle__switch {
	background: var(--nf-accent);
}

.nf-toggle__input:checked + .nf-toggle__label .nf-toggle__switch::after {
	transform: translateX(20px);
}

.nf-toggle--locked .nf-toggle__switch {
	background: var(--nf-accent);
	opacity: 0.55;
}

.nf-toggle__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.nf-toggle__name {
	font-weight: 600;
	font-size: 14.5px;
}

.nf-toggle__desc {
	color: var(--nf-muted);
	font-size: 13px;
}

/* --------------------------- manage button ---------------------------- */

.nf-manage {
	position: fixed;
	z-index: 2147483645;
	display: inline-flex;
	align-items: center;
	padding: 10px;
	background: var(--nf-bg);
	color: var(--nf-fg);
	border: 1px solid var(--nf-border);
	border-radius: 999px;
	box-shadow: 0 3px 12px rgba(16, 24, 40, 0.14);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}

.nf-manage--bottom-left { left: 16px; bottom: 16px; }
.nf-manage--bottom-right { right: 16px; bottom: 16px; }

.nf-manage__icon {
	display: inline-flex;
	color: var(--nf-accent);
}

.nf-manage__icon svg {
	width: 20px;
	height: 20px;
	display: block;
}

/* Compact by default: show only the cookie icon and reveal the label on
   hover/focus, so the button keeps a small footprint. The aria-label keeps it
   accessible while the text is collapsed. */
.nf-manage__text {
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	opacity: 0;
	transition: max-width 0.25s ease, opacity 0.2s ease, margin-left 0.25s ease;
}

.nf-manage:hover .nf-manage__text,
.nf-manage:focus-visible .nf-manage__text {
	max-width: 240px;
	opacity: 1;
	margin-left: 8px;
}

.nf-manage:hover {
	border-color: var(--nf-accent);
}

/* ------------------------------ Samtykkr badge ------------------------ */

.nf-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 14px;
	color: var(--nf-accent);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	opacity: 0.85;
	transition: opacity 0.15s ease, color 0.15s ease;
}

.nf-badge:hover {
	opacity: 1;
	color: var(--nf-accent);
}

.nf-badge__icon {
	display: inline-flex;
	color: var(--nf-accent);
}

/* ------------------------------ cookie declaration (premium) ---------- */

.samtykkr-declaration {
	max-width: 760px;
	margin: 0 auto;
	font-family: inherit;
	color: #16201c;
	line-height: 1.6;
	font-size: 15px;
}

.samtykkr-declaration__heading {
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -0.01em;
	margin: 0 0 10px;
	color: #16201c;
}

.samtykkr-declaration__intro {
	font-size: 16px;
	color: #566159;
	margin: 0 0 4px;
}

.samtykkr-declaration__cat {
	padding: 24px 0;
	border-top: 1px solid #e6e9e4;
}

.samtykkr-declaration__cat:first-of-type {
	border-top: 0;
	padding-top: 16px;
}

.samtykkr-declaration__cat > h3 {
	font-size: 18px;
	font-weight: 700;
	color: #0b3d2e;
	margin: 0 0 6px;
}

.samtykkr-declaration__cat > p {
	color: #566159;
	margin: 0 0 14px;
}

.samtykkr-service {
	border: 1px solid #e6e9e4;
	border-radius: 12px;
	padding: 16px 18px;
	margin: 12px 0;
	background: #fbfcfb;
}

.samtykkr-service__name {
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 6px;
	color: #16201c;
}

.samtykkr-service__meta {
	font-size: 13.5px;
	color: #566159;
	margin: 0 0 12px;
	line-height: 1.7;
}

.samtykkr-service__meta strong {
	color: #16201c;
	font-weight: 600;
}

.samtykkr-service__meta a {
	color: #0a5440;
}

.samtykkr-service__cookies {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	margin-top: 6px;
}

.samtykkr-service__cookies th {
	text-align: left;
	background: #f0f2ee;
	color: #566159;
	font-weight: 600;
	padding: 8px 10px;
	border: 1px solid #e6e9e4;
}

.samtykkr-service__cookies td {
	padding: 8px 10px;
	border: 1px solid #e6e9e4;
	color: #16201c;
	vertical-align: top;
}

.samtykkr-service__cookies code {
	background: #eef1ec;
	padding: 1px 6px;
	border-radius: 4px;
	font-size: 12.5px;
}

.samtykkr-declaration__empty {
	color: #566159;
}

.samtykkr-declaration .samtykkr-reopen,
.samtykkr-declaration .nf-btn {
	margin-top: 8px;
}

/* ------------------------------ blocked iframe placeholder ------------- */

iframe[data-nf-blocked] {
	min-height: 120px;
	background: repeating-linear-gradient(45deg, #f3f4f6, #f3f4f6 10px, #e9ebef 10px, #e9ebef 20px);
}

/* ------------------------------ responsive ---------------------------- */

@media (max-width: 600px) {
	.nf-banner {
		padding: 0;
	}
	.nf-banner__dialog {
		max-width: 100%;
		border-radius: 14px 14px 0 0;
		border-bottom: 0;
	}
	.nf-banner__actions {
		flex-direction: column;
	}
	.nf-btn--primary,
	.nf-btn--ghost {
		width: 100%;
	}
	.nf-manage__text {
		display: none;
	}
	.nf-manage {
		padding: 12px;
	}
}

/* ------------------------------ dark theme ---------------------------- */

.nf-banner[data-nf-theme="dark"],
.nf-manage[data-nf-theme="dark"] {
	--nf-bg: #14181f;
	--nf-fg: #f3f4f6;
	--nf-muted: #aab2bf;
	--nf-border: #2a313c;
}

/* ------------------------- reduced motion ----------------------------- */

@media (prefers-reduced-motion: reduce) {
	.nf-btn,
	.nf-toggle__switch,
	.nf-toggle__switch::after,
	.nf-manage__text {
		transition: none;
	}
}

/* ---------------------- host-theme isolation ----------------------- */
/* Some themes style every <button> (background, border, etc.). Make the banner's
   own buttons and the floating manage pill immune, so they always show the
   configured Samtykkr colours instead of bleeding the host theme's button look. */
.nf-banner .nf-btn--primary {
	background-color: var(--nf-btn-bg) !important;
	color: var(--nf-btn-fg) !important;
	border-color: var(--nf-btn-bg) !important;
}
.nf-banner .nf-btn--primary:hover {
	background-color: var(--nf-btn-bg-hover) !important;
	border-color: var(--nf-btn-bg-hover) !important;
}
.nf-banner .nf-btn--ghost {
	background-color: transparent !important;
	color: var(--nf-accent) !important;
	border-color: var(--nf-border) !important;
}
.nf-manage {
	box-sizing: border-box !important;
	background-color: var(--nf-bg) !important;
	color: var(--nf-fg) !important;
	border: 1px solid var(--nf-border) !important;
	min-width: 0 !important;
	width: auto !important;
	height: auto !important;
	padding: 9px !important;
}
.nf-manage__icon { color: var(--nf-accent) !important; }
.nf-manage__icon svg { width: 18px !important; height: 18px !important; display: block; }

/* Themes that uppercase or letterspace every button rewrite our labels too: a
   text-transform: capitalize theme turned "Administrer informasjonskapsler"
   into "Administrer Informasjonskapsler". Banner text is legal copy and must
   render exactly as written, so the casing is pinned here. The declaration's
   own uppercase headings are set on their elements and are unaffected. */
.nf-banner__title,
.nf-banner__intro,
.nf-banner__link,
.nf-banner .nf-btn,
.nf-toggle__label,
.nf-toggle__name,
.nf-toggle__desc,
.nf-doc-tab,
.nf-badge__text,
.nf-manage,
.nf-manage__text {
	text-transform: none !important;
	letter-spacing: normal !important;
	font-variant: normal !important;
}