/**
 * Kärryhaku — mobiili ensin.
 *
 * Kaikki mitat rem-yksiköissä, jotta teeman fonttikoko ohjaa niitä.
 * Kosketuskohteet vähintään 44 px korkeita: sitä pienempää ei osu
 * sormella luotettavasti.
 *
 * Väreissä ei käytetä pelkkää vihreää/punaista erottelua — ajokortti-
 * ilmoituksessa on myös eri teksti ja eri reunus, jotta se välittyy myös
 * värisokealle.
 */

.vmhr-finder {
	--vmhr-gap: 0.75rem;
	--vmhr-radius: 0.625rem;
	--vmhr-line: #d8dde3;
	--vmhr-ink: #16191d;
	--vmhr-panel: #ffffff;
	--vmhr-on-accent: #ffffff;
	--vmhr-muted: #5c6670;
	--vmhr-accent: #0b6bcb;
	--vmhr-ok-bg: #e8f5ec;
	--vmhr-ok-ink: #1b5e2a;
	--vmhr-warn-bg: #fdf3e3;
	--vmhr-warn-ink: #7a4b06;
	--vmhr-best: #0b6bcb;

	max-width: 46rem;
	margin: 0 auto;
	color: var(--vmhr-ink);
	font-size: 1rem;
	line-height: 1.45;
}

.vmhr-finder__title {
	margin: 0 0 1rem;
	font-size: 1.375rem;
}

.vmhr-finder__step {
	margin-bottom: 1.25rem;
}

.vmhr-finder__legend {
	display: block;
	margin-bottom: 0.375rem;
	font-weight: 600;
}

.vmhr-finder__sub {
	margin: 0 0 0.5rem;
	color: var(--vmhr-muted);
	font-size: 0.875rem;
}

.vmhr-finder__hint {
	margin: 0.5rem 0 0;
	min-height: 1.25rem;
	color: var(--vmhr-muted);
	font-size: 0.875rem;
}

/* --- päivämäärät --- */

.vmhr-finder__dates {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--vmhr-gap);
}

@media (min-width: 30rem) {
	.vmhr-finder__dates {
		grid-template-columns: 1fr 1fr;
	}
}

.vmhr-finder__dates label {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-size: 0.875rem;
	color: var(--vmhr-muted);
}

.vmhr-finder__dates input {
	min-height: 2.75rem;
	padding: 0 0.625rem;
	border: 1px solid var(--vmhr-line);
	border-radius: var(--vmhr-radius);
	background: var(--vmhr-panel);
	color: var(--vmhr-ink);
	font-size: 1rem;

	/* iOS kasvattaa datetime-kentän omaa korkeuttaan; tämä pitää rivin
	   samassa mitassa kuin muut kentät. */
	-webkit-appearance: none;
	appearance: none;
}

/* --- pikavalinnat ja valintanapit --- */

/* Ks. .vmhr-when tyylitiedostossa vmh-rental.css: sama tarkoitus,
 * sama sisältö, eri lomake. */
.vmhr-finder__when {
	margin: 6px 0 0;
	font-size: 0.9rem;
	font-weight: 600;
}

.vmhr-finder__quick,
.vmhr-finder__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.vmhr-finder__quick button,
.vmhr-chip {
	min-height: 2.75rem;
	padding: 0 0.875rem;
	border: 1px solid var(--vmhr-line);
	border-radius: 999px;
	background: var(--vmhr-panel);
	color: var(--vmhr-ink);
	font: inherit;
	font-size: 0.9375rem;
	cursor: pointer;

	/* Puhelimessa napin teksti ei saa katketa kahdelle riville. */
	white-space: nowrap;
}

.vmhr-finder__quick button:hover,
.vmhr-chip:hover {
	border-color: var(--vmhr-accent);
}

.vmhr-finder__quick button.is-active,
.vmhr-chip.is-active {
	border-color: var(--vmhr-accent);
	background: var(--vmhr-accent);
	color: var(--vmhr-on-accent);
	font-weight: 600;
}

.vmhr-chip:focus-visible,
.vmhr-finder__quick button:focus-visible {
	outline: 2px solid var(--vmhr-accent);
	outline-offset: 2px;
}

/* --- tila --- */

.vmhr-finder__status {
	margin: 1rem 0 0.5rem;
	color: var(--vmhr-muted);
	font-size: 0.875rem;
}

/* --- tulokset --- */

.vmhr-finder__results {
	display: grid;
	gap: var(--vmhr-gap);
	scroll-margin-top: 1rem;
}

