/**
 * Tour, eventi e distintivi lato pilota.
 *
 * Tutto è confinato dentro .wpvams-tours: queste pagine finiscono dentro il
 * tema della compagnia, e un selettore generico verrebbe sovrascritto o
 * sovrascriverebbe. I colori sono pochi e dichiarati qui in cima; l'unico che
 * cambia da tour a tour è --wpvams-badge, il colore del distintivo, che la
 * pagina imposta sull'elemento e che qui fa da accento.
 */

.wpvams-tours {
	--wpvams-tour-ink: #1d2327;
	--wpvams-tour-soft: #646970;
	--wpvams-tour-line: #dcdcde;
	--wpvams-tour-bg: #fff;
	--wpvams-tour-ok: #1e7b34;
	--wpvams-tour-warn: #8a5700;
	--wpvams-tour-bad: #b32d2e;

	color: var(--wpvams-tour-ink);
}

.wpvams-tours .wpvams-tour-meta {
	color: var(--wpvams-tour-soft);
	font-size: .9em;
	margin: .2em 0;
}

.wpvams-tour-empty {
	color: var(--wpvams-tour-soft);
}

.wpvams-tour-alert {
	border-left: 4px solid var(--wpvams-tour-ok);
	background: rgba(30, 123, 52, .07);
	padding: .6em 1em;
	margin: 0 0 1.2em;
}

.wpvams-tour-alert-bad {
	border-left-color: var(--wpvams-tour-bad);
	background: rgba(179, 45, 46, .07);
	color: var(--wpvams-tour-bad);
}

/* --- etichette ----------------------------------------------------------- */

.wpvams-tour-kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5em;
	margin: 0 0 .4em;
}

.wpvams-tour-kind,
.wpvams-tour-phase {
	display: inline-block;
	font-size: .72em;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: .2em .6em;
	border-radius: 3px;
}

