/* =========================================================================
   خدمات سُکانه (templates/tradeservices/*): فهرست، صفحه‌ی معرفی، فرم درخواست، پیگیری.
   مؤلفه‌های پایه‌ی فرم (فیلد، قرص، دکمه، کارت، پیام، خط زمانی، انتخاب فایل) از brokers.css می‌آیند؛
   این‌جا فقط بخش‌های خاص خدمات. رنگ‌ها از tokens.css.
   ========================================================================= */
.sv-page { --sv-gap: 14px; }

/* ---------- نوار خلاصه‌ی خدمت در فرم ---------- */
.sv-strip {
    display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 10px 12px; max-width: 620px;
    background: var(--sk-surface); border: 1px solid var(--sk-line); border-radius: 16px; color: inherit; text-decoration: none;
}
.sv-strip:hover { border-color: var(--sk-primary-soft-border); color: inherit; }
.sv-strip__icon, .sv-card__icon, .sv-req__icon, .sv-hero__icon {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    border-radius: 13px; background: var(--sk-primary-soft); color: var(--sk-primary);
}
.sv-strip__icon .sk-ico, .sv-card__icon .sk-ico, .sv-req__icon .sk-ico { font-size: 22px; }
.sv-strip__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sv-strip__text b { font-size: var(--fs-sm); font-weight: 800; }
.sv-strip__text small { font-size: var(--fs-xs); color: var(--sk-muted); }
.sv-strip__price { flex-shrink: 0; font-size: var(--fs-xs); font-weight: 800; color: var(--sk-primary); text-align: left; }
.sv-strip + .br-head__sub { margin-top: 10px; }

