/**
 * Meniul digital public — mobile-first.
 * Culorile de brand vin din variabilele setate per restaurant:
 * --dm-primary, --dm-secondary, --dm-on-primary, --dm-font, --dm-ink.
 * --dm-ink-soft, --dm-on-secondary(-soft) sunt derivate automat (vezi
 * DMS_Static_Site_Generator::mix_hex() / on_color_pair()) — NU folosiți
 * --dm-ink/--dm-ink-soft pe un element cu fundal --dm-secondary direct pe
 * el (pastile, badge-uri, footer): --dm-ink e ales liber de restaurant
 * relativ la --dm-paper, nu e garantat lizibil pe --dm-secondary. Folosiți
 * --dm-on-secondary(-soft) acolo.
 *
 * Înaintea blocului :root se injectează regulile @font-face ale fontului
 * încărcat de restaurant (familia DMCustom) — sau nimic, dacă nu există unul;
 * vezi DMS_Static_Site_Generator::font_face_css(). Nu scrieți numele acelui
 * marcaj în comentarii: substituția se face pe tot fișierul.
 */

@font-face {
	font-family: 'DMCustom';
	src: url('assets/fonts/regular-268b7859.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'DMCustom';
	src: url('assets/fonts/bold-268b7859.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	--dm-primary: #c19d60;
	--dm-secondary: #f2eee8;
	--dm-on-primary: #1a1a1a;
	--dm-on-secondary: #1a1a1a;
	--dm-on-secondary-soft: #565554;
	--dm-font: 'DMCustom', Georgia, 'Times New Roman', serif;
	--dm-ink: #1b1b1b;
	--dm-ink-soft: #666565;
	--dm-paper: #fdfcfa;
	--dm-card: #ffffff;
	--dm-line: rgba(36, 31, 26, 0.08);
	--dm-radius: 16px;
	--dm-shadow: 0 1px 2px rgba(36, 31, 26, 0.05), 0 6px 24px rgba(36, 31, 26, 0.06);
	--dm-toolbar-height: 60px;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	/* iOS Safari poate raporta o lățime de scroll a paginii mai mare decât
	   viewport-ul (ex. controalele native date/time din formularul de
	   rezervare) chiar dacă vizual nimic nu depășește ecranul — nereprodus
	   pe Android/Chrome. overflow-x: hidden aici anulează scroll-ul
	   orizontal nedorit al paginii fără să afecteze scroll-ul orizontal
	   intern al elementelor care îl folosesc explicit (ex. bara de categorii). */
	overflow-x: hidden;
}

body.dm-menu-page {
	margin: 0;
	font-family: var(--dm-font);
	background: var(--dm-paper);
	color: var(--dm-ink);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	/* `hidden` ar transforma body într-un container de scroll și ar rupe
	   poziționarea sticky a barei de categorii. `clip` taie doar depășirea
	   orizontală, fără să interfereze cu scroll-ul vertical al documentului. */
	overflow-x: clip;
}

img {
	max-width: 100%;
	height: auto;
}

/* ------------------------------------------------------------------ Hero */

/* Hero scund, doar poză + topbar — identitatea restaurantului (logo, nume,
   descriere, metadate) s-a mutat sub el, în cardul alb `.dm-identity`, ca să
   rămână lizibilă indiferent cât de aglomerată e poza. */
.dm-hero {
	position: relative;
	min-height: 150px;
	overflow: hidden;
	background: var(--dm-primary);
}

.dm-hero--no-cover {
	min-height: 96px;
}

.dm-hero-cover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dm-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.35) 100%);
}

.dm-hero--no-cover .dm-hero-overlay {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.15) 100%);
}

/* Topbar: doar distribuie + „mai multe” (vezi build_index()). Restul
   controalelor de dinainte (social, hartă, FAQ) s-au mutat în sheet-ul
   deschis de „mai multe” — hero-ul rămâne curat, fără iconițe înșirate pe
   poză. */
.dm-hero-topbar {
	position: absolute;
	top: 14px;
	right: 16px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Cardul alb de identitate — sibling al `.dm-hero`, nu copil: `overflow:
   hidden` de mai sus taie doar interiorul hero-ului, nu și acest card, care
   se suprapune intenționat peste marginea lui de jos. */
.dm-identity {
	position: relative;
	max-width: 720px;
	margin: -18px auto 0;
	padding: 0 20px 14px;
	background: var(--dm-paper);
	border-radius: 20px 20px 0 0;
	text-align: left;
}

.dm-logo {
	display: block;
	width: 64px;
	height: 64px;
	margin-top: -32px;
	border-radius: 50%;
	object-fit: cover;
	border: 2.5px solid var(--dm-paper);
	box-shadow: 0 4px 18px rgba(36, 31, 26, 0.25);
	background: #fff;
}

.dm-name {
	margin: 10px 0 2px;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

/* Tagline scurtă (o singură propoziție trunchiată server-side, vezi
   build_index()) — nu mai e descrierea lungă a restaurantului; aceea rămâne
   întreagă în secțiunea „Despre restaurant” a sheet-ului „mai multe”. */
.dm-tagline {
	margin: 0;
	font-size: 14px;
	color: var(--dm-ink-soft);
}

.dm-meta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 8px;
	font-size: 13px;
	color: var(--dm-ink-soft);
}

.dm-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.dm-meta-item svg {
	width: 14px;
	height: 14px;
	flex: none;
}

/* Pastilele „Livrare / Ridicare / La masă" — randate de PHP doar pentru
   opțiunile active (vezi build_index()). Pur informative: listă statică,
   fără click și fără stare selectată — modul de comandă se alege din
   `.dm-toolbar` de jos. */
.dm-order-types {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	max-width: 720px;
	margin: 14px auto 0;
	padding: 0 20px;
	list-style: none;
}

.dm-order-type {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 6px;
	min-height: 44px;
	padding: 10px 12px;
	border: 1.5px solid var(--dm-line);
	border-radius: 14px;
	background: var(--dm-card);
	font: inherit;
	text-align: left;
}

.dm-order-type-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	flex: none;
	background: var(--dm-secondary);
	color: var(--dm-on-secondary);
}

.dm-order-type-icon svg {
	width: 14px;
	height: 14px;
}

.dm-order-type-text {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.dm-order-type-label {
	font-size: 13px;
	font-weight: 700;
	color: var(--dm-ink);
}

.dm-order-type-value {
	font-size: 11px;
	color: var(--dm-ink-soft);
}

/* Bara de căutare, mereu vizibilă — vezi build_index() ({{SEARCH_HTML}}) și
   script-template.js (filtrare live, fără toggle). */
.dm-search {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 680px;
	margin: 14px auto 0;
	padding: 0 14px;
	height: 46px;
	border: 1px solid var(--dm-line);
	border-radius: 999px;
	background: var(--dm-card);
}

/* 680px + 2×20px = 720px, ca să se alinieze exact cu gutter-ul celorlalte
   secțiuni (.dm-identity, .dm-order-types, care folosesc max-width 720px cu
   padding lateral de 20px). */
@media (max-width: 720px) {
	.dm-search {
		max-width: none;
		margin-left: 20px;
		margin-right: 20px;
	}
}

.dm-search-icon {
	flex: none;
	display: flex;
	color: var(--dm-ink-soft);
}

.dm-search-icon svg {
	width: 18px;
	height: 18px;
}

.dm-search-input {
	flex: 1;
	min-width: 0;
	border: none;
	outline: none;
	background: none;
	padding: 0;
	font-family: inherit;
	font-size: 15px;
	color: var(--dm-ink);
}

.dm-search-input::placeholder {
	color: var(--dm-ink-soft);
}

.dm-search-input::-webkit-search-cancel-button,
.dm-search-input::-webkit-search-decoration {
	display: none;
}

.dm-search-clear {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: var(--dm-secondary);
	color: var(--dm-on-secondary);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.dm-search-clear[hidden] {
	display: none;
}

.dm-search-clear svg {
	width: 12px;
	height: 12px;
}

/* Clopoțel de notificări — creat de JS (initNotifBell) doar când
   capabilitatea de notificări e activă, nu e parte din markup-ul PHP static.
   Reutilizează stilul „glass" al lui .dm-action. Se alătură topbar-ului
   (poziție statică, în flux) când acesta există; altfel cade pe poziția
   absolută de mai jos, ca fallback. */
.dm-notif-bell {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: #fff;
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.35);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	cursor: pointer;
	transition: background 0.15s ease;
}

.dm-hero-topbar .dm-notif-bell {
	position: static;
}

.dm-notif-bell:hover {
	background: rgba(255, 255, 255, 0.28);
}

.dm-notif-bell svg {
	width: 20px;
	height: 20px;
}

.dm-notif-bell-badge {
	display: none;
	position: absolute;
	top: -2px;
	right: -2px;
	min-width: 16px;
	height: 16px;
	padding: 0 3px;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--dm-primary);
	color: var(--dm-on-primary);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	border: 2px solid var(--dm-paper);
}

.dm-notif-bell-badge.is-visible {
	display: flex;
}

.dm-action {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 16px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	color: #fff;
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.35);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: background 0.15s ease;
}

.dm-action:hover {
	background: rgba(255, 255, 255, 0.28);
}

.dm-action--primary {
	background: var(--dm-primary);
	border-color: transparent;
	color: var(--dm-on-primary);
}

.dm-action svg {
	width: 17px;
	height: 17px;
	flex: none;
}

/* Rețele sociale + butonul de hartă din hero: doar iconiță, fără text —
   cerc „glass" ca .dm-notif-bell, în loc de pastila cu etichetă a .dm-action
   simplu. aria-label ține locul textului pentru accesibilitate. */
.dm-action--icon {
	width: 40px;
	height: 40px;
	padding: 0;
	justify-content: center;
	border-radius: 50%;
}

.dm-action--icon svg {
	width: 19px;
	height: 19px;
}

/* --------------------------------------------------- Navigație categorii */

/* ----------------------------------------- Scurtături vizuale (categorii)

   Rândul de sub hero. Nu e sticky și nu dublează navigația: nu mai există o
   bară de pastile separată — .dm-shortcuts e singura navigare între
   categorii a site-ului public. */

.dm-shortcuts {
	background: var(--dm-paper);
}

/* Grilă care se rupe pe rânduri — JS (layoutShortcuts, script-template.js)
   arată inițial doar primul rând (restul cartonașelor, `hidden`), fiindcă
   PHP nu poate ști câte încap pe lățimea reală a ecranului. Fără JS, toate
   cartonașele rămân vizibile, pe câte rânduri e nevoie — nu se pierde
   nimic, doar nu se mai plafonează la un rând. */
.dm-shortcuts-track {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
	gap: 8px;
	max-width: 720px;
	margin: 0 auto;
	padding: 14px 20px 4px;
}

.dm-shortcut {
	/* Pătrate: cartonașul își ia înălțimea din lățimea coloanei — necesar ca
	   layoutShortcuts (script-template.js) să poată calcula corect câte
	   cartonașe încap pe un rând din lățimea disponibilă. */
	aspect-ratio: 1;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 6px 4px;
	border: 1px solid var(--dm-line);
	border-radius: 14px;
	background: var(--dm-card);
	box-shadow: var(--dm-shadow);
	color: var(--dm-ink);
	text-decoration: none;
	transition: transform 0.15s ease, border-color 0.15s ease;
}

/* `hidden` trebuie să învingă `display: flex` de mai sus — altfel
   cartonașele pe care JS le scoate din primul rând ar rămâne vizibile. */
.dm-shortcut[hidden] {
	display: none;
}

.dm-shortcut:active {
	transform: scale(0.96);
}

.dm-shortcut:focus-visible {
	outline: 2px solid var(--dm-primary);
	outline-offset: 2px;
}

.dm-shortcut-media {
	width: 34px;
	height: 34px;
	border-radius: 9px;
	overflow: hidden;
	background: var(--dm-paper);
	flex: none;
}

.dm-shortcut-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.dm-shortcut-image--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--dm-ink-soft);
	opacity: 0.55;
}

.dm-shortcut-image--placeholder svg {
	width: 20px;
	height: 20px;
}

.dm-shortcut-name {
	font-size: 10px;
	font-weight: 600;
	line-height: 1.15;
	text-align: center;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-word;
}

/* Cartonașul „Toate (N)" / „Mai puține" de la finalul rândului
   (build_index()) — randat mereu, ascuns implicit (`hidden`); layoutShortcuts
   (script-template.js) îl arată doar dacă chiar există cartonașe scoase din
   primul rând, iar la click extinde rândul chiar în pagină (fără popup). Un
   <button>, nu un <a> ca restul, deci are nevoie de resetul de font/cursor
   pe care browserul nu-l dă implicit butoanelor. Bordură punctată + accent,
   ca să nu se confunde cu o categorie reală. */
.dm-shortcut--more {
	font: inherit;
	cursor: pointer;
	border-style: dashed;
	border-color: var(--dm-primary);
	color: var(--dm-primary);
}

.dm-shortcut-media--more {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	color: var(--dm-primary);
}

