/* =====================================================================
   MEGAGEN — redesign QA layer (loads LAST). Cross-surface corrections
   discovered during the professional-redesign QA pass.
   ===================================================================== */

/* Persian is a cursive, connected script: letter-spacing (especially the
   0.14–0.18em "editorial tracking" common in Latin design) and uppercase
   break glyph joining and look wrong. Neutralise them on all label/eyebrow/
   kicker runs across every layer. Display headings keep their subtle tracking
   (tolerable at large sizes with Vazirmatn); only the small label runs are
   corrected here. */
[class*="eyebrow"], [class*="kicker"], [class*="-label"], [class*="__label"],
.mg-trust__title, .mg-arw-eyebrow, .mg-section__kicker,
.mg-hx__eyebrow, .mg-bento__eyebrow, .mg-news__eyebrow {
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* Consistency: keep focus rings from being clipped by overflow on cards */
.mg-btn, .mg-nav__acct, a, button { outline-offset: 2px; }

/* Contrast guard: text on the dark landing/home surfaces must stay light.
   (.mg-arw-xpeed = #06121f, .mg-hx__card = #0d1b2c). Titles otherwise inherit
   the dark body color and become unreadable dark-on-dark. Scoped tightly so
   the accent stat numbers / formula code keep their own (higher-specificity)
   colors. */
.mg-arw-xpeed :where(h1, h2, h3, h4, h5, h6, p, li) { color: #fff; }
.mg-hx__card :where(h1, h2, h3, h4, h5, h6), .mg-hx__card .mg-hx__title { color: #fff; }

/* Proforma parties grid (سفارش‌دهنده / نام پزشک / سفارش‌گیرنده) */
.mg-proforma__parties { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 14px 0; }
.mg-proforma__party { background: var(--mg-surface, #f5f8fc); border: 1px solid var(--mg-border, #e5eaf1); border-radius: var(--mg-r-sm, 10px); padding: 10px 12px; font-size: var(--mg-fs-sm, .9375rem); line-height: 1.9; }
.mg-proforma__plbl { display: block; color: var(--mg-muted, #56677b); font-size: var(--mg-fs-xs, .8125rem); margin-bottom: 3px; }
.mg-proforma__party b { color: var(--mg-heading, #0a1626); }
@media (max-width: 640px) { .mg-proforma__parties { grid-template-columns: 1fr; } }

/* ---------- Cascading matrix product selector (order form) ---------- */
.mx-picker { margin: 8px 0 26px; padding: 20px; background: var(--mg-surface, #f5f8fc); border: 1px solid var(--mg-border, #e5eaf1); border-radius: var(--mg-r-lg, 22px); }
.mx-hint { color: var(--mg-muted, #56677b); font-size: var(--mg-fs-sm, .9375rem); margin: 0 0 14px; line-height: 1.9; }
.mx-selects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 620px) { .mx-selects { grid-template-columns: 1fr; } }
.mx-grid { margin-top: 16px; }
.mx-scroll { max-height: 360px; overflow: auto; border: 1px solid var(--mg-border, #e5eaf1); border-radius: var(--mg-r, 14px); background: var(--mg-bg, #fff); }
.mx-table { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.mx-table thead th { position: sticky; top: 0; z-index: 1; background: var(--mg-surface-2, #eef3f9); color: var(--mg-heading, #0a1626); font-size: var(--mg-fs-xs, .8125rem); font-weight: 700; text-align: start; padding: 10px 12px; border-bottom: 1px solid var(--mg-border, #e5eaf1); }
.mx-table td { padding: 6px 10px; border-bottom: 1px solid var(--mg-border, #e5eaf1); }
.mx-table tbody tr:hover { background: var(--mg-surface, #f5f8fc); }
.mx-table .mx-ref { width: 110px; min-height: 38px; padding: 6px 10px; border: 1px solid var(--mg-border-strong, #d4dce7); border-radius: 8px; font: inherit; }
.mx-table .mx-qty { width: 74px; min-height: 38px; padding: 6px 10px; border: 1px solid var(--mg-border-strong, #d4dce7); border-radius: 8px; font: inherit; text-align: center; }
.mx-table .mx-qty:focus, .mx-table .mx-ref:focus { outline: none; border-color: var(--mg-accent, #0067b1); box-shadow: var(--mg-ring, 0 0 0 3px rgba(0,103,177,.30)); }
#mx-add { margin-top: 14px; }
.mx-added { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.mx-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--mg-accent-soft, #e9f1fa); color: var(--mg-accent-deep, #024e86); border: 1px solid #cfe3f5; border-radius: var(--mg-r-pill, 999px); padding: 7px 8px 7px 14px; font-size: var(--mg-fs-sm, .9375rem); font-weight: 600; }
.mx-chip-del { border: 0; background: rgba(2,78,134,.12); color: var(--mg-accent-deep, #024e86); inline-size: 24px; block-size: 24px; border-radius: 50%; cursor: pointer; font-size: 15px; line-height: 1; }
.mx-chip-del:hover { background: var(--mg-danger, #d0392b); color: #fff; }
.mx-th { display: flex; flex-direction: column; gap: 5px; align-items: stretch; min-width: 92px; }
.mx-sort { border: 0; background: transparent; font: inherit; font-weight: 700; cursor: pointer; color: var(--mg-heading, #0a1626); padding: 0; display: flex; align-items: center; gap: 5px; justify-content: center; }
.mx-arrow { font-size: 11px; color: var(--mg-accent, #0067b1); }
.mx-filter { font: inherit; font-size: 12px; padding: 3px 6px; border: 1px solid var(--mg-border-strong, #d4dce7); border-radius: 6px; background: #fff; color: var(--mg-text, #0b1320); }
.mx-empty { color: var(--mg-muted, #56677b); padding: 16px; text-align: center; }
[data-theme="dark"] .mx-picker { background: rgba(255,255,255,.03); }
[data-theme="dark"] .mx-scroll { background: rgba(255,255,255,.02); }
[data-theme="dark"] .mx-filter { background: rgba(255,255,255,.05); color: #e8eef6; }