/* ===========================================================================
   «گارانتی‌های من» — کارتِ دیجیتال، ثبت، درخواستِ خدمات و پیگیری. مشترکِ هر چهار قالب.
   (docs/architecture/warranty-modernization/UI_UX_AUDIT.md §۳)

   چرا پالتِ خودش: گارانتی «اعتماد» است و باید در هر چهار قالب یک‌جور خوانده شود — رنگِ
   فیروزه‌ایِ تیره برای کارت، و رنگ‌های وضعیت که همیشه با متن می‌آیند. قلم از قالب می‌آید.

   دفاع در برابرِ قاعده‌های عمومیِ قالب‌ها (همان‌هایی که `tags.css` شرح داده):
   * هر قاعده با پیشوندِ `.wgx` نوشته شده (ویژگیِ ۰،۲،۰) تا `a:not(.btn)`ِ قالب‌ها (۰،۱،۱) نبرد؛
   * بیگ‌دیل به `p`، `span`، `li`، `small` و تیترها `color: var(--theme-ink) !important` می‌دهد؛
     همان متغیر را درونِ این اجزا به رنگِ خودِ هر عنصر برمی‌گردانیم؛
   * کادرها `<div>`/`<section>`اند و نه `<header>` (بیگ‌دیل به هر `header` پویانمایی می‌دهد).
   =========================================================================== */
