/*
 * NO·RU velvety skin — Banner dei cookie
 * Sta fuori da #nr-site, all'inizio del body: ha variabili e reset suoi
 * e non tocca niente del tema.
 *
 * Indice
 *  1. Variabili e base
 *  2. Banner
 *  3. Pulsanti
 *  4. Finestra delle preferenze
 *  5. Interruttore
 *  6. Pagina ferma
 *  7. Telefoni
 *  8. Movimento ridotto
 */

/* ==========================================================================
   1. VARIABILI E BASE
   ========================================================================== */

.nr-cc {
	/* ---- 1.1 Colori e misure, gli stessi della landing ---- */
	--cc-ink: #1E3A24;
	--cc-fondo: #CFE2B0;
	--cc-chiaro: #E9F2DA;
	--cc-crema: #F7EFE6;
	--cc-verde: #4F7F45;
	--cc-rame: #DB7342;
	--cc-accento: #D3236C;
	--cc-u: max(16px, 1rem);
	--cc-font: "Bricolage Grotesque", system-ui, sans-serif;
	--cc-serif: "Instrument Serif", Georgia, serif;
	--cc-mono: "Martian Mono", ui-monospace, monospace;
	--cc-ease: cubic-bezier(.22, 1, .36, 1);
	--cc-r: clamp(18px, 2vw, 26px);
	--cc-linea: rgba(30, 58, 36, .22);
	--cc-grana: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .23 0 0 0 0 .16 0 0 0 0 .11 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E");
}

/* ---- 1.2 Reset ---- */

.nr-cc,
.nr-cc *,
.nr-cc *::before,
.nr-cc *::after { box-sizing: border-box; }

.nr-cc :where(h2, p, form, button, label, input) {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: none;
	text-shadow: none;
	box-shadow: none;
}

.nr-cc [hidden] { display: none !important; }

.nr-cc :where(.nr-cc__banner, .nr-cc__dialog) {
	font-family: var(--cc-font);
	font-size: calc(var(--cc-u) * .95);
	font-weight: 400;
	line-height: 1.5;
	color: var(--cc-ink);
	text-align: left;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.nr-cc a {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--cc-rame);
	text-decoration-thickness: 1.5px;
	text-underline-offset: .2em;
}

.nr-cc a:hover { text-decoration-thickness: 2.5px; }

.nr-cc :focus-visible { outline: 3px solid var(--cc-ink); outline-offset: 3px; }

/* ==========================================================================
   2. BANNER
   ========================================================================== */

/* Una scheda color crema appoggiata in basso a sinistra, con l'ombra piena dei pulsanti. */
.nr-cc__banner {
	position: fixed;
	left: clamp(12px, 3vw, 28px);
	bottom: clamp(12px, 3vw, 28px);
	z-index: 9990;
	display: grid;
	gap: 10px;
	width: min(30rem, calc(100vw - 24px));
	max-height: calc(100vh - 24px);
	overflow-y: auto;
	padding: 22px 24px 20px;
	border: 2px solid var(--cc-ink);
	border-radius: var(--cc-r);
	background: var(--cc-grana) var(--cc-crema);
	box-shadow: 0 12px 0 -4px var(--cc-ink);
	animation: nr-cc-entra .6s var(--cc-ease) both;
}

.nr-cc__titolo {
	font-family: var(--cc-serif);
	font-size: calc(var(--cc-u) * 1.75);
	font-style: italic;
	font-weight: 400;
	line-height: 1;
	letter-spacing: -.01em;
}

.nr-cc__testo { max-width: 52ch; text-wrap: pretty; }

.nr-cc__azioni {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
	margin-top: 6px;
}

@keyframes nr-cc-entra {
	from { opacity: 0; transform: translateY(24px); }
	to { opacity: 1; transform: none; }
}

/* ==========================================================================
   3. PULSANTI
   ========================================================================== */

.nr-cc .nr-cc__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 20px;
	border: 2px solid var(--cc-ink);
	border-radius: 999px;
	background: transparent;
	color: var(--cc-ink);
	font-family: var(--cc-font);
	font-size: calc(var(--cc-u) * .92);
	font-weight: 650;
	line-height: 1.1;
	text-align: center;
	cursor: pointer;
	transition: transform .4s var(--cc-ease), background-color .3s, border-color .3s, color .3s, box-shadow .4s var(--cc-ease);
}

