/**
 * Xorro Wallet Payments frontend styles.
 */

.xdwp-gateway-icon {
	width: 32px;
	height: 32px;
	max-width: 32px;
	max-height: 32px;
	object-fit: contain;
	vertical-align: middle;
	display: inline-block;
}

.payment_method_xdwp img.xdwp-gateway-icon {
	max-width: 48px;
	max-height: 48px;
	width: auto;
	height: auto;
	object-fit: contain;
	vertical-align: middle;
}

.payment_method_xdwp .xdwp-coin-option img {
	max-width: none;
}

.xdwp-blocks-label {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.xdwp-desc {
	margin: 0 0 12px;
	line-height: 1.4;
}

/* —— Checkout coin picker (Cryptoniq icon tiles) —— */

.xdwp-coins {
	border: 0;
	margin: 0;
	padding: 0;
}

.xdwp-coins legend {
	padding: 0;
	margin: 0 0 8px;
	font-weight: 600;
}

.xdwp-coin-grid {
	display: flex;
	flex-wrap: wrap;
	margin: -5px;
}

.xdwp-coin-search {
	display: block;
	width: 100%;
	max-width: 320px;
	margin: 0 0 10px;
	padding: 0.45rem 0.6rem;
	border: 1px solid #d0d5dd;
	border-radius: 4px;
	font: inherit;
	font-size: 0.92rem;
	line-height: 1.3;
	background: #fff;
	color: #1d2939;
}

.xdwp-coin-none {
	margin: 6px 0 0;
	font-size: 0.9rem;
	color: #667085;
}

.xdwp-coin-option__label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 3px;
	font-size: 9px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.02em;
	text-align: center;
	color: #475467;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 0 2px;
}

.xdwp-coin-option--text .xdwp-coin-option__label {
	display: none;
}

.xdwp-coin-option[hidden] {
	display: none !important;
}

.xdwp-coin-option {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 52px;
	height: 62px;
	padding-bottom: 11px;
	margin: 5px;
	padding: 0;
	cursor: pointer;
	border: 1px solid #ddd;
	border-radius: 5px;
	background-color: #f7f7f7;
	background-image: none;
	overflow: hidden;
	transition: border-color 0.35s ease, background-color 0.35s ease;
}

.xdwp-coin-option input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	appearance: none;
}

.xdwp-coin-option:hover,
.xdwp-coin-option:has(input:checked),
.xdwp-coin-option.is-selected {
	border-color: #000;
}

.xdwp-coin-option__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.xdwp-coin-option__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.xdwp-coin-option__icon img {
	width: 28px !important;
	height: 28px !important;
	max-width: 28px !important;
	max-height: 28px !important;
	object-fit: contain !important;
	display: block;
}

.xdwp-coin-option__badge {
	position: absolute;
	top: -1px;
	right: -1px;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 5px 0 5px 0;
	pointer-events: none;
	z-index: 1;
}

.xdwp-coin-option__badge img {
	width: 14px !important;
	height: 14px !important;
	max-width: 14px !important;
	max-height: 14px !important;
	object-fit: contain !important;
	display: block;
}

.xdwp-coin-option--text {
	width: auto;
	min-width: 48px;
	height: auto;
	min-height: 54px;
	padding: 8px 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	text-align: center;
	line-height: 1.2;
	color: #111;
}

.xdwp-coin-option__text {
	display: block;
	pointer-events: none;
}

.xdwp-quote {
	margin-top: 15px;
	font-weight: 700;
}

/* —— Payment details box (classic layout) —— */

.xdwp-box {
	margin: 1.5rem 0;
	padding: 1.25rem 1.5rem;
	border: 1px solid #d0d5dd;
	border-radius: 8px;
	background: #fafbfc;
	max-width: 640px;
	box-sizing: border-box;
}

.xdwp-box__header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.xdwp-box__header h2 {
	margin: 0;
	font-size: 1.25rem;
}

.xdwp-box__timer {
	margin: 0;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: #b54708;
}

