/*
Theme Name: City Code
Theme URI: 
Author: Mutart
Author URI: 
Description: Software custom di Mutart per City Code
Version: 1.0
Tags: #citycode #mycitycode
Text Domain: citycode
*/

:root {
	--primary: #FF5A28;
	/*--primary: #E84B20; */
	--white: #fff;
	--secondary: #EDEBEB;
	--black: #1D1D1B;
	--text: #909090;
	--tertiary: #FFFFB4;
	--light-gray: #E9E9E9;
}

@font-face {
	font-family: 'SF Pro Display';
	src: url('SFProDisplay-Light.eot');
	src: local('SF Pro Display Light'), local('SFProDisplay-Light'),
		url('assets/fonts/SFProDisplay-Light.eot?#iefix') format('embedded-opentype'),
		url('assets/fonts/SFProDisplay-Light.woff2') format('woff2'),
		url('assets/fonts/SFProDisplay-Light.woff') format('woff'),
		url('assets/fonts/SFProDisplay-Light.ttf') format('truetype');
	font-weight: 200;
	font-style: normal;
}

@font-face {
	font-family: 'SF Pro Display';
	src: url('SFProDisplay-Regular.eot');
	src: local('SF Pro Display Regular'), local('SFProDisplay-Regular'),
		url('assets/fonts/SFProDisplay-Regular.eot?#iefix') format('embedded-opentype'),
		url('assets/fonts/SFProDisplay-Regular.woff2') format('woff2'),
		url('assets/fonts/SFProDisplay-Regular.woff') format('woff'),
		url('assets/fonts/SFProDisplay-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'SF Pro Display';
	src: url('SFProDisplay-Bold.eot');
	src: local('SF Pro Display Bold'), local('SFProDisplay-Bold'),
		url('assets/fonts/SFProDisplay-Bold.eot?#iefix') format('embedded-opentype'),
		url('assets/fonts/SFProDisplay-Bold.woff2') format('woff2'),
		url('assets/fonts/SFProDisplay-Bold.woff') format('woff'),
		url('assets/fonts/SFProDisplay-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Factor A';
	src: url('assets/fonts/FactorA-Regular.woff2') format('woff2'),
			url('assets/fonts/FactorA-Regular.woff') format('woff'),
			url('assets/fonts/FactorA-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Factor A';
	src: url('assets/fonts/FactorA-Bold.woff2') format('woff2'),
			url('assets/fonts/FactorA-Bold.woff') format('woff'),
			url('assets/fonts/FactorA-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

/******* Helpers *******/

html {
  scroll-behavior: smooth;
}

html, body {
  overflow-x: hidden;
}

body {
	color: var(--black);
}

*, *:before, *:after  {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

img, video, figure {
	max-width: 100%;
	margin: 15px auto;
}

video {
	border-radius: 15px;
}

.hidden {
	display: none !important;
}

/********/

h1, h2, h3, h4, h5, h6, time, .pagamento .woocommerce-info{
	font-family: 'Factor A';
	/* letter-spacing: 1px; */
	margin-bottom: 20px;
	color: var(--black);
	text-wrap:balance;
	font-feature-settings: 'ss01' 1, 'ss02' 1, 'ss03' 1;
}



tr, td {
	font-family: 'Factor A';
	letter-spacing: 1px;
	margin-bottom: 20px;
	color: var(--black);
	text-wrap:balance;
	
}

h1 {
	font-size: clamp(36px, 10vw, 100px);
	line-height: clamp(26px, 10vw, 86px);
	margin-bottom: 25px;
}
h2, .pagamento .woocommerce-info{
	font-size: clamp(24px, 10vw, 48px);
	line-height: clamp(20px, 10vw, 40px);
}



/* b {
	font-weight: 500 !important;
} */


a {
	font-family: 'SF Pro Display';
	color:var(--primary);
}

p, li, ol, ul, address {
	font-family: 'SF Pro Display';
	color:var(--text);
	font-size: 16px;
	line-height: 130%;
	margin-bottom: 20px;
}

span {
	color:var(--text);
}

.evidence, .step {
	color:var(--primary);
}

/* Utilities */

.open {
	display: block !important;
}

.advice {
	border: 1px solid #e1381c;
	padding: 10px;
	border-radius: 10px;
	background: #e1381c0f;
	color: black;
	display: none;
	text-align: center;
}

.adviseshow {
	display: block !important;
	
}

.single-cliente .adviseshow{
	background-color: #e1381c;
	color:white !important;
	margin-top:25px;
	font-weight: 800 !important;
}

.abslink {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 2;
}

.buttons_container {
	display: flex;
	align-items: center;
	justify-content: center;
	gap:15px;
	
}

.content-area {
	padding-bottom: 10px;
    border-radius: 0 0 20px 20px;
    position: relative;
    z-index: 100;
    background: white;
	box-shadow: 0 15px 6px #00000010;
	/* margin-bottom: 620px; */
}

@media(min-width:768px){
	.content-area {
		border-radius: 0 0 50px 50px;
		margin-bottom: 500px;
	}
}

/* Navigazione */

header {
	position: relative;
    z-index: 19999;
}

.avatar-menu:hover .avatar-menu-wrapper {
    display: block !important;
}

.avatar-menu {
	position: relative;
}

.avatar-menu-wrapper {
	display: none;
    background: white;
    list-style-type: none;
	border:1px solid #e5e5e5;
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
	position: absolute;
	top:40px;
	left:-50px;
	z-index: 200 !important;
}

.avatar-menu-wrapper ul, .avatar-menu-wrapper li {
	list-style-type: none;
	margin: 0;
}

.avatar-menu-wrapper li {
	border-bottom: 1px solid var(--light-gray);
	padding: 10px 20px;
	text-align: left;
}

.nav-flex-wrapper {
	display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 40px;
}

@media(max-width:768px){
	.header-desktop {
		display: none !important;
	}

	.custom-logo-link {
		grid-area: logo;
	}

	.menu-icon {
		margin-left: auto;
		grid-area: menu-icon;
		display: flex !important;
		gap: 5px;
		flex-direction: column;
	}

	.menu-mobile {
		display: block !important;
	}

	.menu-icon-open .line {
		transform: rotate(45deg);
	}
	.menu-icon-open .line:nth-child(2) {
		transform: rotate(-45deg);
		margin-left: -1px;
		margin-top: -7px;
		position: relative;
		z-index: -1; 
	}

	.header-wrapper:has(.menu-mobile-open){
		background: #E9E9E9;
		padding:15px 20px 0 20px;
		transition:.5s ease-in-out;
	}

	.menu-mobile-close {
		transform: translateY(-200%);
		display: none !important;
	}
	
	.menu-mobile-open {
		transform: translateY(0%);
		display: flex;
		flex-direction: column-reverse;
		gap:5px;
		grid-area:btn-container-mobile;
		margin-bottom: 10px;
	}

	.buttons_container-mobile {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		gap: 8px;
		width: 100%;
		grid-area: btn-container-mobile;
		margin-top:10px;
	}

	.line {
		width: 20px;
		height: 2px;
		background: var(--primary);
		display: block;
	}

	.header-wrapper:has(.menu-mobile-open){
		background: #E9E9E9;
		padding:15px 20px 0 20px;
		transition:.25s ease-in-out;
		display: grid;
		/*grid-template-columns: 1fr 1fr;*/
		grid-template-areas: 
		'logo menu-icon'
		'btn-container-mobile btn-container-mobile';
	}

	.menu-mobile-open .cta-secondary {
		background: #F8F8F8 !important;
	}
}

@media(min-width:768px){
	.menu-mobile, .menu-icon {
		display: none !important;
	}
}
/********** FRONT PAGE ***********/

.img-border{
	position: relative;
}

.home video {
	width: 100%;
}

.home .swiper-slide-active .citycode-text a:hover {
	text-decoration:none !important;
}

.faq-wrapper {
	display: grid;
	max-width: 1440px;
	margin:0 auto;
	grid-template-columns: 1fr 1fr;
	gap:30px;
}

@media(max-width:768px){
	.faq-wrapper {
		grid-template-columns: 1fr !important;
	}
}

.text-wrapper.cta-final {
	margin:0px auto 110px auto !important;
}

.gallery {
	overflow-x: scroll;
}

.gallery.flex img {
	width: 100%;
	margin:0;
}

.gallery.flex {
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.img-border img{
	border-radius: 10px;
	max-height: 660px;
	object-fit: cover;
	width: 100%;
}

.polaroid-section .cta-primary {
	max-width: 340px;
}

.polaroid-section a{
	text-decoration: none;
}

.overlay-text p{
	position: relative;
	bottom:0px;
	text-align: center;
	left:0px;
	color:var(--text);
	margin:0 auto;
}

.text-wrapper__min {
	max-width: 460px;
	margin:30px auto;
}

.text-wrapper {
	max-width: 1360px;
	margin:0 auto;
}

.buttons_container.header-desktop {

    border-radius: 20px;
	gap:5px;
}

.buttons_container .cta-primary ,  .buttons_container .cta-secondary{
	padding:10px 20px;
	max-width: 300px;
	margin:0;
}


details{
	font-family:'Factor A';
	margin-bottom: 5px;
	padding: 0.5em 0.5em 0;
	max-width: 100%;
    margin: 30px auto;
	text-align: left;
	width:100%;
}

details[open] {
    padding: 0.5em;
}

summary{
	font-weight: bold;
	margin: -0.5em -0.5em 0;
	padding: 0.5em;
	cursor: pointer;
	background: var(--light-gray);
	padding: 15px 12px;
    border-radius: 10px;
}
details[open] summary{
	margin-bottom: 1em;
	color:var(--primary);
}

.carousel-item img {
	max-width: 250px;
}

.carousel-row {
	align-items: center;
	gap:50px;
	margin: 0 auto;
}

.carousel-row.flex {	
	flex-wrap: nowrap;
}

@media(min-width:769px) and (max-width:1640px){
	.carousel-fixed {
		width: calc(100% / 2 - 10px) !important;
	}

	.over-image {
		position: absolute;
		width: 100% !important;
		top: 120px !important;
		max-width: 340px !important;
	}


.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
	left:140px !important;
}

}

@media(max-width:768px){
	.carousel-row.flex {	
		flex-wrap: wrap;
		gap:0 !important;
	}


.swiper-slide:before{
    content: '';
    background-image: url(https://mycitycode.it/wp-content/themes/citycode/assets/img/cornice_png_slide.png);
    top: calc(100% - 50%);
    left: 10% !important;
	width: 80% !important;
}


	.carousel-fixed {
		left: 0 !important;
		width: 100% !important;
		height: calc(100% - 80px) !important;
	}

	.over-image {
		left: 18px !important;
		width: 90% !important;
		max-width: 90% !important;
	}

	.swiper-slide img {
		max-width: 90% !important;
		height: auto !important;
	}

	.swiper-slide-active {
    margin-right: 0px !important;
}

.swiper-slide-active .citycode-text {
    opacity: 1 !important;
    max-width: 90% !important;
    margin: 0 auto !important;
	position: relative;
    z-index: 1000000000000 !important;
}

.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
	bottom:20px !important;
	left:140px !important;
}
	
	.swiper.mySwiper {
    width: 100%;
    height: 100%;
    padding-left: 0px !important;
    padding-bottom: 100px !important;
}
}

@media(max-width:480px){
	.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
		left: 0 !important;
		width: 100% !important;
	}
		
}

.carousel-wrapper {
	gap:25px;
}

.citycode-example {
	margin:0px auto !important;
}

.author {
	margin: 5px 0 15px !important;
	display: block;
}

.carousel-main {
	position: relative;
}

.carousel-fixed{
	content: '';
    background: var(--light-gray);
    border-radius: 24px;
    width: calc(100% / 4 - 10px);
    padding: 20px 10px;
    z-index: -1;
    height: calc(100% + -30px);
    display: block;
    left: 35px;
    top: 0px;
    position: absolute;
}

.swiper-slide, .swiper-slide img {
	position: relative;
}

.swiper-slide:before{
    content: '';
    background-image: url(https://mycitycode.it/wp-content/themes/citycode/assets/img/cornice_png_slide.png);
    top: calc(100% - 50%);
    left: 0;
    z-index: 999;
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: contain;
    transform: translateY(-25%);
}

.swiper-slide:before{
	opacity: 0;
}

.swiper-slide-active.swiper-slide:before {
	opacity: 1 !important;
  }





.carousel-image {
	position: relative !important;
}


.swiper {
	width: 100%;
	height: 100%;
	padding-left: 50px !important;
    padding-bottom: 50px !important;
  }

  .swiper-slide {
	text-align: center;
	font-size: 18px;
	background:transparent;
	display: flex;
	justify-content: center;
	align-items: center;
  }

  .swiper-pagination-bullet-active {
	width: 50px !important;
	height: 10px !important;
	border-radius: 20px !important;
  }

  .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
	left: 100px;
 
  }

  @media(min-width:1400px){
	.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
		left: 100px !important;
		width: fit-content !important;
	  }
  }


  .swiper-pagination-bullet {
	background: var(--primary) !important;
	transition: .25s ease-in-out;
	width: 10px;
	height: 5px !important;
	border-radius: 2px !important;
  
  }

  .swiper-slide img {
	display: block;
	max-width: 100%;
	height: auto !important;
	object-fit: cover;
	border-radius: 14px !important;
  }

  .swiper-slide-active {
	margin-right: 50px !important;
  }

  .swiper-slide-prev {
	opacity: 0 !important;
	transition: .4s ease-in-out;
  }

  .citycode-text h4 {
	font-size: 20px;
  }


  .swiper-slide-active .citycode-text{
	opacity: 1 !important;
	display: flex;
	flex-direction: column;
	gap:15px;
	position: relative;
    z-index: 1000000000000 !important;
  }

  .citycode-text{
	opacity: 0 !important;
	transition: .5s;
  }

@media(min-width:540px){
	.overlay-text p{
		position: absolute;
		bottom:40px;
		text-align: left;
		left:40px;
		color:white;
		max-width: 280px;
	}
}

@media(max-width:768px){
	.polaroid-section {
		margin:10px auto !important;
	}

	.home .main {
		padding: 20px 20px 0 20px !important;
	}

	.carousel-row .col-40 {
		text-align: center !important;
	}
}



/***** CSS ANIMATION FRONT PAGE *****/

.img-gallery-container {
width: 100%;
height: 100%;
position: relative;
}


 .over-image {
    position: absolute;
    width: 100% !important;
    left: 65px;
    top: 90px;
    transition: .5s;
    opacity: 1;
    z-index: 10;
    max-width: 200px;
}

/***** START SPLASH PAGE *****/

.page-id-128 footer, .page-id-128 header {
	display: none;
}

.start-page {
	height: 100dvh;
	background: url('assets/img/golfo-napoli.jpg');
	text-align: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	background-position: center;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 30%;
	grid-column-gap: 0px;
	grid-row-gap: 0px;
}

.main:has(.enter-page){
	padding:0 !important;
}

.start-page .container-center {
	color: white;
	display: grid;
	place-content: center;
}

.start-page:before {
	content:'';
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: #00000033;
	z-index: 2;
}

.start-page h2 {
	color: #fff;
	font-size: 24px;
	letter-spacing: 1px;
	line-height: 28px;
	font-weight: 400;
	margin-bottom: 10px;
}

.start-page h4 {
	color: #fff;
	margin: 20px auto;
	font-size: 1rem;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.start-page .content {
	position: relative;
	z-index: 5;
	padding:0 20px;
}

.start-page * {
	margin:0;
	padding:0;
	box-sizing: border-box;
	font-family: 'Factor A';
}

.start-page img {
	max-width: 100%;
	margin:30px auto;
	padding:0 50px;
}

.start-page .container-bottom {
	grid-area: 2 / 1 / 3 / 2;
}

.container-bottom .content {
	display: flex;
	flex-direction: column;
	row-gap: 15px;
}

/***** END SPLASH PAGE *****/

.main {
	padding: 80px 20px 0 20px;
	margin: 0;
	text-align: center;
}

.myvideo-template-default .main {
	padding: 20px 20px 0 20px;
}

.custom-logo-link {
	display: block;
}

.custom-logo {
	max-width: 180px !important;
	height: auto;
}

.login-links {
	margin-bottom: 20px;
}

.header-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px 20px 0 20px;
	z-index:1;
	background-color: white;
	position: relative;
}

.avatar img {
	width: 36px;
	height: 36px;
	margin-top:0;
	margin-bottom: 0 !important;
}

/* .intro-text {
	line-height: 36px;
	font-weight: 700;
} */

#primary {
	text-align: center;
}

input[type="file"] {
	margin: 10px 0;
	height: 50px;
}

#primary h2 {
	color: #555;
	font-size: 1.5em;
	margin: 20px 0;
	font-weight: normal;
}

#primary a {
	color: var(--primary);
	text-decoration: none;
}

#primary a:hover {
	text-decoration: underline;
}

