/*
 * booking-bar.css — Nuova barra di ricerca (modulo autonomo)
 * Vanilla, scoped sotto #booking-bar. Da: bozza c:/Users/Areaweb1/OneDrive/Desktop/barra
 * Vedere docs/README-booking-bar.md e docs/PROGRESS-nuova-barra.md
 */

:root {
	/* Main color: brand rosa GB */
	--gbv-bb-main: #e62264;
	/* barra */
	--gbv-bb-bg: #f5f6f8;
	--gbv-bb-light: #ffeef4;
	--gbv-bb-header-desc: #81868f;
	--gbv-bb-border: #e4e6eb;
	--gbv-bb-box-bg: #f8f9fb;
	/* moderni */
	--gbv-bb-text: #1d2230;
	--gbv-bb-muted: #6b7280;
	--gbv-bb-track: #eef0f3;
	--gbv-bb-scroll: #f3b8ca;
	/* design tokens */
	--gbv-bb-grad: linear-gradient(135deg, #e62264 0%, #d4175c 100%);
	--gbv-bb-radius-sm: .55rem;
	--gbv-bb-radius-md: .8rem;
	--gbv-bb-radius-lg: 1rem;
	--gbv-bb-shadow-sm: 0 1px 2px rgba(15, 18, 30, .05);
	--gbv-bb-shadow-md: 0 6px 20px -8px rgba(15, 18, 30, .12);
	--gbv-bb-shadow-pink: 0 10px 22px -10px rgba(230, 34, 100, .55);
	--gbv-bb-focus: rgba(230, 34, 100, .25);
}

#booking-bar {
	width: 100%;
	--main-color: var(--gbv-bb-main);
	--main-light-color: var(--gbv-bb-light);
		--main-bg-color: var(--gbv-bb-bg);
	--bar-header-description: var(--gbv-bb-header-desc);
	--bar-border-grey: var(--gbv-bb-border);
	--bar-box-bg-grey: var(--gbv-bb-box-bg);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: var(--gbv-bb-text);
	box-sizing: border-box;
}

#booking-bar *,
#booking-bar *::before,
#booking-bar *::after {
	box-sizing: border-box;
}

#booking-bar input[type="checkbox"] {
	accent-color: var(--main-color);
}

#booking-bar .booking-bar-sub-container {
	max-width: 1140px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	row-gap: 2rem;
}

/* contenitore di posizionamento della barra (home): centrato orizzontalmente */
.gbv-bar-placement {
	display: flex;
	justify-content: center;
	width: 100%;
	padding: 1rem 0;
}

/* Barra sticky (solo home, ≥992px): quando si scrolla il banner la barra si
   aggancia sotto l'header fisso. `top` e l'altezza dello spacer vengono scritti
   via JS in home.php. */
@media (min-width: 992px) {
	.gbv-bar-placement.is-gbv-stuck {
		position: fixed;
		left: 0;
		right: 0;
		z-index: 950;
		background: rgb(255 255 255 / 90%);
		box-shadow: 0 6px 20px -8px rgba(15, 18, 30, .12);
		padding: .75rem 0;
	}

	/* Fullscreen della barra: il wrapper sticky crea uno stacking context che
	   confinerebbe `#booking-bar.fix-bar` dentro z-index 950 → l'header (999)
	   resterebbe sopra. Alziamo il contesto del wrapper sopra l'header così la
	   barra a tutto schermo copre davvero tutto (solo home). */
	.gbv-bar-placement.is-gbv-stuck.is-gbv-bar-open {
		z-index: 1200;
	}
}

#booking-bar.fix-bar {
	height: 100vh;
	height: 100svh;
	top: 0;
	left: 0;
	position: fixed;
	z-index: 1050;
}

/* Mount overlay nel footer (pagine != home): la barra chiusa è invisibile,
   aperta (fix-bar) è fixed a tutto schermo come sulla home. In home il mount
   non esiste e la barra resta visibile inline nella hero. */
.gbv-booking-bar-overlay-mount {
	display: contents;
}

.gbv-booking-bar-overlay-mount > #booking-bar:not(.fix-bar) {
	display: none;
}

/* Variante sidebar (results/static-results desktop): l'istanza viene spostata
   dall'adapter dentro .gbv-results-bar-host e mostra i campi impilati in
   verticale (come in home, ma a colonna). Vale solo chiusa (:not(.fix-bar)):
   aperta, la barra è fixed a tutto schermo identica a ovunque. Solo ≥992px:
   sotto, la barra chiusa è nascosta (results.css) e si apre dal trigger mobile. */
