/**
 * Button Stability Fix v2.1
 * راه‌حل نهایی برای برطرف کردن مشکل به هم ریختن layout هنگام کلیک روی دکمه‌ها
 * استفاده از ICON به جای متن برای جلوگیری از تغییر اندازه
 */

/* =====================================
   تعریف متغیرها
   ===================================== */
:root {
    --button-min-width: 130px;
    --button-height: 44px;
    --button-padding: 12px 20px;
    --button-font-size: 14px;
}

/* =====================================
   دکمه‌های افزودن به سبد - قواعد کلی
   ===================================== */

/* تمام دکمه‌های افزودن به سبد */
button.novoshop-add-to-cart,
button.add-to-cart-ajax,
button.ajax_add_to_cart,
a.add_to_cart_button,
a.ajax_add_to_cart,
.novoshop-add-to-cart,
.add-to-cart-ajax,
.ajax_add_to_cart,
.add_to_cart_button {
    /* اندازه ثابت */
    min-width: var(--button-min-width) !important;
    width: 100% !important;
    max-width: 100% !important;
    height: var(--button-height) !important;
    min-height: var(--button-height) !important;
    
    /* Padding و Font ثابت */
    padding: var(--button-padding) !important;
    font-size: var(--button-font-size) !important;
    
    /* محاسبه صحیح اندازه */
    box-sizing: border-box !important;
    
    /* جلوگیری از wrap شدن */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    
    /* نمایش */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* ترنزیشن */
    transition: background-color 0.3s ease, opacity 0.3s ease !important;
    
    /* متن وسط */
    text-align: center !important;
    vertical-align: middle !important;
    
    /* جلوگیری از تغییر اندازه font */
    font-weight: 600 !important;
    line-height: 1 !important;
}

/* =====================================
   حالت‌های مختلف دکمه
   ===================================== */

/* حالت عادی */
button.novoshop-add-to-cart,
button.add-to-cart-ajax,
.novoshop-add-to-cart,
.add-to-cart-ajax {
    position: relative !important;
}

/* حالت Loading */
button.novoshop-add-to-cart.loading,
button.add-to-cart-ajax.loading,
.novoshop-add-to-cart.loading,
.add-to-cart-ajax.loading,
.ajax_add_to_cart.loading,
.add_to_cart_button.loading {
    /* حفظ اندازه */
    min-width: var(--button-min-width) !important;
    width: 100% !important;
    height: var(--button-height) !important;
    
    /* جلوگیری از کلیک */
    pointer-events: none !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
    
    /* جلوگیری از تغییر padding */
    padding: var(--button-padding) !important;
}

/* حالت Added (موفقیت) */
button.novoshop-add-to-cart.added,
button.add-to-cart-ajax.added,
.novoshop-add-to-cart.added,
.add-to-cart-ajax.added,
.ajax_add_to_cart.added,
.add_to_cart_button.added {
    /* حفظ اندازه */
    min-width: var(--button-min-width) !important;
    width: 100% !important;
    height: var(--button-height) !important;
    
    /* رنگ سبز */
    background-color: #27ae60 !important;
    border-color: #27ae60 !important;
    
    /* حفظ padding */
    padding: var(--button-padding) !important;
}

/* =====================================
   Product Card Layout
   ===================================== */

/* Product Card Container */
.product-card,
.woocommerce ul.products li.product,
.elementor-widget-container .product-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    position: relative !important;
}

/* دکمه در انتهای card */
.product-card > button:last-child,
.product-card > a.button:last-child,
.woocommerce ul.products li.product > a.button:last-child {
    margin-top: auto !important;
    flex-shrink: 0 !important;
}

