/**
 * Dormi Forms — Door Configurator styles.
 * Values follow the Figma “George_b21” configurator frames (1920px artboards).
 * Override the custom properties in your theme to restyle without editing this file.
 */

.dormi-cfg {
	--dormi-font-body: "Roboto", "Helvetica Neue", Arial, sans-serif;
	--dormi-font-heading: "Quattrocento Sans", "Roboto", Arial, sans-serif;
	--dormi-font-ui: "Inter", "Roboto", "Helvetica Neue", Arial, sans-serif;
	--dormi-ink: #000;
	--dormi-border: rgba(0, 0, 0, 0.25);
	--dormi-border-soft: #c7c4c4;
	--dormi-field: #efefef;
	--dormi-muted: #f4f4f4;
	--dormi-accent: #b38855;
	--dormi-error: #b3261e;
	--dormi-success: #2f532e;
	--dormi-radius: 10px;

	box-sizing: border-box;
	width: 100%;
	max-width: 1721px;
	margin: 0 auto;
	color: var(--dormi-ink);
	font-family: var(--dormi-font-body);
	font-size: 16px;
	line-height: 1.5;
}

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

.dormi-cfg button,
.dormi-cfg input,
.dormi-cfg select,
.dormi-cfg textarea {
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
}

.dormi-cfg img {
	display: block;
	max-width: 100%;
}

.dormi-sr-only,
.dormi-cfg .dormi-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.dormi-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* ------------------------------------------------------------------ layout */

.dormi-cfg__layout {
	display: grid;
	grid-template-columns: 293px minmax(0, 1fr);
	gap: 52px;
	align-items: start;
}

.dormi-cfg__main {
	min-width: 0;
}

/* ------------------------------------------------------------------ step navigation */

.dormi-cfg__nav {
	position: sticky;
	top: 24px;
	padding: 20px 20px 29px;
	background: #fff;
	border: 1px solid var(--dormi-border-soft);
	border-radius: var(--dormi-radius);
	box-shadow: 0 2px 24px rgba(0, 0, 0, 0.08);
}

