/* VARS */
:root {
	--header-height: 100px;
}

/*RESET*/

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

ul[class],
ol[class] {
  padding: 0;
}

body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

body {
  min-height: 100dvh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

ul[class],
ol[class] {
  list-style: none;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* img {
  max-width: 100%;
  display: block;
} */

input,
button,
textarea,
select {
  font: inherit;
  outline: none;
}

/*GENERALI*/

textarea {
	resize: vertical;
}

.clear {
    clear: both;
}

.inner-header , .header-menu , .container {
	max-width: 1440px;
	margin: 0 auto;
	position: relative;
    padding: 0 40px;
    box-sizing: border-box;
}

.container.very-small {
	max-width: 1000px;
}

.container.full-no-margin {
	max-width: 100%;
	padding: 0;
}

.container-overflow {
	overflow: hidden;
}

/* Rinforzo overflow hidden per PWA mobile */
.container-overflow.pwa-mobile {
	overflow: hidden !important;
	max-width: 100vw !important;
}

a {
	text-decoration: none;
    transition-property: color;
}

.filtro {
    width: 100%;
    height: 100%;
}

.bg-blur-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-size: cover;
    background-position: center;

    /* Add the blur effect */
    filter: blur(8px);
    -webkit-filter: blur(8px);
}

header , section {
    margin-bottom: 20px;
}

header.nomargin-desktop , section.nomargin-desktop {
    margin-bottom: 0;
}

.btn {
    padding: 10px 20px;
    border-width: 1px;
    border-style: solid;
    display: inline-block;
    cursor: pointer;
	text-transform: uppercase;
	font-weight: 700;
	text-align: center;
	width: fit-content;
}

.btn.centro {
	margin: 0 auto;
}

.btn.disabled {
	cursor: default;
}

.btn.con-foto {
	line-height: 30px;
}

.btn.con-foto img {
	margin-right: 20px;
}

.circle .fa-solid {
    line-height: 35px;
    width: 37px;
    border-radius: 50%;
	border-width: 1px;
    border-style: solid;
	cursor: pointer;
}

.input {
    padding: 10px 20px;
    border-width: 0;
}

.input.full {
    width: 100%;
}

.form-box .box {
	margin-top: 20px;
}

.form-box label.input {
    font-weight: 600;
    border: none;
}

.form-box label {
    display: inline-block;
    width: 150px;
}

.form-box label.mid-50 {
    float: left;
	line-height: 46px;
}

.form-box label.full {
    width: auto;
}

.input.full-label {
    width: calc(100% - 170px);
}

.input.mid50 , .psw-box.mid50 {
	width: calc(50% - 20px);
    margin-right: 40px;
    float: left;
}

.input.mid50-label {
    width: calc(50% - 170px);
    margin-right: 40px;
    float: left;
}

.fake-label-right {
	width: 100%;
	padding-left: calc(50% + 20px);
}

.last {
    margin-right: 0 !important;
}

.ultimo {
    margin-bottom: 0 !important;
}

.nascosto {
    display: none;
}

.center {
	text-align: center;
}

.mobile {
    display: none;
}

.box {
    position: relative;
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
}

.giorni-orari-input-container {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr)) auto minmax(0,1fr) repeat(2,minmax(0,1fr)) auto minmax(0,1fr);
    gap: 20px;
    align-items: center;
}

.giorno-checkbox {
    display: flex;
    gap: 10px;
}

.form-box .giorni-orari-input-container > .input {
    margin: 0;
}

.input-checkbox {
	width: 100%;
	display: flex;
	gap: 10px;
	align-items: center;
}

.input-checkbox.mid-50 {
	width: calc(50% - 20px);
    margin-right: 40px;
    float: left;
}

.input-checkbox input {
	flex: 1 0 20px;
}

.input-checkbox label {
	flex: 1 1 100%;
	align-self: center;
}

.elemento-checkbox {
	padding: 20px 0;
	column-count: 2;
	min-height: 20px;
}

.elemento-checkbox-inner {
	display: flex;
	gap: 10px;
	align-items: center;
}

.elemento-checkbox label {
	display: inline;
}

.right {
    text-align: right;
}

/* Layout container per box giochi (usa Grid per layout uniforme) */
.flex-container {
	display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
	gap: 40px;
}

/* Variante con Flexbox per contenuti di dimensione variabile (footer, ecc.) */
.flex-container.equal {
	display: flex;
	flex-wrap: wrap;
}

.flex-container.equal > * {
	flex: 1 1 250px;
}

/* Varianti con colonne fisse */
.flex-container.max-2 {
	display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
	gap: 40px;
}

.flex-container.max-3 {
	display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
	gap: 40px;
}

/* 
 * Responsive per flex-container (box giochi)
 * Desktop: 4 colonne | Laptop: 3 colonne | Tablet/Mobile: 2 colonne (minimo)
 */
@media screen and (max-width: 1200px) {
	.flex-container {
		grid-template-columns: repeat(3,minmax(0,1fr));
	}
}

@media screen and (max-width: 992px) {
	.flex-container {
		grid-template-columns: repeat(2,minmax(0,1fr));
	}
}

/* Mobile mantiene 2 colonne come minimo */

.left-50 {
	width: calc(50% - 12.5px);
	float: left;
	margin-right: 25px;
}

.left-50:nth-child(2) {
	margin-right: 0;
}

.full-width-img {
	width: 100%;
	height: auto;
}

.container-column {
	width: 100%;
	display: grid;
	gap: 20px;
}