/* Kortti on yksisarakkeinen OLETUKSENA.
 *
 * Aiemmin tässä oli aina `grid-template-columns: 5rem 1fr`. Kuvaton
 * tuote sai silloin ainoana lapsena ENSIMMÄISEN sarakkeen, eli koko
 * sisältö puristui viiden remin leveyteen ja jokainen sana meni omalle
 * rivilleen. Se näkyi vasta oikeassa selaimessa: PHP-testit eivät voi
 * nähdä asettelua.
 *
 * Kaksi saraketta otetaan käyttöön vasta kun kuva on todella olemassa. */
.vmhr-card {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.875rem;
	padding: 0.875rem;
	border: 1px solid var(--vmhr-line);
	border-radius: var(--vmhr-radius);
	background: var(--vmhr-panel);
	color: inherit;
	text-decoration: none;
}

.vmhr-card--with-image {
	grid-template-columns: 5rem 1fr;
}

.vmhr-card:hover {
	border-color: var(--vmhr-accent);
}

.vmhr-card--best {
	border-color: var(--vmhr-best);
	border-width: 2px;
	padding: calc(0.875rem - 1px);
}

.vmhr-card__badge {
	position: absolute;
	top: -0.6875rem;
	left: 0.875rem;
	padding: 0.125rem 0.5rem;
	border-radius: 999px;
	background: var(--vmhr-best);
	color: var(--vmhr-on-accent);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.vmhr-card__image {
	width: 5rem;
	height: 5rem;
	border-radius: 0.5rem;
	object-fit: cover;
}

.vmhr-card__body {
	min-width: 0;
}

.vmhr-card__name {
	margin: 0 0 0.375rem;
	font-size: 1rem;
	line-height: 1.3;
}

.vmhr-card__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	margin: 0 0 0.5rem;
	padding: 0;
	list-style: none;
	color: var(--vmhr-muted);
	font-size: 0.8125rem;
}

.vmhr-card__facts li {
	padding: 0.0625rem 0.4375rem;
	border: 1px solid var(--vmhr-line);
	border-radius: 0.3125rem;
}

.vmhr-card__facts li:first-child {
	border-color: var(--vmhr-ink);
	color: var(--vmhr-ink);
	font-weight: 600;
}

/* Ajokortti: eri väri JA eri reunus, jotta ero näkyy myös
   värisokealle. */
.vmhr-card__licence {
	margin: 0 0 0.5rem;
	padding: 0.3125rem 0.5rem;
	border-left: 3px solid transparent;
	border-radius: 0.25rem;
	font-size: 0.8125rem;
}

.vmhr-card__licence.is-ok {
	border-left-color: var(--vmhr-ok-ink);
	background: var(--vmhr-ok-bg);
	color: var(--vmhr-ok-ink);
}

.vmhr-card__licence.is-warn {
	border-left-color: var(--vmhr-warn-ink);
	background: var(--vmhr-warn-bg);
	color: var(--vmhr-warn-ink);
	font-weight: 600;
}

/* Peilattu saatavuus: neutraali, ei hälytys. Tieto on oikea, mutta
   enintään tunnin vanha. */
.vmhr-card__mirrored {
	margin: 0 0 0.5rem;
	color: var(--vmhr-muted);
	font-size: 0.75rem;
}

.vmhr-card__noprice {
	color: var(--vmhr-muted);
	font-size: 0.9375rem;
}

.vmhr-card__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
}

.vmhr-card__price {
	font-size: 1.125rem;
}

.vmhr-card__free {
	color: var(--vmhr-muted);
	font-size: 0.8125rem;
}

/* Kortin tärkein nappi.
 *
 * Oli 32 px korkea, eli alle sen mitä sormella osuu luotettavasti.
 * Selaintesti nappasi tämän: min-height on nyt sama 2.75rem kuin muissa
 * kosketuskohteissa. */
.vmhr-card__cta {
	display: inline-flex;
	align-items: center;
	margin-left: auto;
	min-height: 2.75rem;
	padding: 0 1rem;
	border-radius: 999px;
	background: var(--vmhr-accent);
	color: var(--vmhr-on-accent);
	font-size: 0.875rem;
	font-weight: 600;
}

/* --- alapalkki ---
 *
 * Pinnattu alareunaan, jotta valinnan vaikutus näkyy vaikka tulokset
 * ovat ruudun ulkopuolella. Tämä korvaa automaattisen vierityksen, joka
 * siirsi lomakkeen pois sormen alta.
 *
 * env(safe-area-inset-bottom) pitää palkin iPhonen elepalkin yläpuolella.
 */
