/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

/* تعریف متغیرها در محدوده خود کانتینر تا با المنتور تداخل نداشته باشد */
    .ax-custom-grid-wrapper {
        --bg-color: transparent;
        --card-bg: #ffffff;
        --text-bg: #f8fafc;
        --separator-color: #cbd5e1;
        --highlight-color: rgba(14, 165, 233, 1);
        --glow-center: rgba(14, 165, 233, 0.1);
        
        font-family: 'Vazirmatn', sans-serif;
        width: 100%;
        display: flex;
        justify-content: center;
        direction: rtl;
    }

    /* گرید کانتینر */
    .ax-grid-container {
        display: grid;
        /* در دسکتاپ: حداقل عرض 180 پیکسل */
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 15px;
        max-width: 1300px;
        width: 100%;
    }

    /* کارت اصلی */
    .ax-card {
        background-color: rgba(255, 255, 255, 0.02);
        border-radius: 16px;
        position: relative;
        cursor: pointer;
        height: 270px;
        display: flex;
        flex-direction: column;
        text-decoration: none !important;
        color: inherit;
        overflow: visible;
        border: 1px solid rgba(0,0,0,0.05); /* خط دور بسیار محو برای دیده شدن در حالت عادی */
        transition: transform 0.2s ease;
    }

    /* لایه بوردر نئونی (Spotlight) */
    .ax-card::before {
        content: "";
        border-radius: 16px;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        transition: opacity 0.5s;
        z-index: 1;
        pointer-events: none;
        background: radial-gradient(
            350px circle at var(--mouse-x) var(--mouse-y),
            var(--highlight-color) 0%, 
            rgba(14, 165, 233, 0.3) 30%,
            transparent 70%
        );
    }

    /* نمایش بوردر هنگام هاور روی کانتینر */
    .ax-grid-container:hover .ax-card::before {
        opacity: 1;
    }

    /* محتوای داخلی کارت */
    .ax-card-content {
        background-color: var(--card-bg);
        border-radius: 15px;
        position: absolute;
        inset: 2px; /* فاصله برای بوردر */
        z-index: 2;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    /* بخش بالایی (عکس) */
    .ax-card-top {
        flex-grow: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        padding: 10px;
        background-color: #fff;
    }

    .ax-image-wrapper {
        position: relative;
        width: 100px;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .ax-circle-bg {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #e0f2fe;
        z-index: 1;
        transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .ax-card-top img {
        width: 90%;
        height: 90%;
        object-fit: contain;
        z-index: 2;
        transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* بخش پایینی (متن) */
    .ax-text-area {
        background-color: var(--text-bg);
        padding: 12px 8px;
        text-align: center;
        position: relative;
        z-index: 4;
        border-top: 2px dashed var(--separator-color);
    }

    .ax-category-title {
        font-size: 0.95rem;
        font-weight: 700;
        color: #334155;
        margin: 0 0 4px 0;
        line-height: 1.4;
    }

    .ax-product-count {
        font-size: 0.8rem;
        color: #94a3b8;
        margin: 0;
    }

    /* افکت‌های هاور */
    .ax-card:hover .ax-circle-bg {
        transform: scale(1.15);
    }
    .ax-card:hover img {
        transform: scale(1.15) translateY(-8px);
    }
    .ax-card:hover .ax-category-title {
        color: #0e72a0;
    }

    /* افکت نور داخلی (Glow) */
    .ax-card::after {
        content: "";
        border-radius: 16px;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        z-index: 3;
        pointer-events: none;
        background: radial-gradient(
            450px circle at var(--mouse-x) var(--mouse-y),
                var(--glow-center) 10%,
                transparent 90%
        );
        transition: opacity 0.5s;
    }
    .ax-grid-container:hover .ax-card::after {
        opacity: 1;
    }

    /* رنگ‌بندی اختصاصی دایره‌ها */
    .ax-card:nth-child(1) .ax-circle-bg { background-color: #fee2e2; }
    .ax-card:nth-child(2) .ax-circle-bg { background-color: #ffedd5; }
    .ax-card:nth-child(3) .ax-circle-bg { background-color: #fef9c3; }
    .ax-card:nth-child(4) .ax-circle-bg { background-color: #dcfce7; }
    .ax-card:nth-child(5) .ax-circle-bg { background-color: #dbeafe; }
    .ax-card:nth-child(6) .ax-circle-bg { background-color: #e0e7ff; }
    .ax-card:nth-child(7) .ax-circle-bg { background-color: #fae8ff; }
    .ax-card:nth-child(8) .ax-circle-bg { background-color: #ffe4e6; }
    .ax-card:nth-child(9) .ax-circle-bg { background-color: #f3f4f6; }
    .ax-card:nth-child(10) .ax-circle-bg { background-color: #ecfccb; }
    .ax-card:nth-child(11) .ax-circle-bg { background-color: #ccfbf1; }
    .ax-card:nth-child(12) .ax-circle-bg { background-color: #ffedd5; }

    /* ----- تنظیمات ریسپانسیو موبایل (2 کارت در ردیف) ----- */
    @media (max-width: 767px) {
        .ax-grid-container {
            /* اجبار به نمایش 2 ستون مساوی */
            grid-template-columns: repeat(2, 1fr);
            gap: 10px; /* کاهش فاصله در موبایل */
        }

        .ax-card {
            height: 230px; /* کاهش ارتفاع کارت در موبایل */
        }
        
        .ax-image-wrapper {
            width: 80px; /* کوچک کردن دایره عکس */
            height: 80px;
        }

        .ax-category-title {
            font-size: 0.85rem; /* کوچک کردن فونت */
        }

        .ax-product-count {
            font-size: 0.7rem;
        }
    }


.joinchat__button{
	margin-bottom: 50px !important;
}