/**
 * Samtykkr banner styling.
 *
 * The legal contract lives partly here: .nf-btn--primary is the ONE button style
 * used for Godta / Avvis / Lagre in both designs (card and strip). 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__dialog:focus {
	outline: none;
}

.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-banner .nf-banner__actions .nf-btn {
		flex: 0 0 auto !important;
	}
	.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-banner .nf-btn--ghost:hover {
	background-color: rgba(11, 61, 46, 0.06) !important;
}
/* A theme's reset can load after this file with the same specificity, so the
   shape of every button is pinned too. The buttons also share the row evenly:
   sizing them from their text made "Jeg samtykker" wider than "Avvis". */
.nf-banner .nf-btn {
	border-radius: 8px !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	padding: 12px 20px !important;
	margin: 0 !important;
	flex: 1 1 0 !important;
	white-space: normal !important;
}
.nf-banner .nf-doc-tab,
.nf-banner .nf-doc-tab:hover,
.nf-banner .nf-doc-tab:focus {
	background-color: transparent !important;
	color: var(--nf-muted) !important;
	border: 0 !important;
	border-bottom: 2px solid transparent !important;
	border-radius: 0 !important;
	width: auto !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	padding: 6px 4px !important;
}
.nf-banner .nf-doc-tab--on,
.nf-banner .nf-doc-tab--on:hover,
.nf-banner .nf-doc-tab--on:focus {
	color: var(--nf-accent) !important;
	border-bottom-color: var(--nf-accent) !important;
}
/* The label only collapses when the button is flex: in a theme's inline-block
   the hidden text kept its full width and left an empty 265 px box. */
.nf-manage {
	box-sizing: border-box !important;
	display: inline-flex !important;
	align-items: center !important;
	background-color: var(--nf-bg) !important;
	color: var(--nf-fg) !important;
	border: 1px solid var(--nf-border) !important;
	border-radius: 999px !important;
	min-width: 0 !important;
	width: auto !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 9px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
}
.nf-manage:hover {
	border-color: var(--nf-accent) !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-choice__name,
.nf-choice__desc,
.nf-choice__fixed,
.nf-choice__option,
.nf-doc-tab,
.nf-badge__text,
.nf-manage,
.nf-manage__text {
	text-transform: none !important;
	letter-spacing: normal !important;
	font-variant: normal !important;
}

/* ------------------------------- strip -------------------------------- */
/* The strip and its choice window. The equal-button rule at the top of this
   file holds here too: disagree and agree are both .nf-btn--primary, and no
   rule below may name one without the other.

   Everything is pinned with !important and .nf-banner.nf-banner--strip, because
   the banner sits in the host page: themes style button, label, h2, p and input
   directly, and Pro adds !important rules at .nf-banner level. Accent colours
   come from the site and can sit close to the surface, so nothing below relies
   on the accent alone: text and links use --nf-fg, and buttons carry an edge
   that stays visible on any accent. */

.nf-banner.nf-banner--strip {
	--nf-edge: rgba(0, 0, 0, 0.45);
	--nf-focus: #1a73e8;
	--nf-scrim: rgba(16, 24, 40, 0.55);
	--nf-radius: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif !important;
	position: fixed !important;
	display: block !important;
	top: auto !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
	max-width: none !important;
	background: transparent !important;
	font-size: 15px !important;
	line-height: 1.5 !important;
	text-align: left !important;
}

.nf-banner.nf-banner--strip[data-nf-theme="dark"] {
	--nf-bg: #000000;
	--nf-fg: #ffffff;
	--nf-muted: #c9ced6;
	--nf-border: #3a3f47;
	--nf-edge: rgba(255, 255, 255, 0.6);
	--nf-focus: #ffffff;
	--nf-scrim: rgba(0, 0, 0, 0.7);
}

.nf-banner--strip .nf-banner__dialog {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	max-height: 100vh;
	max-height: 100dvh;
	margin: 0 !important;
	padding: 22px max(32px, env(safe-area-inset-right)) calc(22px + env(safe-area-inset-bottom)) max(32px, env(safe-area-inset-left)) !important;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--nf-bg) !important;
	color: var(--nf-fg) !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none;
}

.nf-banner--strip .nf-banner__layer--strip {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 190px;
	gap: 48px;
	align-items: center;
	margin: 0;
}

