/* Teho Digital Liidimasiina — front-end styles. All colours/fonts come from
   CSS variables emitted per-quiz by the renderer, so themes are fully editable. */

.liidimasiina {
	--lm-primary: #2563eb;
	--lm-bg: #f5f7fa;
	--lm-option-bg: #ffffff;
	--lm-option-text: #1a1a1a;
	--lm-option-bg-selected: #2563eb;
	--lm-option-border: #d9dee5;
	--lm-text: #1a1a1a;
	--lm-heading: #1a1a1a;
	--lm-field-bg: #ffffff;
	--lm-field-border: #d9dee5;
	--lm-button: #2563eb;
	--lm-button-text: #ffffff;
	--lm-button-secondary: #ffffff;
	--lm-button-secondary-text: #1a1a1a;
	--lm-button-secondary-border: #d9dee5;
	--lm-error: #d63638;
	--lm-heading-font: inherit;
	--lm-body-font: inherit;
	--lm-heading-weight: 700;
	--lm-body-weight: 400;
	--lm-base-size: 17px;
	--lm-heading-size: 32px;
	--lm-card-radius: 8px;
	--lm-card-shadow: 0 2px 6px rgba(0, 0, 0, .1);
	--lm-card-visibility: 1;
	--lm-button-radius: 8px;
	--lm-width: 640px;
	--lm-pad-top: 32px;
	--lm-pad-right: 16px;
	--lm-pad-bottom: 32px;
	--lm-pad-left: 16px;
	--lm-card-gap: 12px;
	--lm-section-gap: 20px;
	--lm-footer-gap: 28px;
	--lm-scale: 1;
	--lm-scale-mobile: 1;

	container-type: inline-size;
	box-sizing: border-box;
	background-color: var(--lm-bg);
	color: var(--lm-text);
	font-family: var(--lm-body-font);
	font-size: calc(var(--lm-base-size) * var(--lm-scale));
	font-weight: var(--lm-body-weight);
	line-height: 1.5;
	padding: calc(var(--lm-pad-top) * var(--lm-scale)) var(--lm-pad-right) calc(var(--lm-pad-bottom) * var(--lm-scale)) var(--lm-pad-left);
	border-radius: var(--lm-card-radius);
}

.liidimasiina *,
.liidimasiina *::before,
.liidimasiina *::after {
	box-sizing: border-box;
}

.liidimasiina .lm-stage {
	max-width: var(--lm-width);
	margin: 0 auto;
}

.liidimasiina .lm-screen {
	animation: lm-fade .25s ease;
}

@media (prefers-reduced-motion: reduce) {
	.liidimasiina .lm-screen {
		animation: none;
	}
}

@keyframes lm-fade {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}

.liidimasiina .lm-heading {
	font-family: var(--lm-heading-font);
	font-weight: var(--lm-heading-weight);
	font-size: calc(var(--lm-heading-size) * var(--lm-scale));
	color: var(--lm-heading);
	line-height: 1.2;
	text-align: center;
	margin: 0 0 calc(12px * var(--lm-scale));
}

.liidimasiina .lm-body,
.liidimasiina .lm-help {
	text-align: center;
	margin: 0 auto;
	max-width: 90%;
	white-space: pre-line;
}

.liidimasiina .lm-help {
	opacity: .8;
	font-size: .95em;
}

/* Progress */
.liidimasiina .lm-progress-wrap {
	margin: 0 auto 22px;
	min-height: 6px;
}

.liidimasiina .lm-step-count {
	text-align: right;
	font-size: .85em;
	opacity: .7;
	margin-bottom: 6px;
}

/* Neutral track rather than a theme colour: when a theme's accent is close to its
   border colour (e.g. an all-yellow brand) the fill was invisible against it. */
.liidimasiina .lm-progress {
	height: 6px;
	background: rgba(0, 0, 0, .16);
	border-radius: 999px;
	overflow: hidden;
}

.liidimasiina .lm-progress-fill {
	height: 100%;
	background: var(--lm-primary);
	transition: width .3s ease;
}

/* Options */
.liidimasiina .lm-options {
	display: flex;
	flex-direction: column;
	gap: calc(var(--lm-card-gap) * var(--lm-scale));
	margin-top: calc(var(--lm-section-gap) * var(--lm-scale));
}

