/* ==========================================================================
   Unified Button Styles - UI.com Style (small border-radius: 4px)
   UniFi Store Theme
   Based on reference: cb4892f0-8860-44f5-8ee9-859474f418fc
   ========================================================================== */

/* ==========================================================================
   Base Button Variables
   ========================================================================== */
:root {
    --btn-primary-bg: #006FFF;
    --btn-primary-hover: #0059CC;
    --btn-primary-text: #FFFFFF;
    --btn-secondary-bg: transparent;
    --btn-secondary-border: #006FFF;
    --btn-secondary-text: #006FFF;
    --btn-radius: 4px;
    --btn-font-family: "UI Sans", Lato, HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --btn-font-weight: 500;
    --btn-transition: background-color 0.3s;
}

/* ==========================================================================
   Primary Button - UI.com Style (Add to Cart, Checkout, etc.)
   ========================================================================== */
.btn-primary,
.btn-add-cart,
.btn-add-to-cart,
.add_to_cart_button,
.single_add_to_cart_button,
.checkout-button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce #place_order,
button[name="add-to-cart"],
input[name="add-to-cart"] {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 8px 16px !important;
    font-family: var(--btn-font-family) !important;
    font-size: 13px !important;
    font-weight: var(--btn-font-weight) !important;
    line-height: 21px !important;
    text-align: center !important;
    white-space: nowrap !important;
    color: var(--btn-primary-text) !important;
    background-color: var(--btn-primary-bg) !important;
    border: 1px solid var(--btn-primary-bg) !important;
    border-radius: var(--btn-radius) !important;
    cursor: pointer !important;
    transition: var(--btn-transition) !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.btn-primary:hover,
.btn-add-cart:hover,
.btn-add-to-cart:hover,
.add_to_cart_button:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce #place_order:hover,
button[name="add-to-cart"]:hover,
input[name="add-to-cart"]:hover {
    background-color: var(--btn-primary-hover) !important;
    border-color: var(--btn-primary-hover) !important;
    color: var(--btn-primary-text) !important;
}

.btn-primary:active,
.btn-add-cart:active,
.btn-add-to-cart:active,
.add_to_cart_button:active,
.single_add_to_cart_button:active {
    opacity: 0.9;
}

/* ==========================================================================
   Secondary Button - Outline Style
   ========================================================================== */
.btn-secondary,
.btn-outline,
.woocommerce a.button:not(.alt),
.woocommerce button.button:not(.alt),
.woocommerce input.button:not(.alt),
.woocommerce .cart .button,
.woocommerce .cart input.button {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 8px 16px !important;
    font-family: var(--btn-font-family) !important;
    font-size: 13px !important;
    font-weight: var(--btn-font-weight) !important;
    line-height: 21px !important;
    text-align: center !important;
    white-space: nowrap !important;
    color: var(--btn-secondary-text) !important;
    background-color: var(--btn-secondary-bg) !important;
    border: 1px solid var(--btn-secondary-border) !important;
    border-radius: var(--btn-radius) !important;
    cursor: pointer !important;
    transition: var(--btn-transition) !important;
    text-decoration: none !important;
}

.btn-secondary:hover,
.btn-outline:hover,
.woocommerce a.button:not(.alt):hover,
.woocommerce button.button:not(.alt):hover,
.woocommerce input.button:not(.alt):hover {
    background-color: var(--btn-primary-bg) !important;
    color: var(--btn-primary-text) !important;
    border-color: var(--btn-primary-bg) !important;
}

/* ==========================================================================
   Checkout Button - Special Override
   ========================================================================== */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce .checkout-button,
#place_order {
    background-color: var(--btn-primary-bg) !important;
    color: var(--btn-primary-text) !important;
    border-color: var(--btn-primary-bg) !important;
    border-radius: var(--btn-radius) !important;
    padding: 12px 24px !important;
    font-size: 14px !important;
    width: 100% !important;
    max-width: 400px !important;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce .checkout-button:hover,
#place_order:hover {
    background-color: var(--btn-primary-hover) !important;
    border-color: var(--btn-primary-hover) !important;
}

/* ==========================================================================
   Product Card Add to Cart Button (Homepage & Catalog)
   ========================================================================== */
.product-card .btn-add-cart,
.product-card .add_to_cart_button,
.products-section .btn-add-cart,
.products-section .add_to_cart_button,
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 8px 16px !important;
    font-family: var(--btn-font-family) !important;
    font-size: 13px !important;
    font-weight: var(--btn-font-weight) !important;
    line-height: 21px !important;
    text-align: center !important;
    white-space: nowrap !important;
    color: var(--btn-primary-text) !important;
    background-color: var(--btn-primary-bg) !important;
    border: 1px solid var(--btn-primary-bg) !important;
    border-radius: var(--btn-radius) !important;
    cursor: pointer !important;
    transition: var(--btn-transition) !important;
    text-decoration: none !important;
    box-shadow: none !important;
    min-width: 100px !important;
}

