/*
 Theme Name:     Astra Child
 Theme URI:      https://你的網站網址.com/
 Description:    Astra Child Theme
 Author:         你的名字或暱稱
 Author URI:     https://你的網站網址.com/
 Template:       astra
 Version:        1.0.0
*/

/* WooCommerce - 加入購物車按鈕樣式 - 權重提升版 */
.single-product .woocommerce button.single_add_to_cart_button,
.woocommerce-page .woocommerce button.button {
    /* 背景顏色 */
    background-color: #e56221 !important;
    
    /* 文字顏色 */
    color: #fff !important;
    
    /* 圓角 */
    border-radius: 8px !important;
    
    /* 移除邊框 */
    border: none !important;
    
    /* 內邊距 */
    padding: 12px 25px !important;
    
    /* 字體大小 */
    font-size: 18px !important;
    font-weight: bold !important;
    
    /* 輕微陰影效果 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    
    /* 平滑過渡效果 */
    transition: all 0.3s ease !important;
}

/* 懸停 (hover) 效果 */
.single-product .woocommerce button.single_add_to_cart_button:hover,
.woocommerce-page .woocommerce button.button:hover {
    background-color: #d1561f !important;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-2px) !important;
}

/*
 * 統一 WooCommerce 所有頁面的「加入購物車」按鈕風格
 */
 
/* 單一產品頁面的「加入購物車」按鈕樣式 */
.single-product .single_add_to_cart_button,
.woocommerce-page .single_add_to_cart_button {
    background-color: #e56221 !important;
    color: #fff !important;
    border-radius: 8px !important;
    border: none !important;
    padding: 12px 25px !important;
    font-size: 18px !important;
    font-weight: bold !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
}

/* 產品列表/分類頁面的「加入購物車」按鈕樣式 */
.product_type_simple.add_to_cart_button,
.product_type_simple.add_to_cart_button:hover {
    background-color: #e56221 !important;
    color: #fff !important;
    border-radius: 8px !important;
    border: none !important;
    padding: 12px 25px !important;
    font-size: 18px !important;
    font-weight: bold !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
}

/* 產品列表/分類頁面按鈕的懸停 (hover) 效果 */
.product_type_simple.add_to_cart_button:hover {
    background-color: #d1561f !important;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-2px) !important;
}

/* 統一所有 WooCommerce 按鈕的懸停效果，確保其他按鈕也有一致風格 */
.woocommerce button.button:hover, 
.woocommerce a.button:hover {
    background-color: #d1561f !important;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-2px) !important;
}

/*
 * 統一 WooCommerce 所有頁面的按鈕風格
 */
 
/* 適用於單一商品、可變商品和單一產品頁面的所有按鈕 */
.woocommerce button.button, 
.woocommerce a.button,
.woocommerce a.button.product_type_simple,
.woocommerce a.button.product_type_variable,
.woocommerce button.single_add_to_cart_button {
    /* 按鈕樣式 */
    background-color: #e56221 !important; /* 橙色背景 */
    color: #fff !important; /* 白色文字 */
    border-radius: 8px !important; /* 圓角 */
    border: none !important; 
    padding: 12px 25px !important; 
    font-size: 18px !important;
    font-weight: bold !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
}

/* 按鈕懸停 (hover) 效果 */
.woocommerce button.button:hover, 
.woocommerce a.button:hover,
.woocommerce a.button.product_type_simple:hover,
.woocommerce a.button.product_type_variable:hover,
.woocommerce button.single_add_to_cart_button:hover {
    background-color: #d1561f !important; /* 懸停時顏色稍深 */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-2px) !important; /* 輕微上移效果 */
}

.my-ajax-button {
    display: block;
    margin-bottom: 10px;

    /* 按鈕樣式設定 */
    background-color: #000;
    color: #fff;
    text-align: center;
    padding: 10px 20px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;

    /* 關鍵：設定固定的最大寬度 */
    max-width: 150px; /* 按鈕的最大寬度 */
    width: 100%; /* 確保按鈕在小螢幕上可以縮小 */
}

/* 隱藏旋轉圓圈 */
.spinner-hidden {
    display: none;
}

/* 顯示旋轉圓圈 */
.spinner-visible {
    display: block;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #333; /* 圓圈的顏色 */
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
    margin: 10px auto; /* 讓圓圈居中 */
}

/* 旋轉動畫 */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}