/**
 * Fee Calculator ([esm_fee_calculator]). Mobile-first, em units, no external assets.
 * Flat BEM selectors: "&__x" is not valid CSS nesting, so only valid nesting is used below.
 */

.esm-fee-calc {
	max-width: 100%;
	box-sizing: border-box;
	color: #1a1a2e;

	& *,
	& *::before,
	& *::after {
		box-sizing: border-box;
	}
}

.esm-fee-calc__form {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1em;
	margin: 0 0 1em;
}

.esm-fee-calc__field {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;

	& label,
	& legend {
		display: block;
		margin: 0 0 .35em;
		padding: 0;
		font-weight: 600;
		font-size: 1em;
	}

	&[hidden] {
		display: none;
	}
}

.esm-fee-calc .esm-fee-calc__field input[type="number"] {
	display: block;
	width: 100%;
	min-height: 2.75em;
	padding: .5em .75em;
	border: .0625em solid #6d6bc8;
	border-radius: .375em;
	font-size: 1em;
	background: #fff;
	color: #1a1a2e;

	&:focus-visible {
		outline: .1875em solid #6d6bc8;
		outline-offset: .0625em;
	}
}

.esm-fee-calc__modes label {
	display: flex;
	align-items: center;
	gap: .5em;
	min-height: 2.75em;
	font-weight: 400;
}

.esm-fee-calc__message {
	margin: 0 0 1em;
	min-height: 0;
	font-weight: 600;
	color: #3C3B6E;
}

.esm-fee-calc__results {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1em;
	margin: 0 0 1em;
	padding: 0;
	list-style: none;
}

.esm-fee-calc .esm-fee-calc__row {
	margin: 0;
	padding: 1em;
	border: .0625em solid #d9d8ee;
	border-radius: .5em;
	background: #fff;
	min-width: 0;
}

.esm-fee-calc .esm-fee-calc__row-esm {
	border-color: #3C3B6E;
	border-width: .125em;
	background: #f6f5fd;
}

.esm-fee-calc__row-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5em;
	margin: 0 0 .5em;
}

.esm-fee-calc .esm-fee-calc__name {
	margin: 0;
	font-size: 1.25em;
	color: #3C3B6E;
}

.esm-fee-calc__stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .75em 1em;
	margin: 0;
}

.esm-fee-calc__stat {
	min-width: 0;
}

.esm-fee-calc .esm-fee-calc__stat-label {
	margin: 0;
	font-size: .875em;
	font-weight: 400;
	color: #4a4a68;
}

.esm-fee-calc .esm-fee-calc__stat-value {
	margin: 0;
	font-size: 1.25em;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.esm-fee-calc .esm-fee-calc__muted,
.esm-fee-calc .esm-fee-calc__note {
	margin: .75em 0 0;
	font-size: .9375em;
	color: #4a4a68;
}

.esm-fee-calc .esm-fee-calc__admin-notice {
	margin: 0 0 1em;
	padding: .75em 1em;
	border-left: .25em solid #dba617;
	background: #fff8e5;
	font-size: .9375em;
}

/* Sources table: stacked cards on phones, a table from 48em up. */
.esm-fee-calc .esm-fee-calc__sources {
	width: 100%;
	border-collapse: collapse;

	& thead {
		position: absolute;
		width: .0625em;
		height: .0625em;
		overflow: hidden;
		clip-path: inset(50%);
	}

	& tr {
		display: block;
		margin: 0 0 1em;
		border: .0625em solid #d9d8ee;
		border-radius: .5em;
	}

	& th,
	& td {
		display: block;
		padding: .5em .75em;
		border: 0;
		text-align: left;
		overflow-wrap: anywhere;
	}

	& td::before {
		content: attr(data-label) ": ";
		font-weight: 600;
	}
}

@media (min-width: 40em) {
	.esm-fee-calc__form {
		grid-template-columns: 1fr 1fr;
	}

	.esm-fee-calc__results {
		grid-template-columns: 1fr 1fr;
	}

	.esm-fee-calc-compact .esm-fee-calc__results {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 48em) {
	.esm-fee-calc .esm-fee-calc__sources {
		& thead {
			position: static;
			width: auto;
			height: auto;
			overflow: visible;
			clip-path: none;
		}

		& tr {
			display: table-row;
			margin: 0;
			border: 0;
		}

		& th,
		& td {
			display: table-cell;
			padding: .5em .75em;
			border-bottom: .0625em solid #d9d8ee;
			vertical-align: top;
		}

		& td::before {
			content: none;
		}
	}
}

/* Breathing room between the calculator blocks and the page content around them. */
.esm-fee-calc.esm-fee-calc-full,
.esm-fee-calc.esm-fee-calc-compact,
.esm-fee-calc.esm-fee-calc-sources {
	margin-bottom: 2.5em;
}

.entry-content :is(.esm-fee-calc-full, .esm-fee-calc-sources) ~ h2 {
	margin-top: 2.25em;
	margin-bottom: .75em;
}

.entry-content :is(.esm-fee-calc-full, .esm-fee-calc-sources) ~ h2 + p {
	margin-top: 0;
}

.entry-content :is(.esm-fee-calc-full, .esm-fee-calc-sources) ~ p {
	margin-bottom: 1.25em;
}

/* The compact embed sits in a page section with no side gutter, so give it its own. */
.esm-fee-calc.esm-fee-calc-compact {
	padding-inline: 1em;
}

/* Full-width stat inside a results block (e-SwapMeet card processing line). */
.esm-fee-calc .esm-fee-calc__stat-wide {
	grid-column: 1 / -1;
}