/*
Theme Name: Yacht Theme
Author: Neiko srl
Author URI: http://www.neiko.it/
Description: Yacht - 2025
Version: 1.0
License: GNU General Public License v2 or later
*/

/*  FONTS e COLORI */

:root {
	/* Primitive */
	
	/* Accents (Blu logo 00497F e varianti) */
	--color-accent-800: #053457; /* dark navy: per header, footer, section scure */
	--color-accent-700: #083F68; /* dark */
	--color-accent-600: #00497F; /* PRIMARY (colore logo) */
	--color-accent-500: #0D65A5; /* medium */
	--color-accent-400: #1D80C9; /* bright: highlight, link hover su sfondo chiaro */
	--color-accent-300: #70AEDB; /* soft */
	--color-accent-200: #BCD4E6; /* pale: sfondi leggeri, card */
	--color-accent-100: #E4ECF1; /* ultra pale: divider/table striping */
	
	 /* Basics (neutri) */
	--color-basic-900: #171F2A;     /* Antracite profondo */
	--color-basic-800: #363638;     /* Grigio scuro neutro */
	--color-basic-600: #66666A;     /* Grigio medio sofisticato */
	--color-basic-400: #A0A0A5;     /* Grigio chiaro equilibrato */
	--color-basic-200: #D5D5DC;     /* Grigio chiarissimo, quasi silver */
	--color-basic-100: #FAFAFA;     /* Bianco neutro */
	--color-basic-50:  #FAFAFA80;   /* Bianco 50% per overlay (8-digit hex con alpha) */

	--spacing-10: var(--10);
	--spacing-15: var(--15);
	--spacing-20: var(--20);
	--spacing-30: var(--30);
	--spacing-50: var(--50);
	--spacing-100: var(--100);
	--spacing-120: var(--120);
	--spacing-150: var(--150);
	
	/* Light Theme */
	--color-accent-cinnabar: var(--color-accent-600);
	--color-bg-primary: var(--color-basic-100);
	--color-accent-sienna: var(--color-accent-600);
	--color-bg-primary-05: var(--color-basic-50);
	--color-text-primary: var(--color-basic-900);
	--color-accent-melon: var(--color-accent-600);
	--color-bg-secondary: var(--color-basic-200);
	--color-bg-tertiary: var(--color-basic-600);
	--color-bg-inverted-secondary: var(--color-accent-600);
	--color-bg-inverted: var(--color-accent-800);
	--color-bg-inverted-05: rgba(253, 253, 253, 0.05);
	--color-accent-dogwood: var(--color-accent-200);
	--color-text-secondary: var(--color-basic-800);
	--color-text-tertiary: var(--color-basic-600);
	--color-text-quartary: var(--color-basic-600);
	--color-text-secondary-inverted: var(--color-basic-200);
	--color-text-inverted: var(--color-basic-100);

	--font-regular: 'Geist', sans-serif;
	--font-bold: 'Geist', sans-serif;
	--font-title: 'Geist', sans-serif;
	--font-button: 'Geist Mono', monospaced;
	--font-weight-regular: 400;
	--font-weight-bold: 800;
	--font-weight-title: 500;
	
	scrollbar-color: var(--color-accent-cinnabar) transparent;
	scrollbar-width: thin;
}

/* SWUP */

/* TAG MAIN */

/* Stile che identifica il processo totale */
html.is-changing .transition-main {
	transition: transform .8s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Stile che identifica il processo di abbandono della pagina corrente */
html.is-animating.is-leaving .transition-main {
	transform: translateY(calc(-1 * 5vh * var(--overlay-direction, 1)));
}

/* Stile che identifica il processo di arrivo alla pagina corrente */
html.is-animating.is-rendering .transition-main {
	transform: translateY(calc(1 * 5vh * var(--overlay-direction, 1)));
}

/* OVERLAY */

.transition-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
	background-color: var(--color-basic-900);
	opacity: 0;
	transform: translate3d(0, calc(1 * 100% * var(--overlay-direction, 1)), 0);
	pointer-events: none;
}

