/* ── Ponente Menu — mobile-first ─────────────────────────────────────────── */

:root {
	--bg:        #161926;
	--gold:      #c9a84c;
	--text:      #f5f0e8;
	--muted:     #8a7a5a;
	--sep:       #252836;
	--card-bg:   #1e2133;
}

/* Reset dentro la nostra app ------------------------------------------------ */
body.ponente-app {
	background:              var(--bg) !important;
	color:                   var(--text);
	font-family:             'Poppins', sans-serif;
	min-height:              100vh;
	margin:                  0;
	padding:                 0;
	-webkit-font-smoothing:  antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.ponente-app *,
body.ponente-app *::before,
body.ponente-app *::after {
	box-sizing: border-box;
}

/* ── Header ristorante ─────────────────────────────────────────────────────── */

.menu-header {
	text-align: center;
	padding:    2.5rem 1.5rem 1.5rem;
}

.menu-logo {
	display:    block;
	margin:     0 auto;
	max-height: 130px;
	width:      auto;
	max-width:  70%;
}

/* ── Category nav (sticky) ─────────────────────────────────────────────────── */

.menu-cats-nav {
	position:         sticky;
	top:              0;
	z-index:          100;
	background:       var(--bg);
	border-bottom:    1px solid var(--sep);
	padding:          0.625rem 0;
}

.menu-cats-scroll {
	display:                  flex;
	gap:                      0.5rem;
	padding:                  0 1rem;
	overflow-x:               auto;
	scrollbar-width:          none;
	-webkit-overflow-scrolling: touch;
}

.menu-cats-scroll::-webkit-scrollbar { display: none; }

.cat-btn {
	flex-shrink:   0;
	padding:       0.45rem 1.1rem;
	border:        1px solid var(--sep);
	border-radius: 2rem;
	background:    transparent;
	color:         var(--muted);
	font-family:   'Poppins', sans-serif;
	font-size:     0.78rem;
	font-weight:   500;
	cursor:        pointer;
	white-space:   nowrap;
	transition:    background 0.18s, border-color 0.18s, color 0.18s;
}

.cat-btn.active,
.cat-btn:hover {
	background:   var(--gold);
	border-color: var(--gold);
	color:        var(--bg);
}

/* ── Sezioni menu ──────────────────────────────────────────────────────────── */

.menu-sections {
	padding:    0 1rem 5rem;
	max-width:  680px;
	margin:     0 auto;
}

.menu-section {
	padding-top: 2rem;
}

.menu-section.is-hidden {
	display: none;
}

.section-title {
	font-size:      0.68rem;
	font-weight:    600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color:          var(--gold);
	padding-bottom: 0.75rem;
	border-bottom:  1px solid var(--sep);
	margin-bottom:  1.1rem;
}

.section-nota {
	font-size:     0.78rem;
	font-weight:   300;
	font-style:    italic;
	color:         var(--muted);
	line-height:   1.6;
	margin-bottom: 1.25rem;
}

/* ── Dish list (mobile default: lista orizzontale thumbnail+testo) ─────────── */

.dishes-grid {
	display:        flex;
	flex-direction: column;
}

.dish-card {
	display:     flex;
	gap:         0.875rem;
	padding:     0.875rem 0;
	border-bottom: 1px solid var(--sep);
	align-items: flex-start;
}

.dish-card:last-child {
	border-bottom: none;
}

/* ── Immagine piatto ───────────────────────────────────────────────────────── */

.dish-img-wrap {
	position:      relative;
	flex-shrink:   0;
	width:         80px;
	height:        80px;
	border-radius: 8px;
	overflow:      hidden;
	background:    #111;
}

.dish-img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
}

.dish-img-placeholder {
	width:           100%;
	height:          100%;
	display:         flex;
	align-items:     center;
	justify-content: center;
	background:      #111;
}

.dish-img-placeholder svg {
	width:   34px;
	height:  34px;
	opacity: 0.45;
}

/* ── Label badge ───────────────────────────────────────────────────────────── */

.dish-label {
	position:       absolute;
	bottom:         4px;
	left:           4px;
	right:          4px;
	text-align:     center;
	font-size:      0.48rem;
	font-weight:    600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding:        2px 4px;
	border-radius:  3px;
	color:          var(--bg);
	white-space:    nowrap;
	overflow:       hidden;
	text-overflow:  ellipsis;
	background:     rgba(201, 168, 76, 0.92);
}

.label-novita { background: rgba(76, 173, 154, 0.92); }

/* ── Info piatto ───────────────────────────────────────────────────────────── */

.dish-info {
	flex:      1;
	min-width: 0;
}

.dish-header {
	display:         flex;
	justify-content: space-between;
	align-items:     flex-start;
	gap:             0.5rem;
	margin-bottom:   0.25rem;
}

.dish-name {
	font-size:   0.9rem;
	font-weight: 500;
	color:       var(--text);
	line-height: 1.35;
	margin:      0;
}

.dish-price {
	font-size:   0.9rem;
	font-weight: 600;
	color:       var(--gold);
	white-space: nowrap;
	flex-shrink: 0;
}

.dish-desc {
	font-size:   0.75rem;
	font-weight: 300;
	font-style:  italic;
	color:       var(--muted);
	line-height: 1.55;
	margin:      0;
}

/* ── Intestazioni sottosezione (es. Spritz, Long Drink…) ──────────────────── */