@media (min-width: 992px) {
	#booking-bar.booking-bar--sidebar:not(.fix-bar) .booking-bar-search-container {
		padding: 0;
	}

	#booking-bar.booking-bar--sidebar:not(.fix-bar) .booking-bar-search-form {
		flex-direction: column;
		justify-content: flex-start;
		row-gap: .5rem;
		border: 0;
		background-clip: padding-box;
	}

	#booking-bar.booking-bar--sidebar:not(.fix-bar) .booking-bar-inputs-container {
		height: auto;
		min-height: 62px;
		width: 100%;
	}
}

/* "Nessuna destinazione selezionabile": mostrata quando la ricerca nello step
   Destinazione non produce risultati (es. barra idratata da pagina interna) */
#booking-bar .gbv-dest-empty {
	padding: 22px 12px;
	color: #6b6874;
	font-size: .85rem;
	font-weight: 600;
	text-align: center;
}

#booking-bar.back {
	background-color: var(--main-bg-color);
}

#booking-bar .booking-bar-info-box {
	font-size: .8rem;
	font-weight: 600;
	padding: .5rem 0;
	margin: 0;
}

#booking-bar .show-bar-controls {
	display: flex !important;
}

/* campo attivo: bordo rosa + alone interno colorato (glow rosa a doppio anello) */
#booking-bar .booking-tab-selected {
	border-color: var(--main-color) !important;
	box-shadow:
		0 0 0 .5px rgba(230, 34, 100, .9) inset,
		0 0 0 5px rgba(230, 34, 100, .12) inset,
		0 12px 28px -14px rgba(230, 34, 100, .55);
}

/* i campi, pur essendo "pulsanti" separati dal resto, sono cliccabili: hover
   con glow rosa soft interno + ombra colorata esterna */
#booking-bar .booking-bar-inputs-container:hover:not(.tab-disabled) {
	border-color: var(--main-color);
	box-shadow:
		0 0 0 1px rgba(230, 34, 100, .35) inset,
		0 8px 22px -14px rgba(230, 34, 100, .5);
}

/* ---- Menu top (prev / titolo / chiudi) ---- */
#booking-bar .search-menu-container {
	display: none;
	padding: 1.5rem;
	justify-content: space-between;
	column-gap: 5px;
}

#booking-bar .search-menu-container > .gbv-bar-menu-btn {
	padding: .4rem .8rem;
	border: 1px solid var(--bar-border-grey);
	border-radius: .5rem;
	cursor: pointer;
}

/* Pulsante "indietro": visibile solo dal secondo step in poi. `visibility`
   (non `display:none`) per mantenere la posizione degli altri elementi. */
#booking-bar .search-menu-container > #prev {
	visibility: hidden;
}
#booking-bar .search-menu-container > #prev.gbv-prev-visible {
	visibility: visible;
}

#booking-bar .search-menu-container > .gbv-bar-menu-btn:hover {
	background-color: var(--main-color);
	color: #fff;
}

#booking-bar .search-menu-container > span {
	padding: .4rem .8rem;
	color: #232323;
	font-weight: 600;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* ---- Riga input (i 4 campi + bottone) ---- */
#booking-bar .booking-bar-search-container {
	padding: 0 1.5rem;
}

#booking-bar .booking-bar-search-form {
	display: flex;
	justify-content: space-between;
	align-items: center;
	column-gap: .3rem;
	border: 8px solid rgb(255 255 255 / .6);
	border-radius: 20px;
	background: rgb(255 255 255 / .6);
	background-clip: padding-box;
}

#booking-bar .booking-bar-inputs-container {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	justify-content: space-between;
	height: 72px;
	border-radius: .75rem;
	padding: .75rem .875rem .5rem;
	border: 1px solid var(--bar-border-grey);
	background-color: #fff;
	cursor: pointer;
	position: relative;
	transition: border-color .15s ease, box-shadow .15s ease;
}

#booking-bar .booking-bar-inputs-container:hover:not(.tab-disabled) {
	border-color: var(--main-color);
	box-shadow:
		0 0 0 1px rgba(230, 34, 100, .35) inset,
		0 8px 22px -14px rgba(230, 34, 100, .5);
}

#booking-bar .tab-disabled {
	opacity: .5;
	pointer-events: none;
}