/* Stile che identifica il processo totale */
html.is-changing .transition-overlay {
	transition: transform .8s cubic-bezier(0.19, 1, 0.22, 1);
	opacity: 1;
}

/* Stile che si attiva quando clicco un link ad un'altra pagina */
html.is-animating .transition-overlay {
	transform: translate3d(0, 0, 0);
}

/* Stile che si attiva quando la pagina di destinazione è pronta */
html.is-rendering .transition-overlay {
	transform: translate3d(0, calc(var(--overlay-direction, -1) * 100%), 0);
}

html.to-back {
	/* --overlay-direction: -1; */
}

/* SCROLLBAR */

/* 
::-webkit-scrollbar {
	width: 5px;
}

::-webkit-scrollbar-track {
	background: var(--color-bg-secondary);
}

::-webkit-scrollbar-thumb {
	background: var(--color-accent-cinnabar);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--color-accent-sienna);
} */


/* GENERAL */

html {
	overflow: hidden;
	scrollbar-gutter: stable;
	background-color: var(--color-bg-inverted);

	&.light {
		background-color: var(--color-bg-secondary);
	}
	
	&.auto {
		overflow: auto;
	}
}

body {
	margin: 0;
	padding: 0 !important;
	background-color: var(--color-bg-secondary);
	color: var(--color-text-primary);
	font-family: var(--font-regular);
	font-weight: var(--font-weight-regular);
	font-size: 16px !important;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
}

.transition-main {

	& #hero-testi {
		transition: transform 1.5s cubic-bezier(0.19, 1, 0.22, 1), opacity .8s cubic-bezier(0.19, 1, 0.22, 1);
		transition-delay: .5s;
		opacity: 0;
		transform: translateY(calc(5 * 5vh * var(--overlay-direction, 1)));
	}

	&.appear #hero-testi {
		opacity: 1;
		transform: translateY(0);
	}

	& #model {
		transition: transform 1.5s cubic-bezier(0.19, 1, 0.22, 1), opacity .8s cubic-bezier(0.19, 1, 0.22, 1);
		transition-delay: .65s;
		opacity: 0;
		transform: translateY(calc(5 * 5vh * var(--overlay-direction, 1)));
	}

	&.appear #model {
		opacity: 1;
		transform: translateY(0);
	}
}

.container-fluid {
	padding-left: var(--50);
	padding-right: var(--50);
}

@media (min-width: 1920px) {
	.container-fluid {
		padding-left: calc((100vw - (1920px - var(--50))) / 2);
		padding-right: calc((100vw - (1920px - var(--100))) / 2);
	}
}

img,
a img {
	border: none !important;
}

::-moz-selection {
	background: none repeat scroll 0 0 #FFF;
	color: #000;
}

* {
	outline: 0 !important;
}

b,
strong,
.bold {
	font-weight: var(--font-weight-bold);
}

/* TYPO */

.big {
	font-size: 1.1rem;
}

.small {
	font-size: 0.9rem;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
	font-family: var(--font-title);
	font-weight: var(--font-weight-title);
	color: var(--color-text-primary);
}

.title {
	font-size: clamp(2.500rem, 4.167vw, 5.000rem);
	font-family: Geist, sans-serif;
	font-weight: var(--font-weight-title);
	line-height: clamp(3.000rem, 4.688vw, 5.625rem);
	letter-spacing: clamp(-0.050rem, -0.083vw, -0.100rem);

	& i {
		font-style: normal;
		color: var(--color-accent-cinnabar);
		letter-spacing: -1px;
	}
}

h1,
.h1 {
	font-size: clamp(2.500rem, 3.125vw, 3.750rem);
	font-family: Geist, sans-serif;
	font-weight: var(--font-weight-title);
	line-height: clamp(2.500rem, 3.750vw, 4.500rem);
	letter-spacing: clamp(-0.037rem, -0.063vw, -0.075rem);

	& i {
		font-style: normal;
		color: var(--color-accent-cinnabar);
		letter-spacing: -1px;
	}
}

