/**
 * Floating payment calculator.
 *
 * Ported from the design's inline styles (Blog.dc.html) into scoped rules.
 * Everything lives under .ij-calc so the widget cannot leak onto the site's
 * ~521 Beaver Builder pages, which it renders on top of.
 */

.ij-calc {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 1300;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
	font-family: var(--font-sans);
}

.ij-calc [hidden] { display: none !important; }

/* ---------- Collapsed pill ---------- */

.ij-calc-peek {
	width: min(300px, calc(100vw - 48px));
	border: none;
	border-radius: 20px;
	padding: 0;
	background: #fff;
	box-shadow: var(--shadow-overlay);
	font-family: var(--font-sans);
	text-align: left;
	overflow: hidden;
	display: block;
	position: relative;
	animation: ij-calc-in 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
	transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1),
		transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ij-calc-peek:hover {
	/* Lift only. The design also declares a deeper hover shadow, but its card
	   sets box-shadow inline, which outranks that rule — so it never renders. */
	transform: translateY(-3px);
}

.ij-calc-peek-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	background: var(--brand-green);
	color: #fff;
}

.ij-calc-peek-mark {
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
}

.ij-calc-peek-title {
	flex: 1;
	min-width: 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}

.ij-calc-peek-chev { flex: none; display: flex; }

/* The button that opens the panel: the whole figure, reset to look like the
   card it sits in rather than like a control. */
.ij-calc-peek-body {
	display: block;
	width: 100%;
	padding: 14px 16px 16px;
	border: none;
	background: transparent;
	font-family: var(--font-sans);
	text-align: left;
	cursor: pointer;
	/* bb-theme sets button { line-height:1.2 }; the design's button keeps the
	   UA's normal, and the three lines inside it are sized by it. */
	line-height: normal;
}

.ij-calc-peek-label {
	display: block;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--color-text-secondary);
}

.ij-calc-peek-figure {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin-top: 2px;
}

.ij-calc-peek-amount {
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -0.8px;
	color: var(--brand-green-dark);
}

.ij-calc-peek-per {
	font-size: 11px;
	font-weight: 500;
	color: var(--color-text-secondary);
}

.ij-calc-peek-cta {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: 10px;
	font-size: 11px;
	font-weight: 600;
	color: var(--brand-green-dark);
}

/* ---------- Open panel ---------- */

.ij-calc-panel {
	width: min(330px, calc(100vw - 48px));
	border-radius: 20px;
	overflow: hidden;
	background: #fff;
	box-shadow: var(--shadow-overlay);
	border: 1px solid var(--color-border-strong);
	animation: ij-calc-in 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.ij-calc-head {
	padding: 12px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: var(--brand-green);
}

.ij-calc-head-title {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: #fff;
}

.ij-calc-head-title svg { flex: none; color: #fff; }

/* The design's round badge behind the header icon, as on the collapsed card. */
.ij-calc-head-mark {
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
}

.ij-calc-min,
.ij-calc-dismiss {
	line-height: normal;
	flex: none;
	width: 26px;
	height: 26px;
	border: none;
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.16);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	cursor: pointer;
	font-family: var(--font-sans);
	transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ij-calc-min:hover,
.ij-calc-dismiss:hover { background: rgba(255, 255, 255, 0.28); }

/* The glyph is a flex child with no CSS size, so it shrinks to nothing
   without this — the circle renders and the icon does not. */
.ij-calc-min svg,
.ij-calc-dismiss svg { flex: none; width: 16px; height: 16px; }


.ij-calc-body {
	padding: 18px;
	max-height: min(58vh, 560px);
	overflow-y: auto;
}

.ij-calc-controls { display: flex; flex-direction: column; gap: 12px; }

.ij-calc-legend { font-size: 13px; font-weight: 600; color: var(--color-text); }

.ij-calc-countries { margin-top: 8px; display: flex; gap: 24px; }

.ij-calc-country {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--color-text-secondary);
	cursor: pointer;
}

.ij-calc-country input {
	accent-color: var(--brand-green);
	width: 16px;
	height: 16px;
}

.ij-calc-flag {
	width: 18px;
	height: 13px;
	object-fit: cover;
	border-radius: var(--radius-2);
	display: block;
}

.ij-calc-row-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.ij-calc-row-head > span:first-child {
	font-size: 13px;
	font-weight: 600;
	color: var(--color-text);
}

.ij-calc-value {
	font-size: 14px;
	font-weight: 600;
	color: var(--brand-green-dark);
}

/* ---------- Number box ----------
   Amount and term can be typed as well as dragged: unit | figure | arrows.
   Shared with the home page's hero calculator (inc/assets.php loads this
   stylesheet there too); markup from ij_calc_numfield(). */

.ij-numfield {
	display: flex;
	align-items: stretch;
	margin-top: 8px;
	height: 44px;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-input);
	background: var(--color-white);
	overflow: hidden;
}

