/**
 * Cabinet front configurator, front end.
 *
 * Every selector is prefixed so nothing here can collide with a theme or
 * another plugin, and nothing relies on !important to win.
 */

.cdcc-configurator {
	margin: 0 0 1.5em;
}

.cdcc-configurator__group {
	border: 1px solid rgb(0 0 0 / 12%);
	border-radius: 4px;
	margin: 0 0 1.25em;
	padding: 1em 1.25em 1.25em;
}

.cdcc-configurator__legend {
	font-size: 1rem;
	font-weight: 600;
	padding: 0 0.5em;
}

.cdcc-configurator__row {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
}

.cdcc-configurator__field {
	display: flex;
	flex-direction: column;
	gap: 0.35em;
	margin: 0 0 1em;
}

/* Declared after the base field so the more specific rule wins by order. */
.cdcc-configurator__row > .cdcc-configurator__field {
	flex: 1 1 14em;
}

.cdcc-configurator__field--toggle {
	flex-direction: column;
}

.cdcc-configurator__field label,
.cdcc-configurator__label {
	font-weight: 600;
}

.cdcc-configurator__field select,
.cdcc-configurator__field input[type="text"] {
	max-width: 100%;
	padding: 0.5em;
}

.cdcc-configurator__field select:focus-visible,
.cdcc-configurator__field input:focus-visible {
	outline: 2px solid currentcolor;
	outline-offset: 2px;
}

.cdcc-configurator__fixed {
	background: rgb(0 0 0 / 4%);
	border-radius: 3px;
	display: inline-block;
	padding: 0.5em 0.75em;
}

.cdcc-configurator__help {
	font-size: 0.85em;
	opacity: 0.8;
}

.cdcc-configurator__error:not(:empty) {
	border-left: 3px solid #b32d2e;
	color: #b32d2e;
	font-size: 0.9em;
	padding-left: 0.6em;
}

.cdcc-configurator__control--invalid {
	border-color: #b32d2e;
	box-shadow: 0 0 0 1px #b32d2e;
}

.cdcc-configurator__summary {
	border-top: 1px solid rgb(0 0 0 / 12%);
	padding-top: 1em;
}

.cdcc-configurator__price {
	font-size: 1.2em;
	font-weight: 700;
	margin: 0 0 0.5em;
}

.cdcc-configurator__messages:not(:empty) {
	border-left: 3px solid #b32d2e;
	padding-left: 0.75em;
}

.cdcc-configurator__messages ul {
	margin: 0.25em 0 0;
	padding-left: 1.25em;
}