h2,
.h2 {
	font-size: clamp(1.875rem, 2.396vw, 2.875rem);
	font-family: Geist, sans-serif;
	font-weight: var(--font-weight-title);
	line-height: clamp(2.000rem, 3.021vw, 3.625rem);
	letter-spacing: clamp(-0.028rem, -0.049vw, -0.059rem);

	& i {
		font-style: normal;
		color: var(--color-accent-cinnabar);
		letter-spacing: -1px;
	}
}

h3,
.h3 {
	font-size: clamp(1.500rem, 1.667vw, 2.000rem);
	font-family: Geist, sans-serif;
	font-weight: var(--font-weight-title);
	line-height: clamp(2.000rem, 2.083vw, 2.500rem);
	letter-spacing: clamp(-0.025rem, -0.033vw, -0.040rem);

	& i {
		font-style: normal;
		color: var(--color-accent-cinnabar);
	}
}

h4,
.h4 {
	font-size: clamp(1.188rem, 1.146vw, 1.375rem);
	font-family: Geist, sans-serif;
	font-weight: var(--font-weight-regular);
	line-height: clamp(1.500rem, 1.458vw, 1.750rem);
	letter-spacing: clamp(-0.019rem, -0.023vw, -0.028rem);
}

.h4-bold {
	font-size: clamp(1.188rem, 1.146vw, 1.375rem);
	font-family: Geist, sans-serif;
	font-weight: var(--font-weight-bold);
	line-height: clamp(1.500rem, 1.458vw, 1.750rem);
}

.p,
p {
	font-size: 18px;
	font-family: "Geist", sans-serif;
	font-weight: var(--font-weight-regular);
	line-height: 24px;
}

.button {
	font-size: 16px;
	font-family: "Geist", "Geist Mono", monospaced ;
	font-weight: var(--font-weight-title);
	line-height: 22px;
	text-decoration: uppercase;
}

.dark-bg {
	background-color: var(--color-bg-inverted);
}

.lighter-bg {
	background-color: var(--color-bg-primary-05);
}

.color-light {
	color: var(--color-text-inverted);
}

.color-light-secondary {
	color: var(--color-text-secondary-inverted);
}

.color-primary {
	color: var(--color-text-primary);
}

.color-secondary {
	color: var(--color-text-secondary);
}

.color-tertiary {
	color: var(--color-text-tertiary);
}

.glass-5 {
	backdrop-filter: blur(5px);
}

.glass-10 {
	backdrop-filter: blur(10px);
}

/* ANIMAZIONE TESTI */

@media (min-width: 992px) {

	[animate-text] {
		overflow: hidden;
		display: block;
	}

	[animate-text] .word-overflow {
		display: inline-block;
		overflow: hidden;
	}

	[animate-text] .letter,
	[animate-text] .word {
		display: inline-block;
		transform: translateY(100%);
		opacity: 1;
		transition: transform var(--transform-duration, 1.5s) cubic-bezier(0.08, 0.82, 0.17, 1),
				    opacity var(--opacity-duration, 1s) cubic-bezier(0.08, 0.82, 0.17, 1);
		transition-delay: var(--delay);
	}

	[animate-text].visible .letter,
	[animate-text].visible .word {
		transform: translateY(0);
		opacity: 1;
	}

}

/* COMPONENTI */

.primary-button {
	position: relative;
	display: inline-flex;
	padding: 0 20px 0 10px;
	width: max-content;
	height: 44px;
	align-items: center;
	gap: 1.42857rem;
	border-radius: 3.57143rem;
	text-decoration: none;
	color: var(--color-text-primary);
	text-transform: uppercase;
	position: relative;
	z-index: 5;
	border: none;
	transition: .3s;
	background: transparent;

	&.border {
		border: 1px solid var(--color-accent-cinnabar, #5F7A96) !important;
	}

	& svg {
		width: 24px;
		aspect-ratio: 1;
		z-index: 1;
	}

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		background-color: var(--color-accent-cinnabar);
		height: 100%;
		width: 44px;
		border-radius: 50px;
		transition: .3s;
	}

	&:hover {
		color: var(--color-text-inverted);
	}

	&:hover::before {
		width: 100%;
	}

	#header.dark & {
		color: var(--color-text-inverted);
	}
	
	&.light-text {
		color: var(--color-text-inverted);
	}
}

