/* ===========================================================================
   PASSI DELLA PRENOTAZIONE (breadcrumb) - componente unico
   Markup: resources/views/prenota/include/passi.blade.php

   Sostituisce nav-riepilogo.css (frecce colorate) e la correzione a pallini
   che stava solo nella parte mobile di bookfavignana-new.css. Un solo disegno
   per tutte le pagine e tutti i servizi.

   Lo caricano sia app.blade.php sia app-affiliati.blade.php. Quest'ultimo non
   carica bookfavignana-new.css, dove e' definito --main-color: per questo ogni
   var() ha il suo valore di riserva.

   Stati:
     fatto     pallino verde, nome scuro, e' un link (ci si puo' tornare)
     corrente  pallino blu, nome blu in grassetto
     futuro    pallino grigio, nome grigio chiaro
   Il tratto che porta a un passo e' verde quando il passo prima e' fatto: la
   strada gia' percorsa si legge a colpo d'occhio.
   =========================================================================== */

/* Scavalca i float rimasti aperti sopra: nei risultati il campo data e'
   flottato dentro contenitori senza clearfix, e senza questo i passi ci
   finirebbero sotto. */
.bf-passi-riga {
	clear: both;
}

.bf-passi {
	margin: 4px 0 14px;
}

.bf-passi__elenco {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bf-passi__passo {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
}

/* Il trattino fra un passo e l'altro: decorazione, quindi generata qui e non
   nel markup, dove un lettore di schermo la annuncerebbe. */
.bf-passi__passo + .bf-passi__passo::before {
	content: "";
	flex: 0 0 auto;
	width: 12px;
	height: 2px;
	margin: 0 4px;
	border-radius: 1px;
	background: #dde7ed;
}
.bf-passi__passo--fatto + .bf-passi__passo::before {
	background: #1e8e3e;
}

.bf-passi__voce,
.bf-passi__voce:hover,
.bf-passi__voce:focus {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 2px;
	border-radius: 14px;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
}
a.bf-passi__voce:focus-visible {
	outline: 2px solid var(--main-color, #006e95);
	outline-offset: 2px;
}

.bf-passi__numero {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #dde7ed;
	color: #6b7c85;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}
.bf-passi__passo--fatto .bf-passi__numero {
	background: #1e8e3e;
	color: #fff;
}
.bf-passi__passo--corrente .bf-passi__numero {
	background: var(--main-color, #006e95);
	color: #fff;
}

.bf-passi__etichetta {
	font-size: 13.5px;
	color: #8a969c;
}
.bf-passi__passo--fatto .bf-passi__etichetta {
	color: #2c3e46;
}
.bf-passi__passo--corrente .bf-passi__etichetta {
	color: var(--main-color, #006e95);
	font-weight: 700;
}
a.bf-passi__voce:hover .bf-passi__etichetta {
	text-decoration: underline;
}

/* Desktop: c'e' spazio, quindi pallini un po' piu' grandi, trattini piu'
   lunghi e il nome di ogni passo scritto. Se i nomi non ci stanno su una riga
   (shuttle con aliscafo in tedesco) i passi vanno a capo, centrati. */
@media (min-width: 992px) {
	.bf-passi {
		margin: 6px 0 18px;
	}
	.bf-passi__passo + .bf-passi__passo::before {
		width: 28px;
		margin: 0 8px;
	}
	.bf-passi__numero {
		width: 26px;
		height: 26px;
		font-size: 13px;
	}
	.bf-passi__etichetta {
		font-size: 14.5px;
	}
}

/* Sotto i 992px resta scritto solo il nome del passo corrente: gli altri
   diventerebbero due o tre righe. Nascosti alla vista ma non tolti, cosi' un
   lettore di schermo li legge ancora (e il title li mostra al passaggio). */
@media (max-width: 991px) {
	.bf-passi__passo:not(.bf-passi__passo--corrente) .bf-passi__etichetta {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}
	.bf-passi__passo--corrente .bf-passi__etichetta {
		font-size: 12px;
	}

	/* Sempre su una riga. Lo shuttle andata/ritorno con aliscafo ha sette
	   passi e su un telefono andava a capo. Pallini e trattini hanno misure
	   fisse; quando lo spazio manca si accorcia soltanto il nome del passo
	   corrente, con i puntini ("Tragflugelboot Ruck..." in tedesco).

	   I trattini hanno una width vera e non solo una base flex: il browser,
	   quando calcola quanto e' largo un passo, ignora la base di uno
	   pseudo-elemento vuoto e lo conta 0, poi lo fa stare stringendo il resto
	   (il pallino finiva piu' largo del suo riquadro e il nome si troncava
	   anche con spazio libero). */
	.bf-passi__elenco {
		flex-wrap: nowrap;
	}
	.bf-passi__passo {
		flex: 0 0 auto;
	}
	.bf-passi__passo--corrente {
		flex: 0 1 auto;
		min-width: 0;
	}
	.bf-passi__passo--corrente .bf-passi__voce {
		min-width: 0;
	}
	.bf-passi__passo--corrente .bf-passi__etichetta {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* Telefoni: pallini, trattini e spazi un po' piu' piccoli, cosi' con sette
   passi resta posto per il nome del passo corrente (a 360px "Aliscafo R"
   ci sta intero). */
@media (max-width: 767px) {
	.bf-passi__numero {
		width: 20px;
		height: 20px;
		font-size: 11px;
	}
	.bf-passi__voce,
	.bf-passi__voce:hover,
	.bf-passi__voce:focus {
		gap: 4px;
		padding: 1px;
	}
	.bf-passi__passo + .bf-passi__passo::before {
		width: 8px;
		margin: 0 3px;
	}
}

/* ---------------------------------------------------------------------------
   Il riquadro del checkout sotto la testata.

   Nei checkout la testata e' una colonna flottante e il riquadro che segue e'
   col-centered, cioe' NON flottato: comincia alla stessa altezza della testata
   e, essendo position: relative come ogni colonna Bootstrap, le si dipinge
   sopra. Sul checkout traghetti copriva i passi (si vedevano solo le punte
   delle vecchie frecce), su quelli di escursioni e noleggi il titolo.
   clear: both lo fa partire sotto. Qui e non in bookfavignana-new.css perche'
   questo file lo caricano entrambi i layout.
   --------------------------------------------------------------------------- */
.form-panel.col-centered {
	clear: both;
}