/* --- Booking app: the Payment step's own content ------------------------------
   Namespace: every rule is scoped to `.mk-ba`, the full-screen booking app's
   root. The same wizard renders inline through the [booking_form] shortcode and
   inside Canvas form cards, and neither may change - so nothing here is written
   without that prefix, and nothing here is added to portal.css.

   REFERENCE: the client portal's invoice pay page - src/portal/invoice-view-page.php
   and .cp-iv-* in assets/css/portal-invoice-view.css. Borrowed: the two-column
   split of a flat order document beside a gradient pay panel, the panel's
   proportions (logo slot, tracked-out kicker, one very large white figure, the
   action, a lock line pinned to the bottom), and the invoice's muted-label /
   dark-value hairline rows. Not borrowed: its markup, its amount field and
   chips (booking has no payable range), and its gateway-branded indigo/teal -
   this panel is built from the app's own blue so it matches the Continue pill.

   SPECIFICITY: portal.css already styles most of these classes at `.cp-bf .x`
   (0,2,0). Every override here therefore goes through `.mk-ba .cp-bf .x`
   (0,3,0) rather than relying on load order.

   WHY EVERY `color` HERE IS !important: portal.css carries
       .cp-bf h2, .cp-bf h3, .cp-bf h4, .cp-bf label, .cp-bf p,
       .cp-bf span…, .cp-bf div, .cp-bf code, .cp-bf strong { color: inherit !important }
   so no amount of specificity wins - a normal declaration on any of those tags
   inside the wizard is simply discarded and the element inherits instead. That
   silently flattened this whole step (muted labels went black on the summary;
   the applied-code chip and the pay-plate heading came out white on white).
   Do not strip these !important flags while that rule stands.

   WHAT THE SCRIPT STILL OWNS (do not fight it in CSS):
     - row visibility, via inline style.display on #cp-bf-row-tax /
       -discount / -gc / -total / -remaining, #cp-bf-panel-note and the two
       applied boxes;
     - #cp-bf-original-amount's line-through + opacity when a coupon lands;
     - #cp-bf-row-gc, created at runtime with the class
       `cp-bf-payment-row cp-bf-coupon-row` and inserted before the total row;
     - #cp-bf-panel-amount, a mirror of #cp-bf-final-amount's text;
     - everything inside #cp-bf-paypal-container (PayPal SDK buttons, the Stripe
       CTA, the free-submit CTA, the not-configured notice). The two CTAs and the
       notice carry `.cp-bf-pay-cta` / `.cp-bf-pay-notice` and keep their inline
       fallback styles for the shortcode, so the overrides below are !important
       on purpose - that is the only way a stylesheet beats an inline style. */

/* --- Two full columns, full height -----------------------------------------
   The step fills the form column edge to edge. auto-fit rather than a media
   query: the rail beside this content is the shell's to size and it collapses
   at its own breakpoint, so the only honest question is how wide THIS row is.
   Below ~672px there is one column, which is also the phone answer.

   HEIGHT: the shell already makes the step a flex column that fills the stage
   (.mk-ba__content .cp-bf-step{display:flex;flex-direction:column;flex:1 1 auto}),
   with the nav sticky at its foot. Continuing that chain here - .cp-bf-pay and
   its grid both grow - is what makes the blue panel reach the bottom of the
   viewport and keep tracking it through a resize or a zoom, with no JS and no
   fixed height anywhere. `flex-grow:1, flex-shrink:0` on purpose: it may fill
   free space but must never be squeezed below its content when the step is
   taller than the stage and the stage scrolls.

   The margins here are the panel's outer breathing room: they keep it off the
   pill-row rule above and the Back/Continue rule below. */

.mk-ba .cp-bf .cp-bf-pay{
	--mk-ba-pay-rule: rgba(38, 38, 38, .13);
	--mk-ba-pay-rule-strong: rgba(38, 38, 38, .22);

	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
	width: 100%;
	max-width: none;
	min-height: 0;
	margin: 10px 0 24px;
}

.mk-ba .cp-bf .cp-bf-pay__grid{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	align-items: stretch;
	align-content: stretch;
	flex: 1 0 auto;
	gap: 32px;
	width: 100%;
	min-height: 0;
}

/* Left column: the order document, then the code boxes under it. */
.mk-ba .cp-bf .cp-bf-pay__col{
	display: flex;
	flex-direction: column;
	gap: 28px;
	min-width: 0;
}