/* ---------- فهرست خدمات ---------- */
.sv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sv-gap); }
.sv-card {
    display: flex; gap: 14px; padding: 16px; background: var(--sk-surface); border: 1px solid var(--sk-line); border-radius: 18px;
    color: inherit; text-decoration: none; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sv-card:hover { border-color: var(--sk-primary-soft-border); box-shadow: var(--sk-shadow-sm); color: inherit; }
.sv-card__body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sv-card__body b { font-size: var(--fs-md); font-weight: 800; }
.sv-card__short { font-size: var(--fs-xs); color: var(--sk-muted); line-height: 1.8; }
.sv-card__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: var(--fs-xs); color: var(--sk-muted); }
.sv-card__meta span { display: inline-flex; align-items: center; gap: 4px; }
.sv-card__meta .sk-ico { font-size: 14px; }
.sv-card__price { color: var(--sk-primary); font-weight: 800; }
.sv-card__off { font-size: var(--fs-xs); color: var(--sk-accent-text); }
.sv-banner {
    display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 12px 14px; border-radius: 16px;
    background: var(--sk-accent-soft); color: var(--sk-accent-text); text-decoration: none;
}
.sv-banner > .sk-ico { font-size: 22px; flex-shrink: 0; }
.sv-banner span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sv-banner b { font-size: var(--fs-sm); }
.sv-banner small { font-size: var(--fs-xs); opacity: 0.85; }
.sv-dot { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--sk-accent); color: #FFFFFF; font-size: 0.75rem; display: inline-flex; align-items: center; justify-content: center; }
.sv-how__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sv-gap); counter-reset: sv; }
.sv-how__steps li { counter-increment: sv; display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 16px; background: var(--sk-surface); border: 1px solid var(--sk-line); font-size: var(--fs-xs); color: var(--sk-muted); }
.sv-how__steps li::before { content: counter(sv, persian); width: 26px; height: 26px; border-radius: 50%; background: var(--sk-primary); color: #FFFFFF; display: grid; place-items: center; font-weight: 800; font-size: 0.8rem; }
.sv-how__steps b { color: var(--sk-ink); font-size: var(--fs-sm); }

/* ---------- صفحه‌ی معرفی ---------- */
.sv-hero { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.sv-hero__icon { width: 60px; height: 60px; border-radius: 18px; }
.sv-hero__icon .sk-ico { font-size: 30px; }
.sv-hero h1 { font-size: 1.6rem; font-weight: 800; margin: 0; }
.sv-hero p { margin: 4px 0 0; color: var(--sk-muted); font-size: var(--fs-sm); max-width: 64ch; }
.sv-hero__facts { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: var(--fs-xs); color: var(--sk-muted); }
.sv-hero__facts span { display: inline-flex; align-items: center; gap: 5px; }
.sv-hero__facts .sk-ico { color: var(--sk-primary); font-size: 15px; }
.sv-detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.sv-detail__main { min-width: 0; display: flex; flex-direction: column; gap: var(--sv-gap); }
.sv-detail__main > .br-card + .br-card { margin-top: 0; }
.sv-detail__side { position: sticky; top: calc(var(--sk-appbar-h, 64px) + 16px); display: flex; flex-direction: column; gap: var(--sv-gap); }
.sv-p { margin: 0 0 10px; line-height: 2; }
.sv-p:last-child { margin-bottom: 0; }
.sv-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-sm); }
.sv-checks li { display: flex; align-items: flex-start; gap: 8px; }
.sv-checks .sk-ico { color: var(--sk-success); font-size: 18px; flex-shrink: 0; margin-top: 4px; }
.sv-steplist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sv-steplist__item { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 9px 0; position: relative; }
.sv-steplist__item:not(:last-child)::after { content: ''; position: absolute; right: 14px; top: 38px; bottom: -6px; width: 2px; background: var(--sk-line); }
.sv-steplist__n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 0.82rem; background: var(--sk-ground); border: 1px solid var(--sk-line); }
.sv-steplist__body { display: flex; flex-direction: column; font-size: var(--fs-sm); }
.sv-steplist__body small { font-size: var(--fs-xs); color: var(--sk-muted); }
.sv-actor { font-weight: 700; }
.sv-actor--customer .sv-steplist__n { background: var(--sk-accent-soft); border-color: var(--sk-accent); color: var(--sk-accent-text); }
.sv-actor--customer .sv-actor { color: var(--sk-accent-text); }
.sv-actor--gov .sv-steplist__n { background: var(--sk-primary-soft); border-color: var(--sk-primary-soft-border); color: var(--sk-primary); }
.sv-actor--gov .sv-actor { color: var(--sk-primary); }
.sv-docs-list { list-style: none; margin: 0; padding: 0; }
.sv-docs-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--sk-line); font-size: var(--fs-sm); }
.sv-docs-list li:last-child { border-bottom: none; }
.sv-faq details { border-bottom: 1px solid var(--sk-line); padding: 10px 0; }
.sv-faq details:last-child { border-bottom: none; }
.sv-faq summary { cursor: pointer; font-weight: 700; font-size: var(--fs-sm); list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.sv-faq summary::after { content: '+'; color: var(--sk-primary); font-weight: 800; }
.sv-faq details[open] summary::after { content: '−'; }
.sv-faq summary::-webkit-details-marker { display: none; }
.sv-faq p { margin: 8px 0 0; color: var(--sk-muted); font-size: var(--fs-sm); line-height: 2; }
.sv-price { display: flex; flex-direction: column; gap: 10px; }
.sv-price__label { font-size: var(--fs-xs); color: var(--sk-muted); }
.sv-price__value { font-size: 1.35rem; font-weight: 800; line-height: 1.6; }
.sv-price__value small { font-size: var(--fs-xs); color: var(--sk-muted); font-weight: 500; }
.sv-price__note { margin: 0; font-size: var(--fs-xs); color: var(--sk-muted); line-height: 1.9; display: flex; gap: 6px; }
.sv-price__note .sk-ico { color: var(--sk-accent); flex-shrink: 0; }
.sv-price__link { font-size: var(--fs-xs); text-align: center; }
.sv-others { display: flex; flex-direction: column; }
.sv-others a { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--sk-line); color: inherit; text-decoration: none; font-size: var(--fs-sm); }
.sv-others a:last-child { border-bottom: none; }
.sv-others a span { flex: 1; }
.sv-others a .sk-ico:first-child { color: var(--sk-primary); }
.sv-mbar { display: none; }