.dormi-cfg__nav-list {
	display: flex;
	flex-direction: column;
	gap: 13px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dormi-cfg__nav-item {
	margin: 0;
	padding: 0;
}

.dormi-cfg .dormi-cfg__nav-btn {
	display: flex;
	align-items: center;
	gap: 18px;
	width: 100%;
	min-height: 37px;
	margin: 0;
	padding: 0;
	color: var(--dormi-ink);
	text-align: left;
	background: none;
	border: 0;
	border-radius: 40px;
	cursor: pointer;
	font-family: var(--dormi-font-heading);
	font-size: 18px;
	line-height: 1.4;
	transition: opacity 0.2s ease;
}

.dormi-cfg .dormi-cfg__nav-btn:disabled {
	cursor: default;
}

.dormi-cfg .dormi-cfg__nav-btn:focus-visible {
	outline: 2px solid var(--dormi-accent);
	outline-offset: 3px;
}

.dormi-cfg__nav-num {
	display: inline-flex;
	flex: 0 0 37px;
	align-items: center;
	justify-content: center;
	width: 37px;
	height: 37px;
	color: rgba(0, 0, 0, 0.12);
	font-family: var(--dormi-font-heading);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.17;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 50%;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.dormi-cfg__nav-check svg {
	display: block;
}

.dormi-cfg__nav-label {
	font-weight: 400;
}

.dormi-cfg__nav-item.is-active .dormi-cfg__nav-num {
	color: #fff;
	background: #000;
	border-color: #000;
}

.dormi-cfg__nav-item.is-active .dormi-cfg__nav-label {
	font-weight: 700;
}

.dormi-cfg__nav-item.is-complete:not(.is-active) .dormi-cfg__nav-num {
	color: #000;
	border-color: #000;
}

.dormi-cfg .dormi-cfg__nav-btn:not(:disabled):hover .dormi-cfg__nav-label {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ------------------------------------------------------------------ step content */

.dormi-cfg__step {
	outline: none;
}

.dormi-cfg__step.is-entering {
	animation: dormi-cfg-in 0.32s ease both;
}

@keyframes dormi-cfg-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.dormi-cfg__loading {
	margin: 0;
	padding: 40px 0;
	color: #555;
}

.dormi-cfg__head {
	margin: 0 0 39px;
}

.dormi-cfg__head--ruled {
	margin-bottom: 52px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--dormi-border);
}

.dormi-cfg__title {
	margin: 0;
	color: var(--dormi-ink);
	font-family: var(--dormi-font-heading);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	outline: none;
}

.dormi-cfg__desc {
	margin: 7px 0 0;
	color: var(--dormi-ink);
	font-family: var(--dormi-font-ui);
	font-size: 16px;
	line-height: 1.5;
}

.dormi-cfg__notice {
	margin: 0 0 24px;
	padding: 12px 16px;
	font-size: 15px;
	line-height: 1.45;
	border-radius: 6px;
}

.dormi-cfg__notice--error {
	color: var(--dormi-error);
	background: #fdecea;
	border: 1px solid #f5c2bd;
}

.dormi-cfg__notice--success {
	color: var(--dormi-success);
	background: #e7f2e6;
	border: 1px solid #c3dcc1;
}

.dormi-cfg__notice--info {
	color: #1d3b53;
	background: #eaf2f8;
	border: 1px solid #c8dbe9;
}

.dormi-cfg__saved-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	margin: -12px 0 24px;
	font-size: 15px;
}

.dormi-cfg .dormi-link-btn {
	display: inline;
	padding: 0;
	color: var(--dormi-ink);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	background: none;
	border: 0;
	cursor: pointer;
}

.dormi-cfg .dormi-link-btn:hover,
.dormi-cfg .dormi-link-btn:focus-visible {
	color: var(--dormi-accent);
}

.dormi-cfg .dormi-link-btn--danger:hover,
.dormi-cfg .dormi-link-btn--danger:focus-visible {
	color: var(--dormi-error);
}

.dormi-cfg__error {
	margin: 8px 0 0;
	color: var(--dormi-error);
	font-size: 14px;
	line-height: 1.4;
}

.dormi-cfg__error[hidden] {
	display: none;
}

.dormi-cfg__empty {
	margin: 0;
	color: #555;
}

/* ------------------------------------------------------------------ option cards & tiles */

.dormi-cfg__options {
	display: grid;
	gap: 24px;
}

.dormi-cfg__options--card {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dormi-cfg__options--tile {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.dormi-cfg__options--tile > .dormi-opt {
	flex: 0 0 111px;
	width: 111px;
}

.dormi-cfg__options--tile > .dormi-opt.is-landscape {
	flex-basis: 232px;
	width: 232px;
}

.dormi-cfg .dormi-opt--tile.is-landscape .dormi-opt__media {
	width: 208px;
	height: 150px;
	border-radius: 6px;
}

.dormi-cfg .dormi-opt--tile.is-landscape .dormi-opt__media img {
	object-fit: cover;
}

.dormi-cfg__options--tile.tile-lg {
	gap: 18px;
}

.dormi-cfg__options--tile.tile-lg > .dormi-opt {
	flex-basis: 175px;
	width: 175px;
}

.dormi-cfg .dormi-opt {
	position: relative;
	white-space: normal;
	line-height: 1.4;
	font-size: 16px;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	margin: 0;
	padding: 0;
	color: var(--dormi-ink);
	text-align: left;
	background: #fff;
	border: 1px solid var(--dormi-border);
	border-radius: var(--dormi-radius);
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.dormi-cfg .dormi-opt:hover {
	border-color: rgba(0, 0, 0, 0.55);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.dormi-cfg .dormi-opt:focus-visible {
	outline: 2px solid var(--dormi-accent);
	outline-offset: 2px;
}

.dormi-cfg .dormi-opt.is-selected {
	border-color: #000;
}

.dormi-cfg .dormi-opt__media {
	display: block;
	overflow: hidden;
	background: #fafafa;
}

.dormi-cfg .dormi-opt__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dormi-cfg .dormi-opt__media--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--dormi-muted);
}

.dormi-cfg .dormi-opt__initial {
	color: rgba(0, 0, 0, 0.35);
	font-family: var(--dormi-font-heading);
	font-size: 28px;
	font-weight: 700;
}

.dormi-cfg .dormi-opt__swatch {
	display: block;
	width: 100%;
	height: 100%;
}

.dormi-cfg .dormi-opt__label {
	display: block;
	font-family: var(--dormi-font-heading);
	font-weight: 700;
}

.dormi-cfg .dormi-opt__desc {
	display: block;
	font-family: var(--dormi-font-body);
	font-size: 16px;
	line-height: 1.5;
}

.dormi-cfg .dormi-opt__check {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: #000;
	border-radius: 50%;
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 0.2s ease, transform 0.25s ease;
	pointer-events: none;
}

.dormi-cfg .dormi-opt.is-selected .dormi-opt__check {
	opacity: 1;
	transform: none;
}

/* Large door-type cards (Figma: 326 × 372, image 293 × 245). */

.dormi-cfg .dormi-opt--card {
	min-height: 372px;
	padding: 15px 16px 22px;
}

.dormi-cfg .dormi-opt--card .dormi-opt__media {
	aspect-ratio: 293 / 245;
	border-radius: var(--dormi-radius);
}

.dormi-cfg .dormi-opt--card .dormi-opt__label {
	margin-top: 6px;
	font-size: 18px;
	line-height: 1.4;
}

.dormi-cfg .dormi-opt--card .dormi-opt__desc {
	margin-top: 8px;
	max-width: 234px;
}

.dormi-cfg .dormi-opt--card .dormi-opt__check {
	top: 4px;
	right: 4px;
	width: 42px;
	height: 42px;
}

.dormi-cfg .dormi-opt--card .dormi-opt__check svg {
	width: 20px;
	height: 20px;
}

/* Small tiles (profiles, finishes, inserts, handles). */

.dormi-cfg .dormi-opt--tile {
	align-items: center;
	min-height: 156px;
	padding: 12px 6px 10px;
	text-align: center;
}

.dormi-cfg .dormi-opt--tile .dormi-opt__media {
	flex: 0 0 auto;
	width: 57px;
	height: 98px;
	border-radius: 4px;
	background: transparent;
}

.dormi-cfg .dormi-opt--tile .dormi-opt__media img {
	object-fit: contain;
}

.dormi-cfg .dormi-opt--tile .dormi-opt__label {
	margin-top: auto;
	padding-top: 8px;
	font-family: var(--dormi-font-ui);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.25;
}

.dormi-cfg .dormi-opt--tile.is-selected .dormi-opt__label {
	font-weight: 700;
}

.dormi-cfg__step--profile .dormi-opt--tile .dormi-opt__label {
	font-size: 16px;
}

.dormi-cfg .dormi-opt--tile .dormi-opt__check {
	top: -8px;
	right: -8px;
	width: 21px;
	height: 21px;
}

.dormi-cfg .dormi-opt--tile .dormi-opt__check svg {
	width: 11px;
	height: 11px;
}

.dormi-cfg .dormi-opt--tile.tile-lg,
.tile-lg > .dormi-opt--tile {
	min-height: 206px;
	padding: 8px 10px 14px;
}

.tile-lg > .dormi-opt--tile .dormi-opt__media {
	width: 79px;
	height: 137px;
}

.tile-lg > .dormi-opt--tile .dormi-opt__label {
	font-size: 15px;
}

.tile-lg > .dormi-opt--tile .dormi-opt__check {
	top: -8px;
	right: -8px;
	width: 26px;
	height: 26px;
}

/* ------------------------------------------------------------------ split steps */

.dormi-cfg__split {
	display: grid;
	grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
	gap: 37px;
	align-items: stretch;
}

.dormi-cfg__visual {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 456px;
	padding: 16px;
	overflow: hidden;
	background: var(--dormi-muted);
	border-radius: var(--dormi-radius);
}

.dormi-cfg__visual img {
	width: auto;
	max-height: 424px;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.dormi-cfg__box {
	padding: 34px 30px 30px;
	background: #fff;
	border: 1px solid var(--dormi-border);
	border-radius: var(--dormi-radius);
}

.dormi-cfg__box-title {
	margin: 0;
	color: var(--dormi-ink);
	font-family: var(--dormi-font-heading);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	text-transform: none;
}

.dormi-cfg__box-desc {
	margin: 6px 0 0;
	font-family: var(--dormi-font-ui);
	font-size: 16px;
	line-height: 1.5;
}

.dormi-cfg__box .dormi-field {
	margin-top: 24px;
}

.dormi-cfg__box-title + .dormi-field {
	margin-top: 26px;
}

/* ------------------------------------------------------------------ tabs */

.dormi-cfg__tabs-wrap {
	margin: -15px 0 40px;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--dormi-border);
}

.dormi-cfg__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	padding-bottom: 4px;
}

.dormi-cfg .dormi-tab {
	min-width: 195px;
	min-height: 54px;
	padding: 12px 24px;
	color: #000;
	font-family: var(--dormi-font-ui);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.2;
	background: var(--dormi-field);
	border: 1px solid transparent;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.dormi-cfg .dormi-tab:hover {
	background: #e2e2e2;
}

.dormi-cfg .dormi-tab:focus-visible {
	outline: 2px solid var(--dormi-accent);
	outline-offset: 2px;
}

.dormi-cfg .dormi-tab.is-selected {
	color: #fff;
	font-weight: 700;
	background: #000;
}

.dormi-cfg .dormi-tab.has-error {
	border-color: var(--dormi-error);
}

.dormi-cfg__custom {
	margin-top: 26px;
}

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

.dormi-cfg__label {
	display: block;
	margin-bottom: 8px;
	font-family: var(--dormi-font-heading);
	font-size: 18px;
	font-weight: 700;
}

.dormi-cfg .dormi-input {
	display: block;
	width: 100%;
	min-height: 55px;
	margin: 0;
	padding: 14px 18px;
	color: #000;
	font-family: var(--dormi-font-ui);
	font-size: 18px;
	line-height: 1.4;
	background: var(--dormi-field);
	border: 1px solid transparent;
	border-radius: 4px;
	box-shadow: none;
	transition: border-color 0.2s ease, background-color 0.2s ease;
	appearance: none;
}

.dormi-cfg .dormi-input::placeholder {
	color: #1f1f1f;
	opacity: 1;
}

.dormi-cfg .dormi-input:focus {
	background: #fff;
	border-color: #000;
	outline: none;
}

.dormi-cfg select.dormi-input {
	padding-right: 40px;
	background-image: linear-gradient(45deg, transparent 50%, #000 50%), linear-gradient(135deg, #000 50%, transparent 50%);
	background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	cursor: pointer;
}

.dormi-cfg .dormi-input--textarea {
	min-height: 140px;
	resize: vertical;
}

.dormi-field.has-error .dormi-input,
.dormi-cfg .dormi-input[aria-invalid="true"] {
	border-color: var(--dormi-error);
	background-color: #fff6f5;
}

/* ------------------------------------------------------------------ dimensions & review cards */

.dormi-cfg__card {
	padding: 30px 22px 22px;
	background: #fff;
	border: 1px solid var(--dormi-border);
	border-radius: var(--dormi-radius);
}

.dormi-cfg__card > .dormi-cfg__head {
	margin: 0 0 25px;
	padding: 0 2px;
}

.dormi-cfg__size {
	margin: 0 0 18px;
	padding: 24px 16px 22px 34px;
	border: 1px solid var(--dormi-border);
	border-radius: var(--dormi-radius);
}

.dormi-cfg__size:last-child {
	margin-bottom: 0;
}

.dormi-cfg__size-legend {
	display: flex;
	gap: 18px;
	align-items: center;
	padding: 0 8px;
	font-family: var(--dormi-font-heading);
	font-size: 18px;
	font-weight: 700;
}

.dormi-cfg__size-legend .dormi-link-btn {
	font-family: var(--dormi-font-body);
	font-size: 14px;
}

.dormi-cfg__row {
	display: grid;
	grid-template-columns: minmax(160px, 1fr) minmax(0, 720px);
	gap: 4px 24px;
	align-items: center;
	margin: 0 0 25px;
}

.dormi-cfg__row:last-child {
	margin-bottom: 0;
}

.dormi-cfg__row-label {
	font-family: var(--dormi-font-heading);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.4;
}

.dormi-cfg__row-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.dormi-cfg__row-controls .dormi-input {
	flex: 0 1 185px;
	width: 185px;
}

.dormi-cfg__row-controls .dormi-input--wide {
	flex: 1 1 100%;
	width: 100%;
}

.dormi-cfg__row-controls select.dormi-input {
	flex-basis: 150px;
	width: 150px;
}

.dormi-cfg__slash,
.dormi-cfg__unit {
	font-size: 18px;
	color: #333;
}

.dormi-cfg__hint {
	flex: 1 1 100%;
	color: #666;
	font-size: 13px;
}

.dormi-cfg__row .dormi-cfg__error {
	grid-column: 2;
	margin-top: 0;
}

.dormi-cfg__customer {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 24px;
	padding: 22px 23px;
	border: 1px solid var(--dormi-border);
	border-radius: var(--dormi-radius);
}

.dormi-cfg__configs {
	margin-top: 24px;
	padding: 26px 30px 30px;
	border: 1px solid var(--dormi-border);
	border-radius: var(--dormi-radius);
}

.dormi-cfg__config {
	margin-top: 18px;
	padding: 18px 20px;
	background: #fafafa;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 8px;
}

.dormi-cfg__config.is-current {
	background: #fff;
	border-color: #000;
}

.dormi-cfg__config-head {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.dormi-cfg__config-head h4 {
	margin: 0;
	font-family: var(--dormi-font-heading);
	font-size: 18px;
	font-weight: 700;
	text-transform: none;
}

.dormi-cfg__config-actions {
	display: flex;
	gap: 18px;
}

.dormi-cfg__config-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 6px 24px;
	margin: 0;
}

.dormi-cfg__config-row {
	display: flex;
	gap: 10px;
	font-size: 15px;
}

.dormi-cfg__config-row dt {
	flex: 0 0 auto;
	color: #555;
}

.dormi-cfg__config-row dd {
	margin: 0;
	font-weight: 700;
}

.dormi-cfg__config-sizes-wrap {
	margin-top: 10px;
	font-size: 15px;
}

.dormi-cfg__config-sizes-label {
	color: #555;
}

.dormi-cfg__config-sizes {
	margin: 4px 0 0 18px;
	padding: 0;
}

/* ------------------------------------------------------------------ summary (“Your Selection”) */

.dormi-cfg__summary {
	margin-top: 30px;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--dormi-border);
	border-radius: var(--dormi-radius);
}

.dormi-cfg__summary-top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 857px);
	min-height: 391px;
	border-bottom: 1px solid var(--dormi-border);
}

.dormi-cfg__summary-info {
	padding: 34px 20px 24px 34px;
}

.dormi-cfg__summary-title {
	margin: 0 0 20px;
	color: #000;
	font-family: var(--dormi-font-heading);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.4;
	text-transform: none;
}

.dormi-cfg__summary-list {
	margin: 0;
}

.dormi-cfg__summary-row {
	display: grid;
	grid-template-columns: 119px minmax(0, 1fr);
	align-items: center;
	min-height: 36px;
}

.dormi-cfg__summary-row dt {
	font-family: var(--dormi-font-body);
	font-size: 16px;
	line-height: 1.5;
}

.dormi-cfg__summary-row dd {
	margin: 0;
	font-family: var(--dormi-font-body);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.dormi-cfg__summary-empty {
	display: block;
	width: 56px;
	height: 1px;
	background: #000;
}

.dormi-cfg__summary-media {
	position: relative;
	overflow: hidden;
	background: var(--dormi-muted);
}

.dormi-cfg__summary-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	animation: dormi-cfg-fade 0.4s ease both;
}

@keyframes dormi-cfg-fade {
	from {
		opacity: 0.2;
	}
	to {
		opacity: 1;
	}
}

.dormi-cfg__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	padding: 38px 34px 34px;
}

