/**
 * Becco Fino Business Lunch - stile front-end.
 *
 * Il modulo vive dentro pagine molto diverse fra loro: qui si costruisce un
 * ambiente chiuso (tipografia, colori, spaziature) che non dipende dal tema,
 * restando pero' pilotabile dalle impostazioni "Aspetto del modulo".
 */

/* Colori e font configurabili: i valori delle impostazioni arrivano come
   variabili su :root e devono poter vincere su questi default, percio' qui
   NON vanno ridichiarati dentro .bbl-app. */

:root {
	--bbl-accent: #CD2653;
	--bbl-surface: #FFFFFF;
	--bbl-bg: #F5EFE4;
	--bbl-text: #1A1A1A;
	--bbl-heading-font: Roboto, "Helvetica Neue", Helvetica, sans-serif;
}

.bbl-app {
	--bbl-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--bbl-muted: #6b6b6b;
	--bbl-line: rgba(0, 0, 0, .12);
	--bbl-line-soft: rgba(0, 0, 0, .07);

	/* Tinte derivate dall'accento: con color-mix seguono il colore scelto,
	   altrimenti restano i due grigi neutri del fallback. */
	--bbl-accent-soft: rgba(0, 0, 0, .05);
	--bbl-accent-ring: rgba(0, 0, 0, .12);

	--bbl-radius: 14px;
	--bbl-radius-sm: 10px;
	/* I controlli (pulsanti, orari, selettori) hanno tutti lo stesso angolo:
	   le pastiglie tonde facevano a pugni con le schede squadrate. */
	--bbl-radius-btn: 10px;
	--bbl-shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
	--bbl-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 10px 28px rgba(0, 0, 0, .07);
	--bbl-shadow-lift: 0 2px 4px rgba(0, 0, 0, .05), 0 14px 32px rgba(0, 0, 0, .10);

	max-width: 940px;
	margin: 0 auto;
	scroll-margin-top: 64px;
	padding: 32px 28px;
	background: var(--bbl-bg);
	border-radius: var(--bbl-radius);
	box-shadow: var(--bbl-shadow);
	color: var(--bbl-text);
	font-family: var(--bbl-font);
	font-size: 16px;
	line-height: 1.55;
	font-style: normal;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
}

@supports (color: color-mix(in srgb, red 50%, white)) {
	.bbl-app {
		--bbl-accent-soft: color-mix(in srgb, var(--bbl-accent) 10%, #fff);
		--bbl-accent-ring: color-mix(in srgb, var(--bbl-accent) 22%, transparent);
	}
}

/* Neutralizza le decorazioni che i temi applicano a link, bottoni e testi. */

.bbl-app a,
.bbl-app button {
	text-decoration: none;
	box-shadow: none;
	letter-spacing: normal;
}

.bbl-app a:hover,
.bbl-app a:focus,
.bbl-app button:hover,
.bbl-app button:focus {
	text-decoration: none;
}

.bbl-app p,
.bbl-app li,
.bbl-app label,
.bbl-app dt,
.bbl-app dd {
	font-style: normal;
	max-width: none;
}

.bbl-app .bbl-title,
.bbl-app .bbl-h3,
.bbl-app .bbl-h4 {
	color: var(--bbl-text);
}

.bbl-app *,
.bbl-app *::before,
.bbl-app *::after {
	box-sizing: inherit;
}

/* Un solo anello di focus per tutti i comandi: visibile anche da tastiera. */

.bbl-app :focus-visible {
	outline: 2px solid var(--bbl-accent);
	outline-offset: 2px;
}

/* I temi danno margini generosi a titoli e paragrafi del contenuto: dentro il
   modulo si riparte da zero e ogni componente rimette i propri. */

.bbl-app h1,
.bbl-app h2,
.bbl-app h3,
.bbl-app h4,
.bbl-app h5,
.bbl-app h6,
.bbl-app p,
.bbl-app ul,
.bbl-app ol,
.bbl-app dl,
.bbl-app dd,
.bbl-app figure,
.bbl-app fieldset {
	margin: 0;
}

/* Intestazione ------------------------------------------------------- */

.bbl-app .bbl-hero {
	text-align: center;
	margin-bottom: 26px;
}

.bbl-app .bbl-kicker {
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--bbl-accent);
}

.bbl-app .bbl-title {
	font-family: var(--bbl-heading-font);
	font-size: clamp(26px, 4vw, 40px);
	line-height: 1.12;
	letter-spacing: -.01em;
	margin: 0 0 10px;
}

.bbl-app .bbl-subtitle {
	margin: 0 auto;
	max-width: 46ch;
	color: var(--bbl-muted);
	font-size: 15px;
}

/* Stepper ------------------------------------------------------------ */

.bbl-app .bbl-steps {
	display: flex;
	gap: 0;
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
	counter-reset: bbl;
}

.bbl-app .bbl-step {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	padding: 0 4px;
	background: none;
	border: 0;
	font-size: 12px;
	line-height: 1.3;
	color: var(--bbl-muted);
	text-align: center;
}

/* Binario di collegamento fra un passo e il precedente. */

.bbl-app .bbl-step + .bbl-step::before {
	content: "";
	position: absolute;
	top: 15px;
	right: 50%;
	left: -50%;
	height: 2px;
	background: var(--bbl-line);
}

.bbl-app .bbl-step.is-current::before,
.bbl-app .bbl-step.is-done::before {
	background: var(--bbl-accent);
}

.bbl-app .bbl-step-num {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: 0 0 32px;
	border-radius: 50%;
	background: var(--bbl-surface);
	box-shadow: inset 0 0 0 2px var(--bbl-line);
	font-weight: 700;
	font-size: 13px;
	transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.bbl-app .bbl-step-label {
	display: block;
	overflow-wrap: break-word;
}

.bbl-app .bbl-step.is-current {
	color: var(--bbl-text);
	font-weight: 600;
}

.bbl-app .bbl-step.is-current .bbl-step-num,
.bbl-app .bbl-step.is-done .bbl-step-num {
	background: var(--bbl-accent);
	box-shadow: inset 0 0 0 2px var(--bbl-accent);
	color: #fff;
}

.bbl-app .bbl-step.is-done {
	color: var(--bbl-text);
}

/* Pannello ----------------------------------------------------------- */

.bbl-app .bbl-panel {
	background: var(--bbl-surface);
	border: 1px solid var(--bbl-line-soft);
	border-radius: var(--bbl-radius);
	box-shadow: var(--bbl-shadow-sm);
	padding: 26px 26px 28px;
}

.bbl-app .bbl-h3 {
	font-family: var(--bbl-heading-font);
	font-size: 21px;
	line-height: 1.25;
	margin: 0 0 18px;
}

.bbl-app .bbl-h4 {
	font-family: var(--bbl-heading-font);
	font-size: 16px;
	margin: 24px 0 10px;
}

.bbl-app .bbl-muted {
	color: var(--bbl-muted);
	font-size: 14px;
}

.bbl-app .bbl-recap {
	margin: 0 0 14px;
	padding: 8px 14px;
	background: var(--bbl-accent-soft);
	border-radius: var(--bbl-radius-btn);
	font-size: 14px;
	color: var(--bbl-text);
	text-align: center;
}

/* Modalita' ---------------------------------------------------------- */

.bbl-app .bbl-modes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 12px;
}

.bbl-app .bbl-mode {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	height: 100%;
	padding: 18px 18px 20px;
	background: var(--bbl-surface);
	border: 1px solid var(--bbl-line);
	border-radius: var(--bbl-radius);
	cursor: pointer;
	text-align: left;
	font: inherit;
	color: inherit;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, background-color .15s ease;
}

.bbl-app .bbl-mode:hover {
	border-color: var(--bbl-accent);
	box-shadow: var(--bbl-shadow-lift);
	transform: translateY(-2px);
}

.bbl-app .bbl-mode.is-active {
	border-color: var(--bbl-accent);
	background: var(--bbl-accent-soft);
	box-shadow: 0 0 0 3px var(--bbl-accent-ring);
}

/* Spunta sull'opzione scelta. */

.bbl-app .bbl-mode.is-active::after {
	content: "";
	position: absolute;
	top: 14px;
	right: 14px;
	width: 9px;
	height: 16px;
	border: solid var(--bbl-accent);
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg);
}

.bbl-app .bbl-mode-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--bbl-accent-soft);
}

.bbl-app .bbl-mode-icon svg {
	width: 24px;
	height: 24px;
	fill: var(--bbl-accent);
}

.bbl-app .bbl-mode-name {
	font-family: var(--bbl-heading-font);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
}

.bbl-app .bbl-mode-hint {
	font-size: 13px;
	line-height: 1.45;
	color: var(--bbl-muted);
}

/* La scheda «Consegna a domicilio» del passo 1 (29/09/2026, istruzioni e
   anteprima del titolare): tre riquadri uno sotto l'altro (ordine minimo,
   costo di consegna, consegna gratuita) e la zona servita. Sono <span> dentro
   il pulsante della modalita': non sono controlli, e ogni informazione si
   legge dall'etichetta e dal testo, non dal colore. Sulla riga intera, cosi'
   sul computer non resta un buco accanto e i riquadri respirano. */
.bbl-app .bbl-mode-consegna {
	grid-column: 1 / -1;
}

.bbl-app .bbl-mode-info {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	margin-top: 4px;
}

.bbl-app .bbl-info {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	border-radius: 14px;
	background: #fdeff3;
	color: var(--bbl-text);
}

/* Scelta la scheda (fondo rosato) i riquadri rosa restano staccati. */
.bbl-app .bbl-mode.is-active .bbl-info {
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--bbl-accent-ring);
}

.bbl-app .bbl-info-icona {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fbdde6;
}

.bbl-app .bbl-mode.is-active .bbl-info-icona {
	background: var(--bbl-accent-soft);
}

.bbl-app .bbl-info-icona svg {
	width: 22px;
	height: 22px;
	fill: var(--bbl-accent);
}

.bbl-app .bbl-info-testo {
	display: block;
	min-width: 0;
}

.bbl-app .bbl-info-etichetta {
	display: block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	line-height: 1.3;
	text-transform: uppercase;
	color: #444;
}

.bbl-app .bbl-info-valore {
	display: block;
	margin-top: 2px;
	font-size: 24px;
	font-weight: 800;
	line-height: 1.15;
	color: var(--bbl-text);
	overflow-wrap: break-word;
}

/* La gratuita: verde chiarissimo, testo scuro e ad alto contrasto. */
.bbl-app .bbl-mode .bbl-info-gratis,
.bbl-app .bbl-mode.is-active .bbl-info-gratis {
	background: #e9f7ec;
	box-shadow: none;
}

.bbl-app .bbl-mode .bbl-info-gratis .bbl-info-icona {
	background: #cdeed4;
}

.bbl-app .bbl-info-gratis .bbl-info-icona svg {
	fill: #1d6a37;
}

.bbl-app .bbl-info-gratis .bbl-info-etichetta {
	color: #1d5c30;
}

.bbl-app .bbl-mode-zona {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	margin-top: 4px;
	padding-top: 14px;
	border-top: 1px solid var(--bbl-line);
}

