/*
 * OMM Loan Calculator
 *
 * A scoped port of the Handy Finance design system subset that the
 * new-calculator-block depends on (_global.scss + _new-calculator.scss),
 * re-tokenised to the OurMoneyMarket palette.
 *
 * Everything lives under .omm-calc and uses `omm-calc__*` class names so the
 * block is immune to hello-elementor and to Elementor's own resets. All colours
 * come from custom properties, which the widget's Style tab writes onto the
 * root — so this file never needs regenerating for a theme change.
 */

/* -------------------------------------------------------------------------
 * Tokens
 * ---------------------------------------------------------------------- */

.omm-calc {
	--omm-calc-accent: #45cada;
	--omm-calc-accent-hover: #2fb6c6;
	--omm-calc-heading: #2b2b2b;
	--omm-calc-text: #1d2433;
	--omm-calc-muted: #7889ab;
	--omm-calc-card: #ffffff;
	--omm-calc-panel: #ecfafb;
	--omm-calc-rates: #f4f5f8;
	--omm-calc-border: #bec1d5;
	--omm-calc-card-border: #cccede;
	--omm-calc-tooltip-bg: #0f46c1;
	--omm-calc-bg: #ffffff;

	--omm-calc-shapes-width: 420px;
	--omm-calc-shapes-right: -67px;
	--omm-calc-shapes-top: -217px;

	--omm-calc-radius-lg: 20px;
	--omm-calc-radius-md: 14px;
	--omm-calc-control-h: 48px;
	--omm-calc-card-pad: 48px;
	/* The estimate panel runs narrower inline than the design's flat 48px.
	   Two things set the floor, both measured on the live page at 1440px, where
	   the card is capped at 829px and the output column takes half of it:
	     · "Estimated fortnightly repayments from" needs 318px at Poppins 600/16
	       — the longest of the three frequency labels, and it wrapped to two
	       lines at the design's 48px, which shoved the panel taller;
	     · the total-interest note needs 326px — label + a five-digit figure +
	       the tooltip glyph at Poppins 12px.
	   40px only left 322px, so the note wrapped for anything from ~$88,888 up.
	   32px gives 338px, clearing both with room to spare. */
	--omm-calc-panel-pad-x: 32px;
	--omm-calc-gap: 24px;

	/* The Figma specifies Poppins for every UI layer and Roboto for the two
	   prose ones (the lead paragraph and the disclaimer) — i.e. exactly the
	   faces OMM's Elementor kit already loads, so this block ships no webfont
	   of its own. The stray 'Axiforma' in the design's `narrow-rates` layer is
	   inside a `display: none` block: dead residue from the Handy frame it was
	   copied from, not an instruction. */
	--omm-calc-font-ui: Poppins, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
	--omm-calc-font-body: Roboto, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

	position: relative;
	z-index: 1;
	padding: 96px 48px;
	background: var(--omm-calc-bg);
	color: var(--omm-calc-text);
	font-family: var(--omm-calc-font-ui);
	-webkit-font-smoothing: antialiased;
}

/* Elementor's editor and hello-elementor both style bare <p>/<ul>; neutralise
   that inside the block rather than fighting it selector by selector. */
.omm-calc p,
.omm-calc ul,
.omm-calc li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.omm-calc *,
.omm-calc *::before,
.omm-calc *::after {
	box-sizing: border-box;
}

/* -------------------------------------------------------------------------
 * Background decoration
 *
 * The oversized ring bleeds well past the section's right edge, so it needs
 * clipping — but clipping the section itself would also cut off the credit
 * rating dropdown when it opens near the bottom. So the decoration lives in
 * its own absolutely-positioned, clipped layer underneath the content.
 * ---------------------------------------------------------------------- */

.omm-calc .omm-calc__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	border-radius: inherit;

	/* Clip on the horizontal axis only, so the ring bleeds into the blocks
	   above and below instead of ending on a hard flat edge — but still gets
	   cropped at the right, where it hangs ~676px past the section.
	   `overflow-x: hidden` can't express this: `hidden` forces the other axis
	   to `auto`, turning this into a scroll container. `clip` is the exception
	   the spec allows to pair with `visible`, and unlike clip-path it also
	   takes the overhang out of the page's scrollable area — clip-path alone
	   masks the paint but still drags 676px of horizontal overflow along. */
	overflow-x: clip;
	overflow-y: visible;
}

