/* 24Rent Hansel Form — scoped styles. */
.r24hf {
	--r24-accent: #f39200;
	--r24-dark: #1a1a1a;
	--r24-grey: #555;
	--r24-border: #d9d9d9;
	--r24-bg: #fff;
	max-width: 720px;
	margin: 0 auto;
	color: var(--r24-dark);
	font-size: 16px;
}

.r24hf .r24hf-section {
	border: 1px solid var(--r24-border);
	border-left: 4px solid var(--r24-accent);
	border-radius: 8px;
	padding: 16px 18px 4px;
	margin: 0 0 14px;
	background: var(--r24-bg);
}

.r24hf legend {
	font-weight: 700;
	font-size: 18px;
	padding: 0 8px;
	color: var(--r24-dark);
}

.r24hf [hidden] {
	display: none !important;
}

.r24hf .r24hf-field {
	margin: 0 0 11px;
}

/* Booking-type options (Varaustapa). */
.r24hf .r24hf-options {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.r24hf .r24hf-option {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid var(--r24-border);
	border-radius: 8px;
	cursor: pointer;
	font-weight: 400;
}

.r24hf .r24hf-option:hover {
	border-color: var(--r24-accent);
}

.r24hf .r24hf-option input {
	width: auto;
	margin-top: 3px;
	accent-color: var(--r24-accent);
}

.r24hf .r24hf-option-body {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.r24hf .r24hf-option-title {
	font-weight: 700;
	font-size: 15px;
}

.r24hf .r24hf-option-desc {
	color: var(--r24-grey);
	font-size: 13px;
}

.r24hf label,
.r24hf .r24hf-label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
	font-size: 14px;
}

.r24hf input[type="text"],
.r24hf input[type="tel"],
.r24hf input[type="email"],
.r24hf input[type="date"],
.r24hf input[type="time"],
.r24hf select,
.r24hf textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid var(--r24-border);
	border-radius: 6px;
	font-size: 15px;
	font-family: inherit;
	background: #fff;
	color: var(--r24-dark);
	transition: border-color .15s ease, box-shadow .15s ease;
}

/* The whole date field opens the picker (JS calls showPicker), so cue it as
   clickable rather than only the tiny calendar icon. */
.r24hf input[type="date"],
.r24hf input[type="date"]::-webkit-calendar-picker-indicator {
	cursor: pointer;
}

/* Auto-filled organisation name (derived from the Y-tunnus). While read-only it
   reads as a locked display, not a fillable required box. When PRH can't resolve
   the Y-tunnus, JS removes [readonly] and it reverts to a normal editable input. */
.r24hf input[readonly] {
	background: #f3f4f6;
	color: #4b5563;
	border-style: dashed;
	cursor: default;
}
.r24hf input[readonly]:focus {
	outline: none;
	border-color: var(--r24-border);
	box-shadow: none;
}
.r24hf input[readonly]::placeholder {
	color: #9ca3af;
	font-style: italic;
}

.r24hf input:focus,
.r24hf select:focus,
.r24hf textarea:focus {
	outline: none;
	border-color: var(--r24-accent);
	box-shadow: 0 0 0 3px rgba( 243, 146, 0, .18 );
}

.r24hf .r24hf-row {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.r24hf .r24hf-row > .r24hf-field {
	flex: 1 1 200px;
}

.r24hf .r24hf-radio {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 400;
	margin-right: 18px;
}

.r24hf .r24hf-radio input {
	width: auto;
	accent-color: var(--r24-accent);
}

.r24hf .r24hf-help {
	display: block;
	margin-top: 5px;
	color: var(--r24-grey);
	font-size: 13px;
	font-weight: 400;
}

.r24hf .r24hf-req {
	color: var(--r24-accent);
}

.r24hf .r24hf-company-status {
	display: block;
	margin-top: 5px;
	font-size: 13px;
	font-weight: 600;
}

.r24hf .r24hf-company-status:empty {
	display: none;
}

.r24hf .r24hf-company-status.is-checking {
	color: var(--r24-grey);
	font-weight: 400;
}

.r24hf .r24hf-company-status.is-found {
	color: #1d6b2c;
}

.r24hf .r24hf-company-status.is-missing {
	color: #a32020;
	font-weight: 400;
}

.r24hf .r24hf-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.4;
	cursor: pointer;
}

