/* Firma del contratto a «Scegli il profilo» (7/10, CEO: tutti firmano quando si registrano).
 * Il blocco del professionista e dell'hobbista in /scegli-ruolo/: due dati, il contratto, le clausole, la firma.
 * Stessi campi, caselle e foglio della pagina (inc/login/css/login.css, css/tbp-firma.css).
 * Niente bordi colorati di lato o in alto; oro #e0b23a con testo #052b18 solo sul «Continua» della pagina. */

/* ---------- Il blocco ---------- */
html body.scegli-ruolo #main #tbp-role-form .tbp-role-contratto {
	max-width: 480px;
	margin: 0 auto;
	text-align: left;
}
html body.scegli-ruolo #main #tbp-role-form .tbp-role-contratto[hidden] { display: none !important; }
html body.scegli-ruolo #main #tbp-role-form .tbp-fi {
	margin: 26px 0 0;
	padding: 22px 0 0;
	border-top: 1px solid rgba(8, 72, 40, 0.1);
}
html body.scegli-ruolo #main #tbp-role-form .tbp-fi .tbp-firma-doc__title {
	margin: 0 0 6px;
	font-family: var(--tbp-font-titoli, inherit);
	font-size: 1.45rem;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: #084828;
}
html body.scegli-ruolo #main #tbp-role-form .tbp-fi .tbp-firma-doc__intro,
html body.scegli-ruolo #main #tbp-role-form .tbp-fi .tbp-fi-testo {
	margin: 0 0 14px;
	font-size: 0.92rem;
	line-height: 1.5;
	color: #3f5247;
}
html body.scegli-ruolo #main #tbp-role-form .tbp-fi .tbp-fi-sottotitolo {
	margin: 22px 0 6px;
	font-size: 1.05rem;
	line-height: 1.3;
	font-weight: 700;
	color: #084828;
}
html body.scegli-ruolo #main #tbp-role-form .tbp-fi .tbp-fi-dati .tbp-fi-sottotitolo { margin-top: 10px; }
html body.scegli-ruolo #main #tbp-role-form .tbp-fi [hidden] { display: none !important; }

/* ---------- I campi: come quelli dell'ente ---------- */
html body.scegli-ruolo #main #tbp-role-form .tbp-fi-griglia { display: grid; gap: 12px; }
@media (min-width: 600px) {
	html body.scegli-ruolo #main #tbp-role-form .tbp-fi-griglia { grid-template-columns: 1fr 1fr; }
	html body.scegli-ruolo #main #tbp-role-form .tbp-fi-cella--larga { grid-column: 1 / -1; }
}
html body.scegli-ruolo #main #tbp-role-form .tbp-fi-campo { margin: 0; }
html body.scegli-ruolo #main #tbp-role-form .tbp-fi-campo--nome { margin: 0 0 12px; }
html body.scegli-ruolo #main #tbp-role-form .tbp-fi-campo .tbp-auth-field-label {
	display: block;
	margin: 0 0 6px;
	font-size: 0.9rem;
	font-weight: 600;
	color: #084828;
}
html body.scegli-ruolo #main #tbp-role-form .tbp-fi-campo .required { color: #d0161a; margin-left: 2px; }
html body.scegli-ruolo #main #tbp-role-form .tbp-fi-facoltativo { font-size: 0.78rem; font-weight: 400; color: #5d786b; }
html body.scegli-ruolo #main #tbp-role-form .tbp-fi-campo input[type="text"] {
	width: 100%;
	min-height: 48px;
	border: 0 !important;
	border-radius: 14px !important;
	background: #f4f7f5 !important;
	box-shadow: inset 0 0 0 1px rgba(8, 72, 40, 0.06) !important;
	padding: 12px 18px;
	font-size: 1rem;
	color: #084828;
}
html body.scegli-ruolo #main #tbp-role-form .tbp-fi-campo input[type="text"]:focus {
	outline: 0 !important;
	box-shadow: inset 0 0 0 1px rgba(8, 72, 40, 0.08), 0 0 0 3px rgba(208, 22, 26, 0.12) !important;
}
html body.scegli-ruolo #main #tbp-role-form .tbp-fi-campo input[readonly] { color: #3f5247; }
html body.scegli-ruolo #main #tbp-role-form .tbp-fi-campo--errore input[type="text"] {
	box-shadow: inset 0 0 0 2px #c0392b !important;
}
html body.scegli-ruolo #main #tbp-role-form .tbp-fi-errore { margin: 6px 0 0; font-size: 0.85rem; line-height: 1.4; color: #a52a1f; }
html body.scegli-ruolo #main #tbp-role-form .tbp-fi-avviso { margin: 0 0 14px; }

