/**
 * Ricerca, tabellone e scheda della prenotazione.
 */

.itb-cerca,
.itb-tabellone,
.itb-mia {
	--itb-inchiostro: #16161a;
	--itb-tenue: #5d6068;
	--itb-fondo: #fff;
	--itb-carta: #f6f6f8;
	--itb-bordo: #dfe0e4;
	--itb-marchio: #a8123c;

	color: var(--itb-inchiostro);
	font-size: 16.5px;
	line-height: 1.55;
}

@media (prefers-color-scheme: dark) {
	.itb-cerca, .itb-tabellone, .itb-mia {
		--itb-inchiostro: #f2f2f4;
		--itb-tenue: #a9adb6;
		--itb-fondo: #16161a;
		--itb-carta: #1f1f25;
		--itb-bordo: #32333b;
		--itb-marchio: #ef4d76;
	}
}

/* ---------------------------------------------------------------- ricerca */

.itb-cerca-form {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-end;
	background: var(--itb-carta);
	border: 1px solid var(--itb-bordo);
	border-radius: 14px;
	padding: 16px;
}

.itb-campo { display: flex; flex-direction: column; gap: 4px; flex: 1 1 180px; }
.itb-campo-stretto { flex: 0 0 110px; }
.itb-campo label { font-size: .8em; text-transform: uppercase; letter-spacing: .07em; color: var(--itb-tenue); }

.itb-campo select,
.itb-campo input {
	padding: 11px 12px;
	border: 1px solid var(--itb-bordo);
	border-radius: 10px;
	background: var(--itb-fondo);
	color: var(--itb-inchiostro);
	font: inherit;
}

.itb-cerca-esiti { display: grid; gap: 12px; margin-top: 18px; }
.itb-cerca-attesa, .itb-cerca-vuoto, .itb-cerca-avviso { color: var(--itb-tenue); margin: 0; }

.itb-sol {
	border: 1px solid var(--itb-bordo);
	border-radius: 14px;
	padding: 16px;
	background: var(--itb-fondo);
}

.itb-sol-testa { display: flex; flex-wrap: wrap; gap: 14px; align-items: baseline; }
.itb-sol-ore { font-size: 1.25em; font-weight: 700; }
.itb-sol-durata { color: var(--itb-tenue); }
.itb-sol-prezzo { margin-left: auto; font-weight: 700; color: var(--itb-marchio); }
.itb-sol-nota { margin: 4px 0 10px; font-size: .88em; color: var(--itb-tenue); }

.itb-sol-ambienti {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 8px;
}

.itb-sol-ambiente {
	border: 1px solid var(--itb-bordo);
	border-radius: 10px;
	padding: 9px 11px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: .9em;
}

.itb-sol-ambiente.esaurito { opacity: .45; }
.itb-sol-amb-nome { font-weight: 600; }
.itb-sol-amb-posti { font-size: .82em; color: var(--itb-marchio); }

/* -------------------------------------------------------------- tabellone */

.itb-tabellone {
	border: 1px solid var(--itb-bordo);
	border-radius: 14px;
	padding: 18px;
	background: var(--itb-carta);
}

