:root {
	--lknna-ink: #17343a;
	--lknna-border: #d9e2e5;
	--lknna-input-border: #aebfc0;
	--lknna-accent: #ed6a3a;
	--lknna-muted: #66787b;
	--lknna-card-background: #fbfcfa;
	--lknna-booking-background: #f2f2f2;
	--lknna-disabled-border: #ef0000ce;

	/* RENGASPARK TYYLITTELYT */
	--rp-green-light: #00ef1e;
	--rp-green-dark: #5ca81c;
	--rp-green-border: #7cda24ec;
	--rp-green-gradient: linear-gradient(90deg, #7cda24 0, #00ef1e);
	--rp-green-button-gradient-light: linear-gradient(90deg, #7cda24bb 0, #00ef20c0);
	--rp-green-button-gradient-dark: linear-gradient(90deg, #6cbe1ebb 0, #00ca1bc0);
}


.lknna-booking {
	box-sizing: border-box;
	margin-top: 2rem;
	padding: 24px;
	border: 1px solid var(--lknna-border);
	border-radius: 8px;
	background: var(--lknna-card-background);
	color: var(--lknna-ink);
	font-family: inherit;
}

.lknna-card {
	width: 500px !important;
	max-width: 100% !important;
	/* border-top: 4px solid var(--rp-green-light); */
}

.lknna-booking {
	width: 100%;
	max-width: 100%;
	background: var(--lknna-booking-background);
}

.lknna-booking[data-admin-mode="1"] {
	max-width: 1200px;
}

.lknna-booking-notice {
	box-sizing: border-box;
	margin: 20px 0;
	padding: 16px 20px;
	border: 1px solid var(--lknna-border);
	border-radius: 8px;
	background: #f5f5f5;
	color: var(--lknna-ink);
}

.lknna-booking-notice strong {
	display: block;
	margin-bottom: 6px;
}

.lknna-booking-notice p {
	margin: 0;
}

/* Headings and supporting text */
.lknna-card h3,
.lknna-booking h2 {
	margin: 4px 0 8px;
	font-size: 1.45rem;
}

.lknna-card__eyebrow {
	color: var(--rp-green-light);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;

}

.lknna-card__eyebrow-description {
	margin-top: 10px;
	padding: 3px;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--lknna-muted);
}

.lknna-muted {
	color: var(--lknna-muted);
}

.lknna-booking__intro p {
	margin-top: 0;
}

/* ASENNUSSLOTIT (AJAT) */
.lknna-booking-timeslots {
	margin-top: 20px;
	padding: 16px;
	border: 1px solid var(--lknna-border);
	border-radius: 8px;
	background: #f5f5f5;
	box-shadow: 0 4px 8px rgb(23 52 58 / 12%);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 220ms ease, transform 220ms ease;
	will-change: opacity, transform;
}

.lknna-booking-timeslots.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.lknna-slots,
.lknna-results {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 10px;
}

.lknna-slots > .lknna-muted,
.lknna-results > .lknna-muted,
.lknna-results > p {
	grid-column: 1 / -1;
}

.lknna-slot {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
	min-height: 86px;
	padding: 10px;
	border: 1px solid var(--lknna-border);
	border-radius: 8px;
	background: #fff;
	text-align: center;
}

.lknna-slot--availability {
	justify-content: center;
}

.lknna-slot__date {
	font-weight: 700;
}

.lknna-slot__time {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
}

.lknna-slot__time .fa-clock {
	color: var(--rp-green-dark);
}

.lknna-slot--choice {
	width: 100%;
	min-height: 64px;
	padding: 14px 12px;
	border: 1px solid var(--lknna-border);
	border-radius: 8px;
	background: #fff;
	color: var(--lknna-ink);
	font: inherit;
	font-weight: 700;
	text-align: center;
	cursor: pointer;
	transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.lknna-slot--choice:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 4px 10px rgb(23 52 58 / 12%);
}

.lknna-slot--choice.is-selected {
	border-color: var(--rp-green-dark);
	background: var(--rp-green-gradient);
}

.lknna-no-slots {
	grid-column: 1 / -1;
	padding: 12px;
	background: #fff;
	border-top: 4px solid var(--lknna-disabled-border);
	border-radius: 8px;

	color: var(--lknna-ink);
	font-weight: 700;
	text-align: center;
}

/* AJANVARAUS FORMS:IT TODO*/
.lknna-booking-forms {
	margin-top: 20px;
	padding: 16px;
	border: 1px solid var(--lknna-border);
	border-radius: 8px;
	background: #f5f5f5;
	box-shadow: 0 4px 8px rgb(23 52 58 / 12%);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 220ms ease, transform 220ms ease;
	will-change: opacity, transform;
}

.lknna-booking-forms.hidden {
	display: none;
}

.lknna-booking-forms.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.lknna-form {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-top: 20px;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 220ms ease, transform 220ms ease;
	will-change: opacity, transform;
}

.lknna-booking__dates {
	display: block;
	width: 100%;
	min-width: 0;
	margin-top: 20px;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 220ms ease, transform 220ms ease;
	will-change: opacity, transform;
}

.lknna-booking__dates.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.lknna-calendar__header,
.lknna-calendar__weekdays,
.lknna-calendar__grid {
	display: grid;
	width: 100%;
	min-width: 0;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 6px;
}

.lknna-calendar__header {
	background: #f5f5f5;
	border: 1px solid var(--lknna-input-border);
	border-radius: 8px;
	padding: 6px;
	grid-template-columns: 42px 1fr 42px;
	align-items: center;
	margin-bottom: 12px;
	text-align: center;
}

.lknna-calendar__next, .lknna-calendar__previous {
	border-radius: 8px;
	font-size: 1.8rem;
	line-height: 1;
}

.lknna-calendar__header button {
	min-height: 36px;
	border: 1px solid var(--lknna-input-border);
	background: #fff;
	color: var(--lknna-ink);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
}

.lknna-calendar__header button:disabled {
	opacity: 0.35;
	cursor: default;
}

.lknna-calendar__month {
	text-transform: capitalize;
}

.lknna-calendar__weekdays {
	margin-bottom: 6px;
	color: var(--lknna-muted);
	font-size: 0.8rem;
	font-weight: 700;
	text-align: center;
}

.lknna-calendar__grid {
	align-items: stretch;
}

.lknna-form.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.lknna-booking__dates .lknna-date { /* MUOKATTAVA */
	box-sizing: border-box;
	min-height: 42px;
	padding: 8px;
	border: 1px solid var(--lknna-input-border);
	border-radius: 8px;
	background: #f5f5f5;;
	color: var(--lknna-ink);
	font: inherit;
	font-weight: 600;
	text-align: center;
	cursor: pointer;
	transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.lknna-date:hover:not(:disabled) {
	box-shadow: 0 4px 10px rgb(23 52 58 / 12%);
}

.lknna-booking__dates .lknna-date:disabled {
	background: #edf1ef;
	color: #9aa8a5;
	cursor: default;
}

.lknna-booking__dates .lknna-date.is-selected {
	transform: scale(1.025);
	background: var(--rp-green-gradient);
	border-color: var(--rp-green-dark);
}

.lknna-form {
	margin: 0 !important;
}

.lknna-form label {
	display: grid;
	min-width: 0;
	gap: 6px;
	font-weight: 600;
}

.lknna-licenseplate {
	position: relative;
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: 290px;
	min-width: 0;
	padding-left: 34px;
	margin: .5em 0;
	border-radius: 10px !important;
	background: #fff !important;
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 10%) !important;
}

.lknna-licenseplate__eu {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	display: grid;
	width: 30px;
	place-content: center;
	background: #05689f;
	border-radius: 6px 0 0 6px !important;
	color: #fff;
	font-size: 0.62rem;
	line-height: 1.1;
	text-align: center;
}

.lknna-licenseplate input {
	box-sizing: border-box !important;
	display: block !important;
	width: 100% !important;
	min-height: 42px !important;
	margin: 0 !important;
	padding: 0 6px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #333 !important;
	font-family: 'Segoe UI', Arial, sans-serif !important;
	font-size: clamp(1.6rem, 3.5vw, 2.8rem) !important;
	font-weight: 700 !important;
	line-height: 1.1 !important;
	text-align: center !important;
	text-transform: uppercase !important;
	outline: none !important;
	appearance: none !important;
}

form.lknna-form .lknna-licenseplate input[name="licenseNumber"] {
	box-sizing: border-box !important;
	width: 100% !important;
	min-height: 42px !important;
	margin: 0 !important;
	padding: 0 6px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-size: clamp(1.6rem, 3.5vw, 2.8rem) !important;
}

.lknna-licenseplate input::placeholder {
	color: #ddd !important;
	opacity: 1 !important;
}





.lknna-form__email,
.lknna-form .lknna-button {
	grid-column: 1 / -1;
}

.lknna-form label > input {
	box-sizing: border-box;
	min-height: 42px;
	padding: 8px;
	border: 1px solid var(--lknna-input-border);
}

/* AJANVARAUKSEN VAHVISTUS NAPPI */
.lknna-button {
	width: 100%;
	padding: 12px 18px;
	border-radius: 8px;
	border: 0;
	background: var(--rp-green-button-gradient-light);
	cursor: pointer;

	/* FONT ASETUKSET */
	color: #202020;
	font: inherit;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 1rem;
}

.lknna-button:hover {
	background: var(--rp-green-button-gradient-dark);
}

.lknna-button:disabled,
.lknna-button:disabled:hover {
	background: #aeb6b4;
	color: #eef1f0;
	cursor: not-allowed;
	opacity: 1;
}

@media (max-width: 700px) {
	.lknna-form {
		grid-template-columns: 1fr;
	}

	.lknna-licenseplate {
		max-width: 100%;
	}

	.lknna-form__email,
	.lknna-form .lknna-button {
		grid-column: auto;
	}
}

.lknna-results {
	margin-top: 20px;
}

.lknna-results > * {
	animation: lknna-result-in 240ms ease both;
}

.lknna-results > *:nth-child(2) {
	animation-delay: 35ms;
}

.lknna-results > *:nth-child(3) {
	animation-delay: 70ms;
}

@keyframes lknna-result-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.lknna-status {
	margin-top: 16px;
	font-weight: 700;
}

.lknna-modal[hidden] {
	display: none;
}

.lknna-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: grid;
	place-items: center;
	padding: 20px;
}

.lknna-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgb(23 52 58 / 64%);
}

