/* ============================================================================
   CMP Quote Engine plugin — COMPLETE storefront stylesheet (Workshop-Light)
   --------------------------------------------------------------------------
   This REPLACES the plugin's own assets/frontend.css (which is suppressed on the
   host page in inc/enqueue.php). The plugin's CSS used unscoped generic classes
   (.cmp-step, .cmp-btn, .cmp-card …) that collided with the theme. EVERY selector
   here is scoped to `.cmp-qe`, so nothing leaks onto the page. Colours, radius,
   shadows, and fonts come from the theme design tokens, so light + dark mode are
   automatic.
   ========================================================================== */

/* ---------- page-header + offer-bar = one header band (this page only) ----------
   This stylesheet loads ONLY on the quote page (see cmp_is_quote_engine_page), so
   these rules are scoped to it. The trust pills are a SEPARATE widget directly
   below the page-header, so they were sitting on the header's bottom border in a
   thin strip. Fix: trim the header's lower padding, drop its divider, and carry the
   header's textured (build-plate) background + the bottom border DOWN through the
   offer-bar — so the pills read as part of the header band, with the divider below
   them and the quote engine clearly beneath. */
.cmp-page-header__inner { padding-bottom: var(--space-4) !important; }
.cmp-page-header { border-bottom: 0 !important; }
.elementor-widget-cmp-offer-bar {
	background-color: var(--canvas);
	background-image:
		linear-gradient(var(--plate-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--plate-line) 1px, transparent 1px);
	background-size: 28px 28px;
	border-bottom: 1px solid var(--border-hair);
	padding-bottom: var(--space-5);
}

/* ---------- root / layout ---------- */
.cmp-qe {
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: 15px;
	line-height: 1.55;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
}
.cmp-qe *,
.cmp-qe *::before,
.cmp-qe *::after { box-sizing: border-box; }
.cmp-qe button { font-family: inherit; }

/* The plugin's own heading band duplicates the page-header above it — hide it. */
.cmp-qe .cmp-qe__head { display: none; }

.cmp-qe .cmp-qe__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: var(--space-5);
	align-items: start;
}
.cmp-qe .cmp-qe__main { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }

/* ---------- cards ---------- */
.cmp-qe .cmp-card {
	background: var(--card);
	border: 1px solid var(--border-hair);
	border-radius: var(--r-md);
	padding: var(--space-5);
	box-shadow: var(--shadow-rest);
	transition: box-shadow var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.cmp-qe .cmp-card:focus-within { box-shadow: var(--shadow-hover); border-color: var(--border-strong); }
.cmp-qe .cmp-card__title {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font-family: var(--font-display);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	margin: 0 0 var(--space-2);
	color: var(--ink);
}
.cmp-qe .cmp-card__hint {
	margin: 0 0 var(--space-4);
	padding-left: 42px;
	color: var(--muted);
	font-size: 0.85rem;
}
/* numbered step badge (inside the card title) */
.cmp-qe .cmp-step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	flex: 0 0 30px;
	border-radius: var(--r-sm);
	background: linear-gradient(135deg, var(--amber), var(--amber-hover));
	color: var(--on-amber);
	font-family: var(--font-mono);
	font-size: 0.85rem;
	font-weight: 700;
	box-shadow: var(--amber-glow);
}

