/* Selettore Paese/lingua Laminam.
   Valori presi dal prototipo (remix4): misure, raggi, colori e tempi sono
   gli stessi, riscritti sotto il prefisso .lcs- per non incrociare mai le
   classi del tema. */

html.lcs-ready .panel._language { display: none !important; }
/* `.header__lang` non si nasconde piu': il JS gli mette addosso la classe
   `lcs-pill` e ne sostituisce il contenuto, cosi' resta dentro le regole
   di colore del tema (bianco sull'hero, blu quando l'header si schiarisce). */
html.lcs-ready .header__lang.lcs-pill {
	margin-left: 0;          /* il tema ne metteva fino a 48px */
	text-transform: none;    /* il tema lo scriveva tutto maiuscolo */
}
/* Il tema rimpicciolisce le svg dentro .header__lang: qui servono le
   misure della pill, con un selettore piu' specifico del suo. */
html.lcs-ready .lcs-pill .lcs-pill__ic svg { width: 20px; height: 20px; margin: 0; }
html.lcs-ready .lcs-pill .lcs-pill__c { width: 12px; height: 12px; margin: 0; }

.lcs {
	--lcs-brand: #003b5c;
	--lcs-brand-soft: #E4ECF1;
	--lcs-surface: #FFFFFF;
	--lcs-surface2: #F4F6F8;
	--lcs-ink: #003b5c;
	--lcs-muted: #566570;
	--lcs-line: #DAE0E5;
	--lcs-brass: #8A6B2C;
	--lcs-brass-soft: #F1E9D6;
	--lcs-glass: rgba(255,255,255,.95);
	--lcs-shadow-lg: 0 18px 50px rgba(0,40,60,.22);
	--lcs-font: 'Inter', system-ui, -apple-system, sans-serif;
	--lcs-serif: 'Cormorant Garamond', Georgia, serif;
	color: var(--lcs-ink);
}
.lcs[hidden] { display: none; }
html.lcs-locked, html.lcs-locked body { overflow: hidden; }

.lcs, .lcs *, .lcs *::before, .lcs *::after { box-sizing: border-box; }
/* Azzeramento con `:where()`: ha specificita' zero, quindi non scavalca
   le regole dei singoli comandi qui sotto. Scritto come `.lcs button` era
   piu' specifico di `.lcs-btn--stay` e gli portava via bordo e sfondo —
   il pulsante "Rimani su..." restava senza cornice e la X di chiusura
   senza il cerchio grigio. */
