/* =========================================================
   Plugin Widget Particolari — Pulsanti Elementor
   Versione 1.2.2
   Adattamento fluido automatico alla larghezza del contenitore.
   ========================================================= */

/* =========================================================
   CORREZIONE 1.2.1 — INVOLUCRO ESTERNO ELEMENTOR

   Sotto 768 px Elementor può estendere verticalmente l’involucro
   esterno dei widget personalizzati, lasciando il pulsante reale
   della misura corretta ma creando spazio vuoto sotto di esso.

   La normalizzazione riguarda soltanto i due widget del plugin e
   non modifica i pulsanti nativi Elementor né la grafica interna.
   ========================================================= */

.elementor .elementor-element.elementor-widget-pwp-button-gold-base,
.elementor .elementor-element.elementor-widget-pwp-button-gold-3d {
	height: auto !important;
	min-height: 0 !important;
}

.elementor .elementor-element.elementor-widget-pwp-button-gold-base > .elementor-widget-container,
.elementor .elementor-element.elementor-widget-pwp-button-gold-3d > .elementor-widget-container {
	height: auto !important;
	min-height: 0 !important;
}

.pwp-button-wrap {
	line-height: 1 !important;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/*
 * Fallback fluido basato sulla finestra.
 * Nei browser moderni viene sostituito più sotto dai valori cqi,
 * che reagiscono alla larghezza reale del contenitore Elementor.
 */
.elementor .elementor-element .pwp-button {
	--pwp-font-size: clamp(11px, calc(8.5px + .9vw), 15px);
	--pwp-min-height: clamp(34px, calc(25px + 2.7vw), 46px);
	--pwp-pad-y: clamp(6px, calc(4px + 1.1vw), 10px);
	--pwp-pad-x: clamp(12px, calc(6px + 2.75vw), 28px);
	--pwp-icon-size: clamp(11px, calc(8.5px + .9vw), 15px);

	position: relative;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important;
	max-width: 100% !important;
	min-width: 0 !important;
	min-height: var(--pwp-min-height) !important;
	padding: var(--pwp-pad-y) var(--pwp-pad-x) !important;
	border-radius: 999px !important;
	font-family: "Montserrat", Arial, sans-serif !important;
	font-size: var(--pwp-font-size) !important;
	font-weight: 600 !important;
	font-style: normal !important;
	line-height: 1.2 !important;
	letter-spacing: 0 !important;
	text-align: center !important;
	text-decoration: none !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	isolation: isolate;
	box-sizing: border-box !important;
	transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease, filter .18s ease !important;
}

/*
 * Adattamento al CONTENITORE, non soltanto alla finestra.
 * Un pulsante inserito in una colonna stretta si riduce anche su Desktop;
 * in una colonna larga mantiene la misura massima prevista.
 */
@supports (container-type: inline-size) {
	.pwp-button-wrap {
		container-type: inline-size;
		container-name: pwp-button-area;
	}

	.elementor .elementor-element .pwp-button {
		--pwp-font-size: clamp(11px, calc(8.5px + .9cqi), 15px);
		--pwp-min-height: clamp(34px, calc(25px + 2.7cqi), 46px);
		--pwp-pad-y: clamp(6px, calc(4px + 1.1cqi), 10px);
		--pwp-pad-x: clamp(12px, calc(6px + 2.75cqi), 28px);
		--pwp-icon-size: clamp(11px, calc(8.5px + .9cqi), 15px);
	}
}

.elementor .elementor-element .pwp-button:hover,
.elementor .elementor-element .pwp-button:focus,
.elementor .elementor-element .pwp-button:active {
	text-decoration: none !important;
}

.elementor .elementor-element .pwp-button:focus-visible {
	outline: 2px solid #e0c15a !important;
	outline-offset: 3px !important;
}

.elementor .elementor-element .pwp-button__inner {
	position: relative;
	z-index: 2;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: clamp(.28em, .48em, .48em) !important;
	min-width: 0 !important;
	max-width: 100% !important;
	font: inherit !important;
	line-height: inherit !important;
	color: inherit !important;
	-webkit-text-fill-color: currentColor !important;
}

.elementor .elementor-element .pwp-button__text {
	min-width: 0 !important;
	max-width: 100% !important;
	font: inherit !important;
	line-height: inherit !important;
	color: inherit !important;
	-webkit-text-fill-color: currentColor !important;
	white-space: normal !important;
	overflow-wrap: anywhere !important;
}

.elementor .elementor-element .pwp-button__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	font-size: var(--pwp-icon-size) !important;
	color: inherit !important;
	-webkit-text-fill-color: currentColor !important;
}