.dm-shortcut-media--more svg {
	width: 20px;
	height: 20px;
}

@media (hover: hover) {
	.dm-shortcut:hover {
		border-color: var(--dm-primary);
	}
}

/* Rândul care ține bara de căutare (.dm-search, vezi mai sus) și
   comutatorul listă/grilă unul lângă altul — categoriile nu mai au o bară
   sticky separată (.dm-nav, eliminată): singura navigare între ele e
   rândul vizual .dm-shortcuts de mai sus, care le arată pe toate. */
.dm-search-row {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 720px;
	margin: 14px auto 0;
	padding: 0 20px;
}

.dm-search-row .dm-search {
	flex: 1;
	min-width: 0;
	margin: 0;
	max-width: none;
}

@media (max-width: 720px) {
	.dm-search-row .dm-search {
		margin-left: 0;
		margin-right: 0;
	}
}

/* Comutatorul listă / grilă — arată pictograma modului în care se poate trece. */
.dm-view-toggle {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid var(--dm-line);
	border-radius: 999px;
	background: var(--dm-card);
	color: var(--dm-ink);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.dm-view-toggle svg {
	width: 18px;
	height: 18px;
}

.dm-view-toggle .dm-ico-list {
	display: none;
}

html.dm-view-grid .dm-view-toggle .dm-ico-list {
	display: block;
}

html.dm-view-grid .dm-view-toggle .dm-ico-grid {
	display: none;
}

/* ------------------------------------------------------------------ Meniu */

.dm-menu {
	max-width: 720px;
	margin: 0 auto;
	padding: 8px 16px 40px;
}

.dm-category {
	padding-top: 24px;
}

.dm-category-title {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.dm-category-title::after {
	content: "";
	display: block;
	width: 40px;
	height: 3px;
	margin-top: 6px;
	border-radius: 2px;
	background: var(--dm-primary);
}

.dm-category-description {
	margin: 8px 0 0;
	font-size: 14px;
	color: var(--dm-ink-soft);
}

/* Categorii/produse ascunse de căutare (script-template.js). `.dm-item`
   are `display: flex` explicit, deci atributul `hidden` singur nu ar
   învinge regula — de aici `!important` pe o clasă dedicată. */
.dm-category--search-hidden,
.dm-item--search-hidden {
	display: none !important;
}

/* Modul „listă" (implicit): rânduri plate cu imaginea în stânga, prețul în
   dreapta și separatoare fine — comutabil de vizitator în modul „grilă". */
.dm-items {
	display: flex;
	flex-direction: column;
	margin-top: 8px;
}

.dm-item {
	/* Ancora pentru ::after-ul lui .dm-item-open, care întinde zona de click
	   a butonului de detalii peste tot cardul. */
	position: relative;
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 16px 0;
	border-bottom: 1px solid var(--dm-line);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.dm-item:hover {
	opacity: 0.92;
}

.dm-item:focus-visible {
	outline: 2px solid var(--dm-primary);
	outline-offset: 2px;
	border-radius: 8px;
}

.dm-item:last-child {
	border-bottom: 0;
}

.dm-item--unavailable {
	opacity: 0.55;
	filter: grayscale(0.6);
}

.dm-item-media {
	position: relative;
	flex: none;
}

.dm-item-discount {
	position: absolute;
	top: 6px;
	left: 6px;
	padding: 2px 8px;
	border-radius: 8px;
	background: #d92662;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	display: none; /* vizibil doar în modul grilă */
}

/* Modul „grilă": carduri premium pe 2 coloane — poză mare, badge peste ea,
   nume, preț proeminent, descriere scurtă, etichete compacte (gramaj/
   alergeni) și buton rotund de adăugare rapidă în colțul din dreapta jos.
   Variantele de preț și restul detaliilor rămân doar în popup — nu încap
   vizual pe jumătate de coloană. */
html.dm-view-grid .dm-items {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px 12px;
	margin-top: 14px;
}

html.dm-view-grid .dm-item {
	position: relative;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: 0;
	border-bottom: 0;
	border-radius: 22px;
	background: var(--dm-card);
	box-shadow: 0 1px 2px rgba(36, 31, 26, 0.04), 0 8px 20px rgba(36, 31, 26, 0.07);
	overflow: hidden;
}

@media (hover: hover) {
	html.dm-view-grid .dm-item {
		transition: transform 0.15s ease, box-shadow 0.15s ease;
	}

	html.dm-view-grid .dm-item:hover {
		opacity: 1;
		transform: translateY(-2px);
		box-shadow: 0 4px 8px rgba(36, 31, 26, 0.06), 0 14px 26px rgba(36, 31, 26, 0.1);
	}
}

html.dm-view-grid .dm-item-media {
	width: 100%;
}

html.dm-view-grid .dm-item-image {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: 0;
}

html.dm-view-grid .dm-item-image--placeholder {
	height: auto;
	aspect-ratio: 1 / 1;
}

/* Reducerea stă tot peste poză, dar mutată în dreapta sus, ca să nu se
   suprapună cu pastilele de etichete (bestseller/nou etc.), fixate acum în
   stânga sus — vezi .dm-badges mai jos. */
html.dm-view-grid .dm-item-discount {
	display: inline-block;
	top: 8px;
	left: auto;
	right: 8px;
	z-index: 2;
}

/* Pastilele (recomandat/nou/vegetarian etc.) sunt un element „la fel de
   frate" cu .dm-item-top în marcaj (vezi build_item_card, PHP), nu un copil
   al pozei — de-aia se poziționează absolut față de card (.dm-item are deja
   position:relative), nu față de .dm-item-media. */
html.dm-view-grid .dm-items .dm-badges {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 2;
	margin: 0;
	max-width: calc(100% - 16px);
}

/* Peste poză pastilele au nevoie de un fundal propriu ca să rămână lizibile,
   dar „Indisponibil" e deja plin și cu text alb — dacă intra și el aici,
   ieșea alb pe alb. */
html.dm-view-grid .dm-items .dm-badge:not(.dm-badge--unavailable) {
	background: rgba(255, 255, 255, 0.95);
	border-color: transparent;
	box-shadow: 0 2px 6px rgba(36, 31, 26, 0.14);
}

html.dm-view-grid .dm-items .dm-badge--unavailable {
	box-shadow: 0 2px 6px rgba(36, 31, 26, 0.14);
}

html.dm-view-grid .dm-item-body {
	padding: 10px 12px 12px;
}

html.dm-view-grid .dm-items .dm-item-top {
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}

html.dm-view-grid .dm-items .dm-item-name {
	font-size: 14.5px;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

html.dm-view-grid .dm-items .dm-item-price {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-top: 1px;
	font-size: 16px;
	font-weight: 800;
}

html.dm-view-grid .dm-items .dm-item-price del {
	display: block;
	order: 2;
	margin: 1px 0 0;
	font-size: 12px;
	font-weight: 500;
}

/* În listă rămân text simplu; în grilă, descrierea scurtă și gramajul/
   alergenii devin etichete compacte sub preț — vizual subtile, ușor de
   scanat, fără să concureze cu numele/prețul. */
html.dm-view-grid .dm-items .dm-item-description {
	margin: 4px 0 0;
	font-size: 12px;
	line-height: 1.35;
	-webkit-line-clamp: 2;
}

html.dm-view-grid .dm-items .dm-item-variants {
	display: none;
}

html.dm-view-grid .dm-items .dm-item-meta {
	margin: 8px 0 0;
	gap: 6px;
}

html.dm-view-grid .dm-items .dm-item-allergens {
	margin: 6px 0 0;
}

html.dm-view-grid .dm-items .dm-item-allergens .dm-allergens {
	gap: 6px;
}

html.dm-view-grid .dm-items .dm-item-quantity {
	display: inline-flex;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--dm-paper);
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
}

html.dm-view-grid .dm-items .dm-allergen-chip {
	/* Coloana de grilă e mult mai îngustă decât rândul din lista: chipul
	   „poate conține urme de …" (fără pictogramă, deci fără nowrap necesar
	   pentru aliniere) trebuie să se poată rupe pe mai multe rânduri, altfel
	   iese din card și e tăiat de overflow:hidden de pe .dm-item. */
	white-space: normal;
	font-size: 11px;
	padding: 2px 8px 2px 6px;
}

html.dm-view-grid .dm-items .dm-allergen-chip svg {
	width: 11px;
	height: 11px;
}

.dm-item-body {
	flex: 1;
	min-width: 0;
}

.dm-item-top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.dm-item-name {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
}

.dm-item-price {
	flex: none;
	font-size: 15px;
	color: var(--dm-primary);
	white-space: nowrap;
}

.dm-item-price del {
	color: var(--dm-ink-soft);
	font-size: 13px;
	margin-right: 5px;
}

.dm-item-description {
	margin: 6px 0 0;
	font-size: 14px;
	color: var(--dm-ink-soft);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Descrierile lungi se extind la atingere (clasa e pusă din script). */
.dm-item-description.is-clampable {
	cursor: pointer;
}

.dm-item-description.is-expanded {
	-webkit-line-clamp: unset;
}

.dm-item-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin: 8px 0 0;
	font-size: 12px;
	color: var(--dm-ink-soft);
}

/* Butonul din jurul numelui e ținta „deschide detaliile”, dar zona lui de
   click e tot cardul: ::after-ul absolut îl întinde peste el. Astfel rămâne
   un singur element focusabil pentru acțiunea asta, în loc de un card cu
   role="button" în care n-am putea pune butonul de adăugare. */
.dm-item-open {
	appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

.dm-item-open::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.dm-item-open:focus-visible {
	outline: none;
}

.dm-item-open:focus-visible::after {
	outline: 2px solid var(--dm-primary);
	outline-offset: -2px;
	border-radius: 12px;
}

.dm-item-meta:empty {
	display: none;
}

.dm-item-quantity {
	font-weight: 600;
}

/* ------------------------------------------------------- Alergeni (chip-uri) */

.dm-item-allergens {
	margin-top: 6px;
}

.dm-allergens {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.dm-allergen-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 9px 3px 6px;
	border-radius: 999px;
	background: var(--dm-paper, #f4ece0);
	color: var(--dm-ink-soft);
	font-size: 11.5px;
	font-weight: 600;
	white-space: nowrap;
}

.dm-allergen-chip svg {
	width: 13px;
	height: 13px;
	flex: none;
}

.dm-allergen-chip--extra {
	background: transparent;
	border: 1px dashed var(--dm-line);
	font-style: italic;
	font-weight: 500;
}

.dm-modal-info-row .dm-allergen-chip {
	font-size: 12.5px;
	padding: 4px 10px 4px 7px;
}

.dm-modal-info-row .dm-allergen-chip svg {
	width: 14px;
	height: 14px;
}

/* ------------------------------------------------- Variante de preț */

.dm-item-variants {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin-top: 8px;
}

.dm-variant {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	font-size: 13.5px;
}

.dm-variant-name {
	color: var(--dm-ink-soft);
}

.dm-variant-price {
	font-weight: 600;
	color: var(--dm-primary);
	white-space: nowrap;
}

.dm-item-image {
	flex: none;
	width: 92px;
	height: 92px;
	object-fit: cover;
	border-radius: 12px;
}

.dm-item-image--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--dm-secondary);
	color: var(--dm-primary);
}

.dm-item-image--placeholder svg {
	width: 34px;
	height: 34px;
	opacity: 0.55;
}

/* -------------------------------------- Valori nutriționale (stil FDA) */

.dm-nutrition-label {
	max-width: 290px;
	margin-top: 8px;
	padding: 8px 10px;
	background: #fff;
	border: 1px solid var(--dm-ink);
	border-radius: 4px;
	color: var(--dm-ink);
}

.dm-nl-title {
	margin: 0;
	font-size: 20px;
	line-height: 1.1;
	font-weight: 800;
	letter-spacing: -0.02em;
	border-bottom: 1px solid var(--dm-ink);
	padding-bottom: 4px;
}

.dm-nl-serving {
	margin: 4px 0 0;
	font-size: 12px;
	font-weight: 600;
	border-bottom: 7px solid var(--dm-ink);
	padding-bottom: 5px;
}

.dm-nl-cal {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 10px;
	border-bottom: 4px solid var(--dm-ink);
	padding: 4px 0 5px;
}

.dm-nl-cal span {
	font-size: 15px;
	font-weight: 800;
}

.dm-nl-cal span small {
	display: block;
	font-size: 10.5px;
	font-weight: 400;
	color: var(--dm-ink-soft);
}

.dm-nl-cal b {
	font-size: 30px;
	line-height: 1;
	font-weight: 800;
}

.dm-nl-row {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font-size: 12.5px;
	padding: 3px 0;
	border-bottom: 1px solid rgba(36, 31, 26, 0.25);
}

.dm-nl-row:last-child {
	border-bottom: 0;
}

.dm-nl-row span {
	font-weight: 700;
}

.dm-nl-row b {
	font-weight: 400;
	white-space: nowrap;
}

.dm-nl-row--sub span {
	font-weight: 400;
	padding-left: 14px;
}

/* ----------------------------------------------------------------- Badges */

.dm-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 7px;
}

.dm-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 10px 3px 7px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.005em;
	line-height: 1.5;
	white-space: nowrap;
	/* Fundal și contur foarte deschise, litere normale (nu majuscule): eticheta
	   trebuie citită ca o notă discretă lângă produs, nu ca un autocolant de
	   promoție. Culoarea o poartă doar pictograma. */
	background: var(--dm-badge-tint, #f5f2ee);
	border: 1px solid var(--dm-badge-line, var(--dm-line));
	color: var(--dm-ink);
}

.dm-badge svg {
	width: 13px;
	height: 13px;
	flex: none;
	color: var(--dm-badge-ink, var(--dm-ink-soft));
}

.dm-badge--recommended {
	--dm-badge-tint: #fbf5e8;
	--dm-badge-line: #ecdfc3;
	--dm-badge-ink: #a9801f;
}

.dm-badge--new {
	--dm-badge-tint: #eff3fd;
	--dm-badge-line: #d8e2f7;
	--dm-badge-ink: #3868cc;
}

.dm-badge--vegetarian {
	--dm-badge-tint: #f0f6f1;
	--dm-badge-line: #d7e7da;
	--dm-badge-ink: #3f8451;
}

.dm-badge--vegan {
	--dm-badge-tint: #ebf5ee;
	--dm-badge-line: #cfe5d5;
	--dm-badge-ink: #2e7d43;
}

.dm-badge--spicy {
	--dm-badge-tint: #fdf1ec;
	--dm-badge-line: #f6ded4;
	--dm-badge-ink: #c2502c;
}

.dm-badge--gluten_free {
	--dm-badge-tint: #faf4e6;
	--dm-badge-line: #eee2c7;
	--dm-badge-ink: #8d6f22;
}

/* Indisponibil rămâne singurul badge „plin”: nu e o însușire a produsului, ci
   o stare care trebuie să oprească ochiul. */
.dm-badge--unavailable {
	--dm-badge-tint: #3c3530;
	--dm-badge-line: #3c3530;
	color: #fff;
	padding-left: 10px;
}

/* ----------------------------------------------------------------- Footer */

.dm-empty {
	padding: 60px 20px;
	text-align: center;
	color: var(--dm-ink-soft);
}

.dm-footer {
	border-top: 1px solid var(--dm-line);
	background: var(--dm-secondary);
	padding: 32px 20px 26px;
}

.dm-footer-block {
	max-width: 720px;
	margin: 0 auto 20px;
}

.dm-footer-block h3 {
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--dm-primary);
}

.dm-footer-block p {
	margin: 2px 0;
	font-size: 14px;
	color: var(--dm-on-secondary);
}

.dm-footer-block a {
	color: inherit;
}

.dm-footer-lang p {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
}

.dm-footer-lang .dm-lang-current {
	font-weight: 700;
}

.dm-footer-lang .dm-lang-link {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.dm-footer-note {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px 16px;
	max-width: 720px;
	margin: 0 auto;
	padding-top: 14px;
	border-top: 1px solid var(--dm-line);
	font-size: 12px;
	color: var(--dm-on-secondary-soft);
}

.dm-footer-powered a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---------------------------------------------------------- Ecrane medii+ */

@media (min-width: 640px) {
	.dm-hero {
		min-height: 248px;
	}

	.dm-logo {
		width: 76px;
		height: 76px;
	}

	.dm-name {
		font-size: 30px;
	}

	.dm-item-image {
		width: 110px;
		height: 110px;
	}

	html.dm-view-grid .dm-items {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	}
}

/* ------------------------------------------------- Popup detalii produs */
/* Reutilizează marcajul cardului (nume, preț, badge-uri, descriere,
   variante, nutriție) clonat dintr-un <template> — de aceea suprascrie doar
   clamparea descrierii și afișarea reducerii/discount-ului. Machetă pe două
   coloane (stil Glovo): în dreapta imaginea + esențialul, în stânga taburi
   cu restul informațiilor (nutriție, ingrediente/alergeni, extra-uri). Pe
   mobil coloanele se stivuiesc — esențialul sus, taburile dedesubt. */

/* html, nu doar body: html are deja overflow-x:hidden (vezi regula de mai
   sus, fix Safari) — un overflow diferit de „visible" pe elementul rădăcină
   oprește propagarea overflow-ului lui body către viewport, deci html rămâne
   elementul de scroll real al paginii. `body.dm-modal-open { overflow:hidden }`
   singur nu bloca deloc scroll-ul real, doar transforma inutil body într-un
   container de scroll propriu (fără să oprească scroll-ul paginii). */
html.dm-modal-open,
body.dm-modal-open {
	overflow: hidden;
}

.dm-modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

.dm-modal.is-open {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

.dm-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 16, 12, 0.55);
}

.dm-modal-panel {
	position: relative;
	width: 100%;
	max-width: 480px;
	max-height: 88vh;
	overflow-y: auto;
	background: var(--dm-paper);
	border-radius: 20px 20px 0 0;
	box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25);
	transform: translateY(24px);
	transition: transform 0.25s ease;
	-webkit-overflow-scrolling: touch;
}

