/*** ROI Calculator — shared layout reused by the Inline module and the ROI archive accordions; each caller supplies the coloured field + padding. ***/

.roi-calc {
	align-items: start;
	color: var(--white);
	row-gap: var(--text-spacing-xlarge);
}

/* Per-element padding-inline rather than touching .container. */
.roi-calc-heading {
	grid-column: 1 / -1;
	padding-inline: 58px 18px;
}

/* Lavender headline; the bold (<strong>) phrase carries the emphasis in white. */
.module.inline-roi-calculator .roi-calc-heading {
	color: var(--lavender);
}

.module.inline-roi-calculator .roi-calc-heading strong {
	color: var(--white);
}

.roi-calc-inputs {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	grid-column: 1 / span 5;
	padding-inline: 58px 40px;
}

.roi-calc-outputs {
	display: flex;
	flex-direction: column;
	grid-column: 6 / -2;
	padding-left: 40px;
}

/* Legal disclaimer — full width beneath the results. Inherits the card's white on
   the blue field; matches the heading's inline padding in the grid layout. */
.roi-calc-disclaimer {
	grid-column: 1 / -1;
	margin: 0;
	opacity: .75;
	padding-inline: 58px 18px;
}

/** Inputs **/

.roi-calc-inputs > * + * {
	margin-top: var(--text-spacing-large);
}

.roi-field {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-xsmall);
	width: 100%;
}

/* Label + tooltip trigger share a row. The trigger sits beside the <label>, never
   inside it — a label's content model forbids nested interactive elements.
   (Replaces a bare `.field-label { display: flex }` here, which leaked onto the
   global .field-label type class used across the single/archive templates.) */
.roi-field-label,
.roi-output-label {
	align-items: center;
	display: flex;
	gap: var(--text-spacing-xxsmall);
}

.roi-output-label .eyebrow {
	margin: 0;
}

/* Scoped under the form so the white outline + transparent fill beat the global
   input[type=number] rule (0,1,1), which otherwise paints a faint gray border. */
.roi-calc-inputs .roi-input {
	appearance: textfield; /* Firefox: drop the spinner */
	background: transparent;
	border: 1px solid var(--white);
	color: var(--parchment);
	font-size: calc(15rem / 16);
	padding: 19px 10px 19px 20px;
	width: 100%;
}

/* Kill the native number spinner — the UA arrows render near-black on the blue
   field, and step-by-1 is useless at these magnitudes. Keyboard ↑/↓ still steps. */
.roi-calc-inputs .roi-input::-webkit-outer-spin-button,
.roi-calc-inputs .roi-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Softer focus than the global electric-lavender — a 75% white (#bfbfbf). */
.roi-calc-inputs .roi-input:focus {
	border-color: #bfbfbf;
	outline: none;
}

.roi-tooltip {
	align-items: center;
	background: var(--lavender);
	border: 0;
	border-radius: 50%;
	color: var(--black);
	cursor: pointer;
	display: flex;
	font-size: calc(8rem / 16);
	height: 14px;
	justify-content: center;
	position: relative;
	width: 14px;
}

/* 24px transparent hit area over the 14px disc (WCAG 2.5.8 target size). */
.roi-tooltip::before {
	content: "";
	inset: -5px;
	position: absolute;
}

/** Outputs **/

.roi-calc-outputs > * + * {
	margin-top: var(--text-spacing-xlarge);
}

.roi-output > * + * {
	margin-top: var(--text-spacing-xsmall);
}

.roi-output-value {
	align-items: flex-end;
	display: flex;
	gap: var(--text-spacing-small);
}

/* Optically bottom-aligned to the big stat, 8px off the baseline; 20px glyph. */
.roi-output-icon {
	align-items: center;
	background: color-mix(in srgb, var(--white) 8%, transparent);
	border-radius: 50%;
	color: var(--white);
	display: flex;
	flex-shrink: 0;
	font-size: calc(20rem / 16);
	height: 48px;
	justify-content: center;
	margin-bottom: 8px;
	width: 48px;
}

/** Tile mode ([calculator] shortcode) — same inputs/outputs as the module, laid
    out as stacked rows on the blue panel instead of the two-column split. **/

.roi-calc.tile {
	background: var(--blue-gradient);
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-large);
	margin: var(--text-spacing-large) 0;
	padding: var(--text-spacing-xlarge);
}