/* سنجش شرایط کارت بازرگانی */
.sv-quiz__list { margin: 0; padding-right: 20px; display: flex; flex-direction: column; gap: 10px; font-size: var(--fs-sm); }
.sv-quiz__list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.sv-quiz__a { display: inline-flex; gap: 6px; }
.sv-quiz__a button { min-width: 56px; min-height: 36px; border-radius: 10px; border: 1px solid var(--sk-line); background: var(--sk-surface); font-family: inherit; font-weight: 700; cursor: pointer; color: var(--sk-ink); }
.sv-quiz__a button.is-on[data-a=yes] { background: var(--sk-success-soft); border-color: var(--sk-success); color: var(--sk-success); }
.sv-quiz__a button.is-on[data-a=no] { background: var(--sk-danger-soft); border-color: var(--sk-danger); color: var(--sk-danger); }
.sv-quiz__kind { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; font-size: var(--fs-sm); font-weight: 700; }
.sv-quiz__kind span { flex-basis: 100%; }
.sv-quiz__kind button { min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--sk-line); background: var(--sk-surface); font-family: inherit; font-weight: 700; color: var(--sk-ink); cursor: pointer; }
.sv-quiz__kind button.is-on { background: var(--sk-primary-soft); border-color: var(--sk-primary); color: var(--sk-primary); }
.sv-quiz__note { margin: 10px 0 0; font-size: var(--fs-xs); color: var(--sk-success); font-weight: 600; }
.sv-checks__head { display: block !important; margin-top: 6px; font-weight: 800; color: var(--sk-primary); font-size: var(--fs-xs); }
.sv-checks__head:first-child { margin-top: 0; }
.sv-quiz__result { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; font-size: var(--fs-sm); font-weight: 600; }
.sv-quiz__result.is-ok { background: var(--sk-success-soft); color: var(--sk-success); }
.sv-quiz__result.is-bad { background: var(--sk-danger-soft); color: var(--sk-danger); }

/* ---------- فرم درخواست ---------- */
.sv-steps { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 0 14px; padding-bottom: 2px; }
.sv-steps::-webkit-scrollbar { display: none; }
.sv-steps a { flex-shrink: 0; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--sk-line); background: var(--sk-surface); color: var(--sk-ink); text-decoration: none; font-size: var(--fs-xs); font-weight: 700; }
.sv-steps a:hover { border-color: var(--sk-primary-soft-border); color: var(--sk-primary); }
.sv-page [id^="sv-"] { scroll-margin-top: calc(var(--sk-appbar-h, 64px) + 16px); }
.sv-rows { display: flex; flex-direction: column; gap: 10px; }
.sv-rows__list { display: flex; flex-direction: column; gap: 10px; }
.sv-row { padding: 12px; border: 1px dashed var(--sk-primary-soft-border); border-radius: 14px; background: var(--sk-ground); }
.sv-row__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: var(--fs-sm); }
.sv-row__remove { border: none; background: none; color: var(--sk-danger); font-family: inherit; font-size: var(--fs-xs); font-weight: 700; cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.sv-row__remove:hover { background: var(--sk-danger-soft); }
.sv-row__remove[disabled] { visibility: hidden; }
.sv-rows__add { align-self: flex-start; }
.sv-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -6px; }
.sv-presets .br-chip { cursor: pointer; font-family: inherit; }
.sv-docs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sv-docs > * { min-width: 0; }
.sv-safe { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 12px; padding: 12px 14px; border-radius: 14px; background: var(--sk-primary-soft); color: var(--sk-primary); font-size: var(--fs-xs); line-height: 1.9; }
.sv-safe .sk-ico { font-size: 20px; flex-shrink: 0; }
.sv-safe p { margin: 0; }
.sv-hsinfo { display: block; margin-top: 4px; font-size: 12px; color: var(--sk-muted); }
.sv-hsinfo b { color: var(--sk-ink); }
.sv-hsinfo.is-warn { color: var(--sk-danger); font-weight: 700; }
.sv-search { margin-bottom: 6px; }