.wgx {
    --wg-ink: #0f172a; --wg-ink-2: #334155; --wg-muted: #64748b; --wg-line: #e2e8f0; --wg-line-2: #cbd5e1;
    --wg-surface: #fff; --wg-tint: #f8fafc;
    --wg-brand: #0f766e; --wg-brand-2: #0e7490; --wg-brand-ink: #115e59; --wg-brand-soft: #ecfdf5; --wg-brand-line: #99f6e4;
    --wg-ok: #047857; --wg-ok-soft: #ecfdf5; --wg-ok-line: #a7f3d0;
    --wg-warn: #b45309; --wg-warn-soft: #fffbeb; --wg-warn-line: #fde68a;
    --wg-danger: #b91c1c; --wg-danger-soft: #fef2f2; --wg-danger-line: #fecaca;
    --wg-info: #1d4ed8; --wg-info-soft: #eff6ff; --wg-info-line: #bfdbfe;
    --wg-card: radial-gradient(120% 140% at 100% 0%, #14b8a6 0%, rgba(20, 184, 166, 0) 52%),
               radial-gradient(90% 120% at 0% 100%, #0e7490 0%, rgba(14, 116, 144, 0) 60%), #042f2e;
    --wg-radius: 18px; --wg-radius-sm: 12px;
    --wg-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 14px 34px -18px rgba(15, 23, 42, .28);
    --wg-ease: cubic-bezier(.2, .7, .2, 1);
    --theme-ink: var(--wg-ink);
    /* بیگ‌دیل `section { background-color: var(--theme-surface) !important }` دارد و زمینهٔ تیره‌اش هر
       بخشِ این صفحه را جعبهٔ سیاه می‌کرد؛ به‌جای جنگِ `!important` همان متغیر اینجا شفاف است. */
    --theme-surface: transparent;
    display: flex; flex-direction: column; gap: 22px; width: 100%; clear: both; margin: 4px 0 32px;
    /* چیدمان به پهنای ستونِ محتوا واکنش می‌دهد نه پهنای صفحه: کنارِ سایدبارِ حساب، ۱۴۴۰ پیکسل
       یعنی ستونی ۸۰۰ پیکسلی، و قاعده‌ای که با `@media` نوشته می‌شد آمار را در سه ستونِ باریک می‌چلاند. */
    container: wgx / inline-size;
    color: var(--wg-ink); font-size: 14px; line-height: 1.75;
}
.wgx * { box-sizing: border-box; }
.wgx :is(h2, h3, p, ul, ol, dl, dd, figure) { margin: 0; }
.wgx :is(ul, ol) { padding: 0; list-style: none; }
.wgx svg { width: 1.15em; height: 1.15em; flex: none; }
.wgx--embedded { margin: 24px 0 8px; }

/* ── دکمه، فیلد، تراشه ─────────────────────────────────────────────────── */
.wgx .wgx-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px;
    border: 1px solid transparent; border-radius: 12px; font: inherit; font-weight: 700; font-size: 14px; line-height: 1.2;
    cursor: pointer; text-decoration: none; white-space: nowrap; touch-action: manipulation;
    transition: background-color .18s var(--wg-ease), border-color .18s var(--wg-ease), transform .18s var(--wg-ease), box-shadow .18s var(--wg-ease);
}
.wgx .wgx-btn--primary { background: var(--wg-brand); color: #fff; box-shadow: 0 8px 18px -10px rgba(15, 118, 110, .8); }
.wgx .wgx-btn--primary:hover { background: var(--wg-brand-ink); color: #fff; transform: translateY(-1px); }
.wgx .wgx-btn--ghost { background: var(--wg-surface); color: var(--wg-brand-ink); border-color: var(--wg-brand-line); }
.wgx .wgx-btn--ghost:hover { background: var(--wg-brand-soft); color: var(--wg-brand-ink); }
.wgx .wgx-btn--danger { background: var(--wg-danger); color: #fff; }
.wgx .wgx-btn--danger:hover { background: #991b1b; color: #fff; }
.wgx .wgx-btn--sm { min-height: 36px; padding: 6px 14px; font-size: 13px; }
.wgx .wgx-btn:focus-visible, .wgx a:focus-visible, .wgx summary:focus-visible { outline: 2px solid var(--wg-brand); outline-offset: 2px; }
.wgx .wgx-btn--primary, .wgx .wgx-btn--danger, .wgx .wgx-btn--primary span { --theme-ink: #fff; }

.wgx .wgx-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wgx .wgx-field__label { font-size: 13px; font-weight: 700; color: var(--wg-ink-2); --theme-ink: var(--wg-ink-2); }
.wgx .wgx-field__label small, .wgx .wgx-field__tip { color: var(--wg-muted); font-weight: 500; font-size: 12.5px; --theme-ink: var(--wg-muted); }
.wgx .wgx-input {
    width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid var(--wg-line-2); border-radius: 12px;
    background: var(--wg-surface); color: var(--wg-ink); font: inherit; font-size: 15px; line-height: 1.6;
    transition: border-color .18s var(--wg-ease), box-shadow .18s var(--wg-ease);
}
.wgx textarea.wgx-input { resize: vertical; min-height: 104px; }
/* ورودی‌های بیگ‌دیل زمینهٔ تیره با `!important` می‌گیرند؛ روی کادرِ روشنِ این صفحه جعبهٔ سیاه می‌شد. */
.wgx .wgx-input { background-color: var(--wg-surface) !important; color: var(--wg-ink) !important; }
.wgx .wgx-input:focus { outline: none; border-color: var(--wg-brand); box-shadow: 0 0 0 4px rgba(15, 118, 110, .14); }
.wgx .wgx-input--file { padding: 8px 10px; font-size: 13px; }

.wgx .wgx-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; border: 1px solid;
    font-size: 12px; font-weight: 700; line-height: 1.6; white-space: nowrap; text-decoration: none;
}
.wgx .wgx-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.wgx .wgx-chip--lg { padding: 6px 14px; font-size: 13.5px; }
.wgx .wgx-chip--ok { color: var(--wg-ok); background: var(--wg-ok-soft); border-color: var(--wg-ok-line); --theme-ink: var(--wg-ok); }
.wgx .wgx-chip--warn { color: var(--wg-warn); background: var(--wg-warn-soft); border-color: var(--wg-warn-line); --theme-ink: var(--wg-warn); }
.wgx .wgx-chip--danger { color: var(--wg-danger); background: var(--wg-danger-soft); border-color: var(--wg-danger-line); --theme-ink: var(--wg-danger); }
.wgx .wgx-chip--info { color: var(--wg-info); background: var(--wg-info-soft); border-color: var(--wg-info-line); --theme-ink: var(--wg-info); }
.wgx .wgx-chip--muted { color: var(--wg-muted); background: var(--wg-tint); border-color: var(--wg-line); --theme-ink: var(--wg-muted); }
.wgx a.wgx-chip:hover { filter: brightness(.96); text-decoration: none; }
/* روی کارتِ تیره: زمینهٔ شیشه‌ای و متنِ روشن، ولی نقطهٔ رنگیِ وضعیت می‌ماند */
.wgx .wgx-chip--on-dark { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .28); color: #fff; --theme-ink: #fff; }
.wgx .wgx-chip--on-dark.wgx-chip--ok::before { background: #5eead4; }
.wgx .wgx-chip--on-dark.wgx-chip--warn::before { background: #fcd34d; }
.wgx .wgx-chip--on-dark.wgx-chip--danger::before { background: #fca5a5; }
.wgx .wgx-chip--on-dark.wgx-chip--muted::before { background: #cbd5e1; }

/* ── سرِ صفحه ─────────────────────────────────────────────────────────── */
.wgx .wgx-hero {
    position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 18px; padding: 22px 20px;
    border-radius: var(--wg-radius); background: var(--wg-card); color: #fff; box-shadow: 0 24px 60px -32px rgba(4, 47, 46, .8);
    --theme-ink: #fff;
}
.wgx .wgx-hero__mark { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px;
    background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); color: #fff; }
.wgx .wgx-hero__mark svg { width: 28px; height: 28px; }
.wgx .wgx-hero__title { font-size: 20px; font-weight: 800; color: #fff; line-height: 1.5; }
.wgx .wgx-hero__desc { margin-top: 4px; color: rgba(255, 255, 255, .82); --theme-ink: rgba(255, 255, 255, .82); max-width: 62ch; }
.wgx .wgx-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.wgx .wgx-stat { padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); }
.wgx .wgx-stat dt { font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, .78); --theme-ink: rgba(255, 255, 255, .78); line-height: 1.5; }
.wgx .wgx-stat dd { font-size: 22px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }

/* ── بخش ──────────────────────────────────────────────────────────────── */
.wgx .wgx-section { display: flex; flex-direction: column; gap: 14px; }
.wgx .wgx-section__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; }
.wgx .wgx-section__title { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 800; color: var(--wg-ink); }
.wgx .wgx-section__icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px;
    background: var(--wg-brand-soft); color: var(--wg-brand); --theme-ink: var(--wg-brand); }
.wgx .wgx-section__desc { flex-basis: 100%; color: var(--wg-muted); --theme-ink: var(--wg-muted); font-size: 13.5px; }
.wgx .wgx-link { color: var(--wg-brand-ink); font-weight: 700; font-size: 13.5px; text-decoration: none; }
.wgx .wgx-link:hover { text-decoration: underline; color: var(--wg-brand-ink); }
.wgx .wgx-back { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 36px; color: var(--wg-muted);
    font-weight: 700; font-size: 13px; text-decoration: none; }
.wgx .wgx-back svg { transform: scaleX(-1); }
.wgx .wgx-back span { --theme-ink: var(--wg-muted); }
.wgx .wgx-back:hover { color: var(--wg-brand-ink); }

.wgx .wgx-list { display: flex; flex-direction: column; gap: 10px; }
.wgx .wgx-list--tight { gap: 8px; }

/* ── ثبتِ گارانتی ─────────────────────────────────────────────────────── */
.wgx .wgx-reg { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--wg-line); border-radius: var(--wg-radius-sm);
    background: var(--wg-surface); box-shadow: var(--wg-shadow); }
.wgx .wgx-reg__info { display: flex; gap: 12px; align-items: flex-start; }
.wgx .wgx-reg__icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--wg-tint);
    color: var(--wg-brand); border: 1px solid var(--wg-line); --theme-ink: var(--wg-brand); }
.wgx .wgx-reg__name { font-weight: 800; color: var(--wg-ink); }
.wgx .wgx-reg__meta { font-size: 12.5px; color: var(--wg-muted); --theme-ink: var(--wg-muted); }
.wgx .wgx-reg__deadline { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12.5px; font-weight: 700;
    color: var(--wg-warn); --theme-ink: var(--wg-warn); }
.wgx .wgx-reg__form { display: grid; gap: 10px; align-items: end; }

/* ── کارتِ دیجیتال ────────────────────────────────────────────────────── */
.wgx .wgx-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.wgx .wgx-card {
    position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 8px;
    min-height: 196px; padding: 18px 20px 16px; border-radius: var(--wg-radius); background: var(--wg-card); color: #fff;
    box-shadow: 0 20px 44px -26px rgba(4, 47, 46, .9); text-decoration: none; --theme-ink: #fff;
    transition: transform .2s var(--wg-ease), box-shadow .2s var(--wg-ease);
}
.wgx a.wgx-card:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -24px rgba(4, 47, 46, .95); color: #fff; text-decoration: none; }
/* کارتِ پایان‌یافته یا باطل خاکستری می‌شود — همراهِ متنِ وضعیت، نه به‌جایش */
.wgx .wgx-card--muted, .wgx .wgx-card--danger { background: radial-gradient(120% 140% at 100% 0%, #64748b 0%, rgba(100, 116, 139, 0) 55%), #1e293b; }
.wgx .wgx-card__glyph { position: absolute; z-index: -1; inset-inline-end: -26px; bottom: -34px; color: rgba(255, 255, 255, .07); --theme-ink: rgba(255, 255, 255, .07); }
.wgx .wgx-card__glyph svg { width: 170px; height: 170px; stroke-width: 1.2; }
.wgx .wgx-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wgx .wgx-card__programme { font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, .78); --theme-ink: rgba(255, 255, 255, .78);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wgx .wgx-card__product { font-size: 16.5px; font-weight: 800; line-height: 1.55; color: #fff;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wgx .wgx-card__number { align-self: flex-end; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px;
    letter-spacing: .14em; color: rgba(255, 255, 255, .72); --theme-ink: rgba(255, 255, 255, .72); }
.wgx .wgx-card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: auto; }
.wgx .wgx-card__until { display: flex; flex-direction: column; line-height: 1.4; }
.wgx .wgx-card__until small { font-size: 11px; color: rgba(255, 255, 255, .7); --theme-ink: rgba(255, 255, 255, .7); }
.wgx .wgx-card__until b { font-size: 13.5px; color: #fff; }
.wgx .wgx-card__left { font-size: 12px; color: rgba(255, 255, 255, .82); --theme-ink: rgba(255, 255, 255, .82); }
.wgx .wgx-card__left b { font-size: 18px; color: #fff; font-variant-numeric: tabular-nums; }
.wgx .wgx-card__bar { display: block; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.wgx .wgx-card__bar i { display: block; width: var(--wgx-used, 0%); height: 100%; border-radius: inherit;
    background: linear-gradient(90deg, #5eead4, #a7f3d0); }

/* ── خالی و یادداشت ───────────────────────────────────────────────────── */
.wgx .wgx-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 32px 20px; text-align: center;
    border: 1px dashed var(--wg-line-2); border-radius: var(--wg-radius); background: var(--wg-tint); }
.wgx .wgx-empty__icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 18px; background: var(--wg-brand-soft);
    color: var(--wg-brand); --theme-ink: var(--wg-brand); }
.wgx .wgx-empty__icon svg { width: 28px; height: 28px; }
.wgx .wgx-empty__title { font-weight: 800; font-size: 16px; }
.wgx .wgx-empty__desc { color: var(--wg-muted); --theme-ink: var(--wg-muted); max-width: 46ch; margin-bottom: 6px; }
.wgx .wgx-notes { display: flex; flex-direction: column; gap: 6px; }
.wgx .wgx-notes li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--wg-ink-2); --theme-ink: var(--wg-ink-2); }
.wgx .wgx-notes svg { margin-top: 4px; color: var(--wg-muted); }

/* ── ردیفِ پرونده ─────────────────────────────────────────────────────── */
.wgx .wgx-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 64px; padding: 12px 16px; border: 1px solid var(--wg-line);
    border-radius: var(--wg-radius-sm); background: var(--wg-surface); color: var(--wg-ink); text-decoration: none;
    transition: border-color .18s var(--wg-ease), box-shadow .18s var(--wg-ease); }
.wgx .wgx-row:hover { border-color: var(--wg-brand-line); box-shadow: var(--wg-shadow); color: var(--wg-ink); text-decoration: none; }
.wgx .wgx-row__main { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; }
.wgx .wgx-row__num { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; color: var(--wg-brand-ink); white-space: nowrap;
    align-self: flex-start; --theme-ink: var(--wg-brand-ink); }
.wgx .wgx-row__title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wgx .wgx-row__meta { font-size: 12px; color: var(--wg-muted); --theme-ink: var(--wg-muted); }
.wgx .wgx-row__go { color: var(--wg-muted); --theme-ink: var(--wg-muted); }

/* ── جزئیاتِ کارت ─────────────────────────────────────────────────────── */
.wgx .wgx-split { display: grid; gap: 18px; }
.wgx .wgx-split__card { display: flex; flex-direction: column; gap: 14px; }
.wgx .wgx-split__facts, .wgx .wgx-split__aside { display: flex; flex-direction: column; gap: 16px; }
.wgx .wgx-panel { display: flex; flex-direction: column; gap: 12px; padding: 18px; border: 1px solid var(--wg-line);
    border-radius: var(--wg-radius); background: var(--wg-surface); box-shadow: var(--wg-shadow); }
.wgx .wgx-panel__title { font-size: 15.5px; font-weight: 800; color: var(--wg-ink); }
.wgx .wgx-panel__text { font-size: 13px; color: var(--wg-ink-2); --theme-ink: var(--wg-ink-2); margin: 8px 0 12px; }
.wgx .wgx-subtitle { font-size: 13.5px; font-weight: 800; color: var(--wg-ink-2); margin-top: 4px; }
.wgx .wgx-facts { display: grid; gap: 0; margin: 0; }
.wgx .wgx-facts > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px;
    padding: 9px 0; border-bottom: 1px dashed var(--wg-line); }
.wgx .wgx-facts > div:last-child { border-bottom: 0; }
.wgx .wgx-facts dt { font-size: 13px; color: var(--wg-muted); font-weight: 600; }
.wgx .wgx-facts dd { font-weight: 700; color: var(--wg-ink); display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; text-align: end; }
.wgx .wgx-facts dd small { color: var(--wg-muted); font-weight: 500; --theme-ink: var(--wg-muted); }
.wgx .wgx-facts dd a { color: var(--wg-brand-ink); }
.wgx .wgx-facts--compact > div { padding: 7px 0; }

.wgx .wgx-verdict { padding: 14px 16px; border-radius: var(--wg-radius-sm); border: 1px solid; }
.wgx .wgx-verdict--ok { background: var(--wg-ok-soft); border-color: var(--wg-ok-line); }
.wgx .wgx-verdict--warn { background: var(--wg-warn-soft); border-color: var(--wg-warn-line); }
.wgx .wgx-verdict--danger { background: var(--wg-danger-soft); border-color: var(--wg-danger-line); }
.wgx .wgx-verdict__title { font-weight: 800; margin-bottom: 6px; }
.wgx .wgx-reasons { display: flex; flex-direction: column; gap: 4px; }
.wgx .wgx-reason { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--wg-ink-2); --theme-ink: var(--wg-ink-2); }
.wgx .wgx-reason svg { margin-top: 4px; }
.wgx .wgx-reason--check svg { color: var(--wg-ok); }
.wgx .wgx-reason--x svg { color: var(--wg-danger); }
.wgx .wgx-reason--question svg { color: var(--wg-warn); }

.wgx .wgx-cover { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wgx .wgx-cover__item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 12px;
    border: 1px solid; text-align: center; font-size: 12.5px; font-weight: 700; line-height: 1.5; }
.wgx .wgx-cover__item--yes { background: var(--wg-ok-soft); border-color: var(--wg-ok-line); color: var(--wg-ok); }
.wgx .wgx-cover__item--no { background: var(--wg-tint); border-color: var(--wg-line); color: var(--wg-muted); }
.wgx .wgx-cover__item--yes span { --theme-ink: var(--wg-ok); }
.wgx .wgx-cover__item--no span { --theme-ink: var(--wg-muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.wgx .wgx-cover__item svg { width: 20px; height: 20px; }
.wgx .wgx-excl { display: flex; flex-direction: column; gap: 4px; }
.wgx .wgx-excl li { position: relative; padding-inline-start: 16px; font-size: 13px; color: var(--wg-ink-2); --theme-ink: var(--wg-ink-2); }
.wgx .wgx-excl li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .75em; width: 6px; height: 6px; border-radius: 50%;
    background: var(--wg-danger); }
.wgx .wgx-details summary { cursor: pointer; font-weight: 700; color: var(--wg-brand-ink); min-height: 32px; display: flex; align-items: center; }
.wgx .wgx-details--danger summary { color: var(--wg-danger); }
.wgx .wgx-terms { margin-top: 8px; font-size: 13px; color: var(--wg-ink-2); --theme-ink: var(--wg-ink-2); }
.wgx .wgx-terms p { margin: 0 0 8px; }

/* ── فرم ──────────────────────────────────────────────────────────────── */
.wgx .wgx-form { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--wg-line); border-radius: var(--wg-radius);
    background: var(--wg-surface); box-shadow: var(--wg-shadow); }
.wgx .wgx-form__lead { font-size: 13.5px; color: var(--wg-ink-2); --theme-ink: var(--wg-ink-2); }
.wgx .wgx-form__actions { display: flex; justify-content: flex-end; }
.wgx .wgx-form--reply { padding: 14px 0 0; border: 0; border-top: 1px solid var(--wg-line); border-radius: 0; box-shadow: none; }

.wgx .wgx-callout { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: var(--wg-radius-sm); border: 1px solid;
    font-size: 13.5px; text-decoration: none; }
.wgx .wgx-callout svg { margin-top: 4px; }
.wgx .wgx-callout--info { background: var(--wg-info-soft); border-color: var(--wg-info-line); color: var(--wg-info); }
.wgx .wgx-callout--warn { background: var(--wg-warn-soft); border-color: var(--wg-warn-line); color: var(--wg-warn); }
.wgx .wgx-callout--ok { background: var(--wg-ok-soft); border-color: var(--wg-ok-line); color: var(--wg-ok); }
.wgx .wgx-callout--danger { background: var(--wg-danger-soft); border-color: var(--wg-danger-line); color: var(--wg-danger); }
.wgx .wgx-callout--muted { background: var(--wg-tint); border-color: var(--wg-line); color: var(--wg-muted); }
.wgx .wgx-callout span, .wgx .wgx-callout b { --theme-ink: currentColor; color: inherit; }
.wgx a.wgx-callout:hover { filter: brightness(.97); text-decoration: none; }

/* ── پیگیریِ پرونده ───────────────────────────────────────────────────── */
.wgx .wgx-claimhead { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 18px; border: 1px solid var(--wg-line); border-radius: var(--wg-radius); background: var(--wg-surface); box-shadow: var(--wg-shadow); }
.wgx .wgx-claimhead__kicker { font-size: 12.5px; color: var(--wg-muted); --theme-ink: var(--wg-muted); }
.wgx .wgx-claimhead__kicker b { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--wg-brand-ink); --theme-ink: var(--wg-brand-ink); }
.wgx .wgx-claimhead__title { font-size: 18px; font-weight: 800; line-height: 1.55; }
.wgx .wgx-claimhead__meta { font-size: 12.5px; color: var(--wg-muted); --theme-ink: var(--wg-muted); }

.wgx .wgx-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; counter-reset: none; }
.wgx .wgx-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.wgx .wgx-step::before { content: ""; position: absolute; top: 17px; inset-inline-start: 50%; width: 100%; height: 3px; border-radius: 3px;
    background: var(--wg-line); z-index: 0; }