.dormi-cfg .dormi-btn {
	display: inline-flex;
	white-space: nowrap;
	letter-spacing: normal;
	align-items: center;
	justify-content: center;
	min-width: 163px;
	min-height: 55px;
	padding: 15px 30px;
	color: #000;
	font-family: var(--dormi-font-ui);
	font-size: 18px;
	font-weight: 700;
	line-height: 22px;
	text-transform: capitalize;
	text-decoration: none;
	background: var(--dormi-muted);
	border: 1px solid #000;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, opacity 0.2s ease;
}

.dormi-cfg .dormi-btn:hover {
	color: #fff;
	background: #000;
}

.dormi-cfg .dormi-btn:focus-visible {
	outline: 2px solid var(--dormi-accent);
	outline-offset: 3px;
}

.dormi-cfg .dormi-btn--primary {
	color: #fff;
	background: #000;
}

.dormi-cfg .dormi-btn--primary:hover {
	background: var(--dormi-accent);
	border-color: var(--dormi-accent);
}

.dormi-cfg .dormi-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.dormi-cfg .dormi-btn:disabled:hover {
	color: #000;
	background: var(--dormi-muted);
	border-color: #000;
}

.dormi-cfg .dormi-btn--primary:disabled:hover {
	color: #fff;
	background: #000;
}

