/*
 * Crypto payment UI (mu-plugins/ph-manual-gateways.php): network picker at checkout and
 * the thank-you panel. Split out of the old checkout.css, whose generic Woo rules fought the
 * source/Fluid Checkout styling.
 */
/* Minimum-order notice under cart totals */
.ph-min-order-notice {
	background: #fff4e5;
	border: 1px solid var(--ph-color-orange);
	color: #7a4a00;
	border-radius: 8px;
	padding: 1em 1.2em;
	margin: 1rem 0;
}

/* Crypto network radio list — checkout */
.ph-crypto-network-list {
	list-style: none;
	margin: 1em 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.ph-crypto-network-option {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	border: 1px solid #e2e2e2;
	border-radius: 10px;
	padding: 0.9em 1.1em;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

/* Two mechanisms per spec: CSS-only :has(), AND a JS-toggled .is-selected class — Woo
   replaces the whole payment box over AJAX on updated_checkout, which kills one-time JS
   bindings but not this CSS rule; the JS class covers browsers/paths where the box is
   rebuilt without a fresh :checked being registered in time. */
.ph-crypto-network-option:has(input:checked),
.ph-crypto-network-option.is-selected {
	border-color: var(--ph-color-accent);
	background: rgba(109, 39, 119, 0.06);
}

.ph-crypto-network-option input[type="radio"] {
	accent-color: var(--ph-color-accent);
	width: 18px;
	height: 18px;
	flex: none;
}

.ph-crypto-network-option:focus-within {
	outline: 2px solid var(--ph-color-accent);
	outline-offset: 2px;
}

.ph-crypto-network-mark { flex: none; display: flex; }

.ph-crypto-network-label { display: flex; align-items: center; gap: 0.5em; font-weight: 500; }

.ph-network-plain { color: var(--ph-color-muted); font-weight: 400; font-size: 13px; }

.ph-network-chip {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	padding: 0.15em 0.55em;
	border-radius: 999px;
	color: #fff;
	background: var(--chip-color, var(--ph-color-muted));
}

/* Crypto payment panel — thank-you page + email (shared markup, email gets inline-safe subset via CSS not relied upon) */
.ph-crypto-panel {
	border: 1px solid #e2e2e2;
	border-radius: 14px;
	padding: 1.75rem;
	max-width: 480px;
	margin: 2rem auto;
	text-align: center;
}

.ph-crypto-panel-badge {
	display: inline-block;
	background: var(--ph-color-amber);
	color: #3a2900;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	padding: 0.3em 0.9em;
	border-radius: 999px;
	margin-bottom: 1rem;
}

.ph-crypto-panel-head {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	justify-content: center;
	margin-bottom: 1rem;
	text-align: left;
}

.ph-crypto-wrong-network-warning {
	color: var(--ph-color-error);
	font-size: 12px;
	margin-top: 0.3em;
	max-width: 320px;
}

.ph-crypto-qr {
	display: block;
	margin: 0 auto 1.25rem;
	border: 1px solid #eee;
	border-radius: 8px;
	padding: 8px;
}

.ph-crypto-amount-row, .ph-crypto-address-row {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5em;
	margin-bottom: 1rem;
}

.ph-crypto-amount-label { font-size: 12px; color: var(--ph-color-muted); text-transform: uppercase; letter-spacing: 0.04em; }

.ph-crypto-amount-row code, .ph-crypto-address-row code {
	font-family: monospace;
	font-size: 16px;
	background: #f5f5f5;
	border-radius: 8px;
	padding: 0.6em 1em;
	word-break: break-all;
	max-width: 100%;
}

.ph-crypto-fiat-note { color: #555; font-size: 14px; margin-bottom: 1rem; }

.ph-copy-btn {
	background: var(--ph-color-text);
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 0.4em 1em;
	font-size: 13px;
	cursor: pointer;
}

.ph-copy-btn.is-copied { background: var(--ph-color-success); }

.ph-crypto-final-step {
	border-top: 1px solid #eee;
	padding-top: 1.25rem;
	margin-top: 0.5rem;
	font-size: 14px;
}

.ph-crypto-final-step .button { display: inline-block; margin-top: 0.75em; }