/**
 * ClosetPay, customer facing. "Soft Luxe".
 *
 * Warm greige, generous curves, one sage accent, no serif anywhere. Calm and
 * modern rather than formal, and easy on a phone, which is where most of these
 * payments happen.
 *
 * The payment panel is served without the theme, so nothing here may lean on
 * theme CSS being present. No web fonts either: the page loads from the shop's
 * own server and asks no one else for anything, which is the whole point of the
 * plugin, so the type is built from faces every machine already has.
 *
 * One rule is not negotiable: the QR stays black on white, whatever the design
 * does around it, or scanners start refusing it.
 */

.closetpay-body,
.closetpay-overlay {
	--cp-ink: #2c2a26;
	--cp-ink-soft: #4f4a42;
	--cp-muted: #857f76;
	--cp-surface: #fffdfb;
	--cp-sand: #f2ede6;
	--cp-sand-deep: #e9e2d8;
	--cp-line: #e6dfd5;
	/* One colour for the whole payment. The rail used to be the only blue thing
	   on the page and the sage buttons beside it read as a different product.
	   Every use of these runs through the variable, so this is the only place
	   a shop has to change to recolour the lot. */
	--cp-accent: #1557c0;
	--cp-accent-ink: #0e3f94;
	--cp-accent-soft: #e9f0fc;
	--cp-warn-bg: #fdf6e9;
	--cp-warn-ink: #7a5f22;
	--cp-warn-line: #d8b877;
	--cp-good: #4a7a5c;
	--cp-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--cp-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* The coloured rail down the left. A shop whose brand fights this blue can
	   override --cp-panel and --cp-panel-deep alone; everything else on the rail
	   is white at an opacity, so it follows whatever colour is set. */
	--cp-panel: #1557c0;
	--cp-panel-deep: #0e3f94;
	--cp-panel-ink: #fff;
	--cp-panel-soft: rgba(255, 255, 255, .74);
	--cp-panel-faint: rgba(255, 255, 255, .55);
	--cp-panel-line: rgba(255, 255, 255, .17);
	--cp-panel-fill: rgba(255, 255, 255, .09);
	--cp-panel-live: rgba(255, 255, 255, .16);
}

.closetpay-body {
	margin: 0;
	background: var(--cp-sand);
	color: var(--cp-ink);
	font-family: var(--cp-sans);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

.cp-wrap {
	max-width: 940px;
	margin: 0 auto;
	padding: 26px 18px 48px;
}

/* ------------------------------------------------------------- the split
 *
 * Coloured rail on the left holding the amount and every coin, white half on
 * the right holding whatever the chosen coin needs. The coin list stays on
 * screen the whole time, so switching coins is one click rather than a trip
 * back to a separate chooser screen.
 */

.cp-split {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	align-items: stretch;
	border-radius: 20px;
	overflow: hidden;
	background: var(--cp-surface);
	box-shadow: 0 18px 44px rgba(44, 42, 38, .13);
}

.cp-side {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-height: 0;
	padding: 24px 20px 22px;
	background: linear-gradient(165deg, var(--cp-panel) 0%, var(--cp-panel-deep) 100%);
	color: var(--cp-panel-ink);
}

.cp-side-brand,
.cp-side-pay { flex: 0 0 auto; }

.cp-side-brand { display: flex; align-items: center; min-height: 34px; }

.cp-logo {
	max-height: 34px;
	width: auto;
	/* Shop logos are drawn for a light page. On the rail they sit on a strong
	   colour, so the usual dark-on-white mark would disappear into it. */
	background: #fff;
	padding: 5px 9px;
	border-radius: 8px;
}

.cp-brand {
	font-size: 15.5px;
	font-weight: 650;
	letter-spacing: -.01em;
	color: var(--cp-panel-ink);
}

.cp-side-pay { display: flex; flex-direction: column; gap: 3px; }

.cp-side-eyebrow {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--cp-panel-faint);
}

.cp-side-total {
	font-size: 31px;
	font-weight: 680;
	line-height: 1.12;
	letter-spacing: -.025em;
}