.dm-modal.is-open .dm-modal-panel {
	transform: translateY(0);
}

.dm-modal-close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--dm-ink);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.dm-modal-close svg {
	width: 18px;
	height: 18px;
}

/* Coloană unică implicit — exact popup-ul inițial. Dacă produsul are taburi
   (nutriție/ingrediente/extra-uri), acestea se afișează pur și simplu sub
   esențialul produsului (ordinea din HTML). Layout-ul pe două coloane se
   activează doar pe ecrane late ȘI doar când chiar există taburi — vezi
   .dm-modal-panel--tabs, comutat din JS la deschiderea popup-ului. */
.dm-modal-tabs {
	border-top: 1px solid var(--dm-line);
}

/* Poza nu mai atinge marginile popup-ului (nici măcar sus, sub butonul de
   închidere) — un mic gutter în jurul ei, ca restul conținutului de mai jos. */
.dm-modal-media {
	position: relative;
	padding: 14px 14px 0;
}

.dm-modal-media .dm-item-image,
.dm-modal-media .dm-item-image--placeholder {
	width: 100%;
	height: auto;
	max-height: 260px;
	aspect-ratio: 4 / 3;
	border-radius: 14px;
}

.dm-modal-media .dm-item-image--placeholder svg {
	width: 56px;
	height: 56px;
}

/* Badge-ul de reducere e ascuns implicit (vizibil doar în modul grilă) —
   în popup se vede mereu, dacă produsul are preț redus. Offset-ul se
   ajustează cu gutter-ul de mai sus, ca să rămână lipit de colțul pozei. */
.dm-modal-media .dm-item-discount {
	display: inline-block;
	top: 20px;
	left: 20px;
}

.dm-modal-body {
	padding: 18px 18px 32px;
}

/* Numele și prețul contează mai mult în popup (unde clientul decide comanda)
   decât în listă — mărite doar aici, cardul rămâne neschimbat. */
.dm-modal-body .dm-item-name {
	font-size: 21px;
}

.dm-modal-body .dm-item-price {
	font-size: 18px;
}

.dm-modal-body .dm-item-description {
	display: block;
	-webkit-line-clamp: unset;
	overflow: visible;
	cursor: default;
}

.dm-modal-quantity {
	margin: 10px 0 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--dm-ink-soft);
}

/* Taburi: Valori nutriționale / Ingrediente & alergeni / Extra-uri — apar
   doar dacă produsul are date pentru ele (vezi build_item_modal, PHP). */
.dm-modal-tablist {
	display: flex;
	gap: 4px;
	padding: 14px 16px 0;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.dm-modal-tablist::-webkit-scrollbar {
	display: none;
}

.dm-modal-tab {
	flex: none;
	padding: 8px 6px;
	border: none;
	border-bottom: 2px solid transparent;
	background: none;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--dm-ink-soft);
	white-space: nowrap;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.dm-modal-tab.is-active {
	color: var(--dm-primary);
	border-bottom-color: var(--dm-primary);
}

.dm-modal-tabpanels {
	padding: 14px 16px 22px;
}

.dm-modal-tabpanel {
	display: none;
}

.dm-modal-tabpanel.is-active {
	display: block;
}

.dm-modal-tabpanel .dm-nutrition-label {
	max-width: none;
}

.dm-nutrition-note {
	margin: 6px 0 0;
	font-size: 12px;
	color: var(--dm-ink-soft);
}

.dm-modal-info-row {
	margin-bottom: 14px;
}

.dm-modal-info-row:last-child {
	margin-bottom: 0;
}

.dm-modal-info-row h4,
.dm-modal-extra-group h4 {
	margin: 0 0 4px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--dm-ink-soft);
}

.dm-modal-info-row p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--dm-ink);
}

.dm-modal-extra-group {
	margin-bottom: 16px;
}

.dm-modal-extra-group:last-child {
	margin-bottom: 0;
}

.dm-modal-extra-row {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font-size: 13.5px;
	padding: 6px 0;
	border-bottom: 1px solid var(--dm-line);
}

.dm-modal-extra-row:last-child {
	border-bottom: 0;
}

.dm-modal-extra-row b {
	color: var(--dm-primary);
	font-weight: 600;
	white-space: nowrap;
}

/* Popup-ul de întrebări frecvente — acordeon, deschis din butonul dedicat
   din hero (vezi build_faq_modal(), PHP, și script-template.js). */
.dm-faq-modal-body {
	padding-top: 20px;
}

.dm-faq-list {
	margin-top: 12px;
}

.dm-faq-item {
	border-bottom: 1px solid var(--dm-line);
}

.dm-faq-item:last-child {
	border-bottom: 0;
}

.dm-faq-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 14px 2px;
	border: none;
	background: none;
	font: inherit;
	font-size: 14.5px;
	font-weight: 600;
	text-align: left;
	color: var(--dm-ink);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.dm-faq-question svg {
	flex: none;
	width: 18px;
	height: 18px;
	color: var(--dm-ink-soft);
	transition: transform 0.15s ease;
}

.dm-faq-item.is-open .dm-faq-question svg {
	transform: rotate(180deg);
	color: var(--dm-primary);
}

.dm-faq-answer {
	display: none;
	padding: 0 2px 16px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--dm-ink-soft);
}

.dm-faq-answer p {
	margin: 0 0 10px;
}

.dm-faq-answer p:last-child {
	margin-bottom: 0;
}

.dm-faq-item.is-open .dm-faq-answer {
	display: block;
}

/* Sheet-ul „Mai multe despre restaurant" (build_more_modal(), deschis din
   butonul „⋯” al topbar-ului) — secțiuni simple, fiecare cu un titlu mic și
   fie text, fie o listă de rânduri apăsabile. */
.dm-more-section {
	margin-bottom: 20px;
}

.dm-more-section:last-child {
	margin-bottom: 0;
}

.dm-more-section h4 {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--dm-ink-soft);
}

.dm-more-section p {
	margin: 0 0 4px;
	font-size: 14px;
	color: var(--dm-ink);
}

.dm-more-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 11px 4px;
	border: none;
	border-top: 1px solid var(--dm-line);
	background: none;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--dm-ink);
	text-decoration: none;
	text-align: left;
	cursor: pointer;
}

.dm-more-section p + .dm-more-item,
.dm-more-item:first-of-type {
	border-top: none;
}

.dm-more-item svg {
	width: 18px;
	height: 18px;
	flex: none;
	color: var(--dm-ink-soft);
}

/* Pe mobil, popup-ul ocupă tot ecranul (stil aplicație), nu doar un bottom
   sheet parțial — mai mult spațiu pentru poză, descriere și taburi. */
@media (max-width: 639px) {
	.dm-modal-panel {
		max-width: none;
		width: 100%;
		height: 100%;
		max-height: 100vh;
		border-radius: 0;
	}

	/* Popup-ul ocupă tot ecranul aici — fără gutter-ul de jos al backdrop-ului
	   de pe desktop, deci ultimul conținut (butonul „Adaugă”) are nevoie de
	   propriul spațiu față de bara de gesturi a telefonului. */
	.dm-modal-body {
		padding-bottom: calc(32px + env(safe-area-inset-bottom));
	}
}

@media (min-width: 640px) {
	.dm-modal {
		align-items: center;
		padding: 24px;
	}

	.dm-modal-panel {
		border-radius: 20px;
		transform: translateY(12px) scale(0.98);
	}

	.dm-modal.is-open .dm-modal-panel {
		transform: translateY(0) scale(1);
	}

	/* Popup-ul FĂRĂ taburi (majoritatea produselor) rămâne prea îngust la
	   480px pe ecrane late — crește progresiv cu lățimea ferestrei, plafonat
	   ca să nu devină nefiresc de lat pe monitoare mari. */
	.dm-modal-panel:not(.dm-modal-panel--tabs) {
		max-width: clamp(480px, 64vw, 560px);
	}
}

