/*
	Theme Name: Hello Elementor Child
	Theme URI: https://elementor.com/hello-theme/
	Description: Tema figlio di Hello Elementor. Inserisci qui le tue personalizzazioni CSS.
	Author: Samarcanda
	Template: hello-elementor
	Version: 1.0.1
	Requires at least: 6.0
	Requires PHP: 7.4
	License: GNU General Public License v3 or later.
	License URI: https://www.gnu.org/licenses/gpl-3.0.html
	Text Domain: hello-elementor-child
	Tags: accessibility-ready, flexible-header, custom-colors, custom-menu, custom-logo, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* --- CSS personalizzato del tema figlio --- */

/* =========================================================
   Footer fisso: non deve mai coprire il contenuto
   ========================================================= */

/* Altezza reale della barra fissa, aggiornata via JS
   (assets/js/fixed-footer.js). 0 = nessun footer fisso. */
:root {
	--sam-footer-h: 0px;
}

/* Altezza reale dell'header, dalla stessa fonte. Serve a non far finire la
   freccia su della navigazione sotto il logo, soprattutto su mobile dove
   l'header e' piu' alto. */
:root {
	--sam-header-h: 0px;
}

/* Spazio riservato in fondo al documento: l'ultimo contenuto
   della pagina si ferma sopra la barra fissa invece di finirci sotto. */
body {
	padding-block-end: var(--sam-footer-h, 0px);
}

/* Gli ancoraggi interni (#sezione) non atterrano sotto la barra. */
html {
	scroll-padding-block-end: calc(var(--sam-footer-h, 0px) + 16px);
}

/* Su mobile la barra era in position:absolute con inset-block-end:0:
   si posizionava a un'altezza di viewport dall'inizio del documento,
   finendo in mezzo al testo. La rendiamo fissa come su desktop. */
@media (max-width: 767px) {
	footer.elementor-location-footer > .e-con {
		position: fixed;
		inset-block-end: 0;
	}
}

/* In stampa la barra torna nel flusso: niente sovrapposizioni sul foglio. */
@media print {
	body {
		padding-block-end: 0;
	}

	footer.elementor-location-footer > .e-con {
		position: static;
	}
}

/* =========================================================
   Navigazione tra le schermate

   Le frecce sono stampate da inc/navigation.php: esistono
   solo nelle direzioni realmente percorribili.

   Lo stile viene dai widget Elementor che sostituiscono
   (.prev-next e .bottom-navig): icona cerchio-freccia da
   50px ed etichetta Roboto 15px maiuscola, bianche e
   arancioni al passaggio.

   L'etichetta e' identica nelle quattro direzioni. Il
   button laterale originale la portava a 50px, ma stava
   dentro una colonna della pagina: qui le frecce sono
   fissate ai bordi dello schermo e a quella misura il
   testo finiva sopra il contenuto.
   ========================================================= */

.sam-nav__link {
	--sam-nav-color: #ffffff;
	--sam-nav-color-hover: #e8642a;
	--sam-nav-icon-size: 50px;

	position: fixed;
	z-index: 90;
	display: flex;
	align-items: center;
	color: var(--sam-nav-color);
	text-decoration: none;
	text-transform: uppercase;
	transition: color .2s ease;
}

.sam-nav__link:hover,
.sam-nav__link:focus-visible {
	color: var(--sam-nav-color-hover);
}

.sam-nav__icon {
	width: var(--sam-nav-icon-size);
	height: var(--sam-nav-icon-size);
	flex: none;
}