.ij-numfield:focus-within {
	border-color: var(--brand-green-dark);
	box-shadow: 0 0 0 1px var(--brand-green-dark);
}

.ij-numfield-unit {
	display: flex;
	align-items: center;
	padding: 0 14px;
	background: var(--slate-50);
	border-right: 1px solid var(--color-border-strong);
	color: var(--slate-600);
	font-size: 14px;
	font-weight: 600;
}

.ij-numfield-unit--end {
	border-right: none;
	border-left: 1px solid var(--color-border-strong);
}

/* Qualified to outrank the theme's input[type="text"] and home.css's
   `main.ij-home input`, which otherwise draw a second box inside this one. */
.ij-numfield input.ij-numfield-input {
	flex: 1;
	height: auto;
	margin: 0;
	border-radius: 0;
	box-shadow: none;
	min-width: 0;
	padding: 0 12px;
	border: none;
	background: transparent;
	color: var(--color-text);
	font: inherit;
	font-size: 16px;
	font-weight: 700;
}

.ij-numfield input.ij-numfield-input:focus {
	outline: none;
	border: none;
	box-shadow: none;
	background: transparent;
}

.ij-numfield-steps {
	display: flex;
	flex-direction: column;
	border-left: 1px solid var(--color-border-strong);
	background: var(--slate-50);
}

.ij-numfield-step {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--slate-600);
	cursor: pointer;
}

.ij-numfield-step + .ij-numfield-step {
	border-top: 1px solid var(--color-border-strong);
}

.ij-numfield-step:hover {
	background: var(--slate-100);
	color: var(--brand-green-dark);
}

/* The floating panel's body is height-capped; slimmer boxes keep the
   print button in view without scrolling. */
.ij-calc .ij-numfield {
	height: 40px;
	margin-top: 6px;
}

/* ---------- Range sliders ---------- */

.ij-calc-range {
	-webkit-appearance: none;
	appearance: none;
	margin-top: 8px;
	width: 100%;
	height: 8px;
	border-radius: var(--radius-pill);
	background: var(--slate-200);
	border: none;
	cursor: pointer;
}

.ij-calc-range::-webkit-slider-runnable-track {
	height: 8px;
	border-radius: var(--radius-pill);
	background: transparent;
}

.ij-calc-range::-moz-range-track {
	height: 8px;
	border-radius: var(--radius-pill);
	background: transparent;
}

.ij-calc-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	margin-top: -6px;
	border-radius: var(--radius-pill);
	background: var(--brand-green-dark);
	border: 3px solid #fff;
	box-shadow: var(--shadow-low);
	cursor: pointer;
}

.ij-calc-range::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border-radius: var(--radius-pill);
	background: var(--brand-green-dark);
	border: 3px solid #fff;
	cursor: pointer;
}


/* ---------- Result ---------- */

.ij-calc-result {
	margin-top: 18px;
	padding: 18px;
	border-radius: var(--radius-12);
	background: var(--slate-100);
	text-align: center;
}