/* De la această lățime, popup-ul unui produs CU taburi trece pe două coloane
   fixe (stil Glovo): taburile în stânga, esențialul produsului în dreapta —
   fiecare coloană cu scroll propriu. Fără taburi, popup-ul rămâne coloana
   unică (regulile de mai sus), indiferent de lățimea ecranului. */
@media (min-width: 760px) {
	.dm-modal-panel.dm-modal-panel--tabs {
		max-width: 860px;
		height: 78vh;
		max-height: 620px;
		overflow-y: hidden;
	}

	/* .dm-modal-content e intermediarul în care JS clonează <template>-ul
	   produsului — fără o înălțime proprie explicită, height:100% de pe
	   .dm-modal-grid nu are față de ce să se raporteze (rămâne „auto"),
	   iar coloanele nu se mai pot micșora sub conținutul lor ca să scroleze. */
	.dm-modal-panel--tabs .dm-modal-content {
		height: 100%;
	}

	.dm-modal-panel--tabs .dm-modal-grid {
		display: grid;
		grid-template-areas: "tabs main";
		grid-template-columns: 300px 1fr;
		height: 100%;
	}

	.dm-modal-panel--tabs .dm-modal-main {
		grid-area: main;
		min-height: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.dm-modal-panel--tabs .dm-modal-tabs {
		grid-area: tabs;
		display: flex;
		flex-direction: column;
		min-height: 0;
		border-top: 0;
		border-right: 1px solid var(--dm-line);
	}

	.dm-modal-panel--tabs .dm-modal-tablist {
		flex-wrap: wrap;
		padding: 20px 16px 8px;
	}

	.dm-modal-panel--tabs .dm-modal-tabpanels {
		flex: 1;
		min-height: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 8px 20px 20px;
	}

	.dm-modal-panel--tabs .dm-modal-media {
		padding: 24px 24px 0;
	}

	.dm-modal-panel--tabs .dm-modal-media .dm-item-image,
	.dm-modal-panel--tabs .dm-modal-media .dm-item-image--placeholder {
		max-height: 300px;
		border-radius: 16px;
	}

	/* Fără taburi (produs simplu, sau combo fără nutriție/ingrediente/extra-uri
	   declarate) — de la această lățime tot mai e loc pentru poză și esențialul
	   produsului una lângă alta, nu doar poza deasupra textului. */
	.dm-modal-panel:not(.dm-modal-panel--tabs) {
		max-width: clamp(560px, 70vw, 860px);
	}

	.dm-modal-panel:not(.dm-modal-panel--tabs) .dm-modal-main {
		display: grid;
		grid-template-columns: minmax(220px, 38%) 1fr;
		align-items: start;
	}

	.dm-modal-panel:not(.dm-modal-panel--tabs) .dm-modal-media {
		padding: 20px 0 20px 20px;
	}

	.dm-modal-panel:not(.dm-modal-panel--tabs) .dm-modal-media .dm-item-discount {
		top: 26px;
		left: 26px;
	}

	.dm-modal-panel:not(.dm-modal-panel--tabs) .dm-modal-body {
		min-width: 0;
		/* Sus, coloana de text pornește de la aceeași înălțime cu poza — fără
		   taburi care s-o coboare dedesubt, numele/prețul ar ajunge chiar sub
		   butonul de închidere (absolut, 12–46px). Padding-top generos ca să-l
		   ocolească pe verticală, indiferent cât de lat e prețul. */
		padding: 50px 20px 32px 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* ------------------------------------------------- Comandă la masă (coș). */

.dm-order-controls {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--dm-line);
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Opțiune simplă, în linie, cu bulina nativă vizibilă — o mai folosește doar
   selectorul de plată din coș. Pașii de configurare a produsului refolosesc
   clasa, dar o redesenează complet ca pe un card (vezi mai jos). */
.dm-order-option {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	cursor: pointer;
}

.dm-order-option input {
	width: 18px;
	height: 18px;
	accent-color: var(--dm-primary);
	flex: none;
}

.dm-order-option:has(input:disabled) {
	opacity: 0.45;
	cursor: not-allowed;
}

/* ------------------------------- Pașii de configurare a unui produs.

   Fiecare alegere (variantă, grup de extra-uri, slot de meniu compus) e un
   card numerotat și pliabil, iar opțiunile din el sunt carduri apăsabile pe
   toată suprafața, nu rânduri cu buline mici. Starea aleasă nu se sprijină
   doar pe culoarea conturului — cardul primește și fundal colorat, și o
   bifă plină în colț, ca să se vadă la fel de clar și fără percepția
   culorii. Marcajul e construit în JS (renderOrderControls). */

.dm-order-group {
	border-radius: 18px;
	background: var(--dm-card);
	box-shadow: 0 1px 2px rgba(36, 31, 26, 0.04);
}

.dm-order-group-head {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 52px;
	padding: 12px 14px;
	border: 0;
	border-radius: 18px;
	background: none;
	font: inherit;
	text-align: left;
	color: var(--dm-ink);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.dm-order-group-num {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--dm-primary);
	color: var(--dm-on-primary);
	font-size: 13px;
	font-weight: 700;
}

.dm-order-group-title {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 2px 7px;
}

.dm-order-group-name {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
}

.dm-order-group-hint {
	font-size: 13px;
	color: var(--dm-ink-soft);
}

.dm-order-group-chevron {
	flex: none;
	display: flex;
	width: 20px;
	height: 20px;
	color: var(--dm-ink-soft);
	transition: transform 0.18s ease;
}

.dm-order-group-chevron svg {
	width: 100%;
	height: 100%;
}

.dm-order-group.is-open .dm-order-group-chevron {
	transform: rotate(180deg);
}

/* Corpul grupului e ascuns cât timp cardul e pliat; afișarea lui diferă
   după machetă — listă verticală, grilă de două coloane sau rând derulabil
   orizontal (vezi alegerea din renderOrderControls). */
.dm-order-group-body {
	display: none;
	padding: 0 12px 14px;
}

.dm-order-group.is-open .dm-order-options--list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dm-order-group.is-open .dm-order-options--grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.dm-order-group.is-open .dm-order-options--scroll {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	/* Cardurile au contur și inel de focus — fără puțin aer, ambele s-ar
	   tăia la marginile zonei derulabile. */
	padding-bottom: 4px;
}

.dm-order-group.is-open .dm-order-options--scroll::-webkit-scrollbar {
	display: none;
}

.dm-order-group-body .dm-order-option {
	position: relative;
	gap: 10px;
	min-height: 52px;
	padding: 10px 40px 10px 12px;
	border: 1.5px solid var(--dm-line);
	border-radius: 14px;
	background: var(--dm-card);
	transition: border-color 0.15s ease, background-color 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}

/* Input-ul rămâne un radio/checkbox real (deci focusabil și anunțat de
   cititoarele de ecran), dar nu se mai vede: rolul lui vizual îl preia
   bifa din colțul cardului. */
.dm-order-group-body .dm-order-option input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.dm-order-group-body .dm-order-option--visual {
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	padding: 10px 10px 12px;
	text-align: center;
}

.dm-order-options--scroll .dm-order-option--visual {
	flex: none;
	width: 108px;
	scroll-snap-align: start;
}

.dm-order-option-media {
	display: flex;
	align-items: center;
	justify-content: center;
}

.dm-order-option-image {
	display: block;
	width: 100%;
	object-fit: cover;
	border-radius: 10px;
}

.dm-order-options--grid .dm-order-option-image {
	height: 104px;
	border-radius: 12px;
}

.dm-order-options--scroll .dm-order-option-image {
	height: 66px;
}

.dm-order-option-text {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 2px;
}

.dm-order-options--list .dm-order-option-text {
	flex: 1;
	flex-direction: row;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}

.dm-order-option-label {
	font-size: 14px;
	line-height: 1.3;
	/* Denumirile lungi („Cartofi Prăjiți - Porție Medie") se rup în cuvinte,
	   fără să lățească celula și să strice alinierea cardurilor. */
	overflow-wrap: anywhere;
}

.dm-order-option-price {
	font-size: 12.5px;
	font-weight: 700;
	white-space: nowrap;
	color: color-mix(in srgb, var(--dm-primary) 55%, var(--dm-ink));
}

.dm-order-option-mark {
	position: absolute;
	top: 8px;
	right: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border: 1.5px solid var(--dm-line);
	border-radius: 50%;
	background: var(--dm-card);
	color: transparent;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.dm-order-option-mark svg {
	width: 13px;
	height: 13px;
}

/* Pătrățel rotunjit acolo unde se pot alege mai multe opțiuni (checkbox),
   cerc acolo unde alegerea e unică — aceeași convenție ca a controalelor
   native pe care le înlocuiește. */
.dm-order-group-body .dm-order-option:has(input[type="checkbox"]) .dm-order-option-mark {
	border-radius: 7px;
}

.dm-order-group-body .dm-order-option:not(.dm-order-option--visual) .dm-order-option-mark {
	top: 50%;
	transform: translateY(-50%);
}

.dm-order-group-body .dm-order-option:has(input:checked) {
	border-color: var(--dm-primary);
	background: color-mix(in srgb, var(--dm-primary) 10%, var(--dm-card));
}

.dm-order-group-body .dm-order-option:has(input:checked) .dm-order-option-mark {
	border-color: var(--dm-primary);
	background: var(--dm-primary);
	color: var(--dm-on-primary);
}

.dm-order-group-body .dm-order-option:has(input:focus-visible) {
	outline: 2px solid var(--dm-primary);
	outline-offset: 2px;
}

/* ------------------------------------------- Bara de acțiuni a produsului. */

.dm-order-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dm-order-actions-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Starea configurării, în locul mesajului roșu de dinainte: neutră cât timp
   mai sunt pași de făcut, verde când produsul e gata de adăugat. */
.dm-order-status {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	border-radius: 14px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	background: color-mix(in srgb, var(--dm-ink) 5%, var(--dm-card));
	color: var(--dm-ink-soft);
}

.dm-order-status[hidden] {
	display: none;
}

.dm-order-status-icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 700;
}

.dm-order-status--pending .dm-order-status-icon {
	background: color-mix(in srgb, var(--dm-ink) 12%, var(--dm-card));
	color: var(--dm-ink);
}

.dm-order-status--done {
	background: #edf6ef;
	color: #256b38;
}

.dm-order-status--done .dm-order-status-icon {
	background: #2e7d43;
	color: #ffffff;
}

.dm-order-status--done .dm-order-status-icon svg {
	width: 13px;
	height: 13px;
}

.dm-order-qty {
	flex: none;
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 2px;
	border: 1px solid var(--dm-line);
	border-radius: 999px;
	background: var(--dm-card);
}

/* 44px: minimul de suprafață apăsabilă pe un ecran tactil. */
.dm-qty-btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 0;
	background: transparent;
	color: var(--dm-ink);
	font-size: 19px;
	line-height: 1;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.dm-qty-value {
	min-width: 16px;
	text-align: center;
	font-size: 15px;
	font-weight: 700;
}

.dm-order-add {
	flex: 1;
	min-height: 52px;
	border: none;
	border-radius: 999px;
	padding: 13px 12px;
	background: var(--dm-primary);
	color: var(--dm-on-primary);
	/* Eticheta („Adaugă în comandă — 139 lei") stă pe un singur rând chiar și
	   pe telefoanele mici — alături de selectorul de cantitate, un al doilea
	   rând ar dezechilibra bara. De-aia se micșorează cu ecranul, în loc să
	   se rupă. */
	font-size: clamp(13.5px, 3.7vw, 15px);
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
}

/* Dezactivat, dar tot lizibil: galben pal, nu buton stins cu opacitate — ca
   să rămână evident ce urmează după ce se termină alegerile. */
.dm-order-add:disabled {
	background: color-mix(in srgb, var(--dm-primary) 30%, var(--dm-card));
	color: color-mix(in srgb, var(--dm-ink) 55%, var(--dm-card));
	cursor: not-allowed;
}

/* ------------------------ Detalii pliate sub bara de acțiuni („Ce conține
   meniul", valori nutriționale, alergeni). Conținutul vine din panourile de
   taburi randate de PHP, mutate aici de JS. */

.dm-order-accordion {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dm-order-accordion-item {
	border: 1px solid var(--dm-line);
	border-radius: 16px;
	background: var(--dm-card);
}

.dm-order-accordion-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	border: 0;
	border-radius: 16px;
	background: none;
	font: inherit;
	font-size: 14.5px;
	font-weight: 600;
	text-align: left;
	color: var(--dm-ink);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.dm-order-accordion-chevron {
	flex: none;
	display: flex;
	width: 18px;
	height: 18px;
	color: var(--dm-ink-soft);
	transition: transform 0.18s ease;
}

.dm-order-accordion-chevron svg {
	width: 100%;
	height: 100%;
}

.dm-order-accordion-item.is-open .dm-order-accordion-chevron {
	transform: rotate(180deg);
}

.dm-order-accordion-body {
	display: none;
	padding: 0 14px 14px;
}

.dm-order-accordion-item.is-open .dm-order-accordion-body {
	display: block;
}

/* Panoul vine din marcajul de taburi, unde era ascuns până devenea activ;
   în acordeon vizibilitatea o dă starea secțiunii. */
.dm-order-accordion-body .dm-modal-tabpanel {
	display: block;
}

/* --------------------------- Popup-ul unui produs cu controale de comandă.

   Aceeași fereastră ca la produsele fără comandă online, dar citită ca o
   pagină de produs dintr-o aplicație: poza lipită de margini, foaia albă
   urcată peste ea și bara de acțiuni lipită de marginea de jos. Clasa se
   pune din JS, după ce se construiesc controalele. */

/* Foaia albă a produsului acoperă doar cât ține conținutul; sub ea s-ar
   vedea altfel hârtia popup-ului, cu o cusătură vizibilă la produsele
   scurte (fără opțiuni de configurat). */
.dm-modal-panel--order {
	background: var(--dm-card);
}

.dm-modal-panel--order .dm-modal-media {
	padding: 0;
}

/* Umbră doar sub butonul de „înapoi", cât să se citească peste o poză
   deschisă la culoare — nu un voal peste toată imaginea. */
.dm-modal-panel--order .dm-modal-media::after {
	content: '';
	position: absolute;
	inset: 0 0 auto;
	height: 96px;
	background: linear-gradient(to bottom, rgba(20, 16, 12, 0.3), rgba(20, 16, 12, 0));
	pointer-events: none;
}

.dm-modal-panel--order .dm-modal-media .dm-item-image,
.dm-modal-panel--order .dm-modal-media .dm-item-image--placeholder {
	max-height: none;
	aspect-ratio: 4 / 3;
	border-radius: 0;
	object-fit: cover;
}

.dm-modal-panel--order .dm-modal-media .dm-item-discount {
	top: 12px;
	right: 12px;
	left: auto;
}

.dm-modal-panel--order .dm-modal-close--back {
	left: 12px;
	right: auto;
	width: 40px;
	height: 40px;
}

.dm-modal-panel.dm-modal-panel--order .dm-modal-body {
	position: relative;
	z-index: 1;
	margin-top: -22px;
	padding: 20px 16px 0;
	border-radius: 22px 22px 0 0;
	background: var(--dm-card);
}

.dm-modal-panel--order .dm-modal-body .dm-item-name {
	font-size: 26px;
	line-height: 1.15;
}

.dm-modal-panel--order .dm-modal-body .dm-item-price {
	font-size: 22px;
	white-space: nowrap;
}

.dm-modal-panel--order .dm-modal-body .dm-item-description {
	margin-top: 6px;
	font-size: 14px;
	color: var(--dm-ink-soft);
}

.dm-modal-panel--order .dm-order-controls {
	margin-top: 18px;
	padding-top: 0;
	padding-bottom: 16px;
	border-top: 0;
	gap: 12px;
}

/* Bara rămâne la îndemână cât timp se derulează pașii — inclusiv peste
   detaliile pliate de sub ea, fiindcă stă în același container cu ele. */
.dm-modal-panel--order .dm-order-actions {
	position: sticky;
	bottom: 0;
	z-index: 3;
	margin: 4px -16px 0;
	padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
	background: var(--dm-card);
	border-top: 1px solid var(--dm-line);
}

.dm-modal-panel--order .dm-order-accordion {
	margin-top: 12px;
}

@media (min-width: 640px) {
	.dm-modal-panel.dm-modal-panel--order {
		max-width: 460px;
	}
}

/* Popup-ul de configurare rămâne o singură coloană și pe ecrane late:
   macheta pe două coloane (poză lângă text) e pentru fișa de citit, nu
   pentru un flux de alegeri. */
@media (min-width: 760px) {
	.dm-modal-panel.dm-modal-panel--order {
		max-width: 480px;
	}

	.dm-modal-panel.dm-modal-panel--order .dm-modal-main {
		display: block;
	}

	.dm-modal-panel.dm-modal-panel--order .dm-modal-media {
		padding: 0;
	}

	.dm-modal-panel.dm-modal-panel--order .dm-modal-body {
		padding: 22px 20px 0;
	}

	.dm-modal-panel.dm-modal-panel--order .dm-order-actions {
		margin-left: -20px;
		margin-right: -20px;
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* Toolbar unic, fixat jos — o coloană per capabilitate activă (comandă,
   comanda mea, chemare ospătar, rezervare — vezi initToolbar în script.js).
   body.dm-has-toolbar (mai jos) rezervă spațiul cât înălțimea lui, ca
   footer-ul paginii să nu rămână ascuns dedesubt. */
.dm-toolbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 95;
	display: flex;
	min-height: var(--dm-toolbar-height);
	background: var(--dm-paper);
	border-top: 1px solid var(--dm-line);
	box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
	padding-bottom: env(safe-area-inset-bottom);
}

.dm-toolbar-item {
	flex: 1;
	min-width: 0; /* fără asta, eticheta cu white-space:nowrap fixează un min-content care poate scoate toolbar-ul din ecran */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-height: 48px;
	padding: 8px 4px 6px;
	border: none;
	background: none;
	color: var(--dm-ink-soft);
	font: inherit;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.dm-toolbar-item:active {
	color: var(--dm-primary);
}

.dm-toolbar-item:disabled {
	opacity: 0.5;
	cursor: default;
}

.dm-toolbar-icon {
	position: relative;
	display: flex;
	width: 22px;
	height: 22px;
}

.dm-toolbar-icon svg {
	width: 100%;
	height: 100%;
}

.dm-toolbar-label {
	max-width: 100%;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dm-toolbar-badge {
	display: none;
	position: absolute;
	top: -4px;
	right: -8px;
	min-width: 15px;
	height: 15px;
	padding: 0 3px;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--dm-primary);
	color: var(--dm-on-primary);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}

.dm-toolbar-badge.is-visible {
	display: flex;
}

body.dm-has-toolbar {
	padding-bottom: calc(var(--dm-toolbar-height) + env(safe-area-inset-bottom));
}

/* Confirmare scurtă, auto-dismiss, pentru acțiuni din toolbar (azi doar
   chemarea ospătarului — eticheta coloanei nu mai poate schimba text ca la
   butonul flotant vechi) — deasupra barei, ca să nu fie acoperită de ea. */
.dm-toast {
	position: fixed;
	left: 50%;
	bottom: calc(var(--dm-toolbar-height) + 14px);
	z-index: 96;
	transform: translate(-50%, 8px);
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--dm-primary);
	color: var(--dm-on-primary);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.dm-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* Provocarea Turnstile — normal invizibilă (widget randat cu
   appearance:'interaction-only'). Overlay-ul devine vizibil doar când
   Cloudflare chiar cere o interacțiune, peste orice panou deschis (coș,
   rezervare), de unde z-index-ul mai mare decât al acestora.

   Ascunderea se face prin visibility/opacity, nu prin display:none:
   iframe-ul Turnstile trebuie să rămână în layout ca să-și poată face
   treaba în fundal, invizibil, când nu e nevoie de interacțiune. */
.dm-turnstile {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 20px;
	background: rgba(0, 0, 0, 0.45);
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.dm-turnstile.is-visible {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

.dm-turnstile-text {
	margin: 0;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.dm-turnstile-box {
	min-height: 65px;
}

/* Panoul de coș / checkout — aceeași machetă de bottom sheet ca la .dm-modal. */
.dm-cart-overlay,
.dm-order-status-overlay,
.dm-upsell-overlay {
	position: fixed;
	inset: 0;
	z-index: 110;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background: rgba(20, 16, 12, 0.55);
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

.dm-cart-overlay.is-open,
.dm-order-status-overlay.is-open,
.dm-upsell-overlay.is-open {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

.dm-cart-panel,
.dm-order-status-panel,
.dm-upsell-panel {
	width: 100%;
	max-width: 480px;
	max-height: 88vh;
	overflow-y: auto;
	background: var(--dm-paper);
	border-radius: 20px 20px 0 0;
	box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25);
	padding: 24px;
}

/* Ecranul de recomandări apare peste coșul deja deschis — z-index mai mare,
   nu unul separat de stivă (dm-cart-overlay rămâne „open” dedesubt). */
.dm-upsell-overlay {
	z-index: 120;
}

/* Panoul are footerul lipit jos (butonul de trimitere e mereu la vedere), deci
   scrollează lista, nu tot panoul. */
.dm-upsell-panel {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-height: 86vh;
	max-height: 86dvh;
	overflow: hidden;
	padding: 22px 20px calc(18px + env(safe-area-inset-bottom));
}

.dm-upsell-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.dm-upsell-panel h3 {
	margin: 0;
	font-size: 23px;
	line-height: 1.2;
}

.dm-upsell-subtitle {
	margin: 4px 0 0;
	color: var(--dm-ink-soft);
	font-size: 14px;
}

.dm-upsell-close {
	flex: none;
	width: 34px;
	height: 34px;
	border: none;
	border-radius: 50%;
	background: color-mix(in srgb, var(--dm-ink) 7%, transparent);
	color: var(--dm-ink);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.dm-upsell-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	overflow-y: auto;
	/* Umbra cardurilor nu trebuie tăiată de marginea zonei scrollabile. */
	margin: 0 -4px;
	padding: 2px 4px;
}

/* Rând orizontal, nu card de catalog: imagine mică, textul la mijloc, acțiunea
   la dreapta — fereastra rămâne un pas de confirmare, nu un al doilea meniu. */
.dm-upsell-card {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	border: 1px solid var(--dm-line);
	border-radius: 16px;
	padding: 10px 12px;
	background: var(--dm-card);
}

.dm-upsell-card.is-featured {
	border-color: color-mix(in srgb, var(--dm-primary) 35%, var(--dm-line));
	background: color-mix(in srgb, var(--dm-primary) 6%, var(--dm-card));
}

/* Insigna ia un rând propriu, deasupra produsului: în coloana îngustă de text
   ar rupe numele în trei. */
.dm-upsell-badge-row {
	flex: 0 0 100%;
	margin-bottom: -4px;
}

.dm-upsell-card-image {
	flex: none;
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: 12px;
}

.dm-upsell-card-info {
	flex: 1;
	min-width: 0;
}

.dm-upsell-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	border-radius: 999px;
	padding: 3px 9px 3px 7px;
	background: color-mix(in srgb, var(--dm-primary) 12%, var(--dm-card));
	color: color-mix(in srgb, var(--dm-primary) 55%, var(--dm-ink));
	font-size: 11.5px;
	font-weight: 700;
}

.dm-upsell-badge-icon {
	display: inline-flex;
	width: 12px;
	height: 12px;
	color: var(--dm-primary);
}

.dm-upsell-badge-icon svg,
.dm-upsell-hint-icon svg,
.dm-upsell-add-icon svg,
.dm-upsell-submit-icon svg {
	width: 100%;
	height: 100%;
}

.dm-upsell-card-name {
	font-weight: 700;
	font-size: 15.5px;
}

.dm-upsell-card-meta {
	color: var(--dm-ink-soft);
	font-size: 13px;
}

.dm-upsell-card-price {
	margin-top: 2px;
	font-size: 14.5px;
	font-weight: 600;
}

.dm-upsell-add {
	flex: none;
	border: 1px solid color-mix(in srgb, var(--dm-primary) 45%, transparent);
	border-radius: 999px;
	padding: 10px 16px;
	background: var(--dm-card);
	color: color-mix(in srgb, var(--dm-primary) 70%, var(--dm-ink));
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

/* Starea „adăugat” rămâne în aceeași familie vizuală: butonul se umple cu
   culoarea localului, fără să sară în alt sistem de culori. */
.dm-upsell-add.is-added {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-color: var(--dm-primary);
	background: var(--dm-primary);
	color: var(--dm-on-primary);
	cursor: default;
}

.dm-upsell-add-icon {
	display: inline-flex;
	width: 13px;
	height: 13px;
}

.dm-upsell-hint {
	display: flex;
	align-items: center;
	gap: 10px;
	border-radius: 14px;
	padding: 10px 12px;
	background: color-mix(in srgb, var(--dm-ink) 4%, var(--dm-card));
	color: var(--dm-ink-soft);
	font-size: 13px;
}

.dm-upsell-hint-icon {
	flex: none;
	display: inline-flex;
	width: 20px;
	height: 20px;
	color: var(--dm-primary);
}

.dm-upsell-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.dm-upsell-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	border: none;
	border-radius: 999px;
	padding: 15px 20px;
	background: var(--dm-primary);
	color: var(--dm-on-primary);
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}

.dm-upsell-submit-icon {
	display: inline-flex;
	width: 17px;
	height: 17px;
}

.dm-upsell-skip {
	border: none;
	background: none;
	padding: 2px 6px;
	color: var(--dm-ink-soft);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.dm-upsell-skip[hidden] {
	display: none;
}

.dm-cart-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

/* Pe ecrane mari, coșul se lățește și trece pe 2 coloane (rezumatul comenzii +
   detaliile de livrare/contact/plată), la fel ca popup-ul de produs — reduce
   scroll-ul fără să schimbe ordinea conținutului pe mobil (coloanele rămân
   simple secțiuni stivuite sub 760px, în aceeași ordine din DOM). Scop doar pe
   .dm-cart-panel — popup-ul de status comandă (.dm-order-status-panel) nu are
   .dm-cart-grid și rămâne neschimbat, la lățimea lui actuală. */
@media (min-width: 760px) {
	.dm-cart-panel {
		max-width: clamp(560px, 74vw, 900px);
		/* .dm-cart-panel nu mai scrollează el însuși (vezi overflow:hidden mai
		   jos) — header-ul rămâne fix, iar .dm-cart-grid ia tot spațiul rămas
		   sub el (flex:1), ca fiecare coloană să-și primească propria
		   înălțime disponibilă și să scrolleze independent. */
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.dm-cart-header {
		flex: none;
	}

	.dm-cart-grid {
		display: grid;
		/* Prima coloană (detaliile — formular + hartă) e cea mai lată; a doua
		   (rezumatul) rămâne compactă — vezi ordinea din DOM la
		   renderCartPanel() din script-template.js. flex:1 + min-height:0 —
		   trucul standard ca un copil flex să se poată micșora sub înălțimea
		   conținutului lui (altfel un flex item nu se micșorează niciodată
		   sub content, indiferent de overflow declarat pe el). */
		grid-template-columns: 1fr minmax(260px, 40%);
		gap: 0 28px;
		flex: 1;
		min-height: 0;
	}

	/* Fiecare coloană scrollează separat, doar dacă depășește înălțimea
	   disponibilă a grilei (ea însăși limitată de max-height: 88vh de pe
	   .dm-cart-panel) — nu mai există un scroll unic comun pentru tot
	   panoul, ca înainte. */
	.dm-cart-col {
		max-height: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		scrollbar-gutter: stable;
	}
}

.dm-cart-header h3 {
	margin: 0;
	font-size: 17px;
}

.dm-cart-close {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: none;
	background: var(--dm-card);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.dm-cart-empty {
	color: var(--dm-ink-soft);
	font-size: 14px;
}

/* Popup „Locație pe hartă" — aceeași machetă de bottom sheet ca .dm-cart-overlay. */
.dm-map-overlay {
	position: fixed;
	inset: 0;
	z-index: 110;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background: rgba(20, 16, 12, 0.55);
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

.dm-map-overlay.is-open {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

.dm-map-panel {
	position: relative;
	width: 100%;
	max-width: 480px;
	background: var(--dm-paper);
	border-radius: 20px 20px 0 0;
	box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25);
	padding: 56px 24px 24px 24px;
}

.dm-map-close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 1;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: none;
	background: var(--dm-card);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.dm-map-canvas {
	width: 100%;
	height: 280px;
	border-radius: 14px;
	overflow: hidden;
	background: var(--dm-card);
	display: flex;
	align-items: center;
	justify-content: center;
}

.dm-map-loading {
	margin: 0;
	font-size: 13px;
	color: var(--dm-ink-soft);
}

.dm-map-directions {
	display: flex;
	gap: 10px;
	margin-top: 16px;
}

.dm-map-directions-btn {
	flex: 1;
	text-align: center;
	padding: 12px 14px;
	border-radius: 999px;
	border: 1px solid var(--dm-line);
	background: var(--dm-card);
	color: var(--dm-ink);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.dm-cart-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 16px;
}

.dm-cart-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--dm-line);
}

.dm-cart-row-image {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	object-fit: cover;
	flex-shrink: 0;
}

.dm-cart-row-info {
	flex: 1;
	font-size: 14px;
}

.dm-cart-row-price {
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}

.dm-cart-remove {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: none;
	background: var(--dm-card);
	color: var(--dm-ink-soft);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	flex: none;
}

.dm-cart-total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 16px;
	margin-bottom: 14px;
}

.dm-cart-email,
.dm-cart-name,
.dm-cart-phone,
.dm-cart-street,
.dm-cart-street-number,
.dm-cart-city,
.dm-cart-note,
.dm-field {
	width: 100%;
	border: 1px solid var(--dm-line);
	border-radius: var(--dm-radius);
	padding: 10px 12px;
	font: inherit;
	margin-bottom: 12px;
	background: var(--dm-card);
	color: var(--dm-ink);
}

.dm-cart-note {
	resize: vertical;
}

/* Strada + numărul, pe același rând — strada ia spațiul rămas, numărul
   rămâne îngust. Validate/geocodate împreună, vezi geocodeStreet() din
   script-template.js. */
.dm-address-row {
	display: flex;
	gap: 8px;
}

.dm-street-wrap {
	position: relative;
	flex: 3;
	margin-bottom: 12px;
}

.dm-street-wrap .dm-cart-street {
	margin-bottom: 0;
}

.dm-address-row .dm-cart-street-number {
	flex: 1;
	min-width: 0;
}

/* Dropdown de sugestii de stradă (autocomplete Mapbox) — vezi
   scheduleStreetSuggestions() din script-template.js. */
.dm-street-suggestions {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 20;
	margin: 0;
	padding: 4px;
	list-style: none;
	background: var(--dm-card);
	border-radius: var(--dm-radius);
	box-shadow: var(--dm-shadow);
	max-height: 240px;
	overflow-y: auto;
}

.dm-street-suggestions[hidden] {
	display: none;
}

.dm-street-suggestion {
	padding: 9px 10px;
	border-radius: 10px;
	cursor: pointer;
	font-size: 13.5px;
	line-height: 1.3;
	color: var(--dm-ink);
}

.dm-street-suggestion .dm-street-suggestion-locality {
	display: block;
	font-size: 12px;
	color: var(--dm-ink-soft);
}

.dm-street-suggestion:hover,
.dm-street-suggestion.is-active {
	background: var(--dm-paper);
}

/* Dropdown propriu pentru Localitate (nu <select> nativ) — vezi construcția
   din script-template.js, secțiunea „Localitate”. Aceeași cutie (bordură,
   radius, fundal, margine) ca restul câmpurilor de formular, dar randată de
   site, nu de browser. */
.dm-cart-city-select {
	position: relative;
	border: 1px solid var(--dm-line);
	border-radius: var(--dm-radius);
	background: var(--dm-card);
	margin-bottom: 12px;
}

.dm-cart-city-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	border: none;
	background: none;
	padding: 10px 12px;
	font: inherit;
	color: var(--dm-ink);
	cursor: pointer;
	text-align: left;
}

.dm-cart-city-trigger.is-placeholder {
	color: var(--dm-ink-soft);
}

.dm-cart-city-trigger::after {
	content: '';
	flex: none;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid var(--dm-ink-soft);
	transition: transform 0.15s ease;
}

.dm-cart-city-trigger[aria-expanded="true"]::after {
	transform: rotate(180deg);
}

.dm-cart-city-options {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 20;
	margin: 0;
	padding: 4px;
	list-style: none;
	background: var(--dm-card);
	border-radius: var(--dm-radius);
	box-shadow: var(--dm-shadow);
	max-height: 240px;
	overflow-y: auto;
}

.dm-cart-city-options[hidden] {
	display: none;
}

.dm-cart-city-option {
	padding: 9px 10px;
	border-radius: 10px;
	cursor: pointer;
	font-size: 13.5px;
	line-height: 1.3;
	color: var(--dm-ink);
}

.dm-cart-city-option:hover,
.dm-cart-city-option.is-active {
	background: var(--dm-paper);
}

/* Eroare sub strada+numărul, distinctă de eroarea generală de trimitere
   (.dm-cart-error) — apare/dispare live, la fiecare interogare de geocodare. */
.dm-street-error {
	color: #b3261e;
	font-size: 13px;
	margin: 0 0 12px;
	min-height: 16px;
}

/* Comandă online (livrare/ridicare, fără masă) — pilule de tip comandă,
   deasupra formularului de contact. Vizibile doar când restaurantul oferă
   ambele tipuri (un singur tip activ sare direct la formular). */
.dm-fulfillment-toggle {
	display: flex;
	gap: 8px;
	margin-bottom: 14px;
}

.dm-fulfillment-option {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex: 1;
	border: 1px solid var(--dm-line);
	border-radius: 999px;
	padding: 10px 14px;
	font-size: 14px;
	font-weight: 600;
	background: var(--dm-card);
	color: var(--dm-ink);
	cursor: pointer;
}

.dm-fulfillment-option.is-active {
	background: var(--dm-primary);
	color: var(--dm-on-primary);
	border-color: var(--dm-primary);
}

.dm-fulfillment-option-icon {
	display: flex;
	flex: none;
	width: 16px;
	height: 16px;
}

.dm-fulfillment-option-icon svg {
	width: 100%;
	height: 100%;
}

/* Harta interactivă din pasul de adresă — clientul poate ajusta pinul
   pentru precizie, în plus față de adresa scrisă (rămasă mereu obligatorie).
   Randată doar dacă platforma are Mapbox configurat, vezi script-template.js. */
.dm-delivery-map {
	width: 100%;
	height: 220px;
	border-radius: var(--dm-radius);
	overflow: hidden;
	background: var(--dm-card);
	margin-bottom: 10px;
}

/* „Comanda mea” ca bottom sheet de aplicație: mâner sus, colțuri mari,
   header lipit sus cât conținutul derulează dedesubt. Paddingul de sus
   e mutat în header, ca acesta să poată sta lipit de marginea panoului. */
.dm-order-status-panel {
	--dm-tint: #f8eee9;
	--dm-tint: color-mix(in srgb, var(--dm-primary) 9%, var(--dm-card));
	/* Textul accentuat (pastila, pasul curent) nu poate folosi direct
	   culoarea localului: un primary deschis (ex. galben) dispare pe fundalul
	   nuanțat. Amestecat cu cerneala, rămâne în familia brandului, dar
	   lizibil pe orice paletă. */
	--dm-accent-ink: var(--dm-ink);
	--dm-accent-ink: color-mix(in srgb, var(--dm-primary) 45%, var(--dm-ink));
	max-height: 90vh;
	max-height: 90dvh;
	border-radius: 26px 26px 0 0;
	padding: 0 20px 24px;
	overscroll-behavior: contain;
}

.dm-order-status-panel > .dm-cart-header {
	position: sticky;
	top: 0;
	z-index: 3;
	margin: 0 -20px 4px;
	padding: 22px 20px 10px;
	background: var(--dm-paper);
	/* Tragerea în jos închide panoul (vezi script-template.js), deci gestul
	   pornit din antet îi aparține — altfel browserul l-ar lua drept scroll și
	   panoul ar rămâne pe loc. Conținutul de dedesubt scrollează normal. */
	touch-action: none;
}

/* Bara de sus: buton adevărat, ca să poată fi apăsată și trasă. Arată exact
   ca vechiul `::before` decorativ — bara de 40×4 e desenată acum de
   pseudo-elementul butonului, iar butonul în sine e o țintă mai mare decât ea,
   cât să fie nimerită cu degetul. */
.dm-order-status-panel > .dm-cart-header .dm-sheet-grip {
	position: absolute;
	top: 2px;
	left: 50%;
	width: 64px;
	height: 18px;
	margin-left: -32px;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.dm-order-status-panel > .dm-cart-header .dm-sheet-grip::before {
	content: '';
	position: absolute;
	top: 6px;
	left: 50%;
	width: 40px;
	height: 4px;
	margin-left: -20px;
	border-radius: 999px;
	background: rgba(36, 31, 26, 0.16);
}

.dm-order-status-panel > .dm-cart-header h3 {
	font-size: 20px;
	font-weight: 700;
}

.dm-order-status-panel .dm-cart-close {
	width: 30px;
	height: 30px;
	font-size: 17px;
}

@media (min-width: 520px) {
	.dm-order-status-panel {
		padding: 0 24px 24px;
	}

	.dm-order-status-panel > .dm-cart-header {
		margin: 0 -24px 4px;
		padding-left: 24px;
		padding-right: 24px;
	}
}

/* Codul + ora comenzii — un rând discret; codul se copiază dintr-o atingere. */
.dm-order-meta {
	display: flex;
	flex-direction: column;
	gap: 1px;
	margin-bottom: 14px;
}

.dm-order-meta-code {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.dm-order-copy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: none;
	border-radius: 8px;
	background: none;
	color: var(--dm-ink-soft);
	cursor: pointer;
}

.dm-order-copy svg {
	width: 15px;
	height: 15px;
}

.dm-order-copy.is-copied {
	color: #2e7d43;
}

.dm-order-meta-time {
	font-size: 13px;
	color: var(--dm-ink-soft);
}

/* Cardul-erou: ce se întâmplă acum. La livrare în curs titlul e ETA-ul,
   cel mai mare text din panou — după ce comanda pleacă din local, „când
   ajunge” e singura întrebare a clientului. Tonul (succes/anulat)
   schimbă doar accentul, nu machetă. */
.dm-order-hero {
	--dm-hero-accent: var(--dm-primary);
	--dm-hero-ink: var(--dm-accent-ink);
	--dm-hero-tint: var(--dm-tint);
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px;
	margin-bottom: 12px;
	border-radius: 20px;
	background: var(--dm-hero-tint);
}

.dm-order-hero--success {
	--dm-hero-accent: #2e7d43;
	--dm-hero-ink: #256b38;
	--dm-hero-tint: #edf6ef;
}

.dm-order-hero--danger {
	--dm-hero-accent: #b3261e;
	--dm-hero-ink: #9c211a;
	--dm-hero-tint: #fbeeed;
}

.dm-order-hero-icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--dm-card);
	color: var(--dm-hero-accent);
	box-shadow: 0 1px 3px rgba(36, 31, 26, 0.08);
}

.dm-order-hero-icon svg {
	width: 28px;
	height: 28px;
}

.dm-order-hero-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	min-width: 0;
}

.dm-order-hero-badge {
	padding: 2px 9px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--dm-hero-accent) 14%, transparent);
	color: var(--dm-hero-ink);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.dm-order-hero-title {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--dm-ink);
	font-variant-numeric: tabular-nums;
}

.dm-order-hero-text {
	font-size: 14px;
	color: var(--dm-ink-soft);
}

@media (max-width: 360px) {
	.dm-order-hero-title {
		font-size: 22px;
	}

	.dm-order-hero-icon {
		width: 46px;
		height: 46px;
	}
}

/* Harta live — traseul în culoarea localului ghidează privirea, harta
   de dedesubt rămâne deschisă și fără etichete concurente (vezi
   quietMapLabels() din script-template.js). */
.dm-track-map {
	position: relative;
	height: 280px;
	margin-bottom: 4px;
	border-radius: 20px;
	overflow: hidden;
	background: #eeebe6;
}

/* Specificitate dublă: .mapboxgl-map (CSS-ul Mapbox, încărcat după) pune
   position: relative, care ar anula inset-ul și ar lăsa harta cu înălțime 0. */
.dm-track-map .dm-track-map-canvas {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	color: var(--dm-ink-soft);
}

@media (max-width: 380px) {
	.dm-track-map {
		height: 250px;
	}
}

.dm-track-live {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--dm-card);
	box-shadow: 0 1px 6px rgba(36, 31, 26, 0.14);
	font-size: 13px;
	font-weight: 700;
	color: var(--dm-ink);
}

.dm-track-live-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #2e9d52;
	box-shadow: 0 0 0 0 rgba(46, 157, 82, 0.5);
	animation: dm-live-pulse 1.8s ease-out infinite;
}

.dm-track-live.is-stale .dm-track-live-dot {
	background: #b0a79d;
	animation: none;
}

@keyframes dm-live-pulse {
	0% { box-shadow: 0 0 0 0 rgba(46, 157, 82, 0.5); }
	70% { box-shadow: 0 0 0 7px rgba(46, 157, 82, 0); }
	100% { box-shadow: 0 0 0 0 rgba(46, 157, 82, 0); }
}

.dm-track-recenter {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--dm-card);
	box-shadow: 0 2px 8px rgba(36, 31, 26, 0.18);
	color: var(--dm-ink);
	cursor: pointer;
}

.dm-track-recenter svg {
	width: 18px;
	height: 18px;
}

/* Insigna curierului — singurul lucru care se mișcă pe hartă: cerc plin
   în culoarea localului, scuter alb, halou care pulsează. */
.dm-courier-marker {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--dm-primary);
	color: var(--dm-on-primary);
	border: 3px solid #fff;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
	animation: dm-courier-halo 2s ease-out infinite;
}

.dm-courier-marker svg {
	width: 20px;
	height: 20px;
}

@keyframes dm-courier-halo {
	0% { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3), 0 0 0 0 color-mix(in srgb, var(--dm-primary) 45%, transparent); }
	70% { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3), 0 0 0 14px color-mix(in srgb, var(--dm-primary) 0%, transparent); }
	100% { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3), 0 0 0 0 transparent; }
}