/* Safari < 16 has no `overflow: clip`; there, keep the old behaviour rather
   than let the ring push the page sideways. */
@supports not (overflow: clip) {
	.omm-calc .omm-calc__bg {
		overflow: hidden;
	}
}

.omm-calc .omm-calc__shapes {
	position: absolute;
	top: var(--omm-calc-shapes-top);
	right: var(--omm-calc-shapes-right);
	width: var(--omm-calc-shapes-width);
	height: auto;
	max-width: none;
	display: block;
}

.omm-calc .omm-calc__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 48px;
	width: 100%;
	max-width: 829px;
	margin: 0 auto;
}

/* -------------------------------------------------------------------------
 * Header
 * ---------------------------------------------------------------------- */

.omm-calc .omm-calc__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	text-align: center;
}

.omm-calc .omm-calc__heading {
	margin: 0;
	font-family: inherit;
	font-size: 48px;
	line-height: 48px;
	font-weight: 600;
	color: var(--omm-calc-heading);
	letter-spacing: -0.2px;
}

.omm-calc .omm-calc__heading-accent {
	color: var(--omm-calc-accent);
}

.omm-calc .omm-calc__heading-break {
	display: block;
	height: 0;
}

.omm-calc .omm-calc__lead {
	font-family: var(--omm-calc-font-body);
	font-size: 18px;
	line-height: 28px;
	font-weight: 400;
	color: var(--omm-calc-muted);
}

/* -------------------------------------------------------------------------
 * Card shell
 * ---------------------------------------------------------------------- */

.omm-calc .omm-calc__card {
	display: flex;
	flex-direction: row;
	background: var(--omm-calc-card);
	border: 1px solid var(--omm-calc-card-border);
	border-radius: var(--omm-calc-radius-lg);
	box-shadow: 0 10px 5px 0 rgba(0, 0, 0, 0.15);
}

/* -------------------------------------------------------------------------
 * Inputs column
 * ---------------------------------------------------------------------- */

.omm-calc .omm-calc__inputs {
	display: flex;
	flex-direction: column;
	gap: var(--omm-calc-gap);
	/* A 50% basis, not `1 1 0`: the two columns carry different padding, and a
	   zero basis grows them from their padding boxes, so the split comes out
	   uneven (462/378 at 840px). The design splits the card down the middle. */
	flex: 1 1 50%;
	min-width: 348px;
	padding: var(--omm-calc-card-pad);
}

.omm-calc .omm-calc__field {
	display: flex;
	flex-direction: column;
}

.omm-calc .omm-calc__field--frequency,
.omm-calc .omm-calc__field--credit {
	gap: 8px;
}

.omm-calc .omm-calc__label {
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	color: var(--omm-calc-muted);
}

.omm-calc .omm-calc__value {
	font-size: 32px;
	line-height: 40px;
	font-weight: 700;
	color: var(--omm-calc-text);
	margin-bottom: 12px;
}

/* ---- Sliders ---- */

.omm-calc .omm-calc__slider {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 8px;
	background: var(--omm-calc-panel);
	border-radius: 4px;
	cursor: pointer;
	touch-action: none;
}

/* No focus ring on the rail, by request. It is focused programmatically on
   pointerdown so a mouse drag can hand over to the arrow keys, and
   :focus-visible inherits the modality of whatever was focused before --
   which is why the ring appeared on some mouse drags and not others.
   Keyboard control is unchanged; only the indicator is gone. */
.omm-calc .omm-calc__slider:focus,
.omm-calc .omm-calc__slider:focus-visible {
	outline: none;
}

.omm-calc .omm-calc__slider-fill {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	position: relative;
	/* never narrower than the dial it carries, or the dial overhangs at zero */
	min-width: 16px;
	width: 0;
	height: 100%;
	background: var(--omm-calc-accent);
	border-radius: 60px;
}

.omm-calc .omm-calc__slider-dial {
	position: relative;
	display: block;
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	background: #ffffff;
	border: 1px solid var(--omm-calc-accent);
	border-radius: 50%;
	filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.08));
	cursor: ew-resize;
}

/* ---- Segmented control ---- */

.omm-calc .omm-calc__segmented {
	display: flex;
	position: relative;
	height: var(--omm-calc-control-h);
	align-items: center;
	background: var(--omm-calc-panel);
	border-radius: calc(var(--omm-calc-control-h) / 2);
}

