/*
 * Vik Base — vikbooking-overrides.css
 *
 * Stili per l'output HTML generato dal plugin VikBooking (non controllato dal tema).
 * File separato da theme.css: gli aggiornamenti del plugin non toccano questo file.
 * I selettori corrispondono alle classi reali dei template di VikBooking
 * (site/views/vikbooking, roomslist, booking, roomdetails).
 */

:root {
	--vbo-color-error: #b3261e;

	/*
	 * VikBooking espone i colori dei propri pulsanti/elementi tramite queste
	 * custom property (usate es. da .vbsearchinputmodhors e .vbmodroomsview > a
	 * con `color: var(--vbo-pref-fontcolor) !important`). Le ridefiniamo qui
	 * per allinearle alla palette del tema, evitando di dover ricorrere a
	 * !important nel resto del file.
	 *
	 * ATTENZIONE — questa ridefinizione qui in ":root" è per lo più
	 * INERTE lato "Preferred Colors" reale: VikBooking stampa un secondo
	 * blocco ":root" con i colori impostati dall'admin (o i suoi default
	 * blu "#2282bd"/"#1890ce" se l'admin non ha mai configurato nulla —
	 * "getPreferredColors()" in site/helpers/lib.vikbooking.php ricade
	 * comunque su quei default, l'array non è mai vuoto) in un <style>
	 * inline stampato DOPO il link di questo foglio in <head> — a parità
	 * di specificità con ":root" (0,1,0 in entrambi i casi), chi carica
	 * dopo vince (verificato in pagina, non solo nei sorgenti). Questa
	 * ridefinizione qui resta quindi silenziosamente sovrascritta per
	 * qualunque consumer che legga le variabili DOPO la cascata (cioè
	 * quasi tutti) — da qui in poi nel file, ogni volta che serve
	 * davvero il colore del tema al posto del blu, si ridefinisce il
	 * COLORE RISOLTO sul selettore consumer stesso (es. ".vbo-pref-
	 * color-text", subito sotto), mai la variabile. Lasciata qui non
	 * tanto perché efficace quanto perché innocua, e perché le variabili
	 * derivate "-op*" sotto (le uniche NON reimpostate dal blocco admin,
	 * quindi qui la ridefinizione vince per davvero) dipendono comunque
	 * da questi stessi nomi per coerenza di lettura.
	 */
	--vbo-pref-bgcolor: var(--wp--preset--color--accent);
	--vbo-pref-bgcolorhov: var(--wp--preset--color--accent-dark);
	--vbo-pref-fontcolor: var(--wp--preset--color--white);
	--vbo-pref-fontcolorhov: var(--wp--preset--color--white);

	/*
	 * Varianti trasparenti dei "Preferred Colors" (usate per sfondi/bordi
	 * leggeri in varie view, es. ".vbo-tm-calendar-nav-btn" nel
	 * gestionale prenotazioni) — a differenza delle 4 variabili base
	 * sopra, queste sono dichiarate UNA SOLA VOLTA nel CSS statico del
	 * plugin (vikbooking_styles.css, non nel blocco admin dinamico che
	 * arriva dopo): nessun ":root" successivo le ridefinisce, quindi la
	 * ridefinizione qui vince per davvero (stesso principio di
	 * specificità/ordine sopra, ma senza un terzo blocco a batterci).
	 * Genuina rete di sicurezza centralizzata, non uno dei tanti fix
	 * puntuali selettore-per-selettore nel resto del file.
	 */
	--vbo-pref-bgcolor-op05: color-mix(in srgb, var(--wp--preset--color--accent) 5%, transparent);
	--vbo-pref-bgcolor-op10: color-mix(in srgb, var(--wp--preset--color--accent) 10%, transparent);
	--vbo-pref-bgcolor-op20: color-mix(in srgb, var(--wp--preset--color--accent) 20%, transparent);
	--vbo-pref-bgcolor-op35: color-mix(in srgb, var(--wp--preset--color--accent) 35%, transparent);
	--vbo-pref-bgcolor-op50: color-mix(in srgb, var(--wp--preset--color--accent) 50%, transparent);
	--vbo-pref-bgcolor-op75: color-mix(in srgb, var(--wp--preset--color--accent) 75%, transparent);

	/*
	 * Varianti trasparenti dell'accento per badge/chip/focus-ring
	 * scritti da QUESTO file (non da VikBooking) — es. badge di stato
	 * prenotazione, chip "carat" delle amenities, anelli di focus sui
	 * campi form. Deliberatamente NON le "--vbo-pref-bgcolor-opXX" sopra:
	 * quelle esistono per allineare alla palette del tema le variabili
	 * che il CSS statico del plugin (vikbooking_styles.css) legge già di
	 * suo altrove: riusarle qui accoppierebbe selettori nostri a nomi di
	 * variabile la cui unica ragion d'essere è quel contratto col
	 * plugin, e che potrebbero cambiare a un aggiornamento del plugin
	 * senza alcun motivo legato a QUESTI usi.
	 */
	--vik-accent-08: color-mix(in srgb, var(--wp--preset--color--accent) 8%, transparent);
	--vik-accent-12: color-mix(in srgb, var(--wp--preset--color--accent) 12%, transparent);
	--vik-accent-15: color-mix(in srgb, var(--wp--preset--color--accent) 15%, transparent);
	--vik-accent-35: color-mix(in srgb, var(--wp--preset--color--accent) 35%, transparent);
	--vik-accent-45: color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
}

/* -----------------------------------------------------------
   Elementi condivisi tra le view (bottoni, prezzo)
   ----------------------------------------------------------- */
.vbo-pref-color-btn,
.vbselectordiv .btn,
.vbo-precheckin-uploadfile {
	display: inline-block;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: var(--vik-radius);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.vbo-pref-color-btn:hover,
.vbselectordiv .btn:hover,
.vbo-precheckin-uploadfile:hover {
	background-color: var(--wp--preset--color--accent-dark);
	border-color: var(--wp--preset--color--accent-dark);
	color: var(--wp--preset--color--white);
}

.vbo-pref-color-text,
.room_cost,
.vbo_price {
	color: var(--wp--preset--color--accent);
}

/*
 * Rete di sicurezza centralizzata per "Preferred Colors" — VikBooking
 * espone il colore configurato da admin (blu di default, "#2282bd"/
 * "#1890ce", se mai impostato) attraverso 7 classi "marcatore" riusate
 * senza scoping in tutte le view del plugin (site/resources/
 * vikbooking_styles.css: ".vbo-pref-color-btn"/".-text" già sopra,
 * ".-btn-secondary"/".-element"/".-background"/".-bordercolor"/
 * ".-bordertext" qui): non un meccanismo diverso da view a view, sempre
 * la stessa manciata di classi. Intercettarle TUTTE qui in un solo giro
 * copre quindi ogni punto del flusso che le usa, comparso o non ancora
 * comparso in pagina — non serve continuare a correggerle una per una
 * ogni volta che il blu emerge in un componente diverso.
 *
 * Non è però l'unico meccanismo nel plugin: esistono anche parecchi
 * selettori nativi che leggono "var(--vbo-pref-*)" direttamente (es.
 * ".vbrowroomcapacity i", vedi "Fix D" più sotto in questo file) senza
 * passare da queste classi — per quelli, essendo spesso più specifici
 * di un selettore a singola classe, resta necessario un fix puntuale
 * selettore-per-selettore (specificità pareggiata) quando se ne incontra
 * uno nuovo. Impostare "Preferred Colors" lato admin sul terracotta
 * (fuori da questo file) chiude comunque il cerchio anche su quei casi,
 * dato che a quel punto la VARIABILE stessa risolve già in terracotta,
 * indipendentemente da quale selettore la consuma — le regole qui sotto
 * restano quindi una rete di sicurezza per gli scarti (cache, valore non
 * salvato, o simili), non l'unica difesa.
 */
.vbo-pref-color-btn-secondary {
	background-color: var(--wp--preset--color--accent-dark);
	color: var(--wp--preset--color--white);
}

.vbo-pref-color-btn-secondary:hover {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
}

.vbo-pref-color-element {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
}

/*
 * Queste ultime tre arrivano native già con "!important" (vikbooking_
 * styles.css, ".vbo-pref-bordercolor"/".-bordertext"/".-background"):
 * stesso trattamento già in uso nel file quando il nativo stesso forza
 * una proprietà con "!important" (es. gli "height/padding" più sotto,
 * ".vbo-search-guests-stepper" e simili) — l'unico modo per vincere la
 * cascata è pareggiare, non uno scarto dalla regola "mai !important" del
 * tema.
 */
.vbo-pref-bordercolor {
	border-color: var(--wp--preset--color--accent) !important;
}

.vbo-pref-bordertext {
	color: var(--wp--preset--color--accent) !important;
	border-color: var(--wp--preset--color--accent) !important;
}

.vbo-pref-background {
	background: var(--wp--preset--color--accent) !important;
}

/* -----------------------------------------------------------
   Calendario jQuery UI datepicker — popup date condiviso da OGNI campo
   data del flusso (widget di ricerca, "Change Dates" nei risultati,
   ecc.): non passa dalle 7 classi marcatore sopra, ha un proprio blocco
   di regole native dedicato (selettori ".ui-datepicker*"/".ui-state-*")
   con "!important" su ognuna, mai intercettato finora in questo file
   (nessun selettore ".ui-datepicker" esisteva qui prima) — superficie
   comparsa aprendo un date-picker e mai osservata/corretta in nessuno
   degli audit precedenti dei singoli flussi. Selettori replicati
   identici ai nativi (stessa specificità, questo foglio carica dopo) più
   "!important" per pareggiare: stesso trattamento già in uso nel file
   quando il nativo stesso forza una proprietà con "!important" (vedi
   ".vbo-pref-bordercolor" ecc. sopra).
   ----------------------------------------------------------- */
.ui-datepicker-calendar td.checkin-date > *,
.ui-datepicker-calendar td.checkout-date > *,
.ui-datepicker-calendar td.ui-state-highlight > *,
.ui-datepicker-calendar td.ui-datepicker-current-day > * {
	background: var(--wp--preset--color--accent) !important;
	border-color: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--white) !important;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
	border-color: var(--wp--preset--color--accent) !important;
}

.ui-datepicker-header .ui-corner-all.ui-state-hover {
	border-color: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--accent) !important;
}

.ui-datepicker .ui-datepicker-current-day a {
	color: var(--wp--preset--color--white) !important;
}

.ui-datepicker td:not(.ui-state-highlight):not(.ui-datepicker-unselectable):not(.date-will):not(.ui-datepicker-current-day) > :hover {
	border-color: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--accent) !important;
}

.ui-datepicker td.checkin-date a:hover,
.ui-datepicker td.checkout-date a:hover,
.ui-datepicker-calendar td.ui-datepicker-current-day > :hover {
	color: var(--wp--preset--color--white) !important;
}

.ui-datepicker .ui-datepicker-today {
	color: var(--wp--preset--color--accent) !important;
}

/* -----------------------------------------------------------
   Widget "Search Form" orizzontale (mod_vikbooking_horizontalsearch)
   Usato quando il widget VikBooking viene inserito come blocco Widget
   legacy (es. nell'hero-search). Markup diverso dallo shortcode
   [vikbooking view="vikbooking"]: qui non ci sono i selettori .vbo-search-*,
   la struttura reale è .vbmodhorsearchmaindiv > form > .vbmodhorsearchcheckindiv,
   .vbmodhorsearchcheckoutdiv, .vbmodhorsearchrac, .vbmodhorsearchbookdiv.
   ----------------------------------------------------------- */
.vbmodhorsearchmaindiv {
	display: block;
	width: 100%;
}

/*
 * Riga singola a 5 zone (Check-in | Check-out | Category | Ospiti | Cerca).
 * "Category" (.vbmodhorsearchcategoriesblock) compare solo se nel widget è
 * attiva l'opzione "mostra categorie": senza un grid-area esplicito finiva
 * auto-posizionato dall'algoritmo di griglia in una riga implicita propria
 * sotto Check-in, spezzando la riga unica. Il campo "Ospiti" collassato non
 * esiste nel markup nativo del widget (che espone sempre 3 <select>
 * separate Rooms/Adults/Children): il trigger .vbo-horizsearch-guests-wrap
 * e il pannello popover sono costruiti da assets/js/vikbooking-dom.js, che
 * sposta .vbmodhorsearchrac al suo interno. Qui si stila solo il risultato
 * di quella manipolazione.
 */
.vbmodhorsearchmaindiv form {
	display: grid;
	grid-template-columns: auto auto auto auto 1fr;
	grid-template-areas: "checkin checkout category guests book";
	column-gap: 0;
	align-items: center;
}

.vbmodhorsearchmaindiv form .vbmodhorsearchcheckindiv,
.vbmodhorsearchmaindiv form .vbmodhorsearchcheckoutdiv,
.vbmodhorsearchmaindiv form .vbmodhorsearchcategoriesblock {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0;
	padding: 0 var(--wp--preset--spacing--5) 0 0;
}

.vbmodhorsearchmaindiv form .vbmodhorsearchcheckindiv {
	grid-area: checkin;
}

.vbmodhorsearchmaindiv form .vbmodhorsearchcheckoutdiv {
	grid-area: checkout;
	padding-left: var(--wp--preset--spacing--5);
	border-left: 1px solid var(--wp--preset--color--line);
}

.vbmodhorsearchmaindiv form .vbmodhorsearchcategoriesblock {
	grid-area: category;
	padding-left: var(--wp--preset--spacing--5);
	border-left: 1px solid var(--wp--preset--color--line);
}

.vbmodhorsearchmaindiv form .vbmodhorsearchbookdiv {
	grid-area: book;
	display: flex;
	align-items: center;
	justify-self: end;
	margin: 0;
	padding-left: var(--wp--preset--spacing--5);
	border-left: 1px solid var(--wp--preset--color--line);
}

/* Label — Inter, maiuscolo, piccolo, colore attenuato */
.vbmodhorsearchcheckindiv label,
.vbmodhorsearchcheckoutdiv label,
.vbmodhorsearchroomsel label,
.vbmodhscategories,
.horsanumlb,
.horscnumlb {
	display: block;
	margin: 0 0 var(--wp--preset--spacing--2);
	color: var(--wp--preset--color--text-soft);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/*
 * Badge "Nights: N" — iniettato via JS del plugin solo dopo la selezione
 * delle date, e spostato da vikbooking-dom.js dentro .input-group (riga
 * della data), non più come figlio diretto di .vbmodhorsearchcheckoutdiv:
 * quel blocco è flex-direction:column, quindi qualunque figlio in più
 * finisce sempre su una riga propria sotto la data invece di starci accanto.
 */
.vbmodhorsearchtotnights {
	margin-left: var(--wp--preset--spacing--2);
	flex-shrink: 0;
}

.vbmodhorsearchtotnights:empty {
	display: none;
	margin: 0;
}

.vbo-horizsearch-numnights-inner {
	display: flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--1);
	padding: var(--wp--preset--spacing--1) var(--wp--preset--spacing--3);
	background-color: var(--wp--preset--color--background-alt);
	border-radius: var(--vik-radius);
	color: var(--wp--preset--color--text-soft);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
}

.vbo-horizsearch-numnights-inner span:last-child {
	color: var(--wp--preset--color--accent-dark);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	text-transform: none;
}

/*
 * Trigger "Ospiti" — costruito da vikbooking-dom.js. Il padding orizzontale
 * sta sul <button> (.vbo-horizsearch-guests-trigger), non sul wrap: prima
 * stava sul wrap e il bottone dentro restava largo quanto il solo testo,
 * lasciando cliccabile solo l'etichetta e non l'intera area del riquadro
 * (compreso lo spazio di padding a sinistra/destra). Con width:100% sul
 * bottone e zero padding sul wrap, il bottone combacia esattamente con
 * l'intero riquadro visibile.
 */
.vbo-horizsearch-guests-wrap {
	grid-area: guests;
	position: relative;
	display: flex;
	align-items: center;
	margin: 0;
	border-left: 1px solid var(--wp--preset--color--line);
}

.vbo-horizsearch-guests-trigger {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--1);
	width: 100%;
	padding: 0 var(--wp--preset--spacing--5);
	background: none;
	border: none;
	cursor: pointer;
}

.vbo-horizsearch-guests-label {
	color: var(--wp--preset--color--text-soft);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.vbo-horizsearch-guests-value {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--md);
}

/*
 * Pannello popover "Ospiti" — .vbmodhorsearchrac spostato qui da JS.
 * position:fixed (coordinate top/left calcolate via JS in base al trigger)
 * invece di absolute: l'hero è un blocco Cover con overflow:hidden di
 * WordPress core, che clipperebbe un pannello absolute appena esce dal
 * suo box. Vedi commento in vikbooking-dom.js.
 *
 * color esplicito: pur essendo fixed, il pannello resta un discendente DOM
 * dell'hero scuro (non l'abbiamo spostato per non rompere l'invio dei
 * campi col form). WordPress imposta color:#fff su ogni .wp-block-cover
 * senza has-text-color: senza questa riga, qualunque testo qui dentro privo
 * di colore proprio (es. "Room 2", aggiunto dal plugin quando si scelgono
 * più camere) eredita quel bianco ed è invisibile su sfondo bianco.
 */
/*
 * max-width: unica proprietà toccata su questa regola dello standard in
 * tutto questo lavoro (mai altrimenti modificato) — audit responsive
 * (Playwright) su 375/390px: "width: max-content" lascia che il pannello
 * si allarghi quanto il suo contenuto preferito (~376px, per via delle
 * righe Adults/Children affiancate), superando la larghezza disponibile e
 * tagliando la colonna "Children" fuori dal viewport (rect.right >
 * innerWidth, verificato). positionPanel() in vikbooking-dom.js già
 * clampa "left" con un margine di 16px per lato: qui viene rispettato lo
 * stesso margine anche sulla larghezza, così il pannello non supera mai
 * lo spazio che quel calcolo gli riserva.
 *
 * box-sizing: border-box — senza, "max-width" vincola solo il content-box
 * (default del box model): padding (var(--spacing-4), ~24px per lato) e
 * border si sommano SOPRA quel limite, e il footprint reale (offsetWidth,
 * quello che conta per capire se sfora il viewport) torna a superarlo.
 * Misurato: con solo "max-width" la larghezza calcolata restava
 * correttamente vincolata (~342px) ma offsetWidth restava 376px — lo
 * stesso valore di prima, bug non risolto finché non si include
 * padding/border nel calcolo del limite.
 */
.vbo-horizsearch-guests-panel {
	position: fixed;
	z-index: 100;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
	box-sizing: border-box;
	width: max-content;
	min-width: 260px;
	max-width: calc(100vw - 32px);
	padding: var(--wp--preset--spacing--4);
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--vik-radius);
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12);
	color: var(--wp--preset--color--ink);
}

/*
 * !important necessario: sotto i 580px il CSS nativo del plugin
 * (mod_vikbooking_horizontalsearch.css, ".vbo-horizsearch-standardformat-
 * wrap.vbmodhorsearchmaindiv .vbmodhorsearchrac { display:flex }") ha
 * specificità più alta di questa regola (3 classi contro 2) e vince a
 * prescindere dall'attributo [hidden]: senza !important il popover
 * "Ospiti" resterebbe sempre aperto su mobile, anche a pannello chiuso
 * (verificato in browser: display:flex nonostante hidden=true). Non
 * modificabile lato plugin, verrebbe sovrascritto al prossimo aggiornamento.
 */
.vbo-horizsearch-guests-panel[hidden] {
	display: none !important;
}

/* Riga "Rooms" — label ed select sulla stessa riga, non impilate */
.vbo-horizsearch-guests-panel .vbmodhorsearchroomsel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--3);
	padding-bottom: var(--wp--preset--spacing--3);
	border-bottom: 1px solid var(--wp--preset--color--line);
	float: none;
	margin: 0;
}

.vbo-horizsearch-guests-panel .vbmodhorsearchroomsel label {
	margin: 0;
}

/* !important: stessa specificità della regola generale "width: 100%" più
   sotto, che essendo dichiarata dopo altrimenti vincerebbe sul pareggio. */
.vbo-horizsearch-guests-panel .vbhsrnselsp select {
	width: 80px !important;
}

/*
 * Righe camera — una riga per camera (numero | adulti | bambini) invece
 * del blocco impilato di prima, sia per occupare meno spazio verticale
 * sia perché dalla Room 2 in poi il plugin toglie le label dal markup
 * clonato (per non duplicare gli id): un'intestazione unica sopra le
 * righe, iniettata da vikbooking-dom.js, resta l'unico riferimento di
 * colonna leggibile per tutte le camere.
 *
 * Un'unica grid condivisa (non 3 grid indipendenti su intestazione/Room 1/
 * Room 2): altrimenti ogni riga calcola le proprie colonne in base al
 * proprio contenuto e le colonne non restano allineate tra loro. I livelli
 * di wrapper intermedi (.vbmodhorsearchroomdentrfirst, .vbmoreroomscontmod,
 * il div #vbNracont creato dal plugin, il .vbmodhorsearchroomdentr annidato
 * per le camere 2+) diventano display:contents: escono dal box model e i
 * loro figli (.horsrnum/.horsanumdiv/.horscnumdiv) diventano celle dirette
 * della grid esterna, riga dopo riga, nell'ordine in cui compaiono nel DOM.
 */
.vbo-horizsearch-guests-panel > .vbmodhorsearchroomdentr {
	display: grid;
	grid-template-columns: minmax(56px, auto) 1fr 1fr;
	align-items: center;
	gap: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
}

/* Se i bambini sono disabilitati globalmente manca .horscnumdiv ovunque:
   senza questa regola l'auto-flow a 3 colonne sfaserebbe le righe. */
.vbo-horizsearch-guests-panel > .vbmodhorsearchroomdentr:not(:has(.horscnumdiv)) {
	grid-template-columns: minmax(56px, auto) 1fr;
}

.vbo-horizsearch-guests-panel .vbmodhorsearchroomdentr > .vbo-horizsearch-guests-row--header,
.vbo-horizsearch-guests-panel .vbmodhorsearchroomdentrfirst,
.vbo-horizsearch-guests-panel .vbmoreroomscontmod,
.vbo-horizsearch-guests-panel .vbmoreroomscontmod > div,
.vbo-horizsearch-guests-panel .vbmoreroomscontmod .vbmodhorsearchroomdentr {
	display: contents;
}

/*
 * Sotto i 580px il nativo del plugin (mod_vikbooking_horizontalsearch.css,
 * "@media only screen and (max-width: 580px)") ridisegna da capo lo stesso
 * pannello multi-camera con un proprio schema flex — pensato per il
 * markup NON smontato in griglia, quindi in conflitto diretto col
 * "display: contents" impostato sopra: il selettore nativo
 * ".vbo-horizsearch-standardformat-wrap .vbmodhorsearchrac >
 * .vbmodhorsearchroomdentr > *" (3 classi, universale sui figli diretti)
 * batte in specificità le regole sopra (2 classi ciascuna:
 * ".vbo-horizsearch-guests-panel .vbmodhorsearchroomdentrfirst" ecc.),
 * quindi sotto i 580px vince il nativo e ".vbmodhorsearchroomdentrfirst"/
 * ".vbmoreroomscontmod" tornano "display: flex" invece di "contents" —
 * la griglia condivisa (righe Camera 1/2/3) si spacca: le colonne restano
 * sui figli diretti del wrapper ".vbo-horizsearch-guests-panel >
 * .vbmodhorsearchroomdentr" (l'unico "display: grid" reale) ma questi due
 * blocchi non più smontati vi entrano come UNA sola cella enorme invece
 * dei loro figli, sfasando ogni riga successiva — riprodotto dal vivo a
 * 375px: "Camera 2"/"Camera 3" finiscono più in alto e a sinistra di
 * "Camera 1", fuori ordine.
 *
 * Stesso conflitto anche su ".horsanumdiv:has(> .horscnumdiv)" più sotto
 * in questo file: lì il nativo (".vbo-horizsearch-standardformat-wrap
 * .vbmoreroomscontmod > div > .vbmodhorsearchroomdentr > .horsanumdiv",
 * 4 classi) batte la regola di quel selettore (3 classi).
 *
 * Non scoped a una media query specifica (il nativo ne ha diverse, non
 * solo i 580px verificati dal vivo): stesso selettore di prima con 2
 * classi reali in più come prefisso (".vbmodhorsearchmaindiv" — sempre
 * presente sul form radice del widget, in qualunque pagina/contesto lo
 * si usi — e ".vbo-horizsearch-guests-wrap", il genitore diretto del
 * pannello) porta la specificità a 5 classi, sopra qualunque selettore
 * nativo trovato in questo file (mai oltre le 4) a qualunque larghezza,
 * senza bisogno di "!important" (regola 3 del brief) né di inseguire ogni
 * singolo breakpoint nativo uno per uno.
 */
.vbmodhorsearchmaindiv .vbo-horizsearch-guests-wrap .vbo-horizsearch-guests-panel .vbmodhorsearchroomdentr > .vbo-horizsearch-guests-row--header,
.vbmodhorsearchmaindiv .vbo-horizsearch-guests-wrap .vbo-horizsearch-guests-panel .vbmodhorsearchroomdentrfirst,
.vbmodhorsearchmaindiv .vbo-horizsearch-guests-wrap .vbo-horizsearch-guests-panel .vbmoreroomscontmod,
.vbmodhorsearchmaindiv .vbo-horizsearch-guests-wrap .vbo-horizsearch-guests-panel .vbmoreroomscontmod > div,
.vbmodhorsearchmaindiv .vbo-horizsearch-guests-wrap .vbo-horizsearch-guests-panel .vbmoreroomscontmod .vbmodhorsearchroomdentr {
	display: contents;
}

/*
 * Dalla Room 2 in poi il plugin annida .horscnumdiv DENTRO .horsanumdiv
 * (non come fratelli, come nella Room 1). Smontiamo .horsanumdiv stesso
 * (solo quando contiene questo annidamento, non nella Room 1): i suoi figli
 * — lo <span> della select adulti e .horscnumdiv — diventano celle dirette
 * della griglia esterna (colonna 2 e colonna 3), esattamente come accade
 * già "naturalmente" per la Room 1 dove sono fratelli.
 */
.vbo-horizsearch-guests-panel .horsanumdiv:has(> .horscnumdiv) {
	display: contents;
}

/*
 * Stesso conflitto di specificità documentato sopra (".vbmodhorsearchroomdentrfirst"/
 * ".vbmoreroomscontmod"), qui contro ".vbo-horizsearch-standardformat-wrap
 * .vbmoreroomscontmod > div > .vbmodhorsearchroomdentr > .horsanumdiv" nativo
 * (4 classi, sotto i 580px) — batte la regola subito sopra (3 classi).
 * Stesso prefisso a 2 classi in più per portarla a 5.
 */
.vbmodhorsearchmaindiv .vbo-horizsearch-guests-wrap .vbo-horizsearch-guests-panel .horsanumdiv:has(> .horscnumdiv) {
	display: contents;
}

.vbo-horizsearch-guests-row--header span {
	padding-bottom: var(--wp--preset--spacing--2);
	border-bottom: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--text-soft);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;

	&:first-child {
		border-bottom: 0;
	}
}

.vbo-horizsearch-guests-panel .horsrnum {
	color: var(--wp--preset--color--text-soft);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
}

.vbo-horizsearch-guests-panel .horsanumdiv,
.vbo-horizsearch-guests-panel .horscnumdiv {
	display: block;
	float: none;
	margin: 0;
}

/*
 * Per la Room 2 in poi il plugin forza lo <span> che avvolge la select
 * (.horsanumsel/.horscnumsel) a display:inline-block SOLO dentro
 * .vbmoreroomscontmod (".vbmoreroomscontmod .vbmodhorsearchroomdentr
 * .horsanumdiv > *"): da inline-block, la select con width:100% si
 * allarga solo quanto il proprio contenuto (una cifra), non quanto la
 * colonna della grid, restando più stretta di quella della Room 1.
 */
.vbo-horizsearch-guests-panel .vbmodhorsearchroomdentr .horsanumsel,
.vbo-horizsearch-guests-panel .vbmodhorsearchroomdentr .horscnumsel {
	display: block;
	width: 100%;
}

/*
 * Le label reali di Adults/Children restano nel markup (la Room 1 le ha)
 * per l'accessibilità, ma il riferimento visivo di colonna ora è
 * l'intestazione sopra: le nascondiamo solo visivamente (come
 * .screen-reader-text in theme.css), non con display:none, altrimenti
 * gli screen reader non le leggerebbero più.
 */
.vbo-horizsearch-guests-panel .horsanumlb,
.vbo-horizsearch-guests-panel .horscnumlb {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.vbmodhorsearchmaindiv .input-group {
	display: flex;
	align-items: center;
}

/*
 * Valore — Cormorant Garamond, più grande, colore testo principale.
 * height/padding sono !important perché il plugin li forza a 32px/0 12px
 * con !important: è l'unico modo per vincere la cascata senza modificare
 * i file del plugin (verrebbero sovrascritti al prossimo aggiornamento).
 */
.vbmodhorsearchmaindiv .input-group input[type="text"] {
	flex: 1;
	min-width: 0;
	height: 44px !important;
	padding: 0 !important;
	border: none;
	background-color: transparent;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--md);
	box-shadow: none;
}

.vbmodhorsearchmaindiv .input-group i {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 44px;
	margin-left: var(--wp--preset--spacing--1);
	background: transparent;
	border: none;
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--base);
	cursor: pointer;
}

/*
 * Select Rooms/Adults/Children (dentro il popover "Ospiti") — reset
 * dell'aspetto nativo del browser, freccia custom via SVG. Il colore della
 * freccia è hardcoded perché un SVG in background-image non può leggere le
 * CSS custom property (stesso caso già concordato per l'ivory dell'<em>
 * nell'hero).
 *
 * background-color: ora che .vbo-horizsearch-guests-panel imposta un color
 * esplicito (vedi sopra), il testo non è più bianco su bianco: usiamo
 * background-alt (token, non un grigio fisso) più un bordo sottile, utile
 * anche a distinguere visivamente ogni select nel nuovo layout a righe
 * compatte. Non include .vbhsrcselsp (select "Category" nella riga
 * principale): quel campo vive nella barra di ricerca, non nel popover
 * impilato, e usa lo stile "flush" qui sotto per restare coerente con
 * Check-in/Check-out invece del riquadro cream della select boxata.
 */
.vbmodhorsearchmaindiv .vbmodhorsearchrac select,
.vbmodhorsearchmaindiv .vbhsrnselsp select {
	height: 44px !important;
	max-width: none !important;
	margin-bottom: 0 !important;
	padding: 0 var(--wp--preset--spacing--6) 0 var(--wp--preset--spacing--3) !important;
	width: 100%;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--vik-radius);
	background-color: var(--wp--preset--color--background-alt);
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath fill='%232C2C2C' d='M4 5 0 0h8z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--wp--preset--spacing--3) center;
	background-size: 8px 5px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--md);
	font-variant-numeric: lining-nums;
	cursor: pointer;
}

/*
 * Select "Category" nella riga principale — stesso trattamento "flush" di
 * Check-in/Check-out (nessun riquadro, sfondo trasparente, valore in
 * Cormorant) invece del riquadro boxato del popover, cosi la riga a 5 zone
 * resta visivamente omogenea. Freccia SVG hardcoded per lo stesso motivo
 * del blocco sopra (le custom property non sono leggibili in background-image).
 */
.vbmodhorsearchmaindiv .vbhsrcselsp select {
	height: 44px !important;
	max-width: none !important;
	margin-bottom: 0 !important;
	padding: 0 var(--wp--preset--spacing--5) 0 0 !important;
	width: 100%;
	border: none;
	border-radius: 0;
	background-color: transparent;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath fill='%232C2C2C' d='M4 5 0 0h8z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--wp--preset--spacing--2) center;
	background-size: 8px 5px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--md);
	cursor: pointer;
}

.vbmodhorsearchmaindiv form .vbmodhorsearchbookdiv .vbsearchinputmodhors {
	height: 44px;
	margin: 0;
	padding: 0 var(--wp--preset--spacing--5) !important;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

@media (max-width: 767px) {
	.vbmodhorsearchmaindiv form {
		grid-template-columns: 1fr;
		grid-template-areas:
			"checkin"
			"checkout"
			"category"
			"guests"
			"book";
	}

	.vbmodhorsearchmaindiv form .vbmodhorsearchcheckoutdiv,
	.vbmodhorsearchmaindiv form .vbmodhorsearchcategoriesblock {
		padding: var(--wp--preset--spacing--3) 0 0;
		border-left: none;
		border-top: 1px solid var(--wp--preset--color--line);
	}

	.vbo-horizsearch-guests-wrap {
		border-left: none;
		border-top: 1px solid var(--wp--preset--color--line);
	}

	.vbo-horizsearch-guests-trigger {
		padding: var(--wp--preset--spacing--3) 0 0;
	}

	.vbmodhorsearchmaindiv form .vbmodhorsearchbookdiv {
		justify-self: stretch;
		justify-content: center;
		padding: var(--wp--preset--spacing--3) 0 0;
		border-left: none;
		border-top: 1px solid var(--wp--preset--color--line);
	}

	.vbmodhorsearchmaindiv form .vbmodhorsearchbookdiv .vbsearchinputmodhors {
		width: 100%;
	}
}

/* -----------------------------------------------------------
   Widget "Search Form" — placeholder check-in/check-out personalizzati
   (layout "Human Readable", .vbo-horizsearch-humanformat-wrap). Il testo è
   iniettato server-side da inc/vikbooking-search-placeholders.php; qui solo
   lo stile (attenuato, come un placeholder nativo) e una larghezza minima
   che evita il "salto" di layout tra "Quando arrivi?"/"Quando riparti?" e la
   data selezionata una volta scelta.

   Il testo è configurabile liberamente dal pannello Impostazioni tema
   (nessun limite di lunghezza lato form). Una frase normale va già a capo
   da sola (white-space non è "nowrap" qui); il rischio è una stringa SENZA
   spazi (parola singola molto lunga, o un errore di battitura senza
   spazi): il genitore flex ".vbmodhorsearch-humcalcont" (flex:1) ha
   min-width:auto implicito, che per un flex item si calcola sul
   min-content del testo — e il min-content di una parola senza spazi resta
   la sua larghezza intera ANCHE con "overflow-wrap: break-word" sullo
   span (break-word cambia solo l'a-capo entro un box già vincolato in
   larghezza, non la dimensione intrinseca usata per dimensionare un flex
   item libero). Risultato senza "min-width: 0" qui: la colonna trabocca
   fuori dalla propria cella, sovrapponendosi ai contatori Notti/Camere
   accanto — riprodotto con Playwright (break-word da solo non bastava,
   verificato dal vivo).
   ----------------------------------------------------------- */
.vbo-horizsearch-humanformat-wrap .vbo-horizsearch-placeholder {
	min-width: 132px;
	color: var(--wp--preset--color--text-soft);
	opacity: 0.75;
	overflow-wrap: break-word;
}

.vbo-horizsearch-humanformat-wrap .vbmodhorsearch-humcalcont {
	min-width: 0;
}

/* -----------------------------------------------------------
   Widget "Search Form" — parità visiva Human Readable / Standard.
   Il layout Human Readable arriva "vestito" nativamente dal plugin (bordi,
   spaziature proprie): qui lo riportiamo alla stessa resa visiva dello
   standard (mai toccato), mantenendo intatta la formattazione testuale
   delle date (span .vbo-horizsearch-period-*, non sostituita) e i
   placeholder personalizzati sopra.

   Nota strutturale: ".vbmodhorsearch-hum-dates-wrap" avvolge già
   nativamente checkin+checkout in un unico figlio diretto del <form> (a
   differenza dello standard, dove sono due celle di griglia separate): le
   regole "grid-area: checkin"/"grid-area: checkout" più sopra non hanno
   quindi alcun effetto qui — grid-area si applica solo ai figli diretti
   della griglia, non ai nipoti. Ridefiniamo l'area con un'unica cella
   "dates"; le altre zone (category/guests/book) restano invariate perché
   sono già figlie dirette del <form> in entrambi i layout.
   ----------------------------------------------------------- */
.vbmodhorsearchmaindiv.vbo-horizsearch-humanformat-wrap form {
	grid-template-columns: minmax(0, auto) auto auto 1fr;
	grid-template-areas: "dates category guests book";
}

/*
 * "dates" è "minmax(0, auto)" invece del semplice "auto" delle altre 3
 * colonne: col solo "auto" la traccia si dimensiona sempre sul max-content
 * del contenuto — ignora di proposito ogni punto di a-capo, per
 * definizione (vedi nota su ".vbo-horizsearch-placeholder" più sopra) —
 * quindi anche con "flex-wrap: wrap" sotto la colonna pretenderebbe
 * comunque la larghezza intera non andata a capo, e l'eccedenza
 * traboccherebbe oltre ".hero-search__widget" (max-width: 920px) invece di
 * andare a capo al suo interno. Il minimo "0" (al posto del minimo
 * implicito "auto" = content-based) è ciò che permette alla traccia di
 * restringersi sotto il proprio max-content quando le altre 3 colonne
 * (category/guests/book) reclamano già lo spazio che serve loro — il
 * massimo resta "auto" quindi, quando c'è spazio di sopravanzo (caso
 * comune, testo breve), il risultato è identico a prima: nessuna
 * regressione sullo stato di default — verificato con Playwright su
 * "Quando arrivi?"/"Quando riparti?" a 1024/1279/1280/1366/1440/1920px
 * (sempre 1 riga, nessun overflow) e sul caso "con badge Notti: N + nomi
 * giorno/mese lunghi" già corretto in precedenza (stesso esito, nessuna
 * regressione: questa regola sostituisce quella, non più scoped al solo
 * ":has(.vbmodhorsearchtotnights:not(:empty))" — copre anche lo stato
 * "placeholder" con testo custom molto lungo, che all'epoca di quel fix
 * non esisteva ancora).
 *
 * "min-width: 0" incondizionato qui (non scoped a min-width:1024px come la
 * versione precedente) resta comunque sicuro sotto i 1024px: la regola
 * mobile "flex-direction: column; flex-wrap: nowrap" più sotto in questo
 * file, stessa specificità (2 classi) ma dichiarata DOPO nel foglio, vince
 * in cascata — verificato con Playwright a 390px (nessun overflow di
 * pagina, "flex-wrap" risolto a "nowrap" via getComputedStyle).
 */
.vbo-horizsearch-humanformat-wrap .vbmodhorsearch-hum-dates-wrap {
	grid-area: dates;
	min-width: 0;
	flex-wrap: wrap;
}

/*
 * Box check-in/check-out — stesso trattamento "flush" (nessun riquadro) di
 * .input-group nello standard. Il giorno grande + mese/anno/giorno
 * settimana restano quelli nativi di Human Readable: qui solo colore e
 * font sui token del tema (le proprietà di dimensione/layout native non
 * vengono toccate, quindi nessun conflitto di specificità da vincere).
 */
.vbo-horizsearch-humanformat-wrap .vbo-horizsearch-showcalendar {
	align-items: center;
	min-height: auto;
	padding: 0;
	border: none;
	border-radius: 0;
}

.vbo-horizsearch-humanformat-wrap .vbo-horizsearch-showcalendar > i {
	width: 24px;
	margin-right: var(--wp--preset--spacing--1);
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--base);
}

/*
 * font-variant-numeric: Cormorant Garamond usa cifre "oldstyle" di default a
 * questo corpo/peso — "10"/"12" si leggono come "IO"/"I2" (il glifo "1"
 * oldstyle è un'asta alta identica alla "I" maiuscola). Forziamo cifre
 * lining (altezza uniforme, come le maiuscole) per il numero del giorno.
 */
.vbo-horizsearch-humanformat-wrap .vbo-horizsearch-period-mday {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-variant-numeric: lining-nums;
}

.vbo-horizsearch-humanformat-wrap .vbo-horizsearch-period-month,
.vbo-horizsearch-humanformat-wrap .vbo-horizsearch-period-year,
.vbo-horizsearch-humanformat-wrap .vbo-horizsearch-period-wday {
	color: var(--wp--preset--color--text-soft);
	font-family: var(--wp--preset--font-family--body);
}

/*
 * Riepilogo "Ospiti" — box nativo .vbmodhorsearch-hum-guests-count invece
 * del trigger costruito via JS per lo standard (qui non serve: il plugin
 * fornisce già un riepilogo cliccabile + pannello a comparsa nativi).
 * Manteniamo il formato nativo a 3 coppie Rooms/Adults/Children (invece di
 * comporre una frase come fa vikbooking-dom.js per lo standard: stessa
 * informazione, solo formato diverso — evita un secondo script JS da
 * mantenere in parallelo), solo ricolorato/rifont-ato sui token del tema.
 */
/*
 * Il form-grid condivide "align-items: center" con lo standard (non
 * toccabile qui): ogni figlio diretto si dimensiona sulla propria altezza
 * naturale e viene centrato, invece di riempire la riga — così i
 * divisori "border-left" di guests-wrap/book-div/category (e prima anche
 * la loro label) risultano più corti e disallineati rispetto a
 * checkin/checkout, che sono il blocco più alto della riga.
 *
 * align-self: stretch (invece di "center", nativo del plugin, o del
 * precedente "flex-start") fa sì che questo box riempia sempre l'intera
 * altezza della riga: il suo border-left diventa un divisore a piena
 * altezza (vedi anche la regola poco più sotto per dates-wrap/category/
 * book-div, stesso principio). display:flex + flex-direction:column +
 * justify-content:flex-start (non "center": vedi label sotto) tengono la
 * label "GUESTS" ancorata al bordo superiore del box ora più alto,
 * esattamente come "CHECK-IN DATE"/"CHECK-OUT DATE" — indipendentemente
 * dall'altezza del contenuto sottostante (Rooms/Adults/Children), quindi
 * stabile anche quando quel contenuto cambia altezza.
 */
.vbo-horizsearch-humanformat-wrap .vbmodhorsearch-hum-guests-wrap {
	grid-area: guests;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-self: stretch;
	padding-left: var(--wp--preset--spacing--5);
	border-left: 1px solid var(--wp--preset--color--line);
}

/*
 * Stesso principio (vedi sopra) applicato agli altri figli diretti del
 * form: senza "align-self: stretch" restano alti quanto il proprio
 * contenuto naturale, quindi i loro border-left (categoria, e — via
 * regola condivisa — il divisore prima del bottone "Book Now") risultano
 * più corti del divisore checkin/checkout. dates-wrap è già alto quanto
 * checkin/checkout in ogni stato (li contiene), quindi qui è un no-op
 * innocuo che however lo rende esplicito e resistente a stati futuri.
 */
.vbo-horizsearch-humanformat-wrap .vbmodhorsearch-hum-dates-wrap,
.vbo-horizsearch-humanformat-wrap .vbmodhorsearchcategoriesblock {
	align-self: stretch;
}

/*
 * .vbmodhorsearchbookdiv ha, oltre alla regola generica
 * ".vbmodhorsearchmaindiv form > div" sopra, una SECONDA regola nativa
 * dedicata e più specifica (".vbmodhorsearchmaindiv form
 * .vbmodhorsearchbookdiv { align-self: flex-end }", specificità 2
 * classi + 1 tipo) che altrimenti vince sulla nostra (2 classi):
 * verificato interrogando document.styleSheets, non assunto. Il
 * selettore composto ".vbmodhorsearchmaindiv.vbo-horizsearch-
 * humanformat-wrap" (le due classi coesistono sullo stesso elemento
 * .vbmodhorsearchmaindiv) porta la specificità a 3 classi, battendola.
 */
.vbmodhorsearchmaindiv.vbo-horizsearch-humanformat-wrap .vbmodhorsearchbookdiv {
	align-self: stretch;
}

.vbo-horizsearch-humanformat-wrap .vbmodhorsearch-hum-guests-wrap > label {
	display: block;
	margin: 0 0 var(--wp--preset--spacing--1);
	color: var(--wp--preset--color--text-soft);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}

.vbo-horizsearch-humanformat-wrap .vbmodhorsearch-hum-guests-count {
	min-height: auto;
	padding: 0;
	border: none;
	border-radius: 0;
	gap: var(--wp--preset--spacing--4);
	margin-top: 10px;
}

.vbo-horizsearch-humanformat-wrap .vbmodhorsearch-hum-guests-count > div {
	margin-right: 0;
	gap: var(--wp--preset--spacing--1);
}

.vbo-horizsearch-humanformat-wrap .vbmodhorsearch-hum-guests-count > div label {
	margin: 0;
	color: var(--wp--preset--color--text-soft);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.08em;
}

/*
 * align-self: il nativo del plugin forza "align-self: flex-end" su questo
 * span (per farlo stare in basso rispetto alla label sopra) — a font-size
 * più grande della label finisce visivamente "sollevato" invece che
 * allineato al testo. baseline allinea le due righe di testo di dimensione
 * diversa sulla loro linea di base comune, come farebbe normale testo in
 * linea.
 *
 * font-variant-numeric: stesso problema cifre oldstyle di .vbo-horizsearch-
 * period-mday sopra ("1"/"0" letti come "I"/"O").
 */
.vbo-horizsearch-humanformat-wrap .vbmodhorsearch-hum-guests-count > div span {
	align-self: baseline;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
	font-variant-numeric: lining-nums;
}

/*
 * Badge "Nights: N" — è un terzo figlio flex di .vbmodhorsearch-hum-dates-
 * wrap, sullo stesso piano di checkin/checkout, con un nativo "align-self:
 * flex-end" (mod_vikbooking_horizontalsearch.css) che lo ancora in basso
 * mentre le due date sono centrate verticalmente (justify-content:center),
 * risultando disallineato. Centrato per combaciare con le altre due colonne.
 */
.vbo-horizsearch-humanformat-wrap .vbmodhorsearchtotnights {
	align-self: center;
}

/*
 * Il plugin ha una seconda regola nativa, più specifica di quella
 * condivisa (".vbo-horizsearch-numnights-inner" sopra) usata anche dallo
 * standard, scoped apposta su questo contesto
 * (".vbmodhorsearch-hum-dates-wrap .vbo-horizsearch-numnights-inner"):
 * bordo 1px, padding 15px, min-height 53px, font-size 17.4px — vince sulla
 * regola condivisa e produce un riquadro molto più grande/bordato del
 * badge compatto usato ovunque altrove. Qui la neutralizziamo (un'altra
 * classe in più per batterla in specificità, nessun !important).
 */
.vbo-horizsearch-humanformat-wrap .vbmodhorsearchtotnights .vbo-horizsearch-numnights-inner {
	min-height: auto;
	padding: var(--wp--preset--spacing--1) var(--wp--preset--spacing--3);
	border: none;
	font-size: var(--wp--preset--font-size--xs);
}

/*
 * Pannello a comparsa Rooms/Adults/Children — stessa "carta" bianca dello
 * standard (.vbo-horizsearch-guests-panel), qui sul contenitore nativo del
 * plugin (.vbmodhorsearch-hum-guests-modifier). Le select Adults/Children
 * restano native (bordo grigio di sistema): lo stesso vale nello standard,
 * dove non sono mai state restilizzate — nessuna discrepanza da correggere.
 *
 * position: fixed — lo stesso identico problema (e la stessa soluzione) già
 * documentati sopra per .vbo-horizsearch-guests-panel dello standard: un
 * antenato del widget (qui il blocco vik-base/hero-background) ha
 * "overflow: hidden" + "position: relative" e taglierebbe il pannello non
 * appena esce dal proprio box in "position: absolute" (il default nativo
 * del plugin). "fixed" lo sottrae a quell'overflow — le coordinate top/left
 * vengono ricalcolate via JS in vikbooking-dom.js (stessa funzione
 * positionPanel() già usata per il pannello dello standard), non più
 * ereditabili da un semplice "top/left" relativo al trigger.
 */
/*
 * Calendario check-in/check-out — stesso identico problema (e la stessa
 * soluzione) di ".vbmodhorsearch-hum-guests-modifier" qui sotto: un
 * antenato del widget (nell'hero, il blocco vik-base/hero-background) ha
 * "overflow: hidden" + "position: relative" e taglia qualunque discendente
 * in "position: absolute" appena esce dal proprio box — lo z-index nativo
 * del plugin (".hasDatepicker", 2147483647) non c'entra affatto: non è un
 * problema di ordine di sovrapposizione, il pannello viene proprio
 * ritagliato dal contenitore, rivelando quello che gli sta dietro (la foto
 * di sfondo dell'hero). "position: fixed" sottrae il pannello a
 * quell'overflow ovunque sia usato (non solo nell'hero: stessa scelta già
 * fatta per il pannello Ospiti qui sotto, un solo comportamento per tutte
 * le pagine invece di una regola condizionata al contesto) — le coordinate
 * top/left sono ricalcolate via JS in vikbooking-dom.js
 * (initHumanDatepickerPositioning(), stessa positionPanel() già in uso per
 * gli altri pannelli di questo widget), non più ereditabili da un top/left
 * relativo al trigger. Specificità identica al nativo (".vbo-horizsearch-
 * humanformat-wrap .hasDatepicker", due classi): vince per ordine nel
 * foglio, questo file viene enqueue dopo quello del plugin, nessun
 * bisogno di alzare la specificità o di "!important".
 */
.vbo-horizsearch-humanformat-wrap .vbo-horizsearch-dpicker-cont {
	position: fixed;
	z-index: 2147483647;
}

.vbo-horizsearch-humanformat-wrap .vbmodhorsearch-hum-guests-modifier {
	position: fixed;
	box-sizing: border-box;
	width: max-content;
	min-width: 260px;
	max-width: calc(100vw - 32px);
	padding: var(--wp--preset--spacing--4);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--vik-radius);
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12);
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
}

.vbo-horizsearch-humanformat-wrap .vbmodhorsearch-hum-guests-modifier-inner .vbmodhorsearchroomsel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--3);
	margin: 0 0 var(--wp--preset--spacing--3);
	padding-bottom: var(--wp--preset--spacing--3);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.vbo-horizsearch-humanformat-wrap .vbmodhorsearch-hum-guests-modifier-inner .vbmodhorsearchroomsel label {
	margin: 0;
}

/*
 * width/border-radius: il plugin ha già una regola nativa identica per
 * selettore (".vbmodhorsearch-hum-guests-modifier-inner .vbhsrnselsp
 * select") che forza width:100%/border-radius:0 — stessa specificità della
 * nostra, vinceremmo solo per ordine di sorgente (fragile). Il prefisso
 * ".vbo-horizsearch-humanformat-wrap" in più qui aggiunge una classe e
 * rende la vittoria esplicita, indipendente dall'ordine di enqueue dei
 * due fogli di stile.
 */
.vbo-horizsearch-humanformat-wrap .vbmodhorsearch-hum-guests-modifier-inner .vbhsrnselsp select {
	width: 80px;
	border-radius: var(--vik-radius);
}

/*
 * max-width: 1023px, non 767px — audit responsive (Playwright): il nativo
 * ".vbmodhorsearch-hum-dates-wrap { flex-wrap: wrap }" del plugin (sotto i
 * 1280px) fa "wrappare" checkin/checkout su due righe sovrapposte non
 * appena la cella di griglia "dates" non è più larga abbastanza da
 * contenerli entrambi affiancati — misurato: succede per l'intero
 * intervallo 768–954px (tablet portrait e buona parte del landscape
 * stretto), non solo sotto i 767px. Lo stack verticale, già corretto sotto
 * i 767px, risolve lo stesso problema anche qui: esteso l'intero
 * breakpoint invece di introdurne uno intermedio dedicato, dato che il
 * fix è identico e già verificato. Lo standard non ha questo problema
 * (checkin/checkoutdiv sono celle di griglia dirette, non condividono un
 * contenitore flex-wrap) quindi il suo breakpoint a 767px resta invariato.
 */
@media (max-width: 1023px) {
	.vbmodhorsearchmaindiv.vbo-horizsearch-humanformat-wrap form {
		grid-template-areas:
			"dates"
			"category"
			"guests"
			"book";
	}

	/*
	 * flex-wrap: nowrap — senza, "flex-direction: column" insieme al
	 * "flex-wrap: wrap" nativo e incondizionato del plugin (sotto i 1280px)
	 * produce un layout "a colonne" in stile masonry: checkin riempie una
	 * colonna verticale, checkout va a capo in una SECONDA colonna
	 * affiancata invece di impilarsi sotto — misurato con Playwright
	 * (stesso "top", x diversi). nowrap forza l'unica colonna verticale
	 * voluta.
	 */
	.vbo-horizsearch-humanformat-wrap .vbmodhorsearch-hum-dates-wrap {
		flex-direction: column;
		flex-wrap: nowrap;
	}

	/*
	 * checkout: la stessa conversione "border-left → border-top" esiste già
	 * per il layout standard (regola generica, media query ≤767px più
	 * sopra in questo file) ma non copriva Human Readable nell'intervallo
	 * esteso 768–1023px: qui restava il "border-left" + "padding-left" da
	 * desktop, con l'effetto (verificato — screenshot utente) di una riga
	 * verticale e un rientro a destra di "CHECK-OUT DATE" invece di un
	 * blocco impilato a piena larghezza con divisore orizzontale.
	 *
	 * Selettore composto: stessa ragione già documentata sopra per
	 * "align-self"/book-div — la regola desktop condivisa (2 classi + tipo)
	 * ha specificità maggiore di un semplice ".vbo-horizsearch-
	 * humanformat-wrap .vbmodhorsearchcheckoutdiv" (2 classi).
	 */
	.vbmodhorsearchmaindiv.vbo-horizsearch-humanformat-wrap .vbmodhorsearchcheckoutdiv {
		padding: var(--wp--preset--spacing--3) 0 0;
		border-left: none;
		border-top: 1px solid var(--wp--preset--color--line);
	}

	.vbo-horizsearch-humanformat-wrap .vbmodhorsearch-hum-guests-wrap {
		padding: var(--wp--preset--spacing--3) 0 0;
		border-left: none;
		border-top: 1px solid var(--wp--preset--color--line);
	}

	/*
	 * Book Now — la regola generica che lo rende a piena larghezza e
	 * converte il suo divisore da "border-left" a "border-top" (poco più
	 * sopra in questo stesso file) è scoped a max-width:767px: sopra i 767
	 * e fino a 1023 (il nuovo limite esteso solo qui per Human Readable) il
	 * bottone restava stretto e allineato a destra, con un "border-left"
	 * residuo visibile come un artefatto verticale nel layout ormai
	 * impilato a colonna singola (stesso problema del punto precedente,
	 * qui per l'ultima riga del form).
	 *
	 * Selettore composto (".vbmodhorsearchmaindiv.vbo-horizsearch-
	 * humanformat-wrap"): stessa ragione già documentata più sopra per
	 * "align-self" — la regola desktop condivisa (".vbmodhorsearchmaindiv
	 * form .vbmodhorsearchbookdiv", 2 classi + tipo) ha specificità
	 * maggiore di un semplice ".vbo-horizsearch-humanformat-wrap
	 * .vbmodhorsearchbookdiv" (2 classi) e altrimenti continua a vincere
	 * anche qui dentro la media query — verificato, non assunto.
	 */
	.vbmodhorsearchmaindiv.vbo-horizsearch-humanformat-wrap .vbmodhorsearchbookdiv {
		justify-self: stretch;
		justify-content: center;
		padding: var(--wp--preset--spacing--3) 0 0;
		border-left: none;
		border-top: 1px solid var(--wp--preset--color--line);
	}

	.vbo-horizsearch-humanformat-wrap .vbmodhorsearchbookdiv .vbsearchinputmodhors {
		width: 100%;
	}

	/*
	 * Touch target (audit responsive, Playwright): misurati 35.97px
	 * (check-in/check-out, stato senza data selezionata) e 23px (trigger
	 * Ospiti) — sotto la soglia indicativa di 44px. Lo standard non ha
	 * questo problema (i suoi campi hanno già min-height 44-53px nativi);
	 * qui erano stati rimossi per l'effetto "flush" (vedi regola base
	 * .vbo-horizsearch-showcalendar). min-height, non padding: non cambia
	 * la larghezza né la spaziatura orizzontale, allarga solo l'area di
	 * tocco verticale, e su mobile/tablet c'è già la riga intera a
	 * disposizione (layout impilato).
	 */
	.vbo-horizsearch-humanformat-wrap .vbo-horizsearch-showcalendar,
	.vbo-horizsearch-humanformat-wrap .vbmodhorsearch-hum-guests-count {
		min-height: 44px;
	}
}

/* -----------------------------------------------------------
   Widget "Search Form" — reskin per le varianti di hero-search.php
   (vedi pattern e assets/js/editor/hero-style-control.js). Il markup
   del widget è sempre lo stesso .vbmodhorsearchmaindiv descritto sopra:
   qui si adatta solo colori/layout al contenitore di ciascuna variante,
   selezionato dalla classe che il pattern mette sull'antenato diretto
   del blocco Widget (.hero-split-panel__widget, .hero-immersive__bar,
   .hero-form-protagonist__card).
   ----------------------------------------------------------- */

/*
 * Variante "Pannello laterale" — righe impilate con box bordati invece della
 * riga orizzontale a 4 zone, per stare nel pannello stretto.
 *
 * checkin e checkout non sono più direttamente le aree "checkin"/"checkout"
 * della griglia: vikbooking-dom.js (relocateNightsBadgeSplitPanel) li avvolge
 * in ".vbo-horizsearch-dates-row" e sposta il badge notti fuori da quel
 * wrapper, come proprio fratello — necessario perché il badge non può avere
 * un grid-area se resta annidato dentro .vbmodhorsearchcheckoutdiv (non è
 * figlio diretto della griglia), e messo lì dentro sforava o si
 * disallineava rispetto alla riga "Ospiti" sotto, qualunque trucco CSS si
 * usasse (flex-wrap, position:absolute).
 */
.hero-split-panel__widget .vbmodhorsearchmaindiv form {
	grid-template-columns: 1fr;
	grid-template-areas:
		"dates"
		"category"
		"guests"
		"book";
	row-gap: var(--wp--preset--spacing--4);
}

/*
 * grid-template-areas riserva sempre una riga per "nights", a prescindere dal
 * contenuto — anche col badge vuoto (display:none prima della scelta delle
 * date, regola ".vbmodhorsearchtotnights:empty" più sopra) la riga esiste
 * come traccia e il row-gap sopra/sotto resterebbe comunque visibile come
 * spazio vuoto. Aggiungiamo la riga solo quando il badge ha davvero un
 * contenuto, cosi il pannello resta compatto finché le date non sono state
 * selezionate.
 */
.hero-split-panel__widget .vbmodhorsearchmaindiv form:has(.vbmodhorsearchtotnights:not(:empty)) {
	grid-template-areas:
		"dates"
		"nights"
		"category"
		"guests"
		"book";
}

/*
 * min-width:0 + width:100% su tutti i figli diretti della griglia (colonna
 * singola): senza min-width:0 il testo non spezzabile di "Nights: 4" e del
 * bottone "Book now" fa allargare la colonna "1fr" oltre la larghezza
 * naturale della riga date/ospiti (che invece si accontenterebbero di meno),
 * disallineando il pannello; senza width:100% dates-row/guests-wrap non si
 * distendono da soli fino al bordo della colonna, anche quando questa è
 * più larga del loro contenuto.
 */
.hero-split-panel__widget .vbo-horizsearch-dates-row,
.hero-split-panel__widget .vbmodhorsearchtotnights,
.hero-split-panel__widget .vbmodhorsearchmaindiv form .vbmodhorsearchcategoriesblock,
.hero-split-panel__widget .vbo-horizsearch-guests-wrap,
.hero-split-panel__widget .vbmodhorsearchmaindiv form .vbmodhorsearchbookdiv {
	min-width: 0;
	width: 100%;
}

.hero-split-panel__widget .vbo-horizsearch-dates-row {
	grid-area: dates;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: var(--wp--preset--spacing--4);
	margin-right: 0;
}

/*
 * grid-area: auto — resetta il "grid-area: checkin/checkout" della regola
 * di base (per la riga orizzontale a 4 zone, dove sono figli diretti della
 * griglia del form). Qui invece sono figli di ".vbo-horizsearch-dates-row"
 * (una griglia senza aree nominate): senza il reset, il nome "checkin"/
 * "checkout" viene interpretato come riferimento a linee nominate che non
 * esistono in questa griglia, il browser ne crea di implicite e i due box
 * finiscono impilati invece che affiancati.
 */
.hero-split-panel__widget .vbmodhorsearchmaindiv form .vbmodhorsearchcheckindiv,
.hero-split-panel__widget .vbmodhorsearchmaindiv form .vbmodhorsearchcheckoutdiv {
	grid-area: auto;
	padding: var(--wp--preset--spacing--3);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--vik-radius);
}

.hero-split-panel__widget .vbmodhorsearchtotnights {
	grid-area: nights;
	margin: 0;
}

.hero-split-panel__widget .vbmodhorsearchmaindiv form .vbmodhorsearchcategoriesblock {
	grid-area: category;
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--3);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--vik-radius);
}

.hero-split-panel__widget .vbo-horizsearch-numnights-inner {
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
}

/*
 * box-sizing:border-box — con width:100% (regola sopra) e box-sizing
 * content-box di default, il border da 1px si sommerebbe al 100%, sforando
 * di 2px rispetto alle altre righe (dates-row/nights/book, senza bordo,
 * non risentono del problema).
 */
.hero-split-panel__widget .vbo-horizsearch-guests-wrap {
	grid-area: guests;
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--vik-radius);
}

.hero-split-panel__widget .vbo-horizsearch-guests-trigger {
	padding: var(--wp--preset--spacing--3);
}

.hero-split-panel__widget .vbmodhorsearchmaindiv form .vbmodhorsearchbookdiv {
	grid-area: book;
	justify-self: stretch;
	padding: 0;
	border: none;
}

.hero-split-panel__widget .vbmodhorsearchmaindiv form .vbmodhorsearchbookdiv .vbsearchinputmodhors {
	width: 100%;
	justify-content: center;
}

/* Variante "Immersivo centrato" — stessa riga orizzontale a 5 zone del
   default, solo ricolorata per stare su una barra scura semi-trasparente. */
.hero-immersive__bar .vbmodhorsearchcheckindiv label,
.hero-immersive__bar .vbmodhorsearchcheckoutdiv label,
.hero-immersive__bar .vbmodhscategories,
.hero-immersive__bar .vbo-horizsearch-guests-label {
	color: rgba(255, 255, 255, 0.7);
}

.hero-immersive__bar .vbmodhorsearchmaindiv .input-group input[type="text"],
.hero-immersive__bar .vbo-horizsearch-guests-value {
	color: var(--wp--preset--color--white);
}

.hero-immersive__bar .vbmodhorsearchmaindiv .input-group i {
	color: var(--wp--preset--color--white);
}

/* Select "Category" — stessa freccia SVG del campo flush, ma bianca invece
   che color accento: su una barra scura l'accento marrone perde contrasto. */
.hero-immersive__bar .vbmodhorsearchmaindiv .vbhsrcselsp select {
	color: var(--wp--preset--color--white);
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath fill='%23FFFFFF' d='M4 5 0 0h8z'/%3E%3C/svg%3E");
}

.hero-immersive__bar .vbmodhorsearchmaindiv form .vbmodhorsearchcheckoutdiv,
.hero-immersive__bar .vbmodhorsearchmaindiv form .vbmodhorsearchcategoriesblock,
.hero-immersive__bar .vbo-horizsearch-guests-wrap,
.hero-immersive__bar .vbmodhorsearchmaindiv form .vbmodhorsearchbookdiv {
	border-left-color: rgba(255, 255, 255, 0.25);
}

.hero-immersive__bar .vbo-horizsearch-numnights-inner {
	background-color: rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.85);
}

.hero-immersive__bar .vbo-horizsearch-numnights-inner span:last-child {
	color: var(--wp--preset--color--white);
}

@media (max-width: 767px) {
	.hero-immersive__bar .vbmodhorsearchmaindiv form .vbmodhorsearchcheckoutdiv,
	.hero-immersive__bar .vbmodhorsearchmaindiv form .vbmodhorsearchcategoriesblock,
	.hero-immersive__bar .vbo-horizsearch-guests-wrap,
	.hero-immersive__bar .vbmodhorsearchmaindiv form .vbmodhorsearchbookdiv {
		border-left-color: transparent;
		border-top-color: rgba(255, 255, 255, 0.25);
	}
}

/* Variante "Form protagonista" — griglia 2 colonne (check-in/check-out
   in alto, ospiti a riga piena, CTA a riga piena), campi con icona e
   stato interattivo reale sul check-in (:hover/:focus-within). */
.hero-form-protagonist__card .vbmodhorsearchmaindiv form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"checkin checkout"
		"category category"
		"guests guests"
		"book book";
	column-gap: var(--wp--preset--spacing--5);
	row-gap: var(--wp--preset--spacing--4);
}

.hero-form-protagonist__card .vbmodhorsearchmaindiv form .vbmodhorsearchcheckindiv,
.hero-form-protagonist__card .vbmodhorsearchmaindiv form .vbmodhorsearchcheckoutdiv,
.hero-form-protagonist__card .vbmodhorsearchmaindiv form .vbmodhorsearchcategoriesblock {
	position: relative;
	padding: var(--wp--preset--spacing--3);
	border: 1px solid transparent;
	border-radius: var(--vik-radius);
	transition: border-color 0.2s ease;
}

.hero-form-protagonist__card .vbmodhorsearchmaindiv form .vbmodhorsearchcategoriesblock {
	grid-area: category;
}

.hero-form-protagonist__card .vbmodhorsearchcategoriesblock:hover,
.hero-form-protagonist__card .vbmodhorsearchcategoriesblock:focus-within {
	border-color: rgba(255, 255, 255, 0.35);
}

.hero-form-protagonist__card .vbmodhorsearchcheckindiv:hover,
.hero-form-protagonist__card .vbmodhorsearchcheckindiv:focus-within,
.hero-form-protagonist__card .vbmodhorsearchcheckoutdiv:hover,
.hero-form-protagonist__card .vbmodhorsearchcheckoutdiv:focus-within {
	border-color: rgba(255, 255, 255, 0.35);
}

/* Affordance "Modifica" — stato interattivo reale, non simulato via JS:
   compare solo quando il campo è in hover o contiene il focus. */
.hero-form-protagonist__card .vbmodhorsearchcheckindiv::after,
.hero-form-protagonist__card .vbmodhorsearchcheckoutdiv::after {
	content: "Modifica \2304";
	position: absolute;
	top: var(--wp--preset--spacing--2);
	right: var(--wp--preset--spacing--2);
	color: rgba(255, 255, 255, 0.7);
	font-size: 10px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
}

.hero-form-protagonist__card .vbmodhorsearchcheckindiv:hover::after,
.hero-form-protagonist__card .vbmodhorsearchcheckindiv:focus-within::after,
.hero-form-protagonist__card .vbmodhorsearchcheckoutdiv:hover::after,
.hero-form-protagonist__card .vbmodhorsearchcheckoutdiv:focus-within::after {
	opacity: 1;
}

.hero-form-protagonist__card .vbo-horizsearch-guests-wrap {
	grid-area: guests;
	border: none;
}

.hero-form-protagonist__card .vbo-horizsearch-guests-trigger {
	padding: var(--wp--preset--spacing--3);
}

.hero-form-protagonist__card .vbmodhorsearchmaindiv form .vbmodhorsearchbookdiv {
	grid-area: book;
	justify-self: stretch;
	padding: var(--wp--preset--spacing--4) 0 0;
	border: none;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-form-protagonist__card .vbmodhorsearchmaindiv form .vbmodhorsearchbookdiv .vbsearchinputmodhors {
	width: 100%;
	justify-content: center;
}

.hero-form-protagonist__card .vbmodhorsearchcheckindiv label,
.hero-form-protagonist__card .vbmodhorsearchcheckoutdiv label,
.hero-form-protagonist__card .vbmodhscategories,
.hero-form-protagonist__card .vbo-horizsearch-guests-label {
	color: rgba(255, 255, 255, 0.7);
}

.hero-form-protagonist__card .vbmodhorsearchmaindiv .input-group input[type="text"],
.hero-form-protagonist__card .vbo-horizsearch-guests-value {
	color: var(--wp--preset--color--white);
}

.hero-form-protagonist__card .vbmodhorsearchmaindiv .input-group i {
	color: var(--wp--preset--color--white);
}

/* Select "Category" — vedi commento sulla stessa regola nella variante
   "Immersivo centrato": freccia bianca invece che color accento per
   restare leggibile sulla card scura. */
.hero-form-protagonist__card .vbmodhorsearchmaindiv .vbhsrcselsp select {
	color: var(--wp--preset--color--white);
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath fill='%23FFFFFF' d='M4 5 0 0h8z'/%3E%3C/svg%3E");
}

.hero-form-protagonist__card .vbo-horizsearch-numnights-inner {
	background-color: rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.85);
}

.hero-form-protagonist__card .vbo-horizsearch-numnights-inner span:last-child {
	color: var(--wp--preset--color--white);
}

/* Icone campo — piccolo calendario/persona via ::before. Colore hardcoded
   nel data-uri perché un SVG in background-image non legge le CSS custom
   property (stesso caso della freccia select più sopra). */
.hero-form-protagonist__card .vbmodhorsearchcheckindiv label::before,
.hero-form-protagonist__card .vbmodhorsearchcheckoutdiv label::before {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-right: var(--wp--preset--spacing--1);
	vertical-align: -1px;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-opacity='0.7' stroke-width='1.3'%3E%3Crect x='2' y='3' width='12' height='11' rx='1'/%3E%3Cline x1='2' y1='6.5' x2='14' y2='6.5'/%3E%3Cline x1='5' y1='1.5' x2='5' y2='4'/%3E%3Cline x1='11' y1='1.5' x2='11' y2='4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
}

.hero-form-protagonist__card .vbo-horizsearch-guests-label::before {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-right: var(--wp--preset--spacing--1);
	vertical-align: -1px;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-opacity='0.7' stroke-width='1.3'%3E%3Ccircle cx='8' cy='5.5' r='2.5'/%3E%3Cpath d='M3 14c0-3 2.5-5 5-5s5 2 5 5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
}

/* -----------------------------------------------------------
   Widget "Rooms List" (mod_vikbooking_rooms — blocco nativo
   vikbooking/rooms-widget-block). Markup reale, diverso dallo
   shortcode roomslist: .vbmodrooms-item, .vbmodroomsboxdiv,
   .vbmodroomsimg, .vbmodroomsname, .vbmodroomscat, .vbmodroomsroomcost,
   .vbmodroomsview. Il layout a griglia/scroll (colonne, carosello Owl)
   resta gestito dal CSS del plugin: qui si intervviene solo su colori,
   tipografia e spaziature.

   Le regole qui sotto valgono per l'aspetto di DEFAULT del widget (es.
   quando inserito senza nessuna delle due pattern camere). Nelle pattern
   rooms-grid.php e rooms-carousel.php il widget viene invece sostituito
   interamente, lato server, dai formati Overlay/Split — vedi
   inc/vikbooking-rooms-reorg.php — che riusano le stesse classi (.room-
   overlay-*, .room-split-*) già definite in theme.css per le card demo,
   non queste qui.
   ----------------------------------------------------------- */
.vbmodrooms-item {
	margin: 0;
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--vik-radius);
	box-shadow: none;
}

.vbmodroomsboxdiv {
	overflow: hidden;
	border-radius: var(--vik-radius);
}

.vbmodroomsimg {
	display: block;
	height: 280px;
	object-fit: cover;
}

.vbmodrooms-item .vbinf {
	padding: var(--wp--preset--spacing--4);
}

.vbmodrooms-divblock {
	margin: 0 0 var(--wp--preset--spacing--2);
}

.vbmodroomsname {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 400;
}

.vbmodroomsbeds {
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--sm);
}

.vbmodroomscat {
	margin-bottom: var(--wp--preset--spacing--2);
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--xs);
	font-style: normal;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.vbmodroomsdesc {
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--sm);
}

.vbmodroomsroomcost {
	padding-top: var(--wp--preset--spacing--3);
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 600;
}

.vbmodroomslabelcost {
	margin-left: var(--wp--preset--spacing--2);
	color: var(--wp--preset--color--text-soft);
	font-weight: 400;
}

.vbmodroomsview {
	margin: 0 var(--wp--preset--spacing--4) var(--wp--preset--spacing--4);
}

.vbmodroomsview > a {
	border-radius: var(--vik-radius);
}

/* -----------------------------------------------------------
   Search Form — shortcode [vikbooking view="vikbooking"]
   (".vbdivsearch .vb-search-inner"). Da non confondere con il widget
   "Search Form" del layout Standard/Human Readable più sopra
   (".vbmodhorsearchmaindiv"): markup completamente diverso, nessuno
   stile è condiviso tra i due componenti.

   Layout "compatto" (mockup approvato, terzo giro di correzioni) al
   posto del precedente layout "espanso" (righe camera sempre a vista,
   vedi cronologia file/commit): riga 1 = check-in, check-out, Nights
   (sola lettura); riga 2 = trigger "Rooms & Guests" (apre un popover
   con stepper Adults/Children + gestione camere), Rooms Category,
   bottone Search. Titolo/sottotitolo sopra la form ("Trova la
   disponibilità" nel mockup) NON fanno parte di questo file: sono
   contenuto editoriale, un blocco Heading + Paragraph da aggiungere
   nell'editor WordPress sopra lo shortcode, non generabile qui (CSS/JS
   non autorizzati a introdurre testo editoriale — vedi vincoli).

   La ristrutturazione del markup (spostamento di "#vbjstotnights" in
   riga 1, costruzione del trigger/popover "Rooms & Guests", stepper
   Adults/Children, "+ Aggiungi camera"/"×"/"Fatto") avviene in
   vikbooking-dom.js, funzione initSearchGuestsPopover() — qui solo lo
   stile del risultato. Vedi il commento in cima a quella funzione per il
   markup nativo di partenza e il ragionamento completo.
   ----------------------------------------------------------- */

.vbo-search-mainview {
	background-color: var(--wp--preset--color--background-alt);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--vik-radius);
	padding: var(--wp--preset--spacing--5);
	margin-bottom: var(--wp--preset--spacing--8);
	box-sizing: border-box;
	/*
	 * Larghezza massima (2026-10-07, bb-ledueg): a piena larghezza del
	 * contenuto (~1200px) i campi si distanziavano troppo. Stesso valore
	 * del widget di ricerca nell'hero (".hero-search__widget", theme.css).
	 * Solo sul box del form: la classe è emessa unicamente dalla view
	 * "vikbooking" e dal form "nessun risultato" (helpers/error_form.php),
	 * mai dalla lista risultati, che resta a piena larghezza.
	 */
	max-width: 920px;
	margin-inline: auto;
}

@media (min-width: 768px) {
	.vbo-search-mainview {
		padding: var(--wp--preset--spacing--6);
		margin-top: var(--wp--preset--spacing--8);
	}
}

/*
 * ".vbo-search-row" è il contenitore creato da JS (non nativo): a
 * differenza dei figli nativi (checkin/checkout/racblock/ecc., ognuno
 * raggiunto da selettori nativi scoped DIVERSI e specifici), qui c'è UNA
 * sola regola nativa da battere, generica ma comunque presente:
 * ".vbdivsearch .vb-search-inner > div { display:inline-block;
 * vertical-align:top }" (0,2,0, non scoped a un id/classe di campo
 * particolare — vale per QUALUNQUE div figlio diretto di ".vb-search-
 * inner", quindi anche per il nostro). Il nostro "display:flex" a una
 * sola classe (0,1,0) perdeva sempre (verificato con Playwright:
 * "display:inline-block" restava in computed style, i campi si
 * impilavano invece di affiancarsi). Selettore composto sullo stesso
 * elemento (".vbdivsearch.vbo-search-mainview", stesso trucco già usato
 * altrove in questo file) per un punto di specificità in più senza
 * restringere cosa viene selezionato: 3 classi, "(0,3,0)", batte
 * "(0,2,0)" a prescindere dall'ordine.
 *
 * QUARTO GIRO — riga unica, non più due ("vbo-search-row--dates"/
 * "--action" dei giri precedenti, rimosse: Check-in/Check-out/Nights/
 * Rooms & Guests/Rooms Category/Search stanno ora tutti nello stesso
 * ".vbo-search-row", costruito così direttamente in
 * initSearchGuestsPopover()). "justify-content:space-between" del giro
 * precedente è stato rimosso: distribuiva i pochi campi su tutta la
 * larghezza disponibile del contenitore, risultando dispersivo — un
 * "vuoto anomalo" tra i gruppi anziché solo prima del bottone. Qui
 * "gap" fisso e ridotto sostituisce sia quello sia i vecchi separatori
 * verticali (border-left + padding-left per singolo campo, rimossi):
 * un'unica dichiarazione garantisce la stessa spaziatura costante tra
 * OGNI coppia di campi consecutivi, Search compreso — nessun campo può
 * risultare "scollegato". La riga resta compatta sul proprio contenuto
 * (nessun "flex:1 1 0"/"flex-grow" su di essa): il contenitore
 * ".vbo-search-mainview" non viene stirato, lo spazio residuo del box
 * (se il box è più largo della riga) resta semplicemente vuoto a
 * destra, come richiesto.
 */
.vbdivsearch.vbo-search-mainview .vbo-search-row {
	display: flex;
	align-items: flex-end;
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--6);
	justify-content: space-between;
	width: 100%;
}

.vbo-search-inpblock-checkin,
.vbo-search-inpblock-checkout {
	flex: 0 0 auto;
	margin: 0;
}

/*
 * Underline — sostituisce sia i separatori verticali sia i riquadri
 * bianchi dei giri precedenti: una linea sottile sotto la riga
 * valore+icona di ogni campo (mai un bordo pieno intorno al campo). Va
 * sul contenitore della riga valore (".input-group", che include
 * l'icona calendario), non sul solo "<input>": l'underline deve
 * coprire anche l'icona, non fermarsi al bordo del testo.
 */
.vbo-search-mainview .vbo-search-inpblock .input-group {
	padding-bottom: var(--wp--preset--spacing--1);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/*
 * Campo data — rimosso il doppio riquadro nativo (input con radius solo
 * a sinistra + icona con radius solo a destra, due bordi adiacenti): qui
 * l'icona diventa un'icona semplice color accento accanto al valore,
 * senza box proprio, come nel widget. "#checkindate"/"#checkoutdate"
 * sono selettori per ID: vincono per specificità (non per ordine) sul
 * nativo ".vbdivsearch .vb-search-inner .vbo-search-inpblock
 * .input-group > input" (0,4,1 — quattro classi).
 */
.vbo-search-mainview .input-group {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--1);
}

/*
 * "width:auto" su un "<input type=text>" non significa "adatta il
 * contenuto": senza un valore esplicito il browser usa la larghezza
 * intrinseca basata sull'attributo HTML nativo "size" ("size=\"10\"" su
 * entrambi i campi, non modificabile — file nativo). Con la
 * formattazione data italiana "14/08/2026" (10 caratteri) il valore
 * entra per un soffio, ma un formato più lungo (nomi di mese, altre
 * lingue configurate nel plugin) eccederebbe silenziosamente quella
 * larghezza — il default del browser per un "<input>" è "overflow:clip"
 * (non "visible"), quindi il testo in eccesso sparisce senza troncamento
 * visibile né ellissi. "min-width" impone un pavimento indipendente
 * dall'attributo "size" (stesso valore già usato per il placeholder
 * equivalente nel widget Human Readable, ".vbo-horizsearch-placeholder"),
 * "overflow:visible" è una rete di sicurezza.
 */
#checkindate,
#checkoutdate {
	height: auto;
	padding: 0;
	border: none;
	border-radius: 0;
	background-color: transparent;
	background-image: none;
	width: auto;
	min-width: 132px;
	overflow: visible;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--ink);
	font-variant-numeric: lining-nums;
	cursor: pointer;
}

/*
 * Icona calendario — selettore a 4 classi per battere il nativo
 * ".vb-search-inner .input-group .vbo-caltrigger" (0,3,0 — tre classi).
 */
.vbo-search-mainview .vbo-search-inpblock .input-group .vbo-caltrigger {
	width: auto;
	height: auto;
	padding: 0;
	border: none;
	border-radius: 0;
	float: none;
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1;
}

/*
 * Label riga 1 — nessuna regola nativa dedicata per check-in/check-out
 * in questo contesto (esiste solo per varianti scoped diverse, es.
 * ".vbo-listing-details-wrap ..."), restava quindi il default del
 * browser.
 */
.vbo-search-mainview .vbo-search-inpblock label {
	display: block;
	margin: 0 0 var(--wp--preset--spacing--1);
	color: var(--wp--preset--color--text-soft);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/*
 * QUARTO GIRO — "Nights" non è più una pillola testuale "Nights: N" (le
 * due versioni precedenti: riquadro pieno, poi pillola bordata) ma un
 * cerchio bianco col solo numero, etichetta "Nights" separata sopra
 * (piccola, come le altre) — dal mockup approvato. Il testo nativo
 * "Nights: N" viene ridotto al solo numero da JS
 * (initSearchNightsBadge() in vikbooking-dom.js, un MutationObserver:
 * il nativo sovrascrive "innerHTML" ad ogni cambio data, non solo alla
 * prima selezione — vedi commento lì). ".vbo-search-nights-wrap" è il
 * contenitore creato dalla stessa funzione; "hidden" finché JS non
 * trova ancora un numero nel testo nativo (nessuna data scelta) — la
 * vecchia regola "#vbjstotnights:empty { display:none }" non serve più,
 * è JS a decidere ora, non lo stato "vuoto" del nodo nativo.
 *
 * "[hidden]" da solo non basta a nascondere il wrapper: stesso bug già
 * documentato per ".vbo-search-guests-remove" (l'attributo "hidden" è
 * un default dello User-Agent stylesheet, priorità più bassa di
 * qualunque regola d'autore — la riga "display:flex" incondizionata lo
 * batteva sempre). Un selettore con "[hidden]" in più vince per
 * specificità, nessun "!important" necessario (il wrapper è nostro,
 * nessuna regola nativa in gioco).
 */
.vbo-search-nights-wrap[hidden] {
	display: none;
}

.vbo-search-nights-wrap {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--1);
}

.vbo-search-nights-label {
	color: var(--wp--preset--color--text-soft);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/*
 * "#vbjstotnights" nel nativo è già selettore per ID (1,0,0): la nostra
 * regola, stessa specificità, vince per ordine di caricamento (foglio
 * del tema dopo quello del plugin) — serve comunque azzerare ogni
 * proprietà del nativo (".../vikbooking_styles.css": "white-space:
 * nowrap; margin:38px 0 10px 12px; display:inline-block; width:100%;
 * font-size:12px; font-weight:bold") perché non ne resti nulla nel
 * cerchio.
 *
 * REGRESSIONE (fix): "#vbjstotnights" NON è un id esclusivo di questa
 * view. Lo stesso template nativo (con lo stesso id, non un id-N per
 * camera) è riusato anche dal box di prenotazione in
 * "views/roomdetails/tmpl/default_bookingform.php" (la pagina Room
 * Details, raggiunta anche da Promotions) — l'unica differenza di markup
 * è che lì il wrapper porta le classi ".vbdivsearch" (+
 * ".vbo-listing-details-divsearch" se in un listing) MA MAI
 * ".vbo-search-mainview", che è aggiunta solo dal template di questa
 * view (vedi "$selform" in "views/vikbooking/tmpl/default.php").
 * Un selettore su "#vbjstotnights" da solo, senza scope, colpiva quindi
 * anche il box di Room Details, disegnando lì un cerchio bianco vuoto
 * permanente: in quel contesto "initSearchGuestsPopover()" in
 * vikbooking-dom.js non gira mai (itera solo ".vbo-search-mainview",
 * vedi init() più in basso nel file JS), quindi non esiste nessun
 * MutationObserver/wrapper "[hidden]" che nasconda il cerchio quando
 * vuoto. Scope a ".vbo-search-mainview" perché il cerchio resti solo
 * dove la logica JS che lo gestisce è realmente presente — per il box
 * di Room Details vedi la regola dedicata più sotto (Fix #3, ricerca
 * "#vbjstotnights" scoped a ".vbo-listing-details-divsearch").
 */
.vbo-search-mainview #vbjstotnights {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 50%;
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 400;
	font-variant-numeric: lining-nums;
	white-space: nowrap;
}

/*
 * Trigger "Rooms & Guests" | Rooms Category | Search — nessun
 * separatore verticale, nessuna distribuzione forzata: lo spazio tra i
 * tre (e con Nights prima di loro) è lo stesso "gap" costante di
 * ".vbo-search-row", il bottone Search è quindi già "subito dopo" Rooms
 * Category, senza alcun margine aggiuntivo da annullare.
 */
.vbo-search-guests-wrap,
.vbo-search-categories {
	flex: 0 0 auto;
	margin: 0;
	position: relative;
}

.vbo-search-submit {
	flex: 0 0 auto;
	margin: 0;
}

/*
 * Trigger "Rooms & Guests" — stessa grammatica label-sopra-valore delle
 * date, stesso principio del trigger "Ospiti" del widget
 * (".vbo-horizsearch-guests-trigger" più sopra in questo file), qui
 * however con nome di classe distinto ("vbo-search-guests-*") perché
 * l'elemento è costruito da una funzione JS diversa
 * (initSearchGuestsPopover(), non initGuestsPopover()) su un markup
 * nativo strutturalmente diverso — riuso del linguaggio visivo, non
 * dello stesso nodo DOM. "border-bottom" sul bottone stesso (non su un
 * wrapper a parte): il trigger è già l'elemento che contiene
 * label+valore, stessa logica dell'underline su ".input-group" per le
 * date più sopra.
 */
.vbo-search-guests-trigger {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: var(--wp--preset--spacing--1);
	padding: 0 0 var(--wp--preset--spacing--1);
	background: none;
	border: none;
	border-bottom: 1px solid var(--wp--preset--color--line);
	font-family: inherit;
	text-align: left;
	cursor: pointer;
}

.vbo-search-guests-label {
	color: var(--wp--preset--color--text-soft);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.vbo-search-guests-value {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--md);
	font-variant-numeric: lining-nums;
}

/*
 * PROBLEMA 2 (giro precedente) — "Rooms Category" era l'unica select con
 * sfondo bianco pieno e bordo (trattamento "box", coerente con Country/
 * Nationality/Gender altrove nel tema), mentre check-in/check-out/
 * trigger "Rooms & Guests" in questa stessa form sono campi "liberi" —
 * solo label sopra, valore+icona sotto, underline invece di un riquadro
 * proprio. Qui uniformata a quello stesso trattamento: nessun bordo
 * pieno/sfondo, font Cormorant/ink come il valore delle date invece di
 * Inter/sm della variante "box" — la freccina SVG terracotta (già
 * corretta due giri fa) resta, riposizionata "a filo" invece che dentro
 * un padding pensato per un riquadro bordato. "border-bottom" (aggiunto
 * in questo giro) allinea "Rooms Category" alla stessa grammatica
 * "underline" ora usata per tutti i campi della riga, al posto dei
 * vecchi separatori verticali. "#vbo-formcategories" vince per ID sul
 * nativo ".vbdivsearch .vb-search-inner select" (0,2,1) — non serve
 * "width", il nativo forza comunque ".../select { width:auto
 * !important }" su questo stesso selettore (vedi nota residua già
 * documentata nei giri precedenti per Adults/Children): qui è anzi
 * l'effetto voluto, la select si allarga solo quanto la sua opzione più
 * lunga, come un valore di testo qualunque.
 */
#vbo-formcategories {
	height: auto;
	padding: 0 var(--wp--preset--spacing--5) var(--wp--preset--spacing--1) 0;
	border: none;
	border-bottom: 1px solid var(--wp--preset--color--line);
	border-radius: 0;
	background-color: transparent;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath fill='%232C2C2C' d='M4 5 0 0h8z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 8px 5px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--ink);
	cursor: pointer;
}

#vbo-formcategories:focus {
	outline: none;
	box-shadow: 0 0 0 3px var(--vik-accent-15);
}

.vbo-search-mainview .vbformcategories {
	display: block;
	margin: 0 0 var(--wp--preset--spacing--1);
	color: var(--wp--preset--color--text-soft);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/*
 * Bottone Search — "padding" nel nativo è forzato con "!important"
 * (".vbo-search-submit .btn { padding: 10px 50px !important }"), quindi
 * non sovrascrivibile senza violare la regola del tema "mai !important"
 * — resta il padding nativo (già di peso comparabile alle altre CTA
 * primarie).
 */
.vbo-search-submit .btn,
.vbo-search-submit .vbo-pref-color-btn {
	width: 100%;
}

/*
 * ".vbo-search-submit .btn" nel CSS nativo del plugin (0,2,0 — due
 * classi) ha priorità sulla nostra ".vbo-pref-color-btn" (0,1,0) a
 * parità di proprietà "background-color", indipendentemente dall'ordine
 * di caricamento dei fogli di stile: senza questa regola il bottone
 * "Book Now" di Room Details e Search Form resta blu nativo invece che
 * terracotta (verificato con Playwright). Stessa specificità (0,2,0)
 * del selettore nativo, caricato dopo: qui vince per ordine.
 */
.vbo-search-submit .btn {
	border-radius: var(--vik-radius);
	border-color: var(--wp--preset--color--accent);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	letter-spacing: 0.02em;
}

.vbo-search-submit .btn:hover {
	border-color: var(--wp--preset--color--accent-dark);
	background-color: var(--wp--preset--color--accent-dark);
	color: var(--wp--preset--color--white);
}

/*
 * CORREZIONE 4 (mockup) — il popover "Rooms & Guests" nel mockup appare
 * fluttuante, scollegato dal trigger. Qui "position:fixed" con
 * top/left calcolati da JS (positionPanel(), riusata 1:1 da quella già
 * scritta per il popover "Ospiti" del widget standard — stesso identico
 * problema, stessa soluzione: un antenato con "overflow:hidden"
 * taglierebbe un pannello "absolute" appena esce dal proprio box,
 * "fixed" lo sottrae a quell'overflow). "[hidden]" qui NON necessita
 * "!important" (a differenza di ".vbo-horizsearch-guests-panel[hidden]"
 * più sopra): quella regola doveva vincere su un "display:flex" nativo
 * scoped con "> .vbmodhorsearchrac" — qui il pannello (".vbo-search-num-
 * racblock", spostato da JS dentro ".vbo-search-guests-wrap") non è più
 * discendente diretto di ".vb-search-inner", quindi il nativo
 * equivalente (".vbdivsearch .vb-search-inner > .vbo-search-num-racblock
 * { display:flex }") non lo raggiunge più — verificato con Playwright,
 * "[hidden]" senza "!important" nasconde correttamente il pannello.
 */
.vbo-search-guests-panel {
	position: fixed;
	z-index: 100;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
	box-sizing: border-box;
	width: max-content;
	min-width: 320px;
	max-width: calc(100vw - 32px);
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	padding: var(--wp--preset--spacing--4);
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--vik-radius);
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12);
	color: var(--wp--preset--color--ink);
}

.vbo-search-guests-panel[hidden] {
	display: none;
}

/*
 * "Rooms" (select#vbo-roomsnum, 1-5) — nascosta per intero: il conteggio
 * camere è gestito solo da "+ Aggiungi camera"/"×" nel mockup, mai da una
 * select visibile. Resta nel DOM, letta/scritta via JS
 * (initSearchGuestsPopover() in vikbooking-dom.js) e inviata col form.
 */
.vbo-search-num-rooms {
	display: none;
}

#vbo-search-num-aduchild-block {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
	width: 100%;
	float: none;
}

/*
 * Entry-camera — una per camera, separata dalla successiva da un
 * bordo inferiore sottile (mai un riquadro proprio come nel nativo).
 * "position:relative" ancora il bottone "×" (iniettato da JS) in alto a
 * destra della entry. "flex-wrap:wrap" + "Room N" a "flex-basis:100%"
 * (regola sotto) mette il nome camera su una riga propria, Adults/
 * Children sulla riga successiva, affiancati — stessa tecnica già
 * validata nel giro precedente per questo elemento.
 */
.vbo-search-num-aduchild-entry {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--2) var(--wp--preset--spacing--5);
	padding-bottom: var(--wp--preset--spacing--3);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/*
 * "Room N" — titolo della singola camera nel popover (non una label di
 * campo come "ADULTS"/"CHILDREN" sotto): Cormorant Garamond, peso
 * medio, colore ink, come da mockup approvato. Trattamento diverso da
 * quello scelto nel giro precedente (uppercase Inter) perché lì "Room N"
 * era una label INLINE accanto ad Adults/Children nella riga espansa;
 * qui è l'intestazione di un blocco a sé nel popover — stesso principio
 * del tema ("i pattern non uniformano ciecamente ogni etichetta", vedi
 * anche la differenza analoga tra "categoria camera" nelle card e le
 * label dei filtri) ma contesto diverso, trattamento diverso.
 * "font-variant-numeric": bug cifre oldstyle di Cormorant Garamond, il
 * numero della camera ("Room 1", "Room 2"…) ne è soggetto come ogni
 * altro numero nel tema.
 */
.vbo-search-roomnum {
	flex: 0 0 100%;
	padding-right: var(--wp--preset--spacing--6);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	font-variant-numeric: lining-nums;
	box-sizing: border-box;
}

.vbo-search-num-adults-entry,
.vbo-search-num-children-entry {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--1);
}

.vbo-search-num-adults-entry-label,
.vbo-search-num-children-entry-label {
	display: block;
	margin: 0;
	color: var(--wp--preset--color--text-soft);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/*
 * Stepper +/- Adults/Children — costruito da JS
 * (enhanceCounterSelect() in vikbooking-dom.js), stesso linguaggio
 * visivo dello stepper quantità già in uso per gli upsell di prenotazione
 * (".vbo-upsell-qty-stepper" più sotto in questo file: bordo sottile,
 * bottoni 32-33px, valore centrale con divisori) — qui adattato a
 * un'altezza leggermente più bassa per stare nel popover senza
 * appesantirlo. La "<select>" nativa resta nel DOM (necessaria per
 * l'invio del form) ma invisibile: il valore mostrato è lo "<span>"
 * generato da JS.
 */
.vbo-search-guests-stepper {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--vik-radius);
}

.vbo-search-guests-stepper-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 36px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.vbo-search-guests-stepper-btn:hover:not(:disabled) {
	background-color: var(--wp--preset--color--background-alt);
}

.vbo-search-guests-stepper-btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.vbo-search-guests-stepper-value {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 36px;
	border-left: 1px solid var(--wp--preset--color--line);
	border-right: 1px solid var(--wp--preset--color--line);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--ink);
	font-variant-numeric: lining-nums;
}

.vbo-search-guests-stepper select {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/*
 * Bottone "×" (rimuovi camera) — iniettato da JS
 * (enhanceSearchRoomEntry()), nascosto quando resta una sola camera
 * (updateSearchGuestsControlsState() in vikbooking-dom.js, mai via CSS:
 * la visibilità dipende dal numero di camere corrente, non da un
 * selettore statico). "[hidden]" da solo NON basta: è un default
 * dello User-Agent stylesheet, priorità più bassa di qualunque regola
 * d'autore — la riga sotto ("display:flex" incondizionato) lo batteva
 * sempre, "hidden=true" restava impostato ma il bottone restava visibile
 * (osservato con Playwright su 1 sola camera: "hidden:true" nel DOM,
 * "display:flex" nel computed style). Stesso principio già documentato
 * per ".vbo-horizsearch-guests-panel[hidden]" più sopra in questo file,
 * ma lì serviva anche "!important" per battere un "display:flex" NATIVO
 * di pari specificità — qui non c'è alcuna regola nativa in gioco (il
 * bottone è nostro), quindi basta l'attributo "[hidden]" in più nel
 * selettore per vincere in specificità, nessun "!important" necessario.
 */
.vbo-search-guests-remove[hidden] {
	display: none;
}

.vbo-search-guests-remove {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1;
	cursor: pointer;
}

.vbo-search-guests-remove:hover {
	color: var(--wp--preset--color--accent);
}

/*
 * Footer popover — "+ Aggiungi camera" (link testuale, accento) e
 * "Fatto" (CTA piena, stessa terracotta del bottone Search) come da
 * mockup.
 */
.vbo-search-guests-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--3);
	padding-top: var(--wp--preset--spacing--1);
}

.vbo-search-guests-add {
	padding: 0;
	background: none;
	border: none;
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	cursor: pointer;
}

.vbo-search-guests-add:hover:not(:disabled) {
	color: var(--wp--preset--color--accent-dark);
}

.vbo-search-guests-add:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.vbo-search-guests-done {
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--5);
	background-color: var(--wp--preset--color--accent);
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: var(--vik-radius);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	cursor: pointer;
}

.vbo-search-guests-done:hover {
	background-color: var(--wp--preset--color--accent-dark);
	border-color: var(--wp--preset--color--accent-dark);
}

.vbo-guests-allowed-policy,
.vbo-booking-modification-msg {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--text-soft);
}

/*
 * Responsive — breakpoint 1023px, non i consueti 767px del tema
 * ("<768px mobile"). Riga unica e "flex-wrap:nowrap" (voluti: niente
 * "spazio residuo" nel form, vedi sopra) significano che 6 campi
 * (Check-in, Check-out, Nights, Rooms & Guests, Rooms Category, Search)
 * non hanno dove "andare a capo" da soli sotto una certa larghezza —
 * misurato con Playwright su tablet (820px): il bottone Search finiva a
 * 872px, fuori sia dal box del form (756px) sia dal viewport stesso,
 * overflow orizzontale silenzioso (nessuno scroll visibile, il
 * contenuto usciva semplicemente dal contenitore). Sotto i 1024px si
 * passa quindi allo stesso stack verticale del mobile — stessa
 * decisione già presa in un giro precedente per lo stesso genere di
 * problema (griglia troppo stretta per il contenuto a una certa
 * larghezza intermedia). Il popover "Rooms & Guests" resta invece
 * ancorato in stile desktop fino a 767px (non toccato in questo giro,
 * vedi ".vbo-search-guests-panel" più sotto/isSearchGuestsMobileLayout()
 * in vikbooking-dom.js): a 768–1023px lo spazio orizzontale per un
 * pannello ~320px ancorato al trigger resta ampiamente sufficiente.
 * L'underline (border-bottom) sotto ogni valore non richiede alcuna
 * conversione qui — a differenza dei separatori verticali dei giri
 * precedenti (che dovevano diventare orizzontali in colonna), un bordo
 * già orizzontale resta identico impilato.
 */
@media (max-width: 1023px) {
	/*
	 * Selettore a 3 classi (".vbdivsearch.vbo-search-mainview .vbo-search-
	 * row", stesso trucco della regola desktop): quella regola desktop
	 * NON è dentro una media query, quindi resta sempre attiva — anche
	 * sotto i 1023px. Con una sola classe qui (0,1,0) perdeva contro il
	 * suo "align-items:flex-end" (0,3,0), che sotto "flex-direction:
	 * column" diventa allineamento ORIZZONTALE: tutti i campi finivano
	 * incollati a destra invece di stare a piena larghezza a sinistra
	 * (osservato con Playwright — "CHECK-IN DATE" a destra dello
	 * schermo). Serve specificità pari o superiore, non semplicemente
	 * "dopo" nel file.
	 */
	.vbdivsearch.vbo-search-mainview .vbo-search-row {
		flex-direction: column;
		align-items: stretch;
	}

	/*
	 * "Nights" — senza questa regola il cerchio (dentro un wrapper senza
	 * larghezza propria) si stira a piena riga per via di "align-items:
	 * stretch" sopra, e "align-items:center" interno lo centra a metà
	 * riga invece di restare allineato a sinistra come gli altri campi.
	 */
	.vbo-search-nights-wrap {
		align-self: flex-start;
	}
}

/*
 * Popover "Rooms & Guests" come "bottom sheet" — breakpoint separato,
 * 767px (non i 1023px della griglia sopra): qui lo spazio orizzontale
 * resta il criterio decisivo, non la larghezza dei campi della riga.
 * A 768–1023px (tablet) un pannello ~320px ancorato al trigger ha
 * ampio spazio, resta quindi in stile desktop — invariato in questo
 * giro, "isSearchGuestsMobileLayout()" in vikbooking-dom.js controlla
 * ancora lo stesso identico "(max-width: 767px)". "positionPanel()"
 * viene saltata sotto questo breakpoint (nella stessa funzione JS), che
 * ripulisce anche "top"/"left" inline lasciati da un'apertura
 * precedente su desktop (resize con popover aperto): niente da battere
 * qui via "!important", lo "style" inline non c'è proprio più quando si
 * entra in questo breakpoint con il pannello aperto.
 */
@media (max-width: 767px) {
	.vbo-search-guests-panel {
		position: fixed;
		inset: auto 0 0 0;
		width: 100%;
		max-width: 100%;
		max-height: 85vh;
		border-radius: var(--vik-radius) var(--vik-radius) 0 0;
		border-bottom: none;
		box-shadow: 0 -16px 32px rgba(0, 0, 0, 0.16);
	}

	.vbo-search-guests-backdrop {
		position: fixed;
		inset: 0;
		z-index: 99;
		background-color: rgba(30, 30, 30, 0.4);
	}

	.vbo-search-guests-backdrop[hidden] {
		display: none;
	}
}

body.vbo-search-guests-lock-scroll {
	overflow: hidden;
}
/* -----------------------------------------------------------
   Rooms List — shortcode [vikbooking view="roomslist"]
   ----------------------------------------------------------- */

/*
 * ".vb-shortcode-wrap" avvolge automaticamente l'output di QUALSIASI
 * shortcode [vikbooking ...] (Search Form, Rooms List, Booking Details,
 * Promotions, Room Details) — vedi inc/vikbooking-shortcode-wrap.php,
 * agganciato a "do_shortcode_tag". Prima questo padding era legato alla
 * classe "vb-roomslist-shortcode", presente solo sul blocco Group
 * aggiunto a mano nella pagina demo "Le nostre camere" (vedi
 * inc/rooms-list-style.php e skin-terra/assets/demo/demo-content.xml):
 * le altre pagine interne del flusso di prenotazione non hanno quel
 * wrapper e restavano senza padding. Ora si applica ovunque compaia lo
 * shortcode, senza bisogno di un blocco Group dedicato per pagina.
 *
 * Il contenuto della pagina (wp:post-content, layout:"constrained")
 * riceve già un max-width dal supporto nativo di WordPress
 * (var(--wp--style--global--content-size), cioè il "contentSize" del
 * tema, 1200px), ma SENZA alcun padding proprio: sotto i 1200px di
 * larghezza viewport non c'è margine disponibile per il centraggio,
 * quindi la riga tocca i bordi del viewport (verificato: a 1024px il
 * blocco misura 1024px, edge-to-edge). Qui si aggiunge solo il padding
 * orizzontale mancante, riusando la stessa scala spacing già definita
 * nel tema per il padding di pagina (spacing--5/6/8 = 20/32/64px, vedi
 * CLAUDE.md "Padding orizzontale pagina") — non un nuovo valore.
 * box-sizing:border-box tiene il padding dentro al max-width esistente
 * invece di allargarlo. Non scoped a lista-01/lista-02: la causa è nel
 * wrapper condiviso da entrambe le varianti, lista-01 ha semplicemente
 * meno superficie a tinta unita (niente immagine a piena riga) che la
 * rende meno evidente.
 */
.vb-shortcode-wrap {
	box-sizing: border-box;
	padding-left: var(--wp--preset--spacing--5);
	padding-right: var(--wp--preset--spacing--5);
	margin-top: var(--wp--preset--spacing--5);
}

@media (min-width: 768px) {
	.vb-shortcode-wrap {
		padding-left: var(--wp--preset--spacing--6);
		padding-right: var(--wp--preset--spacing--6);
	}
}

@media (min-width: 1024px) {
	.vb-shortcode-wrap {
		padding-left: var(--wp--preset--spacing--8);
		padding-right: var(--wp--preset--spacing--8);
	}
}

.vblistcontainer {
	margin-top: var(--wp--preset--spacing--6);
	margin-bottom: var(--wp--preset--spacing--8);
}

.vblist {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--6);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 768px) {
	.vblist {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.vblist {
		grid-template-columns: repeat(3, 1fr);
	}
}

.room_result {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--vik-radius);
	overflow: hidden;
}

.room_result-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.vbimglistdiv .vblistimg {
	display: block;
	width: 100%;
	height: 280px;
	object-fit: cover;
}

.vblistroomblock {
	padding: var(--wp--preset--spacing--4);
}

.vblistroomcat {
	display: inline-block;
	margin-bottom: var(--wp--preset--spacing--2);
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.vbrowcname {
	margin: 0 0 var(--wp--preset--spacing--2);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
}

.vbrowcname a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.vbrowcdescr {
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--sm);
}

.vbcontdivtot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: var(--wp--preset--spacing--4);
	padding-top: var(--wp--preset--spacing--4);
	border-top: 1px solid var(--wp--preset--color--line);
}

.room_cost {
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 600;
}

.vbliststartfrom {
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--xs);
}

/* -----------------------------------------------------------
   Rooms List — modalità "Lista" (.vblistcontainer-list)
   Layout a riga orizzontale: immagine fissa | testo | separatore |
   prezzo+CTA. Le regole sopra (senza prefisso) restano quelle che
   erano state scritte prima che questa distinzione fosse chiara e di
   fatto valgono solo per la Lista (la Griglia, .vblistcontainer-grid,
   ha proprie regole native più specifiche che vincono già oggi — vedi
   mod_vikbooking_rooms.css/vikbooking_styles.css, es. ".vblistcontainer-
   grid .vblist { display:flex }"). Qui non le modifichiamo: aggiungiamo
   solo regole più specifiche, scoped a .vblistcontainer-list, cosi la
   Griglia resta esattamente com'era (non tutte le proprietà di quelle
   regole di base sono ridefinite lato nativo per la Griglia — es. gap/
   list-style/margin di .vblist — rischieremmo di romperla toccandole).
   ----------------------------------------------------------- */
.vblistcontainer-list .vblist {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.vblistcontainer-list .room_result {
	border: none;
	border-bottom: 1px solid var(--wp--preset--color--line);
	border-top: 1px solid var(--wp--preset--color--line);
	border-radius: 0;
	overflow: visible;
	margin: 22px 0 22px 0;
}

.vblistcontainer-list .room_result:first-child {
	border-top: 1px solid var(--wp--preset--color--line);
}

/*
 * flex-wrap: nowrap — .room_result-inner arriva nativo con
 * "display:flex; flex-wrap:wrap" (vikbooking_styles.css, regola di
 * base non scoped). Con descrizioni brevi passava inosservato (tutto
 * stava già su una riga), ma con una descrizione lunga il blocco
 * .vblistroomblock (flex-grow:1) reclama tutta la larghezza della riga
 * come "riga 1", e .vbcontdivtot va a capo su una "riga 2" sotto di
 * esso invece di restare affiancato (verificato con Playwright
 * iniettando una descrizione lunga: .vbcontdivtot finiva con lo stesso
 * "left" di .vblistroomblock, sotto al suo "bottom"). I 3 blocchi
 * devono restare sempre affiancati indipendentemente dalla lunghezza
 * del testo: qui disattivato esplicitamente.
 */
.vblistcontainer-list .room_result-inner {
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	height: auto;
}

/*
 * Fix B (audit): .vblistroomblock arriva ancora con "width:80%;
 * float:left; min-height:162px; border-right:2px solid" dal CSS nativo
 * del plugin — pensati per il vecchio layout a due colonne flottanti
 * (contenuto 80% | prezzo 20%, affiancati con i float). float non ha
 * effetto sui figli flex (.room_result-inner è flex), ma "width:80%"
 * restava attivo e tagliava il blocco testo, lasciando ~43px di spazio
 * vuoto + una riga grigia prima del bordo destro della card (misurato
 * con Playwright: blocco 334px di 377px di card). Resettati qui.
 *
 * flex-wrap: nowrap — stesso problema di .room_result-inner sopra, ma
 * un livello più in profondità: nativamente ".vblistroomblock" è a sua
 * volta "flex-wrap:wrap" tra .vbimglistdiv e .vbo-info-room. Con testo
 * lungo l'immagine "vince" la riga 1 e il blocco testo va a capo sotto
 * di essa (sintomo "titolo/descrizione scendono sotto l'immagine").
 */
.vblistcontainer-list .vblistroomblock {
	display: flex;
	flex-wrap: nowrap;
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	min-height: 0;
	float: none;
	border-right: none;
	padding: var(--wp--preset--spacing--6) var(--wp--preset--spacing--6) var(--wp--preset--spacing--6) 0;
}

.vblistcontainer-list .vbimglistdiv {
	position: relative;
	flex: 0 0 240px;
	width: 240px;
}

.vblistcontainer-list .vbimglistdiv .vblistimg {
	width: 100%;
	height: 100%;
	margin: 0;
}

.vblistcontainer-list .vbo-info-room {
	flex: 1 1 auto;
	min-width: 0;
	padding: var(--wp--preset--spacing--6) 0 var(--wp--preset--spacing--6) var(--wp--preset--spacing--6);
}

.vblistcontainer-list .vbdescrlistdiv {
	padding: 0;
	overflow: visible;
}

/*
 * Descrizione troncata a 2 righe con ellissi — senza, una descrizione
 * lunga espande l'altezza della riga in modo incoerente rispetto alle
 * altre camere della lista.
 */
.vblistcontainer-list .vbrowcdescr {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
}

/*
 * Fix E (audit): riga amenities non stilizzata — badge circolari
 * bordati, stessa convenzione "pill" (border-radius:100px) già usata
 * altrove nel tema per badge/elementi rotondi. L'icona resta quella
 * reale del plugin (fas fa-wifi ecc., dentro .vbo-icn-carat): non
 * sostituita con testo, solo incorniciata.
 */
.vblistcontainer-list .roomlist_carats {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
	margin-top: var(--wp--preset--spacing--3);
	padding: 0;
}

.vblistcontainer-list .vbo-room-carats {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
	margin: 0;
}

.vblistcontainer-list .roomlist_carats .vbo-room-carat,
.vblistcontainer-list .room_carats .vbo-room-carat {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 30px;
	margin: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 100px;
}

/*
 * Le caratteristiche configurate senza icona in VikBooking (testo libero,
 * es. "Vista mare/panoramica") arrivano come testo semplice dentro
 * .vbo-room-carat, senza l'icona .vbo-icn-carat — verificato in pagina
 * (4 delle 7 camere demo). Un cerchio fisso 40x40 (variante con icona,
 * sotto) le farebbe traboccare/sovrapporre al badge accanto: qui restano
 * una pill a larghezza automatica invece che un cerchio.
 */
.vblistcontainer-list .roomlist_carats .vbo-room-carat:has(.vbo-icn-carat),
.vblistcontainer-list .room_carats .vbo-room-carat:has(.vbo-icn-carat) {
	width: 30px;
}

.vblistcontainer-list .roomlist_carats .vbo-room-carat:not(:has(.vbo-icn-carat)),
.vblistcontainer-list .room_carats .vbo-room-carat:not(:has(.vbo-icn-carat)) {
	padding: 0 var(--wp--preset--spacing--4);
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--xs);
	white-space: nowrap;
}

.vblistcontainer-list .vbo-icn-carat {
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--sm);
}

/*
 * Fix D (audit): le icone di capienza ospiti sono spostate qui via JS
 * (relocateRoomsListCapacity() in vikbooking-dom.js), accanto alle
 * amenities — nel markup nativo vivono dentro .vbcontdivtot (colonna
 * prezzo), un ramo del DOM diverso da .roomlist_carats: non
 * raggiungibili solo via CSS perché non sono fratelli.
 *
 * Colore: la regola nativa ".vbrowroomcapacity i { color: var(--vbo-
 * pref-textcolor) }" (0,1,1 — una classe + un tipo) vince sulla nostra
 * ".vbo-pref-color-text" (0,1,0) per specificità, risultando nel blu di
 * default del plugin invece dell'accento del tema (verificato in
 * pagina). Qui la specificità (0,2,1) è sufficiente a batterla senza
 * bisogno di !important. Non ridefiniamo --vbo-pref-textcolor a livello
 * globale: è usata in molte altre view del plugin non ancora auditate,
 * e cambiarla ovunque rischierebbe effetti collaterali fuori scope.
 */
.vblistcontainer-list .vbrowroomcapacity {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--1);
	margin: 0;
	text-align: left;
}

.vblistcontainer-list .vbo-room-carats + .vbrowroomcapacity {
	padding-left: var(--wp--preset--spacing--3);
	border-left: 1px solid var(--wp--preset--color--line);
}

.vblistcontainer-list .vbrowroomcapacity i {
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--sm);
}

/*
 * Fix C (audit): l'allineamento verticale centrato di prezzo+CTA non
 * deve dipendere dal "flex:1" nativo di .vbcontdivtot (pensato per il
 * vecchio layout a due colonne flottanti, non per questo layout a
 * riga) — reso esplicito qui con le nostre proprietà flex.
 */
.vblistcontainer-list .vbcontdivtot {
	position: static;
	float: none;
	left: 0;
	flex: 0 0 auto;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	margin: 0;
	padding: 0 var(--wp--preset--spacing--6);
	border-top: none;
	border-left: 1px solid var(--wp--preset--color--line);
}

.vblistcontainer-list .vbdivtot {
	float: none;
	width: 100%;
}

.vblistcontainer-list .vbdivtotinline {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
}

.vblistcontainer-list .vbsrowprice {
	padding: 0;
}

.vblistcontainer-list .vbselectordiv {
	width: auto;
	margin: 0;
	padding: 0;
	border-top: none;
}

.vblistcontainer-list .vbselectr {
	width: auto;
}

/* Sotto i 768px una riga orizzontale stretta non è leggibile: la lista
   torna a impilarsi verticalmente come una card, stesso principio già
   usato per il widget Search Form in questo file. */
@media (max-width: 767px) {
	.vblistcontainer-list .room_result-inner {
		flex-direction: column;
	}

	.vblistcontainer-list .vblistroomblock {
		flex-direction: column;
		padding: 0;
	}

	.vblistcontainer-list .vbimglistdiv {
		flex-basis: auto;
		width: 100%;
		height: 200px;
	}

	.vblistcontainer-list .vbo-info-room {
		padding: var(--wp--preset--spacing--5);
	}

	.vblistcontainer-list .vbcontdivtot {
		align-self: auto;
		justify-content: flex-start;
		width: 100%;
		padding: var(--wp--preset--spacing--5);
		border-left: none;
		border-top: 1px solid var(--wp--preset--color--line);
	}
}

/* -----------------------------------------------------------
   Rooms List — modalità "Lista", variante grafica 2 (lista-02)
   Seconda opzione grafica per .vblistcontainer-list, attivata dal
   parametro tema "Stile Lista" (Customizer, sezione "Rooms List" —
   sovrascrivibile per singola pagina dall'Inspector del blocco Group
   che avvolge lo shortcode, classe "vb-roomslist-shortcode" — vedi
   inc/rooms-list-style.php). Non tocca le regole sopra (lista-01) né
   la modalità Griglia nativa (.vblistcontainer-grid): tutto scoped
   sotto ".rooms-list-style--lista-02".

   Layout: immagine a piena larghezza della riga, card bianca
   "flottante" in overlap parziale ancorata in alto a destra
   sull'immagine. Nel markup nativo titolo/descrizione/amenities
   (.vbo-info-room) e prezzo/CTA (.vbcontdivtot) vivono in due rami del
   DOM diversi, entrambi fratelli — non discendenti — di
   .vbimglistdiv: non raggruppabili in un unico box "flottante"
   ancorato all'immagine solo via CSS. Il contenuto viene quindi
   riassemblato lato client in un unico wrapper .vbo-lista02-card,
   figlio di .vbimglistdiv — vedi applyRoomsListLista02() in
   assets/js/vikbooking-dom.js. Il CSS qui sotto veste/posiziona quel
   wrapper già assemblato; se il JS non gira per qualche motivo, il
   contenuto nativo resta comunque visibile nella posizione originale
   (le regole che lo nascondono sono scoped alla classe
   "vbo-lista02-ready" che il JS stesso applica solo a spostamento
   riuscito, mai incondizionatamente).
   ----------------------------------------------------------- */
.rooms-list-style--lista-02 .vblistcontainer-list .vblist {
	gap: var(--wp--preset--spacing--7);
}

.rooms-list-style--lista-02 .vblistcontainer-list .room_result {
	margin: 0 auto;
	border: none;
	border-radius: 0;
	overflow: visible;
	max-width: 850px;
}

.rooms-list-style--lista-02 .vblistcontainer-list .room_result:first-child {
	border-top: none;
}

.rooms-list-style--lista-02 .vblistcontainer-list .room_result-inner {
	display: block;
}

.rooms-list-style--lista-02 .vblistcontainer-list .vblistroomblock {
	display: block;
	padding: 0;
}

.rooms-list-style--lista-02 .vblistcontainer-list .vbimglistdiv {
	position: relative;
	width: 100%;
	height: 340px;
}

@media (min-width: 1024px) {
	.rooms-list-style--lista-02 .vblistcontainer-list .vbimglistdiv {
		height: 400px;
	}
}

/*
 * L'elemento <img> occupa solo il 70% della riga (non .vbimglistdiv,
 * che resta 100%: deve restare il containing block a piena riga per
 * .vbo-lista02-card qui sotto, così le percentuali left/width della
 * card sono relative all'intera riga e non alla sola area immagine —
 * vedi commento su .vbo-lista02-card).
 */
/*
 * 82.35% = 70/85*100: la riga non ha più una "zona morta" a destra
 * della card (prima 85%-100%, sfondo pagina dentro al contenitore) —
 * qui tutte le percentuali orizzontali sono riscalate dividendo per
 * 0.85, cosi il bordo destro della card (prima all'85% della riga)
 * coincide ora col vero bordo destro della riga (100%), mantenendo lo
 * stesso rapporto relativo tra immagine/overlap/sconfinamento. Il
 * wrapper (.vb-roomslist-shortcode) resta quello standard del sito,
 * non toccato: era già centrato correttamente, il "non centrato"
 * percepito era lo spazio vuoto qui rimosso.
 */
.rooms-list-style--lista-02 .vblistcontainer-list .vbimglistdiv .vblistimg {
	width: 82.3529%;
	height: 100%;
	margin: 0;
	border-radius: var(--vik-radius);
	object-fit: cover;
}

/*
 * Icona galleria nativa (.vbmodalrdetails): nel CSS del plugin è
 * "position:absolute; top:5px; right:5px" — ancorata al bordo destro
 * del SUO containing block, che qui è .vbimglistdiv (100% riga, non
 * l'immagine). Con l'immagine ridotta al 70% l'icona finirebbe quindi
 * ancorata al bordo destro della riga intera, ben oltre l'immagine
 * vera. Riancorata qui in alto a sinistra, sopra l'immagine.
 */
.rooms-list-style--lista-02 .vblistcontainer-list .vbmodalrdetails {
	top: 12px;
	left: 12px;
	right: auto;
}

/*
 * Contenitori nativi svuotati dal JS (il loro contenuto è stato
 * spostato dentro .vbo-lista02-card): nascosti solo a spostamento
 * riuscito, vedi commento della sezione sopra.
 */
.rooms-list-style--lista-02 .vbo-lista02-ready .vbo-info-room,
.rooms-list-style--lista-02 .vbo-lista02-ready .vbcontdivtot {
	display: none;
}

/*
 * Geometria orizzontale in percentuale sulla riga (non px fissi, per
 * restare proporzionata a viewport diversi), riscalata (÷0.85) insieme
 * a .vblistimg cosi il bordo destro della card coincide col vero bordo
 * destro della riga — vedi commento su .vblistimg sopra per il
 * dettaglio del calcolo. Immagine 0-82.35%, card 64.71-100% (35.29% di
 * larghezza): overlap sull'immagine 64.71-82.35%, sconfinamento oltre
 * il bordo destro dell'immagine 82.35-100%, stesso rapporto 15:15 di
 * prima. "left"/"width" sono relative a .vbimglistdiv, che è il
 * containing block e resta a piena riga (100%) apposta.
 *
 * Verticalmente resta invece dentro l'altezza dell'immagine: top fisso
 * (24px) + altezza contenuto (~220px) sta sempre entro i 340-400px di
 * .vbimglistdiv, nessuno sconfinamento sopra/sotto voluto qui.
 */
.vbo-lista02-card {
	box-sizing: border-box;
	position: absolute;
	top: 24px;
	left: 64.7059%;
	width: 35.2941%;
	z-index: 3;
	padding: var(--wp--preset--spacing--4);
	background-color: var(--wp--preset--color--white);
	border-radius: var(--vik-radius);
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18);
}

.vbo-lista02-card .vbdescrlistdiv {
	padding: 0;
	overflow: visible;
}

.vbo-lista02-card .vbrowcname {
	margin: 0 0 var(--wp--preset--spacing--2);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
}

.vbo-lista02-card .vbrowcname a {
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

.vbo-lista02-meta {
	display: flex;
	align-items: center;
	margin-bottom: var(--wp--preset--spacing--2);
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--xs);
}

.vbo-lista02-meta .vbrowroomcapacity {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--1);
	margin: 0;
}

.vbo-lista02-meta .vbrowroomcapacity i {
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--sm);
}

.vbo-lista02-meta .vblistroomcat {
	margin: 0;
	padding-left: var(--wp--preset--spacing--3);
	border-left: 1px solid var(--wp--preset--color--line);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.vbo-lista02-meta .vbrowroomcapacity + .vblistroomcat {
	margin-left: var(--wp--preset--spacing--3);
}

/*
 * Descrizione troncata a 2 righe con ellissi — stesso fix già
 * applicato in lista-01 (vedi sopra), qui a 2 righe invece di 3 per
 * lasciare più spazio a meta/amenities/prezzo dentro la card più
 * stretta: senza, una descrizione lunga espanderebbe l'altezza della
 * card cambiando il punto di overlap sull'immagine da camera a
 * camera.
 */
.vbo-lista02-card .vbrowcdescr {
	display: -webkit-box;
	overflow: hidden;
	margin-top: var(--wp--preset--spacing--4);
	margin-bottom: var(--wp--preset--spacing--3);
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--xs);
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* Badge circolare bordato — stessa convenzione già usata in lista-01
   (coerenza tra le due varianti), non lo stile piatto del riferimento.
   Diametro ridotto (24px invece di 30px) per restare coerente con la
   card più compatta di questa variante. */
.vbo-lista02-card .vbo-room-carats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
	margin: 0 0 var(--wp--preset--spacing--3);
}

.vbo-lista02-card .vbo-room-carats .vbo-room-carat {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 24px;
	margin: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 100px;
}

/*
 * Stessa distinzione già applicata in lista-01 (vedi sopra): le
 * caratteristiche senza icona configurata in VikBooking arrivano come
 * testo libero dentro .vbo-room-carat, senza figlio .vbo-icn-carat — un
 * cerchio fisso 30x30 (variante con icona, sotto) le farebbe
 * sovrapporre/troncare invece di restare leggibili.
 */
.vbo-lista02-card .vbo-room-carats .vbo-room-carat:has(.vbo-icn-carat) {
	width: 24px;
}

.vbo-lista02-card .vbo-room-carats .vbo-room-carat:not(:has(.vbo-icn-carat)) {
	padding: 0 var(--wp--preset--spacing--3);
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--xs);
	white-space: nowrap;
}

.vbo-lista02-card .vbo-icn-carat {
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--xs);
}

.vbo-lista02-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--3);
	padding-top: var(--wp--preset--spacing--2);
	border-top: 1px solid var(--wp--preset--color--line);
}

.vbo-lista02-footer .vbsrowpricediv {
	padding: 0;
}

.vbo-lista02-footer .room_cost {
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
}

.vbo-lista02-footer .vbliststartfrom {
	display: block;
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--xs);
}

.vbo-lista02-footer .vbselectordiv,
.vbo-lista02-footer .vbselectr {
	width: auto;
	margin: 0;
	padding: 0;
	border: none;
}

/* Bottone outline coerente con gli altri outline del tema, non il
   verde pieno del layout di riferimento. */
.vbo-lista02-footer .vbselectr a,
.vbo-lista02-footer .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: var(--vik-radius);
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: none;
	white-space: nowrap;
}

.vbo-lista02-footer .vbselectr a:hover,
.vbo-lista02-footer .btn:hover {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
}

/* Sotto i 768px l'overlap non è leggibile: fallback impilato, immagine
   sopra a piena larghezza e card sotto senza overlap — stesso principio
   già usato per lista-01 e per il widget Search Form in questo file. */
@media (max-width: 767px) {
	/*
	 * .vbo-lista02-card resta figlio DOM di .vbimglistdiv (JS invariato
	 * tra desktop e mobile): qui passa da position:absolute a static,
	 * quindi partecipa al flusso normale dentro .vbimglistdiv. Se
	 * quest'ultimo mantenesse un'altezza fissa (come su desktop, dove
	 * serve a inquadrare l'immagine sotto la card assoluta) la card
	 * "impilata" sforerebbe quell'altezza senza spingerla — la riga
	 * successiva finirebbe sovrapposta. Il vincolo di altezza si sposta
	 * quindi sull'<img> stesso; .vbimglistdiv resta ad altezza automatica.
	 */
	.rooms-list-style--lista-02 .vblistcontainer-list .vbimglistdiv {
		height: auto;
	}

	.rooms-list-style--lista-02 .vblistcontainer-list .vbimglistdiv .vblistimg {
		width: 100%;
		height: 220px;
	}

	.vbo-lista02-card {
		position: static;
		top: auto;
		left: auto;
		width: 100%;
		margin-top: var(--wp--preset--spacing--4);
		border: 1px solid var(--wp--preset--color--line);
		box-shadow: none;
	}
}

/* -----------------------------------------------------------
   Rooms List — modalità "Lista", variante grafica 3 ("rows")
   Terza opzione grafica per .vblistcontainer-list, stesso meccanismo di
   selezione di lista-01/lista-02 (vedi commento sopra lista-02 e
   inc/rooms-list-style.php). Stessa identica struttura di lista-01 (nessuna
   regola propria: eredita tutte le regole non scoped più sopra in questo
   file), con una sola aggiunta — l'immagine si alterna sinistra/destra riga
   per riga via ":nth-child(even)" sul markup nativo, zero JS, zero file del
   plugin toccati. Non è il pattern "Righe" di skin-marea (quello riorganizza
   il WIDGET di homepage, questo stila lo SHORTCODE della pagina dedicata) —
   vedi il commento in cima a inc/rooms-list-style.php.

   .vblistroomblock ha nativamente padding solo a destra (spazio verso
   .vbcontdivtot) e .vbimglistdiv/.vbo-info-room nessuno tra loro — l'unico
   "spazio" tra immagine e testo è il padding-left di .vbo-info-room (vedi
   regole non scoped sopra). Invertendo l'ordine visivo con
   "flex-direction: row-reverse" quel padding resterebbe dal lato sbagliato
   (tra testo e colonna prezzo invece che tra immagine e testo): qui
   scambiato esplicitamente.

   Dentro "@media (min-width: 768px)": sotto quella soglia la riga
   orizzontale torna comunque a impilarsi in colonna (regola non scoped più
   sopra, ".vblistcontainer-list .vblistroomblock { flex-direction: column }"
   dentro "@media (max-width: 767px)") — senza questo vincolo la maggiore
   specificità di questa regola (3 classi + ":nth-child") vincerebbe anche lì,
   lasciando le righe pari orizzontali invece di impilate su mobile.
   ----------------------------------------------------------- */
@media (min-width: 768px) {
	.rooms-list-style--rows .vblistcontainer-list .room_result:nth-child(even) .vblistroomblock {
		flex-direction: row-reverse;
		padding: var(--wp--preset--spacing--6) 0 var(--wp--preset--spacing--6) var(--wp--preset--spacing--6);
	}

	.rooms-list-style--rows .vblistcontainer-list .room_result:nth-child(even) .vbo-info-room {
		padding: var(--wp--preset--spacing--6) var(--wp--preset--spacing--6) var(--wp--preset--spacing--6) 0;
	}
}

/* -----------------------------------------------------------
   Rooms List — modalità "Griglia" nativa del plugin
   (.vblistcontainer-grid, parametro richiesta "layoutstyle=grid").
   A differenza della Lista (sopra) non c'è ancora una selezione
   utente: uno stile solo, sempre attivo quando il parametro nativo
   è "grid". Struttura target: immagine ~55-60% dell'altezza card,
   poi categoria/titolo/descrizione (2 righe), riga amenities+
   capienza, divisore, riga prezzo+CTA — vedi riferimento
   "griglia-riadattamento.jpg".
   ----------------------------------------------------------- */

/*
 * Bug di base risolto qui: .room_result arriva con
 * "box-sizing: content-box" (default, mai impostato altrove in
 * questo file), mentre il CSS nativo del plugin calcola la
 * larghezza colonna assumendo che bordo/padding restino DENTRO
 * quella percentuale (".room_result { width: calc(33.33% - 20px) }",
 * 3 colonne da 1080px in su — vikbooking_styles.css). Il nostro
 * bordo 1px (riga ~1527 di questo file, regola base condivisa con
 * la Lista) si sommava quindi ai px già calcolati dal plugin,
 * bastando a far traboccare la terza colonna sulla riga successiva
 * (verificato con Playwright: 3 card da 355.95px ciascuna dentro un
 * contenitore di 1062px, 1067.86px complessivi richiesti — solo 2
 * colonne visibili invece di 3). border-box tiene il bordo dentro
 * alla percentuale nativa, senza toccare width/margin del plugin.
 */
.vblistcontainer-grid .room_result {
	box-sizing: border-box;
}

/*
 * Il "gap" della regola base .vblist (riga ~1506, pensata per il
 * layout display:grid della Lista) resta comunque applicato qui:
 * "display" viene vinto dalla regola nativa più specifica
 * (".vblistcontainer-grid .vblist { display:flex }"), ma "gap"
 * funziona anche su flex e non viene ridefinito da nessuna regola
 * nativa per la Griglia — si sommava quindi ai margini nativi
 *10px/lato di .room_result (calc(33.33% - 20px) presuppone SOLO
 * quel margine, nessun gap aggiuntivo), facendo traboccare la terza
 * colonna sulla riga successiva esattamente come il bug border-box
 * sopra (verificato con Playwright: passo orizzontale reale 386px
 * invece dei 354px attesi, 32px di troppo = var(--wp--preset--
 * spacing--6)).
 */
.vblistcontainer-grid .vblist {
	gap: 0;
}

/*
 * Immagine a piena larghezza della card (non inset dal padding di
 * .vblistroomblock, che nel markup nativo avvolge sia immagine che
 * blocco testo): il padding si sposta sul solo .vbo-info-room qui
 * sotto, cosi l'immagine tocca i bordi della card.
 */
/*
 * flex-wrap: nowrap — .room_result-inner arriva nativo con
 * "flex-wrap: wrap" (vikbooking_styles.css), mai ridefinito dalla
 * regola base di questo file (che imposta solo flex-direction:
 * column, riga ~1533). Con flex-direction:column l'asse principale
 * è verticale: se .vblistroomblock (immagine+testo) e .vbcontdivtot
 * (prezzo+CTA) insieme superano l'altezza disponibile, "wrap"
 * sposta .vbcontdivtot in una SECONDA colonna invece che sotto —
 * verificato con Playwright su una card con descrizione+amenities
 * lunghe: il blocco prezzo/CTA compariva a fianco della card, non in
 * fondo. Disattivato qui: i due blocchi devono restare sempre
 * impilati, indipendentemente da quanto contenuto hanno sopra.
 */
.vblistcontainer-grid .room_result-inner {
	flex-wrap: nowrap;
}

.vblistcontainer-grid .vblistroomblock {
	padding: 0;
}

.vblistcontainer-grid .vbimglistdiv .vblistimg {
	height: 300px;
}

/*
 * min-width:0 — .vbo-info-room arriva nativo come figlio flex di
 * .vblistroomblock ("flex:1", vikbooking_styles.css) con "min-width:
 * auto" implicito (default per un flex item): senza azzerarlo qui,
 * il suo contenuto non a capo (.roomlist_carats sotto, "flex-wrap:
 * nowrap" voluto per non spezzare le singole amenity) impone una
 * dimensione minima pari alla riga amenities per intero, che
 * l'algoritmo flex soddisfa allargando .vbo-info-room oltre il
 * bordo della card invece di forzare la riga amenities ad andare a
 * capo (verificato con Playwright su una card con 5 amenities:
 * .vbo-info-room misurava 671px dentro una card di 334px). Con
 * min-width:0 il flex item può restringersi sotto quella soglia,
 * lasciando che sia .vbo-grid-descr-row sotto a decidere il "a capo"
 * in base allo spazio reale disponibile.
 */
/*
 * padding-bottom: senza, la riga amenities+capienza finisce esattamente
 * a filo con il bordo inferiore di .vbo-info-room — cioè proprio dove
 * inizia il divisore di .vbcontdivtot sotto — risultando "attaccata"
 * visivamente al bordo invece di avere lo stesso margine di
 * titolo/descrizione/prezzo (verificato con Playwright: bottom della
 * riga e di .vbo-info-room coincidevano, 0px di distanza).
 */
.vblistcontainer-grid .vbo-info-room {
	display: flex;
	flex-direction: column;
	min-width: 0;
	gap: var(--wp--preset--spacing--2);
	padding: var(--wp--preset--spacing--5) var(--wp--preset--spacing--5) var(--wp--preset--spacing--4);
}

.vblistcontainer-grid .vbdescrlistdiv {
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: visible;
}

/*
 * Categoria sopra il titolo: nel markup nativo l'ordine è titolo
 * poi categoria (roomslist/tmpl/default.php). Con .vbdescrlistdiv
 * come colonna flex qui sopra basta "order" per invertirli senza
 * toccare il DOM via JS (a differenza della riga descrizione+
 * amenities sotto, dove titolo/categoria non sono coinvolti).
 */
.vblistcontainer-grid .vblistroomcat {
	order: -1;
	font-size: var(--wp--preset--font-size--xs);
}

.vblistcontainer-grid .vbrowcname {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/*
 * Riga descrizione + amenities/capienza, assemblata via JS
 * (applyRoomsListGrid() in vikbooking-dom.js: descrizione e
 * amenities non sono fratelli nel markup nativo, non raggruppabili
 * in un'unica riga flex solo via CSS). flex-wrap sul wrapper: se le
 * amenities configurate sono troppe per stare accanto alla
 * descrizione tronca, l'intero blocco amenities va a capo sotto di
 * essa — il "breakpoint" è quindi la larghezza reale della riga
 * amenities (più caratteristiche = riga più larga = va a capo
 * prima), non un valore fisso.
 */
.vblistcontainer-grid .vbo-grid-descr-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	min-width: 0;
	gap: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
}

/* Descrizione troncata a 2 righe con ellissi — stesso fix già
   applicato in Lista/lista-02 (vedi sopra), qui a 2 righe per
   lasciare spazio alla riga amenities sotto/accanto senza sforare
   l'altezza dell'immagine con card diverse tra loro. */
.vblistcontainer-grid .vbrowcdescr {
	display: -webkit-box;
	flex: 1 1 160px;
	min-width: 160px;
	overflow: hidden;
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--sm);
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
}

/*
 * Icone piatte — solo per la Griglia (non Lista/lista-02, che
 * mantengono il badge circolare bordato): niente cerchio/bordo/
 * sfondo attorno all'icona, solo colore accento e spaziatura
 * regolare tra un'icona e l'altra tramite "gap" (stessa proprietà
 * già usata prima per il badge, qui senza il contenitore). Le
 * caratteristiche senza icona configurata in VikBooking (testo
 * libero, es. "Vista mare/panoramica") restano testo semplice,
 * nessun cerchio da rimuovere in quel caso. flex-wrap:wrap sia qui
 * che sul contenitore sopra: con molte caratteristiche configurate
 * vanno a capo su più righe DENTRO la riga amenities invece di
 * traboccare oltre il bordo della card (stesso comportamento già
 * collaudato in Lista, .vblistcontainer-list .roomlist_carats sopra
 * — "nowrap" taglierebbe silenziosamente le icone in eccesso,
 * verificato con Playwright su una card con 5 caratteristiche).
 */
.vblistcontainer-grid .roomlist_carats {
	flex: 0 1 auto;
	min-width: 0;
	max-width: 100%;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
	margin: 0;
	padding: 0;
}

.vblistcontainer-grid .vbo-room-carats {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
	margin: 0;
}

.vblistcontainer-grid .roomlist_carats .vbo-room-carat {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	height: auto;
	margin: 0;
	border: none;
	border-radius: 0;
	background: none;
}

.vblistcontainer-grid .roomlist_carats .vbo-room-carat:not(:has(.vbo-icn-carat)) {
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--xs);
	white-space: nowrap;
}

.vblistcontainer-grid .vbo-icn-carat {
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--xs);
}

/*
 * Capienza ospiti: un'icona sola + "×N" testuale invece di N icone
 * fa-male ripetute (stesso pattern già usato in lista-02, applicato
 * qui da applyRoomsListGrid() in vikbooking-dom.js). Stesso
 * trattamento piatto delle amenities qui sopra — nessun divisore
 * verticale: la spaziatura è la stessa "gap" di .roomlist_carats,
 * di cui questo elemento è un figlio/fratello al pari delle altre
 * icone (coerenza richiesta con le amenities).
 */
.vblistcontainer-grid .vbrowroomcapacity {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: var(--wp--preset--spacing--1);
	margin: 0;
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--xs);
	white-space: nowrap;
}

.vblistcontainer-grid .vbrowroomcapacity i {
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--base);
}

/*
 * Riga prezzo+CTA finale: il divisore sottile arriva già dalla
 * regola base .vbcontdivtot (bordo/margine/padding-top, non
 * scoped, riga ~1575) — qui si aggiungono solo il padding
 * orizzontale/inferiore (mancanti nella base) e margin-top:auto,
 * cosi la riga resta sempre in fondo alla card anche quando
 * un'altra card della stessa riga ha più righe di testo
 * (.room_result-inner è già "flex column; height:100%" nativo).
 */
/*
 * flex:0 0 auto + align-self:stretch — .vbcontdivtot arriva nativo
 * come flex item con "flex:1" (base) e, solo per la Griglia,
 * "align-self:end; flex-basis:100%" (vikbooking_styles.css): in un
 * .room_result-inner ora colonna (vedi sopra), "align-self:end"
 * lo restringe alla larghezza del contenuto e lo allinea a destra
 * invece di farlo restare a piena larghezza (verificato con
 * Playwright: 238px invece di 332px, spostato dal bordo sinistro
 * della card). "flex-basis:100%" lo fa inoltre competere in altezza
 * con .vblistroomblock (asse principale verticale in questa
 * direzione), riducendolo a uno spazio residuo minimo. Qui si
 * resetta tutto a un footer compatto, sempre a piena larghezza,
 * spinto in fondo dal margin-top:auto già presente.
 */
.vblistcontainer-grid .vbcontdivtot {
	flex: 0 0 auto;
	align-self: stretch;
	margin-top: auto;
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5) var(--wp--preset--spacing--5);
	box-sizing: border-box;
}

.vblistcontainer-grid .vbdivtot {
	float: none;
	width: 100%;
}

.vblistcontainer-grid .vbdivtotinline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--3);
}

.vblistcontainer-grid .vbsrowprice {
	padding: 0;
	text-align: left;
}

.vblistcontainer-grid .vbsrowpricediv {
	padding: 0;
	text-align: left;
}

/*
 * Etichetta "A partire da" — non presente nel markup nativo dello
 * shortcode (VikBooking stampa solo prezzo + "/notte", nessuna label
 * prima). Uno <span class="vbo-price-label--starting-from"> reale,
 * iniettato da initPriceStartingFromLabel() in vikbooking-dom.js con
 * testo da "vikNativeStrings.startingFrom" (VikBooking, già tradotto da
 * un language pack) — non più un elemento "::before" con testo
 * hardcoded in CSS, che nessun language pack poteva tradurre. Stessa
 * dicitura già usata nel tema per lo stesso concetto sul widget "Rooms
 * List" (vedi inc/vikbooking-rooms-reorg.php, room-badge-price .from).
 */
.vblistcontainer-grid .vbsrowpricediv .vbo-price-label--starting-from {
	display: block;
	margin-bottom: 2px;
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.vblistcontainer-grid .room_cost {
	font-family: var(--wp--preset--font-family--display);
	font-variant-numeric: lining-nums;
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
}

.vblistcontainer-grid .vbliststartfrom {
	margin-left: var(--wp--preset--spacing--1);
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--xs);
}

.vblistcontainer-grid .vbselectordiv {
	width: auto;
	margin: 0;
	padding: 0;
	border-top: none;
}

.vblistcontainer-grid .vbselectr {
	width: auto;
}

/* -----------------------------------------------------------
   Search Results — shortcode [vikbooking view="vikbooking"],
   step "risultati ricerca" (plugin view "search", template
   site/views/search/tmpl/default_classic.php — solo il layout
   "classic", caricato di default con una sola camera/party; il
   layout "compact" per ricerche multi-camera non è coperto qui,
   fuori scope).

   Nonostante nomi di classe identici a Rooms List per titolo/
   descrizione/amenities/prezzo (stesso partial di markup), le
   card disponibili usano ".room_resultdiffusage" — non
   ".room_result", riservata qui alle sole card "Not Available"
   in coda (vedi sotto). Le regole "Rooms List" sopra (scoped a
   ".vblistcontainer-list"/".vblistcontainer-grid .room_result")
   quindi NON toccano le card disponibili. La Griglia nativa del
   plugin applica però già la stessa classe toggle
   ".vblistcontainer-grid" a ".vbo-searchresults-classic-wrap"
   (vedi default_classic.php, stesso pattern List/Grid) e gran
   parte delle regole "Rooms List — Griglia" sopra (selettori
   come ".vblistcontainer-grid .vbo-info-room"/".roomlist_carats"/
   ".vbcontdivtot", non condizionati da ".room_result") si
   applicano già di conseguenza anche qui — sotto si aggiungono
   solo gli scostamenti specifici alla Ricerca (chip amenities,
   gerarchia prezzo, badge urgenza/non disponibile), senza
   duplicare quelle regole condivise.

   Mappa: il layout affiancato (card | mappa sticky) e lo switch
   Griglia 3→2 colonne quando la mappa è attiva sono già nativi
   del plugin (vikbooking_styles.css, ".vbo-results-content{
   display:flex}" + ".vbo-searchresults-geo-wrapper{flex:1;
   order:2}" + container query su ".vbo-results-with-geomap" che
   passa a 2 colonne sotto i 1400px di contenitore, cioè già alla
   larghezza tipica della colonna card quando la mappa occupa
   l'altra metà) — nessuna regola necessaria qui. Contenuto/stile
   della mappa stessa restano fuori scope.
   ----------------------------------------------------------- */

/*
 * Riga scheda, entrambe le varianti (disponibile ".room_resultdiffusage"
 * e "Not Available" ".room_result.vbo-result-listing-unavailable", vedi
 * sopra): nel nativo entrambe le classi portano già un bordo 1px pieno
 * tutt'intorno (vikbooking_styles.css, ".room_resultdiffusage"/
 * ".room_result") — qui sostituito con un divisore superiore/inferiore
 * più leggero, stesso trattamento già scelto per Rooms List Lista
 * (".vblistcontainer-list .room_result", sopra), per coerenza visiva tra
 * le due view. "flex-wrap:nowrap" su ".room_item" (nativo "flex-wrap:
 * wrap", vikbooking_styles.css): senza, con contenuto lungo il blocco
 * prezzo/CTA (".vbcontdivtot") andrebbe a capo su una riga propria sotto
 * l'immagine invece di restare affiancato.
 */
.vbo-searchresults-classic-wrap:not(.vblistcontainer-grid) .room_item {
	flex-wrap: nowrap;
	align-items: stretch;
	border: none;
	border-top: 1px solid var(--wp--preset--color--line);
	margin: 0;
}

.vbo-searchresults-classic-wrap:not(.vblistcontainer-grid) .room_item:last-child {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/*
 * ".vblistroomblock" arriva nativo con "width:80%; float:left;
 * border-right:2px; min-height:162px" (vikbooking_styles.css) — vecchio
 * layout a due colonne flottanti pensato per stare accanto a
 * ".vbcontdivtot{float:right}", stesso bug già risolto per Rooms List
 * Lista (".vblistcontainer-list .vblistroomblock" sopra, "Fix B").
 * Ripetuto qui identico perché il markup nativo è lo stesso.
 */
/*
 * "min-height": l'altezza di riga nativa segue solo il contenuto del
 * blocco testo (titolo/descrizione/amenities, via ".vbo-info-room" più
 * sotto) — nessuna altezza legata all'immagine (".vbimglistdiv" fissa
 * solo la LARGHEZZA colonna, 220px, non l'altezza). Card con poco testo
 * (es. "Mini Apartment", 1-2 righe di descrizione) risultavano quindi
 * molto più basse di card con testo/amenities più lunghi (verificato
 * con Playwright: 171px contro 231px), disallineando sia il divisore
 * verticale (".vbcontdivtot" border-left, alto quanto la riga) sia la
 * percezione del padding nel blocco prezzo/CTA (più spazio "gratis" da
 * distribuire nelle righe più alte, meno in quelle più basse — vedi
 * "min-height" su ".vbcontdivtot" sotto per il resto del fix). 220px
 * pareggia la riga più bassa osservata alla larghezza della colonna
 * immagine, una proporzione già equilibrata per il layout.
 */
.vbo-searchresults-classic-wrap:not(.vblistcontainer-grid) .vblistroomblock {
	display: flex;
	flex-wrap: nowrap;
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	min-height: 220px;
	float: none;
	border-right: none;
	padding: var(--wp--preset--spacing--6) 0;
}

.vbo-searchresults-classic-wrap:not(.vblistcontainer-grid) .vbimglistdiv {
	position: relative;
	flex: 0 0 220px;
	width: 220px;
	overflow: hidden;
	border-radius: var(--vik-radius);
}

.vbo-searchresults-classic-wrap:not(.vblistcontainer-grid) .vbimglistdiv .vblistimg {
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

/*
 * ".vbo-dots-slider-selector" (il wrapper che il JS nativo del plugin
 * inserisce intorno alla galleria quando una camera ha più di una foto,
 * in coda a default_classic.php) arriva senza altezza propria (nessuna
 * regola nativa la imposta): "height:100%" a cascata sui discendenti
 * sotto (".vik-dots-slider-container" ecc.) non risolve quindi a nulla,
 * perché il genitore da cui quel 100% dovrebbe partire è a sua volta
 * "height:auto" — un riferimento circolare che il CSS risolve
 * trattandolo come altezza nulla (stesso bug già risolto sopra per lo
 * scope mobile impilato, ".vbo-searchresults-classic-wrap...
 * .vbo-dots-slider-selector"; verificato qui con Playwright: catena
 * ".vbimglistdiv" 220px → ".vbo-dots-slider-selector" 0px → tutto il
 * resto 0px, foto vuota nonostante "src" corretto nel DOM).
 * "position:absolute" rispetto a ".vbimglistdiv" (già "position:
 * relative" sopra) rompe la catena di percentuali: la dimensione ora
 * viene da "inset:0" (che ha sempre un riferimento definito, il
 * genitore posizionato), non da un'altezza ereditata.
 */
.vbo-searchresults-classic-wrap:not(.vblistcontainer-grid) .vbo-dots-slider-selector {
	position: absolute;
	inset: 0;
}

/*
 * "!important": la galleria (".vik-dots-slider-selector") è generata
 * dallo script nativo del plugin (default_classic.php, in coda), che
 * imposta "height" come stile inline su ".vik-dots-slider-inner" in
 * base all'altezza naturale dell'immagine caricata — un inline style non
 * è battibile con la sola specificità. Qui l'altezza deve invece seguire
 * quella di ".vbimglistdiv" (220px larga, altezza = quella della riga),
 * cosi la galleria riempie la colonna immagine come una .vblistimg
 * qualunque.
 */
.vbo-searchresults-classic-wrap:not(.vblistcontainer-grid) .vik-dots-slider-container,
.vbo-searchresults-classic-wrap:not(.vblistcontainer-grid) .vik-dots-slider-inner,
.vbo-searchresults-classic-wrap:not(.vblistcontainer-grid) .vik-dots-slider-slides,
.vbo-searchresults-classic-wrap:not(.vblistcontainer-grid) .vik-dots-slider-slide {
	width: 100% !important;
	height: 100% !important;
}

.vbo-searchresults-classic-wrap:not(.vblistcontainer-grid) .vik-dots-slider-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vbo-searchresults-classic-wrap:not(.vblistcontainer-grid) .vbo-info-room {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	gap: var(--wp--preset--spacing--2);
	padding: 0 0 0 var(--wp--preset--spacing--6);
}

.vbo-searchresults-classic-wrap:not(.vblistcontainer-grid) .vbdescrlistdiv {
	padding: 0;
	overflow: visible;
}

.vbo-searchresults-classic-wrap:not(.vblistcontainer-grid) .vbrowcname {
	margin: 0 0 var(--wp--preset--spacing--1);
}

/*
 * Descrizione troncata a 2 righe con ellissi — il plugin tronca già
 * lato server oltre i 200 caratteri aggiungendo il link ".vbo-result-
 * readmore-trig" (default_classic.php), ma sotto quella soglia una
 * descrizione comunque lunga per il contenitore avrebbe reso l'altezza
 * della riga incoerente tra una camera e l'altra: line-clamp aggiunge un
 * secondo livello di troncamento visivo, indipendente da quello server.
 */
.vbo-searchresults-classic-wrap:not(.vblistcontainer-grid) .vbrowcdescr {
	display: -webkit-box;
	overflow: hidden;
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--sm);
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
}

/*
 * Link "Read more" — nativo (".vbo-result-readmore-trig", generato e
 * gestito lato JS del plugin quando la descrizione supera i 200
 * caratteri, default_classic.php): qui solo lo stile, nessuna
 * interazione da aggiungere.
 */
.vbo-searchresults-classic-wrap .vbo-result-readmore-wrap {
	margin-top: var(--wp--preset--spacing--1);
}

.vbo-searchresults-classic-wrap .vbo-result-readmore-trig {
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--xs);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.vbo-searchresults-classic-wrap .vbo-result-readmore-trig:hover {
	color: var(--wp--preset--color--accent-dark);
}

/*
 * Amenities come chip quadrati (non icone nude, non pill bordate come in
 * Rooms List): sfondo terracotta chiaro, stessa formula già usata dal
 * tema per gli hover leggeri su sfondo chiaro (rgba dell'accento).
 * Vale sia per la Lista (qui) sia per la Griglia (scoped più sotto):
 * regola unica, nessuna duplicazione. Stesso ".roomlist_carats" anche
 * nella view Compact (default_compact.php: stesso helper PHP
 * VikBooking::getRoomCaratOriz(), stesso markup) — selettore esteso
 * qui invece di duplicato più sotto nella sezione Compact,
 * normalizeSearchResultsCarats() in vikbooking-dom.js copre già
 * entrambi i wrap allo stesso modo.
 */
.vbo-searchresults-classic-wrap .roomlist_carats,
.vbo-searchresults-compact-wrap .roomlist_carats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	margin: 0;
	padding: 0;
}

.vbo-searchresults-classic-wrap .vbo-room-carats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	margin: 0;
}

.vbo-searchresults-classic-wrap .roomlist_carats .vbo-room-carat,
.vbo-searchresults-compact-wrap .roomlist_carats .vbo-room-carat {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 32px;
	margin: 0;
	border: none;
	border-radius: var(--vik-radius);
	background: var(--vik-accent-12);
}

.vbo-searchresults-compact-wrap .vbrowcdescr {
	margin-bottom: var(--wp--preset--spacing--4);
}

.vbo-searchresults-classic-wrap .roomlist_carats .vbo-room-carat:has(.vbo-icn-carat),
.vbo-searchresults-compact-wrap .roomlist_carats .vbo-room-carat:has(.vbo-icn-carat) {
	width: 32px;
}

.vbo-searchresults-classic-wrap .vbo-icn-carat,
.vbo-searchresults-compact-wrap .vbo-icn-carat {
	color: var(--wp--preset--color--accent-dark);
	font-size: var(--wp--preset--font-size--sm);
}

/*
 * Caratteristiche senza icona configurata in VikBooking (testo libero,
 * es. "Vista mare/panoramica") arrivano native come semplice testo
 * dentro ".vbo-room-carat", senza alcuna ".vbo-icn-carat" (verificato:
 * VikBooking::getRoomCaratOriz() stampa solo la label se l'amenity non
 * ha un'icona assegnata in configurazione). normalizeSearchResultsCarats()
 * in vikbooking-dom.js fa corrispondere la label, per parole chiave, a
 * un'icona Font Awesome reale (stessa dell'amenity su una card che
 * quell'icona la avesse configurata — es. "Wi-Fi" → fa-wifi), inserendo
 * una normale ".vbo-icn-carat": il chip risultante è quindi già coperto
 * dalle regole sopra (icona reale = stesso trattamento quadrato 32×32
 * delle altre amenities, nessuna regola aggiuntiva necessaria qui). Solo
 * per una label non riconosciuta dalla mappa resta un pittogramma
 * generico (tag, ".vbo-carat-fallback-icon" sotto) come ripiego. La
 * label originale non è mai persa: resta accessibile via "title" e per
 * screen reader (".screen-reader-text"). Senza JS il chip resta
 * comunque leggibile: torna alla larghezza automatica con la sola label
 * testuale (nessun contenuto perso, solo l'aspetto "solo testo" invece
 * di icona).
 */
.vbo-searchresults-classic-wrap .roomlist_carats .vbo-room-carat:not(:has(.vbo-icn-carat)),
.vbo-searchresults-compact-wrap .roomlist_carats .vbo-room-carat:not(:has(.vbo-icn-carat)) {
	padding: 0 var(--wp--preset--spacing--3);
	color: var(--wp--preset--color--accent-dark);
	font-size: var(--wp--preset--font-size--xs);
	white-space: nowrap;
}

.vbo-searchresults-classic-wrap .roomlist_carats .vbo-room-carat:has(.vbo-carat-fallback-icon),
.vbo-searchresults-compact-wrap .roomlist_carats .vbo-room-carat:has(.vbo-carat-fallback-icon) {
	width: 32px;
	padding: 0;
}

.vbo-searchresults-classic-wrap .vbo-carat-fallback-icon,
.vbo-searchresults-compact-wrap .vbo-carat-fallback-icon {
	display: block;
	width: 15px;
	height: 15px;
	background-color: var(--wp--preset--color--accent-dark);
	-webkit-mask: var(--vbo-icon-tag) center / contain no-repeat;
	mask: var(--vbo-icon-tag) center / contain no-repeat;
	--vbo-icon-tag: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2H4a2 2 0 0 0-2 2v8l10 10 10-10-10-10z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5' fill='black' stroke='none'/%3E%3C/svg%3E");
}

/*
 * Icone capienza ospiti: restano "nude" (nessuna chip), scelta
 * confermata — solo le amenities sopra usano il trattamento a chip. Il
 * markup nativo ripete un'icona "male" per ogni posto letto della
 * camera: piena (colore accento) per gli ospiti richiesti in ricerca,
 * vuota (".vbo-empty-personicn") per i restanti fino alla capienza
 * massima — default_classic.php, ciclo "for ($i = 1; $i <=
 * $room[0]['toadult']; $i++)". Qui solo i colori, la sequenza resta
 * quella nativa (nessun collasso in "×N": a differenza di Rooms List, il
 * "pieno/vuoto" è un'informazione distinta da mantenere leggibile).
 *
 * Specificità: la regola nativa ".vbrowroomcapacity i{color:var(--vbo-
 * pref-textcolor)}" (0,1,1) vince sulla nostra ".vbo-pref-color-text"
 * (0,1,0) di base (riga ~51) — stesso problema già risolto per Rooms
 * List Lista (".vblistcontainer-list .vbrowroomcapacity i" sopra), qui
 * la specificità (0,2,1) del selettore scoped è sufficiente.
 */
.vbo-searchresults-classic-wrap .vbrowroomcapacity i {
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--sm);
}

.vbo-searchresults-classic-wrap .vbrowroomcapacity i.vbo-empty-personicn {
	color: var(--wp--preset--color--line);
}

/*
 * Soglia capienza: da 5 posti letto in su la sequenza piena/vuota
 * diventerebbe una riga di icone troppo lunga per essere letta a colpo
 * d'occhio — sostituita da applySearchResultsCapacityThreshold() in
 * vikbooking-dom.js con una singola icona + pill frazione "selezionati/
 * massimo" (es. "2/6"), stessa grammatica visiva già usata per il
 * badge "×N" di Rooms List Griglia (".vbo-grid-capacity-count" sopra)
 * ma con contenuto dinamico a frazione anziché numero fisso — qui
 * l'informazione "quanti selezionati" andrebbe persa con un semplice
 * conteggio totale. Sotto le 5 la sequenza nativa resta invariata
 * (nessuna soglia raggiunta, la funzione esce subito).
 */
.vbo-searchresults-classic-wrap .vbo-searchresults-capacity-fraction {
	margin-left: var(--wp--preset--spacing--1);
	padding: 2px var(--wp--preset--spacing--2);
	border-radius: 100px;
	background: var(--vik-accent-12);
	color: var(--wp--preset--color--accent-dark);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	font-variant-numeric: lining-nums;
	white-space: nowrap;
}

/*
 * Colonna prezzo+CTA. ".vbcontdivtot" arriva nativo "position:relative;
 * float:right; flex:1" (pensato per il vecchio layout a due colonne
 * flottanti) e ".vbselectordiv" nativo "display:table; width:65%;
 * margin:0 auto; border-top:1px" (pensato per un bottone centrato sotto
 * il prezzo in una scheda impilata verticalmente, non per una colonna
 * accanto a immagine+testo) — entrambi resettati qui, stesso principio
 * già applicato a Rooms List Lista sopra ("Fix C").
 */
/*
 * "padding" verticale fisso invece di affidarsi solo ad "align-items:
 * center" per la spaziatura: centrare da solo distribuisce lo spazio
 * residuo in proporzione all'altezza della riga (vedi "min-height" su
 * ".vblistroomblock" sopra) — su una riga già alta (testo lungo) il
 * blocco prezzo/CTA sembrava avere ampio respiro, su una bassa (testo
 * corto) restava schiacciato contro i bordi. "padding" garantisce lo
 * stesso minimo su ogni riga indipendentemente dall'altezza risultante;
 * "align-items:center" resta comunque utile per lo spazio ulteriore
 * oltre quel minimo. "box-sizing:border-box" tiene il padding dentro
 * "align-self:stretch" invece di farlo sporgere oltre l'altezza della
 * riga.
 */
.vbo-searchresults-classic-wrap:not(.vblistcontainer-grid) .vbcontdivtot {
	position: static;
	float: none;
	left: 0;
	flex: 0 0 auto;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	margin: 0;
	padding: var(--wp--preset--spacing--5) 0 var(--wp--preset--spacing--5) var(--wp--preset--spacing--6);
	border-top: none;
	border-left: 1px solid var(--wp--preset--color--line);
	box-sizing: border-box;
}

.vbo-searchresults-classic-wrap:not(.vblistcontainer-grid) .vbdivtot {
	float: none;
	width: 100%;
}

.vbo-searchresults-classic-wrap:not(.vblistcontainer-grid) .vbdivtotinline {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--wp--preset--spacing--3);
}

.vbo-searchresults-classic-wrap:not(.vblistcontainer-grid) .vbsrowprice {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--wp--preset--spacing--3);
	padding: 0;
	text-align: right;
}

/*
 * ".vbrowroomcapacity"/".vbsrowpricediv" — ordine visivo via flex
 * "order" (nessuna manipolazione DOM necessaria). Vale sia in Lista che
 * in Griglia: regola unica su ".vbsrowprice", che in Griglia diventa
 * flex-column solo per questo (vedi sezione Griglia sotto).
 *
 * ".vblastavail" ha qui lo stesso "order" solo come fallback: la
 * posizione primaria è ora sulla foto (vedi sopra,
 * relocateSearchResultsUrgencyBadge()) — se il JS non girasse, resta
 * comunque nel proprio slot nativo invece di sparire o disallinearsi.
 *
 * ".vbo-unavailable-block" condivide lo stesso slot: sullo stato "Not
 * Available" non c'è mai prezzo, quindi il badge di stato occupa la
 * posizione che avrebbe il badge urgenza — coerenza di struttura tra le
 * due varianti di card richiesta dal mockup. Lo spostamento nel DOM (da
 * ".vbo-info-room" a ".vbsrowprice") è fatto da
 * relocateUnavailableBadge() in vikbooking-dom.js: i due non sono
 * fratelli nel markup nativo, non raggiungibile solo via CSS.
 */
.vbo-searchresults-classic-wrap .vbrowroomcapacity {
	order: 1;
}

.vbo-searchresults-classic-wrap .vblastavail,
.vbo-searchresults-classic-wrap .vbsrowprice > .vbo-unavailable-block {
	order: 2;
}

.vbo-searchresults-classic-wrap .vbsrowpricediv {
	order: 3;
}

.vbo-searchresults-classic-wrap:not(.vblistcontainer-grid) .vbselectordiv {
	display: block;
	width: auto;
	margin: 0;
	padding: 0;
	border-top: none;
}

.vbo-searchresults-classic-wrap:not(.vblistcontainer-grid) .vbselectr-result {
	width: auto;
	margin: 0;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
}

/*
 * Gerarchia prezzo: numero grande in Cormorant Garamond, "per notte"
 * leggero sotto in Inter. Il markup nativo non stampa alcuna dicitura
 * "per notte" (solo simbolo valuta + importo, default_classic.php). Uno
 * <span class="vbo-price-label--per-night"> reale, iniettato da
 * initSearchResultsPerNightLabel() in vikbooking-dom.js con testo da
 * "vikNativeStrings.perNight" (VikBooking, già tradotto da un language
 * pack) — non più un elemento "::after" con testo hardcoded in CSS,
 * stesso principio già applicato a "A partire da" in Rooms List Griglia
 * sopra (".vblistcontainer-grid .vbsrowpricediv .vbo-price-label--
 * starting-from"). "font-variant-numeric:lining-nums" obbligatorio
 * sulle cifre: Cormorant Garamond userebbe altrimenti le sue "oldstyle
 * nums" di default (cifre con altezza/discendenti variabili, pensate
 * per il testo continuo), illeggibili in un prezzo isolato di questa
 * dimensione.
 */
.vbo-searchresults-classic-wrap .vbsrowpricediv {
	padding: 0;
	text-align: inherit;
}

.vbo-searchresults-classic-wrap .room_cost {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	font-variant-numeric: lining-nums;
}

.vbo-searchresults-classic-wrap .vbsrowpricediv .vbo-price-label--per-night {
	display: block;
	margin-top: 2px;
	color: var(--wp--preset--color--text-soft);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 400;
}

/*
 * Badge urgenza "Last N available!" (".vblastavail", nativo — testo di
 * default_classic.php/lingua "VBLASTUNITSAVAIL"). Gradazione tra N=1 e
 * N=2/3 non ottenibile solo via CSS (nessun selettore su contenuto
 * testuale): il numero viene letto e classificato da JS
 * (classifySearchResultsUrgency() in vikbooking-dom.js), che aggiunge
 * il modificatore ".vblastavail--critical" quando resta una sola unità.
 *
 * Ribbon sulla foto invece che inline nel blocco prezzo: nel markup
 * nativo ".vblastavail" vive dentro ".vbsrowprice" (default_classic.php),
 * fratello di ".vbsrowpricediv" — inline lì rendeva il blocco
 * informazioni affollato e, sulle card con badge, ne aumentava
 * l'altezza rispetto alle card senza badge, disallineando il divisore
 * verticale/orizzontale tra card diverse della stessa riga (Lista e
 * Griglia). Spostato dentro ".vbimglistdiv" da
 * relocateSearchResultsUrgencyBadge() in vikbooking-dom.js — le due non
 * sono fratelli nel markup nativo, non raggiungibile solo via CSS.
 * Cosi facendo l'altezza del blocco prezzo/CTA resta identica con o
 * senza badge, e il divisore torna a una posizione costante. Se il JS
 * non girasse, il badge resta comunque leggibile nella posizione nativa
 * (regola base ".vbo-searchresults-classic-wrap .vblastavail" sotto,
 * non condizionata dal genitore).
 */
.vbo-searchresults-classic-wrap .vblastavail {
	display: inline-block;
	margin: 0;
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
	border: 1px solid var(--vik-accent-45);
	border-radius: 100px;
	background: transparent;
	color: var(--wp--preset--color--accent-dark);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
}

/*
 * "width:auto" — ".vblastavail" arriva nativo con "width:100%"
 * (vikbooking_styles.css, pensato per riempire la larghezza stretta
 * della colonna prezzo dov'era in origine): dentro ".vbsrowprice" quel
 * 100% restava innocuo (colonna già stretta, larga quanto il prezzo).
 * Spostato dentro ".vbimglistdiv" (l'intera larghezza della foto, molto
 * più ampia) lo stesso 100% stirava il badge su tutta la foto
 * (verificato con Playwright: 334px di larghezza invece dei ~140px del
 * testo). Nessuna proprietà "width" era stata definita finora in questa
 * regola: senza un valore esplicito qui, quello nativo restava a vincere
 * per mancanza di una dichiarazione più specifica sulla stessa
 * proprietà.
 */
.vbo-searchresults-classic-wrap .vbimglistdiv .vblastavail {
	position: absolute;
	top: var(--wp--preset--spacing--3);
	left: var(--wp--preset--spacing--3);
	z-index: 2;
	width: auto;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

/*
 * Sfondo opaco sopra la foto per restare leggibile indipendentemente dai
 * colori sottostanti (a differenza della posizione inline originale,
 * dove uno sfondo trasparente restava comunque leggibile sul fondo
 * chiaro del tema) — solo per la variante "outline" (2-3 unità
 * rimaste): scoped con ":not(.vblastavail--critical)" perché uno sfondo
 * fisso qui, con specificità (0,3,0), altrimenti vincerebbe su quello
 * della variante piena sotto (0,2,0), lasciando "Last 1 available!"
 * bianco su bianco, illeggibile (verificato con Playwright).
 */
.vbo-searchresults-classic-wrap .vbimglistdiv .vblastavail:not(.vblastavail--critical) {
	background: var(--wp--preset--color--white);
}

.vbo-searchresults-classic-wrap .vblastavail--critical {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
}

/*
 * Stato "Not Available" (".vbo-result-listing-unavailable", card sempre
 * in coda: il template le stampa in un blocco ".vbo-searchresults-
 * party-content" separato, dopo quello delle camere disponibili — vedi
 * default_classic.php, nessuna regola d'ordine necessaria qui).
 *
 * Struttura interna allineata alle card disponibili: capienza ospiti in
 * alto, poi badge (qui "Not Available" al posto di "Last N available!"),
 * poi CTA — stesso slot di ".vblastavail" (vedi "order" sopra). Nel
 * markup nativo ".vbo-unavailable-block" vive però dentro ".vbo-info-
 * room" (colonna contenuto), non dentro ".vbsrowprice" (colonna
 * prezzo/CTA, dove sta invece ".vblastavail") — due rami del DOM
 * diversi, non raggruppabili solo via CSS. Spostato da
 * relocateUnavailableBadge() in vikbooking-dom.js; se il JS non
 * girasse, il badge resta comunque visibile nella posizione nativa
 * originale (le regole sotto sono scoped a ".vbsrowprice >
 * .vbo-unavailable-block", non lo nascondono altrove).
 */

/*
 * Badge — nativo rosso pieno (".vbo-unavailable-block{border:1px solid
 * var(--vbo-red-color)}", icona "ban" in cerchio rosso pieno,
 * vikbooking_styles.css): sostituito con una pill neutra outline,
 * coerente con badge di stato analoghi già nel tema (vedi Booking
 * Details, ".vbo-booking-details-head" sotto).
 */
.vbo-searchresults-classic-wrap .vbo-unavailable-block {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	margin: var(--wp--preset--spacing--2) 0;
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 100px;
	background: transparent;
}

/*
 * Una volta spostato dentro ".vbsrowprice" (flex column con "gap" già
 * suo, vedi sopra), il margine verticale nativo raddoppierebbe lo
 * spazio già dato dal "gap" del contenitore.
 */
.vbo-searchresults-classic-wrap .vbsrowprice > .vbo-unavailable-block {
	margin: var(--wp--preset--spacing--2) 0 0;
}

.vbo-searchresults-classic-wrap .vbo-unavailable-icon i {
	display: block;
	width: 15px;
	height: 15px;
	border: none;
	background-color: var(--wp--preset--color--text-soft);
	color: transparent;
	font-size: 0;
	-webkit-mask: var(--vbo-icon-ban) center / contain no-repeat;
	mask: var(--vbo-icon-ban) center / contain no-repeat;
}

.vbo-unavailable-icon {
	--vbo-icon-ban: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M6.5 6.5l11 11'/%3E%3C/svg%3E");
}

.vbo-searchresults-classic-wrap .vbo-unavailable-description {
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--sm);
	white-space: nowrap;
}

/*
 * Immagine desaturata/opacizzata — segnala lo stato "non disponibile"
 * anche a colpo d'occhio, prima ancora di leggere il badge.
 */
.vbo-searchresults-classic-wrap .vbo-result-listing-unavailable .vbimglistdiv {
	filter: grayscale(80%);
	opacity: 0.55;
}

/*
 * CTA unica "Details", stile outline — nessun "Select" attivo su questo
 * stato. ".vbo-result-unavailable" arriva nativo con lo stesso sfondo
 * pieno di ".vbselectr-result" (entrambe le classi sullo stesso elemento
 * <a>, default_classic.php): qui la variante outline vince per
 * specificità (0,3,0 contro 0,1,0 della regola base condivisa, riga
 * ~29).
 */
.vbo-searchresults-classic-wrap .vbselectordiv .vbo-result-unavailable {
	background: transparent;
	border: 1px solid var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.vbo-searchresults-classic-wrap .vbselectordiv .vbo-result-unavailable:hover {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
}

/*
 * Icona zoom galleria (".vbmodalrdetails", il "+" in alto a destra
 * sulla foto): nativo un quadratino grigio 25×25 a bassa opacità
 * (vikbooking_styles.css) — qui ripreso nello stesso stile "chip
 * bianco" già usato altrove nel tema per pulsanti secondari flottanti
 * su immagine.
 */
.vbo-searchresults-classic-wrap .vbmodalrdetails a {
	width: 28px;
	height: 28px;
	line-height: 28px;
	border-radius: var(--vik-radius);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--accent-dark);
	opacity: 1;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.vbo-searchresults-classic-wrap .vbimglistdiv:hover .vbmodalrdetails a,
.vbo-searchresults-classic-wrap .vbmodalrdetails a:hover {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
	opacity: 1;
}

/* Sotto i 768px una riga orizzontale stretta non è leggibile: la scheda
   torna a impilarsi verticalmente, stesso principio già usato per Rooms
   List Lista sopra. */
@media (max-width: 767px) {
	.vbo-searchresults-classic-wrap:not(.vblistcontainer-grid) .room_item {
		flex-direction: column;
		padding-bottom: var(--wp--preset--spacing--5);
	}

	.vbo-searchresults-classic-wrap:not(.vblistcontainer-grid) .vblistroomblock {
		flex-direction: column;
		padding: 0;
	}

	.vbo-searchresults-classic-wrap:not(.vblistcontainer-grid) .vbimglistdiv {
		flex-basis: auto;
		width: 100%;
		height: 200px;
	}

	.vbo-searchresults-classic-wrap:not(.vblistcontainer-grid) .vbo-info-room {
		padding: var(--wp--preset--spacing--5) 0 0;
	}

	.vbo-searchresults-classic-wrap:not(.vblistcontainer-grid) .vbcontdivtot {
		align-self: auto;
		justify-content: flex-start;
		width: 100%;
		padding: var(--wp--preset--spacing--5) 0 0;
		border-left: none;
		margin-top: var(--wp--preset--spacing--5);
		margin-bottom: var(--wp--preset--spacing--5);
	}

	.vbo-searchresults-classic-wrap:not(.vblistcontainer-grid) .vbdivtotinline,
	.vbo-searchresults-classic-wrap:not(.vblistcontainer-grid) .vbsrowprice {
		align-items: flex-start;
		text-align: left;
	}
}

/* -----------------------------------------------------------
   Search Results — Sezioni "Room N" (".vbsearchproominfo", ricerca con
   più di una camera, default_classic.php: solo il pallino "Room N" più
   il riepilogo ospiti, sopra il gruppo di card di quel gruppo). Regole
   condivise da Lista e Griglia.
   ----------------------------------------------------------- */

/*
 * Pillola "Room N" (".vbsearchnroom") — colori espliciti invece di
 * ereditare "background: var(--vbo-grey-bg-color)" nativo
 * (vikbooking_styles.css): il valore nativo è lo stesso identico
 * "#eee" in entrambe le modalità (nessuna regola nativa lo
 * differenzia tra Lista e Griglia), ma fissarlo qui con i token del
 * tema toglie qualunque margine perché le due modalità possano
 * divergere visivamente in futuro (es. un'altra regola scoped a
 * ".vblistcontainer-grid" che tocchi lo stesso elemento) — stesso
 * trattamento "outline" (sfondo chiaro, bordo, testo scuro) in
 * entrambe, come da mockup approvato.
 */
.vbo-searchresults-classic-wrap .vbsearchproominfo {
	background: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--line);
}

.vbo-searchresults-classic-wrap .vbsearchnroom {
	background: var(--wp--preset--color--background-alt);
	color: var(--wp--preset--color--text);
}

@media (max-width: 550px) {
	.vbsearchproominfo > span {
		width: auto;
	}
}

/*
 * Separazione tra una sezione "Room N" e la successiva, solo Lista: in
 * Griglia le card di gruppi diversi sono già visivamente distinte (righe
 * separate, ognuna con la propria pillola "Room N" ben visibile sopra);
 * in Lista invece le card si susseguono in un'unica colonna lunga — con
 * più di 2 gruppi lo scroll diventa lungo e la sola pillola non segnala
 * abbastanza il cambio di sezione. ":not(:first-child)" esclude la prima
 * sezione (nessun divisore sopra il primo gruppo, subito dopo la barra
 * filtri/toggle).
 */
.vbo-searchresults-classic-wrap:not(.vblistcontainer-grid) .vbo-searchresults-step-content:not(:first-child) {
	margin-top: var(--wp--preset--spacing--7);
	padding-top: var(--wp--preset--spacing--6);
	border-top: 1px solid var(--wp--preset--color--line);
}

/*
 * Nota "Disponibile anche per Room N" (iniettata da
 * noteRepeatedSearchResultsRooms() in vikbooking-dom.js quando la stessa
 * camera compare identica in più sezioni — vedi commento alla funzione):
 * stesso trattamento tipografico minore già usato per le didascalie
 * (".vbliststartfrom"/".vbo-searchdet-total-label" sopra).
 */
.vbo-repeated-room-note {
	display: block;
	color: var(--wp--preset--color--text-soft);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-style: italic;
	margin: var(--wp--preset--spacing--1) 0 0;
}

/* -----------------------------------------------------------
   Search Results — Griglia (".vblistcontainer-grid" applicata
   allo stesso ".vbo-searchresults-classic-wrap": toggle nativo
   condiviso, vedi sopra). Layout base (immagine, testo, riga
   amenities+capienza, prezzo+CTA in fondo) già ereditato dalle
   regole "Rooms List — Griglia" sopra (non condizionate da
   ".room_result"): qui solo gli scostamenti specifici.
   ----------------------------------------------------------- */

/*
 * Allineamento righe: ".vbo-searchresults-party-content" è nativo
 * "display:grid" (vikbooking_styles.css), che già impila le card sulla
 * stessa riga alla stessa altezza (righe implicite "auto", nessun
 * comportamento a masonry) — verificato con Playwright, ".room_item" di
 * una stessa riga risultano già alti uguali. Il disallineamento visibile
 * era però nel CONTENUTO: ".room_item" arriva nativo "display:flex;
 * flex-wrap:wrap" (due "righe" flex interne, immagine+testo e
 * prezzo+CTA, vikbooking_styles.css) — win un contenitore multi-riga
 * flex-wrap, "margin-top:auto" su ".vbcontdivtot" (ereditato da Rooms
 * List Griglia sopra, pensato per spingerlo in fondo) non assorbe lo
 * spazio extra dato dallo stretch della riga in modo affidabile, cosi
 * due card della stessa riga con quantità di testo diversa (es. badge
 * "Last N available!" presente o assente) finivano con bottoni "Select"
 * a altezze diverse (verificato con Playwright: 950px vs 976px di top,
 * pur con card di altezza identica). "flex-direction:column" rende
 * ".room_item" un singolo asse verticale, dove "margin-top:auto" su
 * ".vbcontdivtot" funziona in modo prevedibile (stesso pattern "spingi
 * in fondo" già usato altrove nel tema).
 */
.vbo-searchresults-classic-wrap.vblistcontainer-grid .room_item {
	flex-direction: column;
}

/*
 * "A partire da" (".vblistcontainer-grid .vbsrowpricediv::before" sopra,
 * Rooms List Griglia): non pertinente qui, il prezzo di un risultato di
 * ricerca è già per le date/ospiti scelti, non "a partire da". Rimosso;
 * "per notte" sotto il numero (regola condivisa Lista/Griglia sopra) lo
 * sostituisce.
 */
.vbo-searchresults-classic-wrap.vblistcontainer-grid .vbsrowpricediv::before {
	content: none;
}

/*
 * ".vbrowcdescr" eredita "flex:1 1 160px" da Rooms List Griglia (sopra),
 * pensato per un ".vbo-grid-descr-row" orizzontale (JS
 * applyRoomsListGrid(), non eseguito su queste card disponibili — vedi
 * commento a inizio sezione): qui il genitore è invece
 * ".vbdescrlistdiv", colonna verticale. "flex-grow:1" la stira per
 * riempire lo spazio verticale residuo della card (fino all'altezza
 * della card più alta della riga) PRIMA che il browser possa applicare
 * il troncamento a 2 righe — "-webkit-line-clamp" tronca il contenuto
 * eccedente le righe indicate solo se l'altezza della box non è già
 * imposta più alta dall'esterno (qui da "flex-grow"), altrimenti il
 * testo intero viene semplicemente disegnato dentro lo spazio extra
 * (verificato con Playwright: box alta quanto il genitore, nessun
 * troncamento nonostante "-webkit-line-clamp:2" risultasse comunque
 * impostato). "flex-grow:0" restituisce alla descrizione la sua altezza
 * naturale (2 righe), lasciando che sia ".vbo-info-room" (già
 * "justify-content" implicito da flex-direction:column) a distribuire
 * lo spazio residuo altrove.
 */
.vbo-searchresults-classic-wrap.vblistcontainer-grid .vbrowcdescr {
	flex: 0 1 auto;
	min-width: 0;
}

/*
 * Riga prezzo+CTA in fondo: ".vbdivtotinline{justify-content:space-
 * between}" nativo di Rooms List Griglia allinea già prezzo a sinistra e
 * bottone a destra sulla stessa riga — qui solo l'allineamento verticale
 * per via del testo "per notte" aggiunto sotto il numero (di base
 * "center", renderebbe il bottone disallineato dal numero grande).
 */
/*
 * "gap": ".vbdivtotinline{justify-content:space-between}" (Rooms List
 * Griglia sopra) separa prezzo/badge (sinistra) e CTA (destra) solo
 * quando insieme superano la larghezza della riga — sulla card "Not
 * Available", che nel blocco sinistro ha solo capienza+badge (nessun
 * prezzo, meno largo), "space-between" da solo poteva lasciare CTA e
 * badge troppo vicini. "gap" garantisce una distanza minima in ogni
 * caso, indipendentemente da quanto contenuto c'è a sinistra.
 */
.vbo-searchresults-classic-wrap.vblistcontainer-grid .vbdivtotinline {
	align-items: flex-end;
	gap: var(--wp--preset--spacing--4);
	flex-wrap: wrap;
}

.vbo-searchresults-classic-wrap.vblistcontainer-grid .vbsrowprice {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--2);
	text-align: left;
}

/*
 * "Read more": in Griglia lo spazio è troppo ridotto per un link
 * proprio sotto la descrizione già troncata a 2 righe (".vbrowcdescr",
 * regola Rooms List Griglia sopra) — nascosto, resta solo l'ellissi.
 */
.vbo-searchresults-classic-wrap.vblistcontainer-grid .vbo-result-readmore-wrap {
	display: none;
}

/*
 * "Change Dates" in fondo ai risultati (".goback .vbo-goback-link",
 * dentro "#vbselectroomform" in default.php) — diverso dal "Change
 * Dates" della barra riepilogo in cima (".vbo-results-head", già
 * stilizzato altrove in questo file): questo vive fuori da
 * ".vbo-results-wrapper", nessuna regola lo copriva finora. Restava
 * quindi con lo stile nativo (".vbo-pref-color-btn-secondary" non
 * ancora ridefinita per questo contesto — blu Bootstrap di default) e
 * senza margine dal contenuto sopra. Stesso trattamento outline
 * terracotta già usato per "Details" sullo stato "Not Available"
 * (coerenza tra le CTA secondarie della pagina), scoped a
 * "#vbselectroomform" per non toccare le altre istanze di
 * ".vbo-goback-link" nel plugin (Booking Options, riepilogo
 * prenotazione), già stilizzate a parte con il proprio trattamento.
 */
#vbselectroomform .goback {
	margin: var(--wp--preset--spacing--5) 0;
}

#vbselectroomform .goback .vbo-goback-link {
	display: inline-flex;
	align-items: center;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: var(--vik-radius);
	background: transparent;
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: none;
	box-sizing: border-box;
	transition: background-color 0.2s ease, color 0.2s ease;
}

#vbselectroomform .goback .vbo-goback-link:hover {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
}

/*
 * Icona zoom galleria (".vbmodalrdetails a", il "+" sulla foto) — punto
 * ancora aperto anche sul desktop: lo stile del bottone stesso è già
 * ridefinito sopra (".vbo-searchresults-classic-wrap .vbmodalrdetails a"),
 * ma non l'inset del contenitore (".vbmodalrdetails", nativo
 * "top:5px; right:5px", vikbooking_styles.css) — 5px non è uno dei
 * valori della scala spaziale del tema, e stona con l'inset a spacing-3
 * già usato per il badge urgenza sull'angolo opposto della stessa foto
 * (".vbimglistdiv .vblastavail" sopra). Corretto qui una volta sola,
 * vale quindi anche per la versione tablet sotto (nessuna regola
 * aggiuntiva necessaria lì).
 */
.vbo-searchresults-classic-wrap .vbmodalrdetails {
	top: var(--wp--preset--spacing--3);
	right: var(--wp--preset--spacing--3);
}

/*
 * Riepilogo ricerca compatto (".vbo-results-summary-compact") e label
 * amenity visibile (".vbo-carat-label") — entrambi iniettati via JS a
 * ogni larghezza (initSearchResultsCompactSummary()/
 * ensureCaratVisibleLabel() in vikbooking-dom.js) ma pensati solo sotto
 * i 1024px (mobile+tablet): nascosti di base, resi visibili solo dentro
 * il relativo "@media" più sotto. Iniettarli sempre (invece di farlo
 * solo dentro un listener di resize) evita di dover ricalcolare/
 * reinserire nulla se l'utente ridimensiona la finestra da un lato
 * all'altro della soglia.
 *
 * Specificità del nascondimento di base: ".vbo-results-head > div"
 * (regola generica per tutti i campi della barra, sopra in questo file)
 * ha selettore a classe+tipo (0,1,1) — più specifico della sola classe
 * ".vbo-results-summary-compact" (0,1,0) che questa regola userebbe da
 * sola, quindi vincerebbe lei e il riepilogo compatto resterebbe
 * "display:flex" anche fuori dal proprio breakpoint (bug osservato:
 * versione compatta e barra desktop a 4 campi visibili insieme).
 * ".vbo-results-head .vbo-results-summary-compact" (0,2,0) qui sotto
 * pareggia il conto.
 */
.vbo-results-head .vbo-results-summary-compact {
	display: none;
}

.vbo-carat-label {
	display: none;
}

.vbo-searchresults-map-toggle {
	display: none;
}

.vbo-searchresults-map-expand,
.vbo-searchresults-map-expand-hint {
	display: none;
}

/* -----------------------------------------------------------
   Search Results — riepilogo ricerca compatto (sotto i 1024px)

   Riga unica: icona calendario + testo composto (es. "28/08/2026 –
   03/09/2026 · 6 Nights · 1 Adult") + "Change Dates" ancorato a destra,
   al posto del wrapper campi del desktop (".vbo-results-head-fields",
   creato da wrapResultsHeadFields() in vikbooking-dom.js — vedi sopra in
   questo file per la separazione strutturale in due colonne). Un solo
   switch mobile+tablet ↔ desktop, non tre versioni diverse: sotto i
   1024px non c'è mai spazio per i campi affiancati su una riga sola
   senza andare a capo (nessuna regola dedicata esisteva finora,
   risultato: wrap incontrollato su più righe — il problema che questa
   sezione risolve), e la stessa riga compatta con wrap naturale del
   testo va bene sia per tablet che per mobile, senza bisogno di una
   terza versione dedicata. Il testo composto è costruito da
   initSearchResultsCompactSummary() in vikbooking-dom.js leggendo i
   valori/etichette già nativi di quei campi (nessuna stringa
   hardcoded, stessa lingua del sito). Solo Search Results
   (":not(.vbo-results-head-showprc)"): Showprc non è in scope qui.
   ----------------------------------------------------------- */

@media (max-width: 1023px) {
	/*
	 * "flex-wrap:wrap" (non "nowrap"): a tablet il testo composto e
	 * "Change Dates" stanno comodamente affiancati sulla stessa riga, ma
	 * su schermi stretti (mobile) il testo può diventare più largo dello
	 * spazio residuo dopo il bottone. Con "nowrap" il bottone restava
	 * forzato sulla stessa riga mentre il testo, spinto a ridursi da
	 * "min-width:0" sotto, andava a capo AL SUO INTERNO — risultato: due
	 * o più righe di testo con il bottone sovrapposto in mezzo (bug
	 * osservato, verificato con Playwright a 390px). "wrap" lascia invece
	 * che sia l'intero bottone a scendere sotto il blocco testo quando
	 * non ci sta più affiancato, senza sovrapposizioni. Sovrascrive qui
	 * anche "flex-wrap:nowrap"/"justify-content:space-between" della
	 * regola desktop (sopra, due colonne campi|Change Dates): sotto i
	 * 1024px il wrapper campi è nascosto (sotto), restano solo 2 figli
	 * visibili (riepilogo compatto + Change Dates) per cui va bene lo
	 * stesso "space-between" ereditato, il testo compatto lo riempie
	 * comunque con "flex:1 1 auto".
	 */
	.vbo-results-head:not(.vbo-results-head-showprc) {
		flex-wrap: wrap;
	}

	/*
	 * Wrapper campi intero nascosto (non più i singoli campi uno per
	 * uno): da quando wrapResultsHeadFields() li raggruppa tutti dentro
	 * ".vbo-results-head-fields" (sopra in questo file), nasconderli
	 * individualmente non avrebbe più effetto (non sono più figli
	 * diretti di ".vbo-results-head") — un solo "display:none" sul
	 * wrapper ottiene lo stesso risultato per l'intero gruppo.
	 */
	.vbo-results-head:not(.vbo-results-head-showprc) > .vbo-results-head-fields {
		display: none;
	}

	/*
	 * Niente "min-width:0" qui (a differenza del resto del tema, dove è
	 * la norma per permettere a un figlio flex di restringersi oltre il
	 * proprio contenuto): lasciando il minimo automatico (il contenuto
	 * stesso, che comunque va già a capo internamente per via dello
	 * "span" sotto) il blocco intero va a capo sotto "Change Dates"
	 * quando non c'è più spazio, invece di restringersi all'infinito
	 * fino a sovrapporsi al bottone (vedi commento su "flex-wrap" sopra).
	 */
	/*
	 * "padding:0"/"justify-content:flex-start" espliciti: nativo
	 * ".vbo-results-head > div" porta ancora "padding:15px"/"flex:1 1
	 * 50%" da un proprio breakpoint (vikbooking_styles.css, non di
	 * questo file), non toccati dalla nostra regola base equivalente
	 * (quella si limita a "display/align-items/gap", sopra in questo
	 * file) — proprietà non ridichiarate restano quindi quelle native.
	 * "flex" qui viene già sovrascritto per intero (specificità di
	 * questa regola più alta), ma "padding" no: lasciato a "15px"
	 * spingeva icona+testo visibilmente fuori centro (verificato con
	 * Playwright). "justify-content:flex-start" esplicito per lo stesso
	 * motivo, anche se il valore calcolato senza questa riga risultava
	 * già "normal" (equivalente a "flex-start" in teoria) — dichiararlo
	 * qui toglie ogni dubbio ed è comunque il valore corretto voluto.
	 */
	.vbo-results-head:not(.vbo-results-head-showprc) .vbo-results-summary-compact {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: var(--wp--preset--spacing--3);
		flex: 1 1 auto;
		padding: 0 var(--wp--preset--spacing--3);
		order: 1;
		border: 0;
	}

	/*
	 * "vbo-results-head" nel selettore (non solo ".vbo-results-summary-
	 * compact i"): il nativo ha una regola "generica" per QUALUNQUE icona
	 * a un livello di annidamento preciso da ".vbo-results-head"
	 * (".vbo-results-head > div > i { color: var(--vbo-pref-textcolor) }",
	 * 1 classe + 2 combinatori diretti, specificità 0,1,2) che vince sulla
	 * nostra ".vbo-results-summary-compact i" (0,1,1, 1 classe in meno) a
	 * prescindere dall'ordine di caricamento — bug verificato con
	 * Playwright (icona ancora blu "#2282bd" alla larghezza dove questo
	 * riepilogo compatto è davvero visibile, sotto i 1024px). Aggiungendo
	 * l'antenato la specificità sale a 0,2,1 (2 classi), sufficiente a
	 * vincere sul conteggio classi da solo, senza dover pareggiare anche
	 * i tipi.
	 */
	.vbo-results-head .vbo-results-summary-compact i {
		flex-shrink: 0;
		color: var(--wp--preset--color--accent);
	}

	.vbo-results-summary-compact span {
		font-family: var(--wp--preset--font-family--body);
		font-size: var(--wp--preset--font-size--sm);
		font-weight: 600;
		color: var(--wp--preset--color--text);
		line-height: 1.4;
	}

	/*
	 * "flex-grow:0"/"padding:0": stesso leftover nativo di ".vbo-results-
	 * summary-compact" sopra (".vbo-results-head > div{flex:1 1 50%;
	 * padding:15px}") — senza azzerarlo qui, "Change Dates" cresceva a
	 * piena larghezza quando andava a capo su una riga propria (mobile),
	 * vanificando il "margin-left:auto" della regola base (nessuno
	 * spazio residuo da spingere, essendo già largo quanto la riga).
	 */
	.vbo-results-head:not(.vbo-results-head-showprc) > .vbo-results-chdates {
		order: 2;
		flex-grow: 0;
		flex-shrink: 0;
		padding: 0;
		margin: 0 var(--wp--preset--spacing--3);
	}
}

/* -----------------------------------------------------------
   Search Results — Griglia, sezione "Room N" sotto-popolata
   (desktop, ≥1024px: sotto quella soglia ".vbo-searchresults-party-
   content" torna "display:block" — vedi sezione Tablet/Mobile sotto —
   dove il problema non si pone).

   Ogni gruppo "Room N" ha il proprio ".vbo-searchresults-party-content"
   separato (un grid CONTAINER per gruppo, non uno condiviso — vedi
   default_classic.php). Nativo "grid-template-columns: repeat(3,
   minmax(0,1fr))" (vikbooking_styles.css, scope ".vbo-results-without-
   geomap") crea SEMPRE 3 tracce piene, indipendentemente dal numero di
   card presenti in quel gruppo: con 1 sola card il contenitore resta
   comunque largo quanto l'intera riga a 3 colonne (le altre 2 tracce
   restano semplicemente vuote — "minmax(0,1fr)" non è "fit-content",
   il numero di tracce è deciso dal "template", non dal contenuto), e
   quel contenitore è comunque un blocco "width:100%" — la card finisce
   ancorata a 1/3 di larghezza con un grande vuoto a fianco, sembra un
   layout rotto.

   ":has()" (supportato su tutti i browser evergreen correnti, già
   compatibile con il target WP 7.0/FSE nativo di questo tema) rileva
   il numero ESATTO di card nel gruppo via ":nth-child(N):nth-last-
   child(1)" ("N-esimo figlio A PARTIRE DALL'ULTIMO" — vero solo se ci
   sono esattamente N figli in totale), senza bisogno di JS: quando
   sono 1 o 2, il contenitore riceve una larghezza ridotta proporzionale
   (stessa formula della colonna nativa, "cardWidth = (100% - 2 gap) /
   3", gap 1.25rem — vikbooking_styles.css, ".vbo-results-content
   .vblistcontainer-grid .vbo-searchresults-party-content{gap:1.25rem}")
   cosi la riga si stringe al numero reale di risultati invece di
   restare ancorata alla larghezza piena a 3 colonne. Da 3 card in su
   nessuna di queste due regole si applica: resta il grid nativo, già
   corretto.

   Scope: solo ".vbo-results-without-geomap" (mappa interattiva
   disattivata — la configurazione effettiva di questo tema, verificato
   in pagina: nessuna classe ".vbo-results-with-geomap" in output). Con
   la mappa attiva il nativo usa invece "@container" per passare a
   2/3/4 colonne (vikbooking_styles.css, ".vbo-results-with-geomap"):
   fuori scope qui, le due formule sotto assumono 3 colonne piene.
   ----------------------------------------------------------- */
@media (min-width: 1024px) {
	.vbo-results-without-geomap .vblistcontainer-grid .vbo-searchresults-party-content:has(.room_item:nth-child(1):nth-last-child(1)) {
		grid-template-columns: minmax(0, 1fr);
		width: calc((100% - 2 * 1.25rem) / 3);
	}

	.vbo-results-without-geomap .vblistcontainer-grid .vbo-searchresults-party-content:has(.room_item:nth-child(2):nth-last-child(1)) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: calc((100% - 2 * 1.25rem) * 2 / 3 + 1.25rem);
	}
}

/* -----------------------------------------------------------
   Search Results — Tablet (768–1023px)

   A questo breakpoint la card cambia STRUTTURA (non solo dimensione) ed
   è identica indipendentemente dalla modalità Lista/Griglia selezionata
   (".vblistcontainer-grid" smette di avere effetto sul layout della
   card): le regole sotto sono quindi scritte SENZA lo scoping
   ":not(.vblistcontainer-grid)"/".vblistcontainer-grid" usato nelle
   sezioni Desktop sopra.

   Specificità: le due sezioni Desktop usano entrambe selettori a 3
   classi (".vbo-searchresults-classic-wrap:not(.vblistcontainer-grid)
   X" — ":not()" conta come una classe — e ".vbo-searchresults-classic-
   wrap.vblistcontainer-grid X"), non scoped per larghezza: restano
   quindi attive anche qui, e un selettore a sole 2 classi
   (".vbo-searchresults-classic-wrap X") dichiarato dopo NON basta a
   vincere, l'ordine nel foglio conta solo a parità di specificità
   (verificato con Playwright: card ancora affiancata testo/immagine
   invece che impilata, la specificità Desktop vinceva nonostante questa
   sezione fosse dichiarata dopo). Il prefisso ".vbo-searchresults-
   classic-wrap" è quindi ripetuto qui più volte sullo stesso elemento
   (selettore comunque valido: le classi ripetute non cambiano quali
   elementi vengono selezionati, solo il punteggio di specificità) per
   garantire di vincere su entrambe le varianti Desktop indipendentemente
   dall'ordine nel foglio.
   ----------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1023px) {

	/*
	 * 2. Card — struttura verticale dedicata, unica per Lista/Griglia.
	 * ".vbo-searchresults-party-content" arriva nativo "display:grid"
	 * SOLO in modalità Griglia (".vblistcontainer-grid
	 * .vbo-searchresults-party-content", vikbooking_styles.css — in
	 * Lista non ha alcuna regola nativa, è già un blocco naturale a
	 * colonna singola): qui neutralizzato in entrambi i casi per
	 * sicurezza, cosi la Griglia torna a una sola colonna e ".room_item"
	 * detta le proprie dimensioni invece di seguire quelle di una cella
	 * grid.
	 */
	.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap .vbo-searchresults-party-content {
		display: block;
	}

	.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap .room_item {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		width: auto;
		margin: 0 0 var(--wp--preset--spacing--6);
		border: 1px solid var(--wp--preset--color--line);
		border-radius: var(--vik-radius);
		overflow: hidden;
		background: var(--wp--preset--color--white);
	}

	.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap .room_item:last-child {
		margin-bottom: 0;
	}

	.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap .vblistroomblock {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		width: auto;
		min-height: 0;
		float: none;
		border-right: none;
		padding: 0;
	}

	.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap .vbimglistdiv {
		position: relative;
		flex: none;
		width: 100%;
		height: 220px;
		border-radius: 0;
		overflow: hidden;
	}

	.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap .vbimglistdiv .vblistimg {
		width: 100%;
		height: 100%;
		margin: 0;
		object-fit: cover;
	}

	/*
	 * ".vbo-dots-slider-selector" (il wrapper che il JS nativo del plugin
	 * inserisce intorno alla galleria quando una camera ha più di una
	 * foto, in coda a default_classic.php) arriva senza altezza propria
	 * (nessuna regola nativa la imposta): "height:100%" a cascata sui
	 * discendenti sotto (".vik-dots-slider-container" ecc.) non risolve
	 * quindi a nulla, perché il genitore da cui quel 100% dovrebbe
	 * partire è a sua volta "height:auto" — un riferimento circolare che
	 * il CSS risolve trattandolo come altezza nulla (verificato con
	 * Playwright: foto vuota/bianca nonostante "src" corretto nel DOM).
	 * "position:absolute" rispetto a ".vbimglistdiv" (già "position:
	 * relative" sopra) rompe la catena di percentuali: la dimensione ora
	 * viene da "inset:0" (che ha sempre un riferimento definito, il
	 * genitore posizionato), non da un'altezza ereditata.
	 */
	.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap .vbo-dots-slider-selector {
		position: absolute;
		inset: 0;
	}

	.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap .vik-dots-slider-container,
	.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap .vik-dots-slider-inner,
	.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap .vik-dots-slider-slides,
	.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap .vik-dots-slider-slide {
		width: 100% !important;
		height: 100% !important;
	}

	.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap .vik-dots-slider-slide img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap .vbo-info-room {
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--2);
		padding: var(--wp--preset--spacing--5);
	}

	.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap .vbdescrlistdiv {
		padding: 0;
		overflow: visible;
	}

	.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap .vbrowcname {
		margin: 0;
	}

	/*
	 * 3 righe invece delle 2 del desktop: una card a colonna singola, a
	 * piena larghezza, ha più respiro orizzontale per riga di quanto ne
	 * avesse la colonna testo stretta del desktop — vedi punto 6 (stress
	 * test) del giro di richieste.
	 */
	.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap .vbrowcdescr {
		display: -webkit-box;
		overflow: hidden;
		color: var(--wp--preset--color--text-soft);
		font-size: var(--wp--preset--font-size--sm);
		-webkit-line-clamp: 3;
		line-clamp: 3;
		-webkit-box-orient: vertical;
	}

	.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap .vbo-result-readmore-wrap {
		display: none;
	}

	/*
	 * Capienza ospiti (".vbrowroomcapacity") — non elencata tra i
	 * componenti della card in questo giro di richieste (solo titolo,
	 * descrizione, riga amenities, divisore, riga prezzo/CTA): nascosta
	 * qui, resta comunque nel DOM/leggibile per chi disabilita il CSS.
	 */
	.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap .vbrowroomcapacity {
		display: none;
	}

	/*
	 * Amenities — coppie icona+etichetta testuale (non i chip icon-only
	 * del desktop, scelta confermata nel brief). L'etichetta è iniettata
	 * da ensureCaratVisibleLabel() in vikbooking-dom.js: nel markup
	 * nativo la label esiste già SEMPRE (attributo "data-vbo-expl" su
	 * ".vbo-expl" per le amenities con icona configurata in VikBooking,
	 * "title"/testo per le altre — vedi normalizeSearchResultsCarats()
	 * sopra), ma non come nodo di testo visibile: qui reso visibile
	 * tramite un nuovo elemento ".vbo-carat-label" invece di riesporre
	 * quegli attributi via CSS (non possibile: "content:attr()" in un
	 * chip a icona sostituirebbe l'icona stessa, non l'affiancherebbe).
	 */
	.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap .roomlist_carats,
	.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap .vbo-room-carats {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--wp--preset--spacing--4);
		margin: 0;
		padding: 0;
	}

	.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap .roomlist_carats .vbo-room-carat {
		display: inline-flex;
		align-items: center;
		gap: var(--wp--preset--spacing--2);
		width: auto;
		height: auto;
		padding: 0;
		border: none;
		border-radius: 0;
		background: none;
	}

	.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap .vbo-icn-carat {
		color: var(--wp--preset--color--accent-dark);
		font-size: var(--wp--preset--font-size--sm);
	}

	.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap .vbo-carat-fallback-icon {
		width: 14px;
		height: 14px;
	}

	.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap .vbo-carat-label {
		display: inline;
		font-family: var(--wp--preset--font-family--body);
		font-size: var(--wp--preset--font-size--sm);
		color: var(--wp--preset--color--text-soft);
		white-space: nowrap;
	}

	/*
	 * Divisore fisso + riga finale prezzo/CTA. ".vbcontdivtot" torna qui
	 * a riga di piè di card (non più colonna laterale come nel desktop
	 * Lista, non più "margin-top:auto" come nel desktop Griglia).
	 */
	.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap .vbcontdivtot {
		position: static;
		float: none;
		left: 0;
		width: 100%;
		margin: 0;
		padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
		border-top: 1px solid var(--wp--preset--color--line);
		border-left: none;
		box-sizing: border-box;
	}

	.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap .vbdivtot {
		float: none;
		width: 100%;
	}

	.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap .vbdivtotinline {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--4);
	}

	.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap .vbsrowprice {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--1);
		padding: 0;
		text-align: left;
	}

	.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap .vbsrowpricediv {
		padding: 0;
		text-align: inherit;
	}

	.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap .vbselectordiv {
		display: block;
		width: auto;
		margin: 0;
		padding: 0;
		border-top: none;
	}

	.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap .vbselectr-result {
		width: auto;
		margin: 0;
		padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--6);
	}

	/*
	 * 3. Badge urgenza/disponibilità come ribbon a spigolo vivo — unica
	 * eccezione intenzionale al border-radius 2px del tema (ribbon,
	 * flush con l'angolo della foto). ".vblastavail" vive già dentro
	 * ".vbimglistdiv" a tutte le larghezze (relocateSearchResultsUrgencyBadge(),
	 * sempre attiva, non scoped per breakpoint): qui solo l'angolo vivo
	 * sostituisce il pill con margine del desktop.
	 */
	.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap .vbimglistdiv .vblastavail {
		top: 0;
		left: 0;
		border-radius: 0;
		border-width: 0;
		box-shadow: none;
	}

	/*
	 * ".vbo-unavailable-block", al contrario, vive di base dentro
	 * ".vbsrowprice" (colonna prezzo/CTA, vedi sezione Desktop sopra) a
	 * tutte le larghezze — qui per il tablet va spostato sulla foto come
	 * l'urgenza: relocateUnavailableBadge() in vikbooking-dom.js verifica
	 * la larghezza dello schermo al momento dell'esecuzione e sceglie la
	 * destinazione di conseguenza (".vbimglistdiv" qui, ".vbsrowprice"
	 * altrove, comportamento Desktop/Mobile invariato). Stile ribbon
	 * scuro (non il pill neutro outline del Desktop) per restare
	 * distinguibile a colpo d'occhio dal badge urgenza (che invece è
	 * sempre positivo/informativo).
	 */
	.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap .vbimglistdiv .vbo-unavailable-block {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		margin: 0;
		padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
		border: none;
		border-radius: 0;
		background: var(--wp--preset--color--text);
	}

	.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap .vbimglistdiv .vbo-unavailable-block .vbo-unavailable-icon i {
		background-color: var(--wp--preset--color--white);
	}

	.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap .vbimglistdiv .vbo-unavailable-description {
		color: var(--wp--preset--color--white);
		white-space: nowrap;
	}

	/*
	 * Riga finale, variante "Not Available": niente prezzo (nessuna
	 * tariffa per una camera non disponibile — lo stato è già comunicato
	 * dal ribbon sulla foto sopra), il badge di stato ".vbo-unavailable-
	 * block" non vive più qui (vedi sopra) quindi ".vbsrowprice" resta
	 * vuota — nascosta per intero, la riga mostra solo la CTA "Details".
	 */
	.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap .vbo-result-listing-unavailable .vbsrowprice {
		display: none;
	}

	.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap .vbo-result-listing-unavailable .vbdivtotinline {
		justify-content: flex-end;
	}

	.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap .vbselectordiv .vbo-result-unavailable {
		background: transparent;
		border: 1px solid var(--wp--preset--color--accent);
		color: var(--wp--preset--color--accent);
	}

	.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap.vbo-searchresults-classic-wrap .vbselectordiv .vbo-result-unavailable:hover {
		background: var(--wp--preset--color--accent);
		color: var(--wp--preset--color--white);
	}

	/*
	 * 4. Mappa — vedi la sezione dedicata "Search Results — Mappa
	 * compatta (sotto i 1024px)" più sotto in questo file, condivisa con
	 * Mobile (fuori da questo blocco Tablet-only): niente da aggiungere
	 * qui.
	 */
}

/* -----------------------------------------------------------
   Search Results — Mappa compatta (sotto i 1024px)

   Ispirato al pattern Airbnb (mappa compatta sempre visibile in cima ai
   risultati, non più nascosta dietro un bottone): la colonna laterale
   fissa nativa (".vbo-results-with-geomap .vbo-searchresults-classic-
   wrap{width:58%}" + ".vbo-searchresults-geo-wrapper{flex:1}",
   vikbooking_styles.css) diventa qui uno stack verticale —
   ".vbo-results-content" passa da riga (le due colonne affiancate) a
   colonna, con la mappa (".vbo-searchresults-geo-wrapper") spinta in
   cima via "order" e ridotta a un'altezza compatta, le card sotto a
   piena larghezza. Condiviso Tablet+Mobile (un solo breakpoint, come
   già per il riepilogo compatto sopra in questo file): il pattern è lo
   stesso a entrambe le larghezze, nessuna versione dedicata separata.

   Una sola istanza Google Maps, mai due: la mappa compatta e la mappa a
   schermo intero sono lo STESSO elemento "#vbo-results-geo-map" (quindi
   la stessa istanza "window.vbo_geomap", nativa, già caricata una volta
   sola dal plugin) — qui viene solo ridimensionato via CSS
   ("height:180px" compatta, "height:100%" con ".vbo-map-open"), mai
   ricreato. Un'istanza Maps separata per la versione compatta avrebbe
   richiesto di toccare il partial nativo (default_interactive_map.php)
   per inizializzare una seconda "google.maps.Map", fuori dai vincoli di
   questo progetto (mai file nativi) — comunque non necessario: la stessa
   istanza si presta bene a un semplice resize.

   Tap per aprire lo schermo intero: sia sul bottone flottante "Map" (che
   compare solo dopo che la mappa compatta esce dal viewport, vedi sotto)
   sia direttamente sulla mappa compatta stessa. Quest'ultima resta però
   un'istanza Maps VERA (zoomabile/trascinabile): un tap diretto
   verrebbe letto come inizio di un drag, non come "apri". Un bottone
   trasparente (".vbo-searchresults-map-expand") sovrapposto per intero
   sopra la card mappa intercetta il tap prima della mappa sottostante,
   evitando di dover distinguere "click" da "drag" sull'istanza Maps
   stessa — nascosto/non nel flusso quando la mappa è già a schermo
   intero, cosi l'utente può effettivamente interagire con la mappa una
   volta aperta.
   ----------------------------------------------------------- */

@media (max-width: 1023px) {
	.vbo-results-with-geomap.vbo-results-content {
		flex-direction: column;
	}

	.vbo-results-body .vbo-results-with-geomap .vbo-searchresults-classic-wrap {
		width: 100%;
		margin-right: 0;
	}

	.vbo-results-body .vbo-results-with-geomap .vbo-searchresults-geo-wrapper {
		display: block;
		order: -1;
		width: 100%;
		margin: 0 0 var(--wp--preset--spacing--4);
	}

	.vbo-results-body .vbo-results-with-geomap .vbo-geo-wrapper {
		position: relative;
		border-radius: var(--vik-radius);
		top: 0;
	}

	.vbo-results-body .vbo-results-with-geomap #vbo-results-geo-map {
		height: 180px !important;
	}

	/*
	 * Bottone trasparente a copertura dell'intera card mappa — vedi nota
	 * "Tap per aprire lo schermo intero" sopra. "hint" è un'etichetta
	 * puramente visiva (non cliccabile, "pointer-events:none": il tap va
	 * al bottone trasparente sotto di lei) per segnalare che la mappa è
	 * toccabile, altrimenti indistinguibile da una mappa semplicemente
	 * non ancora interattiva.
	 */
	.vbo-searchresults-map-expand {
		display: block;
		position: absolute;
		inset: 0;
		z-index: 5;
		width: 100%;
		height: 100%;
		border: none;
		padding: 0;
		background: transparent;
		cursor: pointer;
	}

	.vbo-searchresults-map-expand-hint {
		display: inline-flex;
		align-items: center;
		gap: var(--wp--preset--spacing--1);
		position: absolute;
		right: var(--wp--preset--spacing--3);
		bottom: var(--wp--preset--spacing--3);
		z-index: 6;
		padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
		border-radius: 100px;
		background: var(--wp--preset--color--white);
		color: var(--wp--preset--color--text);
		font-family: var(--wp--preset--font-family--body);
		font-size: var(--wp--preset--font-size--xs);
		font-weight: 500;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
		pointer-events: none;
	}

	/*
	 * Bottone flottante "Map" — a differenza della versione precedente
	 * (sempre visibile quando la mappa era nascosta di default), qui la
	 * mappa è già visibile in cima di suo: il bottone compare solo
	 * quando l'utente ha scrollato oltre, cioè quando la mappa compatta
	 * non è più nel viewport. ".vbo-map-scrolled-past" è applicata da un
	 * IntersectionObserver su ".vbo-searchresults-geo-wrapper" in
	 * initSearchResultsMapToggle() (vikbooking-dom.js) — reattivo in
	 * entrambe le direzioni (ricompare/scompare anche risalendo).
	 */
	.vbo-searchresults-map-toggle {
		display: none;
		align-items: center;
		gap: var(--wp--preset--spacing--2);
		position: fixed;
		left: 50%;
		bottom: var(--wp--preset--spacing--5);
		z-index: 40;
		transform: translateX(-50%);
		padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
		border: none;
		border-radius: 100px;
		background: var(--wp--preset--color--accent);
		color: var(--wp--preset--color--white);
		font-family: var(--wp--preset--font-family--body);
		font-size: var(--wp--preset--font-size--sm);
		font-weight: 500;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
		cursor: pointer;
	}

	.vbo-results-content.vbo-map-scrolled-past .vbo-searchresults-map-toggle {
		display: inline-flex;
	}

	.vbo-searchresults-map-toggle:hover {
		background: var(--wp--preset--color--accent-dark);
	}

	/*
	 * Overlay a schermo intero: ".vbo-map-open" è applicata da JS su
	 * ".vbo-results-content" all'apertura (bottone flottante o tap sulla
	 * mappa compatta). Stesso elemento mappa di sopra, solo ridimensionato
	 * — vedi nota "Una sola istanza Google Maps" in cima alla sezione. Le
	 * card sotto vengono nascoste (non solo coperte) per evitare che
	 * restino scrollabili "dietro" la mappa su iOS Safari.
	 */
	.vbo-results-content.vbo-map-open .vbo-searchresults-geo-wrapper {
		position: fixed;
		inset: 0;
		z-index: 50;
		width: 100%;
		margin: 0;
	}

	.vbo-results-content.vbo-map-open .vbo-geo-wrapper {
		position: static;
		width: 100%;
		height: 100%;
		border-radius: 0;
	}

	.vbo-results-content.vbo-map-open .vbo-results-geo-map-container {
		height: 100%;
	}

	.vbo-results-content.vbo-map-open #vbo-results-geo-map {
		height: 100% !important;
	}

	.vbo-results-content.vbo-map-open .vbo-searchresults-classic-wrap,
	.vbo-results-content.vbo-map-open .vbo-searchresults-map-toggle,
	.vbo-results-content.vbo-map-open .vbo-searchresults-map-expand,
	.vbo-results-content.vbo-map-open .vbo-searchresults-map-expand-hint {
		display: none;
	}

	.vbo-results-content.vbo-map-open .vbo-searchresults-map-close {
		display: inline-flex;
	}

	/*
	 * "display:none" di base: nel disegno precedente (mappa compatta
	 * nascosta finché non aperta) questo bottone, figlio di
	 * ".vbo-searchresults-geo-wrapper", ereditava il nascondimento dal
	 * genitore senza bisogno di una regola propria. Ora che la mappa
	 * compatta è visibile di default (vedi sopra), serve un gate
	 * esplicito — altrimenti resterebbe visibile in alto a destra anche
	 * fuori dall'overlay (bug osservato con Playwright).
	 */
	.vbo-searchresults-map-close {
		display: none;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: var(--wp--preset--spacing--4);
		right: var(--wp--preset--spacing--4);
		z-index: 51;
		width: 40px;
		height: 40px;
		border: none;
		border-radius: var(--vik-radius);
		background: var(--wp--preset--color--white);
		color: var(--wp--preset--color--text);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
		cursor: pointer;
	}
}

/* -----------------------------------------------------------
   Search Results — Compact (".vbo-searchresults-compact-wrap",
   layout "compact" per ricerche multi-camera/party — vedi
   default_compact.php, alternativa selezionabile dall'utente al
   layout "classic" sopra, non condivide markup/classi con quello).
   View a bassa priorità (poco usata dai clienti): restyling
   leggero dei token colore/tipografia/spaziatura sulla struttura
   tabellare nativa esistente, nessuna conversione a card come
   Rooms List Lista/Griglia. Manipolazioni DOM non ottenibili solo
   via CSS (prezzo senza decimali, soglia icone ospiti, stepper
   Reserve, riformulazione messaggio "camere mancanti") in
   vikbooking-dom.js, funzioni raggruppate subito dopo
   noteRepeatedSearchResultsRooms().
   ----------------------------------------------------------- */

/*
 * Riga per tipo di camera: bordo/radius allineati al resto del tema
 * invece del grigio "#eee"/4px nativi (vikbooking_styles.css).
 */
.vbo-searchresults-compact-wrap .vbo-room-result-wrap {
	margin: var(--wp--preset--spacing--6) 0;
}

.vbo-searchresults-compact-wrap .vbo-room-result-inner {
	border-radius: var(--vik-radius);
	border: 1px solid var(--wp--preset--color--line);
}

.vbo-searchresults-compact-wrap .vbo-room-result-inner .vbo-room-result-body > div {
	border-right: 1px solid var(--wp--preset--color--line);
}

/*
 * Header colonne (Room/Details/Guests/Price/Reserve): dal grigio
 * bootstrap nativo (".vbo-room-result-head{background:var(--vbo-
 * light-grey-bg-color)}", stessa specificità 0,2,0, vince qui per
 * ordine di caricamento) al token tema. Label in maiuscolo/xs, stesso
 * trattamento già usato per le label di Booking Details (".vbo-
 * booking-details-bookinfo-lbl").
 */
.vbo-searchresults-compact-wrap .vbo-room-result-head {
	background: var(--wp--preset--color--background-alt);
}

.vbo-searchresults-compact-wrap .vbo-room-result-head > div {
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
}

.vbo-searchresults-compact-wrap .vbo-room-result-head > div span {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-soft);
}

/*
 * Colonne Guests/Reserve leggermente più larghe delle 100px native:
 * spazio per le icone ospiti riformattate e per lo stepper +/- (vedi
 * sotto) senza che il contenuto si schiacci contro i bordi.
 */
.vbo-searchresults-compact-wrap .vbo-room-result-inner > div > .vbo-room-result-head-party,
.vbo-searchresults-compact-wrap .vbo-room-result-body-bookingsolution .vbo-room-result-body-price-party {
	flex-basis: 130px;
}

.vbo-searchresults-compact-wrap .vbo-room-result-inner > div > .vbo-room-result-head-select,
.vbo-searchresults-compact-wrap .vbo-room-result-body-bookingsolution .vbo-room-result-body-price-selection {
	flex-basis: 130px;
}

/*
 * Riga soluzione (una per party/prezzo): più margine/padding delle
 * 10px/8px native per una lettura meno compressa (invariata la
 * struttura a colonne flex), radius allineato al resto del tema.
 * "align-items:center" per centrare verticalmente icone/prezzo/
 * stepper ora che il padding è aumentato.
 */
.vbo-searchresults-compact-wrap .vbo-room-result-body-bookingsolutions .vbo-room-result-body-bookingsolution {
	margin: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
	border-radius: var(--vik-radius);
	border-color: var(--wp--preset--color--line);
	align-items: center;
}

.vbo-searchresults-compact-wrap .vbo-room-result-body-bookingsolution > div {
	padding: var(--wp--preset--spacing--4);
	border-right-color: var(--wp--preset--color--line);
}

/*
 * Prezzo: dal rosso/arancione nativo (".vbo-room-result-body-price-
 * amount .room_cost{color:inherit}", che eredita il colore
 * dell'antenato invece del terracotta base ".room_cost" del tema —
 * riga ~52 di questo file — battendolo per specificità 0,3,0 contro
 * 0,1,0; ".vbo-promotion-price .room_cost{color:var(--vbo-red-
 * color)}" nativo, 0,2,0, sulle camere in promozione) al terracotta
 * del tema: selettore a 3 classi scoped al wrap compact, specificità
 * 0,3,0 pari alla prima regola nativa (vince per ordine di
 * caricamento) e superiore alla seconda (vince sempre). Formato
 * Cormorant coerente con Rooms List Griglia (".vblistcontainer-grid
 * .room_cost" sopra) invece della sans nativa.
 */
.vbo-searchresults-compact-wrap .vbo-room-result-body-price-amount .room_cost {
	color: var(--wp--preset--color--accent-dark);
	font-family: var(--wp--preset--font-family--display);
	font-variant-numeric: lining-nums;
	font-size: var(--wp--preset--font-size--md);
	font-weight: 500;
}

/*
 * Badge urgenza "Last N available!" (".vbo-room-result-body-
 * lastavail", stesso testo nativo "VBLASTUNITSAVAIL" del gemello
 * Classic ".vblastavail" sopra, ma un elemento diverso — non
 * condiviso nel markup nativo tra le due view — quindi non coperto
 * dalle regole ".vblastavail" già scritte lì). Stessa gradazione:
 * outline chiaro per 2-3 unità rimaste, pieno per l'ultima (modificatore
 * ".--critical" aggiunto da classifyCompactUrgency() in vikbooking-
 * dom.js, stessa logica di classifySearchResultsUrgency() — il numero
 * non è selezionabile via solo CSS). Nativo (vikbooking_styles.css,
 * "float:right; background:var(--vbo-orange-color)") specificità
 * 0,4,1 (4 classi + il selettore di tipo "div" in "> div >"): un
 * selettore scoped a 4 classi qui pareggerebbe solo le classi (0,4,0),
 * perdendo per lo 0,0,1 di scarto — wrap ripetuto per arrivare a 0,5,0
 * (verificato con Playwright: badge rimasto arancione nativo senza
 * questo scarto).
 */
.vbo-searchresults-compact-wrap.vbo-searchresults-compact-wrap .vbo-room-result-body-details .vbo-room-result-body-rname .vbo-room-result-body-lastavail {
	display: inline-block;
	float: none;
	margin: 0 0 0 var(--wp--preset--spacing--2);
	padding: var(--wp--preset--spacing--1) var(--wp--preset--spacing--3);
	border: 1px solid var(--vik-accent-45);
	border-radius: 100px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--accent-dark);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
	vertical-align: middle;
}

.vbo-searchresults-compact-wrap.vbo-searchresults-compact-wrap .vbo-room-result-body-details .vbo-room-result-body-rname .vbo-room-result-body-lastavail--critical {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
}

/*
 * Icone capienza ospiti (".vbo-room-result-body-price-party-adults"/
 * "-children"): qui il markup nativo stampa solo gli ospiti
 * RICHIESTI per quel party di ricerca, non la capienza massima della
 * camera come ".vbrowroomcapacity" nella card Classic (vedi sopra) —
 * nessun dato "vuoto"/"massimo" disponibile in questa view da cui
 * comporre una vera frazione "selezionati/massimo". Sopra soglia (5+
 * ospiti) il nativo collassa già la riga in una singola icona + testo
 * libero "×N" (default_compact.php, "if ($totguests > 4)"): qui si
 * applica solo la stessa pillola terracotta già usata per la frazione
 * capienza della card Classic (".vbo-searchresults-capacity-
 * fraction"), con contenuto invariato (nessuna frazione da mostrare,
 * il numero resta un conteggio secco) — classe aggiunta da
 * styleCompactGuestPills() in vikbooking-dom.js.
 */
.vbo-searchresults-compact-wrap .vbo-room-result-body-price-party-adults,
.vbo-searchresults-compact-wrap .vbo-room-result-body-price-party-children {
	display: flex;
	align-items: center;
	gap: 2px;
}

.vbo-searchresults-compact-wrap .vbo-room-result-body-price-party-adults i,
.vbo-searchresults-compact-wrap .vbo-room-result-body-price-party-children i {
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--sm);
}

.vbo-searchresults-compact-wrap .vbo-compact-guests-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px var(--wp--preset--spacing--2);
	border-radius: 100px;
	background: var(--vik-accent-12);
	color: var(--wp--preset--color--accent-dark);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	font-variant-numeric: lining-nums;
	white-space: nowrap;
}

/*
 * Select quantità (".vbo-selroom-ddown") sostituita visivamente da
 * uno stepper +/- (enhanceCompactReserveSteppers() in vikbooking-dom.
 * js, riuso diretto di enhanceCounterSelect()/".vbo-search-guests-
 * stepper" già definito sopra per Adults/Children nel form di
 * ricerca — stesso linguaggio visivo, nessuna regola nuova qui). La
 * "<select>" nativa resta nel DOM (necessaria per "onchange"/invio)
 * ma nascosta via la stessa regola ".vbo-search-guests-stepper
 * select" già in questo file.
 */
.vbo-searchresults-compact-wrap .vbo-room-result-body-price-selection {
	justify-content: center;
}

/*
 * Messaggio "N rooms missing" (".vbo-room-result-body-bookmsg"):
 * ritonato da errore (bordo rosso nativo, "border: 1px solid var(--
 * vbo-red-color)") a promemoria/guida — stessa formula tinta chiara
 * dell'accento già usata per il badge urgenza outline sopra. Testo
 * riscritto da initCompactMissingRoomsMessage() in vikbooking-dom.js
 * (il messaggio nativo cambia a runtime ad ogni click sullo stepper,
 * non è statico al caricamento pagina).
 */
.vbo-searchresults-compact-wrap .vbo-room-result-body-bookmsg {
	border-color: var(--vik-accent-35);
	background: var(--vik-accent-08);
	color: var(--wp--preset--color--accent-dark);
	font-family: var(--wp--preset--font-family--body);
}

/*
 * Bottone "Book Now" (".vbo-room-result-body-bookbtn .btn", compare
 * solo quando questa riga soddisfa il party corrente): stesso
 * trattamento solido terracotta già usato per la CTA search primaria
 * (".vbo-search-submit .btn" sopra) invece del blu bootstrap nativo.
 */
.vbo-searchresults-compact-wrap .vbo-room-result-body-bookbtn .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: var(--vik-radius);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
}

.vbo-searchresults-compact-wrap .vbo-room-result-body-bookbtn .btn:hover {
	border-color: var(--wp--preset--color--accent-dark);
	background-color: var(--wp--preset--color--accent-dark);
}

/* -----------------------------------------------------------
   Booking Details — shortcode [vikbooking view="booking"]

   Pagina di riepilogo/pagamento prenotazione (stati standby, confirmed,
   cancelled). Restyling completo su mockup approvato ("Tenuta Aurora"):
   badge di stato, barra "Importo da saldare / Paga ora" in cima,
   card Dettagli Prenotazione + Dati Personali, righe camera con Opzioni
   (variante singola e multi-camera), riepilogo coupon/totale nello
   stesso stile approvato per la pagina Book (task=oconfirm), sezione
   servizi extra con stepper quantità.

   Sostituisce la versione precedente, minimale (box con solo bordo/
   padding), mai allineata al design system del tema.
   ----------------------------------------------------------- */

.vbo-booking-print {
	display: flex;
	justify-content: flex-end;
	margin-bottom: var(--wp--preset--spacing--3);
}

.vbo-booking-print a.vbo-booking-print-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	line-height: 26px;
	text-align: center;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--vik-radius);
	color: var(--wp--preset--color--text-soft);
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease;
	font-size: 16px;
}

.vbo-booking-print-link:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.vbo-booking-details-intro {
	margin: 0 0 var(--wp--preset--spacing--4);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

/*
 * Badge di stato — stile outline (bordo sottile + testo colorato),
 * icona a sinistra iniettata via ::before con "mask" invece di ::before
 * SVG a colori fissi: "mask" + "background-color: currentColor" fa sì
 * che l'icona erediti automaticamente il colore della variante di stato
 * (nessuna icona duplicata per ogni colore). Icone disegnate a mano
 * (cerchio + tratto), non Phosphor: qui serve solo un pittogramma
 * minimo leggibile a 16px, non l'intera libreria.
 */
.vbo-booking-details-head {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	margin-bottom: var(--wp--preset--spacing--5);
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
	border: 1px solid currentColor;
	border-radius: 100px;
}

.vbo-booking-details-head::before {
	content: "";
	flex-shrink: 0;
	width: 15px;
	height: 15px;
	background-color: currentColor;
	-webkit-mask: var(--vbo-status-icon) center / contain no-repeat;
	mask: var(--vbo-status-icon) center / contain no-repeat;
}

.vbo-booking-details-head h4 {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: inherit;
}

.vbo-booking-details-head-pending {
	--vbo-status-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E");
	background: var(--vik-accent-08);
	border-color: var(--vik-accent-35);
	color: var(--wp--preset--color--accent-dark);
}

.vbo-booking-details-head-confirmed {
	--vbo-status-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12l3 3 5-6'/%3E%3C/svg%3E");
	background: rgba(91, 122, 91, 0.1);
	border-color: rgba(91, 122, 91, 0.4);
	color: #4f6b4f;
}

.vbo-booking-details-head-cancelled {
	--vbo-status-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9 9l6 6M15 9l-6 6'/%3E%3C/svg%3E");
	background: rgba(179, 38, 30, 0.06);
	border-color: rgba(179, 38, 30, 0.3);
	color: var(--vbo-color-error);
}

/*
 * Barra "Importo da saldare / Paga ora" — costruita da
 * initBookingPaymentBar() in vikbooking-dom.js subito dopo il badge di
 * stato. Il markup nativo non prevede questo riepilogo in cima alla
 * pagina (prezzo e bottone di pagamento vivono in fondo, dopo l'elenco
 * camere): il JS sposta il bottone reale (nessun clone, stesso principio
 * di ".vbo-showprc-stickybar") e duplica solo la CIFRA del totale, che
 * resta comunque visibile — sola lettura, non un controllo — anche nella
 * riga "Totale" più sotto.
 */
.vbo-booking-paybar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--4);
	margin: 0 0 var(--wp--preset--spacing--6);
	padding: var(--wp--preset--spacing--5) var(--wp--preset--spacing--6);
	background: var(--vik-paybar-bg);
	border-radius: var(--vik-radius);
	color: #fff;
}

.vbo-booking-paybar-label {
	display: block;
	margin-bottom: var(--wp--preset--spacing--1);
	color: rgba(250, 250, 248, 0.7);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.vbo-booking-paybar-price {
	display: flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--2);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 500;
}

.vbo-booking-paybar-price .vbo_currency,
.vbo-booking-paybar-price .vbo_price {
	color: var(--wp--preset--color--white);
	font-variant-numeric: lining-nums;
}

.vbo-booking-paybar-nights {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 400;
	color: rgba(250, 250, 248, 0.6);
}

/*
 * ".vbvordpaybutton" nativo arriva con centraggio testo, bordo, ombra e
 * margini propri (pensati per stare da solo in fondo alla pagina, non
 * per una barra scura affiancata al prezzo): azzerati qui, scoped alla
 * sola azione dentro la paybar per non toccarlo altrove (es. se un
 * giorno restasse anche nella posizione nativa in fondo).
 */
.vbo-booking-paybar-action .vbvordpaybutton {
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	box-shadow: none;
	text-align: right;
}

.vbo-booking-paybar-action .vbo-pref-color-btn,
.vbo-booking-paybar-action .btn {
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--6);
	font-weight: 600;
}

/*
 * Card "Dettagli Prenotazione" / "Dati Personali" — ".vbo-booking-details-
 * bookinfos" e ".vbo-booking-details-udets" sono già due contenitori
 * separati e affiancati nel markup nativo (figli diretti di
 * ".vbo-booking-details-midcontainer"): bastano flexbox sul genitore e
 * bordo/sfondo sui due figli, nessuna card da ricostruire.
 */
.vbo-booking-details-midcontainer {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--5);
	margin-bottom: var(--wp--preset--spacing--4);
}

a[name="bmodreqf"] {
	display: none;
}

/*
 * Selettore rafforzato con lo stesso combinatore genitore > figlio del
 * nativo (".vbo-booking-details-midcontainer > div", specificità 0,1,1):
 * un selettore di sola classe (0,1,0) perderebbe contro quella regola
 * per padding/bordo/radius/ombra, che va invece completamente sostituita
 * (radius 6px e ombra non appartengono al linguaggio visivo del tema).
 */
.vbo-booking-details-midcontainer > .vbo-booking-details-bookinfos,
.vbo-booking-details-midcontainer > .vbo-booking-details-udets {
	flex: 1 1 300px;
	margin: 0;
	padding: var(--wp--preset--spacing--5);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--vik-radius);
	box-shadow: none;
}

/*
 * ".vbo-booking-details-actions" (link modifica/cancella/pre-check-in/
 * upsell, solo prenotazioni confermate) erediterebbe dalla stessa regola
 * nativa una terza "card" stretta (25% di larghezza, stesso bordo/ombra
 * delle due card sopra mai svuotato): qui va invece a riga piena sotto
 * le due card, senza contenitore proprio — sono già i singoli link
 * (".vbo-booking-mod-cmd a" ecc., sotto) ad avere il proprio bordo.
 */
.vbo-booking-details-midcontainer > .vbo-booking-details-actions {
	flex: 1 1 100%;
	margin: 0;
	padding: 0;
	border: none;
	box-shadow: none;
}

.vbvordudatatitle {
	display: block;
	position: relative;
	margin-bottom: var(--wp--preset--spacing--4);
	border-bottom: 0;
	padding-bottom: var(--wp--preset--spacing--3);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	text-transform: initial;
}

.vbvordudatatitle::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 32px;
	height: 2px;
	background: var(--wp--preset--color--accent);
}

/*
 * ".vbo-booking-details-bookinfos" mescola il titolo (uno span, fratello
 * diretto) e le righe dato (div ".vbo-booking-details-bookinfo"): la
 * griglia 2 colonne va quindi sul contenitore stesso, col titolo forzato
 * a piena larghezza. "Data prenotazione" (prima riga) e "Notti" (ultima
 * riga, quando non c'è split-stay) restano a piena larghezza tramite
 * ":first-of-type"/":last-of-type" — confrontano il tag (div), non
 * mischiano lo span del titolo — così "Arrivo"/"Partenza" (le righe in
 * mezzo) restano automaticamente affiancate, qualunque sia il numero di
 * righe opzionali (numero prenotazione OTA, numero di conferma) che il
 * nativo inserisce prima di loro per le prenotazioni confermate/OTA.
 */
.vbo-booking-details-bookinfos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;
	gap: 0 var(--wp--preset--spacing--4);
	align-content: first baseline;
}

.vbo-booking-details-bookinfos .vbvordudatatitle {
	grid-column: 1 / -1;
}

.vbo-booking-details-bookinfo:first-of-type,
.vbo-booking-details-bookinfo:last-of-type {
	grid-column: 1 / -1;
}

/*
 * ".vbo-bookingdet-custdata" invece è un contenitore dedicato, solo righe
 * dato (il titolo è fuori, fratello a monte): qui ":nth-child(3)" per
 * "e-Mail" (sempre il terzo campo — Nome, Cognome, e-Mail sono i 3 campi
 * fissi di VikBooking, in quest'ordine, prima degli eventuali campi
 * extra configurabili) e ":last-child" per l'ultimo campo (tipicamente
 * il consenso promozionale) restano a piena larghezza; il resto
 * (Città/Paese, ed eventuali extra come Telefono) si affianca in coppie.
 */
.vbo-bookingdet-custdata {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;
	gap: 0 var(--wp--preset--spacing--4);
}

.vbo-bookingdet-userdetail:nth-child(3),
.vbo-bookingdet-userdetail:last-child {
	grid-column: 1 / -1;
}

.vbo-booking-details-bookinfo,
.vbo-bookingdet-userdetail {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--wp--preset--spacing--2) 0;
	margin: 0 0 12px;
}
.vbo-booking-details-bookinfo:last-child, .vbo-bookingdet-userdetail:last-child {
	margin-bottom: 0;
}

.vbo-booking-details-bookinfo-lbl,
.vbo-bookingdet-userdetail-lbl {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: normal;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-soft);
}

.vbo-booking-details-bookinfo-val,
.vbo-bookingdet-userdetail-val {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

/*
 * Link azioni prenotazione (modifica/cancella/pre-check-in/recensione/
 * aggiungi extra) — solo per prenotazioni confermate con almeno
 * un'azione disponibile. Nessuna specifica nel brief, stile minimo
 * coerente con ".vbo-goback-link" già in uso altrove nel file, per non
 * lasciare un elenco di link nudi tra le card e la lista camere.
 */
.vbo-booking-details-actions-inner {
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
	margin-top: var(--wp--preset--spacing--5);
}

.vbo-booking-mod-cmd a,
.vbo-booking-mod-cmd span,
.vbo-booking-canc-cmd span {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	margin-top: 0;
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--vik-radius);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.vbo-booking-mod-cmd a:hover,
.vbo-booking-mod-cmd a:active,
.vbo-booking-mod-cmd a:focus,
.vbo-booking-mod-cmd span:hover,
.vbo-booking-canc-cmd span:hover {
	background: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

/*
 * "Pre Check-in" — unica azione tra le tre con più risalto (i clienti
 * sono spesso invitati a farlo in anticipo): stesso pieno terracotta di
 * ".vbo-pref-color-btn" ("Confirm Reservation"/"Paga ora"), non un nuovo
 * stile a parte. Selettore a 2 classi (".vbo-booking-mod-cmd" +
 * ".vbo-booking-precheckin-cmd", lo stesso div porta entrambe) per
 * pareggiare la specificità della regola outline sopra — eredita
 * comunque padding/gap/icona da lì, cambia solo i colori.
 */
.vbo-booking-mod-cmd.vbo-booking-precheckin-cmd a {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
	font-weight: 600;
}

.vbo-booking-mod-cmd.vbo-booking-precheckin-cmd a:hover,
.vbo-booking-mod-cmd.vbo-booking-precheckin-cmd a:active,
.vbo-booking-mod-cmd.vbo-booking-precheckin-cmd a:focus {
	background: var(--wp--preset--color--accent-dark);
	border-color: var(--wp--preset--color--accent-dark);
	color: var(--wp--preset--color--white);
}

/*
 * Form "Cancellation/Modification Request" (".vbordcancformbox",
 * nascosto via "display:none" nativo finché initBookingCancelForm() in
 * vikbooking-dom.js non lo sposta subito sotto la riga di bottoni — vedi
 * quel file per il perché della scelta "sposta" invece di "scrolla").
 * Stessa card delle altre sezioni della pagina (bordo/radius/sfondo),
 * titolo con lo stesso trattamento di ".vbvordudatatitle", label come
 * ".vbo-oconfirm-cfield-label label" del form Billing Information.
 */
.vbo-booking-details-midcontainer > .vbordcancformbox {
	margin: 0;
	padding: 0;
	box-shadow: none;
	border: 0;
}

.vbo-booking-cancform-inner {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--vik-radius);
	padding: var(--wp--preset--spacing--5);
	margin-top: 0;
}

.vbo-booking-cancform-inner h4 {
	position: relative;
	margin: 0 0 var(--wp--preset--spacing--4);
	padding-bottom: var(--wp--preset--spacing--3);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

.vbo-booking-cancform-inner h4::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 32px;
	height: 2px;
	background: var(--wp--preset--color--accent);
}

.vbordcancform-entry {
	margin-bottom: var(--wp--preset--spacing--4);
}

.vbordcancform-entry-label label {
	display: block;
	margin-bottom: var(--wp--preset--spacing--2);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--ink);
}

.vbordcancform-entry-inp .vbinput,
.vbordcancform-entry-inp .vbtextarea {
	width: 100%;
	box-sizing: border-box;
}

/*
 * ".vbordcancform-entry-submit input" nativo (1 classe + tipo,
 * specificità 0,1,1) batte ".vbo-pref-color-btn" da solo (0,1,0) e
 * impone lo sfondo verde bootstrap nonostante il markup nativo porti già
 * quella classe: qui si aggiunge ".vbo-pref-color-btn" al selettore
 * (0,2,1) per vincere, invece di introdurre un nuovo bottone parallelo.
 */
.vbordcancform-entry-submit input.vbo-pref-color-btn {
	background: var(--wp--preset--color--accent);
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: var(--vik-radius);
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--6);
	margin-top: var(--wp--preset--spacing--2);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.vbordcancform-entry-submit input.vbo-pref-color-btn:hover {
	background: var(--wp--preset--color--accent-dark);
	border-color: var(--wp--preset--color--accent-dark);
}

/*
 * Righe camera — foto, info camera ed extra/opzioni sono già 3 figli
 * diretti affiancabili di ".vbvordroominfo" nel markup nativo (nessuna
 * ristrutturazione DOM necessaria per il layout a 3 colonne del mockup).
 */
.vbo-booking-rooms-wrapper {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
	margin-bottom: var(--wp--preset--spacing--6);
}

.vbvordroominfo {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--5);
	padding: var(--wp--preset--spacing--5);
	margin: 0;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--vik-radius);
	box-sizing: border-box;
	box-shadow: none;
}

.vbo-booking-roomphoto {
	flex: 0 0 160px;
	width: 160px;
	height: 120px;
	border-radius: var(--vik-radius);
	overflow: hidden;
}

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

.vbordroomdet {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--1);
	flex: 1 1 220px;
	min-width: 200px;
}

.vbvordroominfotitle {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

.vbordroomdetpeople {
	display: flex;
	gap: var(--wp--preset--spacing--2);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--text-soft);
}

.vbo-booking-roomrate {
	margin-top: var(--wp--preset--spacing--2);
}

.vbvordcoststitlemain {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.vbo-booking-pricename {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--text-soft);
}

.vbo-booking-roomrate .room_cost {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	color: var(--wp--preset--color--accent);
	font-variant-numeric: lining-nums;
}

.vbo-booking-rooms-wrapper .vbo-booking-room-extras {
	flex: 0 0 220px;
	padding-left: var(--wp--preset--spacing--5);
	border-top: 0;
	border-left: 1px solid var(--wp--preset--color--line);
}

.vbvordcoststitle {
	display: block;
	margin-bottom: var(--wp--preset--spacing--2);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: normal;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-soft);
}

.vbo-booking-item-row {
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--3);
	padding: var(--wp--preset--spacing--1) 0;
	font-size: var(--wp--preset--font-size--sm);
}

.vbo-booking-pricedet {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

.vbo-booking-room-extras-services {
	margin-top: var(--wp--preset--spacing--3);
}

@media (max-width: 767px) {
	.vbo-booking-roomphoto {
		width: 100%;
		height: 180px;
		flex-basis: 100%;
	}

	.vbo-booking-room-extras {
		flex-basis: 100%;
		padding-left: 0;
		padding-top: var(--wp--preset--spacing--4);
		margin-top: var(--wp--preset--spacing--3);
		border-left: none;
		border-top: 1px solid var(--wp--preset--color--line);
	}
}

/*
 * Variante multi-camera — VikBooking aggiunge già la classe
 * ".vbvordroominfo-multi" a ogni riga quando la prenotazione contiene più
 * di una camera (default.php, "count($orderrooms) > 1"): nessun JS
 * necessario per distinguere le due varianti. Il numero "N camere
 * prenotate" è calcolato con i contatori CSS nativi (nessun conteggio
 * lato JS): ogni riga incrementa ".vbo-rooms-count", il totale è letto da
 * uno pseudo-elemento sullo stesso wrapper con "counter()". Lo
 * pseudo-elemento è per costruzione l'ultimo nodo generato (i contatori
 * CSS non supportano un "lookahead" sui fratelli successivi), quindi
 * "order: -1" lo riporta visivamente in cima senza spostarlo nel DOM.
 */
/*
 * Sfondo bianco come la variante singola camera (non più il pieno
 * background-alt): il gruppo multi-camera si distingue con un bordo
 * sinistro sottile in accento, non un riempimento colorato esteso.
 */
.vbo-booking-rooms-wrapper:has(.vbvordroominfo-multi) {
	gap: 0;
	padding: var(--wp--preset--spacing--5);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-left: 3px solid var(--wp--preset--color--accent);
	border-radius: var(--vik-radius);
	counter-reset: vbo-rooms-count;
	box-sizing: border-box;
}

.vbo-booking-rooms-wrapper:has(.vbvordroominfo-multi)::after {
	order: -1;
	content: counter(vbo-rooms-count) " camere prenotate";
	display: block;
	margin-bottom: var(--wp--preset--spacing--4);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

/*
 * Il nativo dà a ".vbvordroominfo-multi" una larghezza fissa del 50%
 * ("width: calc(50% - 10px)", pensata per la propria griglia a 2
 * colonne — ".vbo-booking-rooms-wrapper" nativo è "flex-wrap:wrap" in
 * riga, non in colonna) — mai sovrascritta finora. Nel nostro layout a
 * colonna singola questo capestro a metà larghezza (misurato con
 * Playwright: riga di ~526px invece dei ~1112px disponibili) lasciava
 * spazio solo a foto+info, spingendo ".vbo-booking-room-extras" a
 * andare a capo SOTTO invece che affiancarsi come nella variante a
 * camera singola — la causa reale dello spazio verticale segnalato
 * come eccessivo, non un problema di padding. "width:100%" (stessa
 * specificità di quella nativa, caricata dopo) ripristina la riga
 * intera, uguale alla camera singola.
 */
.vbvordroominfo-multi {
	width: 100%;
	counter-increment: vbo-rooms-count;
	background: transparent;
	border: none;
	border-radius: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: var(--wp--preset--spacing--4) 0;
}

.vbvordroominfo-multi:last-of-type {
	border-bottom: none;
	padding-bottom: 0;
}

.vbvordroominfo-multi:first-of-type {
	padding-top: 0;
}

/*
 * Il nativo aggiunge anche un margine proprio su ".vbordroomdet" quando
 * annidato in ".vbvordroominfo-multi" (15px in alto, pensato per il suo
 * layout impilato foto/info): azzerato per restare identico alla
 * spaziatura della camera singola (gap della riga già gestito da
 * ".vbvordroominfo", non da questo margine aggiuntivo).
 */
.vbvordroominfo-multi .vbordroomdet {
	margin: 0;
}

/*
 * Coupon + Totale — stesso trattamento visivo già approvato per il
 * riepilogo prezzi della pagina Book (task=oconfirm, vedi
 * ".vbo-oconfirm-summary-total-wrapper" più sotto nel file): righe
 * impilate con bordo condiviso, riga "Totale" distinta da sfondo
 * background-alt e bordo superiore in accent, prezzo in Cormorant con
 * "lining-nums". Selettori diversi perché questa view usa le proprie
 * classi native (".vbo-booking-cost-*"), non quelle di oconfirm.
 */
.vbo-booking-costs-list {
	border: 0;
	box-shadow: none;
	padding: 0;
	margin-bottom: var(--wp--preset--spacing--6);
}

.vbo-booking-cost-detail {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
}

.vbo-booking-cost-detail + .vbo-booking-cost-detail {
	border-top: none;
}

.vbo-booking-cost-detail:first-child {
	border-radius: var(--vik-radius) var(--vik-radius) 0 0;
	padding:  var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
	border-bottom: 0;
}

.vbo-booking-cost-detail:last-child {
	border-radius: 0 0 var(--vik-radius) var(--vik-radius);
	padding:  var(--wp--preset--spacing--5);
	border-top: 2px solid var(--wp--preset--color--accent);
}

.vbo-booking-cost-detail:first-child:last-child {
	border-radius: var(--vik-radius);
}

.vbo-booking-cost-lbl span {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-soft);
}

.vbo-booking-cost-val-number .vbo_price {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 500;
	font-variant-numeric: lining-nums;
}

.vbo-booking-cost-val-number .vbo_currency {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--base);
}

.vbo-booking-cost-detail-discount .vbo-booking-cost-val-number .vbo_price,
.vbo-booking-cost-detail-discount .vbo-booking-cost-val-number .vbo_currency,
.vbo-booking-cost-detail-refund .vbo-booking-cost-val-number .vbo_price,
.vbo-booking-cost-detail-refund .vbo-booking-cost-val-number .vbo_currency {
	color: var(--vbo-green-color);
}

.vbo-booking-cost-detail-total,
.vbo-booking-cost-detail-remainingbalance {
	background: var(--wp--preset--color--background-alt);
	border-top: 2px solid var(--wp--preset--color--accent);
}

.vbo-booking-cost-detail-total .vbo-booking-cost-lbl span,
.vbo-booking-cost-detail-remainingbalance .vbo-booking-cost-lbl span {
	font-size: var(--wp--preset--font-size--sm);
}

.vbo-booking-cost-detail-total .vbo-booking-cost-val-number .vbo_price,
.vbo-booking-cost-detail-remainingbalance .vbo-booking-cost-val-number .vbo_price {
	font-size: var(--wp--preset--font-size--lg);
}

.vbo-booking-cost-detail-total .vbo-booking-cost-val-number .vbo_currency,
.vbo-booking-cost-detail-remainingbalance .vbo-booking-cost-val-number .vbo_currency {
	font-size: var(--wp--preset--font-size--md);
}

/*
 * Sezione "Aggiungi servizi extra al tuo soggiorno" — righe più ariose
 * della lista nativa, con divisore leggero. Le opzioni senza foto (nel
 * demo: Late Check-out, Transfer Aeroporto) non ricevono alcun
 * placeholder immagine: ".vbo-upsell-option-entry-img" è assente dal
 * markup quando l'opzione non ha una foto configurata (vedi
 * default.php, "if (!empty($o['img']))"), quindi lo spazio si chiude
 * naturalmente col flex layout, nessuna regola necessaria per "nasconderlo".
 */
.vbo-booking-upsell-container {
	background: transparent;
	padding: 0;
	margin-bottom: var(--wp--preset--spacing--7);
}
.vbo-booking-upsell-container h3 {
	margin: 0 0 var(--wp--preset--spacing--5);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

/*
 * Bordo superiore + padding come apertura di sezione, per rendere
 * subito riconoscibile il cambio di camera quando gli extra services
 * sono ripetuti per gruppo — non un background pieno sul gruppo intero
 * (stessa scelta "leggera" del contenitore multi-camera sopra, niente
 * riempimenti colorati estesi). Il primo gruppo non ha nulla sopra da
 * separare (arriva subito dopo l'H3 della sezione), quindi resta senza
 * bordo/padding.
 */
.vbo-booking-upsell-room-details {
	margin: 0 0 var(--wp--preset--spacing--4);
	padding-top: var(--wp--preset--spacing--4);
	border-top: 1px solid var(--wp--preset--color--line);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--text-soft);
}

.vbo-booking-upsell-container .vbo-booking-upsell-room-wrap:first-child .vbo-booking-upsell-room-details {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

.vbo-booking-upsell-room-name {
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

/*
 * Il nativo avvolge ogni gruppo di opzioni (uno per camera, quando ce
 * n'è più di una upsellabile) in un box bianco proprio — ombra, radius
 * 10px, padding 20px, margin 10px 0 (".vbo-booking-upsell-room-wrap",
 * mai toccato finora): è quello il "contenitore unico" da eliminare, non
 * qualcosa introdotto da questo file. Selettore a 2 classi per pareggiare
 * la specificità nativa (0,1,0 → qui 0,2,0, comunque caricata dopo).
 *
 * "margin:0" qui azzerava ANCHE lo spazio tra un gruppo-camera e il
 * successivo (bug segnalato: header del gruppo successivo attaccato
 * senza margine all'ultima riga extra del gruppo precedente) — il
 * margine di separazione va quindi riaggiunto esplicitamente sotto,
 * invece di lasciare il margine nativo che qui era già stato azzerato.
 */
.vbo-booking-upsell-container .vbo-booking-upsell-room-wrap {
	background: transparent;
	box-shadow: none;
	border: none;
	border-radius: 0;
	padding: 0;
	margin: 0;
	width: 100%;
}

.vbo-booking-upsell-container .vbo-booking-upsell-room-wrap + .vbo-booking-upsell-room-wrap {
	margin-top: var(--wp--preset--spacing--6);
}

.vbo-upsell-options-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--4);
}

/*
 * Selettore a 2 classi apposta: il nativo stila questa riga con
 * ".vbo-booking-upsell-room-wrap .vbo-upsell-option-entry" (stessa
 * specificità, 2 classi) e in un suo media query mobile forza
 * "flex-basis:100%" — se il nostro wrapper fosse "flex-direction:column"
 * quel 100% verrebbe letto sull'asse principale (l'altezza in modalità
 * colonna, non la larghezza), facendo impilare le righe in COLONNE
 * altissime invece che una sotto l'altra (bug osservato con Playwright a
 * 390px: le 4 righe finivano affiancate, ~1200px di altezza ciascuna).
 * Restando in row (default) e imponendo qui lo stesso "flex-basis:100%"
 * un'unica volta, valido su tutti i breakpoint, l'ambiguità sparisce.
 *
 * Ogni riga è ora una card indipendente (bordo/radius/sfondo propri),
 * separate da un gap vero (quello di ".vbo-upsell-options-wrap" sopra),
 * non più da un divisore ".border-bottom" interno a un'unica lista.
 */
.vbo-booking-upsell-container .vbo-upsell-option-entry {
	display: flex;
	flex: 1 1 100%;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--5);
	padding: var(--wp--preset--spacing--5);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--vik-radius);
}

.vbo-booking-upsell-container .vbo-upsell-option-entry:last-child {
	border: 1px solid var(--wp--preset--color--line);
}

.vbo-booking-upsell-container  .vbo-booking-upsell-room-children {
	font-weight: normal;
	display: inline-block;
	font-size: .9em;
}


/*
 * Sotto i 551px il nativo impila già ogni figlio della riga su una riga
 * propria, centrata (vikbooking_styles.css, "@media (max-width:550px)
 * ... .vbo-upsell-option-entry > * { text-align:center; }"): risultato
 * leggibile ma con testo centrato sopra a controlli (stepper, "Aggiungi")
 * che invece restano ancorati a sinistra per via dei nostri stessi
 * override (".vbo-upsell-qty-stepper" con "flex:0 0 auto", non più
 * "flex-basis:100%"): il disallineamento testo-centrato/controlli-a-
 * sinistra si vede subito. Qui si riporta tutto a sinistra (stesso
 * "0,2,0" del nativo, caricato dopo) e si stringe il gap verticale tra i
 * blocchi (spacing-5 → spacing-3), pensato per una riga larga in
 * orizzontale, troppo ampio quando ogni blocco occupa la propria riga.
 * Stepper e dimensioni immagine non toccati, come richiesto.
 *
 * "justify-content", non "text-align": ".vbo-upsell-option-entry-cost"
 * (come ogni figlio diretto della riga) è reso "display:flex" dal
 * nativo, non scoped al mobile (".vbo-upsell-option-entry > *", sempre
 * attivo) — su un contenitore flex "text-align" non ha alcun effetto,
 * l'allineamento del contenuto (i due span di valuta/prezzo) è governato
 * da "justify-content", che è la proprietà che il media query mobile del
 * nativo imposta davvero a "center" (verificato con Playwright: il
 * prezzo restava visivamente centrato nella card anche con
 * "text-align:left" impostato, perché quella dichiarazione veniva
 * semplicemente ignorata dal motore di layout flex).
 *
 * ".vbo-upsell-option-entry-cost" ha in realtà una regola nativa ANCORA
 * più specifica di ".vbo-upsell-option-entry > *" (3 classi:
 * ".vbo-booking-upsell-room-wrap .vbo-upsell-option-entry >
 * .vbo-upsell-option-entry-cost", specificità 0,3,0): un selettore a
 * 2 classi come ".vbo-booking-upsell-container .vbo-upsell-option-entry-
 * cost" (0,2,0) perde comunque, "justify-content" restava "center"
 * anche dopo il primo tentativo (verificato leggendo il valore
 * computed). Serve un selettore a 3 classi per pareggiare.
 */
@media (max-width: 550px) {
	.vbo-booking-upsell-container .vbo-upsell-option-entry {
		gap: var(--wp--preset--spacing--3);
	}

	.vbo-booking-upsell-container .vbo-upsell-option-entry-name,
	.vbo-booking-upsell-container .vbo-upsell-option-entry-cost {
		text-align: left;
		justify-content: flex-start;
	}

	.vbo-booking-upsell-container .vbo-upsell-option-entry .vbo-upsell-option-entry-cost {
		justify-content: flex-start;
	}
}

.vbo-booking-upsell-room-wrap .vbo-upsell-option-entry > .vbo-upsell-option-entry-img {
	flex: 0 0 96px;
	margin: 0;
}

.vbo-upsell-option-entry-img img {
	display: block;
	width: 96px;
	height: 96px;
	object-fit: cover;
	border-radius: var(--vik-radius);
	margin: 0;
}

.vbo-upsell-option-entry-name {
	flex: 1 1 200px;
	min-width: 160px;
}

/*
 * Righe senza foto (nel demo: Late Check-out, Transfer Aeroporto) —
 * ".vbo-upsell-option-entry-img" è assente dal markup quando l'opzione
 * non ha un'immagine configurata (default.php, "if (!empty($o['img']))"):
 * nessun elemento a cui riservare spazio con un semplice "flex-basis".
 * Niente placeholder (icona/sfondo/bordo) — solo lo stesso ingombro
 * (96px immagine + gap della riga) spostato sul titolo via margin, così
 * il testo riparte esattamente dove inizia nelle righe con foto, senza
 * introdurre alcun elemento visibile nel DOM.
 *
 * Solo da 1024px in su (desktop, vedi soglie in CLAUDE.md): sotto quella
 * soglia la riga va comunque a capo su più righe (vedi blocco tablet/
 * mobile più sotto) e l'immagine, quando c'è, finisce sopra al testo
 * invece che accanto — un margin-left pensato per un'unica riga
 * orizzontale lì produrrebbe un bordo sinistro incoerente tra il titolo
 * (rientrato) e prezzo/stepper sottostanti (non rientrati), il problema
 * osservato con Playwright a 768px.
 *
 * ".vbo-upsell-options-wrap:has(.vbo-upsell-option-entry-img)" in testa
 * al selettore: l'offset scatta solo se ALMENO UN'ALTRA riga nello
 * stesso gruppo (stessa camera, in caso di multi-camera con set di extra
 * diversi per camera) ha davvero una foto — quindi solo se esiste una
 * colonna immagine a cui allinearsi. Se in quel gruppo nessuna opzione
 * ha una foto, tutte le righe partono da zero senza rientro inutile.
 */
@media (min-width: 1024px) {
	.vbo-upsell-options-wrap:has(.vbo-upsell-option-entry-img) .vbo-upsell-option-entry:not(:has(.vbo-upsell-option-entry-img)) .vbo-upsell-option-entry-name {
		margin-left: calc(96px + var(--wp--preset--spacing--5));
	}
}
@media (max-width: 860px) {
	.vbo-booking-upsell-room-wrap .vbo-upsell-option-entry > .vbo-upsell-option-entry-name {
		margin: 0 0 8px;
	}

	.vbo-booking-upsell-room-wrap .vbo-upsell-option-entry > .vbo-upsell-option-entry-cost, .vbo-booking-upsell-room-wrap .vbo-upsell-option-entry > .vbo-option-upsell-add {
		flex-basis: 100%;
		justify-content: center;
	}

	.vbo-booking-upsell-container .vbo-upsell-option-entry-input {
		margin: 0 auto;
	}

	.vbo-booking-upsell-room-wrap .vbo-upsell-option-entry > .vbo-option-upsell-add .btn {
		width: 100%;
		justify-content: center;
	}
}

.vbo-upsell-option-entry-name > span {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.vbo-upsell-option-entry-descr {
	margin-top: 2px;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--text-soft);
}

.vbo-upsell-option-entry-cost {
	flex: 0 0 auto;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--accent);
	font-variant-numeric: lining-nums;
	white-space: nowrap;
}

.vbo-upsell-option-entry-input:empty {
	display: none;
}

/*
 * Stepper +/- costruito da initBookingUpsellStepper() in
 * vikbooking-dom.js SOLO attorno agli input numerici nativi
 * (".vbo-upsell-option-entry-input input[type=number]"): le opzioni
 * "a interruttore" configurate senza quantità (hmany=0 lato admin, es.
 * Late Check-out/Cesto di benvenuto nel demo) non hanno alcun input nel
 * markup nativo e restano col solo bottone "Aggiungi" — uno stepper lì
 * implicherebbe una quantità ripetibile che il backend non supporta.
 *
 * Selettore a 2 classi apposta: lo stesso elemento porta anche la classe
 * nativa ".vbo-upsell-option-entry-input", stilizzata dal nativo con
 * ".vbo-booking-upsell-room-wrap .vbo-upsell-option-entry > *" (2 classi
 * + combinatore universale, specificità 0,2,0 — batte un selettore di
 * sola classe come ".vbo-upsell-qty-stepper", 0,1,0) a "flex-wrap:wrap"
 * e "flex:1". Risultato osservato con Playwright: contenitore compresso
 * a ~55px di larghezza (una quota di spazio flessibile, non la somma dei
 * tre controlli) e "flex-wrap:wrap" che quindi impilava "−"/numero/"+"
 * su tre righe separate invece di affiancarli — esattamente lo spinner
 * verticale segnalato. "flex-wrap:nowrap" + "flex:0 0 auto" (stessa
 * specificità del nativo, ma caricato dopo) risolvono entrambe le cause.
 *
 * Stile identico allo stepper già approvato in Options (task=showprc,
 * ".vbo-showprc-qty-stepper" più sotto nel file): un'unica pillola con
 * bordo esterno, "−"/"+" trasparenti senza bordo proprio (solo hover
 * background-alt), separatori tra i tre segmenti dati dai bordi
 * sinistro/destro dell'input — non tre riquadri separati con gap come
 * nella prima versione.
 */
.vbo-booking-upsell-container .vbo-upsell-qty-stepper {
	display: inline-flex;
	flex: 0 0 110px;
	flex-wrap: nowrap;
	align-items: center;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--vik-radius);
}
.vbo-booking-upsell-container .vbo-upsell-option-entry-input {
	display: inline-flex;
	flex: 0 0 110px;
}

.vbo-upsell-qty-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 33px;
	height: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.vbo-upsell-qty-btn:hover {
	background: var(--wp--preset--color--background-alt);
}

.vbo-upsell-qty-stepper input[type="number"] {
	width: 42px;
	height: 40px;
	padding: 0;
	border: 0;
	border-left: 1px solid var(--wp--preset--color--line);
	border-right: 1px solid var(--wp--preset--color--line);
	text-align: center;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--ink);
	appearance: textfield;
	-moz-appearance: textfield;
}

.vbo-upsell-qty-stepper input[type="number"]::-webkit-inner-spin-button,
.vbo-upsell-qty-stepper input[type="number"]::-webkit-outer-spin-button {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
}

.vbo-booking-upsell-confirm-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--4);
	margin-top: var(--wp--preset--spacing--5);
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
	background: var(--wp--preset--color--background-alt);
	border-radius: var(--vik-radius);
}

.vbo-booking-upsell-confirm-total {
	font-family: var(--wp--preset--font-family--display);
	font-variant-numeric: lining-nums;
	font-size: var(--wp--preset--font-size--lg);
}

.vbinput,
.vbtextarea {
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--vik-radius);
	font-family: var(--wp--preset--font-family--body);
}
.vbo-oconfirm-cfield-input input {
	height: auto;
	box-sizing: border-box;
}

@media (min-width: 768px) {
	.vbo-booking-details-actions-inner {
		display: flex;
		gap: var(--wp--preset--spacing--3);
	}
}

/* -----------------------------------------------------------
   Room Details — pagina camera singola, layout nativo "Listing"
   (shortcode roomdetails, wrapper .vbrdetboxtop.vbo-listing-details-wrap)

   Il plugin fornisce già un layout moderno per questo template
   ("New Listing Room Details layout" nel CSS nativo: gallery a griglia,
   sidebar prezzo sticky con angoli arrotondati, calendario a 2 colonne).
   Qui interveniamo solo su colore, tipografia e spaziatura, senza
   toccare struttura/markup.
   ----------------------------------------------------------- */

/*
 * Spaziatura verticale tra le sezioni (titolo → galleria → testo →
 * amenities → calendario), uniformata sullo stesso token per tutta la
 * pagina (audit: prima il nativo usava valori fissi diversi — 18px
 * titolo/galleria, 25–40px altrove — percepiti come irregolari).
 *
 * Il margin-top che spingeva giù ".vbo-listing-details-descprice-block"
 * è applicato a ".vbo-listing-details-desc-cont" (non al wrapper) perché
 * quel wrapper diventa "display:contents" da desktop in su (vedi sezione
 * "Fix layout" più sotto): un elemento contents non ha una propria box,
 * quindi un margin su di esso verrebbe ignorato lì.
 */
.vbo-listing-details-wrap .vblistroomnamediv {
	margin-bottom: var(--wp--preset--spacing--7);
}

/*
 * margin-bottom nativo azzerato: da desktop in su ".vbroomimgdesc" e
 * ".vbo-listing-details-desc-cont" sono fratelli diretti nella stessa
 * colonna della grid (vedi "Fix layout" sotto) e i margin tra elementi
 * di una grid non collassano — sommerebbero 25px nativi + 48px qui
 * sotto (73px) invece dei 48px uniformi voluti. Azzerato anche su
 * mobile/tablet per avere lo stesso gap ovunque, invece di farlo
 * dipendere dal collasso dei margin (fragile, cambia se cambia il
 * markup di un aggiornamento del plugin).
 */
.vbo-listing-details-wrap .vbroomimgdesc {
	margin-bottom: 0;
}

/*
 * Immagine principale a piena larghezza quando la camera ha una sola
 * immagine (nessuna secondaria). Causa: il CSS nativo del plugin
 * (".vbo-listing-details-wrap .vikfx-roomdetails-gallery-container",
 * vikbooking_styles.css) è sempre "display:grid; grid-template-columns:
 * repeat(2, minmax(0,1fr))" — pensato per "immagine principale +
 * miniature" affiancate. Il template (site/views/roomdetails/tmpl/
 * default_listing.php) stampa la griglia miniature ".vikfx-gallery"
 * SOLO se esistono immagini secondarie ("moreimgs"): con una sola
 * immagine, ".vikfx-gallery-fade-container" resta l'UNICO figlio della
 * grid a 2 colonne, occupa quindi solo la prima cella (~metà larghezza,
 * verificato dal vivo: 350px su 720px disponibili a 1440px) — da cui
 * l'immagine piccola e allineata a sinistra.
 *
 * Fix scoped al solo caso "1 immagine" via ":has()", nessuna modifica al
 * markup del plugin: quando la griglia NON contiene una ".vikfx-gallery"
 * (miniature) come figlio diretto, la portiamo a una sola colonna —
 * l'unico figlio rimasto (l'immagine principale) si allarga così alla
 * piena larghezza della colonna. Il caso con miniature (2+ immagini)
 * resta IDENTICO a oggi: il selettore non lo intercetta. Stesso
 * comportamento già nativo sotto gli 860px (vikbooking_styles.css,
 * "@media max-width:860px" impila comunque a 1 colonna e nasconde le
 * miniature) — qui lo estendiamo anche a tablet/desktop, dove il difetto
 * è visibile.
 *
 * Aspect-ratio 16/9 sul contenitore immagine: stesso rapporto già usato
 * dal plugin per le tile della griglia miniature (".vikfx-roomdetails-
 * gallery-container .vikfx-gallery > a", stessa vikbooking_styles.css) —
 * non un valore nuovo. Senza, l'immagine a piena larghezza (fino a
 * ~1200px) erediterebbe la sola "aspect-ratio:auto" nativa (altezza
 * legata al rapporto intrinseco del singolo file sorgente, incoerente da
 * camera a camera) con "max-height:335px" nativo — pensato per la cella
 * da 350px — che la ritaglierebbe in modo molto più aggressivo del
 * necessario. "max-height" nativo rimosso SOLO in questo caso scoped:
 * l'aspect-ratio esplicita già impedisce un'altezza incontrollata,
 * "object-fit:cover" (nativo, invariato) evita qualunque distorsione.
 */
.vbo-listing-details-wrap .vikfx-roomdetails-gallery-container:not(:has(> .vikfx-gallery)) {
	grid-template-columns: minmax(0, 1fr);
}

.vbo-listing-details-wrap .vikfx-roomdetails-gallery-container:not(:has(> .vikfx-gallery)) .vikfx-gallery-fade-container {
	aspect-ratio: 16 / 9;
}

.vbo-listing-details-wrap .vikfx-roomdetails-gallery-container:not(:has(> .vikfx-gallery)) .vikfx-gallery-fade-container img {
	max-height: none;
}

.vbo-listing-details-wrap .vbo-listing-details-desc-cont {
	margin-top: var(--wp--preset--spacing--7);
	background: transparent;
}

.vbo-listing-details-wrap .vbo-listing-details-desc-cont .vbo-listing-amenities-wrap {
	margin-top: var(--wp--preset--spacing--7);
	margin-bottom: var(--wp--preset--spacing--7);
}

.vbo-listing-details-wrap .vbo-roomdet-calscontainer {
	margin-top: var(--wp--preset--spacing--7);
}

/*
 * Sidebar prenotazione — tipografia prezzo/label. Il colore terracotta
 * è già coperto dalla regola globale ".vbo-pref-color-text, .room_cost,
 * .vbo_price" (vedi inizio file); qui solo il trattamento tipografico:
 * Cormorant Garamond per il prezzo, Inter per le label, coerente col
 * resto delle card prezzo del tema (es. rooms-grid/rooms-list).
 */
.vbo-listing-details-costroomdet .room_cost {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 500;
	font-variant-numeric: lining-nums;
}

.vbo-listing-details-costroomdet .vbliststartfromrdet,
.vbo-listing-details-costroomdet .roomcustcostlabel {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.vbo-listing-details-costroomdet .roomcustcost-subtxt {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--text-soft);
}

/*
 * Select Adults/Children — audit: lo stile "flush" crema/beige (stessa
 * resa delle select del widget di ricerca hero) creava un'incoerenza in
 * questa pagina, dove le select vivono nello stesso form dei campi
 * Check-in/Check-out nativi (".input-group", sfondo bianco, bordo
 * "2px solid var(--vbo-grey-bg-color)", radius 10px, altezza 42px —
 * misurato con Playwright). Qui replichiamo ESATTAMENTE quella resa
 * invece del trattamento crema, riusando la stessa custom property
 * nativa del bordo per restare in sync se cambia la config colori del
 * plugin. Il trattamento crema (background-alt + font Cormorant) resta
 * riservato al widget hero, non toccato: selettore diverso
 * (".vbmodhorsearchmaindiv...", vedi sopra), non condiviso con questo.
 *
 * height:42px!important necessario perché il nativo impone già
 * "height:50px!important" su questi stessi selettori (vedi audit
 * precedente) — stessa tecnica già in uso nel file per vincere un
 * !important nativo senza poterlo evitare.
 *
 * Selettore replicato identico a quello nativo del plugin per
 * pareggiarne la specificità: caricando dopo, vince a parità.
 */
.vbo-listing-details-wrap .vbo-listing-details-divsearch .vb-search-inner div > select,
.vbo-listing-details-wrap .vbo-listing-details-divsearch .vb-search-inner span > select {
	height: 42px !important;
	padding: 0 var(--wp--preset--spacing--6) 0 var(--wp--preset--spacing--3);
	border: 2px solid var(--vbo-grey-bg-color);
	border-radius: 10px;
	background-color: var(--wp--preset--color--white);
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath fill='%232C2C2C' d='M4 5 0 0h8z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--wp--preset--spacing--3) center;
	background-size: 8px 5px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	cursor: pointer;
}

/*
 * Il riquadro bordato su ".vbo-search-num-adults-entry"/"-children-entry"
 * (vedi sezione "Search Form" più sopra, selettore condiviso — pensato
 * per quella pagina) qui risulta ridondante: la select dentro ha già il
 * proprio bordo bianco appena definito sopra, e i due bordi annidati
 * (riquadro esterno + select interna) leggevano come un doppio box non
 * voluto (segnalato dopo il fix del colore della select). Rimosso solo
 * in questo contesto — la pagina Search Form standalone mantiene il
 * riquadro originale, non toccato.
 */
.vbo-listing-details-wrap .vbo-search-num-adults-entry,
.vbo-listing-details-wrap .vbo-search-num-children-entry,
.vbo-listing-details-wrap .vbo-search-num-aduchild-entry {
	border: 0;
	border-radius: 0;
	padding: 0;
}

/*
 * Uniformare le 4 label del box prenotazione (Check-in date/Check-out
 * date/Adults/Children) su un'unica dichiarazione, invece di due rese
 * diverse: Check-in/Check-out arrivano già bold/sinistra/margin-bottom
 * da una regola nativa scoped (".vbo-search-inpblock label"); Adults/
 * Children non sono raggiunte da nessuna regola nativa e cadono su un
 * default non stilizzato — verificato con Playwright: font-weight 400
 * (contro 600), text-align center (contro left), margin-bottom 0
 * (contro 2px). Il primo selettore replica la profondità di classi
 * della regola nativa (3 classi + tipo) per pareggiarne la specificità;
 * gli altri due non hanno un competitor nativo.
 */
.vbo-listing-details-wrap .vbo-listing-details-divsearch .vbo-search-inpblock label,
.vbo-listing-details-wrap .vbo-search-num-adults-entry-label,
.vbo-listing-details-wrap .vbo-search-num-children-entry-label {
	display: block;
	text-align: left;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--xs);
	margin-bottom: var(--wp--preset--spacing--1);
}

/*
 * Galleria immagini — hover leggero sulle thumbnail. Il lightbox al
 * click è già nativo del plugin (vikFxGallery, inizializzato su
 * ".vikfx-gallery a" con jquery.fancybox — verificato con Playwright:
 * il click apre già un overlay con prev/next), quindi non serve JS.
 */
.vbo-listing-details-wrap .vikfx-gallery-fade-container,
.vbo-listing-details-wrap .vikfx-roomdetails-gallery-container .vikfx-gallery > a {
	overflow: hidden;
}

.vbo-listing-details-wrap .vikfx-gallery-fade-container img,
.vbo-listing-details-wrap .vikfx-roomdetails-gallery-container .vikfx-gallery > a img {
	transition: transform 0.3s ease;
}

.vbo-listing-details-wrap .vikfx-gallery-fade-container:hover img,
.vbo-listing-details-wrap .vikfx-roomdetails-gallery-container .vikfx-gallery > a:hover img {
	transform: scale(1.04);
}

/*
 * Amenities — badge circolari bordati (icona in cerchio + testo),
 * stesso trattamento visivo della rooms-list (vedi
 * ".vblistcontainer-list .vbo-room-carat" sopra) invece della lista
 * testuale a due colonne nativa. Selettori con la stessa profondità di
 * classi del nativo (".vbo-listing-details-wrap .vbo-listing-details-
 * desc-cont .vbo-listing-amenities...") per pareggiarne la specificità.
 */
.vbo-listing-details-wrap .vbo-listing-details-desc-cont .vbo-listing-amenities {
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--wp--preset--spacing--4);
	row-gap: var(--wp--preset--spacing--3);
}

.vbo-listing-details-wrap .vbo-listing-details-desc-cont .vbo-listing-amenities .vbo-listing-amenity {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	margin: 0;
}

.vbo-listing-details-wrap .vbo-listing-details-desc-cont .vbo-listing-amenities .vbo-listing-amenity-textimg {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 100px;
}

.vbo-listing-details-wrap .vbo-listing-details-desc-cont .vbo-listing-amenities .vbo-listing-amenity i {
	width: auto;
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--sm);
}

.vbo-listing-details-wrap .vbo-listing-details-desc-cont .vbo-listing-amenities .vbo-listing-amenity-name {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--text);
}

/*
 * Calendario disponibilità — meno bordi, numeri più puliti, più aria
 * tra le celle. Il rosso/arancio dei giorni non disponibili
 * (".vbtdbusy"/".vbtdwarning") resta intoccato: è l'unico indicatore
 * visivo di stato (la cella stessa non ha background — solo il badge
 * numero), quindi lo alleggeriamo solo per i giorni liberi.
 */
.vbo-listing-details-wrap .vbcalsblock .vbcaldivcont table {
	border-spacing: var(--wp--preset--spacing--2);
}

.vbo-listing-details-wrap .vbcalnumdaysprice td {
	border: 1px solid var(--wp--preset--color--line);
	padding: var(--wp--preset--spacing--2);
}

.vbo-listing-details-wrap .vbcalnumdaysprice .vbtdfree .vbcalpricedaynum span,
.vbo-listing-details-wrap .vbcalnumdaysprice .vbtdpast .vbcalpricedaynum span {
	background: transparent;
	border: 0;
	padding: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 500;
	font-variant-numeric: lining-nums;
	color: var(--wp--preset--color--ink);
}

.vbo-listing-details-wrap .vbcalpricedaycost div {
	width: auto;
	background: transparent;
	border: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	font-variant-numeric: lining-nums;
	color: var(--wp--preset--color--accent);
}

/*
 * -----------------------------------------------------------
 * Room Details — fix di layout (audit su .../apartment-with-garden/
 * ?roomid=3, camera con meno amenities/foto della camera usata per il
 * primo giro di stile: ha reso visibili bug di grid non legati al
 * colore/tipografia già sistemati sopra).
 * -----------------------------------------------------------
 */

/*
 * Fix #1 — Calendario: con un numero di mesi dispari (es. 3) l'ultimo
 * mese finiva orfano nella griglia nativa a 2 colonne fisse
 * (".vbcalsblock { grid-template-columns: repeat(2, 1fr) }", nella
 * cascata del layout "New Listing", specificità (0,4,0) — vince sulla
 * regola generica ".vbcalsblock" del plugin che invece usa già
 * "repeat(auto-fit, minmax(320px, 1fr))", la stessa tecnica che
 * ripristiniamo qui). Selettore alla stessa profondità di classi
 * dell'originale per pareggiarne la specificità: caricando dopo, vince.
 * minmax ridotto a 280px (invece di 320) perché lo spazio utile qui è
 * ~670px (710px di colonna − 40px di padding del box): a 320px i due
 * mesi affiancati toccherebbero il limite esatto (320+30+320=670),
 * rischiando di rompere a 1 colonna per arrotondamento del browser.
 *
 * "auto-fit" da solo però NON basta a evitare l'orfano (verificato con
 * Playwright: con 3 mesi il terzo restava comunque largo quanto gli
 * altri due, con lo stesso vuoto a destra) — auto-fit collassa solo le
 * COLONNE inutilizzate su TUTTA la grid, non le singole celle vuote di
 * una riga quando quella colonna è già occupata da un'altra riga (qui
 * la colonna 2 è occupata da agosto in riga 1, quindi non collassa
 * anche se in riga 2 è vuota). Il fix vero è la regola sotto: l'ultimo
 * mese, quando è anche di posizione dispari (cioè resterebbe solo in
 * riga, senza un compagno in colonna 2), copre entrambe le colonne
 * invece di restare ancorato a sinistra. ":nth-child(odd)" funziona
 * perché con 2 colonne le posizioni dispari cadono sempre in colonna 1:
 * se una posizione dispari è anche l'ultima, è per forza sola nella sua
 * riga. Con un numero pari di mesi (righe piene) la regola non scatta.
 *
 * Audit successivo: con il parametro "prezzo per giorno" attivo sulla
 * camera, il markup nativo aggiunge una classe modificatrice diversa sul
 * container — ".vbcalsblock-price" invece di ".vbcalsblock-regular"
 * (verificato confrontando l'HTML di due camere in config diversa: img
 * "vbcalsblock vbcalsblock-price" vs "vbcalsblock vbcalsblock-regular",
 * stesso hook già usato dal plugin, non un'invenzione nostra). Le celle
 * con badge prezzo (".vbcalpricedaynum"/".vbcalpricedaycost") sono più
 * larghe di quelle senza — a 2 mesi per riga risultavano compresse in
 * modo diseguale rispetto a un mese solo in riga (es. settembre orfano,
 * quindi già a piena larghezza, visibilmente più leggibile). Per questo
 * il calendario con prezzo attivo va sempre a 1 mese per riga (piena
 * larghezza, qualunque sia il conteggio mesi — nessun orfano possibile
 * con una sola colonna, la regola ":last-child:nth-child(odd)" sopra
 * quindi non serve e resta scoped al solo caso ".vbcalsblock-regular").
 * Il caso "prezzo disattivo" mantiene 2 mesi per riga (celle più
 * semplici, meno spazio necessario).
 *
 * Entrambi i casi scoped da 1024px in su: sotto quella soglia — mobile
 * e tablet — un solo mese per riga sempre, indipendentemente dal
 * parametro prezzo, per leggibilità (richiesto esplicitamente, non solo
 * lasciato al breakpoint nativo del plugin a 860px che non copre la
 * fascia tablet 861–1023px).
 */
@media (max-width: 1023px) {
	.vbo-listing-details-wrap .vbo-roomdet-calscontainer-inner .vbo-availcalendars-cont .vbcalsblock {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (min-width: 1024px) {
	.vbo-listing-details-wrap .vbo-roomdet-calscontainer-inner .vbo-availcalendars-cont .vbcalsblock.vbcalsblock-regular {
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	}

	.vbo-listing-details-wrap .vbo-roomdet-calscontainer-inner .vbo-availcalendars-cont .vbcalsblock.vbcalsblock-price {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * Audit successivo (revisione mockup approvato) — la regola
	 * ".vbcaldivcont:last-child:nth-child(odd) { grid-column: 1 / -1 }"
	 * che stava qui è stata RIMOSSA: faceva esattamente quello che diceva
	 * di fare (spanna entrambe le colonne = piena larghezza), ma è
	 * risultato essere il comportamento SBAGLIATO, non un bug di mancata
	 * applicazione — verificato sul DOM live (roomid=2, 3 mesi Ago/Set/
	 * Ott): il selettore raggiungeva correttamente il terzo mese e lo
	 * stirava a piena larghezza. Il mockup approvato chiede però che
	 * ogni mese mantenga SEMPRE la stessa larghezza-colonna, orfano
	 * incluso — non che si espanda. Il paragrafo di commento sopra
	 * (Fix #1) lo aveva già osservato testualmente: "con 3 mesi il terzo
	 * restava comunque largo quanto gli altri due, con lo spazio vuoto a
	 * destra" — quello era descritto come il problema da risolvere, ma è
	 * in realtà ESATTAMENTE il comportamento richiesto ora. Con
	 * "auto-fit" da solo (nessuna regola su ":last-child"), i track di
	 * colonna sono condivisi da tutta la grid: il mese orfano (colonna 1,
	 * riga 2) eredita la stessa larghezza di colonna dei mesi accoppiati
	 * in riga 1, perché la colonna 2 resta "occupata" (da settembre in
	 * riga 1) e quindi non collassa — lascia solo una cella vuota
	 * accanto all'orfano, che è la resa corretta. Nessuna regola
	 * aggiuntiva necessaria: rimuovere lo spanning basta.
	 */
}

/*
 * Frecce navigazione mesi — spostate da JS (vedi
 * initRoomDetailsCalendarNav() in vikbooking-dom.js) fuori dalla cella
 * del titolo mese in una barra dedicata accanto a "Availability
 * Calendar", per non dipendere più dall'altezza di quella cella (che
 * cambia tra ".vbcalsblock-regular"/"-price" — causa del
 * sovrapposizione con l'header giorni della settimana, verificato con
 * Playwright). Una volta spostate, gli span non sono più discendenti di
 * ".vbcaltrmonth td": nessuna regola nativa del plugin li raggiunge più
 * (erano tutte scoped a quel percorso), quindi li restiliamo da zero
 * qui, riusando lo stesso trattamento "cerchio bordato + hover accent"
 * già in uso per le frecce della galleria immagini
 * (".vikfx-gallery-navigation-controls-prevnext a", vedi sopra) invece
 * di inventare un nuovo stile una-tantum.
 */
.vbo-listing-details-wrap .vbo-listing-calendar-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--3);
	margin-bottom: var(--wp--preset--spacing--4);
}

.vbo-listing-details-wrap .vbo-listing-calendar-nav h4 {
	margin: 0;
}

.vbo-listing-details-wrap .vbo-listing-calendar-nav-controls {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	flex-shrink: 0;
}

.vbo-listing-details-wrap .vbo-listing-calendar-nav-controls .vbo-rdet-avcal-nav {
	position: static;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 100px;
	background: transparent;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
	cursor: pointer;
}

.vbo-listing-details-wrap .vbo-listing-calendar-nav-controls .vbo-rdet-avcal-nav:hover {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
}

@media (max-width: 767px) {
	.vbo-listing-details-wrap .vbo-listing-calendar-nav {
		flex-wrap: wrap;
	}
}

/*
 * Fix #2 + #5 — Sidebar disallineata in alto + larghezza colonna
 * incoerente. Nel markup nativo titolo e galleria sono fratelli diretti
 * di ".vbo-listing-details-descprice-block" (il flex-row che contiene
 * SOLO testo+sidebar) e vivono FUORI da quel flex-row: per questo la
 * sidebar parte allo stesso livello della descrizione (dopo la
 * galleria) invece che del titolo, e titolo/galleria (larghi 1200px,
 * l'intero contenuto) risultano più larghi di testo/amenities/
 * calendario (~710-725px, solo la colonna sinistra del flex-row).
 *
 * Fix via CSS Grid, senza spostare nodi nel DOM: ".vbo-listing-details-
 * descprice-block" diventa "display:contents" (la sua box sparisce,
 * i suoi figli — desc-cont e costroomdet — vengono "adottati" dalla
 * grid del nonno ".vbrdetboxtop"), che a sua volta diventa una grid a
 * 2 colonne. Titolo, galleria e desc-cont vanno tutti in colonna 1
 * (stessa larghezza automaticamente, risolvendo anche il fix #5);
 * costroomdet va in colonna 2 e copre le 3 righe (titolo+galleria+
 * desc-cont), partendo quindi allo stesso livello del titolo — lo
 * sticky nativo su ".vbo-listing-details-costroomdet-inner" (position:
 * sticky, top:10px) continua a funzionare perché ora ha davvero
 * un'area alta quanto tutta la colonna sinistra in cui scorrere.
 *
 * Scoped da 1024px in su: sotto quella soglia il markup nativo impila
 * già correttamente le sezioni (verificato via screenshot mobile prima
 * di questo fix) — non tocchiamo nulla lì per non introdurre regressioni
 * su un layout che già funziona.
 */
@media (min-width: 1024px) {
	.vbrdetboxtop.vbo-listing-details-wrap {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 400px;
		column-gap: var(--wp--preset--spacing--8);
	}

	.vbrdetboxtop.vbo-listing-details-wrap > .vblistroomnamediv,
	.vbrdetboxtop.vbo-listing-details-wrap > .vbroomimgdesc {
		grid-column: 1;
	}

	.vbo-listing-details-wrap .vbo-listing-details-descprice-block {
		display: contents;
	}

	.vbo-listing-details-wrap .vbo-listing-details-desc-cont {
		grid-column: 1;
	}

	.vbo-listing-details-wrap .vbo-listing-details-costroomdet {
		grid-column: 2;
		grid-row: 1 / span 3;
	}
}

/*
 * Fix #3 — Controlli occupancy duplicati. Il markup nativo espone due
 * blocchi distinti per adulti/bambini:
 * - ".vbmaxminpeopleroom" (icone + "Adults 1-4" ecc.): SOLO informativo,
 *   nessun <input>/<select> dentro, mostra i limiti min/max della
 *   camera, non incide sulla prenotazione;
 * - le <select name="adults[]"/"children[]"> sotto (già restilizzate,
 *   vedi sopra): sono il vero campo del form, inviate al submit e già
 *   limitate dal plugin alle opzioni valide per la camera (min/max
 *   nativi sono già i bound delle <option> in elenco).
 * Nascondiamo il blocco informativo: rimuoverlo non fa perdere
 * capacità informativa (il range è implicito nelle opzioni della
 * select) e lascia un solo set di controlli, come richiesto. Non è
 * presente in tutte le camere (assente su roomid=3, presente su altre:
 * probabilmente legato a una config per-camera del plugin) — la regola
 * comunque non ha effetto quando l'elemento manca.
 */
.vbo-listing-details-wrap .vbmaxminpeopleroom {
	display: none;
}

.vbo-listing-details-wrap .vbo-listing-details-divsearch #vbjstotnights {
	margin: 10px 0;
}

/*
 * Fix #4 — Galleria thumbnail: la griglia nativa
 * ".vikfx-roomdetails-gallery-container .vikfx-gallery" è fissa a 2
 * colonne ("repeat(2, minmax(0,1fr))" — stessa famiglia di bug del fix
 * #1: con 1 sola thumbnail resta un riquadro vuoto, con un numero
 * dispari l'ultima va orfana). "auto-fit" si adatta al numero reale di
 * thumbnail senza doverlo conoscere a priori: con 1 thumbnail occupa
 * tutta la larghezza, con 2 si comporta come il nativo (identico,
 * verificato), con 3+ aggiunge colonne finché c'è spazio (~590px di
 * colonna, minmax 160px → fino a 3 per riga) e va a capo oltre.
 * L'aspect-ratio 16:9 nativo su ogni thumbnail (non toccato) mantiene
 * un'altezza proporzionata e leggibile qualunque sia il numero di
 * colonne effettive.
 */
.vbo-listing-details-wrap .vikfx-roomdetails-gallery-container .vikfx-gallery {
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

/* -----------------------------------------------------------
   Room Details — pagina camera singola, layout nativo "Classic"
   (shortcode implicito della pagina camera, wrapper
   .vbrdetboxtop.vbo-room-details-wrap — NON confondere con
   ".vbo-listing-details-wrap" sopra, markup diverso).

   Mockup approvato "Room Details Classic". A differenza del layout
   "Listing", qui il nativo (default_classic.php) NON annida il
   calendario dentro il wrapper principale: ".vbo-roomdet-calscontainer"
   (calendario + form di ricerca in fondo pagina) è un FRATELLO
   ADIACENTE di ".vbrdetboxtop.vbo-room-details-wrap", non un suo
   discendente (verificato leggendo il template: il div del wrapper si
   chiude PRIMA dell'apertura di ".vbo-roomdet-calscontainer"). Per
   quella porzione di pagina non si può quindi scopare con un semplice
   discendente "wrap .qualcosa" come per la galleria/prezzo/mappa/
   amenities (questi sì dentro il wrapper) — si usa il combinatore
   fratello-adiacente ".vbo-room-details-wrap + .vbo-roomdet-calscontainer"
   più sotto, che è anche il modo con cui questi selettori restano
   naturalmente ESCLUSI dal layout "Listing" (lì ".vbo-roomdet-
   calscontainer" è annidato dentro ".vbo-listing-details-wrap", non gli
   succede come fratello) senza bisogno di ":not()" o classi aggiuntive.

   Dati NON disponibili nativamente per questo template (verificati su
   site/views/roomdetails/tmpl/default_classic.php, default_reqinfo.php
   e view.html.php — nessuna di queste variabili/campi viene passata alla
   vista) — volutamente OMESSI dal mockup, non generati qui:
   - Politica di cancellazione / soggiorno minimo: nessun campo del tipo
     esiste in "$this->room" o tra le variabili passate dal controller;
     l'unico "extra" opzionale sotto la descrizione è il form "Request
     Info" (".vbo-reqinfo-cont", default_reqinfo.php), tutt'altra cosa.
   - Riga rapida Guests/Bedrooms/Size/Floor: nessun parametro camera di
     questo tipo viene letto da default_classic.php o view.html.php
     (stessa conclusione già presa per il layout "Listing" — vedi sopra
     ".vbmaxminpeopleroom", che è solo Adults/Children, non Bedrooms/
     Size/Floor, e viene comunque nascosto perché duplica le select).
   - "per night, taxes included" sotto il prezzo: il nativo stampa SOLO
     "Starting From" + il prezzo (".vbliststartfromrdet"/".room_cost");
     l'eventuale sottotesto (".roomcustcost-subtxt") esiste solo se
     l'admin ha configurato "custpricesubtxt" per la camera — per questa
     camera demo è vuoto. Nessun testo "a notte, tasse incluse" viene
     aggiunto qui via CSS: sarebbe un'affermazione di policy (tasse
     incluse/escluse) non verificabile dal tema.
   - Indirizzo testuale sotto la mappa: "$geo_params->address" esiste
     lato PHP (admin/helpers/geocoding.php) ma default_geomap.php non lo
     stampa mai in pagina — non essendo nell'HTML/JS reso, non è
     recuperabile da un file di soli CSS/JS senza inventare testo. Il
     bottone "Apri in Maps" sotto la mappa usa invece le coordinate
     lat/lng reali già presenti in "vbo_geomarker_room_pos" (variabile
     JS stampata dallo stesso template per il marker) — dato genuino,
     non fabbricato.
   ----------------------------------------------------------- */

/*
 * Galleria — stesso hover leggero già in uso per il layout "Listing"
 * (vedi ".vbo-listing-details-wrap .vikfx-gallery-fade-container" sopra):
 * qui il markup della galleria è IDENTICO (stesso blocco PHP, nessuna
 * differenza tra i due template per questa parte), quindi stesso
 * trattamento, non un nuovo stile.
 */
.vbo-room-details-wrap .vikfx-gallery-fade-container,
.vbo-room-details-wrap .vikfx-roomdetails-gallery-container .vikfx-gallery > a {
	overflow: hidden;
}

.vbo-room-details-wrap .vikfx-gallery-fade-container img,
.vbo-room-details-wrap .vikfx-roomdetails-gallery-container .vikfx-gallery > a img {
	transition: transform 0.3s ease;
}

.vbo-room-details-wrap .vikfx-gallery-fade-container:hover img,
.vbo-room-details-wrap .vikfx-roomdetails-gallery-container .vikfx-gallery > a:hover img {
	transform: scale(1.04);
}

/*
 * Griglia thumbnail — stesso fix "auto-fit" del layout "Listing" (Fix
 * #4 sopra): il nativo è fisso a 2 colonne, con un numero di thumbnail
 * diverso da 2 (qui la camera demo ne ha 3, ma non è garantito per ogni
 * camera) l'ultima resterebbe orfana o mezza vuota.
 */
.vbo-room-details-wrap .vikfx-roomdetails-gallery-container .vikfx-gallery {
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

/*
 * Blocco "About this apartment" + prezzo — il nativo (vikbooking_styles.
 * css, ".vbo-rdet-descprice-block") è già un flex a 2 colonne (80%
 * descrizione / 20% prezzo, con collasso a colonna singola gestito dal
 * CSS nativo sotto una certa larghezza — non ritoccato, funziona già).
 * Qui si sostituisce solo la resa cromatica (grigio/bordi grigi nativi)
 * con i token del tema, e si porta la tipografia del prezzo allo stesso
 * trattamento già approvato per il layout "Listing"
 * (".vbo-listing-details-costroomdet", vedi sopra) invece di lasciare la
 * regola generica ".room_cost{font-size:lg}" (Rooms List, vedi inizio
 * file) che si applicherebbe altrimenti per mancanza di un selettore più
 * specifico in questo contesto.
 */
.vbo-room-details-wrap .vbo-rdet-descprice-block {
	border-color: var(--wp--preset--color--line);
	background-color: var(--wp--preset--color--background-alt);
}

.vbo-room-details-wrap .vbo-rdet-desc-cont {
	background-color: var(--wp--preset--color--background);
	border-color: var(--wp--preset--color--line);
	color: var(--wp--preset--color--text);
}

/*
 * Titolo "About this apartment" — non esiste nel markup nativo
 * (default_classic.php stampa la descrizione della camera dentro
 * ".vbo-rdet-desc-cont" senza alcun heading davanti, verificato
 * leggendo il template: nessun elemento inutilizzato da riusare) ma è
 * richiesto dal mockup approvato. Iniettato da
 * initRoomDetailsAboutHeading() in vikbooking-dom.js come primo figlio
 * reale di ".vbo-rdet-desc-cont" (non ::before, stessa convenzione già
 * in uso per il bottone "Apri in Maps" — vedi initRoomDetailsMapLink())
 * — dentro il contenitore descrizione, non fratello a livello di
 * ".vbo-rdet-descprice-block", per non interferire con il box prezzo
 * affiancato in quel contenitore (flex 2 colonne, vedi commento sopra).
 * Stessa identica ricetta tipografica già stabilita per gli altri
 * titoli h4 di questa pagina ("Amenities" — ".room_carats h4" — e
 * "Where you will be" — ".vbo-room-details-geo-wrapper h4" — vedi
 * sotto), per coerenza visiva tra tutti i titoli di sezione.
 */
.vbo-room-details-wrap .vbo-rdet-about-heading {
	margin: 0 0 var(--wp--preset--spacing--3);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	color: var(--wp--preset--color--text);
}

.vbo-room-details-wrap .vb_detcostroomdet .room_cost {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 500;
	font-variant-numeric: lining-nums;
}

.vbo-room-details-wrap .vb_detcostroomdet .vbliststartfromrdet,
.vbo-room-details-wrap .vb_detcostroomdet .roomcustcostlabel {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--text-soft);
}

.vbo-room-details-wrap .vb_detcostroomdet .roomcustcost-subtxt {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--text-soft);
}

/*
 * Amenities — badge circolari bordati (icona in cerchio + etichetta
 * sotto), stesso linguaggio visivo già approvato per il layout "Listing"
 * (".vbo-listing-amenity", vedi sopra) e per la rooms-list. Il markup
 * nativo però è DIVERSO da quello della Listing: qui viene da
 * "VikBooking::getRoomCaratOriz()" (site/helpers/lib.vikbooking.php),
 * non da "loadRoomAmenities()" — struttura reale (verificata sull'HTML
 * reso): ".room_carats" > ".vbo-room-carats" > ".vbo-room-carat" >
 * ".vbo-expl[data-vbo-expl="Nome"]" > "i.vbo-icn-carat" (icona
 * Font Awesome, non un'immagine). Non esiste uno span col nome visibile:
 * "data-vbo-expl" alimenta SOLO un tooltip nativo al passaggio del mouse
 * (vikbooking_styles.css, blocco "[data-vbo-expl]:hover:after", bolla
 * scura posizionata in assoluto con freccia). Riusare qui lo stesso
 * meccanismo per un'etichetta SEMPRE visibile avrebbe richiesto
 * annullare ~10 proprietà di quella bolla (position/z-index/background/
 * colore/transform/opacity) pur di piegarla a un uso diverso da quello
 * per cui esiste — fragile e rischia di rompersi ad ogni aggiornamento
 * del plugin. Più solido: un piccolo script (initRoomDetailsAmenityLabels
 * in vikbooking-dom.js) duplica il testo già presente nell'attributo
 * "data-vbo-expl" (dato reale, non inventato) in uno "<span>" fratello
 * sempre visibile — il tooltip nativo resta comunque attivo come extra,
 * non viene rimosso.
 */
.vbo-room-details-wrap .room_carats h4 {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
}

.vbo-room-details-wrap .vbo-room-carats {
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--wp--preset--spacing--5);
	row-gap: var(--wp--preset--spacing--4);
}

.vbo-room-details-wrap .vbo-room-carat {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	width: 76px;
	text-align: center;
}

.vbo-room-details-wrap .vbo-room-carat .vbo-expl {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 100px;
}

.vbo-room-details-wrap .vbo-room-carat .vbo-icn-carat {
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--base);
}

.vbo-room-details-wrap .vbo-room-carat-label {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--text-soft);
	line-height: 1.3;
}

/*
 * Mappa "Where you will be" — contenitore nativo ".vbo-geo-wrapper" >
 * "#vbo-geo-map" (canvas Google Maps iniettato via JS dal plugin stesso,
 * vedi default_geomap.php: nessun iframe statico da stilare qui, il
 * bordo/radius vanno sul contenitore perché il canvas della mappa non è
 * presente nel DOM al load — solo dopo che l'API Google Maps è pronta).
 * "overflow:hidden" sul contenitore ritaglia la mappa stessa al radius
 * del tema (2px, convenzione componenti) anche se il canvas interno non
 * ha un proprio border-radius.
 */
.vbo-room-details-wrap .vbo-room-details-geo-wrapper h4 {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
}

.vbo-room-details-wrap .vbo-geo-wrapper {
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--vik-radius);
}

/*
 * Bottone "Apri in Maps" — non esiste nel markup nativo (vedi nota nel
 * commento di sezione sopra sull'indirizzo non stampato): iniettato da
 * "initRoomDetailsMapLink()" in vikbooking-dom.js subito sotto
 * ".vbo-geo-wrapper", link diretto a Google Maps con le coordinate reali
 * del marker principale della camera ("vbo_geomarker_room_pos", JS
 * nativo). Trattamento "outline" (bordo accento, sfondo trasparente) per
 * distinguerlo dalla CTA piena di prenotazione, stessa convenzione già
 * in uso per i bottoni secondari del tema (es. CTA outline delle card
 * camere).
 */
.vbo-geo-open-maps-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	margin-top: var(--wp--preset--spacing--4);
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: var(--vik-radius);
	background: transparent;
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.vbo-geo-open-maps-btn:hover {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
}

/*
 * Calendario disponibilità — barra di navigazione mesi dedicata e fix
 * overflow 3 mesi. Selettori raggruppati con quelli già scritti sopra
 * per il layout "Listing": la stessa funzione JS
 * (initRoomDetailsCalendarNav(), generalizzata) costruisce lo stesso
 * markup ".vbo-listing-calendar-nav" per ENTRAMBI i layout (il
 * calendario stesso, "default_avcalendars.php", è template condiviso
 * identico), quindi stessa resa visiva, un solo posto da mantenere.
 * ".vbo-room-details-wrap + .vbo-roomdet-calscontainer" seleziona SOLO
 * il calendario del layout Classic (fratello adiacente, vedi commento di
 * sezione sopra) — il layout Listing resta raggiunto dal suo selettore
 * discendente originale, invariato.
 */
.vbo-listing-details-wrap .vbo-listing-calendar-nav,
.vbo-room-details-wrap + .vbo-roomdet-calscontainer .vbo-listing-calendar-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--3);
	margin-bottom: var(--wp--preset--spacing--4);
}

.vbo-listing-details-wrap .vbo-listing-calendar-nav h4,
.vbo-room-details-wrap + .vbo-roomdet-calscontainer .vbo-listing-calendar-nav h4 {
	margin: 0;
}

.vbo-listing-details-wrap .vbo-listing-calendar-nav-controls,
.vbo-room-details-wrap + .vbo-roomdet-calscontainer .vbo-listing-calendar-nav-controls {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	flex-shrink: 0;
}

.vbo-listing-details-wrap .vbo-listing-calendar-nav-controls .vbo-rdet-avcal-nav,
.vbo-room-details-wrap + .vbo-roomdet-calscontainer .vbo-listing-calendar-nav-controls .vbo-rdet-avcal-nav {
	position: static;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 100px;
	background: transparent;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
	cursor: pointer;
}

.vbo-listing-details-wrap .vbo-listing-calendar-nav-controls .vbo-rdet-avcal-nav:hover,
.vbo-room-details-wrap + .vbo-roomdet-calscontainer .vbo-listing-calendar-nav-controls .vbo-rdet-avcal-nav:hover {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
}

@media (max-width: 767px) {
	.vbo-listing-details-wrap .vbo-listing-calendar-nav,
	.vbo-room-details-wrap + .vbo-roomdet-calscontainer .vbo-listing-calendar-nav {
		flex-wrap: wrap;
	}
}

/*
 * Overflow 3 mesi — stesso fix già motivato in dettaglio sopra per il
 * layout "Listing" ("Fix #1"), qui esteso al Classic con lo stesso
 * combinatore fratello-adiacente. Non ripetuto il ragionamento completo
 * (vedi commento originale sopra), stessa identica tecnica.
 */
@media (max-width: 1023px) {
	.vbo-listing-details-wrap .vbo-roomdet-calscontainer-inner .vbo-availcalendars-cont .vbcalsblock,
	.vbo-room-details-wrap + .vbo-roomdet-calscontainer .vbo-roomdet-calscontainer-inner .vbo-availcalendars-cont .vbcalsblock {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (min-width: 1024px) {
	.vbo-listing-details-wrap .vbo-roomdet-calscontainer-inner .vbo-availcalendars-cont .vbcalsblock.vbcalsblock-regular,
	.vbo-room-details-wrap + .vbo-roomdet-calscontainer .vbo-roomdet-calscontainer-inner .vbo-availcalendars-cont .vbcalsblock.vbcalsblock-regular {
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		margin-top: var(--wp--preset--spacing--5);
	}

	.vbo-listing-details-wrap .vbo-roomdet-calscontainer-inner .vbo-availcalendars-cont .vbcalsblock.vbcalsblock-price,
	.vbo-room-details-wrap + .vbo-roomdet-calscontainer .vbo-roomdet-calscontainer-inner .vbo-availcalendars-cont .vbcalsblock.vbcalsblock-price {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * Mese orfano — la regola ":last-child:nth-child(odd) { grid-column:
	 * 1 / -1 }" duplicata qui per il Classic è stata rimossa insieme alla
	 * sua gemella nel blocco "Listing" sopra: stesso bug (stirava
	 * l'orfano a piena larghezza invece di lasciarlo alla larghezza-
	 * colonna dei mesi accoppiati), stesso fix (nessuna regola,
	 * "auto-fit" da solo basta) — vedi commento esteso nel blocco
	 * "Listing" sopra, non ripetuto qui. Verificato sul DOM live di
	 * questo layout (roomid=2, sibling combinator confermato presente:
	 * ".vbrdetboxtop.vbo-room-details-wrap" + ".vbo-roomdet-calscontainer"
	 * come fratelli adiacenti, markup reale identico a quanto assunto).
	 */
}

/*
 * Palette stati calendario — 5 stati (Available/Partially Reserved/
 * Check-in Only/Check-out Only/Not Available), verificati come stati
 * realmente emettibili dal plugin leggendo default_avcalendars.php (non
 * inventati):
 * - ".vbtdfree" — Available.
 * - ".vbtdwarning" — Partially Reserved, mostrato solo se
 *   "VikBooking::showPartlyReserved()" è attivo (config admin, "$totfound
 *   > 0" ma sotto il numero di unità della camera): stato realmente
 *   distinto, non derivato qui.
 * - ".vbtdbusy.vbtdbusyforcheckin" / "...forcheckout" — Check-in/
 *   Check-out Only, mostrato solo se "showStatusCheckinoutOnly()" è
 *   attivo: un triangolo d'angolo (":after" nativo) sovrapposto a una
 *   cella altrimenti "libera all'aspetto", esattamente il giorno in cui
 *   si libera/occupa una prenotazione.
 * - ".vbtdbusy" da solo (senza i due modificatori sopra) — Not
 *   Available, giornata interamente occupata.
 * Il colore rosso/arancio nativo (var(--vbo-red-color)/--vbo-orange-
 * color) viene sostituito qui con la palette del tema — prima non
 * toccato (vedi nota nel blocco "Calendario disponibilità" del layout
 * Listing sopra), ora è la richiesta esplicita del mockup approvato.
 *
 * "Partially Reserved" (".vbtdwarning") è l'UNICO stato esteso anche al
 * layout "Listing" (richiesto esplicitamente): selettore non scoped a
 * nessuno dei due wrapper, colpisce entrambi perché il markup del
 * calendario è lo stesso template condiviso. Gli altri 4 stati restano
 * scoped al solo Classic via il combinatore fratello-adiacente — il
 * layout Listing per quelli non cambia (resta con i colori nativi rosso/
 * arancio non toccati, come da approvazione esistente).
 */
.vbo-availcalendars-cont td.vbtdwarning,
.vbo-availcalendars-cont .vblegwarning {
	background-color: var(--wp--preset--color--background-alt);
	color: var(--wp--preset--color--accent-dark);
	border-color: var(--wp--preset--color--accent);
}

.vbo-room-details-wrap + .vbo-roomdet-calscontainer td.vbtdfree {
	border-color: var(--wp--preset--color--line);
	color: var(--wp--preset--color--ink);
}

.vbo-room-details-wrap + .vbo-roomdet-calscontainer tr.vbcalnumdays td.vbtdfree:not(.vbtdpast):hover {
	border-color: var(--wp--preset--color--accent);
}

.vbo-room-details-wrap + .vbo-roomdet-calscontainer .vblegfree {
	background-color: var(--wp--preset--color--background);
	border-color: var(--wp--preset--color--line);
}

.vbo-room-details-wrap + .vbo-roomdet-calscontainer .vbcal td.vbtdbusy:not(.vbtdbusyforcheckout):not(.vbtdbusyforcheckin) {
	background-color:var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
	border-color:var(--wp--preset--color--accent) !important;
}

.vbo-room-details-wrap + .vbo-roomdet-calscontainer .vblegbusy,
.vbo-room-details-wrap + .vbo-roomdet-calscontainer .vbo-availability-controls .vblegbusy {
	background-color:var(--wp--preset--color--accent);
	border-color:var(--wp--preset--color--accent);
}

/*
 * Check-in/Check-out Only — il nativo azzera lo sfondo su questi due
 * modificatori (".vbtdbusyforcheckin"/"-forcheckout { background:
 * transparent }", vince sulla regola ".vbtdbusy" rossa perché più
 * specifica) per mostrare solo il triangolo d'angolo: qui si ricolora
 * SOLO il triangolo (":after"), niente altro da toccare. Check-in in
 * accento, check-out in accento scuro — due tonalità della stessa
 * famiglia per restare leggibili come "varianti dello stesso concetto"
 * (giorno di transito) invece di due colori scollegati.
 */
.vbo-room-details-wrap + .vbo-roomdet-calscontainer tr.vbcalnumdays td.vbtdbusyforcheckin:after {
	border-color: transparent var(--wp--preset--color--accent) transparent transparent;
}

.vbo-room-details-wrap + .vbo-roomdet-calscontainer tr.vbcalnumdays td.vbtdbusyforcheckout:after {
	border-color: transparent transparent transparent var(--wp--preset--color--accent-dark);
}

.vbo-room-details-wrap + .vbo-roomdet-calscontainer .vblegbusycheckin,
.vbo-room-details-wrap + .vbo-roomdet-calscontainer .vblegbusycheckout {
	background-color: var(--wp--preset--color--background);
	border-color: var(--wp--preset--color--line);
}

.vbo-room-details-wrap + .vbo-roomdet-calscontainer .vblegbusycheckin:after {
	border-color: transparent var(--wp--preset--color--accent) transparent transparent;
}

.vbo-room-details-wrap + .vbo-roomdet-calscontainer .vblegbusycheckout:after {
	border-color: transparent transparent transparent var(--wp--preset--color--accent-dark);
}

/*
 * Form di ricerca in fondo pagina (".vbdivsearch", dentro
 * ".vbo-seldates-cont" nel calendario/form container) — riuso del
 * linguaggio visivo già approvato per la pagina Search Form standalone
 * (shortcode [vikbooking view="vikbooking"], vedi sezione
 * ".vbo-search-mainview" molto più sopra in questo file), NON lo stile
 * del mockup per questa sezione specifica (richiesto esplicitamente).
 * Scoped al combinatore fratello-adiacente Classic (mai
 * ".vbo-search-mainview", classe che il nativo aggiunge SOLO al
 * template della pagina Search Form standalone — vedi nota già
 * documentata più sopra — quindi qui non c'è alcun rischio di
 * colpire quella pagina). Il layout Listing usa lo stesso form ma con
 * la classe aggiuntiva ".vbo-listing-details-divsearch" già stilata
 * sopra con un trattamento diverso (select bordate bianche, per stare
 * nella sidebar prezzo): non toccato qui.
 *
 * "#checkindate"/"#checkoutdate" ricevono già la resa Cormorant/
 * underline della pagina Search Form ovunque in sito (selettore per ID,
 * non scoped — vedi sopra): qui si completa lo stesso linguaggio per gli
 * elementi che in quella regola NON sono raggiunti (".input-group",
 * l'icona calendario, le label, le select Adults/Children), che nella
 * pagina Search Form sono invece scoped a ".vbo-search-mainview".
 */
.vbo-room-details-wrap + .vbo-roomdet-calscontainer .vb-search-inner {
	display: flex;
	flex-wrap: wrap;
	/*
	 * "flex-start", non "flex-end" come nella pagina Search Form: lì ogni
	 * campo della riga è un blocco singolo (stessa altezza). Qui invece
	 * ".vbo-search-num-racblock" impila Adults ED Children (blocco più
	 * alto di un singolo campo data) — con "flex-end" le due label
	 * "CHECK-IN DATE"/"ADULTS" finivano disallineate in verticale
	 * (verificato con Playwright: le date restavano ancorate in basso,
	 * "Adults/Children" partiva più in alto). "flex-start" allinea tutte
	 * le label sulla stessa riga superiore, qualunque sia l'altezza del
	 * blocco che segue.
	 */
	align-items: flex-start;
	gap: var(--wp--preset--spacing--6);
}

.vbo-room-details-wrap + .vbo-roomdet-calscontainer .vbo-search-inpblock {
	margin: 0;
}
.vbo-room-details-wrap + .vbo-roomdet-calscontainer .vbo-search-inpblock label {
	display: block;
	margin: 0 0 var(--wp--preset--spacing--1);
	color: var(--wp--preset--color--text-soft);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.vbo-room-details-wrap + .vbo-roomdet-calscontainer .input-group {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--1);
	padding-bottom: var(--wp--preset--spacing--1);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.vbo-room-details-wrap + .vbo-roomdet-calscontainer .input-group .vbo-caltrigger {
	width: auto;
	height: auto;
	padding: 0;
	border: none;
	border-radius: 0;
	float: none;
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1;
}

.vbo-room-details-wrap + .vbo-roomdet-calscontainer .vbo-search-num-adults-entry-label,
.vbo-room-details-wrap + .vbo-roomdet-calscontainer .vbo-search-num-children-entry-label {
	display: block;
	margin: 0 0 var(--wp--preset--spacing--1);
	color: var(--wp--preset--color--text-soft);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.vbo-room-details-wrap + .vbo-roomdet-calscontainer .vbo-search-num-adults-entry select,
.vbo-room-details-wrap + .vbo-roomdet-calscontainer .vbo-search-num-children-entry select {
	height: auto;
	padding: 0 var(--wp--preset--spacing--5) var(--wp--preset--spacing--1) 0;
	border: none;
	border-bottom: 1px solid var(--wp--preset--color--line);
	border-radius: 0;
	background-color: transparent;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath fill='%232C2C2C' d='M4 5 0 0h8z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 8px 5px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--ink);
	cursor: pointer;
}

.vbdivsearch:not(.vbo-listing-details-divsearch) .vb-search-inner > .vbo-search-num-racblock {
	flex: 1;
}
.vbdivsearch:not(.vbo-listing-details-divsearch) .vb-search-inner .vbo-search-num-aduchild-entry {
	border-bottom: 0;
}

.vbo-room-details-wrap + .vbo-roomdet-calscontainer #vbjstotnights {
	color: var(--wp--preset--color--text-soft);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
}

@media (max-width: 767px) {
	.vbo-room-details-wrap + .vbo-roomdet-calscontainer .vb-search-inner {
		flex-direction: column;
		align-items: stretch;
	}
}

/* -----------------------------------------------------------
   Options (task=showprc) — rate plan + servizi extra, tra "Rooms" e
   "Book" nel flusso di prenotazione (wrapper ".vbo-showprc-wrapper").
   Pagina completamente non stilizzata in precedenza: nessuna delle
   regole seguenti sovrascrive stili preesistenti.
   ----------------------------------------------------------- */

/*
 * Stepbar di avanzamento (Dates/Rooms/Options/Book) — condivisa da tutte
 * le pagine del flusso di prenotazione, non solo Options, quindi non
 * scoped a ".vbo-showprc-wrapper". Il nativo ha già un sistema completo
 * (pallino via "li:before" + riga via "border-bottom" su ogni li): qui si
 * restyla quello esistente, non si ricostruisce da capo — un primo
 * tentativo con pseudo-elementi paralleli propri aveva prodotto un doppio
 * layer (pallini/riga nativi sotto, i miei sopra), verificato con
 * Playwright.
 *
 * Il colore nativo di pallino/riga viene da "var(--vbo-pref-bgcolor)",
 * che in teoria la nostra rimappatura in cima al file allinea
 * all'accent — ma VikBooking stampa un secondo blocco ":root" con il
 * colore preferenza reale dell'admin (badge blu) in un <style> inline
 * DOPO il link di questo foglio (verificato in pagina, non solo nei
 * sorgenti: a parità di specificità con ":root", chi carica dopo vince),
 * quindi qui la rimappatura risulta silenziosamente sovrascritta.
 * Bypassato impostando qui il colore in modo esplicito invece di fidarsi
 * della variabile — probabile la stessa causa dietro eventuali residui
 * blu non ancora individuati in altre pagine già rilasciate del plugin,
 * fuori dallo scope di questo intervento.
 */
.vbstepsbarcont {
	text-align: center;
	margin: 0 0 var(--wp--preset--spacing--7);
}

.vbo-stepbar {
	display: inline-flex;
}

.vbo-stepbar li {
	min-width: 120px;
	line-height: normal !important;
	padding-bottom: var(--wp--preset--spacing--4);
	border-bottom-width: 1px !important;
}

/*
 * "min-width: 120px" sopra è un floor pensato per lo spazio generoso da
 * desktop, ma è un vincolo rigido su un flex item (".vbo-stepbar" è
 * "display: inline-flex"): il nativo ha già una larghezza responsive per
 * "li" in percentuale del numero di step ("ol.vbo-stepbar[data-vbosteps-
 * steps='4'] li { width: 24% }", vikbooking_styles.css) pensata per
 * restringersi con la pagina — ma su un flex item il "min-width" vince
 * sempre su un "width" più piccolo (regola flexbox, non bug), quindi
 * sotto ~480px (120px × 4 step di questo flusso: Date/Camere/Opzioni/
 * Conferma) lo stepbar smette di restringersi e trabocca oltre la pagina
 * — riprodotto dal vivo: 500px di contenuto su un viewport di 375px,
 * "CONFERMA" (l'ultimo step, l'etichetta più lunga) tagliato fuori. Le
 * etichette reali non hanno bisogno di 120px: "Conferma" da sola misura
 * ~73px — 70px qui sotto basta a contenerla con un margine minimo,
 * verificato dal vivo (nessun a-capo, nessun troncamento) a 375px, dove
 * 4×70px rientra nella larghezza utile della pagina (~335px di content
 * più il gap nativo tra gli step).
 */
@media (max-width: 767px) {
	.vbo-stepbar li {
		min-width: 70px;
	}
}

.vbo-stepbar li a,
.vbo-stepbar li span {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

ol.vbo-stepbar .vbo-step-current {
	color: var(--wp--preset--color--text);
}

ol.vbo-stepbar li.vbo-step-complete,
ol.vbo-stepbar li.vbo-step-current {
	border-bottom-color: var(--wp--preset--color--accent);
}

/*
 * Solo il bordo cambia colore su "current" (nativo: sfondo bianco + bordo
 * 2px accent, un anello) — sfondo cambia invece su "complete" (pallino
 * pieno). Tenute separate: un'unica regola su entrambi come per il
 * border-bottom sopra darebbe sfondo accent anche a "current", perdendo
 * la distinzione anello/pieno tra step corrente e step completati.
 */
ol.vbo-stepbar li.vbo-step-complete:before {
	background-color: var(--wp--preset--color--accent);
}

ol.vbo-stepbar li.vbo-step-current:before {
	border-color: var(--wp--preset--color--accent);
}

/*
 * Le 3 varianti di stato (".vbo-step-complete/-current/-next:before")
 * hanno tutte 2 classi + pseudo-elemento: più specifiche di questo
 * selettore a 1 classe, che perderebbe su height/width/bottom pur
 * caricando dopo. "!important" invece di replicare 3 selettori identici
 * per un solo ritocco di misura — stessa tecnica già usata dal nativo su
 * questo stesso componente (line-height, width qui sopra).
 *
 * "box-sizing:border-box" necessario perché solo lo stato "current" ha un
 * bordo (2px, per l'effetto anello): in content-box (il default nativo)
 * quel bordo si aggiunge FUORI da height/width, rendendo il pallino
 * "current" visivamente più grande — e quindi il suo centro spostato in
 * alto rispetto ai pallini pieni "complete" — pur partendo dallo stesso
 * "bottom". Con border-box il bordo mangia lo spazio interno invece di
 * aggiungersi: tutti i pallini restano 9x9px reali, centrati sullo stesso
 * asse verticale a prescindere dallo stato. Verificato con Playwright
 * (getBoundingClientRect prima/dopo).
 */
ol.vbo-stepbar li:before {
	box-sizing: border-box !important;
	height: 9px !important;
	width: 9px !important;
	bottom: -2em !important;
}

.vbo-stepbar li a:hover {
	color: var(--wp--preset--color--accent);
}

/*
 * Riepilogo ricerca (notti/adulti/bambini/check-in/check-out) — fascia
 * orizzontale sopra la camera, stesso trattamento cromatico/tipografico
 * della trust-bar (bordi top/bottom, testo Inter).
 */
.vbo-showprc-head-wrapper {
	margin-bottom: var(--wp--preset--spacing--7);
}

/*
 * Due colonne STRUTTURALMENTE separate, non più un unico flex-wrap
 * condiviso da campi + "Change Dates": quest'ultimo (solo Search
 * Results, ".vbo-results-chdates") finiva trascinato a capo insieme
 * all'ultimo campo quando la riga non entrava più in larghezza, restando
 * ancorato (via "margin-left:auto") al bordo destro di QUELLA riga
 * anziché del blocco campi (bug osservato, verificato con Playwright —
 * capitava sia col campo "Child" condizionale sia, a schermi più stretti,
 * anche a campi ridotti). wrapResultsHeadFields() in vikbooking-dom.js
 * raggruppa tutti i campi dentro un unico contenitore
 * (".vbo-results-head-fields", sotto) fratello diretto di "Change Dates"
 * dentro ".vbo-results-head": il wrapper può andare a capo internamente
 * su più righe quanto vuole, "Change Dates" resta sempre un elemento a
 * sé, mai coinvolto in quel flusso. "align-items:stretch" (valore
 * iniziale di flex, esplicito qui per chiarezza) fa sì che "Change
 * Dates" (".vbo-results-head > div", sotto — "align-items:center" sul
 * proprio contenuto) resti centrato verticalmente sull'intera altezza
 * del box, 1 o 2 righe di campi che siano.
 */
.vbo-results-head {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--6);
	padding: var(--wp--preset--spacing--4) 0;
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/*
 * Contenitore campi (".vbo-results-head-fields", creato da
 * wrapResultsHeadFields() in vikbooking-dom.js): stesso linguaggio
 * visivo di prima (gap, wrap) ma ora scoped al solo blocco campi,
 * "Change Dates" non ne fa più parte. "min-width:0" — senza, un figlio
 * flex non si restringe mai sotto la larghezza del proprio contenuto
 * (default "min-width:auto"), impedendo il wrap interno di entrare in
 * gioco quando la colonna "Change Dates" accanto sottrae spazio.
 *
 * Selettore a due classi (".vbo-results-head > .vbo-results-head-fields",
 * specificità 0,2,0) invece della sola classe (0,1,0): la regola
 * generica ".vbo-results-head > div" subito sotto (0,1,1, un punto in
 * più del solo conteggio classi) applica anch'essa "gap" (8px, pensato
 * per lo spazio icona↔testo dentro OGNI singolo campo) a QUALSIASI
 * figlio diretto di ".vbo-results-head", wrapper campi incluso —
 * vincerebbe lei sul gap 32px voluto qui tra un campo e l'altro,
 * indipendentemente dall'ordine di caricamento (specificità maggiore).
 */
.vbo-results-head > .vbo-results-head-fields {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--6);
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * Layout icona+valore di OGNI singolo campo. ".vbo-results-head-fields
 * > div" (i campi veri e propri, ora annidati un livello più in
 * profondità dentro il wrapper campi — vedi sopra) accanto a
 * ".vbo-results-head > div" (necessaria ancora per "Change Dates" E per
 * il wrapper stesso, entrambi rimasti figli diretti di ".vbo-results-
 * head"): senza questa aggiunta i campi, non più raggiunti dalla sola
 * ".vbo-results-head > div", perdevano "display:flex" (icona e valore
 * non più affiancati, card visibilmente più strette — bug osservato,
 * verificato con Playwright).
 */
.vbo-results-head > div,
.vbo-results-head-fields > div {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
}

.vbo-results-head .vbo-pref-color-text {
	color: var(--wp--preset--color--accent);
}

.vbo-results-head-det {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.vbo-results-head-det-lbl {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--text-soft);
}

.vbo-results-head-det-val {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--text);
}

@media (max-width: 767px) {
	.vbo-results-head {
		gap: var(--wp--preset--spacing--4);
	}
}

/*
 * Ordine campi uniforme tra le due view: Check-in → Check-out → Nights →
 * Adults → Rooms → Children → Change Dates. Il nativo stampa i campi in
 * ordine diverso e non identico tra le due pagine (Search Results:
 * checkin/nights/[rooms]/adults/[children]/chdates — Showprc: nights/
 * [rooms]/adults/[children]/checkin/checkout) — nessun template da
 * toccare, il riordino è puro CSS via "order" sui figli diretti del
 * wrapper campi (".vbo-results-head-fields", sopra — creato da
 * wrapResultsHeadFields() in vikbooking-dom.js, che sposta lì dentro
 * tutti i campi lasciando "Change Dates" fratello diretto del wrapper
 * dentro ".vbo-results-head", mai coinvolto in questo riordino). Il
 * blocco Check-out di Search Results (".vbo-results-checkout") non
 * esiste nel markup nativo di quella pagina ed è ricostruito via JS —
 * vedi "initSearchResultsCheckout()" in vikbooking-dom.js, che deve
 * girare PRIMA di wrapResultsHeadFields() perché il campo ricostruito
 * finisca anch'esso dentro il wrapper.
 */
.vbo-results-head-fields > .vbo-results-checkin,
.vbo-results-head-fields > .vbcheckinroom {
	order: 1;
}

.vbo-results-head-fields > .vbo-results-checkout,
.vbo-results-head-fields > .vbcheckoutroom {
	order: 2;
}

.vbo-results-head-fields > .vbo-results-nights {
	order: 3;
}

.vbo-results-head-fields > .vbo-results-numadults {
	order: 4;
}

.vbo-results-head-fields > .vbo-results-numrooms {
	order: 5;
}

.vbo-results-head-fields > .vbo-results-numchildren {
	order: 6;
}

/*
 * "Change Dates" della barra riepilogo in cima (".vbo-results-chdates a",
 * solo Search Results) — non ancora ridefinito altrove in questo file
 * (a differenza di quanto un commento precedente in questo stesso file
 * lasciava intendere, verificato con grep: nessuna regola scoped
 * esisteva). Stesso problema già diagnosticato per "Cancel" nella
 * pagina Review (".vbo-booking-review-cmds a.vbo-pref-color-btn-
 * secondary" più sotto in questo file): ".vbo-pref-color-btn-secondary"
 * dipende da "var(--vbo-pref-bgcolorhov)", una custom property
 * impostata lato admin (VikBooking → Preferenze) con un inline <style>
 * stampato DOPO questo foglio in <head> — una ridefinizione in ":root"
 * non basterebbe, resterebbe blu Bootstrap. Stesso trattamento outline
 * terracotta già usato per "Change Dates" in fondo ai risultati
 * (".goback .vbo-goback-link" più sopra in questo file) per coerenza tra
 * le due istanze dello stesso bottone nella stessa pagina, qui in
 * versione compatta per stare nell'altezza della barra riepilogo.
 */
.vbo-results-head .vbo-results-chdates a.vbo-pref-color-btn-secondary {
	display: inline-flex;
	align-items: center;
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
	margin-right: var(--wp--preset--spacing--5);
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: var(--vik-radius);
	background: transparent;
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: none;
	box-sizing: border-box;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.vbo-results-head .vbo-results-chdates a.vbo-pref-color-btn-secondary:hover {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
}

/*
 * Badge "N Adulti, N Bambini" sopra la card camera — forma/sfondo/colore
 * testo condivisi con la pillola "Room N" in un unico selettore comune
 * più sotto (".vbo-showprc-room-head .vbshowprcroomnum,
 * .vbo-showprc-room-head .vbo-showprc-staydetails > .vbo-showprc-
 * staydetails-party": stessa pillola, un solo punto dove padding/radius/
 * sfondo sono dichiarati, non due regole separate che rischiano di
 * andare fuori sync in futuro — vedi il commento lì per il dettaglio del
 * bug di specificità che questo risolve). Qui restano solo le proprietà
 * NON condivise con "Room N" (tipografia: la pillola "Room N" resta sul
 * font di sistema nativo, mai toccato, mentre questo badge ha sempre
 * avuto un trattamento tipografico proprio, maiuscolo/tracciato).
 */
.vbo-showprc-staydetails-party {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/*
 * Icona "users" del badge — colorata in accento, MAI la label testuale
 * accanto (richiesta esplicita: solo l'icona porta il terracotta, il
 * testo "N Adulti"/"N Bambini" resta nel colore base già ereditato dalla
 * pillola condivisa sopra). Il nativo la stila con un selettore composto
 * PROPRIO (".vbsearchproominfo .vbsearchroomparty i, .vbo-showprc-room-
 * head .vbo-showprc-staydetails i { color: var(--vbo-pref-textcolor) }",
 * 2 classi + tipo, specificità 0,2,1) che vince sulla nostra rete di
 * sicurezza generica ".vbo-pref-color-text" (0,1,0, cima del file)
 * nonostante l'icona porti quella classe — bug verificato con Playwright
 * (icona ancora blu "#2282bd" in pagina, il tentativo precedente
 * ".vbo-showprc-staydetails-party .vbo-pref-color-text" qui sotto era
 * anch'esso a specificità insufficiente, 0,2,0, mancava il tipo "i").
 * Stesso identico selettore composto nativo copre ANCHE l'equivalente
 * nei risultati di ricerca multi-camera (".vbsearchproominfo
 * .vbsearchroomparty i") — bug riscontrato pure lì (mai corretto finora,
 * nessun selettore per ".vbsearchroomparty" esisteva in questo file),
 * corretto qui in un colpo solo scoped a entrambi i punti del flusso.
 */
.vbo-showprc-staydetails-party i.vbo-pref-color-text,
.vbsearchproominfo .vbsearchroomparty i {
	color: var(--wp--preset--color--accent);
}

/*
 * Il nativo incornicia l'intera camera (".vbo-showprc-room-block": bordo
 * + padding 15px/20px) in un riquadro proprio — nel design piatto voluto
 * qui i bordi vivono solo sui singoli componenti (rate card, extra), non
 * su questo contenitore. Azzerato qui invece di lasciarlo, per non avere
 * un doppio riquadro con quelli sottostanti.
 */
.vbo-showprc-room-block {
	border: 0;
	padding: 0;
	margin-bottom: var(--wp--preset--spacing--5);
}

/*
 * Riga camera (".vbo-showprc-room-head": pillola "Room N" quando
 * presente + badge ospiti) — barra arrotondata a piena larghezza sempre
 * presente, anche a camera singola (nessuna pillola "Room N" in quel
 * caso, solo il badge ospiti dentro la stessa riga): stesso trattamento
 * richiesto esplicitamente identico a quello multi-camera, non due
 * varianti diverse. Dichiarato qui sulla classe nativa SEMPRE presente
 * (non su ".vbo-showprc-room-head-trigger", aggiunta da JS solo con 2+
 * camere — vedi sotto) cosicché il bordo/sfondo/radius arriva anche a
 * camera singola senza bisogno di JS: quella classe aggiunge ora solo il
 * comportamento interattivo (cursor, stato collassato), non più la forma
 * di base, che sarebbe stata duplicata a rischio di andare fuori sync
 * (stesso principio già seguito per la pillola condivisa sotto).
 */
.vbo-showprc-room-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
	margin-bottom: var(--wp--preset--spacing--3);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 30px;
}

/*
 * Divisore tra una camera e la successiva (2+ camere, ".room_container"
 * ripetuto una volta per camera nel nativo, tmpl/default.php) — stesso
 * trattamento già approvato per il cambio sezione "Room N" nei risultati
 * di ricerca multi-camera (".vbo-searchresults-step-content:not(:first-
 * child)" sopra in questo file). Solo "padding-top": il "margin-bottom"
 * già presente su ".vbo-showprc-room-block" sopra fornisce lo spazio
 * PRIMA della riga, questo aggiunge solo il filo e il respiro DOPO,
 * evitando di sommare due margini per un unico distacco visivo.
 *
 * "~" (fratello generico) invece di "+" (fratello adiacente): tra due
 * ".room_container" il nativo stampa un `<input type="hidden"
 * name="roomid[]">` fratello (tmpl/default.php, subito dopo la chiusura
 * di ogni camera) — un elemento reale, non testo, che rompe l'adiacenza
 * diretta richiesta da "+" (verificato: con "+" la regola non scattava
 * affatto, "border-top" restava a "0px none" in DevTools). "~" ignora
 * qualunque fratello in mezzo, quindi funziona a prescindere da questo
 * dettaglio del markup — con una sola camera resta comunque lo scope
 * corretto: nessun ".room_container" fratello da colpire.
 */
.room_container ~ .room_container {
	padding-top: var(--wp--preset--spacing--6);
	border-top: 1px solid var(--wp--preset--color--line);
}

/*
 * Pillola condivisa "Room N" (".vbshowprcroomnum", solo 2+ camere) e
 * badge "N Adulti, N Bambini" (".vbo-showprc-staydetails-party", sempre
 * presente) — stesso componente, un solo selettore per la forma/sfondo/
 * colore testo comuni a entrambi (richiesta esplicita: mai due regole
 * separate che possono andare fuori sync). Valori di forma (padding
 * "8px 10px", "border-radius:30px") identici a quelli che il nativo dà
 * già a ".vbshowprcroomnum" (vikbooking_styles.css,
 * ".vbsearchproominfo .vbsearchnroom, .vbo-showprc-room-head
 * .vbshowprcroomnum" — stesso componente dei risultati di ricerca multi-
 * camera) — non un'invenzione nuova, solo dichiarati qui esplicitamente
 * così ".vbo-showprc-staydetails-party" (che nel nativo non ha ALCUNA
 * forma pillola propria, solo "margin-right:15px") può riusarli
 * pari pari invece di duplicarli a mano.
 *
 * "display:inline-flex" (non il nativo "inline-block", identico per
 * ".vbshowprcroomnum" ma comunque ridichiarato qui per coerenza) è
 * indispensabile per ".vbo-showprc-staydetails-party": il nativo
 * (".vbo-showprc-room-head .vbo-showprc-staydetails > div { display:
 * inline-block }", 2 classi + tipo, specificità 0,2,1) vince sulla
 * regola precedente in questo file che usava solo ".vbo-showprc-
 * staydetails-party" (1 classe, 0,1,0) — bug verificato con Playwright
 * (badge renderizzato senza "gap" tra icona e testo, "display" ancora
 * "inline-block" da DevTools): l'icona/testo del badge sembravano quindi
 * "nudi", senza l'allineamento/spaziatura della pillola voluta.
 * L'ancestor aggiuntivo qui (3 classi, specificità 0,3,0) batte quel
 * selettore nativo per conteggio di classi da solo.
 */
.vbo-showprc-room-head .vbshowprcroomnum,
.vbo-showprc-room-head .vbo-showprc-staydetails > .vbo-showprc-staydetails-party {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	padding: 8px 10px;
	background: var(--wp--preset--color--background-alt);
	border-radius: 30px;
	color: var(--wp--preset--color--text);
}

/*
 * Icona del supplemento "split stay" dentro la pillola "Room N"
 * (".vbo-showprc-roomnum-icn", solo se la camera fa parte di un
 * soggiorno diviso su più camere) — il nativo non le dà alcun colore
 * (solo "margin-right:5px; display:inline-block"): senza questa regola
 * erediterebbe il colore testo base della pillola sopra, non l'accento.
 * Stessa regola "solo icona in accento, mai la label" della coppia
 * sopra — qui applicata coerentemente anche a questa pillola, non solo
 * al badge ospiti.
 */
.vbo-showprc-roomnum-icn {
	color: var(--wp--preset--color--accent);
}

/*
 * Header camera come trigger dell'accordion — solo quando
 * initShowprcRoomsMultiNav() lo abilita (2+ camere: la classe
 * ".vbo-showprc-room-head-trigger" è aggiunta da JS solo in quel caso,
 * mai in una prenotazione a camera singola). Forma/sfondo/bordo/radius
 * della riga sono già dati incondizionatamente da ".vbo-showprc-room-
 * head" sopra (stessa barra, camera singola o multi-camera — richiesta
 * esplicita di identità visiva tra i due casi): qui restano solo le
 * proprietà che servono IN PIÙ quando l'header è davvero cliccabile
 * (camera singola non ha alcun elemento interattivo in questa riga,
 * quindi non le eredita da nessuna parte, corretto).
 */
.vbo-showprc-room-head-trigger {
	cursor: pointer;
	user-select: none;
	transition: border-radius 0.2s ease, border-color 0.2s ease;
}

/*
 * Stato collassato: non più la barra arrotondata (pensata per una riga
 * singola pillola+ospiti) ma un vero trattamento a card — bordo
 * sinistro terracotta sottile + sfondo bianco, stesso idioma già in uso
 * nel file per blocchi "riepilogo" analoghi (".vbo-precheckin-adult-
 * wrap"/".vbo-booking-rooms-wrapper:has(.vbvordroominfo-multi)" sopra),
 * padding verticale più generoso per accogliere la riga
 * miniatura+riepilogo sotto (".vbo-showprc-room-head-summary").
 */
.room_container.is-collapsed .vbo-showprc-room-head-trigger {
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
	border-color: var(--wp--preset--color--line);
	border-left: 3px solid var(--wp--preset--color--accent);
	border-radius: var(--vik-radius);
}

.vbo-showprc-room-chevron {
	flex-shrink: 0;
	margin-left: auto;
	color: var(--wp--preset--color--text-soft);
	font-size: 12px;
	transition: transform 0.2s ease;
}

.room_container.is-collapsed .vbo-showprc-room-chevron {
	transform: rotate(-90deg);
}

/*
 * Riepilogo "miniatura + Nome camera · Tariffa · Prezzo" — visibile solo
 * da collassato (il corpo sottostante già mostra le stesse informazioni
 * per esteso quando espanso, ripeterle in entrambi gli stati sarebbe
 * ridondante). Miniatura + testo costruiti da JS
 * (initShowprcRoomsMultiNav(), updateSummary()): la miniatura riusa la
 * stessa foto già caricata per la galleria camera (nuovo <img>, non lo
 * stesso nodo spostato), per dare identità visiva alla riga invece del
 * solo testo nudo.
 */
.vbo-showprc-room-head-summary {
	display: none;
	flex-basis: 100%;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
}

.room_container.is-collapsed .vbo-showprc-room-head-summary {
	display: flex;
	margin-top: var(--wp--preset--spacing--3);
}

.vbo-showprc-room-head-summary-thumb {
	flex-shrink: 0;
	width: 60px;
	height: 60px;
	border-radius: var(--vik-radius);
	object-fit: cover;
}

.vbo-showprc-room-head-summary-text {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--text-soft);
}

/*
 * Corpo camera (".vbo-showprc-room-block": tariffe + extra) nascosto da
 * collassato — resta nel DOM (i valori scelti restano parte
 * dell'invio nativo del form), solo "display:none" via questa classe
 * applicata da JS al ".room_container", non al blocco stesso: stesso
 * principio già in uso per l'accordion di Pre Check-in
 * (".vbo-precheckin-adult-wrap.is-collapsed .vbo-precheckin-guest-
 * fields" sopra in questo file).
 */
.room_container.is-collapsed .vbo-showprc-room-block {
	display: none;
}

/*
 * Tab di navigazione rapida "Room 1 | Room 2…" — inserite da JS come
 * primo figlio di ".vbo-showprc-wrapper" solo con 2+ camere. Stesso
 * linguaggio "pillola" già in uso nel file per controlli di
 * selezione/filtro rapidi (es. i pulsanti vista Lista/Griglia dei
 * risultati di ricerca), qui applicato al salto diretto tra sezioni.
 */
.vbo-showprc-room-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
	margin-bottom: var(--wp--preset--spacing--5);
}

.vbo-showprc-room-tab {
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 100px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--text-soft);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.vbo-showprc-room-tab:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.vbo-showprc-room-tab.is-active {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
}

/*
 * Riepilogo camera — immagine a sinistra, nome/descrizione/caratteristiche
 * a destra (DOM raggruppato da initShowprcRoomSummary() in
 * vikbooking-dom.js: nel nativo sono tre fratelli separati, non
 * raggruppabili in due colonne solo via CSS).
 */
.vbo-showprc-room-summary {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
	margin-bottom: var(--wp--preset--spacing--7);
}

.vbo-showprc-room-summary-media {
	flex-shrink: 0;
}

.vbo-showprc-room-summary-media .vikfx-gallery-container {
	border-radius: var(--vik-radius);
	overflow: hidden;
}

.vbo-showprc-room-summary-media .vikfx-gallery-fade-container img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* La striscia di thumbnail secondarie resta troppo densa in questo
   formato compatto: a questo step l'ospite ha già visto la galleria
   completa in Room Details, qui basta la foto principale con le frecce
   prev/next (già native, non toccate) per scorrere le stesse immagini. */
.vbo-showprc-room-summary-media .vikfx-gallery {
	display: none;
}

.vbo-showprc-room-summary-info {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
}

.vbo-showprc-roomname h3 {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	margin: 0;
}

.room_description_box p {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--text-soft);
	line-height: 1.6;
	margin: 0;
}

.room_description_box p + p {
	margin-top: var(--wp--preset--spacing--2);
}

.vbo-showprc-room-summary .vbo-room-carats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
}

/*
 * Chip quadrato terracotta chiaro — stesso trattamento già approvato per
 * le amenities dei risultati di ricerca (".vbo-searchresults-classic-
 * wrap .roomlist_carats .vbo-room-carat" sopra in questo file: sfondo
 * "var(--vik-accent-12)", 32×32px, icona accent-dark), qui applicato
 * al riepilogo camera di Options — le icone erano rimaste "nude" (solo
 * colore, nessun contenitore) nel giro precedente.
 */
.vbo-showprc-room-summary .vbo-room-carat {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 32px;
	margin: 0;
	border-radius: var(--vik-radius);
	background: var(--vik-accent-12);
}

/*
 * Larghezza fissa (chip quadrato) solo per le caratteristiche con icona
 * reale configurata in VikBooking — quelle senza (testo libero, es.
 * "Vista mare") arrivano native come sola label dentro ".vbo-room-carat"
 * (nessun figlio ".vbo-icn-carat"): stesso distinguo già validato per i
 * risultati di ricerca (".vbo-searchresults-classic-wrap .roomlist_carats
 * .vbo-room-carat:has(.vbo-icn-carat)" sopra), qui senza il fallback a
 * icona generica (normalizeSearchResultsCarats() in vikbooking-dom.js è
 * scoped ai soli wrap dei risultati di ricerca, non a Options) — la label
 * testuale resta quindi leggibile per intero nel chip.
 */
.vbo-showprc-room-summary .vbo-room-carat:has(.vbo-icn-carat) {
	width: 32px;
}

.vbo-showprc-room-summary .vbo-room-carat:not(:has(.vbo-icn-carat)) {
	padding: 0 var(--wp--preset--spacing--3);
	color: var(--wp--preset--color--accent-dark);
	font-size: var(--wp--preset--font-size--xs);
	white-space: nowrap;
}

.vbo-showprc-room-summary .vbo-icn-carat {
	color: var(--wp--preset--color--accent-dark);
	font-size: var(--wp--preset--font-size--sm);
}

@media (min-width: 768px) {
	.vbo-showprc-room-summary {
		flex-direction: row;
		align-items: flex-start;
	}

	.vbo-showprc-room-summary-media {
		width: 320px;
		height: 220px;
	}

	.vbo-showprc-room-summary-media .vikfx-gallery-container,
	.vbo-showprc-room-summary-media .vikfx-gallery-fade-container {
		height: 100%;
	}
}

/*
 * Tariffa — h4 nativo "Price" (già tradotto dal plugin: solo restyling,
 * nessun nuovo testo) come eyebrow label sopra le rate card.
 */
.vbo-showprc-wrapper .room_prices > h4,
.vbo-showprc-wrapper .room_options > h4 {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--accent);
	margin: 0 0 var(--wp--preset--spacing--4);
}

.vbo-showprc-pricetable {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--vik-radius);
	overflow: hidden;
}

/*
 * Il nativo forza ".vbo-showprc-pricetable .vbo-showprc-price-entry"
 * (2 classi) a "display:inline-block; width:100%; padding:20px 0" e i tre
 * figli (radio/rateplan/cost) a float — a parità di sole classi il nostro
 * ".vbo-showprc-price-entry" (1 classe) perderebbe la specificità pur
 * caricando dopo. Selettore replicato alla stessa profondità per vincere
 * sempre, qui e in tutti i breakpoint nativi (nessuna media query da
 * inseguire uno per uno: senza @media, questa regola vince a parità di
 * specificità su qualunque viewport, dato che il file del tema carica per
 * ultimo nel <head>).
 */
.vbo-showprc-pricetable .vbo-showprc-price-entry {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--4);
	width: auto;
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
	cursor: pointer;
	transition: background-color 0.2s ease;
	margin: 0;
}

.vbo-showprc-price-entry + .vbo-showprc-price-entry {
	border-top: 1px solid var(--wp--preset--color--line);
}

.vbo-showprc-price-entry:has(.vbo-radio:checked) {
	background: var(--wp--preset--color--background-alt);
}

/*
 * Anche i 3 figli diretti (radio/rateplan/cost) hanno una regola nativa
 * concorrente ".vbo-showprc-pricetable .vbo-showprc-price-entry > div"
 * (2 classi + tipo) ripetuta identica in 4 breakpoint diversi (a
 * larghezze via via minori forza width:100% su tutti e tre, uno sotto
 * l'altro) — più specifica di un singolo selettore di classe. Stessa
 * tecnica: profondità di selettore pareggiata (3 classi), per vincere su
 * ogni breakpoint senza doverli replicare uno per uno.
 */
.vbo-showprc-pricetable .vbo-showprc-price-entry > .vbo-showprc-price-entry-radio {
	float: none;
	width: auto;
	flex-shrink: 0;
}

.vbo-showprc-price-entry-radio .vbo-radio {
	width: 18px;
	height: 18px;
	accent-color: var(--wp--preset--color--accent);
	cursor: pointer;
}

.vbo-showprc-pricetable .vbo-showprc-price-entry > .vbo-showprc-price-entry-rateplan {
	float: none;
	width: auto;
	flex-grow: 1;
}

.vbo-showprc-price-entry-rateplan label {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	color: var(--wp--preset--color--text);
	cursor: pointer;
}

.vbpricedetails {
	margin-top: var(--wp--preset--spacing--1);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--text-soft);
}

.vbpricedetails span {
	display: inline-block;
}

.vbpricedetails span + span::before {
	content: "·";
	margin: 0 var(--wp--preset--spacing--1);
}

.vbo-showprc-pricetable .vbo-showprc-price-entry > .vbo-showprc-price-entry-cost {
	float: none;
	width: auto;
	flex-shrink: 0;
	text-align: right;
}

.vbo-showprc-price-entry-cost .room_cost {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	font-variant-numeric: lining-nums;
}

/*
 * Supplemento età bambino — sfondo/bordo diversi dalle rate card sopra
 * per non sembrare parte della scelta tariffa (richiesta esplicita:
 * gerarchia visiva separata). Il giro precedente usava lo stesso
 * "background-alt" della riga tariffa selezionata (".vbo-showprc-price-
 * entry:has(.vbo-radio:checked)" sopra): stesso colore pieno, il blocco
 * finiva quindi percepito come "attaccato" alla tariffa scelta invece che
 * come nota a sé (verificato in pagina: nessun confine visivo tra i due,
 * solo lo spazio di "margin-top"). Sfondo bianco + bordo sinistro sottile
 * in accento — stesso idioma "nota isolata" già in uso nel file per
 * blocchi analoghi (".vbo-precheckin-adult-wrap"/".vbo-booking-rooms-
 * wrapper:has(.vbvordroominfo-multi)" più sotto), qui coerente con
 * qualunque colore assuma la riga tariffa sopra.
 */
.vbageintervals {
	margin-top: var(--wp--preset--spacing--5);
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-left: 3px solid var(--wp--preset--color--accent);
	border-radius: var(--vik-radius);
}

.vbageintervals > p {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	margin: 0 0 var(--wp--preset--spacing--3);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--text-soft);
}

.vbageintervals > p .fa-baby {
	font-size: var(--wp--preset--font-size--base);
}

.vbo-showprc-child-fee {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--4);
}

.vbo-showprc-child-fee + .vbo-showprc-child-fee {
	margin-top: var(--wp--preset--spacing--3);
	padding-top: var(--wp--preset--spacing--3);
	border-top: 1px solid var(--wp--preset--color--line);
}

.vbo-showprc-child-fee span:first-child {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--text);
	white-space: nowrap;
}

.vbo-showprc-child-fee select {
	height: 42px;
	padding: 0 var(--wp--preset--spacing--6) 0 var(--wp--preset--spacing--3);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--vik-radius);
	background-color: var(--wp--preset--color--white);
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath fill='%232C2C2C' d='M4 5 0 0h8z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--wp--preset--spacing--3) center;
	background-size: 8px 5px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--text);
	cursor: pointer;
}

/*
 * Servizi extra — foto+descrizione (card alla pari) e senza foto (riga
 * compatta) in "order" separati: gli entry sono fratelli piatti nel
 * nativo, "auto-fit" fa convergere su colonne uguali qualunque sia il
 * numero di card con foto presenti, senza doverlo conoscere a priori.
 */
.vbo-showprc-optionstable {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--wp--preset--spacing--4);
}

/*
 * Il nativo forza ogni entry a "display:inline-block; width:calc(33.33% -
 * 8px); margin:4px" (via ".vbo-showprc-optionstable .vbo-showprc-option-
 * entry", 2 classi — la stessa selettore che serve anche da 5 breakpoint
 * diversi con altre percentuali), oltre a "text-align:center" e un
 * padding fisso su ogni figlio diretto (via "> div" e
 * "> *:not(.vbo-showprc-option-entry-img)", rispettivamente 2 e 3 classi
 * di specificità). Il nostro ".vbo-showprc-option-entry"/".vbo-showprc-
 * option--photo" a 1-2 classi perdeva su tutti questi punti pur caricando
 * dopo. Selettori replicati qui alla stessa (o maggiore) profondità per
 * vincere sempre — nessuna @media da inseguire: senza scoping a
 * viewport, queste regole vincono su qualunque breakpoint nativo.
 */
.vbo-showprc-optionstable .vbo-showprc-option-entry {
	display: block;
	width: auto;
	margin: 0;
	padding-bottom: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--vik-radius);
	box-sizing: border-box;
}

.vbo-showprc-optionstable .vbo-showprc-option-entry > div,
.vbo-showprc-optionstable .vbo-showprc-option-entry > *:not(.vbo-showprc-option-entry-img) {
	margin: 0;
	padding: 0;
	text-align: left;
}

.vbo-showprc-optionstable .vbo-showprc-option-entry.vbo-showprc-option--photo {
	order: 1;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
	overflow: hidden;
}

.vbo-showprc-optionstable .vbo-showprc-option-entry.vbo-showprc-option--compact {
	order: 2;
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
}

.vbo-showprc-option--compact .vbo-showprc-option-entry-img {
	display: none;
}

.vbo-showprc-option--photo .vbo-showprc-option-entry-img img {
	display: block;
	width: 100%;
	height: 160px;
	object-fit: cover;
	border-radius: 0;
}

.vbo-showprc-optionstable .vbo-showprc-option-entry.vbo-showprc-option--photo .vbo-showprc-option-entry-name,
.vbo-showprc-optionstable .vbo-showprc-option-entry.vbo-showprc-option--photo .vbo-showprc-option-entry-cost,
.vbo-showprc-optionstable .vbo-showprc-option-entry.vbo-showprc-option--photo .vbo-showprc-option-entry-input {
	padding-left: var(--wp--preset--spacing--5);
	padding-right: var(--wp--preset--spacing--5);
}

/*
 * Selettore alla stessa profondità (4 classi) della regola sopra: gli
 * stessi due punti d'attrito col nativo (margin/padding sui figli diretti
 * dell'entry) valgono anche qui, non solo per padding-left/right.
 */
.vbo-showprc-optionstable .vbo-showprc-option-entry.vbo-showprc-option--photo .vbo-showprc-option-entry-name {
	padding-top: var(--wp--preset--spacing--4);
}

.vbo-showprc-optionstable .vbo-showprc-option-entry.vbo-showprc-option--photo .vbo-showprc-option-entry-input {
	padding-bottom: var(--wp--preset--spacing--4);
	margin-top: auto;
}

.vbo-showprc-option--compact .vbo-showprc-option-entry-name {
	flex-grow: 1;
	min-width: 180px;
}

.vbo-showprc-option-entry-name {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 500;
	color: var(--wp--preset--color--text);
}

.vbo-showprc-option-entry-descr {
	margin-top: var(--wp--preset--spacing--1);
}

.vbo-showprc-option-entry-descr p {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 400;
	color: var(--wp--preset--color--text-soft);
	margin: 0;
}

.vbo-showprc-option-entry-cost {
	display: flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--1);
	font-family: var(--wp--preset--font-family--display);
	font-variant-numeric: lining-nums;
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	color: var(--wp--preset--color--accent);
}

/*
 * Colonna prezzo delle righe compatte (Late Check-out, Transfer
 * Aeroporto, Servizio pulizia): stesso pattern in tutte e tre —
 * etichetta sopra, prezzo sotto. NON basta "flex-direction:column" qui:
 * valuta/numero (".vbo_currency"/".vbo_price", nativi, fratelli diretti)
 * finirebbero anche loro impilati su righe separate insieme
 * all'etichetta invece di restare "€ 25" sulla stessa riga (bug
 * verificato con Playwright). Restano quindi in riga (flex-wrap, non
 * flex-direction:column) e solo l'etichetta va a capo forzatamente
 * sopra di loro via "flex-basis:100%" — tecnica standard per un
 * "a capo" mirato dentro un flex container senza spezzare gli altri
 * figli.
 */
.vbo-showprc-option--compact .vbo-showprc-option-entry-cost {
	flex-wrap: wrap;
	justify-content: flex-end;
	row-gap: var(--wp--preset--spacing--1);
}

.vbo-showprc-option--compact .vbo-showprc-option-entry-qualifier {
	flex-basis: 100%;
	text-align: right;
}

.vbo-showprc-option-entry-qualifier {
	order: -1;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--text-soft);
}

.vbo-showprc-option-entry-input {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
}

.vbo-showprc-option--compact .vbo-showprc-option-entry-input {
	flex-shrink: 0;
}

/*
 * Checkbox extra opzionale (es. "Late Check-out") — "accent-color" da
 * solo (giro precedente) stila solo lo stato "checked": a riposo, il
 * caso più comune prima che l'utente clicchi, restava il quadratino
 * nativo piatto del browser, senza bordo/hover coerenti col tema. Stesso
 * checkbox reale ridisegnato via "appearance:none" già approvato per
 * "terms"/"promo email" in Book (".vbo-oconfirm-cfield-entry-checkbox
 * input[type=checkbox]" più sotto in questo file): bordo accent sempre
 * visibile, riempimento pieno + spunta bianca via "::after" solo su
 * ":checked", anello di focus coerente.
 */
.vbo-showprc-option-entry-input input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	position: relative;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin: 0;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: var(--vik-radius);
	background-color: var(--wp--preset--color--white);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.vbo-showprc-option-entry-input input[type="checkbox"]:checked {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}

.vbo-showprc-option-entry-input input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 5px;
	height: 9px;
	border: solid var(--wp--preset--color--white);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.vbo-showprc-option-entry-input input[type="checkbox"]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--vik-accent-15);
}

.vbo-showprc-checkbox-label {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--text);
	cursor: pointer;
}

/*
 * Stepper quantità — pulsanti aggiunti da enhanceShowprcQuantityOption()
 * in vikbooking-dom.js, l'<input type="number"> nativo resta il campo
 * reale (nessun valore parallelo). Bordo dell'intero stepper già in
 * accento al focus (":focus-within", giro corrente): senza, la tastiera
 * dava un anello di focus solo sul singolo bottone premuto, non
 * sull'intero controllo.
 */
.vbo-showprc-qty-stepper {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--vik-radius);
	transition: border-color 0.2s ease;
}

.vbo-showprc-qty-stepper:focus-within {
	border-color: var(--wp--preset--color--accent);
}

.vbo-showprc-qty-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 40px;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/*
 * Hover intonato all'accento invece del neutro "background-alt" (giro
 * precedente, indistinguibile dal resto dei riquadri chiari della
 * pagina): stessa formula rgba dell'accento già usata per gli hover
 * leggeri altrove nel tema (es. ".vbo-searchresults-classic-wrap
 * .roomlist_carats .vbo-room-carat", sfondo chip amenities sopra).
 */
.vbo-showprc-qty-btn:hover {
	background: var(--vik-accent-12);
	color: var(--wp--preset--color--accent-dark);
}

.vbo-showprc-qty-btn:focus-visible {
	outline: none;
	background: var(--vik-accent-12);
	color: var(--wp--preset--color--accent-dark);
}

.vbo-showprc-option-entry-input input[type="number"] {
	width: 32px;
	height: 32px;
	border: 0;
	border-left: 1px solid var(--wp--preset--color--line);
	border-right: 1px solid var(--wp--preset--color--line);
	text-align: center;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--text);
	appearance: textfield;
	-moz-appearance: textfield;
}

.vbo-showprc-option-entry-input input[type="number"]::-webkit-outer-spin-button,
.vbo-showprc-option-entry-input input[type="number"]::-webkit-inner-spin-button {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
}

.vbo-showprc-no-units {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--text-soft);
}

/*
 * Extra obbligatorio — badge + checkbox finta "spenta" (vedi
 * enhanceShowprcMandatoryOption() in vikbooking-dom.js: l'unico valore
 * reale resta l'hidden input nativo).
 */
.vbo-showprc-option--mandatory {
	background: var(--wp--preset--color--background-alt);
}

.vbo-showprc-option--mandatory .vbo-showprc-option-entry-name,
.vbo-showprc-option--mandatory .vbo-showprc-option-entry-descr p {
	color: var(--wp--preset--color--text-soft);
}

/*
 * Bordo/spunta in accento invece del grigio neutro (giro precedente):
 * il grigio comunicava "disabilitato/assente" più che "incluso e non
 * rimovibile" — stesso spunta bianca su fondo pieno del checkbox reale
 * sopra, qui però sempre "attiva" (nessuno stato ":checked" da
 * intercettare, è un elemento puramente rappresentativo).
 */
.vbo-showprc-fake-checkbox {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: var(--vik-radius);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
	font-size: 12px;
	line-height: 1;
}

.vbo-showprc-fake-checkbox::after {
	content: "✓";
}

/*
 * Pillola outline terracotta — stesso linguaggio badge già in uso nel
 * tema per gli stati (".vbo-booking-details-head-pending" più sotto in
 * questo file: bordo/sfondo/testo dalla stessa formula rgba
 * dell'accento), non il grigio pieno nativo dei badge Bootstrap. "Extra
 * incluso" non è uno stato di attesa/errore ma comunica comunque
 * un'informazione a colpo d'occhio, da qui lo stesso trattamento
 * cromatico invece di un nuovo grigio scollegato dalla palette.
 */
.vbo-showprc-mandatory-badge {
	display: inline-block;
	padding: var(--wp--preset--spacing--1) var(--wp--preset--spacing--3);
	border: 1px solid var(--vik-accent-35);
	border-radius: 100px;
	background: var(--vik-accent-08);
	color: var(--wp--preset--color--accent-dark);
	font-family: var(--wp--preset--font-family--body);
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	white-space: nowrap;
}

/*
 * Riepilogo prezzo per camera (2+ camere) — costruito da
 * initShowprcPriceBreakdown() in vikbooking-dom.js, inserito subito sopra
 * la sticky bar sotto. Chiuso di default (pannello a scomparsa, non un
 * modal: il contenuto è poche righe, non serve un overlay separato).
 */
.vbo-showprc-breakdown {
	margin-top: var(--wp--preset--spacing--6);
}

.vbo-showprc-breakdown-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--vik-radius);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	cursor: pointer;
	box-sizing: border-box;
	transition: border-color 0.2s ease;
}

.vbo-showprc-breakdown-toggle:hover {
	border-color: var(--wp--preset--color--accent);
}

.vbo-showprc-breakdown-toggle i {
	color: var(--wp--preset--color--text-soft);
	font-size: 12px;
	transition: transform 0.2s ease;
}

.vbo-showprc-breakdown.is-open .vbo-showprc-breakdown-toggle {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.vbo-showprc-breakdown.is-open .vbo-showprc-breakdown-toggle i {
	transform: rotate(180deg);
}

.vbo-showprc-breakdown-body {
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--5) 0;
	border: 1px solid var(--wp--preset--color--line);
	border-top: 0;
	border-radius: 0 0 var(--vik-radius) var(--vik-radius);
	background: var(--wp--preset--color--white);
}

.vbo-showprc-breakdown-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--4);
	padding: var(--wp--preset--spacing--3) 0;
}

.vbo-showprc-breakdown-row + .vbo-showprc-breakdown-row {
	border-top: 1px solid var(--wp--preset--color--line);
}

.vbo-showprc-breakdown-row-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.vbo-showprc-breakdown-row-room {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--text);
}

.vbo-showprc-breakdown-row-rate {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--text-soft);
}

.vbo-showprc-breakdown-row-price {
	flex-shrink: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-variant-numeric: lining-nums;
	color: var(--wp--preset--color--text);
}

/*
 * Riga TOTALE — stesso trattamento già approvato per il riepilogo prezzi
 * di Book (".vbo-oconfirm-summary-total-wrapper" sopra in questo file:
 * sfondo background-alt, bordo superiore marcato in accent), qui
 * applicato a una riga invece che all'intero contenitore, dato che il
 * bordo/sfondo del pannello sono già gestiti da
 * ".vbo-showprc-breakdown-body" sopra. Selettore a due classi (stesse di
 * ".vbo-showprc-breakdown-row" sull'elemento, vedi JS) per pareggiare la
 * specificità di ".vbo-showprc-breakdown-row + .vbo-showprc-breakdown-row"
 * sopra (0,2,0 anch'essa) e vincere per ordine di caricamento — nessun
 * "!important" necessario per il solo bordo superiore.
 */
.vbo-showprc-breakdown-row.vbo-showprc-breakdown-total-row {
	margin: 0 calc(var(--wp--preset--spacing--5) * -1);
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
	border-top: 2px solid var(--wp--preset--color--accent);
	background: var(--wp--preset--color--background-alt);
}

.vbo-showprc-breakdown-total-row span:first-child {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--text-soft);
}

.vbo-showprc-breakdown-total-row span:last-child {
	font-family: var(--wp--preset--font-family--display);
	font-variant-numeric: lining-nums;
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	color: var(--wp--preset--color--accent);
}

/*
 * Barra totale — costruita da initShowprcStickyBar() in
 * vikbooking-dom.js spostando i controlli nativi "Back"/"Book Now"
 * (nessun clone: restano gli stessi nodi con i propri listener). Il
 * totale mostrato è una stima client-side, non il valore autoritativo
 * (ricalcolato dal plugin al passo "Book" successivo).
 *
 * Posizionamento statico (non fixed/sticky): un primo tentativo in
 * position:fixed si sovrapponeva al footer scuro del sito invece di
 * fermarsi in fondo al contenuto — qui il blocco resta semplicemente
 * l'ultimo elemento nel flusso del form, dove il nativo aveva
 * ".room_buttons_box" (nessun padding-bottom aggiuntivo sul body,
 * non più necessario senza posizionamento fuori flusso).
 */
.vbo-showprc-stickybar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--4);
	margin-top: var(--wp--preset--spacing--7);
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--vik-radius);
}

.vbo-showprc-stickybar .goback {
	flex-shrink: 0;
}

.vbo-showprc-stickybar .vbo-goback-link {
	display: inline-block;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--vik-radius);
	background: transparent;
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: none;
	transition: border-color 0.2s ease;
}

.vbo-showprc-stickybar .vbo-goback-link:hover {
	border-color: var(--wp--preset--color--accent);
}

.vbo-showprc-stickybar-total {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
	margin-left: auto;
}

.vbo-showprc-stickybar-total-label {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--text-soft);
}

.vbo-showprc-stickybar-total-price {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 500;
	color: var(--wp--preset--color--accent);
	font-variant-numeric: lining-nums;
}

@media (max-width: 767px) {
	.vbo-showprc-stickybar {
		padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
	}

	.vbo-showprc-stickybar .vbo-goback-link {
		padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
	}

	.vbo-showprc-stickybar-total-label {
		font-size: 9px;
	}

	.vbo-showprc-stickybar-total-price {
		font-size: var(--wp--preset--font-size--lg);
	}
}

/* -----------------------------------------------------------
   Book (task=oconfirm) — riepilogo prezzi + coupon/PIN + Billing
   Information, ultimo step del flusso di prenotazione prima del
   riepilogo finale (wrapper ".vbo-oconfirm-wrapper"). Pagina
   completamente non stilizzata in precedenza, stesso trattamento
   di Options (task=showprc): nessuna delle regole seguenti
   sovrascrive stili preesistenti del tema.
   ----------------------------------------------------------- */

/*
 * Riepilogo camere/opzioni — il nativo dà già bordo/sfondo decenti a
 * questa tabella (grigio neutro #eee, non il blu debug di coupon/PIN
 * sotto): qui si ritocca solo radius e respiro, senza ricostruire la
 * struttura a righe flex esistente.
 */
.vbo-oconfirm-summary-room-wrapper {
	border-radius: var(--vik-radius);
}

.vbo-oconfirm-summary-room-head-cell span {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--text-soft);
}

.vbo-oconfirm-summary-container {
	margin-bottom: var(--wp--preset--spacing--7);
}

/*
 * Riga TOTAL — più peso visivo delle righe sopra: sfondo background-alt
 * invece del grigio neutro nativo, bordo superiore marcato in accent
 * (non solo il filo #eee ereditato), prezzo in Cormorant invece di
 * Inter. Passare il prezzo al display font reintroduce le cifre
 * oldstyle di Cormorant Garamond (stesso problema già risolto altrove,
 * es. ".vbo-showprc-price-entry-cost .room_cost") — "lining-nums" qui
 * è necessario, non opzionale.
 */
.vbo-oconfirm-summary-total-wrapper {
	margin-top: var(--wp--preset--spacing--3);
	background: var(--wp--preset--color--background-alt);
	border: 1px solid var(--wp--preset--color--line);
	border-top: 2px solid var(--wp--preset--color--accent);
	border-radius: var(--vik-radius);
}

.vbo-oconfirm-total-block {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--text-soft);
}

.vbo-oconfirm-summary-total-row .vbo_price {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	font-variant-numeric: lining-nums;
}

.vbo-oconfirm-summary-total-row .vbo_currency {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--md);
}

.vbo-oconfirm-summary-total-wrapper .vbo-oconfirm-summary-coupon-row > div {
	font-size: inherit;
}
.vbo-oconfirm-summary-total-wrapper .vbo-oconfirm-summary-coupon-row .vbo_price {
	color: var(--vbo-green-color);
	font-size: var(--wp--preset--font-size--md);
}

/*
 * Box coupon e box "Returning Customer" (.vbo-enterpin-block) arrivano
 * dal nativo con bordo dashed/solid blu (stile debug/placeholder mai
 * rifinito dal plugin, non un token del tema) e sfondo grigio piatto:
 * stesso trattamento per entrambi anche se solo il coupon è nel brief —
 * è lo stesso bug visivo dei due box gemelli, lasciarne uno risolto e
 * l'altro blu sarebbe un residuo stonato proprio accanto.
 */
.vbo-oconfirm-middlep {
	margin: 0 0 var(--wp--preset--spacing--7);
	gap: var(--wp--preset--spacing--5);
}

.vbo-coupon-outer,
.vbo-enterpin-block {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--vik-radius);
}

.vbhaveacoupon,
.vbo-enterpin-top h4 {
	display: block;
	margin: 0 0 var(--wp--preset--spacing--3);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--text);
}

.vbo-enterpin-inner span {
	display: block;
	margin-bottom: var(--wp--preset--spacing--3);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--text-soft);
}

.vbentercoupon-inner,
.vbo-enterpin-btns {
	display: flex;
	gap: var(--wp--preset--spacing--3);
}

/*
 * ".vbinputcoupon" e "#vbo-pincode-inp" non hanno la classe ".vbinput"
 * condivisa (regola in cima al file, sezione "Booking Details"): qui
 * replicano lo stesso bordo/radius/font, non un nuovo stile parallelo.
 */
.vbinputcoupon,
#vbo-pincode-inp {
	flex-grow: 1;
	height: 42px;
	padding: 0 var(--wp--preset--spacing--3);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--vik-radius);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--text);
	box-sizing: border-box;
}

.vbentercoupon-inner .btn,
.vbo-enterpin-btns .btn {
	flex-shrink: 0;
	height: 42px;
	padding: 0 var(--wp--preset--spacing--5);
	box-sizing: border-box;
}

/*
 * Focus visibile — nessuno dei campi VikBooking ha mai avuto uno stato
 * di focus stilizzato (nessuna regola ":focus" preesistente nel file per
 * ".vbinput"/".vbtextarea"): la aggiungiamo qui, non scoped a Book, così
 * vale anche per le altre pagine del flusso che condividono le stesse
 * classi (Booking Details, Room Details).
 */
.vbinput:focus,
.vbtextarea:focus,
select.vbf-countryinp:focus,
select.vbf-stateinp:focus,
.vbinputcoupon:focus,
#vbo-pincode-inp:focus,
.vbo-precheckin-adult-wrap .vbo-precheckin-guest-detail select:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 3px var(--vik-accent-15);
}

/*
 * Select Country/State — stessa freccia SVG terracotta già usata per
 * ".vbo-showprc-child-fee select": qui non hanno la classe ".vbinput",
 * quindi radius/font restano quelli nativi (Arial, radius 0) finché non
 * replicati esplicitamente. Il nativo stila la freccia via
 * ".vbo-oconfirm-cfield-input select" (classe + tipo, specificità 0,1,1):
 * un selettore di sola classe come ".vbf-countryinp" (0,1,0) perde pur
 * caricando dopo. "select.vbf-countryinp" pareggia la specificità e vince
 * per ordine di caricamento (verificato con Playwright: la freccia grigia
 * nativa restava visibile finché il selettore non è stato allineato).
 */
select.vbf-countryinp,
select.vbf-stateinp {
	height: 42px;
	padding: 0 var(--wp--preset--spacing--6) 0 var(--wp--preset--spacing--3);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--vik-radius);
	background-color: var(--wp--preset--color--white);
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath fill='%232C2C2C' d='M4 5 0 0h8z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--wp--preset--spacing--3) center;
	background-size: 8px 5px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--text);
	cursor: pointer;
}

/*
 * Griglia campi — il nativo mette i campi in coppia con
 * "display:inline-block; width:40%; margin:5px 20px" (".vbcustomfields
 * .vbo-oconfirm-cfield-entry"): due campi affiancati occupano insieme
 * l'80% di larghezza + 80px di margini fissi, non il 100% del
 * contenitore. Su schermi larghi il resto resta vuoto sulla destra e il
 * form intero sembra spinto a sinistra (misurato con Playwright: box
 * "Billing Information" 1072px, ma "Last Name" — la colonna destra della
 * prima riga — finisce a soli 909.5px, 162.5px di vuoto inutilizzato).
 * Passiamo il contenitore a flex-wrap con gap fisso e i campi a
 * "width:calc(50% - metà gap)": le due colonne si dividono davvero lo
 * spazio disponibile, qualunque sia la larghezza del box.
 */
.vbcustomfields {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--wp--preset--spacing--6);
	padding: 30px;
}

.vbcustomfields .vbo-oconfirm-cfield-entry {
	display: block;
	width: calc(50% - (var(--wp--preset--spacing--6) / 2));
	margin: var(--wp--preset--spacing--3) 0;
}
.vbo-oconfirm-cfield-separator h4 {
	margin: 0;
}

/*
 * Separatore ("Billing Information"), textarea ("Special Requests") e
 * checkbox ("terms"/"promo") vanno a piena larghezza — nel nativo lo sono
 * già tramite selettori dedicati (".vbo-oconfirm-cfield-entry-separator",
 * "-checkbox") pari specificità (2 classi) della regola generica sopra:
 * a parità vince l'ultimo caricato, cioè il nostro CSS, che quindi
 * silenziosamente li schiacciava tutti al 50% pur non essendo
 * l'intenzione (bug osservato con Playwright: "Billing Information" e
 * "Name" finivano sulla stessa riga, tutto il resto spostato di una
 * posizione). Qui i tre modificatori vengono riportati esplicitamente al
 * 100%, la textarea nativa partiva peraltro già solo al 91%.
 */
.vbcustomfields .vbo-oconfirm-cfield-entry:first-child {
	margin-top: 0;
}

.vbcustomfields .vbo-oconfirm-cfield-entry-separator,
.vbcustomfields .vbo-oconfirm-cfield-entry-textarea,
.vbcustomfields .vbo-oconfirm-cfield-entry-checkbox {
	width: 100%;
}

@media (max-width: 767px) {
	.vbcustomfields .vbo-oconfirm-cfield-entry {
		width: 100%;
	}
}

/*
 * Label — grassetto, colore testo pieno (non testo-soft, sono le label
 * dei campi obbligatori del form principale, non didascalie secondarie).
 * L'asterisco rosso nativo (#c70000, rosso pieno "bootstrap") diventa
 * "accent-dark": un rosso attenuato ("--vbo-color-error", usato altrove
 * per stati di errore reali come ".vbo-booking-details-head-cancelled")
 * resta comunque un rosso, percepito fuori palette accanto al terracotta
 * — qui non è un errore ma un'indicazione di campo obbligatorio, quindi
 * la variante scura dell'accent (già un token esistente, non un nuovo
 * colore hardcoded) comunica "attenzione" restando nella famiglia cromatica
 * del tema.
 */
.vbo-oconfirm-cfield-label label {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	color: var(--wp--preset--color--text);
}

.vbo-oconfirm-cfield-label .vbrequired {
	color: var(--wp--preset--color--accent-dark);
}

/*
 * Checkbox "terms" e "promo email" — selettore condiviso, un'unica regola
 * per entrambe (nessuna delle due ne era esclusa). Il giro precedente
 * usava solo "accent-color" (stessa tecnica di Options,
 * ".vbo-showprc-option-entry-input input[type=checkbox]"): funziona per
 * lo stato "checked", ma lo stato "unchecked" resta comunque il quadratino
 * nativo del browser — "accent-color" non tocca quel rendering, solo il
 * riempimento a spunta attiva. Risultato: a riposo (il caso comune, prima
 * che l'utente clicchi) entrambe le checkbox sembravano "non stilizzate",
 * non solo quella dei termini — verificato confrontando i computed style
 * delle due checkbox con Playwright, identici in entrambi i casi.
 * Qui si passa a un checkbox reale ridisegnato via "appearance:none" +
 * bordo/sfondo propri: bordo terracotta sempre visibile, riempimento
 * pieno + spunta bianca disegnata via ::after solo su ":checked". Stesso
 * input nativo (nessun elemento parallelo, a differenza del fake-checkbox
 * di Options usato lì per mimare un valore nascosto disabilitato — qui il
 * checkbox resta realmente interattivo).
 *
 * "!important" su padding/width/height: ".vbo-oconfirm-cfield-input input"
 * (nativo, non scoped al tipo checkbox) impone "padding:10.5px 10px" a
 * QUALSIASI input dentro il campo, checkbox incluso — proprietà che la
 * nostra regola non dichiarava affatto, quindi restava applicata senza
 * bisogno di vincere alcuna specificità, gonfiando il quadratino a
 * 22x23px (misurato con Playwright). Non basta alzare la specificità del
 * selettore per una proprietà che prima non impostavamo: va dichiarata
 * esplicitamente per rimuoverla.
 */
.vbo-oconfirm-cfield-entry-checkbox input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	position: relative;
	flex-shrink: 0;
	width: 18px !important;
	height: 18px !important;
	padding: 0 !important;
	margin: 0;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: var(--vik-radius);
	background-color: var(--wp--preset--color--white);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.vbo-oconfirm-cfield-entry-checkbox input[type="checkbox"]:checked {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}

.vbo-oconfirm-cfield-entry-checkbox input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 5px;
	height: 9px;
	border: solid var(--wp--preset--color--white);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.vbo-oconfirm-cfield-entry-checkbox input[type="checkbox"]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--vik-accent-15);
}

.vbo-oconfirm-cfield-entry-checkbox .vbo-oconfirm-cfield-label {
	align-items: center;
}

.vbo-oconfirm-cfield-entry-checkbox label {
	font-weight: 400;
	cursor: pointer;
}

/*
 * Gerarchia dei blocchi logici (anagrafica / indirizzo / note) — il
 * markup nativo non prevede heading o wrapper per gruppo, tutti i campi
 * sono ".vbo-oconfirm-cfield-entry" fratelli piatti: qui non si introduce
 * markup nuovo, solo margine extra + un filo di separazione sui campi che
 * aprono un nuovo gruppo. "Address" e "Zip Code" aprono lo stesso gruppo
 * "indirizzo" stando sulla stessa riga (coppia sinistra/destra): il
 * divider va replicato su entrambi, altrimenti la riga risulterebbe
 * spezzata a metà (bordo solo sopra "Address", non sopra "Zip Code").
 * "Special Requests" è invece da sola sulla propria riga (piena larghezza,
 * classe "-textarea" già distinta), non serve raddoppiare il selettore.
 * ":has()" per agganciarsi al campo per id senza markup aggiuntivo — stessa
 * tecnica già in uso nel file (".vbo-showprc-price-entry:has(.vbo-radio
 * :checked)").
 */
.vbo-oconfirm-cfield-entry:has(#vbf-inp6),
.vbo-oconfirm-cfield-entry:has(#vbf-inp7) {
	margin-top: var(--wp--preset--spacing--6);
	padding-top: var(--wp--preset--spacing--5);
	border-top: 1px solid var(--wp--preset--color--line);
}

.vbo-oconfirm-cfield-entry-textarea {
	margin-top: var(--wp--preset--spacing--6);
	padding-top: var(--wp--preset--spacing--5);
	border-top: 1px solid var(--wp--preset--color--line);
}

/*
 * Pulsanti finali — "Confirm Reservation" eredita già lo stile pieno
 * condiviso (".vbo-pref-color-btn", cima del file). "Back" qui è fuori
 * da ".vbo-showprc-stickybar" (l'unico scope dove ".vbo-goback-link" è
 * finora stilizzato, vedi sezione Options sopra): senza questa regola
 * resta con altezza nativa (~37px, bordo 2px) visibilmente più basso dei
 * ~46px di "Confirm Reservation" pur stando sulla stessa riga (verificato
 * con Playwright, getBoundingClientRect). Stesso padding verticale/
 * orizzontale del bottone pieno (spacing-3/spacing-5) per pareggiare le
 * proporzioni, bordo a 1px invece di 2px nativi per lo stesso motivo.
 */
.vboconfirmbottom {
	margin-top: var(--wp--preset--spacing--7);
}

.vboconfirmbottom .vbo-goback-link {
	display: inline-flex;
	align-items: center;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--vik-radius);
	background: transparent;
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: none;
	box-sizing: border-box;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.vboconfirmbottom .vbo-goback-link:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

@media (max-width: 767px) {
	.vbo-oconfirm-middlep {
		flex-direction: column;
	}

	.vboconfirmbottom {
		display: flex;
		flex-direction: column-reverse;
		gap: var(--wp--preset--spacing--3);
	}

	.vboconfirmbottom input[name="saveorder"] {
		float: none;
		width: 100%;
		margin-right: 0;
	}

	.vboconfirmbottom .vbo-goback-link {
		width: 100%;
		justify-content: center;
		box-sizing: border-box;
	}
}

.vbo-oconfirm-paymentopts .vbo-oconfirm-paymethods-list li:hover {
	border-color: var(--wp--preset--color--accent);
}
.vbo-oconfirm-paymentopts .vbo-oconfirm-paymethods-list .vbo-oconfirm-paymethod-item-active {
	border-color: var(--wp--preset--color--accent);
}
.vbo-oconfirm-paymentopts .vbo-oconfirm-paymethods-list .vbo-oconfirm-paymethod-item-active::after {
	background: var(--wp--preset--color--accent);
}

/* -----------------------------------------------------------
   Pre Check-in (task=precheckin) — form ripetuto per ogni ospite di
   ogni camera prenotata, raggiunto dal bottone "Pre Check-in" nella
   pagina Booking Details confermata (wrapper
   ".vbo-booking-details-precheckin"). Pagina completamente non
   stilizzata in precedenza, stesso trattamento di Options/Book: nessuna
   delle regole seguenti sovrascrive stili preesistenti del tema.
   ----------------------------------------------------------- */

/*
 * Disclaimer privacy in cima alla pagina (".vbo-precheckin-disclaimer",
 * solo classe ".info" mai stilizzata nel nativo, verificato — testo
 * semplice senza wrapper per un'icona) — trattato come nota informativa,
 * stessa icona Font Awesome "info-circle" già usata dal box "Upload
 * Documents" nativo poco più sotto per coerenza tra le due note della
 * pagina. L'icona è inserita da JS (vikbooking-dom.js,
 * initPrecheckinDisclaimer()) perché il nativo non prevede un elemento
 * dedicato da stilizzare.
 */
.vbo-precheckin-disclaimer {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--2);
	margin-bottom: var(--wp--preset--spacing--5);
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
	background: var(--wp--preset--color--background-alt);
	border-radius: var(--vik-radius);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--text-soft);
	line-height: 1.5;
}

.vbo-precheckin-disclaimer-icon {
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--sm);
}

/*
 * Badge "N / M ospiti completati" — non esiste nel nativo, costruito da
 * JS (initPrecheckinProgressBadge()) subito sotto il titolo "Pre
 * Check-in" (".vbo-booking-details-head-confirmed") e aggiornato ad ogni
 * modifica di un campo guest (updatePrecheckinProgress()).
 * "font-variant-numeric: lining-nums" sul conteggio per coerenza con la
 * stessa correzione già applicata altrove nel file a qualunque cifra
 * introdotta dal tema (qui non è nemmeno in Cormorant, ma la regola del
 * brief non fa eccezioni).
 */
.vbo-precheckin-progress {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	margin-bottom: var(--wp--preset--spacing--5);
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 100px;
	background: var(--wp--preset--color--white);
}

.vbo-precheckin-progress-count {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 500;
	color: var(--wp--preset--color--accent);
	font-variant-numeric: lining-nums;
}

.vbo-precheckin-progress-label {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--text-soft);
}

.vbo-precheckin-progress.is-complete {
	border-color: var(--wp--preset--color--accent);
}

.vbo-precheckin-progress.is-complete .vbo-precheckin-progress-count {
	color: var(--wp--preset--color--accent-dark);
}

/*
 * Intestazione camera — il nativo (".vbo-precheckin-room-wrap") ha solo
 * "margin:20px 0", nessun contenitore visivo: qui solo un filo di
 * gerarchia (font display, separazione tra camere) quando la
 * prenotazione ne contiene più di una, senza introdurre un box.
 */
.vbo-precheckin-room-wrapper + .vbo-precheckin-room-wrapper {
	margin-top: var(--wp--preset--spacing--7);
}

.vbo-precheckin-room-head span {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	color: var(--wp--preset--color--text);
}

/*
 * Card ospite — il nativo (".vbo-precheckin-adult-wrap") riempie
 * l'intero blocco con un fondo grigio pieno
 * ("background: var(--vbo-light-grey-bg-color)") e radius 6px: stesso
 * trattamento già approvato per "N camere prenotate" nella pagina di
 * conferma (".vbo-booking-rooms-wrapper:has(.vbvordroominfo-multi)") —
 * sfondo bianco, bordo sinistro sottile in accento, nessun riempimento
 * colorato esteso. Diventa anche l'header dell'accordion (vedi JS,
 * initPrecheckinAccordion()).
 */
.vbo-precheckin-adult-wrap {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-left: 3px solid var(--wp--preset--color--accent);
	border-radius: var(--vik-radius);
	padding: 0;
	box-sizing: border-box;
}

.vbo-precheckin-adult-wrap + .vbo-precheckin-adult-wrap {
	margin-top: var(--wp--preset--spacing--4);
}

/*
 * Header ospite — cliccabile (accordion via JS): badge tonda con icona
 * persona (il testo "Guest #N" resta quello nativo, la tonda è solo un
 * ausilio visivo per orientarsi scorrendo la pagina), pallino di stato e
 * chevron aggiunti da JS. Selettore allineato a quello nativo
 * (".vbo-precheckin-adult-wrap .vbo-precheckin-adult-num", stessa
 * specificità) per vincere in modo prevedibile, coerente con il resto
 * del file.
 *
 * Icona persona su ::after (non un unico ::before con background-image
 * colorato in una data-URI, che isolerebbe il colore rendendolo
 * impossibile da tokenizzare con var()): ::before resta il solo disco di
 * sfondo (partecipa al flex layout della riga, 28×28px), ::after è
 * sovrapposto via position:absolute + "mask" (stessa tecnica già usata
 * sopra in questo file per le icone di stato prenotazione — l'SVG
 * fornisce solo la forma/alpha, il colore vero arriva da
 * "background-color: var(...)"), quindi risolve davvero il token accento
 * del tema invece di un hex cotto nella data-URI.
 */
.vbo-precheckin-adult-wrap .vbo-precheckin-adult-num {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
	font-size: var(--wp--preset--font-size--sm);
	cursor: pointer;
	user-select: none;
}

.vbo-precheckin-adult-num::before {
	content: "";
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 100px;
	background-color: var(--wp--preset--color--background-alt);
}

.vbo-precheckin-adult-num::after {
	content: "";
	position: absolute;
	top: 50%;
	left: var(--wp--preset--spacing--5);
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	pointer-events: none;
	-webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
	mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
	background-color: var(--wp--preset--color--accent);
}

/*
 * ":first-child" e non solo "span": lo span del nome ospite è l'unico
 * markup nativo dentro l'header, ma lo status dot aggiunto da JS
 * (".vbo-precheckin-guest-status") è anch'esso uno <span> — un selettore
 * generico "span" prenderebbe anche quello, ereditando "flex-grow:1" e
 * deformandolo in una pillola larga quanto l'header (verificato con
 * Playwright: 451px invece di 10px).
 */
.vbo-precheckin-adult-num > span:first-child {
	flex-grow: 1;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	color: var(--wp--preset--color--text);
}

.vbo-precheckin-guest-status {
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	border-radius: 100px;
	border: 1px solid var(--wp--preset--color--line);
	background: transparent;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

/*
 * Verde desaturato, stessa famiglia già usata per il badge "Confirmed"
 * in cima alla pagina (".vbo-booking-details-head-confirmed", "#4f6b4f"
 * su "rgba(91,122,91,...)"): non il terracotta dell'accent, che qui
 * indicherebbe un'azione/selezione invece di uno stato di completamento
 * riuscito. Fill pieno (non lo stesso "rgba" tenue del badge) perché a
 * 10px un riempimento trasparente non si distinguerebbe a colpo d'occhio
 * dal pallino vuoto.
 */
.vbo-precheckin-guest-status.is-complete {
	background: #5b7a5b;
	border-color: #4f6b4f;
}

.vbo-precheckin-guest-chevron {
	flex-shrink: 0;
	color: var(--wp--preset--color--text-soft);
	font-size: 12px;
	transition: transform 0.2s ease;
}

.vbo-precheckin-adult-wrap.is-collapsed .vbo-precheckin-guest-chevron {
	transform: rotate(-90deg);
}

/*
 * Corpo accordion — i campi restano nel DOM anche da collassato, nascosti
 * solo via "display:none": l'invio nativo del form li include comunque
 * (i browser inviano con FormData/submit i campi non visibili ma non
 * "disabled").
 */
.vbo-precheckin-adult-wrap.is-collapsed .vbo-precheckin-guest-fields {
	display: none;
}

/*
 * Griglia campi a due colonne — il nativo
 * (".vbo-precheckin-guest-fields", "display:flex; flex-wrap:wrap")
 * prevede già ".vbo-precheckin-guest-detail" al 50%
 * ("flex-basis:50%") ma con "padding:10px" e nessun
 * "box-sizing:border-box": il padding si somma al 50% invece di esserne
 * sottratto, due campi affiancati superano quindi il 100% della riga
 * disponibile (verificato con Playwright: 535px + 535px = 1070px contro
 * 1030px di contenitore, 40px di troppo — esattamente il padding
 * orizzontale dei due campi) e vanno sempre a capo uno sotto l'altro,
 * mai affiancati. Stesso schema già usato in ".vbcustomfields"
 * (oconfirm): gap fisso al posto del padding, box-sizing corretto.
 * Selettore allineato a quello nativo (stessa specificità) per vincere
 * in modo prevedibile.
 */
.vbo-precheckin-guest-fields {
	gap: 0 var(--wp--preset--spacing--6);
	padding: 0 var(--wp--preset--spacing--5) var(--wp--preset--spacing--5);
}

.vbo-precheckin-adult-wrap .vbo-precheckin-guest-detail {
	box-sizing: border-box;
	flex-basis: calc(50% - (var(--wp--preset--spacing--6) / 2));
	padding: 0;
	margin: var(--wp--preset--spacing--3) 0;
	border: 0;
}

@media (max-width: 767px) {
	.vbo-precheckin-adult-wrap .vbo-precheckin-guest-detail {
		flex-basis: 100%;
	}
}

/*
 * Label — il nativo le rende già in grassetto/colore testo
 * (".vbo-precheckin-adult-wrap .vbo-precheckin-guest-detail label"),
 * qui solo il font-family per allinearle al resto del tema (il nativo
 * non dichiara alcun font-family, resta quello di sistema).
 */
.vbo-precheckin-adult-wrap .vbo-precheckin-guest-detail label {
	font-family: var(--wp--preset--font-family--body);
}

/*
 * Select Country/Nationality/Gender — stesso trattamento già usato per
 * ".vbf-countryinp"/".vbf-stateinp" nella pagina Book (oconfirm): freccia
 * SVG terracotta al posto di quella nativa del browser, radius e font
 * del tema. Selettore generico sul contenitore campo (non sul singolo
 * "data-paxk") perché copre automaticamente anche "ID Type" nelle
 * installazioni dove il driver dei pax-fields lo rende come select
 * invece che come input di testo (dipende dalla configurazione del
 * plugin, non dal tema). Selettore allineato a quello nativo
 * (".vbo-precheckin-adult-wrap .vbo-precheckin-guest-detail select",
 * stessa specificità) per vincere in modo prevedibile.
 */
.vbo-precheckin-adult-wrap .vbo-precheckin-guest-detail select {
	height: 42px;
	padding: 0 var(--wp--preset--spacing--6) 0 var(--wp--preset--spacing--3);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--vik-radius);
	background-color: var(--wp--preset--color--white);
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath fill='%232C2C2C' d='M4 5 0 0h8z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--wp--preset--spacing--3) center;
	background-size: 8px 5px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 400;
	color: var(--wp--preset--color--text);
	cursor: pointer;
}

/*
 * Dropzone "Upload Documents" — ".vbo-paxfield-upload-wrapper" è privo
 * di qualunque stile nativo (verificato: solo il figlio
 * ".vbo-paxfield-upload-instructions" ha una regola propria, il
 * contenitore no), diventa quindi l'area dropzone vera e propria: bordo
 * tratteggiato, icona (JS, initPrecheckinDropzones()), intera area
 * cliccabile oltre al bottone "Add" nativo, stato ".is-dragover" durante
 * il drag. La logica di upload/estrazione MRZ resta quella nativa
 * (funzione globale "vboUploadDocuments()" definita inline dal
 * template): il drag&drop la richiama direttamente, non la duplica.
 */
.vbo-paxfield-upload-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
	padding: var(--wp--preset--spacing--6) var(--wp--preset--spacing--4);
	border: 1px dashed var(--wp--preset--color--line);
	border-radius: var(--vik-radius);
	background: var(--wp--preset--color--background-alt);
	text-align: center;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.vbo-paxfield-upload-wrapper.is-dragover {
	border-color: var(--wp--preset--color--accent);
	background: var(--vik-accent-08);
}

.vbo-precheckin-dropzone-icon {
	width: 32px;
	height: 32px;
	color: var(--wp--preset--color--accent);
	font-size: 28px;
}

.vbo-paxfield-upload-wrapper .vbo-paxfield-upload-instructions {
	max-width: 480px;
	margin-bottom: 0;
	font-size: var(--wp--preset--font-size--xs);
	font-style: normal;
	opacity: 1;
}

.vbo-paxfield-upload-instructions span {
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--text-soft);
	line-height: 1.5;
}

.vbo-paxfield-upload-instructions .fa-info-circle {
	margin-right: var(--wp--preset--spacing--1);
	color: var(--wp--preset--color--accent);
}

.vbo-paxfield-upload-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
}

.vbo-paxfield-upload-progress-wrap {
	width: 200px;
	max-width: 100%;
}

.vbo-paxfield-files {
	width: 100%;
}

.vbo-paxfield-file-uploaded {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--2);
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
	margin-top: var(--wp--preset--spacing--2);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--vik-radius);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--text);
	text-align: left;
	cursor: default;
}

/*
 * Bottone submit sticky — il nativo lo lascia nel normale flusso a fondo
 * pagina (nessuna posizione fissa): con più camere/ospiti resta fuori
 * vista per la maggior parte dello scroll. Il contenitore di ancoraggio
 * di "position:sticky" è il padding-box del genitore immediato (il
 * "<form>", che avvolge solo i contenuti effettivi della pagina): la
 * barra smette quindi di restare "attaccata" esattamente quando si esce
 * dal form, prima del footer, senza bisogno di calcolare alcun offset
 * via JS.
 */
.vbo-precheckin-submit {
	position: sticky;
	bottom: 0;
	z-index: 20;
	margin-top: var(--wp--preset--spacing--7);
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
	background: var(--wp--preset--color--white);
	border-top: 1px solid var(--wp--preset--color--line);
	border-radius: var(--vik-radius) var(--vik-radius) 0 0;
	box-shadow: 0 -8px 24px rgba(30, 30, 30, 0.08);
}

@media (max-width: 767px) {
	.vbo-precheckin-submit {
		padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
	}

	.vbo-precheckin-submit .btn {
		display: block;
		width: 100%;
		text-align: center;
		box-sizing: border-box;
	}
}

/* -----------------------------------------------------------
   Leave a Review (task=revstay) — form con 6 categorie di rating a
   stelle + messaggio libero, raggiunto dal link "Lascia una recensione"
   nella pagina Booking Details (wrapper
   ".vbo-booking-leavereview-wrap"). Pagina completamente non stilizzata
   in precedenza, stesso trattamento delle altre view del flusso.
   ----------------------------------------------------------- */

/*
 * Griglia categorie — il nativo usa flex-wrap con
 * ".vbo-booking-starrating-cont" al 23% di flex-basis: 4 card ci stanno
 * in una riga (23%*4 + margini ≈ 100%), le ultime 2 (su 6 totali)
 * restano isolate nella riga sotto, molto vuoto a destra. CSS grid a 3
 * colonne invece: 6 categorie si dividono in 2 righe piene, nessun
 * resto isolato. Selettore allineato a quello nativo (stessa
 * specificità) per vincere in modo prevedibile, coerente col resto del
 * file.
 */
.vbo-booking-leavereview-inner {
	box-shadow: none;
}
.vbo-booking-review-message {
	margin-top: var(--wp--preset--spacing--6);
}
.vbo-booking-starrating-wrap {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--6) var(--wp--preset--spacing--5);
}

.vbo-booking-starrating-wrap .vbo-booking-starrating-cont {
	margin: 0;
}

@media (max-width: 767px) {
	.vbo-booking-starrating-wrap {
		grid-template-columns: repeat(2, 1fr);
	}
}

.vbo-booking-starrating-wrap .vbo-booking-review-servicename {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--text);
	margin-bottom: var(--wp--preset--spacing--2);
}

/*
 * Stelle — fuori palette nel nativo (arancione pieno,
 * "var(--vbo-orange-color)"): terracotta per lo stato
 * pieno/selezionato/hover, outline neutro per lo stato vuoto.
 * FontAwesome espone lo stesso glifo stella "fa-star" in due pesi sotto
 * la stessa famiglia ("Font Awesome 7 Free", verificato con Playwright:
 * ".far"/".fas" condividono la stessa regola base con
 * "font-weight:var(--fa-style,900)"): passare "font-weight" da 900 a
 * 400 basta per ottenere il contorno "regular" senza toccare le classi
 * nel markup, che resta "fas fa-star" in entrambi i casi. Selettore
 * allineato a quello nativo (stessa specificità) per vincere in modo
 * prevedibile.
 */
.vbo-booking-starrating-wrap .vbo-booking-starrating-stars .vbo-review-star {
	font-weight: 400;
	color: var(--wp--preset--color--line);
	cursor: pointer;
	transition: color 0.15s ease;
}

.vbo-booking-starrating-wrap .vbo-booking-starrating-stars .vbo-review-star-full,
.vbo-booking-starrating-wrap .vbo-booking-starrating-stars .vbo-review-star-hover {
	font-weight: 900;
	color: var(--wp--preset--color--accent);
}

/*
 * Media riassuntiva — non esiste nel nativo, costruita da JS
 * (initRevstayAverage() in vikbooking-dom.js) sopra la griglia delle 6
 * categorie, aggiornata al click reale su una stella (vedi commento
 * nel JS sul perché non durante il semplice hover). Numero in
 * Cormorant: "font-variant-numeric: lining-nums" per lo stesso motivo
 * già applicato ai prezzi/totali del tema (le cifre oldstyle di
 * Cormorant Garamond altrimenti "ballano" rispetto al resto del testo).
 */
.vbo-revstay-average {
	display: inline-flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--2);
	margin-bottom: var(--wp--preset--spacing--5);
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
	background: var(--wp--preset--color--background-alt);
	border-radius: var(--vik-radius);
}

.vbo-revstay-average-value {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 500;
	color: var(--wp--preset--color--accent);
	font-variant-numeric: lining-nums;
}

.vbo-revstay-average-outof {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--text-soft);
}

.vbo-revstay-average-label {
	align-self: center;
	margin-left: var(--wp--preset--spacing--2);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--text-soft);
}

/*
 * Textarea — il nativo non dichiara alcun bordo/radius (resta quello
 * del browser): stesso trattamento già usato per gli altri campi testo
 * del tema, bordo 1px, radius 2px, focus in accent.
 */
.vbo-booking-review-message textarea {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--vik-radius);
	padding: var(--wp--preset--spacing--3);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--text);
	box-sizing: border-box;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.vbo-booking-review-message textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 3px var(--vik-accent-15);
}

/*
 * Disclaimer privacy — stesso trattamento già applicato al disclaimer
 * della pagina Pre Check-in (icona info + nota tenue su sfondo
 * background-alt): icona inserita da JS
 * (initRevstayDisclaimer()) perché il nativo è testo semplice senza
 * wrapper per un'icona.
 */
.vbo-booking-review-message-privacy {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--2);
	margin-top: var(--wp--preset--spacing--3);
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
	background: var(--wp--preset--color--background-alt);
	border-radius: var(--vik-radius);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--text-soft);
	line-height: 1.5;
}

.vbo-revstay-disclaimer-icon {
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--sm);
}

/*
 * Bottoni — "Submit review" eredita già lo stile pieno condiviso
 * (".vbo-pref-color-btn", cima del file). "Cancel" usa
 * ".vbo-pref-color-btn-secondary", mai ridefinita finora da questo
 * file: il nativo la fa dipendere da "var(--vbo-pref-bgcolorhov)", una
 * custom property impostata lato admin (VikBooking → Preferenze) — qui
 * vale blu ("#1890ce", verificato con Playwright: l'inline <style> con
 * la configurazione admin viene stampato DOPO questo foglio in <head>,
 * quindi vince sulla ridefinizione in ":root" più sopra, che perciò
 * resta senza effetto per questa classe). ".vbo-pref-color-btn"
 * (Submit) non soffre dello stesso problema solo perché è già
 * esplicitamente ridefinita con i token del tema in cima al file
 * (bypassando del tutto la custom property, non correggendola): stesso
 * trattamento qui per "Cancel", ma come outline (stile già usato per
 * "Back" in oconfirm, ".vboconfirmbottom .vbo-goback-link") invece che
 * pieno, per la gerarchia primario/secondario richiesta. Stesso
 * padding/font-size di ".vbo-pref-color-btn" cima file, cosicché i due
 * bottoni risultino della stessa altezza.
 */
.vbo-booking-review-cmds a.vbo-pref-color-btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--vik-radius);
	background: transparent;
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: none;
	box-sizing: border-box;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.vbo-booking-review-cmds a.vbo-pref-color-btn-secondary:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.vbo-booking-review-cmds {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
}

@media (max-width: 767px) {
	.vbo-booking-review-cmds {
		flex-direction: column-reverse;
	}

	.vbo-booking-review-cmds .vbo-booking-review-cmd,
	.vbo-booking-review-cmds .vbo-booking-review-cmd a,
	.vbo-booking-review-cmds .vbo-booking-review-cmd button {
		width: 100%;
		box-sizing: border-box;
	}

	.vbo-booking-review-cmds .vbo-booking-review-cmd a {
		text-align: center;
	}
}

/* -----------------------------------------------------------
   Modal "Filters" (search results — default_filters.php aperto in
   overlay da default_classic.php via VBOCore.displayModal()).
   Manipolazione DOM correlata: initSearchResultsFiltersModal() in
   vikbooking-dom.js (link "Reimposta tutto" + tooltip valore slider).
   ----------------------------------------------------------- */

/*
 * Slider "Price range" — stesso problema di cascata già documentato più
 * sopra per ".vbo-booking-review-cmds a.vbo-pref-color-btn-secondary":
 * l'inline <style> con "--vbo-pref-bgcolor" (colore blu di default
 * configurato in Vik Booking → Configurazione) viene stampato DOPO
 * questo foglio in <head>, quindi vince sulla ridefinizione in ":root"
 * in cima al file. Bypassiamo la custom property e coloriamo track e
 * thumb direttamente con il token del tema. Il "!important" sulla track
 * è necessario solo lì perché il nativo lo applica già sulla stessa
 * proprietà (".vbo-pref-background { background: var(--vbo-pref-bgcolor)
 * !important }"), il thumb non ne ha bisogno.
 */
.vbo-search-results-filter-price-range .vbo-dual-slider-track {
	background: var(--wp--preset--color--accent) !important;
}
.vbo-search-results-filter-price-range input[type="range"]::-webkit-slider-thumb,
.vbo-search-results-filter-price-range input[type="range"]::-moz-range-thumb {
	background: var(--wp--preset--color--accent);
}

/*
 * Spazio per il tooltip di drag (.vbo-dual-slider-tooltip, 22px +
 * 10px di margine): il gap nativo fra l'h4 "Price range" e lo slider è
 * solo 12px (".vbo-results-filters-group h4 { margin-bottom: 12px }"),
 * non basta a contenere il tooltip senza sovrapporsi al titolo
 * (verificato con Playwright: testo "Price range" e tooltip a distanza
 * di pochi pixel).
 */
.vbo-search-results-filter-price-range .vbo-dual-slider-wrap {
	margin-top: 24px;
}

/*
 * piccolo tooltip che segue il thumb durante il drag (vikbooking-dom.js,
 * decoratePriceTooltip()): il valore letto solo nel testo statico sotto
 * lo slider è scomodo da seguire mentre si trascina.
 *
 * Colore: "--wp--preset--color--text" (usata nel resto del file) risulta
 * vuota su skin-terra — il child theme ha rinominato lo slug palette in
 * "ink" (theme.json) senza mantenere "text", quindi la custom property
 * non esiste più su questo sito e la regola risulterebbe invalida
 * (sfondo trasparente, verificato con Playwright: testo bianco invisibile
 * su sfondo trasparente). "ink" è il token realmente presente qui.
 */
.vbo-dual-slider-tooltip {
	position: absolute;
	bottom: 100%;
	margin-bottom: 10px;
	transform: translateX(-50%);
	background: var(--wp--preset--color--ink, #1e1e1e);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1;
	white-space: nowrap;
	padding: 5px 8px;
	border-radius: var(--vik-radius);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
}
.vbo-dual-slider-tooltip.is-visible {
	opacity: 1;
}
.vbo-dual-slider-tooltip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 4px solid transparent;
	border-top-color: var(--wp--preset--color--ink, #1e1e1e);
}

/*
 * Pill amenity/category selezionata — il nativo (vikbooking_styles.css,
 * "input:checked + .vbo-results-filter-entry-name") lascia lo sfondo
 * bianco e aggiunge solo un secondo bordo via ":after", stato selezionato
 * troppo debole. Pill piena, stessa logica di stato attivo già in uso
 * altrove nel tema (es. ".vbo-results-style-option-active"). Selettore
 * con una classe wrapper in più del nativo (0,5,1 contro 0,4,1) per
 * vincere per specificità, indipendente dall'ordine di caricamento dei
 * due fogli.
 */
.vbo-modal-sticky-head .vbo-modal-overlay-content-head {
	box-sizing: border-box;
}
#vbo-results-filters-form > div:first-of-type h4 {
	margin-top: 0;
}
.vbo-results-filter-entries .vbo-results-filter-entry .vbo-results-filter-entry-name {
	min-height: auto;
}
.vbo-results-filters-form-wrapper .vbo-results-filter-entries .vbo-results-filter-entry input:checked + .vbo-results-filter-entry-name {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
}
.vbo-results-filters-form-wrapper .vbo-results-filter-entries .vbo-results-filter-entry input:checked + .vbo-results-filter-entry-name:hover {
	background: var(--wp--preset--color--accent-dark);
	border-color: var(--wp--preset--color--accent-dark);
}
.vbo-results-filters-form-wrapper .vbo-results-filter-entry input:checked + .vbo-results-filter-entry-name:after {
	/* doppio bordo non più necessario: la pill piena è già distinguibile */
	display: none;
}

/* Backdrop — le due classi insieme (0,2,0) battono la ".vbo-modal-
   overlay-block" nativa (0,1,0) a prescindere dall'ordine dei fogli. */
.vbo-modal-overlay-block.vbo-modal-overlay-search-results-filters-modal {
	background-color: rgba(0, 0, 0, 0.45);
}

/*
 * Footer (Cancel/Apply) tagliato a destra a certe larghezze: la regola
 * nativa ".vbo-modal-overlay-content-footer" ha "width:100%" +
 * "padding:16px 24px" ma box-sizing "content-box" (default), quindi la
 * larghezza resa è 100% + 48px di padding — 24px oltre il bordo destro
 * del modal. "border-box" riporta il footer dentro i suoi confini a
 * qualunque larghezza.
 */
.vbo-modal-overlay-content-search-results-filters-modal .vbo-modal-overlay-content-footer {
	box-sizing: border-box;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
}

/* Link "Reimposta tutto" (vikbooking-dom.js, decorateFooter()) accanto a
   "Cancel": testo secondario, non un altro bottone pieno/outline, per
   restare distinguibile dalla gerarchia primario (Apply) / secondario
   (Cancel) già presente. */
.vbo-modal-overlay-content-search-results-filters-modal .vbo-modal-overlay-content-footer-left {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--4);
}
.vbo-modal-overlay-content-search-results-filters-modal .vbo-results-filters-reset {
	background: none;
	border: none;
	padding: 0;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--text-soft);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.vbo-modal-overlay-content-search-results-filters-modal .vbo-results-filters-reset:hover {
	color: var(--wp--preset--color--accent);
}

/* -----------------------------------------------------------
   Room Details aperta dai risultati di ricerca (iframe fancybox,
   view=searchdetails, site/views/searchdetails/tmpl/default.php).
   Manipolazione DOM correlata: initSearchDetailsPriceLabel() in
   vikbooking-dom.js (etichetta sul totale).
   ----------------------------------------------------------- */

/*
 * Badge "N Nights" — stesso problema di cascata già documentato più
 * sopra (".vbo-search-results-filter-price-range", ".vbo-booking-review-
 * cmds a.vbo-pref-color-btn-secondary"): ".vbo-pref-color-element" dipende
 * da "--vbo-pref-bgcolor", che qui vale il blu di default del plugin.
 * Bypassiamo la custom property con i token del tema. Una classe in più
 * del nativo (0,2,0 contro 0,1,0) per vincere per specificità,
 * indipendente dall'ordine di caricamento dei due fogli.
 */
.vbsrchdetpriceboxinner .vbroomnumnightsdet {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
}

/* Etichetta sul totale (initSearchDetailsPriceLabel()): stesso
   trattamento tipografico già in uso per le didascalie minori
   (".vbliststartfrom"). */
.vbo-searchdet-total-label {
	display: block;
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--xs);
	margin-bottom: var(--wp--preset--spacing--1);
}

/*
 * Frecce navigazione galleria foto — native (vik-dots-slider.css) con
 * "opacity:0" di base, visibili solo in hover del container
 * (".vik-dots-slider-inner:hover"): su touch (niente hover) restano
 * scoperte di default, ed è comunque un affordance debole anche col
 * mouse. Sempre visibili, ma con sfondo più trasparente (0.75 invece di
 * 0.9) a riposo per restare discrete — l'hover nativo le porta già a
 * pieno bianco + ombra, nessuna modifica necessaria lì.
 */
.vbo-searchdet-gallery-container .vik-dots-slider-navbuttons {
	opacity: 1;
}
.vbo-searchdet-gallery-container .vik-dots-slider-navbuttons > span {
	background: rgba(255, 255, 255, 0.75);
}

/* -----------------------------------------------------------
   Search Results — stato "Selected" (bordo card + bottone). Bordo:
   nativo ".vbo-searchresults-classic-wrap .room_item.room_selected"
   (vikbooking_styles.css) usa "var(--vbo-green-color)" ("#52aa20", verde
   saturo — famiglia diversa dal verde desaturato già in uso nel tema per
   gli stessi stati di completamento, vedi ".vbo-booking-details-head-
   confirmed" e ".vbo-precheckin-guest-status.is-complete" più sopra in
   questo file): nessun secondo verde di sistema nella palette, stesso
   tono qui. Bottone: il nativo cambia solo il testo ("Select" →
   "Selected", via innerHTML in vbSelectRoom()) lasciandolo altrimenti
   identico — pieno terracotta indistinguibile dall'azione primaria
   "Select" delle altre card, e non ovvio se sia ancora cliccabile per
   deselezionare. Outline con lo stesso verde del bordo card (stato di
   completamento raggiunto, non più l'azione da compiere) + spunta via
   "::before": il testo del bottone è puro innerHTML sostituito dal
   nativo a ogni click, un'icona iniettata via JS verrebbe cancellata al
   giro successivo, "::before" sopravvive perché non fa parte
   dell'innerHTML.
   ----------------------------------------------------------- */
.vbo-searchresults-classic-wrap .room_item.room_selected {
	border-color: #4f6b4f;
}

.room_item.room_selected .vbselectordiv .btn {
	background-color: transparent;
	border-color: #4f6b4f;
	color: #4f6b4f;
}

.room_item.room_selected .vbselectordiv .btn:hover {
	background-color: transparent;
	border-color: #4f6b4f;
	color: #4f6b4f;
}

.room_item.room_selected .vbselectordiv .btn::before {
	content: "\2713";
	margin-right: var(--wp--preset--spacing--1);
	font-weight: 700;
}

/* -----------------------------------------------------------
   Modal "Room Selected" (ricerca multi-camera, "#vbdialog-overlay" nel
   markup nativo — site/views/search/tmpl/default.php, mai overridata
   finora da questo file). Manipolazione DOM correlata:
   initSearchResultsRoomDialog() in vikbooking-dom.js (riferimento
   "Room N", mini-recap prezzo/notti).
   ----------------------------------------------------------- */

/*
 * Layout: nativo a due colonne affiancate (foto 40% sinistra, testo 58%
 * destra, quest'ultima centrata verticalmente con un position:relative +
 * transform "a occhio") lasciava una fascia vuota consistente al centro,
 * a qualunque contenuto (verificato con Playwright). Colonna singola —
 * foto a piena larghezza sopra, contenuto sotto — elimina lo spazio
 * morto e dimezza l'altezza necessaria: il contenuto minimo (spunta,
 * intro, nome, bottoni) sta cosi entro "max-height" senza scroll, che
 * resta "overflow-y:auto" solo come rete di sicurezza per nomi camera
 * lunghi su viewport molto bassi, non come stato di default.
 */
.vbdialog-inner {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: min(420px, 92vw);
	height: auto;
	min-height: 0;
	max-height: 90vh;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	overflow-y: auto;
	padding: 0;
	border-radius: var(--vik-radius);
}

.vbdialog-left,
.vbdialog-right {
	display: block;
	width: 100%;
	vertical-align: initial;
}

.vbdialog-left {
	line-height: 0; /* rimuove lo spazio bianco sotto l'immagine (nativo inline-block) */
}

#vbdialogrimage, .vbdialog-left #vbdialogrimage {
	width: 100%;
	max-width: none;
	height: 200px;
	max-height: none;
	margin: 0;
	object-fit: cover;
}

/*
 * ".vbdialog-right" nativo è "position:relative" solo per ancorare
 * ":after" (spunta, sotto): qui resta il punto di aggancio, ma la spunta
 * si sposta sulla giunzione foto/contenuto invece che sul bordo
 * superiore del solo blocco destro (residuo del layout a due colonne).
 */
.vbdialog-right {
	position: relative;
	top: auto;
	text-align: center;
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--5) var(--wp--preset--spacing--6) var(--wp--preset--spacing--6);
	transform: none;
}

/*
 * Spunta di conferma — nativo ".vbdialog-right:after" usa
 * "var(--vbo-green-color)" (site/resources/vikbooking_styles.css, "#52aa20":
 * verde saturo, stesso problema di un secondo verde di sistema già
 * risolto sopra per il bordo della card selezionata). Stesso tono qui.
 */
.vbdialog-right:after {
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #5b7a5b;
	border-color: var(--wp--preset--color--white);
	width: 40px;
	height: 40px;
	line-height: 40px;
	font-size: 17px;
}

.vbdialog-right-top {
	margin-bottom: var(--wp--preset--spacing--4);
	margin-top: var(--wp--preset--spacing--4);
}

.vbdialog-intro {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-soft);
}

.vbdialogrname {
	display: block;
	margin: var(--wp--preset--spacing--1) 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	color: var(--wp--preset--color--text);
}

/*
 * Riferimento al gruppo "Room N" (initSearchResultsRoomDialog(),
 * vikbooking-dom.js) — critico nel flusso multi-camera: la stessa camera
 * può comparire selezionabile in più gruppi "Room N" contemporaneamente,
 * senza questo riferimento la modal da sola non specifica per quale
 * gruppo si sta confermando la selezione.
 */
.vbdialog-roomslot {
	margin: var(--wp--preset--spacing--2) 0 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--text-soft);
}

/*
 * Mini-recap prezzo/notti (initSearchResultsRoomDialog()) — sola lettura,
 * stessi dati già visibili nella card e nell'intestazione ricerca,
 * duplicati qui perché la conferma avvenga con l'importo sotto gli occhi.
 */
.vbdialog-recap {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: var(--wp--preset--spacing--2);
	margin: 0 0 var(--wp--preset--spacing--4);
	padding-top: var(--wp--preset--spacing--3);
	border-top: 1px solid var(--wp--preset--color--line);
}

.vbdialog-recap-price {
	font-family: var(--wp--preset--font-family--display);
	font-variant-numeric: lining-nums;
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--accent);
}

.vbdialog-recap-nights {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--text-soft);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.vbdialog-right-bottom {
	display: flex;
	gap: var(--wp--preset--spacing--3);
	margin: 0;
}

.vbdialog-right-bottom .vbo-pref-color-btn,
.vbdialog-right-bottom .vbo-pref-color-btn-secondary {
	flex: 1 1 0;
	box-sizing: border-box;
	text-align: center;
}

/*
 * "Cancel" — stesso problema di cascata già documentato più sopra per
 * ".vbo-booking-review-cmds a.vbo-pref-color-btn-secondary": la classe
 * nativa ".vbo-pref-color-btn-secondary" dipende da "var(--vbo-pref-
 * bgcolorhov)", blu di default lato admin, stampato dopo questo foglio.
 * Stesso trattamento qui — outline, non il bypass di "Continue"
 * (".vbo-pref-color-btn", già pieno terracotta da regola condivisa cima
 * file) — per la gerarchia primario/secondario tra i due bottoni.
 */
#vbdialog-cancel.vbo-pref-color-btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--vik-radius);
	background: transparent;
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--sm);
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}

#vbdialog-cancel.vbo-pref-color-btn-secondary:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
	background: transparent;
}

@media (max-width: 480px) {
	.vbdialog-right-bottom {
		flex-direction: column-reverse;
	}
}

/* -----------------------------------------------------------
   Promotions — shortcode [vikbooking view="promotions" ...]

   Prezzo e capienza per camera sono iniettati server-side da inc/
   vikbooking-promotions-price.php (il template nativo non espone né
   l'uno né l'altro in questa vista, vedi header del file PHP per il
   dettaglio) — qui solo lo styling. Le amenities non compaiono: nessuna
   fonte dati per-camera affidabile nel plugin (stessa conclusione già
   documentata in inc/vikbooking-rooms-reorg.php per Rooms List), niente
   markup/CSS dedicata per questo giro.

   Redesign su mockup Claude Design finale: sezioni a piena larghezza a
   sfondo alternato (non più card bordate), sostituisce l'impostazione
   del giro precedente — vedi i singoli commenti sotto per cosa è
   cambiato e perché.
   ----------------------------------------------------------- */

/*
 * Icona via CSS mask (stesso pattern di "--vbo-icon-tag"/"--vbo-icon-ban"
 * più sopra in questo file): un solo elemento colorabile via
 * "background-color", nessun SVG inline da generare lato PHP. Usata solo
 * per l'icona capienza (".vbo-promotion-room-capacity-icon", icona
 * persona) — puramente decorativa, il dato reale è nel testo accanto. Il
 * segnaposto "nessuna foto" del giro precedente (icona casa) è stato
 * rimosso: il nuovo mockup lo vuole un tono piatto, senza icona (vedi
 * ".vbo-promotion-room-img:empty" più sotto).
 */
.vbo-promotion-room-capacity-icon {
	content: "";
	display: block;
	flex-shrink: 0;
	background-color: var(--wp--preset--color--text-soft);
	width: 14px;
	height: 14px;
	-webkit-mask: var(--vbo-icon-user) center / contain no-repeat;
	mask: var(--vbo-icon-user) center / contain no-repeat;
	--vbo-icon-user: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

.vbo-promotion-block {
	align-items: center;
}

/*
 * Contenitore blocco promozione — non più una card bordata (giro
 * precedente): ora una sezione a PIENA LARGHEZZA VIEWPORT, sfondo
 * alternato tra un blocco e l'altro (":nth-child"), a dare peso alla
 * pagina invece di un box stretto. ".vb-shortcode-wrap" (più sopra in
 * questo file) vincola l'intero output dello shortcode a
 * "var(--wp--style--global--content-size)" con padding proprio — per
 * uscirne fino ai bordi del viewport da qui dentro serve lo stesso
 * "breakout" già usato nativamente da WordPress per i blocchi Group
 * "alignfull" in un contenitore constrained ("width:100vw; margin-
 * left/right:calc(50% - 50vw)"), applicato qui a mano perché
 * ".vbo-promotion-details" non è un blocco Gutenberg.
 *
 * Il contenuto interno (titolo/descrizione, header date, griglia camere)
 * resta allineato al resto della pagina tramite ".vbo-promotion-det-
 * wrapper"/".vbo-promotion-wrapper" sotto, che re-impongono loro la
 * stessa larghezza massima e lo stesso padding orizzontale di
 * ".vb-shortcode-wrap" (persi qui con il breakout) — stesso principio
 * "section-head dentro il container con max-width" già documentato in
 * CLAUDE.md per le sezioni allineate a sinistra.
 */
/*
 * "display:block", "margin-top/bottom:0", "border-bottom:none",
 * "padding-left/right:0" espliciti: il nativo (vikbooking_styles.css)
 * porta di suo ".vbo-promotion-details{display:inline-block;margin:10px
 * 0;padding:0 0 30px;border-bottom:1px solid var(--vbo-light-border-
 * color)}" — un margin-top/bottom nativo qui avrebbe lasciato uno
 * spazio FUORI dallo sfondo dipinto (il margin non è mai coperto dal
 * "background"), e il border-bottom nativo si sarebbe sommato al filo
 * separatore già gestito da ".vbo-promotion-details + .vbo-promotion-
 * details" sotto, con rischio di doppia linea o di un bordo residuo dopo
 * l'ultimo blocco. Stesso trattamento "non fidarsi di quanto non è
 * esplicitamente sovrascritto" già applicato più sopra dopo la
 * segnalazione sul background di ".vbo-promotion-dates".
 */
.vbo-promotion-details {
	box-sizing: border-box;
	display: block;
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	padding: var(--vik-section-space-y-compact) 0;
	border-bottom: none;
	background: var(--wp--preset--color--background);
}

.vbo-promotion-details:nth-child(even) {
	background: var(--wp--preset--color--background-alt);
}

/*
 * Separazione tra blocchi promo multipli: il solo cambio di sfondo (sopra)
 * non basta a segnalare chiaramente il passaggio da un blocco all'altro
 * — filo sottile sul bordo superiore di ogni blocco tranne il primo
 * (selettore "+", non serve escludere il primo esplicitamente).
 */
.vbo-promotion-details + .vbo-promotion-details {
	border-top: 1px solid var(--wp--preset--color--line);
}

/*
 * "float:none" esplicito — bug trovato con Playwright dopo segnalazione:
 * il nativo (vikbooking_styles.css) porta di suo ".vbo-promotion-det-
 * wrapper{float:left;width:25%}" e ".vbo-promotion-wrapper{float:left;
 * width:75%}" (era in origine un layout a due colonne affiancate). La
 * MIA "width:100%" vince già sulla proprietà "width" (stessa
 * specificità, questo foglio carica dopo), ma "float:left" non era mai
 * stato toccato — restava attivo. Un elemento float NON viene mai
 * centrato da "margin:auto" (regola CSS di base, indipendente da
 * quanto sia largo l'elemento): risultato, il blocco restava incollato
 * a sinistra con tutto lo spazio extra spinto a destra invece di
 * dividersi equamente — verificato a 1920px, "margin-right" risultante
 * 720px contro "margin-left" 0px. "float:none" restituisce l'elemento al
 * normale flusso a blocco, dove "margin:auto" centra davvero.
 */
.vbo-promotion-det-wrapper,
.vbo-promotion-wrapper {
	display: grid;
	box-sizing: border-box;
	float: none;
	width: 100%;
	max-width: var(--wp--style--global--content-size, 1200px);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--wp--preset--spacing--5);
	padding-right: var(--wp--preset--spacing--5);
}

@media (min-width: 768px) {
	.vbo-promotion-det-wrapper,
	.vbo-promotion-wrapper {
		padding-left: var(--wp--preset--spacing--6);
		padding-right: var(--wp--preset--spacing--6);
	}
}

@media (min-width: 1024px) {
	.vbo-promotion-det-wrapper,
	.vbo-promotion-wrapper {
		padding-left: var(--wp--preset--spacing--8);
		padding-right: var(--wp--preset--spacing--8);
	}
}

/*
 * Titolo + badge sulla stessa riga, descrizione sotto a piena larghezza
 * — CSS Grid esplicito, non flex-wrap (tentativo precedente): con flex
 * "align-items:baseline" allineava il badge alla baseline del TESTO del
 * titolo, visivamente sbilanciato per una pillola non testuale (nessun
 * "carattere" da allineare a baseline) contro un titolo Cormorant grande
 * — e "flex-wrap" con "flex-basis:100%" sulla descrizione lega comunque
 * l'altezza della riga 1 anche a eventuali altri elementi della stessa
 * riga flex. Il grid esplicito sotto assegna titolo e badge alla STESSA
 * riga di griglia (riga 1) e la descrizione a una riga propria (riga 2,
 * "grid-column:1/-1"): "align-items:center" centra il badge rispetto
 * all'altezza della sola riga 1 (= altezza del titolo), indipendente
 * dalla descrizione — il posizionamento esplicito per riga/colonna non
 * dipende dall'ordine reale nel DOM (nome, poi badge spostato via JS,
 * poi descrizione), quindi il badge resta in riga 1 ovunque JS lo inserisca.
 *
 * "padding-right/align-self" azzerati esplicitamente: nativi
 * (".vbo-promotion-name{padding:0 25px 10px 0}", ".vbo-promotion-
 * description{padding:0 25px 0 0;align-self:center}") pensati per il
 * vecchio layout a due colonne (25%/75%, vedi nota su ".vbo-promotion-
 * det-wrapper,.vbo-promotion-wrapper" più sopra) — stesso trattamento
 * "non fidarsi di quanto non è esplicitamente sovrascritto" di questo
 * giro di correzioni.
 */
.vbo-promotion-det-wrapper {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	column-gap: var(--wp--preset--spacing--5);
	row-gap: var(--wp--preset--spacing--2);
	padding-top: 0;
	padding-bottom: var(--wp--preset--spacing--5);
}

.vbo-promotion-name {
	grid-column: 1;
	grid-row: 1;
	padding: 0;
	min-width: 0;
}

.vbo-promotion-name h4 {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 500;
}

.vbo-promotion-description {
	grid-column: 1 / -1;
	grid-row: 2;
	padding: 0;
	margin: 0;
	align-self: auto;
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--sm);
}

/*
 * Header date — non più una fascia a sfondo pieno (giro precedente): solo
 * un filo superiore, a segnare il passaggio da titolo/descrizione senza
 * introdurre un altro blocco di colore dentro la sezione. "width:100%;
 * box-sizing:border-box" esplicito, non lasciato al default "riempi il
 * blocco" di un flex-container di livello blocco: verificato con
 * Playwright a 390px (giro precedente, stesso elemento) che senza
 * questa dichiarazione esplicita l'elemento si rendeva più largo del suo
 * stesso genitore, contenuto tagliato dal bordo del viewport — stessa
 * famiglia di quirk di ".vbo-promotion-room-block" più sotto in questo
 * file, stessa soluzione.
 *
 * "background: transparent" e "margin: 0" espliciti — bug trovato con
 * Playwright dopo segnalazione: il nativo (site/resources/vikbooking_
 * styles.css) porta di suo ".vbo-promotion-dates{background:var(--vbo-
 * light-grey-bg-color);margin-bottom:8px}" (il "grigio piatto" della
 * versione pre-redesign). Rimuovere la MIA dichiarazione "background:
 * background-alt" del giro precedente non basta ad annullare QUELLA del
 * plugin, che resta sotto e vince non essendo mai stata sovrascritta —
 * qui esplicitata per la prima volta, non solo tolta.
 */
.vbo-promotion-dates {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--5);
	padding-top: var(--wp--preset--spacing--4);
	padding-bottom: var(--wp--preset--spacing--5);
	background: transparent;
	border-top: 1px solid var(--wp--preset--color--line);
}

.vbo-promotion-dates-left {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--7);
}

.vbo-promotion-date-from,
.vbo-promotion-date-to {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.vbo-promotion-date-label {
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--text-soft);
}

.vbo-promotion-date-from-sp,
.vbo-promotion-date-to-sp {
	font-weight: 600;
}

/*
 * "Valid until" — non più un chip pieno scuro (giro precedente): solo
 * testo colorato accent, stessa struttura label-sopra/valore-sotto di
 * From/To, per restare due dati ben distinti tipograficamente pur con
 * trattamento cromatico diverso. Arriva nativo con classe ".vbo-pref-
 * color-element" (rete di sicurezza "Preferred Colors" più sopra in
 * questo file, che imposterebbe sfondo pieno + testo bianco) — qui
 * neutralizzato lo sfondo e portato il colore sul testo stesso (2 classi
 * contro 1: vince per specificità, nessun "!important" necessario).
 * L'icona nativa "<i class="fas fa-clock">" (accanto al chip nel giro
 * precedente) non compare nel nuovo mockup: nascosta.
 */
.vbo-promotion-dates-right {
	display: flex;
	align-items: center;
}

.vbo-promotion-dates-right.vbo-pref-color-element {
	background: transparent;
	color: var(--wp--preset--color--accent);
}

.vbo-promotion-dates-right > i {
	display: none;
}

.vbo-promotion-date-validuntil {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.vbo-promotion-dates-right .vbo-promotion-date-label {
	color: inherit;
}

.vbo-promotion-date-validuntil span:last-child {
	font-weight: 600;
	color: inherit;
}

/*
 * Badge sconto (percentuale o importo fisso, solo "type"==2 — vedi header
 * di inc/vikbooking-promotions-price.php): pillola outline terracotta,
 * spostata via JS accanto al titolo (vedi ".vbo-promotion-det-wrapper"
 * sopra). Colore/bordo già forzati "!important" dalla classe nativa
 * ".vbo-pref-bordertext" (rete di sicurezza sopra) — qui solo forma e
 * spaziatura, nessuna proprietà di colore da ripetere.
 */
.vbo-promotion-discount {
	grid-column: 2;
	grid-row: 1;
}

.vbo-promotion-discount-details {
	display: inline-flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--1);
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
	border-width: 1px;
	border-style: solid;
	border-radius: 100px;
	white-space: nowrap;
}

.vbo-promotion-discount-percent-amount {
	font-weight: 600;
}

.vbo-promotion-discount-percent-txt {
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.vbo-promotion-bottom-block {
	box-sizing: border-box;
	padding: 0;
	border: 0;
}

/*
 * Tutte le cifre della fascia header (date, "Valid until", percentuale
 * sconto) più quelle già iniettate nella card (prezzo, capienza): stesso
 * fix "lining-nums" per Cormorant Garamond/Inter già motivato più sotto
 * per il prezzo — qui esteso a ogni cifra della vista Promotions, non
 * solo al prezzo.
 */
.vbo-promotion-date-from-sp,
.vbo-promotion-date-to-sp,
.vbo-promotion-date-validuntil span,
.vbo-promotion-discount-percent-amount,
.vbo-promotion-room-price .vbo-promotion-room-price-base,
.vbo-promotion-room-price .vbo-promotion-room-price-discounted,
.vbo-promotion-room-capacity-value {
	font-variant-numeric: lining-nums;
}

/*
 * Griglia camere — CSS Grid a colonne fisse, non flex-basis calcolata.
 * Prima tentativo: flex-wrap con "flex:0 1 calc((100% - N*gap)/colonne)"
 * per card sempre alla stessa larghezza piena o riga incompleta che sia
 * (stessa filosofia del fix Search Results multi-camera, ".room_item" —
 * ma quello risolveva un problema diverso: lì erano CONTENITORI GRID
 * separati, uno per gruppo "Room N", che si stiravano l'uno rispetto
 * all'altro dentro un flex-wrap ESTERNO, non le card dentro un singolo
 * gruppo). Scartato dopo verifica con Playwright: a parità di calcolo
 * "esatto" (0 margine di sicurezza tra 4 card + 3 gap e la larghezza
 * disponibile), un arrotondamento sub-pixel del browser faceva scattare
 * il wrap a 3 colonne invece di 4, nonostante flex-basis calcolasse
 * correttamente. Un grid nativo "repeat(4, minmax(0,1fr))" non ha questa
 * fragilità (le tracce sono decise dal motore di layout, non da un calc()
 * al limite) ED è già di per sé corretto per righe incomplete: le tracce
 * di colonna sono condivise da TUTTE le righe, quindi un'ultima riga da 3
 * elementi su 4 colonne (7 camere, come nel mockup) occupa semplicemente
 * le prime 3 tracce e lascia vuota la 4ª — nessuno stiramento, stessa
 * "tecnica ':has(:nth-child(N):nth-last-child(1))'" di Search Results non
 * necessaria qui (quel problema, dei contenitori separati, non esiste in
 * un grid condiviso).
 */
/*
 * Nessun padding orizzontale qui: lo dà già ".vbo-promotion-wrapper"
 * sopra (stesso wrapper che contiene anche ".vbo-promotion-dates"), che
 * ora fa anche da limite di larghezza per l'intera sezione dopo il
 * breakout a piena larghezza di ".vbo-promotion-details".
 */
.vbo-promotion-rooms-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--vik-grid-gap);
	margin-top: var(--wp--preset--spacing--6);
}

@media (min-width: 768px) {
	.vbo-promotion-rooms-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.vbo-promotion-rooms-list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/*
 * Card camera: bordo/arrotondamento condiviso col resto del sistema
 * (".vbo-promotion-details" sopra, "--vik-radius" ovunque nel tema),
 * colonna singola con CTA sempre in fondo ("margin-top:auto" sul blocco
 * "Book it Now", stesso pattern "spingi in fondo" già in uso altrove nel
 * tema per card di altezza diseguale nella stessa riga).
 *
 * "width:100%" esplicito, non lasciato allo stretch implicito di default
 * di un item grid: verificato con Playwright che senza (o con "min-
 * width:0" sull'item, tentato per primo per sicurezza contro overflow da
 * contenuto lungo) la card collassava a ~48px invece di riempire la
 * traccia da 161px assegnata da "minmax(0,1fr)" sopra — la card è essa
 * stessa "display:flex" (formatting context indipendente), che qui
 * interferisce con lo stretch automatico del grid genitore. "width:100%"
 * lo rende esplicito invece di dipendere da quell'interazione.
 */
.vbo-promotion-room-block {
	box-sizing: border-box;
	width: 100%;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--vik-radius);
	overflow: hidden;
	background: var(--wp--preset--color--white);
	margin: 0;
	padding-bottom: 0;
}

/*
 * Foto camera: "aspect-ratio" fisso sia con che senza <img> (il nativo
 * non stampa affatto il tag <img> quando "img" è vuoto in DB, tmpl/
 * default.php — qui la stessa altezza di riquadro in entrambi i casi,
 * niente salto di layout tra card fotografate e non).
 *
 * Segnaposto "nessuna foto" (":empty"): riguarda SOLO il caso "nessuna
 * immagine impostata in VikBooking" — non un file mancante/404 sul
 * server (quel caso arriva con un <img> presente ma un src rotto: resta
 * l'icona "immagine non disponibile" nativa del browser, nessun
 * trattamento dedicato per quello, per scelta esplicita: è solo una
 * camera demo in attesa della foto reale del cliente).
 *
 * Tinta piatta "line" (non "background-alt", usato nel giro precedente):
 * "background-alt" è anche lo sfondo dei blocchi promo pari (vedi
 * ".vbo-promotion-details:nth-child(even)" sopra), quindi lì il
 * segnaposto si confondeva quasi del tutto con la sezione — "line" è il
 * tono neutro/più freddo già usato in tutto il tema per bordi e divisori,
 * abbastanza distinto da ENTRAMBI gli sfondi alternati (background e
 * background-alt) da restare leggibile come "spazio foto" su tutti e
 * due. Nessuna icona/texture sovrapposta, per scelta esplicita del brief.
 */
.vbo-promotion-room-img {
	aspect-ratio: 4 / 3;
}

.vbo-promotion-room-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

.vbo-promotion-room-img:empty {
	background: var(--wp--preset--color--line);
}

.vbo-promotion-room-name {
	margin: 0;
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--4) 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	text-align: left;
}

/*
 * Capienza ospiti — markup iniettato da inc/vikbooking-promotions-
 * price.php (".vbo-promotion-room-capacity-value", testo "N Guests":
 * stessa stringa nativa già tradotta "Guests"/vikbooking riusata altrove
 * nel tema per lo stesso significato, non testo nuovo introdotto qui).
 */
.vbo-promotion-room-capacity {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4) 0;
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--xs);
}

/*
 * Prezzo per camera — markup iniettato da inc/vikbooking-promotions-
 * price.php. La barratura del prezzo base è già data gratis dal tag
 * semantico <del> usato nell'iniezione, nessuna regola "text-decoration"
 * da ripetere qui.
 */
.vbo-promotion-room-price {
	display: flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--2);
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4) 0;
}

.vbo-promotion-room-price-base {
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--sm);
}

.vbo-promotion-room-price-discounted {
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
}

/*
 * CTA "Book it Now": colore/sfondo pieno terracotta già dati dalla classe
 * nativa ".vbo-pref-color-btn" (rete di sicurezza sopra, invariata come
 * richiesto) — qui solo l'adattamento a bottone a piena larghezza in
 * fondo alla card, "margin-top:auto" sul contenitore per ancorarlo sempre
 * in fondo indipendentemente dalla quantità di testo sopra.
 */
.vbo-promotion-room-book-block {
	margin-top: auto;
	padding: var(--wp--preset--spacing--4);
}

.vbo-promotion-room-book-block .vbo-promotion-room-book-link {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	margin: 0;
}

/* promotions-page-header è stata rimossa: "Offerte" ora usa il blocco
   condiviso vik-base/page-header (density "compact", contentAlign
   "left") — vedi ".page-header" e ".page-header--left" in theme.css. Il
   vincolo che teneva questo CSS qui invece che in theme.css (giro di
   lavoro precedente, limitato a questo file e a vikbooking-dom.js) non
   si applica più a questo giro, da cui lo spostamento. */

/* -----------------------------------------------------------
   Availability Calendar — shortcode [vikbooking view="availability"]
   ("Disponibilità" nei dati demo, showtype="2" = unità rimaste in cella).

   Il nativo (site/views/availability/tmpl/default.php) stampa una
   <table> INDIPENDENTE per ogni struttura, ciascuna con la propria riga
   di intestazione giorni: N intestazioni identiche impilate, nessuna
   colonna "proprietà" comune e nessuno scroll orizzontale condiviso (ogni
   tabella scrolla per conto proprio dentro il proprio ".table-
   responsive"). Per ottenere un'unica griglia con header giorni condiviso
   + colonna proprietà "frozen" durante lo scroll (mockup approvato) senza
   toccare il template nativo, ".vbo-av-grid" (aggiunta via JS,
   initAvailabilityCalendar() in vikbooking-dom.js) usa "display:contents"
   a cascata su ogni livello nativo elencato qui sotto: l'elemento sparisce
   dal box tree ma i suoi figli "risalgono" a diventare figli diretti del
   contenitore, che è l'unico ad avere "display:grid" + "overflow:auto".
   Ogni <td> (giorno o cella "identità") resta così lo STESSO nodo con
   l'handler jQuery nativo già agganciato (script inline in coda al
   template), riposizionato via "grid-column"/"grid-row" inline impostati
   da JS — nessun nodo clonato, nessun listener perso.
   ----------------------------------------------------------- */
.vbo-availability-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--3);
	margin-bottom: var(--wp--preset--spacing--4);
}

.vbo-availability-controls form[name="vbmonths"] select {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--vik-radius);
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
	background-color: var(--wp--preset--color--background);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
}

/*
 * Legenda — pillole coerenti col linguaggio badge del tema (quadrato
 * 2px di raggio, non i tondi "vblegenda-status" nativi) e separatori a
 * bordo verticale invece dei caratteri di testo che il nativo non
 * stampa comunque (nessun separatore nativo: qui il bordo va sull'item
 * stesso, non su un carattere aggiunto). "Check-in selezionato" e "Oggi"
 * non esistono nel nativo (nessun concetto di "selezione" o "oggi" nella
 * legenda originale): due voci aggiunte da JS (addAvailabilityLegend()),
 * stessa struttura ".vblegenda" delle voci native cosi ereditano queste
 * stesse regole senza bisogno di selettori duplicati.
 */
.vblegendediv {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--text-soft);
}

.vblegendediv .vblegenda {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	padding: 0 var(--wp--preset--spacing--3);
}

.vblegendediv .vblegenda:first-child {
	padding-left: 0;
}

.vblegendediv .vblegenda:not(:first-child) {
	border-left: 1px solid var(--wp--preset--color--line);
}

.vblegendediv .vblegenda-status {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: var(--vik-radius);
	background-color: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--line);
}

.vblegendediv .vblegwarning {
	background-color: color-mix( in srgb, var(--wp--preset--color--accent) 18%, var(--wp--preset--color--background) );
	border-color: color-mix( in srgb, var(--wp--preset--color--accent) 45%, var(--wp--preset--color--background) );
}

.vblegendediv .vblegbusy {
	background-color: var(--wp--preset--color--accent-dark);
	border-color: var(--wp--preset--color--accent-dark);
}

.vblegendediv .vbo-av-leg-selected {
	background-color: var(--wp--preset--color--background);
	border: 2px solid var(--wp--preset--color--accent);
}

.vblegendediv .vbo-av-leg-today {
	width: 2px;
	height: 14px;
	background-color: var(--wp--preset--color--accent);
	border: none;
	border-radius: 0;
}

.vblegendediv .vblegenda-lbl {
	white-space: nowrap;
}

/*
 * Micro-testo guida — assente nel nativo (nessuna indicazione che le
 * celle libere siano cliccabili). Aggiunto da JS (addAvailabilityHint())
 * come ultima voce della stessa riga legenda, stesso separatore a bordo
 * delle voci ".vblegenda" cosi non serve un layout a parte.
 */
.vbo-av-hint {
	margin: 0;
	padding-left: var(--wp--preset--spacing--3);
	border-left: 1px solid var(--wp--preset--color--line);
	font-style: italic;
}

/*
 * Contenitore/griglia — "overflow:auto" qui stesso (non su un wrapper
 * esterno) perché "position:sticky" ha effetto solo rispetto al proprio
 * antenato scrollabile più vicino: header e colonna proprietà devono
 * restare "frozen" DENTRO questo stesso box, non rispetto alla pagina.
 * "max-height" limita l'altezza cosi con molte strutture il calendario
 * scrolla in verticale al suo interno invece di allungare la pagina
 * all'infinito (valore da verificare dal vivo secondo il numero reale di
 * strutture del sito).
 */
.vbo-availability-wrapper.vbo-av-grid {
	--vbo-av-identity-w: 320px;
	--vbo-av-day-w: minmax(46px, 1fr);
	display: grid;
	grid-template-columns: var(--vbo-av-identity-w) repeat( var(--vbo-av-days, 31), var(--vbo-av-day-w) );
	align-items: start;
	position: relative;
	max-height: 70vh;
	overflow: auto;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--vik-radius);
	background-color: var(--wp--preset--color--background);
}

/*
 * Cascata "display:contents" — SOLO per le celle giorno del CORPO
 * (".vbo-availability-room-avdays"), non più per l'header (giro 3, vedi
 * initAvailabilityCalendar() in vikbooking-dom.js). L'elemento sparisce
 * dal box tree ma i suoi figli "risalgono" a diventare item diretti di
 * questo grid container, senza spostare un solo nodo nel DOM. Necessaria
 * QUI: il click handler nativo (script inline in coda al template)
 * risale al room-id con "jQuery(this).closest('table').attr('data-
 * room-table')" — se il <td> venisse davvero spostato fuori dalla sua
 * <table> (provato: "appendChild" diretto sul grid container), quella
 * risalita fallisce e l'handler lancia un'eccezione prima ancora di
 * leggere la selezione (verificato in pagina). "closest()" ignora il
 * "display" degli antenati, quindi la <table>/<tr> nativa deve restare
 * un vero antenato di QUESTI <td> — da cui "display:contents" invece di
 * una rimozione, unicamente per loro.
 *
 * Le celle dell'HEADER (mai cliccate, nessun ".closest('table')" le
 * riguarda) sono invece spostate per davvero fuori da questa catena —
 * vedi la regola ".vbo-availability-month-day" più sotto: sono ora
 * figli diretti del grid container nel DOM stesso, non "risaliti" via
 * CSS. Motivo: "position:sticky" su un <td> ancora "table-cell" sotto
 * antenati "display:contents" è un'area con bug di sincronizzazione
 * noti in più motori browser durante lo scroll orizzontale (segnalato
 * due volte su questa griglia, mai sparito col solo "display:block"
 * esplicito tentato al giro 2) — uscire del tutto dalla catena, non
 * solo blockificare l'elemento, è la mitigazione più diretta.
 */
.vbo-availability-wrapper.vbo-av-grid .vbo-availability-room-container {
	display: contents;
}

.vbo-availability-wrapper.vbo-av-grid .vbo-availability-room-monthcal.table-responsive {
	display: contents;
	overflow: visible;
}

.vbo-availability-wrapper.vbo-av-grid .vbo-availability-room-monthcal table {
	display: contents;
}

.vbo-availability-wrapper.vbo-av-grid .vbo-availability-room-monthcal tbody {
	display: contents;
}

.vbo-availability-wrapper.vbo-av-grid .vbo-availability-room-avdays {
	display: contents;
}

/*
 * Header giorni — figli diretti VERI del grid container (spostati via
 * "appendChild" da initAvailabilityCalendar(), la loro <tr> nativa
 * viene rimossa subito dopo essendo rimasta vuota): "position:sticky;
 * top:0" ha quindi effetto su un elemento che non ha mai attraversato
 * una catena "display:contents", nessuna blockificazione implicita da
 * cui dipendere. Sfondo pieno obbligatorio: senza, le celle sotto
 * scorrerebbero "attraverso" l'header trasparente.
 */
.vbo-availability-wrapper.vbo-av-grid .vbo-availability-month-day {
	position: sticky;
	top: 0;
	z-index: 3;
	display: block;
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--1);
	background-color: var(--wp--preset--color--background);
	border-bottom: 1px solid var(--wp--preset--color--line);
	text-align: center;
	line-height: 1.3;
}

.vbo-availability-wrapper.vbo-av-grid .vbo-availability-daynumber {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	font-variant-numeric: lining-nums;
	color: var(--wp--preset--color--ink);
}

.vbo-availability-wrapper.vbo-av-grid .vbo-availability-weekday {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--text-soft);
}

/*
 * Weekend — sfondo appena percettibile, sia in intestazione che nelle
 * celle del corpo (classe applicata da JS in base al giorno reale della
 * settimana, il nativo non la espone).
 */
.vbo-availability-wrapper.vbo-av-grid .vbo-availability-month-day.vbo-av-weekend {
	background-color: color-mix( in srgb, var(--wp--preset--color--line) 25%, var(--wp--preset--color--background) );
}

.vbo-availability-wrapper.vbo-av-grid td.vbo-av-weekend {
	background-color: color-mix( in srgb, var(--wp--preset--color--line) 12%, var(--wp--preset--color--background) );
}

/*
 * Colonna "oggi" — l'header non può mostrare la linea verticale che
 * attraversa il corpo (la copre col proprio sfondo pieno, essendo
 * sticky sopra di essa): qui un bordo inferiore in accento la segnala
 * comunque nella cella di intestazione corrispondente.
 */
.vbo-availability-wrapper.vbo-av-grid .vbo-availability-month-day.vbo-av-today-col {
	border-bottom: 2px solid var(--wp--preset--color--accent);
}

/*
 * Cella corner (nome mese) — sticky SIA top che left: è l'intersezione
 * tra header e colonna proprietà, deve restare fissa nei due assi
 * insieme. z-index più alto di tutti: a parità di scroll, deve sempre
 * coprire sia le altre celle header (sticky solo top) che la colonna
 * proprietà (sticky solo left).
 */
.vbo-availability-wrapper.vbo-av-grid .vbo-av-corner-cell {
	position: sticky;
	top: 0;
	left: 0;
	z-index: 4;
	display: flex;
	align-items: center;
	padding: var(--wp--preset--spacing--3);
	background-color: var(--wp--preset--color--background);
	border-bottom: 1px solid var(--wp--preset--color--line);
	border-right: 1px solid var(--wp--preset--color--line);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--text-soft);
	min-height: 39px;
}

/*
 * Linea "oggi" — un div vuoto aggiunto da JS come figlio diretto del
 * grid container (addAvailabilityTodayLine()), non un <td>: occupa la
 * colonna del giorno corrente su TUTTE le righe ("grid-row: 1 / -1"
 * funziona indipendentemente dal numero reale di strutture, non serve
 * conoscerlo). "pointer-events:none" perché è puramente decorativa,
 * sovrapposta alle celle cliccabili sottostanti.
 */
.vbo-av-today-line {
	/*
	 * "grid-row" non dichiarato qui: lo imposta initAvailabilityCalendar()
	 * (vikbooking-dom.js) come stile inline, "1 / " + (numero strutture +
	 * 2) invece di "1 / -1" — gli indici negativi si risolvono rispetto
	 * alla griglia ESPLICITA (righe dichiarate in "grid-template-rows"),
	 * mentre qui le righe sono tutte IMPLICITE ("grid-auto-rows", voluto:
	 * l'altezza di ogni riga deve restare libera per l'accordion), quindi
	 * "-1" collasserebbe sulla riga 1 invece di raggiungere l'ultima
	 * struttura (verificato in pagina). Il numero di strutture non è noto
	 * in fase di scrittura di questo CSS, da cui il calcolo via JS.
	 *
	 * "align-self:stretch", non ereditato dall'"align-items:start" del
	 * container (".vbo-av-grid" più sopra): quella regola è lì apposta
	 * per le CELLE (non stirarsi quando la riga cresce per l'accordion),
	 * ma applicata di default anche a QUESTO elemento lo ridurrebbe a un
	 * rettangolo alto quanto il suo contenuto (zero, essendo un div
	 * vuoto) allineato in cima — invisibile su tutte le righe sotto la
	 * prima, invece di attraversarle. "stretch" qui è quindi
	 * un'eccezione voluta, non un controsenso rispetto alla regola sopra.
	 */
	align-self: stretch;
	width: 2px;
	margin: 0 auto;
	background-color: var(--wp--preset--color--accent);
	pointer-events: none;
	z-index: 1;
}

/*
 * Colonna proprietà — sticky "left:0", stesso principio dell'header ma
 * sull'asse orizzontale. L'altezza della riga calendario a fianco è
 * decisa DA QUESTA cella (il grid item più alto della riga, con
 * "align-items:start" sul container cosi nessuno degli item si stira):
 * quando la zona dettaglio si espande, la riga cresce e spinge in basso
 * le righe sotto, senza che le celle calendario della STESSA riga si
 * stirino (vedi "align-items:start" sul container, ereditato da ogni
 * item incluse le celle giorno "td[data-cell-ts]" più sotto).
 */
.vbo-availability-wrapper.vbo-av-grid .vbo-av-identity {
	position: sticky;
	left: 0;
	z-index: 2;
	background-color: var(--wp--preset--color--background);
	border-right: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/*
 * "flex-wrap:nowrap" di default: il caso comune (nome + solo "Book
 * Now", nessuna selezione, desktop/tablet) resta una riga sola altezza
 * fissa ~52px, col nome troncato in ellissi se davvero troppo lungo per
 * la colonna — comportamento invariato dal giro 1.
 *
 * Diventa "wrap" quando la struttura ha un check-in selezionato
 * (classe ".is-selected", aggiunta da initAvailabilityCheckinBadge() in
 * vikbooking-dom.js) o, sotto i 768px, SEMPRE (vedi media query in
 * fondo al file): badge/bottone in quel caso vanno a capo in blocco
 * (".vbo-av-identity-actions" sotto, un unico wrapper flex-basis:100%
 * invece di due item separati — con due item separati ciascuno finirebbe
 * su una riga propria, badge e bottone slegati, invece di restare
 * insieme sulla riga 2).
 */
.vbo-av-identity-bar {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	min-height: 52px;
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
	box-sizing: border-box;
}

.vbo-av-identity.is-selected .vbo-av-identity-bar {
	flex-wrap: wrap;
}

.vbo-av-identity-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	flex: 0 0 auto;
}

/*
 * Un solo item "flex-basis:100%" (non due) forza badge+bottone a
 * scendere INSIEME su una riga propria, invece di stringere il nome
 * fino quasi a sparire ("Ap" invece di "Appartamento Alghero", bug
 * segnalato al giro 3) — il nome (".vbo-av-identity-name", nessun
 * min-width dedicato) riceve automaticamente tutto lo spazio restante
 * della riga 1 una volta che il gruppo azioni non vi partecipa più.
 */
.vbo-av-identity.is-selected .vbo-av-identity-actions {
	flex-basis: 100%;
}

.vbo-av-chevron {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: none;
	background: none;
	color: var(--wp--preset--color--text-soft);
	cursor: pointer;
	transition: transform 0.2s ease;
}

.vbo-av-chevron[hidden] {
	visibility: hidden;
}

.vbo-av-identity.is-expanded .vbo-av-chevron {
	transform: rotate( 180deg );
}

.vbo-av-identity-thumb {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: var(--vik-radius);
	overflow: hidden;
	background-color: var(--wp--preset--color--background-alt);
}

.vbo-av-identity-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vbo-av-identity-name {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

.vbo-av-identity-actions .vbo-pref-color-btn {
	flex: 0 0 auto;
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
	font-size: var(--wp--preset--font-size--xs);
	white-space: nowrap;
}

/*
 * Badge check-in selezionato — riusa lo STESSO nodo nativo
 * "#vbo-av-checkin-ID" (spostato qui via JS, mai clonato). Pillola
 * OUTLINE (sfondo pieno del tema, solo bordo terracotta — non il
 * riempimento tinto del giro 1, per non confondersi con lo stato
 * "Partially Reserved" della cella, che quello sì è un fill): il colore
 * arriva quindi SOLO da bordo/testo, mai da uno sfondo colorato.
 *
 * L'icona nativa (".../availability/tmpl/default.php": un'icona
 * "sign-in" con classe ".vbo-pref-color-element") resta blu Bootstrap
 * di default: la regola native "...-last-checkin i { background:
 * var(--vbo-pref-textcolor) }" (0,1,1 — una classe + un tipo "i") è più
 * specifica della ridefinizione già presente in questo file per
 * ".vbo-pref-color-element" (0,1,0 — vedi sezione "Elementi condivisi"
 * in cima al file), quindi vince lei. Nessuna icona nel mockup
 * approvato per questa pillola: la si nasconde del tutto invece di
 * rincorrere quella specificità con un fix puntuale in più.
 *
 * Niente "display" qui: il nativo lo imposta a "none" di default
 * (vikbooking_styles.css) e lo alterna con show()/fadeIn()/fadeOut()
 * jQuery — il display "giusto" da mostrare è comunque riscritto in modo
 * esplicito da initAvailabilityCheckinBadge() (vikbooking-dom.js) ad
 * ogni cambio di selezione, per non dipendere da come jQuery calcola il
 * proprio fallback quando lo stile "none" di partenza arriva da un
 * foglio esterno. Ridichiararlo qui vincerebbe comunque la cascata e lo
 * terrebbe visibile anche di default, prima di qualunque selezione.
 */
.vbo-av-identity-bar .vbo-availability-room-details-last-checkin {
	flex: 0 0 auto;
	align-items: center;
	gap: var(--wp--preset--spacing--1);
	padding: var(--wp--preset--spacing--1) var(--wp--preset--spacing--3);
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 100px;
	background-color: var(--wp--preset--color--background);
	color: var(--wp--preset--color--accent-dark);
	font-size: var(--wp--preset--font-size--xs);
	font-variant-numeric: lining-nums;
	white-space: nowrap;
}

.vbo-av-identity-bar .vbo-availability-room-details-last-checkin i {
	display: none;
}

/*
 * Il nativo ("vikbooking_styles.css") stampa "font-size:14px;
 * font-weight:bold; padding:15px 0; text-transform:uppercase" DIRETTAMENTE
 * sullo <span> interno — selettore "classe + tipo" (0,1,1), più specifico
 * del "font-size" ereditato dal div qui sopra, quindi vince lui: risultato
 * una pillola visivamente enorme (padding verticale 15px, testo 14px
 * maiuscolo) rispetto alle altre pillole del tema (".vblastavail" e
 * simili, tutte "font-size--xs"/12px). Azzerato qui punto per punto,
 * stessa specificità del nativo.
 */
.vbo-av-identity-bar .vbo-availability-room-details-last-checkin span {
	margin: 0;
	padding: 0;
	position: static;
	font-size: inherit;
	font-weight: 600;
	text-transform: none;
}

.vbo-av-checkin-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	padding: 0;
	border: none;
	background: none;
	color: inherit;
	font-size: 12px;
	line-height: 1;
	cursor: pointer;
	opacity: 0.7;
}

.vbo-av-checkin-remove:hover {
	opacity: 1;
}

/*
 * Zona dettaglio (accordion) — collassata di default ("[hidden]"
 * nativo), spinge in basso il resto della griglia quando aperta invece
 * di sovrapporsi (nessun "position:absolute": è normale flusso a
 * blocco dentro la cella identità, che essendo "align-self:start" può
 * crescere liberamente in altezza).
 */
.vbo-av-identity-detail {
	padding: 0 var(--wp--preset--spacing--3) var(--wp--preset--spacing--3);
	border-top: 1px solid var(--wp--preset--color--line);
}

.vbo-av-identity-detail .vbo-availability-room-details-descr {
	margin: var(--wp--preset--spacing--2) 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.5;
	color: var(--wp--preset--color--text-soft);
}

/*
 * Amenities — chip quadrati icon-only, stesso trattamento già validato
 * per Options/task=showprc (".vbo-showprc-room-summary .vbo-room-carat"
 * in questo file: sfondo terracotta 12%, 32×32px, icona accent-dark),
 * qui riapplicato identico invece di re-inventare un'altra variante.
 */
.vbo-av-identity-amenities {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	margin: 0;
}

.vbo-av-identity-amenities .vbo-room-carat {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 32px;
	margin: 0;
	border-radius: var(--vik-radius);
	background: var(--vik-accent-12);
}

.vbo-av-identity-amenities .vbo-room-carat:has( .vbo-icn-carat ) {
	width: 32px;
}

.vbo-av-identity-amenities .vbo-room-carat:not( :has( .vbo-icn-carat ) ) {
	padding: 0 var(--wp--preset--spacing--3);
	color: var(--wp--preset--color--accent-dark);
	font-size: var(--wp--preset--font-size--xs);
	white-space: nowrap;
}

.vbo-av-identity-amenities .vbo-icn-carat {
	color: var(--wp--preset--color--accent-dark);
	font-size: var(--wp--preset--font-size--sm);
}

/*
 * Celle giorno — gerarchia invertita rispetto al nativo (che usa
 * arancione/rosso Bootstrap): "Available" quasi invisibile, "Partially
 * Reserved" terracotta chiaro col numero unità rimaste, "Not Available"
 * terracotta scuro senza numero. "align-self:start" impedisce a queste
 * celle (basse, poco contenuto) di stirarsi quando la riga cresce per
 * via della zona dettaglio espansa nella cella identità a fianco.
 *
 * Selettore "td[data-cell-ts]" invece di ".vbo-availability-room-avdays
 * td": stesso identico set di celle (l'attributo lo stampa il nativo su
 * OGNI cella giorno, mai sulla cella identità o sull'header), ma senza
 * dipendere dall'ancestor: resta valido anche se in futuro cambiasse
 * come questi <td> risalgono alla griglia.
 *
 * "display:block" esplicito per lo stesso motivo dell'header sopra
 * (blockificazione implicita non affidabile per un ex "table-cell" che
 * diventa grid item): qui il <td> non è "position:sticky", quindi non è
 * lo scenario che ha causato il bug segnalato, ma vale comunque
 * dichiararlo per coerenza con gli altri grid item "table-cell"-origine
 * di questa griglia invece di lasciarlo come unico caso ambiguo.
 */
.vbo-availability-wrapper.vbo-av-grid td[data-cell-ts] {
	display: block;
	box-sizing: border-box;
	min-height: 52px;
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--1);
	border-bottom: 1px solid var(--wp--preset--color--line);
	border-right: 1px solid color-mix( in srgb, var(--wp--preset--color--line) 60%, transparent );
	text-align: center;
	position: relative;
}

.vbo-availability-wrapper.vbo-av-grid td.vbo-free-cell,
.vbo-availability-wrapper.vbo-av-grid td.vbo-partially-cell {
	cursor: pointer;
}

.vbo-availability-wrapper.vbo-av-grid td.vbo-free-cell:hover,
.vbo-availability-wrapper.vbo-av-grid td.vbo-partially-cell:hover {
	background-color: color-mix( in srgb, var(--wp--preset--color--accent) 8%, var(--wp--preset--color--background) );
}

.vbo-availability-wrapper.vbo-av-grid td.vbo-partially-cell {
	background-color: color-mix( in srgb, var(--wp--preset--color--accent) 16%, var(--wp--preset--color--background) );
}

.vbo-availability-wrapper.vbo-av-grid td.vbo-occupied-cell {
	background-color: var(--wp--preset--color--accent-dark);
}

.vbo-availability-wrapper.vbo-av-grid .vbo-availability-day-container {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	font-variant-numeric: lining-nums;
	color: var(--wp--preset--color--accent-dark);
}

.vbo-availability-wrapper.vbo-av-grid td.vbo-occupied-cell .vbo-availability-day-container {
	/* "Not Available": mai il numero in cella, solo il colore pieno. */
	display: none;
}

/*
 * Stato selezionato — bordo pieno + icona check, nettamente distinto da
 * "Partially Reserved" (mai una variante della stessa tinta: qui bordo
 * spesso + sfondo quasi bianco, contro il riempimento pieno terracotta
 * chiaro del parziale). L'icona (aggiunta da JS una volta per cella,
 * addCellCheckIcon()) resta invisibile finché il nativo non applica la
 * classe "vbo-cell-selected-arrival" via click (script inline nativo,
 * non toccato).
 */
.vbo-availability-wrapper.vbo-av-grid td.vbo-cell-selected-arrival {
	background-color: var(--wp--preset--color--background);
	border: 2px solid var(--wp--preset--color--accent);
}

.vbo-av-cell-check {
	display: none;
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--sm);
}

.vbo-availability-wrapper.vbo-av-grid td.vbo-cell-selected-arrival .vbo-av-cell-check {
	display: inline-block;
}

.vbo-availability-wrapper.vbo-av-grid td.vbo-cell-selected-arrival .vbo-availability-day-container {
	display: none;
}

/*
 * Tablet (768–1023px) — a 260px la colonna proprietà non basta comunque
 * a leggere i nomi: "Appartamento Alghero"/"Cagliari"/"Tempio" troncano
 * tutti e tre in modo identico ("Appartamento..."), indistinguibili tra
 * loro esattamente come su mobile, solo con qualche lettera in più
 * prima del taglio — stesso problema di fondo, non solo un caso
 * mobile. Stessa soluzione quindi: badge/bottone (".vbo-av-identity-
 * actions") vanno SEMPRE a riga propria sotto il nome anche qui, non
 * solo con una selezione attiva — vedi le due regole subito sotto,
 * condivise con la fascia mobile invece di duplicarle lì.
 */
@media (max-width: 1023px) {
	.vbo-av-identity-bar {
		flex-wrap: wrap;
		row-gap: var(--wp--preset--spacing--1);
		padding: var(--wp--preset--spacing--2);
	}

	.vbo-av-identity-actions {
		flex-basis: 100%;
	}

	.vbo-availability-wrapper.vbo-av-grid {
		--vbo-av-identity-w: 260px;
		--vbo-av-day-w: minmax(42px, 1fr);
		max-height: 65vh;
	}

	.vbo-av-identity-name {
		font-size: var(--wp--preset--font-size--sm);
	}

	.vbo-av-identity-thumb {
		width: 32px;
		height: 32px;
	}

	/*
	 * Separatori a bordo verticale (".vblegendediv .vblegenda:not(:first-
	 * child)" più sopra) pensati per una riga sola: appena la legenda va
	 * a capo su più righe (inevitabile sotto i 1024px, troppe voci per
	 * la larghezza disponibile), il bordo del primo elemento di ogni
	 * riga successiva alla prima resta comunque lì — una barretta
	 * verticale isolata a inizio riga, senza un elemento a sinistra da
	 * separare. Qui il separatore diventa uno spazio (gap) su entrambi
	 * gli assi, niente più bordo: pulito indipendentemente da dove cade
	 * l'a-capo.
	 */
	.vblegendediv {
		row-gap: var(--wp--preset--spacing--2);
		column-gap: var(--wp--preset--spacing--3);
	}

	.vblegendediv .vblegenda {
		padding: 0;
	}

	.vblegendediv .vblegenda:not(:first-child) {
		border-left: none;
	}

	.vbo-av-hint {
		padding-left: 0;
		border-left: none;
		flex-basis: 100%;
	}
}

/*
 * Mobile (<768px) — cambio di struttura, non solo di misure: la
 * richiesta esplicita è che il nome della struttura non venga mai
 * sacrificato per far posto a badge/bottone. Sotto questa soglia la
 * colonna proprietà (180px) è troppo stretta per chevron + nome +
 * bottone sulla stessa riga senza troncare il nome a 3-4 lettere — qui
 * ".vbo-av-identity-actions" (badge + bottone "Book Now"/"Continua ›",
 * raggruppati in vikbooking-dom.js) va SEMPRE a riga propria sotto il
 * nome, non solo con una selezione attiva come su desktop/tablet
 * (".is-selected" più sopra in questo file): il nome riceve così
 * sempre l'intera riga 1 per sé.
 */
@media (max-width: 767px) {
	.vbo-availability-controls {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--2);
	}

	.vblegendediv {
		flex-direction: column;
		align-items: flex-start;
		row-gap: var(--wp--preset--spacing--1);
	}

	.vbo-av-hint {
		padding-left: 0;
		border-left: none;
	}

	.vbo-availability-wrapper.vbo-av-grid {
		--vbo-av-identity-w: 180px;
		--vbo-av-day-w: minmax(38px, 1fr);
		max-height: 62vh;
	}

	.vbo-av-identity-thumb {
		display: none;
	}

	/*
	 * "flex-wrap:wrap" e ".vbo-av-identity-actions{flex-basis:100%}" già
	 * ereditati dal blocco "max-width:1023px" sopra (767px ne è un
	 * sottoinsieme): qui si ritocca solo lo spazio tra le due righe,
	 * leggermente più ampio che su tablet.
	 */
	.vbo-av-identity-bar {
		row-gap: var(--wp--preset--spacing--2);
	}

	/*
	 * Bottone più comodo, non più compresso: prima doveva convivere
	 * accanto al nome sulla stessa riga stretta, ora ha un'intera riga
	 * per sé — padding/font tornano quelli standard invece che ridotti,
	 * anche per un target di tocco più adeguato al touch.
	 */
	.vbo-av-identity-actions .vbo-pref-color-btn {
		padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
		font-size: var(--wp--preset--font-size--sm);
	}

	.vbo-av-identity-detail {
		padding: 0 var(--wp--preset--spacing--2) var(--wp--preset--spacing--2);
	}

	.vbo-av-identity-amenities .vbo-room-carat {
		height: 28px;
	}

	.vbo-av-identity-amenities .vbo-room-carat:has( .vbo-icn-carat ) {
		width: 28px;
	}
}

/* -----------------------------------------------------------
   Packages List — shortcode [vikbooking view="packageslist" ...]

   Il template nativo (site/views/packageslist/tmpl/default.php) espone
   solo nome, immagine, date di validità, breve descrizione, prezzo
   (con etichetta unità solo se "per night"/"per person" si applicano)
   e benefits in testo libero. "Available Rooms" e "Min. Number of
   Nights" sono calcolati lato PHP (view.html.php: $package['rooms'],
   $package['minlos']) ma MAI stampati in questa vista — compaiono solo
   nella pagina "packagedetails" collegata da "More Details"/"Scopri il
   pacchetto" (out of scope, vedi brief). Quel dato non esiste quindi
   nel DOM della lista: niente chip camere incluse né tag "min. notti"
   in questo giro, deciso con il cliente di lasciarli fuori scope
   piuttosto che introdurre un override di template o un endpoint
   ad hoc per recuperarli.
   ----------------------------------------------------------- */

.vbclistheadt {
	margin: 0 0 var(--wp--preset--spacing--6);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

.vbo-pkglist-container {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--7);
}

/*
 * Flex 2 colonne (foto ~42% / contenuto 58%) invece del flex nativo
 * (".vbo-pkglist-pkg{display:flex}" già di suo, ma "-bone/-btwo/-
 * bthree" nativi sono TRE item paritari a "float:left"+"width" in %,
 * vikbooking_styles.css). Qui la foto e il contenuto devono essere
 * solo DUE colonne: ".vbo-pkglist-pkg-btwo"/".vbo-pkglist-pkg-bthree"
 * (fratelli nativi, non annidati) vengono uniti in un wrapper reale
 * da wrapPackagesListContent() (vikbooking-dom.js) — un tentativo
 * precedente con CSS Grid e la foto su "grid-row:1/-1" (senza
 * wrapper) risultava in un vuoto enorme tra descrizione e divisore
 * benefits, caso limite dello spec Grid per item che spannano righe
 * auto-size; il wrapper flex qui sotto evita il problema alla radice
 * (due semplici item, "align-items:stretch" risolve un'altezza
 * definita per entrambi senza ambiguità). "width:auto"/"flex:none"
 * espliciti sui tre figli originali: il nativo porta di suo
 * percentuali fisse (30/60/20%, e varianti nei suoi stessi
 * breakpoint) pensate per il vecchio layout a 3 colonne.
 */
.vbo-pkglist-pkg {
	display: flex;
	align-items: stretch;
	width: 100%;
	margin: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--vik-radius);
	overflow: hidden;
	background: var(--wp--preset--color--background);
}

.vbo-pkglist-pkg-bone {
	position: relative;
	float: none;
	display: block;
	flex: 0 0 42%;
	width: auto;
}

.vbo-pkglist-pkg-content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}

/* Nessuna foto (campo "Main Image" vuoto): sfondo neutro invece del
   bianco della card, cosi il riquadro non sembra un errore di layout. */
.vbo-pkglist-pkg-bone:empty {
	background: var(--wp--preset--color--background-alt);
}

.vbo-pkglist-pkg-img {
	width: 100%;
	height: 100%;
}

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

/*
 * Badge data breve in overlay sulla foto — creato da JS
 * (relocatePackagesListDates() in vikbooking-dom.js) leggendo il testo
 * già presente in ".vbo-pkglist-pkg-dates-ft": stesso dato della pill
 * completa nel blocco prezzo sotto, due trattamenti visivi diversi
 * (mockup approvato), non un secondo campo.
 */
.vbo-pkglist-pkg-datebadge {
	position: absolute;
	top: var(--wp--preset--spacing--4);
	left: var(--wp--preset--spacing--4);
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
	border-radius: var(--vik-radius);
	background: color-mix(in srgb, var(--wp--preset--color--ink) 55%, transparent);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-variant-numeric: lining-nums;
	line-height: 1.3;
}

.vbo-pkglist-pkg-btwo {
	float: none;
	display: block;
	width: auto;
	padding: var(--wp--preset--spacing--7) var(--wp--preset--spacing--7) 0;
	border-right: none;
}

.vbo-pkglist-pkg-name {
	margin: 0 0 var(--wp--preset--spacing--3);
}

.vbo-pkglist-pkg-name h4 {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

.vbo-pkglist-pkg-shortdescr {
	margin: 0;
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.6;
}

/*
 * Footer card — "grid-template-areas" invece di riordinare il DOM: i
 * tre figli nativi arrivano nell'ordine cost/details/benefits, ma il
 * mockup li vuole con benefits IN CIMA e prezzo+CTA affiancati SOTTO.
 * Le aree nominate posizionano ogni figlio a prescindere dal suo
 * ordine reale nel markup — nessuna relocation JS necessaria qui
 * (a differenza della pill validità sopra, che deve invece cambiare
 * CONTENITORE, non solo posizione visiva, per impilarsi col prezzo).
 * Se "benefits" manca (campo vuoto, il nativo non stampa proprio il
 * div in quel caso) l'area resta semplicemente inutilizzata: niente
 * riga vuota che spinge giù il resto.
 */
.vbo-pkglist-pkg-bthree {
	float: none;
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"benefits benefits"
		"price cta";
	column-gap: var(--wp--preset--spacing--5);
	row-gap: var(--wp--preset--spacing--5);
	align-items: end;
	width: auto;
	margin-top: var(--wp--preset--spacing--5);
	padding: var(--wp--preset--spacing--6) var(--wp--preset--spacing--7) var(--wp--preset--spacing--7);
	border-top: 1px solid var(--wp--preset--color--line);
	border-left: none;
}

/*
 * Il nativo avvolge i benefit in un box arrotondato bordato di verde
 * (vikbooking_styles.css, pensato per un badge "sconto"): il mockup
 * approvato li vuole invece testo semplice, senza box — annullato qui.
 */
.vbo-pkglist-pkg-benefits {
	grid-area: benefits;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	text-align: left;
}

.vbo-pkglist-pkg-benefits-head {
	margin-bottom: var(--wp--preset--spacing--3);
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.vbo-pkglist-pkg-benefits-list {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vbo-pkglist-pkg-benefits-list li {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--2);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
}

/* Icona via CSS mask (stesso pattern di ".vbo-promotion-room-capacity-icon"
   più sopra in questo file): un solo elemento colorabile via
   "background-color", nessun SVG inline da generare lato JS. */
.vbo-pkglist-pkg-benefits-icon {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	margin-top: 3px;
	background-color: var(--wp--preset--color--accent);
	-webkit-mask: var(--vbo-icon-check) center / contain no-repeat;
	mask: var(--vbo-icon-check) center / contain no-repeat;
	--vbo-icon-check: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.vbo-pkglist-pkg-benefits-text {
	margin: 0;
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.6;
}

.vbo-pkglist-pkg-cost {
	grid-area: price;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--2);
	text-align: left;
}

/*
 * Selettore scoped a "-cost" per pareggiare la specificità del nativo
 * ".vbo-pkglist-pkg-cost .vbo-pkglist-pkg-price" (vikbooking_styles.css):
 * un selettore semplice ".vbo-pkglist-pkg-price" qui perderebbe contro
 * quello, nonostante questo foglio carichi dopo.
 */
.vbo-pkglist-pkg-cost .vbo-pkglist-pkg-price {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	font-variant-numeric: lining-nums;
}

.vbo-pkglist-pkg-priceper {
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--xs);
}

.vbo-pkglist-pkg-priceper:empty {
	display: none;
}

/*
 * Pill validità — spostata qui dentro da relocatePackagesListDates()
 * (vikbooking-dom.js), era sotto il titolo nel markup nativo. Ricompattata
 * da riga fluida (nativa: "width:100%", pill grigia larga "border-
 * radius:30px") a chip beige coerente con il resto del sistema colore/
 * radius del tema.
 */
.vbo-pkglist-pkg-dates-cont {
	display: inline-flex;
	width: auto;
	margin: 0;
}

.vbo-pkglist-pkg-dates {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	width: auto;
	margin-top: 0;
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
	border-radius: var(--vik-radius);
	background: var(--wp--preset--color--background-alt);
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--xs);
}

.vbo-pkglist-pkg-dates i {
	margin-right: 0;
	color: var(--wp--preset--color--accent-dark);
	font-size: 11px;
}

.vbo-pkglist-pkg-dates-lbl {
	margin-right: 0;
	font-size: inherit;
}

.vbo-pkglist-pkg-dates-ft {
	font-variant-numeric: lining-nums;
}

.vbo-pkglist-pkg-details {
	grid-area: cta;
	justify-self: end;
	text-align: right;
}

/*
 * Selettore scoped a "-details a" per pareggiare la specificità del
 * nativo ".vbo-pkglist-pkg-details a" (padding proprio, vikbooking_
 * styles.css): senza questo, il padding di ".vbo-pref-color-btn" (più
 * sopra in questo file) perderebbe contro quello nativo nonostante
 * questo foglio carichi dopo.
 */
.vbo-pkglist-pkg-details a.vbo-pref-color-btn {
	display: inline-block;
	width: auto;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
	white-space: nowrap;
}

@media (max-width: 980px) {
	.vbo-pkglist-pkg-bone {
		flex: 0 0 100%;
	}
}
@media (max-width: 780px) {
	.vbo-pkglist-pkg {
		flex-direction: column;
	}

	.vbo-pkglist-pkg-bone {
		flex-basis: auto;
		min-height: 220px;
	}

	.vbo-pkglist-pkg-bthree {
		grid-template-columns: 1fr;
		grid-template-areas:
			"benefits"
			"price"
			"cta";
	}

	.vbo-pkglist-pkg-details {
		justify-self: stretch;
		text-align: center;
	}

	.vbo-pkglist-pkg-details a.vbo-pref-color-btn {
		display: block;
		width: 100%;
		margin: 0;
		text-align: center;
	}
}

/* -----------------------------------------------------------
   Package Details — shortcode [vikbooking view="packagedetails" pkgid="N" ...]

   Pagina WP auto-creata da VikBooking per ogni pacchetto (una per ID,
   vedi VikBookingModelShortcode::addPage()), stesso shortcode
   [vikbooking ...] di ogni altra vista — non un controller a parte. Il
   template nativo (site/views/packagedetails/tmpl/default.php) stampa
   foto/descrizione/prezzo/condizioni/validità/benefits/camere in
   un'unica colonna, con descrizione+prezzo affiancati in un blocco e
   condizioni+validità affiancate in un altro. La ristrutturazione a due
   colonne (contenuto + sidebar sticky) e gli inserimenti di markup
   nuovo (breadcrumb, eyebrow, sottotitolo camere, badge min-notti,
   elenco camere disponibili, CTA) sono tutti in JS — vedi
   buildPackageDetailsSidebar()/buildPackageDetailsHeader()/
   enhancePackageDetails*() in vikbooking-dom.js per il ragionamento
   completo di ogni spostamento.
   ----------------------------------------------------------- */

.vbo-pkgdet-breadcrumb {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--1);
	margin-bottom: var(--wp--preset--spacing--5);
	color: var(--wp--preset--color--text-soft);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: none;
}

.vbo-pkgdet-breadcrumb:hover {
	color: var(--wp--preset--color--accent);
}

.vbo-pkgdet-breadcrumb::before {
	content: "‹";
	font-size: var(--wp--preset--font-size--md);
	line-height: 1;
}

.vbo-pkgdet-eyebrow {
	margin-bottom: var(--wp--preset--spacing--2);
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

/*
 * Titolo + badge validità sulla stessa riga — stesso schema grid
 * "titolo riga 1 colonna 1 / badge riga 1 colonna 2" già usato per
 * ".vbo-promotion-det-wrapper" più sopra in questo file (stesso motivo:
 * un badge non testuale non va allineato a "baseline" con un titolo
 * Cormorant grande).
 */
.vbo-pkgdet-headrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--4);
	margin-bottom: var(--wp--preset--spacing--6);
}

.vbo-pkgdet-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

/*
 * ".vbo-pkgdet-dates" compare in DUE posti (badge clonato qui in
 * ".vbo-pkgdet-headrow", pill "vera" spostata nella sidebar da
 * buildPackageDetailsSidebar()): stile base condiviso qui, la sidebar
 * sotto non lo ridichiara.
 */
.vbo-pkgdet-dates {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	flex-shrink: 0;
	width: auto;
	margin: 0;
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
	border-radius: var(--vik-radius);
	background: var(--wp--preset--color--background-alt);
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--xs);
}

.vbo-pkgdet-dates i {
	margin-right: 0;
	color: var(--wp--preset--color--accent-dark);
	font-size: 12px;
}

.vbo-pkgdet-dates-lbl {
	margin-right: 0;
	font-size: inherit;
}

.vbo-pkgdet-dates-ft {
	font-variant-numeric: lining-nums;
}

/*
 * Foto hero — estratta da ".vbo-pkgdet-topwrap" (JS) per stare a piena
 * larghezza sopra il layout a due colonne, non costretta nella sola
 * colonna contenuto. "width/height:auto" nativi (vikbooking_styles.css,
 * ".vbo-pkgdet-img img{width:auto;max-width:100%}") esplicitamente
 * sovrascritti: qui la foto deve riempire il contenitore, non centrarsi
 * alla propria dimensione naturale.
 */
.vbo-pkgdet-img {
	position: relative;
	width: 100%;
	max-width: none;
	margin: 0 0 var(--wp--preset--spacing--7);
	border-radius: var(--vik-radius);
	overflow: hidden;
}

.vbo-pkgdet-img img {
	display: block;
	width: 100%;
	max-width: none;
	height: 480px;
	margin: 0;
	object-fit: cover;
}

.vbo-pkgdet-minnights-badge {
	position: absolute;
	bottom: var(--wp--preset--spacing--4);
	left: var(--wp--preset--spacing--4);
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
	border-radius: var(--vik-radius);
	background: color-mix(in srgb, var(--wp--preset--color--ink) 55%, transparent);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-variant-numeric: lining-nums;
}

/*
 * Layout a due colonne — contenuto (topwrap, quanto resta dopo
 * l'estrazione di foto/prezzo/date) + sidebar. "align-items:start"
 * necessario perché la sidebar è "position:sticky" sotto: senza,
 * "stretch" (default grid) le darebbe l'altezza dell'intera riga,
 * vanificando lo sticky (l'elemento non avrebbe mai spazio libero in
 * cui "scorrere via" dal proprio contenitore).
 */
.vbo-pkgdet-layout {
	display: grid;
	grid-template-columns: 1fr 340px;
	align-items: start;
	gap: var(--wp--preset--spacing--8);
}

.vbo-pkgdet-topwrap {
	min-width: 0;
}

.vbo-pkgdet-sidebar {
	position: sticky;
	top: var(--wp--preset--spacing--6);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--6);
	padding: var(--wp--preset--spacing--6);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--vik-radius);
	background: var(--wp--preset--color--background);
}

.vbo-pkgdet-sidebar-price {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--3);
	padding-bottom: var(--wp--preset--spacing--6);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/*
 * Selettore scoped a "-price" per pareggiare la specificità del nativo
 * ".vbo-pkgdet-descrprice-block .vbo-pkgdet-cost .vbo-pkglist-pkg-price"
 * — vedi la stessa nota già fatta per ".vbo-pkglist-pkg-cost
 * .vbo-pkglist-pkg-price" più sopra in questo file.
 */
.vbo-pkgdet-sidebar-price .vbo-pkglist-pkg-price {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 500;
	font-variant-numeric: lining-nums;
}

.vbo-pkgdet-sidebar-price .vbo-pkglist-pkg-priceper {
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--xs);
}

.vbo-pkgdet-sidebar-price .vbo-pkglist-pkg-priceper:empty {
	display: none;
}

.vbo-pkgdet-sidebar-rooms-head {
	margin-bottom: var(--wp--preset--spacing--3);
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.vbo-pkgdet-sidebar-rooms-list {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vbo-pkgdet-sidebar-rooms-list li {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
}

/* Icona via CSS mask (stesso pattern di ".vbo-pkglist-pkg-benefits-icon"
   più sopra in questo file) — pittogramma "casa" per le camere. */
.vbo-pkgdet-sidebar-rooms-icon {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	background-color: var(--wp--preset--color--accent-dark);
	-webkit-mask: var(--vbo-icon-home) center / contain no-repeat;
	mask: var(--vbo-icon-home) center / contain no-repeat;
	--vbo-icon-home: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5 12 4l9 7.5'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3C/svg%3E");
}

.vbo-pkgdet-sidebar-cta {
	width: 100%;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
	text-align: center;
	font-size: var(--wp--preset--font-size--sm);
	cursor: pointer;
}

.vbo-pkgdet-sidebar-hint {
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--xs);
	text-align: center;
	line-height: 1.5;
}

@media (max-width: 1023px) {
	.vbo-pkgdet-layout {
		grid-template-columns: 1fr;
	}

	.vbo-pkgdet-sidebar {
		position: static;
	}
}

/*
 * Blocco descrizione — il nativo scoped ".vbo-pkgdet-descrprice-block
 * .vbo-pkgdet-descr{width:100%;border:0;border-bottom:1px solid ...}"
 * (nel breakpoint ristretto, vikbooking_styles.css) resta ora l'unico
 * figlio del blocco (il prezzo è stato spostato nella sidebar via JS):
 * niente più bordo/percentuali pensate per il vecchio affiancamento,
 * qui semplice testo scorrevole. Tipografia del rich text (h2-h4/ul/p)
 * lasciata alla cascata nativa del tema (theme.css/editor-styles),
 * nessuna riscrittura di struttura richiesta dal brief.
 */
.vbo-pkgdet-descrprice-block {
	display: block;
	width: auto;
	border-top: 0;
	border-bottom: 0;
	background: transparent;
	margin: 0;
}

/*
 * Selettore scoped a "-descrprice-block" per pareggiare la specificità
 * del nativo ".vbo-pkgdet-descrprice-block .vbo-pkgdet-descr{float:left;
 * width:80%;...}" (pensato per l'affiancamento col prezzo, ora spostato
 * in sidebar via JS): un selettore semplice ".vbo-pkgdet-descr" qui
 * perderebbe su "float"/"width"/"display" nonostante questo foglio
 * carichi dopo — verificato con Playwright: senza "float:none" esplicito
 * qui, il contenitore (nessun clearfix nativo) collassava a un'altezza
 * quasi nulla, con il blocco Condizioni sottostante che finiva
 * sovrapposto alla descrizione ancora flottante.
 */

.vbo-pkgdet-descrprice-block .vbo-pkgdet-descr p:first-child {
	margin-top: 0;
}
.vbo-pkgdet-descrprice-block .vbo-pkgdet-descr {
	float: none;
	display: block;
	width: auto;
	min-height: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.7;
}

.vbo-pkgdet-descr :is( h1, h2, h3, h4 ) {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
}

.vbo-pkgdet-condsdates-block {
	display: block;
	width: auto;
	text-align: left;
	margin-top: var(--wp--preset--spacing--7);
	padding-top: var(--wp--preset--spacing--7);
	border-top: 1px solid var(--wp--preset--color--line);
}

.vbo-pkgdet-conds-head {
	margin-bottom: var(--wp--preset--spacing--3);
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/*
 * Il nativo porta ".vbo-pkgdet-conds{border:2px solid ...;border-
 * radius:40px;padding:15px;text-align:left}" (vikbooking_styles.css,
 * pensato per una pillola bordata) — sostituito da un riquadro pieno
 * background-alt, radius 2px, coerente col resto del sistema.
 */
.vbo-pkgdet-conds {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--3);
	border: 0;
	border-radius: var(--vik-radius);
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
	background: var(--wp--preset--color--background-alt);
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.6;
	text-align: left;
}

.vbo-pkgdet-conds p:first-of-type {
	margin-top: 0;
}

.vbo-pkgdet-conds p:last-child {
	margin-bottom: 0;
}

/* Icona via CSS mask, stesso pattern delle altre icone decorative del
   file — punto esclamativo in cerchio, per una nota informativa. */
.vbo-pkgdet-conds-icon {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	background-color: var(--wp--preset--color--accent);
	-webkit-mask: var(--vbo-icon-info) center / contain no-repeat;
	mask: var(--vbo-icon-info) center / contain no-repeat;
	--vbo-icon-info: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5'/%3E%3Ccircle cx='12' cy='8' r='.3' fill='black' stroke='black'/%3E%3C/svg%3E");
}

/*
 * Benefits — il nativo (".vbo-pkgdet-benefits, .vbo-pkg-showprc-
 * benefits") porta bordi doppi spessi + testo centrato 1.4em
 * (vikbooking_styles.css, pensato per un unico claim vistoso): azzerato
 * qui, il contenuto interno (".vbo-pkglist-pkg-benefits-head/-list/
 * -icon/-text") riusa GIÀ lo stile scritto per la Packages List più
 * sopra in questo file — stessi nomi di classe, vedi fillBenefitsBlock()
 * in vikbooking-dom.js.
 */
.vbo-pkgdet-benefits {
	margin: var(--wp--preset--spacing--7) 0 0;
	padding: var(--wp--preset--spacing--7) 0 0;
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 0;
	text-align: left;
	font-size: inherit;
	font-weight: inherit;
}

/*
 * Sezione camere — titolo/sottotitolo nuovi (JS), poi l'elenco.
 */
.vbo-pkgdet-roomswrap {
	margin-top: var(--wp--preset--spacing--9);
	scroll-margin-top: var(--wp--preset--spacing--6);
}

.vbo-pkgdet-roomsttl {
	margin: 0 0 var(--wp--preset--spacing--2);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

.vbo-pkgdet-rooms-subheading {
	margin: 0 0 var(--wp--preset--spacing--6);
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--base);
}

.vbo-pkgdet-roomslist {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--5);
}

/*
 * Card camera — il nativo porta un semplice bordo 1px + margin 5px
 * (vikbooking_styles.css): radius 2px + spaziatura della scala qui,
 * "overflow:hidden" per gli angoli della foto.
 */
.vbo-pkgdet-room-container {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--vik-radius);
	margin: 0;
	overflow: hidden;
	background: var(--wp--preset--color--background);
}

/*
 * Selettore scoped a "-room-container" per pareggiare la specificità del
 * nativo ".vbo-pkgdet-room-container .vbo-pkgdet-room-outer{display:flex;
 * flex-wrap:wrap;width:100%}": un selettore semplice qui perderebbe su
 * "flex-wrap"/"width" nonostante questo foglio carichi dopo — con
 * "flex-wrap:wrap" nativo ancora attivo, foto/testo/CTA (pensati per
 * stare su una riga sola, "flex:0 0 220px"/"flex:1 1 auto"/"flex:0 0
 * auto" sotto) andrebbero a capo su schermi stretti prima del breakpoint
 * dedicato a 767px.
 */
.vbo-pkgdet-room-container .vbo-pkgdet-room-outer {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	width: auto;
	padding: 0;
}

.vbo-pkgdet-room-img {
	flex: 0 0 220px;
	width: auto;
	float: none;
	text-align: left;
}

.vbo-pkgdet-room-img img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
}

.vbo-pkgdet-room-det {
	flex: 1 1 auto;
	width: auto;
	float: none;
	min-width: 0;
	padding: var(--wp--preset--spacing--5) var(--wp--preset--spacing--6);
}

.vbo-pkgdet-roomname {
	margin: 0 0 var(--wp--preset--spacing--2);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

.vbo-pkgdet-room-shortdescr {
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.6;
}

/*
 * Capienza clonata nella riga collassata (enhancePackageDetailsRooms()):
 * il nativo la rende come badge tondo colorato pensato per il form di
 * ricerca (".vbmaximgdet i", cerchio 34px) — qui solo icona+numero in
 * linea, coerente con le altre righe meta del tema.
 */
.vbo-pkgdet-room-det .vbmaxminpeopleroom {
	display: flex;
	flex-wrap: wrap;
	width: auto;
	margin: var(--wp--preset--spacing--3) 0 0;
}

.vbo-pkgdet-room-det .vbmaxminpeopleroom > div {
	float: none;
	display: inline-flex;
	align-items: center;
	margin: 0 var(--wp--preset--spacing--4) 0 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 400;
	color: var(--wp--preset--color--text-soft);
}

.vbo-pkgdet-room-det .vbmaximgdet i {
	float: none;
	width: auto;
	height: auto;
	margin: 0 var(--wp--preset--spacing--1) 0 0;
	border-radius: 0;
	background: none !important;
	color: var(--wp--preset--color--accent-dark);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1;
}

.vbo-pkgdet-room-det .vbmaxlabeldet,
.vbo-pkgdet-room-det .vbmaxnumberdet {
	margin: 0 var(--wp--preset--spacing--1) 0 0;
}

.vbo-pkgdet-room-booknow {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	width: auto;
	float: none;
	padding: 0 var(--wp--preset--spacing--6);
	text-align: center;
}

.vbo-pkgdet-room-booknow-btn {
	white-space: nowrap;
}

/*
 * Sfondo grigio neutro, non il beige "background-alt" delle chip —
 * riusa la stessa custom property nativa del box form nella Room
 * Details "classic"/"listing" (".vbo-listing-details-costroomdet-
 * inner", "--vbo-light-grey-bg-color: #f6f6f6", vikbooking_styles.css),
 * verificato con Playwright sul valore RGB realmente applicato lì
 * invece di indovinarlo. Stessa variabile nativa, non un valore
 * ridichiarato a mano, per restare in sync se cambia lato plugin.
 */
.vbo-pkgdet-room-inner {
	padding: var(--wp--preset--spacing--6);
	border-top: 1px solid var(--wp--preset--color--line);
	background: var(--vbo-light-grey-bg-color, #f6f6f6);
}

.vbo-pkgdet-room-thumbs-cont {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
	width: auto;
	margin: 0 0 var(--wp--preset--spacing--5);
}

.vbo-pkgdet-room-thumbs-cont > div {
	float: none;
	margin: 0;
}

.vbo-pkgdet-room-thumb img {
	height: 64px;
	width: auto;
	border-radius: var(--vik-radius);
}

.vbo-seldates-cont.vbo-pkgdet-room-form {
	padding: 0;
}

.vbo-pkgdet-room-form > h4 {
	margin: 0 0 var(--wp--preset--spacing--4);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

.vbo-pkgdet-room-form .vbdivsearch {
	box-sizing: border-box;
} 

/*
 * L'originale ".vbmaxminpeopleroom" resta nel form espanso (JS lo CLONA
 * nella riga collassata, non lo sposta — vedi enhancePackageDetailsRooms()
 * in vikbooking-dom.js), ma qui è ormai un doppione nel suo stile
 * nativo a badge tondo (mai restyled per questo contesto): nascosto,
 * l'informazione è già leggibile sopra nella riga collassata.
 */
.vbo-pkgdet-room-form .vbmaxminpeopleroom {
	display: none;
}

@media (max-width: 767px) {
	.vbo-pkgdet-room-outer {
		flex-direction: column;
	}

	.vbo-pkgdet-room-img {
		flex-basis: auto;
		height: 200px;
	}

	.vbo-pkgdet-room-booknow {
		padding: var(--wp--preset--spacing--5);
	}
}

/*
 * Form di ricerca per-camera (".vbdivsearch", dentro ".vbo-pkgdet-room-
 * form") — riuso ESATTO del linguaggio visivo underline/compatto già
 * approvato per la Room Details "classic" (shortcode-indipendente,
 * scoped ".vbo-room-details-wrap + .vbo-roomdet-calscontainer" molto
 * più sopra in questo file): stesso vocabolario di classi native
 * (".vb-search-inner", ".vbo-search-inpblock", ".input-group",
 * ".vbo-search-num-adults-entry"/"-children-entry"), qui semplicemente
 * scoped a ".vbo-pkgdet-room-form" invece che al fratello-adiacente
 * Classic. A differenza della pagina di ricerca standalone
 * (".vbo-search-mainview"), qui NON c'è il popover "Camere e ospiti"
 * con stepper +/-: il nativo di questa vista stampa già Adults/Children
 * come singole select dirette (mai un pannello Rooms multiplo in questo
 * contesto — un pacchetto prenota sempre 1 camera alla volta), stessa
 * scelta già fatta per Room Details classic. Ogni camera ha il proprio
 * markup con ID univoci per camera già nativi (site/views/
 * packagedetails/tmpl/default.php: "checkindate{idroom}" ecc.), quindi
 * più istanze di questo stesso form convivono sulla stessa pagina senza
 * conflitti — nessun adattamento JS necessario per questo, solo CSS.
 */
.vbo-pkgdet-room-form .vb-search-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	width: auto;
	gap: var(--wp--preset--spacing--6);
}

.vbo-pkgdet-room-form .vb-search-inner > div {
	float: none;
	width: auto;
	margin: 0;
}

.vbo-pkgdet-room-form .vbo-search-inpblock {
	margin: 0;
}

.vbo-pkgdet-room-form .vbo-search-inpblock label {
	display: block;
	margin: 0 0 var(--wp--preset--spacing--1);
	color: var(--wp--preset--color--text-soft);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/*
 * "height" esplicita, non lasciata al contenuto: l'altezza naturale di
 * un "<input>" e quella di una "<select>" NON coincidono a parità di
 * font-size/line-height (verificato con Playwright: 47px contro 27px
 * con lo stesso font-size--md) — un normale scarto del motore di
 * rendering tra i due elementi, non qualcosa che margin/padding da soli
 * risolvono. Stessa "height" qui e sulle select sotto, cosi il
 * bordo/sottolineatura di entrambi cade sulla stessa riga.
 */
.vbo-pkgdet-room-form .input-group {
	display: flex;
	align-items: center;
	height: 30px;
	box-sizing: border-box;
	gap: var(--wp--preset--spacing--1);
	padding-bottom: var(--wp--preset--spacing--1);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.vbdivsearch .vb-search-inner .vbo-search-inpblock .input-group > input {
	flex: 1;
	height: 100%;
	border: 0;
	padding: 0;
	background: transparent;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1;
	color: var(--wp--preset--color--ink);
}

.vbo-pkgdet-room-form .input-group .vbo-caltrigger {
	width: auto;
	height: auto;
	padding: 0;
	border: none;
	border-radius: 0;
	float: none;
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1;
}

/*
 * Selettore replicato a 3 classi (".vbdivsearch .vb-search-inner >
 * .vbo-search-num-racblock", vikbooking_styles.css) per pareggiarne la
 * specificità: quella regola nativa porta di suo "display:flex" (mai
 * dichiarato altrove in questo file finora, quindi vinceva comunque) +
 * "margin-left:10px;margin-right:12px" + un "> div{flex:1}" che stira
 * ".vbo-search-num-aduchild-block" e "#vbjstotnights" alla STESSA
 * larghezza — risultato, "Nights: N" (quando valorizzato) si trovava
 * incollato ad Adults/Children senza alcun distacco. "gap" qui al posto
 * del margin nativo, "flex:0 0 auto" sui figli al posto di "flex:1".
 */
.vbo-pkgdet-room-form .vb-search-inner > .vbo-search-num-racblock {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 0 var(--wp--preset--spacing--4);
	width: auto;
	margin: 0;
}

.vbo-pkgdet-room-form .vb-search-inner > .vbo-search-num-racblock > div {
	flex: 0 0 auto;
}

.vbo-pkgdet-room-form .vbo-search-num-rooms {
	width: auto;
}

.vbo-pkgdet-room-form .vb-search-inner > .vbo-search-num-racblock > .vbo-search-num-aduchild-block {
	display: flex;
	flex-wrap: wrap;
	flex-basis: 100%;
	gap: var(--wp--preset--spacing--6);
	width: auto;
	margin: 0;
}

/*
 * "padding/margin:0" espliciti: il nativo porta di suo ".vbo-search-num-
 * aduchild-entry{padding:0 0 12px;margin:0 0 10px}" (spazio pensato per
 * il vecchio layout impilato) — irrilevante per l'allineamento dei
 * campi (solo spazio finale, non sposta l'inizio dei figli), ma
 * comunque ripulito per coerenza con lo stesso trattamento "non fidarsi
 * di quanto non è esplicitamente sovrascritto" già in uso nel resto del
 * file.
 */
.vbo-pkgdet-room-form .vbo-search-num-aduchild-entry {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--6);
	padding: 0;
	margin: 0;
}

.vbo-pkgdet-room-form .vbo-search-roomnum {
	display: none;
}

.vbo-pkgdet-room-form .vbo-search-num-adults-entry-label,
.vbo-pkgdet-room-form .vbo-search-num-children-entry-label {
	display: block;
	margin: 0 0 var(--wp--preset--spacing--1);
	color: var(--wp--preset--color--text-soft);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/*
 * Stessa "height"/"box-sizing" di ".input-group" più sopra (30px +
 * padding-bottom 4px + bordo 1px = 35px in entrambi i casi): senza
 * questo, la sottolineatura di Adults/Children cadeva 16px più in alto
 * di quella di Check-in/Check-out (stesso font-size--md, ma "<select>"
 * e "<input>" hanno un'altezza naturale diversa — vedi nota sopra).
 */
.vbo-pkgdet-room-form .vbo-search-num-adults-entry select,
.vbo-pkgdet-room-form .vbo-search-num-children-entry select {
	height: 30px;
	box-sizing: border-box;
	line-height: 30px;
	padding: 0 var(--wp--preset--spacing--5) var(--wp--preset--spacing--1) 0;
	border: none;
	border-bottom: 1px solid var(--wp--preset--color--line);
	border-radius: 0;
	background-color: transparent;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath fill='%232C2C2C' d='M4 5 0 0h8z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 8px 5px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	font-family: var(--wp--preset--font-family--display);
	font-variant-numeric: lining-nums;
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--ink);
	cursor: pointer;
}

/*
 * "[id^=]" e non "#vbjstotnights": l'id reale è "vbjstotnights{idroom}"
 * (univoco per camera, site/views/packagedetails/tmpl/default.php) — un
 * selettore per id esatto non avrebbe mai trovato l'elemento su questa
 * pagina. "flex-basis:100%" lo forza su una riga propria dentro
 * ".vbo-search-num-racblock" (ora "flex-wrap:wrap", vedi sopra) invece
 * di restare incollato ad Adults/Children sulla stessa riga.
 */
.vbo-pkgdet-room-form [id^="vbjstotnights"] {
	flex-basis: 100%;
	margin-top: var(--wp--preset--spacing--2);
	color: var(--wp--preset--color--text-soft);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
}

.vbo-pkgdet-room-form [id^="vbjstotnights"]:empty {
	margin-top: 0;
}

.vbo-pkgdet-room-form .vbo-search-submit {
	width: auto;
	margin: 0;
}

.vbo-pkgdet-room-form .vbo-search-submit .vbdetbooksubmit {
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--6);
}

@media (max-width: 767px) {
	.vbo-pkgdet-room-form .vb-search-inner {
		flex-direction: column;
		align-items: stretch;
	}

	.vbo-pkgdet-room-form .vbo-search-num-aduchild-entry {
		gap: var(--wp--preset--spacing--4);
	}

	.vbo-pkgdet-room-form .vbo-search-submit .vbdetbooksubmit {
		width: 100%;
	}
}

/*
 * 860-1023px — a queste larghezze ".vbo-pkgdet-layout" è già a colonna
 * singola (sidebar sotto, non più accanto, vedi il breakpoint 1023px
 * più sopra in questo file), ma la riga del form restava comunque
 * ".flex-wrap:wrap" senza controllo: Check-in/Check-out/Adults/Children/
 * Book Now non ci stavano più su una riga sola e il browser li
 * ridistribuiva su più righe in modo incoerente (Children isolato sotto
 * Adults, "Nights"/CTA fuori posto — segnalato con screenshot).
 * "flex-wrap:nowrap" impedisce quella redistribuzione automatica; il gap
 * ridotto qui (solo in questa fascia) libera lo spazio che altrimenti
 * mancherebbe per stare comunque su una riga sola. Non tocca nulla sotto
 * 860px, dove il comportamento attuale resta quello di prima (richiesta
 * esplicita: non modificare il responsive sotto quella soglia).
 */
@media (min-width: 860px) {
	.vbo-pkgdet-room-form .vb-search-inner {
		flex-wrap: nowrap;
	}
}

@media (min-width: 860px) and (max-width: 1023px) {
	.vbo-pkgdet-room-form .vb-search-inner {
		gap: var(--wp--preset--spacing--4);
	}

	/*
	 * "flex-wrap:nowrap" anche qui: ".vbo-search-num-aduchild-entry" porta
	 * di suo "flex-wrap:wrap" (serve al breakpoint ≤767px, dove Adults e
	 * Children possono impilarsi) — lasciato attivo anche qui, con la riga
	 * esterna ormai "nowrap" e quindi più stretta, Children scendeva
	 * comunque sotto Adults per conto proprio (stesso sintomo, un livello
	 * più interno).
	 */
	.vbo-pkgdet-room-form .vbo-search-num-aduchild-entry {
		flex-wrap: nowrap;
		gap: var(--wp--preset--spacing--4);
	}

	/*
	 * "flex:0 0 auto" esplicito su ogni campo della riga: senza,
	 * ".vbo-search-submit" (nessun "flex-basis" proprio, solo "width:
	 * auto") finiva per assorbire lo spazio lasciato libero dagli altri
	 * campi quando si restringevano, arrivando a superare i 700px di
	 * larghezza a 860px — verificato con Playwright.
	 */
	.vbo-pkgdet-room-form .vbo-search-inpblock-checkin,
	.vbo-pkgdet-room-form .vbo-search-inpblock-checkout,
	.vbo-pkgdet-room-form .vbo-search-num-racblock,
	.vbo-pkgdet-room-form .vbo-search-submit {
		flex: 0 0 auto;
	}

	.vbo-pkgdet-room-form .vbo-search-inpblock-checkin,
	.vbo-pkgdet-room-form .vbo-search-inpblock-checkout {
		min-width: 128px;
	}

	.vbo-pkgdet-room-form .vbo-search-submit .vbdetbooksubmit {
		padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
	}
}

/* -----------------------------------------------------------
   Bookings List — shortcode [vikbooking view="orderslist"]

   Area riservata dove l'ospite recupera le proprie prenotazioni con
   Confirmation Number o PIN Code (site/views/orderslist/tmpl/default.php).
   Nativo: form a riga singola su sfondo grigio piatto
   (".vbo-bookings-list-search", vikbooking_styles.css) + risultati come
   pseudo-tabella a 6 colonne fisse via CSS grid (icona di stato senza
   testo, numero di conferma come unico link, nessun CTA "Details").
   Restyling completo su mockup approvato: header con eyebrow/sottotitolo,
   form su sfondo background-alt con input underline, risultati come card
   (badge di stato testuale, numero in Cormorant, blocco date a 3 colonne,
   CTA outline) — stessa grammatica di card/badge già approvata per
   Search Results, Pacchetti e Booking Details (".vbo-booking-details-
   head-confirmed/-pending", più sopra in questo file).

   Eyebrow/sottotitolo dell'header, testo del badge di stato e CTA
   "Details" non esistono nel markup nativo: costruiti da
   initBookingsList() in vikbooking-dom.js (vedi commenti lì) — le classi
   ".vbo-bookings-list-eyebrow"/"-subtitle"/"-status"/"-card-*" qui sotto
   sono tutte introdotte da quella funzione, non native.
   ----------------------------------------------------------- */

/*
 * Header — ".vbsearchorderinner" nativo contiene un unico nodo di testo
 * (".vbsearchordertitle", stringa VBSEARCHCONFIRMNUMB già tradotta da
 * VikBooking, "Search Bookings"): qui diventa un blocco centrato con
 * eyebrow sopra e sottotitolo sotto, stessa gerarchia di
 * ".search-page-header" (theme.css, pagina "Cerca disponibilità").
 * ".vbsearchorderdiv" nativo è "display:inline-block" (vikbooking_
 * styles.css): ridichiarato "block" perché il centraggio con margin:auto
 * sotto non funzionerebbe altrimenti.
 */
.vbsearchorderdiv {
	display: block;
	box-sizing: border-box;
	max-width: 760px;
	margin: 0 auto var(--wp--preset--spacing--7);
}

.vbsearchorderinner {
	clear: none;
	float: none;
	width: auto;
	margin: 0 0 var(--wp--preset--spacing--6);
	padding: 0;
	border-bottom: 0;
	text-align: center;
}

.vbo-bookings-list-eyebrow {
	display: block;
	margin-bottom: var(--wp--preset--spacing--2);
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.vbsearchordertitle {
	display: block;
	position: static;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 500;
	color: var(--wp--preset--color--text);
}

.vbo-bookings-list-subtitle {
	max-width: 480px;
	margin: var(--wp--preset--spacing--3) auto 0;
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--sm);
}

/*
 * Form — sfondo beige piatto invece del grigio nativo, stesso trattamento
 * "box" già usato per il widget di ricerca disponibilità. "flex-wrap"
 * sfrutta l'ordine nativo dei figli (span label, poi i due input): la
 * label (già "display:block" nativo, vikbooking_styles.css) va a capo da
 * sola con "flex-basis:100%", input e submit condividono la riga sotto —
 * nessuna necessità di JS per questo riordino, il markup nativo è già
 * raggiungibile via CSS puro.
 */
.vbo-bookings-list-search {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
	margin-bottom: 0;
	padding: var(--wp--preset--spacing--5) var(--wp--preset--spacing--6);
	background: var(--wp--preset--color--background-alt);
	border-radius: var(--vik-radius);
}

.vbo-bookings-list-search span {
	flex: 1 1 100%;
	margin-bottom: 0;
	color: var(--wp--preset--color--text-soft);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
}

/*
 * "padding" e "font-size" arrivano nativi con "!important"
 * (".vbo-bookings-list-search input[name=\"confirmnumber\"]",
 * vikbooking_styles.css): stesso trattamento già in uso nel file quando
 * il nativo stesso forza una proprietà con "!important" (vedi
 * ".vbo-pref-bordercolor" ecc. più sopra) — l'unico modo per vincere la
 * cascata è pareggiare, non uno scarto dalla regola "mai !important" del
 * tema.
 */
.vbo-bookings-list-search input[name="confirmnumber"] {
	flex: 1 1 220px;
	min-width: 0;
	margin: 0 !important;
	padding: var(--wp--preset--spacing--2) 0 !important;
	border: none;
	border-bottom: 1.5px solid var(--wp--preset--color--accent);
	border-radius: 0;
	background: transparent;
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--md) !important;
	font-variant-numeric: lining-nums;
	box-sizing: border-box;
}

/* Stesso richiamo di focus di ".vbinput" ecc. più sopra in questo file. */
.vbo-bookings-list-search input[name="confirmnumber"]:focus {
	outline: none;
	border-bottom-color: var(--wp--preset--color--accent-dark);
	box-shadow: 0 3px 0 -2px var(--vik-accent-15);
}

/*
 * ".vbo-pref-color-btn" (più sopra in questo file) risolve già sfondo/
 * bordo/colore/radius del bottone "Search" (stesso meccanismo di
 * "Preferred Colors" di ogni altro bottone nativo del plugin): qui resta
 * solo da vincere il "padding"/"font-size" nativi "!important" di
 * ".vbsearchordersubmit" (vikbooking_styles.css), stesso motivo/
 * convenzione del blocco sopra per l'input.
 */
.vbo-bookings-list-search .vbsearchordersubmit {
	flex: 0 0 auto;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--6) !important;
	font-size: var(--wp--preset--font-size--sm) !important;
}

@media (max-width: 767px) {
	.vbo-bookings-list-search input[name="confirmnumber"],
	.vbo-bookings-list-search .vbsearchordersubmit {
		flex-basis: 100%;
	}
}

/*
 * Messaggio "PIN/numero non valido" — unico stato "nessun risultato"
 * effettivamente raggiungibile dal codice nativo (VikError::raiseWarning,
 * vedi orderslist/view.html.php): stampato come
 * ".notice.is-dismissible.notice-error" (libraries/html/system/
 * messages.php) subito PRIMA di ".vbsearchorderdiv", dentro lo stesso
 * ".wrap.plugin-container" — nessun wrapper dedicato nativo da cui
 * agganciarsi. ":has()" scopes il box a QUESTA pagina (dove un fratello
 * ".vbsearchorderdiv" segue nello stesso contenitore) senza toccare gli
 * stessi ".notice"/".notice-error" di altre view del plugin che li
 * condividono (es. Search, date non valide) — stesso principio già usato
 * altrove nel file per "body:has(...)".
 *
 * "display:block": il nativo forza ".notice{display:inline-block;
 * width:100%}" (vikbooking_styles.css) — mai ridichiarato finora in
 * questo file, quindi vince comunque nonostante non sia "!important";
 * senza "display:block" esplicito qui, "margin:auto" sotto non
 * centrerebbe un elemento inline-block. "!important" su background/
 * border/colore del testo: il nativo forza QUESTE con "!important"
 * (".notice-error"/".notice-error > p") — stesso trattamento già in uso
 * nel file quando il nativo stesso forza una proprietà con "!important"
 * (vedi ".vbo-pref-bordercolor" ecc. più sopra).
 */
.wrap.plugin-container:has(.vbsearchorderdiv) .notice-error,
.vbo-bookings-list-empty {
	display: block;
	box-sizing: border-box;
	max-width: 760px;
	margin: 0 auto var(--wp--preset--spacing--7);
	padding: var(--wp--preset--spacing--5) var(--wp--preset--spacing--6);
	background: color-mix(in srgb, var(--vbo-color-error) 6%, var(--wp--preset--color--background)) !important;
	border: 1px solid color-mix(in srgb, var(--vbo-color-error) 30%, transparent) !important;
	border-radius: var(--vik-radius);
	text-align: center;
}

.wrap.plugin-container:has(.vbsearchorderdiv) .notice-error p,
.vbo-bookings-list-empty p {
	margin: 0 !important;
	color: var(--vbo-color-error) !important;
	font-size: var(--wp--preset--font-size--sm);
}

.wrap.plugin-container:has(.vbsearchorderdiv) .notice-error p::before,
.vbo-bookings-list-empty p::before {
	content: "";
	display: block;
	width: 26px;
	height: 26px;
	margin: 0 auto var(--wp--preset--spacing--2);
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9 9l6 6M15 9l-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9 9l6 6M15 9l-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/*
 * ".vbo-bookings-list-empty" (safety net JS per il caso limite "cliente
 * valido, zero prenotazioni" — vedi initBookingsListEmptyState() in
 * vikbooking-dom.js) riusa lo stesso box del messaggio di errore nativo
 * sopra, ma non è un errore: colore neutro invece di "--vbo-color-error",
 * icona "nessun risultato" (lente, non cerchio con X) al posto
 * dell'icona di errore. "!important" qui vince sulla stessa proprietà
 * dichiarata "!important" nel selettore combinato sopra (necessario lì
 * solo per battere il nativo ".notice-error"): stesso elemento, va
 * ripetuto anche qui per lo stesso motivo.
 */
.vbo-bookings-list-empty {
	background: var(--wp--preset--color--background-alt) !important;
	border-color: var(--wp--preset--color--line) !important;
}

.vbo-bookings-list-empty p {
	color: var(--wp--preset--color--text-soft) !important;
}

.vbo-bookings-list-empty p::before {
	-webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/*
 * Risultati — intestazione tabella nativa nascosta: ogni card porta già
 * le proprie etichette (".vbo-bookings-list-card-datecol-lbl" sotto), una
 * riga di intestazione separata sopra le card è ridondante.
 */
.vbo-bookings-list-table-head {
	display: none;
}

.vbo-bookings-list-container {
	max-width: 760px;
	margin: 0 auto;
}

.vbo-bookings-list-table-body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
}

/*
 * Riga → card: sostituisce interamente il grid nativo a 6 colonne fisse
 * (".vbo-bookings-list-table-head-row, .vbo-bookings-list-table-body
 * .vbo-bookings-list-table-row{display:grid;grid-template-columns:50px
 * 2fr 2fr 1fr 1fr 50px}", vikbooking_styles.css) — dopo initBookingsList-
 * Cards() la riga contiene solo 3 figli nuovi (".vbo-bookings-list-card-
 * lead/-dates/-cta"), il grid a 6 colonne non ha più senso. "border-
 * radius:12px" (non lo standard 2px del tema) è lo scarto intenzionale
 * richiesto dal mockup approvato per questa card, stesso trattamento
 * riservato altrove nel tema quando il mockup lo richiede esplicitamente
 * (vedi ".vbo-bookings-list-search" sopra, radius nativo 10px non
 * toccato per lo stesso motivo).
 */
.vbo-bookings-list-table-body .vbo-bookings-list-table-row {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--wp--preset--spacing--4);
	margin-bottom: 0;
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
	background: var(--wp--preset--color--background);
	border: 0.5px solid var(--wp--preset--color--line);
	border-radius: 12px;
	box-shadow: none;
	font-size: var(--wp--preset--font-size--sm);
}

@media (min-width: 768px) {
	.vbo-bookings-list-table-body .vbo-bookings-list-table-row {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--5);
	}
}

/*
 * Lead — badge di stato + numero di conferma + data prenotazione. Su
 * mobile badge e numero condividono la stessa riga ("flex-wrap" + data
 * "flex-basis:100%" la spinge a capo da sola, ordine invariato); da
 * tablet in su la colonna torna verticale come nel mockup approvato
 * (badge sopra, numero sotto, data in fondo).
 */
.vbo-bookings-list-card-lead {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--1) var(--wp--preset--spacing--3);
}

@media (min-width: 768px) {
	.vbo-bookings-list-card-lead {
		flex: 0 1 auto;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--2);
		min-width: 0;
	}
}

/*
 * Badge di stato — stessa grammatica "pill outline + icona a sinistra"
 * già approvata per ".vbo-booking-details-head-confirmed/-pending" più
 * sopra in questo file (mask + currentColor, non un'icona duplicata per
 * variante): classi nuove perché il markup di questa pagina è un'altra
 * view (nessun elemento nativo equivalente qui, solo un'icona senza
 * testo — vedi initBookingsListCards() in vikbooking-dom.js). "Cancelled"
 * qui è neutro/grigio (non rosso come ".vbo-booking-details-head-
 * cancelled"): scelta del mockup approvato per restare una lista
 * scorrevole di stati, non un esito enfatizzato come nella pagina di
 * dettaglio della singola prenotazione.
 */
.vbo-bookings-list-status {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--1);
	flex-shrink: 0;
	padding: var(--wp--preset--spacing--1) var(--wp--preset--spacing--3);
	border: 1px solid currentColor;
	border-radius: 100px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
}

.vbo-bookings-list-status::before {
	content: "";
	flex-shrink: 0;
	width: 12px;
	height: 12px;
	background-color: currentColor;
	-webkit-mask: var(--vbo-bkl-status-icon) center / contain no-repeat;
	mask: var(--vbo-bkl-status-icon) center / contain no-repeat;
}

.vbo-bookings-list-status-standby {
	--vbo-bkl-status-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E");
	background: var(--vik-accent-08);
	border-color: var(--vik-accent-35);
	color: var(--wp--preset--color--accent-dark);
}

.vbo-bookings-list-status-confirmed {
	--vbo-bkl-status-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12l3 3 5-6'/%3E%3C/svg%3E");
	background: rgba(91, 122, 91, 0.1);
	border-color: rgba(91, 122, 91, 0.4);
	color: #4f6b4f;
}

.vbo-bookings-list-status-cancelled {
	--vbo-bkl-status-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9 9l6 6M15 9l-6 6'/%3E%3C/svg%3E");
	background: rgba(91, 86, 77, 0.08);
	border-color: rgba(91, 86, 77, 0.3);
	color: var(--wp--preset--color--text-soft);
}

.vbo-bookings-list-card-number {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
	font-variant-numeric: lining-nums;
}

.vbo-bookings-list-card-number:hover {
	color: var(--wp--preset--color--accent-dark);
	text-decoration: underline;
}

.vbo-bookings-list-card-date {
	flex-basis: 100%;
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--xs);
	font-variant-numeric: lining-nums;
}

@media (min-width: 768px) {
	.vbo-bookings-list-card-date {
		flex-basis: auto;
	}
}

/*
 * Blocco date — Check-in / freccia / Check-out / Notti. Stessa struttura
 * "label uppercase piccola + valore sotto" per tutte e 3 le colonne
 * (nessun componente diverso per "Notti", solo il colore): il pattern
 * "cerchio bianco" del widget di ricerca orizzontale non si applica qui,
 * risulterebbe disallineato senza un valore numerico isolato da mostrare
 * (vedi anche il brief). "flex-wrap" lascia "Notti" andare a capo da
 * sola sui viewport più stretti se non ci sta accanto alla coppia
 * check-in/check-out, invece di comprimere il testo.
 */
.vbo-bookings-list-card-dates {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
}

@media (min-width: 768px) {
	.vbo-bookings-list-card-dates {
		flex: 1 1 auto;
		justify-content: center;
	}
}

.vbo-bookings-list-card-datecol {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.vbo-bookings-list-card-datecol-lbl {
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.vbo-bookings-list-card-datecol-val {
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--md);
	font-variant-numeric: lining-nums;
}

.vbo-bookings-list-card-datecol-nights .vbo-bookings-list-card-datecol-val {
	color: var(--wp--preset--color--accent);
	font-weight: 500;
}

.vbo-bookings-list-card-arrow {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	align-self: center;
	margin-top: var(--wp--preset--spacing--4);
	background-color: var(--wp--preset--color--text-soft);
	opacity: 0.6;
	-webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/*
 * CTA "Details" — stessa grammatica outline già usata per il CTA
 * "Details" dei risultati di ricerca non disponibili
 * (".vbo-searchresults-classic-wrap .vbo-result-unavailable" più sopra in
 * questo file): sfondo trasparente, bordo/testo accent, hover pieno.
 */
.vbo-bookings-list-card-cta {
	flex-shrink: 0;
	width: 100%;
}

@media (min-width: 768px) {
	.vbo-bookings-list-card-cta {
		width: auto;
	}
}

.vbo-bookings-list-card-details {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--5);
	background: transparent;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: var(--vik-radius);
	color: var(--wp--preset--color--accent);
	text-align: center;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	transition: background-color 0.2s ease, color 0.2s ease;
}

@media (min-width: 768px) {
	.vbo-bookings-list-card-details {
		display: inline-block;
		width: auto;
		white-space: nowrap;
	}
}

.vbo-bookings-list-card-details:hover {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
}

@media (max-width: 767px) {
	.vbsearchorderdiv,
	.vbo-bookings-list-container,
	.wrap.plugin-container:has(.vbsearchorderdiv) .notice-error,
	.vbo-bookings-list-empty {
		max-width: none;
	}
}

/* -----------------------------------------------------------
   Operator Login — pagina "Operator Login" (nessuno shortcode,
   site/views/operators/tmpl/default_login.php)

   Due metodi nativi di accesso operatore: codice di autenticazione
   univoco (".vbo-operators-authcode", assegnato lato admin
   all'operatore) oppure username/password WP classico
   (".loginblock", riusa wp_login_url() con i nomi campo nativi WP
   "log"/"pwd"). Nativo: due card sempre visibili fianco a fianco su
   desktop (".vbo-operators-login-wrap", display:flex,
   justify-content:space-around), con un divisore verticale
   (".loginblock", border-left) a separarle — nessuna gerarchia tra
   i due metodi. Titolo del box username/password e testo del
   bottone submit di ENTRAMBI i form condividono la stessa stringa
   nativa "Login" (VBREGSIGNIN/VBREGSIGNINBTN, site.php): ambiguo se
   il box resta sempre visibile alla pari del box primario.

   Restyling: codice di autenticazione come metodo primario, sempre
   visibile per intero, in un contenitore a colonna singola (max
   680px, centrato) coerente con la larghezza degli altri contenuti
   "di ingresso" del tema (es. ".vbo-bookings-list-container", più
   sopra in questo file); username/password nascosto dietro un
   trigger (".vbo-operator-login-trigger", inserito come primo
   figlio di ".loginblock", prima del <form> nativo, da
   initOperatorLogin() in vikbooking-dom.js — nessuna stringa nativa
   adatta a questo scopo, copy minima del tema via
   "vikOperatorLoginStrings", vedi functions.php), impilato subito
   sotto la card primaria (mai affiancato: niente breakpoint
   desktop a due colonne per questa pagina) e rivelato in una card
   di pari peso visivo al click (stesso bordo/padding/radius della
   card primaria — unica differenza il trattamento del bottone
   submit, pieno vs outline, per restare a un solo CTA "pieno" per
   stato di pagina). Nessun divisore verticale in nessun punto: due
   card già bordate impilate con un gap non ne hanno bisogno — è
   anche quello che rende lo stack mobile pulito senza bisogno di
   adattare il divisore nativo (pensato solo per l'affiancamento
   desktop), qui rimosso del tutto.

   NOTA 1 — bordo via 4 longhand indipendenti ("border-top"/"-right"/
   "-bottom"/"-left"), non una combinazione di shorthand "border"/
   "border-color"/"border-width" più override di un solo lato:
   dichiarare es. "border-color: var(--line)" e poi "border-left-
   color: var(--accent)" nella STESSA regola fa sì che Chromium non
   applichi affatto il colore sui tre lati non esplicitati (top/
   right/bottom restano quelli nativi, verificato con
   getComputedStyle — non un problema di specificità: la
   dichiarazione risulta presente nel CSSOM, con i longhand non
   esplicitati letteralmente vuoti nella sua serializzazione, senza
   effetto sui tre lati). "border-top"/"-right"/"-bottom"/"-left"
   sono invece 4 shorthand indipendenti — nessuno dei quattro
   "eredita" dagli altri, quindi nessuna interferenza reciproca.

   NOTA 2 — selettore ".vbo-operators-authcode" qui sotto è scoped a
   ".vbo-operators-login-wrap " (discendente), non usato da solo:
   il nativo ".vbo-operators-login-wrap > div" (vikbooking_styles.
   css) ha specificità (0,1,1) — una classe più il selettore di tipo
   "div" nel combinatore diretto — che batte una singola classe
   (0,1,0) indipendentemente dall'ordine di caricamento dei fogli.
   Scoped a due classi (0,2,0) la nostra regola torna a vincere.
   ----------------------------------------------------------- */

.vbo-operators-login-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
	max-width: 680px;
	margin: 0 auto;
	padding: var(--wp--preset--spacing--7) var(--wp--preset--spacing--5);
}

/*
 * Card primaria — bianco, bordo 0.5px chiaro, accento bordo
 * sinistro 3px terracotta, radius 12px (unica eccezione nel tema al
 * radius 2px standard di bottoni/input, richiesta esplicitamente
 * per questa pagina). ".loginblock" eredita lo stesso trattamento
 * solo da espansa (modificatore sotto): prima di espandersi non
 * deve leggersi come una seconda card, solo come riga che contiene
 * il trigger.
 */
.vbo-operators-login-wrap .vbo-operators-authcode,
.vbo-operators-login-wrap.vbo-operator-login-expanded .loginblock {
	box-sizing: border-box;
	margin: 0;
	padding: 1.6rem 1.8rem;
	border-top: 0.5px solid var(--wp--preset--color--line);
	border-right: 0.5px solid var(--wp--preset--color--line);
	border-bottom: 0.5px solid var(--wp--preset--color--line);
	border-left: 3px solid var(--wp--preset--color--accent);
	border-radius: 12px;
	background: var(--wp--preset--color--white);
	box-shadow: none;
}

/*
 * Da chiuso ".loginblock" è solo una riga che centra il trigger
 * (nessun bordo/sfondo proprio, vedi sopra), larga quanto la card
 * primaria (stesso "max-width" del wrap, nessun "flex-basis"
 * diverso da applicare qui). Da espanso torna a un blocco normale:
 * il form nativo (unico figlio oltre al trigger, vedi below) scorre
 * in flusso normale dentro la card. "border-left"/"padding"/
 * "margin" nativi (vikbooking_styles.css: il divisore verticale
 * visibile nello screenshot originale, pensato solo per
 * l'affiancamento a due colonne desktop, mai usato in questo
 * restyling) azzerati qui, non solo nella variante espansa —
 * niente divisore in nessuno stato, vedi commento di sezione sopra.
 */
.loginblock {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	border-left: none;
}

.vbo-operators-login-wrap.vbo-operator-login-expanded .loginblock {
	display: block;
	text-align: left;
}

/*
 * Contenuto nativo del form username/password nascosto finché non
 * espanso — resta nel DOM (submit funzionante anche navigando
 * diretto sull'azione del form, nessuna dipendenza da JS per
 * l'invio) ma invisibile: il trigger è l'unico elemento visibile in
 * questo stato. Il form nativo (".loginblock" ha un solo figlio
 * oltre al trigger: il <form>) è il selettore più semplice, non
 * serve enumerare i suoi contenuti interni.
 */
.vbo-operators-login-wrap:not(.vbo-operator-login-expanded) .loginblock > form {
	display: none;
}

.vbo-operators-login-wrap.vbo-operator-login-expanded .vbo-operator-login-trigger {
	display: none;
}

.vbo-operator-login-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
	background: transparent;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: var(--vik-radius);
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.vbo-operator-login-trigger:hover {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
}

.vbo-operator-login-trigger:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--vik-accent-15);
}

/*
 * "Authentication Code" (VBOOPERAUTHCODE, site.php) è già l'unico
 * testo del box nel markup nativo (un <label>, nessun heading
 * separato — vedi commento di sezione sopra): qui diventa il titolo
 * visivo della card. ".loginblock h3" (stringa nativa "Login",
 * VBREGSIGNIN) riceve lo stesso trattamento per coerenza tra le due
 * card una volta entrambe espanse.
 */
.vbo-operators-authcode label[for="authcode"],
.loginblock h3 {
	display: block;
	margin: 0 0 var(--wp--preset--spacing--4);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	line-height: 1.15;
	color: var(--wp--preset--color--text);
}

/*
 * Input — da bordo nero pieno nativo a underline, stesso linguaggio
 * degli altri input del tema (es. ".vbo-bookings-list-search
 * input[name=\"confirmnumber\"]" più sopra in questo file).
 * "#authcode" non ha alcuna classe nativa; "#vbo-username"/
 * "#vbo-password" hanno già ".vbinput" (bordo pieno generico,
 * riusato in molti contesti diversi nel file) — qui ridichiarato
 * per il trattamento underline specifico di questa pagina.
 */
.vbo-operators-authcode #authcode,
.loginblock .vbinput {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: var(--wp--preset--spacing--2) 0;
	border: none;
	border-bottom: 1.5px solid var(--wp--preset--color--accent);
	border-radius: 0;
	background: transparent;
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--md);
}

.vbo-operators-authcode #authcode:focus,
.loginblock .vbinput:focus {
	outline: none;
	border-bottom-color: var(--wp--preset--color--accent-dark);
	box-shadow: 0 3px 0 -2px var(--vik-accent-15);
}

.loginblock-lbl label {
	display: block;
	margin-bottom: var(--wp--preset--spacing--1);
	color: var(--wp--preset--color--text-soft);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/*
 * Bottoni submit — ".vbo-pref-color-btn" (condivisa, cima file)
 * risolve già il pieno terracotta per il codice di autenticazione
 * (metodo primario). Il submit dello username/password riusa la
 * STESSA classe nativa: qui ridichiarato outline (specificità 0,2,0
 * batte 0,1,0 della regola condivisa) per restare a un solo CTA
 * pieno per stato di pagina, mai due bottoni pieni identici uno
 * sopra l'altro una volta espanso.
 */
.vbo-operators-authcode input[type="submit"],
.loginblock input[type="submit"] {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: var(--wp--preset--spacing--4) 0 0;
}

.loginblock .vbo-pref-color-btn {
	background-color: transparent;
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.loginblock .vbo-pref-color-btn:hover {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
}

/* -----------------------------------------------------------
   Operator Dashboard — prima pagina area operatori dopo il login
   (nessuno shortcode, site/views/operators/tmpl/default_dashboard.php)

   Griglia di aree funzionali (Tableaux, Guest Messages, Work Days,
   Finance, Task Manager...), una riga-card per voce: icona
   circolare + titolo a sinistra, CTA "View" a destra
   (".vbo-operator-dashboard-links li", markup interamente nativo,
   solo colore/layout toccati qui — nessun redesign).

   Fix 1 — icone: cerchio blu nativo (".vbo-operator-dashboard-link-
   left i", "background: var(--vbo-lightblue-color)", fuori palette)
   portato a terracotta chiaro (tint dell'accent già usato altrove
   nel file per sfondi leggeri, "--vbo-pref-bgcolor-op20" in ":root"
   cima file) con icona terracotta piena, stesso linguaggio chip
   dell'accent del tema.

   Fix 2 — riga orfana con numero dispari di voci: il nativo
   (".vbo-operator-dashboard-links ul", "display:grid;
   grid-template-columns:repeat(2, minmax(0,1fr))") lascia una
   colonna vuota accanto all'ultima card quando il numero di voci è
   dispari, perché la griglia mantiene 2 colonne fisse su ogni riga
   indipendentemente da quante card restano. Con Flexbox invece lo
   spazio libero si ridistribuisce PER RIGA (ogni riga andata a capo
   è un proprio contesto flex ai fini di grow/shrink, a differenza
   di Grid dove le colonne restano fisse su tutte le righe): l'ultima
   card, sola sulla sua riga, con "flex-grow:1" si allarga a coprire
   l'intera riga invece di lasciare spazio vuoto a fianco — nessun
   :nth-child/:last-child da calcolare a mano, funziona per
   qualunque numero di voci.

   Fix 3 — bottone "Logout": nessun "border-radius" dichiarato nel
   nativo (".vbo-logout", solo padding/font-size/cursor) né nella
   classe condivisa ".vbo-pref-color-btn-secondary" (cima file, solo
   colore) — l'elemento è un "<input type=submit>", che senza un
   radius esplicito eredita lo stile nativo del browser/OS (diverso
   dal 2px standard tema dei bottoni "View" che usano
   ".vbo-pref-color-btn", radius già impostato lì). Colore invariato,
   solo radius allineato.
   ----------------------------------------------------------- */

.vbo-operator-dashboard-link-left i {
	background: var(--vbo-pref-bgcolor-op20);
	color: var(--wp--preset--color--accent);
}

.vbo-operator-dashboard-links ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--4);
}

.vbo-operator-dashboard-links li {
	display: block;
	flex: 1 1 calc(50% - (var(--wp--preset--spacing--4) / 2));
	min-width: 280px;
	width: auto;
}

.vbo-logout {
	border-radius: var(--vik-radius);
}

/* -----------------------------------------------------------
   channelrates — widget "Tariffe Migliori" (mod_vikbooking_channelrates /
   vikbooking/channelrates-widget-block), mai passato finora in questo giro
   di override. Le classi native "vbomodchrates-*" qui sotto (bookdiv,
   rate-website, search-container, ecc.) non sono mai scoped nel CSS del
   plugin sotto ".vbomodchrates-flat-vertical" o ".vbomodchrates-fixed" —
   i due layout selezionabili dal parametro "modstyle" — quindi le regole
   sotto si applicano identiche a entrambi senza doverle duplicare. Solo
   lo stato chiuso (pillola fluttuante, più sotto) esiste unicamente nel
   layout "fixed".
   ----------------------------------------------------------- */

/*
 * Bottone "Prenota ora"/"Book Now" — oggi blu/slate nativo del plugin
 * (#365868). Stesso trattamento del CTA "Prenota Ora" nell'header
 * (".site-header__cta .wp-block-button__link" in theme.css): terracotta
 * pieno, radius quasi-zero del tema, maiuscolo.
 */
.vbomodchrates-bookdiv input {
	background-color: var(--wp--preset--color--accent);
	border-radius: var(--vik-radius);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.vbomodchrates-bookdiv input:hover {
	background-color: var(--wp--preset--color--accent-dark);
}

/*
 * Box "Miglior prezzo sul sito"/"Our Best Rate" — verde nativo del
 * plugin (#e8ffeb/#5fb368/#2da239), nessun verde esiste nella palette del
 * tema. Sostituito con background-alt senza bordo, stesso principio già
 * usato da ".vbo-horizsearch-numnights-inner" (badge su sfondo alt, il
 * contrasto di sfondo basta da solo, senza bisogno di un bordo in più).
 * L'importo (".vbomodchrates-rate-val") resta l'elemento con più risalto
 * della card, in terracotta; il resto del testo/label in ink.
 */
.vbomodchrates-rate-website {
	background-color: var(--wp--preset--color--background-alt);
	border: 0;
	border-radius: var(--vik-radius);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
}

.vbomodchrates-rate-website .vbomodchrates-rate-val {
	color: var(--wp--preset--color--accent);
}

/*
 * Stato chiuso (solo layout "fixed") — la pillola fluttuante di base non
 * ha alcun elemento riconoscibile del tema, rischia di sembrare un
 * componente di terze parti (es. cookie banner). Tocco minimo: chevron e
 * bordo in terracotta invece del nero/grigio nativo — l'hover nativo
 * porta anche un bordo verde (#2ca61b) sul chevron, fuori palette,
 * corretto in terracotta insieme al resto.
 */
.vbomodchrates-fixed:not(.vbomodchrates-container-active) {
	border-color: var(--wp--preset--color--accent);
}

.vbomodchrates-open-cont i {
	color: var(--wp--preset--color--accent);
}

.vbomodchrates-fixed:not(.vbomodchrates-container-active):hover .vbomodchrates-open-cont i {
	border-color: var(--wp--preset--color--accent);
}

/*
 * Font — eredita Inter dal tema invece del fallback del browser sui
 * controlli di form (input/select non ereditano font-family di default),
 * stesso principio già applicato agli altri form VikBooking del tema
 * (vedi ".vbmodhorsearchcheckindiv label" ecc. più sopra nel file). Gli
 * elementi non-form (div/span/label) ereditano già Inter dal body, non
 * necessitano di questa regola.
 */
.vbomodchrates-dates-wrapper > div .input-group input,
.vbomodchrates-search-container select {
	font-family: var(--wp--preset--font-family--body);
}

/*
 * Stato "attivo" (pannello espanso) a tablet/mobile — nessuna regola
 * responsive esisteva per questo stato prima d'ora. Il template nativo
 * (tmpl/default.php) apre il pannello espanso di default per qualunque
 * visitatore senza il cookie "vboVcmMcrh" (che il plugin imposta solo
 * dopo un primo click sulla ×) — logica non replicabile/alterabile da
 * qui (PHP nativo, non solo CSS), quindi il pannello resta aperto al
 * primo caricamento come da comportamento nativo. Verificato dal vivo,
 * senza alcuna regola qui sotto: a 375px il pannello espanso arriva a
 * 334px di altezza (41% di un viewport di 812px) nello stato base, fino
 * a 480px (59%) con il selettore camere/ospiti (".vbomodchrates-rac")
 * aperto — e ".vbomodchrates-fixed" è "position: fixed" col nativo
 * "bottom: 10px", quindi resta overlay per l'intero scroll della pagina
 * (footer incluso) finché il visitatore non nota e tocca la ×.
 *
 * Riga contatori "Notti/Camere/Adulti/Bambini" (".vbomodchrates-
 * searchinfo") nascosta qui sotto: è un doppione informativo (gli stessi
 * valori sono già modificabili nel pannello ".vbomodchrates-rac" sotto
 * il chevron), non l'unico modo di aprire quel pannello — il nativo
 * registra il click-to-open anche sulla riga stessa (tmpl/default.php,
 * "#vbomodchrates-searchinfo... div span" che fa ".trigger('click')" su
 * "#vbomodchrates-searchtoggle"), ma quest'ultimo (il chevron) ha il
 * proprio handler indipendente ed è quello che resta visibile qui sotto
 * — nessuna funzionalità persa nascondendo solo il riepilogo. Da solo
 * questo taglio riporta lo stato base a 265px (33% di un viewport di
 * 812px) — verificato dal vivo, senza bisogno di toccare altro per il
 * caso comune.
 *
 * "max-height" + "overflow-y" restano comunque come rete di sicurezza
 * per il caso ".vbomodchrates-rac" aperto con più camere selezionate
 * (il nativo non pone alcun limite d'altezza a quello stato): 70vh
 * lascia invariato lo stato comune (265-480px rientrano già sotto quella
 * soglia a entrambi i breakpoint testati) e forza lo scroll interno solo
 * oltre quella soglia, invece di un overlay che esce dal viewport senza
 * modo di raggiungere il pulsante "Prenota ora" più in basso nel form.
 */
@media (max-width: 1023px) {
	.vbomodchrates-fixed.vbomodchrates-container-active .vbomodchrates-searchinfo {
		display: none;
	}

	.vbomodchrates-fixed.vbomodchrates-container-active {
		max-height: 70vh;
		overflow-y: auto;
	}

	/*
	 * Tap target della × — nativo ".vbomodchrates-close-cont" è un box
	 * "position: absolute; top: -22px; left: -8px;" senza padding attorno
	 * all'icona (18px, "fa-times-circle"): l'area cliccabile reale è
	 * quella dell'icona stessa, ~18px, sotto la soglia minima di
	 * accessibilità. "padding: 13px" porta l'area cliccabile a un
	 * quadrato di 44px (18px icona + 13px per lato); "top"/"left"
	 * ricalcolati sottraendo lo stesso padding (13px) ai valori nativi
	 * cosicché l'icona resti visivamente nella stessa posizione di prima
	 * (il box è solo più grande, non spostato) — verificato dal vivo,
	 * nessun elemento genitore con "overflow: hidden" che la tagli.
	 */
	.vbomodchrates-close-cont {
		top: -35px;
		left: -21px;
		padding: 13px;
	}
}

/* -----------------------------------------------------------
   quote — pagina "Dettaglio Preventivo" (site/views/quote/), raggiunta
   sostituendo al volo l'output di un altro shortcode VikBooking già
   presente in pagina (es. "Cerca disponibilità") tramite i parametri
   "view"/"ref" in query string — stesso tipo di correzione già fatta per
   il widget Channel Rates: blu di default del plugin mai sovrascritto
   qui finora.
   ----------------------------------------------------------- */

/*
 * Prezzo totale (stato chiuso, "€ 575") e prezzo/notte di ogni camera
 * ("€ 50/notte") — il NUMERO (".vbo_price") è già in terracotta grazie
 * alla regola condivisa più in alto in questo file (".vbo-pref-color-
 * text, .room_cost, .vbo_price"), un rule diretto sull'elemento che vince
 * sempre sull'eredità, a prescindere dalla specificità. Il simbolo valuta
 * (".vbo_currency", fratello diretto senza alcuna regola propria) eredita
 * invece ancora il blu nativo dal wrapper: impostando qui il colore sul
 * wrapper lo si corregge per il simbolo, senza intaccare l'override già
 * vincente sul numero.
 *
 * ATTENZIONE selettori — il CSS nativo qui usa la sintassi di nesting
 * moderna (".vbo-quote-sol-head-right { .vbo-quote-sol-head-price {...} }"
 * ecc., non solo indentazione cosmetica): la specificità reale del
 * selettore compilato include ANCHE il/i selettore/i ancestor. Replicare
 * la stessa catena qui sotto non è opzionale — un selettore "piatto" più
 * corto (es. solo ".vbo-quote-sol-head-price") perde contro il nativo più
 * specifico a prescindere dall'ordine di caricamento (verificato con
 * Playwright: senza gli ancestor sotto, questa regola risultava scritta
 * nel foglio ma MAI applicata).
 */
.vbo-quote-sol-head-right .vbo-quote-sol-head-price,
.vbo-quote-sol-room-desc .vbo-quote-sol-room-info .vbo-quote-sol-room-price-block .vbo-quote-sol-room-price {
	color: var(--wp--preset--color--accent);
}

/*
 * Prezzo totale nel footer (stato espanso, riga "Totale") — qui invece
 * anche il NUMERO resta blu: il selettore nativo ".vbo-quote-sol-footer
 * .vbo-quote-sol-total-price > span:not(.vbo-quote-sol-total-price-disc)"
 * (0,3,0) è più specifico della regola condivisa ".vbo_price" (0,1,0) e
 * la batte a parità di ordine di caricamento, dato che punta allo stesso
 * elemento "span.vbo_price" direttamente, non per eredità. Stessa catena
 * nativa replicata qui per pareggiare la specificità — il nostro foglio
 * carica dopo (stesso meccanismo già usato per ".vbo-search-submit .btn"
 * più sopra nel file), quindi vince per ordine.
 */
.vbo-quote-sol-footer .vbo-quote-sol-total-price > span:not(.vbo-quote-sol-total-price-disc) {
	color: var(--wp--preset--color--accent);
}

/*
 * Icona lettino/camera — unica icona della pagina non già in ink: le
 * altre (data/notti/ospiti nella riga d'intestazione) non hanno alcun
 * colore forzato dal nativo, quindi ereditano già il testo scuro di
 * default. Qui invece il nativo la imposta esplicitamente su
 * "--vbo-pref-bgcolor" (blu — la ridefinizione di questa variabile in
 * ":root" più in alto in questo file è per lo più inerte, vedi il
 * commento lì), corretta in ink per coerenza con le altre. Stessa catena
 * nativa di ancestor replicata per specificità (vedi nota sopra).
 */
.vbo-quote-sol-room-desc .vbo-quote-sol-room-info .vbo-quote-sol-room-title i {
	color: var(--wp--preset--color--ink);
}

/*
 * Bottone "Accetta" — stesso trattamento di ogni CTA primario del tema.
 * Il testo è già bianco di suo (".vbo-pref-fontcolor"), solo sfondo/
 * bordo/radius nativi (blu, 4px) da correggere. Stessa catena nativa di
 * ancestor replicata per specificità (vedi nota sopra).
 */
.vbo-quote-sol-footer .vbo-quote-sol-footer-actions .btn.vbo-accept {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	border-radius: var(--vik-radius);
}

.vbo-quote-sol-footer .vbo-quote-sol-footer-actions .btn.vbo-accept:hover {
	background-color: var(--wp--preset--color--accent-dark);
	border-color: var(--wp--preset--color--accent-dark);
}

/*
 * Vuoto in fondo alla card quando il box tariffa/servizi occupa meno
 * altezza dell'immagine accanto (verificato: due card della stessa
 * proposta, stessa immagine, stessa "vbo-quote-sol-room-desc { padding:
 * 20px }" nativo su entrambe — non è un padding diverso, è che
 * ".vbo-quote-sol-room" è una riga flex con "align-items: stretch" di
 * default mai impostato esplicitamente dal nativo: la colonna testo
 * viene allungata quanto la colonna immagine anche quando il suo
 * contenuto (badge tariffa più corto, meno servizi extra) non basta a
 * riempirla, lasciando vuoto sotto l'ultimo elemento). "align-self:
 * flex-start" la fa restare alta solo quanto il proprio contenuto, senza
 * toccare l'allineamento della colonna immagine (che resta "stretch",
 * invariato, motivo per cui non si tocca ".vbo-quote-sol-room" stesso).
 */
.vbo-quote-sol-room-desc {
	align-self: flex-start;
}

/*
 * Respiro tra il preventivo e ciò che segue nella pagina che ospita lo
 * shortcode sostituito al volo (es. "Cerca disponibilità", con la
 * trust-bar recensioni subito dopo lo shortcode nel post_content): la
 * vista "quote" prende il posto dell'output configurato su quella
 * pagina, ma il resto del contenuto della pagina segue comunque subito
 * dopo, senza alcun margine dedicato a separare i due blocchi.
 */
.vbo-quote-container {
	margin-top: var(--wp--preset--spacing--6);
	margin-bottom: var(--wp--preset--spacing--8);
}