/* ====================================================================
   Polo80 - Pagina Contatti.
   Il pulsante di invio del form eredita già lo stile "sticker" (ombra,
   pressione al click) dalla regola sitewide sui bottoni definita nel CSS
   del Kit Elementor: qui serve solo lo stile dei campi di testo, che di
   default non hanno alcun bordo.
   ==================================================================== */

.elementor-field-group .elementor-field {
	border: var(--pop-border-width) solid var(--pop-border-color);
	background-color: var(--e-global-color-panna-crema);
	border-radius: 0;
}

.elementor-field-group .elementor-field:focus {
	outline: 2px solid var(--e-global-color-accent);
	outline-offset: -2px;
}

.elementor-field-group .elementor-field-label {
	font-weight: 600;
	/* Regola di contrasto del sito: verde scuro su crema/arancione. */
	color: var(--e-global-color-secondary);
}

/* Il campo reCAPTCHA v3 è invisibile per design (nessuna casella da
   spuntare, solo il badge "protetto da reCAPTCHA" che Google mostra da
   solo in basso a destra dello schermo): il suo contenitore nel form resta
   vuoto e senza contenuto, ma la regola generica qui sopra gli applicava
   comunque un bordo, visibile come un piccolo segno nero appena sopra il
   pulsante di invio. */
.elementor-field-type-recaptcha_v3 .elementor-field {
	border: none;
	background: none;
}

/* Campo non valido al momento dell'invio (Elementor Pro aggiunge da solo la
   classe "elementor-error" al gruppo del campo, via AJAX, senza ricaricare
   la pagina: i campi già corretti restano compilati): la regola qui sopra
   imposta sempre lo stesso bordo scuro, che altrimenti nasconderebbe questo
   stato. Il messaggio d'errore ("elementor-message-danger", generato da
   Elementor stesso) eredita lo stesso rosso. */
.elementor-field-group.elementor-error .elementor-field {
	border-color: #c0392b;
}
.elementor-field-group.elementor-error .elementor-field-label {
	color: #c0392b;
}
.elementor-message-danger {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	color: #c0392b;
}
/* Il campo "Acceptance" (checkbox privacy) non ha un bordo proprio da
   colorare: un contorno rosso attorno al gruppo lo evidenzia comunque. */
.elementor-field-type-acceptance.elementor-error .elementor-field-subgroup {
	outline: 2px solid #c0392b;
	outline-offset: 6px;
}

/* ---- Riga "Vieni a trovarci" [ct_contatti_rapidi] (vedi
   inc/contatti-style.php): etichetta in maiuscolo sopra, valore normale
   sotto, icona a sinistra — stessa idea del sito di riferimento mostrato
   dall'utente, adattata ai colori di Polo80. ---- */