.bbl-app .bbl-zona-titolo {
	display: block;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.bbl-app .bbl-zona-dettaglio {
	display: block;
	margin-top: 1px;
	font-size: 14px;
	line-height: 1.35;
	color: #555;
}

@media (max-width: 600px) {
	.bbl-app .bbl-info {
		padding: 11px 12px;
		gap: 12px;
	}

	.bbl-app .bbl-info-valore {
		font-size: 22px;
	}
}

/* Telefono molto stretto, o testo molto ingrandito: le icone sono di
   supporto e si tolgono, cosi' etichette e importi non si spezzano a meta'
   parola. */
@media (max-width: 340px) {
	.bbl-app .bbl-mode-consegna .bbl-info-icona {
		display: none;
	}
}

/* Date e slot -------------------------------------------------------- */

.bbl-app .bbl-dates {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 2px 2px 10px;
	margin: 0 -2px;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
}

.bbl-app .bbl-date {
	flex: 0 0 auto;
	width: 68px;
	padding: 10px 4px 11px;
	border: 1px solid var(--bbl-line);
	border-radius: var(--bbl-radius-sm);
	background: var(--bbl-surface);
	cursor: pointer;
	font: inherit;
	color: inherit;
	text-align: center;
	line-height: 1.2;
	scroll-snap-align: start;
	transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.bbl-app .bbl-date:hover {
	border-color: var(--bbl-accent);
}

.bbl-app .bbl-date-wd,
.bbl-app .bbl-date-m {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--bbl-muted);
}

.bbl-app .bbl-date-d {
	display: block;
	font-family: var(--bbl-heading-font);
	font-size: 21px;
	font-weight: 700;
	margin: 1px 0;
}

.bbl-app .bbl-date.is-active {
	border-color: var(--bbl-accent);
	background: var(--bbl-accent);
	color: #fff;
	box-shadow: 0 0 0 3px var(--bbl-accent-ring);
}

.bbl-app .bbl-date.is-active .bbl-date-wd,
.bbl-app .bbl-date.is-active .bbl-date-m {
	color: rgba(255, 255, 255, .85);
}

/* Nome della fascia sopra i suoi orari: compare solo quando ce n'e' piu'
   di una, quindi non deve gridare, deve solo separare. */
.bbl-app .bbl-band-name {
	margin: 16px 0 8px;
	font-family: var(--bbl-heading-font);
	font-size: 14px;
	letter-spacing: 0.04em;
	color: var(--bbl-muted);
}

.bbl-app .bbl-band-name:first-of-type {
	margin-top: 0;
}

.bbl-app .bbl-slots {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bbl-app .bbl-slot {
	min-width: 76px;
	min-height: 44px;
	padding: 10px 16px;
	border: 1px solid var(--bbl-line);
	border-radius: var(--bbl-radius-btn);
	background: var(--bbl-surface);
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	color: inherit;
	transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.bbl-app .bbl-slot:hover:not([disabled]):not(.is-disabled) {
	border-color: var(--bbl-accent);
}

.bbl-app .bbl-slot.is-active {
	border-color: var(--bbl-accent);
	background: var(--bbl-accent);
	color: #fff;
	box-shadow: 0 0 0 3px var(--bbl-accent-ring);
}

.bbl-app .bbl-slot.is-disabled,
.bbl-app .bbl-slot[disabled] {
	opacity: .4;
	cursor: not-allowed;
	text-decoration: line-through;
	box-shadow: none;
}

/* Percorso guidato per persona --------------------------------------- */

.bbl-app .bbl-people {
	display: flex;
	justify-content: center;
	padding: 8px 0 4px;
}

.bbl-app .bbl-people .bbl-stepper input {
	width: 72px;
	height: 44px;
	border: 0;
	background: transparent;
	text-align: center;
	font: inherit;
	font-size: 20px;
	font-weight: 700;
	padding: 0;
}

.bbl-app .bbl-person-head {
	margin-bottom: 16px;
}

.bbl-app .bbl-person-head .bbl-kicker {
	margin-bottom: 2px;
}

.bbl-app .bbl-person-head .bbl-h3 {
	margin-bottom: 0;
}

.bbl-app .bbl-categories {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 10px;
}

.bbl-app .bbl-category {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	min-height: 76px;
	padding: 16px 18px;
	background: var(--bbl-surface);
	border: 1px solid var(--bbl-line);
	border-radius: var(--bbl-radius);
	cursor: pointer;
	font: inherit;
	color: inherit;
	text-align: left;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.bbl-app .bbl-category:hover:not([disabled]) {
	border-color: var(--bbl-accent);
	box-shadow: var(--bbl-shadow-lift);
	transform: translateY(-2px);
}

.bbl-app .bbl-category[disabled] {
	opacity: .55;
	cursor: not-allowed;
}

.bbl-app .bbl-category.has-choices {
	border-color: var(--bbl-accent);
	background: var(--bbl-accent-soft);
}

.bbl-app .bbl-category-name {
	font-family: var(--bbl-heading-font);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
}

.bbl-app .bbl-category-meta {
	font-size: 13px;
	font-weight: 600;
	color: var(--bbl-accent);
}

.bbl-app .bbl-category[disabled] .bbl-category-meta {
	color: var(--bbl-muted);
	font-weight: 400;
}

.bbl-app .bbl-person-list {
	list-style: none;
	margin: 18px 0 0;
	padding: 14px 0 0;
	border-top: 1px solid var(--bbl-line-soft);
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bbl-app .bbl-person-row {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-size: 14px;
}

.bbl-app .bbl-person-row.is-active {
	font-weight: 700;
}

.bbl-app .bbl-person-row.is-done span:first-child::before {
	content: "\2713\00a0";
	color: var(--bbl-accent);
}

.bbl-app .bbl-person-sum {
	margin-left: auto;
	color: var(--bbl-muted);
	white-space: nowrap;
}

.bbl-app .bbl-btn-link {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 13px;
	color: var(--bbl-accent);
	text-decoration: underline;
	cursor: pointer;
}

.bbl-app .bbl-order-hint {
	margin-top: 12px;
	font-size: 14px;
}

/* La barra con l'azione principale resta a portata di pollice mentre si
   scorre l'elenco. "position: sticky" da sola non basta: su questo tema un
   antenato con overflow nascosto se la prende, e la barra scorre via lo
   stesso. Per questo il JS, quando serve, aggiunge is-docked e la fissa alla
   finestra, larga quanto il modulo e non quanto lo schermo.

   Lo sfondo e' pieno, non sfumato: con il gradiente si leggeva il testo sotto
   e il pulsante sembrava sporco. */
.bbl-app .bbl-nav-dock {
	position: sticky;
	bottom: 0;
	z-index: 5;
	margin-top: 18px;
	padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px));
	background: var(--bbl-bg);
	border-top: 1px solid var(--bbl-line-soft);
}

.bbl-app .bbl-nav-dock.is-docked {
	position: fixed;
	bottom: 0;
	left: var(--bbl-nav-left, 0);
	width: var(--bbl-nav-width, 100%);
	padding-left: 16px;
	padding-right: 16px;
	box-shadow: 0 -6px 18px rgba(0, 0, 0, .10);
}

/* Con la barra fissata in fondo, sul telefono il verde di Call Now Button
   copriva "Indietro": finche' la barra e' fissata sale sopra. (Il pulsante
   fisso "Preferenze cookie" non c'e' piu' dalla 1.40.2.) */
body:has(.bbl-nav-dock.is-docked) #callnowbutton {
	/* L'altezza della barra la scrive il JS (--bbl-dock-h): le barre non sono
	   tutte uguali, con la spiegazione sotto «Invia» o il totale del panino
	   sono piu' alte e 85 px fissi lasciavano il cerchio sopra «Indietro».
	   Compresa la zona sicura dell'iPhone, che la barra ha nel suo padding. */
	bottom: calc(var(--bbl-dock-h, 73px) + 12px) !important;
}

/* Barra non ancora fissata ma gia' vicina al bordo basso (a fondo modulo, prima
   del pie' di pagina): il cerchio sale appena sopra di lei, la posizione la
   scrive il JS. Senza, restava sopra l'angolo di «Indietro» (30/09/2026). */
body.bbl-barra-vicina #callnowbutton {
	bottom: var(--bbl-call-bottom, 90px) !important;
}

/* Con una finestra aperta (note per la cucina, allergeni) il cerchio verde
   resta sopra il fondo scuro, acceso, e sembra un pulsante della finestra. */
body.bbl-modal-open #callnowbutton {
	display: none !important;
}

/* Tiene il posto della barra fissata, se no l'ultimo piatto finisce sotto. */
.bbl-app .bbl-nav-spacer {
	flex: 0 0 auto;
}

/* La sentinella serve al JS per capire dove finirebbe la barra: non si vede
   e non occupa spazio. */
.bbl-app .bbl-nav-sentinel {
	height: 1px;
	margin: 0;
}

/* Menu --------------------------------------------------------------- */

.bbl-app .bbl-menu,
/* Il tema mette "section { padding: 8rem 0 }" su ogni sezione della pagina.
   Dentro il modulo le sezioni sono blocchi di un elenco, non fasce a tutta
   pagina: quel padding ci apriva ottanta pixel di vuoto sopra e sotto. Si
   azzera qui per tutte, cosi' non ricapita al prossimo blocco che aggiungo. */
.bbl-app section {
	padding: 0;
}

.bbl-app .bbl-course {
	margin: 0;
	padding: 0;
}

.bbl-app .bbl-course-title {
	font-family: var(--bbl-heading-font);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--bbl-accent);
	margin: 26px 0 6px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--bbl-accent-soft);
}

.bbl-app .bbl-course:first-child .bbl-course-title {
	margin-top: 0;
}

.bbl-app .bbl-course-name {
	margin: 18px 0 8px;
	font-family: var(--bbl-heading-font);
	font-size: 15px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bbl-muted);
}

.bbl-app .bbl-course:first-child .bbl-course-name,
.bbl-app .bbl-editor .bbl-course-name:first-child {
	margin-top: 0;
}

.bbl-app .bbl-dishes {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bbl-app .bbl-dish {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 10px;
	margin: 0 -10px;
	border-radius: var(--bbl-radius-sm);
	border-bottom: 1px solid var(--bbl-line-soft);
	transition: background-color .15s ease;
}

.bbl-app .bbl-dish:hover {
	background: var(--bbl-accent-soft);
}

.bbl-app .bbl-dish:last-child {
	border-bottom: 0;
}

/* Da quando la scheda va a capo (per ospitare composizioni e pannello), il
   testo deve dichiarare che si restringe: senza questo una descrizione lunga
   si prende tutta la riga e spinge prezzo e selettore sotto. */
.bbl-app .bbl-dish-main {
	flex: 1 1 0;
	min-width: 0;
}

.bbl-app .bbl-dish-name {
	margin: 0;
	font-weight: 700;
	line-height: 1.35;
}

.bbl-app .bbl-variant {
	font-weight: 400;
	font-size: 13px;
	color: var(--bbl-muted);
}

.bbl-app .bbl-dish-desc {
	margin: 3px 0 0;
	font-size: 14px;
	line-height: 1.45;
	color: var(--bbl-muted);
}

/* Sotto l'elenco dei piatti, se qualcuno ha l'asterisco. */
.bbl-app .bbl-frozen-note {
	margin: 14px 0 0;
	color: var(--bbl-muted);
	font-size: 12px;
}

/* Allergeni: un bottone a pillola appena piu' grande della scritta, e
   discreto (richiesta del titolare): bordo sottile, niente grassetto. */
.bbl-app .bbl-dish-allergens {
	display: inline-flex;
	align-items: center;
	margin: 6px 0 0;
	padding: 2px 8px;
	border: 1px solid var(--bbl-line);
	border-radius: 999px;
	background: transparent;
	font-family: inherit;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--bbl-muted);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease;
}

.bbl-app .bbl-dish-allergens:hover {
	border-color: var(--bbl-accent);
	color: var(--bbl-accent);
}

.bbl-app .bbl-dish-allergens:focus-visible {
	outline: 2px solid var(--bbl-accent);
	outline-offset: 2px;
}

body.bbl-modal-open {
	overflow: hidden;
}

.bbl-app .bbl-allergen-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	background: rgba(0, 0, 0, .58);
}

.bbl-app .bbl-allergen-dialog {
	width: min(520px, 100%);
	max-height: min(680px, calc(100vh - 36px));
	overflow-y: auto;
	border-radius: var(--bbl-radius);
	background: var(--bbl-surface);
	box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}

.bbl-app .bbl-allergen-header {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 18px;
	border-bottom: 1px solid var(--bbl-line);
	background: var(--bbl-surface);
}

.bbl-app .bbl-allergen-header .bbl-kicker,
.bbl-app .bbl-allergen-header .bbl-h3 {
	margin: 0;
}

.bbl-app .bbl-allergen-close {
	flex: 0 0 auto;
	min-height: 42px;
	padding: 9px 16px;
	border: 0;
	border-radius: var(--bbl-radius-btn);
	background: var(--bbl-accent);
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.bbl-app .bbl-allergen-list {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 18px;
	list-style: none;
}

.bbl-app .bbl-allergen-list li {
	display: grid;
	grid-template-columns: 32px 1fr;
	gap: 10px;
	align-items: start;
	margin: 0;
}

.bbl-app .bbl-allergen-list strong {
	color: var(--bbl-accent);
}

.bbl-app .bbl-dish-side {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	flex: 0 0 auto;
}

.bbl-app .bbl-price {
	font-weight: 700;
	white-space: nowrap;
}

/* Un prodotto con piu' formati: una scheda sola, i formati sono righe
   dentro, ognuna con nome, prezzo e selettore. Stessa forma delle versioni
   composte, cosi' sulla pagina c'e' un modo solo di leggere "una riga, un
   prezzo, una quantita'". */
.bbl-app .bbl-formati {
	flex: 1 0 100%;
	align-self: stretch;
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--bbl-line-soft);
}

/* Il margine a zero serve: il tema da' a ogni voce di elenco un rientro di
   20 pixel, e i formati finivano spostati rispetto al nome del piatto. */
.bbl-app .bbl-formato {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	margin: 0;
	padding: 8px 0 0;
}

.bbl-app .bbl-formato + .bbl-formato {
	margin-top: 8px;
	border-top: 1px solid var(--bbl-line-soft);
}

.bbl-app .bbl-formato-nome {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 600;
	line-height: 1.35;
}

.bbl-app .bbl-formato .bbl-price,
.bbl-app .bbl-formato .bbl-stepper {
	flex: 0 0 auto;
}

/* Il formato che hai preso si riconosce senza leggere i numeri. */
.bbl-app .bbl-formato.is-selected .bbl-formato-nome {
	color: var(--bbl-accent);
}