.xdwp-box__steps {
	/* Read once, after the amount and the address — so they sit a step back from those:
	   a little smaller, a little quieter, and clear of the reassurance above them. */
	margin: 0.9rem 0 1rem 1.1rem;
	padding: 0;
	color: #475467;
	font-size: 0.92rem;
	line-height: 1.55;
}

.xdwp-box__steps li + li {
	margin-top: 0.35rem;
}

.xdwp-box__row {
	display: grid;
	gap: 1rem;
}

.xdwp-box__field {
	display: grid;
	gap: 0.35rem;
}

.xdwp-box__label {
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	opacity: 0.7;
}

.xdwp-box__value {
	display: inline-block;
	padding: 0.45rem 0.6rem;
	background: #fff;
	border: 1px solid #e4e7ec;
	border-radius: 4px;
	word-break: break-all;
	font-size: 0.95rem;
}

/* Themes (e.g. Divi) restyle <code> in light grey or a different font: the amount and address are
   the most important text on the page, so keep them dark and monospaced whatever the theme does. */
.xdwp-box code.xdwp-box__value,
.xdwp-box span.xdwp-box__value {
	color: #101828 !important;
	background: #fff !important;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace !important;
	font-weight: 600;
	letter-spacing: 0;
	text-shadow: none;
}

.xdwp-box span.xdwp-box__value {
	font-family: inherit !important;
	font-weight: 400;
}

.xdwp-box .xdwp-copy.button-link {
	margin: 0;
	padding: 0;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: inherit;
	font: inherit;
	font-size: 0.9rem;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.xdwp-box__address {
	font-size: 0.85rem;
}

.xdwp-box__fiat {
	font-size: 0.9rem;
	opacity: 0.8;
}

.xdwp-box__wallet {
	margin: 0 0 0.75rem;
}

.xdwp-box .xdwp-open-wallet {
	display: inline-block;
	box-sizing: border-box;
	padding: 0.55rem 1rem;
	border-radius: 4px;
	background: #1d2733;
	color: #fff !important;
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
}

.xdwp-box .xdwp-open-wallet:hover,
.xdwp-box .xdwp-open-wallet:focus-visible {
	background: #2c3a4a;
	color: #fff !important;
}

/* Themes that style .button only inside their own wrappers leave this as a bare
   browser button, so give it the same look as the wallet button. */
.xdwp-box .xdwp-renew {
	display: inline-block;
	margin: 0;
	padding: 0.55rem 1rem;
	min-height: 0;
	border: 0;
	border-radius: 4px;
	background: #1d2733;
	color: #fff !important;
	font: inherit;
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

.xdwp-box .xdwp-renew:hover,
.xdwp-box .xdwp-renew:focus-visible {
	background: #2c3a4a;
	color: #fff !important;
}

.xdwp-box .xdwp-renew[disabled] {
	opacity: 0.6;
	cursor: default;
}

.xdwp-box__qr {
	margin-top: 1.25rem;
	text-align: center;
}

#xdwp-qrcode {
	display: inline-block;
	padding: 0.75rem;
	background: #fff;
	border-radius: 8px;
}

#xdwp-qrcode img,
#xdwp-qrcode canvas {
	display: block;
	max-width: 100%;
	height: auto;
}

.xdwp-box__uri {
	margin: 0.5rem 0 0;
}

.xdwp-box__hint {
	margin: 0.5rem 0 0;
	font-size: 0.85rem;
	opacity: 0.7;
}

/* An answer to "did my money arrive?" is not a hint — it is the most important sentence on
   the page once it appears, so it stops being grey and gets room of its own. The verdict is
   carried by the words; the border is only a second signal, never the only one. */
.xdwp-box__hint.is-paid,
.xdwp-box__hint.is-short,
.xdwp-box__hint.is-confirming,
.xdwp-box__hint.is-looking,
.xdwp-box__hint.is-busy,
.xdwp-box__hint.is-settled,
.xdwp-box__hint.is-bad_txid {
	padding: 0.6rem 0.75rem;
	border-left: 3px solid currentColor;
	border-radius: 4px;
	background: rgba(127, 127, 127, 0.08);
	font-size: 0.9rem;
	line-height: 1.45;
	opacity: 1;
}