.wpvams-tour-kind {
	background: var(--wpvams-badge, #0b3d2e);
	color: #fff;
}

.wpvams-tour-phase-open     { background: #d5e8d8; color: #14602a; }
.wpvams-tour-phase-upcoming { background: #e5eaf5; color: #1c4f8f; }
.wpvams-tour-phase-closed   { background: #f0f0f1; color: #50575e; }

/* --- bacheca -------------------------------------------------------------- */

.wpvams-tour-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	gap: 1.2rem;
}

.wpvams-tour-card {
	display: flex;
	flex-direction: column;
	background: var(--wpvams-tour-bg);
	border: 1px solid var(--wpvams-tour-line);
	border-top: 4px solid var(--wpvams-badge, #0b3d2e);
	border-radius: 6px;
	overflow: hidden;
}

.wpvams-tour-cover {
	height: 8rem;
	background-size: cover;
	background-position: center;
}

.wpvams-tour-body {
	padding: 1em 1.2em 1.2em;
	display: flex;
	flex-direction: column;
	gap: .15em;
	flex: 1;
}

.wpvams-tour-title {
	margin: .1em 0 .3em;
	line-height: 1.25;
}

.wpvams-tour-card .wpvams-tour-title {
	font-size: 1.15em;
}

.wpvams-tour-title a {
	text-decoration: none;
	color: inherit;
}

.wpvams-tour-prize {
	font-weight: 600;
	color: var(--wpvams-badge, #0b3d2e);
	margin: .4em 0 .6em;
}

.wpvams-tour-card .wpvams-tour-btn,
.wpvams-tour-card .wpvams-tour-progress,
.wpvams-tour-card .wpvams-tour-done {
	margin-top: auto;
}

.wpvams-tour-done {
	color: var(--wpvams-tour-ok);
	font-weight: 600;
	margin: .3em 0;
}

/* --- pulsanti ------------------------------------------------------------- */

.wpvams-tour-form {
	margin: .6em 0;
}

.wpvams-tours .wpvams-tour-btn {
	display: inline-block;
	background: var(--wpvams-badge, #0b3d2e);
	color: #fff;
	border: 1px solid var(--wpvams-badge, #0b3d2e);
	border-radius: 4px;
	padding: .5em 1.2em;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	line-height: 1.4;
}

.wpvams-tours .wpvams-tour-btn:hover {
	filter: brightness(1.1);
}

.wpvams-tours .wpvams-tour-btn-ghost {
	background: transparent;
	color: var(--wpvams-badge, #0b3d2e);
}

/* --- avanzamento ---------------------------------------------------------- */

.wpvams-tour-progress {
	display: flex;
	align-items: center;
	gap: .6em;
	margin: .4em 0;
}

.wpvams-tour-bar {
	flex: 1;
	min-width: 5em;
	height: .5em;
	background: rgba(0, 0, 0, .1);
	border-radius: 3px;
	overflow: hidden;
}

.wpvams-tour-bar span {
	display: block;
	height: 100%;
	background: var(--wpvams-badge, #0b3d2e);
}

.wpvams-tour-count {
	font-size: .85em;
	font-variant-numeric: tabular-nums;
	color: var(--wpvams-tour-soft);
	white-space: nowrap;
}

/* --- pagina del tour ------------------------------------------------------ */

.wpvams-tour-hero {
	height: 14rem;
	background-size: cover;
	background-position: center;
	border-radius: 6px;
	margin-bottom: 1.2em;
}

.wpvams-tour-desc {
	max-width: 46em;
}

.wpvams-tour-boxes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 1rem;
	margin: 1.4em 0;
}

.wpvams-tour-box {
	border: 1px solid var(--wpvams-tour-line);
	border-radius: 6px;
	padding: 1em 1.2em;
	background: var(--wpvams-tour-bg);
}

.wpvams-tour-box h3 {
	margin: 0 0 .5em;
	font-size: 1em;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--wpvams-tour-soft);
}

.wpvams-tour-box ul {
	margin: 0;
	padding-left: 1.2em;
}

.wpvams-tour-money {
	font-size: 1.6em;
	font-weight: 700;
	margin: 0;
	color: var(--wpvams-badge, #0b3d2e);
}

.wpvams-tour-reasons {
	color: var(--wpvams-tour-warn);
}

.wpvams-tour-h {
	margin: 1.8em 0 .8em;
}

.wpvams-tour-scroll {
	overflow-x: auto;
}

.wpvams-tour-legs {
	width: 100%;
	border-collapse: collapse;
	font-size: .95em;
}

.wpvams-tour-legs th {
	text-align: left;
	font-size: .78em;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--wpvams-tour-soft);
	border-bottom: 1px solid rgba(0, 0, 0, .15);
	padding: .4em .6em;
}

.wpvams-tour-legs td {
	padding: .5em .6em;
	border-bottom: 1px solid rgba(0, 0, 0, .07);
}

.wpvams-tour-legs tr.is-flown td {
	color: var(--wpvams-tour-ok);
}

/* La prossima tratta di un tour in ordine è l'unica che conta: si vede da
   lontano. */
.wpvams-tour-legs tr.is-next td {
	background: rgba(11, 61, 46, .06);
	font-weight: 600;
}

.wpvams-tour-type {
	display: inline-block;
	font-size: .72em;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: .1em .4em;
	border-radius: 3px;
	background: #f0e6cc;
	color: #8a5700;
	margin-left: .3em;
}

/* --- stati ----------------------------------------------------------------- */

/*
 * Lo stato del tour per il pilota (da cominciare, in corso, completato) e lo
 * stato di ogni tratta (da volare, prossima, volata). Gli stessi colori nella
 * tabella, nella finestra e sulla mappa: verde è fatto, il colore del tour è
 * quello che viene adesso, grigio è quello che aspetta.
 */
.wpvams-tour-state,
.wpvams-tour-lstate {
	display: inline-block;
	font-size: .72em;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: .2em .6em;
	border-radius: 3px;
	white-space: nowrap;
}

.wpvams-tour-state-not_started { background: #f0f0f1; color: #50575e; }
.wpvams-tour-state-in_progress { background: #e5eaf5; color: #1c4f8f; }
.wpvams-tour-state-completed   { background: #d5e8d8; color: #14602a; }
.wpvams-tour-state-revoked     { background: #f5e0e0; color: #8a2424; }
.wpvams-tour-state-failed      { background: #f5e0e0; color: #8a2424; }

/* La penale si legge sempre, e sempre nello stesso colore: è la clausola
   che il pilota deve vedere prima di iscriversi, non una nota a margine. */
.wpvams-tours .wpvams-tour-penalty {
	color: var(--wpvams-tour-bad);
	font-weight: 600;
	font-size: .92em;
	margin: .4em 0;
}

.wpvams-tour-rule-penalty {
	color: var(--wpvams-tour-bad);
	font-weight: 600;
}

.wpvams-tour-lstate-flown { background: #d5e8d8; color: #14602a; }
.wpvams-tour-lstate-next  { background: var(--wpvams-badge, #0b3d2e); color: #fff; }
.wpvams-tour-lstate-todo  { background: #f0f0f1; color: #50575e; }

.wpvams-tour-me-state {
	margin: 0 0 .5em;
}

/* --- tabella cliccabile ------------------------------------------------------ */

.wpvams-tour-leg-row {
	cursor: pointer;
}

.wpvams-tour-leg-row:hover td {
	background: rgba(0, 0, 0, .035);
}

.wpvams-tour-leg-open {
	text-align: right;
}

.wpvams-tours .wpvams-tour-link {
	background: none;
	border: 0;
	padding: 0;
	color: var(--wpvams-badge, #0b3d2e);
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

/* --- mappa -------------------------------------------------------------------- */

.wpvams-tour-map {
	height: 26rem;
	border-radius: 6px;
	border: 1px solid var(--wpvams-tour-line);
	z-index: 0;
}

.wpvams-tour-map-legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.2em;
	font-size: .85em;
	color: var(--wpvams-tour-soft);
	margin: .5em 0 0;
}

.wpvams-tour-key::before {
	content: "";
	display: inline-block;
	width: 1.6em;
	height: 0;
	border-top: 3px solid;
	vertical-align: middle;
	margin-right: .4em;
}

.wpvams-tour-key-flown::before { border-color: #1e7b34; }
.wpvams-tour-key-next::before  { border-color: var(--wpvams-badge, #0b3d2e); }
.wpvams-tour-key-todo::before  { border-color: #8c8f94; border-top-style: dashed; }

.wpvams-tour-map-hint {
	margin-left: auto;
}

/* --- finestra del dettaglio ---------------------------------------------------- */

.wpvams-tour-dialog {
	border: 0;
	border-radius: 8px;
	padding: 0;
	width: min(44em, calc(100vw - 2em));
	max-height: calc(100vh - 3em);
	color: var(--wpvams-tour-ink);
	box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
}

.wpvams-tour-dialog::backdrop {
	background: rgba(0, 0, 0, .5);
}

.wpvams-tour-dialog-box {
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 3em);
}

.wpvams-tour-dialog-head,
.wpvams-tour-dialog-foot {
	display: flex;
	align-items: center;
	gap: .8em;
	padding: .9em 1.3em;
}

.wpvams-tour-dialog-head {
	justify-content: space-between;
	border-top: 4px solid var(--wpvams-badge, #0b3d2e);
	border-bottom: 1px solid var(--wpvams-tour-line);
}

.wpvams-tour-dialog-title {
	margin: 0;
	font-size: 1.15em;
}

.wpvams-tour-dialog-x {
	border: 0;
	background: none;
	font-size: 1.7em;
	line-height: 1;
	cursor: pointer;
	color: var(--wpvams-tour-soft);
}

.wpvams-tour-dialog-scroll {
	overflow-y: auto;
}

.wpvams-tour-dialog-body {
	padding: 1em 1.3em;
}

/* La carta della tratta, in cima alla finestra e da bordo a bordo: è la prima
   cosa che si guarda, prima ancora dei numeri. */
.wpvams-tour-dialog-map {
	height: 15rem;
	border-bottom: 1px solid var(--wpvams-tour-line);
	z-index: 0;
}

.wpvams-tour-wpt {
	font-size: .72em;
	font-weight: 600;
	letter-spacing: .03em;
	padding: 0 .3em;
}

.wpvams-tour-dialog-foot {
	justify-content: space-between;
	border-top: 1px solid var(--wpvams-tour-line);
}

.wpvams-tour-dialog-foot .wpvams-tour-btn:disabled {
	opacity: .35;
	cursor: default;
}

.wpvams-tour-dlg-state {
	display: flex;
	align-items: center;
	gap: .6em;
	margin: 0 0 1em;
}

.wpvams-tour-dlg-pass {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: .8em;
	align-items: center;
	background: rgba(0, 0, 0, .035);
	border-left: 4px solid var(--wpvams-badge, #0b3d2e);
	border-radius: 6px;
	padding: .8em 1em;
	margin-bottom: 1em;
}

.wpvams-tour-dlg-end {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.wpvams-tour-dlg-arr {
	text-align: right;
}

.wpvams-tour-dlg-icao {
	font-size: 1.9em;
	line-height: 1.1;
	letter-spacing: .04em;
}

.wpvams-tour-dlg-name {
	font-size: .85em;
	color: var(--wpvams-tour-soft);
	overflow-wrap: anywhere;
}

.wpvams-tour-dlg-mid {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .2em;
	color: var(--wpvams-badge, #0b3d2e);
}

.wpvams-tour-dlg-plane {
	font-size: 1.5em;
	line-height: 1;
}

.wpvams-tour-dlg-sum {
	font-size: .8em;
	color: var(--wpvams-tour-soft);
	white-space: nowrap;
}

.wpvams-tour-dlg-actions {
	margin: 1em 0 0;
}

.wpvams-tour-dlg-k {
	display: block;
	font-size: .75em;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--wpvams-tour-soft);
	margin: 0 0 .2em;
}

.wpvams-tour-dlg-facts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9em, 1fr));
	gap: .8em 1.2em;
	margin: 0 0 1em;
}

.wpvams-tour-dlg-facts dt {
	font-size: .75em;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--wpvams-tour-soft);
}

.wpvams-tour-dlg-facts dd {
	margin: .1em 0 0;
	font-weight: 600;
}

.wpvams-tour-dlg-notes p {
	margin: 0 0 .7em;
}

.wpvams-tour-dlg-fpl {
	white-space: pre-wrap;
	word-break: break-word;
	background: rgba(0, 0, 0, .05);
	border-radius: 4px;
	padding: .6em .8em;
	margin: 0;
	font-size: .9em;
}

.wpvams-tour-finishers li {
	margin: .2em 0;
}

.wpvams-tour-finishers .wpvams-tour-meta {
	margin-left: .6em;
}

/* --- distintivi ------------------------------------------------------------ */

.wpvams-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: .6em 0;
}

.wpvams-badge {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: .35em;
	width: 6.5em;
	text-align: center;
}

/*
 * La medaglia senza immagine: un disco del colore del distintivo, con un
 * bordo chiaro e uno scuro che la staccano da qualunque sfondo del tema.
 */
.wpvams-badge-medal,
.wpvams-badge-img {
	width: 4.2em;
	height: 4.2em;
	border-radius: 50%;
}

.wpvams-badge-medal {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wpvams-badge, #0b3d2e);
	color: #fff;
	font-weight: 800;
	font-size: 1em;
	letter-spacing: .03em;
	box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .35), 0 0 0 2px var(--wpvams-badge, #0b3d2e), 0 2px 6px rgba(0, 0, 0, .2);
}

.wpvams-badge-img {
	object-fit: cover;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}

.wpvams-badge-name {
	font-size: .78em;
	line-height: 1.25;
	color: var(--wpvams-tour-soft);
}

/* --- scheda del pilota ------------------------------------------------------ */

.wpvams-tours-mini {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wpvams-tours-mini li {
	display: grid;
	grid-template-columns: minmax(8em, 1fr) minmax(8em, 1.4fr);
	gap: 1em;
	align-items: center;
	padding: .35em 0;
	border-bottom: 1px solid rgba(0, 0, 0, .07);
}

.wpvams-tours-mini .wpvams-tour-progress {
	margin: 0;
}

@media (max-width: 600px) {
	.wpvams-tour-map {
		height: 18rem;
	}

	.wpvams-tour-dialog-map {
		height: 11rem;
	}

	.wpvams-tour-dlg-icao {
		font-size: 1.5em;
	}

	.wpvams-tour-map-hint {
		margin-left: 0;
	}

	.wpvams-tours-mini li {
		grid-template-columns: 1fr;
		gap: .2em;
	}

	.wpvams-tour-hero {
		height: 9rem;
	}
}