/**
 * Paylo Hub — dedicated payment experience.
 *
 * Faithful implementation of docs/diseno/Paylo Hub - Prototipo completo.html:
 * tokens, spacing, radii and states come from its "Sistema visual" view.
 * The payment method cards style WooCommerce's native structure
 * (ul.wc_payment_methods / li.wc_payment_method / .payment_box / #place_order)
 * so real gateways keep injecting their own fields untouched.
 */

@font-face {
	font-family: 'Figtree';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/figtree-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}

@font-face {
	font-family: 'Figtree';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/figtree-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+1E00-1E9F, U+20A0-20C0;
}

@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/plexmono-400.woff2') format('woff2');
}

@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/plexmono-500.woff2') format('woff2');
}

body.paylo-shell-body {
	--paylo-acc: oklch(0.52 0.17 268);
	--paylo-acc-strong: oklch(0.42 0.17 268);
	--paylo-acc-soft: oklch(0.988 0.006 268);
	--paylo-ink: oklch(0.22 0.02 265);
	--paylo-sub: oklch(0.5 0.02 265);
	--paylo-line: oklch(0.92 0.008 265);
	--paylo-canvas: oklch(0.94 0.006 265);
	--paylo-panel: oklch(0.985 0.004 265);
	--paylo-ok: oklch(0.58 0.13 155);
	--paylo-warn: oklch(0.62 0.14 62);
	margin: 0;
	background: var(--paylo-canvas);
	font-family: 'Figtree', Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	color: var(--paylo-ink);
}

body.paylo-shell-body a {
	color: var(--paylo-acc);
	text-decoration: none;
}

body.paylo-shell-body a:hover {
	color: var(--paylo-acc-strong);
	text-decoration: underline;
}

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

@keyframes paylo-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

/* ---------- Shell ---------- */

.paylo-shell {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.paylo-shell-main {
	flex: 1;
	display: flex;
	justify-content: center;
	padding: 36px 20px 60px;
}

.paylo-frame {
	width: 1120px;
	max-width: 100%;
	display: flex;
	flex-direction: column;
}

.paylo-frame--result {
	width: 560px;
}

.paylo-brandbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 4px 22px;
}

.paylo-brand {
	display: flex;
	align-items: center;
	gap: 11px;
}

.paylo-logo {
	width: 28px;
	height: 28px;
	border-radius: 9px;
	background: var(--paylo-acc);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: -0.02em;
}

.paylo-brandname {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--paylo-ink);
}

.paylo-orderref {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 12px;
	color: oklch(0.55 0.02 265);
}

.paylo-footer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding-top: 26px;
	font-size: 13px;
	color: var(--paylo-sub);
}

.paylo-lock {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--paylo-sub);
}

.paylo-lock::before {
	content: '';
	width: 9px;
	height: 8px;
	border: 1.6px solid currentColor;
	border-bottom: none;
	border-radius: 5px 5px 0 0;
	margin-bottom: -1px;
}

.paylo-lock::after {
	content: '';
	width: 13px;
	height: 9px;
	background: currentColor;
	border-radius: 2px;
}

/* ---------- Payment card ---------- */

.paylo-card {
	display: grid;
	grid-template-columns: 404px 1fr;
	background: #fff;
	border: 1px solid oklch(0.9 0.008 265);
	border-radius: 16px;
	overflow: hidden;
}

.paylo-summary {
	padding: 32px;
	border-right: 1px solid var(--paylo-line);
	background: var(--paylo-panel);
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.paylo-paylabel {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: oklch(0.55 0.02 265);
}

.paylo-amount {
	font-size: 34px;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--paylo-ink);
	line-height: 1.05;
}

.paylo-amount .woocommerce-Price-amount {
	font-variant-numeric: tabular-nums;
}

.paylo-currency {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0;
	color: oklch(0.55 0.02 265);
	margin-left: 2px;
	white-space: nowrap;
}

