/*
 * Crypto Checkout – storefront styles (coin picker, notices inside the theme).
 * Fonts are inherited from the store theme on purpose.
 * The payment card itself lives on the standalone page: see payment.css.
 * The accent color comes from includes/brand.php (--cpg-accent).
 */

:root {
	--cpg-accent: #1FD1B2;
	--cpg-accent-2: #7B5CFF;
	--cpg-bg: #0B1026;
	--cpg-ink: #17211F;
	--cpg-muted: #5D6B68;
	--cpg-line: #D6DFDC;
	--cpg-soft: #F4F7F6;
	--cpg-warn: #8A4A12;
	--cpg-warn-bg: #FDF3E7;
	--cpg-ok: #1D7A46;
	--cpg-ok-bg: #E8F5EC;
	--cpg-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
}

/* ------------------------------------------------------------------ */
/* Coin logos (picker and payment page)                                */
/* Spans with background images, not <img>: themes and lazy-load        */
/* plugins restyle or swap <img> tags.                                  */
/* ------------------------------------------------------------------ */

.cpg-logo {
	position: relative;
	flex: 0 0 auto;
	display: inline-block;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: transparent;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	vertical-align: middle;
}

.cpg-logo--text {
	display: inline-grid;
	place-items: center;
	background: var(--cpg-coin, #56635F);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1;
}

/* Network badge on a token logo: USDT on Tron, USDC on Polygon, etc. */
.cpg-logo__badge {
	position: absolute;
	right: -3px;
	bottom: -3px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	box-shadow: 0 0 0 2px var(--cpg-ring, #fff);
}

/* ------------------------------------------------------------------ */
/* Coin picker (checkout): step 1 coin, step 2 network                 */
/* Light by default; .is-dark is set by checkout.js when the page       */
/* behind the picker is dark, or forced in the gateway settings.        */
/* ------------------------------------------------------------------ */

.cpg-picker {
	--p-text: #17211F;
	--p-muted: #5D6B68;
	--p-surface: #fff;
	--p-hover: #F6F8F8;
	--p-line: rgba(23, 33, 31, .14);
	--p-line-strong: rgba(23, 33, 31, .34);
	--p-selected: color-mix(in srgb, var(--cpg-accent-2) 6%, #fff);
	--p-field: #fff;
	--cpg-ring: var(--p-surface);

	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0;
	padding: 0;
	color: var(--p-text);
	text-align: left;
	/* Layout follows the width of the payment box, not the viewport. */
	container-type: inline-size;
}

.cpg-picker.is-dark {
	--p-text: #F1F3F8;
	--p-muted: rgba(231, 235, 245, .62);
	--p-surface: #232329;
	--p-hover: #2B2B33;
	--p-line: rgba(255, 255, 255, .12);
	--p-line-strong: rgba(255, 255, 255, .3);
	--p-selected: color-mix(in srgb, var(--cpg-accent-2) 16%, #1E1E24);
	--p-field: rgba(255, 255, 255, .06);
}

.cpg-picker *,
.cpg-picker *::before,
.cpg-picker *::after {
	box-sizing: border-box;
}

.cpg-picker [hidden] {
	display: none !important;
}

.cpg-picker .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.cpg-step {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.cpg-step__label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	color: var(--p-text);
	font-size: 1em;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
}

.cpg-step__num {
	display: inline-grid;
	place-items: center;
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--cpg-accent), var(--cpg-accent-2));
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

.cpg-picker__search {
	width: 100%;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--p-line);
	border-radius: 10px;
	background: var(--p-field);
	color: var(--p-text);
	font: inherit;
	box-shadow: none;
}

.cpg-picker__search::placeholder {
	color: var(--p-muted);
	opacity: 1;
}

.cpg-picker__search:focus {
	outline: 2px solid var(--cpg-accent-2);
	outline-offset: 1px;
	border-color: transparent;
}

/* Shared option surface: coin tiles and network rows. */
.cpg-tile,
.cpg-net {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0;
	border: 1px solid var(--p-line);
	border-radius: 12px;
	background: var(--p-surface);
	color: var(--p-text);
	cursor: pointer;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: normal;
	transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.cpg-tile:hover,
.cpg-net:hover {
	border-color: var(--p-line-strong);
	background-color: var(--p-hover);
}

/* The real radio stays in the DOM for keyboard and screen readers. */
.cpg-tile input[type="radio"],
.cpg-net input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.cpg-tile:has(input:focus-visible),
.cpg-net:has(input:focus-visible) {
	outline: 2px solid var(--cpg-accent-2);
	outline-offset: 2px;
}

/* Selected: gradient border drawn with two backgrounds. */
.cpg-tile.is-checked,
.cpg-tile:has(input:checked),
.cpg-net.is-checked,
.cpg-net:has(input:checked) {
	--cpg-ring: var(--p-selected);
	border: 2px solid transparent;
	background:
		linear-gradient(var(--p-selected), var(--p-selected)) padding-box,
		linear-gradient(135deg, var(--cpg-accent), var(--cpg-accent-2)) border-box;
	box-shadow: 0 6px 18px -10px color-mix(in srgb, var(--cpg-accent-2) 70%, transparent);
}

/* Dark logos (XRP, …) would melt into a dark surface: add a hairline ring. */
.cpg-picker.is-dark .cpg-logo:not(.cpg-logo--text) {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .16);
}

/* Step 1: coins. */
.cpg-coins {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
	gap: 8px;
}

.cpg-tile {
	flex-direction: column;
	justify-content: center;
	gap: 7px;
	min-height: 78px;
	padding: 12px 6px 10px;
}

/* 2px selected border: take the extra pixel from the padding so nothing jumps. */
.cpg-tile.is-checked,
.cpg-tile:has(input:checked) {
	padding: 11px 5px 9px;
}

.cpg-tile__ticker {
	font-size: .8125em;
	font-weight: 700;
	white-space: nowrap;
}

/* Step 2: networks. */
.cpg-nets {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
	gap: 8px;
}

.cpg-net {
	gap: 10px;
	min-height: 54px;
	padding: 9px 12px;
}

.cpg-net.is-checked,
.cpg-net:has(input:checked) {
	padding: 8px 11px;
}

.cpg-net .cpg-logo {
	width: 28px;
	height: 28px;
}

.cpg-net__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.cpg-net__chain {
	font-size: .875em;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cpg-net__std {
	margin-top: 1px;
	color: var(--p-muted);
	font-size: .75em;
	white-space: nowrap;
}

.cpg-picker__nomatch,
.cpg-picker__hint {
	margin: 0;
	color: var(--p-muted);
	font-size: .8125em;
}

.cpg-desc {
	margin: 0 0 14px;
	color: inherit;
	opacity: .75;
}

.cpg-empty {
	margin: 0;
	padding: 12px 14px;
	border-radius: 8px;
	background: var(--cpg-warn-bg);
	color: var(--cpg-warn);
}

/* Narrow payment box (phones, sidebars): 4 coins and 2 networks per row. */
@container (max-width: 380px) {
	.cpg-coins {
		grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
		gap: 6px;
	}

	.cpg-tile {
		gap: 5px;
		min-height: 64px;
		padding: 9px 4px 8px;
	}

	.cpg-tile.is-checked,
	.cpg-tile:has(input:checked) {
		padding: 8px 3px 7px;
	}

	.cpg-tile .cpg-logo {
		width: 28px;
		height: 28px;
	}

	.cpg-tile__ticker {
		font-size: .75em;
	}

	.cpg-nets {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 6px;
	}

	.cpg-net {
		gap: 8px;
		min-height: 48px;
		padding: 7px 9px;
	}

	.cpg-net.is-checked,
	.cpg-net:has(input:checked) {
		padding: 6px 8px;
	}

	.cpg-net .cpg-logo {
		width: 24px;
		height: 24px;
	}

	.cpg-net__chain {
		font-size: .8125em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cpg-tile,
	.cpg-net {
		transition: none;
	}
}

/* ------------------------------------------------------------------ */
/* "Payment pending" notice (order received / My account → order)      */
/* Colors inherit from the theme so it works on light and dark stores.  */
/* ------------------------------------------------------------------ */

.cpg-notice {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
	margin: 0 0 2em;
	padding: 16px 20px;
	border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
	border-left: 4px solid var(--cpg-accent);
	border-radius: 10px;
}

.cpg-notice__text {
	flex: 1 1 280px;
	margin: 0;
}

.cpg-notice__btn {
	flex: 0 0 auto;
}