/* ---------- درخواست‌های من و پیگیری ---------- */
.sv-reqlist { display: flex; flex-direction: column; border: 1px solid var(--sk-line); border-radius: 18px; background: var(--sk-surface); overflow: hidden; margin-top: 12px; }
.sv-req { display: flex; align-items: center; gap: 12px; padding: 14px; color: inherit; text-decoration: none; }
.sv-req + .sv-req { border-top: 1px solid var(--sk-line); }
.sv-req:hover { background: var(--sk-ground); color: inherit; }
.sv-req__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sv-req__body b { font-size: var(--fs-sm); font-weight: 800; }
.sv-req__body small { font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-status { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.sv-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sv-status--wait { background: var(--sk-ground); color: var(--sk-ink); }
.sv-status--info { background: var(--sk-primary-soft); color: var(--sk-primary); }
.sv-status--warn { background: var(--sk-accent-soft); color: var(--sk-accent-text); }
.sv-status--ok { background: var(--sk-success-soft); color: var(--sk-success); }
.sv-status--muted { background: var(--sk-ground); color: var(--sk-muted); }
.sv-action { border-color: var(--sk-accent); box-shadow: 0 0 0 3px var(--sk-accent-soft); }
.sv-quote { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin-bottom: 12px; }
.sv-quote td { padding: 8px 0; border-bottom: 1px solid var(--sk-line); }
.sv-quote td:last-child { text-align: left; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sv-quote__minus td { color: var(--sk-success); }
.sv-quote__total td { border-bottom: none; font-weight: 800; font-size: var(--fs-md); padding-top: 12px; }
.sv-tl-body { display: block; color: var(--sk-muted); font-size: var(--fs-xs); }
.sv-thread { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.sv-msg { max-width: 85%; align-self: flex-start; padding: 10px 12px; border-radius: 14px 14px 14px 4px; background: var(--sk-primary-soft); }
.sv-msg--staff { align-self: flex-end; background: var(--sk-ground); border: 1px solid var(--sk-line); border-radius: 14px 14px 4px 14px; }
.sv-msg b { font-size: var(--fs-xs); }
.sv-msg p { margin: 2px 0; font-size: var(--fs-sm); line-height: 1.9; }
.sv-msg small { font-size: 11px; color: var(--sk-muted); }
.sv-msgform { display: flex; gap: 8px; align-items: flex-end; }
.sv-msgform textarea { flex: 1; min-width: 0; min-height: 48px; padding: 10px 12px; border: 1px solid var(--sk-line); border-radius: 12px; font-family: inherit; font-size: 16px; background: var(--sk-surface); color: var(--sk-ink); resize: vertical; }
.sv-files { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sv-files li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 10px; border-radius: 12px; background: var(--sk-ground); font-size: var(--fs-sm); }
.sv-files a { display: inline-flex; align-items: center; gap: 6px; color: var(--sk-primary); font-weight: 700; text-decoration: none; flex: 1; min-width: 0; }
.sv-files a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-docstate { font-size: 0.75rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.sv-docstate--pending { background: var(--sk-surface); color: var(--sk-muted); }
.sv-docstate--accepted { background: var(--sk-success-soft); color: var(--sk-success); }
.sv-docstate--rejected { background: var(--sk-danger-soft); color: var(--sk-danger); }
.sv-upload { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--sk-line); }
.sv-tablewrap { overflow-x: auto; border: 1px solid var(--sk-line); border-radius: 12px; }
.sv-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: var(--fs-xs); }
.sv-table th, .sv-table td { padding: 8px 10px; border-bottom: 1px solid var(--sk-line); text-align: right; }
.sv-table th { background: var(--sk-ground); color: var(--sk-muted); white-space: nowrap; }
.sv-table tr:last-child td { border-bottom: none; }
.sv-side__dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; margin: 0 0 10px; font-size: var(--fs-sm); }
.sv-side__dl dt { color: var(--sk-muted); }
.sv-side__dl dd { margin: 0; font-weight: 700; }
.sv-paid { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; color: var(--sk-success); font-size: var(--fs-sm); font-weight: 700; }

/* =========================================================================
   موبایل (طرح اپ)
   ========================================================================= */
@media (max-width: 900px) {
    .sv-detail { grid-template-columns: 1fr; }
    .sv-detail__side { position: static; }
    .sv-how__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .sv-grid { grid-template-columns: 1fr; gap: 0; border: 1px solid var(--sk-line); border-radius: 18px; overflow: hidden; background: var(--sk-surface); }
    .sv-card { border: none; border-radius: 0; padding: 14px; }
    .sv-card + .sv-card { border-top: 1px solid var(--sk-line); }
    .sv-card:hover { box-shadow: none; }
    .sv-hero__icon { width: 52px; height: 52px; }
    .sv-hero h1 { font-size: 1.25rem; }
    .sv-page--detail { padding-bottom: 100px; }
    .sv-page--detail .sv-price .br-btn--primary { display: none; }      /* در موبایل نوار پایین چسبان */
    .sv-mbar { display: flex; }
    .sv-docs { grid-template-columns: 1fr; }
    .sv-strip__price { display: none; }
    .sv-msg { max-width: 92%; }
    .sv-quiz__list li { flex-direction: column; align-items: flex-start; gap: 6px; }   /* پاسخ‌ها همیشه زیر پرسش، یک‌دست */
    .sv-req { padding: 12px; }
}
@media (max-width: 420px) {
    .sv-how__steps { grid-template-columns: 1fr; }
}