#booking-bar .booking-bar-inputs-description {
	color: var(--bar-header-description);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

#booking-bar .booking-bar-inputs-big {
	flex-grow: 3;
}

#booking-bar .booking-bar-inputs-small {
	flex-grow: 2;
}

#booking-bar .search-tab {
	color: var(--gbv-bb-text);
}

#booking-bar .destination-form-value {
	display: grid;
	grid-template-columns: 20px 1fr 20px;
	column-gap: 10px;
	align-items: center;
}

#booking-bar .destination-form-value > input {
	border: 0;
	font-size: 1rem;
	background: transparent;
	min-width: 0;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	outline: none !important;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
}

#booking-bar .destination-form-value > input:focus {
	outline: none !important;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
}

#booking-bar .destination-form-value > .gbv-bar-field-icon {
	color: var(--main-color);
}

#booking-bar #booking-search-resetter {
	display: none;
	cursor: pointer;
	color: var(--gbv-bb-header-desc);
}

#booking-bar .search-subtab-container {
	display: none;
	padding: 0 1.5rem;
}

/* ---- Body: sotto-step ---- */
#booking-bar .search-subtab {
	flex-direction: column;
	row-gap: 1rem;
	min-height: 50px;
	border-radius: .9rem;
	padding: 14px;
	border: 1px solid var(--bar-border-grey);
	box-shadow: 0 1px 2px rgba(15, 18, 30, .04);
	flex-grow: 1;
	background-color: #fff;
}

#booking-bar .search-bar-calendar-container {
	display: flex;
	justify-content: center;
	flex-direction: column;
	text-align: center;
	font-weight: 600;
}

/* Reset date: testuale con icona reload, centrato sotto il calendario */
#booking-bar .booking-bar-reset-date {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	margin: auto;
	align-self: center;
	padding: .45rem .9rem;
	border: 1px solid var(--bar-border-grey);
	border-radius: .6rem;
	background: #fff;
	color: var(--main-color);
	font-size: .9rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}

#booking-bar .booking-bar-reset-date:hover {
	background: var(--main-light-color);
	border-color: var(--main-color);
}

/* Icone valori in barra (Font Awesome, già caricato dal progetto) */
#booking-bar #ospiti-value::before,
#booking-bar #tipo-value::before,
#booking-bar #data-value::before {
	padding-right: 10px;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 7 Free";
	font-weight: 900;
	font-size: 1em;
}

#booking-bar #ospiti-value::before {
	content: "\f007";
	color: var(--main-color);
}

#booking-bar #tipo-value::before {
	content: "\f0f2";
	color: var(--main-color);
}

#booking-bar #data-value::before {
	content: "\f073";
	color: var(--main-color);
}

/* ---- Step destinazione (dropdown affidato al widget InstantSearch) ---- */
#booking-bar .search-subtab-destinazione {
	position: relative;
	min-height: 180px;
	justify-content: flex-start;
}

/* ---- Destinazioni precompilate (menu vetrina / vecchio box) — stile demo ---- */
#booking-bar .product-recommended {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	row-gap: .5rem;
	max-height: 400px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #ffb3cb #f5f0f2;
}

#booking-bar .product-recommended::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

#booking-bar .product-recommended::-webkit-scrollbar-track {
	background-color: #f5f0f2;
	border-radius: 8px;
}

#booking-bar .product-recommended::-webkit-scrollbar-thumb {
	background: #ffb3cb;
	border-radius: 8px;
	border: 2px solid #f5f0f2;
}

#booking-bar .product-recommended-block-category {
	font-weight: 600;
	font-size: 1rem;
	color: #242424;
	text-transform: uppercase;
	display: block;
	padding: 0;
	margin-bottom: 10px;
	/* allineato al padding del sub-tab (10px) */
}

#booking-bar .product-recommended-block-list ul {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 3rem;
	row-gap: 1.2rem;
	padding: 0;
	/* allineato al padding del sub-tab (10px) */
}

