/**
 * Bundle plan cards on the checkout.
 *
 * This lives in the plugin, not the theme, because the markup does: the cards
 * come from the [leiservice_checkout_html] shortcode, which renders on every
 * site including the ones still running Elementor + hello-elementor. A
 * stylesheet in leiservice-theme is never enqueued there, so the cards arrived
 * as bare bullet lists.
 *
 * The theme's design tokens are used when they exist and fall back to literals
 * otherwise, so the cards look the same either way. The accent is set per
 * country from PHP (see leiservice_checkout_plans_inline_css).
 */

/* Scoped to :root, not to the cards: the pay button and the bank-transfer link
   are outside .leis-plans-wrapper and need the same accent. PHP overrides this
   per country with an inline :root rule. */
:root {
	--leis-plan-accent: #DE485D;
}

.leis-plans-wrapper {
	--leis-plan-text: var(--lei-text, #283653);
	--leis-plan-grey: var(--lei-grey, #6b7684);
	--leis-plan-line: #dfe3ea;
	--leis-plan-font: var(--lei-font, inherit);
	font-family: var(--leis-plan-font);
	color: var(--leis-plan-text);
}
/* Padding rather than a margin on .leis-plans: a top margin on the grid would
   collapse straight through the wrapper and the ribbon would be clipped by
   whatever sits above it. */
.leis-plans-wrapper {
	padding-top: 26px;
}

.leis-plans {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	align-items: stretch;
	margin: 0;
}

/* The radios are the real state — keep them reachable by keyboard rather
   than display:none'd, which is what the plugin stylesheet does to every
   radio inside .leiservice-checkout-wrapper. */
.leiservice-checkout-wrapper .leis-plans input[type="radio"] {
	display: block;
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	opacity: 0;
}

.leis-plans .leis-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #d8dee6;
	border-radius: 12px;
	padding: 18px 16px 20px;
	color: var(--leis-plan-text);
	font-family: var(--leis-plan-font);
	cursor: pointer;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.leis-plans .leis-plan:hover {
	border-color: var(--leis-plan-accent);
}

.leis-plans .leis-plan.is-selected {
	border-color: var(--leis-plan-accent);
	box-shadow: 0 0 0 1px var(--leis-plan-accent), 0 6px 18px rgba(16, 22, 49, 0.12);
}

/* A tier priced for some periods but not others simply is not on sale for
   the period on screen. */
.leis-plans .leis-plan.is-unavailable {
	display: none;
}

/* A bar across the top of the card rather than a floating pill - it reads as
   part of the card and does not need clearance above the grid. */
.leis-plans .leis-plan__ribbon {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	text-align: center;
	white-space: nowrap;
	background: var(--leis-plan-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	line-height: 1;
	padding: 8px 12px;
	border-radius: 999px;
}

.leis-plans .leis-plan__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	margin: 0 0 12px;
	cursor: pointer;
}

.leis-plans .leis-plan__name {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.2;
}

/* The round check in the top-right corner: the tier selector. */
.leis-plans .leis-plan__check {
	position: relative;
	flex: none;
	width: 22px;
	height: 22px;
	border: 2px solid #c4ccd8;
	border-radius: 50%;
	background: #fff;
	transition: background-color 0.2s, border-color 0.2s;
}

.leis-plans .leis-plan.is-selected .leis-plan__check {
	border-color: var(--leis-plan-accent);
	background: var(--leis-plan-accent);
}

.leis-plans .leis-plan.is-selected .leis-plan__check:after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.leis-plans .leis-plan__radio:focus-visible + .leis-plan__head .leis-plan__check {
	outline: 2px solid var(--leis-plan-accent);
	outline-offset: 2px;
}

.leis-plans .leis-plan__features {
	flex: 1 1 auto;
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	font-size: 14px;
	line-height: 1.45;
}

/* A neutral dot, not a tick: Basic's "No certificate" is a fact about the
   tier, not something it includes. */
.leis-plans .leis-plan__features li {
	position: relative;
	margin: 0 0 6px;
	padding-left: 18px;
}

.leis-plans .leis-plan__features li:before {
	content: "";
	position: absolute;
	left: 3px;
	top: 8px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--leis-plan-accent);
}

/* The shared period control. Clicking one of these in any card sets the
   period in all three. */
.leis-plans .leis-plan__period {
	display: flex;
	gap: 3px;
	margin: 0 0 14px;
	padding: 3px;
	background: #eef1f5;
	border-radius: 8px;
}

.leis-plans .leis-plan__period-option {
	flex: 1 1 0;
	min-width: 0;
}

.leis-plans .leis-plan__period-option label {
	display: block;
	width: 100%;
	margin: 0;
	padding: 7px 2px;
	border-radius: 6px;
	text-align: center;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	color: var(--leis-plan-text);
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}

.leis-plans .leis-plan__period-option:hover label {
	background: rgba(255, 255, 255, 0.75);
}

.leis-plans .leis-plan__period-option.is-active label {
	background: var(--leis-plan-accent);
	color: #fff;
}

.leis-plans .leis-plan__price {
	margin-top: auto;
}

.leis-plans .leis-plan__total {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.1;
}

.leis-plans .leis-plan__breakdown {
	margin: 8px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--leis-plan-grey);
}