.lcs :where(button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.lcs :where(a) { color: inherit; text-decoration: none; }
.lcs :focus-visible { outline: 3px solid #1257B8; outline-offset: 2px; border-radius: 6px; }

@keyframes lcs-popdown { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes lcs-pop { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes lcs-sheetup { from { transform: translateY(100%); } to { transform: none; } }

/* ============================ pill in header ============================
   A riposo un cerchio da 44px col globo; al passaggio del mouse (o col
   fuoco, o a pannello aperto) si allarga e mostra mercato + lingua.
   L'apertura e' fluida perche' la colonna dell'etichetta passa da 0fr a
   1fr: si ferma sulla larghezza naturale del testo.
   I colori vengono da currentColor, cosi' la pill sta bene sia bianca
   sopra l'hero sia scura su fondo chiaro. */
.lcs-pill {
	display: inline-flex; align-items: center; height: 44px; padding: 0; border-radius: 22px;
	color: inherit; font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: .02em;
	white-space: nowrap; cursor: pointer;
	background: rgba(127,127,127,.18);
	background: color-mix(in srgb, currentColor 18%, transparent);
	border: 1px solid currentColor;
	border-color: color-mix(in srgb, currentColor 34%, transparent);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	transition: background .28s ease, border-color .28s ease;
}
.lcs-pill:hover { background: color-mix(in srgb, currentColor 30%, transparent); }
.lcs-pill[aria-expanded="true"] {
	background: color-mix(in srgb, currentColor 34%, transparent);
	border-color: color-mix(in srgb, currentColor 62%, transparent);
}
/* Chiuso dev'essere un cerchio esatto: il contenitore dell'icona e' un
   quadrato di 42px = 44 di altezza meno i due bordi. */
.lcs-pill__ic { width: 42px; height: 42px; flex: none; display: grid; place-items: center; }
.lcs-pill__ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lcs-pill__lbl { display: grid; grid-template-columns: 0fr; transition: grid-template-columns .42s cubic-bezier(.2,.8,.2,1); }
.lcs-pill__lbl > span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; opacity: 0; transition: opacity .24s ease; }
/* Lo spazio a destra sta DENTRO il contenuto ritagliato: un padding
   terrebbe larga la traccia anche a 0fr e la pill chiusa sarebbe un'ellisse. */
.lcs-pill__lbl > span::after { content: ''; flex: none; width: 16px; }
.lcs-pill:hover .lcs-pill__lbl,
.lcs-pill:focus-visible .lcs-pill__lbl,
.lcs-pill[aria-expanded="true"] .lcs-pill__lbl { grid-template-columns: 1fr; }
.lcs-pill:hover .lcs-pill__lbl > span,
.lcs-pill:focus-visible .lcs-pill__lbl > span,
.lcs-pill[aria-expanded="true"] .lcs-pill__lbl > span { opacity: 1; }
.lcs-pill__ll { flex: none; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .04em;
	background: color-mix(in srgb, currentColor 26%, transparent); border-radius: 6px; padding: 3px 6px; }
.lcs-pill__c { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; opacity: .8; transition: transform .25s; }
.lcs-pill[aria-expanded="true"] .lcs-pill__c { transform: rotate(180deg); }
.lcs-pill.is-hint { position: relative; }
.lcs-pill.is-hint::after { content: ''; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px;
	border-radius: 50%; background: #1257B8; box-shadow: 0 0 0 2px rgba(255,255,255,.6); }
@media (max-width: 720px) { .lcs-pill { display: none; } }

/* Nel prototipo la lente e il globo sono due cerchi identici affiancati.
   Sul tema la lente e' un'icona nuda, e la pill accanto sembrava un corpo
   estraneo: qui le si da' la stessa forma. Vale solo con `lcs-ready`,
   quindi si annulla da sola spegnendo il selettore. */
@media (min-width: 721px) {
	html.lcs-ready .header__service .search__btn {
		width: 44px; height: 44px; border-radius: 50%;
		display: inline-flex; align-items: center; justify-content: center;
		background: rgba(127,127,127,.18);
		background: color-mix(in srgb, currentColor 18%, transparent);
		border: 1px solid currentColor;
		border-color: color-mix(in srgb, currentColor 34%, transparent);
		-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
		transition: background .28s ease, border-color .28s ease;
	}
	html.lcs-ready .header__service .search__btn:hover {
		background: color-mix(in srgb, currentColor 30%, transparent);
	}
	/* Il tema lascia uno scarto orizzontale dentro il pulsante della
	   lente (misurato: 4px a sinistra del centro). Fuori dal cerchio non
	   si notava; dentro si', quindi qui l'icona si centra davvero. */
	html.lcs-ready .header__service .search__btn { padding: 0; place-items: center; }
	html.lcs-ready .header__service .search__btn svg {
		width: 19px; height: 19px; margin: 0; display: block;
	}
	/* stesso respiro fra i due comandi del prototipo */
	html.lcs-ready .header__service { gap: 10px; align-items: center; }
}

/* ============================ suggerimento ============================ */
.lcs-sugg {
	position: fixed; z-index: 100000; width: 420px; max-width: calc(100vw - 24px);
	font-family: var(--lcs-font);
	background: var(--lcs-glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
	border: 1px solid rgba(255,255,255,.65); border-radius: 16px; box-shadow: var(--lcs-shadow-lg);
	padding: 15px 16px; animation: lcs-popdown .42s cubic-bezier(.2,.8,.2,1);
}
.lcs-sugg[hidden] { display: none; }
.lcs-sugg::before { content: ''; position: absolute; top: -7px; right: var(--lcs-arrow, 26px);
	width: 14px; height: 14px; background: var(--lcs-glass);
	border-left: 1px solid rgba(255,255,255,.65); border-top: 1px solid rgba(255,255,255,.65);
	transform: rotate(45deg); border-radius: 2px; }
.lcs-sugg__row { display: flex; gap: 11px; align-items: center; margin-bottom: 13px; }
.lcs-sugg__ico { width: 36px; height: 36px; border-radius: 50%; flex: none; display: flex;
	align-items: center; justify-content: center; background: var(--lcs-brand-soft); }
.lcs-sugg__ico svg { width: 19px; height: 19px; stroke: var(--lcs-brand); fill: none; stroke-width: 1.7; }
.lcs-sugg__tx { flex: 1; min-width: 0; }
.lcs-sugg__tx b { display: block; font-size: 14.5px; font-weight: 600; color: var(--lcs-ink); line-height: 1.35; }
.lcs-sugg__acts { display: flex; align-items: stretch; gap: 9px; }
.lcs-sugg__acts > * { flex: 1 1 0; min-width: 0; }
/* Secondaria a sinistra, primaria blu a destra. Le etichette sono lunghe
   ("Rimani su Laminam International"): meglio andare a capo che troncare
   il nome del mercato. */
.lcs-btn--stay { display: inline-flex; align-items: center; justify-content: center; text-align: center;
	min-height: 48px; padding: 8px 13px; border-radius: 24px; background: transparent;
	border: 1px solid var(--lcs-line); color: var(--lcs-ink); font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.lcs-btn--stay:hover { border-color: var(--lcs-brand); background: var(--lcs-surface2); }
a.lcs-btn--go, .lcs-btn--go { display: inline-flex; align-items: center; justify-content: center; gap: 7px; text-align: center;
	min-height: 48px; padding: 8px 13px; border-radius: 24px; background: var(--lcs-brand); color: #fff;
	font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.lcs-btn--go:hover { filter: brightness(1.1); }
.lcs-btn--go svg { width: 14px; height: 14px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lcs-btn__lang { flex: none; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .04em;
	background: rgba(255,255,255,.24); border-radius: 6px; padding: 2px 5px; }
.lcs-btn__l { min-width: 0; }

/* ============================= menu breve ============================= */
.lcs-menu {
	position: fixed; z-index: 100001; width: 264px; max-width: calc(100vw - 24px);
	font-family: var(--lcs-font);
	background: var(--lcs-glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
	border: 1px solid rgba(255,255,255,.65); border-radius: 16px; box-shadow: var(--lcs-shadow-lg);
	padding: 10px; animation: lcs-popdown .3s cubic-bezier(.2,.8,.2,1);
}
.lcs-menu[hidden] { display: none; }
.lcs-menu::before { content: ''; position: absolute; top: -7px; right: var(--lcs-arrow, 26px);
	width: 14px; height: 14px; background: var(--lcs-glass);
	border-left: 1px solid rgba(255,255,255,.65); border-top: 1px solid rgba(255,255,255,.65);
	transform: rotate(45deg); border-radius: 2px; }
.lcs-menu__eb { display: block; font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
	font-weight: 700; color: var(--lcs-brass); padding: 4px 10px 9px; }
a.lcs-menu__row, .lcs-menu__row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px;
	padding: 0 12px; border-radius: 10px; font-size: 14px; font-weight: 500; text-align: left; }
.lcs-menu__row:hover { background: var(--lcs-surface2); }
.lcs-menu__row i { margin-left: auto; font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--lcs-brass); }
a.lcs-menu__row.is-on, .lcs-menu__row.is-on, .lcs-menu__row.is-on:hover { background: var(--lcs-brand); color: #fff; font-weight: 600; cursor: default; }
.lcs-menu__row.is-on i { color: rgba(255,255,255,.75); }
.lcs-menu__hr { height: 1px; background: var(--lcs-line); margin: 8px 6px; }
.lcs-menu__all { font-size: 13.5px; font-weight: 600; color: var(--lcs-brand); }
.lcs-menu__all svg { margin-left: auto; width: 14px; height: 14px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ============================== selettore ============================== */
.lcs-scrim { position: fixed; inset: 0; z-index: 100002; background: rgba(2,18,26,.48);
	-webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
	display: flex; align-items: center; justify-content: center;
	padding: clamp(12px,3vh,32px) clamp(12px,3vw,40px); }
.lcs-scrim[hidden] { display: none; }

.lcs-picker { position: relative; width: min(1180px, 92vw); max-height: calc(100vh - 40px);
	display: flex; flex-direction: column; font-family: var(--lcs-font);
	background: var(--lcs-surface); box-shadow: var(--lcs-shadow-lg); border-radius: 18px;
	overflow: hidden; animation: lcs-pop .45s cubic-bezier(.2,.8,.2,1); }

.lcs-picker__head { position: relative; flex: none; padding: 24px clamp(18px,3vw,36px) 18px; border-bottom: 1px solid var(--lcs-line); }
.lcs-picker__grab { display: none; }
.lcs-picker__eb { display: block; font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
	font-weight: 600; color: var(--lcs-muted); margin-bottom: 8px; }
.lcs-picker__title { font-family: var(--lcs-serif); font-size: clamp(24px,3.4vw,36px);
	font-weight: 600; line-height: 1.04; max-width: 70%; margin: 0; color: var(--lcs-ink); }
.lcs-picker__close { position: absolute; top: 18px; right: 16px; width: 44px; height: 44px;
	border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--lcs-surface2); }
.lcs-picker__close:hover { background: var(--lcs-brand-soft); }
.lcs-picker__close svg { width: 16px; height: 16px; stroke: var(--lcs-ink); fill: none; stroke-width: 1.8; stroke-linecap: round; }
.lcs-picker__tools { margin-top: 16px; }
.lcs-picker__search { display: flex; align-items: center; gap: 11px; width: 100%; max-width: 460px;
	height: 50px; padding: 0 16px; border-radius: 25px; background: var(--lcs-surface2); border: 1.5px solid var(--lcs-line); }
.lcs-picker__search:focus-within { border-color: var(--lcs-brand); box-shadow: 0 0 0 3px rgba(0,59,92,.16); }
.lcs-picker__search svg { width: 18px; height: 18px; stroke: var(--lcs-muted); fill: none; stroke-width: 1.8; flex: none; }
.lcs-picker__search input { flex: 1; min-width: 0; border: none; background: none; outline: none; font: inherit; font-size: 16px; color: var(--lcs-ink); }
/* Il fuoco della ricerca lo mostra il CONTENITORE (bordo brand + alone),
   come nel prototipo. L'anello azzurro generale, qui dentro, disegnava un
   rettangolo dentro la pillola. Serve un selettore piu' specifico di
   `.lcs :focus-visible`, altrimenti quello vince. */
.lcs .lcs-picker__search input:focus,
.lcs .lcs-picker__search input:focus-visible { outline: none; box-shadow: none; }

.lcs-picker__body { position: relative; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
	overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0 clamp(18px,3vw,36px) 22px; }

/* Una colonna per macro-area su desktop. */
.lcs-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); gap: 0 28px; align-content: start; }

.lcs-region h3 { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 9px;
	font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lcs-brass);
	margin: 0 0 8px; padding: 18px 0 9px; background: var(--lcs-surface); border-bottom: 1px solid var(--lcs-line); }
.lcs-region h3 .rc { width: 7px; height: 7px; border-radius: 50%; background: var(--lcs-brass); flex: none; }
.lcs-region h3 .rn { margin-left: auto; font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--lcs-muted); text-transform: none; }
.lcs-region ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.lcs-region[hidden] { display: none; }
.lcs-region li[hidden] { display: none; }

a.lcs-cty, .lcs-cty { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px;
	padding: 8px 10px; border-radius: 10px; text-align: left; transition: background .12s; }
.lcs-cty:hover { background: var(--lcs-surface2); }
.lcs-cty.is-detected { background: var(--lcs-brand-soft); }
.lcs-cty__n { flex: 1; min-width: 0; }
.lcs-cty__n b { display: block; font-size: 14.5px; font-weight: 500; color: var(--lcs-ink);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lcs-cty__n small { display: block; font-size: 11.5px; color: var(--lcs-muted); margin-top: 1px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lcs-cty__l { flex: none; font-size: 11px; font-weight: 700; letter-spacing: .03em;
	color: var(--lcs-brass); background: var(--lcs-brass-soft); border-radius: 7px; padding: 4px 8px; }
.lcs-cty__go { width: 15px; height: 15px; flex: none; stroke: var(--lcs-brand); fill: none;
	stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .28; transition: .14s; }
.lcs-cty:hover .lcs-cty__go { opacity: .85; }

.lcs-empty { padding: 26px 0 8px; max-width: 620px; margin: 0 auto; }
.lcs-empty[hidden] { display: none; }
.lcs-empty b { display: block; font-size: 18px; font-weight: 600; color: var(--lcs-ink); margin-bottom: 6px; }
.lcs-empty p { font-size: 13.5px; color: var(--lcs-muted); line-height: 1.55; margin: 0; }

/* Barra fissa in fondo: International col colore primario, cosi' il
   ripiego non sembra la coda dell'elenco. La scritta E' il comando; le
   lingue le stanno accanto per chi vuole sceglierla. */
.lcs-foot { color: #fff; flex: none; border-top: 1px solid var(--lcs-brand); background: var(--lcs-brand); }
.lcs-footbar { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; padding: 14px clamp(18px,3vw,36px); }
.lcs-ft-q { font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,.74); line-height: 1.4; }
.lcs-ft-row { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; width: 100%; }
a.lcs-ftgo, .lcs-ftgo { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; color: #fff; cursor: pointer; }
.lcs-ftgo svg { width: 15px; height: 15px; flex: none; stroke: currentColor; fill: none; stroke-width: 2;
	stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
.lcs-ftgo:hover svg { transform: translateX(4px); }
.lcs-flangs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Stesso raggio dei badge di lingua dell'elenco e stesse proporzioni:
   quelli sono ~31x21, quindi qui 53x36. */
a.lcs-flg, .lcs-flg { min-width: 53px; height: 36px; padding: 0 16px; border-radius: 7px;
	background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.42); color: #fff;
	font-size: 13px; font-weight: 700; letter-spacing: .03em; display: inline-flex;
	align-items: center; justify-content: center; transition: background .18s ease, border-color .18s ease, color .18s ease; }
a.lcs-flg:hover, .lcs-flg:hover { background: #fff; border-color: #fff; color: var(--lcs-brand); }
.lcs-foot :focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* =============================== mobile =============================== */
/* Tablet: quattro colonne non ci stanno, una sola sprecherebbe meta'
   schermo. Due. */
@media (max-width: 1024px) {
	.lcs-grid { grid-auto-flow: row; grid-auto-columns: auto;
		grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
}
@media (max-width: 720px) {
	.lcs-grid { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 720px) {
	.lcs-sugg, .lcs-menu { left: 12px; right: 12px; width: auto; bottom: 12px; top: auto !important; }
	.lcs-sugg::before, .lcs-menu::before { display: none; }
	.lcs-sugg__acts { flex-direction: column-reverse; }
	.lcs-scrim { align-items: flex-end; padding: 0; }
	.lcs-picker { width: 100%; max-width: none; max-height: 92vh; border-radius: 20px 20px 0 0;
		animation: lcs-sheetup .38s cubic-bezier(.2,.8,.2,1); }
	.lcs-picker__head { padding: 10px 16px 16px; }
	.lcs-picker__grab { display: block; width: 42px; height: 4px; border-radius: 2px;
		background: var(--lcs-line); margin: 0 auto 12px; }
	.lcs-picker__eb { display: none; }
	.lcs-picker__title { font-size: 22px; max-width: calc(100% - 54px); }
	.lcs-picker__close { top: 24px; right: 12px; width: 42px; height: 42px; }
	.lcs-picker__tools { margin-top: 14px; }
	.lcs-picker__search { max-width: none; height: 48px; }
	.lcs-picker__body { padding: 0 12px calc(24px + env(safe-area-inset-bottom,0px)); }
	.lcs-cty { min-height: 54px; padding: 9px 10px; }
	.lcs-cty__n b { font-size: 15.5px; }
	.lcs-footbar { gap: 8px; padding: 11px 12px calc(12px + env(safe-area-inset-bottom,0px)); }
	.lcs-flangs { width: 100%; gap: 6px; }
	/* Tre per riga invece di sei schiacciate su una: con 6 lingue l'ultima
	   finiva sotto il widget della chat, in basso a destra. */
	.lcs-flg { flex: 1 1 calc(33.333% - 6px); min-width: 0; padding: 0 8px; height: 46px; }
	/* Spazio sotto le lingue: il pulsante flottante della chat occupa una
	   fascia di circa 80px nell'angolo in basso a destra. Il JS prova a
	   nasconderlo mentre il selettore e' aperto, ma e' iniettato da uno
	   script esterno e puo' sfuggire: questo margine garantisce comunque
	   che l'ultima lingua resti cliccabile. */
	.lcs-footbar { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
	.lcs-grid, .lcs-empty, .lcs-footbar { width: 100%; max-width: 744px; margin-left: auto; margin-right: auto; }
}
@media (prefers-reduced-motion: reduce) {
	.lcs *, .lcs-pill { animation: none !important; transition: none !important; }
}

/* ============================== barra Demo ==============================
   La vede solo chi amministra la rete (il markup non viene nemmeno
   stampato per gli altri). Serve a mostrare il selettore senza doversi
   spostare di Paese. Misure e forme prese dal prototipo. */
.lcs-demo {
	position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 100003;
	display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center;
	max-width: calc(100vw - 20px); padding: 10px 16px; border-radius: 16px;
	font-family: var(--lcs-font); font-size: 13px;
	background: var(--lcs-glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
	border: 1px solid var(--lcs-line); box-shadow: var(--lcs-shadow-lg);
}
.lcs-demo__t { display: flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase; color: var(--lcs-muted); padding: 6px 2px; }
.lcs-demo__t .pd { width: 8px; height: 8px; border-radius: 50%; background: var(--lcs-brass); }
.lcs-demo__t .pc { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2.2;
	stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.lcs-demo.is-closed .lcs-demo__t .pc { transform: rotate(180deg); }
.lcs-demo__f { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
.lcs-demo.is-closed .lcs-demo__f { display: none; }
.lcs-demo label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600; color: var(--lcs-muted); }
.lcs-demo select { height: 38px; border-radius: 10px; border: 1px solid var(--lcs-line);
	background: var(--lcs-surface); padding: 0 28px 0 11px; font-size: 13px; font-weight: 600;
	color: var(--lcs-ink); appearance: none; -webkit-appearance: none; max-width: 260px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23566570' stroke-width='2'><path d='M3 6l5 5 5-5'/></svg>");
	background-repeat: no-repeat; background-position: right 9px center; background-size: 12px; }
/* col selettore aperto la barra si sposta in alto: non copre l'elenco */
html.lcs-locked .lcs-demo { top: 8px; left: 8px; bottom: auto; transform: none; }
@media (max-width: 720px) {
	.lcs-demo { flex-direction: column; gap: 8px; padding: 8px 12px; bottom: max(10px, env(safe-area-inset-bottom, 0px)); }
	.lcs-demo__f { flex-direction: column; gap: 10px; width: 100%; }
	.lcs-demo label, .lcs-demo select { width: 100%; max-width: none; }
	.lcs-demo select { height: 40px; font-size: 16px; } /* 16px: evita lo zoom automatico su iOS */
}