.mk-ba .cp-bf .cp-bf-pay-card__eyebrow{
	margin: 0;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mk-ba-faint, #737373) !important;
}

.mk-ba .cp-bf .cp-bf-pay-card__title{
	margin: 6px 0 0;
	font-family: inherit;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--mk-ba-heading, #0a0a0a) !important;
	overflow-wrap: anywhere;
}

/* --- Left: the order, flat on the page (no box, no plate) ------------------
   Nothing here paints a background. The stage under it is the shell's to
   choose - white today, a light grey canvas shortly - so the rules are set in
   translucent ink (--mk-ba-pay-rule) rather than a fixed hairline colour, and
   they hold their weight on either ground. */

.mk-ba .cp-bf .cp-bf-pay-order{
	min-width: 0;
	padding-top: 4px;
	background: none;
}

.mk-ba .cp-bf .cp-bf-payment-summary{
	display: flex;
	flex-direction: column;
	margin: 20px 0 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

.mk-ba .cp-bf .cp-bf-payment-row{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding: 15px 0;
	border-top: 1px solid var(--mk-ba-pay-rule, rgba(38,38,38,.13));
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--mk-ba-muted, #525252) !important;
}

.mk-ba .cp-bf .cp-bf-payment-summary > .cp-bf-payment-row:first-child{
	border-top: 1px solid var(--mk-ba-pay-rule-strong, rgba(38,38,38,.22));
}

/* Values (the row's trailing <strong>/<span>) read as data, not as shouting. */
.mk-ba .cp-bf .cp-bf-payment-row > :last-child{
	font-size: 15px;
	font-weight: 500;
	color: var(--mk-ba-heading, #0a0a0a) !important;
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* Breakdown rows - add-ons, tax. They say what is INSIDE the line item above,
   so they are indented, lighter and carry no rule of their own; nothing here is
   a second charge to add up. */
.mk-ba .cp-bf .cp-bf-payment-row--sub{
	padding: 5px 0 5px 16px;
	border-top: 0;
	font-size: 13px;
	color: var(--mk-ba-faint, #737373) !important;
}

.mk-ba .cp-bf .cp-bf-payment-row--sub > :last-child{
	font-size: 13.5px;
	font-weight: 500;
	color: var(--mk-ba-muted, #525252) !important;
}

/* Credits - coupon and gift card - share one colour so a discount always looks
   like a discount. #cp-bf-gc-amount is created with an inline purple, hence the
   !important. */
.mk-ba .cp-bf #cp-bf-discount-amount,
.mk-ba .cp-bf #cp-bf-gc-amount{
	color: #15803d !important;
}

/* The document's own total. The gateway panel repeats it large; here it just
   closes the column of rows. */
.mk-ba .cp-bf .cp-bf-total-row{
	align-items: center;
	margin: 0;
	padding: 18px 0 17px;
	border-top: 1px solid var(--mk-ba-pay-rule-strong, rgba(38,38,38,.22));
	color: var(--mk-ba-heading, #0a0a0a) !important;
}

.mk-ba .cp-bf .cp-bf-total-row .cp-bf-total-label{
	font-size: 15px;
	font-weight: 500;
	color: var(--mk-ba-heading, #0a0a0a) !important;
}

.mk-ba .cp-bf #cp-bf-final-amount{
	font-size: 21px;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -.015em;
}

/* Not charged today: set apart, and deliberately quieter than the total. */
.mk-ba .cp-bf .cp-bf-payment-row--remaining{
	margin: 0;
	padding: 15px 0 0;
	border-top: 1px solid var(--mk-ba-pay-rule, rgba(38,38,38,.13));
	font-size: 13.5px;
}

.mk-ba .cp-bf .cp-bf-payment-row--remaining > :last-child{
	font-size: 14px;
	font-weight: 500;
	color: var(--mk-ba-muted, #525252) !important;
}

.mk-ba .cp-bf .cp-bf-remaining-hint{
	margin: 7px 0 0;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--mk-ba-faint, #737373) !important;
}

/* --- Left column, under the order: coupon + gift card ----------------------
   Two small bordered cards on the stage, side by side while there is room. */

.mk-ba .cp-bf .cp-bf-pay-codes-wrap{
	min-width: 0;
}

/* Sentence case here, not the tracked-out eyebrow the order summary uses: this
   is a question to the client, not a section stamp. */
.mk-ba .cp-bf .cp-bf-pay-codes-wrap > .cp-bf-pay-card__eyebrow{
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--mk-ba-muted, #525252) !important;
}

/* Two-up while each box is wide enough for a code field plus its Apply pill to
   stay comfortable; one column the moment it is not. */
.mk-ba .cp-bf .cp-bf-pay-codes{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px;
	margin: 12px 0 0;
}

.mk-ba .cp-bf .cp-bf-coupon-box,
.mk-ba .cp-bf .cp-bf-gc-box{
	min-width: 0;
	margin: 0;
	padding: 15px 16px 16px;
	background: var(--mk-ba-surface, #ffffff);
	border: 1px solid var(--mk-ba-line, #e5e5e5);
	border-radius: 12px;
}

/* ONE control, not two: a solid white field with Apply sitting inside its right
   end. The markup is untouched - the wrap still has exactly its three original
   children (label, input, button) so the shortcode's flex row still works - so
   the input-group is built by overlapping the input and the button in the SAME
   grid cell (row 2) and insetting the button to the right edge. The input's
   right padding is what keeps typed text clear of it. */
.mk-ba .cp-bf .cp-bf-coupon-input-wrap{
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto auto;
	align-items: center;
	gap: 7px 0;
}

.mk-ba .cp-bf .cp-bf-coupon-input-wrap > .cp-bf-label{
	grid-column: 1 / -1;
	grid-row: 1;
	display: block;
	margin: 0;
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--mk-ba-muted, #525252) !important;
}

.mk-ba .cp-bf .cp-bf-coupon-code-input{
	grid-column: 1 / -1;
	grid-row: 2;
	flex: none;
	width: 100%;
	min-width: 0;
	min-height: 44px;
	padding: 11px 94px 11px 16px;
	background: #ffffff;
	border: 1px solid var(--mk-ba-line, #e5e5e5);
	border-radius: 999px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .04em;
	color: #0a0a0a !important;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.mk-ba .cp-bf .cp-bf-coupon-code-input:focus{
	outline: none;
	border-color: var(--mk-ba-primary, #2563EB);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}

.mk-ba .cp-bf .cp-bf-coupon-code-input::placeholder{
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: #8a8a8a !important;
	opacity: 1;
}

/* Apply, inside the field. Blue on white - a smaller sibling of the pay control
   in the card, never competing with it. */
.mk-ba .cp-bf .cp-bf-btn--coupon,
.mk-ba .cp-bf .cp-bf-btn--gc{
	grid-column: 2;
	grid-row: 2;
	z-index: 1;
	justify-self: end;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 34px;
	min-width: 72px;
	margin: 0 5px 0 0;
	padding: 0 15px;
	background: var(--mk-ba-primary, #2563EB);
	border: 0;
	border-radius: 999px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .01em;
	text-transform: none;
	color: #ffffff !important;
	white-space: nowrap;
	cursor: pointer;
	transition: background .15s ease;
}

.mk-ba .cp-bf .cp-bf-btn--coupon:hover,
.mk-ba .cp-bf .cp-bf-btn--gc:hover{
	background: #0a0a0a;
	color: #ffffff !important;
}

.mk-ba .cp-bf .cp-bf-btn--coupon:disabled,
.mk-ba .cp-bf .cp-bf-btn--gc:disabled{
	background: #525252;
	cursor: default;
}

/* The script writes an inline color:#dc2626 here, which portal.css's
   `color: inherit !important` would otherwise throw away - so the error red is
   restated at the same weight. */
.mk-ba .cp-bf #cp-bf-coupon-msg,
.mk-ba .cp-bf #cp-bf-gc-msg{
	margin: 8px 0 0;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.45;
	color: #dc2626 !important;
}

/* Applied: a solid mint chip carrying the code, filling the box. The script
   shows these with style.display = '', which falls through to this. */
.mk-ba .cp-bf #cp-bf-coupon-applied,
.mk-ba .cp-bf #cp-bf-gc-applied{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 9px 8px;
	margin: 0;
	padding: 11px 13px 12px;
	background: #F0FDF4;
	border: 1px solid #BBF7D0;
	/* Not 999px: the applied text is a sentence and it wraps - a pill radius on a
	   two-line box reads as a mistake. */
	border-radius: 12px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	color: #166534 !important;
}

/* The applied text is a whole sentence ("TLTU-… applied (balance …)"), so it
   takes the chip's full width and the remove control drops to its own line
   under it. That is what stops it spilling out of a narrow column. */
.mk-ba .cp-bf #cp-bf-coupon-applied-text,
.mk-ba .cp-bf #cp-bf-gc-applied-text{
	flex: 1 1 100%;
	min-width: 0;
	overflow-wrap: anywhere;
}

.mk-ba .cp-bf .cp-bf-coupon-remove,
.mk-ba .cp-bf .cp-bf-gc-remove{
	flex: 0 0 auto;
	min-height: 28px;
	margin: 0;
	padding: 4px 12px;
	background: #ffffff;
	border: 1px solid #BBF7D0;
	border-radius: 999px;
	font-family: inherit;
	font-size: 11px;
	font-weight: 600;
	color: #166534 !important;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.mk-ba .cp-bf .cp-bf-coupon-remove:hover,
.mk-ba .cp-bf .cp-bf-gc-remove:hover{
	background: #166534;
	color: #ffffff !important;
	text-decoration: none;
}

/* --- Right: the pay card ---------------------------------------------------
   Blue at the top, fading to white at the floor, so the gateway's own controls
   - above all PayPal's cross-origin iframes, which cannot be restyled from here
   - land on plain white and look native instead of bolted on. The fade is
   painted by .cp-bf-paypanel__action rather than by a percentage stop on the
   card: the action box is exactly as tall as the controls it holds, so the
   white floor is always deep enough for them at any card height, on a phone or
   on a 1150px-tall desktop card. */

.mk-ba .cp-bf .cp-bf-paypanel{
	--mk-ba-pay-from: var(--mk-ba-primary, #2563EB);
	--mk-ba-pay-to: var(--mk-ba-primary-strong, #1E3A8A);
	--mk-ba-pay-pad: 28px;
	--mk-ba-pay-pad-b: 26px;

	display: flex;
	flex-direction: column;
	align-self: stretch;
	min-width: 0;
	margin: 0;
	padding: 30px var(--mk-ba-pay-pad) var(--mk-ba-pay-pad-b);
	background: linear-gradient(170deg, var(--mk-ba-pay-from), var(--mk-ba-pay-to));
	border-radius: 16px;
	box-shadow: 0 8px 22px rgba(15, 18, 24, .10);
	color: #ffffff !important;
	/* A stacking context around the whole card: PayPal's SDK plants
	   `.smart-menu{position:absolute;z-index:300}` inside, and 300 would paint
	   over the sticky nav. No overflow:hidden - the gradient already respects the
	   radius, and clipping would swallow the SDK's dropdown. */
	isolation: isolate;
	z-index: 0;
}

/* --- Top zone: one calm, centred statement -------------------------------- */

.mk-ba .cp-bf .cp-bf-paypanel__top{
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 0;
	padding: 12px 0 0;
	text-align: center;
}

/* Keep-out for the wash. .cp-bf-paypanel__action::before hangs a soft
   blue-to-white ramp over the bottom of this column, and this spacer is what
   lifts the centred statement clear of it so the figure always reads on solid
   blue. `flex: 0 1` and not padding on purpose: it claims the room when the
   card is tall and gives it straight back when the card is short, so reserving
   it can never be what forces the step to scroll. */
.mk-ba .cp-bf .cp-bf-paypanel__top::after{
	content: "";
	display: block;
	flex: 0 1 190px;
	min-height: 0;
}

.mk-ba .cp-bf .cp-bf-paypanel__head{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 11px;
	min-height: 40px;
	margin: 0 0 26px;
}

.mk-ba .cp-bf .cp-bf-paypanel__mark{
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: #ffffff;
	border-radius: 11px;
}

.mk-ba .cp-bf .cp-bf-paypanel__mark img{
	display: block;
	width: 28px;
	height: 28px;
}

/* Every piece of type on the panel is plain white; the hierarchy is size and
   weight, never opacity. No tinted or "glass" surface appears anywhere on this
   card - a fill here is either the gradient itself or solid white. */
.mk-ba .cp-bf .cp-bf-paypanel__gw{
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .01em;
	color: #ffffff !important;
}

.mk-ba .cp-bf .cp-bf-paypanel__kicker{
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #ffffff !important;
}

.mk-ba .cp-bf .cp-bf-paypanel__amount{
	margin: 0;
	font-size: clamp(38px, 4vw, 52px);
	font-weight: 600;
	letter-spacing: -.04em;
	line-height: 1.02;
	color: #ffffff !important;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	overflow-wrap: anywhere;
}

.mk-ba .cp-bf .cp-bf-paypanel__note{
	max-width: 32ch;
	margin: 14px auto 0;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.5;
	color: #ffffff !important;
}

/* --- Bottom zone: the action, on the white floor of the card ---------------
   Two parts, deliberately: the element itself is SOLID white, pulled out to the
   card's edges so it reaches the rounded bottom corners - that guarantees the
   gateway's controls are on plain white whatever height the card ends up. The
   ::before is the long wash above it, a many-stop ramp so there is no band edge
   anywhere in the blend. Keeping the two separate is what lets the white floor
   be exactly as deep as the controls while the fade stays generous. */

.mk-ba .cp-bf .cp-bf-paypanel__action{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
	margin: auto calc(-1 * var(--mk-ba-pay-pad)) calc(-1 * var(--mk-ba-pay-pad-b));
	padding: 0 var(--mk-ba-pay-pad) var(--mk-ba-pay-pad-b);
	background: #ffffff;
	border-radius: 0 0 16px 16px;
	color: #0a0a0a !important;
}

.mk-ba .cp-bf .cp-bf-paypanel__action::before{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 210px;
	pointer-events: none;
	background: linear-gradient(180deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, .05) 16%,
		rgba(255, 255, 255, .14) 30%,
		rgba(255, 255, 255, .30) 44%,
		rgba(255, 255, 255, .50) 57%,
		rgba(255, 255, 255, .70) 69%,
		rgba(255, 255, 255, .86) 80%,
		rgba(255, 255, 255, .96) 91%,
		#ffffff 100%);
}

/* One centred axis for the caption, the buttons, any error and the lock line. */
.mk-ba .cp-bf .cp-bf-paypanel__action > *{
	width: 100%;
	max-width: 560px;
	margin-inline: auto;
}

/* The PayPal SDK plants absolutely-positioned chrome of its own in here - its
   card-dropdown ships as `.smart-menu { position:absolute; z-index:300 }` - and
   300 beats the sticky nav's 3, so the buttons painted straight over the
   Back/Continue bar as the step scrolled under it. `isolation:isolate` makes
   this a stacking context, which caps everything the SDK puts inside it at this
   element's own level; the nav then covers it like any other content. Do NOT
   add overflow:hidden here as well - that would clip the SDK's dropdown. */
.mk-ba .cp-bf .cp-bf-paymount,
.mk-ba .cp-bf .cp-bf-paypanel .cp-bf-paypal-container{
	position: relative;
	z-index: 0;
	isolation: isolate;
}

/* Centring the pay block takes all three of these. The mount is capped and
   centred; the container inside it fills the mount; and `.paypal-buttons` -
   the SDK's own outer div, which IS in our DOM even though its iframe is not -
   sizes itself to whatever it likes and leaves the slack on the right, so it
   needs the auto margins too or the buttons sit left of the card's axis. */
.mk-ba .cp-bf .cp-bf-paymount{
	display: block;
	width: 100%;
	min-width: 0;
	max-width: 560px;
	margin-inline: auto;
}

.mk-ba .cp-bf .cp-bf-paypanel .cp-bf-paypal-container > .paypal-buttons{
	margin-inline: auto !important;
}

/* No plate, no box: the floor of the card is already white, so the SDK's
   buttons print straight onto it. .is-sdk now only decides whether the caption
   above them is shown - our own controls label themselves. */
.mk-ba .cp-bf .cp-bf-paymount__title{
	display: none;
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	color: #0a0a0a !important;
	overflow-wrap: anywhere;
}

.mk-ba .cp-bf .cp-bf-paymount.is-sdk .cp-bf-paymount__title{
	display: block;
}

.mk-ba .cp-bf .cp-bf-paypanel .cp-bf-paypal-container{
	display: block;
	width: 100%;
	min-height: 0;
	max-width: 100%;
	margin: 0;
	float: none;
}

/* The primary action, white on the panel's blue - the inverse of the shell's
   Continue pill, which is how the invoice panel does it too. */
.mk-ba .cp-bf .cp-bf-pay-cta{
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	width: 100% !important;
	min-height: 48px !important;
	margin: 0 !important;
	padding: 13px 22px !important;
	background: var(--mk-ba-primary, #2563EB) !important;
	border: 0 !important;
	border-radius: 999px !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	letter-spacing: .01em !important;
	color: #ffffff !important;
	cursor: pointer !important;
	transition: background .15s ease, opacity .15s ease !important;
}

/* Stripe's "Pay …" and the free-submit control get the identical treatment, and
   they now sit on the card's white floor, so they are the blue pill. */
.mk-ba .cp-bf .cp-bf-paypanel .cp-bf-pay-cta{
	background: var(--mk-ba-primary, #2563EB) !important;
	color: #ffffff !important;
	font-weight: 600 !important;
	box-shadow: none !important;
}

.mk-ba .cp-bf .cp-bf-paypanel .cp-bf-pay-cta:hover{
	background: var(--mk-ba-pay-to, #1E3A8A) !important;
}

.mk-ba .cp-bf .cp-bf-pay-cta:disabled{
	opacity: .6 !important;
	cursor: default !important;
}

/* Gateway not configured: a solid white notice with black text on the white
   floor, marked only by a hairline. Not an alarm, not a tinted pane. */
.mk-ba .cp-bf .cp-bf-pay-notice{
	padding: 13px 16px !important;
	background: #ffffff !important;
	border: 1px solid var(--mk-ba-line, #e5e5e5) !important;
	border-radius: 12px !important;
	font-size: 12.5px !important;
	font-weight: 500 !important;
	line-height: 1.55 !important;
	text-align: center !important;
	color: #0a0a0a !important;
}

.mk-ba .cp-bf .cp-bf-payment-error{
	margin: 14px 0 0;
	padding: 11px 15px;
	background: #ffffff;
	border: 1px solid #FCA5A5;
	border-radius: 12px;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
	color: #991b1b !important;
}

.mk-ba .cp-bf .cp-bf-paypanel__action .cp-bf-pay-secure{
	margin-top: 16px;
}

/* On the white floor, so black. */
.mk-ba .cp-bf .cp-bf-pay-secure{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin: 0;
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
	color: #0a0a0a !important;
}

.mk-ba .cp-bf .cp-bf-pay-secure svg{
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
}

/* --- Phone ---------------------------------------------------------------- */

@media (max-width: 760px){
	/* One column, and intrinsic height: a stacked step is always taller than the
	   stage, so growing the grid would only stretch its two rows apart. */
	.mk-ba .cp-bf .cp-bf-pay,
	.mk-ba .cp-bf .cp-bf-pay__grid{
		flex: 0 0 auto;
	}
}

@media (max-width: 640px){
	/* Extra floor so the last control can scroll fully clear of the sticky nav. */
	.mk-ba .cp-bf .cp-bf-pay{
		margin: 6px 0 28px;
	}

	.mk-ba .cp-bf .cp-bf-pay__grid{
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.mk-ba .cp-bf .cp-bf-pay-codes{
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	/* The field and its Apply are one control at every width - nothing to
	   re-stack here, only the sub-row indent to tighten. */
	.mk-ba .cp-bf .cp-bf-payment-row--sub{
		padding-left: 12px;
	}

	.mk-ba .cp-bf .cp-bf-payment-row{
		font-size: 13.5px;
	}

	.mk-ba .cp-bf #cp-bf-final-amount{
		font-size: 18px;
	}

	.mk-ba .cp-bf .cp-bf-paypanel{
		--mk-ba-pay-pad: 20px;
		--mk-ba-pay-pad-b: 22px;
		padding-top: 24px;
	}

	.mk-ba .cp-bf .cp-bf-paypanel__top{
		padding-top: 4px;
	}

	.mk-ba .cp-bf .cp-bf-paypanel__top::after{
		flex-basis: 120px;
	}

	.mk-ba .cp-bf .cp-bf-paypanel__action::before{
		height: 150px;
	}

	.mk-ba .cp-bf .cp-bf-paypanel__head{
		margin-bottom: 20px;
	}

	.mk-ba .cp-bf .cp-bf-paypanel__amount{
		font-size: 38px;
	}

}