.sam-nav__label {
	font-family: "Roboto", sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

/* La freccia base punta a destra: le altre la ruotano. */
.sam-nav__link--left .sam-nav__icon { rotate: 180deg; }
.sam-nav__link--up .sam-nav__icon { rotate: -90deg; }
.sam-nav__link--down .sam-nav__icon { rotate: 90deg; }

/* --- Laterali: erano il button .prev-next --- */

.sam-nav__link--left,
.sam-nav__link--right {
	top: 50%;
	translate: 0 -50%;
	gap: 10px;
}

/* I titoli lunghi vanno a capo invece di allungarsi verso il centro. */
.sam-nav__link--left .sam-nav__label,
.sam-nav__link--right .sam-nav__label {
	max-width: 200px;
}

/* L'icona sta sempre verso il bordo dello schermo, l'etichetta verso il centro. */
.sam-nav__link--left { flex-direction: row; inset-inline-start: clamp(12px, 2.5vw, 40px); }
.sam-nav__link--right { flex-direction: row-reverse; inset-inline-end: clamp(12px, 2.5vw, 40px); }

.sam-nav__link--left .sam-nav__label { text-align: start; }
.sam-nav__link--right .sam-nav__label { text-align: end; }

/* --- Verticali: erano l'icon-box .bottom-navig --- */

.sam-nav__link--up,
.sam-nav__link--down {
	left: 50%;
	translate: -50% 0;
	gap: 0;
	text-align: center;
}

/* La freccia su resta sotto l'header, come la giu' resta sopra il footer. */
.sam-nav__link--up {
	flex-direction: column;
	top: calc(var(--sam-header-h, 0px) + clamp(12px, 2.5vh, 32px));
}

/* La freccia giu' resta sopra la barra fissa, qualunque altezza abbia. */
.sam-nav__link--down {
	flex-direction: column-reverse;
	bottom: calc(var(--sam-footer-h, 0px) + clamp(12px, 2.5vh, 32px));
}

/* Su schermo stretto restano le sole icone, ai 40px che i widget usavano su
   mobile: le etichette restano per gli screen reader ma escono dal flusso
   visivo, come faceva il CSS del Customizer con .prev-next e .bottom-navig. */
@media (max-width: 767px) {
	.sam-nav__link {
		--sam-nav-icon-size: 40px;
	}

	/* La freccia giu' sta piu' in alto che su desktop: la schermata di
	   Elementor e' alta 95vh con l'ultima riga sul fondo (30px di padding
	   piu' una riga di testo), e su un telefono, a pagina scorsa fino in
	   fondo, quella riga arriva a 45px sopra il footer. Partiva da 60px,
	   sopra quella riga, ed e' stata abbassata di 50px. */
	.sam-nav__link--down {
		bottom: calc(var(--sam-footer-h, 0px) + 10px);
	}

	.sam-nav__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

@media print {
	.sam-nav {
		display: none;
	}
}
/* =========================================================
   Transizione animata tra le schermate
   La schermata nuova entra dal lato della freccia premuta.
   Il verso lo scrive assets/js/nav-transitions.js in
   data-sam-dir su <html>. Senza verso noto (tasto indietro)
   resta la dissolvenza.
   ========================================================= */

@view-transition {
	navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
	/* Il default del browser fonde i due fotogrammi: qui devono scorrere
	   uno sopra l'altro, quindi niente blend. */
	mix-blend-mode: normal;
	animation-duration: .45s;
	animation-timing-function: cubic-bezier(.4, 0, .2, 1);
	animation-fill-mode: both;
}

::view-transition-old(root) { animation-name: sam-fade-out; }
::view-transition-new(root) { animation-name: sam-fade-in; }

:root[data-sam-dir="right"]::view-transition-old(root) { animation-name: sam-exit-left; }
:root[data-sam-dir="right"]::view-transition-new(root) { animation-name: sam-enter-right; }

:root[data-sam-dir="left"]::view-transition-old(root) { animation-name: sam-exit-right; }
:root[data-sam-dir="left"]::view-transition-new(root) { animation-name: sam-enter-left; }

:root[data-sam-dir="down"]::view-transition-old(root) { animation-name: sam-exit-up; }
:root[data-sam-dir="down"]::view-transition-new(root) { animation-name: sam-enter-down; }

:root[data-sam-dir="up"]::view-transition-old(root) { animation-name: sam-exit-down; }
:root[data-sam-dir="up"]::view-transition-new(root) { animation-name: sam-enter-up; }

/* Coda della corsa laterale: l'ultimo pannello mostra gia' la schermata di
   arrivo, quindi il passaggio al documento vero e' uno scambio secco fra due
   immagini identiche. Animarlo aggiungerebbe un movimento di troppo proprio
   dove il viaggio si e' appena posato. */
:root[data-sam-dir="hold"]::view-transition-old(root),
:root[data-sam-dir="hold"]::view-transition-new(root) {
	animation: none;
}

@keyframes sam-fade-out { to { opacity: 0; } }
@keyframes sam-fade-in { from { opacity: 0; } }

@keyframes sam-exit-left { to { translate: -100% 0; } }
@keyframes sam-enter-right { from { translate: 100% 0; } }

@keyframes sam-exit-right { to { translate: 100% 0; } }
@keyframes sam-enter-left { from { translate: -100% 0; } }

@keyframes sam-exit-up { to { translate: 0 -100%; } }
@keyframes sam-enter-down { from { translate: 0 100%; } }

@keyframes sam-exit-down { to { translate: 0 100%; } }
@keyframes sam-enter-up { from { translate: 0 -100%; } }

@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}

/* -----------------------------------------------------------------
   Frecce vecchie disegnate a mano in Elementor (.prev-next e
   .bottom-navig): erano placeholder senza link, clonati da una pagina
   all'altra, e ora le sostituisce l'overlay del tema.
   Quando le avrai cancellate dall'editor di Elementor pagina per
   pagina, questa regola si puo' togliere.
   ----------------------------------------------------------------- */
.prev-next,
.bottom-navig {
	display: none;
}

/* =========================================================
   Corsa attraverso le schermate intermedie

   Dalla schermata iniziale a un pilastro lontano, le pagine
   in mezzo vengono scaricate al volo e affiancate qui
   sopra. La striscia le fa scorrere e poi cede il posto
   alla navigazione vera verso il pilastro cliccato.
   Il codice sta in assets/js/nav-transitions.js.
   ========================================================= */

.sam-run {
	position: fixed;
	inset: 0;
	z-index: 50;
	overflow: hidden;
	/* Contenuto di passaggio: non deve rispondere ai click. */
	pointer-events: none;
}

.sam-run__track {
	display: flex;
	width: max-content;
	height: 100%;
	will-change: transform;
}

.sam-run__panel {
	flex: none;
	width: 100vw;
	height: 100%;
	overflow: hidden;

	/* Ogni pannello e' una schermata intera: isolarne layout e disegno tiene il
	   costo di ogni fotogramma dentro il pannello invece di spargerlo su tutta
	   la pagina. */
	contain: layout paint;
}

/* Le due barre condivise da tutte le schermate non hanno motivo di sparire
   durante la corsa: sollevandole sopra la striscia restano ferme mentre il
   contenuto scorre. position: relative senza scostamenti non muove nulla. */
.sam-run-active header.elementor-location-header,
.sam-run-active footer.elementor-location-footer {
	position: relative;
	z-index: 60;
}

/* =========================================================
   Schermata iniziale: le cinque porte si aprono a ventaglio

   Le porte sono i button .cw della home. All'arrivo stanno
   raccolte dietro il logo, piccole e trasparenti, e dopo
   mezzo secondo escono una alla volta verso il proprio
   posto: e' l'ingresso del mock FATT-Landing.dc.html.
   Solo CSS: l'animazione sta sul link <a.elementor-button>,
   perche' il wrapper del widget e' quello che Elementor
   sposta di 10px all'hover (.e-transform) e i due transform
   non devono contendersi lo stesso elemento.
   ========================================================= */

.elementor-widget-button.cw {
	/* Ritardo prima che parta la prima porta e scarto fra una porta e la
	   successiva: i valori del mock. */
	--sam-door-t0: 500ms;
	--sam-door-step: 45ms;
	/* Da dove arrivano: a sinistra, dentro l'ingombro del logo. */
	--sam-door-dx: -340px;
	/* Convergono verticalmente sulla porta centrale: ogni porta parte
	   dalla riga della centrale, cioe' spostata di (2 - i) righe. Una riga
	   e' l'altezza del button piu' i 20px di margine che Elementor mette
	   fra un widget e l'altro. */
	--sam-door-gap: 20px;
	--sam-door-k: calc(2 - var(--sam-door-i, 0));
}

.elementor-widget-button.cw:nth-child(1) { --sam-door-i: 0; }
.elementor-widget-button.cw:nth-child(2) { --sam-door-i: 1; }
.elementor-widget-button.cw:nth-child(3) { --sam-door-i: 2; }
.elementor-widget-button.cw:nth-child(4) { --sam-door-i: 3; }
.elementor-widget-button.cw:nth-child(5) { --sam-door-i: 4; }

/* Due animazioni con durate diverse, come le due transition del mock: il
   movimento e' piu' lungo della dissolvenza, cosi' la porta e' gia' opaca
   mentre finisce di posarsi. backwards tiene lo stato iniziale durante il
   ritardo e poi lascia il link nel suo stato normale. Nell'editor di
   Elementor l'animazione non serve e ripartirebbe a ogni modifica. */
body:not(.elementor-editor-active) .elementor-widget-button.cw .elementor-button {
	animation:
		sam-door-move 420ms cubic-bezier(.2, .8, .2, 1) backwards,
		sam-door-fade 300ms ease backwards;
	animation-delay: calc(var(--sam-door-t0) + var(--sam-door-i, 0) * var(--sam-door-step));
}

@keyframes sam-door-move {
	from {
		transform:
			translate(var(--sam-door-dx), calc(var(--sam-door-k) * (100% + var(--sam-door-gap))))
			scale(.4);
	}
}

@keyframes sam-door-fade {
	from { opacity: 0; }
}

/* Su schermo stretto il logo sta sopra le porte, non a sinistra: partono
   da meno lontano. */
@media (max-width: 767px) {
	.elementor-widget-button.cw {
		--sam-door-dx: -80px;
	}
}

/* Il logo accanto alle porte fluttua piano, come nel mock: sale di 10px e
   torna giu' in 4 secondi, sempre. Il widget immagine non ha una classe,
   quindi si riconosce dalla posizione: e' l'immagine subito prima del
   blocco che contiene le porte. */
.elementor-widget-image:has(+ .e-con > .cw) {
	animation: sam-float 4s ease-in-out infinite;
}

@keyframes sam-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

@media (prefers-reduced-motion: reduce) {
	.elementor-widget-button.cw .elementor-button,
	.elementor-widget-image:has(+ .e-con > .cw) {
		animation: none;
	}
}

/* =========================================================
   Sfondo video dei pilastri (inc/background.php)

   Un <video> fisso a tutto schermo dietro il contenuto, con
   sopra la velatura scura del mock: una tinta uniforme piu'
   un alone al centro, dove sta il testo. z-index negativo
   in un body senza stacking context: il video finisce sotto
   tutto il contenuto ma sopra il colore di sfondo che
   Elementor mette sul body, che resta a coprire i tempi di
   caricamento.
   ========================================================= */

.sam-bg {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

.sam-bg__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sam-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 60% 55% at 50% 50%, rgba(3, 32, 47, .55) 0%, rgba(3, 32, 47, 0) 100%),
		rgba(3, 32, 47, .55);
}