.omm-calc .omm-calc__segment {
	display: flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	padding: 11px 4px 9px;
	margin: 0;
	border: 0;
	background: transparent;
	border-radius: calc(var(--omm-calc-control-h) / 2);
	font: inherit;
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	color: var(--omm-calc-muted);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.omm-calc .omm-calc__segment:hover:not(.is-selected) {
	color: var(--omm-calc-text);
}

.omm-calc .omm-calc__segment.is-selected {
	background: var(--omm-calc-accent);
	color: #ffffff;
	font-weight: 700;
}

.omm-calc .omm-calc__segment:focus-visible {
	outline: 2px solid var(--omm-calc-accent);
	outline-offset: 2px;
}

/* ---- Credit rating select ---- */

.omm-calc .omm-calc__select {
	position: relative;
	width: 100%;
}

.omm-calc .omm-calc__select-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: var(--omm-calc-control-h);
	padding: 11px 24px 9px;
	margin: 0;
	border: 0;
	background: var(--omm-calc-panel);
	border-radius: calc(var(--omm-calc-control-h) / 2);
	font: inherit;
	font-size: 16px;
	line-height: 24px;
	color: var(--omm-calc-text);
	text-align: left;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.omm-calc .omm-calc__select-trigger:focus-visible {
	outline: 2px solid var(--omm-calc-accent);
	outline-offset: 2px;
}

.omm-calc .omm-calc__select-chevron {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	color: #283273;
	transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.omm-calc .omm-calc__select-trigger[aria-expanded="true"] .omm-calc__select-chevron {
	transform: rotate(180deg);
}

.omm-calc .omm-calc__select-list {
	position: absolute;
	z-index: 20;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	margin: 0;
	padding: 6px;
	background: #ffffff;
	border: 1px solid var(--omm-calc-border);
	border-radius: var(--omm-calc-radius-md);
	box-shadow: 0 8px 24px rgba(29, 36, 51, 0.14);
	max-height: 280px;
	overflow-y: auto;
}

.omm-calc .omm-calc__select-option {
	padding: 10px 18px;
	border-radius: 20px;
	font-size: 16px;
	line-height: 24px;
	color: var(--omm-calc-text);
	cursor: pointer;
}

.omm-calc .omm-calc__select-option:hover,
.omm-calc .omm-calc__select-option.is-active {
	background: var(--omm-calc-panel);
}

.omm-calc .omm-calc__select-option.is-selected {
	font-weight: 700;
}

/* -------------------------------------------------------------------------
 * Output column
 * ---------------------------------------------------------------------- */

.omm-calc .omm-calc__output {
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1 1 50%;
	min-width: 0;
	max-width: 480px;
	padding: 12px 12px 12px 0;
}

.omm-calc .omm-calc__estimate {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: center;
	gap: var(--omm-calc-gap);
	padding: var(--omm-calc-card-pad) var(--omm-calc-panel-pad-x);
	background: var(--omm-calc-panel);
	border-radius: var(--omm-calc-radius-md);
	text-align: center;
}

.omm-calc .omm-calc__estimate-top,
.omm-calc .omm-calc__estimate-bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	width: 100%;
}

.omm-calc .omm-calc__estimate-title {
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	color: #000000;
}

.omm-calc .omm-calc__estimate-amount {
	font-size: 40px;
	line-height: 48px;
	font-weight: 700;
	color: var(--omm-calc-accent);
	margin-bottom: -6px; /* design pairs amount + subtext at 6px, not the stack's 12px */
}

.omm-calc .omm-calc__estimate-sub {
	font-size: 14px;
	line-height: 24px;
	color: #000000;
}

.omm-calc .omm-calc__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-width: 192px;
	height: 64px;
	padding: 0 32px;
	border: 0;
	background: var(--omm-calc-accent);
	border-radius: 100px;
	text-decoration: none;
	box-shadow: 0 15px 30px rgba(15, 70, 193, 0.15);
	transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.omm-calc .omm-calc__cta span {
	font-size: 16px;
	line-height: 30px;
	font-weight: 700;
	color: #ffffff;
}

.omm-calc .omm-calc__cta:hover,
.omm-calc .omm-calc__cta:focus-visible {
	background: var(--omm-calc-accent-hover);
	box-shadow: 0 15px 30px rgba(15, 70, 193, 0.25);
}
/* The kit underlines every link on hover; the CTA span carries the text, so
   both the anchor and the span have to opt out or the underline shows. */
.omm-calc .omm-calc__cta:hover,
.omm-calc .omm-calc__cta:focus,
.omm-calc .omm-calc__cta:active,
.omm-calc .omm-calc__cta:hover span,
.omm-calc .omm-calc__cta:focus span,
.omm-calc .omm-calc__cta:active span {
	text-decoration: none;
}

.omm-calc .omm-calc__notes {
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: 100%;
}

.omm-calc .omm-calc__note {
	font-size: 12px;
	line-height: 16px;
	color: #000000;
}

.omm-calc .omm-calc__note--total {
	position: relative;
}

/* Keeps the figure and its tooltip glyph together, so a narrow screen breaks
   after the label rather than stranding the glyph on a line of its own. */
.omm-calc .omm-calc__note-figure {
	white-space: nowrap;
}

/* ---- Breakdown tooltip: white Roboto on OMM dark blue, per client feedback ---- */

.omm-calc .omm-calc__tooltip {
	display: inline-block;
	position: relative;
	height: 16px;
	margin-left: 4px;
	vertical-align: -3px;
	cursor: pointer;
	color: var(--omm-calc-text);
}

.omm-calc .omm-calc__tooltip-icon {
	display: block;
	width: 16px;
	height: 16px;
}

.omm-calc .omm-calc__tooltip-text {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	z-index: 30;
	bottom: 28px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 12px 8px;
	border-radius: 8px;
	background: var(--omm-calc-tooltip-bg);
	font-family: var(--omm-calc-font-body);
	font-size: 13px;
	line-height: 18px;
	font-weight: 400;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.24);
	text-align: left;
	white-space: nowrap;
	transition: opacity 0.3s ease;
}

