:root {
 	--primary-color: rgb(200, 16, 46);
 	--secondary-color: rgb(228, 168, 34);
 	--field-text-color: rgb(0, 0, 0);
 	--bg-color: rgb(245, 246, 246);
 	--heading-color: rgb(255, 255, 255);
 	--text-color: rgb(0, 0, 0);
 	--label-color: rgb(74, 78, 82);
 	--border-color: rgb(226, 228, 228);
 }

 body {
 	font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, sans-serif;
 	width: 100%;
 	position: relative;
 	min-height: 100vh;
 }

 a {
 	color: #5698D0;
 }

 a:hover {
 	color: #7DA1C4;
 }

 .ls-bg {
 	position: absolute;
 	z-index: 0;
 	width: 100%;
 	height: 100%;
 	top: 0;
 	overflow: hidden;
 	left: 0;
 }

 .ls-bg-inner {
 	object-fit: cover;
 	width: 100%;
 	height: 100%;
 	object-position: 50% 50%;
 	background-color: rgb(51, 49, 48);
 }

 h2 {
 	font-size: 25px;
 }

 main {
 	position: relative;
 	z-index: 10000;
 	min-height: 100vh;
 }

 main::after {
 	content: "";
 	position: absolute;
 	height: 100%;
 	top: 0;
 	right: -15%;
 	width: 50%;
 	z-index: 0;
 	clip-path: circle(70% at 80% 50%);
 	background-color: var(--bg-color);
 }

 .info-registrazione {
 	padding: 10px;
 	font-size: 20px;
 	min-height: 350px;
 	text-align: center;
 }

 .mobile-image-home {
 	width: 100% !important
 }

 ;

 .wrapper {
 	padding: 40px 0px 118px 118px;
 	width: 95%;
 	height: auto;
 }

 .main-inner {
 	position: relative;
 	height: 100%;
 }

 .form-title-paragrafi {
 	font-size: 16px !important;
 	padding-bottom: 10px;
 }

 .logo {
 	display: flex;
 	align-items: center;
 	height: auto;
 	position: relative;
 	z-index: 10;
 }

 .logo-icon {
 	width: auto;
 }

 .logo-icon img {
 	width: 100%;
 }

 .logo-text {
 	font-size: 37px;
 	color: var(--heading-color);
 	font-weight: bold;
 	margin-left: 8px;
 }

 .p-relate {
 	position: relative;
 	height: 100%;
 }

 .side-text {
 	position: absolute;
 	bottom: 0;
 	left: 0;
 }

 .side-text * {
 	margin: 0;
 }

 .side-text span {
 	font-size: 12px;
 	padding: 5px;
 	color: var(--heading-color);
 	display: block;
 	line-height: 0.5;
 }

 .main-heading {
 	font-size: 104px;
 	font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, sans-serif;
 	color: var(--heading-color);
 	text-transform: uppercase;
 	font-weight: 900;
 	line-height: 1;
 }

 .side-text p {
 	font-size: 18px;
 	color: var(--heading-color);
 }

 .logSign {
 	display: flex;
 	width: 80%;
 	height: auto;
 	border: solid 1px var(--bg-color);
 	border-radius: 12px;
 	overflow: hidden;
 	margin-top: 50px;
 }

 .logSign button {
 	background-color: transparent;
 	min-width: 50%;
 	height: 54px;
 	border: 0;
 	transition: 0.4s;
 	font-size: 18px;
 	color: var(--heading-color);
 	font-weight: bold;
 	position: relative;
 	z-index: 1;
 }

 .logSign button.active {
 	color: var(--field-text-color);
 }

 .logSign button.active:before {
 	content: "";
 	width: 100%;
 	height: 100%;
 	background-color: var(--bg-color);
 	color: var(--field-text-color);
 	position: absolute;
 	top: 0;
 	left: 0;
 	z-index: -1;
 }

 .form {
 	border-radius: 12px;
 	background-color: var(--bg-color);
 	box-shadow: 0px 0px 60px 0px rgba(94, 92, 154, 0.12);
 	margin-left: auto;
 	min-height: 500px;
 	padding: 65px;
 	margin-right: 40px;
 	position: relative;
 	z-index: 100000;
 }

 .form-title {
 	font-size: 20px;
 	color: var(--text-color);
 	font-weight: 500;
 	text-align: center;
 	margin-bottom: 70px;
 	transition: 0.4s;
 }

 .input-field {
 	margin-bottom: 30px;
 	transition: 0.4s;
 	position: relative;
 	display: grid;
 	align-items: center;
 	opacity: 0;
 	width: 100%;
 	height: 52px;
 	min-height: 52px;
 	background-color: var(--bg-color);
 }

 .input-field input {
 	border: solid 1px var(--border-color);
 	border-radius: 12px;
 	width: 100%;
 	transition: 0.4s;
 	height: 100%;
 	padding-left: 18px;
 	font-size: 18px;
 	color: var(--field-text-color);
 	font-weight: 600;
 }

 .input-field select {
 	border: solid 1px var(--border-color);
 	border-radius: 12px;
 	width: 100%;
 	transition: 0.4s;
 	height: 100%;
 	padding-left: 18px;
 	font-size: 18px;
 	color: var(--field-text-color);
 	font-weight: 600;
 }

 .input-field input:focus {
 	outline: 0;
 	border-color: var(--secondary-color);
 }

 .input-field label {
 	font-size: 18px;
 	color: var(--label-color);
 	position: absolute;
 	left: 17px;
 	transition: 0.4s;
 	pointer-events: none;
 	width: max-content;
 	padding: 0 3px;
 	background-color: var(--bg-color);
 }

 .input-field:focus-within label {
 	transform: translatey(-24px);
 	font-size: 15px !important;
 }

 .copy {
 	font-size: 11px;
 }

 .input-field input:valid+label {
 	transform: translatey(-24px);
 	font-size: 15px;
 }

 .input-field input:invalid+label {
 	font-size: 18px;
 	text-transform: uppercase !important;
 }

 .input-field input[type=date] {
 	min-width: 95% !important;
 }



 .rememberme {
 	display: flex;
 	align-content: center;
 	height: auto;
 	margin-bottom: 30px;
 }

 .rememberme label {
 	font-size: 15px;
 	color: var(--field-text-color);
 	margin-left: 10px;
 }


 .rememberme input[type=checkbox] {
 	-webkit-appearance: none;
 	border-radius: 6px;
 	background-color: rgb(99, 171, 134);
 	width: 22px;
 	height: 22px;
 	position: relative;
 	cursor: pointer;
 }

 .rememberme input[type=checkbox]::before {
 	content: "X";
 	font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, sans-serif;
 	font-weight: 200;
 	font-size: 14px;
 	color: var(--heading-color);
 	width: 100%;
 	transition: 0.4s;
 	height: 100%;
 	position: absolute;
 	text-align: center;
 	line-height: 22px;
 }

 .rememberme input[type=checkbox]:checked::before {
 	content: 'v';
 	font-family: "Font Awesome 5 free";
 	font-size: 8px;
 }

 .forget {
 	font-size: 15px;
 	color: var(--label-color);
 	font-weight: bold;
 	text-decoration: none;
 	margin-bottom: 30px;
 }

 .forget:hover {
 	color: var(--secondary-color);
 }

 .login-btn button {
 	border-radius: 12px;
 	background-color: rgb(247, 144, 49);
 	width: 100%;
 	transition: 0.4s;
 	height: 54px;
 	font-size: 18px;
 	margin-bottom: 40px;
 	border: 0;
 	position: relative;
 	color: var(--heading-color);
 	font-weight: bold;
 	overflow: hidden;
 }

 .login-btn .signup {
 	background-color: var(--primary-color);
 }

 .login-btn button::before {
 	content: "GO!";
 	font-size: 18px;
 	font-weight: bold;
 	background-color: var(--field-text-color);
 	color: var(--heading-color);
 	line-height: 54px;
 	display: block;
 	transition: 0.4s;
 	height: 100%;
 	position: absolute;
 	top: 0;
 	left: -65px;
 	width: 65px;
 }

 .login-btn button:hover::before {
 	left: 0;
 }

 .login-btn button:hover {
 	padding-left: 65px;
 }

 .divide-heading {
 	position: relative;
 	z-index: 1;
 	margin-bottom: 30px;
 }

 .divide-heading span {
 	font-size: 15px;
 	color: var(--field-text-color);
 	font-weight: bold;
 	text-align: center;
 	background-color: var(--bg-color);
 	padding: 0 18px;
 	width: max-content;
 	margin: 0 auto;
 	display: block;
 }

 .divide-heading::after {
 	content: "";
 	position: absolute;
 	width: 100%;
 	background-color: rgb(234, 234, 245);
 	height: 1px;
 	left: 0;
 	right: 0;
 	margin-left: auto;
 	margin-right: auto;
 	top: 10px;
 	z-index: -1;
 }

 .social-signup {
 	display: flex;
 	flex-wrap: wrap;
 	width: 100%;
 	height: auto;
 	justify-content: center;
 }

 .social-signup a {
 	border-radius: 10px;
 	background-color: var(--field-text-color);
 	width: 40px;
 	height: 40px;
 	display: grid;
 	justify-content: center;
 	align-content: center;
 	text-decoration: none;
 	margin: 0 7px;
 }

 .social-signup a.facebook {
 	background-color: rgb(55, 99, 210);
 }

 .social-signup a.twitter {
 	background-color: rgb(26, 188, 255);
 }

 .social-signup a.twitch {
 	background-color: rgb(123, 93, 250);
 }

 .social-signup a.youtube {
 	background-color: rgb(253, 67, 79);
 }

 .social-signup a i {
 	color: var(--heading-color);
 	font-size: 15px;
 }

 .register-text {
 	font-size: 14px;
 	color: var(--field-text-color);
 }

 .register-text a {
 	color: rgb(35, 210, 226);
 	text-decoration: none;
 }

 main .signup-form {
 	display: none;
 }

 .logo-home {
 	max-width: 350px;
 	display: block;
 	margin-left: auto;
 	margin-right: auto;
 	width: 50%;
 }

 .thankyou-page .logo {
 	justify-content: center;
 	margin-top: 60px;
 }

 .thankyou-page .logo-icon {
 	width: 55px;
 	margin-right: 10px;
 }

 .thankyou-page .logo .logo-icon img {
 	width: 100%;
 }

 .thankyou-page .logo-text {
 	font-size: 65px;
 }

 .thankyou-page .main-inner {
 	background-image: url(../images/thankyou-bg.png) !important;
 	background-color: var(--text-color-hover);
 }

 .thankyou-page article {
 	text-align: center;
 	margin-top: 80px;
 }

 .thankyou-page article h1 {
 	font-size: 75px;
 	font-weight: bold;
 	text-transform: uppercase;
 }

 .thankyou-page article h1 span {
 	display: block;
 	font-size: 80px;
 	font-weight: 900;
 	color: var(--primary-color);
 }

 .thankyou-page article span {
 	font-size: 18px;
 	color: var(--primary-color);
 	font-weight: 500;
 }

 .thankyou-page article p {
 	font-size: 18px;
 	font-family: "Myriad Pro";
 	color: var(--secondary--text-color);
 	margin: 0 auto;
 	margin-top: 45px;
 	width: 39%;
 }

 .social-media {
 	text-align: center;
 	margin: 40px auto;
 	background-color: var(--text-color-hover);
 	width: 30%;
 	padding: 6px 10px;
 }

 .social-media a {
 	border: solid 1px rgb(244, 244, 244);
 	border-radius: 5px;
 	background-color: transparent;
 	color: var(--secondary--text-color);
 	font-size: 18px;
 	font-weight: bold;
 	padding: 10px 18px;
 	text-decoration: none;
 	display: inline-block;
 }

 .social-media a i {
 	margin-right: 10px;
 	font-size: 18px;
 }

 .back-home {
 	width: 188px;
 	height: 63px;
 	margin: 0 auto;
 }

 .back-home a {
 	background-color: var(--primary-color);
 	border-radius: 50px;
 	color: var(--text-color-hover);
 	width: 100%;
 	height: 100%;
 	display: block;
 	text-decoration: none;
 	text-align: center;
 	line-height: 63px;
 	font-size: 17px;
 	color: rgb(255, 255, 255);
 	font-weight: bold;
 	border: 0;
 }

 #sub img {
 	width: 60px;
 }

 .highlight {
 	border-top: solid 3px var(--primary-color) !important;
 	border-bottom: solid 3px var(--primary-color) !important;
 }

 #error {
 	position: fixed;
 	top: 10px;
 	left: 10px;
 	z-index: 20;
 }

 .invalid {
 	border: solid 2px #ff4444 !important;
 	position: relative;
 }

 /* Fade bottone quando la privacy Canon non è stata selezionata */
 .signup.disabled-fade {
 	opacity: .45;
 	cursor: not-allowed;
 	pointer-events: none;
 	/* sicurezza extra */
 	transition: opacity .25s ease;
 }


 /* ======= MODAL LIBERATORIA ======= */
 .liberatoria-overlay {
 	position: fixed;
 	inset: 0;
 	background: rgba(0, 0, 0, .55);
 	z-index: 99999999;
 }

 .liberatoria-modal {
 	position: fixed;
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
 	width: min(900px, calc(100% - 24px));
 	max-height: calc(100% - 24px);
 	background: #fff;
 	z-index: 9999;
 	border-radius: 10px;
 	overflow: hidden;
 	box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
 }

 .liberatoria-head {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
 	padding: 14px 16px;
 	border-bottom: 1px solid rgba(0, 0, 0, .08);
 }

 .liberatoria-title {
 	font-weight: 700;
 	font-size: 16px;
 }

 .liberatoria-close {
 	border: 0;
 	background: transparent;
 	font-size: 26px;
 	line-height: 1;
 	cursor: pointer;
 }

 .liberatoria-body {
 	padding: 16px;
 	overflow: auto;
 	max-height: calc(100vh - 190px);
 	font-size: 14px;
 	line-height: 1.45;
 	white-space: pre-wrap;
 }

 .liberatoria-foot {
 	display: flex;
 	gap: 10px;
 	justify-content: flex-end;
 	padding: 12px 16px;
 	border-top: 1px solid rgba(0, 0, 0, .08);
 }

 .liberatoria-btn {
 	border: 0;
 	padding: 10px 14px;
 	border-radius: 8px;
 	cursor: pointer;
 }

 /* ======= FIX OVERLAY/MODAL SOPRA A TUTTO (problema stacking/parent) ======= */
 #liberatoria-overlay,
 #liberatoria-modal {
 	position: fixed !important;
 }

 #liberatoria-overlay {
 	inset: 0 !important;
 	background: rgba(0, 0, 0, .55) !important;
 	z-index: 2147483646 !important;
 	/* sopra qualunque layout */
 }

 #liberatoria-modal {
 	top: 50% !important;
 	left: 50% !important;
 	transform: translate(-50%, -50%) !important;
 	width: min(900px, calc(100% - 24px)) !important;
 	max-height: calc(100% - 24px) !important;
 	background: #fff !important;
 	z-index: 2147483647 !important;
 	/* sopra overlay */
 	border-radius: 10px !important;
 	overflow: hidden !important;
 	box-shadow: 0 20px 60px rgba(0, 0, 0, .35) !important;
 }

 #liberatoria-modal .liberatoria-body {
 	overflow: auto !important;
 	max-height: calc(100vh - 190px) !important;
 	white-space: pre-wrap !important;
 }

 /* blocco scroll quando modal aperta */
 body.no-scroll {
 	overflow: hidden !important;
 }

 @media print {
 	body * {
 		visibility: hidden;
 	}

 	#liberatoria-modal,
 	#liberatoria-modal * {
 		visibility: visible;
 	}

 	#liberatoria-modal {
 		position: static !important;
 		transform: none !important;
 		width: 100% !important;
 		max-height: none !important;
 		box-shadow: none !important;
 	}

 	.liberatoria-foot,
 	.liberatoria-close {
 		display: none !important;
 	}
 }



 /* ======= CHECKBOX PRIVACY (fix label flottante + cliccabilità) ======= */
 .input-field.checkbox-field {
 	opacity: 1;
 	/* deve vedersi */
 	height: auto;
 	min-height: unset;
 	display: block;
 	background: transparent;
 }

 /* Sovrascrive la regola .input-field label che la rende absolute e non cliccabile */
 .input-field.checkbox-field label.checkbox-label {
 	position: static;
 	pointer-events: auto;
 	transform: none;
 	left: auto;
 	background: transparent;
 	padding: 0;
 	width: auto;
 	display: flex;
 	align-items: center;
 	gap: 10px;
 	font-size: 15px;
 	color: var(--field-text-color);
 	cursor: pointer;
 }

 /* Checkbox normale (interagibile) */
 .input-field.checkbox-field input[type="checkbox"] {
 	-webkit-appearance: auto;
 	appearance: auto;
 	width: 18px;
 	height: 18px;
 	margin: 0;
 }



 /* ======= CHECKBOX PRIVACY (FIX FIREFOX) ======= */
 .input-field.checkbox-field {
 	opacity: 1;
 	height: auto;
 	min-height: unset;
 	display: block;
 	background: transparent;
 }

 /* evita che la label venga resa absolute + non cliccabile */
 .input-field.checkbox-field label.checkbox-label {
 	position: static;
 	pointer-events: auto;
 	transform: none;
 	left: auto;
 	background: transparent;
 	padding: 0;
 	width: auto;

 	display: flex;
 	align-items: center;
 	gap: 10px;
 	font-size: 15px;
 	color: var(--field-text-color);
 	cursor: pointer;
 }

 /* OVERRIDE della regola .input-field input (che rompe le checkbox) */
 .input-field.checkbox-field input[type="checkbox"] {
 	-webkit-appearance: checkbox;
 	-moz-appearance: checkbox;
 	appearance: auto;

 	width: 18px !important;
 	height: 18px !important;

 	padding: 0 !important;
 	border: initial !important;
 	border-radius: 0 !important;
 	background: transparent !important;

 	display: inline-block;
 	vertical-align: middle;
 	accent-color: var(--primary-color);
 }