/* Grafline Door Plates — same visual language as the stamp editor
   (white cards, uppercase card titles, red selection ring). */

.gdp {
	--gdp-red: #ff2a13;
	--gdp-red-soft: rgba(255, 42, 19, .07);
	--gdp-line: #e5e7eb;
	--gdp-ink: #111827;
	--gdp-muted: #6b7280;
	--gdp-ground: #f5f6f8;
	color: var(--gdp-ink);
	background: var(--gdp-ground);
	margin: 0 calc(50% - 50vw);
	padding: 0 max(16px, calc(50vw - 690px)) 48px;
	font-size: 15px;
}

.gdp-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 28px 0 20px;
	flex-wrap: wrap;
}
.gdp-title { margin: 0; font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 800; letter-spacing: -.02em; }
.gdp-sub { margin: 4px 0 0; color: var(--gdp-muted); }
.gdp-chip {
	background: #fff;
	border: 1px solid var(--gdp-line);
	border-radius: 999px;
	padding: 6px 14px;
	font-weight: 700;
	font-size: .85rem;
	white-space: nowrap;
}

.gdp-grid {
	display: grid;
	grid-template-columns: minmax(0, 290px) minmax(0, 1fr) minmax(0, 320px);
	gap: 18px;
	align-items: start;
}
.gdp-col { display: grid; gap: 18px; min-width: 0; }

.gdp-card {
	background: #fff;
	border: 1px solid var(--gdp-line);
	border-radius: 16px;
	padding: 18px;
	min-width: 0;
}
.gdp-card-title {
	margin: 0 0 14px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #4b5563;
}

.gdp-row { margin-bottom: 10px; }
.gdp-select,
.gdp-text,
.gdp-custom input,
.gdp-qty input {
	width: 100%;
	box-sizing: border-box;
	border: 1.5px solid #d1d5db;
	border-radius: 10px;
	background: #fff;
	font: inherit;
	color: inherit;
	padding: 9px 11px;
}
.gdp-select:focus, .gdp-text:focus, .gdp-custom input:focus, .gdp-qty input:focus {
	outline: none;
	border-color: var(--gdp-red);
	box-shadow: 0 0 0 3px rgba(255, 42, 19, .12);
}
.gdp-text { min-height: 96px; resize: vertical; line-height: 1.45; }