.product-card .btn-add-cart:hover,
.product-card .add_to_cart_button:hover,
.products-section .btn-add-cart:hover,
.products-section .add_to_cart_button:hover,
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover {
    background-color: var(--btn-primary-hover) !important;
    border-color: var(--btn-primary-hover) !important;
    color: var(--btn-primary-text) !important;
}

/* ==========================================================================
   Single Product Add to Cart Button
   ========================================================================== */
.single-product .single_add_to_cart_button {
    padding: 12px 24px !important;
    font-size: 14px !important;
    border-radius: var(--btn-radius) !important;
    min-width: 180px !important;
}

/* ==========================================================================
   Cart Page Buttons
   ========================================================================== */
.woocommerce-cart table.cart td.actions .button,
.woocommerce-cart .coupon .button {
    padding: 8px 16px !important;
    font-size: 13px !important;
    border-radius: var(--btn-radius) !important;
}

/* Checkout Button on Cart Page */
.woocommerce-cart .checkout-button,
.woocommerce-cart a[href*="checkout"],
.cart-summary a.checkout-button,
.cart-totals a.checkout-button,
a.checkout-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 12px 24px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--btn-primary-text) !important;
    background-color: var(--btn-primary-bg) !important;
    border: 1px solid var(--btn-primary-bg) !important;
    border-radius: var(--btn-radius) !important;
    text-decoration: none !important;
    transition: var(--btn-transition) !important;
}

.woocommerce-cart .checkout-button:hover,
.woocommerce-cart a[href*="checkout"]:hover,
a.checkout-button:hover {
    background-color: var(--btn-primary-hover) !important;
    border-color: var(--btn-primary-hover) !important;
}

/* Apply Coupon Button */
.coupon-form button,
.coupon button,
button.coupon-btn,
.cart-coupon button,
.netevo-coupon-form button,
button[name="apply_coupon"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--btn-primary-text) !important;
    background-color: var(--btn-primary-bg) !important;
    border: 1px solid var(--btn-primary-bg) !important;
    border-radius: var(--btn-radius) !important;
    cursor: pointer !important;
    transition: var(--btn-transition) !important;
}

.coupon-form button:hover,
.coupon button:hover,
button.coupon-btn:hover,
.cart-coupon button:hover,
.netevo-coupon-form button:hover,
button[name="apply_coupon"]:hover {
    background-color: var(--btn-primary-hover) !important;
    border-color: var(--btn-primary-hover) !important;
}

/* Update Cart Button */
.woocommerce-cart table.cart td.actions button[name="update_cart"] {
    background-color: #F5F5F5 !important;
    color: #333 !important;
    border: 1px solid #E0E0E0 !important;
}

.woocommerce-cart table.cart td.actions button[name="update_cart"]:hover {
    background-color: #E8E8E8 !important;
    border-color: #CCC !important;
}

/* ==========================================================================
   View All / Shop More Buttons
   ========================================================================== */
.btn-view-all,
.btn-shop-more,
.view-all-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--btn-primary-bg) !important;
    background: transparent !important;
    border: 1px solid var(--btn-primary-bg) !important;
    border-radius: var(--btn-radius) !important;
    transition: var(--btn-transition) !important;
    text-decoration: none !important;
}

.btn-view-all:hover,
.btn-shop-more:hover,
.view-all-link:hover {
    background: var(--btn-primary-bg) !important;
    color: var(--btn-primary-text) !important;
}

/* ==========================================================================
   Form Submit Buttons
   ========================================================================== */
.woocommerce form .form-row button[type="submit"],
.woocommerce-page form .form-row button[type="submit"],
.woocommerce form.login button[type="submit"],
.woocommerce form.register button[type="submit"],
.comment-form input[type="submit"],
.search-form button[type="submit"] {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 8px 16px !important;
    font-family: var(--btn-font-family) !important;
    font-size: 13px !important;
    font-weight: var(--btn-font-weight) !important;
    color: var(--btn-primary-text) !important;
    background-color: var(--btn-primary-bg) !important;
    border: 1px solid var(--btn-primary-bg) !important;
    border-radius: var(--btn-radius) !important;
    cursor: pointer !important;
    transition: var(--btn-transition) !important;
}

.woocommerce form .form-row button[type="submit"]:hover,
.woocommerce-page form .form-row button[type="submit"]:hover,
.woocommerce form.login button[type="submit"]:hover,
.woocommerce form.register button[type="submit"]:hover,
.comment-form input[type="submit"]:hover,
.search-form button[type="submit"]:hover {
    background-color: var(--btn-primary-hover) !important;
    border-color: var(--btn-primary-hover) !important;
}

/* ==========================================================================
   Quantity Selector Buttons
   ========================================================================== */
.quantity-selector button,
.quantity .qty-btn,
.woocommerce .quantity .plus,
.woocommerce .quantity .minus {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 1rem !important;
    color: #333 !important;
    background: #F5F5F5 !important;
    border: 1px solid #E0E0E0 !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: var(--btn-transition) !important;
}

