/**
 * xMoney WooCommerce Checkout Styles
 */

/* Payment method icon in checkout */
.payment_method_xmoney_wc > label img,
.wc_payment_method.payment_method_xmoney_wc img.xmoney-icon,
.wc-block-components-radio-control__option img {
	max-height: 24px !important;
	width: auto !important;
	height: auto !important;
	vertical-align: middle;
}

/* Classic checkout - move icon to left of text */
.wc_payment_method.payment_method_xmoney_wc > label,
label[for="payment_method_xmoney_wc"] {
	display: inline-flex !important;
	align-items: center;
	flex-direction: row-reverse;
	justify-content: flex-end !important;
	gap: 8px;
	width: 100%;
	text-align: left !important;
}

.wc_payment_method.payment_method_xmoney_wc > label img,
label[for="payment_method_xmoney_wc"] img {
	max-height: 24px !important;
	max-width: 80px !important;
}

/* Blocks checkout - move icon to left of text */
.wc-block-components-payment-method-label {
	display: inline-flex !important;
	align-items: center;
	flex-direction: row-reverse;
	gap: 8px;
}

.wc-block-components-payment-method-label img {
	max-height: 24px !important;
	width: auto !important;
}

.xmoney-wc-payment-form-container {
	min-height: 0;
	margin: 0;
	padding: 0;
}

/* Remove any extra spacing from the xMoney iframe/form */
#xmoney-wc-payment-form {
	margin: 0;
	padding: 0;
}

#xmoney-wc-payment-form > * {
	margin: 0 !important;
}

/* Skeleton Loading State */
.xmoney-wc-payment-form-container:not(.xmoney-ready) {
	position: relative;
	min-height: 320px;
}

/* Simple skeleton with pulse animation */
.xmoney-wc-payment-form-container:not(.xmoney-ready)::after {
	content: '';
	position: absolute;
	inset: 0;
	background: 
		/* Header */
		linear-gradient(#e5e5e5 16px, transparent 0) 16px 16px / 140px 16px no-repeat,
		/* Cardholder label */
		linear-gradient(#ebebeb 12px, transparent 0) 16px 56px / 110px 12px no-repeat,
		/* Cardholder input */
		linear-gradient(#f5f5f5 50px, transparent 0) 16px 76px / calc(100% - 32px) 50px no-repeat,
		/* Card number label */
		linear-gradient(#ebebeb 12px, transparent 0) 16px 146px / 90px 12px no-repeat,
		/* Card number input */
		linear-gradient(#f5f5f5 50px, transparent 0) 16px 166px / calc(100% - 32px) 50px no-repeat,
		/* Expiry label */
		linear-gradient(#ebebeb 12px, transparent 0) 16px 236px / 100px 12px no-repeat,
		/* Expiry input */
		linear-gradient(#f5f5f5 50px, transparent 0) 16px 256px / calc(50% - 24px) 50px no-repeat,
		/* CVV label */
		linear-gradient(#ebebeb 12px, transparent 0) calc(50% + 8px) 236px / 40px 12px no-repeat,
		/* CVV input */
		linear-gradient(#f5f5f5 50px, transparent 0) calc(50% + 8px) 256px / calc(50% - 24px) 50px no-repeat;
	border-radius: 8px;
	animation: xmoney-pulse 1.5s ease-in-out infinite;
}

@keyframes xmoney-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

/* Ensure form is visible */
#xmoney-wc-payment-form {
	opacity: 1;
	transition: opacity 0.3s ease;
}

#xmoney-wc-payment-form.xmoney-ready {
	opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.xmoney-wc-payment-form-container {
		padding: 15px;
		margin: 15px 0;
	}
}

/* WooCommerce Blocks Checkout Styles */
.xmoney-wc-blocks-wrapper {
	min-height: 200px;
}

.xmoney-wc-blocks-form {
	min-height: 200px;
	position: relative;
}

.xmoney-wc-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px;
	color: #666;
}

.xmoney-wc-error {
	padding: 16px;
	background: #fee;
	border: 1px solid #fcc;
	border-radius: 4px;
	margin-bottom: 16px;
}

.xmoney-wc-label {
	display: flex;
	align-items: center;
}

.xmoney-wc-icon {
	height: 24px;
	margin-right: 8px;
}

/* Test mode notice */
.xmoney-wc-test-notice {
	padding: 16px 20px;
	margin-bottom: 16px;
	background: #f6f7f7;
	border-left: 4px solid #dba617;
	color: #1e1e1e;
	font-size: 14px;
	line-height: 1.5;
}

.xmoney-wc-test-notice strong {
	font-weight: 600;
}

.xmoney-wc-test-icon {
	display: none;
}