.ij-calc-result-amount {
	font-size: 26px;
	line-height: 1.15;
	letter-spacing: -0.9px;
	font-weight: 600;
	color: var(--brand-green-dark);
}

.ij-calc-result-note {
	margin-top: 4px;
	font-size: 12px;
	color: var(--color-text-secondary);
}

/* ---------- Actions ---------- */

.ij-calc-action {
	margin-top: 14px;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border-radius: var(--radius-12);
	font-family: var(--font-sans);
	text-align: left;
	cursor: pointer;
	box-sizing: border-box;
}

.ij-calc-action span {
	flex: 1;
	min-width: 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: -0.2px;
}

.ij-calc-action svg { flex: none; }

.ij-calc-action-ghost {
	background: #fff;
	border: 1px solid var(--brand-green);
	color: var(--color-text);
	text-decoration: none;
}

.ij-calc-action-ghost span {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ij-calc-action-ghost:hover { background: var(--color-success-soft); }
.ij-calc-action-ghost svg { color: var(--brand-green-dark); }

.ij-calc-action-solid {
	margin-top: 10px;
	background: var(--brand-green);
	border: none;
	color: #fff;
}

.ij-calc-action-solid:hover { background: var(--brand-green-dark); }

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

.ij-calc-note {
	margin: 14px 0 0;
	font-size: 10px;
	line-height: 1.5;
	color: var(--color-text-secondary);
}

/* ---------- Motion ---------- */

@keyframes ij-calc-in {
	from { opacity: 0; transform: translateY(12px) scale(0.98); }
	to { opacity: 1; transform: none; }
}

@keyframes ij-calc-nudge {
	0%  { transform: none; box-shadow: var(--shadow-overlay); }
	2%  { transform: translateY(-6px) scale(1.02); box-shadow: 0 22px 50px rgba(9, 13, 16, 0.26); }
	4%  { transform: translateY(0) scale(1); box-shadow: var(--shadow-overlay); }
	6%  { transform: translateY(-3px) scale(1.01); }
	8%  { transform: none; box-shadow: var(--shadow-overlay); }
	100% { transform: none; box-shadow: var(--shadow-overlay); }
}

@keyframes ij-calc-sheen {
	0%   { transform: translateX(-160%); }
	4%   { transform: translateX(320%); }
	100% { transform: translateX(320%); }
}

@keyframes ij-calc-ping {
	0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); }
	70%  { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.ij-calc-peek {
	animation: ij-calc-in 220ms cubic-bezier(0.16, 1, 0.3, 1) both,
		ij-calc-nudge 20s cubic-bezier(0.4, 0, 0.2, 1) 6s infinite;
}

.ij-calc-peek:hover { animation-play-state: running, paused; }

.ij-calc-sheen {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 40%;
	background: linear-gradient(
		100deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.5) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	animation: ij-calc-sheen 20s cubic-bezier(0.4, 0, 0.2, 1) 6s infinite;
	pointer-events: none;
}

.ij-calc-ping { animation: ij-calc-ping 2600ms cubic-bezier(0.4, 0, 0.2, 1) infinite; }

@media (prefers-reduced-motion: reduce) {
	.ij-calc-peek { animation: ij-calc-in 220ms cubic-bezier(0.16, 1, 0.3, 1) both; }
	.ij-calc-panel { animation: none; }
	.ij-calc-sheen,
	.ij-calc-ping { animation: none; }
	.ij-calc-peek:hover { transform: none; }
}

/* ---------- Small screens ---------- */

@media (max-width: 600px) {
	.ij-calc { right: 12px; bottom: 12px; left: 12px; align-items: stretch; }
	.ij-calc-peek,
	.ij-calc-panel { width: 100%; }
	.ij-calc-body { max-height: min(64vh, 520px); }
}

/* The widget is chrome, not content: never print it. */
@media print {
	.ij-calc { display: none !important; }
}

/* ---------- bb-theme base resets ----------
 *
 * bb-theme's Bootstrap base (css/base.min.css) loads after this sheet and
 * restyles bare elements the design leaves alone:
 *   legend  { margin-bottom:20px; border-bottom:1px solid #e5e5e5; ... }
 *   label   { font-weight:700; margin-bottom:5px }
 *   a, a:hover, a:focus { color; text-decoration:underline }
 * The #ij-calc scope outranks all of them in every state.
 */
#ij-calc .ij-calc-legend {
	display: block;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: inherit;
	color: var(--color-text);
}

