/**
 * Checkout & payment method styling
 */

/* Payment badges */
.yunfanzhi-payment-badges {
	margin-bottom: 20px;
	padding: 16px;
	background: var(--color-bg-alt);
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-border);
}

.payment-badges-title {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-text-muted);
}

.payment-badges-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.payment-badge {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 600;
	border-radius: 6px;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	color: var(--color-text);
}

.payment-badge--alipay {
	background: #1677ff;
	border-color: #1677ff;
	color: #fff;
}

.payment-badge--wechat {
	background: #07c160;
	border-color: #07c160;
	color: #fff;
}

.payment-badge--stripe {
	background: #635bff;
	border-color: #635bff;
	color: #fff;
}

.payment-badge--visa {
	background: #1a1f71;
	border-color: #1a1f71;
	color: #fff;
}

.payment-badge--mastercard {
	background: #eb001b;
	border-color: #eb001b;
	color: #fff;
}

.payment-badge--unionpay {
	background: #e21836;
	border-color: #e21836;
	color: #fff;
}

.payment-badge--paypal {
	background: #003087;
	border-color: #003087;
	color: #fff;
}

.payment-badge--amex {
	background: #006fcf;
	border-color: #006fcf;
	color: #fff;
}

.payment-badge--applepay {
	background: #000;
	border-color: #000;
	color: #fff;
}

.payment-badge--googlepay {
	background: #4285f4;
	border-color: #4285f4;
	color: #fff;
}

/* WooCommerce payment methods */
.woocommerce-checkout #payment,
.woocommerce #payment {
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 20px;
}

.woocommerce-checkout #payment ul.payment_methods,
.woocommerce #payment ul.payment_methods {
	border-bottom: 1px solid var(--color-border);
	padding-bottom: 16px;
	margin-bottom: 16px;
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

.woocommerce-checkout #payment ul.payment_methods li,
.woocommerce #payment ul.payment_methods li {
	margin-bottom: 12px;
	padding: 12px 14px;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	transition: border-color var(--transition), box-shadow var(--transition);
}

.woocommerce-checkout #payment ul.payment_methods li input[type="radio"]:checked + label,
.woocommerce #payment ul.payment_methods li.wc_payment_method input[type="radio"]:checked ~ label {
	font-weight: 600;
	color: var(--color-primary);
}

.woocommerce-checkout #payment ul.payment_methods li:hover,
.woocommerce #payment ul.payment_methods li:hover {
	border-color: var(--color-primary);
}

.woocommerce-checkout #payment div.payment_box,
.woocommerce #payment div.payment_box {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 14px;
	margin-top: 10px;
	font-size: 14px;
	color: var(--color-text-muted);
}

.woocommerce-checkout #payment div.payment_box::before,
.woocommerce #payment div.payment_box::before {
	border-bottom-color: var(--color-border);
}

/* Stripe / card fields */
.woocommerce-checkout .wc-stripe-elements-field,
.woocommerce-checkout #stripe-payment-data .StripeElement,
.woocommerce-checkout .payment_method_stripe fieldset {
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 12px;
	background: var(--color-bg);
}

.woocommerce-checkout #place_order,
.woocommerce #place_order {
	width: 100%;
	padding: 16px 24px;
	font-size: 16px;
	font-weight: 700;
	background: var(--color-primary);
	border: none;
	border-radius: var(--radius);
	color: #fff;
	cursor: pointer;
	transition: background var(--transition), transform var(--transition);
	margin-top: 8px;
}

.woocommerce-checkout #place_order:hover,
.woocommerce #place_order:hover {
	background: var(--color-primary-dark);
}

.checkout-secure-notice {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 12px;
	font-size: 13px;
	color: var(--color-text-muted);
	text-align: center;
}

.checkout-secure-notice svg {
	color: var(--color-success);
	flex-shrink: 0;
}

.woocommerce-cart .yunfanzhi-payment-badges {
	margin-top: 24px;
}

@media (max-width: 768px) {
	.payment-badges-list {
		gap: 6px;
	}

	.payment-badge {
		font-size: 11px;
		padding: 5px 10px;
	}
}