/* HEADER */

#header {
	position: fixed;
	top: 0;
	left: 0;
	padding-top: 35px;
	padding-bottom: 35px;
	z-index: 999;
}

@media (max-width: 767.98px) {
	#header {
		padding-top: 25px;
		padding-bottom: 25px;
	}
}

#logo.light {
	& #shape {
		transition: .3s;
		fill: var(--color-bg-secondary);
	}
}

#header.menu-open #logo #shape {
	transition: .3s;
	fill: var(--color-bg-secondary);
}

#navbar {
	position: fixed;
	top: 30px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1000;
}

.menu {
	display: inline-flex;
	position: relative;
	list-style: none;
	padding: 7px;
	border-radius: 100px;
	border: 1px solid var(--color-bg-primary-05, rgba(253, 253, 253, 0.50));
	background: var(--color-bg-primary-05, rgba(253, 253, 253, 0.50));
	backdrop-filter: blur(5px);

	&.dark {
		background-color: rgba(253, 253, 253, 0.1);
		border: 1px solid rgba(253, 253, 253, 0.3);
	}
}

.menu li {
	position: relative;
}

.menu li a {
	display: block;
	padding: 10px 15px;
	cursor: pointer;
	color: var(--color-text-secondary);
	text-decoration: none;
	transition: color .5s;
	border-radius: 100px;
	/* Per allineare con l'underline */
	position: relative;

	/* Importante per ottenere l'offset corretto */
	.menu.dark & {
		color: var(--color-text-inverted);
	}
}

.menu li a:hover,
.menu li.selected a {
	color: var(--color-text-primary);

	.menu.dark & {
		color: var(--color-text-primary);
	}
}

.underline {
	position: absolute;
	bottom: 5px;
	left: 0;
	height: calc(100% - 10px);
	background-color: var(--color-bg-primary);
	transition: .65s cubic-bezier(0.23, 1, 0.32, 1);
	border-radius: 100px;
	opacity: 0;
	pointer-events: none;
}

@media (max-width: 991.98px) {
	#navbar {
		display: none;
	}
}

#mobile-navbar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: var(--color-bg-inverted);
	transform: translateX(100%);
	transition: .85s cubic-bezier(0.19, 1, 0.22, 1);
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 0 var(--50);
	z-index: 995;

	&.visibile {
		transform: translateX(0%);
	}

	& .mobile-menu {
		display: flex;
		flex-direction: column;
		list-style: none;
		justify-content: center;
		margin: 0;
		padding: 0;
		width: 100%;

		& li {
			width: 100%;
			display: block;
			padding: var(--50) 0;
			position: relative;
			overflow: hidden;

			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				width: 0;
				height: 1px;
				background-color: var(--color-bg-inverted-secondary);
				transition-delay: 1s;
			}

			#mobile-navbar.visibile &::after {
				width: 100%;
				transition: 1s cubic-bezier(0.23, 1, 0.32, 1);
				transition-delay: var(--transition-delay);
			}

			& a {
				width: 100%;
				font-size: clamp(1.875rem, 2.396vw, 2.875rem);
				font-family: Geist, sans-serif;
				font-weight: var(--font-weight-regular);
				line-height: clamp(2.000rem, 3.021vw, 3.625rem);
				letter-spacing: clamp(-0.028rem, -0.049vw, -0.059rem);
				color: var(--color-text-secondary-inverted);
				text-decoration: none;
				display: block;
				transform: translateY(var(--120));
				transition-delay: 1s;

				#mobile-navbar.visibile & {
					transform: translateY(0);
					transition: 1s cubic-bezier(0.23, 1, 0.32, 1);
					transition-delay: var(--transition-delay);
				}
			}
		}
	}
}

