/* Madera — the brand face used throughout the Figma. Mobi ships Regular/Bold/ExtraBold (no Medium: 500 falls back to
   Regular). These faces only take effect on the Mobi page: @font-face is inert inside a shadow root, so the embed
   inherits the host page's font instead (www.mukuru.com self-hosts the same Madera family). */
@font-face {
	font-family: 'Madera';
	src: url('../fonts/madera/Madera-Regular.woff2') format('woff2'), url('../fonts/madera/Madera-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Madera';
	src: url('../fonts/madera/Madera-Bold.woff2') format('woff2'), url('../fonts/madera/Madera-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/*
 * Price-check form — Figma "Send Money | Rate Checker" (approved), light + dark.
 *
 * ONE stylesheet for all three render modes of mobi/pricecheck: the Mobi page, `?iframe=1` and the `?embed=1`
 * fragment mounted in a Shadow DOM by media/js/pricecheck-embed.js. Everything is scoped under `.mukuru-pricecheck`
 * (the view's wrapper); nothing here targets html/body.
 *
 * Theming: tokens on `.mukuru-pricecheck`, dark values under prefers-color-scheme AND `[data-theme="dark"]` (for a
 * host page that forces a theme). Brand colours fall back to the marketing site's variables (--orange, --teal,
 * --charcoal, --white, --grey) when the host defines them.
 *
 * Shadow-DOM gotchas: @font-face does NOT load from inside a shadow root, so no web fonts — the font is inherited
 * from the page (Madera on Mobi via muk.css, the site font on WordPress) and icons are inline SVG data URIs.
 */

.mukuru-pricecheck {
	/* Figma: Primary/Charcoal grey #373A36, Colour/Primary/Orange #f05423, Teal #00a5a3, Grey #D9D9D9 */
	--mk-card: #ffffff;
	--mk-text: var(--charcoal, #373A36);
	--mk-text-muted: #6b6b68;
	--mk-card-stroke: #f3f2f2;
	--mk-field-bg: #ffffff;
	--mk-field-stroke: #e0e0e0;
	--mk-accent: var(--orange, #F05423);
	--mk-accent-text: #ffffff;
	--mk-teal: var(--teal, #00A5A3);
	--mk-discount: var(--teal, #00A5A3);
	--mk-alert-bg: #e3f8f6;
	--mk-alert-stroke: var(--teal, #00A5A3);
	--mk-alert-text: #373A36;
	--mk-payslip-bg: #f3f2f2;
	--mk-rule: var(--grey, #D9D9D9);
	--mk-change: var(--orange, #F05423);
	--mk-tile-bg: #ffffff;
	--mk-error: #d73a30;
	--mk-icon: #373A36;
	--mk-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1.41 0L6 4.58 10.59 0 12 1.41 6 7.41 0 1.41z' fill='%23373A36'/%3E%3C/svg%3E");
	--mk-sync: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 14 16' fill='none' stroke='%23373A36' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15V2M1 5l3-3 3 3M10 1v13M13 11l-3 3-3-3'/%3E%3C/svg%3E");
	--mk-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%2300A5A3' stroke-width='1.6'%3E%3Ccircle cx='10' cy='10' r='8.5'/%3E%3Cpath d='M10 9v5' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='6.3' r='0.9' fill='%2300A5A3' stroke='none'/%3E%3C/svg%3E");

	display: block;
	box-sizing: border-box;
	padding: 24px 20px 24px; /* Figma has 40 at the bottom because its CTA floats outside the card; ours is inside */
	border: 1px solid var(--mk-card-stroke);
	border-radius: 20px;
	background: var(--mk-card);
	color: var(--mk-text);
	font-family: 'Madera', 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 22px;
	text-align: left;
}

@media (prefers-color-scheme: dark) {
	.mukuru-pricecheck:not([data-theme="light"]) {
		/* Figma dark: Basic/Card #2c2b2b, Input Field Background #3e3e3e, Basic/Stroke #575353, Background #222222 */
		--mk-card: #2c2b2b;
		--mk-card-stroke: #3c3737;
		--mk-text: #ffffff;
		--mk-text-muted: #c9c9c7;
		--mk-field-bg: #3e3e3e;
		--mk-field-stroke: #3e3e3e;
		--mk-discount: #71dbd4;
		--mk-payslip-bg: #222222;
		--mk-rule: #575353;
		--mk-change: #ffffff;
		--mk-tile-bg: #ffffff;
		--mk-icon: #ffffff;
		--mk-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1.41 0L6 4.58 10.59 0 12 1.41 6 7.41 0 1.41z' fill='white'/%3E%3C/svg%3E");
		--mk-sync: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 14 16' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15V2M1 5l3-3 3 3M10 1v13M13 11l-3 3-3-3'/%3E%3C/svg%3E");
	}
}

.mukuru-pricecheck[data-theme="dark"] {
	--mk-card: #2c2b2b;
	--mk-card-stroke: #3c3737;
	--mk-text: #ffffff;
	--mk-text-muted: #c9c9c7;
	--mk-field-bg: #3e3e3e;
	--mk-field-stroke: #3e3e3e;
	--mk-discount: #71dbd4;
	--mk-payslip-bg: #222222;
	--mk-rule: #575353;
	--mk-change: #ffffff;
	--mk-tile-bg: #ffffff;
	--mk-icon: #ffffff;
	--mk-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1.41 0L6 4.58 10.59 0 12 1.41 6 7.41 0 1.41z' fill='white'/%3E%3C/svg%3E");
	--mk-sync: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 14 16' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15V2M1 5l3-3 3 3M10 1v13M13 11l-3 3-3-3'/%3E%3C/svg%3E");
}

/* Host page without Madera (pricechecker.js adds .mk-no-madera): system fallbacks run visibly smaller than Madera at
   the design's 12px, so lift the small text a step. Madera hosts (Mobi page, www.mukuru.com) keep the Figma sizes. */
.mukuru-pricecheck.mk-no-madera .breakdown_line_item,
.mukuru-pricecheck.mk-no-madera .mk-alert,
.mukuru-pricecheck.mk-no-madera #usp_message,
.mukuru-pricecheck.mk-no-madera .mk-disclaimer,
.mukuru-pricecheck.mk-no-madera .mk-option-sub {
	font-size: 14px;
	line-height: 22px;
}

.mukuru-pricecheck.mk-no-madera .mk-alert-title {
	font-size: 15px;
}

.mukuru-pricecheck.mk-no-madera .mk-label,
.mukuru-pricecheck.mk-no-madera .mk-method-title,
.mukuru-pricecheck.mk-no-madera .mk-method-value,
.mukuru-pricecheck.mk-no-madera .mk-helper,
.mukuru-pricecheck.mk-no-madera .mk-rate,
.mukuru-pricecheck.mk-no-madera .mk-change,
.mukuru-pricecheck.mk-no-madera .mk-button,
.mukuru-pricecheck.mk-no-madera .mk-option {
	font-size: 15px;
}

/* ---- resets inside the component (jQuery Mobile / muk.css / host page styles must not leak in) ---- */
.mukuru-pricecheck *,
.mukuru-pricecheck *::before,
.mukuru-pricecheck *::after {
	box-sizing: border-box;
}

/* muk.css sets `* { font-family: Source Sans Pro; font-weight: 300 }`, which beats inheritance from the wrapper */
.mukuru-pricecheck * {
	font-family: inherit;
	font-weight: inherit;
}

.mukuru-pricecheck input,
.mukuru-pricecheck select,
.mukuru-pricecheck button {
	font: inherit;
	color: inherit;
	margin: 0;
}

.mukuru-pricecheck input:focus,
.mukuru-pricecheck select:focus,
.mukuru-pricecheck button:focus {
	outline: none;
}

.mukuru-pricecheck input[type=number] {
	-moz-appearance: textfield;
	appearance: textfield;
}

.mukuru-pricecheck input[type=number]::-webkit-inner-spin-button,
.mukuru-pricecheck input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.mukuru-pricecheck p {
	margin: 0;
}

.mukuru-pricecheck .hidden {
	display: none !important;
}

/* ---- amount fields ---- */
.mukuru-pricecheck .mk-group {
	margin-bottom: 16px;
}

.mukuru-pricecheck .mk-label,
.mukuru-pricecheck .mk-method-title {
	display: block;
	font-weight: 700;
	font-size: 14px;
	line-height: 22px;
	color: var(--mk-text) !important;
	margin: 0 0 8px;
}

.mukuru-pricecheck .mk-field {
	position: relative;
	display: flex;
	align-items: center;
	height: 70px;
	padding: 0 16px;
	border: 1px solid var(--mk-field-stroke);
	border-radius: 8px;
	background: var(--mk-field-bg);
}

.mukuru-pricecheck .mk-amount {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	font-size: 22px;
	font-weight: 500;
	color: var(--mk-text) !important;
}

.mukuru-pricecheck .mk-amount::placeholder {
	color: var(--mk-text-muted);
	font-weight: 400;
	font-size: 16px;
	opacity: 1;
}

.mukuru-pricecheck .mk-amount:disabled {
	opacity: 0.5;
}

/* currency + round flag + chevron, with the country <select> laid invisibly over it */
.mukuru-pricecheck .mk-chip {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	padding-left: 12px;
}

.mukuru-pricecheck .mk-currency {
	font-weight: 700;
	font-size: 14px;
}

.mukuru-pricecheck .mk-flag {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--mk-rule) center / cover no-repeat;
	flex: 0 0 auto;
}

.mukuru-pricecheck .mk-chevron {
	width: 11px;
	height: 6px;
	background: var(--mk-chevron) center / contain no-repeat;
	margin-left: 2px; /* chip gap 6 + 2 = the design's 8px */
	flex: 0 0 auto;
}

/* The native <select> stays in the form for serialisation/change events but is not the control anymore */
.mukuru-pricecheck .mk-overlay {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
	clip: rect(0 0 0 0);
}

/* trigger affordance: only when there is something to choose */
.mukuru-pricecheck .mk-chip,
.mukuru-pricecheck .mk-method {
	cursor: default;
	outline: none;
}

.mukuru-pricecheck .is-selectable .mk-chip,
.mukuru-pricecheck .mk-method.is-selectable {
	cursor: pointer;
}

/* A chip that can't open (logged-in users send from their own country) must not look like a dropdown */
.mukuru-pricecheck .mk-field:not(.is-selectable) .mk-chevron {
	display: none;
}

.mukuru-pricecheck .is-selectable .mk-chip:hover .mk-currency,
.mukuru-pricecheck .mk-method.is-selectable:hover .mk-change {
	opacity: 0.85;
}

.mukuru-pricecheck .mk-chip:focus-visible,
.mukuru-pricecheck .mk-method:focus-visible {
	box-shadow: 0 0 0 2px var(--mk-accent);
	border-radius: 8px;
}

.mukuru-pricecheck .is-open .mk-chevron {
	transform: rotate(180deg);
}

.mukuru-pricecheck .mk-chevron {
	transition: transform 150ms ease;
}

/* ---- custom dropdown list ---- */
.mukuru-pricecheck .mk-dropdown {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 50;
	min-width: 280px;
	max-width: 100%;
	max-height: 320px;
	overflow-y: auto;
	padding: 8px;
	border: 1px solid var(--mk-field-stroke);
	border-radius: 12px;
	background: var(--mk-card);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
	animation: mk-fade-in 150ms ease-out;
	text-align: left;
}

.mukuru-pricecheck .mk-method .mk-dropdown {
	left: 0;
	right: 0;
	min-width: 0;
}

/* Opened above the control when the list would run past the bottom of the viewport (pricechecker.js decides) */
.mukuru-pricecheck .mk-dropdown.is-above {
	top: auto;
	bottom: calc(100% + 8px);
}

.mukuru-pricecheck .mk-option {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 48px;
	padding: 8px 12px;
	border-radius: 8px;
	cursor: pointer;
	outline: none;
	color: var(--mk-text);
}

.mukuru-pricecheck .mk-option:hover,
.mukuru-pricecheck .mk-option:focus {
	background: var(--mk-field-bg);
}

.mukuru-pricecheck .mk-option[aria-selected="true"] {
	background: var(--mk-payslip-bg);
	font-weight: 700;
}

.mukuru-pricecheck .mk-option[aria-selected="true"]::after {
	content: "";
	width: 18px;
	height: 18px;
	margin-left: auto;
	flex: 0 0 auto;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23F05423' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mukuru-pricecheck .mk-option-image {
	flex: 0 0 auto;
	width: 44px;
	height: 32px;
	padding: 3px 5px;
	border-radius: 6px;
	background: var(--mk-tile-bg) center / contain no-repeat;
	background-origin: content-box;
	border: 1px solid var(--mk-field-stroke);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	color: #373A36;
	overflow: hidden;
}

.mukuru-pricecheck .mk-option-image.is-round {
	width: 30px;
	height: 30px;
	padding: 0;
	border-radius: 50%;
	border: 0;
	background-size: cover;
	background-origin: border-box;
}

.mukuru-pricecheck .mk-option-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 20px;
}

.mukuru-pricecheck .mk-option-title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mukuru-pricecheck .mk-option-sub {
	font-size: 12px;
	font-weight: 400;
	color: var(--mk-text-muted);
}

.mukuru-pricecheck .mk-helper {
	display: block;
	margin-top: 4px;
	font-size: 14px;
	line-height: 22px;
	color: var(--mk-text);
}

.mukuru-pricecheck .mk-helper:empty {
	display: none;
}

/* ---- exchange-rate line (between the two fields; second instance below for "you pay" corridors) ---- */
/* Result containers are hidden until pricechecker.js adds .is-visible (the .hidden class, for corridors that don't
   show a section at all, always wins). */
.mukuru-pricecheck .mk-rate {
	display: none;
	margin: 0 0 16px;
	font-weight: 700;
	font-size: 14px;
	line-height: 22px;
}

/* ids included on purpose: muk.css (Mobi page) hides #calculation_breakdown_container, #charge_message and
   #bonus_amount_message by id, which would outrank a class-only rule */
.mukuru-pricecheck .mk-rate.is-visible,
.mukuru-pricecheck .mk-payslip.is-visible,
.mukuru-pricecheck #calculation_breakdown_container.is-visible {
	display: block;
	animation: mk-fade-in 300ms ease-out;
}

.mukuru-pricecheck #charge_message,
.mukuru-pricecheck #bonus_amount_message {
	display: block;
}

.mukuru-pricecheck #charge_message:empty,
.mukuru-pricecheck #bonus_amount_message:empty,
.mukuru-pricecheck #charge_message.hidden,
.mukuru-pricecheck #bonus_amount_message.hidden {
	display: none;
}

@keyframes mk-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

.mukuru-pricecheck .mk-rate-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.mukuru-pricecheck .mk-rate .rate_message {
	margin: 0;
}

.mukuru-pricecheck .mk-rate .rate_message:empty {
	display: none;
}

.mukuru-pricecheck .mk-rate-icon {
	width: 14px;
	height: 16px;
	background: var(--mk-sync) center / contain no-repeat;
	flex: 0 0 auto;
}

/* ---- method rows: logo tile, two-line text, "Change" pill; native <select> overlaid ---- */
.mukuru-pricecheck .mk-method:first-of-type {
	margin-top: 8px;
}
.mukuru-pricecheck .mk-method {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 54px;
	padding: 0;
	margin: 0;
}

.mukuru-pricecheck .mk-method + .mk-method {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--mk-rule);
}

.mukuru-pricecheck .mk-method-icon {
	width: 38px;
	height: 26px;
	padding: 3px 4px;
	border-radius: 4px;
	/* contain + content-box: logos of any aspect ratio sit inside the tile without being stretched */
	background: var(--mk-tile-bg) center / contain no-repeat;
	background-origin: content-box;
	border: 1px solid #d9d9d9;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 700;
	color: #373A36;
	overflow: hidden;
}

.mukuru-pricecheck .mk-method-text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mukuru-pricecheck .mk-method .mk-method-title {
	margin: 0;
}

.mukuru-pricecheck .mk-method-value {
	font-size: 14px;
	line-height: 22px;
	font-weight: 500;
	color: var(--mk-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mukuru-pricecheck .mk-change {
	flex: 0 0 auto;
	box-sizing: border-box;
	height: 32px;
	padding: 0 20px;
	border: 2px solid var(--mk-change);
	border-radius: 36px;
	color: var(--mk-change);
	font-weight: 500;
	font-size: 14px;
	line-height: 28px;
}

/* ---- country USP: teal info alert ---- */
.mukuru-pricecheck .mk-alert:empty {
	display: none;
}

.mukuru-pricecheck .mk-alert,
.mukuru-pricecheck #usp_message {
	position: relative;
	margin: 24px 0 0;
	padding: 8px 8px 12px 38px;
	font-weight: 400;
	border: 1px solid var(--mk-alert-stroke);
	border-radius: 10px;
	background: var(--mk-alert-bg);
	color: var(--mk-alert-text);
	font-size: 12px;
	line-height: 18px;
	text-align: left;
}

.mukuru-pricecheck .mk-alert::before {
	content: "";
	position: absolute;
	left: 8px;
	top: 8px;
	width: 24px;
	height: 24px;
	background: var(--mk-info) center / contain no-repeat;
}

/* "Exciting News!" — the USP's leading exclamation sentence, split off by pricechecker.js */
.mukuru-pricecheck .mk-alert-title {
	display: block;
	font-weight: 700;
	font-size: 14px;
	line-height: 24px;
	color: var(--mk-teal);
	margin-bottom: 2px;
}

/* ---- payslip ---- */
.mukuru-pricecheck .mk-payslip {
	display: none;
	margin: 24px 0 0;
	padding: 20px;
	border-radius: 10px;
	background: var(--mk-payslip-bg);
}

/* muk.css (Mobi page) sizes this to 50% and floats the spans — neutralise it */
.mukuru-pricecheck #breakdown_flex_wrapper,
.mukuru-pricecheck #breakdown_payin,
.mukuru-pricecheck #breakdown_payout {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	font-size: inherit;
}

.mukuru-pricecheck .breakdown_line_item span {
	float: none;
}

.mukuru-pricecheck .breakdown_line_item {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	line-height: 22px;
	font-size: 12px;
	color: var(--mk-text);
}

.mukuru-pricecheck .breakdown_line_item + .breakdown_line_item,
.mukuru-pricecheck #breakdown_payout {
	margin-top: 14px;
}

.mukuru-pricecheck .breakdown_line_item span:first-child {
	flex: 1 1 auto;
}

.mukuru-pricecheck .breakdown_line_item span:last-child {
	white-space: nowrap;
}

.mukuru-pricecheck .breakdown_line_item-discount-field {
	color: var(--mk-discount);
	font-weight: 700;
}

/* the last line of each group is a total: bold, below the single rule (muk.css also draws a border-bottom here — off) */
.mukuru-pricecheck #breakdown_payin .breakdown_line_item:last-child {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--mk-rule);
	border-bottom: 0;
	text-align: inherit;
}

.mukuru-pricecheck #breakdown_payin .breakdown_line_item:last-child,
.mukuru-pricecheck #breakdown_payout .breakdown_line_item:last-child {
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	color: var(--mk-text);
}

.mukuru-pricecheck #breakdown_payin:has(.breakdown_line_item:only-child) .breakdown_line_item:last-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* ---- misc ---- */
.mukuru-pricecheck .mk-disclaimer {
	margin: 24px 0 16px;
	font-size: 12px;
	line-height: 18px;
	text-align: center;
	color: var(--mk-text-muted);
}

.mukuru-pricecheck .mk-error {
	color: var(--mk-error);
	margin: 0 0 12px;
}

.mukuru-pricecheck .mk-error:empty {
	display: none;
}

.mukuru-pricecheck .mk-button {
	display: block;
	width: 100%;
	height: 48px;
	padding: 0 16px;
	border: 0;
	border-radius: 36px;
	background: var(--mk-accent);
	color: var(--mk-accent-text) !important;
	font-weight: 500;
	font-size: 14px;
	line-height: 48px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.mukuru-pricecheck .mk-button:hover {
	opacity: 0.9;
}

.mukuru-pricecheck .mk-button-secondary {
	margin-top: 12px;
	line-height: 44px;
	background: transparent;
	border: 2px solid var(--mk-change);
	color: var(--mk-change) !important;
}

.mukuru-pricecheck .mukuru-pricecheck-loading,
.mukuru-pricecheck .mukuru-pricecheck-error {
	padding: 24px 0;
	text-align: center;
	color: var(--mk-text-muted);
}

/* Embed loading state (pricecheck-embed.js): the marketing site's ring loader (three staggered arcs, same timing as
   www.mukuru.com's .lds-ring) with the Mukuru mark in the middle, centred in the card area */
.mukuru-pricecheck .mukuru-pricecheck-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 240px;
}

.mukuru-pricecheck .mk-spinner {
	position: relative;
	display: block;
	width: 80px;
	height: 80px;
}

.mukuru-pricecheck .mk-spinner i {
	position: absolute;
	top: 8px;
	left: 8px;
	display: block;
	width: 64px;
	height: 64px;
	border: 8px solid transparent;
	border-top-color: var(--mk-accent);
	border-radius: 50%;
	animation: mk-spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.mukuru-pricecheck .mk-spinner i:nth-child(1) {
	animation-delay: -0.45s;
}

.mukuru-pricecheck .mk-spinner i:nth-child(2) {
	animation-delay: -0.3s;
}

.mukuru-pricecheck .mk-spinner i:nth-child(3) {
	animation-delay: -0.15s;
}

.mukuru-pricecheck .mk-spinner img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 28px;
	height: 28px;
	margin: -14px 0 0 -14px;
	object-fit: contain;
}

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

@media (prefers-reduced-motion: reduce) {
	.mukuru-pricecheck .mk-spinner i {
		animation-duration: 3s;
	}
}

/* ---- Madera-only optical corrections ----
   Madera's glyphs sit low in their line box, so text that is metrically centred looks low: nudge the button and
   "Change" labels up, and tighten the payslip lines (agency tuning on www.mukuru.com, 2026-09). pricechecker.js adds
   .mk-no-madera when no Madera face has LOADED, so a page without the font keeps the neutral metrics above. */
.mukuru-pricecheck:not(.mk-no-madera) .mk-button {
	font-size: 20px;
	line-height: 27px;
	padding: 5px 16px 13px;
}

/* 2px border: keep the outlined button at the same 48px */
.mukuru-pricecheck:not(.mk-no-madera) .mk-button-secondary {
	padding-bottom: 12px;
}

.mukuru-pricecheck:not(.mk-no-madera) .mk-change {
	line-height: 22px;
}

/* the amount digits: same low-glyph nudge, plus a hair of room after the field's left edge */
.mukuru-pricecheck:not(.mk-no-madera) .mk-amount {
	padding: 0 0 8px 3px;
}

.mukuru-pricecheck:not(.mk-no-madera) .breakdown_line_item + .breakdown_line_item,
.mukuru-pricecheck:not(.mk-no-madera) #breakdown_payout {
	margin-top: 0;
}

.mukuru-pricecheck .mukuru-pricecheck-error a {
	color: var(--mk-accent);
}

/* Mobi page only (this sheet is linked by the price-check view): muk.css puts overflow:hidden on #content as a float
   clearfix, which clips the dropdown lists below a short card. The new form has no floats, so let it overflow. */
#content.ui-content,
#content {
	overflow: visible !important;
}

/* jQuery Mobile gives .ui-page-active `overflow-x: hidden`, which makes its overflow-y compute to `auto`: a list that
   reaches below the page's content bottom is clipped / scrolls inside the page instead of extending the document
   (intermittent "cut off" list when the card sits near the bottom). Nothing on this page overflows horizontally. */
.ui-mobile .ui-page-active {
	overflow: visible !important;
}