.nf-banner.nf-banner--strip .nf-banner__title {
	margin: 0 0 6px !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	color: var(--nf-fg) !important;
	font-family: inherit !important;
	font-size: 22px !important;
	font-weight: 600 !important;
	letter-spacing: -0.01em !important;
	line-height: 1.25 !important;
	text-align: left !important;
}

.nf-banner.nf-banner--strip .nf-banner__intro {
	max-width: 110ch;
	margin: 0 !important;
	padding: 0 !important;
	color: var(--nf-fg) !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	text-align: left !important;
}

.nf-banner.nf-banner--strip .nf-banner__link,
.nf-banner.nf-banner--strip .nf-banner__link:hover,
.nf-banner.nf-banner--strip .nf-banner__link:visited {
	color: var(--nf-fg) !important;
	text-decoration: underline !important;
	text-underline-offset: 2px;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

.nf-banner.nf-banner--strip .nf-badge {
	margin-top: 10px;
	color: var(--nf-fg) !important;
}
.nf-banner.nf-banner--strip .nf-badge__icon {
	color: var(--nf-fg) !important;
}

.nf-banner.nf-banner--strip .nf-banner__actions {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
	margin: 0 !important;
	padding: 0 !important;
}

.nf-banner.nf-banner--strip .nf-btn {
	display: block !important;
	float: none !important;
	position: static !important;
	box-sizing: border-box !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: none !important;
	height: auto !important;
	min-height: 44px !important;
	margin: 0 !important;
	padding: 10px 14px !important;
	border-width: 0 !important;
	border-style: solid !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	transform: none !important;
	opacity: 1 !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.25 !important;
	text-align: center !important;
	text-decoration: none !important;
	white-space: normal !important;
}

.nf-banner.nf-banner--strip .nf-btn--primary {
	background-color: var(--nf-btn-bg) !important;
	color: var(--nf-btn-fg) !important;
	border-color: var(--nf-edge) !important;
}

.nf-banner.nf-banner--strip .nf-btn--primary:hover {
	background-color: var(--nf-btn-bg-hover) !important;
	box-shadow: none !important;
}

/* Learn more is a solid block in the surface's own opposite colour. */
.nf-banner.nf-banner--strip .nf-btn--ghost {
	background-color: var(--nf-fg) !important;
	color: var(--nf-bg) !important;
}

.nf-banner.nf-banner--strip .nf-btn--ghost:hover {
	background-color: var(--nf-muted) !important;
	color: var(--nf-bg) !important;
	box-shadow: none !important;
}

.nf-banner.nf-banner--strip .nf-btn:focus-visible,
.nf-banner.nf-banner--strip .nf-banner__link:focus-visible,
.nf-banner.nf-banner--strip .nf-banner__close:focus-visible,
.nf-banner.nf-banner--strip .nf-doc-tab:focus-visible,
.nf-banner.nf-banner--strip .nf-badge:focus-visible,
.nf-banner.nf-banner--strip .nf-window__body:focus-visible,
.nf-banner.nf-banner--strip .nf-choice__input:focus-visible + .nf-choice__option {
	outline: 3px solid var(--nf-focus) !important;
	outline-offset: 2px !important;
}

@media (prefers-reduced-motion: no-preference) {
	.nf-banner--strip:not(.nf-banner--window):not(.nf-banner--preview) .nf-banner__dialog {
		animation: nf-strip-in 0.2s ease-out;
	}
	@keyframes nf-strip-in {
		from { transform: translateY(16px); opacity: 0; }
		to { transform: none; opacity: 1; }
	}
}

/* ---------------------------- choice window --------------------------- */

.nf-banner.nf-banner--strip.nf-banner--window {
	top: 0 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	padding: 24px !important;
	background: var(--nf-scrim) !important;
}

.nf-banner--window .nf-banner__dialog {
	display: flex !important;
	flex-direction: column;
	width: 100% !important;
	max-width: 680px !important;
	max-height: 100%;
	padding: 0 !important;
	overflow: hidden;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.nf-banner--window .nf-banner__layer {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

.nf-banner--window .nf-banner__layer--declaration {
	padding: 22px 24px 20px;
	overflow-y: auto;
}

.nf-window__head {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 16px 14px 24px;
	border-bottom: 1px solid var(--nf-border);
}

.nf-banner.nf-banner--strip .nf-window__head .nf-banner__title {
	margin: 0 !important;
}

.nf-banner.nf-banner--strip .nf-banner__close {
	display: inline-flex !important;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	box-sizing: border-box !important;
	width: 44px !important;
	min-width: 44px !important;
	height: 44px !important;
	min-height: 44px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--nf-fg) !important;
	cursor: pointer;
}

.nf-banner.nf-banner--strip .nf-banner__close:hover {
	box-shadow: inset 0 0 0 1px var(--nf-edge) !important;
}

.nf-window__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 18px 24px 8px;
	outline: none;
}

.nf-choices {
	margin-top: 10px;
}

.nf-choice {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 232px;
	gap: 8px 24px;
	align-items: center;
	padding: 16px 0;
	border-top: 1px solid var(--nf-border);
}

.nf-choice:first-child {
	border-top: 0;
}

.nf-banner.nf-banner--strip .nf-choice__name {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	color: var(--nf-fg) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	text-align: left !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.nf-banner.nf-banner--strip .nf-choice__desc {
	margin: 2px 0 0 !important;
	padding: 0 !important;
	color: var(--nf-muted) !important;
	font-size: 13.5px !important;
	line-height: 1.45 !important;
	text-align: left !important;
}

.nf-banner.nf-banner--strip .nf-choice__fixed {
	margin: 0 !important;
	padding: 0 12px !important;
	color: var(--nf-fg) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	text-align: center !important;
}

.nf-choice__pick {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 6px;
	position: relative;
}

/* The two options are the same size and swap the same style, so the mark and the
   fill say what is chosen and neither answer looks like the expected one. */
.nf-banner.nf-banner--strip .nf-choice__input {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	opacity: 0 !important;
	appearance: none;
	-webkit-appearance: none;
	box-shadow: none !important;
	pointer-events: none;
}

.nf-banner.nf-banner--strip .nf-choice__option {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 6px;
	box-sizing: border-box !important;
	min-height: 44px !important;
	margin: 0 !important;
	padding: 8px 6px !important;
	border: 1px solid var(--nf-edge) !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--nf-fg) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-align: center !important;
	cursor: pointer;
}

.nf-banner.nf-banner--strip .nf-choice__option:hover {
	border-color: var(--nf-fg) !important;
	box-shadow: inset 0 0 0 1px var(--nf-fg) !important;
}

.nf-banner.nf-banner--strip .nf-choice__input:checked + .nf-choice__option {
	background: var(--nf-btn-bg) !important;
	color: var(--nf-btn-fg) !important;
}

.nf-choice__mark {
	display: none;
	flex: 0 0 auto;
	width: 12px;
	height: 7px;
	margin-top: -3px;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
}

.nf-choice__input:checked + .nf-choice__option .nf-choice__mark {
	display: block;
}

.nf-banner--window .nf-banner__layer--choices > .nf-banner__actions {
	flex: 0 0 auto;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	padding: 14px 24px calc(14px + env(safe-area-inset-bottom)) !important;
	border-top: 1px solid var(--nf-border);
}

.nf-banner--window .nf-badge {
	flex: 0 0 auto;
	align-self: flex-start;
	margin: 0 24px 14px;
}

.nf-banner.nf-banner--strip .nf-doc-tab {
	color: var(--nf-muted) !important;
	background: transparent !important;
	box-shadow: none !important;
	min-height: 44px;
}
.nf-banner.nf-banner--strip .nf-doc-tab--on {
	color: var(--nf-fg) !important;
	border-bottom-color: var(--nf-fg) !important;
}
.nf-banner--strip .nf-decl__h,
.nf-banner--strip .nf-decl__p,
.nf-banner--strip .nf-decl__table .nf-decl__cat {
	color: var(--nf-fg) !important;
}
.nf-banner--strip .nf-decl__table td,
.nf-banner--strip .nf-decl__table th,
.nf-banner--strip .nf-decl__footer {
	color: var(--nf-muted) !important;
}

/* ------------------------- strip: smaller screens --------------------- */

/* Tablet in portrait keeps the two columns; below this the text needs the width. */
@media (max-width: 719px) {
	.nf-banner--strip .nf-banner__dialog {
		padding: 18px max(16px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)) !important;
	}
	.nf-banner--strip .nf-banner__layer--strip {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}
	.nf-banner.nf-banner--strip .nf-banner__title {
		font-size: 19px !important;
	}
	.nf-banner.nf-banner--strip.nf-banner--window {
		padding: 0 !important;
	}
	.nf-banner--window .nf-banner__dialog {
		height: 100%;
		max-width: none !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
	}
	.nf-window__head {
		padding: 8px 8px 8px 16px;
		padding-top: calc(8px + env(safe-area-inset-top));
	}
	.nf-window__body {
		padding: 14px 16px 6px;
	}
	.nf-banner--window .nf-banner__layer--declaration {
		padding: 16px;
	}
	.nf-banner--window .nf-banner__layer--choices > .nf-banner__actions {
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important;
	}
	.nf-banner--window .nf-badge {
		margin: 0 16px 12px;
	}
}