.leis-plans .leis-plan__breakdown-row {
	display: flex;
	justify-content: space-between;
	gap: 8px;
}

.leis-plans .leis-plan__breakdown dt,
.leis-plans .leis-plan__breakdown dd {
	margin: 0;
	font-weight: 400;
}

/* The UK two-column layout puts the cards in a 66% column — about 160px per
   card at tablet width, which is not enough for three. Stack them, selected
   tier first so it is the one on screen. */
@media (max-width: 1024px) {
	.p-checkout:not(.p-checkout--single) .leis-plans {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.p-checkout:not(.p-checkout--single) .leis-plans .leis-plan.is-selected {
		order: -1;
	}
}

/* The single-column sites keep three across down to the mobile breakpoint. */
@media (max-width: 767px) {
	.leis-plans {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.leis-plans .leis-plan.is-selected {
		order: -1;
	}
}

/* The plan line in the order summary, under the registration line. The panel
   is plugin markup, so it hides itself with an inline style rather than
   relying on this file; all that is needed here is the same two-column shape
   the registration line has. */
.selected-plan-line {
	display: flex;
	justify-content: space-between;
}


/* --- brought closer to the reference design --- */

/* Room for the "Most popular" bar. */
.leis-plans .leis-plan--popular {
	padding-top: 44px;
}

/* Ticks for things a tier includes; Basic's "No certificate" is a fact about
   the tier rather than an inclusion, so it keeps a neutral dash. */
.leis-plans .leis-plan__features li:before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	width: 11px;
	height: 6px;
	border-left: 2px solid var(--leis-plan-accent);
	border-bottom: 2px solid var(--leis-plan-accent);
	border-radius: 0;
	background: none;
	transform: rotate(-45deg);
}

.leis-plans .leis-plan__features li.is-absent:before {
	width: 9px;
	height: 0;
	border-left: 0;
	border-bottom: 2px solid #b9c1cb;
	transform: none;
	top: 9px;
}

.leis-plans .leis-plan__features li {
	padding-left: 20px;
}

/* Small uppercase label above the period control, as in the reference. */
.leis-plans .leis-plan__period-label {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--leis-plan-grey);
	margin: 0 0 6px;
}

/* --- aligned to the reference design --- */

/*
 * The popular tier is the visual anchor: a tinted face and a dark header bar,
 * rather than the accent-coloured pill it had. The tint is a fixed part of the
 * design, not derived from the country accent, so all four sites read the same.
 */
.leis-plans .leis-plan--popular {
	background: linear-gradient(180deg, #eaf4fb 0%, #d3e9f7 100%);
	border-color: #c4dff1;
}

.leis-plans .leis-plan--popular .leis-plan__ribbon {
	background: #12293f;
	color: #fff;
}

/* The period control needs to stay legible on the tinted face. */
.leis-plans .leis-plan--popular .leis-plan__period {
	background: rgba(255, 255, 255, .62);
}

/*
 * Price row: the total on the left, the breakdown beside it, separated by a
 * rule - the reference reads as one line of pricing, not a heading with a list
 * stacked underneath.
 */
.leis-plans .leis-plan__price {
	display: flex;
	align-items: center;
	gap: 12px;
}

.leis-plans .leis-plan__total {
	flex: 0 0 auto;
	margin: 0;
	padding-right: 12px;
	border-right: 1px solid rgba(18, 41, 63, .18);
	font-size: 26px;
	line-height: 1.1;
}

.leis-plans .leis-plan__breakdown {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: 11px;
	line-height: 1.45;
}

.leis-plans .leis-plan__breakdown-row {
	display: flex;
	justify-content: space-between;
	gap: 8px;
}

/* --- savings line --- */

.leis-plans .leis-plan__saving {
	display: block;
	margin: 2px 0 12px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--leis-plan-accent);
}