.itb-tab-titolo { margin: 0; font-size: 1.3em; }
.itb-tab-sotto { margin: 2px 0 14px; color: var(--itb-tenue); font-size: .9em; }
.itb-tab-griglia { width: 100%; border-collapse: collapse; }
.itb-tab-griglia th { text-align: left; font-size: .76em; text-transform: uppercase; letter-spacing: .07em; color: var(--itb-tenue); padding: 6px 8px; }
.itb-tab-griglia td { padding: 9px 8px; border-top: 1px solid var(--itb-bordo); }
.itb-tab-ora { font-weight: 700; font-variant-numeric: tabular-nums; }
.itb-tab-ritardo { color: #b3261e; font-weight: 600; }
.itb-tab-soppresso { color: #b3261e; text-transform: uppercase; font-size: .82em; letter-spacing: .06em; }
.itb-tab-orario { color: #1a7a4c; }
.itb-tab-programmato { color: var(--itb-tenue); }
.itb-tab-nota, .itb-tab-vuoto { margin: 12px 0 0; font-size: .8em; color: var(--itb-tenue); }

/* ------------------------------------------------------- mia prenotazione */

.itb-mia-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.itb-mia-form label { flex: 1 1 100%; font-size: .8em; text-transform: uppercase; letter-spacing: .07em; color: var(--itb-tenue); }

.itb-mia-form input {
	flex: 1 1 200px;
	padding: 12px 14px;
	border: 1px solid var(--itb-bordo);
	border-radius: 10px;
	background: var(--itb-fondo);
	color: var(--itb-inchiostro);
	font: inherit;
	text-transform: uppercase;
	letter-spacing: .12em;
}

.itb-mia-scheda {
	margin-top: 18px;
	border: 2px solid var(--itb-marchio);
	border-radius: 14px;
	padding: 20px;
}

.itb-mia-occhiello { margin: 0; text-transform: uppercase; letter-spacing: .09em; font-size: .78em; color: var(--itb-tenue); }
.itb-mia-codice { margin: 4px 0 10px; font-size: 2em; letter-spacing: .16em; }
.itb-mia-tratta { margin: 0; font-size: 1.2em; font-weight: 600; }
.itb-mia-quando { margin: 2px 0 12px; color: var(--itb-tenue); }
.itb-mia-ritardo { color: #b3261e; font-weight: 600; margin: 0 0 8px; }
.itb-mia-meteo { margin: 0 0 12px; color: var(--itb-tenue); }
.itb-mia-dati { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 0 0 14px; }
.itb-mia-dati dt { color: var(--itb-tenue); font-size: .9em; }
.itb-mia-dati dd { margin: 0; font-weight: 600; }
.itb-mia-nota, .itb-mia-vuoto { font-size: .82em; color: var(--itb-tenue); }

/* ------------------------------------------------------- archivio tratte */

.itb-tratte {
	--itb-inchiostro: #16161a;
	--itb-tenue: #5d6068;
	--itb-fondo: #fff;
	--itb-carta: #f6f6f8;
	--itb-bordo: #dfe0e4;
	--itb-marchio: #a8123c;

	color: var(--itb-inchiostro);
	font-size: 16.5px;
	line-height: 1.55;
}

@media (prefers-color-scheme: dark) {
	.itb-tratte {
		--itb-inchiostro: #f2f2f4;
		--itb-tenue: #a9adb6;
		--itb-fondo: #16161a;
		--itb-carta: #1f1f25;
		--itb-bordo: #32333b;
		--itb-marchio: #ef4d76;
	}
}

.itb-tratte-testa {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 16px;
}

.itb-tratte-titolo { margin: 0; font-size: 1.3em; }
.itb-tratte-sotto { margin: 2px 0 0; color: var(--itb-tenue); font-size: .9em; }
.itb-tratte-quando { font-variant-numeric: tabular-nums; }

.itb-tratte-cerca { display: flex; gap: 8px; flex-wrap: wrap; }

.itb-tratte-cerca input,
.itb-tratte-cerca select {
	padding: 10px 12px;
	border: 1px solid var(--itb-bordo);
	border-radius: 10px;
	background: var(--itb-fondo);
	color: var(--itb-inchiostro);
	font: inherit;
}

.itb-tratte-elenco {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 12px;
}

.itb-tratte-elenco[aria-busy="true"] { opacity: .55; }

.itb-tratta {
	border: 1px solid var(--itb-bordo);
	border-radius: 14px;
	padding: 16px;
	background: var(--itb-fondo);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.itb-tratta-nome { margin: 0; font-size: 1.05em; line-height: 1.3; }

.itb-tratta-dati {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 12px;
}

.itb-tratta-dati li { display: flex; flex-direction: column; }
.itb-tratta-valore { font-weight: 700; font-size: 1.05em; }
.itb-tratta-voce { font-size: .76em; color: var(--itb-tenue); text-transform: uppercase; letter-spacing: .05em; }
.itb-tratta-nota { margin: 0; font-size: .84em; color: var(--itb-tenue); }

.itb-tratta-apri { align-self: flex-start; padding: 9px 14px; font-size: .9em; }

.itb-tratta-oggi {
	border-top: 1px solid var(--itb-bordo);
	padding-top: 10px;
	font-size: .9em;
}

.itb-tratta-meteo { margin: 0 0 8px; color: var(--itb-tenue); }
.itb-tratta-meteo-voce { white-space: nowrap; }
.itb-tratta-partenze { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.itb-tratta-partenze li { display: flex; flex-direction: column; }
.itb-tratta-ora { font-weight: 700; font-variant-numeric: tabular-nums; }
.itb-tratta-dett { font-size: .84em; color: var(--itb-tenue); }
.itb-tratte-vuoto, .itb-tratte-nota { color: var(--itb-tenue); font-size: .85em; }
.itb-tratte-nota { margin-top: 16px; }