.elementor .elementor-element .pwp-button__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* =========================================================
   PULSANTE ORO BASE
   ========================================================= */
.elementor .elementor-element .pwp-button--gold-base {
	border: 1px solid rgba(112, 79, 0, .92) !important;
	background: linear-gradient(180deg, #e8cb62 0%, #d9b63a 48%, #c99f21 100%) !important;
	color: #191a1c !important;
	-webkit-text-fill-color: #191a1c !important;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .18) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .55),
		inset 0 -2px 0 rgba(116, 78, 0, .22),
		0 7px 16px rgba(0, 0, 0, .28) !important;
}

.elementor .elementor-element .pwp-button--gold-base:hover,
.elementor .elementor-element .pwp-button--gold-base:focus-visible {
	border-color: rgba(98, 68, 0, .98) !important;
	background: linear-gradient(180deg, #f0d774 0%, #e1c04b 48%, #d1aa2a 100%) !important;
	color: #191a1c !important;
	-webkit-text-fill-color: #191a1c !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .62),
		inset 0 -2px 0 rgba(104, 70, 0, .24),
		0 10px 22px rgba(0, 0, 0, .32) !important;
	transform: translateY(-2px) !important;
}

.elementor .elementor-element .pwp-button--gold-base:active {
	box-shadow:
		inset 0 2px 4px rgba(91, 60, 0, .20),
		0 4px 10px rgba(0, 0, 0, .24) !important;
	transform: translateY(0) !important;
}

/* =========================================================
   PULSANTE ORO 3D
   Stessa curva fluida del pulsante base, con un poco più di
   altezza e rientro per mantenere la resa tridimensionale.
   ========================================================= */
.elementor .elementor-element .pwp-button--gold-3d {
	--pwp-min-height: clamp(36px, calc(28px + 2.8vw), 50px);
	--pwp-pad-y: clamp(7px, calc(5px + 1.1vw), 11px);
	--pwp-pad-x: clamp(13px, calc(7px + 2.85vw), 30px);

	border: 1px solid #755205 !important;
	background: linear-gradient(180deg,
		#f2dc76 0%,
		#e9ca50 30%,
		#ddb73a 58%,
		#cf9f20 82%,
		#bd8610 100%) !important;
	color: #18191b !important;
	-webkit-text-fill-color: #18191b !important;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .30) !important;
	box-shadow:
		inset 0 2px 0 rgba(255, 249, 204, .78),
		inset 0 -3px 0 rgba(91, 61, 0, .36),
		inset 0 0 0 2px rgba(245, 215, 100, .80),
		inset 0 0 0 3px rgba(62, 43, 3, .42),
		0 2px 0 rgba(70, 48, 3, .86),
		0 8px 18px rgba(0, 0, 0, .34),
		0 0 12px rgba(210, 175, 53, .16) !important;
}

@supports (container-type: inline-size) {
	.elementor .elementor-element .pwp-button--gold-3d {
		--pwp-min-height: clamp(36px, calc(28px + 2.8cqi), 50px);
		--pwp-pad-y: clamp(7px, calc(5px + 1.1cqi), 11px);
		--pwp-pad-x: clamp(13px, calc(7px + 2.85cqi), 30px);
	}
}

.elementor .elementor-element .pwp-button--gold-3d::before {
	content: "";
	position: absolute;
	z-index: 1;
	left: clamp(7px, 2.2%, 11px);
	right: clamp(7px, 2.2%, 11px);
	top: clamp(3px, .8cqi, 5px);
	height: 38%;
	border-radius: 999px;
	background: linear-gradient(180deg,
		rgba(255, 255, 255, .42) 0%,
		rgba(255, 255, 255, .12) 62%,
		rgba(255, 255, 255, 0) 100%);
	pointer-events: none;
}

.elementor .elementor-element .pwp-button--gold-3d::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset: clamp(2px, .55cqi, 3px);
	border-radius: 999px;
	box-shadow:
		inset 0 1px 0 rgba(255, 239, 166, .56),
		inset 0 -1px 0 rgba(55, 38, 2, .38) !important;
	pointer-events: none;
}

.elementor .elementor-element .pwp-button--gold-3d:hover,
.elementor .elementor-element .pwp-button--gold-3d:focus-visible {
	border-color: #684803 !important;
	background: linear-gradient(180deg,
		#f8e58b 0%,
		#efd461 30%,
		#e2bd43 58%,
		#d5a629 82%,
		#c69016 100%) !important;
	color: #161719 !important;
	-webkit-text-fill-color: #161719 !important;
	box-shadow:
		inset 0 2px 0 rgba(255, 252, 218, .86),
		inset 0 -3px 0 rgba(84, 56, 0, .38),
		inset 0 0 0 2px rgba(249, 222, 111, .86),
		inset 0 0 0 3px rgba(58, 40, 2, .44),
		0 3px 0 rgba(63, 43, 2, .88),
		0 11px 24px rgba(0, 0, 0, .37),
		0 0 16px rgba(210, 175, 53, .23) !important;
	transform: translateY(-1px) !important;
	filter: saturate(1.02) brightness(1.01) !important;
}

.elementor .elementor-element .pwp-button--gold-3d:active {
	transform: translateY(1px) !important;
	box-shadow:
		inset 0 3px 5px rgba(70, 47, 1, .30),
		inset 0 0 0 2px rgba(236, 204, 88, .74),
		inset 0 0 0 3px rgba(55, 38, 2, .36),
		0 1px 0 rgba(63, 43, 2, .80),
		0 5px 12px rgba(0, 0, 0, .27) !important;
}

@media (prefers-reduced-motion: reduce) {
	.elementor .elementor-element .pwp-button {
		transition-duration: .01ms !important;
	}
}

/* =========================================================
   CORREZIONE 1.2.2 — ALTEZZA REALE DEL WIDGET SOTTO 768 PX

   COMPONENTE: Widget Elementor Pulsante Oro Base / Oro 3D
   ULTIMA MODIFICA: impedito lo stiramento verticale del wrapper
   DATA: 03/08/2026
   ORA: 19:18
   STATO: correzione di compatibilità responsive
   NOME FILE: buttons.css

   height:auto non è sufficiente quando Elementor tratta il widget
   come elemento flex/grid estensibile. Sotto 768 px il wrapper viene
   quindi vincolato all'altezza effettiva del suo contenuto.
   ========================================================= */

@media (max-width: 767px) {
	.elementor .elementor-element.elementor-widget-pwp-button-gold-base,
	.elementor .elementor-element.elementor-widget-pwp-button-gold-3d {
		display: block !important;
		position: static !important;
		width: 100% !important;
		height: fit-content !important;
		block-size: fit-content !important;
		min-height: 0 !important;
		min-block-size: 0 !important;
		max-height: none !important;
		flex: 0 0 auto !important;
		align-self: start !important;
	}

	.elementor .elementor-element.elementor-widget-pwp-button-gold-base > .elementor-widget-container,
	.elementor .elementor-element.elementor-widget-pwp-button-gold-3d > .elementor-widget-container,
	.elementor .elementor-element.elementor-widget-pwp-button-gold-base .pwp-button-wrap,
	.elementor .elementor-element.elementor-widget-pwp-button-gold-3d .pwp-button-wrap {
		display: block !important;
		width: 100% !important;
		height: fit-content !important;
		block-size: fit-content !important;
		min-height: 0 !important;
		min-block-size: 0 !important;
		max-height: none !important;
	}

	/* Sotto il breakpoint mobile si usa il fallback fluido in vw,
	   evitando interazioni tra container query e wrapper Elementor. */
	.elementor .elementor-element.elementor-widget-pwp-button-gold-base .pwp-button-wrap,
	.elementor .elementor-element.elementor-widget-pwp-button-gold-3d .pwp-button-wrap {
		container-type: normal !important;
		container-name: none !important;
	}
}