add_action('woocommerce_before_variations_form', function () {
    ?>
    <style>
        .woo-variation-buttons {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* ۳ ستون در دسکتاپ */
            gap: 10px;
            max-width: 100%;
            padding: 0;
            box-sizing: border-box;
        }
        .woo-variation-buttons button {
            padding: 8px 12px; /* کاهش فاصله داخلی (padding) */
            border: 2px solid #ddd;
            cursor: pointer;
            border-radius: 5px;
            background: #f9f9f9;
            transition: 0.3s;
            font-size: 14px; /* اندازه فونت در دسکتاپ */
            font-weight: bold;
            width: 100%;
            text-align: center;
            min-height: 50px; /* ارتفاع ثابت */
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
        }
        .woo-variation-buttons button.selected {
            border-color: #0071a1;
            background: #0071a1;
            color: #fff;
        }
        .variations select {
            display: none !important;
        }

        /* 🟢 موبایل و تبلت (۲ ستون) */
        @media (max-width: 768px) {
            .woo-variation-buttons {
                grid-template-columns: repeat(2, 1fr); /* ۲ ستون در تبلت */
                gap: 8px; /* فاصله بین دکمه‌ها در تبلت */
            }
        }

        /* 🔵 موبایل کوچکتر از 480px (۲ ستون در موبایل) */
        @media (max-width: 480px) {
            .woo-variation-buttons {
                grid-template-columns: repeat(2, 1fr); /* ۲ ستون در موبایل */
                gap: 8px; /* فاصله بین دکمه‌ها در موبایل */
            }
            .woo-variation-buttons button {
                width: 100%; /* دکمه‌ها به‌صورت ۲ ستون در موبایل */
                min-width: 0; /* جلوگیری از کشیده شدن دکمه‌ها */
                font-size: 12px; /* کاهش اندازه فونت در موبایل */
                padding: 10px 15px; /* کمی افزایش فاصله داخلی برای موبایل */
            }
        }
    </style>
    <?php
});

add_action('woocommerce_after_variations_form', function () {
    ?>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            document.querySelectorAll(".variations select").forEach(select => {
                let container = document.createElement("div");
                container.className = "woo-variation-buttons";
                
                select.querySelectorAll("option").forEach(option => {
                    if (option.value) {
                        let button = document.createElement("button");
                        button.type = "button";
                        button.textContent = option.text;
                        button.dataset.value = option.value;

                        button.addEventListener("click", function () {
                            document.querySelectorAll(".woo-variation-buttons button").forEach(btn => btn.classList.remove("selected"));
                            this.classList.add("selected");

                            select.value = this.dataset.value;
                            select.dispatchEvent(new Event("change"));
                        });

                        container.appendChild(button);
                    }
                });

                select.parentElement.appendChild(container);
            });
        });
    </script>
    <?php
});