.wgx .wgx-step:last-child::before { display: none; }
.wgx .wgx-step.is-done::before { background: var(--wg-brand); }
.wgx .wgx-step__dot { position: relative; z-index: 1; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%;
    border: 2px solid var(--wg-line-2); background: var(--wg-surface); color: var(--wg-muted); font-weight: 800; font-size: 13px; --theme-ink: var(--wg-muted); }
.wgx .wgx-step.is-done .wgx-step__dot { border-color: var(--wg-brand); background: var(--wg-brand); color: #fff; --theme-ink: #fff; }
.wgx .wgx-step.is-current .wgx-step__dot { border-color: var(--wg-brand); color: var(--wg-brand); box-shadow: 0 0 0 5px rgba(15, 118, 110, .14); --theme-ink: var(--wg-brand); }
.wgx .wgx-step__label { font-size: 12.5px; font-weight: 700; color: var(--wg-muted); --theme-ink: var(--wg-muted); }
.wgx .wgx-step.is-current .wgx-step__label, .wgx .wgx-step.is-done .wgx-step__label { color: var(--wg-ink); --theme-ink: var(--wg-ink); }

.wgx .wgx-quote { padding: 12px 14px; border-radius: 12px; background: var(--wg-tint); border: 1px solid var(--wg-line); }
.wgx .wgx-quote__label { font-size: 12px; font-weight: 700; color: var(--wg-muted); --theme-ink: var(--wg-muted); margin-bottom: 2px; }

.wgx .wgx-timeline { position: relative; display: flex; flex-direction: column; gap: 14px; padding-inline-start: 22px; }
.wgx .wgx-timeline::before { content: ""; position: absolute; inset-inline-start: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--wg-line); }
.wgx .wgx-timeline__item { position: relative; }
.wgx .wgx-timeline__dot { position: absolute; inset-inline-start: -22px; top: 6px; width: 14px; height: 14px; border-radius: 50%;
    background: var(--wg-surface); border: 3px solid var(--wg-brand); }
