/* =========================================================
   GLOBAL TOKENS & BASICS
   ========================================================= */

:root{
    --mm-ms-color-title: #020202;
    --mm-ms-color-subtle: #787878;
    --mm-ms-color-border: #D7D7D7;
    --mm-ms-color-card-bg: #FFFFFF;
    --mm-ms-color-btn-bg: #FF5101;
    --mm-ms-color-btn-text: #FFFFFF;
    --mm-ms-font-main: "Dana", sans-serif;
}

/* دکمه‌های گلوبال افزونه */
.mm-ms-btn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:8px 18px !important;
    border-radius:999px !important;
    border:1px solid transparent !important;
    font-family:var(--mm-ms-font-main) !important;
    font-size:14px !important;
    font-weight:500 !important;
    text-decoration:none !important;
    cursor:pointer !important;
    transition:all 0.2s ease !important;
    box-sizing:border-box !important;
}

.mm-ms-btn-primary{
    background-color:var(--mm-ms-color-btn-bg) !important;
    color:var(--mm-ms-color-btn-text) !important;
}

.mm-ms-btn-primary:hover{
    background-color:#e44700 !important;
}

/* تیترها و نوشته‌های اصلی کارت‌ها (گلوبال داخل افزونه) */
.mm-ms-heading,
.mm-ms-motor-card-title,
.mm-ms-term-card-title{
    font-family:var(--mm-ms-font-main) !important;
    font-size:17px !important;
    font-weight:500 !important;
    color:var(--mm-ms-color-title) !important;
    text-align:center !important;
}

.mm-ms-subtext,
.mm-ms-motor-card-meta,
.mm-ms-term-card-meta{
    font-family:var(--mm-ms-font-main) !important;
    font-size:13px !important;
    font-weight:400 !important;
    color:var(--mm-ms-color-subtle) !important;
}

/* =========================================================
   FILTER FORM (شورتکد [mm_motor_filter])
   ========================================================= */

.mm-ms-filter-wrap{
    width:100% !important;
    max-width:1296px !important;
    margin:0 auto 24px auto !important;
    background:#FFFFFF !important;
    border:1px solid var(--mm-ms-color-border) !important;
    border-radius:16px !important;
    padding:16px 20px !important;
    box-sizing:border-box !important;
}

.mm-ms-filter-form{
    width:100% !important;
}

.mm-ms-filter-grid{
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important; /* 4 فیلد + دکمه */
    gap:12px 16px !important;
    align-items:flex-end !important;
}

.mm-ms-filter-field{
    display:flex !important;
    flex-direction:column !important;
    gap:4px !important;
    text-align:center !important;
}

.mm-ms-filter-field label{
    font-family:var(--mm-ms-font-main) !important;
    font-size:16px !important;
    font-weight:900 !important;
    color:var(--mm-ms-color-title) !important;
}

.mm-ms-filter-field select{
    width:100% !important;
    height:40px !important;
    padding:6px 10px !important;
    border-radius:8px !important;
    border:1px solid var(--mm-ms-color-border) !important;
    font-family:var(--mm-ms-font-main) !important;
    font-size:13px !important;
    box-sizing:border-box !important;
    background-color:#FFFFFF !important;
}

.mm-ms-filter-field-button{
    text-align:center !important;
}

.mm-ms-filter-submit{
    width:100% !important;
}

/* موبایل: فیلتر ۲×۲ و دکمه تمام عرض زیر */
@media (max-width:768px){
    .mm-ms-filter-wrap{
        padding:12px 12px !important;
        border-radius:12px !important;
    }
    .mm-ms-filter-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
    .mm-ms-filter-field-button{
        grid-column:1 / -1 !important;
    }
}

/* کانتینر نتایج (در صفحه search-result) */
.mm-ms-filter-results{
    margin-top:20px !important;
}

/* لودینگ (در صورت استفاده در JS) */
.mm-ms-filter-loading-backdrop{
    position:fixed !important;
    inset:0 !important;
    background:rgba(0,0,0,0.25) !important;
    backdrop-filter:blur(4px) !important;
    z-index:9999 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}

.mm-ms-filter-loading-box{
    background:#FFFFFF !important;
    padding:16px 24px !important;
    border-radius:12px !important;
    box-shadow:0 12px 30px rgba(0,0,0,0.20) !important;
    font-family:var(--mm-ms-font-main) !important;
    font-size:14px !important;
    color:var(--mm-ms-color-title) !important;
    text-align:center !important;
}

/* =========================================================
   MOTOR CARDS GRID (نتایج محصولات، شورتکدها)
   ========================================================= */