/* ---------- upload / dropzone ---------- */
.cmp-qe .cmp-drop {
	border: 1.5px dashed var(--border-strong);
	border-radius: var(--r-sm);
	padding: var(--space-7) var(--space-5);
	text-align: center;
	cursor: pointer;
	background: var(--raised);
	transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.cmp-qe .cmp-drop:hover,
.cmp-qe .cmp-drop:focus-visible,
.cmp-qe .cmp-drop.is-over { border-color: var(--amber); background: var(--amber-tint); outline: none; }
.cmp-qe .cmp-drop__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.cmp-qe .cmp-drop__icon {
	width: 52px;
	height: 52px;
	margin-bottom: var(--space-2);
	border-radius: var(--r-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0;
	color: var(--amber);
	background: var(--card);
	border: 1px solid var(--border-hair);
	box-shadow: var(--shadow-rest);
}
.cmp-qe .cmp-drop__icon::before { content: "\2191"; font-size: 24px; font-weight: 700; line-height: 1; }
.cmp-qe .cmp-drop p { margin: 0; color: var(--body); }
.cmp-qe .cmp-drop strong { color: var(--ink); }
.cmp-qe .cmp-drop__hint { color: var(--muted); font-size: 0.78rem; margin-top: var(--space-2) !important; }

/* file rows */
.cmp-qe .cmp-files { margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.cmp-qe .cmp-file {
	background: var(--card);
	border: 1px solid var(--border-hair);
	border-radius: var(--r-sm);
	padding: var(--space-3) var(--space-4);
	box-shadow: var(--shadow-rest);
}
.cmp-qe .cmp-file__row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.cmp-qe .cmp-file__name { font-weight: 600; font-size: 0.92rem; word-break: break-word; }
.cmp-qe .cmp-file__status { display: inline-flex; align-items: center; font-size: 0.82rem; margin-top: var(--space-2); font-weight: 500; }
.cmp-qe .cmp-ok { color: var(--green); }
.cmp-qe .cmp-err { color: var(--error); }

/* Slicing progress bar — matches the home teaser: eases toward 92% while the
   model slices, replaced by "✓ Sliced — Ng" when grams arrive. */
.cmp-qe .cmp-file__status.cmp-slicing { display: block; color: var(--muted); }
.cmp-qe .cmp-file__bar { display: block; width: 100%; height: 5px; margin-top: var(--space-2); border-radius: 999px; background: var(--border-hair); overflow: hidden; }
.cmp-qe .cmp-file__bar-fill { display: block; height: 100%; width: 4%; border-radius: 999px; background: var(--amber); animation: cmpSliceFill 34s cubic-bezier(.05, .6, .15, 1) forwards; }
@keyframes cmpSliceFill { from { width: 4%; } to { width: 92%; } }
@media (prefers-reduced-motion: reduce) { .cmp-qe .cmp-file__bar-fill { animation: none; width: 45%; } }
.cmp-qe .cmp-spin::after {
	content: "";
	display: inline-block;
	width: 13px;
	height: 13px;
	margin-left: var(--space-2);
	border: 2px solid var(--border-strong);
	border-top-color: var(--amber);
	border-radius: 50%;
	animation: cmpqespin 0.7s linear infinite;
	vertical-align: -2px;
}
@keyframes cmpqespin { to { transform: rotate(360deg); } }
.cmp-qe .cmp-file__ctrls { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-3); gap: var(--space-3); flex-wrap: wrap; }
.cmp-qe .cmp-file__m,
.cmp-qe .cmp-manual-m { display: flex; align-items: center; gap: var(--space-2); font-size: 0.82rem; color: var(--muted); }
.cmp-qe .cmp-file__m input,
.cmp-qe .cmp-manual-m input { width: 96px; }
.cmp-qe .cmp-file__error {
	display: block;
	margin-top: var(--space-3);
	padding: var(--space-3) var(--space-4);
	border: 1.5px solid var(--error);
	border-radius: var(--r-sm);
	background: var(--error-tint);
	color: var(--error);
	font-size: 0.92rem;
	font-weight: 700;
	line-height: 1.45;
}

/* ---------- inputs ---------- */
.cmp-qe input[type=text],
.cmp-qe input[type=number],
.cmp-qe input[type=url] {
	font: inherit;
	color: var(--ink);
	background: var(--card);
	border: 1px solid var(--border-hair);
	border-radius: var(--r-xs);
	padding: 9px 11px;
	width: 100%;
	transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.cmp-qe input:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-tint); }

/* ---------- printer option cards ---------- */
.cmp-qe .cmp-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--space-3); }
.cmp-qe .cmp-opt {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-2);
	text-align: left;
	background: var(--card);
	border: 1.5px solid var(--border-hair);
	border-radius: var(--r-sm);
	padding: var(--space-4);
	cursor: pointer;
	color: var(--ink);
	min-height: 72px;
	transition: border-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.cmp-qe .cmp-opt:hover { border-color: var(--border-strong); transform: translateY(-1px); box-shadow: var(--shadow-hover); }
.cmp-qe .cmp-opt.is-active { border-color: var(--amber); background: var(--amber-tint); box-shadow: 0 0 0 3px var(--amber-tint); }
.cmp-qe .cmp-opt.is-active::after {
	content: "\2713";
	position: absolute;
	top: 10px;
	right: 11px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--amber);
	color: var(--on-amber);
	font-size: 12px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cmp-qe .cmp-opt__name { font-weight: 600; font-size: 0.92rem; padding-right: 22px; }