#booking-bar .product-recommended-block-list li {
	list-style: none;
	padding: 0;
	display: flex;
	column-gap: .5rem;
	align-items: center;
	cursor: pointer;
	transition: background-size .55s cubic-bezier(0.22, 1, 0.36, 1), background-color .3s ease;
	will-change: background-size;
	text-decoration: none;
	background-image: radial-gradient(circle farthest-corner at 10% 20%, var(--main-light-color) 0%, var(--main-light-color) 100.2%);
	background-size: 0 40px;
	background-repeat: no-repeat;
	background-position: left 40%;
	border-radius: .5rem;
	color: var(--gbv-bb-text);
	font-size: .92rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#booking-bar .product-recommended-block-list li::before {
	list-style: none;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	font-family: "Font Awesome 7 Free";
	font-weight: 900;
	/* Icona per tipologia: impostata nelle regole per classe sotto */
	font-size: .8em;
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	background: var(--main-light-color);
	border-radius: .5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--main-color);
}

/* Destinazione (d<ID>) */
#booking-bar .product-recommended-block-list li.gbv-rec-dest::before {
	content: "\f3c5";
}

/* Tag (t<ID>) */
#booking-bar .product-recommended-block-list li.gbv-rec-tag::before {
	content: "\f02b";
}

/* Link personalizzato */
#booking-bar .product-recommended-block-list li.gbv-rec-link::before {
	content: "\f360";
}

#booking-bar .product-recommended-block-list li:hover {
	background-size: 100% 40px;
	cursor: pointer;
	background-color: var(--main-light-color);
	border-radius: .5rem;
}

#booking-bar .product-recommended-block-list li a {
	color: inherit;
	text-decoration: none;
}

/* ---- Risultati destinazione/struttura nel box (tipo bozza) ---- */
#booking-bar .gbv-dest-results {
	display: none;
	width: 100%;
	min-width: 0;
	grid-template-columns: 1fr 2fr;
	column-gap: 0;
	row-gap: 1rem;
	padding: 0;
	/* il padding lo dà il contenitore (.search-subtab-destinazione) */
}

/* ogni colonna: risultati limitati → niente scrollbar.
   min-width:0 + max-width:100% → la colonna si stringe dentro la griglia
   e i testi lunghi si tagliano con ellipsis (niente scroll orizzontale) */
#booking-bar .gbv-dest-col {
	max-height: none;
	overflow: visible;
	scrollbar-width: none;
	min-width: 0;
	max-width: 100%;
	-ms-overflow-style: none;
}

#booking-bar .gbv-dest-col::-webkit-scrollbar {
	display: none;
}

/* barra verticale di separazione tra Destinazioni e Strutture (desktop) */
#booking-bar .gbv-dest-col:first-child {
	padding-right: 1.5rem;
}

#booking-bar .gbv-dest-col + .gbv-dest-col {
	border-left: 1px solid var(--bar-border-grey);
	padding-left: 1.5rem;
}

/* una sola colonna con risultati (l'altra è hidden dall'adapter):
   la colonna visibile prende tutto lo spazio, senza separatore */
#booking-bar .gbv-dest-results--single {
	grid-template-columns: 1fr;
}

#booking-bar .gbv-dest-results--single .gbv-dest-col + .gbv-dest-col {
	border-left: 0;
	padding-left: 0;
}

/* titoli colonna: senza border-bottom, più "arieggiati" */
#booking-bar .gbv-dest-col-title {
	font-weight: 700;
	font-size: .95rem;
	letter-spacing: .03em;
	color: var(--gbv-bb-text);
	text-transform: uppercase;
	padding: .25rem 0 .75rem;
}

/* desktop: le strutture su due colonne (1 accanto a 2, sotto 3 e 4) */
@media (min-width: 992px) {
	#booking-bar #destination-hotels-list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 1rem;
		align-content: start;
	}
}

#booking-bar .gbv-dest-col-title {
	font-weight: 700;
	font-size: .95rem;
	letter-spacing: .03em;
	color: var(--gbv-bb-text);
	text-transform: uppercase;
	padding: .25rem 0 .75rem;
}

#booking-bar .gbv-dest-col ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	row-gap: .25rem;
}

#booking-bar .gbv-dest-col li {
	display: flex;
	align-items: center;
	column-gap: 1rem;
	padding: .5rem;
	min-height: 72px;
	cursor: pointer;
	border-radius: .5rem;
	overflow: hidden;
}

/* icona a sinistra (elemento ::before, box rosaio come i consigli) */
#booking-bar .gbv-dest-col li::before {
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-font-smoothing: antialiased;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	font-family: "Font Awesome 7 Free";
	font-weight: 900;
	font-size: .8em;
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	background: var(--main-light-color);
	border-radius: .5rem;
	color: var(--main-color);
	content: "\f3c5";
}

