/* Fare Estimator block (inc/fare-estimator.php). Loaded only where the block is used. */
.ust-fare {
	container-type: inline-size;
	background: var(--ust-surface, #fff);
	color: var(--ust-surface-text, inherit);
	border: 1px solid var(--ust-surface-border, #e2e8f0);
	border-radius: calc(var(--ust-radius, 8px) * 1.5);
	padding: clamp(1.1rem, 3vw, 2rem);
	box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
}
.ust-fare__title { margin: 0 0 .35em; }
.ust-fare__intro { margin: 0 0 1em; opacity: .85; }
.ust-fare__form { display: grid; gap: .9rem; }
.ust-fare__row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.ust-fare__row--opts { align-items: end; }
.ust-fare__field { display: grid; gap: .3rem; font-weight: 600; font-size: .95rem; }
.ust-fare__field input,
.ust-fare__manual input {
	width: 100%;
	padding: .7em .9em;
	border: 1px solid var(--ust-surface-border, #cbd5e1);
	border-radius: var(--ust-radius, 8px);
	background: var(--ust-surface, #fff);
	color: inherit;
	font: inherit;
	font-weight: 400;
}
.ust-fare__trip { display: flex; gap: .4rem; border: 0; margin: 0; padding: 0; flex-wrap: wrap; }
.ust-fare__trip label {
	display: inline-flex; align-items: center; gap: .4em; cursor: pointer;
	padding: .55em .95em; border: 1px solid var(--ust-surface-border, #cbd5e1); border-radius: 999px;
}
.ust-fare__trip label:has(input:checked) { border-color: var(--ust-color-button-bg, #2563eb); box-shadow: inset 0 0 0 1px var(--ust-color-button-bg, #2563eb); }
.ust-fare__extras { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.ust-fare__extras label { display: inline-flex; align-items: center; gap: .4em; cursor: pointer; }
.ust-fare__extras em { font-style: normal; opacity: .7; }
.ust-fare__manual summary { cursor: pointer; font-size: .92rem; opacity: .8; }
.ust-fare__manual input { max-width: 12rem; margin-top: .5rem; }
.ust-fare__go { justify-self: start; }
.ust-fare__go:disabled { opacity: .6; cursor: progress; }
.ust-fare__result {
	margin-top: 1.1rem; padding: 1rem 1.2rem; border-radius: var(--ust-radius, 8px);
	background: color-mix(in srgb, var(--ust-color-button-bg, #2563eb) 8%, transparent);
	display: grid; gap: .35rem; justify-items: start;
}
.ust-fare__result.is-error { background: color-mix(in srgb, #dc2626 8%, transparent); }
.ust-fare__result[hidden] { display: none; }
.ust-fare__amount { margin: 0; font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 800; line-height: 1.1; color: var(--ust-color-button-bg, #2563eb); }
.ust-fare__result.is-error .ust-fare__amount { font-size: 1.1rem; color: #b91c1c; }
.ust-fare__detail { margin: 0; opacity: .85; }
.ust-fare__request { margin-top: .4rem; }
.ust-fare__request[hidden] { display: none; }
.ust-fare__rates, .ust-fare__note { margin: .9rem 0 0; font-size: .9rem; opacity: .8; }
.ust-fare__note { margin-top: .3rem; }
.ust-fare__credit { margin: .3rem 0 0; font-size: .75rem; opacity: .55; }
/* Narrow container (a half-width column, a sidebar or a phone): one field per row. */
@container (max-width: 560px) {
	.ust-fare__row { grid-template-columns: 1fr; }
	.ust-fare__go { justify-self: stretch; }
}