/* ========================================================
   دیزاین اختصاصی صفحه اصلی سایت مکمل اسب (Mobile-First)
======================================================== */

.jscm-custom-home-main {
    margin: 0 auto;
    direction: rtl;
    font-family: inherit;
}

/* =====================================
   جداکننده‌ها و هدرها
====================================== */
.jscm-section-divider {
    display: flex; align-items: center; justify-content: center; gap: 15px; margin: 0;
}
.jscm-section-title {
    color: #0b1c3d !important; font-size: 1.15rem !important;  margin: 0 !important;
}
.jscm-line-decor {
    height: 1px; background: #00843d; flex-grow: 1; max-width: 60px; position: relative;
}
.jscm-line-decor::after {
    content: ''; position: absolute; left: 0; top: -3px; width: 7px; height: 7px;
    background: #F6F6F6; border: 1px solid #00843d; transform: rotate(45deg);
}
.jscm-line-decor.right::after { left: auto; right: 0; }

.jscm-header-row {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px; padding: 0 5px;
}

/* دیزاین جدید دکمه مشاهده همه (حرفه‌ای‌تر) */
.jscm-view-all-link {
    display: flex; align-items: center; gap: 4px; color: #0b1c3d; font-size: 0.9rem;
    text-decoration: none !important; transition: all 0.3s ease; white-space: nowrap;
}
.jscm-view-all-link:hover { color: #00843d; transform: translateX(-3px); }

/* اسکرول کشویی کاملاً آزاد */
.jscm-scroll-container {
    display: flex; gap: 10px; overflow-x: auto; padding: 5px 12px 15px 12px;
    scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; 
}
.jscm-scroll-container::-webkit-scrollbar { display: none; }


/* =====================================
   ۱. باکس هوش مصنوعی
====================================== */
.jscm-app-ui-wrapper { margin: 0 auto 40px auto; }
.jscm-ai-hero-box {
    background: linear-gradient(160deg, #07122a 0%, #0b1c3d 50%, #07122a 100%);
    border-radius: 24px; padding: 30px 20px; text-align: center;
    box-shadow: 0 20px 40px rgba(11, 28, 61, 0.25); border: 1px solid rgba(0, 132, 61, 0.3);
}
.jscm-ai-header { margin-bottom: 25px; }
.jscm-ai-icon { display: inline-flex; justify-content: center; align-items: center; width: 65px; height: 65px; margin-bottom: 15px; }
h1.jscm-ai-title {
    color: #ffffff !important;
    font-size: 1.3rem !important;
    line-height: 1.5 !important;
    margin-bottom: 10px !important;
    padding: 0 !important;
    display: flex;
    gap: 5px;
}
.jscm-text-gold { color: #00843d !important; }
.jscm-ai-subtitle { color: #cbd5e1 !important; font-size: 0.9rem !important; line-height: 1.7 !important; max-width: 90%; margin: 0 auto !important; }

.jscm-ai-options-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 25px; }


.jscm-ai-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 12px;
    border: 1px solid #00843d;
    border-radius: 14px;
    text-decoration: none !important;
    transition: 0.3s;
}

.jscm-ai-option:hover { background: rgba(0, 132, 61, 0.15); transform: translateY(-2px); }
.jscm-opt-text { color: #ffffff;font-size: 0.8rem; }
.jscm-opt-icon { opacity: 0.9; }

.jscm-ai-start-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: linear-gradient(180deg, #00c85a 0%, #00843d 100%); color: #0b1c3d !important;
    font-size: 1.05rem; font-weight: 700; padding: 12px 20px; border-radius: 16px; text-decoration: none !important;
    box-shadow: 0 8px 20px rgba(0, 132, 61, 0.3); transition: 0.3s;
    flex-direction: row-reverse;
}
.jscm-ai-start-btn:hover { box-shadow: 0 10px 25px rgba(0, 132, 61, 0.5); transform: translateY(-2px); }


/* =====================================
   ۲. دسته‌بندی محصولات
====================================== */
.jscm-home-cats-section { margin: 0 auto 10px auto; }
.jscm-home-cats-section .jscm-section-divider { margin-bottom: 25px; }
.jscm-cat-card {
    flex: 0 0 calc(41% - 10px); background: #F6F6F6; border: 1.5px solid #e5e7eb; border-radius: 18px;
    padding: 15px 10px; display: flex; flex-direction: column; align-items: center; text-decoration: none !important; transition: 0.3s;
}
.jscm-cat-card:hover { border-color: #00843d; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(11, 28, 61, 0.05); }
.jscm-cat-image-box { margin-bottom: 12px; height: 60px; display: flex; align-items: center; justify-content: center; }
.jscm-cat-image-box img { max-height: 100%; width: auto; object-fit: contain; }
.jscm-cat-name { color: #475569; font-size: 0.75rem; font-weight: 700; text-align: center; line-height: 1.5; }


/* =====================================
   ۳ و ۹. باکس‌های مزایا (هوشمند برای ۳ و ۴ آیتم)
====================================== */
.jscm-features-wrapper {padding:12px; margin: 0 auto 30px auto; }
.jscm-features-grid {
    background: #0b1c3d; border-radius: 20px; padding: 30px 15px; display: grid; gap: 15px;
    box-shadow: 0 15px 30px rgba(11, 28, 61, 0.15);
}

.jscm-feature-col { text-align: center; padding: 10px; }
.jscm-feature-icon { margin-bottom: 12px; }
.jscm-feature-icon svg { width: 38px; height: 38px; }
.jscm-feat-title { color: #ffffff !important; font-size: 1rem; font-weight: 800; margin: 0 0 8px 0; }
.jscm-feat-desc { color: #cbd5e1; font-size: 0.8rem; margin: 0; line-height: 1.6; }

/* دسکتاپ: گرید ۳ ستونه و ۴ ستونه */
@media (min-width: 992px) {
    .jscm-features-grid.cols-3 { grid-template-columns: repeat(3, 1fr);  margin: 0 auto; }
    .jscm-features-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
    .jscm-feature-col.border-left { border-right: 1px solid rgba(255, 255, 255, 0.08); }
}

/* موبایل: گرید ۳تایی (توی یک ردیف) و ۴تایی (۲در۲) */
@media (max-width: 991px) {
    /* تنظیم اختصاصی برای اینکه ۳تایی در موبایل در یک ردیف بماند */
    .jscm-features-grid.cols-3 {
        grid-template-columns: repeat(3, 1fr);
        padding: 15px 5px;
        gap: 5px;
    }
    .jscm-features-grid.cols-3 .jscm-feature-col {
        padding: 10px 5px;
        border-right: none !important;
        border-left: 1px solid rgba(255, 255, 255, 0.08); /* خط بین ستون‌ها */
    }
    .jscm-features-grid.cols-3 .jscm-feature-col:last-child { border-left: none; }
    .jscm-features-grid.cols-3 .jscm-feature-icon svg { width: 28px; height: 28px; }
    .jscm-features-grid.cols-3 .jscm-feat-title { font-size: 0.75rem; }
    .jscm-features-grid.cols-3 .jscm-feat-desc { font-size: 0.65rem; }

    /* تنظیم برای باکس ۴تایی (به شکل گرید 2x2 شیک) */
    .jscm-features-grid.cols-4 { grid-template-columns: repeat(2, 1fr); padding: 15px; gap: 0;}
    .jscm-features-grid.cols-4 .jscm-feature-col { border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding: 20px 10px; }
    .jscm-features-grid.cols-4 .jscm-feature-col:nth-child(odd) { border-left: 1px solid rgba(255, 255, 255, 0.08); }
    .jscm-features-grid.cols-4 .jscm-feature-col:nth-last-child(-n+2) { border-bottom: none; }
}


/* =====================================
   ۴ و ۷. محصولات ووکامرس (۵ ستونه)
====================================== */
.jscm-home-products-section { margin: 0 auto; overflow: hidden; }
.jscm-home-products-section .woocommerce { width: 100%; }


/* =====================================
   ۵. باکس یکپارچه باشگاه‌ها (دیزاین جدید)
====================================== */
.jscm-partners-section { margin: 0 auto 20px auto; padding:12px; }
.jscm-partners-box {
    background: #F6F6F6; border: 1px solid #e5e7eb; border-radius: 20px;
    padding: 20px 12px; text-align: center;
}
.jscm-partners-title { color: #0b1c3d; font-size: 1.1rem; font-weight: 800; margin-bottom: 25px; }

.jscm-partner-item {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    gap: 10px; min-width: 110px; flex: 1; text-align: center;
}
.jscm-partner-item img {
    width: 70px; height: 70px; object-fit: contain; mix-blend-mode: multiply; /* حذف بکگراند سفید لوگوها */
}
.jscm-partner-item span {
    font-size: 0.75rem; color: #475569; font-weight: 700; line-height: 1.4;
}


/* =====================================
   ۶. بنرهای اسلایدی (کاملاً خام و بدون افکت)
====================================== */
.jscm-banners-section { margin: 0 auto 20px auto; overflow: hidden; }

.jscm-banner-link {
    flex: 0 0 calc(85% - 15px); /* اندازه در موبایل */
    border-radius: 20px; overflow: hidden; display: block;
}

.jscm-banner-link img {
    width: 100%; height: auto; display: block; object-fit: cover; border-radius: 20px; transition: transform 0.3s ease;
}

.jscm-banner-link:hover img { transform: scale(1.02); }


/* =====================================
   ۸. دانستنی‌ها و مقالات
====================================== */
.jscm-home-blog-section { margin: 0 auto 0px auto; overflow: hidden; }
.jscm-blog-card {
    flex: 0 0 calc(75% - 15px); background: #ffffff; border: 1px solid #e2e8f0; border-radius: 18px;
    overflow: hidden; text-decoration: none !important; transition: 0.3s; display: flex; flex-direction: column;
}
.jscm-blog-card:hover { border-color: #00843d; box-shadow: 0 10px 25px rgba(11, 28, 61, 0.08); transform: translateY(-3px); }
.jscm-blog-thumb { position: relative; height: 180px; width: 100%; overflow: hidden; }
.jscm-blog-thumb img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.jscm-blog-card:hover .jscm-blog-thumb img { transform: scale(1.05); }
.jscm-blog-cat-badge {
    position: absolute; bottom: 15px; right: 15px; background: #ffffff; color: #0b1c3d;
    font-size: 0.65rem; font-weight: 700; padding: 4px 10px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.jscm-blog-title { color: #0b1c3d; font-size: 0.95rem; font-weight: 800; line-height: 1.6; margin: 15px; padding: 0; flex-grow: 1; }
.jscm-blog-meta { display: flex; align-items: center; justify-content: space-between; padding: 0 15px 15px 15px; color: #94a3b8; font-size: 0.7rem; font-weight: 600; }
.jscm-meta-item { display: flex; align-items: center; gap: 4px; }


/* =====================================
   رسپانسیو (دسکتاپ و موبایل)
====================================== */
/* --- دسکتاپ --- */
@media (min-width: 992px) {
   .jscm-home-products-section ul.products {
        display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; gap: 15px !important;
         scrollbar-width: none; -webkit-overflow-scrolling: touch;
        padding:0px 12px;
    }
    .jscm-home-products-section ul.products::-webkit-scrollbar { display: none; }
    .jscm-home-products-section ul.products li.product {
        flex: 0 0 calc(20% - 10px) !important; max-width: calc(65% - 10px) !important; margin: 0 !important;
    }
    
    
    
    /* بنرها در دسکتاپ ۳ تایی */
    .jscm-banner-link { flex: 0 0 calc(33.333% - 15px); }
    
    .jscm-home-blog-section .jscm-scroll-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .jscm-blog-card { flex: auto; }
    
        /* دسته بندی چند تایی*/

    .jscm-cat-card {
    flex: 0 0 calc(15% - 10px);
    }
    
h1.jscm-ai-title {
    gap: 5px;
    align-items: center !important;
    justify-content: center!important;
            display: flex!important;
}
}

/* --- تبلت --- */
@media (max-width: 991px) and (min-width: 768px) {
    .jscm-banner-link { flex: 0 0 calc(50% - 15px); } /* بنرها در تبلت ۲ تایی */
}

/* --- تبلت و موبایل (اسلایدر محصولات) --- */
@media (max-width: 991px) {
    .jscm-home-products-section ul.products {
        display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; gap: 15px !important;
         scrollbar-width: none; -webkit-overflow-scrolling: touch;
        padding:0px 12px;
    }
    .jscm-home-products-section ul.products::-webkit-scrollbar { display: none; }
    .jscm-home-products-section ul.products li.product {
        flex: 0 0 calc(65% - 10px) !important; max-width: calc(65% - 10px) !important; margin: 0 !important;
    }
}

/* --- موبایل --- */
@media (max-width: 767px) {
    .jscm-header-row { flex-direction: column; gap: 10px;}
    .jscm-section-divider { width: 100%; justify-content: space-between; }
    .jscm-line-decor { max-width: none; 
    }
    .jscm-app-ui-wrapper {padding: 0px 12px;
}
    
}

@media (max-width: 480px) {
    .jscm-home-products-section ul.products li.product { flex: 0 0 calc(75% - 10px) !important; max-width: calc(75% - 10px) !important; }
    .jscm-banner-link { flex: 0 0 calc(90% - 10px); }
    .jscm-feat-title { font-size: 0.85rem; }
    .jscm-feat-desc { font-size: 0.7rem; }
}