.xdwp-box__hint.is-paid {
	color: #17663a;
}

.xdwp-box__hint.is-confirming {
	color: #14557a;
}

.xdwp-box__hint.is-short,
.xdwp-box__hint.is-bad_txid {
	color: #8a4b08;
}

/* The form is secondary to the address and the amount, so it stays quiet until used. */
.xdwp-sent-form {
	margin: 0.75rem 0 0;
}

.xdwp-sent-form__label {
	display: block;
	margin-bottom: 0.25rem;
	font-size: 0.85rem;
	font-weight: 600;
}

.xdwp-sent-form__input {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	padding: 0.5rem 0.6rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.85rem;
	line-height: 1.4;
}

.xdwp-sent-form__help {
	margin: 0.35rem 0 0;
	font-size: 0.8rem;
	line-height: 1.45;
	opacity: 0.75;
}

.xdwp-box__status {
	margin-top: 1rem;
	font-weight: 600;
}

.xdwp-box__success {
	color: #027a48;
	font-weight: 600;
}

.xdwp-box__partial {
	margin: 0 0 1rem;
	padding: 0.75rem 0.9rem;
	border-left: 3px solid #dc6803;
	background: #fffaeb;
	color: #7a2e0e;
	font-weight: 500;
}

.xdwp-box__error {
	color: #b42318;
	font-weight: 600;
}

.xdwp-box__line {
	display: flex;
	align-items: stretch;
	gap: 0.5rem;
	min-width: 0;
}

.xdwp-box__line .xdwp-box__value {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

/* Self-contained button look: themes reset or restyle .button very differently. */
.xdwp-box .xdwp-copy:not(.button-link) {
	/* The width is pinned in JS while it says "Copied!", so make that width mean the
	   whole button however a theme has styled it. */
	box-sizing: border-box;
	flex: 0 0 auto;
	margin: 0;
	padding: 0.4rem 0.9rem;
	min-height: 0;
	border: 1px solid #d0d5dd;
	border-radius: 4px;
	background: #fff;
	color: #1d2939;
	font: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	cursor: pointer;
}

.xdwp-box .xdwp-copy:not(.button-link):hover,
.xdwp-box .xdwp-copy:not(.button-link):focus-visible {
	border-color: #98a2b3;
	background: #f9fafb;
}

.xdwp-copy {
	justify-self: start;
	cursor: pointer;
}

.xdwp-copy.is-copied,
.xdwp-box .xdwp-copy.is-copied:not(.button-link) {
	border-color: #12b76a;
	color: #027a48;
}

.xdwp-pay-callout a {
	font-weight: 600;
}

.xdwp-box__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: center;
	margin-top: 1.1rem;
}

.xdwp-box .xdwp-sent {
	display: inline-block;
	margin: 0;
	padding: 0.55rem 1rem;
	min-height: 0;
	border: 1px solid #1d2733;
	border-radius: 4px;
	background: #fff;
	color: #1d2733 !important;
	font: inherit;
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1.2;
	cursor: pointer;
}

.xdwp-box .xdwp-sent:hover,
.xdwp-box .xdwp-sent:focus-visible {
	background: #f3f5f7;
}

.xdwp-box .xdwp-sent[disabled] {
	opacity: 0.6;
	cursor: default;
}

@media (max-width: 480px) {
	.xdwp-box__actions {
		display: grid;
		grid-template-columns: 1fr;
	}

	.xdwp-box .xdwp-open-wallet,
	.xdwp-box .xdwp-sent {
		width: 100%;
		text-align: center;
		/* A theme's button styles usually set this; a bare <a> does not. Without it `width:
		   100%` means "100% plus my padding", and the wallet button hung 31px past the edge of
		   the payment box — wider than the button directly beneath it. */
		box-sizing: border-box;
	}
}