.container-2-column {
	grid-template-columns: repeat(2,minmax(0,1fr));
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/*FONT*/

/* poppins-100 - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: local(''),
       url('/fonts/poppins-v20-latin-100.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/poppins-v20-latin-100.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* poppins-100italic - latin */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: local(''),
       url('/fonts/poppins-v20-latin-100italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/poppins-v20-latin-100italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* poppins-200 - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: local(''),
       url('/fonts/poppins-v20-latin-200.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/poppins-v20-latin-200.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* poppins-200italic - latin */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 200;
  font-display: swap;
  src: local(''),
       url('/fonts/poppins-v20-latin-200italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/poppins-v20-latin-200italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* poppins-300 - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local(''),
       url('/fonts/poppins-v20-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/poppins-v20-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* poppins-300italic - latin */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: local(''),
       url('/fonts/poppins-v20-latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/poppins-v20-latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* poppins-regular - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local(''),
       url('/fonts/poppins-v20-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/poppins-v20-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* poppins-italic - latin */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local(''),
       url('/fonts/poppins-v20-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/poppins-v20-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* poppins-500 - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local(''),
       url('/fonts/poppins-v20-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/poppins-v20-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* poppins-500italic - latin */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: local(''),
       url('/fonts/poppins-v20-latin-500italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/poppins-v20-latin-500italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* poppins-600 - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local(''),
       url('/fonts/poppins-v20-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/poppins-v20-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* poppins-600italic - latin */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: local(''),
       url('/fonts/poppins-v20-latin-600italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/poppins-v20-latin-600italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* poppins-700 - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local(''),
       url('/fonts/poppins-v20-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/poppins-v20-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* poppins-700italic - latin */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: local(''),
       url('/fonts/poppins-v20-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/poppins-v20-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* poppins-800 - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: local(''),
       url('/fonts/poppins-v20-latin-800.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/poppins-v20-latin-800.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* poppins-800italic - latin */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: local(''),
       url('/fonts/poppins-v20-latin-800italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/poppins-v20-latin-800italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* poppins-900 - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: local(''),
       url('/fonts/poppins-v20-latin-900.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/poppins-v20-latin-900.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* poppins-900italic - latin */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: local(''),
       url('/fonts/poppins-v20-latin-900italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/poppins-v20-latin-900italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

body {
	max-width: 100dvw;
    overflow-x: hidden;
}

body , .input , .popup-trofeo .close-popup {
	font-family: 'Poppins', sans-serif;
	font-size: 17px;
	line-height: 25px;
}

.elemento-mini-menu i {
	line-height: 25px;
}

.input {
	line-height: 26px;
	display: inline-block;
}

select.input {
	padding-right: 20px;
}

.main-filtri-elemento .select2-container {
	width: 100% !important;
}

.small-footer , .top-head-menu-item , .popup-password , .mini-titolo-box , .mini-question , .privacy-disclaimer , #counter .testo-tempo , .lista-chat-counter {
	font-size: 13px;
	line-height: 17px;
}

.menu-item , .titolo-foot , .titolo-box , .titolino , .faq-domanda , .titolo .smaller {
	font-size: 20px;
	line-height: 20px;
}

.slogan.big {
    font-size: 36px;
    line-height: 46px;
}

.slogan.mini , .titolo , .freddie-citazione , h1 , h2 {
    font-size: 23px;
    line-height: 32px;
    padding-top: 20px;
}

/*ALTRO*/

.form-box , .prodotti-inner {
    padding: 40px;
}

.popup-password {
    padding: 20px;
    border-radius: 10px;
}

.btn , .prodotti-box , .prodotti-box .filtro , .prod otti-box .bg-blur-img , .form-box , .container-big-img , .box , .presentazione-img img , .mini-menu-container , .elenco-img .mini-img , .bundle-container , .mini-immagine , .mini-immagine img , .box-blu {
    border-radius: 20px;
}

.prodotti-box .filtro , .mini-compra , .compra {
    transition-duration: 1s;
}

.btn , .input {
    border-radius: 40px;
}

/* .loader - Ora gestito da loader-unified.css */

/*HEADER*/

header {
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
}

.inner-header {
	display: flex;
	gap: 20px;
	align-items: center;
	justify-content: space-between;
	height: 100px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.inner-header > * {
	align-items: center;
}

.logo-header {
	height: 70px;
}

.logo-header img {
	height: 100%;
	width: auto;
	margin: 0;
}

.search-head-container {
	position: relative;
	flex-grow: 1;
}

.search-goggle {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    font-size: 20px;
	background-color: transparent;
	border: none;

    transition: color .2s;
}

.inner-search-head {
	position: relative;
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
}

#search-head-left {
	border-radius: 40px 0 0 40px;
	width: 190px;
}

#search-head {
    width: calc(100% - 190px);
    padding-right: 45px;
	border-radius: 0 40px 40px 0;
}

#search-head-result {
    display: none;
    position: absolute;
    top: 50px;
    left: 0;
    max-height: 60dvh;
    overflow: auto;
    width: 100%;
    z-index: 10;
    border: 1px solid rgba(255, 255, 255, 0.2);
    overscroll-behavior: contain;
}

/* Scrollbar personalizzata per il box di ricerca */
#search-head-result::-webkit-scrollbar {
    width: 8px;
}

#search-head-result::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0 4px 4px 0;
}

#search-head-result::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    transition: background 0.2s;
}

#search-head-result::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Firefox scrollbar */
#search-head-result {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.05);
}

/* Stili per la lista di ricerca BGG */
.lista-cerca {
	list-style: none;
	padding: 0;
	margin: 0;
}

.elemento-cerca {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.elemento-cerca:last-child {
	border-bottom: none;
}

.collegamento-cerca {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px;
	text-decoration: none;
	color: inherit;
	transition: background-color 0.2s;
}

.collegamento-cerca:hover {
	background-color: rgba(255, 255, 255, 0.05);
}

.cerca-thumbnail, .cerca-thumbnail-placeholder {
	width: 50px;
	height: 50px;
	object-fit: cover;
	border-radius: 4px;
	flex-shrink: 0;
}

.cerca-thumbnail-placeholder {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
	display: flex;
	align-items: center;
	justify-content: center;
}

.cerca-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
	min-width: 0;
}

.cerca-titolo {
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cerca-anno {
	font-size: 0.9em;
	opacity: 0.7;
}

.cerca-load-more {
	border-top: 1px solid rgba(255, 255, 255, 0.05);
}


.top-ico > i {
	font-size: 30px;
	vertical-align: middle;
}

.promo-header-outer {
	padding: 20px 40px 0 40px;
}

.promo-header-outer .swiper-pagination {
	margin-top: 20px;
	width: 100%;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    position: relative !important;
    bottom: auto !important;
}

.promo-header-outer .swiper-pagination-bullet {
    width: 15px;
    height: 15px;
    opacity: 0.5;
    background: #ccc;
}
.promo-header-outer .swiper-pagination-bullet-active {
    background: var(--color-primary, #313C75);
    opacity: 1;
}

.promo-header-box {
	padding: 40px;
	width: 100%;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
}

.promo-header-box h2 {
	padding: 0;
}

.promo-header-box-mega-img {
    height: 400px;
    width: 100%;
    object-fit: contain;
}

.txt-slogan {
    top: calc(50% + 50px);
    left: 50%;
    transform: translate(-50% , -50%);
    z-index: 2;
}

.txt-slogan.container {
    position: absolute;
}

.slogan {
    display: block;
    text-align: center;
}

.slogan.big {
    text-transform: uppercase;
}

#meter , .mini-meter {
	height: 30px;
	position: relative;
	border-radius: 25px;
	padding: 10px;
	width: 100%;
	margin: 0 auto;
	max-width: 1000px;
	overflow: hidden;
}

.mini-meter {
	height: 20px;
	border-radius: 15px;
	padding: 5px;
}

#meter > span , .mini-meter > span {
	display: block;
	height: 30px;
	position: absolute;
	top: 0;
	left: 0;
}

.mini-meter > span {
	height: 100%;
}

.legenda-meter {
	display: flex;
	gap: 20px;
	margin-top: 40px;
}

.mini-meter-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

#counter {
	display: flex;
	gap: 40px;
	justify-content: center;
	margin-bottom: 40px;
}

#counter .tempo {
	font-weight: 700;
	display: flex;
	flex-direction: column;
}

#counter .testo-tempo {
	font-weight: 400;
}

.navbar {
	margin-top: 20px;
}

/*FOOTER*/

footer {
	margin-top: 140px;
}
footer.nomargin-desktop {
	margin-top: 0;
}

footer {
	width: 100%;
}

.big-footer {
    padding: 40px 0;
}

.titolo-foot {
    margin-bottom: 20px;
}

.small-footer {
    padding: 20px 0;
}

.copy-legal {
    text-align: center;
}

/*PRIVACY DISCLAIMER*/

.privacy-disclaimer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	border-radius: 0;
}

.privacy-disclaimer .close-popup {
	font-size: 20px;
}

.inner-privacy-disclaimer {
	width: 100%;
}

.privacy-disclaimer .btn {
	position: absolute;
	bottom: 20px;
	right: 20px;
}

/*POPUP*/

.popup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index:1000;
	display: none;
}

.popup-inner {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(100% - 20px);
	max-width: 500px;
	max-height: 90%;
	transform: translate(-50%,-50%);
	padding: 20px;
	box-sizing: border-box;
}

.close-popup {
	position: absolute;
	top: 10px;
	right: 10px;
	cursor:pointer;
	font-size: 23px;
}

#alert-effimero {
	position: fixed;
	top: 50%;
	left: 50%;
	width: auto;
	height: auto;
	z-index:1000;
	padding: 10px 20px;
	border-radius: 40px;
	transform: translate(-50% , -50%);
	display: none;
}

/*MAPPA*/

.main-mappa-outer {
	position: relative;
    z-index: 0;
}

.main-mappa-header {
	padding: 20px;
	background-color: #FFFFFFAA;
    position: relative;
    z-index: 1000;
}

.main-mappa-click-trought {
    height: 300px;
    width: 1px;
    pointer-events: none;
}

.main-mappa-filters {
	display: flex;
	gap: 10px;
	margin-bottom: 10px;
}

.main-mappa-filters-elemento {
	flex: 0 0 auto;
	display: flex;
	gap: 5px;
}

.main-mappa-legenda {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(6,minmax(0,1fr));
}

.main-mappa-legenda-elemento , .mini-tavolo-icona {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 5px;
	align-items: center;
	justify-content: center;
}

.main-mappa-legenda-elemento .pallino , .mini-tavolo-icona .pallino {
	display: flex;
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	justify-content: center;
	align-items: center;
	font-size: 20px;

	border-radius: 50%;
	border-width: 2px;
	border-style: solid;

	box-shadow: 0 1px 1px rgba(0,0,0,0.15),
              0 2px 2px rgba(0,0,0,0.15),
              0 4px 4px rgba(0,0,0,0.15),
              0 8px 8px rgba(0,0,0,0.15);
}
.main-mappa-legenda-elemento > span {
	flex: 1 0 0;
	text-align: center;
}

.mini-tavolo-icona .pallino {
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	font-size: 15px;
}

.main-mappa-container {
	overflow: hidden;

	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#main-mappa {
	width: 100%;
	height: 100%;
}

.leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar {
	display: none;
}

.main-mappa-footer {
    padding: 20px 40px;
	background-color: #FFFFFFAA;
    position: relative;
    z-index: 1000;
}

/*TAVOLI*/
.mini-tavolo-container {
	border-width: 2px;
	border-style: solid;
	border-radius: 20px;
	padding: 20px;
	display: flex;
	flex-direction: column;
    gap: 10px;
}

.mini-tavolo-head {
	display: flex;
    gap: 10px;
}

.mini-tavolo-info-1 {
    flex: 1 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.mini-tavolo-nome {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-weight: 700;
}

.user-info-compact {
	display: flex;
    gap: 5px;
}

.mini-tavolo-info-2 {
	display: flex;
	gap: 5px;
    align-items: start;
}

.mini-tavolo-info-3 .mini-meter {
	height: 30px;
}

.mini-tavolo-foot {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mini-tavolo-info-4 {
    flex: 1 0 0;
}

.mini-tavolo-iscritti {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 20px;
}
.mini-tavolo-iscritti > div {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 20px;
}

/*ELEMENTI PAGINE*/

.lista-categorie-home {
	margin-top: 40px;
	margin-bottom: 40px;
	display: grid;
	gap: 40px;
	grid-template-columns: repeat(5,minmax(0,1fr));
}

.lista-categorie-home > .btn {
	display: flex;
	align-items: center;
	justify-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
}

.with-logo-bgi {
    display: flex;
    gap: 10px;
    align-items: center;
}

.logo-bgi {
    width: 30px;
    height: 100%;
    object-fit: contain;
}

.dadi {
	font-size: 80px;
}

.titolo {
    padding-bottom: 40px;
}

.titolo .minusabens {
	font-weight: 400;
}

.presentazione {
    text-align: center;
}

#chi-siamo {
    text-align: center;
}

#chi-siamo-sec .btn {
    margin-top: 20px;
}

.prodotti-outer {
    margin-bottom: 40px;
}

.flex-container .prodotti-box {
    width: 100%;
}

.prodotti-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr)); /* 4 colonne di default */
    gap: 20px; /* Gap costante tra gli elementi */
    padding: 20px;
}

/* Su schermi grandi (< 1200px) */
@media screen and (max-width: 1200px) {
    .prodotti-grid {
        grid-template-columns: repeat(3, minmax(0,1fr)); /* 3 colonne */
    }
}

/* Su schermi medi (tablet e mobile) - minimo 2 colonne */
@media screen and (max-width: 992px) {
    .prodotti-grid {
        grid-template-columns: repeat(2, minmax(0,1fr)); /* 2 colonne */
    }
}

.prodotti-box {
    position: relative;
    display: block;
    text-align: center;
    z-index: 1;
	padding: 20px;
}

.prodotti-box > * {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: center;
}

.prodotti-box .btn {
	width: fit-content;
}

.prodotti-box a.btn {
	margin: 0 auto;
    margin-top: 20px;
}

.box-recensioni {
	height: fit-content;
}

#legenda-review {
	margin-top: 20px;
	text-align: center;
}

.titolo-box {
	display: block;
    text-transform: uppercase;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 100%;
}

.prodottoimg-box {
    width: 100%;
    aspect-ratio: 4 / 3; /* Proporzione orizzontale per le immagini dei giochi */
    margin: 0 auto;
    display: block;
	border-radius: 10px;
    object-fit: contain; /* Mantiene l'immagine completa senza distorsioni */
}

.map-home {
    height: 500px;
    float: left;
    width: 50%;
}

section.no-bottom {
    margin-bottom: 0;
}

.container-contatti {
    float: left;
    width: 50%;
    position: relative;
    height: 500px;
}

.inner-contatti {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    max-width: 700px;
    width: 100%;
    text-align: left;
}

.inner-contatti * {
    text-align: left;
    padding: 40px 0;
}

.form-box , .under-form-box , .over-form-box , .form-box-container {
    max-width: 1000px;
}

.form-box , .form-box-container {
    margin: 0 auto;
}

.under-form-box {
    margin: 40px auto 0 auto;
}

.over-form-box {
    text-align: center;
    margin: 0 auto 40px auto;
}

.form-box .input {
    margin-bottom: 40px;
}

.psw-box {
    position: relative;
}

.psw {
    padding-right: 40px;
}

.popup-password {
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    text-align: left;
    display: none;
}

.popup-password ul {
    padding-left: 0;
    list-style: none;
}

.psw-eye {
    position: absolute;
    top: calc(50% - 20px);
    transform: translateY(-50%);
    right: 15px;
}

.menu-account {
    margin-top: 40px;
}

.menu-pagina {
    position: sticky;
    top: 100px;
    left: 0;
    z-index: 2;
    margin-bottom: 20px;
}

.menu-pagina.stuck {
	background-color: #fff;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	z-index: 11;
}

.menu-pagina .link-menu-account {
	display: inline-block;
	padding: 8px 0 12px 0;
	position: relative;
	top: 2px;
	font-weight: 600;
}

.menu-pagina .link-menu-account.selected {
	border-bottom-width: 3px;
	border-bottom-style: solid;
}

.lista-menu-account {
    text-align: center;
    padding-left: 0;
    list-style: none;
    position: relative;
    z-index: 10;
}

.elemento-menu-account {
    display: inline-block;
    margin-right: 20px;
    text-transform: uppercase;
}

.elemento-menu-account:last-child {
    margin-right: 0;
}

.inner-account {
	margin-top: 40px;
}

.presentazione-prodotto {
	display: flex;
	flex-wrap: wrap;
	flex: 1 0 300px;
	gap: 40px;
	margin-bottom: 40px;
}

.presentazione-txt.double {
	column-count: 2;
	max-width: 600px;
}

.presentazione-txt {
	min-width: 145px;
	max-width: 450px;
}

.big-prodotto-img , .big-prodotto-txt {
    float: left;
}

.big-prodotto-img {
    position: relative;
    width: calc(50% - 20px);
    margin-right: 40px;
}

.big-prodotto-txt {
    width: calc(50% - 20px);
}

.container-big-img {
    position: relative;
    overflow: hidden;
}

.container-big-img .bg-blur-img {
    z-index:-1;
}

.big-img {
	width: 100%;
	max-width: 400px;
    height: auto;
    margin: 0 auto;
}

.big-prodotto-venditori {
    display: grid;
	grid-template-columns: repeat(5,minmax(0,1fr));
	gap: 40px;
}

.elenco-img {
	max-width: 100px;
}

.elenco-img .mini-img {
	width: 100%;
	height: auto;
	margin-bottom: 20px;
	border-width: 1px;
	border-style: solid;
}

.mini-annuncio {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.mini-annuncio.box {
    margin-bottom: 20px; /* Add space below each match chain box */
}

.mini-compra-container {
	flex: 1 0 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.chain-details {
    margin: 20px 0;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 8px;
    background-color: #f9f9f9;
}

.toggle-chain-details {
    display: inline-block;
    padding: 8px 16px;
    color: #007bff;
    text-decoration: none;
    border: 1px solid #007bff;
    border-radius: 4px;
    margin: 10px 0;
    transition: all 0.3s ease;
}

.toggle-chain-details:hover {
    background-color: #007bff;
    color: white;
    text-decoration: none;
}

.text-center {
    text-align: center;
}

.prezzo-bundle {
	position: absolute;
	bottom: 20px;
	left: 20px;
	width: calc(100% - 40px);
	text-align: center;
}

.bundle-container {
	display: flex;
	gap: 20px;
	padding: 20px;
	box-sizing: border-box;
	padding-bottom: 120px;
}

.bundle-container .mini-annuncio {
	min-width: 250px;
}

.mini-immagine {
	position: relative;
	width: 100%;
	display: block;
}

.mini-immagine img {
    width: 100%;
	height: 150px;
	object-fit: contain;
	display: block;
}

.greyed-image {
	filter: grayscale(1);
	opacity: .5;
}

.mini-immagine.big img {
    height: 300px;
}

.mini-compra {
    position: relative;
}

.mini-compra .compra {
    opacity: 1;
    transition-property: opacity;
}

.ok-compra {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
	opacity: 0;
    transition-property: opacity;
    z-index: -1;
}

.container-suggerimenti {
    position: relative;
}

.container-suggerimenti input.input {
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.container-suggerimenti input.input:focus {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
	transform: translateY(-2px);
}

.box-suggerimenti {
    text-align: left;
    display: none;
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    max-height: 300px;
    overflow: auto;
	z-index: 1;
	border: 1px solid rgba(255, 255, 255, 0.2);
	width: 100%;
	transform-origin: top center;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
	opacity: 0;
	transform: scaleY(0.8);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
	overscroll-behavior: contain;
}

.box-suggerimenti.expanding {
	opacity: 1;
	transform: scaleY(1);
}

/* Scrollbar personalizzata per box suggerimenti */
.box-suggerimenti::-webkit-scrollbar {
    width: 8px;
}

.box-suggerimenti::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0 4px 4px 0;
}

.box-suggerimenti::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    transition: background 0.2s;
}

.box-suggerimenti::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Firefox scrollbar */
.box-suggerimenti {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.05);
}

.transazione {
    padding: 10px;
    border-radius: 20px;
    margin-top: 20px;
}

.spacer {
	height: 20px;
	width: 100%;
}

.spacer.big {
	height: 40px;
}

.mid-left {
	width: 50%;
	float: left;
}

.mid-left .input {
	margin-bottom: 0;
}

.carrello {
	width: 100%;
	text-align: left;
}

.carrello td , .carrello th {
	padding: 10px;
}

.totale-carrello {
	text-align: right;
}

.step {
	display: none;
}

.info-data {
	width: auto;
	margin-bottom: 20px;
	text-align: center;
	padding: 5px 0;
	border-radius: 17.5px;
}

.chat-message {
	min-height: 500px;
	margin-bottom: 40px;
	border-radius: 40px;
	padding: 20px;
	/* Miglioramento scroll */
	overflow-y: auto;
	scroll-behavior: smooth;
	max-height: 600px;
}

/* Scrollbar personalizzata per chat */
.chat-message::-webkit-scrollbar {
	width: 8px;
}

.chat-message::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.05);
	border-radius: 4px;
}