/* Real cents shrink relative to their amount; whole amounts never
   print them at all. */
.paylo-cents {
	font-size: 0.6em;
	font-weight: inherit;
	letter-spacing: 0;
}

.paylo-row .paylo-cents {
	font-size: 0.85em;
}

/* Owner-defined currency code label after breakdown/total amounts. */
.paylo-code {
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: oklch(0.55 0.02 265);
	margin-left: 3px;
}

.paylo-hero {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.paylo-ordercard {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px;
	background: #fff;
	border: 1px solid var(--paylo-line);
	border-radius: 12px;
}

.paylo-ordercard-icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: oklch(0.95 0.02 268);
	flex: none;
	overflow: hidden;
}

.paylo-ordercard-icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

/* With a real logo the tinted square would bleed through transparent
   pixels and tint the artwork, so the box goes fully transparent. */
.paylo-ordercard-icon--logo {
	background: none;
}

.paylo-ordercard-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.paylo-ordercard-title {
	font-size: 15px;
	font-weight: 600;
	color: oklch(0.25 0.02 265);
	letter-spacing: -0.01em;
}

.paylo-ordercard-sub {
	font-size: 13px;
	color: oklch(0.55 0.02 265);
}

/* Toggle + rows live inside one card, so the breakdown reads as the
   body of the accordion instead of loose text under a pill. */
.paylo-breakdown-card {
	background: #fff;
	border: 1px solid var(--paylo-line);
	border-radius: 10px;
}

.paylo-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 11px 14px;
	background: none;
	border: 0;
	border-radius: 9px 9px 0 0;
	font-family: 'Figtree', sans-serif;
	font-size: 13px;
	color: oklch(0.45 0.02 265);
	cursor: pointer;
}

.paylo-toggle.is-closed {
	border-radius: 9px;
}

.paylo-toggle:hover {
	background: oklch(0.985 0.004 265);
}

.paylo-chevron {
	width: 6px;
	height: 6px;
	border-right: 1.5px solid oklch(0.55 0.02 265);
	border-bottom: 1.5px solid oklch(0.55 0.02 265);
	transition: transform 0.18s ease;
	transform-origin: center;
	margin-top: 2px;
	transform: rotate(-135deg);
}

.paylo-rows.is-closed + * .paylo-chevron,
.paylo-toggle.is-closed .paylo-chevron {
	margin-top: -2px;
	transform: rotate(45deg);
}

.paylo-rows {
	display: flex;
	flex-direction: column;
	gap: 11px;
	padding: 12px 14px 13px;
	border-top: 1px solid oklch(0.945 0.006 265);
	animation: paylo-in 0.22s ease both;
}

.paylo-rows.is-closed {
	display: none;
}

.paylo-row {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font-size: 14px;
	color: oklch(0.45 0.02 265);
}

.paylo-row > :first-child {
	display: flex;
	align-items: center;
	gap: 7px;
	flex-wrap: wrap;
}

.paylo-coupon {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 10.5px;
	line-height: 1;
	padding: 4px 6px;
	border-radius: 5px;
	background: oklch(0.95 0.04 155);
	color: oklch(0.45 0.11 155);
}

.paylo-row > :last-child {
	color: oklch(0.28 0.02 265);
	font-variant-numeric: tabular-nums;
}

.paylo-row--discount > :last-child {
	color: oklch(0.48 0.12 155);
}

.paylo-sep {
	height: 1px;
	background: oklch(0.91 0.008 265);
}

.paylo-totalrow {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}

.paylo-totalrow-label {
	font-size: 15px;
	font-weight: 600;
	color: var(--paylo-ink);
}

.paylo-totalrow-amount {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--paylo-ink);
	font-variant-numeric: tabular-nums;
}

/* Receipt note: a softly tinted card, readable but quieter than the
   totals, anchored to the bottom of the summary column. */