#booking-bar .gbv-dest-col li.gbv-dest-hotels::before {
	content: "\f594";
	/* fa-hotel: chiaramente una struttura/albergo */
}

#booking-bar .gbv-dest-col li:hover .gbv-dest-name {
	color: var(--main-color);
}

/* a destra: colonna con nome sopra e parent sotto.
   flex:1 + min-width:0 + max-width:100% → la colonna si stringe e i testi
   vengono tagliati con ellipsis senza generare scroll orizzontale */
#booking-bar .gbv-dest-col li .gbv-dest-bd {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
	max-width: 100%;
	row-gap: .1rem;
	transition: background-size .55s cubic-bezier(0.22, 1, 0.36, 1), background-color .3s ease;
	border-radius: .5rem;
	background-image: radial-gradient(circle farthest-corner at 12% 50%, var(--main-light-color) 0%, var(--main-light-color) 100.2%);
	background-size: 0 100%;
	background-repeat: no-repeat;
	background-position: left center;
	padding: .35rem .5rem;
}

#booking-bar .gbv-dest-col li:hover .gbv-dest-bd {
	background-size: 100% 100%;
	background-color: var(--main-light-color);
}


#booking-bar .gbv-dest-col li .gbv-dest-name {
	font-size: .95rem;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#booking-bar .gbv-dest-col li .gbv-dest-parent {
	font-size: .8rem;
	color: var(--gbv-bb-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 1.1;
	margin-top: .05rem;
}

/* ---- Skeleton di caricamento (icona + testo) ---- */
#booking-bar .gbv-dest-skeleton {
	display: flex;
	align-items: center;
	column-gap: .75rem;
	padding: .55rem .75rem;
	min-height: 42px;
	/* quasi quanto un risultato vero */
	pointer-events: none;
}

#booking-bar .gbv-skel-bd,
#booking-bar .gbv-skel-line {
	position: relative;
	overflow: hidden;
	background: #ebebeb;
	/* grigio chiaro */
	border-radius: .5rem;
}

#booking-bar .gbv-skel-bd {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
	min-width: 0;
	background: none;
}

#booking-bar .gbv-skel-line {
	height: 13px;
	width: 74%;
}

#booking-bar .gbv-skel-line.short {
	height: 11px;
	width: 46%;
}

/* riflesso shimmer bianco sopra il grigio */
#booking-bar .gbv-skel-line::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .65) 50%, transparent 100%);
	animation: gbv-bar-shimmer 1.4s infinite;
	transform: translateX(-100%);
}

@keyframes gbv-bar-shimmer {
	0% {
		transform: translateX(-100%);
	}

	100% {
		transform: translateX(100%);
	}
}

/* ---- Step tipologia: layout due colonne ---- */
#booking-bar .gbv-tipo-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

/* Colonna sx: le tipologie di viaggio impilate */
#booking-bar .tipo-soggiorno-header {
	display: grid;
	grid-template-columns: 1fr;
	gap: .5rem;
}

#booking-bar .tipo-soggiorno-header > .gbv-type-card {
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	flex-grow: 1;
	border-radius: .8rem;
	border: 1px solid var(--bar-border-grey);
	background-color: var(--bar-box-bg-grey);
	cursor: pointer;
	font-size: .95rem;
	text-align: center;
	padding: .75rem 1rem;
	min-height: 56px;
	transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
	font-weight: 600;
	color: var(--gbv-bb-text);
}

/* Volo e Nave partono nascosti: appaiono solo se la destinazione li supporta
   (classe .gbv-available aggiunta dall'adapter da travio-dates). */
#booking-bar .tipo-soggiorno-header > .gbv-type-card[data-gbv-type="flight"],
#booking-bar .tipo-soggiorno-header > .gbv-type-card[data-gbv-type="ship"] {
	display: none;
}

#booking-bar .tipo-soggiorno-header > .gbv-type-card[data-gbv-type="flight"].gbv-available,
#booking-bar .tipo-soggiorno-header > .gbv-type-card[data-gbv-type="ship"].gbv-available {
	display: flex;
}

/* mostra_solo_hotel=0 sulla struttura selezionata: card Solo Soggiorno nascosta
   (stesso comportamento della vecchia option "Solo Hotel" hidden/disabled) */
#booking-bar .tipo-soggiorno-header > .gbv-type-card[data-gbv-type="hotel"].gbv-unavailable {
	display: none;
}

