/*
 * MetaCometa Libro — modulo [mc_libro].
 *
 * Vive dentro la card scura «Come averlo» di /libro/ (.lb-averlo-card, fondo
 * #1F1633, testo crema). Il CSS della pagina colpisce OGNI <p> della card
 * (.lb-sec p e .lb-averlo-card p: colore, font, max-width, margini), quindi qui
 * i paragrafi hanno sempre una classe e selettori più specifici (.mcl p.mcl-…).
 * Il foglio della pagina sta nel contenuto (dopo questo): a parità di
 * specificità vincerebbe lui, per questo non si scende mai a (0,1,1).
 *
 * Tema scuro di serie; [mc_libro tema="chiaro"] per gli sfondi chiari.
 * Bersagli >= 44px, focus visibile, contrasti AA, prefers-reduced-motion.
 */

.mcl {
	--mcl-fg: #FFFBF4;
	--mcl-fg-soft: rgba(255, 251, 244, 0.88);
	--mcl-muted: rgba(255, 251, 244, 0.76);
	--mcl-line: rgba(255, 251, 244, 0.55);
	--mcl-chip-fg: #FFFBF4;
	--mcl-chip-hover: rgba(255, 251, 244, 0.1);
	--mcl-sel-bg: #F7C868;
	--mcl-sel-fg: #1F1633;
	--mcl-input-bg: #FFFBF4;
	--mcl-input-fg: #1F1633;
	--mcl-input-line: rgba(255, 251, 244, 0.7);
	--mcl-link: #F7C868;
	--mcl-focus: #F7C868;
	--mcl-badge-bg: rgba(247, 200, 104, 0.16);
	--mcl-btn-bg: #B25420;
	--mcl-btn-hover: #8F4214;
	--mcl-btn-fg: #FFFBF4;
	--mcl-font: 'DM Sans', 'Avenir Next', Arial, Roboto, sans-serif;

	box-sizing: border-box;
	position: relative;
	width: 100%;
	max-width: 640px;
	margin: 28px 0 32px;
	color: var(--mcl-fg);
	font: 400 1rem/1.6 var(--mcl-font);
	scroll-margin-top: 120px;
}

.mcl.mcl--chiaro {
	--mcl-fg: #1F1633;
	--mcl-fg-soft: #4A3F5C;
	--mcl-muted: #5E5470;
	--mcl-line: #6E5A93;
	--mcl-chip-fg: #1F1633;
	--mcl-chip-hover: rgba(79, 45, 127, 0.07);
	--mcl-sel-bg: #4F2D7F;
	--mcl-sel-fg: #FFFBF4;
	--mcl-input-bg: #FFFFFF;
	--mcl-input-fg: #1F1633;
	--mcl-input-line: #8A7FA0;
	--mcl-link: #4F2D7F;
	--mcl-focus: #4F2D7F;
	--mcl-badge-bg: rgba(79, 45, 127, 0.08);
}

/* La card «Come averlo» non deve avere .mc-reveal (il tema la tiene a
   opacity:0 finché il suo script non la scopre: dopo il ritorno da Stripe lo
   schermo resterebbe vuoto 3 secondi, senza JS per sempre). Se una versione
   vecchia della pagina la tiene ancora, la card con il modulo resta visibile. */
.lb-averlo-card.mc-reveal:has(.mcl) {
	opacity: 1;
	transform: none;
}

/* Specificità vera (niente :where): il tema forza max-width:none sulle figlie
   del contenuto e una scatola content-box sforerebbe il contenitore. */
.mcl.mcl *,
.mcl.mcl *::before,
.mcl.mcl *::after {
	box-sizing: border-box;
}

/* Paragrafi: battono .lb-sec p e .lb-averlo-card p (0,1,1). */
.mcl p.mcl-p {
	margin: 0 0 12px;
	max-width: 60ch;
	color: var(--mcl-fg-soft);
	font: 400 1.04rem/1.65 var(--mcl-font);
}

.mcl p.mcl-p:last-child {
	margin-bottom: 0;
}

.mcl a:not(.mcl-btn) {
	color: var(--mcl-link);
	text-decoration: underline;
	text-underline-offset: 2px;
	font-weight: 600;
}

.mcl a:not(.mcl-btn):focus-visible {
	outline: 3px solid var(--mcl-focus);
	outline-offset: 2px;
	border-radius: 3px;
}

.mcl .mcl-titolo {
	margin: 0 0 14px;
	color: var(--mcl-fg);
	font: 400 clamp(1.4rem, 2.6vw, 1.8rem)/1.2 'Young Serif', 'Iowan Old Style', Georgia, serif;
}

.mcl .mcl-intro {
	margin: 0 0 22px;
}

.mcl p.mcl-restano {
	display: inline-block;
	margin: 0 0 18px;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--mcl-badge-bg);
	color: var(--mcl-link);
	font: 600 0.92rem/1.4 var(--mcl-font);
}

/* ---------- Messaggi (contrasto AA anche sulla card scura) ---------- */
.mcl .mcl-msg {
	margin: 0 0 20px;
	padding: 14px 18px;
	border-radius: 14px;
}

.mcl .mcl-msg p.mcl-p {
	max-width: none;
	color: inherit;
	font-size: 1rem;
	line-height: 1.55;
}

.mcl .mcl-msg a:not(.mcl-btn) {
	color: inherit;
}

/* Sui fondi chiari dei messaggi l'anello giallo del tema scuro sparirebbe
   (1,4:1): qui prende il colore del testo del riquadro (7,5-9:1). */
.mcl .mcl-msg a:not(.mcl-btn):focus-visible {
	outline-color: currentColor;
}