.paylo-customer {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding: 11px 13px;
	background: oklch(0.972 0.01 268);
	border: 1px solid oklch(0.93 0.015 268);
	border-radius: 10px;
	font-size: 13px;
	line-height: 1.45;
	color: oklch(0.45 0.02 265);
}

/* Envelope icon (inline SVG), tinted like the lock. */
.paylo-mail {
	width: 20px;
	height: 16px;
	color: var(--paylo-sub);
	flex: none;
}

.paylo-mail svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* ---------- Payment column ---------- */

.paylo-paycol {
	padding: 32px 34px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

.paylo-payhead {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.paylo-paytitle {
	margin: 0;
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--paylo-ink);
}

.paylo-paynote {
	margin: 0;
	font-size: 13.5px;
	color: oklch(0.52 0.02 265);
}

/* Hide WooCommerce's duplicated order table: the summary column owns it. */
.paylo-paycol table.shop_table {
	display: none;
}

.paylo-paycol #payment,
.paylo-paycol .woocommerce-checkout-payment {
	background: transparent !important;
	border-radius: 0;
}

.paylo-paycol ul.wc_payment_methods {
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 16px;
	background: transparent !important;
}

.paylo-paycol li.wc_payment_method {
	position: relative;
	margin: 0;
	background: #fff;
	border: 1.5px solid var(--paylo-line);
	border-radius: 14px;
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.2s ease;
	line-height: 1.4;
}

.paylo-paycol li.wc_payment_method.is-selected,
.paylo-paycol li.wc_payment_method:has(> input.input-radio:checked) {
	border-color: var(--paylo-acc);
	box-shadow: 0 6px 14px -12px oklch(0.4 0.1 265 / 0.5);
}

.paylo-paycol li.wc_payment_method > input.input-radio {
	/* WooCommerce inline-hides the radio when a single method remains;
	   the design always shows the check, so force visibility. */
	display: block !important;
	position: absolute;
	left: 18px;
	top: 18px;
	margin: 0;
	appearance: none;
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	box-sizing: border-box;
	background: #fff;
	border: 1.5px solid oklch(0.84 0.01 265);
	cursor: pointer;
	transition: background 0.15s ease;
}

.paylo-paycol li.wc_payment_method > input.input-radio:checked {
	background-color: var(--paylo-ok);
	border: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.7l4.5-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px;
}

.paylo-paycol li.wc_payment_method > input.input-radio:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px oklch(0.55 0.16 250 / 0.16);
}

.paylo-paycol li.wc_payment_method > label {
	--paylo-label-gap: 12px;

	display: flex;
	align-items: center;
	gap: var(--paylo-label-gap);
	margin: 0;
	padding: 16px 18px 16px 50px;
	font-size: 15px;
	font-weight: 600;
	color: oklch(0.24 0.02 265);
	letter-spacing: -0.01em;
	cursor: pointer;
	min-height: 24px;
	/* 24px line box: its centre (16 + 12 = 28px) matches the radio centre (18 + 10). */
	line-height: 24px;
}

.paylo-paycol li.wc_payment_method > label img {
	border-radius: 6px;
}


.paylo-paycol li.wc_payment_method .payment_box {
	margin: 0 !important;
	padding: 16px 18px !important;
	/* Hex on purpose: Stripe's appearance derivation parses this computed
	   background to decide light vs night theme, and its color parser
	   chokes on modern oklch() serializations (-> null -> night mode). */
	background: #fafbfe !important;
	border-top: 1px solid var(--paylo-line);
	border-radius: 0 0 12px 12px;
	font-size: 13.5px;
	line-height: 1.55;
	color: #61647a;
	animation: paylo-in 0.18s ease both;
}

.paylo-paycol li.wc_payment_method .payment_box::before {
	display: none !important;
}

.paylo-paycol li.wc_payment_method .payment_box p {
	margin: 0 0 10px;
}

.paylo-paycol li.wc_payment_method .payment_box p:last-child {
	margin-bottom: 0;
}