/* ---------- filament pills ---------- */
.cmp-qe .cmp-options--pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cmp-qe .cmp-pill {
	border: 1.5px solid var(--border-hair);
	background: var(--card);
	color: var(--body);
	border-radius: var(--r-pill);
	padding: 9px 18px;
	font-weight: 600;
	font-size: 0.9rem;
	cursor: pointer;
	transition: border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.cmp-qe .cmp-pill:hover { border-color: var(--border-strong); color: var(--ink); }
.cmp-qe .cmp-pill.is-active { background: var(--amber); color: var(--on-amber); border-color: var(--amber); }

/* ---------- colours ---------- */
.cmp-qe .cmp-colors-label { margin: var(--space-4) 0 var(--space-3); font-weight: 600; font-size: 0.9rem; color: var(--ink); }
.cmp-qe .cmp-colors-label #cmp-color-multi-hint { color: var(--muted); font-weight: 500; }
.cmp-qe .cmp-colors { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cmp-qe .cmp-color {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	border: 1.5px solid var(--border-hair);
	background: var(--card);
	color: var(--ink);
	border-radius: var(--r-xs);
	padding: 8px 13px 8px 9px;
	cursor: pointer;
	transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.cmp-qe .cmp-color:hover { border-color: var(--border-strong); }
.cmp-qe .cmp-color.is-active { border-color: var(--amber); background: var(--amber-tint); box-shadow: 0 0 0 3px var(--amber-tint); }
.cmp-qe .cmp-color__swatch {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	flex: 0 0 24px;
	background: var(--cmp-swatch, var(--border-strong));
	border: 1px solid rgba(0, 0, 0, 0.16);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}
.cmp-qe .cmp-color__text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.cmp-qe .cmp-color__name { font-weight: 600; font-size: 0.9rem; }
.cmp-qe .cmp-color.is-oos { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.6); }
.cmp-qe .cmp-color__oos { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--error); font-weight: 700; }

/* ---------- notes ---------- */
.cmp-qe .cmp-notes { margin-top: var(--space-4); }
.cmp-qe .cmp-notes__label { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin: 0 0 var(--space-2); font-weight: 600; font-size: 0.9rem; color: var(--ink); }
.cmp-qe .cmp-notes__label em { font-style: normal; font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--r-pill); color: var(--error); background: var(--error-tint); }
.cmp-qe .cmp-notes textarea {
	width: 100%;
	min-height: 104px;
	resize: vertical;
	border: 1.5px solid var(--border-hair);
	border-radius: var(--r-xs);
	padding: 12px 13px;
	font: inherit;
	color: var(--ink);
	background: var(--card);
}
.cmp-qe .cmp-notes textarea:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-tint); }
.cmp-qe .cmp-notes textarea.is-invalid { border-color: var(--error); box-shadow: 0 0 0 3px var(--error-tint); }
.cmp-qe .cmp-notes__help { margin: var(--space-2) 0 0; color: var(--muted); font-size: 0.78rem; line-height: 1.45; }

/* ---------- warning ---------- */
.cmp-qe .cmp-warning {
	margin: var(--space-3) 0 0;
	padding: var(--space-3) var(--space-4);
	border-radius: var(--r-xs);
	background: var(--amber-tint);
	border: 1px solid var(--amber-tint-border);
	color: var(--amber-text);
	font-size: 0.84rem;
	font-weight: 500;
}

/* ---------- checklist (services & items) ---------- */
.cmp-qe .cmp-checklist { display: flex; flex-direction: column; gap: var(--space-3); }
.cmp-qe .cmp-check {
	display: flex;
	gap: var(--space-3);
	align-items: flex-start;
	border: 1.5px solid var(--border-hair);
	border-radius: var(--r-sm);
	padding: var(--space-4);
	cursor: pointer;
	background: var(--card);
	transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.cmp-qe .cmp-check:hover { border-color: var(--border-strong); background: var(--raised); }
.cmp-qe .cmp-check:has(input:checked) { border-color: var(--amber); background: var(--amber-tint); }
.cmp-qe .cmp-check input[type=checkbox] { width: 20px; height: 20px; margin: 1px 0 0; flex: 0 0 20px; cursor: pointer; accent-color: var(--amber); }
.cmp-qe .cmp-check__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cmp-qe .cmp-check__top { display: flex; justify-content: space-between; gap: var(--space-3); align-items: baseline; }
.cmp-qe .cmp-check__top strong { font-weight: 600; font-size: 0.92rem; }
.cmp-qe .cmp-check__top em { font-style: normal; font-weight: 700; color: var(--amber-text); white-space: nowrap; }
.cmp-qe .cmp-check__desc { color: var(--muted); font-size: 0.82rem; line-height: 1.5; }
.cmp-qe .cmp-check--item { flex-direction: column; gap: var(--space-3); }
.cmp-qe .cmp-check__lead { display: flex; gap: var(--space-3); align-items: center; cursor: pointer; width: 100%; }
.cmp-qe .cmp-check__lead .cmp-check__top { flex: 1; }

/* ---------- stepper ---------- */
.cmp-qe .cmp-stepper { display: inline-flex; align-items: center; border: 1px solid var(--border-hair); border-radius: var(--r-xs); overflow: hidden; background: var(--card); width: fit-content; }
.cmp-qe .cmp-step-btn { width: 38px; height: 38px; border: 0; background: var(--card); color: var(--ink); font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: background var(--dur-instant) var(--ease-standard); }
.cmp-qe .cmp-step-btn:hover { background: var(--amber-tint); color: var(--amber-text); }
.cmp-qe .cmp-step-val { min-width: 42px; text-align: center; font-weight: 600; font-size: 0.92rem; font-variant-numeric: tabular-nums; }

/* ---------- tags ---------- */
.cmp-qe .cmp-tag { display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; padding: 3px 9px; border-radius: var(--r-pill); background: var(--canvas-sunk); color: var(--body); }
.cmp-qe .cmp-tag--ok { background: var(--green-tint); color: var(--green); }
.cmp-qe .cmp-tag--warn { background: var(--warning-tint); color: var(--warning); }

/* ---------- buttons ---------- */
.cmp-qe .cmp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	font-weight: 700;
	font-size: 0.92rem;
	border-radius: var(--r-xs);
	padding: 12px 20px;
	cursor: pointer;
	border: 1.5px solid transparent;
	transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.cmp-qe .cmp-btn--ghost { background: var(--card); border-color: var(--border-hair); color: var(--ink); }
.cmp-qe .cmp-btn--ghost:hover { border-color: var(--amber); color: var(--amber-text); background: var(--amber-tint); }
.cmp-qe .cmp-btn--primary {
	width: 100%;
	background: linear-gradient(135deg, var(--amber), var(--amber-hover));
	color: var(--on-amber);
	box-shadow: var(--amber-glow);
	font-size: 0.98rem;
	padding: 15px 20px;
}
.cmp-qe .cmp-btn--primary:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.03); }
.cmp-qe .cmp-btn--primary:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