/* تمام دکمه‌ها در product card */
.product-card button,
.product-card .button,
.product-card a.button,
.woocommerce ul.products li.product button,
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button {
    /* width: 100% !important;
    max-width: 100% !important;
    min-width: var(--button-min-width) !important;
    height: var(--button-height) !important; */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

/* =====================================
   Spinner Animation
   ===================================== */

.btn-spinner {
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-top-color: #fff !important;
    border-radius: 50% !important;
    animation: btn-spin 0.6s linear infinite !important;
}

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

/* =====================================
   Grid Layout Protection
   ===================================== */

/* محافظت از grid - فقط برای صفحاتی که کلاس columns-* ندارند */
.products-grid:not([class*="columns-"]):not(.columns-2):not(.columns-3):not(.columns-4):not(.columns-5):not(.columns-6),
.woocommerce ul.products:not(.columns-2):not(.columns-3):not(.columns-4):not(.columns-5):not(.columns-6) {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 20px !important;
}

/* جلوگیری از shift در hover */
.product-card:hover button,
.product-card:hover .button,
.product-card:hover a.button {
    width: 100% !important;
    /* min-width: var(--button-min-width) !important; */
    height: var(--button-height) !important;
}

/* =====================================
   WooCommerce Loop Products
   ===================================== */

.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .button {
    width: 100% !important;
    min-width: var(--button-min-width) !important;
    height: var(--button-height) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

/* =====================================
   Elementor Widgets
   ===================================== */

.elementor-widget-container .product-card button,
.elementor-widget-container .product-card .button,
.elementor-widget-container button.add-to-cart-ajax {
    width: 100% !important;
    min-width: var(--button-min-width) !important;
    height: var(--button-height) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

/* =====================================
   Archive & Category Pages
   ===================================== */

.archive.woocommerce .product .button,
.archive.woocommerce .product .add_to_cart_button,
.tax-product_cat .product .button,
.tax-product_cat .product .add_to_cart_button {
    width: 100% !important;
    min-width: var(--button-min-width) !important;
    height: var(--button-height) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* =====================================
   Related Products
   ===================================== */

.related.products .product .button,
.upsells.products .product .button,
.cross-sells .product .button {
    width: 100% !important;
    min-width: var(--button-min-width) !important;
    height: var(--button-height) !important;
}

/* =====================================
   Search Results
   ===================================== */

.search-results .product-card button,
.search-results .product-card .button {
    width: 100% !important;
    min-width: var(--button-min-width) !important;
    height: var(--button-height) !important;
}

/* =====================================
   Widget Areas
   ===================================== */

.widget_products .product-card button,
.widget_products .product-card .button {
    width: 100% !important;
    min-width: 100px !important;
    height: 40px !important;
    font-size: 12px !important;
    padding: 8px 12px !important;
}

/* =====================================
   Single Product Page
   ===================================== */

.single_add_to_cart_button {
    min-width: 200px !important;
    height: 50px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.single_add_to_cart_button.loading {
    min-width: 200px !important;
    height: 50px !important;
}

/* =====================================
   Responsive - Tablet
   ===================================== */

@media (max-width: 768px) {
    :root {
        --button-min-width: 110px;
        --button-height: 40px;
        --button-padding: 10px 16px;
        --button-font-size: 13px;
    }
    
    button.novoshop-add-to-cart,
    button.add-to-cart-ajax,
    .novoshop-add-to-cart,
    .add-to-cart-ajax,
    .ajax_add_to_cart,
    .add_to_cart_button {
        min-width: var(--button-min-width) !important;
        height: var(--button-height) !important;
        padding: var(--button-padding) !important;
        font-size: var(--button-font-size) !important;
    }
}

/* =====================================
   Responsive - Mobile
   ===================================== */

@media (max-width: 480px) {
    :root {
        --button-min-width: 90px;
        --button-height: 38px;
        --button-padding: 8px 12px;
        --button-font-size: 12px;
    }
    
    button.novoshop-add-to-cart,
    button.add-to-cart-ajax,
    .novoshop-add-to-cart,
    .add-to-cart-ajax,
    .ajax_add_to_cart,
    .add_to_cart_button {
        min-width: var(--button-min-width) !important;
        height: var(--button-height) !important;
        padding: var(--button-padding) !important;
        font-size: var(--button-font-size) !important;
    }
    
    .products-grid:not([class*="columns-"]):not(.columns-2):not(.columns-3):not(.columns-4):not(.columns-5):not(.columns-6),
    .woocommerce ul.products:not(.columns-2):not(.columns-3):not(.columns-4):not(.columns-5):not(.columns-6) {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
        gap: 12px !important;
    }
}

/* =====================================
   Force Override WooCommerce Styles
   ===================================== */

body.woocommerce button.button.alt,
body.woocommerce-page button.button.alt,
body.woocommerce a.button.alt,
body.woocommerce-page a.button.alt,
body.woocommerce input.button.alt,
body.woocommerce-page input.button.alt {
    min-width: var(--button-min-width) !important;
    height: var(--button-height) !important;
}

/* =====================================
   محافظت از position absolute
   ===================================== */

.product-card {
    position: relative !important;
}

.product-card > * {
    position: relative !important;
}

/* =====================================
   جلوگیری از تغییر در animation
   ===================================== */

button.novoshop-add-to-cart,
button.add-to-cart-ajax,
.novoshop-add-to-cart,
.add-to-cart-ajax {
    transform: translateZ(0) !important;
    will-change: auto !important;
}

/* حذف transform در hover */
button.novoshop-add-to-cart:hover,
button.add-to-cart-ajax:hover,
.novoshop-add-to-cart:hover,
.add-to-cart-ajax:hover {
    transform: none !important;
}

/* =====================================
   Debug Mode (کامنت کنید در production)
   ===================================== */

/* Uncomment برای دیدن border دکمه‌ها و دیباگ
button.novoshop-add-to-cart,
.add-to-cart-ajax {
    border: 2px solid red !important;
}

button.novoshop-add-to-cart.loading,
.add-to-cart-ajax.loading {
    border: 2px solid orange !important;
}

button.novoshop-add-to-cart.added,
.add-to-cart-ajax.added {
    border: 2px solid green !important;
}
*/