/**
 * Brand styling for the CalcHub (Calculator Builder) plugin.
 * Overrides the plugin's default CSS custom properties and adds a few
 * rules for elements it leaves unstyled (range slider) so the calculator
 * matches the site's colour/type system instead of the plugin's stock
 * green/grey/blue defaults.
 *
 * Colour choices mirror the site's two existing button styles
 * (is-style-button-brand / is-style-button-brand--alt): gold-on-dark for
 * the primary action, dark-on-white for the secondary one. Nothing here
 * is set to var(--wp--preset--color--ti-fg-alt) as a *background* — that
 * token is what admins use for the card the calculator is usually placed
 * inside (see the "Buy shares" block), so a same-coloured element would
 * visually disappear against it.
 */

.formbox {
	/* sit flush inside the card block it's normally placed in, rather than adding a second box */
	margin: 0;
	padding: 0;
	gap: 1.5em;

	--formbox-radius: var(--wp--preset--border-radius--sm, 0.5rem);
	--form-field-height: 3em;
	--formbox-field-background: var(--wp--preset--color--ti-bg-alt, #ffffff);
	--formbox-field-border-hcolor: var(--wp--preset--color--ti-bg-inv, #e6b22f);

	--formbox-btn-calc-weight: 700;
	--formbox-btn-calc-bg: var(--wp--preset--color--ti-bg, #ffca04);
	--formbox-btn-calc-color: var(--wp--preset--color--ti-accent, #1e1e1e);
	--formbox-btn-calc-hbg: var(--wp--preset--color--ti-bg-inv, #e6b22f);
	--formbox-btn-calc-hcolor: var(--wp--preset--color--ti-accent, #1e1e1e);

	--formbox-btn-reset-bg: var(--wp--preset--color--ti-fg, #2f0a28);
	--formbox-btn-reset-color: var(--wp--preset--color--ti-bg-alt, #ffffff);
	--formbox-btn-reset-hbg: color-mix(in srgb, var(--wp--preset--color--ti-fg, #2f0a28) 85%, white);
	--formbox-btn-reset-hcolor: var(--wp--preset--color--ti-bg-alt, #ffffff);
}

/* Range slider: brand the track and thumb (plugin ships no styling for these).
   Track uses a fixed neutral grey rather than a theme background token so it
   stays visible whatever card colour the calculator is dropped onto. */
.formbox__container input.formbox__field-range {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	cursor: pointer;
}

.formbox__container input.formbox__field-range::-webkit-slider-runnable-track {
	height: 6px;
	border-radius: 999px;
	background: #dbdbdb;
}

.formbox__container input.formbox__field-range::-moz-range-track {
	height: 6px;
	border-radius: 999px;
	background: #dbdbdb;
}

.formbox__container input.formbox__field-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	margin-top: -7px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--wp--preset--color--ti-bg, #ffca04);
	border: 2px solid var(--wp--preset--color--ti-accent, #1e1e1e);
	cursor: pointer;
}

.formbox__container input.formbox__field-range::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--wp--preset--color--ti-bg, #ffca04);
	border: 2px solid var(--wp--preset--color--ti-accent, #1e1e1e);
	cursor: pointer;
}

.formbox__container input.formbox__field-range:focus-visible::-webkit-slider-thumb {
	outline: 2px solid var(--wp--preset--color--ti-bg-inv, #e6b22f);
	outline-offset: 2px;
}

/* Floating value bubble above the slider, styled as a small brand-coloured badge */
.formbox__field-range-value {
	padding: 0.15em 0.65em;
	border-radius: 999px;
	background: var(--wp--preset--color--ti-bg, #ffca04);
	color: var(--wp--preset--color--ti-accent, #1e1e1e);
	font-weight: 600;
}