/**
 * WC Contact - pulsante fisso e modulo di richiesta informazioni
 *
 * La finestra usa i componenti di UIkit già presenti nel tema: qui c'è solo
 * ciò che UIkit non copre, cioè il pulsante fisso e i pochi stati del modulo.
 */

/* =========================================================================
   VARIABILI
   Sovrascrivibili in css/custom.css senza toccare questo file:

     :root {
       --wcb-contact-color: #b8860b;
       --wcb-contact-offset: 90px;   (per stare sopra una barra cookie)
     }
   ====================================================================== */

:root {
	/* Colore del pulsante. */
	--wcb-contact-color: #0e536d;

	/* Colore del testo e dell'icona sopra il pulsante. */
	--wcb-contact-ink: #ffffff;

	/* Distanza dai bordi dello schermo. */
	--wcb-contact-offset: 24px;

	/* Diametro del pulsante circolare su schermi stretti. */
	--wcb-contact-size: 60px;

	/* Curva condivisa con il resto del tema. */
	--wcb-contact-ease: cubic-bezier(0.16, 1, 0.3, 1);

	/*
	 * Filetto di separazione dentro la finestra. Un grigio a bassa opacità
	 * e non un colore del tema: si legge sia su fondo chiaro sia su fondo
	 * scuro, senza dover sapere in anticipo come è configurata la finestra
	 * sul sito che ospita il modulo.
	 */
	--wcb-contact-rule: rgba(127, 127, 127, 0.24);
}

/* =========================================================================
   PULSANTE FISSO
   ------------------------------------------------------------------------
   position: fixed e non absolute: "absolute" ancora l'elemento alla pagina,
   che scorre via insieme al contenuto. Solo "fixed" lo tiene incollato allo
   schermo, che è il comportamento richiesto.
   ====================================================================== */

.wcb-contact {
	position: fixed;

	/*
	 * Sotto le finestre modali di UIkit (1010) e i menu a scomparsa (1000),
	 * sopra qualsiasi contenuto della pagina. Così il pulsante non copre
	 * mai una finestra aperta, ma resta visibile su tutto il resto.
	 */
	z-index: 980;

	/*
	 * Su iPhone la barra inferiore copre gli ultimi pixel dello schermo:
	 * senza questo scarto il pulsante finisce sotto l'indicatore home e
	 * diventa difficile da toccare.
	 */
	bottom: calc(var(--wcb-contact-offset) + env(safe-area-inset-bottom, 0px));
}

.wcb-contact-right {
	right: calc(var(--wcb-contact-offset) + env(safe-area-inset-right, 0px));
}

.wcb-contact-left {
	left: calc(var(--wcb-contact-offset) + env(safe-area-inset-left, 0px));
}

/* --- Il pulsante vero e proprio --- */

.wcb-contact-button {
	/*
	 * Gli stili sono dichiarati per intero e non ereditati da uk-button:
	 * il pulsante deve avere lo stesso aspetto su qualsiasi sito YOOtheme,
	 * indipendentemente dallo stile scelto nel Customizer.
	 */
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	box-sizing: border-box;
	min-height: 56px;
	padding: 0 1.5em 0 1.35em;
	border: 0;
	border-radius: 999px;
	background-color: var(--wcb-contact-color);
	color: var(--wcb-contact-ink);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.01em;
	text-decoration: none;
	cursor: pointer;

	/*
	 * Due ombre sovrapposte: una stretta e scura che stacca il bordo dallo
	 * sfondo, una ampia e morbida che dà l'altezza. Una sola ombra o
	 * sporca i bordi o non si vede.
	 */
	box-shadow:
		0 2px 6px rgba(0, 0, 0, 0.18),
		0 12px 28px -6px rgba(0, 0, 0, 0.35);

	transition:
		transform 0.3s var(--wcb-contact-ease),
		box-shadow 0.3s var(--wcb-contact-ease),
		background-color 0.2s ease;

	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
	user-select: none;
}

.wcb-contact-button-icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
}

.wcb-contact-button-icon svg {
	display: block;
}

.wcb-contact-button-text {
	white-space: nowrap;
}

/*
 * Etichetta breve: presente nel markup ma nascosta finché lo schermo è
 * abbastanza largo da mostrare quella intera. Alternarle via CSS e non via
 * JavaScript evita che al primo caricamento si veda per un istante quella
 * sbagliata.
 */
.wcb-contact-button-short {
	display: none;
	white-space: nowrap;
}

/* --- Stati --- */

@media (hover: hover) and (pointer: fine) {
	.wcb-contact-button:hover {
		transform: translateY(-3px);
		box-shadow:
			0 2px 6px rgba(0, 0, 0, 0.2),
			0 18px 36px -8px rgba(0, 0, 0, 0.42);
	}
}

