/**
 * File Name: payment-crypto-payment.css
 * File Location: /assets/css/payment-crypto-payment.css
 *
 * Purpose:
 * Compact premium checkout styling for DAF Marketplace Crypto Payment gateway.
 */

/* Main crypto card details */
.daf-payment-method-card--crypto .daf-crypto-payment-details {
	display: none;
	padding: 12px 12px 13px;
	border-top: 1px solid #e2e8f0;
	background: linear-gradient(180deg, #fbfef8 0%, #ffffff 100%);
}

.daf-payment-method-card--crypto:has(input[name="payment_method"]:checked) .daf-crypto-payment-details,
.daf-payment-method-card--crypto.is-selected .daf-crypto-payment-details {
	display: block;
	animation: dafCryptoFadeIn 0.22s ease both;
}

/* Select grid */
.daf-crypto-payment-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin: 0 0 8px;
}

.daf-crypto-field {
	min-width: 0;
}

.daf-crypto-field label,
.daf-crypto-wallet-address-wrap label,
.daf-crypto-tx-field label {
	display: block;
	margin: 0 0 4px;
	color: #0f172a;
	font-size: 10.5px;
	font-weight: 850;
	line-height: 1.2;
}

.daf-crypto-select,
.daf-crypto-tx-row input[type="text"] {
	width: 100%;
	min-height: 36px;
	border: 1px solid #d7dee8;
	border-radius: 9px;
	background: #ffffff;
	color: #0f172a;
	font-size: 11.5px;
	font-weight: 750;
	line-height: 1.3;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.035);
	transition:
		border-color 0.18s ease,
		box-shadow 0.18s ease,
		background-color 0.18s ease;
}

.daf-crypto-select {
	padding: 0 27px 0 9px;
	cursor: pointer;
}

.daf-crypto-tx-row input[type="text"] {
	padding: 0 9px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
	font-size: 10.5px;
	letter-spacing: 0;
}

.daf-crypto-select:focus,
.daf-crypto-tx-row input[type="text"]:focus {
	outline: none;
	border-color: #8cc63f;
	box-shadow: 0 0 0 3px rgba(140, 198, 63, 0.13);
}

/* Wallet box */
.daf-crypto-wallet-box {
	margin-top: 8px;
	padding: 10px;
	border: 1px solid rgba(140, 198, 63, 0.28);
	border-radius: 12px;
	background: #ffffff;
	box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

.daf-crypto-wallet-box[hidden],
.daf-crypto-field[hidden],
.daf-crypto-qr-wrap[hidden] {
	display: none !important;
}

/* Amount + network row */
.daf-crypto-wallet-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 7px;
	margin: 0 0 8px;
	padding: 8px 9px;
	border: 1px solid #e8eef5;
	border-radius: 10px;
	background: #f8fafc;
}

.daf-crypto-wallet-head span {
	display: block;
	color: #64748b;
	font-size: 9px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.035em;
}

.daf-crypto-wallet-head strong {
	display: block;
	margin-top: 1px;
	color: #0f172a;
	font-size: 14px;
	font-weight: 950;
	line-height: 1.1;
}

.daf-crypto-network-badge {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-height: 22px;
	max-width: 120px;
	padding: 4px 8px;
	border-radius: 999px;
	background: rgba(140, 198, 63, 0.16);
	color: #3f6212 !important;
	font-size: 9px !important;
	font-weight: 950 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Wallet address */
.daf-crypto-wallet-address-wrap {
	margin: 0 0 8px;
}

.daf-crypto-wallet-address-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 7px;
	align-items: stretch;
}

.daf-crypto-wallet-address-row code {
	display: flex;
	align-items: center;
	min-height: 36px;
	max-width: 100%;
	padding: 7px 8px;
	border: 1px solid #e2e8f0;
	border-radius: 9px;
	background: #f8fafc;
	color: #0f172a;
	font-size: 10px;
	font-weight: 800;
	line-height: 1.32;
	white-space: normal;
	word-break: break-all;
	overflow-wrap: anywhere;
}

/* Buttons */
.daf-crypto-copy-btn,
.daf-crypto-verify-btn,
.daf-crypto-qr-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	border: 0;
	border-radius: 9px;
	cursor: pointer;
	font-size: 10.5px;
	font-weight: 950;
	line-height: 1;
	white-space: nowrap;
	transition:
		transform 0.16s ease,
		box-shadow 0.16s ease,
		background-color 0.16s ease,
		opacity 0.16s ease;
}

