/* =========================================================================
   PD Display Case Configurator — front-end styles
   Every rule is scoped under .pdcfg so nothing leaks into the rest of the site.
   No height:100vh anywhere; the wrapper is ordinary page content.
   ========================================================================= */

.pdcfg {
	/* Colours match the site (body background #ede8df) so the configurator
	   reads as page content, not a separate white/beige panel. */
	--pdcfg-bg: #ede8df;
	--pdcfg-surface: #f4f1ea;
	--pdcfg-paper: #ede8df;
	--pdcfg-text: #1b1917;
	--pdcfg-divider: #ded8d0;
	--pdcfg-muted: #57504a;
	--pdcfg-muted-2: #857c74;
	--pdcfg-accent-100: #f4f1ea;
	--pdcfg-accent-700: #57504a;
	--pdcfg-hover: #4a352a;
	/* Fonts match the site: Archivo body, Libre Caslon Display display,
	   Bricolage Grotesque for buttons / labels / eyebrows. */
	--pdcfg-font-body: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--pdcfg-font-head: "Libre Caslon Display", Georgia, "Times New Roman", serif;
	--pdcfg-font-ui: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	box-sizing: border-box;
	color: var(--pdcfg-text);
	background: var(--pdcfg-bg);
	font-family: var(--pdcfg-font-body);
	font-weight: 300;
	font-size: 15px;
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
}

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

.pdcfg [hidden] {
	display: none !important;
}

.pdcfg button {
	font-family: var(--pdcfg-font-ui);
}

.pdcfg .pdcfg-noscript {
	border: 2px solid var(--pdcfg-divider);
	padding: 20px 24px;
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
}

/* ---- outer frame -------------------------------------------------------- */

.pdcfg-shell {
	display: grid;
	grid-template-columns: 420px minmax(0, 1fr);
	align-items: start; /* let the drawing column stick instead of stretching */
	border: 2px solid var(--pdcfg-divider);
	background: var(--pdcfg-bg);
}

/* ---- form column ------------------------------------------------------- */

.pdcfg-form {
	border-right: 2px solid var(--pdcfg-divider);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 22px;
	/* No inner scroll — the whole configurator flows as page content. */
}

.pdcfg-group {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pdcfg-eyebrow {
	font-family: var(--pdcfg-font-ui);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pdcfg-muted-2);
}

.pdcfg-eyebrow-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.pdcfg-field {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.pdcfg-field > label,
.pdcfg-label {
	font-size: 13px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

.pdcfg-req {
	color: var(--pdcfg-muted-2);
}

.pdcfg-hr {
	border: 0;
	border-top: 1px solid var(--pdcfg-divider);
	margin: 4px 0;
}

/* ---- inputs ---------------------------------------------------------- */

.pdcfg-input {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--pdcfg-divider);
	background: var(--pdcfg-surface);
	color: inherit;
	font-family: inherit;
	font-weight: 300;
	font-size: 14px;
	border-radius: 0;
	appearance: none;
	-webkit-appearance: none;
}

.pdcfg-input:focus,
.pdcfg-input:focus-visible {
	outline: none;
	border-color: var(--pdcfg-text);
	box-shadow: none;
}

select.pdcfg-input {
	background-image: 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='%231b1917'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	padding-right: 28px;
}

textarea.pdcfg-input {
	min-height: 64px;
	resize: vertical;
	line-height: 1.5;
}

.pdcfg-range {
	width: 100%;
	height: 20px;
	accent-color: var(--pdcfg-text);
	cursor: pointer;
}

.pdcfg-num-wrap {
	display: flex;
	align-items: center;
	gap: 6px;
}

.pdcfg-num {
	width: 76px;
	padding: 5px 8px;
	font-size: 14px;
	text-align: right;
	border: 1px solid var(--pdcfg-divider);
	background: var(--pdcfg-surface);
	color: inherit;
	font-family: inherit;
	font-weight: 300;
	border-radius: 0;
	caret-color: transparent;
	cursor: default;
}

.pdcfg-num:focus {
	outline: none;
	border-color: var(--pdcfg-text);
}

.pdcfg.pdcfg-touch-typing .pdcfg-num {
	caret-color: auto;
	cursor: text;
}

.pdcfg-unit {
	font-family: var(--pdcfg-font-ui);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pdcfg-muted-2);
}

