/* ===== Widget 18: Product Category Cards (rectangular + bottom meta) ===== */

.mlm-w18 {
    --w18-btn: #0ea5e9;         /* رنگ دکمه خرید */
    --w18-cta-h: 30px;          /* ارتفاع دکمه خرید (درخواست شما: 65px) */
}

/* Head */
.mlm-w18 .w18-head .mlm-box-title{ font-size:18px; }
.mlm-w18 .w18-more{
    display:inline-flex; align-items:center; gap:8px;
    padding:8px 12px; border-radius:10px;
    background:#eef1f5; color:#374151; text-decoration:none; border:1px solid #e6e9ee;
    font-size:13px;
}
.mlm-w18 .w18-more:hover{ background:#e9edf2; }

/* Grid: 1 / 2 / 4 */
.mlm-w18 .w18-grid{
    display:grid; gap:16px; grid-template-columns:1fr;
}
@media (min-width:576px){ .mlm-w18 .w18-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width:992px){ .mlm-w18 .w18-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); } }

/* Card */
.mlm-w18 .w18-card{
    position:relative; background:#fff; border:1px solid #eef0f3; border-radius:12px;
    padding:10px; overflow:hidden; box-shadow:0 8px 20px rgba(16,24,40,.06);
    transition:transform .15s ease, box-shadow .15s ease;
}
.mlm-w18 .w18-card:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(16,24,40,.10); }

/* Rectangular thumbnail (16:9) — no crop */
.mlm-w18 .w18-thumb{ position:relative; width:100%; aspect-ratio:16/9; border-radius:10px; overflow:hidden; background:#f3f4f6; }
.mlm-w18 .w18-thumb img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center; display:block;
}
.mlm-w18 .w18-thumb-link{ display:block; width:100%; height:100%; }

