/**
 * Ecreate Calculators front end.
 *
 * Everything is driven by the custom properties set on .eccalc-outer, so a site
 * owner changes the look from the settings page without touching CSS. The
 * defaults belong on that wrapper: declaring them again on .eccalc would shadow
 * the values the wrapper carries. Styles are deliberately self-contained so
 * any theme can host them.
 */

.eccalc-outer {
	--eccalc-accent: #0a7bcb;
	--eccalc-bg: #ffffff;
	--eccalc-text: #1d2327;
	--eccalc-muted: #646970;
	--eccalc-border: #dcdcde;
	--eccalc-result-bg: #f0f6fc;
	--eccalc-radius: 10px;
	--eccalc-shadow: 0 1px 3px rgba( 0, 0, 0, .08 );
	--eccalc-font-size: 15px;
	--eccalc-result-size: 30px;
	--eccalc-gap: 20px;

	container-type: inline-size;
	width: 100%;
}

/* Doubled class so a theme rule on content children cannot win. */

.eccalc-outer.eccalc-outer {
	max-width: var( --eccalc-max-width, 100% );
}

.eccalc {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;
	gap: var( --eccalc-gap );
	color: var( --eccalc-text );
	font-size: var( --eccalc-font-size );
	line-height: 1.5;
}

.eccalc *,
.eccalc *::before,
.eccalc *::after {
	box-sizing: inherit;
}

/* The two panels. Each is its own card, so the calculator reads as an input
   side and an answer side rather than one crowded box. */

.eccalc-inputs,
.eccalc-results {
	min-width: 0;
	padding: calc( var( --eccalc-gap ) * 1.4 );
	border: 1px solid var( --eccalc-border );
	border-radius: calc( var( --eccalc-radius ) * 1.6 );
	background: var( --eccalc-bg );
	box-shadow: var( --eccalc-shadow );
}

.eccalc-inputs {
	display: flex;
	flex-direction: column;
	gap: calc( var( --eccalc-gap ) * 1.1 );
}

.eccalc-results {
	display: flex;
	flex-direction: column;
	gap: var( --eccalc-gap );
	border-color: transparent;
	background: var( --eccalc-result-bg );
	text-align: center;
}

/* Layouts. */

.eccalc-layout-stacked {
	grid-template-columns: 1fr;
}

.eccalc-layout-card {
	grid-template-columns: 1fr 1fr;
	gap: 0;
	border: 1px solid var( --eccalc-border );
	border-radius: calc( var( --eccalc-radius ) * 1.6 );
	background: var( --eccalc-bg );
	box-shadow: var( --eccalc-shadow );
	overflow: hidden;
}

