/* =========================================================================
   Xpace Quote Calculator — "Quote Docket"
   Design concept: a cabinetmaker's order pad. A ruler-tick stepper walks
   the customer through Category > Item > Size > Material (chosen as
   physical-feeling swatch chips, not a <select>), while the right-hand
   panel behaves like a torn order docket that itemises and totals live.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

.xpace-qc-wrap {
	--ink: #211D18;
	--paper: #FAF9F7;
	--panel: #FFFFFF;
	--line: #E7E0D3;
	--walnut: #6E4326;
	--walnut-dark: #4F3019;
	--brass: #B8935A;
	--brass-light: #EFE2CB;
	--sage: #5C7360;
	--muted: #8A8175;

	font-family: 'Inter', -apple-system, "Segoe UI", Arial, sans-serif;
	color: var(--ink);
	background: var(--paper);
	max-width: 960px;
	margin: 0 auto;
	padding: 32px 28px 40px;
	border: 1px solid var(--line);
	border-radius: 2px;
	position: relative;
}

.xpace-qc-wrap * { box-sizing: border-box; }

.xpace-qc-mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }

/* ---- Header / ruler ---- */
.xpace-qc-header { margin-bottom: 22px; }
.xpace-qc-eyebrow {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
	color: var(--brass); margin: 0 0 4px;
}
.xpace-qc-title {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 500; font-size: 26px; letter-spacing: -0.01em;
	margin: 0 0 14px; color: var(--ink);
}
.xpace-qc-ruler {
	position: relative; height: 14px; margin-bottom: 6px;
	background-image: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 24px);
	background-position: bottom left; background-size: 100% 1px; background-repeat: no-repeat;
	border-bottom: 1px solid var(--line);
}

/* ---- Stepper ---- */
.xpace-qc-steps { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 24px; }
.xpace-qc-step {
	font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .03em;
	padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px;
	background: var(--panel); color: var(--muted); cursor: default;
	display: flex; align-items: center; gap: 6px;
}
.xpace-qc-step.is-active { border-color: var(--walnut); color: var(--walnut); background: var(--brass-light); }
.xpace-qc-step.is-done { color: var(--sage); border-color: var(--sage); }
.xpace-qc-step .n { font-weight: 600; }

/* ---- Layout ---- */
.xpace-qc-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 760px) { .xpace-qc-grid { grid-template-columns: 1fr; } }

.xpace-qc-picker { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 22px; }
.xpace-qc-picker h3, .xpace-qc-cart h3 {
	font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 16px; margin: 0 0 14px; color: var(--ink);
}

.xpace-qc-field { margin-bottom: 16px; }
.xpace-qc-field label {
	display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
	color: var(--muted); margin-bottom: 6px;
}
.xpace-qc-field select {
	width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 3px;
	background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238A8175'/%3E%3C/svg%3E") no-repeat right 12px center;
	appearance: none; -webkit-appearance: none; font-size: 14px; font-family: inherit; color: var(--ink); cursor: pointer;
}
.xpace-qc-field select:focus { outline: 2px solid var(--walnut); outline-offset: 1px; }

/* Material swatch grid — the signature element */
.xpace-qc-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 4px; }
.xpace-qc-swatch {
	border: 1px solid var(--line); border-radius: 4px; padding: 0; cursor: pointer; background: var(--panel);
	text-align: left; overflow: hidden; transition: border-color .15s, transform .1s;
}
.xpace-qc-swatch:hover { border-color: var(--brass); transform: translateY(-1px); }
.xpace-qc-swatch.is-selected { border-color: var(--walnut); box-shadow: 0 0 0 1px var(--walnut) inset; }
.xpace-qc-swatch-chip { height: 44px; width: 100%; }
.xpace-qc-swatch-info { padding: 8px 10px; }
.xpace-qc-swatch-name { font-size: 12.5px; font-weight: 600; line-height: 1.25; margin-bottom: 2px; }
.xpace-qc-swatch-price { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--walnut); }
.xpace-qc-swatch-disclaimer { font-size: 10.5px; color: var(--muted); margin: 8px 0 0; }

.xpace-qc-qty { display: flex; align-items: center; gap: 0; border: 1px solid var(--line); border-radius: 3px; width: fit-content; }
.xpace-qc-qty button {
	width: 34px; height: 36px; border: none; background: var(--paper); color: var(--ink); font-size: 16px; cursor: pointer;
}
.xpace-qc-qty button:hover { background: var(--brass-light); }
.xpace-qc-qty input {
	width: 46px; text-align: center; border: none; border-left: 1px solid var(--line); border-right: 1px solid var(--line);
	height: 36px; font-family: 'IBM Plex Mono', monospace; font-size: 14px;
}

.xpace-qc-add {
	width: 100%; padding: 12px; margin-top: 18px; background: var(--walnut); color: #fff; border: 0; border-radius: 3px;
	font-size: 13px; font-weight: 600; letter-spacing: .03em; cursor: pointer; transition: background .15s;
}
.xpace-qc-add:hover { background: var(--walnut-dark); }
.xpace-qc-add:disabled { background: var(--line); color: var(--muted); cursor: not-allowed; }