.mcl .mcl-msg--ok {
	background: #E9F6EE;
	color: #17592F;
}

.mcl .mcl-msg--err {
	background: #FDECEC;
	color: #8E1F1F;
}

.mcl .mcl-msg--info {
	background: #FFF3D6;
	color: #5C3D00;
}

.mcl .mcl-grazie {
	padding: 22px 24px;
}

.mcl .mcl-grazie p.mcl-grazie-titolo {
	margin: 0 0 8px;
	font: 400 clamp(1.3rem, 2.4vw, 1.6rem)/1.25 'Young Serif', 'Iowan Old Style', Georgia, serif;
}

.mcl p.mcl-ancora {
	margin: 0;
}

/* Unica azione dopo il grazie: bersaglio alto 44px anche se è un link. */
.mcl p.mcl-ancora a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* ---------- Modulo ---------- */
.mcl .mcl-form {
	margin: 0;
	padding: 0;
}

.mcl .mcl-fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.mcl .mcl-legend {
	display: block;
	float: none;
	width: 100%;
	margin: 0 0 12px;
	padding: 0;
	color: var(--mcl-fg);
	font: 600 1.05rem/1.4 var(--mcl-font);
}

.mcl .mcl-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
}

.mcl .mcl-chip {
	position: relative;
	display: inline-flex;
	margin: 0;
	cursor: pointer;
}

/* Radio nascosto alla vista ma raggiungibile da tastiera e screen reader. */
.mcl .mcl-chip input {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
}

.mcl .mcl-chip span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 84px;
	min-height: 48px;
	padding: 10px 20px;
	border: 1.5px solid var(--mcl-line);
	border-radius: 999px;
	background: transparent;
	color: var(--mcl-chip-fg);
	font: 600 1.06rem/1 var(--mcl-font);
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.mcl .mcl-chip:hover span {
	background: var(--mcl-chip-hover);
}

.mcl .mcl-chip input:checked + span {
	background: var(--mcl-sel-bg);
	border-color: var(--mcl-sel-bg);
	color: var(--mcl-sel-fg);
}

.mcl .mcl-chip input:focus-visible + span {
	outline: 3px solid var(--mcl-focus);
	outline-offset: 3px;
}

.mcl .mcl-altro {
	margin: 18px 0 0;
}

.mcl .mcl-altro-label {
	display: block;
	margin: 0 0 6px;
	color: var(--mcl-fg);
	font: 600 0.98rem/1.4 var(--mcl-font);
}

.mcl .mcl-campo {
	position: relative;
	display: flex;
	align-items: center;
	max-width: 220px;
}

.mcl .mcl-campo input {
	display: block;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 10px 44px 10px 16px;
	border: 1.5px solid var(--mcl-input-line);
	border-radius: 12px;
	background: var(--mcl-input-bg);
	color: var(--mcl-input-fg);
	font: 600 1.1rem/1.2 var(--mcl-font);
	-moz-appearance: textfield;
	appearance: textfield;
}

.mcl .mcl-campo input::-webkit-outer-spin-button,
.mcl .mcl-campo input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.mcl .mcl-campo input:focus {
	outline: 3px solid var(--mcl-focus);
	outline-offset: 2px;
}

.mcl .mcl-campo span {
	position: absolute;
	right: 16px;
	color: var(--mcl-input-fg);
	font: 600 1.05rem/1 var(--mcl-font);
	opacity: 0.75;
	pointer-events: none;
}

.mcl p.mcl-hint {
	margin: 6px 0 0;
	color: var(--mcl-muted);
	font-size: 0.92rem;
	line-height: 1.5;
}

.mcl p.mcl-una {
	margin: 16px 0 0;
	color: var(--mcl-fg-soft);
	font-size: 0.98rem;
}

/* Honeypot: fuori schermo via CSS (non type=hidden, i bot lo riconoscono). */
.mcl .mcl-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Bottone come .lb-btn della pagina. */
.mcl .mcl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 52px;
	margin: 24px 0 0;
	padding: 15px 28px;
	border: 0;
	border-radius: 999px;
	background: var(--mcl-btn-bg);
	color: var(--mcl-btn-fg);
	font: 600 1rem/1.25 var(--mcl-font);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(31, 22, 51, 0.22);
	transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), background-color 220ms ease, box-shadow 220ms ease;
}

.mcl .mcl-btn:hover {
	background: var(--mcl-btn-hover);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(31, 22, 51, 0.26);
}

.mcl .mcl-btn:focus-visible {
	outline: 3px solid var(--mcl-focus);
	outline-offset: 3px;
}

.mcl .mcl-btn[disabled] {
	opacity: 0.8;
	cursor: progress;
	transform: none;
}

.mcl p.mcl-nota {
	margin: 16px 0 0;
	color: var(--mcl-muted);
	font-size: 0.93rem;
	line-height: 1.55;
}

.mcl p.mcl-privacy {
	margin-top: 10px;
	font-size: 0.86rem;
}

@media (max-width: 480px) {
	.mcl .mcl-btn {
		width: 100%;
	}

	/* Sul telefono i tagli in griglia a due colonne (15/20 · 25/Altro). */
	.mcl .mcl-chips {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mcl .mcl-chip span {
		width: 100%;
		min-width: 0;
		padding: 10px 12px;
	}
}

/* Contrasto forzato (Windows): il taglio scelto resta riconoscibile. */
@media (forced-colors: active) {
	.mcl .mcl-chip input:checked + span {
		outline: 3px solid CanvasText;
		outline-offset: 2px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mcl .mcl-btn,
	.mcl .mcl-chip span {
		transition: none;
	}

	.mcl .mcl-btn:hover {
		transform: none;
	}
}