#hamb {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--color-bg-primary-05);
	border: 1px solid var(--color-bg-primary-05);
	width: 44px;
	height: 44px;
	border-radius: var(--10);
	transition: .4s;

	&.open {
		background-color: var(--color-bg-inverted-05);
		border: 1px solid var(--color-bg-inverted-05);
	}

	& svg {
		width: 24px;
		aspect-ratio: 1;
		z-index: 1;
		fill: var(--color-text-primary);

		#hamb.open & {
			fill: var(--color-text-inverted);
		}
	}
}

/* FOOTER */

#contatti a[target="_blank"] {
	color: var(--color-text-inverted);
	text-decoration: none;
	position: relative;
	&::after {
		content: '';
		position: absolute;
		bottom: -3px;
		right: 0;
		width: 100%;
		height: 1px;
		background-color: var(--color-accent-cinnabar);
	}
	&:hover::after {
		animation-name: after_hover;
		animation-duration: 1.2s;
		animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
		animation-fill-mode: forwards;
	}
	&::before {
		content: '';
		position: absolute;
		bottom: -3px;
		left: 0;
		width: 0;
		height: 1px;
		background-color: var(--color-accent-cinnabar);
	}
	&:hover::before {
		animation-name: before_hover;
		animation-duration: 1.2s;
		animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
		animation-fill-mode: forwards;
	}
}

@keyframes after_hover {
	0% {
		width: 100%;
	}
	45% {
		width: 0;
	}
	100% {
		width: 0;
	}
}

@keyframes before_hover {
	0% {
		width: 0;
	}
	52% {
		width: 0;
	}
	100% {
		width: 100%;
	}
}

#contatti #glass-container {
	display: flex;
	padding: var(--spacing-120);
	flex-direction: column;
	align-items: flex-start;
	border-radius: var(--20);
	backdrop-filter: blur(10px);
	position: relative;

	&.light {
		border: 1px solid var(--color-bg-primary-05);
		background: var(--color-bg-primary-05);
	}

	&.dark {
		border: 1px solid rgba(137, 147, 153, 0.30);
		background: rgba(253, 253, 253, 0.05);
	}

	& .number {
		color: var(--color-accent-cinnabar);
	}

	& a.button {
		color: var(--color-text-inverted);
	}

}

#glass-container .text {
	width: 60%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

#glass-container img {
	position: absolute;
	right: 5%;
	top: 0;
	width: 30%;
	height: auto;
	scale: 1.5;
}

@media (max-width: 767.98px) {
	#contatti #glass-container {
		padding: var(--70);
	}

	#glass-container .text {
		width: 100%
	}

	#glass-container img {
		display: none;
	}
}

#footer-line {
	width: 100%;
	height: 1px;
	background-color: var(--color-bg-inverted-secondary);
}

.logo-container {
	display: flex;
	flex-direction: row;
	gap: 10px;
	align-items: center;

	& img {
		max-width: 103px;
		height: auto;
	}

	& p {
		text-wrap: nowrap;
	}
}


/* PAGINE */

/* #hero {
	height: 100vh;
	padding-top: var(--100);
	overflow-x: hidden !important;
} */

#hero {
  position: relative;
  width: 100%;
  min-height: 100vh; /* altezza pieno schermo */
  background-image: url('images/Home.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-text {
	width: 75%;
}



#hero-testi {
  background-color: rgba(253, 253, 253, 0.7); /* bianco semitrasparente */
  padding: 2rem !important;
  border-radius: 	15px;           /* angoli arrotondati */
}


@media (max-width: 991.98px) {
	#hero {
		height: auto;
	}

}

@media (max-width: 767.98px) {
	.hero-text {
		width: 100% !important;
	}
	

}


#prodotti {
	background-image: linear-gradient(180deg, var(--color-bg-secondary), var(--color-bg-primary-05));
	background-size: 100% 60vh;
	background-position: bottom left;
	background-repeat: no-repeat;
}

#video-container {
	position: sticky;
	top: var(--120);
	left: 0;
	background-color: var(--color-bg-tertiary);
	border-radius: var(--20);

	& video {
		width: 100%;
		aspect-ratio: 16 / 9;
		border-radius: var(--20);
		object-fit: cover;
	}
}