.leis-plans .leis-plan__saving:empty,
.leis-plans .leis-plan__saving.is-empty {
	display: none;
}

/* --- "?" tooltip --- */

/* Its own row above the tier name, as in the reference - absolutely positioned
   it landed on top of the title. */
.leis-plans .leis-plan__info {
	position: relative;
	display: block;
	order: -1;
	margin: 0 0 6px;
	line-height: 0;
}

.leis-plans .leis-plan__info-toggle {
	width: 18px;
	height: 18px;
	padding: 0;
	border: 1px solid #b9c1cb;
	border-radius: 50%;
	background: transparent;
	color: #8a94a2;
	font-size: 11px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
	cursor: pointer;
	transition: border-color .15s, color .15s;
}

.leis-plans .leis-plan__info-toggle:hover,
.leis-plans .leis-plan__info-toggle:focus-visible {
	border-color: var(--leis-plan-accent);
	color: var(--leis-plan-accent);
	outline: none;
}

.leis-plans .leis-plan__info-text {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 4;
	width: 240px;
	padding: 10px 12px;
	border-radius: 6px;
	background: #12293f;
	color: #fff;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: 0;
	text-transform: none;
	text-align: left;
	opacity: 0;
	visibility: hidden;
	transition: opacity .15s;
	pointer-events: none;
}

.leis-plans .leis-plan__info:hover .leis-plan__info-text,
.leis-plans .leis-plan__info-toggle:focus-visible + .leis-plan__info-text {
	opacity: 1;
	visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
	.leis-plans .leis-plan__info-text,
	.leis-plans .leis-plan__info-toggle {
		transition: none;
	}
}

/* --- the pay button, when the plans are on --- */

