/**
 * Measure calculator components: the "Area required" card, stepper, summary
 * panel and wastage switch.
 *
 * Shared stylesheet (handle `wb-measure-calculator`) so the product page
 * calculator and other plugins that ask for an area (Navigation's range
 * pages) render the same component. Product-page-only rules that hide the
 * theme's own quantity and add-to-cart controls stay inline in
 * Frontend::render_sqm_input().
 */

/* Card */
.multifors-sqm-card {
	margin: 1em 0;
	padding: 15px 16px;
	border: 1.5px solid var(--wp--preset--color--border-light, #d8d8d8);
	border-radius: 14px;
	background: #fff;
	font-size: 15px;
}

.multifors-sqm-label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.25em;
}

/* Stepper wrap */
.multifors-sqm-stepper-wrap { display: inline-flex; align-items: stretch; max-width: 300px; }
.multifors-sqm-stepper {
	display: flex; align-items: center; justify-content: center;
	width: 40px; border: 1.5px solid var(--wp--preset--color--border-light, #d8d8d8); background: #fff;
	font-size: 1.2em; cursor: pointer; flex-shrink: 0;
	user-select: none; line-height: 1; color: #333;
	transition: background 0.15s;
}
.multifors-sqm-stepper:hover { background: #f5f5f5; }
.multifors-sqm-stepper:active { background: #eee; }
.multifors-sqm-stepper--minus { border-radius: 4px 0 0 4px; border-right: none; }
.multifors-sqm-stepper--plus { border-radius: 0 4px 4px 0; border-left: none; }

/* Input with unit suffix */
.multifors-sqm-input-wrap { position: relative; display: inline-flex; align-items: center; flex: 1; }
/* The active theme's global `input:not([type="submit"]):not([type="radio"])`
 * rule is more specific than a single class + element selector and would
 * otherwise win the cascade (#2903): the product page targets the id, other
 * uses the card-scoped class. Border colour is the theme's "Border Base"
 * token (border-light), matching the card. */
.multifors-sqm-input-wrap input#multifors_sqm,
.multifors-sqm-card .multifors-sqm-input-wrap input.multifors-sqm-input { padding-right: 3.8em; width: 100%; border: 1.5px solid var(--wp--preset--color--border-light, #d8d8d8); border-radius: 0; text-align: left; padding-left: 0.8em; font-size: 1em; font-family: inherit; -moz-appearance: textfield; }
.multifors-sqm-input-wrap input::-webkit-outer-spin-button,
.multifors-sqm-input-wrap input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.multifors-sqm-input-suffix { position: absolute; right: 0.6em; color: #999; pointer-events: none; font-size: 0.85em; }

/* Description */
.multifors-sqm-description { display: block; font-size: 1em; color: #666; margin-bottom: 1rem; }

/* Coverage info */
.multifors-sqm-coverage { margin: 0 0 0.5em; font-size: 0.9em; color: #666; }
.multifors-sqm-coverage.is-hidden { display: none; }

/* Summary panel */
.multifors-sqm-summary { display: none; margin: 0.75em 0; padding: 0.75em 1em; background: #f8f9fa; border-radius: 6px; font-size: 0.95em; line-height: 1.9; }
.multifors-sqm-summary.is-visible { display: block; }

/* Packs row */
.multifors-sqm-packs-row { display: flex; align-items: center; gap: 0.3em; font-weight: 500; }
.multifors-sqm-packs-row.has-wastage strong { color: var(--wp--preset--color--primary, #2563eb); }

/* Detail rows (total area, price) */
.multifors-sqm-price-row strong { color: #111; font-size: 1.05em; }
.multifors-sqm-breakdown { display: block; font-size: 0.85em; color: #666; margin-top: -0.15em; }

/* Wastage note badge */
.multifors-sqm-wastage-note { display: none; font-size: 0.8em; color: var(--wp--preset--color--primary, #2563eb); margin-left: 0.3em; }
.multifors-sqm-wastage-note.is-visible { display: inline; }

/* Advice text */
.multifors-sqm-advice { margin: 0.75em 0 0; font-size: 1em; color: #666; line-height: 1.4; }

/* Wastage toggle */
.multifors-sqm-wastage-toggle { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6em; margin-top: 0.5em; font-size: 1em; cursor: pointer; }
/* Fixed px, not em - matches .wb-buybox__card-free's "Free" badge on
	the same PDP exactly (#2903); an em value here would drift from
	that fixed 13px once the card's base font-size changes. */
.multifors-sqm-recommended { font-size: 13px; font-weight: 600; color: #15803d; background: #f0fdf4; border: 1px solid #bbf7d0; padding: 0.15em 0.5em; border-radius: 3px; vertical-align: middle; }

/* Toggle switch */
.multifors-sqm-switch { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; }
.multifors-sqm-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.multifors-sqm-switch__slider {
	position: absolute; inset: 0; background: #ccc; border-radius: 20px;
	transition: background 0.2s;
}
.multifors-sqm-switch__slider::before {
	content: ''; position: absolute; left: 2px; top: 2px;
	width: 16px; height: 16px; background: #fff; border-radius: 50%;
	transition: transform 0.2s;
}
.multifors-sqm-switch input:checked + .multifors-sqm-switch__slider { background: var(--wp--preset--color--primary, #2563eb); }
.multifors-sqm-switch input:checked + .multifors-sqm-switch__slider::before { transform: translateX(16px); }
.multifors-sqm-switch input:focus-visible + .multifors-sqm-switch__slider { outline: 2px solid var(--wp--preset--color--primary, #2563eb); outline-offset: 2px; }

/* Add to Cart button — match .wb-atc__add-btn styling */
.multifors-sqm-add.button.alt {
	min-width: 250px;
	padding: 14px 17px;
	border-radius: 8px;
	/* 1.1em of this card's own 15px base, not the theme's root-relative
		--font-size--small - that token was disconnected from the rest of
		this card's scale and landed at a size that didn't reliably match
		its neighbours (#2903). */
	font-size: 1.1em;
	font-weight: var(--wp--custom--font-weight--medium, 500);
	line-height: 1.375;
}

/* Lead-time notice - brand-accent tint + left accent stripe, matching
	this theme's own alert/callout convention rather than a flat grey
	box, so it reads as "worth noting" without looking like an error. */
.multifors-sqm-lead-time-notice {
	display: flex;
	align-items: flex-start;
	gap: 0.55em;
	margin: 0 0 0.75em;
	padding: 0.7em 0.9em;
	border-radius: 8px;
	/* Grey tint, not primary-accent - on this site that token is a
		warm peach, not a neutral (confirmed live: #f6efe8). */
	background: var(--wp--preset--color--tertiary, #f9f9fb);
	font-size: 0.9em;
	line-height: 1.4;
	color: var(--wp--preset--color--main, #1e1e26);
}
.multifors-sqm-lead-time-notice svg {
	flex-shrink: 0;
	margin-top: 0.15em;
	color: var(--wp--preset--color--primary, #5344f4);
}

/* Row variant: the calculator laid out across a wide page, for a page that
 * sizes many products at once (Navigation's range pages).
 *
 *   [Area required / pack size]  [- 24 sq.m +]  [wastage switch]  [summary]
 *
 * The summary always shows: a prompt until an area is entered, then the
 * area needed. Below 1180px the summary takes its own line; below 700px
 * every part stacks. */
.multifors-sqm-card--row {
	display: grid;
	grid-template-columns: auto auto auto minmax(0, 1fr);
	align-items: center;
	gap: 12px 28px;
	margin: 0;
	padding: 14px 18px;
}

.multifors-sqm-card--row .multifors-sqm-label { margin-bottom: 0.1em; }
.multifors-sqm-card--row .multifors-sqm-coverage { margin: 0; }
.multifors-sqm-card--row .multifors-sqm-stepper-wrap { width: 190px; }
.multifors-sqm-card--row .multifors-sqm-stepper { height: 42px; }
.multifors-sqm-card--row .multifors-sqm-input-wrap input.multifors-sqm-input { height: 42px; }
/* label.class beats the theme's `label` bottom margin, which otherwise lifts
 * the switch, text and badge off the row's centre line. */
.multifors-sqm-card--row label.multifors-sqm-wastage-toggle { display: flex; align-items: center; flex-wrap: nowrap; margin: 0; line-height: 1.3; white-space: nowrap; }
.multifors-sqm-card--row .multifors-sqm-recommended { display: inline-flex; align-items: center; line-height: 1.3; }

.multifors-sqm-card--row .multifors-sqm-summary {
	display: block;
	justify-self: end;
	margin: 0;
	padding: 0;
	background: transparent;
	color: #666;
	line-height: 1.45;
	text-align: right;
}

.multifors-sqm-card--row .multifors-sqm-summary.is-visible {
	padding: 0.55em 0.9em;
	background: #f8f9fa;
	color: inherit;
}

@media (max-width: 1180px) {
	.multifors-sqm-card--row { grid-template-columns: auto auto minmax(0, 1fr); }
	.multifors-sqm-card--row .multifors-sqm-summary { grid-column: 1 / -1; justify-self: stretch; text-align: left; }
}

@media (max-width: 700px) {
	.multifors-sqm-card--row { grid-template-columns: minmax(0, 1fr); }
	.multifors-sqm-card--row .multifors-sqm-stepper-wrap { width: 100%; max-width: 300px; }
	.multifors-sqm-card--row label.multifors-sqm-wastage-toggle { flex-wrap: wrap; white-space: normal; }
}