.chat-message::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.2);
	border-radius: 4px;
}

.chat-message::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 0, 0, 0.3);
}

.messaggio-chat {
	padding: 10px;
	margin-bottom: 20px;
	max-width: 90%;
	overflow-wrap: break-word;
	/* Miglior leggibilità */
	line-height: 1.5;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.messaggio-chat > a:not(.btn) {
	color: #efefef;
	text-decoration: underline;
}
.messaggio-chat.destinatario > a:not(.btn) {
	color: #4CA0C2;
}

.messaggio-chat.mittente {
	border-radius: 20px 20px 0 20px;
	float: right;
}

.messaggio-chat.destinatario {
	border-radius: 20px 20px 20px 0;
	float: left;
}

.mini-menu-outer {
	position: relative;
	display: inline-block;
}

.mini-menu-outer .mini-menu-container {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 3;
}

.mini-menu-outer.to-center .mini-menu-container {
	right: 50%;
	transform: translateX(50%);
}

.mini-menu-container {
	display: none;
	border-width: 1px;
	border-style: solid;
	padding: 0 20px 20px 20px;
	margin-top: 10px;
}

.mini-menu-container.account {
	position: absolute;
	right: 0;
	top: 65px;
}

.elemento-mini-menu {
	padding-top: 20px;
}

.elemento-mini-menu a {
	padding-right: 20px;
}

.mini-menu-outer .elemento-mini-menu a {
	padding-right: 0;
}

.elemento-mini-menu i {
	float: right;
}

.mini-menu-outer .elemento-mini-menu i {
	float: none;
}

.elemento-mini-scheda {
	position: relative;
}

.mini-titolo-box {
	display: block;
	margin-top: 20px;
}

.elemento-mini-scheda .reply-btn {
	position: absolute;
	bottom: 0;
	left: 0;
}

.mini-risposta-box {
	display: none;
}

#personalizza-btn {
	position: absolute;
	top: 20px;
	right: 20px;
}

.file-grasso {
	position: relative;
	padding: 80px 30px 30px 30px;
	width: 100%;
}

.file-grasso:after {
	content: "Trascina un file o clicca sul pulsante";
	position: absolute;
	top: 30px;
	left: 30px;
	width: calc(100% - 60px);
	text-align: center;
}

.user-info {
	text-align: center;
}

.user-img {
	border-radius: 50%;
	overflow: hidden;
}

.anteprima-imm-profilo {
	width: 300px;
	height: 300px;
	border-radius: 50%;
	object-fit: cover;
}

.top-ico-img {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	object-fit: cover;
	vertical-align: bottom;
}

.user-img.big {
	border-radius: 50%;
	height: 75px;
	width: 75px;
	overflow: hidden;
}

.user-img.big.trofeo {
	border-radius: 0;
	height: 85px;
	width: 85px;
	overflow: initial;
	position: relative;
}

.user-img.small.trofeo {
	border-radius: 0;
	height: 65px;
	width: 65px;
	overflow: initial;
	position: relative;
}

.area-trofeo {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

.elemento-trofeo {
	position: absolute;
	top: 2px;
	left: 2px;
	border-radius: 50%;
	z-index:1;
	line-height: 25px;
	width: 25px;
	text-align: center;
	font-size: 13px;
}

.elemento-trofeo:nth-child(2){
	top: 27px;
    left: -9px;
}

.inner-user-img {
	border-radius: 50%;
	height: 75px;
	width: 75px;
	overflow: hidden;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50% , -50%);
}

.trofeo .inner-user-img {
	height: calc(100% - 10px);
	width: calc(100% - 10px);
}

.user-info .user-img {
	display: inline-block;
}

.user-img img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.user-nome {
	position: relative;
}

.account-mod-container {
	display: flex;
	gap: 40px;
}

.account-form {
	flex-grow: 1;
}

.account-form label {
	float: left;
	width: calc(50% - 21px);
	padding: 10px 20px;
	padding-right: 40px;
	text-align: right;
}