#payment-form.leis-plans-active #checkout-button {
	width: 100%;
	background: var(--leis-plan-accent, #DE485D);
	border-color: var(--leis-plan-accent, #DE485D);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

#payment-form.leis-plans-active #checkout-button:hover {
	filter: brightness(.93);
}

/* =========================================================================
   1:1 with the reference designs (NEW checkout v3 UK / v4 SE).
   Square corners throughout, a taller middle card that breaks the grid at
   both ends, and the price as one baseline row.
   ========================================================================= */

.leis-plans {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	align-items: start;
	max-width: 1040px;
	margin: 0 auto;
}

.leis-plans .leis-plan {
	position: relative;
	border: 1px solid #d7dce2;
	border-radius: 0;
	background: #fff;
	box-shadow: none;
	padding: 26px 30px 24px;
	min-height: 420px;
}

/* The outer cards butt up against the middle one rather than floating apart. */
.leis-plans .leis-plan--basic {
	margin-right: -1px;
}

.leis-plans .leis-plan--complete {
	margin-left: -1px;
}

/*
 * The popular tier is raised: it starts higher (its header bar sits above the
 * others' top edge) and runs deeper, which is what makes it read as the
 * recommendation without any extra ornament.
 */
.leis-plans .leis-plan--popular {
	z-index: 2;
	margin: -30px 0 -46px;
	padding: 26px 30px 40px;
	border-color: transparent;
	background: linear-gradient(180deg, #ffffff 0%, #eaf5fb 42%, #7cc4e6 100%);
	box-shadow: 0 2px 18px -8px rgba(16, 41, 63, .35);
}

.leis-plans .leis-plan--popular .leis-plan__ribbon {
	position: static;
	display: block;
	margin: -26px -30px 20px;
	padding: 11px 12px;
	background: #0e2a3d;
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	border-radius: 0;
}

/* --- head row: "?" left, radio right, name beneath --- */

.leis-plans .leis-plan__info {
	position: absolute;
	top: 24px;
	left: 30px;
	order: 0;
	margin: 0;
}

.leis-plans .leis-plan--popular .leis-plan__info {
	top: 66px;
}

.leis-plans .leis-plan__info-toggle {
	width: 22px;
	height: 22px;
	border-color: #0e2a3d;
	color: #0e2a3d;
	font-size: 12px;
	line-height: 20px;
}

.leis-plans .leis-plan__head {
	display: block;
	margin: 30px 0 0;
	padding: 0;
}

.leis-plans .leis-plan__name {
	font-size: 25px;
	font-weight: 700;
	color: #16314a;
}

.leis-plans .leis-plan__check {
	position: absolute;
	top: 24px;
	right: 30px;
	width: 22px;
	height: 22px;
	border: 1px solid #9aa5b1;
	border-radius: 50%;
	background: transparent;
}

.leis-plans .leis-plan--popular .leis-plan__check {
	top: 66px;
}

.leis-plans .leis-plan.is-selected .leis-plan__check {
	border-color: var(--leis-plan-accent);
	background: var(--leis-plan-accent);
}

/* --- savings, features --- */

.leis-plans .leis-plan__saving {
	margin: 4px 0 0;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .02em;
}

.leis-plans .leis-plan__features {
	margin: 26px 0 0;
	font-size: 14px;
}

.leis-plans .leis-plan__features li {
	margin: 0 0 9px;
	padding-left: 26px;
	color: #2c3e50;
}

.leis-plans .leis-plan__features li:before {
	left: 2px;
	top: 5px;
	width: 10px;
	height: 5px;
	border-width: 0 0 2px 2px;
}

/* --- period --- */

.leis-plans .leis-plan__period-label {
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: 700;
	color: #16314a;
	letter-spacing: .04em;
}

.leis-plans .leis-plan__period {
	gap: 6px;
	padding: 0;
	background: none;
	margin: 0 0 22px;
}

.leis-plans .leis-plan__period-option label {
	border: 1px solid #c8d0d9;
	border-radius: 3px;
	background: #fff;
	padding: 9px 6px;
	font-size: 13.5px;
	font-weight: 500;
	color: #16314a;
}

.leis-plans .leis-plan__period-option.is-active label {
	border-color: var(--leis-plan-accent);
	background: var(--leis-plan-accent);
	color: #fff;
	font-weight: 600;
}

/* --- price: one baseline row, big total then a slash then the breakdown --- */

.leis-plans .leis-plan__price {
	align-items: baseline;
	gap: 10px;
}

.leis-plans .leis-plan__total {
	padding: 0;
	border: 0;
	font-size: 29px;
	font-weight: 700;
	color: #16314a;
}

.leis-plans .leis-plan__total:after {
	content: "/";
	margin-left: 10px;
	font-weight: 400;
	color: #16314a;
}

.leis-plans .leis-plan__breakdown {
	font-size: 12px;
	color: #46586b;
}

.leis-plans .leis-plan__breakdown-row {
	display: block;
}

.leis-plans .leis-plan__breakdown-row dt,
.leis-plans .leis-plan__breakdown-row dd {
	display: inline;
	margin: 0;
}

/* --- square corners on everything else the design shows square --- */

#payment-form.leis-plans-active #checkout-button {
	max-width: 400px;
	margin: 0 auto;
	display: block;
	border-radius: 3px;
	padding: 14px 20px;
	font-size: 15px;
}

/* The reference shows the bank transfer as a plain underlined link, not a
   second button competing with the primary call to action. */
.leis-bank-transfer-show-details--link {
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
	color: #16314a !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	text-decoration: underline !important;
	width: auto !important;
	cursor: pointer;
}

@media (max-width: 860px) {
	.leis-plans {
		grid-template-columns: 1fr;
		max-width: 460px;
	}

	.leis-plans .leis-plan,
	.leis-plans .leis-plan--popular {
		margin: 0 0 -1px;
		min-height: 0;
	}

	/*
	 * Thumb-sized controls. The period options were 33px tall, which is fine
	 * for a cursor and mean for a thumb; 44px is the size both Apple and Google
	 * ask for. The "?" grows a little too, but only a little - it sits close to
	 * the card head, and a hit area that spreads too far starts catching taps
	 * meant for the card itself.
	 */
	.leis-plans .leis-plan__period label {
		min-height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.leis-plans .leis-plan__info-toggle {
		width: 28px;
		height: 28px;
		line-height: 26px;
	}
}

/* --- alignment pass against the reference --- */

/*
 * All three cards start on the same line and their period blocks and prices
 * line up across the row; the popular card gets its extra height from the bar
 * floating above it and from deeper padding below, not by shifting its content.
 */
.leis-plans .leis-plan {
	display: flex;
	flex-direction: column;
	margin-top: 0;
}

.leis-plans .leis-plan--popular {
	margin: 0 0 -46px;
	padding-bottom: 46px;
	border-color: #cfe4f0;
}

.leis-plans .leis-plan--popular .leis-plan__ribbon {
	position: absolute;
	top: -42px;
	left: -1px;
	right: -1px;
	margin: 0;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* The popular card keeps its own face when selected - the accent outline the
   other two use would fight the gradient. */
.leis-plans .leis-plan--popular.is-selected {
	border-color: #cfe4f0;
	box-shadow: 0 2px 18px -8px rgba(16, 41, 63, .35);
}

.leis-plans .leis-plan--popular .leis-plan__info,
.leis-plans .leis-plan--popular .leis-plan__check {
	top: 24px;
}

/* Push the period block to the bottom so the three rows align. */
.leis-plans .leis-plan__features {
	flex: 1 1 auto;
	margin-bottom: 26px;
}

/* --- page heading and lead, centred as in the design --- */

.p-checkout--single .p-checkout__title {
	max-width: 20ch;
	margin: 0 auto 14px;
	color: #16314a;
	font-weight: 700;
	text-align: center;
	line-height: 1.18;
}

.p-checkout__lead {
	margin: 0 0 46px;
	text-align: center;
	color: #2c3e50;
	font-size: 15px;
}

.p-checkout__email {
	font-weight: 700;
	text-decoration: underline;
}

/* The auto-renew tick takes the site accent, like every other control here. */
.leiservice-checkout-wrapper .autorenew-lei-wrapper input[type="checkbox"] {
	accent-color: var(--leis-plan-accent);
}

/* --- final alignment --- */

/*
 * A fixed features height instead of a flexible one: with flex the taller
 * popular card stretched its own list and pulled its period block and price out
 * of line with the other two. Reserving three lines everywhere keeps the three
 * rows on the same baseline, which is what the design shows even though Basic
 * has a single bullet.
 */
.leis-plans .leis-plan__features {
	flex: 0 0 auto;
	/* Four lines: Complete is the longest list, and reserving its height in every
	   card is what keeps the period blocks and the totals on one baseline across
	   the row. Raise this if a tier ever gains another bullet. */
	min-height: 124px;
}

/* Two lines, as drawn - "Select your LEI registration / period and proceed
   with payment". */
.p-checkout--single .p-checkout__title {
	max-width: 26ch;
	font-size: clamp(1.9rem, 3.4vw, 2.45rem);
}

.p-checkout__lead {
	margin-bottom: 72px;
}

/*
 * No min-height on the cards: it left the shorter outer cards with slack that
 * pushed their price rows a few pixels below the popular card's. With the
 * features block a fixed height, the three cards are already identical in
 * structure, so letting content set the height lines every row up exactly.
 */
.leis-plans .leis-plan {
	min-height: 0;
}

/* The popular card hangs 46px below the row, so the auto-renew line needs to
   clear it rather than tuck underneath. */
.leis-plans-wrapper {
	padding-bottom: 46px;
}

.leiservice-checkout-wrapper .autorenew-lei-wrapper {
	margin-top: 34px;
	text-align: center;
}

/* =========================================================================
   Alignment pass 2 — measured against the reference, not eyeballed.
   ========================================================================= */

/*
 * The tick is two borders rotated 45deg, so its visual centre sits below and
 * left of the box centre. It had been nudged with hand-tuned left/top offsets,
 * which broke as soon as the circle's border width changed. Centre it from the
 * middle instead, with a small upward bias for the rotation.
 */
.leis-plans .leis-plan.is-selected .leis-plan__check:after {
	left: 50%;
	top: 47%;
	width: 5px;
	height: 9px;
	margin: 0;
	transform: translate(-50%, -50%) rotate(45deg);
}

/* Price: the breakdown is centred against the big number, as drawn - baseline
   alignment pinned its first line to the number's baseline and pushed the pair
   upward. */
.leis-plans .leis-plan__price {
	align-items: center;
}

/* "or" and the bank transfer link are centred under the button. */
#leis-bank-transfer {
	text-align: center;
}

.leis-bank-transfer-show-details--link {
	display: inline-block;
	margin: 0 auto;
}

/* --- vertical rhythm --- */

.p-checkout__lead {
	margin-bottom: 131px;
}

.leis-plans-wrapper {
	padding-bottom: 78px;
}

.leiservice-checkout-wrapper .autorenew-lei-wrapper {
	margin-top: 0;
	margin-bottom: 0;
}

.p-checkout__pay {
	margin-top: 28px;
}

.leis-bank-transfer-or {
	margin: 24px 0 0;
}

.leis-bank-transfer-details,
.leis-bank-transfer-show-details {
	margin-top: 16px;
}

.p-checkout__banner {
	margin-top: 43px;
}

/* --- alignment pass 3 --- */

/*
 * .leiservice-checkout-wrapper and .leis-plans-wrapper are the same element and
 * the auto-renew line lives INSIDE it, so the wrapper's bottom padding falls
 * below the checkbox rather than between the cards and it. The space above the
 * checkbox therefore belongs on the checkbox, and it has to clear the 46px the
 * popular card hangs below the row.
 */
.leis-plans-wrapper {
	padding-bottom: 0;
}

.leis-plans-wrapper > .autorenew-lei-wrapper {
	margin-top: 90px;
}

/* Specific enough to beat the theme's paragraph spacing, which was winning. */
.p-checkout--single .p-checkout__lead {
	margin-bottom: 79px;
}

#leis-bank-transfer .leis-bank-transfer-or {
	margin: 24px 0 0;
}

.p-checkout--single .p-checkout__banner {
	margin-top: 19px;
}

/* --- alignment pass 4 --- */

/* leis-bank-transfer.css is enqueued at priority 110, after this file, so an
   equally specific rule there wins on source order. The class on the container
   raises specificity honestly rather than by repeating a selector. */
.leis-plans-active#leis-bank-transfer .leis-bank-transfer-or {
	margin: 24px 0 0;
}