.wcb-contact-button:active {
	transform: translateY(-1px) scale(0.98);
}

/*
 * Anello di focus visibile solo a chi naviga da tastiera. ":focus-visible"
 * e non ":focus": col mouse l'anello comparirebbe ad ogni clic senza servire
 * a nessuno.
 */
.wcb-contact-button:focus-visible {
	outline: 3px solid var(--wcb-contact-color);
	outline-offset: 3px;
}

/* =========================================================================
   RICHIAMO D'ATTENZIONE
   ------------------------------------------------------------------------
   Un alone che si espande tre volte e poi smette. Il numero finito è
   deliberato: un'animazione che pulsa all'infinito in un angolo dello
   schermo diventa fastidiosa entro pochi secondi e si finisce per
   ignorarla, ottenendo l'opposto di ciò che serve.
   ====================================================================== */

.wcb-contact-button::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background-color: var(--wcb-contact-color);
	pointer-events: none;
	z-index: -1;
	animation: wcb-contact-halo 2.4s var(--wcb-contact-ease) 1.2s 3;
}

.wcb-contact-button {
	position: relative;
	isolation: isolate;
}

@keyframes wcb-contact-halo {
	0% {
		opacity: 0.55;
		transform: scale(1);
	}
	70%,
	100% {
		opacity: 0;
		transform: scale(1.5);
	}
}

/* =========================================================================
   SCHERMI STRETTI
   ------------------------------------------------------------------------
   L'ETICHETTA INTERA RESTA A OGNI LARGHEZZA.

   Prima, sotto i 640px, restava il solo "990 €". Il risparmio di spazio non
   valeva il messaggio perso: un prezzo senza il suo oggetto non vende nulla,
   e la busta da sola dice "scrivici", non "il tuo sito a 990 €".

   Alla misura ci sta con margine. A 320px - la larghezza più stretta ancora
   in circolazione - restano 288px fra i due scarti, e il pulsante ne occupa
   circa 190: icona 22, spazio 5, testo ~135, imbottiture 27.

   L'etichetta breve resta supportata per chi la valorizza dal filtro
   'wcb_contact_options': in quel caso, e solo in quello, prende il posto di
   quella intera, che continua comunque a essere letta dagli screen reader.
   ====================================================================== */