.liidimasiina .lm-select-count + .lm-options {
	margin-top: calc(8px * var(--lm-scale));
}

.liidimasiina .lm-layout-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.liidimasiina .lm-option {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: calc(56px * var(--lm-scale));
	padding: calc(14px * var(--lm-scale)) 18px;
	font: inherit;
	font-weight: 600;
	text-align: center;
	color: var(--lm-option-text);
	background-color: var(--lm-option-bg);
	border: 2px solid var(--lm-option-border);
	border-radius: var(--lm-card-radius);
	box-shadow: var(--lm-card-shadow);
	cursor: pointer;
	transition: transform .12s ease, border-color .12s ease, background-color .12s ease;
}

.liidimasiina .lm-option:hover {
	transform: translateY(-1px);
	border-color: var(--lm-primary);
}

.liidimasiina .lm-option.is-selected {
	border-color: var(--lm-primary);
	outline: 2px solid var(--lm-primary);
	outline-offset: 0;
}

/* Card layout: the colored box is the media tile; the label sits BELOW it. */
.liidimasiina .lm-layout-cards .lm-option {
	flex-direction: column;
	justify-content: flex-start;
	gap: calc(8px * var(--lm-scale));
	min-height: 0;
	padding: 0;
	background: transparent;
	border: none;
	box-shadow: none;
}

.liidimasiina .lm-layout-cards .lm-option:hover {
	border-color: transparent;
}

.liidimasiina .lm-layout-cards .lm-option.is-selected {
	outline: none;
	border-color: transparent;
}

/* A card without a media tile (no image, no icon) would otherwise be bare text:
   give the button itself the box so it still reads as selectable. */
.liidimasiina .lm-layout-cards .lm-option.is-medialess {
	justify-content: center;
	min-height: calc(110px * var(--lm-scale));
	padding: calc(14px * var(--lm-scale));
	background-color: var(--lm-option-bg);
	border: 2px solid var(--lm-option-border);
	border-radius: var(--lm-card-radius);
	box-shadow: var(--lm-card-shadow);
}

.liidimasiina .lm-layout-cards .lm-option.is-medialess:hover,
.liidimasiina .lm-layout-cards .lm-option.is-medialess.is-selected {
	border-color: var(--lm-primary);
}

.liidimasiina .lm-option-media {
	display: block;
	width: 100%;
	height: calc(90px * var(--lm-scale));
	border-radius: calc(var(--lm-card-radius) - 2px);
	overflow: hidden;
}

.liidimasiina .lm-option-media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* Bundled icon in place of an uploaded image. currentColor makes the drawing
   follow the option's text colour, so it works on any theme. */
.liidimasiina .lm-option-media.is-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: calc(12px * var(--lm-scale));
	color: var(--lm-option-text);
}

.liidimasiina .lm-option-media.is-icon svg {
	width: 100%;
	height: 100%;
	max-height: calc(72px * var(--lm-scale));
	display: block;
}

/* In card layout the media element becomes the boxed, selectable tile. */
.liidimasiina .lm-layout-cards .lm-option-media {
	height: calc(110px * var(--lm-scale));
	background-color: var(--lm-option-bg);
	border: 2px solid var(--lm-option-border);
	border-radius: var(--lm-card-radius);
	box-shadow: var(--lm-card-shadow);
	transition: border-color .12s ease;
}

.liidimasiina .lm-layout-cards .lm-option:hover .lm-option-media {
	border-color: var(--lm-primary);
}

.liidimasiina .lm-layout-cards .lm-option.is-selected .lm-option-media {
	border-color: var(--lm-primary);
	outline: 2px solid var(--lm-primary);
}

.liidimasiina .lm-layout-cards .lm-option-label {
	color: var(--lm-text);
	font-weight: 600;
}

/* Selection checkmark badge (shown on selected cards) */
.liidimasiina .lm-check {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 22px;
	height: 22px;
	display: none;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	line-height: 1;
	color: #fff;
	background: var(--lm-primary);
	border-radius: 999px;
}

.liidimasiina .lm-option.is-selected .lm-check {
	display: flex;
}

/* Selection counter pill */
.liidimasiina .lm-select-count {
	display: block;
	width: fit-content;
	margin: calc(var(--lm-section-gap) * var(--lm-scale)) 0 calc(8px * var(--lm-scale)) auto;
	padding: 3px 12px;
	font-size: .8em;
	font-weight: 600;
	color: var(--lm-text);
	background: rgba(0, 0, 0, .08);
	border-radius: 999px;
}