.leis-plans-wrapper > .autorenew-lei-wrapper {
	margin-top: 66px;
}

.leis-plans-active#leis-bank-transfer .leis-bank-transfer-show-details {
	margin-top: 27px;
}

/* =========================================================================
   Itemised price block: the two lines, a rule, then the total.
   Replaces the "big number / slash / breakdown" row - what the customer pays
   was the hardest thing on the page to find, and it is the one number that
   matters.
   ========================================================================= */

.leis-plans .leis-plan__price {
	display: block;
}

.leis-plans .leis-plan__breakdown {
	display: block;
	margin: 0;
	font-size: 12.5px;
	color: #46586b;
}

.leis-plans .leis-plan__breakdown-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 4px;
}

.leis-plans .leis-plan__breakdown-row dt,
.leis-plans .leis-plan__breakdown-row dd {
	display: block;
	margin: 0;
}

.leis-plans .leis-plan__breakdown-row dd {
	flex: none;
	font-variant-numeric: tabular-nums;
}

.leis-plans .leis-plan__totalrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid rgba(22, 49, 74, .16);
}

.leis-plans .leis-plan__total-label {
	font-size: 12.5px;
	color: #46586b;
}

.leis-plans .leis-plan__total {
	flex: none;
	padding: 0;
	border: 0;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.05;
	color: #16314a;
	font-variant-numeric: tabular-nums;
}