@media (prefers-reduced-motion: reduce) {
	.dm-courier-marker,
	.dm-track-live-dot {
		animation: none;
	}
}

/* Pinii ficși: restaurantul în culoarea localului, destinația închisă la
   culoare — cele trei puncte se deosebesc după formă și culoare, nu după
   etichete. Eticheta stă absolut sub vârf, ca ancora să rămână vârful. */
.dm-track-pin {
	position: relative;
	width: 34px;
	height: 42px;
}

.dm-track-pin-head {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50% 50% 50% 0;
	transform: translateY(0) rotate(-45deg);
	transform-origin: center;
	background: var(--dm-primary);
	border: 2px solid #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}

.dm-track-pin--home .dm-track-pin-head {
	background: #241f1a;
}

.dm-track-pin--home .dm-track-pin-head svg {
	color: #fff;
}

.dm-track-pin-head svg {
	width: 16px;
	height: 16px;
	color: var(--dm-on-primary);
	transform: rotate(45deg);
}

.dm-track-pin-label {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 2px;
	padding: 1px 6px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.9);
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
	color: #241f1a;
}

/* Rândul curierului, sub hartă. */
.dm-courier-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 4px;
}

.dm-courier-row-avatar {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--dm-tint);
	color: var(--dm-accent-ink);
}