.pop-contatti-rapidi {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.pop-contatti-rapidi__riga {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.pop-contatti-rapidi__riga i,
.pop-contatti-rapidi__riga svg {
	flex-shrink: 0;
	height: 22px;
	width: auto;
	margin-top: 4px;
	font-size: 22px;
	text-align: center;
	color: var(--e-global-color-secondary);
	fill: currentColor;
}

.pop-contatti-rapidi__etichetta {
	display: block;
	margin-bottom: 2px;
	font-family: var(--e-global-typography-primary-font-family), sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: 18px;
	/* Regola di contrasto del sito: verde scuro su crema/arancione. */
	color: var(--e-global-color-secondary);
}

.pop-contatti-rapidi__valore {
	display: block;
	font-size: 16px;
	color: var(--e-global-color-secondary);
	text-decoration: none;
}

a.pop-contatti-rapidi__valore:hover {
	text-decoration: underline;
}

/* ---- Pulsanti rapidi WhatsApp/Telefono [ct_contatti_icone_rapide] (vedi
   inc/contatti-style.php), al posto degli orari (già presenti nel footer,
   non serve ripeterli qui): uno sotto l'altro, ognuno con icona ed
   etichetta ("SCRIVICI"/"CHIAMACI"). WhatsApp sempre visibile, telefono
   solo da smartphone — vedi il commento sulla funzione PHP per il perché. ---- */
.pop-contatti-icone-rapide {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	margin-top: 8px;
}

/* Sfondo chiaro, bordo e icona nel colore — non più il badge pieno colorato
   di prima: è la presentazione della "Tavola 4" scelta in chat (sfondo
   chiaro, bordo colorato, icona colorata), non solo il disegno interno
   dell'icona. Niente ombra "sticker" (il resto del sito ce l'ha, ma qui
   avrebbe rotto l'aspetto pulito e leggero di quello stile). */
.pop-contatti-icona {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 52px;
	padding: 0 22px;
	font-size: 22px;
	font-weight: 700;
	background: var(--e-global-color-panna-crema);
	border: 1.5px solid currentColor;
	border-radius: 12px;
	text-decoration: none;
}

.pop-contatti-icona span {
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-size: 15px;
	letter-spacing: 0.03em;
}

/* "fill: none" esplicito (non basta l'attributo sull'<svg>, una regola CSS
   vince comunque su un attributo di presentazione): le icone Tabler sono a
   solo contorno, un "fill: currentColor" le avrebbe riempite di colore
   pieno invece di lasciarle a linea come nello stile scelto. */
.pop-contatti-icona svg {
	height: 22px;
	width: auto;
	flex-shrink: 0;
	fill: none;
	stroke: currentColor;
}

/* WhatsApp: colore nel verde ufficiale. */
.pop-contatti-icona--whatsapp {
	color: #25D366;
}

/* Telefono: colore dell'accento del sito, non essendo legato a un brand
   specifico — e solo da smartphone, dove chiamare è davvero un'azione
   possibile (da desktop "chiama" non avrebbe un'azione sensata da fare). */
.pop-contatti-icona--telefono {
	display: none;
	color: var(--e-global-color-secondary);
}

@media (max-width: 767px) {
	.pop-contatti-icona--telefono {
		display: inline-flex;
	}
}

/* ---- Mappa Google incorporata [ct_mappa_locale] (vedi
   inc/contatti-style.php), usata sia in Contatti che nel footer: stesso
   bordo/ombra delle altre card del sito. Larghezza sempre al 100% del
   contenitore (come il vecchio widget "Google Maps" di Elementor),
   altezza fissa in px.
   Niente "aspect-ratio": il CSS di Complianz ha ".cmplz-placeholder-parent
   { height: inherit; }" (vedi cookieblocker.css), pensato per ereditare
   un'altezza dichiarata esplicitamente in px sul contenitore — con
   "aspect-ratio" al posto di un'altezza vera quell'eredità non funziona e
   la mappa collassa a altezza zero (o mostra una larghezza minima
   qualunque). Un'altezza fissa in px qui sotto è quindi necessaria, non
   solo una scelta di stile.
   Niente "position: absolute" sull'iframe per lo stesso motivo: Complianz
   inserisce il suo contenitore (".cmplz-placeholder-parent") tra questo
   div e l'iframe, e un "position: absolute" prenderebbe QUEL contenitore
   come riferimento invece di questo div. Con "height: 100%" propagato
   esplicitamente a ogni livello la mappa riempie il contenitore
   indipendentemente dai div che Complianz aggiunge in mezzo. ---- */
.pop-mappa-embed {
	position: relative;
	width: 100%;
	height: 320px;
	overflow: hidden;
	border: var(--pop-border-width) solid var(--pop-border-color);
	box-shadow: 7px 7px 0 var(--pop-border-color);
}
.pop-mappa-embed > * {
	display: block;
	width: 100%;
	height: 100%;
}
.pop-mappa-embed iframe {
	width: 100%;
	height: 100%;
	border: 0;
}