.paylo-paycol .payment_box input.input-text,
.paylo-paycol .payment_box select,
.paylo-paycol .payment_box textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 13px 14px;
	border: 1px solid oklch(0.88 0.01 265);
	border-radius: 9px;
	background: #fff;
	font-family: 'Figtree', sans-serif;
	font-size: 15px;
	color: oklch(0.24 0.02 265);
	transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.paylo-paycol .payment_box input.input-text:focus,
.paylo-paycol .payment_box select:focus,
.paylo-paycol .payment_box textarea:focus {
	border-color: oklch(0.55 0.16 250);
	box-shadow: 0 0 0 3px oklch(0.55 0.16 250 / 0.16);
	outline: none;
}

/* WooCommerce ships "#payment div.form-row { padding: 1em }" with higher
   specificity; matched and overridden so the privacy text, the pay button
   and the legal line span the full column width like the method cards. */
.paylo-paycol .form-row,
.paylo-paycol #payment div.form-row {
	margin: 0 0 12px;
	padding: 0;
}

.paylo-paycol .place-order {
	margin: 0;
	padding: 0;
	float: none;
	width: 100%;
}

.paylo-paycol .place-order::before {
	content: '';
	display: block;
	height: 1px;
	background: oklch(0.93 0.008 265);
	margin-bottom: 20px;
}

.paylo-paycol #place_order,
.paylo-paycol button.button.alt {
	/* WooCommerce floats the pay button; a floated button has no flow
	   height and the legal line slides up behind it. */
	float: none !important;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 48px;
	padding: 0 24px;
	border: none;
	border-radius: 12px;
	font-family: 'Figtree', sans-serif;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: #fff;
	background: var(--paylo-acc);
	cursor: pointer;
	box-shadow: 0 8px 20px -10px oklch(0.52 0.17 268 / 0.9);
	transition: background 0.15s ease, filter 0.15s ease;
}

.paylo-paycol #place_order:hover {
	filter: brightness(0.94);
}

.paylo-paycol #place_order:disabled,
.paylo-paycol #place_order.processing {
	background: oklch(0.78 0.03 265);
	cursor: not-allowed;
	box-shadow: none;
}

/* The privacy line reads as fine print: below the pay button. The
   order-pay row holds notice + button together, so flex order swaps
   them. Spacing comes from the row itself — 18px under the separator,
   14px between visible items via gap — so whichever pay button is
   active (native or a gateway's replacement) breathes identically,
   and hidden alternatives contribute nothing. */
.paylo-paycol #payment div.form-row {
	display: flex;
	flex-direction: column;
}

.paylo-paycol #place_order,
.paylo-paycol button.button.alt {
	order: 1;
	margin-top: 18px;
}

.paylo-paycol .ppc-button-wrapper,
.paylo-paycol #payment div.form-row > [id^='ppc-button-']:not(:empty) {
	order: 1;
	margin-top: 18px;
}

/* PayPal hides the inner button but leaves its wrapper in the flow: a
   zero-height flex item still consumes a gap slot, so drop it fully. */
.paylo-paycol .ppc-button-wrapper:has(> [id^='ppc-button-'][style*='none']),
.paylo-paycol #payment div.form-row > [id^='ppc-button-']:empty {
	display: none;
}

/* Same 14px under either pay button: the wrapper owns the distance and
   the paragraph inside drops its default top margin. */
.paylo-paycol .woocommerce-terms-and-conditions-wrapper {
	order: 2;
	margin: 14px 0 0;
}

.paylo-paycol .woocommerce-privacy-policy-text p:first-child {
	margin-top: 0;
}

.paylo-paycol .woocommerce-privacy-policy-text p:last-child {
	margin-bottom: 0;
}

.paylo-paycol .woocommerce-terms-and-conditions-wrapper,
.paylo-paycol .woocommerce-privacy-policy-text p {
	margin-bottom: 14px;
	font-size: 11.5px;
	line-height: 1.5;
	color: oklch(0.58 0.02 265);
	text-align: center;
	text-wrap: pretty;
}

