/* DIY Marquees – side panel configurator (compact).
 * Buttons/inputs are reset with !important because themes and Elementor's
 * Add to Cart widget style every <button>/<input> inside form.cart. */
.dmpc {
	--dmpc-accent: #0a0ac2;
	--dmpc-window: #5aa9e6;
	--dmpc-wall: #9aa3ad;
	--dmpc-zip: #f2a516;
	--dmpc-border: #dcdfe4;
	box-sizing: border-box;
	width: 100%;
	margin: 0 0 1em;
	padding: .7em .85em;
	border: 1px solid var(--dmpc-border);
	border-radius: 6px;
	background: #fff;
	font-size: 14px;
	line-height: 1.3;
}
.dmpc *, .dmpc *::before, .dmpc *::after { box-sizing: border-box; }

.dmpc__head { display: flex; align-items: baseline; justify-content: space-between; gap: .5em; }
.dmpc .dmpc__heading { margin: 0 !important; font-size: 15px; font-weight: 700; }
.dmpc .dmpc__intro { margin: .1em 0 .45em !important; font-size: 13px; color: #555; }

/* One line per panel type: [■ Label  n] [− ——o—— +] */
.dmpc__row {
	display: grid;
	grid-template-columns: 10.5em 1fr;
	align-items: center;
	gap: .6em;
	padding: .15em 0;
}
.dmpc__label { display: flex; align-items: center; gap: .4em; min-width: 0; }
.dmpc .dmpc__label label { margin: 0 !important; padding: 0 !important; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dmpc__value { margin-left: auto; min-width: 1.8em; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

.dmpc__swatch { width: 11px; height: 11px; border-radius: 2px; flex: none; }
.dmpc__row--windows .dmpc__swatch, .dmpc__chip--windows { background: var(--dmpc-window); }
.dmpc__row--walls .dmpc__swatch, .dmpc__chip--walls { background: var(--dmpc-wall); }
.dmpc__row--zips .dmpc__swatch, .dmpc__chip--zips { background: var(--dmpc-zip); }

.dmpc__control { display: flex; align-items: center; gap: .35em; min-width: 0; }

/* Step buttons – fully reset against theme button styles */
.dmpc button.dmpc__step {
	all: unset;
	box-sizing: border-box !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 28px !important;
	width: 28px !important;
	min-width: 28px !important;
	max-width: 28px !important;
	height: 28px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid var(--dmpc-border) !important;
	border-radius: 50% !important;
	background: #fff !important;
	color: #222 !important;
	font: 600 17px/1 Arial, sans-serif !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	box-shadow: none !important;
	cursor: pointer;
}
.dmpc button.dmpc__step:hover:not([aria-disabled="true"]) { border-color: var(--dmpc-accent) !important; color: var(--dmpc-accent) !important; }
.dmpc button.dmpc__step:focus-visible { outline: 2px solid var(--dmpc-accent) !important; outline-offset: 1px; }
.dmpc button.dmpc__step[aria-disabled="true"] { opacity: .3 !important; cursor: not-allowed; }

/* Slider – reset against theme input styles */
.dmpc input.dmpc__range {
	--dmpc-fill: 0%;
	-webkit-appearance: none !important;
	appearance: none !important;
	flex: 1 1 auto !important;
	width: auto !important;
	min-width: 60px !important;
	max-width: none !important;
	height: 28px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	cursor: pointer;
}
.dmpc input.dmpc__range:focus { outline: none !important; }
.dmpc input.dmpc__range:focus-visible { outline: 2px solid var(--dmpc-accent) !important; outline-offset: 2px; }
.dmpc input.dmpc__range::-webkit-slider-runnable-track {
	height: 6px; border: 0; border-radius: 3px;
	background: linear-gradient(to right, var(--dmpc-accent) var(--dmpc-fill), #e3e6ea var(--dmpc-fill));
}
.dmpc input.dmpc__range::-moz-range-track { height: 6px; border: 0; border-radius: 3px; background: #e3e6ea; }
.dmpc input.dmpc__range::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--dmpc-accent); }
.dmpc input.dmpc__range::-webkit-slider-thumb {
	-webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border: 0;
	border-radius: 50%; background: var(--dmpc-accent); box-shadow: 0 0 0 3px #fff, 0 1px 3px 3px rgba(0,0,0,.2);
}
.dmpc input.dmpc__range::-moz-range-thumb {
	width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--dmpc-accent); box-shadow: 0 0 0 3px #fff, 0 1px 3px 3px rgba(0,0,0,.2);
}

/* Footer: panel strip + total on one line */
.dmpc__footer { display: flex; align-items: center; gap: .6em; margin-top: .45em; }
.dmpc__strip { display: flex; flex-wrap: wrap; gap: 2px; flex: 1; min-width: 0; }
.dmpc__chip { position: relative; width: 12px; height: 16px; border-radius: 2px; }
.dmpc__chip--windows::after {
	content: ""; position: absolute; inset: 3px 2px 5px;
	background: repeating-linear-gradient(90deg, rgba(255,255,255,.85) 0 3px, transparent 3px 4px);
}
.dmpc__chip--zips::after { content: ""; position: absolute; left: 50%; top: 2px; bottom: 0; width: 1px; background: rgba(0,0,0,.5); }
.dmpc .dmpc__status { margin: 0 !important; font-size: 13px; font-weight: 700; color: #1d7a33; white-space: nowrap; }

.dmpc button.dmpc__reset {
	all: unset;
	flex: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: var(--dmpc-accent) !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	text-transform: none !important;
	text-decoration: underline !important;
	cursor: pointer;
}
.dmpc .dmpc__note { margin: .35em 0 0 !important; font-size: 12px; color: #666; }

/* Narrow phones: label above slider to keep the slider usable */
@media (max-width: 340px) {
	.dmpc__row { grid-template-columns: 1fr; gap: 0; }
}

/* "Why at least 2 zipped doors?" – small, collapsed by default */
.dmpc .dmpc__why { margin: .15em 0 0; padding: 0; border: 0; font-size: 12px; color: #555; }
.dmpc .dmpc__why summary {
	display: inline-flex; align-items: center; gap: .3em; padding: 0; margin: 0;
	list-style: none; cursor: pointer; color: #555; font-size: 12px; font-weight: 400; text-decoration: underline dotted;
}
.dmpc .dmpc__why summary::-webkit-details-marker { display: none; }
.dmpc .dmpc__why summary::before {
	content: "i"; display: inline-flex; align-items: center; justify-content: center;
	width: 13px; height: 13px; border-radius: 50%; background: var(--dmpc-zip); color: #fff;
	font: 700 9px/1 Georgia, serif;
}
.dmpc .dmpc__why span { display: block; margin-top: .2em; padding: .35em .5em; border-left: 3px solid var(--dmpc-zip); background: #fff8eb; }
.dmpc .dmpc__why--flash span { animation: dmpc-flash 1.2s ease-out; }
@keyframes dmpc-flash { 0%, 40% { background: #ffe2a8; } 100% { background: #fff8eb; } }

/* ---------- Window style switcher (Arched / Panoramic sides / Panoramic roof & sides) ---------- */
.dmps { margin: 0 0 .9em; font-size: 14px; line-height: 1.2; }
.dmps__label { display: block; margin: 0 0 .3em; font-weight: 700; font-size: 14px; }
.dmps__opts { display: flex; gap: 6px; }
.dmps .dmps__opt {
	flex: 1 1 0; min-width: 0;
	display: flex; align-items: center; justify-content: center; gap: .4em;
	padding: .45em .5em; margin: 0;
	border: 1px solid #dcdfe4; border-radius: 6px; background: #fff;
	color: #333 !important; text-decoration: none !important; font-size: 13px; font-weight: 600; text-align: center;
	transition: border-color .15s, background .15s;
}
.dmps .dmps__opt svg { flex: none; color: #777; }
.dmps a.dmps__opt:hover { border-color: #0a0ac2; background: #f5f6ff; }
.dmps a.dmps__opt:focus-visible { outline: 2px solid #0a0ac2; outline-offset: 2px; }
.dmps .dmps__opt.is-current { border: 2px solid #0a0ac2; background: #f0f1ff; color: #0a0ac2 !important; cursor: default; }
.dmps .dmps__opt.is-current svg { color: #0a0ac2; }
@media (max-width: 480px) {
	.dmps .dmps__opt { flex-direction: column; gap: .2em; padding: .4em .25em; font-size: 12px; line-height: 1.15; }
}