/* Senza movimento resta la velatura sul colore del body. */
@media (prefers-reduced-motion: reduce) {
	.sam-bg__video {
		display: none;
	}
}

@media print {
	.sam-bg {
		display: none;
	}
}

/* =========================================================
   Popup del menu (template 612): entra scendendo dall'alto
   ========================================================= */

/* Il pannello e' ancorato in alto, quindi parte spostato della propria
   altezza e scende a posto. L'animazione riparte a ogni apertura perche'
   Elementor reinserisce il contenuto e il dialog passa da display: none.
   L'id nel selettore serve a vincere sulla classe .animated di Elementor,
   che imposta una durata di 1.25s. */
@keyframes sam-menu-drop {
	from {
		transform: translateY(-100%);
	}
	to {
		transform: translateY(0);
	}
}

#elementor-popup-modal-612 .dialog-widget-content {
	animation: sam-menu-drop 240ms ease-out both;
}

/* In chiusura fa la strada inversa. La classe la mette Elementor all'inizio
   della chiusura (e' il valore di exit_animation iniettato da
   assets/js/menu-popup.js) e la toglie, insieme al contenuto, dopo 240ms.
   Il nome di keyframe diverso serve a far ripartire l'animazione: cambiare
   solo la direzione a un'animazione gia' finita non la riavvia. */