.eccalc-layout-card .eccalc-inputs,
.eccalc-layout-card .eccalc-results {
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.eccalc-layout-minimal {
	grid-template-columns: 1fr;
}

.eccalc-layout-minimal .eccalc-inputs,
.eccalc-layout-minimal .eccalc-results {
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

.eccalc-layout-minimal .eccalc-results {
	text-align: left;
}

/* Fields. */

.eccalc-field-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 8px;
}

.eccalc-field-head label {
	margin: 0;
	color: var( --eccalc-text );
	font-size: var( --eccalc-font-size );
	font-weight: 600;
	line-height: 1.3;
}

.eccalc-field-unit {
	color: var( --eccalc-muted );
	font-size: calc( var( --eccalc-font-size ) * .82 );
}

.eccalc-field-input {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 7px 13px;
	border: 1px solid var( --eccalc-border );
	border-radius: var( --eccalc-radius );
	background: var( --eccalc-bg );
}

.eccalc-field-input:focus-within {
	border-color: var( --eccalc-accent );
}

.eccalc-affix {
	flex: 0 0 auto;
	color: var( --eccalc-muted );
	font-weight: 500;
}

.eccalc input.eccalc-number {
	width: 100%;
	min-width: 0;
	height: auto;
	/* The WordPress admin forces a 40px minimum on number inputs, which
	   makes the preview taller than the real thing. */
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	font-size: calc( var( --eccalc-font-size ) * 1.05 );
	font-weight: 600;
	line-height: 1.35;
	text-align: right;
	outline: none;
	-moz-appearance: textfield;
}

.eccalc input.eccalc-number::-webkit-outer-spin-button,
.eccalc input.eccalc-number::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

/* Sliders. */

.eccalc input.eccalc-range {
	display: block;
	width: 100%;
	height: 6px;
	margin: 14px 0 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var( --eccalc-border );
	accent-color: var( --eccalc-accent );
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.eccalc input.eccalc-range::-webkit-slider-thumb {
	width: 18px;
	height: 18px;
	border: 3px solid var( --eccalc-bg );
	border-radius: 50%;
	background: var( --eccalc-accent );
	box-shadow: 0 0 0 1px var( --eccalc-accent );
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.eccalc input.eccalc-range::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border: 3px solid var( --eccalc-bg );
	border-radius: 50%;
	background: var( --eccalc-accent );
	box-shadow: 0 0 0 1px var( --eccalc-accent );
	cursor: pointer;
}

.eccalc-scale {
	display: flex;
	justify-content: space-between;
	margin-top: 6px;
	color: var( --eccalc-muted );
	font-size: calc( var( --eccalc-font-size ) * .78 );
}

/* Result. */

.eccalc-result {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.eccalc-result-label {
	color: var( --eccalc-muted );
	font-size: calc( var( --eccalc-font-size ) * .82 );
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
}

.eccalc-result-value {
	color: var( --eccalc-accent );
	font-size: var( --eccalc-result-size );
	font-weight: 700;
	line-height: 1.15;
	word-break: break-word;
}

/* Chart. */

.eccalc-chart {
	display: flex;
	justify-content: center;
}

.eccalc .eccalc-donut {
	width: 190px;
	max-width: 100%;
	height: auto;
}

.eccalc .eccalc-slice {
	stroke: var( --eccalc-accent );
	transition: stroke-dasharray .2s ease, stroke-dashoffset .2s ease;
}

.eccalc .eccalc-slice-1 {
	stroke: var( --eccalc-muted );
}

.eccalc .eccalc-slice-2 {
	stroke: var( --eccalc-border );
}

/* The figures, with the chart colours as their markers. */

.eccalc ul.eccalc-breakdown {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.eccalc ul.eccalc-breakdown li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 9px 0;
	list-style: none;
}

.eccalc-breakdown-label {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var( --eccalc-muted );
}

.eccalc-breakdown-value {
	font-weight: 700;
	text-align: right;
}

.eccalc-dot {
	width: 10px;
	height: 10px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var( --eccalc-accent );
}

.eccalc-dot-1 {
	background: var( --eccalc-muted );
}

.eccalc-dot-2,
.eccalc-dot-total {
	background: var( --eccalc-text );
}

/* Button and small print. */

.eccalc a.eccalc-cta {
	display: block;
	padding: 13px 20px;
	border-radius: var( --eccalc-radius );
	background: var( --eccalc-accent );
	color: #ffffff;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

.eccalc a.eccalc-cta:hover,
.eccalc a.eccalc-cta:focus {
	color: #ffffff;
	opacity: .9;
}

.eccalc .eccalc-disclaimer {
	margin: 0;
	color: var( --eccalc-muted );
	font-size: calc( var( --eccalc-font-size ) * .82 );
}

/**
 * A calculator adapts to the space it sits in, not to the window, so it works
 * in a narrow sidebar or column as well as in a full width section.
 */

@container ( max-width: 560px ) {
	.eccalc {
		grid-template-columns: 1fr;
	}

	.eccalc-layout-card {
		grid-template-columns: 1fr;
	}
}

@container ( max-width: 360px ) {
	.eccalc-inputs,
	.eccalc-results {
		padding: var( --eccalc-gap );
	}

	.eccalc .eccalc-donut {
		width: 150px;
	}
}

/* The visitor currency picker, styled like the other fields. */

.eccalc-field-choice .eccalc-field-input {
	position: relative;
	padding: 0;
}

/* Our own arrow, inset from the edge and in the calculator's own colours.
   The browser's arrow sits hard against the border and ignores the theme. */
.eccalc-field-choice .eccalc-field-input::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 18px;
	width: 8px;
	height: 8px;
	margin-top: -6px;
	border-right: 2px solid var( --eccalc-muted );
	border-bottom: 2px solid var( --eccalc-muted );
	transform: rotate( 45deg );
	pointer-events: none;
}

.eccalc select.eccalc-choice {
	width: 100%;
	min-width: 0;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 8px 42px 8px 13px;
	border: 0;
	border-radius: var( --eccalc-radius );
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	font-weight: 600;
	outline: none;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* Internet Explorer and old Edge keep a second arrow without this. */
.eccalc select.eccalc-choice::-ms-expand {
	display: none;
}

/* Right to left languages. Only the few places that assume a direction. */

[dir="rtl"] .eccalc input.eccalc-number {
	text-align: left;
}

[dir="rtl"] .eccalc ul.eccalc-breakdown {
	text-align: right;
}

[dir="rtl"] .eccalc-breakdown-value {
	text-align: left;
}

[dir="rtl"] .eccalc-layout-minimal .eccalc-results {
	text-align: right;
}

/* The metric and imperial switch on the health calculators. */

.eccalc-units {
	align-self: flex-start;
	display: inline-flex;
	padding: 3px;
	border: 1px solid var( --eccalc-border );
	border-radius: 999px;
	background: var( --eccalc-bg );
}

.eccalc button.eccalc-unit {
	margin: 0;
	padding: 6px 16px;
	border: 0;
	border-radius: 999px;
	background: none;
	box-shadow: none;
	color: var( --eccalc-muted );
	font: inherit;
	font-size: calc( var( --eccalc-font-size ) * .85 );
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
}

.eccalc button.eccalc-unit.is-on {
	background: var( --eccalc-accent );
	color: #ffffff;
}

.eccalc-field[hidden] {
	display: none;
}