.daf-crypto-copy-btn {
	padding: 0 10px;
	background: #0f172a;
	color: #ffffff;
	box-shadow: 0 7px 14px rgba(15, 23, 42, 0.14);
}

.daf-crypto-copy-btn:hover,
.daf-crypto-verify-btn:hover,
.daf-crypto-qr-toggle:hover {
	transform: translateY(-1px);
}

.daf-crypto-copy-btn:active,
.daf-crypto-verify-btn:active,
.daf-crypto-qr-toggle:active {
	transform: translateY(0);
}

.daf-crypto-copy-btn.is-copied {
	background: #8cc63f;
	color: #0f172a;
}

/* QR toggle */
.daf-crypto-qr-toggle-wrap {
	margin: 0 0 8px;
}

.daf-crypto-qr-toggle {
	width: 100%;
	gap: 6px;
	padding: 0 10px;
	border: 1px solid rgba(140, 198, 63, 0.34);
	background: rgba(140, 198, 63, 0.11);
	color: #315b0a;
	box-shadow: none;
}

.daf-crypto-qr-toggle .dashicons {
	width: 14px;
	height: 14px;
	font-size: 14px;
	line-height: 14px;
}

.daf-crypto-qr-toggle.is-open {
	background: #0f172a;
	border-color: #0f172a;
	color: #ffffff;
}

/* Compact QR */
.daf-crypto-qr-wrap {
	display: flex;
	justify-content: center;
	margin: 0 0 8px;
}

.daf-crypto-qr-box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 108px;
	min-height: 108px;
	padding: 6px;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	background: #ffffff;
	box-shadow: inset 0 0 0 4px #f8fafc;
	text-align: center;
}

.daf-crypto-qr-box canvas,
.daf-crypto-qr-box img,
.daf-crypto-qr-box svg {
	display: block;
	max-width: 94px;
	max-height: 94px;
}

.daf-crypto-qr-box span {
	color: #64748b;
	font-size: 10px;
	font-weight: 750;
	line-height: 1.3;
}

/* TX verify */
.daf-crypto-tx-field {
	margin-top: 0;
}

.daf-crypto-tx-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 7px;
	align-items: stretch;
}

.daf-crypto-verify-btn {
	padding: 0 11px;
	background: #8cc63f;
	color: #0f172a;
	box-shadow: 0 7px 14px rgba(140, 198, 63, 0.22);
}

.daf-crypto-verify-btn[disabled],
.daf-crypto-copy-btn[disabled],
.daf-crypto-qr-toggle[disabled] {
	cursor: not-allowed;
	opacity: 0.55;
	transform: none;
	box-shadow: none;
}

/* Status alerts */
.daf-crypto-status {
	display: none;
	margin-top: 8px;
	padding: 9px 10px;
	border-radius: 9px;
	font-size: 11.5px;
	font-weight: 750;
	line-height: 1.42;
}

.daf-crypto-status.is-visible {
	display: block;
}

.daf-crypto-status.is-info {
	border: 1px solid #bfdbfe;
	background: #eff6ff;
	color: #1e3a8a;
}

.daf-crypto-status.is-success {
	border: 1px solid #bbf7d0;
	background: #f0fdf4;
	color: #14532d;
}

.daf-crypto-status.is-error {
	border: 1px solid #fecaca;
	background: #fef2f2;
	color: #991b1b;
}

.daf-crypto-status.is-warning {
	border: 1px solid #fde68a;
	background: #fffbeb;
	color: #92400e;
}

/* Disable place order while crypto is selected but not verified */
.daf-checkout-form.is-crypto-payment-pending .daf-place-order-btn,
form.is-crypto-payment-pending .daf-place-order-btn,
.daf-checkout-form.is-crypto-payment-pending #daf-submit-checkout,
form.is-crypto-payment-pending #daf-submit-checkout {
	cursor: not-allowed;
	opacity: 0.58;
	filter: grayscale(0.12);
}