/* "Va bene" e "Solo il necessario" hanno lo stesso peso: nessuna scelta è spinta. */
.nr-cc .nr-cc__btn--pieno { background: var(--cc-ink); color: var(--cc-crema); }

.nr-cc .nr-cc__btn--link {
	min-height: 44px;
	padding: 0 4px;
	border: 0;
	border-radius: 0;
	text-decoration: underline;
	text-decoration-color: var(--cc-rame);
	text-decoration-thickness: 1.5px;
	text-underline-offset: .25em;
}

.nr-cc .nr-cc__btn:active { transform: translateY(1px) scale(.98); }

@media (hover: hover) {
	.nr-cc .nr-cc__btn:not(.nr-cc__btn--link):hover {
		background: var(--cc-rame);
		border-color: var(--cc-rame);
		color: var(--cc-ink);
		transform: translateY(-3px);
		box-shadow: 0 10px 0 -4px var(--cc-ink);
	}

	.nr-cc .nr-cc__btn--link:hover { text-decoration-thickness: 2.5px; }
}

/* Il banner sta fuori da #nr-site: i temi che colorano button:hover, button:focus
   e a:hover col loro accento qui vincerebbero. Gli stati si ripetono sull'id. */
#nr-cc .nr-cc__btn:is(:hover, :focus, :active) {
	border-color: var(--cc-ink);
	background: transparent;
	color: var(--cc-ink);
	box-shadow: none;
	text-decoration: none;
}

#nr-cc .nr-cc__btn--pieno:is(:hover, :focus, :active) { background: var(--cc-ink); color: var(--cc-crema); }

#nr-cc .nr-cc__btn--link:is(:hover, :focus, :active) {
	border: 0;
	background: transparent;
	color: var(--cc-ink);
	text-decoration: underline;
	text-decoration-color: var(--cc-rame);
	text-decoration-thickness: 1.5px;
	text-underline-offset: .25em;
}

#nr-cc a:is(:hover, :focus, :active) { background: transparent; color: inherit; }
#nr-cc .nr-cc__switch:is(:hover, :focus, :active) { border-color: var(--cc-ink); background: var(--cc-chiaro); box-shadow: none; }
#nr-cc .nr-cc__switch:checked:is(:hover, :focus, :active) { background: var(--cc-verde); }

@media (hover: hover) {
	#nr-cc .nr-cc__btn:not(.nr-cc__btn--link):hover {
		border-color: var(--cc-rame);
		background: var(--cc-rame);
		color: var(--cc-ink);
		box-shadow: 0 10px 0 -4px var(--cc-ink);
	}

	#nr-cc .nr-cc__btn--link:hover,
	#nr-cc a:hover { text-decoration-thickness: 2.5px; }
}

/* ==========================================================================
   4. FINESTRA DELLE PREFERENZE
   ========================================================================== */

/* ---- 4.1 Finestra ---- */

.nr-cc .nr-cc__dialog {
	width: min(36rem, calc(100vw - 24px));
	max-width: none;
	max-height: calc(100vh - 32px);
	max-height: calc(100dvh - 32px);
	margin: auto;
	padding: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	border: 2px solid var(--cc-ink);
	border-radius: var(--cc-r);
	background: var(--cc-grana) var(--cc-fondo);
	box-shadow: 0 14px 0 -4px var(--cc-ink);
	color: var(--cc-ink);
}

.nr-cc .nr-cc__dialog:not([open]) { display: none; }

/* Senza showModal() (browser vecchi) la finestra resta aperta sopra la pagina. */
.nr-cc .nr-cc__dialog.is-senza-modale {
	position: fixed;
	inset: 0;
	z-index: 10001;
}

.nr-cc .nr-cc__dialog[open] { animation: nr-cc-apri .45s var(--cc-ease) both; }

.nr-cc .nr-cc__dialog::backdrop {
	background: rgba(30, 58, 36, .58);
	animation: nr-cc-velo .45s ease both;
}

.nr-cc__form {
	display: grid;
	gap: 18px;
	padding: clamp(22px, 4vw, 34px);
}