/* The slash belonged to the old single-line layout. */
.leis-plans .leis-plan__total:after {
	content: none;
}

/*
 * Every tier shows its total in the same ink. The selected one used to be
 * picked out in the accent, which read as a price difference rather than as a
 * selection - three totals side by side are there to be compared, and one of
 * them in a different colour puts a thumb on the scale. The radio, the border
 * and the button's amount already say which tier is being bought.
 */

/* The amount on the button, after the separator. */
#payment-form.leis-plans-active .leis-pay-total {
	white-space: nowrap;
}

/* The order's company, under the lead line. */
.p-checkout__company {
	margin: 14px 0 0;
	text-align: center;
	font-size: 14px;
	color: #46586b;
}

.p-checkout__company .comp-name {
	font-weight: 700;
	color: #16314a;
}

.p-checkout__company .comp-reg-nr {
	margin-left: 6px;
}

.p-checkout__company .adr-wrap {
	margin-top: 2px;
	font-size: 13px;
}

/*
 * The company block sits between the lead line and the cards, so the space that
 * separates the intro from the cards belongs below it, not below the lead - the
 * lead's old bottom margin was opening a hole between the two lines of intro.
 */
.p-checkout--single .p-checkout__lead {
	margin-bottom: 14px;
}

/* Specific enough to beat the theme's block spacing, which was winning at
   (0,1,0) and collapsing this to 20px. */