/* ---------- quote sidebar ---------- */
.cmp-qe .cmp-qe__side { position: sticky; top: var(--space-5); }
.cmp-qe .cmp-quote {
	position: relative;
	overflow: hidden;
	background: var(--canvas-sunk); /* client: darker gray, not white */
	border: 1px solid var(--border-strong);
	border-radius: var(--r-md);
	padding: var(--space-5);
	box-shadow: var(--shadow-sticky);
}
.cmp-qe .cmp-quote::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--amber), var(--amber-hover)); }
.cmp-qe .cmp-quote__title { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; margin: var(--space-1) 0 var(--space-4); letter-spacing: -0.01em; }
.cmp-qe .cmp-quote__rows { display: flex; flex-direction: column; gap: 9px; margin-bottom: var(--space-1); }
.cmp-qe .cmp-quote__empty { color: var(--muted); font-size: 0.84rem; line-height: 1.55; padding: var(--space-2) 0; }
.cmp-qe .cmp-quote__empty--error { color: var(--error) !important; font-weight: 700; }
.cmp-qe .cmp-qrow { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 0.875rem; color: var(--body); }
.cmp-qe .cmp-qrow span:last-child { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.cmp-qe .cmp-quote__total { display: flex; justify-content: space-between; align-items: baseline; margin: var(--space-4) 0; padding-top: var(--space-4); border-top: 1.5px dashed var(--border-strong); }
.cmp-qe .cmp-quote__total span { font-weight: 600; font-size: 0.9rem; }
.cmp-qe .cmp-quote__total strong { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.cmp-qe .cmp-agree { display: flex; gap: var(--space-2); align-items: flex-start; margin: var(--space-3) 0; font-size: 0.78rem; color: var(--muted); cursor: pointer; line-height: 1.5; }
.cmp-qe .cmp-agree input { width: 18px; height: 18px; margin-top: 1px; flex: 0 0 18px; accent-color: var(--amber); cursor: pointer; }
.cmp-qe .cmp-quote__note { color: var(--muted); font-size: 0.75rem; margin: var(--space-3) 0 0; text-align: center; }

/* ---------- remove (x) ---------- */
.cmp-qe .cmp-x { border: 0; background: var(--canvas-sunk); color: var(--muted); width: 28px; height: 28px; border-radius: var(--r-xs); cursor: pointer; font-size: 0.9rem; line-height: 1; transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); }
.cmp-qe .cmp-x:hover { background: var(--error-tint); color: var(--error); }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
	.cmp-qe .cmp-qe__grid { grid-template-columns: 1fr; }
	.cmp-qe .cmp-qe__side { position: static; }
	.cmp-qe .cmp-quote { box-shadow: var(--shadow-hover); }
}
@media (max-width: 560px) {
	.cmp-qe { font-size: 14.5px; }
	.cmp-qe .cmp-card { padding: var(--space-4); }
	.cmp-qe .cmp-card__hint { padding-left: 0; }
	.cmp-qe .cmp-options { grid-template-columns: 1fr 1fr; }
	.cmp-qe .cmp-check__top { flex-direction: column; gap: 2px; }
	.cmp-qe .cmp-step-btn { width: 42px; height: 42px; }
	.cmp-qe .cmp-quote__total strong { font-size: 1.5rem; }
}
@media (max-width: 380px) {
	.cmp-qe .cmp-options { grid-template-columns: 1fr; }
}