.dormi-cfg.is-submitting .dormi-btn--primary {
	position: relative;
	padding-left: 52px;
}

.dormi-cfg.is-submitting .dormi-btn--primary::before {
	content: "";
	position: absolute;
	left: 22px;
	top: 50%;
	width: 18px;
	height: 18px;
	margin-top: -9px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: dormi-spin 0.8s linear infinite;
}

@keyframes dormi-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ------------------------------------------------------------------ success */

.dormi-cfg__done {
	max-width: 720px;
	margin: 0 auto;
	padding: 60px 40px;
	text-align: center;
	border: 1px solid var(--dormi-border);
	border-radius: var(--dormi-radius);
}

.dormi-cfg__done-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	color: #fff;
	background: #000;
	border-radius: 50%;
}

.dormi-cfg__done-icon svg {
	width: 34px;
	height: 34px;
}

.dormi-cfg__done-title {
	margin: 24px 0 10px;
	font-family: var(--dormi-font-heading);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.3;
	outline: none;
	text-transform: none;
}

.dormi-cfg__done-message {
	margin: 0 0 30px;
	font-size: 18px;
}

.dormi-cfg__layout:has(.dormi-cfg__step--done) {
	grid-template-columns: minmax(0, 1fr);
}

/* ------------------------------------------------------------------ responsive */