#booking-bar .tipo-soggiorno-header > .gbv-type-card:hover {
	border-color: var(--main-color);
}

#booking-bar .tipo-soggiorno-header > .gbv-type-card.tab-active {
	border-color: var(--main-color);
	background-color: var(--main-light-color);
	box-shadow: 0 0 0 1px var(--main-color) inset;
}

#booking-bar .tipo-soggiorno-header > .gbv-type-card .gbv-type-card-label {
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .02em;
}

/* ---- Colonna dx: sub-scelte partenza pacchetti (porto/aeroporto) ---- */
#booking-bar .gbv-departure {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

#booking-bar .gbv-departure[hidden] {
	display: none;
}

#booking-bar .gbv-departure-title {
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .02em;
	font-weight: 600;
}

/* Lista punti di partenza a radio button (solo i disponibili sono visibili):
   a 2 colonne da desktop, una sotto l'altra da mobile */
#booking-bar .gbv-departure-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: .35rem;
}

/* stessa dimensione delle card tipologia (gbv-type-card) */
#booking-bar .gbv-departure-item {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .75rem 1rem;
	min-height: 56px;
	border: 1px solid var(--bar-border-grey);
	border-radius: .8rem;
	background: var(--bar-box-bg-grey);
	color: var(--gbv-bb-text);
	font-size: .92rem;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}

#booking-bar .gbv-departure-item:has(input:checked) {
	border-color: var(--main-color);
	background-color: var(--main-light-color);
}

#booking-bar .gbv-departure-item input {
	flex: none;
	margin: 0;
	/* azzera il margine di default: radio centrato sul testo */
	align-self: center;
	accent-color: var(--main-color);
}

#booking-bar .gbv-departure-list[hidden] {
	display: none;
}

#booking-bar .gbv-departure-item.is-disabled {
	display: none;
}

/* ---- Occupazione ---- */
#booking-bar .booking-bar-rooms-container {
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
	padding: 0 5px;
	max-height: 400px;
	overflow-y: auto;
	scrollbar-width: thin;
}

#booking-bar .booking-bar-room {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--bar-border-grey);
	border-radius: .5rem;
	flex-grow: 1;
	row-gap: 1rem;
	padding: 1rem;
}

#booking-bar .booking-bar-room.room-show-effect {
	animation: gbv-bb-disappearingBorder 2s ease-out forwards;
	box-shadow: 0 0 1px 2px var(--main-color) inset;
}

#booking-bar .booking-bar-room .header-rooms {
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--main-color);
	font-size: 1.2rem;
	border-bottom: 1px solid var(--bar-border-grey);
	padding: 0 0 .5rem;
}

#booking-bar .booking-bar-room .bar-camera-name {
	display: flex;
	flex-grow: 3;
}

#booking-bar .booking-bar-room .room-delete-button {
	display: flex;
	flex-grow: 1;
	cursor: pointer;
	color: var(--main-color);
	justify-content: end;
}

#booking-bar .booking-bar-room .header-guests {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 1rem;
	text-transform: uppercase;
	font-size: .85rem;
}

#booking-bar .booking-bar-room .header-guests > div {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: .5rem;
	font-weight: 600;
}

#booking-bar .booking-bar-room .header-children-age,
#booking-bar .booking-bar-room .header-infants-age {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

#booking-bar .booking-bar-room .header-children-age .single-children-age,
#booking-bar .booking-bar-room .header-infants-age .single-infants-age {
	display: flex;
	padding-top: 1rem;
	justify-content: end;
	column-gap: 1rem;
	align-items: center;
	font-weight: 600;
}

#booking-bar .booking-bar-room .header-children-age .single-children-age select,
#booking-bar .booking-bar-room .header-infants-age .single-infants-age select {
	flex: 0 0 auto;
	width: auto;
	max-width: none;
	padding: .3rem;
	cursor: pointer;
	border-radius: .25rem;
	background-color: var(--main-light-color);
	font-size: 1.1rem;
	color: #000;
	min-width: 3.5rem;
}

/* frase età (unica per camera, sopra i blocchi bambini/infant) */
#booking-bar .booking-bar-room .info-ages {
	padding: .5rem 0;
	font-size: .8rem;
	text-align: right;
	background: #fafafa;
	margin: 10px 0 0 0;
}

#booking-bar .booking-bar-room .booking-bar-counter {
	display: flex;
	justify-content: center;
	column-gap: .8rem;
	align-items: center;
}