.account-form select {
	float: left;
	margin: 0 0 0 20px;
	padding: 8.5px 20px;
	height: 39px;
}

.account-form input , .account-form .grande-quanto-input {
	float: left;
	margin: 0 0 0 20px;
}

.grande-quanto-input {
	padding: 10px 20px;
}

.account-side {
	white-space: nowrap;
	min-width: 100px;
	text-align: right;
}

#carrello {
	position: relative;
}

.counter {
	position: absolute;
	bottom: -10px;
	right: -10px;
	font-size: 18px;
	line-height: 20px;
	width: 20px;
	border-radius: 50%;
	text-align: center;
	border-width: 2px;
	border-style: solid;
	box-sizing: content-box;
}

.carrello-boxino-venditore {
	float: left;
	width: 80%;
	display: flex;
}

.carrello-info-venditore {
	float: left;
	width: 20%;
}

.freddie-aiuta {
	width: 100%;
	max-width: 500px;
	margin-left: 140px;
}

.freddie-spiega img {
	width: 100%;
	height: auto;
}

.freddie-spiega-container {
	align-items: end;
	text-align: center;
}

.big-ico {
	font-size: 30px;
}

.medium-ico {
	font-size: 25px;
}

.img-left-txt-right img {
	float: left;
	width: 50%;
}

.img-left-txt-right div {
	float: right;
	width: 50%;
}

.logo-footer {
	max-height: 120px;
	object-fit: contain;
}

.faq-risposta {
	padding: 20px;
	border-radius: 20px;
}

.faq-domanda:hover {
	text-decoration: underline;
	cursor: pointer;
}

.notify-led .fa-solid {
	position: absolute;
	top: -5px;
	right: -5px;
	font-size: 15px !important;
}

.notify-led.left .fa-solid {
	right: auto;
	left: -25px;
	top: 4px;
}

.logo-header>.notify-led .fa-solid {
	position: absolute;
	top: auto;
	left: auto;
	bottom: -5px;
	right: -5px;
	font-size: 15px !important;
}

.notify-led .fa-solid:not(.fa-circle) {
	width: 18px;
	line-height: 18px;
	text-align: center;
	border-radius: 50%;
	font-size: 10px !important;
}

.logo-header .notify-led .fa-solid:not(.fa-circle) {
	width: 25px;
	line-height: 25px;
	text-align: center;
	border-radius: 50%;
	font-size: 15px !important;
}

.elimina-immagine {
	position: absolute;
	top: 20px;
	right: 20px;

	line-height: 30px;
	width: 30px;
	text-align: center;

	border-radius: 50%;
	cursor: pointer;
}

.header-footer {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100dvw;
	z-index: 11;
	padding: 10px 0;
}

.header-footer > * {
	padding: 20px 0;
	flex-grow: 1;
	text-align: center;
}

.header-footer .top-ico {
	padding: 10px 0;
}

.header-footer #pubblica {
	border-radius: 10px;
}

.header-footer .top-ico i {
	padding-left: 0;
}

.txt-link {
	cursor: pointer;
	text-decoration: underline;
}

.swiper-button-next, .swiper-button-prev {
    color: var(--color-primary, #313C75);
}
.swiper-button-next::after, .swiper-button-prev::after {
    font-size: 24px;
    font-weight: 900;
}

.contattaci-form {
	height: 150px;
}

.mini-scheda {
	display: flex;
	gap: 20px;
}

.mini-scheda-img {
	width: 120px;
	height: 100%;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

.spunte-blu {
	padding-left: 10px;
    font-size: 10px;
	vertical-align: bottom;
}

.chat-elenco-box {
	position: relative;
	padding-right: 20px;
	/* Miglioramenti UX: touch targets più grandi */
	min-height: 48px;
	display: flex;
	align-items: center;
	padding: 12px 20px 12px 0;
	border-radius: 8px;
	transition: background-color 0.2s ease, transform 0.1s ease;
}

/* Hover state per desktop */
.chat-elenco-box:hover {
	background-color: rgba(0, 0, 0, 0.03);
	transform: translateX(2px);
}

/* Stato selezionato - maggiore contrasto */
.chat-elenco-box a.selected {
	font-weight: bold;
	color: #2563eb !important;
	text-decoration: none;
}

.chat-elenco-box:has(a.selected) {
	background-color: rgba(37, 99, 235, 0.1);
	border-left: 4px solid #2563eb;
	padding-left: 8px;
}

.chat-elenco-box:not(:last-child) {
	margin-bottom: 8px;
}

.chat-controls {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 0;
	/* Touch target migliorato */
	padding: 8px;
}

.chat-controls a {
	/* Icone più grandi e touch-friendly */
	display: inline-block;
	min-width: 44px;
	min-height: 44px;
	line-height: 44px;
	text-align: center;
	border-radius: 4px;
	transition: background-color 0.2s ease;
}

.chat-controls a:hover {
	background-color: rgba(0, 0, 0, 0.05);
}

/* Indicatore di caricamento per le chat list */
.chat-loading {
	opacity: 0.5;
	pointer-events: none;
	position: relative;
}

.chat-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 20px;
	height: 20px;
	border: 3px solid rgba(0, 0, 0, 0.1);
	border-top-color: #2563eb;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

@keyframes spin {
	to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Notifica LED più visibile */
.notify-led {
	animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

/* Loader per caricamento messaggi vecchi - ora gestito da loader-unified.css */

/* Indicatore fine messaggi */
.fine-messaggi {
	text-align: center;
	padding: 12px;
	color: #888;
	font-size: 13px;
	margin-bottom: 15px;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.fine-messaggi i {
	margin-right: 6px;
	color: #4CAF50;
}

.fine-messaggi.nascosto {
	display: none;
}

#freccina-gira , .freccina-gira {
	transition: transform .4s;
}

#freccina-gira.ruotato , .freccina-gira.ruotato {
	transform: rotate(180deg);
}

#review {
	display: flex;
    justify-content: center;
    gap: 10px;
}

.stella {
	font-size: 45px;
	cursor: pointer;
}

#drop_zone {
	width:  100%;
	min-height: 100px;
	position: relative;
	padding: 20px;
}

.inner-dropzone {
	display: block;
	margin: 40px 0;
	text-align: center;
}

.pagination-box {
	margin-top: 50px;
	text-align: center;
}

.outer-legenda-stato {
	position: relative;
	cursor: pointer;
}

.inner-legenda-stato {
	display: none;
	position: absolute;
	bottom: 0px;
	left: -53px;
	padding: 20px;
	width: 180px;
	z-index: 999;
}

.inner-legenda-stato ul {
	padding-left: 20px;
}

.form-box label.auto {
	width: auto
}

#modifica-btn-mobile {
	display: none;
}

.controlli-chat img {
	margin-right: 10px;
}

.controlli-chat-interattiva {
	display: flex;
	gap: 10px;
	margin-bottom: 5px;
	padding: 5px 10px;
	justify-content: end;
	align-items: center;
	background: var(--bianco2);
}

.controlli-chat-interattiva .btn {
	border-color: var(--colore2);
	background: var(--colore2);
	padding: 6px 12px;
	font-size: 13px;
}

.controlli-chat-interattiva .btn:hover:not(.disabled) {
	background-color: var(--colore2);
	color: var(--bianco1);
	border-color: var(--colore2);
	opacity: 0.9;
}

.controlli-chat-interattiva span {
	font-size: 13px;
}

.snip-offerta , .snip-chat {
	display: block;
	margin-top: 20px;
	margin-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
	width: fit-content;
	min-width: 135px;
}

.info-gioco-pubblica {
	display: flex;
	margin-bottom: 30px;
	gap: 30px;
}

.popup-news {
	display: none;
	position: absolute;
	top: 80px;
	left: 0;
	width: 500px;
	height: auto;
	max-height: 600px;
	overflow: auto;
	border-radius: 5px;
	padding-left: 40px;
	padding-right: 40px;
}

.elemento-popup-news {
	position: relative;
}

.elemento-popup-news strong {
	display: inline-block;
	margin-bottom: 5px;
}

/* width */
.popup-news::-webkit-scrollbar {
	width: 10px;
}

/* Track */
.popup-news::-webkit-scrollbar-track {
	border-radius: 10px;
}

/* Handle */
.popup-news::-webkit-scrollbar-thumb {
	border-radius: 5px;
}

.popup-trofeo {
	display: block;
	position: absolute;
	top: calc(100% + 20px);
	left: 50%;
	transform: translateX(-50%);
	width: 500px;
	height: auto;
	max-height: 600px;
	border-radius: 5px;
	padding: 40px;
}

.popup-trofeo .close-popup {
	position: static;
}

.popup-trofeo .fa-caret-up {
	position: absolute;
	top: -27px;
	left: 0;
	width: 100%;
	text-align: center;
	font-size: 50px;
}

#tema-speciale {
	margin: 40px 0 0 0;
}

#tema-speciale .inner-banner {
	justify-content: center;
	padding-top: 0;
	padding-bottom: 0;
}

#tema-speciale .inner-banner span:last-child {
	text-align: center;
}

.banner {
	display: block;
	border-radius: 20px;
	position: relative;
}

.inner-banner {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
}

.inner-banner > * {
	flex-grow: 1;
}

.inner-banner span {
	z-index: 1;
	text-align: end;
}

.inner-banner span:last-child {
	text-align: left;
}

.inner-banner img {
	height: 50px;
	width: auto;
}

/* Pulsanti circolari in alto a destra (wishlist, pubblica) */
.btn-circular {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	width: 40px;
	height: 40px;
	padding: 0 !important;
	margin: 0 !important; /* Rimuove tutti i margini ereditati da .btn */
	border-radius: 50% !important; /* Sempre rotondo */
	cursor: pointer;
}

.btn-circular i {
	margin: 0;
	font-size: 18px;
}

.btn-circular .wishlist-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

/* Classe legacy per retrocompatibilità */
.rimuovi-wishlist {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 15;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 50% !important;
	cursor: pointer;
}

.rimuovi-wishlist .wishlist-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.rimuovi-wishlist i {
	margin: 0;
	font-size: 18px;
}

/* Pulsante pubblica annuncio (match-wishlist) */
.pubblica-link {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 15;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 50% !important;
	cursor: pointer;
}