@media (max-width: 1500px) {
	.dormi-cfg__options--card {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

.dormi-cfg__summary-top {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
	}
}

@media (max-width: 1180px) {
	.dormi-cfg__layout {
		grid-template-columns: 240px minmax(0, 1fr);
		gap: 28px;
	}

.dormi-cfg__split {
		grid-template-columns: minmax(0, 1fr);
	}

.dormi-cfg__row {
		grid-template-columns: minmax(0, 1fr);
	}

.dormi-cfg__row .dormi-cfg__error {
		grid-column: 1;
	}
}

@media (max-width: 1024px) {
	.dormi-cfg__layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}

.dormi-cfg__nav {
		position: static;
		padding: 12px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
	}

.dormi-cfg__nav-list {
		flex-direction: row;
		gap: 18px;
		width: max-content;
	}

.dormi-cfg .dormi-cfg__nav-btn {
		gap: 10px;
		font-size: 15px;
		white-space: nowrap;
	}

.dormi-cfg__nav-num {
		flex-basis: 32px;
		width: 32px;
		height: 32px;
		font-size: 15px;
	}

.dormi-cfg__summary-top {
		grid-template-columns: minmax(0, 1fr);
	}

.dormi-cfg__summary-media {
		order: -1;
		min-height: 0;
		aspect-ratio: 857 / 391;
	}
}