/* position: sticky EI toimi tässä.
 *
 * Sticky-elementti nousee luonnolliselta paikaltaan pysyäkseen
 * näkyvissä, ja koska sen luonnollinen paikka on tuloslistan JÄLKEEN, se
 * asettui listan päälle ja peitti toisen kortin otsikon. Se näkyi vain
 * selainkuvasta.
 *
 * fixed on ennustettava: palkki on aina samassa paikassa ruudulla, ja
 * tuloslistalle varataan sen verran tilaa alareunaan ettei mikään jää
 * piiloon. */
.vmhr-bar {
	position: fixed;
	left: 0.75rem;
	right: 0.75rem;
	bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
	z-index: 20;

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	width: auto;
	max-width: 44.5rem;
	margin: 0 auto;
	min-height: 3rem;
	padding: 0 0.5rem 0 1rem;

	border: 0;
	border-radius: 999px;
	background: var(--vmhr-ink);
	color: var(--vmhr-on-accent);
	font: inherit;
	cursor: pointer;
	box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.22);
}

.vmhr-bar[hidden] {
	display: none;
}

.vmhr-bar__text {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	min-width: 0;
}

.vmhr-bar__from {
	opacity: 0.75;
	font-size: 0.875rem;
}

.vmhr-bar__go {
	flex: 0 0 auto;
	padding: 0.375rem 0.875rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
	font-size: 0.875rem;
	font-weight: 600;
}

/* Tilaa palkille, jotta viimeinen kortti ei jää sen alle. */
@media (max-width: 47.99rem) {
	.vmhr-finder__results:not(:empty) {
		padding-bottom: 4.5rem;
	}
}

/* Työpöydällä tulokset näkyvät ilman palkkia. */
@media (min-width: 48rem) {
	.vmhr-bar {
		display: none;
	}
}

/* --- tyhjä tulos --- */

.vmhr-empty {
	padding: 0.875rem 1rem;
	border: 1px dashed var(--vmhr-line);
	border-radius: var(--vmhr-radius);
	color: var(--vmhr-muted);
}

.vmhr-empty p {
	margin: 0 0 0.5rem;
}

.vmhr-empty p:last-child {
	margin-bottom: 0;
}

/* Käyttäjä on pyytänyt vähemmän liikettä. */
@media (prefers-reduced-motion: reduce) {
	.vmhr-finder * {
		transition: none !important;
		animation: none !important;
	}
}

@media (prefers-color-scheme: dark) {
	.vmhr-finder {
		--vmhr-line: #39424c;
		--vmhr-ink: #eef1f4;
		--vmhr-muted: #a5b0bb;
		--vmhr-accent: #62a9f0;
		--vmhr-ok-bg: #16301d;
		--vmhr-ok-ink: #8fd6a3;
		--vmhr-warn-bg: #35270f;
		--vmhr-warn-ink: #e5bd6d;
		--vmhr-best: #62a9f0;
		--vmhr-panel: #1b2027;
		--vmhr-on-accent: #0d1117;
	}
}

/* ==================================================================
 * TEEMAN OMA TUMMA TILA
 *
 * Sama vika kuin varauslomakkeessa: prefers-color-scheme kertoo
 * käyttöjärjestelmän asetuksen eikä sivuston väriä. Tummalla teemalla
 * vaaleassa käyttöjärjestelmässä kärryhaun tekstit olivat lähes mustia
 * tummalla pohjalla — ja korttien pohja jäi valkoiseksi, koska se oli
 * kovakoodattu eikä muuttujassa. Nyt kaikki pinnat tulevat
 * muuttujista, ja scheme.js kertoo kumpi suunta on oikea.
 * ============================================================== */

.vmhr-finder[data-vmhr-scheme="dark"] {
	--vmhr-line: #39424c;
	--vmhr-ink: #eef1f4;
	--vmhr-muted: #a5b0bb;
	--vmhr-accent: #62a9f0;
	--vmhr-ok-bg: #16301d;
	--vmhr-ok-ink: #8fd6a3;
	--vmhr-warn-bg: #35270f;
	--vmhr-warn-ink: #e5bd6d;
	--vmhr-best: #62a9f0;
	--vmhr-panel: #1b2027;
	--vmhr-on-accent: #0d1117;
}

.vmhr-finder[data-vmhr-scheme="light"] {
	--vmhr-line: #d8dde3;
	--vmhr-ink: #16191d;
	--vmhr-muted: #5c6670;
	--vmhr-accent: #0b6bcb;
	--vmhr-ok-bg: #e8f5ec;
	--vmhr-ok-ink: #1b5e2a;
	--vmhr-warn-bg: #fdf3e3;
	--vmhr-warn-ink: #7a4b06;
	--vmhr-best: #0b6bcb;
	--vmhr-panel: #ffffff;
	--vmhr-on-accent: #ffffff;
}