.p-checkout--single .p-checkout__company {
	/* The reference put 64px between the intro and the cards, but that was with
	   no company block in between. With one, the intro reads as a group and the
	   whole group wants the breathing room - not each line separately. */
	margin: 0 0 36px;
}

/* ==========================================================================
   The selection follows the click
   ========================================================================== */

/*
 * The tinted, raised face used to belong to the popular tier permanently, which
 * meant the card that looked chosen and the card that *was* chosen were only
 * the same card by coincidence - pick Basic and the page still pointed at
 * Standard. It now follows the selection, so the thing you clicked is the thing
 * that looks picked.
 *
 * "Most popular" stays on Standard: that is a claim about the product, not
 * about what this visitor selected, and it would be a lie if it moved.
 */

/* Back to one shape for all three. */
.leis-plans .leis-plan--popular {
	margin-bottom: 0;
	padding-bottom: 24px;
	background: none;
	border-color: #d7dce2;
	box-shadow: none;
}

/*
 * z-index (with position: relative, already set) gives every card its own
 * stacking context, which is what lets the tint below sit at z-index -1: above
 * the card's own white background, beneath its content. Without a stacking
 * context here that -1 escapes and paints behind the card entirely.
 */
.leis-plans .leis-plan {
	z-index: 0;
	transition:
		transform .28s cubic-bezier(.2, .7, .3, 1),
		box-shadow .28s ease,
		border-color .28s ease;
}

/*
 * The tint rides on a pseudo-element rather than the card's own background
 * because CSS cannot interpolate between two gradients - background-image
 * snaps. Opacity does animate, so the wash fades in and out instead.
 */
.leis-plans .leis-plan::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	background: linear-gradient(180deg, #ffffff 0%, #eaf5fb 42%, #7cc4e6 100%);
	opacity: 0;
	pointer-events: none;
	transition: opacity .28s ease;
}

.leis-plans .leis-plan.is-selected::after {
	opacity: 1;
}

.leis-plans .leis-plan.is-selected {
	/* Scale rather than a bigger box: the row does not reflow, nothing below it
	   moves, and the growth is something the browser can animate on the
	   compositor. Growing the padding instead would relayout the grid on every
	   click. */
	transform: scale(1.04);
	z-index: 3;
	border-color: #cfe4f0;
	box-shadow: 0 6px 26px -10px rgba(16, 41, 63, .45);
}

/* The period control needs to stay legible once the tint is under it. */
.leis-plans .leis-plan .leis-plan__period {
	transition: background-color .28s ease;
}

.leis-plans .leis-plan.is-selected .leis-plan__period {
	background: rgba(255, 255, 255, .62);
}

.leis-plans .leis-plan--popular:not(.is-selected) .leis-plan__period {
	background: transparent;
}

/* The hang is gone, so the row no longer needs to reserve 46px for it - just
   enough that the selected card's shadow is not clipped. */
.leis-plans-wrapper {
	padding-bottom: 14px;
}

@media (prefers-reduced-motion: reduce) {
	.leis-plans .leis-plan,
	.leis-plans .leis-plan::after,
	.leis-plans .leis-plan .leis-plan__period {
		transition: none;
	}

	/* The selected card still reads as selected - tint, border and shadow do
	   that on their own - it simply does not grow. */
	.leis-plans .leis-plan.is-selected {
		transform: none;
	}
}

/* ==========================================================================
   The pay button notices the price changed
   ========================================================================== */

/*
 * Two animations, deliberately different in weight. The amount itself flashes
 * and lifts, because that is the value that changed. The button gives one soft
 * pulse of its own shadow - enough to say "this is the next thing", not enough
 * to nag. Both are one shot: JS removes the class again, so nothing on this
 * page pulses forever in the corner of someone's eye.
 */

@keyframes leis-pay-total-in {
	0%   { transform: translateY(-4px) scale(.94); opacity: .35; }
	55%  { transform: translateY(0) scale(1.1); opacity: 1; }
	100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes leis-pay-button-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(222, 72, 93, .45); }
	70%  { box-shadow: 0 0 0 12px rgba(222, 72, 93, 0); }
	100% { box-shadow: 0 0 0 0 rgba(222, 72, 93, 0); }
}

