/* fm-bunny-background */
.fm-bunny-container-background {
	position: relative;
	overflow: hidden;
}

/*
 * Il poster, dipinto appena il CSS e' letto.
 *
 * Sta sullo sfondo del contenitore stesso, non su uno pseudo-elemento: il
 * ::before su quei contenitori e' gia' occupato da Elementor per la sfumatura
 * dell'hero (su Soli un gradiente scuro), e il ::after starebbe SOPRA quella
 * sfumatura, cioe' nel piano sbagliato. Lo sfondo proprio del contenitore e'
 * l'unico piano che sta sotto sia alla sfumatura sia al video.
 *
 * La classe e' ripetuta di proposito: cosi' la regola pesa quanto due classi e
 * non si fa scavalcare dal CSS che Elementor genera per il singolo elemento.
 *
 * I punti di rottura sono gli stessi di getDevice() nel JS - 767 e 1024 -
 * altrimenti al confine il poster mostrerebbe un video e ne partirebbe un
 * altro, che su Soli sono due filmati diversi.
 */
.fm-bunny-container-background.fm-bunny-container-background {
	background-image: var(--fm-bunny-poster, none);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

@media (max-width: 1024px) {
	.fm-bunny-container-background.fm-bunny-container-background {
		background-image: var(--fm-bunny-poster-tablet, none);
	}
}

@media (max-width: 767px) {
	.fm-bunny-container-background.fm-bunny-container-background {
		background-image: var(--fm-bunny-poster-mobile, none);
	}
}

.fm-bunny-container-background > .fm-bunny-background-layer {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	background-position: center;
	background-size: cover;
	pointer-events: none;
}

.fm-bunny-background-layer iframe,
.fm-bunny-background-layer video {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
	max-width: none !important;
	max-height: none !important;
	border: 0;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.fm-bunny-background-layer video {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
	object-fit: cover;
	object-position: center;
	transform: none;
}

.fm-bunny-container-background > .elementor-background-video-container {
	display: none !important;
}

.fm-bunny-container-background > .elementor-background-overlay {
	z-index: 1;
}

.fm-bunny-container-background > .e-con-inner,
.fm-bunny-container-background > .elementor-element:not(.fm-bunny-background-layer):not(.elementor-background-overlay):not(.elementor-background-video-container) {
	position: relative;
	z-index: 2;
}

/* fm-before-after-slider */
.fm-ba-slider {
    width: 100%;
}

.fm-ba-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.fm-ba-wrapper,
.fm-ba-wrapper img {
    display: block;
}

.fm-ba-wrapper img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.fm-ba-image {
    position: absolute;
    top: 0;
    left: 0;
}

.fm-ba-image-after {
    position: relative;
    z-index: 1;
}

.fm-ba-image-before {
    z-index: 2;
    clip-path: inset(0 50% 0 0);
}

/* Barra */
.fm-ba-handle {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 100%;
    background-color: #ffffff;
    cursor: ew-resize;
}

.fm-ba-slider.fm-ba-orientation-vertical .fm-ba-handle {
    width: 100%;
    height: 3px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    cursor: ns-resize;
}

/* Icona sopra la barra, centrata */
.fm-ba-icon {
    position: absolute;
    z-index: 4;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.6); /* cerchio */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff; /* colore frecce o icona */
    transform: translate(-50%, -50%);
    overflow: hidden;
}

/* Default: frecce CSS */
.fm-ba-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

.fm-ba-arrow-left {
    border-right: 8px solid currentColor;
    left: 10px;
}

.fm-ba-arrow-right {
    border-left: 8px solid currentColor;
    right: 10px;
}

/* Verticale: frecce su/giù */
.fm-ba-slider.fm-ba-orientation-vertical .fm-ba-arrow-left,
.fm-ba-slider.fm-ba-orientation-vertical .fm-ba-arrow-right {
    border: none;
}

.fm-ba-slider.fm-ba-orientation-vertical .fm-ba-arrow-left {
    border-bottom: 8px solid currentColor;
    top: 10px;
}

.fm-ba-slider.fm-ba-orientation-vertical .fm-ba-arrow-right {
    border-top: 8px solid currentColor;
    bottom: 10px;
}

/* Quando c'è icona custom, nascondi le frecce */
.fm-ba-slider.fm-ba-has-custom-icon .fm-ba-arrow {
    display: none;
}

/* Modalità hardcore: icona custom come mask, colore preso da `color` */
.fm-ba-slider.fm-ba-has-custom-icon .fm-ba-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: currentColor;
    -webkit-mask-image: var(--fm-icon-mask);
    mask-image: var(--fm-icon-mask);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 60% 60%;
    mask-size: 60% 60%;
}