.gdp-tools { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.gdp-sep { width: 1px; height: 22px; background: var(--gdp-line); margin: 0 2px; }
.gdp-tool {
	appearance: none;
	width: 38px;
	height: 38px;
	border: 1.5px solid #d1d5db;
	background: #fff;
	border-radius: 10px;
	font-weight: 700;
	cursor: pointer;
	color: #374151;
}
.gdp-tool--i { font-style: italic; font-family: Georgia, serif; }
.gdp-tool.is-on, .gdp-opt.is-on, .gdp-line.is-on, .gdp-mat.is-on {
	border-color: var(--gdp-red);
	background: var(--gdp-red-soft);
	color: var(--gdp-red);
}

.gdp-hint {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	margin: 6px 0 0;
	font-size: .78rem;
	color: #9ca3af;
}
.gdp-label { display: flex; justify-content: space-between; margin: 16px 0 6px; font-size: .82rem; font-weight: 600; }
.gdp-range { width: 100%; accent-color: var(--gdp-red); }

.gdp-opts { display: grid; gap: 8px; margin-bottom: 10px; }
.gdp-opts--3 { grid-template-columns: repeat(3, 1fr); }
.gdp-opts--2 { grid-template-columns: repeat(2, 1fr); }
.gdp-opts--sizes { grid-template-columns: repeat(3, 1fr); }
.gdp-opt {
	appearance: none;
	border: 1.5px solid #d1d5db;
	background: #fff;
	border-radius: 10px;
	padding: 9px 6px;
	font: inherit;
	font-size: .82rem;
	font-weight: 600;
	cursor: pointer;
	color: #374151;
	display: grid;
	justify-items: center;
	gap: 6px;
}
.gdp-opt--size { font-variant-numeric: tabular-nums; }
.gdp-ico { width: 28px; height: 18px; border-radius: 2px; background: #eef0f3; }
.gdp-ico--single { box-shadow: inset 0 0 0 2px currentColor; }
.gdp-ico--double { box-shadow: inset 0 0 0 1.5px currentColor, inset 0 0 0 3.5px #fff, inset 0 0 0 4.5px currentColor; }

.gdp-custom { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gdp-custom label { display: grid; gap: 4px; font-size: .78rem; color: var(--gdp-muted); }

.gdp-mats, .gdp-list { display: grid; gap: 8px; }
.gdp-mat-note { margin: -4px 0 10px; font-size: .78rem; line-height: 1.4; color: var(--gdp-muted); }
.gdp-dealer { margin: 4px 0 10px; padding: 8px 10px; border-radius: 10px; background: var(--gdp-red-soft); color: var(--gdp-red); font-size: .82rem; }
.gdp-ref { display: grid; gap: 4px; margin: 0 0 12px; font-size: .78rem; color: var(--gdp-muted); }
.gdp-ref small { font-size: .72rem; }
.gdp-ref input { font: inherit; font-size: .9rem; padding: 8px 10px; border: 1.5px solid #d1d5db; border-radius: 10px; color: var(--gdp-ink); background: #fff; }
.gdp-mat, .gdp-line {
	appearance: none;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	text-align: left;
	border: 1.5px solid #d1d5db;
	background: #fff;
	border-radius: 12px;
	padding: 10px 12px;
	font: inherit;
	cursor: pointer;
	color: var(--gdp-ink);
}
.gdp-mat span, .gdp-line span { display: grid; gap: 2px; flex: 1; min-width: 0; }
.gdp-mat b, .gdp-line b { font-size: .88rem; }
.gdp-mat small, .gdp-line small { font-size: .74rem; color: var(--gdp-muted); font-weight: 400; }
.gdp-line em { font-style: normal; font-size: .76rem; color: var(--gdp-muted); white-space: nowrap; }
.gdp-line.is-on em { color: var(--gdp-red); font-weight: 700; }
.gdp-swatch {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 42px;
	height: 28px;
	border-radius: 6px;
	font-style: normal;
	font-weight: 700;
	font-size: .8rem;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
}

/* ── stage ─────────────────────────────────────────────────────────────── */
.gdp-stage-card { text-align: center; }
.gdp-stage {
	display: grid;
	place-items: center;
	min-height: 300px;
	padding: 28px 12px;
	border-radius: 12px;
	background:
		radial-gradient(ellipse at 50% 40%, #fff 0%, #eef0f3 70%) ;
}
.gdp-stage svg {
	display: block;
	width: min(100%, 560px);
	height: auto;
	max-height: 380px;
	filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .18));
}
.gdp-badges { display: flex; justify-content: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.gdp-badge {
	font-size: .8rem;
	font-weight: 600;
	padding: 5px 11px;
	border-radius: 8px;
	background: #f3f4f6;
	color: #374151;
}
.gdp-badge--dark { background: #111827; color: #fff; }
.gdp-warn {
	margin: 12px auto 0;
	max-width: 520px;
	padding: 9px 12px;
	border-radius: 10px;
	font-size: .82rem;
	line-height: 1.4;
	background: #fffbeb;
	border: 1px solid #fde68a;
	color: #92400e;
	text-align: left;
}
.gdp-warn.is-block { background: #fef3f2; border-color: #fecdca; color: #b42318; }
.gdp-warn.is-hidden, .gdp-custom.is-hidden { display: none; }
.gdp-note { margin: 12px 0 0; font-size: .78rem; color: #9ca3af; }
.gdp-actions { margin-top: 12px; }

.gdp-specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; }
.gdp-specs div { background: #f9fafb; border: 1px solid var(--gdp-line); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.gdp-specs dt { font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #9ca3af; }
.gdp-specs dd { margin: 3px 0 0; font-weight: 700; font-size: .84rem; overflow-wrap: anywhere; }

/* ── buy box ───────────────────────────────────────────────────────────── */
.gdp-qty { display: grid; grid-template-columns: 1fr 38px 64px 38px; gap: 6px; align-items: center; }
.gdp-qty-label { font-weight: 700; }
.gdp-qty input { text-align: center; padding: 8px 4px; }
.gdp-qbtn { height: 38px; border: 1.5px solid #d1d5db; background: #fff; color: var(--gdp-ink); border-radius: 10px; font-size: 1.1rem; cursor: pointer; display: grid; place-items: center; padding: 0; line-height: 1; }

/* GeneratePress paints every button:hover/:focus #3f4047 with white text (and
   white text by default, which hid the − / + glyphs). Keep the configurator's
   own light look; selected (.is-on) buttons keep their red. */
.gdp :is(.gdp-tool, .gdp-opt, .gdp-line, .gdp-mat):not(.is-on):is(:hover, :focus),
.gdp .gdp-qbtn:is(:hover, :focus),
.gdp .gdp-btn:not([data-gdp-atc]):is(:hover, :focus) {
	background: #f9fafb;
	color: var(--gdp-ink);
	border-color: #9ca3af;
}
.gdp [data-gdp-atc]:not(:disabled):is(:hover, :focus) { background: #e0240f; color: #fff; }
.gdp-ladder {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 4px;
}
.gdp-ladder li { display: grid; text-align: center; gap: 1px; padding: 5px 2px; border-radius: 8px; background: #f9fafb; font-size: .68rem; color: var(--gdp-muted); }
.gdp-ladder li b { font-size: .74rem; color: #374151; }
.gdp-ladder li.is-on { background: var(--gdp-red-soft); color: var(--gdp-red); }
.gdp-ladder li.is-on b { color: var(--gdp-red); }
.gdp-break { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--gdp-line); display: grid; gap: 6px; }
.gdp-break li { display: flex; justify-content: space-between; gap: 10px; font-size: .8rem; color: #4b5563; }
.gdp-break li:last-child { font-weight: 700; color: var(--gdp-ink); }
.gdp-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; }
.gdp-total span { font-weight: 700; }
.gdp-total small { font-weight: 400; color: var(--gdp-muted); font-size: .75rem; }
.gdp-total strong { font-size: 1.9rem; color: var(--gdp-red); font-weight: 800; letter-spacing: -.02em; }
.gdp-gross { margin: 2px 0 14px; text-align: right; font-size: .8rem; color: var(--gdp-muted); }

.gdp-btn {
	appearance: none;
	width: 100%;
	border-radius: 999px;
	padding: 13px 18px;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	border: 1.5px solid transparent;
}
.gdp-btn--primary { background: var(--gdp-red); color: #fff; }
.gdp-btn--primary:disabled { background: #fca5a5; cursor: not-allowed; }
.gdp-btn--ghost { width: auto; background: #fff; border-color: #d1d5db; color: #374151; }
.gdp-msg { margin: 10px 0 0; font-size: .84rem; text-align: center; }
.gdp-msg.is-error { color: #b42318; }
.gdp-msg.is-ok a { color: var(--gdp-red); font-weight: 700; }

.gdp-tool:focus-visible, .gdp-opt:focus-visible, .gdp-line:focus-visible, .gdp-mat:focus-visible, .gdp-btn:focus-visible, .gdp-qbtn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 42, 19, .25);
}

@media (max-width: 1100px) {
	.gdp-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.gdp-col--stage { grid-column: 1 / -1; order: -1; }
}
@media (max-width: 680px) {
	.gdp-grid { grid-template-columns: minmax(0, 1fr); }
	.gdp-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gdp-stage { min-height: 200px; padding: 18px 8px; }
}