/* ---------- Stripe ---------- */

/* The shell is a light design: declare it, so embedded third-party
   iframes (Stripe renders its form honoring the embedder's scheme)
   never flip to automatic dark mode on dark-mode systems. */
:root,
body.paylo-shell-body {
	color-scheme: light;
}

/* Stripe derives its Payment Element appearance from the computed styles
   of this hidden probe input on order-pay. Styling it IS styling the
   Stripe form. Hex colors on purpose: they survive getComputedStyle in a
   form Stripe accepts, unlike some oklch() serializations. !important
   shields the probe from the generic input rules and their hover/focus
   transitions, which were polluting the derived border. */
/* The extractor CLONES the probe, renames it to #wc-stripe-hidden-input
   inside #wc-stripe-hidden-div, and reads the clone — so the clone ids
   must carry the tokens too. The container needs an explicit light
   background: the ancestor-background lookup gives up after 4 levels of
   transparency and a null background flips the whole form to night mode. */
.paylo-paycol #wc-stripe-hidden-div {
	background-color: #ffffff;
}

.paylo-paycol #wc-stripe-hidden-style-input,
.paylo-paycol #wc-stripe-hidden-input,
.paylo-paycol #wc-stripe-hidden-invalid-input {
	background-color: #ffffff !important;
	color: #23252f !important;
	border: 1px solid #e4e6ee !important;
	border-radius: 10px !important;
	padding: 12px 14px !important;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
	font-size: 15px !important;
	box-shadow: none !important;
	transition: none !important;
}

.paylo-paycol #wc-stripe-hidden-invalid-input {
	color: #b3261e !important;
	border-color: #e4b4b0 !important;
}

/* Reference node for Stripe's floating-label derivation (the extractor
   reads ".woocommerce-PaymentMethod label"; the shell renders one
   off-screen since order-pay markup has none). */
.paylo-paycol .woocommerce-PaymentMethod label {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
	font-size: 13.5px !important;
	font-weight: 500 !important;
	color: #454859 !important;
}

/* Without theme CSS, every fieldset in the payment area shows the
   browser's native groove border (the UPE form, and an anonymous empty
   one that painted a stray box under the card fields). */
.paylo-paycol .payment_box fieldset,
.paylo-paycol #wc-stripe-upe-form {
	border: 0;
	padding: 0;
	margin: 0;
	min-width: 0;
}

/* Method logos: the hub decides which image each gateway shows (see
   GatewayLogos); this only caps their size so every row stays aligned
   whatever the artwork's proportions are. */
/* !important: gateway stylesheets (Mercado Pago's, for one) size their own
   icon and would ignore the owner's setting. */
.paylo-paycol li.wc_payment_method label img,
.paylo-paycol .paylo-gwlogo,
.paylo-paycol .paylo-gwicon {
	max-height: var(--paylo-gwlogo-height, 20px) !important;
	/* Gateways that hardcode a height or a max-width (Mercado Pago does
	   both) would cap the configured size: max-height alone never grows an
	   element, and a width ceiling shrinks a square logo just the same. */
	height: auto !important;
	width: auto !important;
	max-width: 100% !important;
	vertical-align: middle;
	/* The row is a flex line that already separates its items, so the
	   configured distance is the total: the row's own gap is discounted
	   here (a smaller value simply pulls the logo back). */
	margin-left: calc(var(--paylo-gwlogo-gap, 12px) - var(--paylo-label-gap, 12px)) !important;
}

.paylo-paycol .paylo-gwicon {
	height: var(--paylo-gwlogo-height, 20px) !important;
	color: oklch(0.5 0.02 265);
}

/* No wallets rendered (unsupported browser/device): hide the empty
   express slot and its orphaned "or" separator. */
.paylo-paycol #wc-stripe-express-checkout-element:empty {
	display: none;
}

.paylo-payform:has(#wc-stripe-express-checkout-element:empty) #wc-stripe-express-checkout-button-separator {
	display: none;
}