.roi-calc.tile .roi-calc-heading {
	color: var(--lavender);
	padding-inline: 0;
}

.roi-calc.tile .roi-calc-heading .highlight {
	color: var(--white);
}

.roi-calc.tile .roi-calc-inputs {
	align-items: end;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--text-spacing-small);
	padding-inline: 0;
}

.roi-calc.tile .roi-calc-disclaimer {
	padding-inline: 0;
}

.roi-calc.tile .roi-field {
	flex: 1 1 160px;
}

.roi-calc.tile .roi-calc-outputs {
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--text-spacing-large);
	padding-left: 0;
}

/*** Module: Inline ROI Calculator ***/

/* clip lets the badge overflow upward without a horizontal scrollbar; hidden would block sticky.
   flow-root contains .roi-calc's badge-clearance margin-top so it can't collapse up and clobber
   the editor's module-spacing gap. */
.module.inline-roi-calculator {
	display: flow-root;
	overflow-x: clip;
}

/* Bleed goes on ::before — negative margin on .roi-calc itself would widen the grid columns. */
.module.inline-roi-calculator .roi-calc {
	color: var(--white);
	isolation: isolate;
	margin-top: 70px;
	padding-block: 100px;
	position: relative;
}

.module.inline-roi-calculator .roi-calc::before {
	background: var(--euphoric-blue);
	background-size: 200% 200%, 220% 220%, 240% 240%, 100% 100%;
	content: "";
	inset: 0 var(--container-breakout);
	position: absolute;
	z-index: -1;
}

@media (prefers-reduced-motion: no-preference) {

	.module.inline-roi-calculator .roi-calc::before {
		animation: euphoria-drift var(--euphoria-drift-duration) ease-in-out infinite;
	}

}

/** Badge **/

.module.inline-roi-calculator .roi-badge {
	display: block;
	height: 140px;
	left: 56px;
	position: absolute;
	top: -70px;
	width: 140px;
}

.roi-badge svg {
	display: block;
	height: 100%;
	width: 100%;
}

/* Pivot the spinning text at the SVG viewBox centre (70,70 in 140 units). */
.roi-badge-text {
	transform-box: view-box;
	transform-origin: 50% 50%;
}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 1200 - Smaller Desktop Sizes / Larger Tablet Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(1200rem / 16)) {

	.module.inline-roi-calculator .roi-calc::before {
		inset: 0;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 950 - Tablet Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(950rem / 16)) {

	.roi-calc {
		display: block;
	}

	.roi-calc-heading {
		padding-inline: 0;
	}

	.roi-calc-inputs {
		margin-top: var(--text-spacing-medium);
		padding-inline: 0;
	}

	.roi-calc-outputs {
		margin-top: var(--text-spacing-xxlarge);
		padding-left: 0;
	}

	.roi-calc-disclaimer {
		margin-top: var(--text-spacing-xlarge);
		padding-left: 0;
	}

	.roi-calc .big-stat {
		font-size: calc(72rem / 16);
	}

	.roi-output-value {
		gap: var(--text-spacing-xsmall);
	}

	.roi-output-icon {
		margin-bottom: 0;
	}

	.module.inline-roi-calculator .roi-badge {
		left: 0;
	}

	.module.inline-roi-calculator .roi-calc {
		padding-bottom: var(--text-spacing-xlarge);
	}

	.module.inline-roi-calculator .roi-calc::before {
		inset: 0 calc(var(--container-outer-padding) * -1);
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 650 - Mobile Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(650rem / 16)) {

	.roi-field {
		gap: 12px;
	}

	.roi-calc-inputs > * + * {
		margin-top: var(--text-spacing-medium);
	}

	.module.inline-roi-calculator .roi-calc {
		padding-top: var(--module-spacing-large);
		margin-top: 50px;
	}

	.module.inline-roi-calculator .roi-badge {
		height: 100px;
		left: 0;
		top: -50px;
		width: 100px;
	}

	.roi-calc.tile .roi-field {
		flex-basis: 100%;
	}

}

@media (prefers-reduced-motion: no-preference) {

	.roi-badge-text {
		animation: roi-badge-spin 18s linear infinite;
	}

}

@keyframes roi-badge-spin {
	to {
		transform: rotate(360deg);
	}
}