#primary .avatar {
	width: 120px;
	height: 120px;
	border-radius: 60px;
	margin: 20px 0;
	border: 5px solid var(--primary);
}

#primary input[type="file"] {
	margin: 20px 0 !important;
}

input[type="submit"], .cta-primary, .woocommerce button.button.alt, .woocommerce-Button.button, .showloginclick, .il-mio-account .woocommerce-Button.button{
	font-family: 'SF Pro Display';
	background-color: var(--primary);
	color: #fff !important;
	display: block;
	border: none;
	padding: 15px;
	cursor: pointer;
	border-radius: 30px;
	transition: background-color 0.3s ease;
	font-size: 17px;
	font-weight: 400;
	width: 100%;
	margin: 0 auto;
	text-decoration: none;
	transition: .3s ease-in-out;
}

.showloginclick {
	max-width: 340px;
	padding:5px !important;
}

.pagamento .showlogin {
	display: none;
}

.pagamento .showlogin.custom {
	display: block !important;
}

.cta-primary {
	background-color: var(--primary);
	color:var(--tertiary) !important;
}

input[type="submit"]:hover, .cta-primary:hover, .woocommerce button.button.alt:hover {
	background-color: var(--tertiary) !important;
	color:var(--primary) !important;
}

#primary input[type="submit"]:hover {
	background-color: #E84B2080;
}

.cta-secondary {
	font-family: 'SF Pro Display';
	background-color: var(--secondary);
	color: var(--black);
	display: block;
	border: none;
	padding: 15px;
	cursor: pointer;
	border-radius: 30px;
	transition: background-color 0.3s ease;
	font-size: 17px;
	font-weight: 400;
	width: 100%;
	margin: 0 auto;
	text-decoration: none;
}

.upload-form {
	background: #E9E9E9;
	border-radius: 20px;
	margin-bottom: 40px;
	padding: 0 20px 30px 20px;
}

.pagina-cliente-template-default .upload-form {
	place-content: center;
	display: grid;  
	height: 330px;
}

.gallery-mansory {
	position: relative;
	overflow: hidden;
	max-height: 620px;
	margin-bottom: 25px;
}

.gallery-mansory:before {
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	width: 100%;
	height: 70px;
	z-index: 2;
	background: rgb(255,255,255);
	background: linear-gradient(180deg, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 100%);
}

.gallery-mansory:after {
	position: absolute;
	content: '';
	bottom: 0;
	left: 0;
	width: 100%;
	height: 70px;
	z-index: 2;
	background: rgb(255,255,255);
	background: linear-gradient(0deg, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 100%);
}

.up {
	animation: marquee 40s linear infinite;
}

.down {
	animation: marqueedown 40s linear infinite;
}

@keyframes marquee {
	from {
		transform: translateY(0);
	}
	to {
		transform: translateY(-100%);
	}
}
@keyframes marqueedown {
	from {
		transform: translateY(-100%);
	}
	to {
		transform: translateY(0%);
	}
}