/* Se il formato si puo' anche comporre, le sue versioni e il pannello
   stanno sotto la sua riga, a tutta larghezza. */
.bbl-app .bbl-formato > .bbl-compositions-title,
.bbl-app .bbl-formato > .bbl-ingredients-panel {
	flex: 1 0 100%;
}

/* Cosa comprende il formato del poke, sotto il suo nome (24/10/2026). */
.bbl-app .bbl-formato > .bbl-formato-desc {
	flex: 1 0 100%;
	margin: -4px 0 0;
}

/* Il poke senza il nome piccolo ripetuto: la lista dei formati non ha
   niente sopra da cui staccarsi, ne' linea ne' spazio. */
.bbl-app .bbl-dish-formati > .bbl-formati:first-child {
	border-top: 0;
}

.bbl-app .bbl-dish-formati > .bbl-formati:first-child > .bbl-formato:first-child {
	padding-top: 0;
}

/* Stepper quantita' -------------------------------------------------- */

.bbl-app .bbl-stepper {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	border: 1px solid var(--bbl-line);
	border-radius: var(--bbl-radius-sm);
	background: var(--bbl-surface);
	overflow: hidden;
}

.bbl-app .bbl-qty-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 0;
	background: transparent;
	cursor: pointer;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	color: inherit;
	transition: background-color .15s ease, color .15s ease;
}

.bbl-app .bbl-qty-btn:hover:not([disabled]) {
	background: var(--bbl-accent);
	color: #fff;
}

.bbl-app .bbl-qty-btn[disabled] {
	opacity: .3;
	cursor: default;
}

.bbl-app .bbl-qty {
	min-width: 28px;
	text-align: center;
	font-weight: 700;
}

.bbl-app .bbl-guests .bbl-stepper input {
	width: 58px;
	height: 38px;
	border: 0;
	text-align: center;
	font: inherit;
	font-weight: 700;
	background: transparent;
	padding: 0;
}

/* Carrello ----------------------------------------------------------- */

.bbl-app .bbl-cart {
	margin-top: 22px;
	padding: 18px 20px;
	background: var(--bbl-bg);
	border-radius: var(--bbl-radius);
}

.bbl-app .bbl-cart ul {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
}

.bbl-app .bbl-cart li,
.bbl-app .bbl-cart-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 6px;
	font-size: 14px;
}

.bbl-app .bbl-cart-total {
	margin: 0;
	padding-top: 10px;
	border-top: 1px solid var(--bbl-line);
	font-size: 17px;
	font-weight: 700;
}

.bbl-app .bbl-cart-total strong:last-child,
.bbl-app .bbl-cart-total span:last-child {
	color: var(--bbl-accent);
}

/* Form --------------------------------------------------------------- */

.bbl-app .bbl-form {
	display: grid;
	gap: 16px;
}

/* Intestazione dentro il modulo: separa un gruppo di campi dal precedente
   senza aprire lo spazio di un titolo di schermata. */
.bbl-app .bbl-form-head {
	margin: 10px 0 0;
}

.bbl-app .bbl-form-hint {
	margin: -8px 0 0;
	font-size: 14px;
}

.bbl-app .bbl-row {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 12px;
}

.bbl-app .bbl-field label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 5px;
}

.bbl-app .bbl-field input,
.bbl-app .bbl-field textarea,
.bbl-app .bbl-field select {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--bbl-line);
	border-radius: var(--bbl-radius-sm);
	font: inherit;
	background: var(--bbl-surface);
	color: var(--bbl-text);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.bbl-app .bbl-field input::placeholder,
.bbl-app .bbl-field textarea::placeholder {
	color: #9a9a9a;
}

.bbl-app .bbl-field input:focus,
.bbl-app .bbl-field textarea:focus,
.bbl-app .bbl-field select:focus {
	outline: none;
	border-color: var(--bbl-accent);
	box-shadow: 0 0 0 3px var(--bbl-accent-ring);
}

.bbl-app .bbl-req {
	color: var(--bbl-accent);
}

.bbl-app .bbl-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	line-height: 1.5;
	cursor: pointer;
}

.bbl-app .bbl-check input {
	margin-top: 3px;
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	accent-color: var(--bbl-accent);
}

.bbl-app .bbl-skip {
	margin-bottom: 18px;
}

.bbl-app .bbl-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
}

/* Navigazione e bottoni ---------------------------------------------- */

.bbl-app .bbl-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-top: 22px;
}

.bbl-app .bbl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 13px 28px;
	background: var(--bbl-accent);
	color: #fff;
	border: 1px solid var(--bbl-accent);
	border-radius: var(--bbl-radius-btn);
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
	box-shadow: var(--bbl-shadow-sm);
	transition: filter .15s ease, box-shadow .15s ease, transform .15s ease;
}

.bbl-app .bbl-btn:hover {
	filter: brightness(.92);
	color: #fff;
	box-shadow: var(--bbl-shadow-lift);
}

.bbl-app .bbl-btn:active {
	transform: translateY(1px);
}

.bbl-app .bbl-btn[disabled] {
	background: var(--bbl-line);
	border-color: transparent;
	color: rgba(0, 0, 0, .45);
	box-shadow: none;
	filter: none;
	cursor: not-allowed;
	transform: none;
}

.bbl-app .bbl-btn-ghost {
	background: transparent;
	color: var(--bbl-text);
	border-color: var(--bbl-line);
	box-shadow: none;
}

.bbl-app .bbl-btn-ghost:hover {
	color: var(--bbl-text);
	border-color: var(--bbl-text);
	filter: none;
	box-shadow: none;
}

/* WhatsApp si riconosce dal verde: il pulsante lo porta sul fondo, con la
   scritta bianca sopra, come quello dentro le email. Prima ereditava il fondo
   rosso del pulsante principale e cambiava solo il colore del testo: usciva
   un fondo rosso con la scritta verde, cioe' i due colori scambiati.
   Il verde e' quello scuro del marchio e non quello acceso: sul #25D366 il
   bianco si legge male, e questa e' la pagina che il cliente apre dal
   telefono per controllare l'ordine. */
.bbl-app .bbl-btn-wa {
	background: #128C4A;
	border-color: #128C4A;
	color: #fff;
}

.bbl-app .bbl-btn-wa:hover,
.bbl-app .bbl-btn-wa:focus {
	background: #0f7a40;
	border-color: #0f7a40;
	color: #fff;
}

.bbl-app .bbl-wa-icon {
	width: 19px;
	height: 19px;
	flex: 0 0 auto;
}

/* Messaggi ----------------------------------------------------------- */

.bbl-app .bbl-alert {
	padding: 14px 16px;
	background: #fff8e5;
	border: 1px solid rgba(240, 180, 41, .45);
	border-left: 4px solid #f0b429;
	border-radius: var(--bbl-radius-sm);
	margin-bottom: 16px;
	font-size: 14px;
}

.bbl-app .bbl-alert-error {
	background: #fdecea;
	border-color: rgba(205, 38, 83, .35);
	border-left-color: var(--bbl-accent);
}

/* Successo e stato ordine -------------------------------------------- */

.bbl-app .bbl-success {
	background: var(--bbl-surface);
	border: 1px solid var(--bbl-line-soft);
	border-radius: var(--bbl-radius);
	box-shadow: var(--bbl-shadow-sm);
	padding: 40px 26px 30px;
}

.bbl-app .bbl-success-head {
	text-align: center;
	max-width: 420px;
	margin: 0 auto;
}

.bbl-app .bbl-success-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: var(--bbl-accent);
	color: #fff;
	box-shadow: 0 0 0 7px var(--bbl-accent-ring);
}

.bbl-app .bbl-success-icon svg {
	width: 26px;
	height: 26px;
}

.bbl-app .bbl-success-head .bbl-h3 {
	margin: 0 0 6px;
}

.bbl-app .bbl-success-head .bbl-muted {
	margin: 0;
	font-size: 14px;
}

/* Il foglietto dell'ordine: quello che il cliente rilegge o fotografa. */
.bbl-app .bbl-receipt-card {
	max-width: 420px;
	margin: 26px auto 0;
	border: 1px solid var(--bbl-line);
	border-radius: var(--bbl-radius);
	background: var(--bbl-background);
	overflow: hidden;
}

.bbl-app .bbl-receipt-code {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 14px 16px;
	border-bottom: 1px solid var(--bbl-line);
	background: var(--bbl-accent-soft);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--bbl-muted);
}

.bbl-app .bbl-receipt-code strong {
	font-family: var(--bbl-heading-font);
	font-size: 19px;
	letter-spacing: .04em;
	text-transform: none;
	color: var(--bbl-accent);
}

/* Etichetta sopra, valore sotto, tutto a sinistra: un indirizzo lungo
   incolonnato a destra si spezza male e si legge peggio. */
.bbl-app .bbl-receipt-facts {
	margin: 0;
	padding: 14px 16px 6px;
	font-size: 14px;
}

.bbl-app .bbl-receipt-facts dt {
	color: var(--bbl-muted);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.bbl-app .bbl-receipt-facts dd {
	margin: 2px 0 12px;
	font-weight: 600;
	line-height: 1.4;
}

/* La distinta dentro la ricevuta. */
.bbl-app .bbl-receipt-items {
	padding: 4px 16px 10px;
	border-top: 1px solid var(--bbl-line);
}

.bbl-app .bbl-receipt-lines {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bbl-app .bbl-receipt-lines li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 0;
	font-size: 14px;
	border-bottom: 1px solid var(--bbl-line-soft);
}

.bbl-app .bbl-receipt-lines li:last-child {
	border-bottom: 0;
}

.bbl-app .bbl-receipt-line-name {
	min-width: 0;
}

.bbl-app .bbl-receipt-line-name em {
	color: var(--bbl-muted);
	font-style: normal;
}

.bbl-app .bbl-receipt-line-custom,
.bbl-app .bbl-receipt-line-person {
	display: block;
	font-size: 12px;
	line-height: 1.35;
}

.bbl-app .bbl-receipt-line-custom {
	color: var(--bbl-accent);
	font-style: italic;
}

.bbl-app .bbl-receipt-line-person {
	color: var(--bbl-muted);
}

.bbl-app .bbl-receipt-line-price {
	flex: 0 0 auto;
	white-space: nowrap;
}

.bbl-app .bbl-receipt-payer {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	font-weight: 700;
}

.bbl-app .bbl-receipt-payer em {
	color: var(--bbl-muted);
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	/* Il codice del conto non si spezza al trattino («BL-3-» / «0610/01»). */
	white-space: nowrap;
}

/* L'importo resta su una riga: a 375 px «€» finiva sopra e «14,50» sotto. */
.bbl-app .bbl-receipt-payer > span:first-child {
	min-width: 0;
}

.bbl-app .bbl-receipt-payer > span:last-child {
	flex: 0 0 auto;
	white-space: nowrap;
}

.bbl-app .bbl-receipt-quote {
	margin-top: 4px;
}

.bbl-app .bbl-receipt-quote .bbl-receipt-row {
	margin: 0 0 2px;
	font-size: 13px;
}

.bbl-app .bbl-receipt-split li + li {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--bbl-line-soft);
}

.bbl-app .bbl-receipt-sums {
	border-top: 1px solid var(--bbl-line);
	padding: 10px 16px 12px;
}

.bbl-app .bbl-receipt-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 4px;
	font-size: 14px;
	color: var(--bbl-muted);
}

.bbl-app .bbl-receipt-note {
	margin: -2px 0 8px;
	color: var(--bbl-muted);
	font-size: 12px;
	line-height: 1.4;
}

.bbl-app .bbl-receipt-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 8px 0 0;
	padding-top: 10px;
	border-top: 1px solid var(--bbl-line-soft);
	font-size: 15px;
	color: inherit;
}

.bbl-app .bbl-receipt-total strong {
	font-size: 20px;
}

.bbl-app .bbl-receipt-split {
	padding: 12px 16px;
	border-top: 1px solid var(--bbl-line);
	text-align: left;
}

.bbl-app .bbl-receipt-split ul {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
	font-size: 14px;
}

.bbl-app .bbl-receipt-split em {
	color: var(--bbl-muted);
	font-size: 12px;
	font-style: normal;
}

/* Una sola cosa da fare adesso: il resto sta sotto e pesa meno. */
.bbl-app .bbl-success-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 420px;
	margin: 22px auto 0;
}

.bbl-app .bbl-success-actions .bbl-btn {
	width: 100%;
}

.bbl-app .bbl-success-again {
	display: block;
	margin: 16px auto 0;
}

.bbl-app .bbl-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.bbl-app .bbl-card {
	background: var(--bbl-surface);
	border: 1px solid var(--bbl-line-soft);
	border-radius: var(--bbl-radius);
	box-shadow: var(--bbl-shadow-sm);
	padding: 26px;
}

.bbl-app.bbl-status-page .bbl-card + .bbl-card {
	margin-top: 16px;
}

.bbl-app .bbl-summary {
	margin: 0 0 18px;
	display: grid;
	gap: 10px;
}

