/* ==========================================================================
   Canin — vendor terms of cooperation (vendor-terms.php)

   Scoped under .vt, per the project rule: style.css is never edited, and a
   page-specific file is loaded through the $page_styles hook.

   This is a long legal document, so the priorities are different from a form:
   a comfortable measure (the shell is capped well below the site container),
   generous line-height, and clause numbers that stay visually distinct from
   the sentence they open. Mobile-first; the wider rules arrive at 760px.
   Palette intentionally matches vendor-register.css — a vendor moves between
   the two pages mid-signup and should not feel a change of site.
   ========================================================================== */

.vt {
    --vt-ink: #0b2545;
    --vt-body: #33506f;
    --vt-line: #e3edfb;
    --vt-muted: #64809f;
    --vt-ok: #0d9f6e;
    --vt-ok-bg: #e9faf3;
    --vt-info-bg: #eff6ff;
    padding: 18px 0 46px;
    background: linear-gradient(180deg, #f2f8ff, var(--bg) 60%);
}

/* The measure. 780px keeps a Persian paragraph near 70–80 characters, which is
   where long-form reading stays comfortable. */
.vt-shell { width: 100%; max-width: 780px; margin-inline: auto; padding-inline: 14px; }

/* ------------------------------------------------------------------- head */
.vt-head { text-align: center; margin-bottom: 20px; }
.vt-eyebrow {
    display: inline-block;
    padding: 5px 13px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--vt-line);
    color: var(--primary-strong);
    font-size: 11.5px;
    font-weight: 800;
}
.vt-head h1 {
    margin: 12px 0 12px;
    font-size: 21px;
    font-weight: 900;
    line-height: 1.6;
    color: var(--vt-ink);
}
.vt-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.vt-ver {
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 11.5px;
    font-weight: 800;
}
.vt-date {
    padding: 4px 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--vt-line);
    color: var(--vt-muted);
    font-size: 11.5px;
    font-weight: 700;
}

/* ---------------------------------------------------------------- summary */
/* The five-line digest. Deliberately the loudest block on the page: most
   vendors read this and skim the rest. */
.vt-summary {
    margin-bottom: 16px;
    padding: 16px 16px 18px;
    border-radius: 16px;
    background: var(--vt-ok-bg);
    border: 1px solid #b6ebd4;
}
.vt-summary h2 {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 900;
    color: #067a52;
}
.vt-summary-lead { margin: 0 0 10px; font-size: 12px; color: #0d7a58; opacity: .85; }
.vt-summary ol { margin: 0; padding-inline-start: 20px; }
.vt-summary li {
    margin-bottom: 9px;
    font-size: 12.5px;
    line-height: 2;
    color: #14563f;
}
.vt-summary li:last-child { margin-bottom: 0; }
.vt-summary b { color: #06412e; font-weight: 800; }

/* -------------------------------------------------------------------- toc */
.vt-toc {
    margin-bottom: 18px;
    padding: 15px 16px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--vt-line);
    box-shadow: 0 10px 26px rgba(16, 60, 120, .05);
}
.vt-toc h2 {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 900;
    color: var(--vt-ink);
}
.vt-toc ol {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    margin: 0;
    padding-inline-start: 20px;
}
.vt-toc li { font-size: 12.5px; line-height: 1.95; color: var(--vt-muted); }
.vt-toc a {
    color: var(--vt-body);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .16s ease, border-color .16s ease;
}
.vt-toc a:hover { color: var(--primary-strong); border-bottom-color: currentColor; }

/* ------------------------------------------------------------------- body */
.vt-body {
    padding: 18px 16px 20px;
    background: #fff;
    border: 1px solid var(--vt-line);
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(16, 60, 120, .07);
}

.vt-sec { padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px dashed var(--vt-line); }
.vt-sec:last-of-type { padding-bottom: 4px; margin-bottom: 0; border-bottom: 0; }

/* scroll-margin so a jump from the table of contents does not park the heading
   underneath the site's sticky header */
.vt-sec { scroll-margin-top: 90px; }

.vt-sec h2 {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 9px;
    margin: 0 0 12px;
    font-size: 15.5px;
    font-weight: 900;
    line-height: 1.7;
    color: var(--vt-ink);
}
.vt-num {
    flex: none;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--vt-info-bg);
    border: 1px solid #cfe3fd;
    color: var(--primary-strong);
    font-size: 11px;
    font-weight: 800;
}

.vt-sec p {
    margin: 0 0 11px;
    font-size: 13px;
    line-height: 2.15;
    color: var(--vt-body);
}
.vt-sec p:last-child { margin-bottom: 0; }
.vt-sec b { color: var(--vt-ink); font-weight: 800; }

/* the clause number that opens a paragraph — kept visually apart from the
   sentence so the document can be scanned by number */
.vt-cl {
    color: var(--primary-strong) !important;
    font-weight: 900;
    margin-inline-end: 3px;
}

.vt-lead {
    padding: 9px 13px;
    border-radius: 11px;
    background: var(--vt-info-bg);
    border: 1px solid #cfe3fd;
    color: #1d4ed8 !important;
    font-weight: 700;
}

.vt-sec ul {
    margin: 0 0 13px;
    padding-inline-start: 20px;
}
.vt-sec ul li {
    margin-bottom: 7px;
    font-size: 12.5px;
    line-height: 2.05;
    color: var(--vt-body);
}
.vt-sec ul li:last-child { margin-bottom: 0; }
.vt-sec ul li::marker { color: var(--primary); }

