/**
 * CNX configurator styles.
 * Everything is driven by CSS custom properties so Elementor's colour and
 * typography controls can override the look without touching this file.
 */

.cnx-root {
	--cnx-accent: #2E4EA8;
	--cnx-ink: #14161A;
	--cnx-muted: #6B6F75;
	--cnx-surface: #FFFFFF;
	--cnx-rule: #D6D3CC;
	--cnx-wash: #EDECE8;
	--cnx-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	color: var(--cnx-ink);
	line-height: 1.5;
}

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

.cnx-root [hidden] { display: none !important; }

/* ---------- intro ---------- */
.cnx-intro { max-width: 44em; margin: 0 0 2rem; }
.cnx-intro .cnx-h1 { margin: 0 0 .5rem; line-height: 1.05; }
.cnx-intro p { margin: 0; color: var(--cnx-muted); }

/* ---------- step rail ---------- */
.cnx-rail {
	display: flex;
	border-top: 1px solid var(--cnx-rule);
	border-bottom: 1px solid var(--cnx-rule);
	margin-bottom: 2rem;
	overflow-x: auto;
}
.cnx-rail-btn {
	flex: 1 1 0;
	min-width: 130px;
	padding: .85rem .9rem;
	background: none;
	border: 0;
	border-right: 1px solid var(--cnx-rule);
	display: flex;
	flex-direction: column;
	gap: 2px;
	cursor: pointer;
	text-align: left;
	font: inherit;
}
.cnx-rail-btn:last-child { border-right: 0; }
.cnx-rail-btn:focus-visible { outline: 2px solid var(--cnx-accent); outline-offset: -2px; }
.cnx-rail-btn[disabled] { cursor: not-allowed; opacity: .5; }
.cnx-rail-btn .cnx-n { font-family: var(--cnx-mono); font-size: .7rem; letter-spacing: .06em; color: #A6A9A8; }
.cnx-rail-btn .cnx-t { font-weight: 600; font-size: .9rem; color: #7A7E84; }
.cnx-rail-btn[data-state="done"] .cnx-n,
.cnx-rail-btn[aria-current="step"] .cnx-n { color: var(--cnx-accent); }
.cnx-rail-btn[data-state="done"] .cnx-t,
.cnx-rail-btn[aria-current="step"] .cnx-t { color: var(--cnx-ink); }
.cnx-rail-btn[aria-current="step"] { background: var(--cnx-surface); }

/* ---------- columns ---------- */
.cnx-cols { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 58%); gap: 3rem; align-items: start; }
.cnx-cols.cnx-nodraw { grid-template-columns: minmax(0, 30%) minmax(0, 70%); }
@media (max-width: 960px) { .cnx-cols, .cnx-cols.cnx-nodraw { grid-template-columns: 1fr; gap: 1.75rem; } }

.cnx-draw { position: sticky; top: 24px; }
@media (max-width: 960px) { .cnx-draw { position: static; } }

/* ---------- drawing sheet ---------- */
.cnx-sheet { background: var(--cnx-surface); border: 1px solid var(--cnx-rule); padding: 1rem; }
.cnx-sheet-top { display: flex; justify-content: space-between; font-family: var(--cnx-mono); font-size: .68rem; color: var(--cnx-muted); letter-spacing: .04em; margin-bottom: .3rem; }
.cnx-elev { width: 100%; height: auto; display: block; color: var(--cnx-ink); }
@media (max-width: 960px) { .cnx-elev { max-height: 44vh; } }

.cnx-plan { margin-top: .8rem; border-top: 1px solid var(--cnx-rule); padding-top: .7rem; display: flex; gap: 1rem; align-items: center; }
.cnx-plan svg { width: 130px; height: 86px; flex: 0 0 auto; color: var(--cnx-ink); }
.cnx-plan p { margin: 0; font-family: var(--cnx-mono); font-size: .68rem; color: var(--cnx-muted); line-height: 1.5; }

.cnx-dim line { stroke: var(--cnx-accent); stroke-width: 3; }
.cnx-dt { font-family: var(--cnx-mono); font-size: 52px; fill: var(--cnx-accent); }
.cnx-nt { font-family: var(--cnx-mono); font-size: 46px; fill: #7A7E84; }
.cnx-hidden { stroke: #7A7E84; stroke-width: 4; stroke-dasharray: 34 20; }
.cnx-groove { stroke: #A9ADAD; stroke-width: 6; fill: none; }
.cnx-ar { stroke: var(--cnx-accent); stroke-width: 6; }
.cnx-arf { fill: var(--cnx-accent); }
.cnx-arc { stroke: var(--cnx-accent); stroke-width: 2; stroke-dasharray: 6 5; }
.cnx-led { stroke: var(--cnx-accent); stroke-width: 8; stroke-dasharray: 26 18; }
.cnx-plan .cnx-ar { stroke-width: 3; }

/* ---------- spec sheet ---------- */
.cnx-specs { margin-top: 1rem; border: 1px solid var(--cnx-rule); background: var(--cnx-surface); }
.cnx-specs h4 { margin: 0; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; padding: .75rem 1rem; border-bottom: 1px solid var(--cnx-rule); }
.cnx-specs dl { margin: 0; padding: .35rem 1rem .85rem; font-family: var(--cnx-mono); font-size: .72rem; }
.cnx-row { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; border-bottom: 1px dotted var(--cnx-rule); }
.cnx-row:last-child { border-bottom: 0; }
.cnx-row dt { color: var(--cnx-muted); white-space: nowrap; }
.cnx-row dd { margin: 0; text-align: right; }

/* ---------- panels ---------- */
.cnx-panel { display: none; }
.cnx-panel.cnx-on { display: block; }
.cnx-panel > header { margin-bottom: 1.5rem; }
.cnx-eyebrow { font-family: var(--cnx-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cnx-accent); }
.cnx-panel h3 { margin: .3rem 0 0; line-height: 1.15; }
.cnx-panel header p { margin: .4rem 0 0; color: var(--cnx-muted); max-width: 54ch; }

.cnx-fs { border: 0; padding: 0; margin: 0 0 1.9rem; min-width: 0; }
.cnx-fs > legend { font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 0 0 .7rem; }

/* ---------- option grid ---------- */
.cnx-grid { display: grid; gap: .6rem; }
.cnx-g1 { grid-template-columns: 1fr; }
.cnx-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cnx-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cnx-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 640px) { .cnx-g3, .cnx-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cnx-opt { position: relative; display: block; cursor: pointer; }
.cnx-opt > input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cnx-face {
	border: 1px solid var(--cnx-rule);
	background: var(--cnx-surface);
	padding: .7rem;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: .3rem;
	transition: border-color .12s ease, box-shadow .12s ease;
}
.cnx-opt:hover .cnx-face { border-color: #9EA3A3; }
.cnx-opt > input:focus-visible + .cnx-face { outline: 2px solid var(--cnx-accent); outline-offset: 2px; }
.cnx-opt > input:checked + .cnx-face { border-color: var(--cnx-accent); box-shadow: inset 0 0 0 1px var(--cnx-accent); }

.cnx-inline .cnx-face { flex-direction: row; align-items: center; gap: .6rem; padding: .6rem .7rem; }

.cnx-lbl { font-weight: 600; font-size: .95rem; line-height: 1.25; }
.cnx-g2 .cnx-face { padding: .85rem; }
.cnx-sub { font-family: var(--cnx-mono); font-size: .68rem; color: var(--cnx-muted); }
.cnx-code { font-family: var(--cnx-mono); font-size: .62rem; color: #A6A9A8; letter-spacing: .06em; }

.cnx-thumb { width: 100%; height: auto; max-height: 320px; display: block; margin: 0 auto .5rem; color: var(--cnx-ink); }

/* Photo on a tile — large, so the customer can actually see the door. */
.cnx-media { position: relative; display: block; margin-bottom: .5rem; }
.cnx-img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	min-height: 200px;
	object-fit: cover;
	display: block;
	background: var(--cnx-wash);
}
.cnx-img-contain { object-fit: contain; background: #fff; padding: .5rem; }
.cnx-img-cover { object-fit: cover; }
.cnx-inline .cnx-media { margin: 0; }
.cnx-inline .cnx-img { width: 38px; height: 38px; aspect-ratio: 1; }

/* Big colour block for a colour option that has no photo. */
.cnx-colourblock {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	min-height: 200px;
	border: 1px solid var(--cnx-rule);
}

/* Zoom button sitting on the image. */
.cnx-zoom {
	position: absolute;
	right: .45rem;
	bottom: .45rem;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--cnx-rule);
	background: rgba(255,255,255,.92);
	color: var(--cnx-ink);
	cursor: pointer;
	transition: background .12s ease, transform .12s ease;
}
.cnx-zoom:hover { background: #fff; transform: scale(1.06); }
.cnx-zoom:focus-visible { outline: 2px solid var(--cnx-accent); outline-offset: 2px; }
.cnx-inline .cnx-zoom { display: none; }
@media (max-width: 640px) { .cnx-zoom { width: 36px; height: 36px; } }
.cnx-swatch { width: 20px; height: 20px; border: 1px solid var(--cnx-rule); flex: 0 0 auto; }

/* ---------- tabs ---------- */
.cnx-tabs { display: flex; border: 1px solid var(--cnx-rule); background: var(--cnx-surface); margin-bottom: 1.25rem; overflow-x: auto; }
.cnx-tabs button {
	padding: .7rem .9rem;
	font-family: var(--cnx-mono);
	font-size: .68rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--cnx-muted);
	background: none;
	border: 0;
	border-right: 1px solid var(--cnx-rule);
	white-space: nowrap;
	cursor: pointer;
}
.cnx-tabs button:last-child { border-right: 0; }
.cnx-tabs button:focus-visible { outline: 2px solid var(--cnx-accent); outline-offset: -2px; }
.cnx-tabs button[aria-selected="true"] { background: var(--cnx-wash); color: var(--cnx-accent); }
.cnx-pane { display: none; }
.cnx-pane.cnx-on { display: block; }

/* ---------- fields ---------- */
.cnx-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
@media (max-width: 640px) { .cnx-fields { grid-template-columns: 1fr; } }
.cnx-extra { margin-top: .8rem; }
.cnx-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
@media (max-width: 640px) { .cnx-two { grid-template-columns: 1fr; } }

.cnx-field { display: flex; flex-direction: column; gap: .3rem; }
.cnx-wide { grid-column: 1 / -1; }
.cnx-field label { font-family: var(--cnx-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cnx-muted); }
.cnx-field input,
.cnx-field textarea {
	font: inherit;
	padding: .65rem .7rem;
	border: 1px solid var(--cnx-rule);
	background: var(--cnx-surface);
	color: var(--cnx-ink);
	border-radius: 0;
	width: 100%;
}
.cnx-field textarea { min-height: 96px; resize: vertical; }
.cnx-field input:focus,
.cnx-field textarea:focus { outline: 2px solid var(--cnx-accent); outline-offset: -1px; border-color: var(--cnx-accent); }

/* honeypot */
.cnx-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- nav ---------- */
.cnx-nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--cnx-rule); }
.cnx-btn {
	font: inherit;
	font-weight: 600;
	padding: .8rem 1.35rem;
	border: 1px solid var(--cnx-ink);
	cursor: pointer;
	border-radius: 0;
	background: none;
	color: var(--cnx-ink);
}
.cnx-btn:focus-visible { outline: 2px solid var(--cnx-accent); outline-offset: 2px; }
.cnx-primary { background: var(--cnx-ink); color: var(--cnx-surface); }
.cnx-primary:hover { background: var(--cnx-accent); border-color: var(--cnx-accent); }
.cnx-primary[disabled] { opacity: .6; cursor: wait; }
.cnx-ghost { border-color: var(--cnx-rule); }
.cnx-ghost:hover { border-color: var(--cnx-ink); }

.cnx-err { color: #9B2C2C; font-family: var(--cnx-mono); font-size: .74rem; margin: .8rem 0 0; min-height: 1.2em; }

/* ---------- done ---------- */
.cnx-done { border: 1px solid var(--cnx-accent); background: var(--cnx-surface); padding: 1.6rem; }
.cnx-done h3 { margin: 0 0 .5rem; }
.cnx-done p { color: var(--cnx-muted); }

@media (prefers-reduced-motion: reduce) {
	.cnx-root * { transition: none !important; animation: none !important; }
}


/* ---------- pricing ---------- */
.cnx-price {
	font-family: var(--cnx-mono);
	font-size: .72rem;
	font-weight: 600;
	color: var(--cnx-accent);
	margin-top: .1rem;
}
.cnx-price em { font-style: normal; color: var(--cnx-muted); font-weight: 400; }
.cnx-inline .cnx-face { flex-wrap: wrap; }
.cnx-inline .cnx-price { margin-left: auto; }

.cnx-total { border-top: 1px solid var(--cnx-rule); padding: .85rem 1rem 1rem; }
.cnx-breakdown {
	font-family: var(--cnx-mono);
	font-size: .7rem;
	margin: 0 0 .6rem;
	padding-bottom: .5rem;
	border-bottom: 1px dotted var(--cnx-rule);
}
.cnx-breakdown .cnx-row { border-bottom: 0; padding: .18rem 0; }
.cnx-total-line { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.cnx-total-note { font-family: var(--cnx-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cnx-muted); }
.cnx-total-fig { font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.cnx-total-fig em { font-style: normal; font-size: .78rem; font-weight: 400; color: var(--cnx-muted); }
.cnx-total-tax { font-family: var(--cnx-mono); font-size: .64rem; color: var(--cnx-muted); margin-top: .2rem; text-align: right; }

/* ---------- the quotation basket ---------- */
.cnx-basket { margin-top: 1rem; border: 1px solid var(--cnx-rule); background: var(--cnx-surface); }
.cnx-basket > h4 {
	margin: 0;
	font-size: .7rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: .75rem 1rem;
	border-bottom: 1px solid var(--cnx-rule);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: .5rem;
}
.cnx-count {
	font-family: var(--cnx-mono);
	background: var(--cnx-accent);
	color: #fff;
	border-radius: 999px;
	min-width: 1.5em;
	height: 1.5em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: .72rem;
	letter-spacing: 0;
	padding: 0 .45em;
}
.cnx-empty { margin: 0; padding: .9rem 1rem; font-size: .78rem; color: var(--cnx-muted); line-height: 1.45; }

.cnx-item { padding: .75rem 1rem; border-bottom: 1px solid var(--cnx-rule); }
.cnx-item:last-child { border-bottom: 0; }
.cnx-item.cnx-editing { background: var(--cnx-wash); box-shadow: inset 3px 0 0 var(--cnx-accent); }

.cnx-item-top { display: flex; align-items: baseline; gap: .5rem; }
.cnx-item-n {
	font-family: var(--cnx-mono);
	font-size: .62rem;
	color: var(--cnx-muted);
	border: 1px solid var(--cnx-rule);
	width: 1.5em;
	height: 1.5em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}
.cnx-item-name { font-weight: 600; font-size: .82rem; line-height: 1.25; }
.cnx-item-qty { font-family: var(--cnx-mono); font-size: .72rem; color: var(--cnx-muted); margin-left: auto; white-space: nowrap; }
.cnx-item-meta { font-family: var(--cnx-mono); font-size: .66rem; color: var(--cnx-muted); margin: .25rem 0 0 2rem; }
.cnx-item-price { font-family: var(--cnx-mono); font-size: .78rem; font-weight: 600; margin: .3rem 0 0 2rem; }

.cnx-item-acts { display: flex; gap: .75rem; margin: .5rem 0 0 2rem; }
.cnx-item-acts button {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: .7rem;
	color: var(--cnx-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}
.cnx-item-acts button:hover { text-decoration-thickness: 2px; }
.cnx-item-acts button:focus-visible { outline: 2px solid var(--cnx-accent); outline-offset: 2px; }
.cnx-item-acts .cnx-del { color: #9B2C2C; }

/* ---------- add-to-quotation bar ---------- */
.cnx-addbar {
	display: flex;
	align-items: flex-end;
	gap: 1rem;
	padding: 1rem;
	margin-top: 1.5rem;
	border: 1px solid var(--cnx-accent);
	background: var(--cnx-wash);
	flex-wrap: wrap;
}
.cnx-qtyf { flex: 1 1 220px; }
.cnx-qtyf input { max-width: 140px; }
.cnx-addbar .cnx-btn { flex: 0 0 auto; }
.cnx-addhint { font-family: var(--cnx-mono); font-size: .68rem; color: var(--cnx-muted); margin: .5rem 0 0; }

.cnx-link {
	background: none;
	border: 0;
	padding: 0;
	margin-top: .6rem;
	font: inherit;
	font-size: .8rem;
	font-weight: 600;
	color: var(--cnx-accent);
	cursor: pointer;
}
.cnx-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.cnx-link:focus-visible { outline: 2px solid var(--cnx-accent); outline-offset: 2px; }

.cnx-btn[disabled] { opacity: .45; cursor: not-allowed; }
.cnx-btn.cnx-ghost[disabled]:hover { border-color: var(--cnx-rule); }

/* ---------- step 5 review ---------- */
.cnx-review { border: 1px solid var(--cnx-rule); background: var(--cnx-surface); padding: 1rem 1.1rem; margin-bottom: 1.75rem; }
.cnx-review h4 { margin: 0 0 .6rem; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.cnx-review dl { margin: 0 0 .6rem; font-family: var(--cnx-mono); font-size: .74rem; }
.cnx-review .cnx-row { padding: .28rem 0; }
.cnx-review .cnx-empty { padding: 0; }


/* ---------- image lightbox ---------- */
body.cnx-lb-open { overflow: hidden; }
.cnx-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 4vw, 3rem);
}
.cnx-lightbox[hidden] { display: none; }
.cnx-lb-backdrop { position: absolute; inset: 0; background: rgba(12, 13, 15, .82); cursor: zoom-out; }
.cnx-lb-figure {
	position: relative;
	margin: 0;
	max-width: min(1100px, 96vw);
	max-height: 92vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .6rem;
}
.cnx-lb-img {
	max-width: 100%;
	max-height: 82vh;
	width: auto;
	height: auto;
	object-fit: contain;
	background: #fff;
	box-shadow: 0 24px 60px rgba(0,0,0,.5);
	display: block;
}
.cnx-lb-cap {
	font-family: var(--cnx-mono);
	font-size: .8rem;
	letter-spacing: .04em;
	color: #EDECE8;
	text-align: center;
}
.cnx-lb-close {
	position: absolute;
	top: -.4rem;
	right: -.4rem;
	transform: translate(50%, -50%);
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: 0;
	background: #fff;
	color: #14161A;
	font-size: 1.7rem;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.cnx-lb-close:hover { background: var(--cnx-accent); color: #fff; }
.cnx-lb-close:focus-visible { outline: 2px solid var(--cnx-accent); outline-offset: 3px; }
@media (max-width: 640px) {
	.cnx-lb-close { top: .3rem; right: .3rem; transform: none; width: 40px; height: 40px; }
}