.cp-side-order { font-size: 11.5px; color: var(--cp-panel-faint); }

.cp-side-note {
	margin: auto 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--cp-panel-line);
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--cp-panel-faint);
}

/* ------------------------------------------------------- the coin rail */

/* Six coins come to about 380px. On a short laptop window the panel is not
   that tall, and without this the last coin or two sit below the fold with no
   way to reach them. min-height:0 is what lets a flex child shrink at all. */
.cp-side-nets {
	display: flex;
	flex-direction: column;
	gap: 7px;
	min-height: 0;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--cp-panel-line) transparent;
}

.cp-side-nets::-webkit-scrollbar { width: 4px; }
.cp-side-nets::-webkit-scrollbar-thumb { background: var(--cp-panel-line); border-radius: 4px; }

.cp-rail-net {
	display: flex;
	align-items: center;
	gap: 11px;
	width: 100%;
	padding: 10px 12px;
	border: 1px solid transparent;
	border-radius: 12px;
	background: var(--cp-panel-fill);
	color: var(--cp-panel-ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.cp-rail-net:hover:not(:disabled),
.cp-rail-net:focus-visible {
	background: var(--cp-panel-live);
	border-color: var(--cp-panel-line);
}

.cp-rail-net.is-live {
	background: var(--cp-panel-ink);
	color: var(--cp-panel-deep);
	border-color: var(--cp-panel-ink);
}

.cp-rail-net.is-busy { opacity: .6; cursor: progress; }

/* Once money is on its way the coin is settled. Letting someone switch now
   would quote a second coin while the first is still arriving. */
.cp-rail-net:disabled { cursor: default; }
.cp-rail-net:disabled:not(.is-live) { opacity: .4; }

.cp-rail-icon {
	flex: 0 0 26px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	max-width: none;
	background: #fff;
}

.cp-rail-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.cp-rail-label { font-size: 13.5px; font-weight: 650; letter-spacing: -.01em; }

.cp-rail-short {
	font-size: 11px;
	line-height: 1.35;
	color: var(--cp-panel-soft);
}

.cp-rail-net.is-live .cp-rail-short { color: rgba(14, 63, 148, .72); }

.cp-rail-chip {
	flex: 0 0 auto;
	padding: 2px 7px;
	border-radius: 999px;
	background: var(--cp-panel-ink);
	color: var(--cp-panel-deep);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.cp-rail-net.is-live .cp-rail-chip {
	background: var(--cp-panel-deep);
	color: var(--cp-panel-ink);
}

/* ------------------------------------------------------- the white half */

.cp-main {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--cp-surface);
}

.cp-main-head {
	margin: 0;
	padding: 20px 24px 14px;
	border-bottom: 1px solid var(--cp-line);
	font-size: 17px;
	font-weight: 650;
	letter-spacing: -.015em;
	color: var(--cp-ink);
}

.cp-card {
	flex: 1 1 auto;
	min-width: 0;
	background: var(--cp-surface);
	padding: 22px 24px 24px;
}

/* The white half before a coin is picked. */

.cp-steps {
	margin-top: 20px;
	padding: 16px 18px;
	border: 1px solid var(--cp-line);
	border-radius: 14px;
	background: var(--cp-sand);
}

.cp-steps-title {
	display: block;
	margin-bottom: 9px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--cp-muted);
}

.cp-steps-list {
	counter-reset: cp-step;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cp-steps-list li {
	position: relative;
	padding: 0 0 0 30px;
	margin-bottom: 9px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--cp-ink-soft);
}

.cp-steps-list li:last-child { margin-bottom: 0; }

.cp-steps-list li::before {
	counter-increment: cp-step;
	content: counter(cp-step);
	position: absolute;
	left: 0;
	top: 1px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--cp-accent-soft);
	color: var(--cp-accent-ink);
	font-size: 11px;
	font-weight: 700;
}

/* --------------------------------------------- stacked, on a narrow screen */