.lknna-modal__content {
	position: relative;
	width: min(100%, 440px);
	padding: 34px 28px 28px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 18px 60px rgb(0 0 0 / 24%);
	color: var(--lknna-ink);
	text-align: center;
	animation: lknna-modal-in 180ms ease both;
}

.lknna-modal__close {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 36px;
	height: 36px;
	border: 0;
	background: transparent;
	color: var(--lknna-muted);
	font-size: 1.8rem;
	line-height: 1;
	cursor: pointer;
}

.lknna-modal__icon {
	margin-bottom: 14px;
	color: var(--rp-green-dark);
	font-size: 3.5rem;
}

.lknna-modal.is-error .lknna-modal__icon {
	color: #c0392b;
}

.lknna-modal__title {
	margin: 0 0 10px;
	font-size: 1.45rem;
}

.lknna-modal__message {
	margin: 0;
	color: var(--lknna-muted);
}

.lknna-modal__details {
	display: grid;
	gap: 8px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--lknna-border);
	text-align: left;
}

.lknna-modal__detail {
	display: flex;
	justify-content: space-between;
	gap: 16px;
}

.lknna-modal__detail span {
	color: var(--lknna-muted);
}

.lknna-modal__ok {
	margin-top: 22px;
}

body.lknna-modal-open {
	overflow: hidden;
}

@keyframes lknna-modal-in {
	from {
		opacity: 0;
		transform: translateY(10px) scale(0.98);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.lknna-loading {
	display: grid;
	grid-column: 1 / -1;
	place-items: center;
	min-height: 86px;
}

.loader {
  width: 50px;
  padding: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--rp-green-light);
  --_m: 
    conic-gradient(#0000 10%,#000),
    linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
          mask: var(--_m);
  -webkit-mask-composite: source-out;
          mask-composite: subtract;
  animation: l3 1s infinite linear;
}
@keyframes l3 {to{transform: rotate(1turn)}}


@media (prefers-reduced-motion: reduce) {
	.lknna-booking-timeslots,
	.lknna-booking-forms,
	.lknna-form,
	.lknna-modal__content,
	.lknna-slot--choice,
	.lknna-booking__dates .lknna-date,
	.lknna-results > * {
		animation: none;
		transition: none;
	}

	.loader {
		animation-duration: 2.5s;
	}
}