.r24hf .r24hf-check input {
	width: auto;
	margin-top: 3px;
	accent-color: var(--r24-accent);
	flex: 0 0 auto;
}

/* Location-storage consent (Hansel 24.7). The two options are paragraphs, not
   one-liners, so they override the inline .r24hf-radio layout: full width, and
   the control top-aligned with the first line of its text. Both options get
   IDENTICAL styling on purpose — visually favouring the "allow" option would be
   the nudging pattern EDPB guidelines 03/2022 call out. */
.r24hf .r24hf-location {
	margin-bottom: 18px;
}

.r24hf .r24hf-location-lead {
	margin: 0 0 4px;
	font-size: 14px;
}

.r24hf .r24hf-location-lead em {
	color: var(--r24-grey);
	font-style: normal;
	font-weight: 400;
}

.r24hf .r24hf-location-intro {
	margin: 0 0 10px;
	font-size: 14px;
	line-height: 1.45;
}

.r24hf .r24hf-location .r24hf-radio {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 10px;
	font-size: 14px;
	line-height: 1.45;
	cursor: pointer;
}

.r24hf .r24hf-location .r24hf-radio input {
	margin-top: 3px;
	flex: 0 0 auto;
}

.r24hf .r24hf-location .r24hf-hint {
	display: block;
	color: var(--r24-grey);
	font-size: 13px;
}

.r24hf .r24hf-note {
	font-size: 13px;
	color: var(--r24-grey);
	margin: 0 0 18px;
}

.r24hf .r24hf-actions {
	margin: 0;
}

.r24hf .r24hf-submit {
	background: var(--r24-accent);
	color: #fff;
	border: 0;
	border-radius: 6px;
	padding: 13px 28px;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: filter .15s ease;
}

.r24hf .r24hf-submit:hover {
	filter: brightness( .94 );
}

.r24hf .r24hf-submit:disabled {
	opacity: .6;
	cursor: default;
}

/* Honeypot: keep it out of sight and away from assistive tech. */
.r24hf .r24hf-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Status messages. */
.r24hf .r24hf-messages {
	margin: 0 0 18px;
	padding: 0;
	border-radius: 6px;
	font-size: 15px;
}

.r24hf .r24hf-messages:empty {
	display: none;
}

.r24hf .r24hf-messages.r24hf-success {
	padding: 12px 16px;
	background: #eaf7ec;
	border: 1px solid #b7e0bd;
	color: #1d6b2c;
}

.r24hf .r24hf-messages.r24hf-error {
	padding: 12px 16px;
	background: #fdecec;
	border: 1px solid #f3b9b9;
	color: #a32020;
}