@media (max-width: 760px) {
	.cp-wrap { max-width: 520px; }

	.cp-split { grid-template-columns: minmax(0, 1fr); }

	/* Stacked, the coloured block is pure overhead above the QR, so the shop
	   name and the amount share one line instead of taking two. */
	.cp-side {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas:
			"brand pay"
			"nets  nets";
		align-items: center;
		gap: 13px 14px;
		padding: 15px 16px 14px;
	}

	.cp-side-brand { grid-area: brand; }
	.cp-side-nets { grid-area: nets; }

	.cp-side-pay {
		grid-area: pay;
		align-items: flex-end;
		text-align: right;
	}

	.cp-side-total { font-size: 23px; }

	/* The rail turns into one swipeable row so it never eats the screen before
	   the QR gets a chance to appear. */
	.cp-side-nets {
		flex-direction: row;
		gap: 7px;
		overflow-x: auto;
		padding-bottom: 4px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.cp-side-nets::-webkit-scrollbar { display: none; }

	.cp-rail-net { width: auto; flex: 0 0 auto; padding: 8px 12px; }

	.cp-rail-chip { display: none; }

	.cp-side-note { display: none; }

	.cp-main-head { padding: 16px 18px 12px; font-size: 16px; }

	.cp-card { padding: 18px 18px 20px; }
}

/* type */

.cp-title {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.02em;
	margin: 0 0 5px;
}

.cp-lead {
	margin: 0 0 18px;
	color: var(--cp-muted);
	font-size: 13.5px;
}

.cp-eyebrow {
	display: block;
	font-size: 11.5px;
	color: var(--cp-muted);
	margin-bottom: 6px;
}

.cp-chip {
	display: inline-block;
	margin-right: 8px;
	padding: 4px 11px;
	border-radius: 999px;
	background: var(--cp-accent-soft);
	color: var(--cp-accent);
	font-size: 11px;
	font-weight: 600;
}

.cp-error {
	margin: 0 0 16px;
	padding: 12px 14px;
	background: #fdf0ee;
	border-radius: 12px;
	color: #8a3b32;
	font-size: 13.5px;
}

/* choosing a coin */

.cp-nets { display: flex; flex-direction: column; gap: 9px; }

.cp-net {
	display: flex;
	align-items: center;
	gap: 13px;
	width: 100%;
	padding: 14px 15px;
	border: 1px solid var(--cp-line);
	border-radius: 14px;
	background: var(--cp-surface);
	text-align: left;
	font: inherit;
	color: var(--cp-ink);
	cursor: pointer;
	transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.cp-net:hover,
.cp-net:focus-visible {
	border-color: var(--cp-accent);
	background: var(--cp-accent-soft);
	transform: translateY(-1px);
	outline: none;
}

.cp-net.is-busy { opacity: .55; cursor: progress; transform: none; }

.cp-net-icon { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; max-width: none; }

.cp-net-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.cp-net-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.cp-net-label { font-weight: 650; font-size: 14.5px; letter-spacing: -.01em; }

.cp-net-chip {
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--cp-accent-soft);
	color: var(--cp-accent);
	font-size: 10.5px;
	font-weight: 600;
}

.cp-net-chip.is-best { background: var(--cp-accent); color: #fff; }

.cp-net-note { font-size: 12px; line-height: 1.45; color: var(--cp-muted); }

.cp-net-go { flex: 0 0 auto; color: var(--cp-accent); font-size: 19px; line-height: 1; }

/* the amount */

.cp-amount-block { padding: 2px 0 16px; }

.cp-amount { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }

.cp-amount-icon { width: 34px; height: 34px; border-radius: 50%; max-width: none; }

.cp-amount-value {
	font-size: 33px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.025em;
	font-variant-numeric: tabular-nums;
	word-break: break-all;
}

.cp-amount-asset {
	font-size: 12px;
	font-weight: 600;
	color: var(--cp-muted);
	align-self: flex-end;
	padding-bottom: 6px;
}

/* the breakdown: the order, the fee an exchange takes, and the sum of the two */

.cp-bill {
	margin: 13px 0 0;
	padding: 11px 14px;
	background: var(--cp-sand);
	border-radius: 13px;
}

.cp-bill-row,
.cp-bill-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
}

.cp-bill-row {
	padding: 2px 0;
	font-size: 12.5px;
	color: var(--cp-muted);
}

.cp-bill-row span:last-child {
	color: var(--cp-ink);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.cp-bill-sep { height: 1px; margin: 7px 0; background: var(--cp-sand-deep); }

.cp-bill-total span:first-child { font-size: 12.5px; font-weight: 650; color: var(--cp-ink); }

.cp-bill-total span:last-child {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -.015em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--cp-ink);
}

/* the address */

.cp-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 14px;
	margin-bottom: 10px;
	background: var(--cp-sand);
	border-radius: 12px;
}

