/* Layout Container */
.tab-system {border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); overflow: hidden; transition: all 0.3s ease;}

/* SIDEBAR MODE */
.tab-system.sidebar {display: flex;	min-height: 500px;}
.tab-system.sidebar .tab-nav {width: 250px;padding: 20px 0;overflow-y: auto;}
.tab-system.sidebar .tab-content-wrapper {flex: 1; overflow-y: auto;}

/* ACCORDION MODE */
.tab-system.accordion {display: block;}
.tab-system.accordion .tab-nav {width: 100%;background: none;padding: 0;}
.tab-system.accordion .tab-content-wrapper {display: none;}

/* TAB BUTTONS */
.tab-btn {display: block;width: 100%;padding: 15px 20px;background: transparent;border: none;color: white;text-align: left;cursor: pointer;font-size: 16px;font-weight: 500;transition: all 0.3s ease;
	position: relative;border-radius: 0;}
.tab-system.sidebar .tab-btn {border-left: 4px solid transparent;margin-bottom: 2px;}
.tab-system.sidebar .tab-btn:hover {background: rgba(255,255,255,0.1);border-left-color: #ffd700;transform: translateX(5px);}
.tab-system.sidebar .tab-btn.active {background: rgba(255,255,255,0.15);border-left-color: #ffd700;color: #ffd700;}

/* ACCORDION TAB BUTTONS */
.tab-system.accordion .tab-btn {color: #333;background: #f8f9fa;border: 1px solid #dee2e6;border-bottom: none;padding: 18px 25px;display: flex;align-items: center;justify-content: space-between;
	font-weight: 600;}
.tab-system.accordion .tab-btn:last-child {border-bottom: 1px solid #dee2e6;}
.tab-system.accordion .tab-btn:hover {background: #e9ecef;color: #007bff;}
.tab-system.accordion .tab-btn.active {background: #007bff;color: white;border-color: #007bff;}
.tab-system.accordion .tab-btn::after {content: '+';font-size: 18px;font-weight: bold;transition: transform 0.3s ease;}
.tab-system.accordion .tab-btn.active::after {transform: rotate(45deg);}

/* CONTENT AREAS */
.tab-content {display: none;animation: fadeIn 0.5s ease;}
.tab-content.active {display: block;}
.tab-system.sidebar .tab-content.active {animation: slideInRight 0.4s ease;}

/* ACCORDION CONTENT */
.tab-system.accordion .tab-content {max-height: 0;overflow: hidden;background: white;border: 1px solid #dee2e6;border-top: none;transition: all 0.4s ease;padding: 0 25px;}
.tab-system.accordion .tab-content.active {display: block;max-height: 1000px;padding: 25px;animation: accordionSlide 0.4s ease;}

/* SUB TABS */
.sub-tabs {margin-top: 20px;border-top: 2px solid #f1f3f5;padding-top: 20px;}
.sub-tab-nav {display: flex;gap: 10px;margin-bottom: 20px;flex-wrap: wrap;}
.sub-tab-btn {padding: 8px 16px;background: #f8f9fa;border: 1px solid #dee2e6;border-radius: 6px;cursor: pointer;font-size: 14px;transition: all 0.3s ease;}
.sub-tab-btn:hover {background: #e9ecef;border-color: #adb5bd;transform: translateY(-1px);}
.sub-tab-btn.active {background: #007bff;color: white;border-color: #007bff;}
.sub-tab-content {display: none;padding: 20px;background: #f8f9fa;border-radius: 8px;animation: fadeIn 0.3s ease;}
.sub-tab-content.active {display: block;}

/* CONTENT STYLING */
.content-section {margin-bottom: 20px;}
.content-section h3 {color: #2c3e50;margin-bottom: 15px;font-size: 20px;}
.content-section p {margin-bottom: 15px;line-height: 1.8;}
.highlight-box {background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);color: white;padding: 20px;border-radius: 10px;margin: 15px 0;}

/* ANIMATIONS */
@keyframes fadeIn {from { opacity: 0; transform: translateY(10px); }to { opacity: 1; transform: translateY(0); }}
@keyframes slideInRight {from { opacity: 0; transform: translateX(30px); }to { opacity: 1; transform: translateX(0); }}
@keyframes accordionSlide {from { opacity: 0; transform: translateY(-10px); }to { opacity: 1; transform: translateY(0); }}

/*PIATTO STYLE*/
.piatto{display: flex;margin: 25px 0px; padding: 15px; background:#ffffff;border-radius: 5px;flex-wrap:wrap; align-items:flex-start}
.piatto_immagine{margin-right:10px; position:relative}
.piatto_immagine .immagine{height: 160px; width:160px;background-size: cover; object-fit: cover; background-position: center;}
.piatto_immagine.round{border-radius:150px; overflow:hidden;display:inline-block}
.piatto_immagine .badge {position:absolute; top:0; left: 50%; margin-left: 0; transform: translateX(-50%); font-size: 14px;padding: 15px; min-width: 135px; text-align: center;}
.piatto_header {display: flex; justify-content: space-between; font-weight: bold; line-height: 40px; position:relative;width:100%; margin-bottom:20px}
.piatto_header_titolo{color: var(--dmp-colore-titolo-piatto); font-size:var(--dmp-dimensione-titolo-piatto); padding-right:10px; font-family:var(--dmp-font-titolo-piatto);z-index: 1}
.piatto_header_prezzo{color:var(--dmp-colore-prezzo-piatto);font-size:var(--dmp-dimensione-prezzo-piatto); z-index: 1; padding-left:10px; font-family:var(--dmp-font-prezzo-piatto), Sans-serif;}
.piatto_header_prezzo .unita_piatto{display: block;font-size: 14px;text-align: center;line-height: 1;}
.piatto_prezzi{list-style: none;font-weight: bold; font-size: 18px; padding: 0; margin-top: 10px;}
.piatto_prezzi li{display: inline-block; margin-right: 30px}
.piatto input[type="checkbox"]{-webkit-appearance: none; appearance: none; border-radius: 1px;box-sizing: border-box; position: relative; box-sizing: content-box; width: 150px; height: 150px; border-width: 0;}
.piatto input[type="checkbox"]:focus{outline: 0 none!important;}
.piatto_info{width:80%; display:flex; flex-wrap:wrap; justify-content:space-between;} 
.piatto_descrizione{font-size:var(--dmp-dimensione-descrizione-piatto); font-family:var(--dmp-font-descrizione-piatto); text-align:justify;color:var(--dmp-colore-descrizione-piatto)}
.piatto_quantita input {color: #000; max-width: 100px!important; text-align: center; display: inline-block}
.piatto_quantita{font-size: 20px; text-align: right; margin-top: 10px }

/*BADGES*/
.badge{ display:inline-block; font-size:12px; vertical-align:middle; text-transform:uppercase; background:var(--dmp-colore-sfondo-badge); margin-left:10px; line-height:0; padding:12px; color:var(--dmp-colore-testo-badge); border-radius:5px}

 /* Badge del carrello */
.cart-badge {position: fixed;background: linear-gradient(45deg, #ff6b6b, #ee5a24);border: none;border-radius: 50%;width: 60px;height: 60px;cursor: pointer;transition: all 0.3s ease;box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);display: flex;align-items: center;justify-content: center;bottom: 20px;right: 20px;}
.cart-badge:hover {transform: scale(1.1) rotate(5deg);box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);}
.cart-badge svg {width: 24px;height: 24px;fill: white;}
.cart-count {position: absolute;top: -8px;right: -8px;background: #ffd700;color: #333;border-radius: 50%;	width: 24px;height: 24px;display: flex;align-items: center;justify-content: center;font-size: 12px;font-weight: bold;animation: pulse 2s infinite;}
@keyframes pulse {0% { transform: scale(1); }50% { transform: scale(1.2); }100% { transform: scale(1); }}
 /* Pulsante del carrello */
.add-to-cart-btn {background: var(--dmp-sfondo-categoria-normale);border: none;cursor: pointer;transition: all 0.3s ease;position: relative;overflow: hidden;}
.add-to-cart-btn svg {width: 24px; vertical-align:middle;}
.add-to-cart-btn:hover {transform: scale(1.05); background: var(--dmp-sfondo-categoria-hover)}
.add-to-cart-btn::before {content: '';position: absolute;top: 50%;left: 50%;width: 0;height: 0;background: rgba(255, 255, 255, 0.2);border-radius: 50%;transform: translate(-50%, -50%);transition: width 0.3s ease, height 0.3s ease;}
.add-to-cart-btn:active::before {width: 300px;height: 300px;}

/* Overlay del carrello */
.cart-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.7);backdrop-filter: blur(5px);z-index: 1000;opacity: 0;visibility: hidden;transition: all 0.3s ease;}
.cart-overlay.active {opacity: 1;visibility: visible;}

/* Pannello del carrello */
.cart-panel {position: fixed;top: 0;right: -450px;width: 450px;height: 100vh;background: linear-gradient(180deg, #fff 0%, #f8f9fa 100%);z-index: 1001;transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);box-shadow: -10px 0 30px rgba(0, 0, 0, 0.3);display: flex;flex-direction: column;}
.cart-panel.active {right: 0;}
.cart-header {padding: 20px;background: linear-gradient(45deg, #667eea, #764ba2);color: white;display: flex;justify-content: space-between;align-items: center;}
.cart-title {font-size: 1.5rem;font-weight: 700;}
.close-cart {background: rgba(255, 255, 255, 0.2);border: none;color: white;width: 40px;height: 40px;border-radius: 50%;cursor: pointer;display: flex;align-items: center;justify-content: center;	transition: all 0.3s ease;}
.close-cart:hover{background: rgba(255, 255, 255, 0.3);transform: rotate(90deg);}
.cart-content {flex: 1;overflow-y: auto;padding: 20px;}
.cart-item {display: flex;align-items: center;padding: 15px;margin-bottom: 15px;background: white;border-radius: 15px;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);transition: all 0.3s ease;animation: slideInRight 0.5s ease;}
@keyframes slideInRight {from {	transform: translateX(100px);opacity: 0;}to {transform: translateX(0);opacity: 1;}}
.cart-item:hover {transform: scale(1.02);box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);}
.cart-item-image {width: 60px;height: 60px;background: linear-gradient(45deg, #667eea, #764ba2);border-radius: 10px;display: flex;align-items: center;justify-content: center;margin-right: 15px;font-size: 24px;}
.cart-item-details {flex: 1;}
.cart-item-name {font-weight: 600;color: #333;margin-bottom: 5px;}
.cart-item-price {color: #ff6b6b;font-weight: 700;}
.quantity-controls {display: flex;align-items: center;gap: 10px;margin-top: 10px;}
.quantity-btn {width: 30px;height: 30px;border: none;border-radius: 50%;background: linear-gradient(45deg, #667eea, #764ba2);color: white;cursor: pointer;display: flex;align-items: center;
	justify-content: center;transition: all 0.3s ease;}
.quantity-btn:hover {transform: scale(1.1);}
.quantity {min-width: 30px;text-align: center;font-weight: 600;color: #333;}
.remove-item {background: #ff6b6b;border: none;color: white;width: 30px;height: 30px;border-radius: 50%;cursor: pointer;margin-left: 10px;transition: all 0.3s ease;display: flex;align-items: center;
	justify-content: center;}
.remove-item:hover {background: #ee5a24;transform: scale(1.1) rotate(90deg);}
.cart-footer {padding: 20px;background: #f8f9fa;border-top: 1px solid #e9ecef;}
.cart-total {font-size: 1.5rem;font-weight: 700;color: #333;margin-bottom: 15px;text-align: center;}
.checkout-btn {width: 100%;background: linear-gradient(45deg, #ff6b6b, #ee5a24);color: white;border: none;padding: 15px;	border-radius: 25px;font-size: 1.2rem;font-weight: 600;cursor: pointer;
	transition: all 0.3s ease;}
.checkout-btn:hover {transform: scale(1.02);box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);}
.empty-cart {text-align: center;padding: 40px 20px;color: #666;}
.empty-cart-icon {font-size: 64px;margin-bottom: 20px;opacity: 0.5;}

/* RESPONSIVE */
@media (max-width: 768px) {
	.tab-system.sidebar {display: block !important;}
	.tab-system.sidebar .tab-nav {width: 100% !important;background: none !important;padding: 0 !important;}
	.tab-system.sidebar .tab-content-wrapper {display: none !important;}
	.tab-system.sidebar .tab-btn {color: #333 !important;background: #f8f9fa !important;border: 1px solid #dee2e6 !important;border-bottom: none !important;border-left: none !important;
		padding: 18px 25px !important;margin-bottom: 0 !important;display: flex !important;align-items: center !important;justify-content: space-between !important;font-weight: 600 !important;	}
	.tab-system.sidebar .tab-btn:last-child {border-bottom: 1px solid #dee2e6 !important;}
	.tab-system.sidebar .tab-btn:hover {background: #e9ecef !important;	color: #007bff !important;	transform: none !important;}
	.tab-system.sidebar .tab-btn.active {background: #007bff !important;color: white !important;border-color: #007bff !important;}
	.tab-system.sidebar .tab-btn::after {content: '+' !important;font-size: 18px !important;font-weight: bold !important;transition: transform 0.3s ease !important;}
	.tab-system.sidebar .tab-btn.active::after {transform: rotate(45deg) !important;}
	.tab-system.sidebar .tab-content {max-height: 0 !important;	overflow: hidden !important;background: white !important;border: 1px solid #dee2e6 !important;border-top: none !important;
		transition: all 0.4s ease !important;padding: 0 25px !important;display: block !important;}
	.tab-system.sidebar .tab-content.active {max-height: 1000px !important; padding: 10px !important;}
	.controls {flex-direction: column;gap: 10px;}

	.cart-panel {width: 100%;right: -100%;}
	
	.piatto{padding: 0px;}
	.piatto a{margin: 0 auto 15px auto;}
	.piatto_info {width:100%}
	.piatto_header{margin-bottom:0px}
	.piatto_header_titolo{font-size:18px; line-height:22px;}
	.piatto_header_prezzo {font-size:22px;min-width: 90px;text-align:right;line-height:22px;}
	.piatto_descrizione{margin: 15px 0px;}
	.piatto_carrello, .piatto_carrello button{width:100%}
}