/* Title */
.mlm-w18 .w18-title{ margin:10px 0 6px; font-size:15px; line-height:1.6; }
.mlm-w18 .w18-title a{ color:#111827; text-decoration:none; }
.mlm-w18 .w18-title a:hover{ color:#0f172a; }

/* Category line (icon pill + text) */
.mlm-w18 .w18-catline{ display:flex; align-items:center; gap:8px; margin-bottom:8px; color:#6b7280; font-size:12px; }
.mlm-w18 .w18-caticon{
    width:26px; height:26px; border-radius:9999px; background:#eef1f5;
    display:inline-flex; align-items:center; justify-content:center; color:#6b7280;
    border:1px solid #e6e9ee;
}
.mlm-w18 .w18-caticon i{ font-size:13px; line-height:1; }
.mlm-w18 .w18-cat a{ color:inherit; text-decoration:none; }
.mlm-w18 .w18-cat a:hover{ text-decoration:underline; }

/* Bottom meta bar */
.mlm-w18 .w18-meta{
    display:flex; align-items:center; justify-content:space-between;
    margin-top:8px;
}

/* Right side: sales badge + support */
.mlm-w18 .w18-right{ display:flex; align-items:center; gap:8px; }
.mlm-w18 .w18-badge.w18-sales{
    display:inline-flex; align-items:center; gap:6px;
    background:#eef1f5; color:#374151; border:1px solid #e6e9ee;
    padding:6px 10px; border-radius:9999px; font-size:12px; line-height:1;
}
.mlm-w18 .w18-badge.w18-sales b{ font-weight:700; }
.mlm-w18 .w18-badge.w18-sales small{ font-size:11px; color:#6b7280; }

.mlm-w18 .w18-support{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:34px; height:30px; padding:0 8px;
    background:#eef1f5; border:1px solid #e6e9ee; border-radius:8px;
    font-weight:700; color:#374151; font-size:13px;
}

/* Center separator */
.mlm-w18 .w18-meta .sep{
    width:1px; height:18px; background:#e5e7eb; margin:0 10px; flex:0 0 1px;
}

/* Left side: price (sale stacked) */
.mlm-w18 .w18-price{ display:flex; align-items:flex-end; gap:6px; margin-right:auto; }
.mlm-w18 .w18-price .p-regular{ font-weight:700; color:#111827; }
.mlm-w18 .w18-price.on-sale{ flex-direction:column; align-items:flex-start; }
.mlm-w18 .w18-price.on-sale .p-sale{ font-weight:800; color:var(--w18-btn); line-height:1.2; }
.mlm-w18 .w18-price.on-sale .p-regular{ text-decoration:line-through; color:#9aa1a7; font-weight:600; }

/* CTA on hover (unchanged) */
.mlm-w18 .w18-cta{
    position:absolute; right:12px; bottom:-56px;
    height: var(--w18-cta-h);                /* ارتفاع ثابت */
    padding: 0 14px;                          /* حذف پدینگ عمودی تا قد کم شود */
    display: inline-flex; align-items:center; justify-content:center;
    border-radius:10px; border:0;
    background: var(--w18-btn); color:#fff; text-decoration:none; font-weight:600;
    font-size: 10px;                        /* فونت کوچکتر تا متن جا شود */
    box-shadow:0 6px 18px rgba(0,0,0,.15);
    transition: transform .2s ease, bottom .2s ease, opacity .2s ease;
    transform: translateY(16px); opacity:0;
    max-width: calc(50% - 24px);              /* همچنان روی نوار جداکننده نمی‌آید */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mlm-w18 .w18-card:hover .w18-cta{ bottom:12px; transform: translateY(0); opacity:1; }

/* Mobile: make sure CTA is accessible */
@media (hover:none){
    .mlm-w18 .w18-cta{ bottom:12px; transform:none; opacity:1; }
}
/* لینک «مشاهده سبد خرید» ووکامرس را فقط داخل این ابزارک پنهان کن */
.mlm-w18 .added_to_cart{ display:none !important; }

/* موقع هاور، آمار سمت راست (فروش و A+) کاملاً مخفی شود تا زیر دکمه نماند */
.mlm-w18 .w18-card:hover .w18-right{ opacity:0; visibility:hidden; }

/* حالت لودینگ دکمه + اسپینر */
.mlm-w18 .w18-cta.is-loading{ pointer-events:none; opacity:.85; }
.mlm-w18 .w18-cta .w18-spin{
    display:inline-block; width:14px; height:14px;   /* کوچکتر برای دکمه‌ی کوتاه‌تر */
    border:2px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%;
    animation:w18-rotate .7s linear infinite;
}
@keyframes w18-rotate { to{ transform: rotate(360deg); } }

/* نوتیف ساده (توست) */
.mlm-toast{
    position:fixed; right:16px; bottom:16px; z-index:9999;
    background:#111; color:#fff; padding:10px 14px; border-radius:10px;
    font-size:12px; opacity:0; transform:translateY(10px); transition:.25s ease;
    box-shadow:0 10px 25px rgba(0,0,0,.15);
}
.mlm-toast.show{ opacity:1; transform:translateY(0); }
/* ویدجت 18: حذف خط آبی قبل از عنوان (استایل عمومی قالب) */
.mlm-w18 .w18-head .mlm-box-title::before,
.mlm-w18 .w18-head .mlm-box-title::after{
    content:none !important;
    display:none !important;
}
/* آیکون پشت عنوان به شکل «پولکی خاکستری» با رنگ آیکون از تنظیمات */
.mlm-w18 .w18-head-title{ position:relative; padding-right:48px; }
.mlm-w18 .w18-head-title .mlm-box-title{ position:relative; z-index:1; }

.mlm-w18 .w18-head-title .w18-head-icon{
    position:absolute; right:0; top:50%; transform:translateY(-50%);
    width:36px; height:36px; border-radius:10px;   /* مربعی با گوشه‌ی کمی گرد */
    background:#eef1f5; border:1px solid #e6e9ee;
    display:flex; align-items:center; justify-content:center;
    z-index:0; pointer-events:none;
}

.mlm-w18 .w18-head-title .w18-head-icon i{
    font-size:16px; line-height:1; color: var(--w18-btn); /* رنگ از تنظیمات */
}