/* =========================
   MGSMM Front (Scoped, Modern, Responsive)
   ========================= */

/* Tokens */
:root{
  --bg:#f9fafb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:#e5e7eb;
  --primary:#2563eb;
  --ok:#16a34a;
  --warn:#d97706;
  --danger:#dc2626;
  --info:#2563eb;
  --shadow:0 10px 30px rgba(2,6,23,.06);
  --radius:16px;
  --radius-sm:12px;
  --radius-pill:999px;
  --ring:#93c5fd;
}

/* Base scope */
.mgsmm-rtl{direction:rtl;text-align:right}

/* Font: Dana as default */
.mgsmm-hub{
  font:15px/1.8 DanaFont, IRANSansX, system-ui, Segoe UI, Tahoma;
  color:var(--text)
}

.mgsmm-hub, .mgsmm-hub *{ box-sizing:border-box }

/* Tabs */
.mgsmm-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.mgsmm-tabs a{display:inline-flex;align-items:center;gap:8px;background:#eef2ff;border:1px solid #e0e7ff;padding:9px 14px;border-radius:12px;text-decoration:none;color:#1e293b;font-weight:600}
.mgsmm-tabs a.active{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:var(--shadow)}
.mgsmm-tab-body{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}

/* Buttons — explicit color (anti-Woo) */
.mgsmm-hub .btn,
.mgsmm-hub a.btn,
.mgsmm-hub button.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(180deg,#2f6af0,#204ed6);
  color:#fff !important; /* ضد .woocommerce button */
  padding:12px 16px;border-radius:12px;border:none;cursor:pointer;box-shadow:var(--shadow);
  font-weight:700; line-height:1; text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.mgsmm-hub .btn:hover{ transform:translateY(-1px) }
.mgsmm-hub .btn:active{ transform:translateY(0); box-shadow:0 6px 16px rgba(2,6,23,.12) }
.mgsmm-hub .btn.disabled{ opacity:.45; pointer-events:none }
.mgsmm-hub .btn.sm{ padding:6px 10px; border-radius:10px; font-weight:600 }
.mgsmm-hub .btn.ghost{ background:#f1f5f9; color:#0f172a !important; border:1px solid var(--border) }

/* Anti-Woo explicit colors for inner controls */
.mgsmm-hub .qty-chips .chip-btn{ color:#0f172a !important; }
.mgsmm-hub .desc-toggle{ color:#0f172a !important; }
.mgsmm-hub .svc-current{ color:#0f172a !important; }
.mgsmm-hub .svc-current__title, 
.mgsmm-hub .svc-current__title b{ color:#0f172a !important; }
.mgsmm-hub .svc-item{ color:#0f172a !important; }
.mgsmm-hub .svc-item__price{ color:#1e3a8a !important; }
.mgsmm-hub .chip{ color:#0f172a !important; }
.mgsmm-hub .svc-close{ color:#fff !important; }
.mgsmm-hub .svc-tile{ color:#0f172a !important; }
.mgsmm-hub .svc-tile .price{ color:#1e3a8a !important; }

/* Focus */
.mgsmm-hub .btn:focus-visible,
.mgsmm-hub .chip:focus-visible,
.mgsmm-hub .chip-btn:focus-visible,
.mgsmm-hub .desc-toggle:focus-visible,
.mgsmm-hub .svc-close:focus-visible,
.mgsmm-hub input:focus-visible,
.mgsmm-hub select:focus-visible,
.mgsmm-hub textarea:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; border-radius:12px }

/* Pills / Badges */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:3px 10px;border-radius:var(--radius-pill);border:1px solid transparent}
.pill-ok{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
.pill-warn{background:#fff7ed;border-color:#fed7aa;color:#9a3412}
.pill-danger{background:#fee2e2;border-color:#fecaca;color:#991b1b}
.pill-info{background:#eff6ff;border-color:#bfdbfe;color:#1e40af}
.pill-muted{background:#f3f4f6;border-color:#e5e7eb;color:#374151}
.pill-eta{background:#f1f5f9;border-color:#e5e7eb;color:#0f172a}
.pill-rate{background:#eef2ff;border-color:#e0e7ff;color:#3730a3}
.pill-star{background:#fff7ed;border-color:#fed7aa;color:#9a3412}

.badge{display:inline-block;font-size:12px;padding:2px 8px;border-radius:var(--radius-pill);border:1px solid transparent}
.badge.success{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
.badge.warn{background:#fff7ed;border-color:#fed7aa;color:#9a3412}
.badge.info{background:#eff6ff;border-color:#bfdbfe;color:#1e40af}
.badge.muted{background:#f3f4f6;border-color:#e5e7eb;color:#374151}

/* Panels / layout */
.panel{border:1px solid var(--border);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow)}
.panel--order{padding:16px}
.mgsmm-order{display:grid;grid-template-columns:2fr 1fr;gap:16px}
.panel__hero{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;border-bottom:1px solid var(--border);padding-bottom:12px;margin-bottom:12px}
.panel__hero h3{margin:0;font-size:18px}
.hero__meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.wallet{font-size:13px;color:#0f172a;margin-bottom:6px}

/* Form */
.frm--order .frm-row{margin-bottom:12px}
.frm--order label{display:block;font-weight:600;margin-bottom:6px}
.frm--order input, .frm--order select, .frm--order textarea{width:100%;padding:12px;border:1px solid var(--border);border-radius:12px;background:#fff}
.frm-actions{display:flex;gap:8px;align-items:center}
.tiny{font-size:12px}
.note.warn{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:12px;padding:10px;margin:10px 0}

/* Qty chips */
.qty-chips{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}
.qty-chips .chip-btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#ffffff,#f8fafc);
  border:1px solid var(--border);border-radius:var(--radius-pill);
  padding:8px 12px;cursor:pointer;font-weight:600;box-shadow:var(--shadow);
  color:#0f172a !important; /* ضد ووکامرس */
  transition:transform .12s ease, box-shadow .12s ease
}
.qty-chips .chip-btn:hover{transform:translateY(-1px)}
.qty-chips .chip-btn.on{background:#1d4ed8;color:#fff !important;border-color:#1d4ed8}

/* Description block */
.service-desc{margin:10px 0}
.richdesc{border:1px solid var(--border);background:linear-gradient(#fff,#f8fafc);border-radius:14px;padding:12px}
#svc-desc .desc{max-height:none;color:#0f172a}
#svc-desc.desc-collapsed .desc{max-height:140px;overflow:hidden}
.desc-toggle{
  margin-top:8px;background:#f1f5f9;color:#0f172a !important;border:1px solid var(--border);
  border-radius:10px;padding:6px 10px;cursor:pointer
}
#svc-desc .desc ul{margin:8px 18px}
#svc-desc .desc li{margin:4px 0}
#svc-desc .desc a{color:#1d4ed8;text-decoration:underline}
#svc-desc .desc code{background:#0f172a;color:#e2e8f0;border-radius:8px;padding:2px 6px}

/* Specs strip */
.svc-about .svc-about__head .chip{background:#eef2ff;border:1px solid #e0e7ff;color:#1e3a8a;padding:4px 10px;border-radius:999px;font-weight:700;font-size:12px}
.svc-specs{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 10px}
.svc-specs li{list-style:none;background:#f1f5f9;border:1px solid #e5e7eb;border-radius:12px;padding:6px 10px;font-size:13px;display:inline-flex;gap:6px;align-items:center}
.svc-specs .ico{opacity:.8}

/* Service picker (header button) */
.svc-picker{
  margin: 6px 0 20px;            /* فاصله از اطراف */
}
.svc-current{
  padding: 16px;                 /* تنفس داخلی بیشتر */
  border-radius: 18px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  background: linear-gradient(135deg,#fff,#94ffd7);
}
.svc-current:hover{
  box-shadow: 0 12px 34px rgba(37,99,235,.12);
  border-color: #c7d2fe;
  transform: translateY(-1px);
}
.svc-current__title b{ font-weight: 800 }

.svc-current__title{display:flex;align-items:center;gap:8px;font-size:15px;color:#0f172a !important;}
.svc-dot{width:10px;height:10px;border-radius:var(--radius-pill);display:inline-block}
.svc-dot.ok{background:var(--ok)}
.svc-dot.warn{background:var(--warn)}
.svc-current__meta{display:flex;flex-wrap:wrap;gap:8px}

/* Final Price card – premium */
.total-box{
  margin:16px 0;text-align:center;background:linear-gradient(135deg,#ffffff,#f8fafc);
  border:1px solid var(--border);border-radius:20px;padding:22px;box-shadow:var(--shadow);
  position:relative;overflow:hidden;
}
.total-box::before{
  content:"";position:absolute;inset:-35%;background:radial-gradient(60% 60% at 50% 50%, rgba(37,99,235,.08), transparent 60%);pointer-events:none;
}
.total-box__title{font-weight:800;color:#0f172a;margin-bottom:8px;font-size:14px;letter-spacing:.2px}
.total-box__price{
  font-weight:900;font-size:34px;line-height:1.15;
  background:linear-gradient(180deg,#1f3fff,#204ed6);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.total-box__hint{margin-top:8px;font-size:12px;color:#6b7280}

/* LTR input */
.ltr{direction:ltr;text-align:left}

/* Qty row layout */
.qty-row .qty-flex{display:grid;grid-template-columns:1fr;gap:8px}
@media (min-width:680px){ .qty-row .qty-flex{grid-template-columns:260px 1fr} }
.frm--order .hint{display:block;margin-top:6px;font-size:12px;color:var(--muted)}

/* Service switcher dialog (جدید، اسکرول‌دار، رسپانسیو) */
.svc-dialog{position:fixed;inset:0;background:rgba(2,6,23,.55);display:none;align-items:center;justify-content:center;padding:18px;z-index:1002}
.svc-dialog.show{display:flex}
.svc-dialog__panel{
  max-width:1100px; width:100%;
  max-height:92vh; display:flex; flex-direction:column;
  background:#fff;border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);overflow:hidden
}
.svc-dialog__head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:#f8fafc;border-bottom:1px solid var(--border)}
.svc-close{background:#ef4444;color:#fff !important;border:none;border-radius:10px;padding:6px 10px;cursor:pointer}

.svc-dialog__search{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border)}
.svc-dialog__search input{width:100%;padding:12px;border:1px solid var(--border);border-radius:12px;background:#fff}
.svc-dialog__filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#svc-sort-dialog{padding:10px;border:1px solid var(--border);border-radius:12px;background:#fff}

.svc-dialog__body{
  /* ارتفاع منعطف + جلوگیری از سرریز */
  flex:1; min-height:0;
  display:grid; grid-template-columns:220px 1fr; gap:12px;
  padding:10px 12px 14px; background:#fff;
}
.svc-cats{
  overflow:auto; min-height:0; max-height:100%;
  border:1px solid var(--border); border-radius:14px; padding:8px; background:#f8fafc
}
.svc-cats .cat-chip{
  display:block; width:100%; text-align:right;
  background:#ffffff; border:1px solid var(--border);
  border-radius:12px; padding:8px 10px; margin:0 0 6px; cursor:pointer;
  color:#0f172a !important; font-weight:700; transition:.12s ease;
}
.svc-cats .cat-chip small{color:#64748b; font-weight:600}
.svc-cats .cat-chip.on{border-color:#bcd2ff; background:#eef2ff; box-shadow:var(--shadow)}

.svc-dialog__grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:10px; overflow:auto; min-height:0; max-height:100%;
  padding-bottom:2px;
}
.svc-item{
  text-align:right;background:#ffffff;border:1px solid var(--border);border-radius:14px;padding:10px;box-shadow:var(--shadow);
  cursor:pointer;transition:.15s;color:#0f172a !important;
}
.svc-item:hover{transform:translateY(-1px)}
.svc-item__top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.svc-item__meta{display:flex;gap:8px;flex-wrap:wrap;color:#64748b;font-size:12px;margin-bottom:8px}
.svc-item__price{font-weight:700;background:#eef2ff;border:1px solid #e0e7ff;border-radius:10px;padding:4px 8px;display:inline-block;color:#1e3a8a !important}

/* در موبایل: لیست دسته‌ها افقی و چسبیده بالا می‌شود */
@media (max-width: 980px){
  .svc-dialog__panel{max-width:100%}
  .svc-dialog__body{grid-template-columns:1fr}
  .svc-cats{
    display:flex; gap:6px; overflow:auto; white-space:nowrap;
    border:none; background:transparent; padding:0 2px 6px; margin-bottom:6px;
  }
  .svc-cats .cat-chip{display:inline-block; width:auto; margin:0; white-space:nowrap}
}

/* Catalog (cards) */
.mgsmm-catalog .mgsmm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.mgsmm-card-item{border:1px solid var(--border);border-radius:var(--radius);padding:14px;background:#fff;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow);position:relative}
.mgsmm-card-item.rec::after{content:"Recommended";position:absolute;top:10px;left:-6px;background:#22c55e;color:#fff;font-size:12px;padding:4px 10px;border-radius:0 10px 10px 0;box-shadow:var(--shadow)}
.mgsmm-card-head{display:flex;justify-content:space-between;align-items:center}
.mgsmm-card-head .ttl{font-weight:700}
.mgsmm-card-head .head-actions{display:flex;gap:6px;align-items:center}
.mgsmm-card-item .pin{border:none;background:#d97474;border-radius:10px;padding:4px 10px;cursor:pointer;font-size:14px}
.mgsmm-card-item .pin.on{background:#dfbc2d}
.desc{color:#334155;max-height:140px;overflow:auto;border:1px dashed #e2e8f0;border-radius:12px;padding:10px;background:#f8fafc}
.mgsmm-card-item .meta{display:flex;flex-wrap:wrap;gap:12px;font-size:12px;color:#64748b}
.price-badge{background:#f0f9ff;border:1px solid #bae6fd;color:#075985;padding:4px 10px;border-radius:10px;font-weight:700}

/* Modern Sidebar (service list) */
.side.side--svc{border:1px solid var(--border);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow);padding:12px}
.svc-side-head input{width:100%;padding:10px;border:1px solid var(--border);border-radius:12px;margin-bottom:8px;background:#fff}
.svc-side-cat{font-weight:800;color:#1f2937;margin:10px 4px 6px;opacity:.9}
.svc-side-list{display:flex;flex-direction:column;gap:8px}
.svc-tile{
  display:block;text-decoration:none;color:#0f172a !important;background:linear-gradient(180deg,#ffffff,#f8fafc);
  border:1px solid #e5e7eb;border-radius:14px;padding:10px;box-shadow:var(--shadow);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.svc-tile:hover{transform:translateY(-2px)}
.svc-tile.on{border-color:#bcd2ff;box-shadow:0 10px 30px rgba(37,99,235,.15)}
.svc-tile__top{display:flex;align-items:center;gap:8px;justify-content:space-between;margin-bottom:6px}
.svc-tile .nm{font-weight:700;flex:1;margin:0 8px;color:#0f172a !important}
.svc-tile .price{font-size:12px;background:#eef2ff;border:1px solid #e0e7ff;border-radius:9px;padding:3px 8px;white-space:nowrap;color:#1e3a8a !important}
.svc-tile__meta{display:flex;gap:8px;flex-wrap:wrap;color:#64748b;font-size:12px}
.dot{width:8px;height:8px;border-radius:999px;display:inline-block}
.dot.ok{background:var(--ok)}
.dot.warn{background:var(--warn)}

/* Orders table + filters */
.orders-wrap{display:block}
.orders-filter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.chip{background:#f1f5f9;border:1px solid #e5e7eb;border-radius:var(--radius-pill);padding:6px 10px;cursor:pointer;color:#0f172a !important;}
.chip.on{background:var(--primary);color:#fff !important;border-color:var(--primary)}
.mgsmm-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.mgsmm-table th,.mgsmm-table td{border-bottom:1px solid var(--border);padding:10px;text-align:center}

/* Modals */
.mgsmm-modal{position:fixed;inset:0;background:rgba(2,6,23,.55);display:none;align-items:center;justify-content:center;padding:18px;z-index:1000}
.mgsmm-modal.show{display:flex}
.mgsmm-modal__dialog{max-width:720px;width:100%;background:#fff;border-radius:18px;border:1px solid var(--border);box-shadow:var(--shadow);overflow:hidden}
.mgsmm-modal__head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#f8fafc;border-bottom:1px solid var(--border)}
.mgsmm-modal__body{padding:14px}
.mgsmm-modal .close{background:#ef4444;color:#fff;border:none;border-radius:10px;padding:6px 10px;cursor:pointer}

/* Docs */
.mgsmm-docs{padding:10px}
.mgsmm-docs pre{background:#0f172a;color:#e2e8f0;border-radius:12px;padding:12px;overflow:auto;font-size:13px}
.key-out{margin-top:8px;padding:10px;border:1px dashed var(--border);border-radius:12px;background:#f8fafc}
.muted{color:var(--muted)}
.mgsmm-docs.fancy .hero{background:linear-gradient(135deg,#eff6ff,#ffffff);border:1px solid var(--border);border-radius:16px;padding:18px;margin-bottom:14px;box-shadow:var(--shadow)}
.mgsmm-docs.fancy .hero h2{margin:0 0 6px}
.mgsmm-docs.fancy .hero .cap{display:inline-block;background:#e0f2fe;color:#075985;border:1px solid #bae6fd;border-radius:var(--radius-pill);padding:2px 10px;margin:4px 6px 0 0;font-size:12px}
.mgsmm-docs.fancy .grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin:14px 0}
.mgsmm-docs.fancy .card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:14px;box-shadow:var(--shadow)}
.mgsmm-docs.fancy .tbl{width:100%;border-collapse:collapse;font-size:13px}
.mgsmm-docs.fancy .tbl th,.mgsmm-docs.fancy .tbl td{border:1px solid var(--border);padding:8px}
.mgsmm-docs.fancy details{border:1px dashed var(--border);border-radius:12px;padding:8px}
.mgsmm-docs.fancy .tips{margin:8px 0 0 16px}
.mgsmm-docs .copy{display:inline-flex;align-items:center;justify-content:center;background:#f1f5f9;color:#0f172a;border:1px solid var(--border);border-radius:10px;padding:4px 10px;cursor:pointer}


/* --- Emphasized Service Description --- */
.svc-about{
  position: relative;
  border: 1px solid var(--border);
  background: linear-gradient(180deg,#ffffff,#f8fafc);
  border-radius: 16px;
  padding-top: 12px;
  overflow: hidden;
}
.svc-about::before{
  content: "📘 لطفاً قبل از ثبت سفارش مطالعه کنید";
  display: block;
  margin: -12px -12px 10px;        /* به پهنای کارت */
  padding: 10px 12px;
  background: linear-gradient(90deg,#e0e7ff, #f1f5f9);
  border-bottom: 1px solid #e5e7eb;
  font-weight: 800;
  color: #1e293b !important;
  text-align: right;
}
#svc-desc .desc{
  font-size: 14.5px;
  line-height: 2;
  background: #fbfdff;
  border: 1px dashed #dbeafe;
  border-radius: 12px;
  padding: 12px;
  color:#0f172a;
}
#svc-desc .desc ul{ list-style: none; padding: 0; margin: 8px 0 8px 0 }
#svc-desc .desc li{
  position: relative;
  padding-right: 22px;
  margin: 6px 0;
}
#svc-desc .desc li::before{
  content: "✔";
  position: absolute;
  right: 0;
  top: 2px;
  font-size: 12px;
  color: #10b981;
}
.desc-toggle{
  width: 100%;
  font-weight: 800;
  border-radius: 12px;
  padding: 10px 12px;
  color:#0f172a !important;
}

/* ---------- Toast (fallback) ---------- */
.mg-toast{
  position: fixed;
  left: 50%;
  top: 20px;
  transform: translateX(-50%) translateY(-20px);
  opacity: 0;
  z-index: 99999;
  background: #0f172a;
  color: #fff !important;
  padding: 10px 14px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(2,6,23,.25);
  transition: .25s ease;
  font: 14px/1.7 DanaFont, IRANSansX, system-ui;
  text-align: center;
}
.mg-toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.mg-toast.success{ background: #16a34a; }
.mg-toast.error{ background: #dc2626; }
.mg-toast.warn{ background: #d97706; }
.mg-toast.info{ background: #2563eb; }

/* اگر پلاگین jQuery Toast فعال باشد و کلاس toast-middle را بشناسد: */
.toast-item-wrapper.toast-middle{
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

.ui-sep{
  position:relative;height:1px;margin:10px 0 14px;
  background:linear-gradient(90deg,#e5e7eb,#c7d2fe,#e5e7eb);
  border-radius:999px
}
.ui-sep span{
  position:absolute;right:12px;top:-10px;
  background:#fff;padding:0 8px;border-radius:10px;
  font-size:12px;color:#64748b
}

/* --- Category chips row (catalog) --- */
.svc-cat-nav{
  margin-top:10px;
  overflow:auto;
  white-space:nowrap;
  display:flex;
  gap:6px;
  -webkit-overflow-scrolling:touch;
}
.svc-cat-nav .chip{
  font-weight:700;
}
.svc-cat-nav .chip.on{
  background: var(--primary);
  color:#fff !important;
  border-color: var(--primary);
  box-shadow: var(--shadow);
}
.svc-cat-nav .count{
  opacity:.85;
  margin-inline-start:6px;
}


/* ---- Catalog Pro toolbar ---- */
.mgsmm-catalog-pro .cat-toolbar{
  margin-bottom:12px; padding:12px;
  background:#fff; border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.cat-toolbar .tool-row{
  display:grid; gap:8px;
  grid-template-columns:1fr 200px auto auto 170px;
}
.cat-toolbar .tool-meta{margin-top:6px;color:var(--muted);font-size:12px}
.cat-toolbar input, .cat-toolbar select{
  width:100%; padding:10px; border:1px solid var(--border);
  border-radius:12px; background:#fff
}
.segmented{
  display:inline-flex; gap:4px; padding:4px;
  border:1px solid var(--border); border-radius:12px; background:#f8fafc
}
.segmented button{
  background:#2db198d6; border:0; padding:6px 10px; border-radius:10px; cursor:pointer
}
.segmented button.on{ background:var(--primary); color:#fff }
.mgsmm-catalog-pro .chk{display:flex;align-items:center;gap:8px}
.mgsmm-catalog-pro .empty{
  text-align:center; padding:24px; color:var(--muted);
  border:1px dashed var(--border); border-radius:12px; background:#f8fafc; margin-top:12px
}

/* ===== API Docs – Tabs & Code ===== */
.mgsmm-docs .lang-tabs,
.mgsmm-docs .ex-tabs{
  display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 10px;
}
.mgsmm-docs .lang-tabs button,
.mgsmm-docs .ex-tabs button{
  background:#f1f5f9; border:1px solid var(--border);
  border-radius:12px; padding:6px 10px; cursor:pointer; color:#0f172a !important;
  font-weight:700;
}
.mgsmm-docs .lang-tabs button.on,
.mgsmm-docs .ex-tabs button.on{
  background:var(--primary); color:#fff !important; border-color:var(--primary);
  box-shadow:var(--shadow);
}
.mgsmm-docs .code-wrap{ position:relative; }
.mgsmm-docs .code-wrap .copy{
  position:absolute; top:8px; left:8px; z-index:2;
  background:#f1f5f9; border:1px solid var(--border); border-radius:10px;
  padding:4px 10px; cursor:pointer; color:#0f172a !important;
}
.mgsmm-docs pre{
  background:#0f172a; color:#e2e8f0; border-radius:12px; padding:12px;
  overflow:auto; font-size:13px; margin-top:10px;
}
.mgsmm-docs details{ margin:8px 0; }
.mgsmm-docs summary{ cursor:pointer; padding:6px 0; }


/* Sticky + compact tools */
.side.side--svc{
  position: sticky; top: 8px;
  max-height: calc(100vh - 120px);
  overflow: auto;
}
.svc-side-head{position:sticky;top:0;background:#fff;padding-bottom:8px;z-index:2}
.svc-side-head .side-tools{display:flex;gap:8px;align-items:center;margin-top:6px;flex-wrap:wrap}
.side-toggle{font-size:12.5px;color:#334155;display:inline-flex;gap:6px;align-items:center}

/* Accordion */
.svc-acc{border:1px solid var(--border);border-radius:14px;background:#fff;margin-bottom:8px;overflow:hidden}
.svc-acc>summary{
  list-style:none;cursor:pointer;padding:8px 10px;background:#f8fafc;
  display:flex;align-items:center;justify-content:space-between;font-weight:800
}
.svc-acc>summary::-webkit-details-marker{display:none}
.svc-acc .count{background:#eef2ff;border:1px solid #e0e7ff;border-radius:10px;padding:2px 8px;font-size:12px;color:#1e3a8a}
.svc-acc__list{display:flex;flex-direction:column;gap:8px;padding:8px}

/* "more" */
.svc-more{
  width:calc(100% - 16px);margin:0 8px 10px;background:#1eb971;border:1px solid var(--border);
  border-radius:10px;padding:6px 10px;cursor:pointer;color:#0f172a
}

/* Dense mode */
.side--svc.dense .svc-tile{padding:6px 8px}
.side--svc.dense .svc-tile .nm{font-weight:700}
.side--svc.dense .svc-tile__meta{display:none}
.side--svc.dense .svc-tile .price{font-size:11px}

/* Small polish for tiles in accordion */
.svc-tile{border-radius:12px}


/* ===== Orders: Toolbar & Wrap ===== */
.orders-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:10px;
}
.orders-sync .last{ font-size:12px; color:var(--muted); margin-inline-start:8px }
.orders-empty{ text-align:center }

/* جدول مدرن */
.table--modern thead th{
  background:#f8fafc; color:#0f172a; font-weight:800; border-bottom:1px solid var(--border);
}
.table--modern tbody tr:hover{ background:#fbfdff }
.nowrap{ white-space:nowrap }

/* اجازه‌ی اسکرول افقی در عرض‌های میانی */
.orders-table-wrap{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch }

/* ===== Mobile: Table → Cards ===== */
@media (max-width: 720px){
  .mgsmm-table{ border:0 }
  .mgsmm-table thead{ display:none }
  .mgsmm-table tbody{ display:block }
  .mgsmm-table tr{
    display:block;
    border:1px solid var(--border);
    border-radius:14px;
    margin:0 0 10px 0;
    box-shadow:var(--shadow);
    background:#fff;
    overflow:hidden;
  }
  .mgsmm-table td{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:10px 12px !important;
    border-bottom:1px dashed var(--border);
    text-align:right !important;
  }
  .mgsmm-table td:last-child{ border-bottom:0 }
  .mgsmm-table td::before{
    content: attr(data-label);
    font-weight:800;
    color:#334155;
  }
  /* دکمه‌ها در موبایل تمام‌عرض و خوش‌دست‌تر */
  .mgsmm-table td[data-col="actions"] .btn{
    width:48%;
  }
  .mgsmm-table td[data-col="actions"]{
    gap:8px; flex-wrap:wrap;
  }
}

/* کمی پولیش برای Pill داخل جدول */
.mgsmm-table .pill{ font-weight:700 }

/* ==== Rating Modal ==== */
.rate-modal .mgsmm-modal__head b{ font-weight:800 }
.rate-box{ text-align:center }
.rate-title{ font-weight:800; margin-bottom:8px; color:#0f172a }
.rate-stars{ display:flex; gap:8px; justify-content:center; margin:10px 0 6px }
.rate-star{
  font-size:30px; line-height:1; cursor:pointer;
  background:#cacaca61; border:0; padding:2px 4px;
  color:#d1d5db; transition:transform .12s ease, color .12s ease; border-radius:10px;
}
.rate-star.on, .rate-star:hover{ color:#f59e0b; transform:translateY(-1px) }
.rate-caption{ font-size:13px !important; color:#334155; margin-top:2px }
.rate-actions{ display:flex; gap:8px; justify-content:center; margin-top:10px }

/* Readonly stars in table */
.stars-readonly .star{ font-size:16px; color:#d1d5db; }
.stars-readonly .star.on{ color:#f59e0b; }

/* Hover fill برای ستاره‌ها + افکت ریز */
.rate-star.hl{ color:#fbbf24; transform:translateY(-1px) scale(1.04); }

/* افکت پالس کوتاه هنگام انتخاب */
.rate-stars.pulse .rate-star.on{ animation:mgPop .22s ease; }
@keyframes mgPop{
  0%{transform:scale(1)}
  50%{transform:scale(1.15)}
  100%{transform:scale(1)}
}

/* کمی بزرگتر و لمسی‌تر بشه */
.rate-star{ font-size:32px; padding:4px 6px; border-radius:12px; }
.rate-star:focus-visible{ outline:2px solid var(--ring); outline-offset:2px }


/* ===== Catalog Cards (My Account > سرویس‌ها) ===== */
.mgsmm-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:12px;
}

.mgsmm-card-item{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.mgsmm-card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:8px;
}
.mgsmm-card-head .ttl{font-weight:800}

.mgsmm-card-item .head-actions{
  display:flex;gap:6px;flex-wrap:wrap;align-items:center
}

.mgsmm-card-item .price-badge{
  background:#eef2ff;border:1px solid #e0e7ff;
  border-radius:10px;padding:4px 8px;font-weight:700
}

.mgsmm-card-item .pin{
  background:#f1f5f9;border:1px solid var(--border);
  border-radius:10px;padding:4px 8px;cursor:pointer
}
.mgsmm-card-item .pin.on{background:#fde68a;border-color:#fbbf24}

.mgsmm-card-item .richdesc{max-height:120px;overflow:auto}
.mgsmm-card-item .meta{display:flex;gap:8px;flex-wrap:wrap;color:#64748b;font-size:12px}

.mgsmm-card-item .actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.mgsmm-card-item .actions .btn.disabled{opacity:.5;pointer-events:none}


/* ===== Compact List for large catalogs ===== */
.mgsmm-grid.svc-list{ display:flex; flex-direction:column; gap:8px; list-style:none; padding:0; margin:0 }
.svc-row{
  background:#fff; border:1px solid var(--border); border-radius:14px;
  box-shadow:var(--shadow); padding:12px;
}
.svc-row.rec{ border-color:#bbf7d0 } /* توصیه‌شده: فقط خط حاشیه سبز روشن، بدون روبان */
.svc-row .row-main{
  display:grid; gap:12px; align-items:center;
  grid-template-columns: 1fr 160px auto; /* نام | قیمت | عملیات */
}
.svc-row .ttl-wrap{ display:flex; align-items:center; gap:8px }
.svc-row .ttl{ font-weight:800; font-size:15px; line-height:1.4 }
.svc-row .sub{ display:flex; gap:10px; flex-wrap:wrap; color:#64748b; font-size:12px; margin-top:2px }
.svc-row .price{ text-align:center }
.svc-row .price .p1k{ font-weight:900; font-size:18px; line-height:1.1;
  background:linear-gradient(180deg,#1f3fff,#204ed6);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.svc-row .price .unit{ font-size:12px; color:#1e3a8a; margin-top:2px }
.svc-row .actions{ display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap }
.svc-row .fav-btn{
  background:#f1f5f9; border:1px solid var(--border);
  border-radius:10px; padding:6px 8px; cursor:pointer; line-height:1
}
.svc-row .fav-btn.on{ background:#fde68a; border-color:#fbbf24 }
.svc-row .btn.disabled{ opacity:.45; pointer-events:none }


/* ===== Favorites (UI) ===== */
.mgsmm-fav .fav-head{ padding:12px; margin-bottom:12px }
.mgsmm-fav .fav-head .head-top{
  display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px;
}
.mgsmm-fav .fav-head h3{ margin:0; font-size:18px; font-weight:800 }
.mgsmm-fav .fav-toolbar{
  display:grid; gap:8px;
  grid-template-columns: 1fr auto 160px; /* جستجو | وضعیت | سورت */
  margin-bottom:8px;
}
@media (max-width: 860px){
  .mgsmm-fav .fav-toolbar{ grid-template-columns: 1fr 1fr; }
}

/* خالیِ شیک */
.fav-empty{
  text-align:center; padding:28px 16px; margin:0 0 12px;
}
.fav-empty .ico{
  width:46px; height:46px; line-height:46px; margin:0 auto 8px;
  border-radius:14px; background:#f1f5f9; border:1px solid var(--border); font-size:20px;
}

/* کمی پولیش برای fav-list (از همون svc-list استفاده می‌کنیم) */
.fav-list .svc-row{ transition: box-shadow .12s ease, transform .12s ease }
.fav-list .svc-row:hover{ transform: translateY(-1px); box-shadow: 0 12px 34px rgba(2,6,23,.08) }


/* فشرده‌تر روی صفحات کوچک */
@media (max-width: 860px){
  .svc-row .row-main{ grid-template-columns: 1fr; }
  .svc-row .actions .btn{ flex:1 } /* دکمه‌ها تمام‌عرض و لمسی‌تر */
  .svc-row .price{ text-align:right }
}

/* خنثی کردن گرید کارت قدیمی برای این لیست */
.mgsmm-grid.svc-list > .mgsmm-card-item{ margin:0 } 


/* Responsive for toolbar */
@media (max-width: 980px){
  .cat-toolbar .tool-row{ grid-template-columns:1fr 1fr; }
}

/* Responsive */
@media (max-width:980px){
  .side{display:none}
  .mgsmm-order{grid-template-columns:1fr}
  .svc-current__meta .pill{font-size:11px}
  .svc-dialog__panel{max-width:100%}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .mgsmm-hub .btn, .qty-chips .chip-btn, .svc-item, .svc-tile{ transition:none }
}