.pubblica-link i {
	margin: 0;
	font-size: 18px;
}

.voto-gioco {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 10;
}

.presentazione-img {
	position: relative;
}

.voto-gioco {
	line-height: 50px;
	width: 50px;
	text-align: center;
	font-size: 20px;
	border-radius: 50%;
	font-weight: 600;
}

.flex-btns #container-filtri-ordina {
	position: absolute;
	right: 40px;
    margin-bottom: 0;
}

#container-filtri-ordina {
	text-align: right;
	position: relative;
	z-index: 10;
    margin-bottom: 40px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 20px;
	flex-wrap: nowrap; /* Mantiene gli elementi affiancati su mobile */
}

.container-filtri {
	display: inline-block;
	position: relative; /* Per posizionare il dropdown relativamente a questo elemento */
}

.container-ordina {
	display: inline-block;
	flex-shrink: 0; /* Impedisce il ridimensionamento su mobile */
}

#main-filtri {
	display: grid;
	grid-template-columns: repeat(2,minmax(0,1fr));
	gap: 20px;
	text-align: left;
	margin-top: 10px;
	position: absolute;
	top: 100%; /* Si posiziona subito sotto il pulsante */
	right: 0; /* Allineato a destra del pulsante */
	min-width: 600px; /* Larghezza minima per desktop */
	z-index: 100;
}

.main-filtri-elemento.conselect label {
	display: block;
	margin-bottom: 10px;
}

.main-filtri-elemento label {
	display: block;
	margin-bottom: 10px; /* Spazio tra label e input per tutti gli elementi filtro */
}

.main-filtri-elemento.halfgrid-left {
	grid-column: auto;
}

.main-filtri-elemento.halfgrid-right {
	grid-column: auto;
}

.main-filtri-elemento.fullgrid {
	grid-column: 1 / 3;
}

.main-filtri-elemento-checkbox-container {
	display: grid;
	grid-template-columns: repeat(3,minmax(0,1fr));
	gap: 20px;
}

.input-checkbox {
	display: flex;
	align-items: center;
	gap: 10px;
}

.main-filtri-elemento-checkbox-container .input-checkbox {
	display: block;
}

.main-filtri-titolo {
	margin-bottom: 20px;
	font-weight: 600;
}

.container-filtri-ordina .main-filtri-elemento label {
	display: block;
	margin-bottom: 20px;
}

#container-filtri-ordina .main-filtri-elemento .input {
	display: block;
	width: 100%;
}

#main-filtri-reset {
	grid-column: 1 / 3;
	text-align: right;
	cursor: pointer;
}

.nooverflowhidden .tns-ovh {
	overflow: initial;
}

/* Override per PWA mobile - forza overflow hidden sui container tiny-slider */
.pwa-mobile .nooverflowhidden .tns-ovh {
	overflow: hidden !important;
}

.download-app {
	display: block;
}

.download-app img {
	width: 200px;
	height: auto;
	display: block;
	margin: 0 auto;
}

.container-testo-icona {
	display: grid;
	grid-template-columns: auto minmax(0,1fr);
	gap: 40px 20px;
	justify-content: start;
	align-items: center;
	text-align: left;
}

.container-testo-icona > i {
	font-size: 30px;
	text-align: center;
}

.lucchetto {
	position: absolute;
	top: 20px;
	right: 20px;
	font-size: 20px;
}

.notbold {
	font-weight: 400;
}

.subheader-pagina {
	position: sticky;
	top: 100px;
	left: 0;
	z-index: 10;
	padding: 10px;
}

.subheader-pagina .lista-categorie-home {
	margin-top: 0;
	margin-bottom: 0;
}

/* Nascondi elementi se non inizializzati, ma supporta swiper */
#categorie-shortcut:not(.swiper-wrapper), 
.promo-header-container:not(.swiper-wrapper), 
.prodotti-outer:not(.swiper) {
	/* display: none; */ /* Disabilito display none per debug e fallback */
}

.flex-btns, .flex-btns-container {
	display: flex;
	gap: 20px;
	justify-content: flex-start;
    margin-bottom: 20px;
}

.flex-btns-container {
    justify-content: flex-start;
    margin-bottom: 20px;
}

.flex-btns-container .importa-btn {
    position: relative;
    left: 0;
}

.flex-btns-container .condividi-collezione-btn {
    position: relative;
    left: 0;
}

.container-categorie-home {
    display: flex;
    justify-content: space-between;
	align-items: center;
}

#vantaggi .box.center {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: space-between;
}

/* NEW CHAT */

#box-chat {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 40px;
}
#chat-message-box {
	flex: 1 0 auto;
}
#box-chat.form-box .input {
    margin: 0;
}
.form-box.noradius {
    border-radius: 0;
}
.chat-message {
    min-height: 0;
    flex: 1 0 0;
    overflow: auto;
    margin-bottom: 0;
}
.controlli-chat img {
    margin-right: 5px;
}
.controlli-chat-inner {
    display: flex;
    align-items: center;
    gap: 5px;
}
.chat-top-titolo {
	display: flex;
	align-items: center;
}
.lista-chat-elemento:first-child {
    border-top: 0;
}
.lista-chat-elemento {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    padding: 20px;
}
.lista-chat-elemento:last-child {
	border-bottom: 0;
}
.lista-chat-inner {
    display: flex;
    gap: 20px;
}
.lista-chat-img {
    flex: 0 0 100px;
    text-align: center;
}
.lista-chat-img i {
    font-size: 20px;
}
.lista-chat-img img {
    min-width: 0;
    width: 100%;
    height: 100px;
    object-fit: contain;
    border-width: 1px;
    border-style: solid;
    border-radius: 10px;
}
.lista-chat-img.round img {
    padding: 10px;
    border-radius: 50%;
}
.lista-chat-txt {
    flex: 1 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.lista-chat-txt-upper {
    display: flex;
    justify-content:space-between;
    margin-bottom: 5px;
}
.lista-chat-titolo {
    display: block;
    font-weight: 500;
}
.lista-chat-txt-upper , .lista-chat-testo {
    font-weight: 200;
}
.lista-chat-txt-bottom {
    display: flex;
    flex: 1 0 0;
}
.lista-chat-txt-bottom > a {
    flex: 1 0 0;
}
.lista-chat-testo {
    flex: 1 0 0;
}
.lista-chat-container-right {
    flex: 0 0 20px;
    display: flex;
    flex-direction: column;
    justify-content:space-between;
    align-items: center;
}
.lista-chat-counter {
    border-radius: 50%;
    line-height: 20px;
    width: 20px;
    text-align: center;
}

.owner-box {
    display: block;
    font-size: 0.9em;
    color: #666;
    margin: 5px 0;
    padding: 0 10px;
}

.dual-chat {
	display: flex;
}
.dual-chat .lista-chat-container {
	flex: 0 0 33%;
	position: relative;
}
.dual-chat .lista-chat {
	position: sticky;
	top: var(--header-height);
	left: 0;
	overflow-y: auto;
	height: calc(100dvh - var(--header-height));
}
#box-chat.box-chat_v2 {
	flex: 1 1 auto;
	margin: 0;
	max-width: initial;
	position: relative;
	display: block;
	padding: 20px;
	max-height: calc(100dvh - var(--header-height));
	display: flex;
}
#box-chat.box-chat_v2 #chat-message-box {
	flex: 1 0 0;
	border-radius: 10px;
}
#box-chat.box-chat_v2 .controlli-chat {
	flex: 0 1 0;
    background-color: var(--bianco2);
}
#box-chat.box-chat_v2 .controlli-chat-bottom {
	flex: 0 1 0;
    background-color: var(--bianco2);
	position: sticky;
	bottom: 0;
	z-index: 100;
}

#box-chat.box-chat_v2 .controlli-chat-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.manage-table > li {
	border-top: 1px solid var(--colore2trassparente1);
	padding: 10px 5px;
}
.manage-table > li:nth-child(odd) {
	background-color: var(--bianco2);
}
.manage-table > li:last-child {
	border-bottom: 1px solid var(--colore2trassparente1);;
}
.freccia-indietro-nuova {
	display: none;
	font-size: 20px;
	margin-right: 5px;
}
.equidistanti-non-si-sa-perche {
	display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
}
.equidistanti-non-si-sa-perche .elemento-menu-account {
	margin-right: 0;
}
.equidistanti-non-si-sa-perche .elemento-menu-account > a {
	display: block;
}

/* Ordina label: default desktop behaviour */
.label-ordina-per {
	display: inline-block;
}

/* UI.ROW */
.ui-row {
	display: flex;
	gap: 10px;
}
.ui-row.ui-nogap {
	gap: 0;
}
.ui-col {
	flex: 0 0 auto;
}
.ui-col-grow {
	flex: 1 0 auto;
}
.ui-row-align-center {
	align-items: center;
}

/* UI.GRID */
.ui-grid {
	display: grid;
	gap: 10px;
}
.ui-grid.ui-nogap {
	gap: 0;
}
.ui-grid-columns-1 {
	grid-template-columns: minmax(0,1fr);
}
.ui-grid-columns-1-1-1 {
	grid-template-columns: repeat(3,minmax(0,1fr));
}

/* UI.POPUP */
#ui-popup, #ui-loader {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	width: 100%;
	height: 100%;

	display: flex;
	align-items: center;
	justify-content: center;
}
#ui-popup .ui-popup-outside {
	width: calc(100% - 20px);
	max-width: 500px;
	max-height: 90%;
	box-sizing: border-box;
}
#ui-popup .ui-popup-inner {
	position: relative;
	padding: 40px 20px 20px 20px;
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
#ui-popup .ui-popup-close {
	position: absolute;
	top: 10px;
	right: 10px;
	cursor:pointer;
	font-size: 23px;
}
#ui-popup .ui-popup-btns {
	display: flex;
	gap: 10px;
	justify-content: center;
	align-items: center;
}
#ui-popup .ui-popup-btns .btn {
	min-width: 100px;
}

.slick-slide .mini-tavolo-container {
	margin: 0 5px;
}

/* UI.LOADER - Ora gestito da loader-unified.css */

/* UI.UTILITY */
.ui-noscroll {
	overflow: hidden !important;
}