.omm-calc .omm-calc__tooltip-text span,
.omm-calc .omm-calc__tooltip-text b {
	color: #ffffff;
}

.omm-calc .omm-calc__tooltip-text::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -8px;
	border: 8px solid transparent;
	border-top-color: var(--omm-calc-tooltip-bg);
}

.omm-calc .omm-calc__tooltip:hover .omm-calc__tooltip-text,
.omm-calc .omm-calc__tooltip:focus-within .omm-calc__tooltip-text {
	visibility: visible;
	opacity: 1;
}

/* ---- Rates panel ---- */

.omm-calc .omm-calc__rates {
	container-type: inline-size;
	container-name: omm-calc-rates;
	width: 100%;
}

.omm-calc .omm-calc__rates-inner {
	display: flex;
	gap: var(--omm-calc-gap);
	padding: var(--omm-calc-gap);
	background: var(--omm-calc-rates);
	border-radius: var(--omm-calc-radius-md);
}

.omm-calc .omm-calc__rate {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	gap: 0;
}

.omm-calc .omm-calc__rate-label {
	font-size: 16px;
	line-height: 24px;
	color: #000000;
}

.omm-calc .omm-calc__rate-figure {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.omm-calc .omm-calc__rate-value {
	font-size: 40px;
	line-height: 48px;
	font-weight: 700;
	color: #000000;
}

.omm-calc .omm-calc__rate-unit {
	display: flex;
	flex-direction: column;
	padding-top: 4px;
	font-size: 16px;
	line-height: 24px;
	color: #000000;
}

.omm-calc .omm-calc__rate-percent {
	margin: -6px 0;
}

.omm-calc .omm-calc__rate-suffix sup {
	font-size: 0.65em;
	line-height: 0;
	vertical-align: super;
}

.omm-calc .omm-calc__rates-divider {
	width: 1px;
	align-self: stretch;
	background: #1d2433;
}

/* Narrow rates layout — the panel switches itself, independent of viewport. */
@container omm-calc-rates (max-width: 380px) {
	.omm-calc .omm-calc__rates-inner {
		flex-direction: column;
		gap: 8px;
	}

	.omm-calc .omm-calc__rate {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.omm-calc .omm-calc__rate-label {
		font-size: 14px;
		line-height: 20px;
	}

	.omm-calc .omm-calc__rate-figure {
		align-items: baseline;
		gap: 4px;
	}

	.omm-calc .omm-calc__rate-value {
		font-size: 16px;
		line-height: 24px;
		font-weight: 700;
	}

	.omm-calc .omm-calc__rate-unit {
		flex-direction: row;
		align-items: baseline;
		gap: 4px;
		padding-top: 0;
	}

	.omm-calc .omm-calc__rate-percent {
		margin: 0;
		font-size: 16px;
		line-height: 22px;
		font-weight: 400;
	}

	.omm-calc .omm-calc__rate-suffix {
		font-size: 12px;
		line-height: 20px;
		font-weight: 400;
	}

	.omm-calc .omm-calc__rates-divider {
		width: 100%;
		height: 1px;
		align-self: auto;
	}
}

/* -------------------------------------------------------------------------
 * Disclaimer
 * ---------------------------------------------------------------------- */

.omm-calc .omm-calc__disclaimer {
	font-family: var(--omm-calc-font-body);
	font-size: 12px;
	line-height: 16px;
	color: var(--omm-calc-muted);
	margin-top: -24px; /* pulls it under the card, matching the design's tight gap */
}

/* -------------------------------------------------------------------------
 * Breakpoints — mirroring the Handy design system's steps
 * ---------------------------------------------------------------------- */

@media (max-width: 1199px) {
	.omm-calc {
		/* Side gutter 48px, not 72px. Between ~901px and ~948px the 829px inner
		   cap stops binding, so the card — and with it the half-width output
		   column — tracks the viewport, and 72px sides squeezed the estimate
		   panel back under the 326px the total-interest note needs. Above ~973px
		   the inner is capped and centred anyway, so this changes nothing there. */
		padding: 72px 48px;
	}

	.omm-calc .omm-calc__heading {
		font-size: 40px;
		line-height: 48px;
	}
}

@media (max-width: 1024px) {
	.omm-calc {
		--omm-calc-card-pad: 36px;
	}
}

@media (max-width: 900px) {
	.omm-calc .omm-calc__card {
		flex-direction: column;
	}

	.omm-calc .omm-calc__inputs {
		flex: 0 0 auto;
		min-width: 0;
	}

	.omm-calc .omm-calc__output {
		flex: 0 0 auto;
		max-width: none;
		padding: 0 12px 12px;
	}
}

@media (max-width: 767px) {
	/* No right-hand gutter left at this width: the artwork lands on top of the
	   heading and the waves sit right across it. Handy drops its own background
	   shapes on small screens for the same reason. */
	.omm-calc .omm-calc__bg {
		display: none;
	}

	.omm-calc {
		--omm-calc-card-pad: 24px;
		/* 10px, not the 24px the rest of the mobile card uses. The total-interest
		   note is by far the widest thing in the panel: label + a five-digit
		   figure + the tooltip glyph wants ~327px at Poppins 12px, and 24px sides
		   left only ~310px on a 430px phone, so the glyph orphaned onto a line of
		   its own. 10px clears it from 422px up (verified against $88,888 and
		   $188,888); below that the note breaks cleanly after the label instead,
		   never to a third line. Everything else in the panel is centred and far
		   narrower, so the tighter gutter costs nothing visually. */
		--omm-calc-panel-pad-x: 10px;
		/* 16px side gutter, not 24px: the Elementor container this widget sits in
		   already adds 10px of its own each side on the live pages, which ate the
		   headroom the panel padding above was meant to free. 16px + Elementor's
		   10px still reads as a 26px gutter to the screen edge. */
		padding: 36px 16px;
	}

	.omm-calc .omm-calc__inner {
		gap: 36px;
	}

	.omm-calc .omm-calc__card {
		box-shadow: 0 8px 4px 0 rgba(0, 0, 0, 0.12);
	}

	.omm-calc .omm-calc__heading {
		font-size: 28px;
		line-height: 36px;
	}

	.omm-calc .omm-calc__value {
		font-size: 28px;
		line-height: 36px;
	}

	.omm-calc .omm-calc__slider-fill {
		min-width: 24px;
	}

	.omm-calc .omm-calc__slider-dial {
		width: 24px;
		height: 24px;
		flex-basis: 24px;
	}

	.omm-calc .omm-calc__tooltip {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 16px;
	}

	.omm-calc .omm-calc__tooltip-icon,
	.omm-calc .omm-calc__tooltip-icon svg {
		width: 12px;
		height: 12px;
	}

	.omm-calc .omm-calc__disclaimer {
		margin-top: -18px;
	}
}

/* Elementor's editor renders the widget inside a wrapper that can collapse
   flex children; make sure the block always spans its column. */
.elementor-widget-omm_loan_calculator .elementor-widget-container,
.elementor-widget-omm_loan_calculator {
	width: 100%;
}