/* The one mistake that cannot be undone gets the weight it deserves. */
.xdwp-box__network {
	margin: 0 0 1rem;
	padding: 0.7rem 0.9rem;
	border: 1px solid #f0b429;
	border-left-width: 4px;
	border-radius: 4px;
	background: #fff8e6;
	color: #7a4b00;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.5;
}

.xdwp-box__assurance {
	margin: 1rem 0 0;
	color: #475467;
	font-size: 0.88rem;
	line-height: 1.5;
}

/* ---- Keyboard, screen readers and right-to-left ------------------------ */

/*
 * The coin tiles are real radios, so arrow keys already work — but the input itself is
 * invisible, so without this a keyboard user can move through the grid with no idea where
 * they are.
 */
.xdwp-coin-option:focus-within {
	outline: 2px solid #1d2733;
	outline-offset: 2px;
	border-color: #1d2733;
}

@media (forced-colors: active) {
	.xdwp-coin-option:focus-within {
		outline: 2px solid CanvasText;
	}
}

/* Anything that can be clicked needs to be big enough to hit (WCAG 2.5.8). */
.xdwp-box .xdwp-copy:not(.button-link),
.xdwp-box .xdwp-sent,
.xdwp-box .xdwp-renew,
.xdwp-box .xdwp-open-wallet {
	min-height: 24px;
}

.xdwp-box .xdwp-copy.button-link,
.xdwp-box__uri .button-link {
	display: inline-block;
	min-height: 24px;
	padding: 4px 0;
}

/* A mirrored QR code cannot be scanned, and an address read right-to-left is the wrong
   address — both stay left-to-right whatever the page direction. */
.xdwp-box__qr,
#xdwp-qrcode,
.xdwp-box__address,
.xdwp-box code.xdwp-box__value {
	direction: ltr;
}

.xdwp-box__qr-summary {
	cursor: pointer;
	font-size: 0.92rem;
	font-weight: 600;
	color: #1d2733;
	padding: 6px 0;
	min-height: 24px;
}

/* Open on a desktop, where the summary is just a label rather than a control. */
.xdwp-box__qr[open] .xdwp-box__qr-summary {
	margin-bottom: 0.5rem;
}

.xdwp-box__qr-plain {
	margin: 0.6rem 0 0;
	font-size: 0.85rem;
	color: #475467;
	line-height: 1.5;
}

.xdwp-box__qr-plain label {
	display: inline-flex;
	gap: 0.4rem;
	align-items: flex-start;
	cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
	.xdwp-coin-option {
		transition: none;
	}
}

/* ---- Paying from a wallet in this browser ----------------------------- */

.xdwp-wallet-pay:empty {
	display: none;
}

.xdwp-wallet-pay {
	margin: 1rem 0 0;
	padding: 0.9rem 1rem;
	border: 1px solid #e4e7ec;
	border-radius: 6px;
	background: #fff;
}

.xdwp-wallet-lead {
	margin: 0 0 0.6rem;
	font-size: 0.9rem;
	color: #475467;
}

.xdwp-box .xdwp-wallet-button {
	display: inline-flex;
	gap: 0.45rem;
	align-items: center;
	margin: 0 0.5rem 0.5rem 0;
	padding: 0.5rem 0.9rem;
	min-height: 24px;
	border: 1px solid #1d2733;
	border-radius: 4px;
	background: #fff;
	color: #1d2733 !important;
	font: inherit;
	font-weight: 600;
	font-size: 0.92rem;
	line-height: 1.2;
	cursor: pointer;
}

.xdwp-box .xdwp-wallet-button:hover,
.xdwp-box .xdwp-wallet-button:focus-visible {
	background: #f3f5f7;
}

.xdwp-wallet-button img {
	width: 20px !important;
	height: 20px !important;
	border-radius: 4px;
}

.xdwp-wallet-status {
	margin: 0.4rem 0 0;
	font-size: 0.88rem;
	line-height: 1.5;
	color: #475467;
}

.xdwp-wallet-status.is-error {
	color: #b42318;
}