@keyframes sam-menu-lift {
	from {
		transform: translateY(0);
	}
	to {
		transform: translateY(-100%);
	}
}

#elementor-popup-modal-612 .dialog-widget-content.sam-menu-lift {
	animation: sam-menu-lift 240ms ease-in both;
}

@media (prefers-reduced-motion: reduce) {
	#elementor-popup-modal-612 .dialog-widget-content,
	#elementor-popup-modal-612 .dialog-widget-content.sam-menu-lift {
		animation: none;
	}
}

/* Su mobile il pannello prende tutta l'altezza, come farebbe l'opzione
   "Fit To Screen" del popup, che pero' non e' responsive e varrebbe anche
   su desktop. dvh segue la barra del browser quando si ritrae; il
   contenuto piu' lungo scorre dentro il pannello (overflow di Elementor). */
@media (max-width: 767px) {
	#elementor-popup-modal-612 .dialog-widget-content > .dialog-message {
		height: 100vh;
		height: 100dvh;
	}
}

/* =========================================================
   La terza dimensione: le pagine di dettaglio

   Un dettaglio si apre sopra la schermata che lo linka
   senza cambiare documento (assets/js/detail.js): la
   schermata, con le sue barre e le frecce, viene messa
   da parte e il livello prende il suo posto nel flusso,
   cosi' scorre con la finestra come una pagina qualsiasi.
   Caricato direttamente, il dettaglio e' la pagina vera e
   qui ha solo il pulsante di chiusura (inc/detail.php).
   ========================================================= */