.bbl-app .bbl-summary div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	border-bottom: 1px solid var(--bbl-line-soft);
	padding-bottom: 8px;
}

.bbl-app .bbl-summary dt {
	color: var(--bbl-muted);
	font-size: 14px;
	margin: 0;
}

.bbl-app .bbl-summary dd {
	margin: 0;
	font-weight: 700;
	text-align: right;
}

/* Un indirizzo email lungo e' una parola sola: sul telefono, senza
   permesso di andare a capo, usciva dalla scheda. */
.bbl-app .bbl-summary dd.bbl-summary-email {
	min-width: 0;
	overflow-wrap: anywhere;
}

.bbl-app .bbl-items {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
}

.bbl-app .bbl-items li,
.bbl-app .bbl-total {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 0;
	border-bottom: 1px solid var(--bbl-line-soft);
	font-size: 15px;
}

/* La composizione di un panino: chi legge il riepilogo deve ritrovarla. */
.bbl-app .bbl-item-custom {
	display: inline-block;
	margin-top: 2px;
	color: var(--bbl-muted, #666);
	font-size: 13px;
}

.bbl-app .bbl-total {
	border-bottom: 0;
	font-size: 18px;
	font-weight: 700;
}

/* Ordini delle persone e modifica sul posto --------------------------- */

.bbl-app .bbl-people-orders {
	margin-top: 22px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Lo stacco lo da' gia' la sezione: il titolo non ne aggiunge un altro. */
.bbl-app .bbl-people-orders > .bbl-h4 {
	margin-top: 0;
}

.bbl-app .bbl-person-card {
	padding: 14px 16px;
	background: var(--bbl-surface);
	border: 1px solid var(--bbl-line);
	border-radius: var(--bbl-radius);
}

.bbl-app .bbl-person-card.is-editing {
	border-color: var(--bbl-accent);
	box-shadow: 0 0 0 3px var(--bbl-accent-ring);
}

.bbl-app .bbl-person-card-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 12px;
	margin-bottom: 8px;
}

.bbl-app .bbl-person-card-sum {
	margin-left: auto;
	color: var(--bbl-muted);
	font-size: 14px;
	white-space: nowrap;
}

.bbl-app .bbl-person-card-sum em {
	font-style: normal;
	color: var(--bbl-accent);
}

.bbl-app .bbl-person-card-items {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 14px;
}

.bbl-app .bbl-person-card-items li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

.bbl-app .bbl-person-card-items em {
	font-style: normal;
	color: var(--bbl-muted);
	font-size: 13px;
}

.bbl-app .bbl-person-card-actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.bbl-app .bbl-btn-small {
	min-height: 40px;
	padding: 9px 18px;
	font-size: 14px;
}

.bbl-app .bbl-link-remove {
	color: var(--bbl-muted);
}

.bbl-app .bbl-link-remove:hover {
	color: var(--bbl-accent);
}

.bbl-app .bbl-add-person {
	align-self: flex-start;
	margin-top: 4px;
}

.bbl-app .bbl-editor {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px dashed var(--bbl-line);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.bbl-app .bbl-categories-small {
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 8px;
}

.bbl-app .bbl-categories-small .bbl-category {
	min-height: 56px;
	padding: 10px 12px;
}

.bbl-app .bbl-categories-small .bbl-category-name {
	font-size: 15px;
}

.bbl-app .bbl-editor-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	flex-wrap: wrap;
}

.bbl-app .bbl-field-note,
.bbl-app .bbl-field-error {
	margin: -8px 0 0;
	font-size: 13px;
}

.bbl-app .bbl-field-note {
	color: var(--bbl-muted);
}

.bbl-app .bbl-field-error {
	color: var(--bbl-accent);
	font-weight: 600;
}

@media (max-width: 640px) {
	.bbl-app .bbl-person-card-actions,
	.bbl-app .bbl-editor-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.bbl-app .bbl-editor-actions .bbl-btn,
	.bbl-app .bbl-person-card-actions .bbl-btn {
		width: 100%;
	}
}

/* Conti separati ------------------------------------------------------ */

 /* Quando i conti separati sono attivi questo contenitore avvolge anche il
   menu e il carrello: per questo resta senza sfondo, e sono i singoli blocchi
   in cima a disegnarsi come schede. */

.bbl-app .bbl-split {
	margin: 0 0 20px;
	padding: 0;
	background: transparent;
	border: 0;
}

.bbl-app .bbl-split-toggle {
	margin: 0;
	padding: 14px 16px;
	background: var(--bbl-accent-soft);
	border: 1px solid var(--bbl-line-soft);
	border-radius: var(--bbl-radius);
	font-weight: 700;
}

.bbl-app .bbl-split-hint {
	margin: 6px 0 0 16px;
	font-size: 13px;
	color: var(--bbl-muted);
}

.bbl-app .bbl-payer-bar {
	margin-top: 12px;
	padding: 14px 16px;
	background: var(--bbl-surface);
	border: 1px solid var(--bbl-line);
	border-radius: var(--bbl-radius);
}

.bbl-app .bbl-split > .bbl-menu {
	margin-top: 20px;
}

.bbl-app .bbl-payer-label {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--bbl-muted);
}

.bbl-app .bbl-payer-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bbl-app .bbl-payer-chip {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	min-width: 96px;
	padding: 9px 14px;
	background: var(--bbl-surface);
	border: 1px solid var(--bbl-line);
	border-radius: var(--bbl-radius-sm);
	cursor: pointer;
	line-height: 1.2;
	font: inherit;
	color: var(--bbl-text);
	transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.bbl-app .bbl-payer-chip:hover {
	border-color: var(--bbl-accent);
}

.bbl-app .bbl-payer-chip.is-active {
	background: var(--bbl-accent);
	border-color: var(--bbl-accent);
	color: #fff;
	box-shadow: 0 0 0 3px var(--bbl-accent-ring);
}

.bbl-app .bbl-payer-chip-name {
	font-weight: 600;
	font-size: 14px;
}

.bbl-app .bbl-payer-chip.is-nameless .bbl-payer-chip-name {
	font-style: italic;
	color: var(--bbl-muted);
}

.bbl-app .bbl-payer-chip.is-active.is-nameless .bbl-payer-chip-name {
	color: #fff;
}

.bbl-app .bbl-payer-chip-sum {
	font-size: 12px;
	color: var(--bbl-muted);
}

.bbl-app .bbl-payer-chip.is-active .bbl-payer-chip-sum {
	color: rgba(255, 255, 255, .85);
}

.bbl-app .bbl-payer-add {
	justify-content: center;
	border-style: dashed;
	font-size: 14px;
	font-weight: 700;
	color: var(--bbl-accent);
}

.bbl-app .bbl-payer-edit {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	margin-top: 12px;
}

.bbl-app .bbl-payer-edit .bbl-field {
	flex: 1;
	margin: 0;
}

.bbl-app .bbl-payer-remove {
	padding: 11px 18px;
	min-height: 44px;
	white-space: nowrap;
}

.bbl-app .bbl-split-empty,
.bbl-app .bbl-split-fee-note {
	margin: 10px 0 0;
	font-size: 13px;
	color: var(--bbl-muted);
}

.bbl-app .bbl-split-problem {
	margin: 10px 0 0;
	padding: 9px 13px;
	background: #fff4e5;
	border-left: 3px solid #f0b429;
	border-radius: var(--bbl-radius-sm);
	font-size: 13px;
}

/* Carrello diviso per persona */

.bbl-app .bbl-cart-payer {
	margin: 0 0 12px;
	padding: 11px 14px;
	background: var(--bbl-surface);
	border-radius: var(--bbl-radius-sm);
}

.bbl-app .bbl-cart-payer.is-active {
	box-shadow: inset 0 0 0 2px var(--bbl-accent);
}

.bbl-app .bbl-cart-payer-name {
	margin: 0 0 6px;
	font-weight: 700;
	font-size: 14px;
}

.bbl-app .bbl-cart-payer-total {
	margin: 6px 0 0;
	padding-top: 6px;
	border-top: 1px solid var(--bbl-line);
}

.bbl-app .bbl-item-fee {
	color: var(--bbl-muted);
	font-style: italic;
}

/* Anagrafica dei conti nello step dati */

.bbl-app .bbl-split-people {
	margin: 4px 0 18px;
	padding: 16px 18px;
	border: 1px solid var(--bbl-line-soft);
	border-radius: var(--bbl-radius);
	background: var(--bbl-surface);
	box-shadow: var(--bbl-shadow-sm);
}

.bbl-app .bbl-split-people legend {
	padding: 0 8px;
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .08em;
}

/* Nome e recapito affiancati solo se c'e' posto, il totale sotto: il
   modulo e' stretto anche sul computer, e con tre colonne i campi si
   riducevano a pochi caratteri. */
.bbl-app .bbl-split-person {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 8px 12px;
	align-items: start;
	padding: 12px 0;
	border-bottom: 1px solid var(--bbl-line-soft);
}

.bbl-app .bbl-split-person .bbl-split-person-total {
	grid-column: 1 / -1;
}

.bbl-app .bbl-contact-hint {
	margin: 6px 0 0;
	font-size: 12px;
	line-height: 1.4;
	color: var(--bbl-muted);
}

.bbl-app .bbl-contact-hint.is-ok {
	color: #2e7d32;
}

.bbl-app .bbl-contact-hint.is-error {
	color: var(--bbl-accent);
	font-weight: 600;
}

.bbl-app .bbl-split-person:last-of-type {
	border-bottom: 0;
}

/* Il primo conto e' di chi ordina: al posto del recapito, una riga che lo
   dice e il collegamento per chi ordina per altri (1.46.21). */
.bbl-app .bbl-split-referente {
	display: grid;
	gap: 6px;
	align-content: start;
}

.bbl-app .bbl-split-badge {
	justify-self: start;
	margin: 0;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--bbl-accent-soft);
	color: var(--bbl-accent);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .02em;
}

.bbl-app .bbl-split-referente .bbl-contact-hint {
	margin: 0;
}

/* Un collegamento, non un pulsante pieno: il tema colora i pulsanti. */
.bbl-app .bbl-split-altro {
	justify-self: start;
	width: auto;
	min-height: 0;
	margin: 0;
	padding: 2px 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--bbl-accent);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: normal;
	text-align: left;
	text-decoration: underline;
	text-transform: none;
	cursor: pointer;
}

.bbl-app .bbl-split-person .bbl-field {
	margin: 0;
}

.bbl-app .bbl-split-person-total {
	margin: 0;
	font-size: 14px;
}

.bbl-app .bbl-split-person-total strong {
	margin-left: 6px;
	color: var(--bbl-accent);
}

.bbl-app .bbl-fee-split {
	margin: 0;
}

.bbl-app .bbl-fee-split-options {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
}

.bbl-app .bbl-fee-split-options .bbl-check {
	margin: 0;
}

/* Riepilogo conti nella pagina stato e nella schermata di conferma */

.bbl-app .bbl-payer-card {
	margin: 0 0 14px;
	padding: 14px 16px;
	background: var(--bbl-bg);
	border-radius: var(--bbl-radius-sm);
}

.bbl-app .bbl-payer-head {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 8px;
	font-weight: 700;
}

/* Mobile ------------------------------------------------------------- */

@media (max-width: 782px) {
	.bbl-app {
		padding: 24px 18px;
	}

	.bbl-app .bbl-success {
		padding: 30px 16px 22px;
	}

	.bbl-app .bbl-receipt-code {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}

	.bbl-app .bbl-panel {
		padding: 20px 18px 22px;
	}
}

@media (max-width: 640px) {
	.bbl-app {
		padding: 20px 14px;
		border-radius: var(--bbl-radius-sm);
	}

	.bbl-app .bbl-panel {
		padding: 18px 16px 20px;
	}

	/* Sul telefono resta leggibile solo l'etichetta del passo in corso. */

	.bbl-app .bbl-step:not(.is-current) .bbl-step-label {
		display: none;
	}

	.bbl-app .bbl-step-label {
		font-size: 11px;
	}

	/* L'unica etichetta rimasta puo' essere piu' larga della sua colonna:
	   sborda di poco ai lati, dentro il margine del modulo. Stretta com'era
	   andava a capo dentro le parole ("pranzar-e?", "Quando / ?"); il tema
	   mette word-break: break-word su tutto, va tolto anche quello. */
	.bbl-app .bbl-step.is-current .bbl-step-label {
		width: max-content;
		max-width: 92px;
		word-break: normal;
		overflow-wrap: normal;
	}

	.bbl-app .bbl-row {
		grid-template-columns: 1fr;
	}

	.bbl-app .bbl-dish {
		flex-direction: column;
		gap: 10px;
	}

	.bbl-app .bbl-dish-side {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}

	.bbl-app .bbl-nav {
		gap: 10px;
	}

	.bbl-app .bbl-nav .bbl-btn {
		flex: 1 1 0;
		min-width: 0;
		padding: 13px 18px;
	}

	.bbl-app .bbl-actions .bbl-btn {
		width: 100%;
	}
}