.cp-row-main { flex: 1 1 auto; min-width: 0; }

.cp-row-label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 2px;
	font-size: 11.5px;
	color: var(--cp-muted);
}

.cp-row-label .cp-chip { margin-right: 0; padding: 2px 9px; }

.cp-row-value {
	display: block;
	min-width: 0;
	font-family: var(--cp-mono);
	font-size: 12.5px;
	line-height: 1.45;
	word-break: break-all;
	color: var(--cp-ink);
}

.cp-copy {
	flex: 0 0 auto;
	padding: 8px 15px;
	border: 0;
	border-radius: 999px;
	background: var(--cp-accent-soft);
	color: var(--cp-accent);
	font: inherit;
	font-size: 11.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.cp-copy:hover { background: var(--cp-accent); color: #fff; }
.cp-copy.is-done { background: var(--cp-accent); color: #fff; }

.cp-copy-amount { align-self: center; margin-left: auto; }

/* the code, on its own white tile so every scanner is happy */

.cp-qr { margin: 16px 0 0; text-align: center; }

.cp-qr-img {
	position: relative;
	display: block;
	width: -moz-fit-content;
	width: fit-content;
	margin: 0 auto;
	padding: 16px;
	background: #fff;
	border-radius: 16px;
	line-height: 0;
	box-shadow: 0 6px 18px rgba(44, 42, 38, .08);
}

/* Brackets at the four corners, the way a scanner frames a code. They sit on
   the white tile and never on the code itself, which stays black on white. */
.cp-qr-corner {
	position: absolute;
	width: 15px;
	height: 15px;
	border: 2px solid var(--cp-accent);
	opacity: .5;
}

.cp-qr-corner:nth-of-type(1) { top: 7px; left: 7px; border-right: 0; border-bottom: 0; border-radius: 5px 0 0 0; }
.cp-qr-corner:nth-of-type(2) { top: 7px; right: 7px; border-left: 0; border-bottom: 0; border-radius: 0 5px 0 0; }
.cp-qr-corner:nth-of-type(3) { bottom: 7px; left: 7px; border-right: 0; border-top: 0; border-radius: 0 0 0 5px; }
.cp-qr-corner:nth-of-type(4) { bottom: 7px; right: 7px; border-left: 0; border-top: 0; border-radius: 0 0 5px 0; }

.cp-qr svg { width: 180px; height: 180px; background: #fff; display: block; }

.cp-qr-note { margin: 10px 0 0; font-size: 12px; color: var(--cp-muted); }

.cp-qr-tabs {
	display: inline-flex;
	vertical-align: top;
	gap: 2px;
	margin: 0 0 12px;
	padding: 3px;
	border-radius: 999px;
	background: var(--cp-sand);
}

.cp-qr-tab {
	padding: 6px 14px;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--cp-muted);
	font: inherit;
	font-size: 11.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.cp-qr-tab[aria-pressed="true"] {
	background: var(--cp-surface);
	color: var(--cp-ink);
	box-shadow: 0 1px 3px rgba(44, 42, 38, .12);
}

.cp-open-wallet {
	display: inline-block;
	margin: 12px 0 0;
	padding: 11px 22px;
	border-radius: 999px;
	background: var(--cp-accent);
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
}

.cp-open-wallet:hover { background: var(--cp-accent-ink); color: #fff; }

.closetpay-body.is-tight .cp-open-wallet { margin-top: 9px; padding: 9px 18px; }

.cp-warn {
	margin: 16px 0 0;
	padding: 12px 14px;
	background: var(--cp-warn-bg);
	border-radius: 12px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--cp-warn-ink);
}

/* waiting */

.cp-status {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 14px 0 0;
	padding: 12px 14px;
	background: var(--cp-accent-soft);
	border-radius: 12px;
	font-size: 13px;
	color: var(--cp-accent-ink);
}

.cp-status.is-partial { background: var(--cp-warn-bg); color: var(--cp-warn-ink); }

.cp-status-text { flex: 1 1 auto; min-width: 0; }

.cp-status-title { display: block; font-weight: 650; }

.cp-status-note { display: block; margin-top: 1px; font-size: 11.5px; line-height: 1.4; opacity: .82; }

/* Something turning, so the customer can see the site is looking rather than
   wondering whether it noticed them at all. */
.cp-spinner {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	/* Neutral, not a tint of the accent: the accent is a shop setting and the
	   ring used to be a hardcoded sage that no longer matched anything. */
	border: 2px solid rgba(44, 42, 38, .14);
	border-top-color: var(--cp-accent);
	border-radius: 50%;
	animation: cp-spin .85s linear infinite;
}

/* The white half while a coin is being set up. */

.cp-switching {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 13px;
	min-height: 190px;
	padding: 30px 0;
}

.cp-switching .cp-spinner { flex: 0 0 26px; width: 26px; height: 26px; }

.cp-switching-note {
	margin: 0;
	font-size: 14px;
	color: var(--cp-muted);
	text-align: center;
}

.cp-status.is-partial .cp-spinner {
	border-color: rgba(122, 95, 34, .25);
	border-top-color: var(--cp-warn-ink);
}

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

.cp-timer {
	height: 4px;
	margin: 12px 0 0;
	background: var(--cp-sand);
	border-radius: 999px;
	overflow: hidden;
}

.cp-timer-bar {
	display: block;
	height: 100%;
	width: 100%;
	background: var(--cp-accent);
	border-radius: 999px;
	transition: width 1s linear;
}

.cp-tail {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 8px 0 0;
}

.cp-meta {
	margin: 0;
	font-size: 11.5px;
	color: var(--cp-muted);
	font-variant-numeric: tabular-nums;
}

.cp-link {
	display: inline-block;
	flex: 0 0 auto;
	margin: 0;
	padding: 7px 14px;
	border: 1px solid var(--cp-line);
	border-radius: 999px;
	background: none;
	color: var(--cp-muted);
	font: inherit;
	font-size: 12.5px;
	text-decoration: none;
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease;
}

.cp-link:hover { border-color: var(--cp-accent); color: var(--cp-accent); }

/* paid */

.cp-paid { text-align: center; padding: 26px 0 20px; }

.cp-tick { width: 74px; height: 74px; margin: 0 auto 16px; }

.cp-tick svg { display: block; width: 74px; height: 74px; }

/* Drawn rather than simply present, because a mark that arrives is read as an
   answer to what the customer just did. */
.cp-tick circle {
	fill: none;
	stroke: var(--cp-good);
	stroke-width: 3.5;
	stroke-dasharray: 201;
	stroke-dashoffset: 201;
	animation: cp-ring .5s ease-out forwards;
}

.cp-tick path {
	fill: none;
	stroke: var(--cp-good);
	stroke-width: 4.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 40;
	stroke-dashoffset: 40;
	animation: cp-check .32s .42s ease-out forwards;
}

@keyframes cp-ring {
	to { stroke-dashoffset: 0; }
}

@keyframes cp-check {
	to { stroke-dashoffset: 0; }
}

.cp-paid .cp-title { font-size: 24px; }

.cp-paid .cp-lead { margin: 0; }

.cp-received {
	display: inline-block;
	margin: 13px 0 0;
	padding: 8px 16px;
	border-radius: 999px;
	background: var(--cp-accent-soft);
	color: var(--cp-accent);
	font-size: 13px;
	font-weight: 650;
	font-variant-numeric: tabular-nums;
}

.cp-closing { margin: 16px 0 0; font-size: 11.5px; color: var(--cp-muted); }

.cp-foot {
	margin: 16px 0 0;
	font-size: 12.5px;
	color: var(--cp-muted);
	text-align: center;
}

.cp-foot a { color: var(--cp-accent); }

@media (prefers-reduced-motion: reduce) {
	.cp-spinner { animation: none; }
	.cp-tick circle, .cp-tick path { animation: none; stroke-dashoffset: 0; }
	.cp-net, .cp-timer-bar, .cp-copy { transition: none; }
}

@media (max-width: 480px) {
	.cp-card { padding: 20px 16px 18px; }
	.cp-amount-value { font-size: 28px; }
}

/* ------------------------------------------------- the panel over a checkout */

.closetpay-overlay {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px;
	background: rgba(44, 42, 38, .45);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	overflow-y: auto;
	animation: cp-fade .22s ease-out;
}

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

.closetpay-panel {
	position: relative;
	width: 100%;
	/* Wide enough for the coin rail and the white half side by side. Below the
	   stacking breakpoint the page inside goes to one column and this simply
	   stops being reached. */
	max-width: 920px;
	max-height: calc(100vh - 40px);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--cp-surface);
	border-radius: 20px;
	box-shadow: 0 26px 60px rgba(44, 42, 38, .3);
	animation: cp-rise .26s cubic-bezier(.2, .7, .3, 1);
}

/* dvh where it exists, so a phone's shrinking toolbar does not clip the panel */
@supports (max-height: 100dvh) {
	.closetpay-panel { max-height: calc(100dvh - 40px); }
}

@keyframes cp-rise {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}

.closetpay-close {
	position: absolute !important;
	top: 10px !important;
	right: 10px !important;
	left: auto !important;
	bottom: auto !important;
	z-index: 3;
	display: flex !important;
	align-items: center;
	justify-content: center;
	float: none !important;
	width: 32px !important;
	height: 32px !important;
	min-width: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: rgba(44, 42, 38, .09);
	color: var(--cp-ink);
	font-family: var(--cp-sans);
	font-size: 18px;
	line-height: 1;
	text-transform: none;
	box-shadow: none;
	cursor: pointer;
	transition: background .15s ease, transform .15s ease;
}

.closetpay-close:hover {
	background: rgba(44, 42, 38, .18);
	transform: rotate(90deg);
}

.closetpay-frame {
	display: block;
	flex: 1 1 auto;
	width: 100%;
	height: 560px;
	min-height: 0;
	border: 0;
	border-radius: 20px;
}

body.closetpay-open { overflow: hidden; }

@media (max-width: 560px) {
	.closetpay-overlay { padding: 8px; }
	.closetpay-panel { max-height: calc(100vh - 16px); border-radius: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.closetpay-overlay, .closetpay-panel { animation: none; }
	.closetpay-close:hover { transform: none; }
}

/* the same page when it is shown inside that panel */

.closetpay-body.is-embedded { background: var(--cp-surface); }

.closetpay-body.is-embedded .cp-wrap { padding: 0; max-width: none; }

/* One height for every step.
   The panel used to be sized to whatever was on screen, so it grew for the
   code and shrank for the tick, and three steps of one payment read as three
   different windows. Now the frame is a fixed height and the page fills it:
   the payment step reaches the bottom on its own, and the shorter steps sit in
   the middle of it, a little above true centre, which is where a reader looks
   first. The spacers collapse to nothing when the content is taller than the
   frame, so a small screen still scrolls instead of clipping its own top. */
.closetpay-body.is-embedded .cp-wrap {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* The split is the page when it is embedded: no rounding of its own, because
   the panel around it already carries the corners, and no second shadow. */
.closetpay-body.is-embedded .cp-split {
	flex: 1 1 auto;
	min-height: 0;
	border-radius: 0;
	box-shadow: none;
}

/* Side by side, the rail is pinned and only the white half scrolls.
 *
 * Letting the whole page scroll instead, which is what it did at first, pushed
 * the coin rail off the top the moment someone scrolled down to the QR, and
 * the rail being permanently in reach is the entire reason it was moved there.
 * The old worry about a centred layout clipping its own top does not apply:
 * this scrolls from the top, so nothing above the fold is ever unreachable.
 */
@media (min-width: 761px) {
	.closetpay-body.is-embedded .cp-wrap { height: 100vh; min-height: 0; }

	.closetpay-body.is-embedded .cp-split { height: 100%; }

	.closetpay-body.is-embedded .cp-main {
		min-height: 0;
		overflow-y: auto;
	}
}

.closetpay-body.is-embedded .cp-side { padding: 18px 16px 16px; }

.closetpay-body.is-embedded .cp-side-total { font-size: 27px; }

.closetpay-body.is-embedded .cp-card {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

.closetpay-body.is-embedded .cp-card::before { content: ''; flex: 0.8 1 0; }
.closetpay-body.is-embedded .cp-card::after { content: ''; flex: 1 1 0; }

/* The shop's support line belongs on the standalone page, not in a panel over
   the customer's own checkout, where it would only push the content off centre.
   PHP already leaves it out; this keeps the offline previews honest too. */
.closetpay-body.is-embedded .cp-foot { display: none; }

.closetpay-body.is-embedded .cp-card {
	border-radius: 0;
	box-shadow: none;
	padding: 14px 16px 11px;
}

/* Everything below keeps the type at full size and buys the height back from
   spacing instead, so the whole panel fits a laptop screen without scrolling. */
/* Right padding clears the panel's own close button, which floats over this
   corner. Without it the heading runs underneath the X. */
.closetpay-body.is-embedded .cp-main-head { padding: 13px 52px 11px 16px; font-size: 15.5px; }
.closetpay-body.is-embedded .cp-title { font-size: 21px; margin-bottom: 3px; }
.closetpay-body.is-embedded .cp-lead { margin-bottom: 11px; }
.closetpay-body.is-embedded .cp-nets { gap: 6px; }
.closetpay-body.is-embedded .cp-net { padding: 9px 12px; gap: 11px; }
.closetpay-body.is-embedded .cp-net-note { font-size: 11.5px; line-height: 1.35; }
.closetpay-body.is-embedded .cp-amount-block { padding: 0 0 10px; }
.closetpay-body.is-embedded .cp-bill { margin-top: 10px; padding: 9px 13px; }
.closetpay-body.is-embedded .cp-row { padding: 9px 13px; margin-bottom: 0; }
.closetpay-body.is-embedded .cp-qr { margin-top: 10px; }
.closetpay-body.is-embedded .cp-qr-img { padding: 10px; border-radius: 14px; }
.closetpay-body.is-embedded .cp-qr svg { width: 136px; height: 136px; }
.closetpay-body.is-embedded .cp-qr-tabs { margin-bottom: 9px; }
/* The two tabs already name themselves, so inside the panel the sentence under
   the code is a line of height spent on something the customer has read. */
.closetpay-body.is-embedded .cp-qr-note { display: none; }
.closetpay-body.is-embedded .cp-open-wallet { margin-top: 10px; padding: 10px 20px; }
.closetpay-body.is-embedded .cp-warn { margin-top: 10px; padding: 9px 12px; }
.closetpay-body.is-embedded .cp-status { margin-top: 9px; padding: 10px 13px; }
.closetpay-body.is-embedded .cp-timer { margin-top: 8px; }
.closetpay-body.is-embedded .cp-tail { margin-top: 7px; }
.closetpay-body.is-embedded .cp-paid { padding: 24px 0 18px; }

/* On a short screen the payment step is the tall one, so the code and the gaps
   give way first. The type never shrinks.
   These key off a class the checkout sets from the real window height, not off
   a media query, because the frame is sized to this page and a query on its own
   height would chase itself smaller and smaller. */
.closetpay-body.is-tight .cp-card { padding: 14px 16px 10px; }
.closetpay-body.is-tight .cp-amount-block { padding-bottom: 9px; }
.closetpay-body.is-tight .cp-bill { margin-top: 9px; padding: 8px 12px; }
.closetpay-body.is-tight .cp-bill-sep { margin: 5px 0; }
.closetpay-body.is-tight .cp-qr { margin-top: 9px; }
.closetpay-body.is-tight .cp-qr-img { padding: 9px; border-radius: 12px; }
.closetpay-body.is-tight .cp-qr svg { width: 118px; height: 118px; }
.closetpay-body.is-tight .cp-qr-note { display: none; }
.closetpay-body.is-tight .cp-qr-tabs { margin-bottom: 8px; }
.closetpay-body.is-tight .cp-warn { margin-top: 9px; padding: 8px 11px; }
.closetpay-body.is-tight .cp-status { margin-top: 8px; padding: 9px 12px; }
.closetpay-body.is-tight .cp-timer { margin-top: 7px; }
.closetpay-body.is-tight .cp-tail { margin-top: 6px; }
.closetpay-body.is-tight .cp-row { padding: 9px 12px; }
.closetpay-body.is-tight .cp-paid { padding: 18px 0 14px; }
.closetpay-body.is-tight .cp-tick { width: 62px; height: 62px; margin-bottom: 12px; }
.closetpay-body.is-tight .cp-tick svg { width: 62px; height: 62px; }

/* The warning stays even here. It is the line that stops someone sending the
   wrong coin, so the room comes out of the code and the gaps instead. */
.closetpay-body.is-tighter .cp-qr svg { width: 88px; height: 88px; }
.closetpay-body.is-tighter .cp-qr-img { padding: 7px; border-radius: 10px; }
.closetpay-body.is-tighter .cp-qr { margin-top: 7px; }
.closetpay-body.is-tighter .cp-warn { margin-top: 7px; padding: 7px 10px; }
.closetpay-body.is-tighter .cp-status { margin-top: 6px; padding: 8px 11px; }
.closetpay-body.is-tighter .cp-timer { margin-top: 6px; }
.closetpay-body.is-tighter .cp-tail { margin-top: 5px; }
.closetpay-body.is-tighter .cp-bill { margin-top: 7px; padding: 7px 11px; }
.closetpay-body.is-tighter .cp-bill-sep { margin: 4px 0; }
.closetpay-body.is-tighter .cp-card { padding: 10px 13px 8px; }
.closetpay-body.is-tighter .cp-nets { gap: 5px; }
.closetpay-body.is-tighter .cp-net { padding: 8px 11px; }
.closetpay-body.is-tighter .cp-amount-block { padding-bottom: 7px; }
.closetpay-body.is-tighter .cp-row { padding: 7px 11px; }
.closetpay-body.is-tighter .cp-open-wallet { margin-top: 7px; padding: 8px 16px; }

/* On the smallest phones the panel is the whole screen, so the decoration goes
   and the words stay. The bar only repeats the countdown beside it, and the
   line under the status only repeats what a turning spinner already says. */
.closetpay-body.is-tighter .cp-timer { display: none; }
.closetpay-body.is-tighter .cp-status-note { display: none; }
.closetpay-body.is-tighter .cp-paid { padding: 14px 0 10px; }
.closetpay-body.is-tighter .cp-tick { width: 54px; height: 54px; margin-bottom: 10px; }
.closetpay-body.is-tighter .cp-tick svg { width: 54px; height: 54px; }

/* ------------------------------------------- coin badges beside the checkout */

.closetpay-icons {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: 8px;
	vertical-align: middle;
}

.closetpay-icons img {
	width: 20px;
	height: 20px;
	max-width: none;
	box-shadow: none;
	border: 0;
	border-radius: 50%;
	display: inline-block;
}

.closetpay-label { display: inline-flex; align-items: center; }

/* the shop-side badge */

.closetpay-badge {
	margin: 0 0 14px;
	font-size: 14px;
	color: #857f76;
}

.closetpay-badge strong { color: #2c2a26; }