/* ---- Docket (right column) ---- */
.xpace-qc-cart {
	background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 22px 22px 20px;
	position: relative;
}
.xpace-qc-cart::before {
	content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 8px;
	background-image: radial-gradient(circle at 10px 0, transparent 6px, var(--paper) 6.5px);
	background-size: 20px 8px; background-repeat: repeat-x;
}
.xpace-qc-empty { color: var(--muted); font-size: 13px; padding: 20px 0; text-align: center; border: 1px dashed var(--line); border-radius: 4px; }

.xpace-qc-line { display: flex; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.xpace-qc-line:first-child { padding-top: 0; }
.xpace-qc-line-main { flex: 1; }
.xpace-qc-line-title { font-size: 13.5px; font-weight: 600; margin-bottom: 2px; }
.xpace-qc-line-meta { font-size: 12px; color: var(--muted); }
.xpace-qc-line-right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.xpace-qc-line-price { font-family: 'IBM Plex Mono', monospace; font-size: 13.5px; font-weight: 600; }
.xpace-qc-line-remove { background: none; border: none; color: var(--muted); font-size: 11px; cursor: pointer; text-decoration: underline; padding: 0; }
.xpace-qc-line-remove:hover { color: #B94A3B; }

.xpace-qc-total-row {
	display: flex; justify-content: space-between; align-items: baseline; padding-top: 16px; margin-top: 6px;
	border-top: 2px solid var(--ink);
}
.xpace-qc-total-label { font-family: 'Fraunces', Georgia, serif; font-size: 14px; }
.xpace-qc-total-value { font-family: 'IBM Plex Mono', monospace; font-size: 22px; font-weight: 600; color: var(--walnut); }

.xpace-qc-note { font-size: 11.5px; color: var(--muted); margin-top: 10px; line-height: 1.5; }

#xpace-lead-form { margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--line); }
#xpace-lead-form h4 { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 14px; margin: 0 0 12px; }
#xpace-lead-form input, #xpace-lead-form textarea {
	width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 3px; font-size: 13.5px;
	font-family: inherit; margin-bottom: 9px; box-sizing: border-box; resize: vertical;
}
#xpace-lead-form input:focus, #xpace-lead-form textarea:focus { outline: 2px solid var(--walnut); outline-offset: 1px; border-color: var(--walnut); }
#xpace-submit {
	width: 100%; padding: 12px; background: var(--ink); color: #fff; border: 0; border-radius: 3px;
	font-size: 13px; font-weight: 600; letter-spacing: .03em; cursor: pointer;
}
#xpace-submit:hover { background: var(--walnut-dark); }
#xpace-submit-result {
	margin-top: 12px; font-size: 13px; color: var(--sage); background: #EEF3EE; border: 1px solid #CFDECF;
	border-radius: 3px; padding: 10px 12px; display: none;
}
#xpace-submit-result.is-visible { display: block; }

.xpace-qc-checkbox {
	display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink);
	margin: 2px 0 4px; cursor: pointer; font-family: 'Inter', sans-serif;
}
.xpace-qc-checkbox input { width: auto; margin: 0; }

#xpace-reserve-panel { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); }
#xpace-reserve-panel h4 { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 14px; margin: 0 0 6px; }
.xpace-qc-deposit-options { margin: 10px 0 12px; display: flex; flex-direction: column; gap: 6px; }
.xpace-qc-deposit-opt {
	display: flex; align-items: center; gap: 8px; font-size: 13px; font-family: 'IBM Plex Mono', monospace;
	border: 1px solid var(--line); border-radius: 3px; padding: 8px 10px; cursor: pointer;
}
.xpace-qc-deposit-opt input { width: auto; margin: 0; }
#xpace-deposit-custom {
	width: 100%; margin-top: 8px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 3px;
	font-family: 'IBM Plex Mono', monospace; font-size: 13.5px; box-sizing: border-box;
}
.xpace-qc-reserve-btn {
	width: 100%; padding: 12px; background: var(--brass); color: #2a2114; border: 0; border-radius: 3px;
	font-size: 13px; font-weight: 600; letter-spacing: .03em; cursor: pointer;
}
.xpace-qc-reserve-btn:hover { background: #c9a56c; }
#xpace-reserve-result {
	margin-top: 12px; font-size: 12.5px; color: var(--ink); background: var(--brass-light); border: 1px solid var(--brass);
	border-radius: 3px; padding: 10px 12px; display: none; line-height: 1.5;
}
#xpace-reserve-result.is-visible { display: block; }

.xpace-qc-loading { padding: 60px 0; text-align: center; color: var(--muted); font-family: 'IBM Plex Mono', monospace; font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
	.xpace-qc-swatch, .xpace-qc-add { transition: none; }
}