/* ---- radio rows ---------------------------------------------------- */

.pdcfg-radio-set {
	display: grid;
	border: 1px solid var(--pdcfg-divider);
}

.pdcfg-radio {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--pdcfg-divider);
	cursor: pointer;
	position: relative;
}

.pdcfg-radio:last-child {
	border-bottom: 0;
}

.pdcfg-radio.is-active {
	background: var(--pdcfg-accent-100);
	box-shadow: inset 3px 0 0 var(--pdcfg-text);
}

.pdcfg-radio input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 1px;
	height: 1px;
}

.pdcfg-dot {
	width: 14px;
	height: 14px;
	margin-top: 2px;
	border: 1px solid var(--pdcfg-text);
	border-radius: 50%;
	flex: 0 0 auto;
	position: relative;
}

.pdcfg-radio.is-active .pdcfg-dot::after {
	content: "";
	position: absolute;
	inset: 3px;
	background: var(--pdcfg-text);
	border-radius: 50%;
}

.pdcfg-radio-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pdcfg-radio-label {
	font-size: 14px;
	font-weight: 400;
}

.pdcfg-radio-note {
	font-size: 11.5px;
	color: var(--pdcfg-muted-2);
}

.pdcfg-radio:focus-within .pdcfg-dot {
	outline: 2px solid var(--pdcfg-text);
	outline-offset: 2px;
}

/* ---- segmented controls ------------------------------------------- */

.pdcfg-seg {
	display: flex;
	border: 1px solid var(--pdcfg-divider);
	flex-wrap: wrap;
}

.pdcfg-seg-opt {
	flex: 1 1 auto;
	min-width: 44px;
	text-align: center;
	padding: 7px 10px;
	font-family: var(--pdcfg-font-ui);
	font-size: 13px;
	cursor: pointer;
	border-left: 1px solid var(--pdcfg-divider);
	position: relative;
	white-space: nowrap;
}

.pdcfg-seg-opt:first-child {
	border-left: 0;
}

.pdcfg-seg-opt.is-active {
	background: var(--pdcfg-text);
	color: var(--pdcfg-bg);
}

.pdcfg-seg-opt input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 1px;
	height: 1px;
}

.pdcfg-seg-opt:focus-within {
	outline: 2px solid var(--pdcfg-text);
	outline-offset: -2px;
}

/* ---- error + submit --------------------------------------------- */

.pdcfg-error {
	border-left: 3px solid var(--pdcfg-text);
	padding: 8px 12px;
	background: var(--pdcfg-surface);
	font-size: 12.5px;
	line-height: 1.5;
}

.pdcfg-btn {
	font-family: var(--pdcfg-font-ui);
	font-weight: 400;
	letter-spacing: 0.04em;
	border: 1px solid var(--pdcfg-text);
	background: transparent;
	color: var(--pdcfg-text);
	padding: 8px 14px;
	font-size: 12px;
	line-height: 1;
	cursor: pointer;
}

.pdcfg-btn:disabled {
	opacity: 0.55;
	cursor: default;
}

.pdcfg-btn-primary {
	background: var(--pdcfg-text);
	border-color: var(--pdcfg-text);
	color: var(--pdcfg-bg);
	width: 100%;
	min-height: 44px;
	font-size: 13px;
}

.pdcfg-btn-primary:hover:not(:disabled) {
	background: var(--pdcfg-hover);
	border-color: var(--pdcfg-hover);
	color: var(--pdcfg-bg);
}

.pdcfg-btn-primary:active:not(:disabled) {
	background: #3a2920;
	border-color: #3a2920;
}

.pdcfg-fineprint {
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--pdcfg-muted-2);
}