.wgx .wgx-timeline__item.is-mine .wgx-timeline__dot { border-color: var(--wg-info); }
.wgx .wgx-timeline__title { font-weight: 800; font-size: 13.5px; }
.wgx .wgx-timeline__text { font-size: 13.5px; color: var(--wg-ink-2); --theme-ink: var(--wg-ink-2); white-space: normal; overflow-wrap: anywhere; }
.wgx .wgx-timeline__time { font-size: 12px; color: var(--wg-muted); }

.wgx .wgx-files { display: flex; flex-direction: column; gap: 6px; }
.wgx .wgx-files a { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--wg-line);
    color: var(--wg-ink-2); text-decoration: none; font-size: 13px; overflow-wrap: anywhere; }
.wgx .wgx-files a:hover { border-color: var(--wg-brand-line); color: var(--wg-brand-ink); }
.wgx .wgx-files span { --theme-ink: currentColor; }

/* ── جزئیاتِ سفارش ────────────────────────────────────────────────────── */
.wgx .wgx-orow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 14px;
    border: 1px solid var(--wg-line); border-radius: var(--wg-radius-sm); background: var(--wg-surface); }
.wgx .wgx-orow__name { display: flex; flex-direction: column; font-weight: 700; }
.wgx .wgx-orow__name small { font-weight: 500; font-size: 12px; color: var(--wg-muted); --theme-ink: var(--wg-muted); }
.wgx .wgx-orow__cards { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wgx .wgx-orow__note { font-size: 12.5px; color: var(--wg-muted); --theme-ink: var(--wg-muted); }

/* ── ستونِ پهن‌تر ──────────────────────────────────────────────────── */
@container wgx (min-width: 520px) {
    .wgx .wgx-reg__form { grid-template-columns: minmax(0, 1fr) auto; }
    .wgx .wgx-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wgx .wgx-form .wgx-field--wide, .wgx .wgx-form__lead, .wgx .wgx-form__actions { grid-column: 1 / -1; }
}
@container wgx (min-width: 700px) {
    .wgx .wgx-hero { grid-template-columns: auto minmax(0, 1fr); align-items: center; padding: 26px 28px; }
    .wgx .wgx-stats { grid-column: 1 / -1; }
    .wgx .wgx-reg { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); align-items: center; }
}
@container wgx (min-width: 740px) {
    .wgx .wgx-split { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); align-items: start; }
    .wgx .wgx-split--claim { grid-template-columns: minmax(0, 1fr) minmax(0, 260px); }
    .wgx .wgx-split__card { position: sticky; top: 96px; }
}
@container wgx (min-width: 1000px) {
    .wgx .wgx-hero { grid-template-columns: auto minmax(0, 1fr) minmax(0, 360px); }
    .wgx .wgx-stats { grid-column: auto; }
    .wgx .wgx-split { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); }
    .wgx .wgx-split--claim { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }
}
@container wgx (max-width: 400px) {
    .wgx .wgx-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .wgx .wgx-stat { padding: 8px; }
    .wgx .wgx-stat dd { font-size: 18px; }
    .wgx .wgx-cover { grid-template-columns: 1fr; }
    .wgx .wgx-cover__item { flex-direction: row; justify-content: flex-start; padding: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .wgx *, .wgx *::before { transition: none !important; }
    .wgx a.wgx-card:hover, .wgx .wgx-btn--primary:hover { transform: none; }
}

/* ── دور ۲: برآورد، ریزِ هزینه، مرسوله ─────────────────────────────────── */
.wgx .wgx-quote-box { border-color: var(--wg-warn-line); background: var(--wg-warn-soft); }
.wgx .wgx-lines { display: flex; flex-direction: column; margin: 12px 0; border-radius: var(--wg-radius-sm); border: 1px solid var(--wg-line); background: var(--wg-surface); }
.wgx .wgx-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; color: var(--wg-ink-2); }
.wgx .wgx-lines li + li { border-top: 1px solid var(--wg-line); }
.wgx .wgx-lines b { color: var(--wg-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wgx .wgx-lines .wgx-lines__total { background: var(--wg-tint); font-weight: 700; color: var(--wg-ink); }
.wgx .wgx-row--static { cursor: default; }
.wgx .wgx-form__actions form { display: inline-flex; margin: 0; }
.wgx .wgx-form__actions { gap: 8px; flex-wrap: wrap; }
.wgx .wgx-result { display: flex; flex-direction: column; gap: 10px; }
.wgx .wgx-result .wgx-facts { padding: 0 6px; }
.wgx .wgx-result__go { padding: 0 6px; }

/* ── صفحهٔ محصول: خلاصهٔ شرایطِ گارانتی ───────────────────────────────── */
.wgx.wgx-pterms { gap: 8px; margin: 12px 0; font-size: 13px; }
.wgx .wgx-pterm { border-radius: var(--wg-radius-sm); }
.wgx .wgx-pterm summary { display: flex; align-items: center; gap: 8px; color: var(--wg-brand-ink); font-weight: 700; }
.wgx .wgx-pterm .wgx-cover { margin-top: 10px; }
.wgx .wgx-pterm__meta { margin-top: 8px; color: var(--wg-muted); font-size: 12.5px; }
.wgx .wgx-pterm__intro { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--wg-line); font-size: 13px; line-height: 1.9; }
.wgx .wgx-pterm__intro > :last-child { margin-bottom: 0; }
.wgx .wgx-pterm__intro img { max-width: 100%; height: auto; }