/* ---- Refund claim page ------------------------------------------------- */

.xdwp-claim-wrap {
	display: flex;
	justify-content: center;
	padding: 2rem 1rem;
}

.xdwp-claim {
	width: 100%;
	max-width: 32rem;
}

.xdwp-claim__title {
	margin: 0 0 0.75rem;
}

.xdwp-claim__lead {
	margin: 0 0 1rem;
	line-height: 1.6;
}

.xdwp-claim__facts {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.3rem 1rem;
	margin: 0 0 1.25rem;
	padding: 0.9rem 1rem;
	border: 1px solid rgba(127, 127, 127, 0.3);
	border-radius: 8px;
}

.xdwp-claim__facts dt {
	margin: 0;
	font-weight: 600;
}

.xdwp-claim__facts dd {
	margin: 0;
}

.xdwp-claim__form {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.xdwp-claim__label {
	font-weight: 600;
}

.xdwp-claim__form input[type="text"] {
	width: 100%;
	padding: 0.6rem 0.7rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.95rem;
}

.xdwp-claim__button {
	align-self: flex-start;
	min-height: 2.75rem;
}

.xdwp-claim__hint {
	margin: 0;
	font-size: 0.85rem;
	opacity: 0.75;
}

.xdwp-claim__error,
.xdwp-claim__notice {
	margin: 0 0 1rem;
	padding: 0.7rem 0.85rem;
	border-radius: 6px;
	border-left: 3px solid currentColor;
}

.xdwp-claim__error {
	color: #8a1f11;
	background: rgba(138, 31, 17, 0.08);
}

.xdwp-claim__notice {
	color: #1a6a32;
	background: rgba(26, 106, 50, 0.08);
}

.xdwp-claim__txid {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	overflow-wrap: anywhere;
}

/* Test mode says so on the payment page itself. Louder than the ordinary network warning,
   because a real coin sent to a test address is gone and nobody can undo it. The words carry
   the meaning; the colour is only a second signal. */
.xdwp-box__network--test {
	border-left: 4px solid #8a4b08;
	background: rgba(138, 75, 8, 0.08);
	color: #8a4b08;
	font-weight: 600;
}

/* Finger-sized controls where a finger is what is used.
   Measured on a phone: the copy buttons, "I have sent the payment", the transaction-id field and
   the QR toggle came out at 28-39px. That clears the WCAG 2.5.8 minimum (24px, set above) but
   sits under what Apple (44pt) and Android (48dp) ask for, and these are the controls a customer
   taps one-handed with money already sent.

   The selectors mirror the 24px block above exactly, :not() and all. A plain `.xdwp-box
   .xdwp-copy` loses to `.xdwp-box .xdwp-copy:not(.button-link)` on specificity no matter how
   late it appears, which is why the copy buttons stayed at 38px on the first attempt here.

   Scoped to coarse pointers as well as narrow screens: a phone in landscape is still a phone. */
@media (max-width: 600px), (pointer: coarse) {
	.xdwp-box .xdwp-copy:not(.button-link),
	.xdwp-box .xdwp-copy.button-link,
	.xdwp-box__uri .button-link,
	.xdwp-box .xdwp-sent,
	.xdwp-box .xdwp-renew,
	.xdwp-box .xdwp-open-wallet,
	.xdwp-box .xdwp-wallet-button,
	.xdwp-sent-form__input {
		min-height: 44px;
	}

	.xdwp-box .xdwp-copy:not(.button-link),
	.xdwp-box .xdwp-copy.button-link,
	.xdwp-box__uri .button-link,
	.xdwp-box .xdwp-sent,
	.xdwp-box .xdwp-renew,
	.xdwp-box .xdwp-open-wallet {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* Deliberately not inline-flex: a <summary> needs its list-item display to keep the
	   disclosure triangle, which is the only thing telling the customer whether the QR is
	   open. Padding gives it the tap height instead. */
	.xdwp-box__qr-summary {
		min-height: 44px;
		padding-top: 11px;
		padding-bottom: 11px;
	}
}