/* ---------- Il foglio del contratto ---------- */
html body.scegli-ruolo #main #tbp-role-form .tbp-fi .tbp-firma-doc__wait { padding: 14px 4px; }
html body.scegli-ruolo #main #tbp-role-form .tbp-fi-foglio { margin-top: 4px; }
/* Telefono: 40 % dello schermo, poi «Leggi tutto» lo apre per intero. */
@media (max-width: 849px) {
	html body.scegli-ruolo #main #tbp-role-form .tbp-fi-foglio { max-height: 40vh; padding: 16px; }
}
html body.scegli-ruolo #main #tbp-role-form .tbp-fi-foglio.is-aperto { max-height: none; box-shadow: none; }
html body.scegli-ruolo #main #tbp-role-form .tbp-fi-leggi { margin: 6px 0 0; text-align: center; }
/* «Leggi tutto»: una riga sottolineata, non un bottone (la barra ↑ ↓ «Vai in fondo» ha già i suoi). */
html body.scegli-ruolo #main #tbp-role-form .tbp-fi-leggi__btn,
html body.scegli-ruolo #main #tbp-role-form button.tbp-fi-leggi__btn,
html body.scegli-ruolo #main #tbp-role-form .tbp-fi-leggi button {
	display: inline-block;
	width: auto;
	min-height: 44px;
	margin: 0;
	padding: 10px 6px !important;
	border: 0 !important;
	border-radius: 0;
	background: none !important;
	box-shadow: none !important;
	color: #084828 !important;
	font: inherit;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.4;
	text-transform: none;
	text-decoration: underline !important;
	text-underline-offset: 3px;
	cursor: pointer;
	transform: none !important;
}
html body.scegli-ruolo #main #tbp-role-form .tbp-fi-leggi__btn:hover,
html body.scegli-ruolo #main #tbp-role-form .tbp-fi-leggi__btn:focus-visible { color: #145e3f !important; }
html body.scegli-ruolo #main #tbp-role-form .tbp-fi-leggi__btn:focus-visible { outline: 3px solid #145e3f; outline-offset: 2px; }
/* Foglio aperto per intero: la barra ↑ ↓ non serve. */
html body.scegli-ruolo #main #tbp-role-form .tbp-fi-foglio.is-aperto ~ .tbp-lettore { display: none !important; }
@media (min-width: 850px) {
	/* Al computer il foglio ha la sua altezza (440 px) e scorre: il bottone non serve. */
	html body.scegli-ruolo #main #tbp-role-form .tbp-fi-leggi { display: none; }
}
html body.scegli-ruolo #main #tbp-role-form .tbp-fi .tbp-firma-doc__pdf { margin: 10px 0 0; font-size: 0.9rem; }
html body.scegli-ruolo #main #tbp-role-form .tbp-fi .tbp-fi-informativa { margin: 12px 0 0; font-size: 0.85rem; }

/* ---------- Le clausole: la stessa casella delle dichiarazioni ---------- */
html body.scegli-ruolo #tbp-role-form .tbp-fi-clausole { margin-top: 16px; }
html body.scegli-ruolo #tbp-role-form .tbp-fi-clausole .tbp-legal-row { align-items: flex-start; }
html body.scegli-ruolo #tbp-role-form .tbp-fi-clausole .tbp-fi-campo--errore .tbp-legal-copy { color: #a52a1f; }

/* ---------- La firma: il riquadro a tutta larghezza ---------- */
html body.scegli-ruolo #main #tbp-role-form .tbp-fi .tbp-firma { width: 100%; }
html body.scegli-ruolo #main #tbp-role-form .tbp-fi .tbp-firma__note { font-size: 0.82rem; }

/* ---------- Registrazione del Comune: la riga sopra il modulo ---------- */
.tbp-fi-ente-avviso {
	margin: 0 auto 14px;
	max-width: 420px;
	padding: 12px 16px;
	border-radius: 14px;
	background: #eef4f0;
	color: #084828;
	font-size: 0.92rem;
	line-height: 1.5;
	text-align: left;
}

/* ---------- Tema scuro ---------- */
html[data-tbp-theme="dark"] body.scegli-ruolo #main #tbp-role-form .tbp-fi .tbp-firma-doc__title,
html[data-tbp-theme="dark"] body.scegli-ruolo #main #tbp-role-form .tbp-fi .tbp-fi-sottotitolo,
html[data-tbp-theme="dark"] body.scegli-ruolo #main #tbp-role-form .tbp-fi-campo .tbp-auth-field-label { color: var(--tbp-night-text, #ededed); }
html[data-tbp-theme="dark"] body.scegli-ruolo #main #tbp-role-form .tbp-fi .tbp-firma-doc__intro,
html[data-tbp-theme="dark"] body.scegli-ruolo #main #tbp-role-form .tbp-fi .tbp-fi-testo,
html[data-tbp-theme="dark"] body.scegli-ruolo #main #tbp-role-form .tbp-fi-facoltativo { color: #c7d2cb; }
html[data-tbp-theme="dark"] body.scegli-ruolo #main #tbp-role-form .tbp-fi { border-top-color: rgba(255, 255, 255, 0.14); }
html[data-tbp-theme="dark"] body.scegli-ruolo #main #tbp-role-form .tbp-fi-campo input[type="text"] {
	background: var(--tbp-night-raised, #1e1e1e) !important;
	color: var(--tbp-night-text, #ededed);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16) !important;
}
html[data-tbp-theme="dark"] body.scegli-ruolo #main #tbp-role-form .tbp-fi-campo input[readonly] { color: #c7d2cb; }
html[data-tbp-theme="dark"] body.scegli-ruolo #main #tbp-role-form .tbp-fi-leggi__btn { color: var(--tbp-night-text, #ededed) !important; }
html[data-tbp-theme="dark"] body.scegli-ruolo #main #tbp-role-form .tbp-fi-errore { color: #f3a39a; }
html[data-tbp-theme="dark"] .tbp-fi-ente-avviso { background: var(--tbp-night-raised, #1e1e1e); color: var(--tbp-night-text, #ededed); }

@media (prefers-reduced-motion: reduce) {
	html body.scegli-ruolo #main #tbp-role-form .tbp-fi-leggi__btn { transition: none; }
}