.mm-ms-motor-cards-grid{
    width:100% !important;
    max-width:1296px !important;
    margin:0 auto 24px auto !important;
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:16px !important;
    box-sizing:border-box !important;
}

@media (max-width:1024px){
    .mm-ms-motor-cards-grid{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    }
}

@media (max-width:768px){
    .mm-ms-motor-cards-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
}

@media (max-width:480px){
    .mm-ms-motor-cards-grid{
        grid-template-columns:1fr !important;
    }
}

.mm-ms-motor-card{
    background:var(--mm-ms-color-card-bg) !important;
    border:1px solid var(--mm-ms-color-border) !important;
    border-radius:16px !important;
    overflow:hidden !important;
    display:flex !important;
    flex-direction:column !important;
    box-shadow:0 0 0 rgba(0,0,0,0) !important;
    transition:box-shadow 0.2s ease, transform 0.2s ease !important;
}

.mm-ms-motor-card:hover{
    box-shadow:0 12px 30px rgba(0,0,0,0.08) !important;
    transform:translateY(-2px) !important;
}

/* تصویر کارت – همه یک سایز */
.mm-ms-motor-card-thumb{
    width:100% !important;
    aspect-ratio:4/3 !important; /* ابعاد ثابت برای همه */
    overflow:hidden !important;
    background:#F5F5F5 !important;
}

.mm-ms-motor-card-thumb img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    display:block !important;
}

.mm-ms-motor-card-body{
    padding:12px 14px 14px 14px !important;
}

.mm-ms-motor-card-title{
    margin:0 0 6px 0 !important;
}

.mm-ms-motor-card-title a{
    color:inherit !important;
    text-decoration:none !important;
}

.mm-ms-motor-card-meta{
    margin-bottom:10px !important;
}

.mm-ms-meta-line{
    display:flex !important;
    justify-content:space-between !important;
    margin-bottom:2px !important;
}

.mm-ms-meta-line span:first-child{
    color:var(--mm-ms-color-subtle) !important;
}

.mm-ms-meta-line span:last-child{
    color:var(--mm-ms-color-title) !important;
    font-weight:400 !important;
    font-size:15px !important;
    font-family:var(--mm-ms-font-main) !important;
}

.mm-ms-motor-card-footer{
    display:flex !important;
    justify-content:center !important;
}

/* =========================================================
   TERM CARDS (نوع موتور + برند)
   ========================================================= */

.mm-ms-term-cards-grid{
    width:100% !important;
    max-width:1296px !important;
    margin:0 auto 24px auto !important;
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:16px !important;
}

@media (max-width:1024px){
    .mm-ms-term-cards-grid{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    }
}

@media (max-width:768px){
    .mm-ms-term-cards-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
}

@media (max-width:480px){
    .mm-ms-term-cards-grid{
        grid-template-columns:1fr !important;
    }
}

.mm-ms-term-card{
    background:var(--mm-ms-color-card-bg) !important;
    border:1px solid var(--mm-ms-color-border) !important;
    border-radius:16px !important;
    overflow:hidden !important;
    display:flex !important;
    flex-direction:column !important;
    box-shadow:0 0 0 rgba(0,0,0,0) !important;
    transition:box-shadow 0.2s ease, transform 0.2s ease !important;
}

.mm-ms-term-card:hover{
    box-shadow:0 12px 30px rgba(0,0,0,0.08) !important;
    transform:translateY(-2px) !important;
}

.mm-ms-term-card-thumb{
    width:100% !important;
    aspect-ratio:4/3 !important;
    overflow:hidden !important;
    background:#F5F5F5 !important;
}

.mm-ms-term-card-thumb img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    display:block !important;
}

.mm-ms-term-card-body{
    padding:12px 14px 14px !important;
    text-align:center !important;
}

.mm-ms-term-card-title{
    margin:0 0 6px 0 !important;
}

.mm-ms-term-card-meta{
    margin-bottom:8px !important;
}

.mm-ms-term-count-label{
    color:var(--mm-ms-color-subtle) !important;
    font-size:13px !important;
}

.mm-ms-term-count-value{
    color:var(--mm-ms-color-title) !important;
    font-weight:400 !important;
    font-size:15px !important;
    font-family:var(--mm-ms-font-main) !important;
}

/* =========================================================
   SPECS TABLE (مشخصات فنی در فرانت – 8 ستون)
   شورتکد [mm_motor_specs]
   ========================================================= */

.mm-ms-specs-table{
    width:100% !important;
    border-collapse:separate !important;
    border-spacing:8px 8px !important;
    margin-top:16px !important;
}

