/*
 * formalife-core — componenti condivisi (bottoni, contenitore di pagina,
 * guscio del popup, primitive di form).
 *
 * Ogni classe è prefissata "fmls-" apposta per non toccare il tema attivo
 * o altri plugin — stesso principio già usato in guida-antipanico-soffocamento
 * con il prefisso "gaps-". Un nuovo plugin le usa direttamente; un plugin
 * esistente può continuare a usare le proprie classi (es. "gaps-btn-primary")
 * finché non viene migrato — vedi docs/architettura-formalife-core.md.
 *
 * Porta 1:1 le regole già scritte e testate in guida-antipanico-soffocamento
 * v3.7.5, solo rinominate: nessuno stile reinventato in questa estrazione.
 */

.fmls-wrap {
	max-width: var(--fmls-max-w);
	margin: 0 auto;
	padding: 0 24px;
}

.fmls-eyebrow {
	display: inline-block;
	font-family: var(--fmls-font-body);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.78rem;
	color: var(--fmls-teal-bright);
	background: rgba(44,173,169,0.1);
	padding: 6px 14px;
	border-radius: 999px;
	margin-bottom: 18px;
}

/* Pulsanti — colori dichiarati esplicitamente per garantire il contrasto
   corretto in ogni contesto, testo sempre in grassetto. */
.fmls-btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background-color: var(--fmls-teal-deep);
	color: #FFFFFF;
	font-family: var(--fmls-font-display);
	font-weight: 700;
	font-size: 1.05rem;
	padding: 17px 28px;
	border-radius: 999px;
	text-decoration: none;
	box-shadow: var(--fmls-shadow-card);
	transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
	border: none;
	cursor: pointer;
}
.fmls-btn-primary:hover, .fmls-btn-primary:focus-visible {
	background-color: var(--fmls-teal-darker);
	color: #FFFFFF;
	transform: translateY(-2px);
	box-shadow: 0 12px 34px rgba(11,101,96,0.28);
}
.fmls-btn-primary svg { width: 18px; height: 18px; flex-shrink: 0; }

.fmls-btn-onlight { background-color: #FFFFFF; color: var(--fmls-teal-deep); }
.fmls-btn-onlight:hover, .fmls-btn-onlight:focus-visible { background-color: var(--fmls-cream-warm); color: var(--fmls-teal-deep); }

.fmls-btn-lg { font-size: 1.2rem; padding: 22px 44px; }

.fmls-btn-secondary {
	flex: 0 0 auto;
	background: transparent;
	border: 1px solid rgba(11,101,96,0.35);
	color: var(--fmls-teal-deep, #0B6560);
	border-radius: 999px;
	padding: 12px 20px;
	font-family: var(--fmls-font-display, 'Fredoka', sans-serif);
	font-size: 0.95rem;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.fmls-btn-secondary:hover, .fmls-btn-secondary:focus-visible { background: rgba(11,101,96,0.06); border-color: var(--fmls-teal-deep, #0B6560); }

.fmls-micro { font-size: 0.85rem; color: var(--fmls-ink-soft); margin-top: 10px; }

.fmls-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.fmls-reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .fmls-reveal { opacity: 1; transform: none; transition: none; } }

/* ==========================================================
 * Guscio di popup/modal — usato da qualunque plugin con un
 * flusso "compila un modulo dentro un popup".
 * ========================================================== */
body.fmls-modal-open { overflow: hidden; }

.fmls-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(10,20,20,0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	z-index: 100000;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease;
}
.fmls-modal-overlay.is-open { opacity: 1; visibility: visible; }

.fmls-modal {
	background: var(--fmls-cream, #FFFDF7);
	border-radius: var(--fmls-radius, 20px);
	max-width: 560px;
	width: 100%;
	max-height: 92vh;
	overflow-y: auto;
	padding: 36px 36px 28px;
	position: relative;
	box-shadow: 0 20px 60px rgba(0,0,0,0.35);
	font-family: var(--fmls-font-body, 'Karla', sans-serif);
}
.fmls-modal-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: none;
	background: rgba(11,101,96,0.08);
	color: var(--fmls-teal-deep, #0B6560);
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
}
.fmls-modal h3 { font-family: var(--fmls-font-display, 'Fredoka', sans-serif); color: var(--fmls-teal-deep, #0B6560); font-size: 1.3rem; margin-bottom: 8px; }
.fmls-modal p.fmls-modal-intro { color: var(--fmls-ink-soft, #3A3A3A); font-size: 0.92rem; margin-bottom: 22px; }
.fmls-modal .fmls-btn-primary { width: 100%; justify-content: center; margin-top: 8px; }

/* ==========================================================
 * Primitive di form — usate da qualunque modulo/popup.
 * ========================================================== */
.fmls-form-row { margin-bottom: 14px; }
.fmls-form-row label { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600; color: var(--fmls-ink, #1A1A1A); margin-bottom: 6px; }
.fmls-form-row input[type="text"],
.fmls-form-row input[type="tel"],
.fmls-form-row input[type="email"] {
	width: 100%;
	padding: 12px 14px;
	border-radius: 10px;
	border: 1px solid rgba(11,101,96,0.25);
	font-size: 0.95rem;
	font-family: inherit;
	background: #fff;
}
.fmls-form-row input:focus { outline: 2px solid var(--fmls-teal-bright, #2CADA9); outline-offset: 1px; }
.fmls-form-checkbox { display: flex; align-items: flex-start; gap: 8px; font-size: 0.8rem; color: var(--fmls-ink-soft, #3A3A3A); }
.fmls-form-checkbox input { margin-top: 3px; }
.fmls-form-message { font-size: 0.88rem; margin: 10px 0; min-height: 1.2em; }
.fmls-form-message--success { color: var(--fmls-teal-deep, #0B6560); font-weight: 600; }
.fmls-form-message--error { color: var(--fmls-terracotta, #C24E3A); font-weight: 600; }