/* Liquid Glass (Light) for Cart & Checkout — scoped to .mlmch / .mlmch-steps */

.mlmch {
    /* پس‌زمینه روشن و کم‌نویز */
    background: linear-gradient(135deg, #f7f9fc 0%, #ffffff 50%, #f3f6fb 100%);
    color: #1b2430;
    font-family: IRANSans, Vazirmatn, Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    padding: clamp(14px,2.5vw,24px) 0;
}

/* Tokens (Light) */
.mlmch,
.mlmch-steps{
    --bg: 247 249 252;
    --text: 27 36 48;
    --muted: 110 120 140;
    --brand: 90 169 255;
    --ok: 58 201 146;
    --warn: 255 180 90;
    --danger: 255 93 115;
    --radius: 18px;
    --radius-sm: 12px;
    --shadow: 0 10px 30px rgba(22,27,40,.10);
}

.mlmch .container{max-width:1280px;margin-inline:auto;padding:clamp(14px,2.5vw,24px)}
.mlmch .glass{
    background: rgba(255,255,255,.75);
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    border:1px solid rgba(0,0,0,.08);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}
.mlmch .row{display:grid;grid-template-columns:1.7fr 1fr;gap:clamp(14px,1.8vw,22px)}
@media (max-width: 1200px){.mlmch .row{grid-template-columns:1.4fr 1fr}}
@media (max-width: 980px){.mlmch .row{grid-template-columns:1fr}}

.mlmch-steps .mlm-progress{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:8px clamp(14px,2.5vw,24px) 22px}
@media (max-width: 720px){.mlmch-steps .mlm-progress{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 420px){.mlmch-steps .mlm-progress{grid-template-columns:1fr}}
/* Bootstrap .progress override (namespace) */
.mlmch-steps .mlm-progress{
    height:auto;
    background:transparent;
    border-radius:0;
    overflow:visible;
}

.mlmch-steps .step{
    position:relative;padding:12px;border-radius:var(--radius-sm);text-align:center;
    border:1px solid rgba(0,0,0,.08);
    background: rgba(255,255,255,.7);
    font-size:clamp(12px,2.7vw,14px)
}
.mlmch-steps .step.active{outline:2px solid rgb(var(--brand))}
.mlmch-steps .step small{display:block;color:rgb(var(--muted));margin-top:4px}

/* header chips */
.mlmch .badge,
.mlmch .chip{
    display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;
    background: rgba(255,255,255,.8);
    border:1px solid rgba(0,0,0,.08);
    color: #3c475a; font-size:12px;
}
@media (max-width: 520px){.mlmch .badge{display:none}}

.mlmch .vendor{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;color:#4a5568}
.mlmch .vendor img{width:28px;height:28px;border-radius:50%;border:1px solid rgba(0,0,0,.08)}
.mlmch .title{font-weight:700;font-size:clamp(16px,2.2vw,18px);margin:0 0 6px}
.mlmch .muted{color:rgb(var(--muted))}
.mlmch .price{font-weight:700;white-space:nowrap}
.mlmch .pill{padding:8px 12px;border-radius:12px;background:#f2f6ff;border:1px solid rgba(0,0,0,.06)}

.mlmch .item{
    display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;
    padding:14px;border-radius:16px;border:1px solid rgba(0,0,0,.06);background:rgba(255,255,255,.7)
}
.mlmch .thumb{width:64px;height:64px;border-radius:12px;background:#eef3ff}
.mlmch .qty{display:flex;align-items:center;gap:8px}
.mlmch .qty .btn-qty{
    width:32px;height:32px;border-radius:10px;border:1px solid rgba(0,0,0,.12);background:#fff;color:#1b2430
}

.mlmch .grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width: 760px){.mlmch .grid2{grid-template-columns:1fr}}

.mlmch .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border-radius:14px;
    border:1px solid rgba(0,0,0,.12);background:rgba(255,255,255,.8);color:#1b2430;text-decoration:none
}
.mlmch .btn:hover{border-color:rgba(0,0,0,.2)}
.mlmch .btn.brand{background:linear-gradient(135deg,rgb(var(--brand)) 0%, #5af 100%);border:none;color:#00152e}
.mlmch .btn.ghost{background:transparent}
@media (max-width: 520px){.mlmch .btn{width:100%}}

.mlmch .field{display:flex;flex-direction:column;gap:8px}
.mlmch .field label{font-size:12px;color:rgb(var(--muted))}
.mlmch .input, .mlmch select, .mlmch textarea{
    width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(0,0,0,.12);background:rgba(255,255,255,.95);color:#1b2430
}

.mlmch .hr{height:1px;background:rgba(0,0,0,.08);margin:12px 0}

.mlmch .summary .rowline{display:flex;justify-content:space-between;align-items:center;margin:10px 0}
.mlmch .summary .rowline.total{font-size:18px;font-weight:800}

.mlmch .coupon{display:flex;gap:8px}
@media (max-width: 520px){.mlmch .coupon{flex-direction:column}}

.mlmch .sticky{position:sticky;top:18px}
@media (max-width: 980px){.mlmch .sticky{position:static}}

.mlmch .notice{
    display:flex;gap:10px;align-items:center;padding:10px 14px;border-radius:12px;
    border:1px dashed rgba(0,0,0,.12);background:rgba(255,255,255,.8);font-size:13px;color:#475569
}

.mlmch .tabs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.mlmch .tabs a, .mlmch .tabs button{
    padding:10px 14px;border-radius:12px;border:1px solid rgba(0,0,0,.12);background:#fff;color:#1b2430;text-decoration:none
}
.mlmch .tabs .active{outline:2px solid rgb(var(--brand))}

.mlmch .dl-features{display:flex;gap:10px;flex-wrap:wrap}
.mlmch .dl-features .chip{background:#fff;border:1px solid rgba(0,0,0,.08)}

/* responsive tweaks for item layout */
@media (max-width: 680px){
    .mlmch .item{grid-template-columns:56px 1fr;}
    .mlmch .thumb{width:56px;height:56px}
    .mlmch .price{grid-column:2;justify-self:start;margin-top:4px}
}

/* very small screens */
@media (max-width:380px){
    .mlmch .qty .btn-qty{width:28px;height:28px}
    .mlmch .pill{padding:6px 10px}
}
/* === Review Order — Glass Card === */
.mlmch .review-card .shop_table{
    width:100%;
    border-collapse: separate;
    border-spacing:0;
    background:transparent;
}
.mlmch .review-card thead th{
    background:rgba(255,255,255,.92);
    border:1px solid rgba(0,0,0,.08);
    padding:12px 14px;
    font-weight:700;
}
.mlmch .review-card thead th:first-child{border-top-right-radius:12px}
.mlmch .review-card thead th:last-child{border-top-left-radius:12px}

.mlmch .review-card tbody td{
    background:rgba(255,255,255,.86);
    border:1px solid rgba(0,0,0,.06);
    padding:12px 14px;
}
.mlmch .review-card tbody tr + tr td{ border-top:none }

.mlmch .review-card tfoot th,
.mlmch .review-card tfoot td{
    background:rgba(255,255,255,.96);
    border:1px solid rgba(0,0,0,.08);
    padding:12px 14px;
    font-weight:600;
}
.mlmch .review-card tr.order-total th,
.mlmch .review-card tr.order-total td{
    font-size:18px;font-weight:800
}
/* Vendor row in review order (tiny, muted) */
.mlmch .review-card .product-name .vendor{margin-top:4px}
.mlmch .review-card .product-name .vendor .muted{font-size:12px;color:rgb(var(--muted))}

/* === Mobile tap targets & spacing tweaks === */
@media (hover:none) and (pointer:coarse){
    .mlmch .qty .btn-qty{min-width:44px;height:44px}
    .mlmch .qty input.qty{height:44px;padding:0 10px}
    .mlmch .tabs a, .mlmch .tabs button{padding:12px 14px}
}
/* === Coupon (Checkout) — Glass + Light === */
.mlmch .woocommerce-form-coupon-toggle .woocommerce-info{
    background:rgba(255,255,255,.85);
    border:1px solid rgba(0,0,0,.08);
    border-radius:12px;
    padding:10px 12px;
    color:#374151;
}
.mlmch .woocommerce-form-coupon-toggle .woocommerce-info a{
    color:#2563eb; text-decoration:underline;
}

/* فرم کوپن */
.mlmch .checkout_coupon.woocommerce-form-coupon{
    border:1px solid rgba(0,0,0,.08);
    border-radius:16px;
}
.mlmch .checkout_coupon .input-text{
    width:100%;
    padding:12px 14px;
    border-radius:12px;
    border:1px solid rgba(0,0,0,.12);
    background:#fff;
    color:#1b2430;
}
.mlmch .checkout_coupon .button.btn.brand{
    margin-inline-start:8px;
}
@media (max-width:560px){
    .mlmch .checkout_coupon .form-row-first,
    .mlmch .checkout_coupon .form-row-last{ width:100% }
    .mlmch .checkout_coupon .button.btn.brand{ width:100%; margin-inline-start:0; margin-top:8px }
}
/* === Product Title Color (Light) === */
.mlmch .title{ color:#1b2430; }
.mlmch .title a{ color:#1b2430; text-decoration:none; }
.mlmch .title a:hover{ text-decoration:underline; }

/* Review Order (table/card) */
.mlmch .review-card .product-name,
.mlmch .review-card .product-name a{
    color:#1b2430;
    text-decoration:none;
}
.mlmch .review-card .product-name a:hover{ text-decoration:underline; }
.mlmch .mlm-title-link{ color:#1b2430; text-decoration:none; }
.mlmch .mlm-title-link:hover{ text-decoration:underline; }
/* Thankyou page tweaks */
.mlmch .title{ color:#1b2430; }                 /* عنوان‌ها خواناتر */
.mlmch .title a{ color:#1b2430; text-decoration:none }
.mlmch .title a:hover{ text-decoration:underline }

.mlmch .notice.success,
.mlmch .notice{ border-color:rgba(6,150,85,.25) } /* نوار موفقیت ملایم‌تر */
/* === Empty Cart — Lottie + Card (Light) === */
.mlmch .lottie-empty{
    width:min(520px,90%);
    height:220px;            /* کمی بلندتر تا لوتی نفس بکشد */
    margin:8px auto 8px;
    border-radius:18px;
    border:1px dashed rgba(16,24,40,.12);
    background:
            radial-gradient(60% 80% at 70% 20%, #e8f1ff 0%, #ffffff 60%),
            linear-gradient(135deg, #dbe7ff, #ffffff);
    position:relative;
    overflow:hidden;
}

/* پس‌زمینهٔ تزئینی شبیه نمونه */
.mlmch .lottie-empty::before,
.mlmch .lottie-empty::after{
    content:"";
    position:absolute;
    inset:auto;
    bottom:18px;
    right:18px;
    width:120px; height:72px;
    border-radius:16px;
    background:#fff;
    border:1px solid rgba(16,24,40,.08);
    box-shadow:0 10px 24px rgba(16,24,40,.08);
}
.mlmch .lottie-empty::after{
    right:auto; left:18px; bottom:34px;
    width:92px; height:56px; opacity:.9;
}

/* تیتر و لینک‌ها در حالت لایت خواناتر شوند */
.mlmch h3, .mlmch .title{ color:#1b2430; }
.mlmch .glass .btn.brand{ color:#fff; } /* دکمه برند روی گرادیان آبی */
/* === Empty cart (illustration + spacing) === */
.mlmch .empty .illu{width:min(520px,90%);height:160px;margin:8px auto 4px;border-radius:18px;border:1px dashed rgba(16,24,40,.12);background:
        radial-gradient(60% 80% at 70% 20%, #e8f1ff 0%, #ffffff 60%),
        linear-gradient(135deg, #dbe7ff, #ffffff);
    position:relative}
.mlmch .empty .illu:before,
.mlmch .empty .illu:after{content:"";position:absolute;inset:auto;bottom:18px;right:18px;width:120px;height:72px;border-radius:16px;background:#fff;border:1px solid rgba(16,24,40,.08);box-shadow:0 10px 24px rgba(16,24,40,.08)}
.mlmch .empty .illu:after{right:auto;left:18px;bottom:34px;width:92px;height:56px;opacity:.9}

/* عنوان محصول و لینک‌ها در حالت روشن، خواناتر شوند */
.mlmch .title,
.mlmch .title a{color:rgb(var(--text)); text-decoration:none;}
.mlmch .title a:hover{opacity:.9}

/* اگر جایی پیام پیشفرض ووکامرس رندر شد، پنهانش کن (تم‌ها/افزونه‌ها) */
.woocommerce .cart-empty.woocommerce-info,
.woocommerce .return-to-shop { display: none; }
