/* ========================================
   BANOO PRODUCT CARDS - SUPRA SVG STYLE
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;600;700&display=swap');

* {
    box-sizing: border-box;
}

/* کانتینر اصلی کارت‌ها - اسکرول افقی */
.banoo-cards-container {
    display: flex;
    flex-direction: row;
    gap: 45px;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    position: relative;
    z-index: 1;
    margin: 60px auto;
    padding: 40px 60px;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
}

/* استایل اسکرول بار برای مرورگرهای وبکیت */
.banoo-cards-container::-webkit-scrollbar {
    height: 8px;
}

.banoo-cards-container::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 4px;
}

.banoo-cards-container::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.banoo-cards-container::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.5);
}

.banoo-cards-container * {
    box-sizing: border-box;
}

/* کانتینر کارت */
.banoo-card-container {
    position: relative;
    width: 210px;
    max-width: 210px;
    min-width: 210px;
    flex-shrink: 0;
    display: block;
    filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.15));
    transition: transform 0.3s ease, filter 0.3s ease;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
}

.banoo-card-container:hover {
    filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.2));
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}

/* SVG کارت - حفظ نسبت 69:91 */
.banoo-card-svg {
    width: 100%;
    max-width: 210px;
    height: auto;
    display: block;
    aspect-ratio: 69 / 91;
    box-sizing: border-box;
}

.banoo-card-svg text {
    pointer-events: none;
    user-select: none;
}

/* لینک قابل کلیک در SVG */
.banoo-card-svg a {
    fill: transparent;
    cursor: pointer;
}

/* دکمه سبد خرید - Hover effect */
.banoo-cart-button circle {
    transition: fill 0.3s ease;
}

.banoo-cart-button path {
    transition: fill 0.3s ease;
}

.banoo-cart-button:hover circle {
    fill: #2563eb !important;
}

.banoo-cart-button:hover path {
    fill: white !important;
}

/* پیام عدم وجود محصول */
.banoo-no-products {
    text-align: center;
    padding: 60px 20px;
    color: #94a3b8;
    font-size: 18px;
    width: 100%;
    font-family: 'Vazirmatn', 'Iran Sans', 'Tahoma', 'Arial', sans-serif;
}

.banoo-no-products p {
    margin: 0;
    font-weight: 500;
    opacity: 0.8;
}

/* ریسپانسیو برای دسکتاپ بزرگ */
@media (min-width: 1400px) {
    .banoo-cards-container {
        gap: 50px;
        padding: 40px 80px;
    }
}

/* ریسپانسیو برای دسکتاپ */
@media (min-width: 769px) {
    .banoo-cards-container {
        padding: 40px 60px;
        margin: 60px auto;
    }
}

/* ریسپانسیو تبلت */
@media (max-width: 992px) and (min-width: 769px) {
    .banoo-cards-container {
        gap: 30px !important;
        padding: 30px 20px !important;
    }
}

/* ریسپانسیو موبایل */
@media screen and (max-width: 768px) {
    .banoo-cards-container {
        padding: 20px 16px !important;
        gap: 30px !important;
        margin: 30px auto !important;
        scrollbar-width: none !important; /* مخفی کردن اسکرول‌بار در Firefox */
        -ms-overflow-style: none !important; /* مخفی کردن اسکرول‌بار در IE و Edge */
    }

    /* مخفی کردن اسکرول‌بار در مرورگرهای WebKit (Chrome, Safari) */
    .banoo-cards-container::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    .banoo-card-container {
        width: 180px !important;
        max-width: 180px !important;
        min-width: 180px !important;
    }

    .banoo-card-svg {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* ریسپانسیو موبایل کوچک */
@media screen and (max-width: 480px) {
    .banoo-cards-container {
        padding: 15px 12px !important;
        gap: 25px !important;
        margin: 20px auto !important;
        scrollbar-width: none !important; /* مخفی کردن اسکرول‌بار در Firefox */
        -ms-overflow-style: none !important; /* مخفی کردن اسکرول‌بار در IE و Edge */
    }

    /* مخفی کردن اسکرول‌بار در مرورگرهای WebKit (Chrome, Safari) */
    .banoo-cards-container::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    .banoo-card-container {
        width: 160px !important;
        max-width: 160px !important;
        min-width: 160px !important;
    }
}