/* ===== Buy Button Styling - Clean and Simple with Emoji ===== */

/* Emoji Support */
.product-card .card-body .btn,
.product-card .card-body button,
.product-card .card-body .btn-group .btn,
.product-card .card-body .add-to-cart-btn,
.product-card .card-body .cta-primary,
button.buy-btn,
.buy-btn,
.shopping-cart-btn,
.fs-buy-btn {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji' !important;
}

/* Main Buy Button Styling */
.product-card .card-body .btn,
.product-card .card-body button,
.product-card .card-body .btn-group .btn,
.product-card .card-body .add-to-cart-btn,
.product-card .card-body .cta-primary,
button.buy-btn,
.buy-btn,
.shopping-cart-btn {
    /* แสดงปุ่มแบบยาว */
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    cursor: pointer !important;
    
    /* ขนาดปุ่ม */
    width: calc(100% - 4px) !important;
    height: auto !important;
    min-width: auto !important;
    min-height: 50px !important;
    
    /* มุมโค้งมน */
    border-radius: 12px !important;
    
    /* ระยะห่าง 2px ซ้ายและขวา */
    margin: 0 2px !important;
    padding: 12px 16px !important;
    
    /* สไตล์ปุ่ม - สีฟ้าแบบไล่ระดับ */
    background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    
    /* เอฟเฟ็ก */
    box-shadow: 0 2px 4px rgba(14, 165, 233, 0.3) !important;
    transition: all 0.2s ease !important;
    
    /* Flexbox จัดเรียง */
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    gap: 0 !important;
    
    /* อื่นๆ */
    text-align: center !important;
    text-decoration: none !important;
    position: relative;
    z-index: 100 !important;
}

/* ซ่อน icon span เดิม */
.product-card .card-body .btn i,
.product-card .card-body .btn-group .btn i,
.product-card .card-body .add-to-cart-btn i,
.product-card .card-body .btn::before,
.product-card .card-body .add-to-cart-btn::before,
button.buy-btn i,
button.buy-btn::before,
.buy-btn i,
.buy-btn::before,
.shopping-cart-btn i,
.shopping-cart-btn::before {
    display: none !important;
}

/* Hover State - เอฟเฟ็กท์เมื่อชี้ */
.product-card .card-body .btn:hover,
.product-card .card-body button:hover,
.product-card .card-body .btn-group .btn:hover,
.product-card .card-body .add-to-cart-btn:hover,
.product-card .card-body .cta-primary:hover,
button.buy-btn:hover,
.buy-btn:hover,
.shopping-cart-btn:hover {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
    box-shadow: 0 4px 8px rgba(14, 165, 233, 0.4) !important;
    transform: translateY(-1px) !important;
}

/* Active State - เมื่อคลิก */
.product-card .card-body .btn:active,
.product-card .card-body button:active,
.product-card .card-body .btn-group .btn:active,
.product-card .card-body .add-to-cart-btn:active,
.product-card .card-body .cta-primary:active,
button.buy-btn:active,
.buy-btn:active,
.shopping-cart-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(14, 165, 233, 0.3) !important;
}

/* Focus State - เพื่อ accessibility */
.product-card .card-body .btn:focus,
.product-card .card-body button:focus,
.product-card .card-body .btn-group .btn:focus,
.product-card .card-body .add-to-cart-btn:focus,
.product-card .card-body .cta-primary:focus,
button.buy-btn:focus,
.buy-btn:focus,
.shopping-cart-btn:focus {
    outline: 2px solid rgba(14, 165, 233, 0.8) !important;
    outline-offset: 2px !important;
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .product-card .card-body .btn,
    .product-card .card-body button,
    .product-card .card-body .btn-group .btn,
    .product-card .card-body .add-to-cart-btn,
    .product-card .card-body .cta-primary,
    button.buy-btn,
    .buy-btn,
    .shopping-cart-btn {
        padding: 10px 12px !important;
        font-size: 15px !important;
        min-height: 46px !important;
    }
}

@media (max-width: 480px) {
    .product-card .card-body .btn,
    .product-card .card-body button,
    .product-card .card-body .btn-group .btn,
    .product-card .card-body .add-to-cart-btn,
    .product-card .card-body .cta-primary,
    button.buy-btn,
    .buy-btn,
    .shopping-cart-btn {
        padding: 10px 10px !important;
        font-size: 14px !important;
        min-height: 44px !important;
    }
}

/* ปุ่มให้เต็มความกว้างภายในการ์ด */
.product-card .card-body .btn-group {
    margin-top: auto !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: auto !important;
    padding: 8px 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
}

/* Button Group Container */
.product-card .card-body {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    padding-bottom: 12px !important;
}