/* Express wallets (Apple/Google/Amazon/Link) in a tidy responsive grid:
   two columns when they fit, stacked otherwise. The iframes Stripe
   renders have an intrinsic min-width, so the cells must be allowed to
   shrink and clip, or the buttons overflow the card on narrow screens. */
.paylo-paycol #wc-stripe-express-checkout-element {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: 10px;
}

.paylo-paycol #wc-stripe-express-checkout-element > * {
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	border-radius: 10px;
}

.paylo-paycol #wc-stripe-express-checkout-element iframe {
	max-width: 100% !important;
}

/* "— OR —" separator becomes a quiet hairline with a small word. */
.paylo-paycol #wc-stripe-express-checkout-button-separator {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 18px 0;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: oklch(0.58 0.02 265);
}

.paylo-paycol #wc-stripe-express-checkout-button-separator::before,
.paylo-paycol #wc-stripe-express-checkout-button-separator::after {
	content: '';
	height: 1px;
	flex: 1;
	background: var(--paylo-line);
}

/* Test-mode hint: readable but quiet. */
.paylo-paycol .wc-stripe-payment-method-instruction {
	margin: 0 0 12px;
	font-size: 11.5px;
	line-height: 1.5;
	color: oklch(0.55 0.02 265);
}

.paylo-paycol .wc-stripe-upe-element {
	margin-top: 2px;
}

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

.paylo-result {
	padding: 34px;
	gap: 22px;
	background: #fff;
	border: 1px solid oklch(0.9 0.008 265);
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	animation: paylo-in 0.25s ease both;
}

.paylo-result-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
}

.paylo-result-icon {
	width: 58px;
	height: 58px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	line-height: 1;
}

.paylo-result-icon--success {
	background: oklch(0.94 0.05 155);
	color: oklch(0.45 0.12 155);
}

.paylo-result-icon--retry {
	background: oklch(0.95 0.055 70);
	color: oklch(0.52 0.14 62);
}

.paylo-result-icon--expired {
	background: oklch(0.94 0.004 265);
	color: var(--paylo-sub);
	font-size: 24px;
}

.paylo-result-title {
	margin: 0;
	font-size: 23px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--paylo-ink);
	text-wrap: pretty;
}

.paylo-result-text {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--paylo-sub);
	text-wrap: pretty;
}

.paylo-notice {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 16px 18px;
	border-radius: 12px;
}

.paylo-notice--info {
	background: oklch(0.98 0.012 268);
	border: 1px solid oklch(0.92 0.02 268);
}

.paylo-notice--warn {
	background: oklch(0.985 0.015 70);
	border: 1px solid oklch(0.93 0.03 70);
}

.paylo-notice--muted {
	background: oklch(0.975 0.004 265);
	border: 1px solid oklch(0.93 0.008 265);
}

.paylo-notice-title {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: oklch(0.24 0.02 265);
}

.paylo-notice-text {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: oklch(0.45 0.02 265);
	text-wrap: pretty;
}

.paylo-detail {
	border: 1px solid oklch(0.93 0.008 265);
	border-radius: 12px;
	overflow: hidden;
}

.paylo-detail-head {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	background: oklch(0.975 0.004 265);
	font-family: 'IBM Plex Mono', monospace;
	font-size: 11.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--paylo-sub);
}

.paylo-detail-body {
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.paylo-detail-body .paylo-row {
	color: oklch(0.35 0.02 265);
}

.paylo-detail-body .paylo-row--minor {
	font-size: 13.5px;
	color: var(--paylo-sub);
}

.paylo-qty {
	color: oklch(0.6 0.02 265);
}

.paylo-detail-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}

.paylo-detail-total-label {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--paylo-ink);
}

.paylo-detail-total-amount {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--paylo-ink);
	font-variant-numeric: tabular-nums;
}

