/*
 * The mail form.
 *
 * The trap is hidden here and not with type="hidden" on purpose: a browser
 * leaves a hidden input alone, but a naive script fills every field it finds,
 * which is exactly what this is for. Positioned off-canvas rather than
 * display:none, because some scripts skip what is not displayed.
 */
.podkiss-posta-form__trappola {
	height: 1px;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

.podkiss-posta-form__campo {
	display: block;
	margin-bottom: var( --wp--preset--spacing--30, 1rem );
}

.podkiss-posta-form__campo label,
.podkiss-posta-form fieldset legend {
	display: block;
	font-weight: 700;
	margin-bottom: 0.25rem;
}

.podkiss-posta-form input[type="text"],
.podkiss-posta-form input[type="email"],
.podkiss-posta-form select,
.podkiss-posta-form textarea {
	background-color: var( --wp--preset--color--podkiss-surface, #fff );
	border: 1px solid var( --wp--preset--color--podkiss-border, #999 );
	border-radius: 12px;
	color: inherit;
	font: inherit;
	padding: 0.6rem 0.75rem;
	width: 100%;
}

.podkiss-posta-form__nota {
	display: block;
	font-size: 0.8125rem;
	margin-top: 0.25rem;
	opacity: 0.85;
}

.podkiss-posta-form__testo-consenso {
	background-color: var( --wp--preset--color--podkiss-surface, transparent );
	border-radius: 20px;
	font-size: 0.8125rem;
	margin-bottom: 0.75rem;
	max-height: 14rem;
	overflow-y: auto;
	padding: 1rem;
}

.podkiss-posta-form__esito:empty {
	display: none;
}

.podkiss-posta-form__esito {
	border-radius: 12px;
	margin-top: 1rem;
	padding: 0.75rem 1rem;
}

.podkiss-posta-form__esito--ok {
	background-color: var( --wp--preset--color--podkiss-lime, #cfc );
	color: var( --wp--preset--color--podkiss-bg, #000 );
}

.podkiss-posta-form__esito--errore {
	background-color: var( --wp--preset--color--podkiss-corallo, #fcc );
	color: var( --wp--preset--color--podkiss-bg, #000 );
}

.podkiss-posta-form__campo--audio {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
}

.podkiss-posta-form__registratore {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.podkiss-posta-form__registratore[hidden] {
	display: none;
}

.podkiss-posta-form__tempo {
	font-size: 1.25rem;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	min-width: 3.5rem;
}

.podkiss-posta-form__riascolto {
	flex-basis: 100%;
	width: 100%;
}

.podkiss-posta-form__riascolto[hidden] {
	display: none;
}

/* Le due voci in cima alla posta: per iscritto, a voce.
   Due link che sembrano un interruttore, perché è quello che sono per chi
   scrive; ma ridisegnano la pagina, così il consenso mostrato e quello
   registrato sono sempre lo stesso testo. */
.podkiss-posta-modi {
	border: 2px solid currentColor;
	border-radius: 999px;
	display: inline-flex;
	gap: 0;
	margin: 0 0 1.5rem;
	padding: 3px;
}

.podkiss-posta-modi__voce {
	border-radius: 999px;
	color: inherit;
	font-weight: 600;
	padding: 0.45rem 1.1rem;
	text-decoration: none;
}

.podkiss-posta-modi__voce:hover,
.podkiss-posta-modi__voce:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.podkiss-posta-modi__voce.is-attiva {
	color: var( --wp--preset--color--podkiss-bg, #0e2a33 );
	background: var( --wp--preset--color--podkiss-fg, #f0f7f9 );
}

/* Le caselle stanno dentro il modulo. Larghe il 100% con il padding in più
   (il content-box di default) uscivano di 26 px dal bordo destro: su un
   telefono la pagina scorreva di lato, e il bordo della domanda spariva. */
.podkiss-posta-form input:not([type="radio"]):not([type="checkbox"]),
.podkiss-posta-form select,
.podkiss-posta-form textarea {
	box-sizing: border-box;
	max-width: 100%;
}