@media (max-width: 600px) {
	.bbl-app .bbl-split-person {
		grid-template-columns: 1fr;
		align-items: stretch;
	}

	.bbl-app .bbl-split-person-total {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: 2px 10px;
		padding-bottom: 0;
	}

	/* «Totale € 16,00» sta insieme (prima era «Total / e», «€ / 16,00») e la
	   quota della consegna va sotto, a destra (controllo visivo del 29/09). */
	.bbl-app .bbl-split-person-total > span:first-child,
	.bbl-app .bbl-split-person-total strong {
		white-space: nowrap;
	}

	.bbl-app .bbl-split-person-total strong {
		margin-left: 0;
	}

	.bbl-app .bbl-split-person-total .bbl-muted {
		flex: 1 0 100%;
		text-align: right;
	}

	.bbl-app .bbl-payer-edit {
		flex-direction: column;
		align-items: stretch;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bbl-app * {
		transition: none !important;
	}

	.bbl-app .bbl-mode:hover {
		transform: none;
	}
}

/* Campo che ha fermato l'invio: si vede da lontano, e la spiegazione e' li'
   sotto invece che in cima alla pagina, fuori schermo. */

.bbl-app .bbl-field.has-error input,
.bbl-app .bbl-field.has-error textarea {
	border-color: var(--bbl-accent);
	box-shadow: 0 0 0 3px var(--bbl-accent-ring);
}

/* Dentro il campo il messaggio segue l'input, non lo scavalca: il margine
   negativo serve solo a chi sta fuori, dentro la griglia del modulo. */
.bbl-app .bbl-field .bbl-field-error {
	margin: 6px 0 0;
}

.bbl-app .bbl-check.has-error {
	padding: 8px 10px;
	border-radius: var(--bbl-radius-sm);
	background: var(--bbl-accent-soft);
	box-shadow: inset 0 0 0 1px var(--bbl-accent-ring);
}

.bbl-app .bbl-privacy-link {
	font-size: 13px;
	white-space: nowrap;
}

/* Avviso attaccato ai pulsanti: stesso messaggio, ma dove si sta guardando. */
.bbl-app .bbl-alert-nav {
	margin: 0 0 12px;
}

/* ------------------------------------------------------------------ */
/* Ingredienti: componi il piatto                                      */
/* ------------------------------------------------------------------ */

/* Le azioni sulle versioni sono pulsanti leggeri: riconoscibili al tocco,
   senza prendere lo spazio dei comandi principali dell'ordine. */
.bbl-app .bbl-composition-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid var(--bbl-accent);
	border-radius: var(--bbl-radius-btn);
	background: var(--bbl-surface);
	color: var(--bbl-accent);
	font: inherit;
	font-size: 13px;
	font-style: normal;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
}

.bbl-app .bbl-composition-action:hover {
	background: var(--bbl-accent-soft);
}

.bbl-app .bbl-composition-action:active {
	transform: translateY(1px);
}

.bbl-app .bbl-compose {
	margin-top: 6px;
}

/* Come hai chiesto quel piatto: sta dentro la sua scheda, non in un
   riquadro a parte che ne ripeterebbe il nome. */
.bbl-app .bbl-compositions {
	flex: 1 0 100%;
	list-style: none;
	margin: 4px 0 0;
	padding: 0;
	border-top: 1px solid var(--bbl-line-soft);
}

/* Il margine a zero serve: il tema da' a ogni voce di elenco un rientro di
   20 pixel e uno scarto in alto, e le versioni finivano spostate a destra del
   nome del piatto (come era gia' successo ai formati). */
.bbl-app .bbl-composition {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 8px 0 0;
}

.bbl-app .bbl-composition + .bbl-composition {
	margin-top: 8px;
	border-top: 1px solid var(--bbl-line-soft);
}

.bbl-app .bbl-composition-label {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--bbl-accent);
	font-size: 14px;
	font-style: italic;
	line-height: 1.35;
}

/* La riga del piatto come sta sul menu: stessa forma delle composizioni, ma
   non e' una richiesta del cliente e non deve sembrarlo. */
.bbl-app .bbl-composition-base .bbl-composition-label {
	color: var(--bbl-muted);
	font-style: normal;
}

/* "Modifica" sta sotto la versione a cui si riferisce, non in fondo alla
   scheda: da li' si cambia quella riga, mentre il pulsante in fondo ne
   aggiunge una nuova. Due gesti diversi, due posti diversi. */
.bbl-app .bbl-composition-edit {
	display: flex;
	width: fit-content;
	margin-top: 8px;
}

/* Dice a cosa serve l'elenco: due righe dello stesso panino sono due panini
   diversi, non un doppione. */
.bbl-app .bbl-compositions-title {
	margin: 12px 0 0;
}

/* Su una riga sua: sul computer la scheda e' una riga che va a capo, e il
   titolo finiva in alto a destra accanto al nome del piatto, lontano dalle
   versioni che annuncia (provato a 1000 px il 30/09/2026). Sul telefono, dove
   la scheda e' una colonna, non cambia niente. */
.bbl-app .bbl-dish > .bbl-compositions-title {
	flex: 1 0 100%;
}

/* Allergie e note sulla pagina di stato: il cliente deve poter ricontrollare
   quello che ha scritto, senza telefonare per sapere se e' arrivato. */
.bbl-app .bbl-status-notes {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--bbl-line);
}

.bbl-app .bbl-status-notes p {
	margin: 0 0 10px;
}

.bbl-app .bbl-item-subtotal {
	font-weight: 600;
}

/* "Personalizza" prende la sua riga in fondo alla scheda: prima stava
   appiccicato sotto il selettore, e con le righe quel posto non c'e' piu'. */
.bbl-app .bbl-dish-actions {
	flex: 1 0 100%;
	display: flex;
	justify-content: flex-end;
	padding-top: 6px;
}

.bbl-app .bbl-composition .bbl-price {
	flex: 0 0 auto;
}

.bbl-app .bbl-composition .bbl-stepper {
	flex: 0 0 auto;
}

/* Sul telefono prezzo e quantita' restano affiancati sotto la descrizione:
   cosi' "Modifica" non viene strizzato fra quei due elementi. */
@media (max-width: 600px) {
	.bbl-app .bbl-composition {
		flex-wrap: wrap;
		gap: 8px 12px;
	}

	.bbl-app .bbl-composition-label {
		flex: 1 0 100%;
	}

	.bbl-app .bbl-composition .bbl-price {
		margin-right: auto;
	}
}

/* Il pannello di composizione apre dentro la scheda, a tutta larghezza.
   Sul telefono la scheda e' una colonna con gli elementi allineati in alto a
   sinistra: «flex: 1 0 100%» li allarga in altezza, non in larghezza, e il
   pannello restava piu' stretto della scheda (256 contro 288 px a 390 px,
   provato sulla pagina vera il 30/09/2026). Come i formati, si allarga da se'. */
.bbl-app .bbl-dish > .bbl-ingredients-panel,
.bbl-app .bbl-dish > .bbl-compositions {
	align-self: stretch;
}

.bbl-app .bbl-dish > .bbl-ingredients-panel {
	flex: 1 0 100%;
}

.bbl-app .bbl-line-ingredients {
	display: block;
	font-size: 12px;
	font-style: italic;
	color: var(--bbl-muted);
}

.bbl-app .bbl-ingredients-panel {
	margin-top: 16px;
	padding: 16px;
	border: 1px solid var(--bbl-accent-ring);
	border-radius: var(--bbl-radius);
	background: var(--bbl-surface);
}

/* A griglia, non a capo libero: con venti ingredienti le righe spezzate
   lasciavano buchi a destra e la lista sembrava il doppio. */
.bbl-app .bbl-ing-list {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 190px, 1fr ) );
	gap: 8px;
	margin: 0 0 14px;
}

.bbl-app .bbl-ing {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid var(--bbl-line);
	border-radius: var(--bbl-radius-sm);
	text-align: left;
	background: var(--bbl-background);
	color: inherit;
	font: inherit;
	font-size: 14px;
	cursor: pointer;
}

.bbl-app .bbl-ing:hover {
	border-color: var(--bbl-accent);
}

/* Tolto: si legge ancora, ma si vede che non c'e' piu'. */
.bbl-app .bbl-ing.is-off span:first-child {
	text-decoration: line-through;
	opacity: .6;
}

/* Spento: l'ingrediente e' gia' stato tolto, oppure le aggiunte sono al
   massimo. Resta leggibile, ma non si clicca. */
.bbl-app .bbl-ing.is-locked {
	opacity: .45;
	cursor: not-allowed;
}

.bbl-app .bbl-ing.is-locked:hover {
	border-color: var(--bbl-line);
}

.bbl-app .bbl-ing.is-on {
	border-color: var(--bbl-accent);
	background: var(--bbl-accent-soft);
	font-weight: 600;
}

/* Il prezzo resta su una riga: con un nome lungo ("Glassa al lime e te
   verde") andava a capo in "grati / s". Va a capo il nome. */
.bbl-app .bbl-ing-state {
	flex: 0 0 auto;
	white-space: nowrap;
	font-size: 12px;
	color: var(--bbl-muted);
}

/* --- Poke (1.47.0): il pannello «Costruisci il tuo poke» -------------
   Come il foglio cartaceo del titolare: un riquadro per gruppo con la testa
   del suo colore (base e contorni verde petrolio, proteine e salsa rosse,
   crunchy arancio), le caselle da spuntare, il supplemento in rosso. */
.bbl-app .bbl-poke-panel .bbl-poke-sub {
	margin: -4px 0 14px;
	font-size: 13px;
	font-style: italic;
	color: var(--bbl-muted);
}

.bbl-app .bbl-poke-gruppo {
	margin: 0 0 14px;
	border: 1px solid var(--bbl-line);
	border-radius: var(--bbl-radius-sm);
	overflow: hidden;
	background: var(--bbl-background, #fff);
}

.bbl-app .bbl-poke-testa {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 12px;
	margin: 0;
	padding: 9px 14px;
	background: var(--bbl-poke-colore, #1f6b66);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.bbl-app .bbl-poke-info {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	opacity: .95;
}

.bbl-app .bbl-poke-voci {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 180px, 1fr ) );
}

.bbl-app .bbl-poke-ing {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 44px;
	padding: 8px 14px;
	border: 0;
	border-bottom: 1px solid var(--bbl-line-soft);
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 15px;
	text-align: left;
	cursor: pointer;
}

.bbl-app .bbl-poke-ing:hover {
	background: var(--bbl-accent-soft);
}

.bbl-app .bbl-poke-box {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	border: 2px solid #8a9a99;
	border-radius: 5px;
	background: #fff;
	position: relative;
}

.bbl-app .bbl-poke-ing.is-radio .bbl-poke-box {
	border-radius: 50%;
}

.bbl-app .bbl-poke-ing.is-on .bbl-poke-box {
	border-color: var(--bbl-poke-colore, #1f6b66);
	background: var(--bbl-poke-colore, #1f6b66);
}

.bbl-app .bbl-poke-ing.is-on .bbl-poke-box::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 6px;
	height: 11px;
	border: solid #fff;
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg);
}

.bbl-app .bbl-poke-ing.is-on .bbl-poke-nome {
	font-weight: 700;
}

.bbl-app .bbl-poke-nome {
	flex: 1 1 auto;
}

.bbl-app .bbl-poke-piu {
	flex: 0 0 auto;
	white-space: nowrap;
	font-size: 13px;
	font-weight: 700;
	color: #e8262b;
}

.bbl-app .bbl-poke-ing.is-locked {
	opacity: .45;
	cursor: not-allowed;
}

.bbl-app .bbl-poke-nota {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	color: var(--bbl-muted);
}

/* Allergeni del poke (24/10/2026): i numeri accanto all'ingrediente restano
   piccoli e normali anche quando l'ingrediente scelto va in grassetto. */
.bbl-app .bbl-poke-all,
.bbl-app .bbl-poke-ing.is-on .bbl-poke-all {
	font-size: 12px;
	font-weight: 400;
	color: var(--bbl-muted);
	white-space: nowrap;
}

.bbl-app .bbl-poke-allergeni {
	display: grid;
	gap: 6px;
	margin: 4px 0 2px;
}

.bbl-app .bbl-poke-allergeni .bbl-dish-allergens {
	justify-self: start;
}

.bbl-app .bbl-line-allergeni {
	font-style: normal;
	font-weight: 700;
}

/* Riepilogo: il prezzo di una riga non va mai a capo, anche accanto agli
   ingredienti lunghi del poke (sul telefono finiva in colonna, «€ / 2 / 0 /
   , / 0 / 0»: segnalato dal titolare il 22/10/2026). */
.bbl-app .bbl-cart li > span:first-child,
.bbl-app .bbl-person-card-items li > span:first-child {
	flex: 1 1 auto;
	min-width: 0;
}

