/* ------------------------------------------------------------------
   Theme-level overrides for the bluewindow-hermes calculator markup.
   Applied to ANY .bw-calculator on the site so a calculator placed
   directly on a page matches the design used in the Custom Calculators
   block. The Custom Calculators block adds its own variable values on
   top of these (e.g. currency symbol).
   ------------------------------------------------------------------ */
.bw-calculator {
	--tes-calc-green: #055e37;
	--tes-calc-green-dark: #033f25;
	--tes-calc-green-light: #cddfd7;
	--tes-calc-green-submit: #2f7958;
	--tes-calc-green-submit-hover: #246046;
	--tes-calc-green-active: #044e2e;
	--tes-calc-text: #1f1f1f;
	--tes-calc-card-bg: #ffffff;
	--tes-calc-border: #e0e0e0;
	--tes-calc-shadow-card: 0 3px 10px rgba(52, 58, 64, 0.1);

	--bwcalc-main-clr: var(--tes-calc-card-bg);
	--bwcalc-secondary-clr: var(--tes-calc-text);
	--bwcalc-text-clr: var(--tes-calc-text);
	--bwcalc-submit-button-bg-clr: var(--tes-calc-green-submit);
	--bwcalc-submit-button-bg-hover-clr: var(--tes-calc-green-submit-hover);
	--bwcalc-submit-button-bg-click-clr: var(--tes-calc-green-dark);
	margin-top: 0;
}

.bw-calculator__container {
	border: 1px solid var(--tes-calc-border);
	border-radius: 15px;
	box-shadow: var(--tes-calc-shadow-card);
	overflow: hidden;
	background: var(--tes-calc-card-bg);
}

.bw-calculator__header {
	background: var(--tes-calc-card-bg);
	border-radius: 0;
	padding: 15px 20px;
	text-align: center;
}

.bw-calculator__header h3 {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 30px;
	color: var(--tes-calc-text);
}

.bw-calculator__input-container {
	padding: 30px 20px;
	gap: 20px;
}

.bw-calculator__input-container label {
	font-family: 'Inter', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--tes-calc-text);
}

.bw-calculator__input-container input,
.bw-calculator__input-container select {
	background: var(--tes-calc-card-bg);
	border: 1px solid var(--tes-calc-text);
	border-radius: 10px;
	color: var(--tes-calc-text);
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	font-weight: 700;
}

.bw-calculator__input-container input:focus,
.bw-calculator__input-container select:focus {
	border-color: var(--tes-calc-green);
	background: var(--tes-calc-card-bg);
}

.bw-calculator__action {
	padding: 0 20px 20px;
}

.bw-calculator__action button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	background: var(--tes-calc-green-submit);
	color: var(--tes-calc-card-bg);
	border: none;
	border-radius: 15px;
	font-family: 'Inter', sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 27px;
	text-transform: none;
	height: auto;
	padding: 15px 16px;
	max-width: 300px;
	margin-bottom: 0;
}

.bw-calculator__action button::before,
.bw-calculator__action button::after {
	content: "";
	flex: 0 0 12px;
	height: 18px;
}

.bw-calculator__action button::after {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='18' viewBox='0 0 12 18' fill='none'><path d='M2 2L10 9L2 16' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-position: center;
	background-repeat: no-repeat;
}

.bw-calculator__action button:hover {
	background: var(--tes-calc-green);
}

.bw-calculator__action button:active,
.bw-calculator__action button:focus {
	background: var(--tes-calc-green-active);
}

.bw-calculator__result {
	background: var(--tes-calc-card-bg);
	color: var(--tes-calc-green);
	border-top: 1px solid var(--tes-calc-border);
	border-radius: 0;
	padding: 15px 20px 20px;
}

.bw-calculator__result span {
	color: var(--tes-calc-green);
	font-family: 'Inter', sans-serif;
	font-size: 11px;
	font-weight: 700;
	line-height: 16px;
	letter-spacing: 0.02em;
}

.bw-calculator__result--box {
	background: var(--tes-calc-green-light);
	border: 1px solid var(--tes-calc-green);
	color: var(--tes-calc-green);
	border-radius: 10px;
	font-family: 'Inter', sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 30px;
	padding: 10px;
}

/* The poisson calculator (and any other with this class) ships its own
   radio styling — keep typography/colors consistent here too. */
.bw-poisson-radio-option label {
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	color: var(--tes-calc-text);
}

.bw-poisson-radio-option input[type="radio"] {
	accent-color: var(--tes-calc-green);
}