/* Question media image (top of a question) */
.liidimasiina .lm-q-media {
	text-align: center;
	margin: 0 0 16px;
}

.liidimasiina .lm-q-media img {
	max-width: 100%;
	height: auto;
	border-radius: var(--lm-card-radius);
}

/* Fields */
.liidimasiina .lm-field {
	display: flex;
	flex-direction: column;
	gap: calc(12px * var(--lm-scale));
	margin: calc(var(--lm-section-gap) * var(--lm-scale)) auto 0;
	max-width: 460px;
}

.liidimasiina .lm-input {
	width: 100%;
	padding: calc(14px * var(--lm-scale)) 16px;
	font: inherit;
	color: var(--lm-text);
	background: var(--lm-field-bg);
	border: 2px solid var(--lm-field-border);
	border-radius: var(--lm-card-radius);
}

.liidimasiina .lm-input:focus {
	outline: none;
	border-color: var(--lm-primary);
}

.liidimasiina .lm-contact-row {
	width: 100%;
}

.liidimasiina .lm-consent {
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
	text-align: left;
}

.liidimasiina .lm-consent-label {
	font-size: .95em;
}

/* Slider (size estimate) */
.liidimasiina .lm-slider-field {
	gap: 14px;
	max-width: 520px;
}

.liidimasiina .lm-slider-value {
	align-self: center;
	min-width: 90px;
	padding: 8px 18px;
	font-weight: 700;
	font-size: 1.15em;
	text-align: center;
	color: var(--lm-text);
	background: var(--lm-field-bg);
	border: 2px solid var(--lm-field-border);
	border-radius: var(--lm-card-radius);
}

.liidimasiina .lm-slider {
	width: 100%;
	accent-color: var(--lm-primary);
	cursor: pointer;
}

.liidimasiina .lm-slider-ends {
	display: flex;
	justify-content: space-between;
	font-size: .85em;
	opacity: .7;
}

/* Honeypot — visually hidden, kept in the layout for bots */
.liidimasiina .lm-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	opacity: 0;
}

/* File upload */
.liidimasiina .lm-dropzone {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 32px;
	text-align: center;
	border: 2px dashed var(--lm-primary);
	border-radius: var(--lm-card-radius);
	background: rgba(0, 0, 0, .02);
	cursor: pointer;
}

.liidimasiina .lm-dropzone-icon {
	font-size: 28px;
	color: var(--lm-primary);
}

.liidimasiina .lm-file-input {
	display: none;
}

