/*------------------------------------*\
		GENERAL
	\*------------------------------------*/

	*,
	*:after,
	*:before {
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-font-smoothing: antialiased;
		font-smoothing: antialiased;
		text-rendering: optimizeLegibility;
	}

	html {
		min-width: 350px;
		min-height: 200px;
	}

	html, body {
		height: 100%;
		width: 100%;
	}

	body {
		margin: 0;
		font-family: "Karla", "sans-serif", "sans";
		color: #222; 
		line-height: 1.5;
		background-image: url('../images/trama1.jpg');
		background-size: 500px;
		background-attachment: fixed;
	}

	a {
		color: #222;
		text-decoration: none;
		outline: none;
	}

	a:focus,
	a:hover,
	a:active,
	a:visited {
		color: #222;
		text-decoration: underline;
		outline: none;
	}

	.clear:before,
	.clear:after {
		content: ' ';
		display: table;
	}

	.clear:after {
		clear: both;
	}

	.clear {
		*zoom: 1;
	}

	img {
		max-width: 100%;
		max-height: 100%;
		vertical-align: bottom;
		height: auto;
		object-fit: contain;
	}

	input:focus {
		outline: 0;
		border: 1px solid #04A4CC;
	}

	ul {
		padding: 0;
		margin: 0;
	}
	
	@media (min-width: 950px) {
		.container {
			width: 100%;
			max-width: 90%;
		}
	}
	
	@media (max-width: 949px) {
		.container {
			width: 100%;
			max-width: 100%;
			padding: 0;
		}
	}


	/*------------------------------------*\
		COMMON
	\*------------------------------------*/

	.wrapper {
		overflow: hidden;
		background-color: #faf8ee;
        width: 100%;
	}

	.italic {
		font-style: italic;
	}

	span.b {
		font-weight: bold;
	}

	span.allign-text {
		display: table-cell; 
		vertical-align: middle; 
		text-align: center; 
	}

	span.line {
		display: inline-block;
		width: 70px;
		height: 2px;
		background: #d09600;
		margin-bottom: 8px;
		position: relative;
	}

	span.line:before {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		height: 13px;
		width: 2px;
		background: #d09600;
		content: "";
	}

	span.line.line-left {
		margin-right: 10px;
	}

	span.line.line-right {
		margin-left: 10px;
	}

	span.line.line-right:before {
		right: auto;
		left: 0;
	}

	.column-1200 {
		max-width: 1200px;
		padding-left: 15px;
		padding-right: 15px;
		margin: auto;   
	}

	.column-1400 {
		max-width: 1400px;
		padding-left: 15px;
		padding-right: 15px;
		margin: auto;   
	}

	.horizontal-flip {
		-moz-transform: scaleX(-1);
		-o-transform: scaleX(-1);
		-webkit-transform: scaleX(-1);
		transform: scaleX(-1);
		filter: FlipH;
		-ms-filter: "FlipH";
	}

	.no-margin {
		margin: 0;
	}

	.no-padding {
		padding: 0;
	}

	.no-margin-padding {
		margin: 0;
		padding: 0;
	}


	/*------------------------------------*\
		GRADIENTS
	\*------------------------------------*/

	.grayMesh {
		background-color: #E4E4E1;
		background-image: radial-gradient(at top center, rgba(255,255,255,0.03) 0%, rgba(0,0,0,0.03) 100%), linear-gradient(to top, rgba(255,255,255,0.1) 0%, rgba(143,152,157,0.60) 100%);
		background-blend-mode: normal, multiply;
	}

	.blackMesh {
		background-color: #434343;
		background-image: radial-gradient(circle, #434343 0%, black 100%);
	}

	.blackMesh_light {
		background-color: #434343;
		background-image: radial-gradient(circle, #434343 0%, #000000c2 100%);
	}

	.blueMesh {
		background: #01bbd4;
		background: radial-gradient(circle, #01bbd4, #01bbd4e8);
	}

	.grayMesh_light {
		background-color: #ebedee;
		background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
	}

	.grayMesh_UltraLight {
		background-color: #eef1f5;
		background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);
	}

	.purpleMesh {
		background: #41295a;
		background: -webkit-linear-gradient(to right, #2f0743f0, #41295af7);
		background: linear-gradient(to right, #2f0743f0, #41295af7);
	}

	.redMesh {
		background: #a52a2a;
		background: radial-gradient(circle, #ff6f5e, #a52a2a);
	}

	.lightBlueTexture {
		background: rgb(140,222,218);
		background: -moz-linear-gradient(top, rgb(124, 181, 179) 0%, rgb(69, 140, 136) 100%);
		background: -webkit-linear-gradient(top, rgb(124, 181, 179) 0%,rgb(69, 140, 136) 100%);
		background: linear-gradient(to bottom, rgb(124, 181, 179) 0%,rgb(69, 140, 136) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8cdeda', endColorstr='#50c9c3',GradientType=0 );
	}

	.gold-text {
		color: #c3a343;
		-webkit-text-fill-color: transparent;
		background: -webkit-linear-gradient(transparent, transparent), url('../images/Gold_background2.jpg') repeat;
		background: -o-linear-gradient(transparent, transparent);
		-webkit-background-clip: text;
	}


	/*------------------------------------*\
		LOGO
	\*------------------------------------*/

	#logo {
		padding-top: 25px;
		padding-bottom: 40px;
	}

	#logo img {
		max-width: 180px;
		padding-left: 15px;
		padding-right: 15px;
	}


	/*------------------------------------*\
		MENU
	\*------------------------------------*/

	#menu {
		padding-bottom: 35px;
	}

	#menu .title {
		font-weight: 700;
		font-size: 23px;
		color:#9ac6ba;
		margin-bottom: 14px;
	}

	#menu .button {
		min-width: 230px;
		margin-bottom: 18px;
		border: 1px solid transparent;
		border-radius: 9px;
		font-size: 15px;
		background-color: #9ac6ba !important;
		height: 42px;
		line-height: 42px;
		border: none;
		color: #fff;
		-webkit-box-shadow: 2px 2px 4px -2px rgba(0,0,0,.6);
		-moz-box-shadow: 2px 2px 4px -2px rgba(0,0,0,.6);
		box-shadow: 2px 2px 4px -2px rgba(0,0,0,.6);
		transition: all 1.25s cubic-bezier(.19,1,.22,1);
		font-family: "Karla";
		text-transform: uppercase;
	}

	#menu .button:hover {
		background-color: #222 !important;
		text-decoration: underline;
	}


	/*------------------------------------*\
		FOOTER
	\*------------------------------------*/

	#footer {
		padding-bottom: 15px;
		max-width: 400px;
		text-align: center;
		margin: auto;
	}


	/*------------------------------------*\
		backButton
	\*------------------------------------*/

	.backButton a {
		position: fixed;
		bottom: 15px;
		left: 15px;
		margin-bottom: 0;
		border: 1px solid transparent;
		border-radius: 9px;
		font-size: 15px;
		background-color: #9ac6ba !important;
		height: 42px;
		line-height: 42px;
		border: none;
		color: #fff;
		-webkit-box-shadow: 2px 2px 4px -2px rgba(0,0,0,.6);
		-moz-box-shadow: 2px 2px 4px -2px rgba(0,0,0,.6);
		box-shadow: 2px 2px 4px -2px rgba(0,0,0,.6);
		transition: all 1.25s cubic-bezier(.19,1,.22,1);
		font-family: "Karla";
		text-transform: uppercase;
	}

	.backButton a:hover {
		background-color: #222 !important;
		text-decoration: underline;
	}
	
	
	/*------------------------------------*\
		WHATSBUTTON
	\*------------------------------------*/

	/* Bottone WhatsApp flottante */
	.WHATSBUTTON{
	  position: fixed;
	  right: calc(18px + env(safe-area-inset-right));
	  bottom: calc(18px + env(safe-area-inset-bottom));
	  z-index: 2147483647;              /* sopra tutto */
	  width: 64px;
	  height: 64px;
	  border-radius: 50%;
	  background: #25D366;              /* verde WhatsApp */
	  color: #fff;                      /* usata dal logo (currentColor) */
	  display: grid;
	  place-items: center;
	  text-decoration: none;
	  box-shadow: 0 10px 25px rgba(0,0,0,.22);
	  transition: transform .15s ease, filter .2s ease, box-shadow .15s ease;
	}
	.WHATSBUTTON:hover{ transform: translateY(-2px); }
	.WHATSBUTTON:active{ transform: translateY(0); filter: brightness(.96); }
	.WHATSBUTTON:focus-visible{
	  outline: none;
	  box-shadow: 0 0 0 3px rgba(37,211,102,.35), 0 10px 25px rgba(0,0,0,.22);
	}

	/* Logo */
	.WHATSBUTTON svg{
	  width: 60%;
	  height: 60%;
	  display: block;
	  fill: currentColor;               /* così il logo resta bianco */
	}

	/* Responsive */
	@media (max-width: 480px){
	  .WHATSBUTTON{ width: 58px; height: 58px; }
	}
	
	/* —— Pulse ogni 2s + glow morbido + piccolo bounce —— */
	.WHATSBUTTON{
	  --wa-pulse-interval: 2s;                 /* frequenza: ogni 2 secondi */
	  isolation: isolate;
	  animation: wa-bounce var(--wa-pulse-interval) cubic-bezier(.22,.61,.36,1) infinite;
	}

	/* Anello che si espande (ping) sincronizzato e più morbido */
	.WHATSBUTTON::after{
	  content: "";
	  position: absolute;
	  inset: -6px;
	  border-radius: 50%;
	  z-index: -1;
	  pointer-events: none;
	  background: radial-gradient(circle, rgba(37,211,102,.33) 0%, rgba(37,211,102,0) 60%);
	  opacity: 0;
	  transform: scale(.9);
	  animation: wa-ping var(--wa-pulse-interval) cubic-bezier(.16,.84,.44,1) infinite;
	}

	/* Glow + piccolo bounce (leggero) del bottone */
	@keyframes wa-bounce{
	  /* riposo iniziale */
	  0%, 55%{
		transform: translateY(0) scale(1);
		box-shadow: 0 10px 25px rgba(0,0,0,.22);
	  }
	  /* inizio enfasi, crescita lenta */
	  70%{
		transform: translateY(-2px) scale(1.04);     /* leggero sollevamento */
		box-shadow: 0 12px 28px rgba(0,0,0,.25), 0 0 0 10px rgba(37,211,102,.22);
	  }
	  /* rimbalzo (bounce) piccolo */
	  82%{
		transform: translateY(0) scale(0.985);
		box-shadow: 0 10px 24px rgba(0,0,0,.20);
	  }
	  90%{
		transform: translateY(-1px) scale(1.015);
		box-shadow: 0 11px 26px rgba(0,0,0,.22);
	  }
	  /* ritorno */
	  100%{
		transform: translateY(0) scale(1);
		box-shadow: 0 10px 25px rgba(0,0,0,.22);
	  }
	}

	/* Ping più lento/soffice (anello) */
	@keyframes wa-ping{
	  0%, 55%{
		opacity: 0;
		transform: scale(.9);
	  }
	  70%{
		opacity: .45;
		transform: scale(1.28);
	  }
	  82%{
		opacity: .22;
		transform: scale(1.52);
	  }
	  100%{
		opacity: 0;
		transform: scale(1.6);
	  }
	}

	/* Pausa quando l'utente interagisce */
	.WHATSBUTTON:hover,
	.WHATSBUTTON:focus-visible{
	  animation-play-state: paused;
	}
	.WHATSBUTTON:hover::after,
	.WHATSBUTTON:focus-visible::after{
	  animation-play-state: paused;
	}

	/* Rispetto preferenze utente */
	@media (prefers-reduced-motion: reduce){
	  .WHATSBUTTON, .WHATSBUTTON::after{ animation: none !important; }
	}


	/*------------------------------------*\
		varie
	\*------------------------------------*/

	#bannerdelivery {
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 70px;
		max-width: 1200px;
		padding-left: 25px;
		padding-right: 25px;
	}

	#bannerdelivery > * {
		gap: 30px;
		/*flex-direction: column;*/
		display: flex;
		justify-content: center;
		align-items: center;
	}

	#bannerdelivery .description > * {
		height: fit-content;
		display: inline-block;
		font-size: 18px;
	}

	#bannerdelivery .button {
		margin-top: 20px;
		min-width: 230px;
		margin-bottom: 18px;
		border: 1px solid transparent;
		border-radius: 9px;
		font-size: 15px;
		background-color: #9ac6ba !important;
		height: 42px;
		line-height: 42px;
		border: none;
		color: #fff;
		-webkit-box-shadow: 2px 2px 4px -2px rgba(0,0,0,.6);
		-moz-box-shadow: 2px 2px 4px -2px rgba(0,0,0,.6);
		box-shadow: 2px 2px 4px -2px rgba(0,0,0,.6);
		transition: all 1.25s cubic-bezier(.19,1,.22,1);
		font-family: "Karla";
		text-transform: uppercase;
		zoom: 1.2;
	}
	
	#bannerdelivery .description h3 {
		max-width: 400px;
		margin: auto;
		margin-bottom: 25px;
		line-height: normal;
		font-weight: bold;
	}

	#bannerdelivery .button:hover {
		background-color: #222 !important;
		text-decoration: underline;
	}
	
	#bannerdelivery img {
        display: block;
	}
	
	#bannerdelivery .sub {
		font-size: 16px;
		font-style: italic;
		max-width: 400px;
		display: inline-block;
	}
	
	@media screen and (max-width: 1023px) {
	  #bannerdelivery > * {
		flex-direction: column;
        height: fit-content;
	  }
	  #bannerdelivery .description {
		order: 0;
	  }
	  #bannerdelivery .img {
		order: 1;
	  }
	}
	
	@media (max-width: 949px) {
		#bannerdelivery {
			padding-left: 15px;
			padding-right: 15px;
			margin-bottom: 50px;
		}
	}