/* tbody را گرید 8 ستونی می‌کنیم */
.mm-ms-specs-table tbody{
    display:grid !important;
    grid-template-columns:repeat(8,minmax(0,1fr)) !important; /* هر فیلد = th + td = 2 ستون → 4 فیلد در هر ردیف */
    gap:0 !important;
}

/* <tr> فقط ظرف منطقی، پخش در گرید */
.mm-ms-specs-table tr{
    display:contents !important;
}

/* هر th و td یک سلول گرید */
.mm-ms-specs-table th,
.mm-ms-specs-table td{
    border:1px solid #E5E5E5 !important;
    padding:6px 8px !important;
    font-size:13px !important;
    font-family:var(--mm-ms-font-main) !important;
    background:#FFFFFF !important;
    box-sizing:border-box !important;
}

/* عنوان فیلد */
.mm-ms-specs-table th{
    font-weight:500 !important;
    color:var(--mm-ms-color-subtle) !important;
    text-align:right !important;
}

/* مقدار فیلد */
.mm-ms-specs-table td{
    color:var(--mm-ms-color-title) !important;
    text-align:right !-important;
}

/* تبلت – 4 ستون → هر ردیف 2 فیلد */
@media (max-width:1024px){
    .mm-ms-specs-table tbody{
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    }
}

/* موبایل – 2 ستون → هر ردیف 1 فیلد */
@media (max-width:768px){
    .mm-ms-specs-table tbody{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
}

/* خیلی کوچک – 1 ستون، عنوان و مقدار زیر هم */
@media (max-width:480px){
    .mm-ms-specs-table tbody{
        grid-template-columns:repeat(1,minmax(0,1fr)) !important;
    }
}

/* =========================================================
   STORES TABLE (لیست فروشگاه‌ها در صفحه محصول)
   شورتکد [mm_motor_stores]
   ========================================================= */

.mm-ms-stores-table-wrap{
    width:100% !important;
    max-width:1296px !important;
    margin:16px auto !important;
    overflow-x:auto !important;
}

.mm-ms-stores-table{
    width:100% !important;
    border-collapse:collapse !important;
    min-width:720px !important;
}

.mm-ms-stores-table th,
.mm-ms-stores-table td{
    border-bottom:1px solid #E5E5E5 !important;
    padding:6px 8px !important;
    font-size:13px !important;
    font-family:var(--mm-ms-font-main) !important;
    text-align:center !important;
}

.mm-ms-stores-table th{
    font-weight:500 !important;
    color:var(--mm-ms-color-title) !important;
}

.mm-ms-stores-table td a{
    color:var(--mm-ms-color-title) !important;
    text-decoration:none !important;
}

/* =========================================================
   GALLERY (شورتکد [mm_motor_gallery])
   ========================================================= */

.mm-ms-gallery{
    width:100% !important;
    max-width:600px !important;
    margin:0 auto 24px auto !important;
    box-sizing:border-box !important;
}

.mm-ms-gallery-main{
    width:100% !important;
    aspect-ratio:4/3 !important;
    border-radius:16px !important;
    overflow:hidden !important;
    border:1px solid var(--mm-ms-color-border) !important;
    background:#F5F5F5 !important;
    margin-bottom:10px !important;
}

.mm-ms-gallery-main img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    display:block !important;
}

.mm-ms-gallery-thumbs{
    display:flex !important;
    gap:8px !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
}

.mm-ms-gallery-thumb-btn{
    border:none !important;
    padding:0 !important;
    background:transparent !important;
    cursor:pointer !important;
    flex:0 0 auto !important;
    width:72px !important;
    height:54px !important;
    border-radius:10px !important;
    overflow:hidden !important;
    border:1px solid transparent !important;
    box-sizing:border-box !important;
}

.mm-ms-gallery-thumb-btn img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    display:block !important;
}

.mm-ms-gallery-thumb-btn.is-active{
    border-color:var(--mm-ms-color-btn-bg) !important;
}

/* =========================================================
   MISC
   ========================================================= */

.mm-ms-center{
    text-align:center !important;
}
/* ================== BREADCRUMB ================== */
.mm-ms-breadcrumb{
    width:100% !important;
    max-width:1296px !important;
    margin:0 auto 12px auto !important;
    font-family:var(--mm-ms-font-main) !important;
    font-size:13px !important;
    color:#787878 !important;
}

.mm-ms-breadcrumb-inner a,
.mm-ms-breadcrumb-inner span{
    text-decoration:none !important;
    font-family:var(--mm-ms-font-main) !important;
}

.mm-ms-breadcrumb-inner a{
    color:#787878 !important;
}

.mm-ms-breadcrumb-inner a:hover{
    color:#020202 !important;
}

.mm-ms-breadcrumb-current{
    color:#020202 !important;
    font-weight:500 !important;
}