/* ------------------------------------------------------------ definitions */
.vt-defs { margin: 0; }
.vt-defs dt {
    margin-top: 12px;
    font-size: 13px;
    font-weight: 900;
    color: var(--vt-ink);
}
.vt-defs dt:first-of-type { margin-top: 0; }
.vt-defs dd {
    margin: 4px 0 0;
    padding-inline-start: 12px;
    border-inline-start: 2px solid var(--vt-line);
    font-size: 12.5px;
    line-height: 2.05;
    color: var(--vt-body);
}

/* ------------------------------------------------------------------ table */
/* Wide content scrolls inside its own box; the page itself never scrolls
   sideways on a phone. */
.vt-tablewrap {
    margin: 0 0 13px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--vt-line);
    border-radius: 12px;
}
.vt-table {
    width: 100%;
    min-width: 380px;
    border-collapse: collapse;
    font-size: 12.5px;
}
.vt-table th,
.vt-table td {
    padding: 10px 12px;
    text-align: start;
    vertical-align: top;
    line-height: 1.95;
    border-bottom: 1px solid var(--vt-line);
}
.vt-table thead th {
    background: #f6fafe;
    color: var(--vt-ink);
    font-size: 12px;
    font-weight: 900;
}
.vt-table tbody td { color: var(--vt-body); }
.vt-table tbody tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------------------- code */
.vt code {
    padding: 1px 7px;
    border-radius: 6px;
    background: var(--surface-2);
    border: 1px solid var(--vt-line);
    color: var(--vt-ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px;
}
.vt .ltr { direction: ltr; display: inline-block; unicode-bidi: isolate; }

/* ------------------------------------------------------------- acceptance */
.vt-accept {
    margin-top: 22px;
    padding: 16px;
    border-radius: 14px;
    background: var(--surface-2);
    border: 1px solid var(--vt-line);
    text-align: center;
}
.vt-accept h2 { margin: 0 0 8px; font-size: 14px; font-weight: 900; color: var(--vt-ink); }
.vt-accept p { margin: 0; font-size: 12.5px; line-height: 2.05; color: var(--vt-body); }
.vt-stamp {
    margin-top: 12px !important;
    padding-top: 11px;
    border-top: 1px dashed var(--vt-line);
    font-weight: 900;
    color: var(--vt-ink) !important;
}

/* -------------------------------------------------------------------- cta */
.vt-cta { margin-top: 20px; text-align: center; }
.vt-cta p { margin: 0 0 11px; font-size: 12.5px; color: var(--vt-muted); }
.vt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 30px;
    border-radius: 12px;
    background: var(--primary);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: background .18s ease, transform .18s ease;
}
.vt-btn:hover { background: var(--primary-strong); color: #fff; }
.vt-btn:active { transform: translateY(1px); }

/* ============================================================== 760px up */
@media (min-width: 760px) {
    .vt { padding: 30px 0 60px; }
    .vt-shell { padding-inline: 20px; }
    .vt-head h1 { font-size: 27px; }
    .vt-summary { padding: 20px 22px 22px; border-radius: 18px; }
    .vt-summary h2 { font-size: 16.5px; }
    .vt-summary li { font-size: 13.5px; }
    .vt-toc { padding: 18px 22px; }
    .vt-toc ol { grid-template-columns: 1fr 1fr; gap: 3px 24px; }
    .vt-body { padding: 30px 32px 32px; border-radius: 20px; }
    .vt-sec { padding-bottom: 26px; margin-bottom: 26px; }
    .vt-sec h2 { font-size: 17px; }
    .vt-sec p { font-size: 13.5px; }
    .vt-sec ul li,
    .vt-defs dd { font-size: 13.5px; }
    .vt-defs dt { font-size: 14px; }
    .vt-accept { padding: 22px; }
}

/* -------------------------------------------------------------- printing */
/* A vendor may well want this on paper before signing up. */
@media print {
    .vt { background: none; padding: 0; }
    .vt-shell { max-width: none; padding: 0; }
    .vt-body { box-shadow: none; border: 0; padding: 0; }
    .vt-toc, .vt-cta { display: none; }
    .vt-sec { break-inside: auto; }
    .vt-sec h2 { break-after: avoid; }
}

/* ---- افزوده برای terms.php و privacy.php (۱۴۰۵/۰۷/۱۹): کادر توصیه‌ها، جمله‌ی
   بالای صفحه و لینک‌های پایین. صفحه‌ی قوانین فروشندگان از این‌ها استفاده نمی‌کند. */
.vt-tips {
    margin-bottom: 16px;
    padding: 16px 16px 18px;
    border-radius: 16px;
    background: var(--vt-info-bg);
    border: 1px solid #cfe3fd;
}
.vt-tips h2 { margin: 0 0 8px; font-size: 15px; font-weight: 900; color: #1d4ed8; }
.vt-tips ul { margin: 0; padding-inline-start: 20px; }
.vt-tips li { margin-bottom: 6px; font-size: 12.5px; line-height: 2; color: #1e3a6b; }
.vt-tips li:last-child { margin-bottom: 0; }
.vt-lead-top { margin: 0 0 16px; font-size: 13px; line-height: 2; }
.vt-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 14px 0 0; font-size: 12.5px; }
.vt-links a { color: var(--primary-strong); font-weight: 700; text-decoration: none; }
.vt-links a:hover { text-decoration: underline; }
@media (min-width: 901px) {
    .vt-tips { padding: 20px 24px 22px; }
    .vt-tips h2 { font-size: 16.5px; }
    .vt-tips li { font-size: 13.5px; }
    .vt-lead-top { font-size: 14px; }
    .vt-links { font-size: 13.5px; }
}