/* Zaezzd — мастер договора купли-продажи (T6), страница /dkp/.
   Локальные стили: всё, чего нет в main.css. Mobile-first, брейкпоинты 768 и 1200.
   Печать — §14 «Print» дизайн-системы: A4, поля 15 мм, кегль 11 pt,
   три экземпляра, каждый на своём листе. */

/* Мастер прячет и показывает блоки атрибутом hidden — он должен побеждать flex/grid */
[hidden] { display: none !important; }

/* ─── Внутренняя шапка ───────────────────────────────────────────
   До 768 в строке шапки живут «назад» и крошка, логотип уступает им место. */
@media (max-width: 767px) {
  .hdr .logo { display: none; }
}
.hdr__msearch { padding: 0 0 10px; }
@media (min-width: 768px) { .hdr__msearch { display: none; } }

/* ─── Вводная ────────────────────────────────────────────────────── */
.dkp-intro { display: flex; flex-direction: column; gap: 10px; }

/* ─── Каркас мастера ─────────────────────────────────────────────── */
.dkp {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.dkp-bar {
  display: flex; flex-direction: column; gap: 9px;
  padding: 13px 14px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  border-radius: var(--r-card) var(--r-card) 0 0;
}
@media (min-width: 768px) { .dkp-bar { padding: 16px 20px; } }

.dkp-tabs {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 6px; flex-wrap: wrap;
}
.dkp-tabs li {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; line-height: 1.3; color: var(--ink-4);
}
.dkp-tabs li + li::before {
  content: ''; width: 1px; height: 12px; background: var(--line); margin-right: 6px;
}
.dkp-tabs b {
  width: 18px; height: 18px; flex: 0 0 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--line); color: var(--ink-3);
  font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.dkp-tabs li.is-on { color: var(--ink); font-weight: 600; }
.dkp-tabs li.is-on b { background: var(--acc); color: #fff; }
.dkp-tabs li.is-done { color: var(--ink-2); }
.dkp-tabs li.is-done b { background: var(--ok); color: #fff; }

/* ─── Шаги ───────────────────────────────────────────────────────── */
.dkp-body { padding: 16px 14px; display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 768px) { .dkp-body { padding: 22px 20px; } }

.dkp-step { display: flex; flex-direction: column; gap: 14px; }
.dkp-step__h { font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
@media (min-width: 768px) { .dkp-step__h { font-size: 24px; } }

.dkp-group { display: flex; flex-direction: column; gap: 11px; }
.dkp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.dkp-req { color: var(--acc); }

.dkp-input--vin { letter-spacing: .04em; font-variant-numeric: tabular-nums; text-transform: uppercase; }
.dkp-input--price {
  min-height: 54px; padding: 12px 13px;
  border-width: 1.5px; border-color: var(--ink);
  font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.dkp-input--price:focus { border-color: var(--acc); }

/* Поля покупателя: жёлтая линия и подпись — продавец готовит договор заранее */
.dkp-buyer {
  display: flex; flex-direction: column; gap: 11px;
  padding: 13px;
  background: #FFFDF5;
  border-left: 4px solid var(--yellow);
  border-radius: 0 var(--r-card) var(--r-card) 0;
}
.dkp-buyer__lab { color: var(--warn-ink); margin-bottom: 3px; }
.dkp-buyer__note { font-size: 12.5px; line-height: 1.4; color: #7C6A3F; }
.dkp-buyer .input { border-color: #E8DCC0; }
.dkp-buyer .input:focus { border-color: var(--warn); }
.dkp-buyer .input[aria-invalid="true"] { border-color: var(--err); }
.dkp-buyer__switch-t { font-size: 13.5px; font-weight: 600; color: var(--ink-2); line-height: 1.35; }

/* Сумма прописью — обязательное поле бланка */
.dkp-words {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-ctl); padding: 11px 12px;
}
.dkp-words__v { font-size: 14px; line-height: 1.4; font-weight: 500; margin-top: 4px; }

/* ─── Подпись автосохранения и служебные кнопки ──────────────────── */
.dkp-saved { padding: 0 14px 2px; text-align: center; }
.dkp-tools {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap; padding: 8px 8px 10px;
}
.dkp-tools__clear { color: var(--err); }
.dkp-tools__clear:hover { color: #A11F17; }

/* Кнопки шага: липнут к низу экрана, как в прототипе */
.dkp-nav {
  position: sticky; bottom: 0; z-index: 25;
  display: flex; gap: 9px;
  padding: 11px 14px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--r-card) var(--r-card);
}
.dkp-nav__back { flex: 0 0 auto; }
.dkp-nav__next { flex: 1 1 auto; }

/* ─── Экран готового документа ───────────────────────────────────── */
.dkp-result { display: flex; flex-direction: column; gap: 12px; }
.dkp-done { display: flex; align-items: center; gap: 9px; }
.dkp-done__ico {
  width: 26px; height: 26px; flex: 0 0 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--ok);
}
.dkp-done__h { font-size: 20px; font-weight: 700; line-height: 1.2; }
@media (min-width: 768px) { .dkp-done__h { font-size: 26px; } }

.dkp-actions { display: grid; gap: 8px; }
@media (min-width: 560px) { .dkp-actions { grid-template-columns: repeat(3, 1fr); } }

.dkp-remind { display: flex; flex-direction: column; gap: 10px; }
.dkp-remind__d { color: var(--ink-2); }

/* ─── Лист A4 ────────────────────────────────────────────────────── */
.dkp-docs { display: flex; flex-direction: column; gap: 16px; }
.dkp-doc {
  width: 100%; max-width: 210mm; margin: 0 auto;
  padding: 16px 14px;
  background: #fff; color: #1C1F26;
  border: 1px solid #D7D6D1; border-radius: 6px;
  box-shadow: var(--sh-md);
  font-size: 12px; line-height: 1.55;
}
@media (min-width: 768px) { .dkp-doc { padding: 15mm; font-size: 13.5px; line-height: 1.6; } }
/* На экране показываем один экземпляр, остальные два — только на печати */
.dkp-doc--extra { display: none; }

.dkp-doc__copy {
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-4); text-align: right; margin-bottom: 8px;
}
.dkp-doc__copy b { color: var(--ink-2); }
.dkp-doc__title {
  font-size: 13px; font-weight: 700; line-height: 1.35;
  text-align: center; text-transform: uppercase; letter-spacing: .02em;
  margin-bottom: 12px;
}
@media (min-width: 768px) { .dkp-doc__title { font-size: 15px; } }
.dkp-doc__meta {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 11.5px; color: var(--ink-2); margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}
.dkp-doc__h { font-size: 12px; font-weight: 700; margin: 12px 0 5px; }
@media (min-width: 768px) { .dkp-doc__h { font-size: 13.5px; } }
.dkp-doc__p { margin-bottom: 6px; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.dkp-val--vin { letter-spacing: .04em; font-variant-numeric: tabular-nums; }
/* Пустое место в бланке — линия под запись от руки */
.dkp-val.is-blank {
  display: inline-block; min-width: 130px;
  border-bottom: 1px solid #14161B;
}
.dkp-val.is-blank::after { content: '\00A0'; }

.dkp-sign {
  display: flex; gap: 16px;
  border-top: 1px solid var(--line);
  margin-top: 14px; padding-top: 12px;
}
.dkp-sign__col { flex: 1 1 0; min-width: 0; }
.dkp-sign__role { font-size: 11px; font-weight: 700; margin-bottom: 4px; }
.dkp-sign__name { font-size: 11.5px; color: var(--ink-2); min-height: 18px; margin-bottom: 20px; }
.dkp-sign__line { border-bottom: 1px solid #14161B; height: 0; }
.dkp-sign__note { font-size: 10px; line-height: 1.35; color: var(--ink-3); margin-top: 4px; }

/* ─── Статический текст ──────────────────────────────────────────── */
.dkp-static { display: flex; flex-direction: column; gap: 10px; }
.dkp-static .card { display: flex; flex-direction: column; gap: 8px; }
.dkp-static__p { margin: 0; }
.dkp-list { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.dkp-list li + li { margin-top: 7px; }
.dkp-list b { color: var(--ink); }
.dkp-next { display: flex; flex-direction: column; gap: 8px; }
.dkp-next .row-link span { color: var(--ink-3); }

/* ─── Десктоп: колонка документа, а не растянутый бланк ──────────── */
@media (min-width: 768px) {
  .dkp-intro, .dkp, .dkp-result, .dkp-static, noscript > .alert {
    width: 100%; max-width: 820px; margin-left: auto; margin-right: auto;
  }
  .dkp-actions { grid-template-columns: auto auto auto; justify-content: start; }
}

/* ─── Печать: только договор, три экземпляра по листу ────────────── */
@media print {
  @page { size: A4; margin: 15mm; }

  html, body { background: #fff; }
  body { font-size: 11pt; }
  main { padding: 0 !important; }
  .wrap { max-width: none; padding: 0 !important; }
  .stack { gap: 0 !important; }
  noscript { display: none !important; }

  /* Интерфейс мастера в печать не идёт — он помечен .no-print (main.css) */
  .dkp-result { display: block !important; gap: 0; }
  .dkp-docs { display: block !important; gap: 0; }

  .dkp-doc {
    display: block !important;
    width: auto; max-width: none; margin: 0; padding: 0;
    border: 0; border-radius: 0; box-shadow: none;
    background: #fff; color: #000;
    font-size: 11pt; line-height: 1.5;
    break-inside: auto; page-break-inside: auto;
    break-after: page; page-break-after: always;
  }
  .dkp-doc:last-child { break-after: auto; page-break-after: auto; }

  .dkp-doc__copy { font-size: 8pt; color: #444; margin-bottom: 6pt; }
  .dkp-doc__title { font-size: 12pt; margin-bottom: 10pt; }
  .dkp-doc__meta { font-size: 10pt; color: #000; margin-bottom: 10pt; }
  .dkp-doc__h { font-size: 11pt; margin: 9pt 0 3pt; break-after: avoid; page-break-after: avoid; }
  .dkp-doc__p { margin-bottom: 4pt; }
  .dkp-sign { break-inside: avoid; page-break-inside: avoid; margin-top: 14pt; padding-top: 9pt; border-top: 1px solid #000; }
  .dkp-sign__role { font-size: 10pt; }
  .dkp-sign__name { font-size: 10pt; color: #000; margin-bottom: 26pt; }
  .dkp-sign__note { font-size: 8.5pt; color: #444; }
  .dkp-val.is-blank { min-width: 42mm; border-bottom-color: #000; }
}