@media (max-width: 519px) {
	.nf-choice {
		grid-template-columns: minmax(0, 1fr);
	}
	.nf-banner.nf-banner--strip .nf-choice__fixed {
		padding: 0 !important;
		text-align: left !important;
	}
	.nf-banner--window .nf-banner__layer--choices > .nf-banner__actions {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
	.nf-banner--window .nf-banner__layer--choices > .nf-banner__actions [data-nf-action="save"] {
		grid-column: 1 / -1;
	}
}

/* A phone on its side has little height: keep disagree and agree next to each
   other under Learn more, and let the list do the scrolling. */
@media (max-height: 480px) {
	.nf-banner--strip .nf-banner__dialog {
		padding-top: 12px !important;
		padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
	}
	.nf-banner--strip .nf-banner__layer--strip {
		grid-template-columns: minmax(0, 1fr) 372px;
		gap: 20px;
	}
	.nf-banner--strip .nf-banner__layer--strip .nf-banner__actions {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 6px;
	}
	.nf-banner--strip .nf-banner__layer--strip .nf-banner__actions [data-nf-action="customise"] {
		grid-column: 1 / -1;
	}
	.nf-banner.nf-banner--strip .nf-banner__layer--strip .nf-btn {
		padding: 8px !important;
	}
	.nf-banner.nf-banner--strip .nf-banner__title {
		font-size: 18px !important;
	}
	.nf-banner.nf-banner--strip .nf-banner__intro {
		font-size: 14px !important;
		line-height: 1.4 !important;
	}
	.nf-banner.nf-banner--strip.nf-banner--window {
		padding: 0 !important;
	}
	.nf-banner--window .nf-banner__dialog {
		height: 100%;
		padding: 0 !important;
		max-width: none !important;
		border: 0 !important;
		border-radius: 0 !important;
	}
	.nf-window__head {
		padding-top: 2px;
		padding-bottom: 2px;
	}
	.nf-banner--window .nf-banner__layer--choices > .nf-banner__actions {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		padding-top: 8px !important;
		padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
	}
	.nf-banner--window .nf-banner__layer--choices > .nf-banner__actions [data-nf-action="save"] {
		grid-column: auto;
	}
	.nf-banner--window .nf-badge {
		display: none;
	}
}

@media (max-height: 480px) and (max-width: 779px) {
	.nf-banner--strip .nf-banner__layer--strip {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}
}

@media (forced-colors: active) {
	.nf-banner.nf-banner--strip .nf-btn,
	.nf-banner.nf-banner--strip .nf-choice__option {
		border-color: ButtonText !important;
	}
	.nf-banner.nf-banner--strip .nf-choice__input:checked + .nf-choice__option {
		background: Highlight !important;
		color: HighlightText !important;
		forced-color-adjust: none;
	}
}

/* The settings page shows the strip in the page, not fixed to the screen. */
.nf-banner.nf-banner--strip.nf-banner--preview {
	position: static !important;
	z-index: auto;
	border-radius: 0 !important;
	overflow: hidden;
}
.nf-banner--preview .nf-banner__dialog {
	max-height: none;
	border: 1px solid var(--nf-border) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.nf-banner.nf-banner--strip .nf-banner__layer--strip .nf-btn--ghost::after {
	content: " \2192";
}

.nf-manage.nf-manage--strip {
	border-radius: 0 !important;
	box-shadow: none !important;
}