/**
 * WooCommerce 黑底白字按钮样式
 * 通过 :root 变量控制颜色，动态值由 PHP 内联输出。
 */

/* ============================================
   通用按钮样式（适用于所有 WooCommerce 页面）
   ============================================ */

/* 主要按钮：加入购物车、结算、更新购物车等 */
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce .cart .button,
.woocommerce .cart input.button,
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce .single_add_to_cart_button,
.woocommerce .product_type_simple,
.woocommerce .product_type_variable,
.woocommerce .add_to_cart_button,
.woocommerce .ajax_add_to_cart {
    background-color: var(--woo-button-bg) !important;
    color: var(--woo-button-text) !important;
    border: 2px solid var(--woo-button-border) !important;
    border-radius: 0 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 12px 20px !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
    text-decoration: none !important;
    display: inline-block !important;
    cursor: pointer !important;
    line-height: 1.4 !important;
}

/* 悬停状态 */
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce .cart .button:hover,
.woocommerce .cart input.button:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce .product_type_simple:hover,
.woocommerce .product_type_variable:hover,
.woocommerce .add_to_cart_button:hover,
.woocommerce .ajax_add_to_cart:hover {
    background-color: var(--woo-button-bg-hover) !important;
    border-color: var(--woo-button-border-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* 焦点状态（可访问性） */
.woocommerce .button:focus,
.woocommerce button.button:focus,
.woocommerce input.button:focus,
.woocommerce #respond input#submit:focus,
.woocommerce a.button:focus,
.woocommerce .cart .button:focus,
.woocommerce .single_add_to_cart_button:focus,
.woocommerce .add_to_cart_button:focus {
    outline: 2px solid #666 !important;
    outline-offset: 2px !important;
}

/* 禁用状态 */
.woocommerce .button:disabled,
.woocommerce button.button:disabled,
.woocommerce input.button:disabled,
.woocommerce #respond input#submit:disabled,
.woocommerce a.button:disabled,
.woocommerce .single_add_to_cart_button:disabled {
    background-color: #666 !important;
    color: #ccc !important;
    border-color: #666 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
    opacity: 0.6 !important;
}

/* ============================================
   产品页面特定样式
   ============================================ */
.single-product .variations select,
.single-product .quantity .qty {
    border: 2px solid var(--woo-button-bg) !important;
    background-color: #fff !important;
    color: #000 !important;
    border-radius: 0 !important;
    padding: 8px !important;
}

/* 数量增减按钮 */
.single-product .quantity .plus,
.single-product .quantity .minus {
    background-color: var(--woo-button-bg) !important;
    color: #fff !important;
    border: 2px solid var(--woo-button-bg) !important;
}
.single-product .quantity .plus:hover,
.single-product .quantity .minus:hover {
    background-color: var(--woo-button-bg-hover) !important;
    border-color: var(--woo-button-bg-hover) !important;
}

/* ============================================
   购物车页面样式
   ============================================ */
.woocommerce-cart table.shop_table {
    border: 2px solid var(--woo-button-bg) !important;
}
.woocommerce-cart table.shop_table th {
    background-color: var(--woo-button-bg) !important;
    color: #fff !important;
    border-bottom: 2px solid var(--woo-button-bg) !important;
}
.woocommerce-cart .coupon .input-text {
    border: 2px solid var(--woo-button-bg) !important;
    padding: 8px !important;
}
.woocommerce-cart .product-remove a.remove {
    color: var(--woo-button-bg) !important;
    border: 2px solid var(--woo-button-bg) !important;
}
.woocommerce-cart .product-remove a.remove:hover {
    background-color: var(--woo-button-bg) !important;
    color: #fff !important;
}
.woocommerce-cart .return-to-shop a {
    background-color: var(--woo-button-bg) !important;
    color: #fff !important;
    border: 2px solid var(--woo-button-bg) !important;
    padding: 12px 20px !important;
    text-decoration: none !important;
    display: inline-block !important;
}
.woocommerce-cart .return-to-shop a:hover {
    background-color: var(--woo-button-bg-hover) !important;
    border-color: var(--woo-button-bg-hover) !important;
}

/* ============================================
   产品列表页（商店、分类）按钮
   ============================================ */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .product_type_simple,
.woocommerce ul.products li.product .product_type_variable {
    margin-top: 10px !important;
    display: inline-block !important;
    width: auto !important;
}

/* ============================================
   响应式设计
   ============================================ */
@media (max-width: 768px) {
    .woocommerce .button,
    .woocommerce button.button,
    .woocommerce input.button,
    .woocommerce .wc-proceed-to-checkout a.checkout-button,
    .woocommerce .single_add_to_cart_button {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: center !important;
        white-space: normal !important;  /* 小屏幕允许换行 */
        padding: 12px 10px !important;
    }

    .woocommerce-cart .coupon .input-text {
        width: 100% !important;
        margin-bottom: 10px !important;
    }
    .woocommerce-cart .coupon .button {
        width: 100% !important;
        margin-left: 0 !important;
    }
}