#booking-bar .booking-bar-room .bar-less,
#booking-bar .booking-bar-room .bar-more {
	background: var(--main-light-color);
	color: var(--main-color);
	border-radius: .5rem;
	width: 35px;
	height: 35px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
}

/* larghezza minima stabile del numero: evita spostamenti se un numero
   (es. 10) è più largo di un altro (es. 9) al click */
#booking-bar .booking-bar-room .bar-number {
	min-width: 1.2rem;
	text-align: center;
	font-weight: 600;
}

#booking-bar .booking-bar-room .bar-less:hover,
#booking-bar .booking-bar-room .bar-more:hover {
	background: var(--main-color);
	color: #fff;
}

#booking-bar .booking-bar-room .bar-more-block {
	background: #e0e0e0 !important;
	color: #585858 !important;
	opacity: .6;
	pointer-events: none;
}

#booking-bar .booking-bar-room .roomnumber {
	margin-left: .5rem;
}

#booking-bar .booking-bar-add-room {
	position: sticky;
	bottom: 0;
	z-index: 2;
	display: flex;
	justify-content: center;
	cursor: pointer;
	padding: .75rem .5rem .5rem;
	/* bordo fino che separa il pulsante floating dalle camere sotto */
	border-top: 1px solid #f0e9ec;
	/* sfumatura sopra le camere per far "galleggiare" il pulsante */
	background: linear-gradient(to top, #fff 0%, #fff 55%, rgba(255, 255, 255, 0) 100%);
}

#booking-bar .booking-bar-add-room span {
	border-radius: .5rem;
	border: 1px solid var(--bar-border-grey);
	padding: .5rem 1rem;
	font-weight: 600;
	background: #fff;
}

#booking-bar .booking-bar-add-room span:hover {
	background: var(--main-light-color);
	border-color: var(--main-color);
}

/* ---- Footer (prev / next) ---- */
#booking-bar .search-commands-container {
	display: none;
	padding: 1.5rem;
	min-height: 35px;
	justify-content: flex-end;
}

#booking-bar .search-commands-container #prev,
#booking-bar .search-commands-container #next {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	color: #fff;
	border-radius: .6rem;
	cursor: pointer;
	padding: .75rem 1.5rem;
	transition: background-color .15s ease, box-shadow .15s ease, filter .15s ease;
}

#booking-bar .search-commands-container #prev {
	background-color: #6c757d;
	margin-right: .5rem;
}

#booking-bar .search-commands-container #prev:hover {
	filter: brightness(.94);
}

#booking-bar .search-commands-container #next {
	background-color: var(--main-color);
	text-transform: uppercase;
	font-weight: 700;
	min-width: 180px;
}

#booking-bar .search-commands-container #next:hover {
	filter: brightness(.94);
}

/* "Avvia Ricerca" disabilitato finché mancano destinazione/tipologia/date */
#booking-bar .search-commands-container #next.is-disabled {
	opacity: .45;
	pointer-events: none;
}

/* focus ring in stile GB (riusabile: --gbv-focus-ring se definito) */
#booking-bar .search-commands-container #prev:focus-visible,
#booking-bar .search-commands-container #next:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--main-color);
}

/* Scroll bar — uniforme su tutte le aree scrollabili della barra */
#booking-bar .gbv-dest-col,
#booking-bar .booking-bar-rooms-container,
#booking-bar .search-subtab-container {
	scrollbar-width: thin;
	scrollbar-color: #ffb3cb #f5f0f2;
}

#booking-bar .gbv-dest-col::-webkit-scrollbar,
#booking-bar .booking-bar-rooms-container::-webkit-scrollbar,
#booking-bar .search-subtab-container::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

#booking-bar .gbv-dest-col::-webkit-scrollbar-track,
#booking-bar .booking-bar-rooms-container::-webkit-scrollbar-track,
#booking-bar .search-subtab-container::-webkit-scrollbar-track {
	background-color: #f5f0f2;
	border-radius: 8px;
}

#booking-bar .gbv-dest-col::-webkit-scrollbar-thumb,
#booking-bar .booking-bar-rooms-container::-webkit-scrollbar-thumb,
#booking-bar .search-subtab-container::-webkit-scrollbar-thumb {
	background: #ffb3cb;
	border-radius: 8px;
	border: 2px solid #f5f0f2;
}