#payment-form .leis-pay-total {
	/* inline-block so the transform in the keyframes has something to act on -
	   a plain inline box ignores it. That also swallows any leading space in the
	   text, so the gap before the amount is this margin rather than a space. */
	display: inline-block;
	margin-left: .4em;
}

#payment-form .leis-pay-total.leis-pulse {
	animation: leis-pay-total-in .45s cubic-bezier(.2, .8, .3, 1);
}

#checkout-button.leis-pulse {
	animation: leis-pay-button-pulse .75s ease-out;
}

@media (prefers-reduced-motion: reduce) {
	#payment-form .leis-pay-total.leis-pulse,
	#checkout-button.leis-pulse {
		animation: none;
	}
}

/* ==========================================================================
   Stacked (narrow) — the popular card rejoins the column
   ========================================================================== */

/*
 * On desktop the popular card is lifted out of the row: it hangs 46px below its
 * neighbours and its "Most popular" bar floats 42px above them. Stacked, that
 * same offset lands the card on top of the one beneath it - and because the
 * cards are the click targets for choosing a tier, the hang was swallowing the
 * top of the next card: tapping "Basic" on a phone selected Standard and the
 * customer was charged for the wrong plan.
 *
 * The reset for this exists at the (max-width: 860px) block far above, but the
 * alignment pass that follows it re-applies the hang at the same specificity
 * and simply wins on source order. Rather than raise specificity or reach for
 * !important, the reset is repeated here, at the end of the file, where it is
 * last. Keep this block last.
 */
@media (max-width: 860px) {
	.leis-plans .leis-plan--popular {
		/* No hang. The 42px above is the gap its absolutely positioned ribbon
		   occupies - without it the bar covers the card overhead. */
		margin: 42px 0 -1px;
		/* Back to the other cards' bottom padding; the deeper one existed only
		   to line the row up. */
		padding-bottom: 24px;
	}

	/*
	 * The features list reserves Complete's four bullets in every card so the
	 * period blocks and totals share a baseline across the row. Stacked there is
	 * no row to share, and the reservation just leaves Basic - which has one
	 * bullet - with a hole the height of three missing lines. Let each card be
	 * as tall as it actually is.
	 */
	.leis-plans .leis-plan__features {
		min-height: 0;
	}

	/* Nothing hangs below the row any more, so nothing needs to clear it. */
	.leis-plans-wrapper {
		padding-bottom: 0;
	}

	/*
	 * Nothing moves on a phone. Scaling a full-width card pushes it past the
	 * column and can hand the page a horizontal scrollbar, and animating a list
	 * the thumb is resting on is disorienting rather than helpful - the tint,
	 * the border and the filled radio say which card is chosen without anything
	 * needing to move. Transitions off too, so the tint switches cleanly
	 * instead of washing in under the finger.
	 */
	.leis-plans .leis-plan.is-selected {
		transform: none;
	}

	.leis-plans .leis-plan,
	.leis-plans .leis-plan::after,
	.leis-plans .leis-plan .leis-plan__period {
		transition: none;
	}

	#payment-form .leis-pay-total.leis-pulse,
	#checkout-button.leis-pulse {
		animation: none;
	}
}

/* ==========================================================================
   Stacked: the cards keep their own order
   ========================================================================== */

/*
 * Stacking the row moved the selected card to the front, so that the tier being
 * bought was the one on screen. On a phone that backfires: every tap reorders
 * the list under the thumb, the three tiers stop reading as a progression from
 * cheapest to dearest, and "Most popular" ends up floating mid-list where it
 * looks like a section divider rather than a badge on Standard.
 *
 * They stay in their own order instead. Nothing jumps when you tap, and the
 * tint marks the choice.
 *
 * Last in the file on purpose: the rules this overrides live in the
 * (max-width: 1024px) and (max-width: 767px) blocks far above and have the same
 * specificity, so source order is what settles it.
 */
@media (max-width: 1024px) {
	.p-checkout .leis-plans .leis-plan.is-selected,
	.p-checkout:not(.p-checkout--single) .leis-plans .leis-plan.is-selected {
		order: 0;
	}
}