@media (max-width: 767px) {
	.dormi-cfg__options--card {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}

.dormi-cfg .dormi-opt--card {
		min-height: 0;
		display: grid;
		grid-template-columns: 110px minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		column-gap: 14px;
		padding: 10px 44px 10px 10px;
	}

.dormi-cfg .dormi-opt--card .dormi-opt__media {
		grid-row: 1 / span 2;
		aspect-ratio: 1 / 1;
	}

.dormi-cfg .dormi-opt--card .dormi-opt__label {
		margin-top: 2px;
		font-size: 17px;
	}

.dormi-cfg .dormi-opt--card .dormi-opt__desc {
		margin-top: 2px;
		font-size: 14px;
	}

.dormi-cfg .dormi-opt--card .dormi-opt__check {
		top: 8px;
		right: 8px;
		width: 28px;
		height: 28px;
	}

.dormi-cfg__options--tile > .dormi-opt {
		flex: 1 1 96px;
		width: auto;
		max-width: 140px;
	}

	.dormi-cfg__options--tile > .dormi-opt.is-landscape {
		flex: 1 1 100%;
		max-width: none;
	}

	.dormi-cfg .dormi-opt--tile.is-landscape .dormi-opt__media {
		width: 100%;
		height: 160px;
	}

.dormi-cfg__options--tile.tile-lg > .dormi-opt {
		flex: 1 1 140px;
		max-width: 200px;
	}

.dormi-cfg__head--ruled {
		margin-bottom: 24px;
	}

.dormi-cfg__box {
		padding: 22px 16px;
	}

.dormi-cfg__tabs {
		gap: 10px;
	}

.dormi-cfg .dormi-tab {
		flex: 1 1 calc(50% - 10px);
		min-width: 0;
		min-height: 46px;
		padding: 10px 12px;
		font-size: 15px;
	}

.dormi-cfg__tabs-wrap {
		margin: -20px 0 24px;
	}

.dormi-cfg__card {
		padding: 22px 14px 16px;
	}

.dormi-cfg__size {
		padding: 18px 12px;
	}

.dormi-cfg__row-label {
		font-size: 18px;
	}

.dormi-cfg__row-controls .dormi-input {
		flex: 1 1 110px;
		width: auto;
		min-height: 48px;
		font-size: 16px;
	}

.dormi-cfg__row-controls select.dormi-input {
		flex: 1 1 100px;
		width: auto;
	}

.dormi-cfg__customer {
		grid-template-columns: minmax(0, 1fr);
		padding: 14px;
	}

.dormi-cfg__summary-info {
		padding: 22px 16px 16px;
	}

.dormi-cfg__summary-row {
		grid-template-columns: 110px minmax(0, 1fr);
		padding: 4px 0;
	}

.dormi-cfg__summary-row dd {
		font-size: 16px;
	}

.dormi-cfg__actions {
		padding: 20px 16px;
	}

.dormi-cfg__actions .dormi-btn {
		flex: 1 1 100%;
	}

.dormi-cfg__configs {
		padding: 18px 14px;
	}

.dormi-cfg__done {
		padding: 40px 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dormi-cfg *,
.dormi-cfg *::before,
.dormi-cfg *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ---------------------------------------------------------------------------
 * Closet flow (Figma “Sliding Doors For Closet”: Profile → Finish →
 * Insert / Panel Details → Review & Quote)
 * ------------------------------------------------------------------------ */

.dormi-cfg__split--profile {
	grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr);
	align-items: start;
}

.dormi-cfg__profile-grid {
	min-width: 0;
}

.dormi-cfg .dormi-opt-group--profile-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 26px 24px;
}

.dormi-cfg .dormi-opt--profile-card {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: 13px 13px 20px;
	text-align: left;
}

.dormi-cfg .dormi-opt--profile-card .dormi-opt__media {
	aspect-ratio: 317 / 267;
	width: 100%;
	border-radius: 8px;
	overflow: hidden;
}

.dormi-cfg .dormi-opt--profile-card .dormi-opt__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dormi-cfg .dormi-opt--profile-card .dormi-opt__label {
	margin-top: 14px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}

.dormi-cfg .dormi-opt--profile-card .dormi-opt__desc {
	margin-top: 7px;
	max-width: none;
	font-size: 14px;
	line-height: 1.45;
	white-space: normal;
}