/* ---- stage (drawing) -------------------------------------------- */

.pdcfg-stage {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	/* Follow the (taller) form column while the page scrolls, so the drawing
	   stays in view while options are being changed. Cleared on narrow screens. */
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + 130px);
	align-self: start;
}

.pdcfg-stage-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 20px;
	border-bottom: 1px solid var(--pdcfg-divider);
	white-space: nowrap;
}

.pdcfg-views {
	display: flex;
	gap: 8px;
	flex: 0 0 auto;
}

.pdcfg-view {
	font-size: 11px;
	padding: 6px 10px;
}

.pdcfg-view.is-active {
	background: var(--pdcfg-text);
	color: var(--pdcfg-bg);
	border-color: var(--pdcfg-text);
}

.pdcfg-summary {
	flex: 1 1 auto;
	min-width: 0;
	text-align: right;
	font-family: var(--pdcfg-font-ui);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pdcfg-accent-700);
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pdcfg-canvas-wrap {
	flex: 0 0 auto;
	height: 540px;
	position: relative;
	overflow: hidden;
	background: var(--pdcfg-paper);
}

.pdcfg-canvas {
	display: block;
	width: 100%;
	height: 100%;
	color: #1b1917; /* read by the engine as the ink colour */
	cursor: grab;
	touch-action: none;
}

.pdcfg-canvas:active {
	cursor: grabbing;
}

.pdcfg-spec {
	border-top: 1px solid var(--pdcfg-divider);
	padding: 12px 20px;
	display: flex;
	gap: 16px 32px;
	align-items: flex-end;
	flex-wrap: wrap;
	flex: 0 0 auto;
}

.pdcfg-spec-item {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.pdcfg-spec-k {
	font-family: var(--pdcfg-font-ui);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pdcfg-muted-2);
}

.pdcfg-spec-v {
	font-family: var(--pdcfg-font-head);
	font-weight: 400;
	font-size: 14px;
}

.pdcfg-hint {
	margin-left: auto;
	align-self: center;
	font-family: var(--pdcfg-font-ui);
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pdcfg-muted-2);
}

/* ---- confirmation dialog -------------------------------------- */

.pdcfg-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(27, 25, 23, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 99999;
	padding: 20px;
}

.pdcfg-dialog {
	background: var(--pdcfg-bg);
	border: 2px solid var(--pdcfg-text);
	width: min(460px, 100%);
	padding: 28px;
	font-weight: 300;
}

.pdcfg-dialog-title {
	font-family: var(--pdcfg-font-head);
	font-weight: 400;
	font-size: 24px;
	margin-bottom: 10px;
}

.pdcfg-dialog-body {
	font-size: 14px;
	line-height: 1.6;
	margin-bottom: 20px;
}

.pdcfg-dialog-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.pdcfg-dialog-actions .pdcfg-btn {
	padding: 10px 16px;
	font-size: 12px;
}

.pdcfg-dialog-actions .pdcfg-btn-primary {
	width: auto;
	min-height: 0;
}

/* ---- responsive: drawing above the form ---------------------- */

@media (max-width: 980px) {
	.pdcfg-shell {
		grid-template-columns: 1fr;
		height: auto;
		border: 0;
	}

	.pdcfg-stage {
		order: -1;
		position: static;
		border: 2px solid var(--pdcfg-divider);
		overflow: visible;
	}

	.pdcfg-canvas-wrap {
		height: 380px;
	}

	.pdcfg-form {
		border-right: 0;
		border: 2px solid var(--pdcfg-divider);
		border-top: 0;
		overflow: visible;
		padding: 20px;
	}

	.pdcfg-stage-bar {
		flex-wrap: wrap;
	}

	.pdcfg-summary {
		text-align: left;
		flex-basis: 100%;
	}
}

@media (max-width: 520px) {
	.pdcfg-canvas-wrap {
		height: 300px;
	}

	.pdcfg-views {
		flex-wrap: wrap;
	}

	.pdcfg-hint {
		display: none;
	}
}