#carousel-video {
	position: relative;
	opacity: 1;
	transition: opacity 0.5s ease;
}

#video-progress-container {
	position: absolute;
	bottom: var(--30);
	left: var(--30);
	right: var(--30);
	height: 5px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.3);
}

#video-progress {
	width: 0%;
	height: 100%;
	background: var(--color-accent-cinnabar);
	transition: width linear;
	border-radius: 10px;
}


.glass-card {
	display: flex;
	padding: var(--spacing-50);
	flex-direction: column;
	justify-content: space-between;
	border-radius: var(--20);
	backdrop-filter: blur(10px);

	&.light {
		border: 1px solid var(--color-bg-primary-05);
		background: var(--color-bg-primary-05);
	}

	&.dark {
		border: 1px solid rgba(137, 147, 153, 0.30);
		background: rgba(253, 253, 253, 0.05);
	}

	& .number {
		color: var(--color-accent-200);
	}

	.icon {
		width: clamp(4.500rem, 5.000vw, 6.000rem);
		aspect-ratio: 1;
	}

	&.glass-video {
		cursor: pointer;
		padding-bottom: 0;
		transition: .75s;
		
		& .h3 {
			transition: .5s;
		}
		
		&:not(:last-child) {
			margin-bottom: var(--30);
		}

		& .description-and-image {
			/* display: none; */
			margin-top: var(--50);
		}
	}

	&.glass-video.active {
		cursor: auto;
		padding-bottom: var(--50);
		
		& .h3 {
			color: var(--color-accent-cinnabar);
		}
		
		& .description-and-image {
			margin-top: var(--50);
		}
	}
}

#oriz-line {
	height: 1px;
	width: calc(var(--line-width) - 7px);
	background-color: var(--color-accent-cinnabar);
	margin-left: calc(-1 * var(--50));
	margin-right: calc(-1 * var(--50));
	margin-top: var(--50);
	margin-bottom: calc(-1 * var(--50));
}

@media (min-width: 1920px) {
	#oriz-line {
		margin-right: calc(-1 * (100vw - (1920px - var(--100))) / 2);
		margin-left: calc(-1 * (100vw - (1920px - var(--100))) / 2);
	}
}

.title-vantaggi {
	width: 100%;
	height: 100vh;
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: var(--70);
}

#vantaggi-line {
	position: absolute;
	width: 100vw;
	height: auto;
	margin-left: calc(-1 * var(--50));
	margin-right: calc(-1 * var(--50));
	top: var(--150);
	left: 0;
	stroke-dasharray: 2500;
	stroke-dashoffset: var(--stroke-dashoffset, 2500);
}

@media (min-width: 1920px) {
	#vantaggi-line {
		margin-right: calc(-1 * (100vw - (1920px - var(--100))) / 2);
		margin-left: calc(-1 * (100vw - (1920px - var(--100))) / 2);
	}
}

#iframe-wrapper {
	position: relative;
	aspect-ratio: 16 / 9;
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		border-radius: var(--20);
		width: 100%;
		height: 100%;
		border: 1px solid rgba(137, 147, 153, 0.30);
		background: rgba(0, 0, 0, 0.1);
		backdrop-filter: blur(5px);
		z-index: 1;
		display: none;
	}
}

.iframe {
	position: relative;
	width: 100%;
	height: 100%;
	background-color: var(--color-bg-inverted-secondary);
	border: 1px solid var(--color-bg-inverted-secondary);
	border-radius: var(--20);
	margin-bottom: -7px;
}

@media (max-width: 1310px) {
	#iframe-wrapper {
		aspect-ratio: 4 / 3;
	}
}

@media (max-width: 767px) {
	#iframe-wrapper {
		aspect-ratio: 2 / 4;
		&::before {
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}

.section-border {
	border-top: 1px solid var(--color-bg-tertiary);
	border-radius: var(--50);
}

#clienti a {
	text-decoration: none;
}