.dm-courier-row-avatar svg {
	width: 22px;
	height: 22px;
}

.dm-courier-row-body {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
	font-size: 15px;
}

.dm-courier-row-seen {
	font-size: 12.5px;
	color: var(--dm-ink-soft);
}

/* Adresa de livrare (sau ridicarea) — context imediat sub hartă. */
.dm-order-address {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 10px 4px 16px;
}

.dm-order-address-icon {
	flex: none;
	display: flex;
	justify-content: center;
	width: 44px;
	color: var(--dm-ink-soft);
}

.dm-order-address-icon svg {
	width: 20px;
	height: 20px;
}

.dm-order-address > div {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.dm-order-address-label {
	font-size: 12.5px;
	color: var(--dm-ink-soft);
}

.dm-order-address-value {
	font-size: 15px;
	overflow-wrap: anywhere;
}

/* Secțiunile de sub erou („Status comandă”, „Comanda ta”) — separate prin
   linii fine, cu titlul și acțiunea lor pe același rând. */
.dm-order-section {
	padding: 16px 0;
	border-top: 1px solid var(--dm-line);
}

.dm-order-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.dm-order-section-title {
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 700;
}

.dm-order-section-head .dm-order-section-title {
	margin: 0;
}

.dm-order-history-toggle {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 0;
	border: none;
	background: none;
	font: inherit;
	font-size: 13px;
	color: var(--dm-ink-soft);
	cursor: pointer;
}

.dm-order-history-toggle svg {
	width: 16px;
	height: 16px;
	transition: transform 0.2s ease;
}

.dm-order-history-toggle.is-expanded svg {
	transform: rotate(180deg);
}

/* Stepper compact: patru pași pe orizontală, legați printr-o linie care
   se colorează pe măsură ce comanda avansează. */
.dm-order-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}

