/*
WooCommerce Button Color Standardization
Ensures all WooCommerce buttons use the correct blue theme colors
*/

/* ==========================================================================
   1. WOOCOMMERCE BUTTON COLOR VARIABLES
   ========================================================================== */

:root {
    --wc-primary-blue: #0866fe;
    --wc-primary-blue-hover: #0550c3;
    --wc-primary-blue-dark: #1e3a8a;
    --wc-secondary-blue: #1d4ed8;
    --wc-light-blue: #dbeafe;
    --wc-button-shadow: 0 4px 12px rgba(8, 102, 254, 0.3);
    --wc-button-shadow-hover: 0 6px 16px rgba(8, 102, 254, 0.4);
}

/* ==========================================================================
   2. PRIMARY WOOCOMMERCE BUTTONS - BLUE THEME
   ========================================================================== */

/* Add to Cart Buttons */
.woocommerce .single_add_to_cart_button,
.woocommerce button.button.single_add_to_cart_button,
.woocommerce-page .single_add_to_cart_button,
.woocommerce .button.single_add_to_cart_button,
button.single_add_to_cart_button,
input.single_add_to_cart_button[type="submit"] {
    background: linear-gradient(135deg, var(--wc-primary-blue), var(--wc-secondary-blue)) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    box-shadow: var(--wc-button-shadow) !important;
    text-transform: none !important;
    font-size: 16px !important;
}

.woocommerce .single_add_to_cart_button:hover,
.woocommerce button.button.single_add_to_cart_button:hover,
.woocommerce-page .single_add_to_cart_button:hover,
button.single_add_to_cart_button:hover {
    background: linear-gradient(135deg, var(--wc-primary-blue-hover), var(--wc-primary-blue-dark)) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--wc-button-shadow-hover) !important;
}

/* Checkout Button */
.woocommerce .wc-proceed-to-checkout .checkout-button,
.woocommerce-page .wc-proceed-to-checkout .checkout-button,
a.checkout-button,
.checkout-button {
    background: linear-gradient(135deg, var(--wc-primary-blue), var(--wc-secondary-blue)) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 14px 28px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
    box-shadow: var(--wc-button-shadow) !important;
    text-align: center !important;
    font-size: 16px !important;
}

.woocommerce .wc-proceed-to-checkout .checkout-button:hover,
.checkout-button:hover {
    background: linear-gradient(135deg, var(--wc-primary-blue-hover), var(--wc-primary-blue-dark)) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--wc-button-shadow-hover) !important;
}

/* Place Order Button */
.woocommerce #place_order,
.woocommerce-page #place_order,
button#place_order,
input#place_order[type="submit"] {
    background: linear-gradient(135deg, var(--wc-primary-blue), var(--wc-secondary-blue)) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 16px 32px !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    width: 100% !important;
    transition: all 0.3s ease !important;
    box-shadow: var(--wc-button-shadow) !important;
    text-transform: none !important;
}

.woocommerce #place_order:hover,
button#place_order:hover {
    background: linear-gradient(135deg, var(--wc-primary-blue-hover), var(--wc-primary-blue-dark)) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--wc-button-shadow-hover) !important;
}

/* ==========================================================================
   3. SECONDARY WOOCOMMERCE BUTTONS
   ========================================================================== */

