/* MH Fare Calculator — standalone, self-contained styles. Every selector
   is namespaced .mhfc-* so this plugin cannot visually collide with the
   theme, another plugin, or a page builder's own classes. */

.mhfc-wrap { max-width: 420px; margin: 0 auto; }
.mhfc-wrap * { box-sizing: border-box; }

.mhfc-card {
	background: var(--mhfc-card-bg, #0f2c1f);
	color: var(--mhfc-text, #fffdf8);
	border-radius: 22px;
	padding: 28px 26px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.mhfc-eyebrow {
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mhfc-accent, #f5a623);
	display: block;
	margin-bottom: 8px;
}

.mhfc-title {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 700;
	font-size: 1.5rem;
	margin: 0 0 22px;
	color: var(--mhfc-text, #fffdf8);
}

.mhfc-slider {
	width: 100%;
	-webkit-appearance: none;
	appearance: none;
	height: 4px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.25);
	outline: none;
	margin: 0;
	accent-color: var(--mhfc-accent, #f5a623);
}
.mhfc-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px; height: 20px; border-radius: 50%;
	background: var(--mhfc-accent, #f5a623);
	cursor: pointer;
	border: 3px solid var(--mhfc-text, #fffdf8);
}
.mhfc-slider::-moz-range-thumb {
	width: 20px; height: 20px; border-radius: 50%;
	background: var(--mhfc-accent, #f5a623);
	cursor: pointer;
	border: 3px solid var(--mhfc-text, #fffdf8);
}

.mhfc-slider-labels {
	display: flex;
	justify-content: space-between;
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 0.72rem;
	color: var(--mhfc-muted, #cfd4c9);
	margin-top: 8px;
}

.mhfc-rows { margin-top: 26px; }
.mhfc-row {
	display: flex;
	justify-content: space-between;
	font-size: 0.9rem;
	color: var(--mhfc-muted, #cfd4c9);
	padding: 4px 0;
}
.mhfc-row span:last-child { color: var(--mhfc-text, #fffdf8); font-weight: 600; }

.mhfc-total-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	margin-top: 14px;
	padding-top: 14px;
	font-size: 0.95rem;
	color: var(--mhfc-text, #fffdf8);
}
.mhfc-total-row strong {
	font-family: 'Fraunces', Georgia, serif;
	font-size: 2rem;
	color: var(--mhfc-accent, #f5a623);
}

@media (max-width: 420px) {
	.mhfc-card { padding: 22px 18px; border-radius: 18px; }
	.mhfc-title { font-size: 1.3rem; }
	.mhfc-total-row strong { font-size: 1.7rem; }
}