.bbl-app .bbl-cart li > span:last-of-type,
.bbl-app .bbl-person-card-items li > span:last-of-type {
	flex: 0 0 auto;
	white-space: nowrap;
	text-align: right;
}

/* Gli ingredienti del poke in un riquadro che si apre. */
/* Un pulsante che si vede (il titolare: «che il pulsante collapse sia
   evidente»): pillola con il bordo del colore del sito e la freccia. */
.bbl-app .bbl-line-poke {
	margin: 6px 0 2px;
}

.bbl-app .bbl-line-poke > summary {
	/* Stessa forma di «Modifica o aggiungi piatti» (bbl-btn-ghost bbl-btn-small),
	   larga quanto la scheda. Un <summary> non e' un <button>: senza
	   border-box veniva alto 60 invece di 40. */
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	width: 100%;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	list-style: none;
	white-space: nowrap;
	-webkit-user-select: none;
	user-select: none;
}

.bbl-app .bbl-line-poke[open] > summary {
	margin-bottom: 6px;
}

/* In «Le tue versioni» l'etichetta e' in corsivo e in colore: il pulsante e
   l'elenco del poke restano diritti come nel riepilogo (24/10/2026). */
.bbl-app .bbl-composition-label .bbl-line-poke {
	font-style: normal;
	margin-bottom: 8px;
}

/* La riga del poke va a capo: sopra nome e prezzo, sotto il pulsante a
   tutta larghezza. */
.bbl-app li.bbl-riga-con-poke {
	flex-wrap: wrap;
	row-gap: 8px;
}

.bbl-app li.bbl-riga-con-poke > .bbl-line-poke {
	flex: 1 0 100%;
	margin: 0 0 4px;
}

/* Nelle schede delle persone il tema rientra le righe di 10 px: il pulsante
   torna a filo, largo come «Modifica o aggiungi piatti». */
.bbl-app .bbl-person-card-items li.bbl-riga-con-poke > .bbl-line-poke {
	flex-basis: calc(100% + 10px);
	max-width: calc(100% + 10px);
	margin-left: -10px;
}

/* Bordo rosso (il titolare, 22/10/2026), anche al passaggio. */
.bbl-app .bbl-line-poke > summary.bbl-btn,
.bbl-app .bbl-line-poke > summary.bbl-btn:hover {
	border-color: var(--bbl-accent);
}

.bbl-app .bbl-line-poke > summary::-webkit-details-marker {
	display: none;
}

.bbl-app .bbl-line-poke > summary::after {
	content: "";
	width: 7px;
	height: 7px;
	border: solid currentColor;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) translateY(-2px);
	transition: transform .15s ease;
}

.bbl-app .bbl-line-poke[open] > summary::after {
	transform: rotate(-135deg) translateY(-1px);
}

.bbl-app .bbl-line-poke .bbl-line-ingredients {
	display: block;
	padding: 8px 12px;
	border-left: 3px solid var(--bbl-accent);
	border-radius: 0 8px 8px 0;
	background: var(--bbl-accent-soft);
	font-size: 13px;
	font-style: normal;
	line-height: 1.45;
	color: var(--bbl-muted);
}

/* La barra in fondo mentre si compone un hamburger (27/09/2026): il totale
   del panino sopra, «Annulla» e «Aggiungi» sotto, al posto di «Indietro» e
   «Avanti». Resta in vista mentre si scorre, come la barra di sempre.
   «Annulla» tiene la sua misura e non va mai a capo; il resto e' del
   pulsante che aggiunge, che sul telefono puo' stare su due righe
   («Aggiungi come / da menu»): provato sulla pagina vera a 390 px. */
.bbl-app .bbl-nav-ing {
	flex-wrap: wrap;
	row-gap: 8px;
	/* «Annulla» e «Aggiungi» della stessa altezza, come «Indietro» e l'invio ai
	   dati: quando il secondo va su due o tre righe il primo si allunga con
	   lui invece di restare piccolo al centro (la regola generale della barra
	   li mette al centro). */
	align-items: stretch;
}

.bbl-app .bbl-nav-ing .bbl-nav-totale {
	display: flex;
	flex: 1 0 100%;
	align-items: baseline;
	justify-content: space-between;
	margin: 0;
	font-weight: 700;
}

.bbl-app .bbl-nav-ing .bbl-nav-totale strong {
	color: var(--bbl-accent);
	font-size: 19px;
}

.bbl-app .bbl-nav-ing .bbl-btn {
	min-width: 0;
	padding-left: 16px;
	padding-right: 16px;
	white-space: normal;
	text-align: center;
}

.bbl-app .bbl-nav-ing .bbl-btn-ghost {
	flex: 0 0 auto;
	white-space: nowrap;
}

.bbl-app .bbl-nav-ing .bbl-btn-ing-ok {
	flex: 1 1 0;
}

/* (Il verde di Call Now Button sopra questa barra, piu' alta di quella di
   sempre, lo sposta la regola generale con --bbl-dock-h.) */

/* Ai dati «Invia la prenotazione» e' lungo: «Indietro» tiene la sua misura e
   il resto e' dell'invio, cosi' non si spezza in «prenotazion / e» su un
   telefono stretto (controllo visivo del 29/09/2026). Dal 30/09 il titolare
   li vuole uguali: «fai che il pulsante invia la prenotazione sia grande come
   indietro sia per lunghezza che per altezza». Meta' a testa, e la stessa
   altezza (quella del piu' alto, cioe' «Invia la / prenotazione» su due righe
   quando non entra in una); il testo resta centrato in entrambi. */
.bbl-app .bbl-nav.bbl-nav-invio {
	align-items: stretch;
}

.bbl-app .bbl-nav.bbl-nav-invio .bbl-btn {
	flex: 1 1 0;
	min-width: 0;
	padding-left: 14px;
	padding-right: 14px;
	overflow-wrap: normal;
	word-break: normal;
}

/* Quanto manca all'ordine minimo: si legge nel riepilogo, prima di compilare
   tutto e scoprirlo dal server. */
.bbl-app .bbl-cart-missing {
	margin: 10px 0 0;
	padding: 10px 12px;
	border-radius: var(--bbl-radius-sm);
	background: var(--bbl-accent-soft);
	color: var(--bbl-accent);
	font-size: 14px;
	font-weight: 600;
}

/* Cosa comprende il coperto: senza questa riga, su una consegna sembra il
   tavolo che non hai occupato. */
.bbl-app .bbl-cart-note {
	margin: 4px 0 0;
	color: var(--bbl-muted);
	font-size: 12px;
	line-height: 1.4;
}

/* Testo che solo chi usa lo schermo legge (l'etichetta di un campo il cui titolo
   e' gia' scritto sopra). */
.bbl-app .bbl-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Il riepilogo «Il tuo ordine» (29/09/2026, sull'anteprima del titolare):
   riquadro beige ad angoli tondi, titolo grande, sezioni «Piatti e coperto»
   e «Consegna», avviso rosa del minimo con il suo pulsante, totale finale
   nero e ben visibile. */
.bbl-app .bbl-riepilogo {
	padding: 22px 22px 20px;
	border-radius: 18px;
	color: var(--bbl-text);
}

.bbl-app .bbl-riepilogo .bbl-riepilogo-titolo {
	margin: 0;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.01em;
}

.bbl-app .bbl-riepilogo-modo {
	margin: 4px 0 0;
	color: var(--bbl-muted);
	font-size: 15px;
}

.bbl-app .bbl-riepilogo-sezione {
	margin-top: 18px;
}

.bbl-app .bbl-riepilogo-sezione + .bbl-riepilogo-sezione,
.bbl-app .bbl-minimo + .bbl-riepilogo-sezione {
	padding-top: 16px;
	border-top: 1px solid var(--bbl-line);
}

.bbl-app .bbl-riepilogo-sottotitolo {
	margin: 0 0 10px;
	font-family: var(--bbl-heading-font);
	font-size: 17px;
	font-weight: 700;
}

.bbl-app .bbl-riepilogo li,
.bbl-app .bbl-riepilogo .bbl-cart-row {
	font-size: 15px;
}

/* Gli importi non vanno a capo («€» da una parte, «28,50» dall'altra): a
   spezzarsi, se serve, e' la scritta accanto. Anche «€ 2,00 × 2» resta
   insieme. Le voci con il <strong> (i totali) prima erano dimenticate. */
.bbl-app .bbl-riepilogo li > span:last-child,
.bbl-app .bbl-riepilogo li > span:last-of-type,
.bbl-app .bbl-riepilogo .bbl-cart-row > span:last-child,
.bbl-app .bbl-riepilogo .bbl-cart-row > strong,
.bbl-app .bbl-riepilogo .bbl-item-fee {
	white-space: nowrap;
}

.bbl-app .bbl-riepilogo .bbl-cart-row > strong {
	flex: 0 0 auto;
}

/* La «×» accanto al prezzo di ogni piatto (01/10/2026): un quadratino da
   20 px con gli angoli appena arrotondati (il titolare: «e' troppo grande e la
   farei quadrata con bordi leggermente arrotondati»), bianco con il filo e
   grigio, cosi' non si confonde con i pulsanti rosa; al passaggio o con la
   tastiera diventa rosa lampone. Il prezzo resta incolonnato a destra, come i
   totali; l'area di tocco e' di 44 px anche se il quadrato ne misura 20 (lo sbordo si
   misura dal bordo interno: 18 + 2 x 13 + il filo). */
.bbl-app .bbl-cart li.bbl-riga-rimovibile {
	align-items: flex-start;
	gap: 8px;
}

.bbl-app .bbl-cart li.bbl-riga-rimovibile > span:first-child {
	flex: 1 1 auto;
	min-width: 0;
}

.bbl-app .bbl-cart li.bbl-riga-rimovibile > span:last-of-type {
	flex: 0 0 auto;
	min-width: 4.6em;
	text-align: right;
}

.bbl-app .bbl-riga-x {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	padding: 0;
	border: 1px solid var(--bbl-line);
	border-radius: 5px;
	background: var(--bbl-surface);
	color: var(--bbl-muted);
	cursor: pointer;
	line-height: 1;
}

.bbl-app .bbl-riga-x::after {
	content: '';
	position: absolute;
	top: -13px;
	right: -13px;
	bottom: -13px;
	left: -13px;
}

.bbl-app .bbl-riga-x svg {
	display: block;
	width: 9px;
	height: 9px;
}

.bbl-app .bbl-riga-x:focus-visible {
	border-color: var(--bbl-accent);
	background: var(--bbl-accent);
	color: #fff;
	outline: 2px solid var(--bbl-accent);
	outline-offset: 2px;
}

@media (hover: hover) {
	.bbl-app .bbl-riga-x:hover {
		border-color: var(--bbl-accent);
		background: var(--bbl-accent);
		color: #fff;
	}
}

.bbl-app .bbl-riepilogo .bbl-cart-note {
	margin: -4px 0 12px;
	font-size: 13px;
}

.bbl-app .bbl-riepilogo-subtotale {
	margin: 12px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--bbl-line);
	font-size: 17px;
	font-weight: 700;
}

.bbl-app .bbl-riepilogo .bbl-riepilogo-subtotale {
	font-size: 17px;
}

.bbl-app .bbl-riepilogo-nota {
	margin: 4px 0 0;
	color: var(--bbl-muted);
	font-size: 13px;
	line-height: 1.4;
}

.bbl-app .bbl-riepilogo-nota-piccola {
	font-size: 12px;
}

/* L'avviso del minimo: rosa, triangolo rosso, titolo rosso, pulsante che
   riporta ai piatti. */
.bbl-app .bbl-minimo {
	margin: 16px 0 0;
	border-radius: 14px;
	font-size: 15px;
	line-height: 1.4;
}

.bbl-app .bbl-minimo.is-mancante {
	display: grid;
	grid-template-columns: 28px 1fr;
	gap: 6px 12px;
	padding: 16px;
	background: var(--bbl-accent-soft);
}

.bbl-app .bbl-minimo-icona {
	width: 28px;
	height: 28px;
	color: var(--bbl-accent);
}

.bbl-app .bbl-minimo-testo p {
	margin: 0;
}

.bbl-app .bbl-minimo-titolo {
	color: var(--bbl-accent);
	font-size: 17px;
	font-weight: 800;
}

.bbl-app .bbl-minimo .bbl-minimo-azione {
	grid-column: 1 / -1;
	width: 100%;
	margin-top: 8px;
	border-color: var(--bbl-accent);
	background: rgba(255, 255, 255, .45);
	color: var(--bbl-accent);
}

.bbl-app .bbl-minimo .bbl-minimo-azione:hover,
.bbl-app .bbl-minimo .bbl-minimo-azione:focus-visible {
	border-color: var(--bbl-accent);
	background: #fff;
	color: var(--bbl-accent);
}

/* Minimo raggiunto: una riga sola, verde, che non ruba la scena. */
.bbl-app .bbl-minimo.is-raggiunto {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	background: #e7f3ea;
	color: #1d6a37;
	font-weight: 700;
}