/* Copied toast */
.daf-crypto-toast {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 999999;
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: min(360px, calc(100vw - 32px));
	padding: 10px 12px;
	border: 1px solid rgba(140, 198, 63, 0.35);
	border-radius: 12px;
	background: #0f172a;
	color: #ffffff;
	font-size: 12px;
	font-weight: 850;
	line-height: 1.35;
	box-shadow: 0 18px 48px rgba(15, 23, 42, 0.28);
	opacity: 0;
	pointer-events: none;
	transform: translateY(10px);
	transition:
		opacity 0.22s ease,
		transform 0.22s ease;
}

.daf-crypto-toast.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.daf-crypto-toast::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 999px;
	background: #8cc63f;
	box-shadow: 0 0 0 4px rgba(140, 198, 63, 0.18);
}

/* Selected card polish */
.daf-payment-method-card--crypto.is-selected {
	border-color: rgba(140, 198, 63, 0.72);
	box-shadow: 0 12px 30px rgba(140, 198, 63, 0.10);
}

.daf-payment-method-card--crypto.is-selected .daf-payment-icon {
	color: #8cc63f;
}

/* Loading state */
.daf-payment-method-card--crypto.is-verifying .daf-crypto-verify-btn {
	position: relative;
	color: transparent;
	pointer-events: none;
}

.daf-payment-method-card--crypto.is-verifying .daf-crypto-verify-btn::after {
	content: "";
	position: absolute;
	width: 15px;
	height: 15px;
	border: 2px solid rgba(15, 23, 42, 0.25);
	border-top-color: #0f172a;
	border-radius: 50%;
	animation: dafCryptoSpin 0.8s linear infinite;
}

/* Verified state */
.daf-payment-method-card--crypto.is-verified {
	border-color: rgba(34, 197, 94, 0.58);
}

.daf-payment-method-card--crypto.is-verified .daf-crypto-wallet-box {
	border-color: rgba(34, 197, 94, 0.38);
	box-shadow: 0 12px 30px rgba(34, 197, 94, 0.08);
}

/* Sidebar-specific compact guard */
.daf-checkout-sidebar .daf-payment-method-card--crypto .daf-payment-method-label {
	padding-top: 12px;
	padding-bottom: 12px;
}

.daf-checkout-sidebar .daf-payment-method-card--crypto .daf-payment-method-content strong {
	font-size: 12.5px;
	line-height: 1.22;
}

.daf-checkout-sidebar .daf-payment-method-card--crypto .daf-payment-method-content small {
	font-size: 10px;
	line-height: 1.32;
}

.daf-checkout-sidebar .daf-payment-method-card--crypto .daf-payment-icon {
	width: 30px;
	height: 30px;
	font-size: 16px;
	line-height: 30px;
}

@keyframes dafCryptoFadeIn {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes dafCryptoSpin {
	to {
		transform: rotate(360deg);
	}
}

/* Responsive */
@media (max-width: 782px) {
	.daf-payment-method-card--crypto .daf-crypto-payment-details {
		padding: 12px;
	}

	.daf-crypto-payment-grid {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.daf-crypto-wallet-box {
		padding: 10px;
		border-radius: 12px;
	}

	.daf-crypto-wallet-head {
		grid-template-columns: 1fr;
		gap: 6px;
	}

	.daf-crypto-wallet-head strong {
		font-size: 14px;
	}

	.daf-crypto-network-badge {
		max-width: 100%;
		justify-self: flex-start;
	}

	.daf-crypto-wallet-address-row,
	.daf-crypto-tx-row {
		grid-template-columns: 1fr;
	}

	.daf-crypto-copy-btn,
	.daf-crypto-verify-btn,
	.daf-crypto-qr-toggle {
		width: 100%;
	}

	.daf-crypto-qr-box {
		width: 104px;
		min-height: 104px;
	}

	.daf-crypto-qr-box canvas,
	.daf-crypto-qr-box img,
	.daf-crypto-qr-box svg {
		max-width: 90px;
		max-height: 90px;
	}

	.daf-crypto-toast {
		right: 16px;
		bottom: 16px;
	}
}

@media (max-width: 480px) {
	.daf-payment-method-card--crypto .daf-crypto-payment-details {
		padding: 11px;
	}

	.daf-crypto-wallet-box {
		padding: 9px;
	}

	.daf-crypto-wallet-address-row code {
		font-size: 10px;
	}

	.daf-crypto-status {
		font-size: 11px;
	}

	.daf-crypto-toast {
		left: 12px;
		right: 12px;
		bottom: 12px;
		max-width: none;
	}
}