.dormi-cfg .dormi-opt--profile-card .dormi-opt__check {
	top: 22px;
	right: 22px;
	width: 30px;
	height: 30px;
}

.dormi-cfg .dormi-opt--profile-card .dormi-opt__check svg {
	width: 15px;
	height: 15px;
}

.dormi-cfg__preview-box {
	display: flex;
	flex-direction: column;
	padding: 20px 20px 26px;
}

.dormi-cfg__preview-box .dormi-cfg__box-title {
	font-size: 16px;
	margin-bottom: 18px;
}

.dormi-cfg__preview-media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 345 / 385;
	overflow: hidden;
	background: var(--dormi-muted);
	border-radius: 8px;
}

.dormi-cfg__preview-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dormi-cfg__preview-label {
	margin: 18px 0 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}

.dormi-cfg__preview-desc {
	margin: 7px 0 0;
	color: #4a4a4a;
	font-size: 14px;
	line-height: 1.45;
}

/* Insert / Panel Details */

.dormi-cfg__details {
	margin-bottom: 26px;
}

.dormi-cfg .dormi-input--details {
	display: block;
	width: 100%;
	min-height: 158px;
	padding: 22px 24px;
	color: var(--dormi-ink);
	font-family: var(--dormi-font-body);
	font-size: 16px;
	line-height: 1.5;
	background: var(--dormi-muted);
	border: 1px solid transparent;
	border-radius: var(--dormi-radius);
	resize: vertical;
}

.dormi-cfg .dormi-input--details:focus {
	border-color: var(--dormi-accent);
	outline: none;
	box-shadow: 0 0 0 3px rgba(179, 136, 85, 0.16);
}

.dormi-cfg__details.has-error .dormi-input--details {
	border-color: var(--dormi-error);
}

.dormi-cfg__split--insert {
	grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
	align-items: start;
}

.dormi-cfg__split--insert.is-single {
	grid-template-columns: minmax(0, 1fr);
}

.dormi-cfg__insert-types .dormi-opt-group {
	gap: 18px;
}

/* Informational panel (Figma “Glass Options”). */

.dormi-cfg__info {
	background: #fff;
	border: 1px solid var(--dormi-border);
	border-radius: var(--dormi-radius);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
	overflow: hidden;
}