.bbl-app .bbl-minimo.is-raggiunto .bbl-minimo-icona {
	width: 20px;
	height: 20px;
	color: #1d6a37;
}

.bbl-app .bbl-consegna-gratuita > span:first-child {
	color: #1d6a37;
	font-weight: 700;
}

/* Il totale da pagare: nero, grande, niente spiegazione sotto. */
.bbl-app .bbl-riepilogo .bbl-riepilogo-totale {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--bbl-line);
	align-items: baseline;
	font-size: 22px;
	font-weight: 800;
}

.bbl-app .bbl-riepilogo .bbl-riepilogo-totale strong:last-child {
	color: var(--bbl-text);
	font-size: 24px;
}

/* Con i conti separati: quanto paga ognuno, consegna compresa. */
.bbl-app .bbl-riepilogo-conti {
	margin: 10px 0 0;
	padding: 10px 0 0;
	border-top: 1px dashed var(--bbl-line);
	list-style: none;
}

.bbl-app .bbl-riepilogo .bbl-riepilogo-conti li {
	font-size: 14px;
	color: var(--bbl-muted);
}

/* «Invia la prenotazione» spento sotto il minimo: sotto si dice perche'. */
.bbl-app .bbl-nav-con-avviso {
	flex-wrap: wrap;
	row-gap: 6px;
}

.bbl-app .bbl-nav-avviso {
	flex: 1 0 100%;
	margin: 0;
	color: var(--bbl-muted);
	font-size: 13px;
	text-align: center;
}

@media (max-width: 600px) {
	.bbl-app .bbl-riepilogo {
		padding: 18px 16px 16px;
	}

	.bbl-app .bbl-riepilogo .bbl-riepilogo-titolo {
		font-size: 24px;
	}
}

/* «Numero di persone: 2» sopra le date, in sala: le date gli stavano
   appiccicate (controllo visivo del 29/09/2026). */
.bbl-app p.bbl-muted + .bbl-dates {
	margin-top: 14px;
}

/* La borsa a contorno del passo 1 (tratto, non riempimento): il colore lo da'
   il testo dell'icona. */
.bbl-app .bbl-info-icona {
	color: var(--bbl-accent);
}

.bbl-app .bbl-info-gratis .bbl-info-icona {
	color: #1d6a37;
}

/* L'invito alla consegna gratuita (30/09/2026, sull'anteprima del titolare):
   riquadro rosa chiaro dentro la sezione «Consegna», icona regalo, messaggio
   grande in rosa lampone, barra di avanzamento con le sue etichette, nota e
   pulsante pieno. Il minimo d'ordine, che e' obbligatorio, ha la precedenza:
   finche' manca, l'invito si fa piu' tenue (is-tenue). */
.bbl-app .bbl-invito {
	margin-top: 12px;
	padding: 18px 16px 16px;
	border-radius: 18px;
	background: #fde8ee;
	color: var(--bbl-text);
}

.bbl-app .bbl-invito-testa {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.bbl-app .bbl-invito-icona {
	flex: 0 0 auto;
	display: inline-flex;
	width: 34px;
	height: 34px;
	color: var(--bbl-accent);
}

.bbl-app .bbl-invito-icona svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.bbl-app .bbl-invito-titolo {
	margin: 0;
	color: var(--bbl-accent);
	font-size: 22px;
	font-weight: 800;
	line-height: 1.2;
}

.bbl-app .bbl-invito-testo {
	margin: 12px 0 0;
	font-size: 16px;
	line-height: 1.4;
}

.bbl-app .bbl-invito-barra {
	height: 12px;
	margin-top: 14px;
	border-radius: 999px;
	background: #f0cfd9;
	overflow: hidden;
}

.bbl-app .bbl-invito-barra > span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--bbl-accent);
}

.bbl-app .bbl-invito-etichette {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 2px 12px;
	margin: 6px 0 0;
	font-size: 14px;
	font-weight: 600;
}

.bbl-app .bbl-invito-nota {
	margin: 6px 0 0;
	color: #555;
	font-size: 13px;
	line-height: 1.4;
}

/* Il testo del pulsante scorre come una frase (non due riquadri affiancati):
   se non ci sta su una riga va a capo tenendo la freccia con l'ultima parola. */
.bbl-app .bbl-btn.bbl-invito-azione {
	display: block;
	width: 100%;
	min-height: 52px;
	margin-top: 14px;
	padding: 13px 14px;
	font-size: 17px;
	line-height: 1.3;
	text-align: center;
}

.bbl-app .bbl-invito-conferma {
	margin: 10px 0 0;
	color: #555;
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
}

/* Col minimo ancora da raggiungere: stesso invito, ma senza il pulsante pieno
   (c'e' gia' quello dell'avviso del minimo) e con un messaggio meno grande. */
.bbl-app .bbl-invito.is-tenue {
	background: #fdf2f5;
}

.bbl-app .bbl-invito.is-tenue .bbl-invito-titolo {
	font-size: 18px;
}

.bbl-app .bbl-invito.is-tenue .bbl-btn.bbl-invito-azione {
	background: transparent;
	color: var(--bbl-accent);
}

/* Soglia raggiunta: conferma verde al posto dell'invito. */
.bbl-app .bbl-invito-fatto {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 12px 0 0;
	padding: 14px;
	border-radius: 14px;
	background: #e9f7ec;
	color: #1d5c30;
	font-size: 15px;
	line-height: 1.4;
}

.bbl-app .bbl-invito-fatto .bbl-invito-icona {
	width: 26px;
	height: 26px;
	color: #1d6a37;
}

.bbl-app .bbl-invito-fatto-testo strong {
	display: block;
	font-size: 17px;
	font-weight: 800;
}

@media (max-width: 600px) {
	.bbl-app .bbl-invito {
		padding: 16px 14px 14px;
	}

	.bbl-app .bbl-invito-titolo {
		font-size: 20px;
	}
}

/* La riga che spiega il coperto dentro l'elenco dei piatti. */
.bbl-app .bbl-item-note {
	display: block;
	color: var(--bbl-muted);
	font-size: 12px;
	line-height: 1.4;
	border-bottom: 0;
	padding-top: 0;
}

/* Chi ha scelto quel piatto, nella pagina stato: compare solo quando le
   persone sono piu' d'una. */
.bbl-app .bbl-item-person {
	display: inline-block;
	margin-top: 2px;
	color: var(--bbl-muted);
	font-size: 12px;
}

/* Note per la cucina (27/09/2026): un pulsante che apre una finestra, con
   un campo per ogni piatto scelto. Il numero rosso dice quante note ci sono
   gia': sono istruzioni per la cucina, non devono passare inosservate. */
.bbl-app .bbl-note-box {
	margin: 18px 0 14px;
}

.bbl-app .bbl-note-toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--bbl-line);
	border-radius: var(--bbl-radius-btn);
	background: var(--bbl-surface);
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	color: var(--bbl-text);
	text-align: left;
	cursor: pointer;
	transition: border-color .15s ease;
}

.bbl-app .bbl-note-toggle:hover,
.bbl-app .bbl-note-toggle:focus-visible {
	border-color: var(--bbl-accent);
}

.bbl-app .bbl-note-caret {
	color: var(--bbl-accent);
	font-size: 17px;
	line-height: 1;
}

.bbl-app .bbl-note-conta {
	margin-left: auto;
	min-width: 24px;
	height: 24px;
	padding: 0 7px;
	border-radius: 999px;
	background: var(--bbl-accent);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 24px;
	text-align: center;
}

.bbl-app .bbl-note-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	background: rgba(0, 0, 0, .58);
}

.bbl-app .bbl-note-dialog {
	width: min(520px, 100%);
	max-height: min(680px, calc(100vh - 36px));
	overflow-y: auto;
	border-radius: var(--bbl-radius);
	background: var(--bbl-surface);
	box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}

.bbl-app .bbl-note-header {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 18px;
	border-bottom: 1px solid var(--bbl-line);
	background: var(--bbl-surface);
}

.bbl-app .bbl-note-header .bbl-kicker,
.bbl-app .bbl-note-header .bbl-h3 {
	margin: 0;
}

/* La «×» in alto a destra, rotonda e rossa come i numeri del menu. */
.bbl-app .bbl-note-close {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin: -6px -6px 0 0;
	padding: 0 0 3px;
	border: 0;
	border-radius: 50%;
	background: var(--bbl-accent);
	color: #fff;
	font: inherit;
	font-size: 28px;
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
}

.bbl-app .bbl-note-close:focus-visible {
	outline: 2px solid var(--bbl-accent);
	outline-offset: 3px;
}

.bbl-app .bbl-note-body {
	padding: 16px 18px 20px;
}

.bbl-app .bbl-note-body > .bbl-muted {
	margin: 0;
}

.bbl-app .bbl-note-piatto {
	margin-top: 16px;
}

.bbl-app .bbl-note-piatto label {
	font-size: 15px;
}

.bbl-app .bbl-note-piatto label em {
	font-weight: 400;
}

/* 16 px: sotto, il telefono ingrandisce la pagina quando si tocca il campo. */
.bbl-app .bbl-note-piatto input {
	font-size: 16px;
}

.bbl-app .bbl-note-vuota {
	margin: 0;
	padding: 14px 16px;
	border-left: 3px solid var(--bbl-accent);
	border-radius: var(--bbl-radius-sm);
	background: var(--bbl-accent-soft);
	font-weight: 600;
}

/* «Nota: ben cotta» sotto il piatto, nel riepilogo e nelle schede persona. */
.bbl-app .bbl-line-note {
	display: block;
	font-size: 13px;
	font-style: normal;
	font-weight: 600;
	color: var(--bbl-accent);
}

/* Il link dentro un avviso d'errore: si deve vedere che si puo' premere,
   senza diventare un pulsante dentro un riquadro rosso. */
.bbl-app .bbl-alert-link {
	display: inline-block;
	margin-top: 4px;
	font-weight: 600;
	text-decoration: underline;
	color: inherit;
}

/* Gli avvisi dei suggerimenti d'indirizzo: vuoto non occupa spazio, cosi' il
   modulo non salta quando compare o sparisce. */
.bbl-app .bbl-nota-indirizzo:empty {
	display: none;
}

.bbl-app .bbl-nota-indirizzo {
	margin: -4px 0 10px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* L'indirizzo di consegna va su righe sue: paese sopra, via e civico sotto.
   Tutto di seguito, su un telefono, andava a capo dove capitava e il civico
   finiva in mezzo alla riga. */
.bbl-app .bbl-indirizzo-riga {
	display: block;
}

/* Il giorno scelto ha solo orari barrati: lo si dice sopra gli orari. */
.bbl-app .bbl-slots-note {
	margin: 0 0 12px;
	padding: 10px 14px;
	border-radius: var(--bbl-radius-sm);
	background: var(--bbl-accent-soft);
	color: var(--bbl-text);
	font-size: 14px;
}


/* ======================================================================
   «Completa l'ordine»: la schermata fra il riepilogo e la conferma
   (30/09/2026, ISTRUZIONI-SONNET-5.5-COMPLETA-ORDINE-INTERMEDIO.md e
   anteprima del titolare). Schede bianche con bordo leggero, rosa lampone per
   le azioni, verde per il vantaggio della consegna gratuita.
   ====================================================================== */

/* «4 Riepilogo → Completa l'ordine → 5 Conferma»: senza rinumerare i passi. */
.bbl-app .bbl-steps-completa {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 12px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
	font-size: 15px;
}

.bbl-app .bbl-steps-completa .bbl-cp-passo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--bbl-muted);
}

/* La freccia sta in fondo a ogni passo tranne l'ultimo: andando a capo su un
   telefono stretto non resta mai una freccia sola all'inizio della riga. */
.bbl-app .bbl-steps-completa .bbl-cp-passo:not(:last-child)::after {
	content: "\2192";
	margin-left: 4px;
	color: var(--bbl-muted);
	font-weight: 400;
}

.bbl-app .bbl-steps-completa .bbl-cp-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #e9e7e3;
	color: var(--bbl-text);
	font-size: 14px;
	font-weight: 700;
}

.bbl-app .bbl-steps-completa .is-done .bbl-cp-num {
	background: #fde8ee;
	color: var(--bbl-accent);
}

.bbl-app .bbl-steps-completa .is-current {
	color: var(--bbl-accent);
	font-weight: 700;
}

.bbl-app .bbl-completa-titolo {
	margin: 0 0 6px;
	font-size: 26px;
	line-height: 1.15;
}

.bbl-app .bbl-completa-titolo:focus {
	outline: none;
}

.bbl-app .bbl-completa-titolo:focus-visible {
	outline: 2px solid var(--bbl-accent);
	outline-offset: 4px;
}

.bbl-app .bbl-completa-intro {
	margin: 0 0 16px;
	color: var(--bbl-text);
	font-size: 16px;
	line-height: 1.4;
}