.quantity-selector button:hover,
.quantity .qty-btn:hover,
.woocommerce .quantity .plus:hover,
.woocommerce .quantity .minus:hover {
    background: #E8E8E8 !important;
    border-color: #CCC !important;
}

/* ==========================================================================
   Disabled State
   ========================================================================== */
.btn-primary:disabled,
.btn-add-cart:disabled,
.add_to_cart_button:disabled,
.single_add_to_cart_button:disabled,
.woocommerce a.button:disabled,
.woocommerce button.button:disabled,
.woocommerce input.button:disabled,
button:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* ==========================================================================
   Loading State
   ========================================================================== */
.btn-add-cart.loading,
.add_to_cart_button.loading,
.single_add_to_cart_button.loading {
    pointer-events: none !important;
    opacity: 0.7 !important;
}

.btn-add-cart.loading::after,
.add_to_cart_button.loading::after,
.single_add_to_cart_button.loading::after {
    content: "" !important;
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    margin-left: 8px !important;
    border: 2px solid transparent !important;
    border-top-color: currentColor !important;
    border-radius: 50% !important;
    animation: btn-spinner 0.6s linear infinite !important;
}

@keyframes btn-spinner {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   Added to Cart State
   ========================================================================== */
.btn-add-cart.added,
.add_to_cart_button.added {
    background-color: #10B981 !important;
    border-color: #10B981 !important;
}

/* ==========================================================================
   Mobile Responsive
   ========================================================================== */
@media (max-width: 768px) {
    .btn-primary,
    .btn-add-cart,
    .btn-add-to-cart,
    .add_to_cart_button,
    .single_add_to_cart_button {
        padding: 10px 20px !important;
        font-size: 0.8125rem !important;
    }

    .product-card .btn-add-cart,
    .product-card .add_to_cart_button,
    .products-section .btn-add-cart,
    .products-section .add_to_cart_button,
    .woocommerce ul.products li.product .button {
        padding: 8px 14px !important;
        font-size: 0.75rem !important;
        min-width: 90px !important;
    }

    .single-product .single_add_to_cart_button {
        padding: 12px 24px !important;
        font-size: 0.9375rem !important;
        width: 100% !important;
    }

    .woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
    .woocommerce .checkout-button,
    #place_order {
        padding: 14px 24px !important;
        font-size: 0.9375rem !important;
    }
}

@media (max-width: 480px) {
    .product-card .btn-add-cart,
    .product-card .add_to_cart_button,
    .products-section .btn-add-cart,
    .products-section .add_to_cart_button {
        padding: 6px 12px !important;
        font-size: 0.6875rem !important;
        min-width: 80px !important;
    }
}

/* ==========================================================================
   Hero Section Buttons
   ========================================================================== */
.hero-btn,
.hero-cta-btn,
.parallax-hero .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--btn-primary-text) !important;
    background: var(--btn-primary-bg) !important;
    border: 1px solid var(--btn-primary-bg) !important;
    border-radius: var(--btn-radius) !important;
    transition: var(--btn-transition) !important;
    text-decoration: none !important;
}

.hero-btn:hover,
.hero-cta-btn:hover,
.parallax-hero .btn:hover {
    background: var(--btn-primary-hover) !important;
    border-color: var(--btn-primary-hover) !important;
}

/* Hero Outline Button */
.hero-btn-outline,
.hero-btn.outline {
    background: transparent !important;
    color: var(--btn-primary-bg) !important;
    border-color: var(--btn-primary-bg) !important;
}

.hero-btn-outline:hover,
.hero-btn.outline:hover {
    background: var(--btn-primary-bg) !important;
    color: var(--btn-primary-text) !important;
}

/* ==========================================================================
   Thank You Page Button
   ========================================================================== */
.thankyou-btn,
.order-complete .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--btn-primary-text) !important;
    background: var(--btn-primary-bg) !important;
    border: 1px solid var(--btn-primary-bg) !important;
    border-radius: var(--btn-radius) !important;
    transition: var(--btn-transition) !important;
    text-decoration: none !important;
}

.thankyou-btn:hover,
.order-complete .btn:hover {
    background: var(--btn-primary-hover) !important;
    border-color: var(--btn-primary-hover) !important;
}

/* ==========================================================================
   Footer Newsletter Button
   ========================================================================== */
.footer-newsletter button,
.newsletter-form button,
footer button[type="submit"],
.footer-subscribe button,
.footer button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 16px !important;
    font-family: var(--btn-font-family) !important;
    font-size: 13px !important;
    font-weight: var(--btn-font-weight) !important;
    color: var(--btn-primary-text) !important;
    background-color: var(--btn-primary-bg) !important;
    border: 1px solid var(--btn-primary-bg) !important;
    border-radius: var(--btn-radius) !important;
    cursor: pointer !important;
    transition: var(--btn-transition) !important;
}

.footer-newsletter button:hover,
.newsletter-form button:hover,
footer button[type="submit"]:hover,
.footer-subscribe button:hover,
.footer button:hover {
    background-color: var(--btn-primary-hover) !important;
    border-color: var(--btn-primary-hover) !important;
}