.flex {display: flex; flex-flow: row; flex-wrap: wrap;}
.flex--center{justify-content: center;}
.flex--vertical-c {align-items: center;}
.direction-column {flex-direction: column;}
.min-flex {max-width: 1200px; margin:40px auto 25px auto;}
.max-width-flex {max-width:1680px; margin:0 auto;}

.col{ flex: 1;}

[class*='col-'] { position: relative; padding: 0 25px;}

[class*='col-'] { width: 100%; padding:0 20px !important;}

.gallery-mansory .col-50 {
	width: 50% !important;
	padding: 0 5px !important;
}

.gallery-mansory img {
	margin: 5px 0 !important;
}

.sma-20 { width: 20%; }
.sma-25 { width: 25%; }
.sma-33 { width: 33.33%; }
.sma-50 { width: 50%; }
.sma-100 { width: 100%; }

.sma-hide{display:none}

.flex .flex{
	margin-left: -15px;
	margin-right: -15px;
}

.register-container {
	position: fixed;
	bottom: -100%;
	left: 0;
	width: 100%;
	border-radius: 20px 20px 0 0;
	background: #fff;
	padding: 20px;
	text-align: center;
	transition: bottom 0.3s ease-in-out;
	z-index: 5;
}

.register-container:before {
	content: '';
	position: absolute;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	background: #B2B2B2;
	width: 38px;
	height: 4px;
	border-radius: 100px;
}

.register-container h3 {
	font-weight: 400;
	font-size: 24px;
	margin: 28px;
}

.register-container p {
	font-size: 16px;
	font-weight: 300;
	color: #909090;
	width: 100%;
	margin: 0 auto 35px;
}

.register-container p a {
	color: #909090;
}

.register-container .cta, .social-login-wrapper .cta{
	color: var(--black);
	text-decoration: none;
	font-size: 18px;
	font-weight: 600;
	display: block;
	background: #EDEBEB;
	padding: 12px 20px;
	width: 100%;
	border-radius: 30px;
	margin-bottom: 10px;
}

.register-container img {
	margin: 0 12px 0px 0px;
	width: 24px;
	height: 24px;
	position: relative;
	top: 5px;
}

#image {
	display: none;
}

.upload-form span {
	font-family: 'Factor A';
	color: var(--primary);
	text-align: center;
	font-size: 18px;
	font-weight: 600;
}

.custom-file-upload {
	position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 250px;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    background-color: transparent;
    border-radius: 20px;
}

.cta-link {
	padding-bottom: 30px;
	margin-bottom: 30px;
	border-bottom: 1px solid #E9E9E9;
}

.cta-link .cta-secondary {
	color: #909090;
}

/********** FOOTER *********/

footer .cta-final {
	text-align: center;
}

.footer-cta {
	padding:50px 0 !important;
	text-align: center;
}

footer h2 {
	color: var(--tertiary);
	font-size: clamp(36px, 10vw, 100px);
	line-height: clamp(30px, 10vw, 90px);
}


 footer p {
	color:White;
 }


footer .cta-primary {
	background-color: var(--tertiary);
	color:var(--primary) !important;
}


footer .cta-primary a{
	color:var(--primary) !important;
}

footer {
    background-color: var(--primary);
    color: white;
    padding-top: 80px;
    position: relative;
    z-index: 0;
    margin-top: -80px;
	position: fixed;
	bottom: 0;
	/* height: 720px; */
	width: 100%;
}

footer .text-wrapper {
	padding:0 20px;
}

footer .favicon {
	max-width: 64px;
	margin:20px auto;
}

.copyrights {
	display: flex;
	justify-content: space-between;
	padding: 20px 0;
	border-top: 1px solid #E9E9E9;
	max-width: 1360px;
	margin:20px auto 0 auto;
	flex-direction: column;

}
.copyrights  p {
		color: #D9D9D9;
	}


.footer-main {
	display: flex;
	margin:20px 0;
	max-width: 1360px;
	margin:0 auto;
}

.footer-main img {
		margin:0;
	}

	.footer-main h4 {
		margin: 0;
		color: #D9D9D9
	}

	.footer-main ul, & li{
		list-style-type: none;
	}

	.footer-main a {
		color:white;
		margin:10px 0;
		display: block;
		text-decoration: none;
	}


/***** MYACCOUNT *******/

.account-title {
	margin-bottom: 50px;
	text-align: left;
}

fieldset {
	outline: 0;
    border: 0;
    margin-bottom: 20px;
}

.woocommerce-account .woocommerce-MyAccount-content {
    float: right;
    width: 80%;
    text-align: left;
}


.content-area.il-mio-account .woocommerce{
	max-width: 980px;
	margin: 0 auto 80px auto;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
    float: left;
    width: 15%;
    border-radius: 1px solid var(--light-gray);
}

@media(max-width:768px){
	.woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content {
		float: none;
    width: 100% !important;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content {
		margin-top: 50px !important;
	}
}



.woocommerce-MyAccount-navigation ul {
list-style-type: none;
text-align: left;
}


/***** CART **********/

.carrello .return-to-shop {
	display: none !important;
}


.empty-cart-container {
	max-width: 980px;
	margin:0 auto;
}

.empty-cart-container a{
	max-width: 350px;
	margin:40px auto 80px auto;
}

.woocommerce-cart .woocommerce-message {
	display: none;
}

@media(min-width:768px){
	.wc-block-components-sidebar-layout .wc-block-components-main {
		padding-right: 0 !important;
		width: 100% !important;
	}

	.wc-block-components-sidebar {
		padding-left: 0 !important;
		width: 100% !important;
	}

	.wc-block-components-sidebar-layout {
		display: flex;
		flex-wrap: wrap;
		margin: 0 auto 16px;
		position: relative;
		flex-direction: column !important;
		max-width: 900px !important;
		align-items: center !important;
	}

}
/* .wc-block-cart-item__image img{
    display: none !important;
} */

/* .wc-block-cart-item__image img {
	display: none;
} */

.wp-block-woocommerce-cart-order-summary-shipping-block {
	display: none !important;
}
.woocommerce-cart{
	font-family: 'Factor A';
	color: var(--primary);
}

.wc-block-cart .wc-block-cart__submit-container--sticky:before {
	border-radius: 20px 20px 0px 0px;
    background: var(--primary);
}

.wc-block-components-button:not(.is-link) .wc-block-components-button__text {
	color: var(--tertiary) !important;
	font-weight: 800;
	font-size: 20px;
    letter-spacing: .5px;
}

.wc-block-components-totals-item__description.wc-block-components-totals-shipping__via {
	display: none;
}

table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image img {
    margin: 0;
    width: 100%;
    max-width: 200px;
}

.is-mobile table.wc-block-cart-items .wc-block-cart-items__row, .is-small table.wc-block-cart-items .wc-block-cart-items__row {
    display: flex !important;
    padding: 16px 0;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.shop-cart svg {
	width: 30px;
	color:var(--primary) !important;
}

.st0{fill:#E94E24;}

.shop-cart path {
	color:transparent;
	color:var(--primary);
}

.custom-cart {
	position: relative;
}

.cart-count {
	background: var(--primary);
    border: 2px solid white;
    padding: 4px 9px;
    border-radius: 10px;
    display: block;
    border-radius: 60px;
    color: white;
    position: absolute;
    top: 0;
    right: -18px;
}

.wc-block-cart-item__wrap {
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}



.is-medium table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity, .is-mobile table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity, .is-small table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity {
	padding-right: 0 !important;
    margin-bottom: 20px;
}

.editor-styles-wrapper table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total, table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
    font-size: 1em;
    line-height: 1.8;
    text-align: right;
    margin-top: 10px;
    font-weight: 800;
    color: var(--primary) !important;
}

.wc-block-cart .wc-block-cart__submit-container {
    background: var(--primary);
    padding: 0;
    border-radius: 30px;
    padding: 5px 12px;
}

.has-dark-controls .wc-block-components-radio-control .wc-block-components-radio-control__input:checked:before, .wc-block-components-radio-control .wc-block-components-radio-control__input:checked:before {
    background: var(--primary) !important;
}

.wp-block-woocommerce-cart {
	max-width: 1280px;
	margin:0 auto !important;
}

.wc-block-components-totals-item__label {
    flex-grow: 1;
    text-align: left !important;
}

.is-large.wc-block-cart .wc-block-cart-items {
    border-bottom: 0 !important;
    border-spacing: 0;
}

.is-large.wc-block-cart .wc-block-cart-items td {
    border-top: 0px solid hsla(0,0%,7%,.11) !important;
    padding: 24px 0 24px 16px;
    vertical-align: top;
	width: 100px;
}

.wc-block-components-totals-shipping .wc-block-components-shipping-address {
    display: block;
    margin: 40px 0 20px 0 !important;
	text-align: left !important;
}

.wc-block-components-totals-wrapper {
    border-top: 0 !important;
	padding: 25px 0;
}

.wc-block-cart-items__row {
	background: #F8F8F8 !important;
    border-radius: 15px !important;
    padding-top: 25px !important;
}

.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
	color: var(--primary) !important;
}

.is-medium table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image, .is-mobile table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image, .is-small table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
    padding-right: 0 !important;
    margin-bottom: 15px !important;
}

/******** CHECKOUT *********/

.woocommerce-checkout #payment ul.payment_methods li {
	background: white;
    max-width: 60%;
    border-radius: 30px;
    margin: 15px 0;
    text-align: center;
	border: 1px solid var(--light-gray);

}

.woocommerce-info:has(.showcoupon) {
	font-size: 22px;
    text-align: left;
    color: var(--text) !important;
    font-weight: 400 !important;
    padding: 0;
    margin: 20px 0px 60px 0;
}

.single-adress {
	width: 100%;
    border-radius: 12px;
    border: 2px solid #e5e5e5;
    padding: 20px;
    margin-top: -20px;
    background: #efefef;
    color: black;
}

.single-adress p {
	margin:0;
}

.woocommerce button.button.alt {
	max-width: 60%;
    height: 60px;
    font-weight: 800;
}