#booking-bar .gbv-dest-col::-webkit-scrollbar-thumb:hover,
#booking-bar .booking-bar-rooms-container::-webkit-scrollbar-thumb:hover,
#booking-bar .search-subtab-container::-webkit-scrollbar-thumb:hover {
	background: var(--main-color);
}

/* ---- Responsive (mobile: wizard full-screen, solo una tab visibile) ---- */
@media (max-width: 991px) {
	#booking-bar .booking-bar-sub-container {
		max-width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		row-gap: 1.5rem;
		height: 100%;
	}

	#booking-bar .search-menu-container {
		background-color: #fff;
		flex: 0 0 auto;
	}

	#booking-bar .booking-bar-search-container {
		padding: 0 1.5rem;
	}

	#booking-bar .search-subtab-container {
		flex: 1 3;
		flex-direction: column;
		padding: 0 1.5rem;
		overflow-y: auto;
	}

	/* da mobile il contenuto del calendario parte dall'alto */
	#booking-bar .search-bar-calendar-container {
		justify-content: flex-start;
	}

	#booking-bar .search-subtab {
		max-height: none;
		overflow-y: visible;
		border: 0;
		padding: 10px;
	}

	#booking-bar .search-commands-container {
		justify-content: stretch;
		background: #fff;
		flex: 0 0 auto;
		padding: 1rem 1.5rem;
	}

	#booking-bar .search-commands-container #next {
		flex-grow: 1;
	}

	#booking-bar .booking-bar-room .header-guests {
		grid-template-columns: 1fr !important;
		row-gap: 1rem;
	}

	#booking-bar .booking-bar-room .header-guests > div {
		flex-direction: row;
		justify-content: space-between;
	}

	#booking-bar .booking-bar-room {
		background: #fff;
	}

	#booking-bar .tipo-soggiorno-header {
		grid-template-columns: 1fr;
	}

	#booking-bar .tipo-soggiorno-header > .gbv-type-card {
		flex: 1 1 100%;
		min-height: 60px;
		background: #fff;
	}

	#booking-bar .gbv-departure-item {
		min-height: 60px;
		background: #fff;
	}

	#booking-bar .search-subtab-occupancy,
	#booking-bar .search-subtab-calendar {
		background: #fff;
		border-radius: .5rem;
	}

	/* il calendario non deve schiacciarsi: lo contiene lo scroll del contenitore */
	#booking-bar .search-subtab-calendar {
		flex-shrink: 0;
	}

	/* lo step destinazione riempie sempre il body: contenuto scrolla dentro.
	   padding non più ridefinito qui: uniforme a 10px come tutti i sub-tab */
	#booking-bar .search-subtab-destinazione {
		background: #fff;
		border-radius: .5rem;
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		/* di nuovo scrollabile da mobile (pochi risultati) */
	}

	/* da mobile i risultati vanno a colonna singola, uno sotto l'altro:
	   prima Destinazioni poi Hotel, senza barra divisoria né scroll */
	#booking-bar .gbv-dest-results {
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
		row-gap: 1.25rem;
	}

	#booking-bar .gbv-dest-col:first-child {
		padding-right: 0;
	}

	#booking-bar .gbv-dest-col + .gbv-dest-col {
		border-left: 0;
		padding-left: 0;
	}

	#booking-bar .product-recommended {
		flex: 1 1 auto;
		min-height: 0;
		max-height: none;
	}

	#booking-bar .product-recommended-block-list ul {
		grid-template-columns: repeat(1, 1fr);
	}
}

@keyframes gbv-bb-disappearingBorder {
	0% {
		box-shadow: 0 0 1px 2px var(--main-color) inset;
	}

	100% {
		box-shadow: none;
	}
}

/* Desktop: step tipologia a due colonne (1/3 tipologie, 2/3 sub-scelte) e
   lista sub-scelte a 2 colonne. Poste dopo la definizione base per vincerla.
   Mobile: tutto impilato (tipologia poi sub-scelte). Separatore verticale
   tra le colonne SOLO da desktop. */
@media (min-width: 992px) {
	#booking-bar .gbv-tipo-layout {
		grid-template-columns: 1fr 2fr;
		column-gap: 2rem;
	}

	#booking-bar .gbv-departure {
		border-left: 1px solid var(--bar-border-grey);
		padding-left: 2rem;
	}

	#booking-bar .gbv-departure-list {
		grid-template-columns: repeat(2, 1fr);
	}
}