.dormi-cfg__info-head {
	padding: 18px 22px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.dormi-cfg__info-title {
	margin: 0;
	font-family: var(--dormi-font-heading);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
}

.dormi-cfg__info-section {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	justify-content: space-between;
	padding: 16px 22px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.dormi-cfg__info-section-text {
	min-width: 0;
	max-width: 190px;
}

.dormi-cfg__info-section-title {
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}

.dormi-cfg__info-desc {
	margin: 0;
	color: #4a4a4a;
	font-size: 13px;
	line-height: 1.45;
}

.dormi-cfg__info-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: flex-end;
}

.dormi-cfg__info-swatch {
	width: 52px;
	text-align: center;
}

.dormi-cfg__info-swatch-media {
	display: block;
	aspect-ratio: 1 / 1.05;
	overflow: hidden;
	background: var(--dormi-muted);
	border-radius: 4px;
}

.dormi-cfg__info-swatch-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dormi-cfg__info-swatch-color {
	display: block;
	width: 100%;
	height: 100%;
}

.dormi-cfg__info-swatch-label {
	display: block;
	margin-top: 5px;
	font-size: 11px;
	line-height: 1.25;
}

.dormi-cfg__info-note {
	padding: 16px 22px 20px;
}

@media (max-width: 1024px) {
	.dormi-cfg__split--profile,
	.dormi-cfg__split--insert {
		grid-template-columns: minmax(0, 1fr);
	}

	.dormi-cfg__preview-media {
		aspect-ratio: 16 / 11;
	}

	.dormi-cfg__info-section {
		flex-direction: column;
	}

	.dormi-cfg__info-section-text {
		max-width: none;
	}

	.dormi-cfg__info-swatches {
		justify-content: flex-start;
	}
}

@media (max-width: 767px) {
	.dormi-cfg .dormi-opt-group--profile-cards {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	.dormi-cfg .dormi-input--details {
		min-height: 130px;
		padding: 16px;
	}
}

/* “Start Over” link in the action row (client request: reset from any step). */

.dormi-cfg .dormi-cfg__reset {
	margin-left: auto;
	align-self: center;
	color: #6b6b6b;
	font-size: 15px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.dormi-cfg .dormi-cfg__reset:hover,
.dormi-cfg .dormi-cfg__reset:focus-visible {
	color: var(--dormi-error);
}

@media (max-width: 767px) {
	.dormi-cfg .dormi-cfg__reset {
		margin-left: 0;
		width: 100%;
		text-align: center;
	}
}

/* ------------------------------------------------------------------
 * Client review (Oct 2026): larger option images, one preview size for
 * every step, and the closet layout without its side preview panel.
 * ---------------------------------------------------------------- */

/* Door-type cards: fewer per row so the photographs are readable. */

.dormi-cfg__options--card {
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
}

.dormi-cfg .dormi-opt--card {
	min-height: 0;
	padding: 16px 16px 24px;
}

.dormi-cfg .dormi-opt--card .dormi-opt__media {
	aspect-ratio: 1 / 1;
	background: var(--dormi-muted);
}

.dormi-cfg .dormi-opt--card .dormi-opt__media img {
	object-fit: contain;
}

/* Tiles (profiles, finishes, inserts, handles, hinges) — the client found
   the old 111px tiles too small to read. */

.dormi-cfg__options--tile {
	gap: 16px;
}

.dormi-cfg__options--tile > .dormi-opt {
	flex: 0 0 168px;
	width: 168px;
}

.dormi-cfg__options--tile > .dormi-opt.is-landscape {
	flex-basis: 280px;
	width: 280px;
}

.dormi-cfg .dormi-opt--tile {
	min-height: 0;
	padding: 14px 12px 16px;
}

.dormi-cfg .dormi-opt--tile .dormi-opt__media {
	width: 100%;
	height: 132px;
}

.dormi-cfg .dormi-opt--tile.is-landscape .dormi-opt__media {
	width: 100%;
	height: 168px;
}

.dormi-cfg .dormi-opt--tile .dormi-opt__label {
	padding-top: 12px;
	font-size: 15px;
}

.dormi-cfg__options--tile.tile-lg > .dormi-opt {
	flex-basis: 200px;
	width: 200px;
}

.tile-lg > .dormi-opt--tile .dormi-opt__media {
	width: 100%;
	height: 168px;
}

/* Finish swatches stay square and compact. */

.dormi-cfg__step--finish .dormi-cfg__options--tile > .dormi-opt {
	flex: 0 0 132px;
	width: 132px;
}

.dormi-cfg__step--finish .dormi-cfg .dormi-opt--tile .dormi-opt__media,
.dormi-cfg__step--finish .dormi-opt--tile .dormi-opt__media {
	height: 104px;
}

/* One preview size on every step. */

/* The preview window has one fixed shape (3:4 portrait) on every step and on every
   screen size, so a picture exported at that ratio fills it edge to edge and the
   detail is readable without zooming. It never follows the height of the options
   box, which is what used to make it grow, shrink and overlap. */

.dormi-cfg__split {
	align-items: start;
}

.dormi-cfg__visual {
	aspect-ratio: 3 / 4;
	width: 100%;
	min-height: 0;
	padding: 0;
	overflow: hidden;
}

.dormi-cfg__visual img {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: contain;
}

/* Closet profile step: cards use the full width (preview panel removed). */

.dormi-cfg__profile-wide .dormi-opt-group--profile-cards {
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Closet insert step: the information panel sits under the insert types. */

.dormi-cfg__insert-stack {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.dormi-cfg__insert-stack .dormi-cfg__info {
	box-shadow: none;
}

.dormi-cfg__insert-stack .dormi-cfg__info-section {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: 20px;
	align-items: center;
}

.dormi-cfg__insert-stack .dormi-cfg__info-swatches {
	justify-content: flex-start;
}

@media (max-width: 767px) {
	.dormi-cfg__options--tile > .dormi-opt,
	.dormi-cfg__options--tile > .dormi-opt.is-landscape,
	.dormi-cfg__options--tile.tile-lg > .dormi-opt,
	.dormi-cfg__step--finish .dormi-cfg__options--tile > .dormi-opt {
		flex-basis: calc(50% - 8px);
		width: calc(50% - 8px);
	}

	.dormi-cfg__insert-stack .dormi-cfg__info-section {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Email verification on the review step. */

.dormi-cfg__verify {
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid var(--dormi-border);
}

.dormi-cfg__verify-row {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.dormi-cfg .dormi-cfg__code-input {
	width: 220px;
	font-size: 19px;
	letter-spacing: 4px;
	text-align: center;
}

.dormi-cfg .dormi-cfg__code-input::placeholder {
	font-size: 15px;
	letter-spacing: normal;
}

/* Smaller screens: keep the same idea, just smaller (these come last so they win). */

@media (max-width: 1024px) {
	/* One column: the preview keeps its shape and simply uses the full width,
	   which makes it far larger on tablets and phones than the old wide strip. */
	.dormi-cfg__visual {
		max-width: 520px;
		margin: 0 auto;
	}
}

/* The details box now sits at the end of the insert step, under the options. */

.dormi-cfg__insert-stack .dormi-cfg__details {
	margin-bottom: 0;
}

.dormi-cfg__insert-stack .dormi-cfg__label {
	display: block;
	margin-bottom: 10px;
}