/* Lo stesso occhiello della landing: mono maiuscolo con il punto di rame. */
.nr-cc__occhiello {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: -8px;
	font-family: var(--cc-mono);
	font-size: calc(var(--cc-u) * .72);
	line-height: 1.4;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.nr-cc__occhiello::before {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--cc-rame);
	box-shadow: 0 0 0 3px rgba(219, 115, 66, .3);
}

.nr-cc__dialog-t {
	font-family: var(--cc-serif);
	font-size: calc(var(--cc-u) * 2.3);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -.01em;
	text-wrap: balance;
}

@keyframes nr-cc-apri {
	from { opacity: 0; transform: translateY(18px) scale(.98); }
	to { opacity: 1; transform: none; }
}

@keyframes nr-cc-velo {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* ---- 4.2 Voci ---- */

.nr-cc__voce {
	display: grid;
	gap: 6px;
	padding: 16px 18px;
	border: 1.5px solid var(--cc-linea);
	border-radius: calc(var(--cc-r) * .7);
	background: var(--cc-chiaro);
}

.nr-cc__voce-testa {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.nr-cc__voce-t { font-weight: 700; line-height: 1.25; cursor: default; }
.nr-cc label.nr-cc__voce-t { cursor: pointer; }

.nr-cc__voce-d { font-size: calc(var(--cc-u) * .9); opacity: .86; text-wrap: pretty; }

.nr-cc__sempre {
	flex: none;
	padding: 6px 10px;
	border: 1.5px solid var(--cc-verde);
	border-radius: 999px;
	font-family: var(--cc-mono);
	font-size: calc(var(--cc-u) * .66);
	line-height: 1;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cc-verde);
}

/* ==========================================================================
   5. INTERRUTTORE
   ========================================================================== */

/* Una checkbox vera, solo disegnata da interruttore: tastiera e lettori di schermo restano quelli nativi. */
.nr-cc .nr-cc__switch {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	flex: none;
	width: 54px;
	height: 30px;
	margin: 0;
	border: 2px solid var(--cc-ink);
	border-radius: 999px;
	background: var(--cc-crema);
	cursor: pointer;
	transition: background-color .3s;
}

.nr-cc .nr-cc__switch::before {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--cc-ink);
	transition: transform .35s var(--cc-ease), background-color .3s;
}

.nr-cc .nr-cc__switch:checked { background: var(--cc-verde); }
.nr-cc .nr-cc__switch:checked::before { background: var(--cc-crema); transform: translateX(24px); }

/* Con i colori forzati di Windows lo sfondo sparisce: resta la posizione del pallino. */
@media (forced-colors: active) {
	.nr-cc .nr-cc__switch::before { background: CanvasText; }
	.nr-cc .nr-cc__switch:checked::before { background: Highlight; }
}

/* ==========================================================================
   6. PAGINA FERMA
   ========================================================================== */

/* Con la finestra aperta la pagina sotto non scorre. */
html.nr-cc-fermo,
html.nr-cc-fermo body { overflow: hidden !important; }

/* Tolta la barra di scorrimento la pagina si allargherebbe di colpo: il suo
   posto resta tenuto finché la finestra è aperta. */
html.nr-cc-fermo.nr-cc-barra { scrollbar-gutter: stable; }

/* ==========================================================================
   7. TELEFONI
   ========================================================================== */

@media (max-width: 560px) {
	.nr-cc__banner {
		left: 12px;
		right: 12px;
		bottom: 12px;
		width: auto;
		padding: 18px 18px 16px;
	}

	.nr-cc__azioni .nr-cc__btn { flex: 1 1 auto; }
	.nr-cc__banner .nr-cc__btn--pieno { flex: 1 1 40%; }
	.nr-cc__banner .nr-cc__btn--link { flex: 1 1 100%; }
}

/* ==========================================================================
   8. MOVIMENTO RIDOTTO
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.nr-cc__banner,
	.nr-cc .nr-cc__dialog[open],
	.nr-cc .nr-cc__dialog::backdrop { animation: none; }

	.nr-cc .nr-cc__btn,
	.nr-cc .nr-cc__switch,
	.nr-cc .nr-cc__switch::before { transition: none; }
}