@media(max-width:768px){
	.woocommerce-checkout #payment ul.payment_methods li {
		max-width: 100% !important;
	}

	.total_price {
		margin-top:30px 0 10px 0 !important;
	}
	
	.total-little {
		font-size: 18px !important;
		margin-bottom: 10px !important;
		color: var(--text) !important;
	}

.carrello .main {
	padding: 30px 20px 0 20px !important;
}
	
	.woocommerce button.button.alt {
		max-width: 100% !important;
	}
}

.woocommerce-checkout #payment ul.payment_methods li input {
	display: none;
}

li.payment_method_ppcp label:first-of-type img {
	float: none !important;
}

.wc_payment_method input[type="radio"]:checked + label {
    border: 2px solid var(--primary); /* Sostituisci con il colore che preferisci */
    border-radius: 30px !important;
}

.wc_payment_method input[type="radio"] + label {
	width: 100%;
	padding:10px;
}
.woocommerce-message .button.wc-forward {
	display: none;
}

.woocommerce form.checkout_coupon, .woocommerce form.login {
	border-bottom: 1px solid #cfc8d8 !important
}

.woocommerce-checkout form .form-row .button {
	background-color: var(--primary) !important;
	background: var(--primary) !important;
}

.product-image-wrapper {
	background: #efefef;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 20px;
    position: relative;
}
	.product-image-wrapper img {
		width: 300px;
	}