/* Update Cart Button */
.woocommerce .button[name="update_cart"],
.woocommerce-page .button[name="update_cart"],
button[name="update_cart"] {
    background: var(--wc-light-blue) !important;
    color: var(--wc-primary-blue) !important;
    border: 1px solid var(--wc-primary-blue) !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.woocommerce .button[name="update_cart"]:hover,
button[name="update_cart"]:hover {
    background: var(--wc-primary-blue) !important;
    color: white !important;
    transform: translateY(-1px) !important;
}

/* Apply Coupon Button */
.woocommerce .coupon .button,
.woocommerce-page .coupon .button,
.coupon button[name="apply_coupon"] {
    background: var(--wc-primary-blue) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.woocommerce .coupon .button:hover,
.coupon button[name="apply_coupon"]:hover {
    background: var(--wc-primary-blue-hover) !important;
    transform: translateY(-1px) !important;
}

/* ==========================================================================
   4. MINI CART BUTTONS
   ========================================================================== */

/* Mini Cart View Cart Button */
.widget_shopping_cart .buttons .button:first-child,
.mini-cart-buttons .wc-forward,
.widget_shopping_cart_content .wc-forward {
    background: var(--wc-light-blue) !important;
    color: var(--wc-primary-blue) !important;
    border: 1px solid var(--wc-primary-blue) !important;
    border-radius: 8px !important;
    padding: 12px 20px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
}

.widget_shopping_cart .buttons .button:first-child:hover,
.mini-cart-buttons .wc-forward:hover {
    background: var(--wc-primary-blue) !important;
    color: white !important;
}

/* Mini Cart Checkout Button */
.widget_shopping_cart .buttons .checkout,
.mini-cart-buttons .checkout,
.widget_shopping_cart_content .checkout {
    background: linear-gradient(135deg, var(--wc-primary-blue), var(--wc-secondary-blue)) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 20px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
    box-shadow: var(--wc-button-shadow) !important;
    text-align: center !important;
}

.widget_shopping_cart .buttons .checkout:hover,
.mini-cart-buttons .checkout:hover {
    background: linear-gradient(135deg, var(--wc-primary-blue-hover), var(--wc-primary-blue-dark)) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--wc-button-shadow-hover) !important;
}

/* ==========================================================================
   5. PRODUCT ARCHIVE BUTTONS
   ========================================================================== */

/* Shop Add to Cart Buttons */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart,
.woocommerce .products .product .button,
.products .product .add_to_cart_button {
    background: var(--wc-primary-blue) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    font-size: 14px !important;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .added_to_cart:hover,
.products .product .add_to_cart_button:hover {
    background: var(--wc-primary-blue-hover) !important;
    transform: translateY(-1px) !important;
}

/* ==========================================================================
   6. ACCOUNT & AUTH BUTTONS
   ========================================================================== */

/* Login & Register Buttons */
.woocommerce-form-login .button,
.woocommerce-form-register .button,
.woocommerce .login .button,
.woocommerce .register .button,
.woocommerce-account .button {
    background: linear-gradient(135deg, var(--wc-primary-blue), var(--wc-secondary-blue)) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    box-shadow: var(--wc-button-shadow) !important;
}

.woocommerce-form-login .button:hover,
.woocommerce-form-register .button:hover,
.woocommerce-account .button:hover {
    background: linear-gradient(135deg, var(--wc-primary-blue-hover), var(--wc-primary-blue-dark)) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--wc-button-shadow-hover) !important;
}

/* ==========================================================================
   7. PAYMENT METHOD BUTTONS
   ========================================================================== */

/* Payment Submit Buttons */
.woocommerce .payment_methods .button,
.woocommerce-checkout .payment_methods .button,
#payment .button {
    background: var(--wc-primary-blue) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.woocommerce .payment_methods .button:hover,
#payment .button:hover {
    background: var(--wc-primary-blue-hover) !important;
    transform: translateY(-1px) !important;
}

/* ==========================================================================
   8. SPECIAL BUTTONS - NO BLACK BACKGROUNDS
   ========================================================================== */

/* Override any potential black backgrounds */
.woocommerce .button,
.woocommerce-page .button,
.wc-button,
.woocommerce input.button,
.woocommerce input[type="submit"],
.woocommerce button[type="submit"] {
    background: var(--wc-primary-blue) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

/* Ensure no black or dark gray backgrounds */
.woocommerce .button:not(.checkout-button):not(.single_add_to_cart_button):not(#place_order) {
    background: var(--wc-primary-blue) !important;
}

/* ==========================================================================
   9. RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 768px) {
    .woocommerce .single_add_to_cart_button,
    .checkout-button,
    #place_order {
        padding: 14px 20px !important;
        font-size: 16px !important;
        width: 100% !important;
        text-align: center !important;
    }

    .woocommerce ul.products li.product .button,
    .products .product .add_to_cart_button {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 480px) {
    .woocommerce .single_add_to_cart_button,
    .checkout-button,
    #place_order {
        padding: 12px 16px !important;
        font-size: 15px !important;
    }

    /* Reduce hover effects on touch devices */
    .woocommerce .button:hover,
    .checkout-button:hover,
    #place_order:hover {
        transform: none !important;
    }
}

/* ==========================================================================
   10. LOADING STATES
   ========================================================================== */

.woocommerce .button.loading,
.woocommerce .single_add_to_cart_button.loading,
.checkout-button.loading {
    opacity: 0.7 !important;
    cursor: wait !important;
    pointer-events: none !important;
}

.woocommerce .button.loading::after,
.single_add_to_cart_button.loading::after {
    content: "" !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    border: 2px solid transparent !important;
    border-top: 2px solid white !important;
    border-radius: 50% !important;
    animation: spin 1s linear infinite !important;
    margin-left: 8px !important;
}

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

/* End WooCommerce Button Colors CSS */