/**
 * Aggregates calculator - layout only.
 *
 * No box, border, background or colours of its own: the surrounding container is
 * styled in WPBakery, inputs and selects pick up the theme's global form styling
 * (Impreza's --inputs-* variables), and buttons use the theme's button classes.
 * The few colours used below come from the theme's own CSS variables.
 */

.bwac {
	margin: 0;
	background: transparent;
}

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

.bwac__heading {
	margin: 0 0 0.5em;
}

.bwac__intro {
	margin: 0 0 1.25em;
}

/* Measuring mode */
.bwac__mode {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1.5em;
	margin: 0 0 1.25em;
	padding: 0;
	border: 0;
	min-width: 0;
}

.bwac__legend {
	width: 100%;
	margin: 0 0 0.25em;
	padding: 0;
	font-weight: 700;
}

.bwac__choice {
	display: inline-flex;
	align-items: center;
	margin: 0;
	cursor: pointer;
}

/* Fields */
/* Two rows on a shared three-column grid, so Depth lines up under Length. */
.bwac__row {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 1em;
	align-items: start;
}

.bwac__row + .bwac__row {
	margin-top: 1em;
}

.bwac__label {
	display: block;
	margin: 0 0 0.4em;
	font-weight: 700;
	line-height: 1.3;
}

.bwac__field input,
.bwac__field select {
	width: 100%;
	margin: 0;
}

.bwac__error {
	margin: 0.4em 0 0;
	font-size: 0.875em;
	line-height: 1.4;
	/* The same red Gravity Forms uses for the site's other form errors. */
	color: #c02b0a;
}

.bwac__hint {
	margin: 0.75em 0 0;
	font-size: 0.875em;
	opacity: 0.8;
}

.bwac__calculate {
	margin-top: 1em;
}

/* Only the fields for the chosen mode, once JavaScript is running. Without
   JavaScript every field shows and the radio decides which are used. */
.bwac--js[data-bwac-mode="area"] [data-bwac-show="dimensions"],
.bwac--js[data-bwac-mode="dimensions"] [data-bwac-show="area"] {
	display: none;
}

/* Results */
.bwac__results {
	margin-top: 1.5em;
}

.bwac__summary {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 1em;
	margin: 0 0 1em;
}

.bwac__stat {
	margin: 0;
}

.bwac__stat dt {
	margin: 0;
	font-size: 0.875em;
	opacity: 0.8;
}

.bwac__stat dd {
	margin: 0.15em 0 0;
	font-weight: 700;
	font-size: 1.15em;
}

.bwac__stat--total dd {
	font-size: 1.4em;
}

.bwac__options {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bwac__option {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75em 1.5em;
	margin: 0;
	padding: 1em 0;
	border-top: 1px solid var( --color-content-border, rgba( 0, 0, 0, 0.12 ) );
}

.bwac__option:last-child {
	border-bottom: 1px solid var( --color-content-border, rgba( 0, 0, 0, 0.12 ) );
}

.bwac__option-text {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25em 1em;
	flex: 1 1 16em;
	min-width: 0;
}

.bwac__option-label {
	font-weight: 700;
	flex-basis: 100%;
}

.bwac__option-qty {
	font-size: 1.1em;
}

.bwac__option-price {
	font-weight: 700;
	font-size: 1.1em;
}

.bwac__note {
	flex-basis: 100%;
	font-size: 0.875em;
	opacity: 0.8;
}

.bwac__option-action {
	flex: 0 0 auto;
}

.bwac__add {
	margin: 0;
}

.bwac__option-action button {
	margin: 0;
	white-space: nowrap;
}

.bwac__message {
	margin: 1em 0 0;
	font-weight: 700;
}

.bwac__disclaimer {
	margin: 1em 0 0;
	font-size: 0.8125em;
	opacity: 0.8;
}

/* Narrow columns and phones */
@media ( max-width: 600px ) {
	.bwac__row {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.bwac__summary {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.bwac__stat--total {
		grid-column: 1 / -1;
	}

	.bwac__option-action,
	.bwac__option-action button {
		width: 100%;
	}
}