/* UI.TOOLTIP */
[data-tooltip] {
	 cursor: pointer;
	 display: inline-block;
	 line-height: 1;
	 position: relative;
}
 [data-tooltip]::after {
	 background-color: rgba(51, 51, 51, .9);
	 border-radius: 0.3rem;
	 color: #fff;
	 content: attr(data-tooltip);
	 font-size: 1rem;
	 font-size: 85%;
	 font-weight: normal;
	 line-height: 1.15rem;
	 opacity: 0;
	 padding: 0.25rem 0.5rem;
	 position: absolute;
	 text-align: center;
	 text-transform: none;
	 transition: opacity 0.2s;
	 visibility: hidden;
	 white-space: nowrap;
	 z-index: 1;
}
 [data-tooltip].tooltip-top::before {
	 border-style: solid;
	 border-width: 0.3rem;
	 content: "";
	 opacity: 0;
	 position: absolute;
	 transition: opacity 0.2s;
	 visibility: hidden;
	 border-color: rgba(51, 51, 51, .9) transparent transparent transparent;
	 top: 0;
	 left: 50%;
	 margin-left: -0.3rem;
}
 [data-tooltip].tooltip-top::after {
	 bottom: 100%;
	 left: 50%;
	 transform: translate(-50%);
}
 [data-tooltip].tooltip-bottom::before {
	 border-style: solid;
	 border-width: 0.3rem;
	 content: "";
	 opacity: 0;
	 position: absolute;
	 transition: opacity 0.2s;
	 visibility: hidden;
	 border-color: transparent transparent rgba(51, 51, 51, .9) transparent;
	 bottom: 0;
	 left: 50%;
	 margin-left: -0.3rem;
}
 [data-tooltip].tooltip-bottom::after {
	 top: 100%;
	 left: 50%;
	 transform: translate(-50%);
}
 [data-tooltip].tooltip-left::before {
	 border-style: solid;
	 border-width: 0.3rem;
	 content: "";
	 opacity: 0;
	 position: absolute;
	 transition: opacity 0.2s;
	 visibility: hidden;
	 border-color: transparent transparent transparent rgba(51, 51, 51, .9);
	 top: 0.3rem;
	 right: calc(110% - 0.3rem);
	 margin-top: -0.3rem;
}
 [data-tooltip].tooltip-left::after {
	 top: -0.3rem;
	 right: calc(110% + 0.3rem);
}
 [data-tooltip].tooltip-right::before {
	 border-style: solid;
	 border-width: 0.3rem;
	 content: "";
	 opacity: 0;
	 position: absolute;
	 transition: opacity 0.2s;
	 visibility: hidden;
	 border-color: transparent rgba(51, 51, 51, .9) transparent transparent;
	 top: 50%;
	 top: 0.3rem;
	 left: calc(110% - 0.3rem);
	 margin-top: -0.3rem;
}
 [data-tooltip].tooltip-right::after {
	 top: -0.3rem;
	 left: calc(110% + 0.3rem);
}
 @media (max-width: 767px) {
	 [data-tooltip].tooltip-mobile::before {
		 display: none;
	}
	 [data-tooltip].tooltip-mobile:after {
		 font-size: 1rem;
		 max-width: 20rem;
		 position: fixed;
		 bottom: auto;
		 top: 50%;
		 left: 50%;
		 text-align: left;
		 transform: translate(-50%);
		 white-space: normal;
	}
}
 [data-tooltip]:hover::after, [data-tooltip][class*=tooltip-]:hover::before {
	 visibility: visible;
	 opacity: 1;
}

/** FINE UI **/

/* Stili Categorie Shortcut (Swiper) */
.categorie-shortcut-elemento {
    width: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    padding: 10px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.categorie-shortcut-elemento:hover {
    text-decoration: none;
    color: inherit;
}

.categorie-shortcut-elemento i {
    font-size: 30px;
}

.categorie-shortcut-elemento img, .categorie-shortcut-elemento svg {
    height: 30px;
    width: auto;
}

.categorie-shortcut-elemento span {
    text-align: center;
    font-size: 0.9em;
}

/* ONLY APP */
.pwa-mobile {
	display: none;
}
.header-footer.pwa-mobile {
	display: none;
}
.top-ico-text {
	display: none;
}

@media all and (max-width: 1100px){
	/*FONT*/

	body {
		max-width: 100dvw;
		overflow-x: hidden;
	}

	body , .input {
		font-family: 'Poppins', sans-serif;
		font-size: 15px;
		line-height: 17px;
	}

	.elemento-mini-menu i {
		line-height: 20px;
	}

	.input {
		line-height: 21px;
		display: inline-block;
	}

	.small-footer , .top-head-menu-item , .popup-password , .mini-titolo-box , .mini-question {
		font-size: 15px;
		line-height: 20px;
	}

	.menu-item , .titolo-foot , .titolo-box , .titolino , .faq-domanda , .titolo .smaller {
		font-size: 15px;
		line-height: 15px;
	}

	.slogan.big {
		font-size: 25px;
		line-height: 35px;
	}

	.slogan.mini , .titolo , .freddie-citazione {
		font-size: 18px;
		line-height: 27px;
	}

	.btn {
		padding: 10px;
	}

	/*** ALTRO ***/

	.subheader-pagina .lista-categorie-home {
		gap: 10px;
	}
	.popup-news {
		right: -300px;
		width: 300px;
	}
	.fake-label-right {
		padding-left: 0;
	}
	#modifica-btn-mobile{
		display: block;
		position: absolute;
		top: 0;
		right: 20px;
	}
	.account-form label {
		float: none;
		width: 100%;
		border: none !important;
		display: block;
		text-align: left;
	}
	.account-form input, .account-form .grande-quanto-input {
		float: none;
		width: 100%;
		border: none;
		display: block;
	}
	.indice {
		width: 15%;
		display: inline-block;
		padding-bottom: 10px;
	}
	.elemento-checkbox {
		column-count: 1;
		min-height: 20px;
	}
	.elemento-checkbox-inner {
		padding-bottom: 10px;
	}
	#search-head-result {
		top: 50px;
		left: auto;
		right: 0;
		width: 100%;
	}
	.form-box .input {
		margin: 0 0 20px 0;
	}
	.dadi {
		font-size: 40px;
	}
	.freddie-aiuta {
		margin-left: 0;
	}
	.freddie-aiuta img {
		width: 100%;
	}
	.flex-container.max-2 > * {
		display: grid;
        grid-template-columns: repeat(1,minmax(0,1fr));
	}
	.flex-container.max-3 > * {
		display: grid;
        grid-template-columns: repeat(1,minmax(0,1fr));
	}
	.flex-container {
		gap: 20px;
		grid-template-columns: repeat(2,minmax(0,1fr)); /* 2 colonne su mobile (minimo) */
	}
	.flex-container .prodotti-box {
		width: 100%;
		padding: 10px;
	}
	.prodotti-box {
		padding: 10px;
	}
	#vantaggi.flex-container.max-3 {
		display: block;
	}
	#vantaggi.flex-container.max-3 > div {
		margin-bottom: 10px;
	}
    #vantaggi .box.center {
        gap: 20px;
    }
	.img-left-txt-right{
		display: flex;
		align-items: center;
	}
	.tns-controls {
		display: none;
	}
	.form-box , .prodotti-inner {
		padding: 20px;
	}
	.prodottoimg-box {
		height: 15dvh;
	}
	.big-footer {
		text-align: center;
	}
	footer {
		margin-bottom: 70px;
	}
	.page-account-menu.menu-pagina {
		position: static;
		padding: 10px 0;
	}
	.page-account-menu.menu-pagina.stuck {
		border-bottom: none;
	}
	.page-account-menu.menu-pagina .link-menu-account {
		padding: 0 0 5px 0;
	}
	.page-account-menu .elemento-menu-account , .elemento-cerca {
		display: block;
		margin-right: 0;
		padding-top: 10px;
	}
	.input.mid50 , .input.mid50-label , .psw-box.mid50 {
		width: 100%;
	}
	.header-footer {
		display: flex;
	}
	#search-head-left {
		display: none;
	}
	#search-head {
		width: calc(100%);
		border-radius: 5px;
	}
	#search-head-result {
		top: 45px;
		border-radius: 5px;
	}
	.inner-header, .header-menu, .container {
		padding: 0 20px;
		box-sizing: border-box;
	}
	.freccia-indietro-nuova {
		display: initial;
	}
    .only-mobile {
        display: initial;
    }
	.nomobile {
		display: none !Important;
	}
	.big-prodotto-venditori {
		grid-template-columns: repeat(2,minmax(0,1fr));
		gap: 20px;
	}
	.hide-lista-chat {
		flex-direction: column;
	}
	.hide-lista-chat .lista-chat-container {
		display: none;
	}
	.hide-lista-chat #box-chat.box-chat_v2 {
	
		min-height: calc(100dvh - var(--header-height) - 50px);
	}
	.hide-box-chat {
		flex-direction: column;
	}
	.hide-box-chat #box-chat.box-chat_v2 {
		display: none;
	}
	/*
	.mini-annuncio {
		flex: 0 0 100%;
		max-width: calc(50% - 10px);
	}
	*/

	.elenco-img {
		max-width: 100%;
		display: flex;
		flex-wrap: wrap;
		gap: 40px;
	}

	.elenco-img .mini-img {
		width: calc(50% - 20px);
	}

	.messaggio-chat.mittente {
		border-radius: 20px 20px 0 20px;
	}

	.messaggio-chat.destinatario {
		border-radius: 20px 20px 20px 0;
	}
	.titolo {
		padding-top: 0;
		padding-bottom: 20px;
	}
	.flex-btns #container-filtri-ordina {
		right: 20px;
        margin-bottom: 0;
	}
    #container-filtri-ordina {
		margin-bottom: 20px;
		gap: 10px; /* Gap ridotto su mobile */
	}
	#container-filtri-ordina .container-ordina label {
		font-size: 14px; /* Label più piccola su mobile */
	}
	#container-filtri-ordina .container-ordina select {
		max-width: 150px; /* Larghezza massima per il select su mobile */
		font-size: 14px;
	}
	.lista-categorie-home {
		grid-template-columns: repeat(2,minmax(0,1fr));
	}

    .giorni-orari-input-container {
        grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
    }
    .form-box .giorni-orari-input-container label {
        width: auto;
    }

	.main-mappa-footer {
		padding: 10px;
	}
	.main-mappa-footer .tns-controls {
		display: block;
	}
	.ui-grid-columns-1-1-1 {
		grid-template-columns: repeat(2,minmax(0,1fr));
	}
}