@media(max-width:480px){
	.product-image-wrapper img {
		width: 250px;
	}

	.classe-quadrata-checkout.product-image-wrapper:before {
		content: '';
		position: absolute;
		left: 17px !important;
		z-index: 1000;
		background-image: url(https://mycitycode.it/wp-content/uploads/2024/04/logo-icon-02.svg);
		width: 65px;
		height: 100px;
		transform: scale(0.65) !important;
		opacity: 1;
		background-repeat: no-repeat !important;
		top: 26px !important;
		z-index: 1000;
	}

	.classe-quadrata-checkout.product-image-wrapper:after {
		background-image: url(https://mycitycode.it/wp-content/themes/citycode/assets/img/qr-example.jpg);
		bottom: 30px !important;
		right: 14px !important;
		content: '';
		position: absolute;
		z-index: 1000;
		width: 70px;
		height: 67px;
		opacity: 1;
		transform: scale(.65) !important;
	}

	.product-image-wrapper:before {
		content: '';
		position: absolute;
		left: 10px !important;
		z-index: 1000;
		background-image: url(https://mycitycode.it/wp-content/uploads/2024/04/logo-icon-02.svg);
		width: 53px !important;
		height: 82px !important;
		transform: scale(0.45) !important;
		opacity: 1;
		background-repeat: no-repeat !important;
		top: 18px !important;
		z-index: 1000;
	}
	
	
	.product-image-wrapper:after {
		background-image: url(https://mycitycode.it/wp-content/themes/citycode/assets/img/qr-example.jpg);
		bottom: 23px !important;
		right: 6px !important;
		content: '';
		position: absolute;
		z-index: 1000;
		width: 70px;
		height: 70px;
		opacity: 1;
		transform: scale(0.4) !important;
	}


}

.cart-container {
    width: 100%;
    margin: 0 auto;
}

.cart-items {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
	margin-bottom: 50px;
	max-width: 890px;
	margin:40px auto 80px auto;
}

.cart-item {
    background: #F7F6F6;
    border-radius:32px;
    overflow: hidden;
    width: 100%; /* Adatta questa larghezza come necessario */
    display: flex;
    flex-direction: column;
	padding:20px;

}

.cart-item img {
    width: 100%;
    height: auto;
	max-width: 300px;
	background-color: var(--primary);
	padding:40px 20px;
	border-radius: 20px;
}

.custom-cart .product-image-wrapper {
	max-width: 400px;
	background-color: transparent;
	margin: 0 auto;
	padding: 0;
}


.cart-item-details span {
	font-family: 'Factor A' !important;
	font-weight: 600;
    margin-top: 0;
    font-size: 1.65em;
	color:var(--primary);
	line-height: 28px;
	display: block;
	margin-bottom: 20px;
}

.cart-item-details p {
    margin: 20px 0;
}

.cart-item-details a {
    color: #000 !important;
    border: none;
    padding: 10px;
    cursor: pointer;
   text-decoration: underline !important;
   font-weight: 800;
}

.total_price {
	font-size: 18px;
	color:var(--primary);
	font-weight: 600;
}

.quantity-controls {
	display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #EBEAEA;
    max-width: 110px;
    margin: 0 auto;
}

.quantity-controls button {
	background-color: transparent;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    color: var(--primary);
    font-weight: 800;
}

.quantity-controls input[type="number"] {
    width: 50px;
    text-align: center;
    margin: 0 5px;
}


.product-image-wrapper:before {
    content: '';
    position: absolute;
    left: 17px;
    z-index: 1000;
    background-image: url(https://mycitycode.it/wp-content/uploads/2024/04/logo-icon-02.svg);
    width: 65px;
    height: 100px;
    transform: scale(0.65);
    opacity: 1;
    background-repeat: no-repeat !important;
    top: 26px;
    z-index: 1000;
}


.product-image-wrapper:after {
    background-image: url(https://mycitycode.it/wp-content/themes/citycode/assets/img/qr-example.jpg);
    bottom: 38px;
    right: 21px;
    content: '';
    position: absolute;
    z-index: 1000;
    width: 70px;
    height: 67px;
    opacity: 1;
    transform: scale(.65);
}

.product-image-wrapper.classe-orizzontale-checkout:before {
    content: '';
    position: absolute;
    left: 14px;
    z-index: 1000;
    background-image: url(https://mycitycode.it/wp-content/uploads/2024/04/logo-icon-02.svg);
    width: 55px;
    height: 80px;
    transform: scale(0.5);
    opacity: 1;
    background-repeat: no-repeat !important;
    top: 23px;
    z-index: 1000;
}

.product-image-wrapper.classe-orizzontale-checkout:after {
    background-image: url(https://mycitycode.it/wp-content/themes/citycode/assets/img/qr-example.jpg);
    bottom: 26px;
    right: 9px;
    content: '';
    position: absolute;
    z-index: 1000;
    width: 70px;
    height: 67px;
    opacity: 1;
    transform: scale(.45);
}

.custom-cart .product-image-wrapper:has(.classe-quadrata-cart):after {
	background-image: url(https://mycitycode.it/wp-content/themes/citycode/assets/img/qr-example.jpg);
    bottom: 50px !important;
    right: 15px !important;
    content: '';
    position: absolute;
    z-index: 1000;
    width: 70px;
    height: 67px;
    opacity: 1;
    transform: scale(.60) !important;
}

.product-image-wrapper:has(.classe-quadrata-cart):before {
	content: '';
    position: absolute;
    left: 13px !important;
    z-index: 1000;
    background-image: url(https://mycitycode.it/wp-content/uploads/2024/04/logo-icon-02.svg);
    width: 65px !important;
    height: 100px !important;
    transform: scale(0.6) !important;
    opacity: 1;
    background-repeat: no-repeat !important;
    top: 39px !important;
    z-index: 1000;
}

.custom-cart .product-image-wrapper:has(.classe-orizzontale-cart):after {
    background-image: url(https://mycitycode.it/wp-content/themes/citycode/assets/img/qr-example.jpg);
    bottom: 42px !important;
    right: 7px !important;
    content: '';
    position: absolute;
    z-index: 1000;
    width: 70px;
    height: 70px;
    opacity: 1;
    transform: scale(.40) !important;
}

@media(max-width:350px){
	.custom-cart .product-image-wrapper:has(.classe-orizzontale-cart):after{
		background-image: url(https://mycitycode.it/wp-content/themes/citycode/assets/img/qr-example.jpg);
		bottom: 37px !important;
		right: 3px !important;
		content: '';
		position: absolute;
		z-index: 1000;
		width: 70px;
		height: 70px;
		opacity: 1;
		transform: scale(.3) !important;
	}

	.custom-cart .product-image-wrapper:has(.classe-orizzontale-cart):before {
		content: '';
		position: absolute;
		left: 6px !important;
		z-index: 1000;
		background-image: url(https://mycitycode.it/wp-content/uploads/2024/04/logo-icon-02.svg);
		width: 55px;
		height: 90px;
		transform: scale(0.4) !important;
		opacity: 1;
		background-repeat: no-repeat !important;
		top: 33px !important;
		z-index: 1000;
	}
}

.custom-cart .product-image-wrapper:has(.classe-orizzontale-cart):before {
	content: '';
    position: absolute;
    left: 10px !important;
    z-index: 1000;
    background-image: url(https://mycitycode.it/wp-content/uploads/2024/04/logo-icon-02.svg);
    width: 55px;
    height: 90px;
	transform: scale(0.45) !important;
    opacity: 1;
    background-repeat: no-repeat !important;
    top: 37px !important;
    z-index: 1000;
}


.product-image-wrapper.classe-orizzontale-cart:before {
    content: '';
    position: absolute;
    left: 14px;
    z-index: 1000;
    background-image: url(https://mycitycode.it/wp-content/uploads/2024/04/logo-icon-02.svg);
    width: 55px;
    height: 80px;
    transform: scale(0.5);
    opacity: 1;
    background-repeat: no-repeat !important;
    top: 23px;
    z-index: 1000;
}



.product-image-wrapper.classe-orizzontale-cart:after {
    background-image: url(https://mycitycode.it/wp-content/themes/citycode/assets/img/qr-example.jpg);
    bottom: 26px;
    right: 9px;
    content: '';
    position: absolute;
    z-index: 1000;
    width: 70px;
    height: 67px;
    opacity: 1;
    transform: scale(.45);
}

.woocommerce-error, .woocommerce-info, .woocommerce-message {
    padding: 1em 2em 1em 3.5em;
    margin: 0 0 2em;
    position: relative;
    background-color: #ffffff;
    color: #515151;
    border: 1px solid var(--primary);
    list-style: none outside;
    width: auto;
    word-wrap: break-word;
    border-radius: 15px;
}

.pagamento .woocommerce-message{
	display: none !important;
}

.pagamento .woocommerce-info {
	display: block !important;
}

.woocommerce-message, .woocommerce-info {
	display: none !important;
}

@media(max-width:768px){
	.pagamento .woocommerce-info {
		padding:0 !important;
	}
}

.woocommerce-message, .woocommerce-info {
    border-top-color: var(--primary);
	border:0 !important;
}

.woocommerce-info:before {
	display: none;
}

.woocommerce-info::before {
    color: var(--primary);
}

.pagamento .woocommerce-info {
	color:var(--primary);
	font-weight: 600;
}

	.pagamento .woocommerce-info a {
		margin-top:25px;
	}


.cta-secondary.showlogin {
	display: block !important;
    max-width: 280px;
    color: var(--primary);
    margin-top: 15px !important;
}

.woocommerce-checkout form .form-row {
    background-color: #fff;
    padding: 15px;
    border-radius: 5px;
}

.flex-column-c {
	display: flex;
    flex-direction: column;
    align-items: center;

}

.woocommerce-checkout form .form-row input.input-text{
    border-bottom: 1px solid #ccc;
	font-size: 16px !important;
}

input::placeholder  {
	font-size: 16px !important;
}

.woocommerce form .form-row select, select::placeholder {
	font-size: 16px !important;
}

.woocommerce-checkout form .form-row .button {
    background-color: #ff6600;
    border-color: #ff6600;
    color: #fff;
    border-radius: 5px;
    padding: 10px 20px;
}

.woocommerce-checkout input[type="radio"] {
	border-radius: 0 !important;
  }
  
  .woocommerce-checkout label {
	display: inline-block;
	position: relative;
	padding-left: 25px;
	cursor: pointer;
  }

  .shipping_methods_list {
	display: flex;
	gap:25px;
  }

  @media(max-width:768px){
	.shipping_methods_list {
		flex-direction: column;
		gap:0 !important;
	}

	.custom-text-shipping {
		text-align: center !important;
		margin-top:40px !important;
		margin-bottom: 10px !important;
	}

	.shipping-custom-form label::before {
		left:15px !important;
	}
  }

  .shipping-info input[type="radio"] {
    display: none;  
  }

.shipping-info label {
    display: block;  
    cursor: pointer;  
    padding: 40px;  
    width: 100%;  
	color: var(--black);

}

.shipping-info {
    list-style: none;  
	width: 100%;
	border-radius: 10px;
	border:1px solid var(--light-gray);
}
  
  .shipping-custom-form label::before {
	content: "";
	display: inline-block;
	position: absolute;
	left: 25px;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
    height: 30px;
	background-image: url("https://mycitycode.it/wp-content/themes/citycode/assets/img/icons/shipping.svg");
	background-size: cover;
	background-position: center;
  }

  .shipping-custom-form label[for="shipping_method_0_local_pickup:5"]::before {
	content: "";
	display: inline-block;
	position: absolute;
	left: 25px !important;
	top: 50%;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	background-image: url("https://mycitycode.it/wp-content/themes/citycode/assets/img/icons/ritiro.svg");
	background-size: cover;
	background-position: center;
  }
  
  .woocommerce ul#shipping_method {
    list-style: none outside;
    margin: 0;
    display: flex;
    justify-content: space-around;
    width: 100%;
    gap: 25px;
	flex-direction: column !important;
}

.woocommerce ul#shipping_method li {
    margin: 0 0 0.5em;
    line-height: 1.5em;
    list-style: none outside;
    background: white;
    width: 100%;
    border: 1px solid var(--secondary);
    padding: 50px 25px;
    border-radius: 8px;
}

.woocommerce-billing-fields {
	margin-top:20px;
}

.woocommerce-billing-fields h3{
	font-family: 'SF Pro Display' !important;
	color:#909090 !important;
	font-size:16px !important;
}

@media(min-width:768px){
	.woocommerce-billing-fields h3{
	text-align: left !important;
}
}

.form-wrapper{
	max-width: 1340px;
	margin: 0 auto;
}

.woocommerce-billing-fields__field-wrapper {
	display: grid;
	grid-template-columns: 1fr !important;
}

.woocommerce form .form-row-first, .woocommerce form .form-row-last, .woocommerce-page form .form-row-first, .woocommerce-page form .form-row-last {
    width: 100%;
    overflow: visible;
}

.custom-text-shipping {
	text-align: left;
}

.total-price {
	display: flex;
	flex-direction: column;
	gap:15px;
	justify-content: center;
	align-items: center;
	margin: 25px auto 0 auto !important;
}

	.total-price  h3 {
		font-size: 32px;
		margin: 0;
	}


li.shipping-info:has(input[type="radio"]:checked){
	border: 2px solid var(--primary) !important;
	border-radius: 10px;
  }


.checkout-wrapper {
	background: white;
	margin:40px auto 120px auto;
}

.checkout-wrapper .wc_payment_methods.payment_methods.methods {
		background: white;
	}
	.checkout-wrapper .form-row.place-order {
		padding: 0;
		background: white;
		border: 0;
	}
	.checkout-wrapper ul.payment_methods {
		border: 0 !important;
	}


@media(max-width:768px){
	.checkout-wrapper {
		width: 100% !important;
	}
}

.woocommerce #payment #place_order, .woocommerce-page #payment #place_order {
    float: left !important;
	border-radius: 30px !important;
}




@media(min-width:768px){
	.checkout-wrapper {
		max-width: 1340px;
		margin: 40px auto 120px auto;
		width: 100%;
	}

	.woocommerce ul#shipping_method li {
		width: 320px;
	}
	

	.woocommerce-billing-fields__field-wrapper {
		display: grid;
		grid-template-columns: 1fr 1fr !important;
	}

	.woocommerce ul#shipping_method {
		flex-direction: row !important;
	}
}

/******** ORDER CUSTOM USER PAGE **********/

body.single-cliente {
	padding-bottom: 60px;
	background-size: cover;
}

.logo-video-new {
	margin: 20px auto 0 auto;
	max-width: 180px;
	display: flex;
	justify-content: center;
}

.logo-video-new-doppio {
	margin: 20px auto 0 auto;
	max-width: 360px;
	display: flex;
	justify-content: center;
}

.order-container {
	/* background: url('https://mycitycode.it/wp-content/themes/citycode/assets/img/bg_user.jpg'); */
	max-width: 100%;
	margin: 0 auto;
	background-repeat: no-repeat;
	background-size: cover;
	padding:20px 0 40px 0;
	border-radius: 0px;
}


h2.order-date {
	color:var(--tertiary) !important;
}

.order-content {
	display: flex;
	align-items: center;
	width: 100%;
	margin-top: 30px;
	justify-content: center;
}

/* Stile Base del Contenitore della Slideshow */
.slider-container {
	overflow-x: auto; /* Abilita lo scorrimento orizzontale */
	scroll-snap-type: x mandatory; /* Obbliga gli elementi a fermarsi in posizioni fisse durante lo scorrimento */
	white-space: nowrap; /* Mantiene tutti gli slides su una singola linea orizzontale */
	-webkit-overflow-scrolling: touch; /* Migliora lo scorrimento touch su dispositivi mobili */
	width: 100%; /* Assicura che il contenitore si estenda per tutta la larghezza */
	max-width: 1120px;
    margin: 0 auto 50px auto;
	border-radius: 15px;

  }
  
  /* Stile degli Elementi Slide */
  .order-container {
	scroll-snap-align: start; /* Allinea gli elementi slide all'inizio del contenitore durante lo scorrimento */
	display: flex; /* Usa flexbox per miglior controllo del layout interno */
	flex-direction: column; /* Organizza i contenuti della slide in colonna */
	justify-content: center; /* Centra i contenuti verticalmente */
	align-items: center; /* Centra i contenuti orizzontalmente */
	width: 100vw; /* Imposta la larghezza di ciascuna slide uguale alla larghezza del viewport */
	box-sizing: border-box; /* Include padding e bordo nel calcolo della larghezza */
	margin-bottom: 20px;
	gap:25px;
  }
  
  .order-container img {
	max-width: 260px; /* Assicura che l'immagine non superi la larghezza della slide */
	height: auto; /* Mantiene le proporzioni originali dell'immagine */
	display: flex;
	justify-content: center;
  }
  
  /* Opzionale: Stili per migliorare la visibilità e l'usabilità */
  .order-container h2 {
		margin: 20px 0;
		line-height: 42px;
		font-size: 32px;
		text-align: center;
	}

	.video-wrapper {
		background: var(--primary);
		width: 95%;
		border-radius: 20px;
		padding: 30px 0 0 0;
		max-width: 1000px;
	}
  

  .upload-btn-label {
	margin: 0 auto;
	max-width: 1000px;
	text-align: center;
}

	.upload-btn-label .cta-secondary {
		max-width: 1120px !important;
	}


  .privacy-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	gap:10px;
	border-radius: 15px;
	line-height: 20px;
	padding:10px;
	flex-direction: column;
	max-width: 520px;
    margin: 20px auto;
}

	.privacy-wrapper input {
		margin:0 !important;
	}

	.privacy-wrapper p {
		color: var(--text);
		margin:0 !important;
	}
  
  .privacy-single {
	display: flex;
	gap: 15px;
    text-align: left; 
  }

  .privacy-input {   
	max-width: 13px !important;
	height: 20px;
	width: 13px !important;
	background-color: black;
  }

  input.privacy-input {   
	max-width: 13px !important;
	height: 20px;
	width: 13px !important;
  }

  .single-cliente p {
	font-weight: 400;
  }

  .order-container .video-order {
	height: 90% !important;
	width: 100% !important;
	border-radius: 15px;
	object-fit: cover;
	max-height: 300px;
    border: 7px solid white;
	margin-top:-5px !important;
  }

  .buttons_container__column {
	flex-direction: column !important;
	gap: 5px !important;
	width: 100%;
}

	.buttons_container__column .btn-label {
		width: 100%;
		font-size:16px !important;
		font-family: 'Factor A';
		text-decoration: none !important;
			background: #f5f6f6;
			border-radius: 10px;
			padding: 10px;
			margin-bottom: 0;
			font-size: 24px;
			line-height: 26px;
	}
			.buttons_container__column .btn-label a {
			text-decoration: none !important;
			font-size:16px !important;
			font-family: 'Factor A';
			color:black !important;
		}
	
  

  .buttons_container__column .btn-label:has(a), .buttons_container__column a {
	color:black !important;
   }

   @media(max-width:768px){
	.order-container h2 {
		margin: 20px 0;
		line-height: 1.3;
		font-size: 24px !important;
		text-align: center;
	}

	.privacy-single p {
		font-size:13px !important;
	}

	.order-content {
		margin-top:-5px !important;
	}

	.order-content .col-60 {
		padding: 0 10px !important;
	}

	.video-wrapper {
		padding: 20px 0 0 0 !important;
	}

	.order-container img {
		max-width: 240px !important;
		margin: 0 auto !important;
	}

	.order-container video {
		margin: 0 !important;
	}

	.order-container {
		padding: 20px 0 0px 0;
	}
   }

.single-cliente .main{
	margin-bottom: 80px;
}

@media(max-width:768px){
	.single-cliente .main{
		padding:40px 0 !important;
		margin-bottom: 40px;
	}
}
 
/******** VIDEO PAGE *********/

.svg-container svg, .svg-container path {
	stroke: transparent !important;
}

.content-area.video {
	overflow: hidden;
}

.page-id-147 .main {
	min-height: 100vh;
}

.svg-container {
	position: absolute;
    width: 100vw;
    left: -0px;
    top: 0;
    z-index: -1;
}

@media(max-width:768px){
.page-id-147 .main {
	padding: 20px 20px 60px 20px !important;
}


.svg-container {
	position: absolute;
    width: 100vw;
    left: 0%;
    top: 0;
    z-index: -1;
}

}

@media(min-width:768px){
	.video .big-input {
		max-width:600px;
		margin: 0 auto;
		min-height: auto !important;
	}

	.video .main {
		max-width:890px;
		margin: 0 auto;
	}

	}

/* .content-area.video {
background-image:url('https://www.mycitycode.it/wp-content/themes/citycode/assets/img/bg-upload.svg');
background-size: cover;
} */




.video-progress .text-wrapper__min {
	margin-top: 0;
	display: flex;
	flex-direction: column;
	gap:15px;
}

.video-progress .cta-primary, .video-progress .cta-secondary {
	padding:20px !important;
}

.videoContainer {
	display: none;
}

@media(max-width:768px){
	.player-image {
		width: 65%;
	}
}

/******** EDIT FOTO *********/

/* *** Fix for iPhone (search for target only iphone) ** */
@media(max-width:768px){
/* .cropper-canvas {
	max-width: 100%;
	height: 70vh !important;
	max-height: 70vh !important;
	border:20px solid black;
} */

#image-cropper-container, .img-container-final {
	max-height: 50vh !important;
}

/* .cropper-container {
	max-width: 100%;
	height: 50vh !important;
	max-height: 70vh !important;
	overflow-y: visible;
} */
}

.cropper-container{
	width: 100% !important;
} 


.cropper-container{
	width: 100% !important;
	max-height: 30% !important;
}

/* 
 */

/******************/

/* DETERMINO SE L'ANTEPRIMA È ORIZZONTALE O QUADRATA */

.edit-foto-text {
	margin:60px auto 0px auto !important;
	text-align: center;
}

/* Allineare a sx il testo da mobile */

.classe-orizzontale {
    /* Stili per immagini orizzontali */
    width: calc(284px * 2) !important;
    height: calc(183px * 2) !important;
	margin:0 auto !important;
	position: relative;
}

.classe-quadrata {
    /* Stili per immagini quadrate */
    width: calc(198px * 2) !important;
    height: calc(198px * 2)  !important;
	position: relative !important;
}

.img-container-final:has(.classe-orizzontale) {
	width: calc(284px * 2) !important;
    height: calc(185px * 2) !important;
	margin: 0 auto;
	position: relative;
}

.img-container-final:has(.classe-quadrata) {
	width: calc(198px * 2) !important;
    height: calc(198px * 2)  !important;
	margin: 0 auto;
	position: relative;
}

.img-container-final.inner {
	position: relative;
}

.content-area.personalizza-la-tua-foto {
	overflow: hidden;
}

.input-ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 480px;
    margin: 0 auto;
}

.input-ul li {
    display: flex;
    gap: 20px;
    justify-content: flex-start;
    max-width: 480px;
    margin: 10px;
    text-align: left;
}

.btn-label {
		width: 100%;
		font-family: 'Factor A';
		text-decoration: none !important;
		background: #f5f6f6;
		border-radius: 10px;
		padding: 10px;
		margin-bottom: 0;

}

@media(min-width:768px){
.personalizza-la-tua-foto .big-input {
	max-width:900px !important;
	margin: 0 auto 20px auto;
	min-height: auto !important;
}
}

@media(max-width:768px){

	.input-ul{
		list-style: none;
		display: flex;
		flex-direction: column;
		margin-top:30px !important;
	}

	.btn-label {
		width: 100%;
		font-family: 'Factor A';
		text-decoration: none !important;
		background: #f5f6f6;
		border-radius: 10px;
		padding: 10px;
		margin-bottom: 0;
		font-size: 24px;
		line-height: 26px;
}
	
	.input-ul li {
		display: flex;
		text-align: left;
		gap: 10px;
		margin: 0 0 20px 0;
	}

	.input-ul p {
		margin: 0 !important;
		font-size: 18px;
	}
	
	.btn-label {
		background: #f5f6f6;
		border-radius: 10px;
		padding: 10px;
		margin-bottom: 0;
		font-size: 24px;
		line-height: 26px;
	
	}

	.edit-foto-text {
		margin: 40px auto 0px auto !important;
		text-align: center;
		font-size: 28px;
		text-align: left;
		line-height: 32px;
	}
	
	.gallery-section p {
		text-align: left;
		margin-top:20px !important;
	}
}


.number-evidence {
    background: var(--primary);
    padding: 3px 9px;
    border-radius: 30px;
    color: var(--tertiary);
    font-weight: 800;
    margin-right: 5px;
    font-size: 18px;
	max-height: 28px;
}

.img-container-final:before {
	content: '';
    position: absolute;
    left: 8px;
    z-index: 1000;
    background-image: url(https://mycitycode.it/wp-content/uploads/2024/04/logo-icon-02.svg);
    width: 70px;
    height: 100px;
    transform: scale(0.75);
    opacity: 0;
    background-repeat: no-repeat !important;
    top: 4px;
}

.img-container-final:has(.classe-quadrata):before {
	opacity: 1 !important;
	
}

.img-container-final:has(.classe-quadrata):after {
	opacity: 1 !important;
}

.img-container-final:has(.classe-orizzontale):before {
	opacity: 1 !important;
    top: 2px !important;
    left: 4px ;
}

.img-container-final:has(.classe-orizzontale):after {
    opacity: 1 !important;
    bottom: 15px;
    right: 12px;
    transform: scale(.8);
}

.img-container-final:after {
    background-image: url(https://mycitycode.it/wp-content/themes/citycode/assets/img/qr-example.jpg);
    bottom: 12px;
    right: 12px;
    content: '';
    position: absolute;
    z-index: 1000;
    width: 70px;
    height: 70px;
    opacity: 0;
    transform: scale(.9);
}

@media(max-width:480px){
	.img-container-final:has(.classe-quadrata){
	width: calc(250px) !important;
    height:calc(250px) !important;
}

.arrow-input {
	width: 40% !important;
}

.img-container-final:has(.classe-orizzontale){
	width: calc(250px) !important;
    height:calc(250px) !important;
}

.classe-quadrata {
    width: calc(250px) !important;
    height: calc(250px) !important;
    position: relative !important;
}

.classe-orizzontale {
    /* Stili per immagini orizzontali */
    width: calc(283px) !important;
    height: calc(184px) !important;
	margin:0 auto !important;
	position: relative;
}


.img-container-final:has(.classe-orizzontale) {
	width: calc(284px) !important;
    height: calc(185px) !important;
	margin: 0 auto;
	position: relative;
}

.img-container-final:before {
    content: '';
    position: absolute;
    left: -10px;
    z-index: 1000;
    background-image: url(https://mycitycode.it/wp-content/uploads/2024/04/logo-icon-02.svg);
    width: 70px;
    height: 100px;
    transform: scale(0.5);
    opacity: 0;
    background-repeat: no-repeat !important;
    top: -17px;
}

.img-container-final:after {
    background-image: url(https://mycitycode.it/wp-content/themes/citycode/assets/img/qr-example.jpg);
    bottom: -9px;
    right: -6px;
    content: '';
    position: absolute;
    z-index: 1000;
    width: 70px;
    height: 70px;
    opacity: 0;
    transform: scale(.55);
}

.img-container-final:has(.classe-orizzontale):after {
    opacity: 1 !important;
    bottom: -10px;
    transform: scale(.44);
    right: -11px;
}

.img-container-final:has(.classe-orizzontale):before {
    opacity: 1 !important;
    left: -13px;
    top: -22px !important;
	transform: scale(.4) I !important;
}


}

.cropper-canvas, .cropper-canvas img {
	/* height: 100%; */
	 width: 100%; 
}

.form-foto-wrapper {
	max-width: 880px;
	margin: 0 auto;
}

#crop-and-save {
	margin:35px auto;
}

.cropper-canvas, .cropper-canvas img {
	height: 100%;
	width: 100%;
}

.form-foto-wrapper {
	max-width: 880px;
	margin: 0 auto;
}


  .cropper-bg {
    background: var(--primary) !important;
	max-height: auto;
}

.big-input {
	/* min-height: 40vh !important; */
	background-color: var(--light-gray);
	display: flex;
	place-items: center;
	cursor:pointer;
	width: 100%;
	flex-direction: column;
	justify-content: center;
	gap:20px;
	padding: 10px 10px 10px;
	border-radius: 20px;
	margin-bottom: 20px;
	/* Fix for mobile iphone max-height: 60%; */
}

.big-input:has(.loader--visible) {
	background-color: rgba(0,0,0,0.75);
}

.big-input.deleted {
    background-color: rgb(0 0 0 / 95%);
    z-index: 100000000000;
    position: fixed;
    top: 0;
    left: 0;
    right:0;
    bottom: 0;
    height: 100%;
    width: 100%;
}

.deleted #image-cropper-container {
    display:none !important;
}

.personalizza-la-tua-foto .big-input.deleted {
    max-width:100% !important;
}

.btn-continue {
	display: none;
}

form {
	border-bottom: 0 !important;
	position: relative;
	border-bottom: 1px solid var(--light-gray);
}

.main:has(.woocommerce-checkout){
	max-width: 1320px;
	margin:0 auto;
}

#image-cropper-container {
	width: 100%;
	max-width: 100%;
	position: relative;
	margin: 0 auto;
	height: 100%;
	/* overflow: hidden; */
	display: none;
}
#image-to-crop {
	display: none; /* Inizialmente nascosto fino al caricamento */
	/* width: fit-content;
    height: fit-content; */
	 width: 100%;
    height: auto; 
	border-radius: 20px;
	/* border:15px solid white; */
}

.gallery-section p {
	margin-top:40px;
}

.big-input li {
	list-style-type: none;
}

.actions {
	margin: 0 auto;
	transition:.5s ease-in;
	display: none;
}

.show {
	display: block;
}

.step {
	font-size: 24px;
	font-feature-settings: 'ss01' 1, 'ss02' 1, 'ss03' 1;
	font-family: 'Factor A';
	font-weight: 600;
}

.step-number {
	color: var(--black);
}

@media(max-width:768px){
	.step-final {
		text-align: left;
	}
}

.hidden-actions {
	display: none !important;
}

.btns, .text {
	display:flex;
	gap:25px;
	justify-content: center;
	width: 100%;
}


.btn, .btn-notext, .btn-text {
	background: var(--light-gray);
	border:0;
	width: 100%;
	height: 160px;
	border-radius: 10px;
	cursor: pointer;
	font-weight: 800;
	display: flex;
	flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.active path, .active rect, .active svg{
	stroke: var(--tertiary)
}

path, rect, svg {
	stroke: var(--black)
}

.btn.active, .btn-notext.active, .btn-text.active {
	background-color: var(--primary);
	color: white;
}

/* Esempio di stile per personalizzare i bordi */
.cropper-face,
.cropper-line,
.cropper-point {
    border-color: #444; /* Cambia il colore del bordo */
}

.cropper-face {
	border-radius: 25px;
}

.cropper-line {
    border: 4px solid white;
    opacity: 1 !important;
}

.cropper-dashed.dashed-v {
	border-left-width: 0 !important;
    border-right-width: 0 !important;
}

.cropper-dashed.dashed-h {
    border-bottom-width: 0 !important;
    border-top-width: 0 !important;
}

.cropper-point {
    background-color: white !important; /* Per le maniglie di ridimensionamento */
}

.cropper-modal {
    background-color: #000;
    opacity: 0.7 !important;
}

.text-input-wrapper {
	position: fixed;
    z-index: 10;
    bottom: -20px;
    background: white;
    height: 50%;
    width: 100%;
    display: grid;
    place-content: center;
    left: 0;
    border-radius: 20px;
    box-shadow: 0 -20px 70px 0px #00000044;
	gap:8px;
}

	.text-input-wrapper input {
		height: 50px;
		border: 0;
		border-bottom: 1px solid var(--secondary);
		width: 340px;
		margin-bottom: 20px;
		color: var(--text);
		font-size:18px;
	}


.cropper-view-box {
    position: relative;
	/* border: 15px solid white; */
	border-radius: 25px;
	outline: 15px solid white !important;
}


.cropper-view-box:after, .img-container-final.inner:after {
    position: absolute;
    content: '';
	left: -5px;
	top: -6px;
    z-index: 1000;
	width: var(--larghezza-anteprima, 50px); /* Dimensione iniziale */
	height: var(--altezza-anteprima, 50px); /* Dimensione iniziale */
    background: url(https://mycitycode.it/wp-content/uploads/2024/03/inside-cropper.png);
    color: white;
    background-repeat: no-repeat;
	aspect-ratio: 1/1;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.cropper-view-box::before, .img-container-final.inner:before {
    position: absolute;
    content: '';
	right: -6px !important;
	bottom: -6px !important;
    z-index: 1000;
	width: var(--larghezza-anteprima, 50px); /* Dimensione iniziale */
	height: var(--altezza-anteprima, 50px); /* Dimensione iniziale */
    background: url(https://mycitycode.it/wp-content/uploads/2024/03/qr_example.png);
    color: white;
    background-repeat: no-repeat;
	aspect-ratio: 1/1;	
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}


.btn-annulla::after, .btn-annulla::before{
	content: '';
	width: 20px;
	height: 3px;
	background: white;
	position: absolute;
	top: 18px;
	left: 10px;
  }
  
  .btn-annulla::before {
	rotate: 45deg;
  }

  .btn-annulla::after{
	rotate: 135deg;
  }

  .step-wrapper {
	display: flex;
	gap:20px;
	justify-content: center;
	font-family: 'SF Pro Display';
  }

  .arrow {
	color:var(--primary);
	font-feature-settings: 'ss01' 1, 'ss02' 1, 'ss03' 1;
	font-family: 'Factor A';
	font-size: 28px;
  }

  .personalizza-la-tua-foto .main{
	padding: 40px 20px 0 20px !important;
  }


  .loader {
    width: 48px;
    height: 48px;
    border: 5px solid #FFF;
    border-bottom-color: var(--primary);
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
	display: block;
	z-index: 10;
	position: relative;
	margin:0 auto !important;
  }

  .loader-container {
		position: fixed;
		z-index: 100000;
		background: #00000066;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: grid;
		place-content: center;
  }

	.loader--hidden {
		display: none;
	}

	.loader--visibile {
		display: block !important;
	}

    @keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
    } 


@media(min-width:768px){
	.cropper-view-box:after, .img-container-final.inner:after {
		width: var(--larghezza-anteprima, 80px) !important; /* Dimensione iniziale */
		height: var(--altezza-anteprima, 80px) !important; /* Dimensione iniziale */
	}


	.cropper-view-box::before, .img-container-final.inner:before {
		width: var(--larghezza-anteprima, 80px) !important; /* Dimensione iniziale */
		height: var(--altezza-anteprima, 80px)!important; /* Dimensione iniziale */
	}
}

@media(max-width:768px){
	.main:has(.big-input){
		padding:20px 20px !important;
	}

	.cropper-view-box {
		outline: 10px solid white !important;
		border-radius: 15px !important;
		border:0 !important;
	}
}

small {
	font-size: 11px;
	color: var(--text);
}

/* Myvideo Custom Page */

.single-myvideo .custom-logo {
	display: none !important;
}


/******** THANK YOU PAGE *********/

.woocommerce-order-details, .woocommerce-customer-details {
	display: none;
}

.woocommerce-order-received p {
	color:var(--tertiary);
}

.thank-you-page {
	display: grid;
	place-content: center;
	gap:30px;
	padding-bottom: 40px;
}

body:has(.thank-you-page) .shop-cart {
	display: none !important;
}
body:has(.thank-you-page) .main {
	padding: 40px 20px 0 20px !important;
}

.thank-you-page h1, .thank-you-page h2, .thank-you-page p{
	color:var(--tertiary) !important;
}

.page-id-80:has(.thank-you-page) footer h2{
	color:var(--primary) !important;
}
.page-id-80:has(.thank-you-page) footer p {
	color:#000 !important;
}

.page-id-80:has(.thank-you-page) .header-wrapper {
	background: var(--primary) !important;
	background-color: var(--primary) !important;
}

.page-id-80:has(.thank-you-page) footer{
	background: var(--light-gray) !important;
	
}

.pagamento:has(.thank-you-page) {
	background: var(--primary) !important;
	background-color: var(--primary) !important;
}

.woocommerce-order-details {
	max-width: 1240px;
    margin: 0 auto;
}

	.woocommerce-order-details p, .woocommerce-order-details table, .woocommerce-order-details bdi, .woocommerce-order-details span, .woocommerce-order-details p, .woocommerce-order-details h2{
		color: var(--tertiary) !important;
	}



.woocommerce-customer-details {
	font-family: 'Factor A';
}

.woocommerce-column {
	margin: 25px 0;
}

/******** LOGIN ***********/

@media(min-width:768px){

	.copyrights {
		flex-direction: row;
	}
	.image-login {
		display: block !important;
		background-size: cover;
		height: 100vh;
		background-image: url('https://mycitycode.it/wp-content/themes/citycode/assets/img/golfo-napoli.jpg');
	}
}

.login-content {
	max-width: 520px;
	margin: 0 auto;
}

.main:has(.login-area){
	padding:0;
	margin:0;
}

.content-login-area .cta-secondary, .social-login-wrapper {
	max-width: 350px !important;
	margin: 0 auto;
}

.form-row label {
	display: none !important;
}

.social-login-wrapper img {
	display: none;
}

.woocommerce-LostPassword.lost_password a{
	color:var(--primary);
}

.page-id-93 .header-wrapper, .page-id-93 footer, .page-id-139 .header-wrapper, .page-id-139 footer {
	display: none !important;
}
	
input:focus, input:active {
	border-bottom: 2px solid var(--primary) !important;
	color: var(--primary) !important;
	outline:0;
}

.login-area {
	height: 100vh;
	align-items: center;
}

input, select {
	height: 30px;
	border: 0;
	border-bottom: 1px solid var(--secondary);
	width: 100%;
	margin-bottom: 20px;
	color: var(--text);	
}

input::placeholder, .select2-container--default {
	font-size: 12px;
	color:var(--text);
	padding-bottom: 15px;
}

.select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 0;
    border-bottom: 1px solid var(--secondary);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text);
    line-height: 28px;
    text-align: left !important;
}

.image-login {
	display: none;
}

/*** WOOCOMMERCE LOADER ***/

/* Aggiungi questi stili nel tuo file CSS per personalizzare ulteriormente il loader */
.woocommerce-ajax-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.75);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.woocommerce-ajax-loading::before {
    content: '';
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}



/******** MEDIA ***********/

@media (min-width: 768px) {

	.col-20 {
		width: 20%;
	}

	.col-25 {
		width: 25%;
	}

	.col-30 {
		width: 30%;
	}

	.col-33 {
		width: 33.33%;
	}

	.col-40 {
		width: 40%;
	}

	.col-50 {
		width: 50%;
	}

	.col-60 {
		width: 60%;
	}

	.col-70 {
		width: 70%;
	}

	.col-80 {
		width: 80%;
	}

	.col-90 {
		width: 90%;
	}

	.col-100 {
		width: 100%;
	}
	
}

@media (min-width: 480px) and (max-width: 1199px) {

	.tab-20 {
		width: 20%;
	}

	.tab-25 {
		width: 25%;
	}

	.tab-33 {
		width: 33.33%;
	}

	.tab-50 {
		width: 50%;
	}

	.tab-100 {
		width: 100%;
	}

}

@media (min-width: 1200px) { 

}

@media(min-width:540px){ 

	.text-wrapper.cta-final {
		margin:0px auto 240px auto !important;
	}
	
	footer {
		height: 590px !important;
		width: 100%;
	}


.gallery.flex img {
	width: calc(100% / 5);
	margin:0;
}

.gallery.flex {
	gap:10px;
	flex-wrap:nowrap;
	justify-content: center;
}

.gallery {
	overflow-x: hidden !important;
	overflow-y: hidden !important;
}

}

@media(max-width:380px){
	.buttons_container .cta-primary, .buttons_container .cta-secondary {
		padding: 10px 20px;
		max-width: 170px;
		margin: 0;
	}

	.cta-secondary, .cta-primary {
		font-size: 15px;
	}

	.custom-logo {
		max-width: 130px !important;
		height: auto;
	}

	
}

.privacy-policy .main, .cookie-policy .main {
	text-align: left !important;
	max-width: 1080px;
	margin: 0 auto 80px auto;
}

@media(max-width:768px){
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
	margin-bottom: 15px !important;
}
}

.single-qrcode .content-area, .single-myvideo .content-area{
	overflow: hidden;
}

.single-qrcode .custom-logo {
	display: none !important;
}

a.iubenda-tp-btn.iubenda-cs-preferences-link {
  display: none !important;
}

button.iubenda-tp-btn.iubenda-cs-preferences-link {
  display: none !important;
}

/* SINGLE BRAND */

.single-brands .content-area {
	box-shadow: none !important;
	margin-bottom:50px !important;
}

.single-brands .main {
		padding: 40px 20px 0 20px;
		margin: 0;
		text-align: center;
	
}

.single-brands .uploadform {
	padding:0 20px;
}

.brand-logo img {
	max-width: 300px !important;
    margin: 25px auto 15px auto;
    text-align: center;
    display: flex;
}

.single-brands .privacy-wrapper {
	margin:20px auto !important;
	max-width:450px;
}

.form-p {
	max-width: 450px;
    text-align: center;
    margin: 0 auto 10px auto;
    background: white;
    padding: 10px;
    border-radius: 15px;
    font-size: 14px;
    border: 2px solid var(--secondary);
}

.form-p strong, .form-p b {
	font-size: 13px;
}

.brand-collab h2{
	color: var(--tertiary);
    padding: 10px;
    text-align: center;
	margin:0;
}


.single-brands .order-container {
	padding: 20px 0 10px 0;
}

.single-brands video {
	margin-bottom:0;
}

.user_email_selected {
	max-width: 450px; 
	height: 50px; 
	border: 2px solid var(--secondary); 
	border-radius: 15px; 
	margin:0 auto;
	display: flex; 
	justify-content: center;
	padding: 0 20px;
}

.img-brand {
	width:100% !important; 
	max-width:1000px !important; 
	border-radius:15px; !important; 
	display:flex;
	justify-content: center;
	margin-top:100px;
}

@media(max-width:768px){
	.single-brands  .order-container {
		padding: 0 !important;
	}
	
	img.img-brand {
	width:95% !important; 
	max-width:95% !important; 
	border-radius:15px; !important; 
	margin-top:50px;
	display:flex;
	justify-content: center;
}


.single-brands .uploadform {
	padding:0 20px;
}
	}

	@media(max-width:400px){
		.single-brands svg {
			max-width:100%;
		}
		}


/* CHANGE PLUGIN WHATSAPP */

.wsc_btn {
    padding: 0px 14px !important;
	text-decoration: none;
}

.wsc_btn p {
	margin-bottom: 0;
	color: white;
}

@media(max-width:768px){	
.wsc_btn p {
	display: none;

}
}

/* STORICO ORDINI */
.single-order-wrapper {
    display: block;
    padding: 20px 10px;
    border: 3px solid var(--secondary);
    border-radius: 12px;
	transition: all 0.3s ease-in-out;
	position: relative;
}

.single-order-wrapper:hover {
    border: 3px solid var(--primary);

}

.single-order-wrapper a {
	display: flex;
    flex-direction: column;
    text-decoration: none;
    align-items: flex-start;
    gap: 35px;
	text-align: left;
}

.grid-3:has(.single-order-wrapper) {
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	display: grid;
	max-width: 1080px;
    margin: 0 auto 80px auto;
}

@media (max-width: 768px) {
	.grid-3:has(.single-order-wrapper) {
		grid-template-columns: 1fr;
		gap: 40px;
		display: grid;
		max-width: 100%;
	}
}

.single-order-wrapper img {
	max-width: 60px;
	border-radius:8px;
	border:2px solid var(--secondary);
	object-fit:cover;
	margin: 0px 0 15px 0;
	position: absolute;
	top: 10px;
    right: 10px;
	scale: 1.1;
}

.single-order-wrapper .meta-info {
	display: flex;
	justify-content: space-between;
	width: 100%;
    align-items: center;
}

.orders-message {
	margin-bottom:25px;
	display: inline-block;
}

.order-message-wrapper .help {
	display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
	font-size:14px;
}

.order-container-wrapper {
	padding:25px;
	border-radius:18px;
	background-color: #F7F6F6;
}

.order-container-wrapper  .single-item-wrapper:not(:last-child) {
	padding-bottom:40px;
	border-bottom:3px solid var(--light-gray);
	margin-bottom:20px;
}

.order-id-title {
	color: var(--primary);
	font-size: 26px;
	margin-bottom:0px;
}

.single-item-wrapper .meta-info{
	position: relative;
	margin-bottom: 20px;
}

.meta-info.no-preview:before, .meta-info.no-preview:after {
	display: none;
}

.single-item-wrapper .meta-info:before{
    background-image: url(https://mycitycode.it/wp-content/themes/citycode/assets/img/qr-example.jpg);
    bottom: -5px !important;
    right: -5px;
    content: '';
    position: absolute;
    z-index: 1000;
    width: 70px;
    height: 67px;
    opacity: 1;
    transform: scale(.55) !important;
}

.single-item-wrapper .meta-info:after{
    content: '';
    position: absolute;
    left: -8px !important;
    z-index: 1000;
    background-image: url(https://mycitycode.it/wp-content/uploads/2024/04/logo-icon-02.svg);
    width: 65px;
    height: 100px;
    transform: scale(0.5) !important;
    opacity: 1;
    background-repeat: no-repeat !important;
    top: -18px !important;
    z-index: 1000;
	}

	.order-container-wrapper img {
        max-width: 240px !important;
        margin: 0 auto !important;
    }

	.order-container-wrapper{
		scroll-snap-align: start;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		box-sizing: border-box;
		margin-bottom: 20px;
		gap: 0px;
	}

	.order-container-wrapper img {
		border: 1px solid #cdcdcd;
        border-radius: 20px;
	}

	@media(min-width:768px){
		.order-container-wrapper {
			max-width:600px;
			margin:20px auto;
		}

		.order-container-wrapper img {
			max-width: 340px !important;
			margin: 0 auto !important;
		}

		.single-item-wrapper .meta-info:before {
			background-image: url(https://mycitycode.it/wp-content/themes/citycode/assets/img/qr-example.jpg);
			bottom: 10px !important;
			right: 6px!important;
			content: '';
			position: absolute;
			z-index: 1000;
			width: 70px;
			height: 67px;
			opacity: 1;
			transform: scale(.75) !important;
		}

		.single-item-wrapper .meta-info:after {
			content: '';
			position: absolute;
			left: 0 !important;
			z-index: 1000;
			background-image: url(https://mycitycode.it/wp-content/uploads/2024/04/logo-icon-02.svg);
			width: 65px 
			height: 100px;
			transform: scale(0.75) !important;
			opacity: 1;
			background-repeat: no-repeat !important;
			top: -4px !important;
			z-index: 1000;
		}
	}

	.storico-ordini .main {
		padding: 40px 20px 0 20px !important;
	}


	/* UPDATE LOADER */

	body.single-cliente:has(.loader--visible):after, .init-loader:after {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000000000;
		content: '';
		background: rgba(0, 0, 0, 0.85);
		width: 100%;
		height: 100%;
	}

	body.single-cliente, .init-loader {
		position: relative;
	}

	.single-cliente .loader, .init-loader .loader {
    top: -50%;
    left: 0%;
    transform: translate(-50%, -50%);
    z-index: 10000000000000;
	}

	.init-loader .loader {
	    top: calc(50% - 24px);
    	left: calc(50% - 24px);
		transform: translate(-50%, -50%);
		z-index: 10000000000000;
		position: absolute;
		}

#add_payment_method #payment ul.payment_methods li img, .woocommerce-cart #payment ul.payment_methods li img, .woocommerce-checkout #payment ul.payment_methods li img {
	display: none;
}

.bando-footer {
	    max-width: 250px;
    display: flex;
    justify-content: center;
}