.subsection-title-wrap {
	grid-column: 1 / -1;
	padding:     1.75rem 0 0.25rem;
}

.subsection-title {
	font-size:      0.65rem;
	font-weight:    600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color:          var(--muted);
	padding-bottom: 0.5rem;
	border-bottom:  1px solid var(--sep);
	margin:         0;
}

/* Prima intestazione della sezione non ha spazio sopra */
.dishes-grid > .subsection-title-wrap:first-child {
	padding-top: 0;
}

/* ── Footer ────────────────────────────────────────────────────────────────── */

.menu-footer {
	text-align: center;
	padding:    1.5rem 1rem 3rem;
}

.menu-notices {
	display:         flex;
	flex-wrap:       wrap;
	justify-content: center;
	gap:             0.5rem;
	margin-bottom:   1rem;
}

.menu-notice {
	background:     var(--gold);
	color:          #0a0a0a;
	font-size:      0.72rem;
	font-weight:    600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding:        0.4rem 0.9rem;
	border-radius:  4px;
}

.menu-footer-fine {
	font-size:      0.65rem;
	color:          #333;
	letter-spacing: 0.05em;
	margin:         0;
}

/* ── Modale Allergeni ──────────────────────────────────────────────────────── */

.allergeni-link {
	background:            none;
	border:                none;
	color:                 var(--text);
	font:                  inherit;
	letter-spacing:        inherit;
	text-decoration:       underline;
	text-underline-offset: 2px;
	cursor:                pointer;
	padding:               0;
}

.allergeni-overlay {
	position:        fixed;
	inset:           0;
	background:      rgba(0, 0, 0, 0.82);
	backdrop-filter: blur(3px);
	z-index:         999;
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         1rem;
	opacity:         0;
	visibility:      hidden;
	transition:      opacity 0.3s ease, visibility 0.3s ease;
}

.allergeni-overlay.is-open {
	opacity:    1;
	visibility: visible;
}

.allergeni-modal {
	background:    var(--card-bg);
	border:        1px solid var(--sep);
	border-radius: 16px;
	padding:       2rem 1.5rem 1.75rem;
	width:         100%;
	max-width:     560px;
	max-height:    80vh;
	overflow-y:    auto;
	position:      relative;
	transform:     translateY(12px) scale(0.98);
	opacity:       0;
	transition:    transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.28s ease;
}

.allergeni-overlay.is-open .allergeni-modal {
	transform: translateY(0) scale(1);
	opacity:   1;
}

.allergeni-close-btn {
	position:    absolute;
	top:         0.85rem;
	right:       0.85rem;
	background:  none;
	border:      none;
	color:       var(--muted);
	font-size:   1.1rem;
	cursor:      pointer;
	padding:     0.25rem 0.5rem;
	line-height: 1;
	transition:  color 0.15s;
}

.allergeni-close-btn:hover { color: var(--gold); }

.allergeni-title {
	font-size:      0.72rem;
	font-weight:    600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color:          var(--gold);
	margin:         0 0 1.1rem;
}

.allergeni-body p {
	font-size:   0.8rem;
	font-weight: 300;
	color:       var(--text);
	line-height: 1.65;
	margin:      0 0 1rem;
}

.allergeni-list {
	list-style:    none;
	counter-reset: allergene;
	margin:        0 0 1.25rem;
	padding:       0;
	display:       grid;
	gap:           0.5rem;
}

.allergeni-list li {
	font-size:         0.78rem;
	font-weight:       300;
	color:             var(--muted);
	line-height:       1.5;
	padding-left:      1.5rem;
	position:          relative;
	counter-increment: allergene;
}

.allergeni-list li::before {
	content:     counter(allergene, decimal-leading-zero) '.';
	position:    absolute;
	left:        0;
	color:       var(--gold);
	font-weight: 600;
}

/* ── Desktop (≥ 620px): griglia card con immagine sopra ────────────────────── */

@media (min-width: 620px) {
	.dishes-grid {
		display:               grid;
		grid-template-columns: repeat(2, 1fr);
		gap:                   1px;
		background:            var(--sep);
		border:                1px solid var(--sep);
		border-radius:         12px;
		overflow:              hidden;
	}

	.dish-card {
		flex-direction: column;
		gap:            0;
		padding:        0;
		border-bottom:  none;
		background:     var(--bg);
	}

	.dish-img-wrap {
		width:         100%;
		height:        160px;
		border-radius: 0;
	}

	.dish-info {
		padding: 0.875rem 1rem 1rem;
	}

	.dish-label {
		right:  auto;
		bottom: 8px;
		left:   8px;
		width:  auto;
	}
}


/* ── Desktop (≥ 620px): griglia card con immagine sopra ────────────────────── */

@media (min-width: 620px) {
	.dishes-grid {
		display:               grid;
		grid-template-columns: repeat(2, 1fr);
		gap:                   1px;
		background:            var(--sep);
		border:                1px solid var(--sep);
		border-radius:         12px;
		overflow:              hidden;
	}

	.dish-card {
		flex-direction: column;
		gap:            0;
		padding:        0;
		border-bottom:  none;
		background:     var(--bg);
	}

	.dish-img-wrap {
		width:         100%;
		height:        160px;
		border-radius: 0;
	}

	.dish-info {
		padding: 0.875rem 1rem 1rem;
	}

	.dish-label {
		right:  auto;
		bottom: 8px;
		left:   8px;
		width:  auto;
	}
}