@media all and (max-width: 500px){
	/*FONT*/
	body {
		max-width: 100dvw;
		overflow-x: hidden;
	}

	body , .input {
		font-family: 'Poppins', sans-serif;
		font-size: 13px;
		line-height: 15px;
	}

	.elemento-mini-menu i {
		line-height: 18px;
	}

	.input {
		line-height: 19px;
		display: inline-block;
	}

	.small-footer , .top-head-menu-item , .popup-password , .mini-titolo-box , .mini-question {
		font-size: 13px;
		line-height: 18px;
	}

	.menu-item , .titolo-foot , .titolo-box , .titolino , .faq-domanda , .titolo .smaller {
		font-size: 13px;
		line-height: 13px;
	}

	/* Nascondi label "Ordina per" su mobile */
	.label-ordina-per {
		display: none;
	}

	.slogan.big {
		font-size: 22px;
		line-height: 32px;
	}

	.slogan.mini , .titolo , .freddie-citazione , h1 , h2 {
		font-size: 16px;
		line-height: 25px;
	}
	/*fine*/

	.promo-header-box {
		padding: 20px;
		gap: 10px;
	}
	.promo-header-outer {
		padding: 0 20px;
	}
	.presentazione-txt {
		width: 100%;
		min-width: 0;
		max-width: 100%;
	}
	.mini-titolo-box {
		margin-top: 40px;
	}
	.elemento-mini-scheda .reply-btn {
		bottom: 20px;
		left: auto;
		right: 0;
	}
	#main-filtri {
		grid-template-columns: 1fr;
		gap: 20px;
		margin-top: 10px;
		right: auto; /* Reset allineamento desktop */
		left: 50%;
		transform: translateX(-50%); /* Centra su mobile */
		min-width: auto;
		width: calc(100vw - 40px); /* Larghezza quasi full screen su mobile */
		max-width: 600px;
	}
	.controlli-chat-interattiva {
		margin-bottom: 20px;
	}
	.main-filtri-elemento.fullgrid , .main-filtri-elemento.halfgrid-left , .main-filtri-elemento.halfgrid-right {
		grid-column: 1 / -1;
	}
	.inner-banner span {
		text-align: initial;
	}
    .mini-annuncio {
        gap: 5px;
    }
    .big-prodotto-venditori , .flex-container {
		gap: 10px;
	}
    .box {
        padding: 10px;
    }
    .flex-container {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
    
    /* Vista lista: forza 1 colonna su mobile */
    .flex-container .prodotti-riga {
        grid-column: 1 / -1;
    }
    
    .flex-container.max-2 {
        grid-template-columns: repeat(1,minmax(0,1fr));
    }
    .flex-container.max-3 {
        grid-template-columns: repeat(1,minmax(0,1fr));
    }
    .promo-header-box-mega-img {
        height: auto;
        width: 100%;
    }
    .input.minimal-mobile {
        border: none !important;
        background-color: transparent;
        box-shadow: none !important;
        border-radius: 0;
        padding: 0;
    }

    .giorni-orari-input-container {
        grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
    }

    .giorno-checkbox {
        grid-column: span 3;
    }

	.ui-grid-columns-1-1-1 {
		grid-template-columns: repeat(1,minmax(0,1fr));
	}
	.mini-tavolo-container {
		padding: 10px;
	}
	.mini-tavolo-iscritti {
		gap: 10px;
	}
	.mini-tavolo-iscritti > div {
		padding: 10px;
	}
	.mini-tavolo-iscritti .user-img.small.trofeo {
		width: 40px;
		height: 40px;
	}
	.mini-tavolo-iscritti .user-img.small.trofeo .inner-user-img {
		height: 100%;
    	width: 100%;
	}
	.mini-tavolo-iscritti .user-img.small.trofeo .area-trofeo {
		display: none;
	}
	#chat-message-box {
		padding: 10px;
	}
}

@supports (-webkit-touch-callout: none) {
	@media screen and (-webkit-min-device-pixel-ratio:0) and (display-mode: standalone) and (max-width: 1100px) {
		select,
		textarea,
		input {
			font-size: 16px !important;
		}
		.header-footer {
			padding-bottom: 30px;
		}
	}
}

@media (display-mode: standalone) { /*  and (max-width: 1100px) */
	.menu-pagina {
		top: 40px;
	}
	.menu-pagina.conbarraricerca {
		top: 59px;
	}
	.subheader-pagina {
		top: 40px;
	}
	#tema-speciale {
		margin: 10px 0 10px 0;
	}
	.no-pwa {
		display: none;
	}
	html, body , .prodotti-box {touch-action: pan-y;}
	
	/* Prevenzione overflow orizzontale nella PWA */
	html, body {
		overflow-x: hidden !important;
		max-width: 100vw !important;
	}
	.pwa-mobile {
		display: initial;
	}
	.promo-header-outer.pwa-mobile {
		display: block;
	}
	.freccia-indietro {
		font-size: 20px;
	}
	.nascondi-elemento {
		display: none !important;
	}
	.top-ico-img.blu {
		padding: 5px;
	}
	#categorie-shortcut {
		margin-bottom: 20px;
        margin-left: 20px;
		/* overflow: hidden !important; */
		/* max-width: 100vw !important; */
	}
	
	/* Fix per PWA iOS - forza l'overflow hidden anche sui container interni del tiny-slider */
	/* .pwa-mobile #categorie-shortcut .tns-outer {
		overflow: hidden !important;
		max-width: 100vw !important;
	} */
	
	.pwa-mobile #categorie-shortcut .tns-ovh {
		overflow: hidden !important;
		max-width: 100vw !important;
	}
	
	.pwa-mobile #categorie-shortcut .tns-inner {
		overflow: hidden !important;
		max-width: 100vw !important;
	}
	
	/* Regola generale per tutti i tiny-slider nella PWA */
	.pwa-mobile .tns-outer,
	.pwa-mobile .tns-ovh,
	.pwa-mobile .tns-inner {
		overflow: hidden !important;
		max-width: 100vw !important;
	}
	footer .big-footer , footer .small-footer {
		margin-top: 0;
		margin-bottom: 0;
		height: 100px;
		opacity: 0;
	}
	footer.nomargin {
		height: 0px;
	}

	.big-footer , .small-footer , .navbar {
		display: none;
	}
	section:has(.navbar) {
	  margin-bottom: 0;
	}
	header.nomargin , section.nomargin {
		margin-bottom: 0;
	}
	.inner-header {
		height: auto;
		padding: 10px 20px;
	}
	.logo-header {
		display: none;
	}.header-footer:not(.pwa-mobile){
		display: none;
	}
	.header-footer.pwa-mobile {
		display: flex;
	}
	.header-footer .top-ico {
		display: flex;
		align-items: center;
		flex-direction: column;
		gap: 10px;
		padding: 0;
	}
	.top-ico-text {
		display: block;
	}
	.header-footer i {
		line-height: 35px;
		width: 35px;
	}
	.header-footer .top-ico-img {
		width: 35px;
		height: 35px;
	}
	.header-footer #pubblica {
		border-radius: 0;
		background-color: initial;
	}
	.header-footer #pubblica i {
		border-radius: 50%;
		transform: scale(1.5);
		font-size: 25px;
		transform-origin: bottom center;
	}
	.elemento-account-home {
		display: block;
		padding: 20px;
	}
	.elemento-account-home.principale {
		padding-top: 0;
		border-bottom-width: 1px;
		border-bottom-style: solid;
	}
	.elemento-account-home.link {
		border-top-width: 1px;
		border-top-style: solid;
	}
	.elemento-account-home.link.special {
		border-top: none;
	}
	.elemento-account-home.last {
		border-bottom-width: 1px;
		border-bottom-style: solid;
	}
	.elemento-account-inner {
		display: flex;
		gap: 20px;
		align-items: center;
	}
	.principale .elemento-account-testo-inner {
		font-weight: 800;
	}
	.elemento-account-iconografia {
		min-width: 35px;
		text-align: center;
	}
	.elemento-account-testo {
		flex: 1 0 0;
		display: flex;
		align-items: center;
	}
	.elemento-account-testo-inner {
		flex: 1 0 0;
		display: flex;
		flex-direction: column;
		gap: 5px;
	}
	.elemento-account-iconografia {
		font-size: 25px;
	}
	.lista-dispositivi-elemento:first-child {
		border-top-width: 1px;
		border-top-style: solid;
	}
	.lista-dispositivi-elemento {
		border-bottom-width: 1px;
		border-bottom-style: solid;
		padding: 10px 0;

		display: flex;
		gap: 10px;
		align-items: center;
	}
	.lista-dispositivi-elemento-nome {
		flex: 1 0 0;
	}
	.lista-dispositivi-elemento-logout {
		font-size: 20px;
	}

	#box-chat {
		height: 100svh;
		display: flex;
		flex-direction: column;
		gap: 0;
		padding: 0;
		overflow: hidden;
	}
    #chat-message-box {
        flex: 1 1 auto;
		overflow-y: auto;
		padding: 20px;
    }
    /*
    #box-chat.form-box .input {
		margin: 0;
	}
	.form-box.noradius {
		border-radius: 0;
	}
	.chat-message {
		min-height: 0;
		flex: 1 0 0;
		overflow: auto;
		margin-bottom: 0;
	}
	.controlli-chat img {
		margin-right: 5px;
	}
	.controlli-chat-inner {
		display: flex;
		align-items: center;
		gap: 5px;
	}
	.lista-chat-elemento:first-child {
		border-top-width: 1px;
		border-top-style: solid;
	}
	.lista-chat-elemento {
		border-bottom-width: 1px;
		border-bottom-style: solid;
		padding: 20px;
	}
	.lista-chat-inner {
		display: flex;
		gap: 20px;
	}
	.lista-chat-img {
		flex: 0 0 100px;
		text-align: center;
	}
	.lista-chat-img i {
		font-size: 20px;
	}
	.lista-chat-img img {
		min-width: 0;
		width: 100%;
		height: 100px;
		object-fit: contain;
		border-width: 1px;
		border-style: solid;
		border-radius: 10px;
	}
	.lista-chat-img.round img {
		padding: 10px;
		border-radius: 50%;
	}
	.lista-chat-txt {
		flex: 1 0 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.lista-chat-txt-upper {
		display: flex;
		justify-content:space-between;
		margin-bottom: 5px;
	}
	.lista-chat-titolo {
		display: block;
		font-weight: 500;
	}
	.lista-chat-txt-upper , .lista-chat-testo {
		font-weight: 200;
	}
	.lista-chat-txt-bottom {
		display: flex;
		flex: 1 0 0;
	}
	.lista-chat-txt-bottom > a {
		flex: 1 0 0;
	}
	.lista-chat-testo {
		flex: 1 0 0;
	}
	.lista-chat-container-right {
		flex: 0 0 20px;
		display: flex;
		flex-direction: column;
		justify-content:space-between;
		align-items: center;
	}
	.lista-chat-counter {
		border-radius: 50%;
		line-height: 20px;
		width: 20px;
		text-align: center;
	}
    */
}