.sam-detail {
	position: relative;
	min-height: 100vh;
	background-color: var(--sam-detail-bg, transparent);
}

/* Lo sfondo del dettaglio arriva dalle sue impostazioni Elementor, che sono
   scritte sul body della pagina vera: qui lo porta la variabile, anche sulla
   tela oltre il body (l'overscroll). */
html[data-sam-detail-open] {
	background-color: var(--sam-detail-bg);
}

/* Le barre sono via: niente spazio da riservare in fondo. */
html[data-sam-detail-open] body {
	padding-block-end: 0;
}

/* --- Pulsante di chiusura: l'aspetto delle frecce --- */

.sam-detail__close {
	--sam-nav-color: #ffffff;
	--sam-nav-color-hover: #e8642a;
	--sam-nav-icon-size: 50px;

	position: fixed;
	z-index: 90;
	top: clamp(12px, 2.5vh, 32px);
	inset-inline-end: clamp(12px, 2.5vw, 40px);
	display: block;
	width: var(--sam-nav-icon-size);
	height: var(--sam-nav-icon-size);
	padding: 0;
	border: 0;
	background: none;
	color: var(--sam-nav-color);
	cursor: pointer;
	transition: color .2s ease;
}

/* Nel livello aperto da detail.js la X e' un <button>, e il tema genitore
   colora ogni button:hover con uno sfondo fucsia (#c36) e testo bianco:
   qui cambia solo l'icona. */
/* Su una pagina dal fondo chiaro (la griglia dei clienti) il bianco
   sparirebbe: la classe la mettono inc/detail.php e detail.js leggendo lo
   sfondo della pagina. */
.sam-detail__close--on-light {
	--sam-nav-color: #064469;
}

.sam-detail__close:hover,
.sam-detail__close:focus,
.sam-detail__close:focus-visible {
	background: none;
	color: var(--sam-nav-color-hover);
}

.sam-detail__icon {
	display: block;
	width: 100%;
	height: 100%;
}

@media (max-width: 767px) {
	.sam-detail__close {
		--sam-nav-icon-size: 40px;
	}
}

@media print {
	.sam-detail__close {
		display: none;
	}
}

/* --- Apertura e chiusura: una transizione nello stesso documento ---

   Lo script mette data-sam-detail su <html> per la durata della
   transizione. In apertura la schermata (il fotogramma vecchio) scala verso
   l'osservatore e sfuma, con il centro dello zoom sul bottone premuto
   (--sam-detail-origin, in coordinate della finestra): e' questo che da'
   la sensazione di entrare in quel punto. Perche' si senta, lo zoom deve
   essere grande (fino a 1.6) e accelerare, e la schermata deve restare
   opaca finche' il movimento non e' partito: sfumandola da subito, e
   coprendola col dettaglio da subito, si vedeva solo una dissolvenza.
   Il dettaglio (il fotogramma nuovo) arriva quando la schermata e' gia'
   in corsa, dallo stesso punto, da scale .94 con dissolvenza. In chiusura
   si fa la strada inversa, con lo stesso centro. */

/* L'apertura e' piu' lenta del passaggio fra schermate (.45s): lo zoom
   verso il dettaglio deve leggersi come un avvicinamento, non uno scatto. */
