/* ============================================================
   LOYALTY POINTS BANNER - WOOCOMMERCE BLOCKS COMPATIBILITY
   ============================================================
   NOTE: Banner styling inherits from active theme
   Only functional CSS included (loading states, animations)
   Red color for extra points is inline style (business requirement)
   ============================================================ */

/* WooCommerce Block Loading Spinner - Functional Only */

/* Keep global blockUI styles for WooCommerce blocks (they need to work outside our wrapper) */
.blockUI.blockOverlay {
	background: rgba(255, 255, 255, .8) !important;
	z-index: 10000 !important;
}

.wp-block-woocommerce-cart-order-summary-block.blockUI.blockOverlay, .wp-block-woocommerce-cart-totals-block.blockUI.blockOverlay, .wp-block-woocommerce-cart-items-block.blockUI.blockOverlay {
	z-index: 10000 !important;
}

.wp-block-woocommerce-cart-order-summary-block.blockUI.blockOverlay ~ *, .wp-block-woocommerce-cart-order-summary-block.blockUI.blockOverlay * {
	pointer-events: none !important;
}

.wp-block-woocommerce-cart-order-summary-block.blockUI.blockOverlay .wc-block-components-checkout-button, .wp-block-woocommerce-cart-order-summary-block.blockUI.blockOverlay a[href*="checkout"] {
	pointer-events: none !important;
	opacity: .5 !important;
}

/* Loyalty banner loading spinner - scoped to our context */
#gr_checkout_redeem_lable .gr-loading-spinner, .gr_apply_discount .gr-loading-spinner {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 60px !important;
}

#gr_checkout_redeem_lable .gr-loading-spinner .spinner, .gr_apply_discount .gr-loading-spinner .spinner {
	border: 3px solid #f3f3f3 !important;
	border-top: 3px solid #0073aa !important;
	border-radius: 50% !important;
	width: 32px !important;
	height: 32px !important;
	animation: gr-spin .8s linear infinite !important;
	display: block !important;
	margin: 0 auto !important;
	background: transparent !important;
}

/* BlockUI spinner within WooCommerce blocks - must remain global for WooCommerce */
.blockUI .spinner {
	border: 3px solid #f3f3f3 !important;
	border-top: 3px solid #0073aa !important;
	border-radius: 50% !important;
	width: 32px !important;
	height: 32px !important;
	animation: gr-spin .8s linear infinite !important;
	display: block !important;
	margin: 0 auto !important;
	background: transparent !important;
}

@keyframes gr-spin {
	0% {
		transform: rotate(0deg);
	}
	
	100% {
		transform: rotate(360deg);
	}
}

.blockUI .gr-loading-spinner, .blockUI .spinner {
	visibility: visible !important;
	opacity: 1 !important;
	display: block !important;
}

/* Button Loading States - Functional Only */

/* Scoped to loyalty banner forms to prevent conflicts */
#gr_checkout_redeem_lable .gr-apply-button-wrapper, .gr_apply_discount .gr-apply-button-wrapper {
	position: relative !important;
	display: inline-block !important;
}

#gr_checkout_redeem_lable .gr-apply-button-wrapper.is-loading, .gr_apply_discount .gr-apply-button-wrapper.is-loading {
	opacity: .7 !important;
}

#gr_checkout_redeem_lable .gr-apply-button-wrapper .gr-spinner, .gr_apply_discount .gr-apply-button-wrapper .gr-spinner {
	position: absolute !important;
	left: 12px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 16px !important;
	height: 16px !important;
	border: 2px solid #fff !important;
	border-top-color: transparent !important;
	border-radius: 50% !important;
	animation: spinner .6s linear infinite !important;
	display: inline-block !important;
	z-index: 10 !important;
	pointer-events: none !important;
}

#gr_checkout_redeem_lable .gr_rewards_apply_discount.is-loading, .gr_apply_discount .gr_rewards_apply_discount.is-loading {
	opacity: .7 !important;
	cursor: wait !important;
	padding-left: 32px !important;
}

#gr_checkout_redeem_lable .gr_rewards_apply_discount.is-loading *, .gr_apply_discount .gr_rewards_apply_discount.is-loading * {
	cursor: wait !important;
}

@keyframes spinner {
	to {
		transform: translateY(-50%) rotate(360deg);
	}
}

/* ============================================================
   LOYALTY POINTS BANNER - PLUGIN-SPECIFIC STYLES
   ============================================================
   FSE-Compatible: Uses CSS custom properties for theme.json
   These styles work for both traditional and block-based pages
   All selectors scoped to #gr_checkout_redeem_lable to prevent bleeding
   ============================================================ */

/* Banner alignment - Right align to match traditional cart layout */
#gr_checkout_redeem_lable {
	text-align: right !important;
}

/* Extra points message - Red color (business requirement) */

/* Uses custom property with fallback for FSE theme compatibility */
#gr_checkout_redeem_lable .gr_redeem_extra_point_info {
	color: var(--gr-extra-points-color, #d00) !important;
}

/* Points redeem container - Functional styling (border and padding) */
#gr_checkout_redeem_lable .grPointsRedeem {
	padding: 10px !important;
	border: 1px dashed var(--gr-border-color, currentColor) !important;
}

/* Apply/Remove discount buttons - Scoped to loyalty banner context */

/* Note: Also applies to traditional cart/checkout pages (non-block) */
#gr_checkout_redeem_lable .gr_rewards_apply_discount, .gr_apply_discount .gr_rewards_apply_discount {}

/* Remove discount button - Visual feedback for disabled state */
#gr_checkout_redeem_lable .gr_rewards_remove_discount, .gr_apply_discount .gr_rewards_remove_discount {
	opacity: .6 !important;
}