/* ============================================================
   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, 0.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: 0.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 0.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 0.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: 0.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 0.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: 0.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 {
    /* Button styles inherited from theme */
}

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