/*
 * Paddle checkout: a standalone document using the customer-surface tokens
 * from customer.css. Two equal halves split by a hairline: the summary on the canvas, Paddle's frame on white, each in a
 * 400px column that meets the other at the seam. The amount is the only display
 * element on the page; everything else is said once, at body size. System face
 * only: a named font is what makes a payment page look styled.
 */
:root {
	color-scheme: light;
	font-synthesis: none;
	text-rendering: optimizeLegibility;
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	min-height: 100%;
}

body.gc-paddle-checkout {
	font-family: var(--gc-font);
	background: var(--gc-surface);
	color: var(--gc-ink);
	-webkit-font-smoothing: antialiased;
}

/* No specificity at all, so a link with its own class (a closed checkout's button) keeps its colour. */
:where(.gc-paddle-checkout a) {
	color: inherit;
}

.gc-paddle-checkout [hidden] {
	display: none !important;
}

.gc-paddle-checkout__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.gc-paddle-checkout__page {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	min-height: 100vh;
}

.gc-paddle-checkout__summary,
.gc-paddle-checkout__payment {
	display: flex;
	padding: 52px 72px 64px;
}

.gc-paddle-checkout__summary {
	justify-content: flex-end;
	border-right: 1px solid var(--gc-hairline);
	background: var(--gc-canvas);
}

.gc-paddle-checkout__payment {
	justify-content: flex-start;
}

.gc-paddle-checkout__column {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 400px;
}

/* The summary ends with its own terms rather than stretching to the frame's height. */
.gc-paddle-checkout__summary .gc-paddle-checkout__column {
	align-self: flex-start;
}

/* Mark and the way back, inline in the column: a page bar reads as site navigation. */
.gc-paddle-checkout__masthead {
	display: flex;
	gap: 14px;
	align-items: center;
	height: 28px;
}

.gc-paddle-checkout__back {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin-left: -6px;
	border-radius: 100px;
	color: var(--gc-meta);
	font-size: 16px;
	text-decoration: none;
	transition: background-color 140ms ease, color 140ms ease;
}

.gc-paddle-checkout__back:hover {
	background: var(--gc-fill);
	color: var(--gc-ink);
}

.gc-paddle-checkout__brand {
	display: inline-flex;
	gap: 14px;
	align-items: center;
	min-width: 0;
	color: var(--gc-ink);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.02em;
	text-decoration: none;
}

.gc-paddle-checkout__brand img,
.gc-paddle-checkout__brand-mark {
	display: block;
	flex: none;
	width: 22px;
	height: 22px;
}

.gc-paddle-checkout__brand img,
.gc-paddle-checkout__tile img {
	object-fit: contain;
}

.gc-paddle-checkout__brand-mark {
	display: grid;
	place-items: center;
	border-radius: 5px;
	background: var(--gc-ink);
	color: var(--gc-surface);
	font-size: 12px;
	letter-spacing: 0;
}

/* The product is a grey line, not a heading. */
.gc-paddle-checkout__title {
	margin: 44px 0 0;
	color: var(--gc-meta);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
}

.gc-paddle-checkout__price {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	align-items: baseline;
	margin: 8px 0 0;
	font-size: 36px;
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.05;
	font-variant-numeric: tabular-nums;
}

.gc-paddle-checkout__regular {
	color: var(--gc-meta);
	font-size: 18px;
	font-weight: 400;
	letter-spacing: 0;
}

.gc-paddle-checkout__cadence {
	margin: 8px 0 0;
	color: var(--gc-meta);
	font-size: 14px;
}

.gc-paddle-checkout__order {
	margin-top: 40px;
	font-size: 14px;
}

.gc-paddle-checkout__line {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.gc-paddle-checkout__tile {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	background: var(--gc-fill);
	font-size: 15px;
	font-weight: 600;
}

.gc-paddle-checkout__lines {
	display: grid;
	flex: 1 1 0;
	gap: 2px;
	min-width: 0;
}

.gc-paddle-checkout__items {
	display: grid;
	gap: 12px;
	min-width: 0;
}

/* The license a renewal, auto-renew setup, or upgrade is for, under its line. */
.gc-paddle-checkout__license {
	margin: 0;
	color: var(--gc-meta);
}

.gc-paddle-checkout__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 16px;
	align-items: start;
}