/* fmct-base */
/*
 * Il fondo comune dei componenti FM.
 *
 * DA DOVE VIENE IL MAGENTA. Hello Elementor, in assets/css/reset.css, veste
 * ogni bottone nudo del sito:
 *
 *   [type="button"], [type="submit"], button {
 *     border: 1px solid #c36; color: #c36;
 *   }
 *   [type="button"]:hover, [type="button"]:focus,
 *   button:hover, button:focus { background-color: #c36; color: #fff; }
 *
 * I widget di Elementor non lo prendono perche' dichiarano da soli il proprio
 * aspetto. I nostri lo prendevano tutti, perche' lasciano il <button> spoglio:
 * e' quel #cc3366 che ricompariva a ogni componente nuovo, su ogni sito col
 * tema Hello. Non e' mai stato un colore scelto da qualcuno.
 *
 * COME SI SPEGNE, DALLA 3.6.60. Non con la specificita'. La 3.6.58 usava
 * button[class^="fm-"] a (0,1,1) per battere il :hover di Hello, e cosi'
 * batteva anche le regole a una classe sola dei nostri moduli - trentuno
 * bottoni (WhatsApp, trigger, wishlist, cassetto, frecce, paginazione,
 * campioni delle varianti) persi sfondo, bordo e colore su ogni sito, a ogni
 * aggiornamento. Il reset di un tema deve stare in fondo alla cascata, e CSS
 * ha lo strumento apposta: il foglio reset.css di Hello viene stampato dal
 * framework come @import ... layer(fm-theme-reset) (vedi
 * FM_Complete_Toolkit::layer_hello_reset). Le regole in un layer perdono
 * contro QUALSIASI regola fuori dal layer, a prescindere dalla specificita'
 * e dall'ordine: il magenta non puo' piu' raggiungere un bottone che un
 * modulo ha vestito, nemmeno al passaggio del mouse.
 *
 * Questo file resta per i bottoni davvero nudi, e per quelli soltanto: le
 * sue regole sono a specificita' ZERO (:where), quindi vincono sul reset nel
 * layer e perdono contro ogni regola di modulo, anche a una classe sola,
 * anche a riposo contro il loro :hover. Un modulo che dichiara qualcosa
 * vince sempre; non deve piu' aggiungere classi per farsi rispettare.
 *
 * SI TOCCANO SOLO I BOTTONI CHE PORTANO UNA CLASSE fm-. Non i bottoni dentro
 * un contenitore FM: dentro una card di prodotto ci sono i bottoni di
 * WooCommerce e di Elementor, che hanno il proprio aspetto e non vanno
 * spogliati.
 *
 * Il colore al passaggio e' quello della pelle, che a sua volta arriva dai
 * Colori globali del Kit.
 */

:where(button[class^="fm-"],
button[class*=" fm-"],
[type="button"][class^="fm-"],
[type="button"][class*=" fm-"]) {
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
}

:where(button[class^="fm-"],
button[class*=" fm-"],
[type="button"][class^="fm-"],
[type="button"][class*=" fm-"]):where(:hover, :focus) {
	background: none;
	color: var( --fm-theme-action, var( --e-global-color-primary, currentColor ) );
}