.liidimasiina .lm-file-list {
	margin-top: 10px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.liidimasiina .lm-file-item {
	font-size: .9em;
	opacity: .85;
}

/* Footer / buttons */
.liidimasiina .lm-footer {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: calc(var(--lm-footer-gap) * var(--lm-scale));
}

.liidimasiina .lm-btn {
	display: inline-block;
	min-width: 140px;
	padding: calc(14px * var(--lm-scale)) 32px;
	font: inherit;
	font-weight: 700;
	text-align: center;
	border: 2px solid transparent;
	border-radius: var(--lm-button-radius);
	cursor: pointer;
	transition: transform .12s ease, opacity .12s ease;
}

.liidimasiina .lm-btn:hover {
	transform: translateY(-1px);
}

.liidimasiina .lm-btn-primary {
	color: var(--lm-button-text);
	background-color: var(--lm-button);
}

.liidimasiina .lm-btn-secondary {
	color: var(--lm-button-secondary-text);
	background-color: var(--lm-button-secondary);
	border-color: var(--lm-button-secondary-border);
}

.liidimasiina .lm-start {
	margin: 8px auto 0;
	display: block;
}

/* Messages */
.liidimasiina .lm-error-msg {
	color: var(--lm-error);
	text-align: center;
	margin-top: 12px;
	min-height: 1em;
	font-size: .95em;
}

.liidimasiina .lm-thankyou,
.liidimasiina .lm-sending,
.liidimasiina .lm-error {
	text-align: center;
	padding: 24px 0;
}

/* Full-width layout: background spans the whole block, content stays centered */
.liidimasiina.is-fullwidth {
	border-radius: 0;
	padding-left: 24px;
	padding-right: 24px;
}

/* Container-responsive layout: adapts to the QUIZ's own width, so it works in
   any Gutenberg column (not just the browser viewport). The mobile *scale*
   stays viewport-based and is emitted per-instance by the renderer. */
@container (max-width: 560px) {
	.liidimasiina .lm-layout-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@container (max-width: 480px) {
	.liidimasiina .lm-heading {
		font-size: calc(var(--lm-heading-size) * var(--lm-scale) * .85);
	}
}

@container (max-width: 360px) {
	.liidimasiina .lm-layout-cards {
		grid-template-columns: 1fr;
	}
	.liidimasiina .lm-footer {
		flex-direction: column-reverse;
	}
	.liidimasiina .lm-btn {
		width: 100%;
	}
}

/* ---------------------------------------------------------------------------
   Results screen (outcome engine): block-based, theme-styled. Per-block inline
   styles set by the admin override these defaults at render time.
--------------------------------------------------------------------------- */
.liidimasiina .lm-results {
	display: flex;
	flex-direction: column;
	gap: var(--lm-section-gap);
	text-align: center;
}
.liidimasiina .lm-result-heading {
	margin: 0;
}
.liidimasiina .lm-result-text {
	margin: 0;
	white-space: pre-line;
}
.liidimasiina .lm-result-image {
	display: flex;
	justify-content: center;
}
.liidimasiina .lm-result-image img {
	height: auto;
	border-radius: var(--lm-card-radius);
}
.liidimasiina .lm-result-price {
	padding: calc(16px * var(--lm-scale));
	background: color-mix(in srgb, var(--lm-primary) 8%, transparent);
	border-radius: var(--lm-card-radius);
}
.liidimasiina .lm-result-price-label {
	font-size: calc(var(--lm-base-size) * var(--lm-scale) * .9);
	color: var(--lm-text);
	opacity: .8;
}
.liidimasiina .lm-result-price-value {
	font-family: var(--lm-heading-font);
	font-weight: var(--lm-heading-weight);
	font-size: calc(var(--lm-heading-size) * var(--lm-scale) * 1.15);
	color: var(--lm-primary);
	line-height: 1.1;
}
.liidimasiina .lm-result-breakdown {
	text-align: left;
	border: 1px solid var(--lm-field-border);
	border-radius: var(--lm-card-radius);
	overflow: hidden;
}
.liidimasiina .lm-breakdown-title {
	padding: calc(10px * var(--lm-scale)) calc(14px * var(--lm-scale));
	font-weight: var(--lm-heading-weight);
	background: color-mix(in srgb, var(--lm-field-border) 30%, transparent);
}
.liidimasiina .lm-breakdown-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: calc(8px * var(--lm-scale)) calc(14px * var(--lm-scale));
	border-top: 1px solid var(--lm-field-border);
}
.liidimasiina .lm-breakdown-detail {
	display: block;
	opacity: .65;
	font-size: calc(var(--lm-base-size) * var(--lm-scale) * .82);
}
.liidimasiina .lm-breakdown-amount {
	white-space: nowrap;
	font-weight: var(--lm-heading-weight);
}
.liidimasiina .lm-result-cta {
	align-self: center;
	text-decoration: none;
}
.liidimasiina .lm-result-contact {
	text-align: left;
	padding-top: var(--lm-section-gap);
	border-top: 1px solid var(--lm-field-border);
}
.liidimasiina .lm-result-submit {
	width: 100%;
	margin-top: calc(8px * var(--lm-scale));
}
.liidimasiina .lm-result-thankyou {
	padding-top: var(--lm-section-gap);
}

.liidimasiina .lm-result-summary {
	text-align: left;
	border: 1px solid var(--lm-field-border);
	border-radius: var(--lm-card-radius);
	overflow: hidden;
}
.liidimasiina .lm-summary-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: calc(7px * var(--lm-scale)) calc(14px * var(--lm-scale));
	border-top: 1px solid var(--lm-field-border);
}
.liidimasiina .lm-summary-row:first-child {
	border-top: 0;
}
.liidimasiina .lm-summary-label {
	opacity: .7;
}
.liidimasiina .lm-summary-value {
	font-weight: var(--lm-heading-weight);
	text-align: right;
}