.gc-paddle-checkout__item > div {
	display: grid;
	gap: 2px;
}

.gc-paddle-checkout__item strong {
	font-weight: 500;
}

.gc-paddle-checkout__item span {
	color: var(--gc-meta);
}

.gc-paddle-checkout__item > span {
	color: var(--gc-ink);
	font-variant-numeric: tabular-nums;
}

/* The breakdown aligns to the line item's text, not to its tile. */
.gc-paddle-checkout__totals {
	display: grid;
	gap: 12px;
	margin: 20px 0 0;
	border-top: 1px solid var(--gc-hairline);
	padding: 16px 0 0 56px;
}

.gc-paddle-checkout__totals > div {
	display: flex;
	justify-content: space-between;
	gap: 24px;
}

.gc-paddle-checkout__totals dt,
.gc-paddle-checkout__totals dd {
	margin: 0;
}

.gc-paddle-checkout__totals dt {
	color: var(--gc-body);
}

.gc-paddle-checkout__totals dd {
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.gc-paddle-checkout__totals dd.gc-paddle-checkout__pending {
	color: var(--gc-meta);
}

/* Same size as the rows above it: the page has one display number. */
.gc-paddle-checkout__totals .gc-paddle-checkout__total-row {
	margin-top: 4px;
	border-top: 1px solid var(--gc-hairline);
	padding-top: 16px;
	font-weight: 500;
}

.gc-paddle-checkout__totals .gc-paddle-checkout__total-row dt {
	color: var(--gc-ink);
}

.gc-paddle-checkout__notice {
	margin: 16px 0 0 56px;
	color: var(--gc-meta);
	font-size: 13px;
	line-height: 1.55;
}

/* GP Affiliate Consent's prompt sits in the summary on this page, never over Paddle's form. */
.gc-paddle-checkout__affiliate {
	margin-top: 24px;
}

.gc-paddle-checkout__affiliate .gpac-panel {
	position: static;
	width: auto;
	max-width: none;
	box-shadow: none;
}

.gc-paddle-checkout__affiliate .gpac-settings {
	position: static !important;
	box-shadow: none !important;
}

.gc-paddle-checkout__footnote {
	margin-top: auto;
	padding-top: 48px;
	color: var(--gc-meta);
	font-size: 13px;
	line-height: 1.55;
}

.gc-paddle-checkout__footnote p {
	margin: 0 0 8px;
}

.gc-paddle-checkout__mono {
	font-family: var(--gc-font-mono);
	font-size: 12px;
}

.gc-paddle-checkout__footnote .gc-paddle-checkout__legal {
	display: flex;
	gap: 8px;
	margin: 16px 0 0;
}

.gc-paddle-checkout__legal a {
	text-decoration: none;
	transition: color 140ms ease;
}

.gc-paddle-checkout__legal a:hover {
	color: var(--gc-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.gc-paddle-checkout__eyebrow {
	margin: 0;
	color: var(--gc-meta);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.gc-paddle-checkout__payment h2 {
	margin: 8px 0 0;
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -0.018em;
	line-height: 1.2;
}

.gc-paddle-checkout__lead {
	margin: 14px 0 0;
	color: var(--gc-meta);
	font-size: 14px;
	line-height: 1.55;
}

.gc-paddle-checkout__frame-shell {
	position: relative;
	min-height: 580px;
	margin-top: 26px;
}

/* A subscriber moving from PayPal: checkout opens on PayPal, and this reopens it with every method. */
.gc-paddle-checkout__alternative {
	display: block;
	width: 100%;
	min-height: 46px;
	margin: 12px 0 0;
	padding: 0 16px;
	border: 1px solid var(--gc-hairline);
	border-radius: var(--gc-radius-field);
	background: var(--gc-surface);
	color: var(--gc-ink);
	font: inherit;
	font-size: 15px;
	cursor: pointer;
}

.gc-paddle-checkout__alternative:hover {
	background: var(--gc-fill);
}

.gc-paddle-checkout__alternative:focus-visible {
	outline: 2px solid var(--gc-ink);
	outline-offset: 2px;
}

.gc-paddle-checkout__skeleton {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: grid;
	align-content: start;
	gap: 14px;
	background: var(--gc-surface);
	transition: opacity 180ms ease, visibility 180ms ease;
}

.gc-paddle-checkout__skeleton span {
	display: block;
	height: 46px;
	border-radius: var(--gc-radius-field);
	background: linear-gradient(100deg, var(--gc-fill) 25%, #f6f8fe 40%, var(--gc-fill) 55%);
	background-size: 280% 100%;
	animation: gc-checkout-shimmer 1.35s ease infinite;
}

.gc-paddle-checkout__skeleton span:first-child {
	width: 52%;
	height: 12px;
	border-radius: 100px;
}

.gc-paddle-checkout__frame-shell.is-ready .gc-paddle-checkout__skeleton {
	visibility: hidden;
	opacity: 0;
}

.gcommerce-paddle-checkout-frame {
	min-width: 312px;
	min-height: 580px;
}

/*
 * The status line under the frame also carries "confirming your payment", so it
 * is a plain notice, never red: an unknown outcome must not look like a failure.
 * Paddle's own frame marks a declined card where the customer fixes it.
 */
.gc-paddle-checkout__error {
	margin: 14px 0 0;
	border-radius: var(--gc-radius-field);
	background: var(--gc-fill);
	padding: 12px 14px;
	font-size: 13px;
	line-height: 1.5;
}

.gc-paddle-checkout__error:empty {
	display: none;
}

.gc-paddle-checkout__secure-note {
	margin: auto 0 0;
	padding-top: 40px;
	color: var(--gc-meta);
	font-size: 12px;
	line-height: 1.6;
	text-align: center;
}

/* A checkout that takes no payment: a dot and a word, one message, one way back. */
.gc-paddle-checkout__fatal {
	display: grid;
	justify-items: start;
}

.gc-paddle-checkout__state {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	margin: 0;
	color: var(--gc-meta);
	font-size: var(--gc-text-small);
	font-weight: 500;
}

.gc-paddle-checkout__state::before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--gc-error);
}

.gc-paddle-checkout__state--ok::before {
	background: var(--gc-ok);
}

.gc-paddle-checkout__state--warn::before {
	background: var(--gc-warn);
}

.gc-paddle-checkout__fatal h2 {
	margin-top: 12px;
	font-size: 21px;
	line-height: 1.14;
}

.gc-paddle-checkout__fatal p:not(.gc-paddle-checkout__state) {
	margin: 12px 0 0;
	color: var(--gc-body);
	font-size: 16px;
	line-height: 1.6;
}

.gc-paddle-checkout__button {
	width: auto;
	margin-top: var(--gc-space-3);
}

@keyframes gc-checkout-shimmer {
	0% { background-position: 100% 0; }
	100% { background-position: -100% 0; }
}

/*
 * A tall viewport keeps the summary beside the form while the form scrolls, with
 * its terms at the foot of the screen. A short one lets the terms follow the
 * total instead, so they are never pushed below the fold.
 */
@media (min-width: 901px) and (min-height: 820px) {
	.gc-paddle-checkout__summary .gc-paddle-checkout__column {
		position: sticky;
		top: 52px;
		min-height: calc(100vh - 116px);
	}
}

/* Below the width where a 400px frame and a readable summary fit side by side. */
@media (max-width: 900px) {
	.gc-paddle-checkout__page {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	.gc-paddle-checkout__summary,
	.gc-paddle-checkout__payment {
		justify-content: center;
		padding: 24px 24px 36px;
	}

	.gc-paddle-checkout__summary {
		border-right: 0;
		border-bottom: 1px solid var(--gc-hairline);
		background: var(--gc-surface);
	}

	.gc-paddle-checkout__column {
		max-width: 520px;
	}

	.gc-paddle-checkout__summary .gc-paddle-checkout__column {
		align-self: auto;
	}

	.gc-paddle-checkout__title {
		margin-top: 28px;
	}

	.gc-paddle-checkout__order {
		margin-top: 28px;
	}

	.gc-paddle-checkout__footnote {
		padding-top: 28px;
	}

	.gc-paddle-checkout__button {
		width: 100%;
	}
}

@media (max-width: 480px) {
	.gc-paddle-checkout__price {
		font-size: 32px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gc-paddle-checkout__skeleton span {
		animation: none;
	}
}