/* ===== PWA MOBILE: FIX CHAT VISIBILITY ===== */
@media (display-mode: standalone) and (max-width: 1100px) {
	#box-chat {
		height: calc(100svh - 145px) !important;
		max-height: calc(100svh - 145px) !important;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		padding-top: 0;
		padding-bottom: 0;
	}
	#chat-message-box {
		flex: 1 1 auto;
		overflow-y: auto;
		padding: 20px;
		min-height: 0;
	}
	.controlli-chat {
		flex: 0 0 auto;
		position: relative;
		bottom: auto;
		padding: 20px;
		background-color: transparent;
	}
	.controlli-chat-interattiva {
		padding: 20px;
	}
	#box-chat.form-box .input {
		margin: 0;
	}
}

/* ===== GRIGLIA RESPONSIVE IMMAGINI UPLOAD ===== */
.media-container {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 colonne su mobile */
	gap: 20px;
	padding: 10px 0;
	margin-bottom: 20px;
}

/* 3 colonne su desktop */
@media (min-width: 768px) {
	.media-container {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 25px;
	}
}

/* ===== DRAG & DROP RIORDINAMENTO IMMAGINI ===== */
.mini-immagine[draggable="true"] {
	cursor: move;
	cursor: grab;
	transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
	            box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
	            opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
	            border-color 0.2s ease;
	border: 2px solid transparent;
	border-radius: 8px;
	overflow: hidden;
	background: var(--bianco1);
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	will-change: transform, opacity;
	touch-action: none; /* Migliora touch su mobile */
}

.mini-immagine[draggable="true"]:hover {
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	transform: translateY(-2px);
}

.mini-immagine[draggable="true"]:active {
	cursor: grabbing;
}

/* Stato durante il drag - ottimizzato per GPU */
.mini-immagine.dragging {
	opacity: 0.6;
	transform: scale(0.98) rotate(2deg) translateZ(0);
	border-color: var(--colore1);
	box-shadow: 0 8px 20px rgba(0,0,0,0.25);
	z-index: 1000;
	will-change: transform, opacity;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transform-origin: center center;
	cursor: grabbing !important;
}

/* Indicatore drop zone - animazione fluida BLU */
.mini-immagine.drag-over {
	border-color: var(--colore2);
	border-style: dashed;
	border-width: 3px;
	background: rgba(49, 60, 117, 0.1);
	transform: scale(1.02) translateZ(0);
	will-change: border, background, transform;
	animation: pulseGlow 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes pulseGlow {
	0%, 100% {
		box-shadow: 0 0 0 rgba(49, 60, 117, 0.4);
	}
	50% {
		box-shadow: 0 0 15px rgba(49, 60, 117, 0.6);
	}
}

/* Badge numero ordine - IN BASSO A DESTRA */
.mini-immagine .order-badge {
	position: absolute;
	bottom: 8px;
	right: 8px;
	background: var(--colore2trassparente2);
	backdrop-filter: blur(4px);
	color: var(--bianco1);
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	font-size: 15px;
	z-index: 10;
	box-shadow: 0 2px 8px rgba(0,0,0,0.3);
	transition: transform 0.2s ease, background 0.2s ease;
}

.mini-immagine:hover .order-badge {
	transform: scale(1.1);
	background: var(--colore2);
}

/* Icona drag handle - IN ALTO A SINISTRA, BLU, SENZA SFONDO */
.mini-immagine .drag-handle {
	position: absolute;
	top: 8px;
	left: 8px;
	background: transparent;
	color: var(--colore2);
	padding: 0;
	border-radius: 0;
	font-size: 20px;
	cursor: move;
	cursor: grab;
	z-index: 10;
	opacity: 0;
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: none;
}

.mini-immagine:hover .drag-handle {
	opacity: 1;
	pointer-events: auto;
}

.mini-immagine .drag-handle:active {
	cursor: grabbing;
}

/* Pulsante elimina - IN ALTO A DESTRA, ARANCIONE, TONDO */
.mini-immagine .elimina-immagine {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 11;
	background: var(--colore1);
	color: var(--bianco1);
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	opacity: 0.9;
	box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.mini-immagine:hover .elimina-immagine {
	opacity: 1;
	transform: scale(1.05);
}

.mini-immagine .elimina-immagine:hover {
	background: #d96b1a;
	transform: scale(1.15);
}

/* Responsive: 1 colonna su schermi molto piccoli */
@media (max-width: 480px) {
	.media-container {
		grid-template-columns: 1fr;
		gap: 15px;
	}
	
	/* Badge e handle più piccoli su mobile */
	.mini-immagine .order-badge {
		width: 28px;
		height: 28px;
		font-size: 13px;
		bottom: 6px;
		right: 6px;
	}
	
	.mini-immagine .drag-handle {
		font-size: 18px;
		top: 6px;
		left: 6px;
		opacity: 0.7; /* Più visibile su mobile */
	}
	
	.mini-immagine .elimina-immagine {
		width: 28px;
		height: 28px;
		top: 6px;
		right: 6px;
	}
	
	/* Chat list ottimizzata per mobile */
	.chat-elenco-box {
		padding: 16px 50px 16px 12px;
		min-height: 56px; /* Touch target più grande */
		font-size: 15px;
	}
	
	.chat-elenco-box:has(a.selected) {
		border-left-width: 6px;
		padding-left: 10px;
	}
	
	.chat-controls {
		padding: 12px;
	}
	
	.chat-controls a {
		min-width: 48px;
		min-height: 48px;
		line-height: 48px;
		font-size: 18px;
	}
	
	/* Lista chat in colonna singola su mobile molto stretto */
	.form-box-container .left-50 {
		width: 100%;
		float: none;
		margin-bottom: 20px;
	}
}

/* Ottimizzazione touch mobile */
@media (hover: none) and (pointer: coarse) {
	.mini-immagine .drag-handle {
		opacity: 0.8; /* Sempre visibile su touch */
	}
	
	.mini-immagine[draggable="true"]:active {
		transform: scale(0.95);
		opacity: 0.7;
	}
}

/* ============================================
   MODERN CHAT INPUT - Dice'n'Roll Style
   ============================================ */

/* Wrapper esterno per il posizionamento */
.chat-input-wrapper {
	background: var(--bianco2);
	padding: 5px 10px 8px 10px;
}

/* Container flex per input e button */
.chat-input-container {
	display: flex;
	gap: 6px;
	align-items: flex-end;
	max-width: 100%;
}

/* Input textarea auto-espandibile */
.chat-input {
	flex: 1;
	min-height: 36px;
	max-height: 90px;
	padding: 8px 12px;
	border-radius: 18px;
	border: 1px solid var(--grigio1);
	resize: none;
	overflow-y: auto;
	font-size: 14px;
	line-height: 1.3;
	font-family: inherit;
	background: var(--bianco2);
	transition: all 0.2s ease;
	box-sizing: border-box;
}

.chat-input:focus {
	outline: none;
	border-color: var(--colore2);
	background: var(--bianco1);
	box-shadow: 0 0 0 2px rgba(49, 60, 117, 0.1);
}

.chat-input::placeholder {
	color: #999;
}

/* Bottone invio circolare arancione con icona bianca */
.chat-send-btn {
	width: 36px;
	height: 36px;
	min-width: 36px;
	min-height: 36px;
	border-radius: 50%;
	background: var(--colore1);
	color: var(--bianco1);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
	flex-shrink: 0;
}

.chat-send-btn:hover {
	background: #e57316;
	transform: scale(1.05);
}

.chat-send-btn:active {
	transform: scale(0.95);
}

.chat-send-btn i {
	font-size: 14px;
}

/* Disabled state */
.chat-send-btn:disabled {
	background: var(--grigio1);
	color: #999;
	cursor: not-allowed;
	transform: none;
}

/* ============================================
   RESPONSIVE - Mobile Optimizations
   ============================================ */

@media screen and (max-width: 768px) {
	.chat-input-wrapper {
		padding: 4px 8px;
		/* iOS safe area */
		padding-bottom: max(4px, env(safe-area-inset-bottom));
	}
	
	.chat-input-container {
		gap: 5px;
	}
	
	.chat-input {
		font-size: 16px; /* Prevent iOS zoom */
		padding: 7px 10px;
		min-height: 34px;
	}
	
	.chat-send-btn {
		width: 34px;
		height: 34px;
		min-width: 34px;
		min-height: 34px;
	}
	
	.chat-send-btn i {
		font-size: 13px;
	}
	
	.controlli-chat-interattiva {
		gap: 8px;
		padding: 4px 8px;
		margin-bottom: 3px;
	}
	
	.controlli-chat-interattiva .btn {
		padding: 5px 10px;
		font-size: 12px;
	}
	
	.controlli-chat-interattiva span {
		font-size: 12px;
	}
}

/* Extra small devices */
@media screen and (max-width: 480px) {
	.chat-input-wrapper {
		padding: 4px 8px;
		padding-bottom: max(4px, env(safe-area-inset-bottom));
	}
	
	.chat-input {
		border-radius: 18px;
		padding: 7px 10px;
	}
}

/* Landscape mobile - riduce padding verticale */
@media screen and (max-height: 500px) and (orientation: landscape) {
	.chat-input-wrapper {
		padding: 3px 8px;
	}
	
	.chat-input {
		min-height: 32px;
		max-height: 70px;
	}
}