/**
 * 91APP Credit Card Payment Styles
 * For checkout page tokenization (saved payment methods) support
 *
 * @package wpbr-91app-payment
 */

/* ==========================================================================
   Saved Payment Methods
   ========================================================================== */

/* Hide list markers that some themes (like Blocksy) add */
.woocommerce-SavedPaymentMethods {
	list-style: none !important;
}

.woocommerce-SavedPaymentMethods-token,
.woocommerce-SavedPaymentMethods-new {
	list-style: none !important;
}

.woocommerce-SavedPaymentMethods-token::before,
.woocommerce-SavedPaymentMethods-new::before,
.woocommerce-SavedPaymentMethods-token::marker,
.woocommerce-SavedPaymentMethods-new::marker {
	display: none !important;
	content: none !important;
}

/* ==========================================================================
   New Card Form (91APP SDK)
   ========================================================================== */

.wpbr-91app-new-card-form {
	margin-top: 1em;
}

.wpbr-91app-card-field {
	margin-bottom: 1em;
}

.wpbr-91app-card-field label {
	display: block;
	margin-bottom: 0.5em;
	font-weight: 600;
}

.wpbr-91app-card-field label .required {
	color: #d63638;
	text-decoration: none;
}

/* SDK input container */
.wpbr-91app-card-field > div {
	position: relative;
}

/* Card details row (expiry + CVC side by side) */
.wpbr-91app-card-details {
	display: flex;
	gap: 1em;
	margin-bottom: 1em;
}

.wpbr-91app-card-details .wpbr-91app-card-field {
	flex: 1;
	margin-bottom: 0;
}

/* ==========================================================================
   Message Container
   ========================================================================== */

#wpbr-91app-credit-messages {
	margin-top: 1em;
}

#wpbr-91app-credit-messages .woocommerce-error,
#wpbr-91app-credit-messages .woocommerce-info,
#wpbr-91app-credit-messages .woocommerce-message {
	padding: 1em;
	margin-bottom: 1em;
	border-radius: 4px;
	list-style: none;
}

#wpbr-91app-credit-messages .woocommerce-error {
	background-color: #fcf0f1;
	border-left: 4px solid #d63638;
	color: #3c434a;
}

#wpbr-91app-credit-messages .woocommerce-info {
	background-color: #e5f5fa;
	border-left: 4px solid #00a0d2;
	color: #3c434a;
}

#wpbr-91app-credit-messages .woocommerce-message {
	background-color: #edfaef;
	border-left: 4px solid #00a32a;
	color: #3c434a;
}

/* ==========================================================================
   Save Payment Method Checkbox
   ========================================================================== */

/* No custom styling - using WooCommerce and theme defaults */

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 768px) {
	.wpbr-91app-card-details {
		flex-direction: column;
		gap: 0;
	}
	
	.wpbr-91app-card-details .wpbr-91app-card-field {
		margin-bottom: 1em;
	}
}

/* ==========================================================================
   Hide/Show Logic
   ========================================================================== */

/* When saved card is selected, this will be hidden by JavaScript */
#wpbr-91app-credit-form.hidden {
	display: none;
}

/* ==========================================================================
   Loading State
   ========================================================================== */

.wpbr-91app-loading {
	opacity: 0.6;
	pointer-events: none;
}

.wpbr-91app-loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border: 2px solid #0071a1;
	border-top-color: transparent;
	border-radius: 50%;
	animation: wpbr-91app-spin 0.6s linear infinite;
}

@keyframes wpbr-91app-spin {
	to {
		transform: rotate(360deg);
	}
}