.paylo-chip {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	background: oklch(0.975 0.004 265);
	border: 1px solid oklch(0.93 0.008 265);
	border-radius: 12px;
}

.paylo-chip-ref {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 11.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--paylo-sub);
}

.paylo-chip-note {
	margin-left: auto;
	font-size: 13px;
	color: var(--paylo-sub);
}

.paylo-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.paylo-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
	padding: 15px;
	border: none;
	border-radius: 12px;
	font-family: 'Figtree', sans-serif;
	font-size: 15.5px;
	font-weight: 600;
	cursor: pointer;
	transition: filter 0.15s ease, background 0.15s ease;
	text-align: center;
}

a.paylo-btn,
a.paylo-btn:hover {
	text-decoration: none;
}

.paylo-btn--primary {
	background: var(--paylo-acc);
	color: #fff !important;
}

.paylo-btn--dark {
	background: var(--paylo-ink);
	color: #fff !important;
}

.paylo-btn--primary:hover,
.paylo-btn--dark:hover {
	filter: brightness(0.94);
	color: #fff;
}

.paylo-btn--secondary {
	padding: 14px;
	background: #fff;
	border: 1.5px solid oklch(0.88 0.01 265);
	color: oklch(0.3 0.02 265) !important;
	font-size: 15px;
}

.paylo-btn--secondary:hover {
	background: oklch(0.975 0.004 265);
	color: oklch(0.3 0.02 265);
}

/* ---------- Privacy modal ---------- */

body.paylo-modal-open {
	overflow: hidden;
}

.paylo-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.paylo-modal[hidden] {
	display: none;
}

.paylo-modal-overlay {
	position: absolute;
	inset: 0;
	background: oklch(0.22 0.02 265 / 0.45);
}

.paylo-modal-card {
	position: relative;
	width: 560px;
	max-width: 100%;
	max-height: 82vh;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid oklch(0.9 0.008 265);
	border-radius: 16px;
	box-shadow: 0 24px 60px -24px oklch(0.2 0.04 265 / 0.5);
	animation: paylo-in 0.2s ease both;
}

.paylo-modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 22px;
	border-bottom: 1px solid var(--paylo-line);
}

.paylo-modal-title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--paylo-ink);
}

.paylo-modal-close {
	width: 32px;
	height: 32px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 9px;
	background: oklch(0.965 0.004 265);
	color: oklch(0.4 0.02 265);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.12s ease;
}

.paylo-modal-close:hover {
	background: oklch(0.93 0.006 265);
}

.paylo-modal-close:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px oklch(0.55 0.16 250 / 0.16);
}

.paylo-modal-body {
	padding: 20px 22px 24px;
	overflow-y: auto;
	font-size: 13.5px;
	line-height: 1.65;
	color: oklch(0.4 0.02 265);
}

.paylo-modal-body p {
	margin: 0 0 12px;
}

.paylo-modal-body p:last-child {
	margin-bottom: 0;
}

.paylo-modal-body h1,
.paylo-modal-body h2,
.paylo-modal-body h3 {
	margin: 18px 0 8px;
	font-size: 15px;
	font-weight: 700;
	color: var(--paylo-ink);
}

.paylo-modal-body h1:first-child,
.paylo-modal-body h2:first-child,
.paylo-modal-body h3:first-child {
	margin-top: 0;
}

.paylo-modal-body ul,
.paylo-modal-body ol {
	margin: 0 0 12px;
	padding-left: 20px;
}

/* ---------- Responsive ---------- */

@media (max-width: 899px) {
	.paylo-shell-main {
		padding: 24px 14px 44px;
	}

	.paylo-card {
		display: flex;
		flex-direction: column;
	}

	.paylo-summary {
		padding: 24px;
		border-right: none;
		border-bottom: 1px solid var(--paylo-line);
		gap: 18px;
	}

	.paylo-paycol {
		padding: 24px;
		gap: 18px;
	}

	.paylo-result {
		padding: 26px 22px;
		gap: 20px;
	}
}