#ij-calc .ij-calc-country {
	margin: 0;
	font-weight: 500;
}

#ij-calc .ij-calc-action,
#ij-calc .ij-calc-action:hover,
#ij-calc .ij-calc-action:focus,
#ij-calc .ij-calc-action:active { text-decoration: none; }

#ij-calc .ij-calc-action-ghost,
#ij-calc .ij-calc-action-ghost:hover,
#ij-calc .ij-calc-action-ghost:focus,
#ij-calc .ij-calc-action-ghost:active { color: var(--color-text); }

/* The design's print control is a <button> (line-height normal); this one is
   an <a> so it works without JavaScript, so state the button's metrics. */
#ij-calc .ij-calc-action-solid,
#ij-calc .ij-calc-action-solid:hover,
#ij-calc .ij-calc-action-solid:focus,
#ij-calc .ij-calc-action-solid:active { color: #fff; line-height: normal; }


/* Bootstrap's input[type=range] { display:block } drops the slider out of its
   line box. The design's is the UA's inline-block with a 2px bottom margin,
   which is what spaces each slider row. */
#ij-calc .ij-calc-range {
	display: inline-block;
	margin-bottom: 2px;
}

/* ---------- Control states ----------
 *
 * bb-theme's skin paints every bare button:hover / :focus / :active
 * #2b7bb9 with a 1px #1f5a87 border and white text, and its Bootstrap base
 * gives a:focus and input:focus a 5px blue auto outline. Every control here
 * states its design value in every state, under the #ij-calc scope that
 * outranks both. Audited against the rendered design with forced
 * :hover/:focus/:active/:focus-visible on 2026-09-24.
 */

/* The figure button on the collapsed card: transparent in every state. */
#ij-calc .ij-calc-peek-body,
#ij-calc .ij-calc-peek-body:hover,
#ij-calc .ij-calc-peek-body:focus,
#ij-calc .ij-calc-peek-body:active {
	background: transparent;
	border: none;
	color: inherit;
}

/* Round header buttons: dismiss (collapsed) and minimise (open). */
#ij-calc .ij-calc-dismiss,
#ij-calc .ij-calc-min,
#ij-calc .ij-calc-dismiss:focus,
#ij-calc .ij-calc-min:focus {
	background: rgba(255, 255, 255, 0.16);
	border: none;
	color: #fff;
}

#ij-calc .ij-calc-dismiss:hover,
#ij-calc .ij-calc-min:hover,
#ij-calc .ij-calc-dismiss:active,
#ij-calc .ij-calc-min:active {
	background: rgba(255, 255, 255, 0.28);
	border: none;
	color: #fff;
}

/* No outline on focus. Keyboard focus shows the design system's ring:
   :focus-visible { outline:none; box-shadow:var(--ring-focus) }. Its
   border-radius is left out — in the design each control's own radius
   wins over it, and the round buttons stay round. */
#ij-calc a:focus,
#ij-calc button:focus,
#ij-calc input:focus {
	outline: none;
}

#ij-calc a:focus-visible,
#ij-calc button:focus-visible,
#ij-calc input:focus-visible {
	outline: none;
	box-shadow: var(--ring-focus);
}


/* Typed boxes only (2026-10-20): the sliders stay in the markup for their
   bounds and step but are never shown. */
.ij-calc .ij-calc-range[hidden] { display: none !important; }