.dm-order-step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	text-align: center;
	font-size: 12.5px;
	color: var(--dm-ink-soft);
}

/* Segmentul dintre bulina anterioară și cea curentă. */
.dm-order-step + .dm-order-step::before {
	content: '';
	position: absolute;
	top: 12px;
	right: calc(50% + 15px);
	left: calc(-50% + 15px);
	height: 2px;
	border-radius: 2px;
	background: var(--dm-line);
}

.dm-order-step.is-done + .dm-order-step.is-done::before {
	background: color-mix(in srgb, var(--dm-primary) 45%, transparent);
}

.dm-order-step-dot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	margin-bottom: 4px;
	border-radius: 50%;
	border: 2px solid var(--dm-line);
	background: var(--dm-card);
	color: var(--dm-accent-ink);
}

.dm-order-step-dot svg {
	width: 13px;
	height: 13px;
}

.dm-order-step.is-done .dm-order-step-dot {
	border-color: transparent;
	background: var(--dm-tint);
}

.dm-order-step.is-current .dm-order-step-dot {
	background: var(--dm-primary);
	color: var(--dm-on-primary);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--dm-primary) 16%, transparent);
}

.dm-order-step-label {
	line-height: 1.2;
	color: var(--dm-ink);
}

.dm-order-step:not(.is-done) .dm-order-step-label {
	color: var(--dm-ink-soft);
}

.dm-order-step.is-current .dm-order-step-label {
	font-weight: 700;
	color: var(--dm-accent-ink);
}

.dm-order-step-time {
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.dm-order-step-time:empty {
	display: none;
}

.dm-order-section .dm-order-status {
	margin: 0;
}

.dm-order-section .dm-cart-list {
	margin-bottom: 4px;
}

/* Buton „Folosește locația mea" (geolocalizare browser) — sub adresa
   scrisă, ca pas opțional care doar îmbunătățește precizia calculului de
   taxă/rază; adresa scrisă rămâne mereu obligatorie. Bordură plină (nu
   punctată, care citește ca „dezactivat") + culoarea primary, ca butonul
   să se recunoască drept apăsabil, nu ca un placeholder informativ. */
.dm-delivery-locate {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	border: 1px solid var(--dm-primary);
	border-radius: var(--dm-radius);
	padding: 9px 12px;
	margin-bottom: 4px;
	background: transparent;
	color: var(--dm-primary);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.dm-delivery-locate:hover {
	background: var(--dm-primary);
	color: var(--dm-on-primary);
}

.dm-delivery-locate:disabled {
	opacity: 0.6;
	cursor: default;
	background: transparent;
	color: var(--dm-primary);
}

.dm-delivery-locate-icon {
	display: flex;
	flex: none;
	width: 16px;
	height: 16px;
}

.dm-delivery-locate-icon svg {
	width: 100%;
	height: 100%;
}

/* Explică înainte de click ce face butonul de mai sus (autocompletarea
   adresei), ca să nu rămână un buton ambiguu lângă câmpurile scrise de mână. */
.dm-delivery-locate-hint {
	font-size: 12px;
	color: var(--dm-ink-soft);
	margin: 0 0 10px;
}

/* Previzualizare taxă/ETA de livrare, sub butonul de locație — actualizată
   live după adresă/locație; sursa de adevăr rămâne server-side la trimitere. */
.dm-delivery-quote {
	font-size: 13px;
	color: var(--dm-ink-soft);
	margin: 0 0 14px;
}

.dm-delivery-quote.is-error {
	color: #b3261e;
}

/* Selector metodă de plată (cash/card), sub numele opțional — vizibil doar
   când restaurantul are capabilitatea 'table_sessions'. */
.dm-cart-payment {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 14px;
}

.dm-cart-payment-label {
	font-size: 13px;
	color: var(--dm-ink-soft);
}

.dm-cart-payment .dm-order-option-icon {
	display: flex;
	flex: none;
	width: 16px;
	height: 16px;
	color: var(--dm-ink-soft);
}

.dm-cart-payment .dm-order-option-icon svg {
	width: 100%;
	height: 100%;
}

/* Comutator „Cum achitați?" (split/single), în vederea comună a mesei. */
.dm-session-billing {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
	flex-wrap: wrap;
}

.dm-session-billing-label {
	font-size: 13px;
	color: var(--dm-ink-soft);
}

.dm-session-billing-options {
	display: flex;
	gap: 8px;
}

.dm-session-billing-option {
	border: 1px solid var(--dm-line);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 13px;
	background: var(--dm-card);
	color: var(--dm-ink);
	cursor: pointer;
}

.dm-session-billing-option.is-active {
	background: var(--dm-primary);
	color: var(--dm-on-primary);
	border-color: var(--dm-primary);
}

/* Grupare pe persoană/dispozitiv în „Comenzile mesei" — fiecare grup e
   comenzile plasate de un singur telefon. */
.dm-session-group {
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--dm-line);
}

.dm-session-group:last-of-type {
	border-bottom: none;
}

.dm-session-group-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
	font-size: 14px;
}

.dm-session-group.is-mine .dm-session-group-header strong {
	color: var(--dm-primary);
}

.dm-cart-error {
	color: #b3261e;
	font-size: 13px;
	margin: 0 0 10px;
}