/* Il minimo che manca: riquadro rosa, barra, nota. */
.bbl-app .bbl-completa-minimo {
	margin: 0 0 22px;
	padding: 18px 18px 16px;
	border-radius: 18px;
	background: #fde8ee;
}

.bbl-app .bbl-completa-minimo-titolo {
	margin: 0 0 4px;
	color: var(--bbl-accent);
	font-family: var(--bbl-heading-font);
	font-size: 25px;
	font-weight: 800;
	line-height: 1.15;
}

.bbl-app .bbl-completa-minimo-testo {
	margin: 0 0 14px;
	font-size: 16px;
}

.bbl-app .bbl-completa-barra-riga {
	display: flex;
	align-items: center;
	gap: 14px;
}

.bbl-app .bbl-completa-barra {
	flex: 1 1 auto;
	height: 12px;
	border-radius: 999px;
	background: #f0cfd9;
	overflow: hidden;
}

.bbl-app .bbl-completa-barra > span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--bbl-accent);
	transition: width .3s ease;
}

.bbl-app .bbl-completa-perc {
	flex: 0 0 auto;
	font-weight: 700;
}

.bbl-app .bbl-completa-minimo-nota {
	margin: 12px 0 0;
	color: var(--bbl-muted);
	font-size: 14px;
	line-height: 1.4;
}

.bbl-app .bbl-completa-raggiunto {
	margin: 0 0 22px;
}

.bbl-app .bbl-completa-domanda {
	margin: 0 0 10px;
	font-size: 18px;
}

/* Una scheda per persona. */
.bbl-app .bbl-completa-persone {
	display: grid;
	gap: 12px;
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}

.bbl-app .bbl-completa-persona {
	margin: 0;
	padding: 14px 14px 14px;
	border: 1px solid var(--bbl-line);
	border-radius: 14px;
	background: var(--bbl-surface);
}

.bbl-app .bbl-completa-persona-testa {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.bbl-app .bbl-completa-persona-nome {
	min-width: 0;
	font-size: 18px;
	overflow-wrap: anywhere;
}

.bbl-app .bbl-completa-persona-totale {
	flex: 0 0 auto;
	font-size: 17px;
	white-space: nowrap;
}

.bbl-app .bbl-completa-persona-comp {
	margin: 2px 0 12px;
	color: var(--bbl-muted);
	font-size: 14px;
}

.bbl-app .bbl-btn.bbl-completa-modifica {
	width: 100%;
	color: var(--bbl-accent);
	border-color: var(--bbl-accent);
	background: transparent;
}

.bbl-app .bbl-btn.bbl-completa-modifica:hover,
.bbl-app .bbl-btn.bbl-completa-modifica:focus-visible {
	background: #fde8ee;
	filter: none;
}

/* Aggiungere una persona: il comando piu' evidente dopo il minimo. */
.bbl-app .bbl-btn.bbl-completa-aggiungi {
	width: 100%;
	min-height: 52px;
	padding-left: 14px;
	padding-right: 14px;
	font-size: 17px;
}

.bbl-app .bbl-completa-aggiungi svg {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
}

.bbl-app .bbl-completa-hint {
	margin: 8px 0 18px;
	color: #3c6b4a;
	font-size: 14px;
	text-align: center;
}

/* La consegna gratuita: un incentivo in piu', in verde, dopo il resto. */
.bbl-app .bbl-completa-regalo {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0 0 18px;
	padding: 14px 16px;
	border-radius: 14px;
	background: #e3f3e6;
	color: #1d5c30;
}

.bbl-app .bbl-completa-regalo-icona {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	color: #1d6a37;
}

.bbl-app .bbl-completa-regalo-icona svg {
	display: block;
	width: 100%;
	height: 100%;
}

.bbl-app .bbl-completa-regalo-titolo {
	margin: 0 0 2px;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.25;
}

.bbl-app .bbl-completa-regalo-testo p {
	margin: 0;
	line-height: 1.4;
}

.bbl-app .bbl-completa .bbl-invito-fatto {
	margin: 0 0 18px;
}

/* Totale attuale: nero, importo in evidenza, nessuna descrizione sotto. */
.bbl-app .bbl-completa-totale {
	margin: 0 0 14px;
	padding-top: 14px;
	border-top: 1px solid var(--bbl-line);
	font-size: 18px;
	font-weight: 700;
}

/* :last-child come la regola del riepilogo che lo colora di rosa: senza, a
   parita' di peso vinceva lei e il totale restava rosa (visto sul sito). */
.bbl-app .bbl-completa-totale strong:last-child {
	color: var(--bbl-text);
	font-size: 26px;
}

/* La barra in basso di «Completa l'ordine»: un pulsante solo, largo quanto
   la barra, con la frase che spiega quando si accende. Si fissa al bordo
   dello schermo come quella degli altri passi. */
.bbl-app .bbl-nav-completa {
	flex-wrap: wrap;
	row-gap: 6px;
}

.bbl-app .bbl-nav-completa .bbl-btn.bbl-completa-continua {
	flex: 1 1 100%;
	width: 100%;
	min-height: 52px;
	padding-left: 14px;
	padding-right: 14px;
	font-size: 17px;
}

.bbl-app .bbl-completa-sblocco {
	color: var(--bbl-muted);
	font-size: 14px;
	text-align: center;
}

.bbl-app .bbl-completa-torna {
	display: block;
	margin: 14px auto 0;
	padding: 8px 12px;
	font-size: 16px;
	font-weight: 600;
}

/* «Rimuovi» sotto una scheda senza piatti: un collegamento discreto, grigio
   come «Togli» nella pagina dei dati, che diventa rosa al passaggio. */
.bbl-app .bbl-completa-rimuovi {
	display: block;
	margin: 6px auto 0;
	padding: 8px 12px;
	font-size: 15px;
	font-weight: 600;
}

@media (max-width: 600px) {
	.bbl-app .bbl-completa-titolo {
		font-size: 24px;
	}

	.bbl-app .bbl-completa-minimo-titolo {
		font-size: 22px;
	}

	/* «4 Riepilogo → Completa l'ordine → 5 Conferma» sta su una riga sola
	   anche a 390 px (il titolare, 30/09/2026: «il punto 5 in alto va a capo»):
	   scritta e cerchi piu' piccoli, niente a capo dentro un passo. */
	.bbl-app .bbl-steps-completa {
		flex-wrap: nowrap;
		gap: 0 5px;
		font-size: 12px;
		white-space: nowrap;
	}

	.bbl-app .bbl-steps-completa .bbl-cp-passo {
		gap: 4px;
	}

	.bbl-app .bbl-steps-completa .bbl-cp-passo:not(:last-child)::after {
		margin-left: 1px;
	}

	.bbl-app .bbl-steps-completa .bbl-cp-num {
		width: 20px;
		height: 20px;
		font-size: 11px;
	}
}

/* Sugli schermi piu' stretti ancora (360 px e meno) la scritta scende un
   poco, e sotto i 345 px puo' andare a capo invece di uscire dalla pagina. */
@media (max-width: 380px) {
	.bbl-app .bbl-steps-completa {
		font-size: 11px;
		gap: 0 3px;
	}

	.bbl-app .bbl-steps-completa .bbl-cp-num {
		width: 18px;
		height: 18px;
		font-size: 10px;
	}
}

@media (max-width: 345px) {
	.bbl-app .bbl-steps-completa {
		flex-wrap: wrap;
		gap: 4px 6px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bbl-app .bbl-completa-barra > span {
		transition: none;
	}
}

/* --- Passo «I tuoi dati» a parti guidate (1.46.10) ------------------------
   Ogni parte ha un titolo grande con il numero e una riga che dice a cosa
   serve: il cliente medio non legge ogni campo, e cosi' non perde gli avvisi
   su WhatsApp e i conti separati. */
.bbl-app .bbl-dati-intro {
	margin: -4px 0 18px;
	font-size: 15px;
}

.bbl-app .bbl-sez {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 18px 18px 20px;
	background: var(--bbl-surface);
	border: 1px solid var(--bbl-line-soft);
	border-radius: var(--bbl-radius);
	box-shadow: var(--bbl-shadow-sm);
}

.bbl-app .bbl-split + .bbl-form,
.bbl-app .bbl-sez + .bbl-form {
	margin-top: 16px;
}

.bbl-app .bbl-sez-titolo {
	display: flex;
	align-items: flex-start;
	flex-wrap: nowrap;
	gap: 10px;
	margin: 0;
	font-family: var(--bbl-heading-font);
	font-size: 19px;
	line-height: 1.25;
	color: var(--bbl-text);
}

.bbl-app .bbl-sez-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--bbl-accent);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
}

/* Nome della parte ed etichetta «facoltativo» vanno a capo insieme, accanto
   al numero: sul telefono l'etichetta finiva sotto il numero (1.46.21). I 3 px
   in alto allineano la prima riga al centro del cerchio. */
.bbl-app .bbl-sez-testa {
	display: flex;
	flex: 1 1 0;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	min-width: 0;
	padding-top: 3px;
}

.bbl-app .bbl-sez-opz {
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--bbl-accent-soft);
	color: var(--bbl-muted);
	font-family: var(--bbl-font);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
}

.bbl-app .bbl-sez-guida {
	margin: -6px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--bbl-muted);
}

/* Dentro una parte i campi non hanno altre schede attorno. */
.bbl-app .bbl-sez .bbl-split-people {
	margin: 0;
	padding: 0;
	border: 0;
	box-shadow: none;
	background: transparent;
}

.bbl-app .bbl-sez .bbl-split {
	margin: 0;
}

/* Il titolo della parte e' gia' sopra: la legenda resta per chi legge lo schermo. */
.bbl-app .bbl-sez .bbl-split-people legend {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Avvisi su WhatsApp: la parte che deve vedersi di piu'. */
.bbl-app .bbl-sez-wa {
	border-color: var(--bbl-accent);
	box-shadow: 0 0 0 3px var(--bbl-accent-ring);
}

.bbl-app .bbl-benefici {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 6px;
	font-size: 14px;
}

.bbl-app .bbl-benefici li {
	position: relative;
	margin: 0;
	padding-left: 24px;
}

.bbl-app .bbl-benefici li::before {
	content: "";
	position: absolute;
	left: 3px;
	top: .35em;
	width: 6px;
	height: 11px;
	border: solid var(--bbl-accent);
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg);
}

.bbl-app .bbl-check-evidenza {
	padding: 14px 16px;
	background: var(--bbl-accent-soft);
	border: 1px solid var(--bbl-line-soft);
	border-radius: var(--bbl-radius-sm);
	font-size: 15px;
	font-weight: 700;
}

/* Cosa succede dopo l'invio: si aggiorna mentre il cliente scrive. */
.bbl-app .bbl-avvisi {
	margin: 0;
	padding: 16px 18px;
	background: var(--bbl-accent-soft);
	border: 1px dashed var(--bbl-accent);
	border-radius: var(--bbl-radius);
}

.bbl-app .bbl-avvisi-titolo {
	margin: 0 0 10px;
	font-size: 16px;
}

.bbl-app .bbl-avvisi-lista {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
}

.bbl-app .bbl-avviso {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-size: 14px;
	line-height: 1.45;
}

.bbl-app .bbl-avviso-icona {
	position: relative;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--bbl-line);
}

.bbl-app .bbl-avviso.is-ok .bbl-avviso-icona {
	background: #2e7d32;
}

.bbl-app .bbl-avviso.is-ok .bbl-avviso-icona::after {
	content: "";
	position: absolute;
	left: 7px;
	top: 3px;
	width: 4px;
	height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.bbl-app .bbl-avviso.is-manca .bbl-avviso-icona {
	background: var(--bbl-accent);
}

.bbl-app .bbl-avviso.is-manca .bbl-avviso-icona::after {
	content: "!";
	position: absolute;
	inset: 0;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
}

.bbl-app .bbl-avviso.is-spento .bbl-avviso-testo {
	color: var(--bbl-muted);
}

/* «Attivali»: un collegamento sotto la frase, non un pulsante pieno (il tema
   colora i pulsanti e lo stringeva in due righe). */
.bbl-app .bbl-avviso {
	flex-wrap: wrap;
}

/* La frase prende lo spazio che resta accanto all'icona e va a capo da sola;
   «Attivali» va sotto, su una riga sua. */
.bbl-app .bbl-avviso .bbl-avviso-testo {
	flex: 1 1 0;
	min-width: 0;
}

.bbl-app .bbl-avviso .bbl-avviso-azione {
	flex: 0 0 100%;
	width: auto;
	min-height: 0;
	margin: 0 0 0 30px;
	padding: 6px 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--bbl-accent);
	font: inherit;
	font-weight: 700;
	letter-spacing: normal;
	text-align: left;
	text-decoration: underline;
	text-transform: none;
	cursor: pointer;
}

@media (max-width: 480px) {
	.bbl-app .bbl-sez {
		padding: 16px 14px 18px;
	}

	.bbl-app .bbl-sez-titolo {
		font-size: 18px;
	}
}