:root[data-sam-detail="open"]::view-transition-old(root),
:root[data-sam-detail="open"]::view-transition-new(root) {
	animation-duration: .9s;
}

:root[data-sam-detail="open"]::view-transition-old(root) {
	animation-name: sam-detail-screen-out;
	/* Parte piano e accelera: la corsa verso l'osservatore. */
	animation-timing-function: cubic-bezier(.55, 0, .85, .3);
	transform-origin: var(--sam-detail-origin, 50% 50%);
}

:root[data-sam-detail="open"]::view-transition-new(root) {
	animation-name: sam-detail-in;
	transform-origin: var(--sam-detail-origin, 50% 50%);
}

:root[data-sam-detail="close"]::view-transition-old(root) {
	animation-name: sam-detail-out;
	transform-origin: var(--sam-detail-origin, 50% 50%);
}

:root[data-sam-detail="close"]::view-transition-new(root) {
	animation-name: sam-detail-screen-in;
	transform-origin: var(--sam-detail-origin, 50% 50%);
}

/* La schermata resta intera per il primo tratto della corsa e svanisce
   nel resto, quando e' gia' grande. */
@keyframes sam-detail-screen-out {
	35% { opacity: 1; }
	to { scale: 1.6; opacity: 0; }
}

@keyframes sam-detail-screen-in {
	from { scale: 1.6; opacity: 0; }
	65% { opacity: 1; }
}

/* Il dettaglio compare dallo stesso punto, quando la schermata e' gia'
   in movimento: prima non c'e', poi cresce fino a pieno schermo. */
@keyframes sam-detail-in {
	from { scale: .94; opacity: 0; }
	30% { scale: .94; opacity: 0; }
	to { scale: 1; opacity: 1; }
}

@keyframes sam-detail-out {
	from { scale: 1; opacity: 1; }
	70% { scale: .94; opacity: 0; }
	to { scale: .94; opacity: 0; }
}

/* =========================================================
   Sezione Clienti: la griglia (716) e le pagine cliente

   La struttura e' in Elementor (Clienti.dc.html); qui solo
   quello che i widget non sanno fare da soli.
   ========================================================= */

/* Card cliccabile: il container e' un link, e il sollevamento e l'ombra
   sono nelle sue impostazioni. La card statica non reagisce e non entra
   nel tab. */
.sam-client--linked {
	transition: transform 220ms cubic-bezier(.2, .8, .2, 1), box-shadow 220ms ease, border-color 160ms ease;
}

.sam-client--static {
	opacity: .7;
}

/* Anni di collaborazione: un text-editor con uno <span> per anno. */
.sam-chips p {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	font-variant-numeric: tabular-nums;
}

.sam-chips span {
	padding: 6px 10px;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 9999px;
}

/* Frecce fra clienti, fisse a meta' altezza: solo icona e testo, niente
   bottone. Le etichette spariscono su schermo stretto, come nelle frecce
   della griglia. */
.sam-client-arrow .elementor-button {
	background: none;
	padding: 0;
}

/* Il wrapper del bottone e' un flex senza allineamento verticale: con
   l'icona da 36px il nome da 13px restava in alto. */
.sam-client-arrow .elementor-button-content-wrapper {
	align-items: center;
}

.sam-client-arrow .elementor-button-icon {
	display: flex;
}

.sam-client-arrow .elementor-button-icon svg {
	display: block;
	width: 36px;
	height: 36px;
}

@media (max-width: 767px) {
	.sam-client-arrow .elementor-button-text {
		display: none;
	}

	.sam-client-index {
		display: none;
	}

	/* Su schermo stretto i 24px di scostamento portavano le frecce sopra il
	   testo: le attacca ai bordi della finestra. L'offset e' nelle
	   impostazioni del widget, quindi nel CSS per-pagina di Elementor, con un
	   selettore da quattro classi (body:not(.rtl) .elementor-<id>
	   .elementor-element.elementor-element-<uid>) che carica dopo il tema:
	   da qui si riscrive solo con !important. */
	.sam-client-arrow--left {
		left: 0 !important;
		right: auto !important;
	}

	.sam-client-arrow--right {
		right: 0 !important;
		left: auto !important;
	}
}