.dm-cart-submit,
.dm-order-status-close {
	width: 100%;
	border: none;
	border-radius: 999px;
	padding: 14px 20px;
	background: var(--dm-primary);
	color: var(--dm-on-primary);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

/* Descărcarea bonului stă deasupra butonului „Închide”, dar contur, nu plin:
   acțiunea care încheie cardul rămâne cea accentuată. */
/* Conturul poartă culoarea de brand, textul nu: un local cu galben sau cu
   verde deschis ar scrie linkul într-o culoare pe care n-o citește nimeni pe
   fundal alb. Aceeași grijă ca la totalul din bonul PDF (vezi
   DMS_Receipt_PDF::readable()). */
.dm-order-receipt-link {
	display: block;
	margin: 0 0 10px;
	padding: 12px 20px;
	border: 1px solid var(--dm-primary);
	border-radius: 999px;
	color: var(--dm-ink);
	font-size: 14.5px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

.dm-cart-submit:disabled {
	opacity: 0.6;
	cursor: default;
}

.dm-order-status-panel h3 {
	margin: 0 0 8px;
	font-size: 17px;
}

/* Text secundar din panou: stările goale („nu ai nicio comandă”) și mesajele
   de confirmare. Statusul propriu-zis al unei comenzi are stilul lui, mai jos. */
.dm-order-status-text {
	margin: 0 0 20px;
	font-size: 15px;
	color: var(--dm-ink-soft);
}

/* Statusul curent al comenzii — motivul pentru care clientul deschide panoul,
   deci scos din corpul de text: îngroșat, cu o bulină care ia culoarea stării. */
.dm-order-status {
	--dm-status: var(--dm-primary);
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 14px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--dm-ink);
}

.dm-order-status--ready,
.dm-order-status--served {
	--dm-status: #2e7d43;
}

.dm-order-status--cancelled {
	--dm-status: #b3261e;
}

.dm-order-status-dot {
	flex: none;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--dm-status);
	/* Aliniat optic cu prima linie de text, nu cu linia de bază a ei. */
	transform: translateY(-1px);
}

/* O comandă din lista „Comenzile mele" — separator între comenzi succesive. */
.dm-order-card {
	padding-bottom: 18px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--dm-line);
}

.dm-order-card:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: none;
}

/* Codul comenzii, în capul cardului — mare și distanțat, fiindcă e dictat cu
   voce tare ospătarului când clientul are ceva de reclamat. */
.dm-order-code {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-bottom: 12px;
}

.dm-order-code-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--dm-ink-soft);
}

.dm-order-code-value {
	font-size: 24px;
	letter-spacing: 0.12em;
	line-height: 1.1;
}

/* Formular de recenzie a deservirii, randat sub o comandă servită. */
/* Cardul de feedback e singurul lucru de pe ecran pe care clientul îl face
   pentru restaurant, nu pentru el — de aceea are fundal propriu, ușor colorat
   în culoarea localului, ca să nu se piardă între blocurile albe de deasupra. */
.dm-review-form {
	margin: 14px 0;
	padding: 14px;
	border: 1px solid color-mix(in srgb, var(--dm-primary) 30%, transparent);
	border-radius: var(--dm-radius);
	background: color-mix(in srgb, var(--dm-primary) 6%, var(--dm-card));
}

.dm-review-head {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 12px;
}

.dm-review-badge {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	border-radius: 50%;
	background: color-mix(in srgb, var(--dm-primary) 22%, var(--dm-card));
	color: var(--dm-primary);
}

.dm-review-badge svg { width: 18px; height: 18px; }

.dm-review-prompt {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
}

.dm-review-sub {
	margin: 2px 0 0;
	font-size: 13px;
	color: var(--dm-ink-soft);
}

.dm-review-stars-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.dm-review-stars {
	display: flex;
	gap: 4px;
}

/* Ținte mari: se apasă cu degetul mare, adesea din mers. */
.dm-review-star {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: none;
	background: none;
	padding: 0;
	color: color-mix(in srgb, var(--dm-ink) 25%, transparent);
	cursor: pointer;
}

.dm-review-star svg { width: 30px; height: 30px; }

.dm-review-star.is-filled { color: var(--dm-primary); }

.dm-review-rating-label {
	padding: 5px 12px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--dm-primary) 22%, var(--dm-card));
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	opacity: 0;
}

.dm-review-rating-label.is-visible { opacity: 1; }

/* Ascunse până la prima notă — vezi renderTags() în script-template.js. */
.dm-review-tags-section { display: none; }
.dm-review-tags-section.is-visible { display: block; }

.dm-review-tags-question {
	margin: 0 0 8px;
	font-size: 13.5px;
	font-weight: 600;
}

.dm-review-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-bottom: 12px;
}

.dm-review-tag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 8px 13px;
	border: 1px solid var(--dm-line);
	border-radius: 999px;
	background: var(--dm-card);
	color: var(--dm-ink);
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
}

.dm-review-tag.is-on {
	border-color: var(--dm-primary);
	background: color-mix(in srgb, var(--dm-primary) 14%, var(--dm-card));
	font-weight: 600;
}

/* Bifa ocupă loc de la început: altfel chip-ul ar sări în lățime la fiecare
   apăsare și rândul s-ar rearanja sub deget. */
.dm-review-tag-check {
	display: grid;
	place-items: center;
	width: 15px;
	color: var(--dm-primary);
	opacity: 0;
}

.dm-review-tag-check svg { width: 15px; height: 15px; }

.dm-review-tag.is-on .dm-review-tag-check { opacity: 1; }

.dm-review-tag-icon {
	display: grid;
	place-items: center;
	width: 15px;
	color: var(--dm-ink-soft);
}

.dm-review-tag-icon svg { width: 15px; height: 15px; }

.dm-review-tag.is-on .dm-review-tag-icon { color: var(--dm-primary); }

.dm-review-comment-box { position: relative; margin-bottom: 10px; }

.dm-review-comment {
	width: 100%;
	border: 1px solid var(--dm-line);
	border-radius: var(--dm-radius);
	padding: 10px 12px 24px;
	font: inherit;
	font-size: 13.5px;
	background: var(--dm-card);
	color: var(--dm-ink);
	resize: vertical;
}

.dm-review-counter {
	position: absolute;
	right: 10px;
	bottom: 10px;
	font-size: 11.5px;
	color: var(--dm-ink-soft);
	pointer-events: none;
}

.dm-review-error {
	color: #b3261e;
	font-size: 13px;
	margin: 0 0 10px;
}

.dm-review-submit {
	width: 100%;
	border: none;
	border-radius: 999px;
	padding: 13px 20px;
	background: var(--dm-primary);
	color: var(--dm-on-primary);
	font-size: 14.5px;
	font-weight: 700;
	cursor: pointer;
}

.dm-review-submit:disabled {
	opacity: 0.6;
	cursor: default;
}

.dm-review-form.is-done { text-align: center; }

.dm-review-thanks-mark {
	display: inline-grid;
	place-items: center;
	width: 38px;
	height: 38px;
	margin-bottom: 8px;
	border-radius: 50%;
	background: #e6f4ea;
	color: #1e7e40;
}

.dm-review-thanks-mark svg { width: 20px; height: 20px; }

.dm-review-thanks {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
}

.dm-review-thanks-sub {
	margin: 3px 0 0;
	font-size: 13px;
	color: var(--dm-ink-soft);
}

.dm-review-public {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--dm-line);
}

.dm-review-public-text {
	margin: 0 0 10px;
	font-size: 13.5px;
}

.dm-review-public-link {
	display: block;
	padding: 11px 18px;
	border-radius: 999px;
	background: var(--dm-primary);
	color: var(--dm-on-primary);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.dm-review-public-skip {
	margin-top: 8px;
	border: none;
	background: none;
	color: var(--dm-ink-soft);
	font: inherit;
	font-size: 13px;
	text-decoration: underline;
	cursor: pointer;
}

/* Istoricul complet al statusurilor, fiecare cu ora lui — vertical, cu
   bife legate printr-o linie, afișat la „Vezi istoricul”. */
.dm-order-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dm-order-timeline-item {
	position: relative;
	padding: 0 0 14px 36px;
	font-size: 14px;
}

.dm-order-timeline-item:last-child {
	padding-bottom: 0;
}

.dm-order-timeline-item + .dm-order-timeline-item::before {
	content: '';
	position: absolute;
	left: 11px;
	top: -14px;
	height: 16px;
	width: 2px;
	background: color-mix(in srgb, var(--dm-primary) 35%, transparent);
}

.dm-order-timeline-dot {
	position: absolute;
	left: 0;
	top: -1px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--dm-primary);
	color: var(--dm-on-primary);
}

.dm-order-timeline-dot svg {
	width: 12px;
	height: 12px;
}

.dm-order-timeline-item.is-cancelled .dm-order-timeline-dot {
	background: #b3261e;	color: #fff;
}

.dm-order-timeline-item.is-cancelled .dm-order-timeline-dot svg {
	width: 24px;
	height: 24px;
}

.dm-order-timeline-time {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: var(--dm-ink-soft);
}

/* Notificările nu mai sunt un popup modal (fără fundal întunecat) — apar ca
   bannere „push" auto, sus pe ecran, plus un dropdown de istoric la clopoțel. */

.dm-notif-mute {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--dm-line);
	border-radius: 50%;
	padding: 0;
	background: none;
	color: var(--dm-primary);
	cursor: pointer;
}

.dm-notif-mute svg {
	width: 16px;
	height: 16px;
}

.dm-notif-mute[aria-pressed="true"] {
	color: var(--dm-ink-soft);
	border-color: var(--dm-line);
}

.dm-notif-mute[aria-pressed="false"] {
	color: var(--dm-primary);
	border-color: var(--dm-primary);
}

/* Iconul rotund + rândul comun (icon / text+oră / ×), reutilizat de bannere
   și de rândurile din dropdown-ul de istoric. */
.dm-notif-icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--dm-line);
	color: var(--dm-primary);
}

.dm-notif-icon svg {
	width: 16px;
	height: 16px;
}

.dm-notif-body {
	flex: 1;
	min-width: 0;
}

.dm-notif-text {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--dm-ink);
}

.dm-notif-time {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	color: var(--dm-ink-soft);
}

.dm-notif-dismiss {
	flex: none;
	width: 22px;
	height: 22px;
	border: none;
	border-radius: 50%;
	background: none;
	color: var(--dm-ink-soft);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

/* Bannere „push" — stivă fixă sus pe ecran, fără fundal întunecat; fiecare
   dispare singură după câteva secunde, dar poate fi închisă și cu ×. */
.dm-notif-banners {
	position: fixed;
	top: 12px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 130;
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: min(360px, calc(100% - 24px));
	pointer-events: none;
}

.dm-notif-banner {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px;
	background: var(--dm-card);
	border-radius: var(--dm-radius);
	box-shadow: var(--dm-shadow);
	pointer-events: auto;
	animation: dm-notif-banner-in 0.22s ease;
}

@keyframes dm-notif-banner-in {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Banner de consimțământ privind stocarea locală (coș, preferințe, istoric
   comenzi) — fix jos, deasupra restului conținutului, până la prima
   confirmare a vizitatorului. */
.dm-cookie-banner {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 140;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 14px 20px;
	/* Fundal fix (nu --dm-ink) — text alb hardcodat mai jos, deci nu poate
	   urma culoarea de text aleasă liber de restaurant (--dm-ink), ca să nu
	   riște exact problema pe care --dm-on-secondary o rezolvă pentru
	   celelalte elemente cu fundal --dm-secondary. */
	background: #241f1a;
	box-shadow: 0 -6px 24px rgba(36, 31, 26, 0.18);
}

.dm-cookie-banner[hidden] {
	display: none;
}

.dm-cookie-banner-text {
	margin: 0;
	flex: 1 1 260px;
	max-width: 640px;
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.88);
}

.dm-cookie-banner-accept {
	flex: 0 0 auto;
	padding: 10px 20px;
	border: none;
	border-radius: 999px;
	background: var(--dm-primary);
	color: var(--dm-on-primary);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

/* Sugestia de limbă (apare sus, la prima interacțiune; fundal fix, ca la
   bannerul de cookie-uri, ca să nu depindă de culorile alese de restaurant). */
.dm-lang-banner {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 150;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 14px;
	padding: 10px 16px;
	background: #241f1a;
	box-shadow: 0 6px 24px rgba(36, 31, 26, 0.18);
	font-size: 14px;
	color: rgba(255, 255, 255, 0.88);
}

.dm-lang-banner-yes {
	padding: 8px 16px;
	border-radius: 999px;
	background: var(--dm-primary);
	color: var(--dm-on-primary);
	font-weight: 600;
	text-decoration: none;
}

.dm-lang-banner-no {
	padding: 8px 4px;
	border: none;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

/* Restaurantele cu toolbar unic (comandă/rezervare/chemare ospătar, fixat
   jos) au nevoie ca bannerul să urce deasupra lui, nu să-l acopere. */
body.dm-has-toolbar .dm-cookie-banner {
	bottom: calc(var(--dm-toolbar-height) + env(safe-area-inset-bottom));
}

/* Dropdown de istoric — deschis/închis la click pe clopoțel, închidere prin
   click în afara lui (fără overlay care blochează pagina). */
.dm-notif-dropdown {
	position: fixed;
	top: 64px;
	right: 16px;
	z-index: 130;
	width: min(340px, calc(100% - 32px));
	max-height: 60vh;
	overflow-y: auto;
	background: var(--dm-card);
	border-radius: var(--dm-radius);
	box-shadow: var(--dm-shadow);
	padding: 16px;
}

.dm-notif-dropdown[hidden] {
	display: none;
}

.dm-notif-dropdown-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}

.dm-notif-dropdown-header h3 {
	flex: 1;
	margin: 0;
	font-size: 16px;
}

.dm-notif-clear-all {
	flex: none;
	border: none;
	background: none;
	color: var(--dm-primary);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}

.dm-notif-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.dm-notif-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}