@charset "UTF-8";

/* Bottone categorie */
#mobile-category-btn {
	position: fixed;
	bottom: 20px;
	left: 20px;
	z-index: 1100;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: none;
	background: #198754;
	color: #fff;
	font-size: 24px;
	display: none;
	cursor: pointer;
}

/* Pulsante lente */
#mobile-search-btn {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 1100;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: none;
	background: #0d6efd;
	color: #fff;
	font-size: 24px;
	display: none;
	cursor: pointer;
}

#mobile-category-btn img, #mobile-search-btn img {
	width: 56px;
	height: 56px;
	padding: 1rem;
}

.mobile-close {
	display: none;
}

.mobile-action-btn {
	transition: opacity .2s ease;
}

.mobile-action-btn.hidden {
	opacity: 0;
	pointer-events: none;
}

/* Pulsante Menu */
.menu-toggle {
	display: none;
	cursor: pointer;
	font-weight: bold;
	padding: 0.5rem 1rem;
	width: 100%;
	background-color: var(--color-primary);
	color: white;
	border: none;
	border-radius: 4px;
	border: none;
}

.mobile-navigation img {
	width: 24px;
	height: 24px;
}

/* Mobile drawer sinistro */
@media ( max-width : 1200px) {
	#leftside {
		position: fixed;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: #fff;
		z-index: 1200;
		overflow-y: auto;
		transition: left 0.3s ease;
	}
	#leftside.open {
		left: 0;
	}
	#mobile-category-btn {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	#rightside {
		position: fixed;
		top: 0;
		right: -100%;
		width: 100%;
		height: 100%;
		background: #fff;
		z-index: 1;
		overflow-y: auto;
		transition: right 0.3s ease;
	}
	#rightside.open {
		right: 0;
	}
	#mobile-search-btn {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.mobile-close {
		display: flex;
		justify-content: flex-end;
		padding: 10px;
	}
	.mobile-close button {
		font-size: 24px;
		background: none;
		border: none;
		cursor: pointer;
	}
	.container {
		padding: 15px;
	}
	.logo {
		width: 180px;
	}
	.input-field, .login-btn {
		width: 250px;
	}
	.grid-container {
		grid-template-columns: auto auto auto auto;
	}
	#toastContainer {
	    position: fixed;
	    bottom: 20px;
	    left: 50%;
	    transform: translateX(-50%); /* 🔥 centro perfetto */
	
	    display: flex;
	    flex-direction: column;
	    align-items: center;  /* centra i toast orizzontalmente */
	    gap: 10px;
	
	    z-index: 9999;
	    pointer-events: none; /* opzionale: non blocca click sotto */
	  }
	 #toastContainer .toast {
    position: relative;     /* ❗ NON fixed */
    bottom: auto;
    right: auto;

    width: fit-content;
    max-width: min(90vw, 400px);

    pointer-events: auto;   /* riattiva click sui toast */
    text-align: center;
  }
}

@media ( max-width : 768px) {
	:root {
		--font-size: 0.9rem;
	}
	.input-field, .login-btn, .btn, .back-btn, .change-password-btn {
		width: 100% !important;
		max-width: 320px;
	}
	.form-input {
		width: 100% !important;
	}
	.page-title, .section-title {
		text-align: center;
	}
	.container {
		padding: 15px;
	}
	.logo {
		width: 180px;
	}
	.input-field, .login-btn {
		width: 250px;
	}
	.main-content, .navigation {
		margin: 10px;
		padding: 0px;
		flex-direction: column;
	}
	.container-logged {
		align-items: center;
	}
	.mainmenu {
		display: none;
	}
	.centerside {
		order: 2;
	}
	.leftside, .rightside {
		order: 1;
	}
	.header {
		flex-direction: column;
	}

	/* Layout generale */
	body, .container {
		width: 100%;
	}
	.main-content {
		flex-direction: column;
		padding: 10px !important;
		gap: 20px;
	}
	.two-column-layout {
		flex-direction: column;
		gap: 1rem;
		grid-template-columns: auto;
	}
	.left-column, .right-column {
		width: 100%;
	}
	.header-icons {
		position: static;
		margin-top: 10px;
		justify-content: center;
	}

	/* Nasconde menu desktop */
	.nav-menu {
		display: none;
	}

	/* Mostra menu mobile */
	.mobile-navigation {
		display: block;
		width: 100%;
		flex-direction: column;
	}
	#pmenu.visible {
		left: 0;
	}
	#menu-toggle {
		position: fixed;
		top: 10px;
		left: 10px;
		z-index: 1100;
		background-color: #1abc9c;
		color: white;
		padding: 10px;
		border: none;
		cursor: pointer;
	}
	#navItems.open {
		display: flex;
		flex-direction: column;
		width: 100%;
	}
	.nav-items {
		display: none;
	}
	.nav-link {
		width: 100%;
		text-align: left;
		padding: 0.5rem 1rem;
		border: none;
		border-radius: 4px;
	}
	.menu-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.grid-container {
		grid-template-columns: auto auto auto;
	}
}

@media ( max-width : 480px) {
	.main-content {
		padding: 5px !important;
	}
	.btn, .login-btn {
		font-size: 0.85rem;
		height: 50px;
	}
	.grid-container {
		grid-template-columns: auto auto;
	}
}