@media (max-width: 639px) {

	:root {
		--wcb-contact-offset: 16px;
	}

	.wcb-contact-button {
		min-height: 52px;
		padding: 0 1.05em 0 0.95em;
		gap: 0.4em;
		font-size: 13.5px;
	}

	/*
	 * L'etichetta intera cede il posto SOLO se ne esiste una breve. Il
	 * selettore :has() non è supportato ovunque, ma qui il ripiego è
	 * benevolo: dove non funziona restano visibili entrambe le etichette
	 * su una configurazione che di serie non ha quella breve, quindi non
	 * cambia nulla.
	 */
	.wcb-contact-button:has(.wcb-contact-button-short) .wcb-contact-button-text {
		position: absolute !important;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.wcb-contact-button-short {
		display: block;
		font-weight: 700;
	}
}

/*
 * Telefoni molto stretti (fino a 360px): un ultimo scatto di compattezza,
 * per non arrivare a sfiorare i due bordi.
 */
@media (max-width: 360px) {

	:root {
		--wcb-contact-offset: 12px;
	}

	.wcb-contact-button {
		min-height: 48px;
		padding: 0 0.9em 0 0.8em;
		font-size: 13px;
	}

	.wcb-contact-button-icon svg {
		width: 19px;
		height: 19px;
	}
}

/*
 * Schermi bassi (telefono in orizzontale): il pulsante si rimpicciolisce,
 * altrimenti mangia una fetta importante di un'area già ridotta.
 */
@media (max-height: 450px) {

	:root {
		--wcb-contact-offset: 12px;
		--wcb-contact-size: 48px;
	}

	.wcb-contact-button {
		min-height: 46px;
		font-size: 13px;
	}
}

/* =========================================================================
   ESCA ANTISPAM
   Nascosta a chi guarda, presente per i robot che compilano ogni campo che
   trovano. Non si usa "display: none" né l'attributo hidden, che i robot
   più accorti riconoscono e saltano.
   ====================================================================== */

.wcb-contact-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* =========================================================================
   MODULO NELLA FINESTRA
   ====================================================================== */

/*
 * LA FINESTRA NON ESCE PIÙ DALLO SCHERMO
 * --------------------------------------
 * Il difetto precedente aveva due strati sovrapposti.
 *
 * 1. La regola di salvataggio stava dietro "@media (max-height: 700px)", e
 *    un iPhone 11 Pro riporta un viewport di 375x748: la condizione non si
 *    avverava mai proprio sui telefoni che doveva proteggere. Ora non c'è
 *    più alcuna soglia: il tetto vale sempre.
 *
 * 2. Il tetto era "90vh". Su Safari mobile l'unità vh si misura sul viewport
 *    MASSIMO, quello con la barra degli indirizzi ritratta: con la barra
 *    visibile, 90vh è ancora più alto dello spazio realmente disponibile.
 *    Serve "dvh", che segue il viewport dinamico. La dichiarazione in vh
 *    resta sopra come ripiego per i browser che non conoscono dvh: quelli
 *    scartano la seconda riga e tengono la prima.
 *
 * La finestra è una colonna: titolo e introduzione fermi in alto, i campi
 * che scorrono nel mezzo, esito e invio ancorati in basso.
 */
.wcb-contact-modal .uk-modal-dialog {
	display: flex;
	flex-direction: column;
	border-radius: 12px;

	/*
	 * Lo scarto sottratto è l'imbottitura verticale di .uk-modal, che UIkit
	 * cambia a 640px di larghezza: 15px sopra e sotto fino a lì, 50px oltre.
	 * Sono i valori letti in theme.css, non una stima - con lo scarto
	 * sbagliato la finestra sfora di quella differenza esatta, ed è quello
	 * che faceva su telefono in orizzontale prima di questa riga.
	 */
	max-height: calc(100vh - 30px);
	max-height: calc(100dvh - 30px);

	/*
	 * Rete di sicurezza. In condizioni normali questo scorrimento non entra
	 * mai in funzione, perché a scorrere è l'area dei campi. Se però
	 * qualcosa impedisse a quella di restringersi, meglio una finestra che
	 * scorre tutta insieme che un pulsante di invio irraggiungibile.
	 */
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Da 640px in su UIkit allarga l'imbottitura di .uk-modal a 50px per lato. */
@media (min-width: 640px) {
	.wcb-contact-modal .uk-modal-dialog {
		max-height: calc(100vh - 100px);
		max-height: calc(100dvh - 100px);
	}
}

/* Il titolo è l'unica parte che resta ferma: lì c'è il prezzo. */
.wcb-contact-modal .wcb-contact-title {
	flex: none;
}

.wcb-contact-form {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;

	/*
	 * IL DETTAGLIO CHE FA FUNZIONARE TUTTO IL RESTO.
	 *
	 * Un figlio flex non scende sotto la dimensione del proprio contenuto
	 * finché non glielo si concede: "min-height" vale "auto" di partenza, e
	 * auto in un contenitore flex significa "almeno quanto il contenuto".
	 * Senza questa riga il modulo si rifiuta di restringersi, l'area dei
	 * campi non ha motivo di scorrere, e la finestra torna a superare
	 * l'altezza dello schermo esattamente come prima.
	 */
	min-height: 0;
}

/* L'unica parte che scorre. */
.wcb-contact-fields {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;

	/*
	 * Impedisce che, arrivati in fondo all'elenco dei campi, la spinta
	 * prosegua sulla pagina dietro la finestra.
	 */
	overscroll-behavior: contain;

	/*
	 * Spazio per la barra di scorrimento, che altrimenti si appoggia sul
	 * bordo destro dei campi e taglia le ultime lettere del testo.
	 *
	 * L'imbottitura allontana il contenuto dalla barra, il margine negativo
	 * di pari valore riporta il riquadro dov'era: i campi restano allineati
	 * al titolo, che sta fuori da quest'area e non si sposta con essa.
	 *
	 * Su iOS la barra è una sovrapposizione che non occupa spazio, quindi
	 * lì questa coppia non cambia nulla di visibile.
	 */
	padding-right: 12px;
	margin-right: -12px;
}

/*
 * Esito e invio, sempre in vista.
 *
 * Il bordo è un grigio a bassa opacità e non un colore del tema: si vede
 * sia su fondo chiaro sia su fondo scuro, e non richiede di sapere in
 * anticipo come è stata configurata la finestra su questo sito.
 */
.wcb-contact-actions {
	flex: none;
	margin-top: 0.9rem;
	padding-top: 1rem;
	border-top: 1px solid var(--wcb-contact-rule);

	/* iPhone: l'indicatore home copre gli ultimi pixel dello schermo. */
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

/*
 * Titolo composto: un occhiello sopra e la riga principale sotto. Le classi
 * tipografiche (uk-text-meta, uk-h2) arrivano dal testo configurato: qui si
 * regolano solo spaziatura e ritmo.
 */
.wcb-contact-title {
	margin-bottom: 0.6rem;
}

.wcb-contact-title .uk-text-meta {
	margin-bottom: 0.35rem;
	letter-spacing: 0.12em;
	font-weight: 600;
}

.wcb-contact-title .uk-h2 {
	display: block;
	margin: 0;
	line-height: 1.15;
	font-size: clamp(1.4rem, 5vw, 1.9rem);
}

.wcb-contact-intro {
	margin-top: 0;
	margin-bottom: 1.6rem;
	font-size: 0.95rem;
	line-height: 1.55;
	opacity: 0.85;
}

.wcb-contact-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.6em;
	font-size: 0.9rem;
	line-height: 1.45;
	cursor: pointer;
}

.wcb-contact-consent .uk-checkbox {
	flex: none;
	margin-top: 0.15em;
}

.wcb-contact-feedback:empty {
	display: none;
}

.wcb-contact-feedback {
	margin-bottom: 1rem;
	padding: 0.8em 1em;
	border-radius: 8px;
	border-left: 3px solid currentColor;
	font-size: 0.92rem;
	line-height: 1.45;
}

.wcb-contact-feedback.is-ok {
	background-color: rgba(50, 214, 118, 0.12);
	color: #1c7a45;
}

.wcb-contact-feedback.is-error {
	background-color: rgba(240, 80, 80, 0.1);
	color: #b02a2a;
}

/*
 * A invio riuscito restano solo la conferma e il pulsante di chiusura.
 *
 * Il selettore prende l'intero contenitore dei campi: prima elencava i
 * ".uk-margin" figli diretti del modulo, che ora stanno un livello più in
 * basso. Se un giorno l'area dei campi cambiasse nome, questa regola smette
 * di funzionare in silenzio e la conferma comparirebbe sotto un modulo
 * ancora pieno.
 */
.wcb-contact-form.is-sent .wcb-contact-fields,
.wcb-contact-form.is-sent .wcb-contact-submit {
	display: none;
}

/* Senza campi sopra, il filetto di separazione non separa più nulla. */
.wcb-contact-form.is-sent .wcb-contact-actions {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.wcb-contact-submit {
	min-height: 48px;
}

.wcb-contact-submit.is-sending {
	opacity: 0.65;
	cursor: progress;
}

/* =========================================================================
   LA FINESTRA SU TELEFONO
   ------------------------------------------------------------------------
   Meno imbottitura e campi più ravvicinati: ogni pixel risparmiato qui è un
   pixel in meno da scorrere. I bersagli da toccare restano però grandi, che
   è la ragione per cui si stringono i margini e non le altezze.
   ====================================================================== */

@media (max-width: 639px) {

	.wcb-contact-modal .uk-modal-dialog {
		padding: 24px 20px;
		border-radius: 14px;
	}

	/* UIkit distanzia i blocchi di 20px: qui bastano 14. */
	.wcb-contact-fields > .uk-margin {
		margin-bottom: 14px;
	}

	.wcb-contact-fields > * + .uk-margin {
		margin-top: 14px;
	}

	.wcb-contact-intro {
		margin-bottom: 1.1rem;
		font-size: 0.9rem;
	}

	/*
	 * SEDICI PIXEL, NON UNO DI MENO.
	 *
	 * Sotto i 16px iOS ingrandisce da solo la pagina quando si tocca un
	 * campo, e da lì in poi la finestra sembra uscire dallo schermo anche
	 * quando è dimensionata correttamente. Non è una preferenza estetica: è
	 * la soglia esatta oltre la quale Safari smette di intervenire.
	 */
	.wcb-contact-modal .uk-input,
	.wcb-contact-modal .uk-textarea,
	.wcb-contact-modal .uk-select {
		font-size: 16px;
	}

	/* Un messaggio di cinque righe è alto quanto due campi. */
	.wcb-contact-modal .uk-textarea {
		min-height: 92px;
	}

	.wcb-contact-actions {
		margin-top: 0.7rem;
		padding-top: 0.85rem;
	}
}

/* =========================================================================
   SCHERMI MOLTO BASSI (telefono in orizzontale)
   ------------------------------------------------------------------------
   Sotto i 560px di altezza, tenere fermi titolo e introduzione lascerebbe
   ai campi una finestrella di poche decine di pixel: peggio del problema
   che risolve. Qui si torna a far scorrere la finestra tutta insieme.
   ====================================================================== */

@media (max-height: 560px) {

	.wcb-contact-modal .uk-modal-dialog {
		display: block;
	}

	.wcb-contact-fields {
		overflow: visible;
	}

	/* Il messaggio si accorcia: in orizzontale l'altezza è il bene scarso. */
	.wcb-contact-modal .uk-textarea {
		min-height: 0;
		height: 72px;
	}
}

/* =========================================================================
   MOVIMENTO RIDOTTO
   Il pulsante resta pienamente visibile e utilizzabile: si tolgono solo il
   richiamo pulsante e gli spostamenti.
   ====================================================================== */

@media (prefers-reduced-motion: reduce) {

	.wcb-contact-button {
		transition: none;
	}

	.wcb-contact-button::before {
		animation: none;
	}

	.wcb-contact-button:hover,
	.wcb-contact-button:active {
		transform: none;
	}
}