.client-logo {
	width: 100%;
	aspect-ratio: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: var(--color-bg-primary-05);
	padding: var(--120);
	border-radius: var(--20);
	gap: var(--30);
}

.accordion-item {
	background-color: transparent;
}

.accordion-button {
	padding: var(--30) 0;
	margin: var(--30) 0;
	background-color: transparent;
	/* border-bottom: 1px solid var(--color-bg-tertiary); */
}

.accordion-button::after {
	position: absolute;
	bottom: 0;
	left: 0;
	content: '';
	width: 0;
	height: 1px;
	background-color: var(--color-bg-tertiary);
	transition: width 1s cubic-bezier(0.79, 0.14, 0.15, 0.86);
}

.accordion-button.animated::after {
	width: 100%;
}

.accordion-button:not(.collapsed) {
	color: var(--color-text-primary);
	background-color: transparent;
}

.accordion-button:focus {
	box-shadow: unset;
	border-bottom: transparent;
}

.accordion-body {
	padding: var(--30) 0;
	border-bottom: 1px solid var(--color-bg-tertiary);
}

/* LOADER */

/* Overlay che copre l'intera viewport */
#loader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 9998;

	& #sup-half {
		width: 100%;
		height: 50vh;
		background-color: var(--color-bg-inverted);
		transition: 1s cubic-bezier(0.86, 0, 0.07, 1);
		position: relative;
		display: flex;
		justify-content: start;
		align-items: end;
		padding: var(--50);

		&.away {
			transform: translateY(-100%);
		}

		& #logo-loader {
			width: 103px;
			height: auto;
		}

		&::after {
			content: '';
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}
	}

	& #inf-half {
		width: 100%;
		height: 50vh;
		background-color: var(--color-bg-inverted);
		padding: var(--50);
		display: flex;
		justify-content: end;
		align-items: start;
		gap: 10px;
		transition: 1s cubic-bezier(0.86, 0, 0.07, 1);

		&.away {
			transform: translateY(100%);
		}
	}
}

/* Contenitore della barra di progresso */
#progress-container {
	width: 100%;
	height: 5px;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	background: var(--color-text-secondary);
	overflow: hidden;
	transition: opacity .5s ease-out;
	margin-bottom: 10px;

	&.disappear {
		opacity: 0;
	}
}

/* Barra di progresso vera e propria */
#progress-bar {
	height: 100%;
	width: 100%;
	background: var(--color-accent-cinnabar);
	transition: width 0.5s ease;
}

/* Testo del progresso */
#progress-text {
	font-size: clamp(1.875rem, 2.396vw, 2.875rem);
	font-family: Geist Mono, sans-serif;
	font-weight: var(--font-weight-regular);
	line-height: clamp(1.875rem, 2.396vw, 2.875rem);
	letter-spacing: clamp(-0.028rem, -0.049vw, -0.059rem);
	color: var(--color-text-secondary-inverted);
}

/* FORM */

#form {
	display: flex;
	flex-direction: column;
	gap: var(--30);
}

.modal-header {
	padding: var(--30) var(--50);
}

.modal-body {
	padding: var(--50);
}

#input-container {
	display: flex;
	flex-direction: row;
	gap: var(--30);
	flex-wrap: wrap;
}

.input-wrp {
	position: relative;
	width: calc(33.33333333% - ( (var(--30) * 2) / 3) );

	& label {
		position: absolute;
		top: 11px;
		left: 8px;
		padding: 0 7px;
		background-color: white;
		transform-origin: center left;
		transition: .65s cubic-bezier(0.19, 1, 0.22, 1);
		pointer-events: none;
	}

	& input[type="text"],
	& input[type="email"] {
		width: 100%;
		padding: 10px 15px;
		background-color: transparent;
		border: 1px solid var(--color-bg-tertiary);
		border-radius: 5px;
		
		&:focus, &:focus-within {
			border: 1px solid var(--color-accent-cinnabar);
			outline: 1px solid var(--color-accent-cinnabar) !important;
		}

		&:focus~label {
			top: 0;
			transform: translateY(-50%) scale(.8);
		}

		&:valid~label {
			top: 0;
			transform: translateY(-50%) scale(.8);
		}
	}

}