/* Express availability results. */
.r24hf .r24hf-search {
	background: #fff;
	color: var(--r24-accent);
	border: 1px solid var(--r24-accent);
	border-radius: 6px;
	padding: 10px 20px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.r24hf .r24hf-search:hover {
	background: var(--r24-accent);
	color: #fff;
}

.r24hf .r24hf-search:disabled {
	opacity: .6;
	cursor: default;
}

/* The results are their own region, not loose cards floating between the
   search controls and the customer fields. A panel says where the list starts
   and stops; before this it read as part of whatever sat above it. Still
   collapses entirely while empty, so nothing shows before the first search. */
.r24hf .r24hf-results {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 10px 0 14px;
	padding: 14px;
	border: 1px solid var(--r24-border);
	border-left: 3px solid var(--r24-accent);
	border-radius: 8px;
	background: rgba(0, 0, 0, .02);
}

.r24hf .r24hf-results:empty {
	display: none;
	padding: 0;
	border: 0;
}

/* Once a car is chosen the other cards are hidden rather than removed, so
   "Vaihda auto" can bring them back with no second search. */
.r24hf .r24hf-results.is-picked .r24hf-vehicle:not(.is-selected) {
	display: none;
}

.r24hf .r24hf-change-vehicle {
	display: none;
	align-self: flex-start;
	padding: 6px 12px;
	border: 1px solid var(--r24-border);
	border-radius: 6px;
	background: #fff;
	font-size: .9em;
	cursor: pointer;
}

.r24hf .r24hf-results.is-picked .r24hf-change-vehicle {
	display: inline-block;
}

/* Shown when a search parameter changed and the previous results no longer
   answer the question that was asked. */
.r24hf .r24hf-stale {
	font-style: italic;
}

.r24hf .r24hf-vehicle {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid var(--r24-border);
	border-radius: 8px;
	cursor: pointer;
	font-weight: 400;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.r24hf .r24hf-vehicle:hover {
	border-color: var(--r24-accent);
}

.r24hf .r24hf-vehicle.is-selected {
	border-color: var(--r24-accent);
	box-shadow: 0 0 0 2px rgba( 243, 146, 0, .25 );
	background: #fffaf2;
}

.r24hf .r24hf-vehicle input {
	width: auto;
	margin-top: 3px;
	accent-color: var(--r24-accent);
}

.r24hf .r24hf-vehicle-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.r24hf .r24hf-vehicle-title {
	font-weight: 700;
	font-size: 15px;
}

.r24hf .r24hf-vehicle-meta {
	color: var(--r24-grey);
	font-size: 13px;
}

.r24hf .r24hf-vehicle-price {
	font-weight: 700;
	color: var(--r24-dark);
	font-size: 15px;
	margin-top: 2px;
}

.r24hf .r24hf-vehicle-price small {
	font-weight: 400;
	color: var(--r24-grey);
}

.r24hf .r24hf-empty {
	color: var(--r24-grey);
	font-size: 14px;
	padding: 6px 0;
}

.r24hf .r24hf-booking-ref {
	font-weight: 700;
	margin: 8px 0 0;
}

.r24hf .r24hf-summary {
	display: grid;
	grid-template-columns: minmax(120px, max-content) 1fr;
	gap: 4px 14px;
	margin: 12px 0;
	padding: 12px 14px;
	background: rgba( 255, 255, 255, .6 );
	border: 1px solid #b7e0bd;
	border-radius: 6px;
	font-size: 14px;
}

.r24hf .r24hf-summary dt {
	font-weight: 600;
	color: var(--r24-grey);
	margin: 0;
}

.r24hf .r24hf-summary dd {
	margin: 0;
	color: var(--r24-dark);
}

@media ( max-width: 480px ) {
	.r24hf .r24hf-summary {
		grid-template-columns: 1fr;
		gap: 0 0;
	}
	.r24hf .r24hf-summary dd {
		margin: 0 0 8px;
	}
}

.r24hf.r24hf-unavailable p {
	padding: 16px;
	border: 1px solid var(--r24-border);
	border-left: 4px solid var(--r24-accent);
	border-radius: 8px;
	color: var(--r24-grey);
}

@media ( max-width: 540px ) {
	.r24hf .r24hf-row {
		gap: 0;
	}
}

/* ---- address autocomplete (Digitransit suggestions) ---- */

.r24hf .r24hf-addr {
	position: relative;
}

.r24hf .r24hf-addr-list {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 30;
	margin: 2px 0 0;
	background: #fff;
	border: 1px solid var(--r24-border);
	border-radius: 8px;
	box-shadow: 0 6px 18px rgba( 0, 0, 0, 0.12 );
	max-height: 260px;
	overflow-y: auto;
}

.r24hf .r24hf-addr-item {
	padding: 9px 12px;
	cursor: pointer;
	font-size: 14px;
	line-height: 1.35;
}

.r24hf .r24hf-addr-item:hover,
.r24hf .r24hf-addr-item.is-active {
	background: var(--r24-accent);
	color: #fff;
}

/* ---- disabled payment option (Peppol "tulossa pian") ---- */

.r24hf .r24hf-radio.r24hf-disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.r24hf .r24hf-radio.r24hf-disabled input {
	cursor: not-allowed;
}

.r24hf .r24hf-soon {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 8px;
	border-radius: 10px;
	background: var(--r24-border);
	color: var(--r24-grey);
	font-size: 12px;
	font-style: normal;
	font-weight: 600;
	white-space: nowrap;
}

/* ---- billed-length note (24 h pricing → full days) ---- */

.r24hf .r24hf-duration {
	margin: 4px 0 12px;
	padding: 8px 12px;
	background: rgba( 243, 146, 0, 0.08 );
	border-left: 3px solid var(--r24-accent);
	border-radius: 6px;
	font-size: 14px;
	line-height: 1.4;
}

/* Below-minimum state: the duration note becomes a warning. */
.r24hf .r24hf-duration.r24hf-duration--warn {
	background: rgba( 200, 30, 30, 0.07 );
	border-left-color: #c81e1e;
	color: #a01515;
	font-weight: 600;
}

/* ---- pay-now call-to-action button (card bookings) ---- */

.r24hf .r24hf-pay-cta {
	margin: 16px 0 10px;
	text-align: center;
}

.r24hf .r24hf-pay-now {
	display: inline-block;
	background: var(--r24-accent);
	color: #fff;
	text-decoration: none;
	border-radius: 6px;
	padding: 15px 36px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.15 );
	transition: filter .15s ease;
}

.r24hf .r24hf-pay-now:hover,
.r24hf .r24hf-pay-now:focus {
	filter: brightness( .94 );
	color: #fff;
	text-decoration: none;
}

/* ---- plugin version stamp (bottom of the form) ---- */

.r24hf .r24hf-version {
	margin: 10px 0 0;
	text-align: right;
	font-size: 12px;
	line-height: 1.2;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	letter-spacing: .02em;
	color: var(--r24-grey);
	opacity: .85;
}

/* form.js disables time slots that can't be chosen: start slots already past
   (today), and end slots before the minimum rental length. Without this they
   inherit .r24hf's colour and look identical to selectable ones. Option styling
   is honoured by Chrome/Firefox/Edge but ignored by Safari, so form.js ALSO
   appends a reason to the label ("mennyt" / "liian aikainen") — the text is the
   cross-browser cue, this is the visual reinforcement. */
.r24hf select option:disabled {
	color: #9b9b9b;
	background-color: #f2f2f2;
	font-style: italic;
}

/* Inline validation errors. A failed submit used to send the customer to the
   message box at the top of the form, which reports that something is wrong
   but not where — worst for the consent checkboxes near the bottom, which is
   exactly the case Tashna hit. The message now sits against the control it
   belongs to, and submit() scrolls THAT into view. */
.r24hf .r24hf-field-error {
	display: block;
	margin: 4px 0 0;
	color: #b3001b;
	font-size: .88em;
	font-weight: 600;
	line-height: 1.35;
}

.r24hf .r24hf-invalid {
	border-color: #b3001b;
	box-shadow: 0 0 0 2px rgba(179, 0, 27, .12);
}

/* The shared-Y-tunnus picker: only shown when one Y-tunnus covers several
   Hansel ordering organisations, so it should read as a question, not as a
   field the customer skipped. */
.r24hf .r24hf-customer-pick .r24hf-hint {
	display: block;
	margin-top: 4px;
	color: var(--r24-grey);
	font-size: .88em;
	line-height: 1.35;
}

/* E-invoice routing block — indented under the chosen payment method so it
   reads as belonging to it rather than as a new section. */
.r24hf .r24hf-einvoice {
	margin: 10px 0 0 26px;
	padding: 12px 14px;
	border-left: 2px solid var(--r24-border);
	border-radius: 0 6px 6px 0;
	background: rgba(0, 0, 0, .02);
}

.r24hf .r24hf-einvoice .r24hf-note {
	margin-top: 0;
}

.r24hf .r24hf-einvoice-ref {
	margin-bottom: 0;
}