@media (max-width: 991.98px) {
	
	.input-wrp {
		width: 100%;
	}
	
}

textarea {
	padding: 10px 15px;
	border: 1px solid var(--color-bg-tertiary);
	border-radius: 5px;
	&:focus, &:focus-within {
		border: 1px solid var(--color-accent-cinnabar);
		outline: 1px solid var(--color-accent-cinnabar) !important;
	}
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
	.checkbox-wrapper {
		display: flex;
		flex-direction: row;
		gap: var(--15);
	}
	
	.checkbox-wrapper input[type=checkbox] {
		--active: var(--color-accent-cinnabar);
		--active-inner: var(--color-bg-primary);
		--focus: var(--color-accent-cinnabar);
		--border: var(--color-bg-tertiary);
		--border-hover: var(--primary-color);
		--background: var(--color-bg-primary);
		--disabled: var(--color-bg-secondary);
		--disabled-inner: var(--color-bg-tertiary);
		-webkit-appearance: none;
		-moz-appearance: none;
		height: 21px;
		outline: none;
		display: inline-block;
		vertical-align: top;
		position: relative;
		margin: 0;
		cursor: pointer;
		aspect-ratio: 1;
		border: 1px solid var(--bc, var(--border));
		background: var(--b, var(--background));
		transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
	}

	.checkbox-wrapper input[type=checkbox]:after {
		content: "";
		display: block;
		left: 0;
		top: 0;
		position: absolute;
		transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
	}

	.checkbox-wrapper input[type=checkbox]:checked {
		--b: var(--active);
		--bc: var(--active);
		--d-o: .3s;
		--d-t: .6s;
		--d-t-e: cubic-bezier(.2, .85, .32, 1.2);
	}

	.checkbox-wrapper input[type=checkbox]:disabled {
		--b: var(--disabled);
		cursor: not-allowed;
		opacity: 0.9;
	}

	.checkbox-wrapper input[type=checkbox]:disabled:checked {
		--b: var(--disabled-inner);
		--bc: var(--border);
	}

	.checkbox-wrapper input[type=checkbox]:disabled+label {
		cursor: not-allowed;
	}

	.checkbox-wrapper input[type=checkbox]:hover:not(:checked):not(:disabled) {
		--bc: var(--border-hover);
	}

	.checkbox-wrapper input[type=checkbox]:focus {
		box-shadow: 0 0 0 var(--focus);
	}

	.checkbox-wrapper input[type=checkbox]:not(.switch) {
		width: 21px;
	}

	.checkbox-wrapper input[type=checkbox]:not(.switch):after {
		opacity: var(--o, 0);
	}

	.checkbox-wrapper input[type=checkbox]:not(.switch):checked {
		--o: 1;
	}

	.checkbox-wrapper input[type=checkbox]+label {
		display: inline-block;
		vertical-align: middle;
		cursor: pointer;
		margin-left: 4px;
	}

	.checkbox-wrapper input[type=checkbox]:not(.switch) {
		border-radius: 7px;
	}

	.checkbox-wrapper input[type=checkbox]:not(.switch):after {
		width: 5px;
		height: 9px;
		border: 2px solid var(--active-inner);
		border-top: 0;
		border-left: 0;
		left: 7px;
		top: 4px;
		transform: rotate(var(--r, 20deg));
	}

	.checkbox-wrapper input[type=checkbox]:not(.switch):checked {
		--r: 43deg;
	}
}

.checkbox-wrapper * {
	box-sizing: inherit;
}

.checkbox-wrapper *:before,
.checkbox-wrapper *:after {
	box-sizing: inherit;
}


.wpml-ls-legacy-list-horizontal.wpml-ls-statics-footer,
.otgs-development-site-front-end {
	display: none !important;
}

#nk-cookie-banner-banner, #nk-cookie-banner-banner p{
	font-size: 12px !important; 
	line-height: 16px;
}