/* Договор купли-продажи авто (PLAN_DKP.md): анкета по шагам, лист A4 с договором, печать.
   Цвета и кнопки — из site.css. Лист договора — в миллиметрах и пунктах, как на бумаге; на экране его уменьшает js/dkp.js */

.dkp-cta { display: grid; gap: 8px; margin-top: 16px; }

.dkp { position: relative; margin-top: 24px; }
/* minmax(0, 1fr): иначе колонку на телефоне растягивает лента шагов, и страница уезжает вбок */
.dkp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.dkp-col-form, .dkp-col-doc { min-width: 0; }

/* Телефон: «Анкета» или «Договор». Скрытая колонка не display:none, а за краем экрана — чтобы скрипт мог измерить лист */
.dkp-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 14px; padding: 4px; border-radius: 14px; background: var(--tile); }
.dkp-switch button { height: 40px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: 700 15px var(--font); cursor: pointer; }
.dkp-switch [aria-selected="true"] { background: #fff; box-shadow: 0 1px 4px rgba(17, 40, 75, .12); }
.dkp[data-view="form"] .dkp-col-doc, .dkp[data-view="doc"] .dkp-col-form { position: absolute; left: -10000px; top: 0; width: 100%; visibility: hidden; }

/* Шаги */
.dkp-steps { display: flex; gap: 6px; margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
.dkp-steps::-webkit-scrollbar { display: none; }
.dkp-steps button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px 0 6px; border: 0; border-radius: 20px;
    background: var(--tile); color: var(--ink); font: 700 13.5px var(--font); cursor: pointer; }
.dkp-steps button:hover { background: var(--tile-2); }
.dkp-steps i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; font-style: normal; font-size: 12.5px; }
.dkp-steps .is-done i { background: var(--ok); color: #fff; font-size: 0; }
.dkp-steps .is-done i::before { content: "✓"; font-size: 13px; }
.dkp-steps [aria-current="step"] { background: var(--ink); color: #fff; }
.dkp-steps [aria-current="step"] i { color: var(--ink); }
.dkp-steps [aria-current="step"].is-done i { color: #fff; }

/* Анкета */
.dkp-form fieldset { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.dkp-form fieldset[hidden] { display: none; }
.dkp-form legend { margin-bottom: 4px; padding: 0; font-weight: 700; font-size: 20px; }
.dkp-f { display: grid; gap: 4px; min-width: 0; font-size: 13px; color: var(--mute); }
.dkp-f em { font-style: normal; }
.dkp-f input, .dkp-f textarea { width: 100%; padding: 12px 14px; border: 0; border-radius: 12px; background: var(--tile); font: 16px var(--font); color: var(--ink); resize: vertical; }
.dkp-f input:focus, .dkp-f textarea:focus { outline: none; background: #fff; box-shadow: 0 0 0 2px var(--blue) inset; }
.dkp-f input::placeholder, .dkp-f textarea::placeholder { color: #b0b3ba; }
.dkp-f small { font-size: 12px; color: var(--mute); }
.dkp-f [hidden] { display: none; }
.dkp-warn { color: #a35a00 !important; }
.dkp-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.dkp-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.dkp-quick .chip { height: 30px; padding: 0 12px; font-size: 13px; font-weight: 400; }
.dkp-tip { padding: 10px 12px; border-radius: 12px; background: var(--soft); font-size: 13px; color: var(--text); }
.dkp-sub-t { margin-top: 6px; font-weight: 700; font-size: 15px; }
.dkp-note-s { display: block; margin-top: 8px; font-size: 12px; color: var(--mute); }
.dkp-radio { display: flex; flex-wrap: wrap; gap: 8px; }
.dkp-radio label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 12px; background: var(--tile); font-size: 15px; cursor: pointer; }
.dkp-radio label:has(input:checked) { background: var(--ink); color: #fff; }
.dkp-radio input { width: 16px; height: 16px; margin: 0; accent-color: var(--red); }
.dkp-check { display: grid; grid-template-columns: 22px 1fr; align-items: start; gap: 8px; font-size: 14px; color: var(--text); cursor: pointer; }
.dkp-check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--red); }
.dkp-swap { justify-self: start; }
.dkp-nav { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; margin-top: 20px; }
.dkp-nav [hidden] { display: none; }
.dkp-nav .is-off { visibility: hidden; }

/* Сохранение в браузере */
.dkp-restored { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-bottom: 14px; padding: 10px 14px; border-radius: 12px; background: var(--soft); font-size: 13px; }
.dkp-restored[hidden] { display: none; }
.dkp-save { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; }
.dkp-save-st { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; color: var(--text); }
.dkp-save-st::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.dkp-save-st.is-off::before { background: var(--mute); }
.dkp-check-s { font-size: 13px; }

/* Колонка с листом договора */
.dkp-doc-head { display: grid; gap: 10px; margin-bottom: 10px; }
.dkp-doc-head p { font-size: 15px; }
.dkp-doc-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dkp-doc-note { margin-top: 10px; font-size: 12px; color: var(--mute); }
.dkp-fit { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: #fde8eb; font-size: 13px; color: var(--red-dk); }
.dkp-fit[hidden] { display: none; }
.dkp-pulse { animation: dkp-pulse 1.4s ease-out 1; }
@keyframes dkp-pulse { 0% { box-shadow: 0 0 0 0 rgba(214, 16, 43, .55); } 100% { box-shadow: 0 0 0 16px rgba(214, 16, 43, 0); } }

.dkp-viewport { padding: 10px; border-radius: 16px; background: var(--tile-2); overflow: hidden; }
.dkp-scale { position: relative; overflow: hidden; }
.dkp-pages { width: 210mm; transform-origin: 0 0; }

/* Лист: как на бумаге. Размер шрифта подбирает скрипт (10,5 pt и меньше), чтобы договор встал на один лист */
.dkp-page { position: relative; display: flex; flex-direction: column; width: 210mm; height: 297mm; padding: 14mm 14mm 18mm 20mm; background: #fff; color: #000;
    font: 10.5pt/1.28 "Times New Roman", "Liberation Serif", "PT Serif", Times, serif; box-shadow: 0 1px 6px rgba(17, 40, 75, .18); }
.dkp-page + .dkp-page { margin-top: 8mm; }
.dkp-page[hidden] { display: none; }
.dkp-body { flex: 1; min-height: 0; overflow: hidden; }
.dkp-over { height: auto; min-height: 297mm; }
.dkp-over .dkp-body { overflow: visible; }
.dkp-body p { margin: 0 0 1.3mm; text-align: justify; hyphens: auto; }
.dkp-body .dkp-h { margin-bottom: 2.5mm; text-align: center; font-weight: 700; font-size: 1.08em; }
.dkp-body .dkp-c { text-align: center; }
.dkp-body .dkp-sub { display: flex; margin-bottom: 3mm; }
.dkp-tab { flex: 1; }
.dkp-body .dkp-s { margin-top: 2.4mm; text-align: left; font-weight: 700; }
.dkp-t { width: 100%; margin: 1mm 0 2mm; border-collapse: collapse; font-size: .93em; line-height: 1.2; }
.dkp-t td { padding: .8mm 1.4mm; border: .6pt solid #000; vertical-align: top; }
.dkp-t td:nth-child(odd) { width: 23%; }
.dkp-t td:nth-child(even) { width: 27%; }
.dkp-t td { height: 6.7mm; }
.dkp-body .dkp-l, .dkp-body .dkp-conf { text-align: left; }
.dkp-body .dkp-conf { margin-top: 1.6mm; }
.dkp-sign { width: 100%; margin-top: 2mm; border-collapse: collapse; }
.dkp-sign td { width: 50%; padding: 1.4mm 5mm 1.4mm 0; vertical-align: top; }
.dkp-foot { position: absolute; left: 20mm; right: 14mm; bottom: 8mm; display: flex; gap: 4mm; padding-top: 1.5mm; border-top: .5pt solid #bbb;
    font: 7.5pt/1.25 Arial, sans-serif; color: #666; }
.dkp-foot span:first-child { flex: 1; }
.dkp-foot span:last-child { white-space: nowrap; }

/* Поля на экране: заполненное — жёлтым, пустое — серой линией, поле под курсором — ярче */
.dkp-viewport .is-set { background: #fff1a8; border-radius: 2px; }
.dkp-viewport .is-blank { color: #9a9ca3; }
.dkp-viewport .is-focus { background: #ffd23f; box-shadow: 0 0 0 1.5pt #ffd23f; }

/* Копия листов для печати: на экране за краем, на бумаге — только она */
#dkp-print { position: fixed; left: -10000px; top: 0; visibility: hidden; }

/* Претензия дилеру по гарантии (tools/pretenzija_dileru_po_garantii.html, js/pretenzija.js): анкета без шагов — все разделы сразу,
   лист растёт по тексту и при печати переходит на следующую страницу */
.pz-form fieldset + fieldset { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.pz-page { height: auto; min-height: 297mm; }
.pz-page .dkp-body { overflow: visible; }
.dkp-body .pz-r { margin-left: 46%; text-align: left; }
.dkp-body .pz-gap { margin-top: 2mm; }
.dkp-body .pz-title { margin-top: 7mm; margin-bottom: .5mm; letter-spacing: .06em; }
.dkp-body .dkp-c { margin-bottom: 4mm; }
.pz-list { margin: 0 0 1.6mm; }
.dkp-body .pz-list p { margin: 0 0 .8mm; padding-left: 6mm; text-indent: -5mm; text-align: left; }
.pz-sign { margin-top: 6mm; }
.dkp-body .pz-recv { margin-top: 10mm; padding-top: 2mm; border-top: .5pt dashed #000; font-size: .9em; text-align: left; line-height: 1.6; }

.dkp-cta-btns { display: grid; gap: 8px; }
.dkp-disclaimer { margin-top: 1.6em !important; font-size: 13px; color: var(--mute); }

@media (min-width: 760px) {
    .dkp-cta { display: flex; flex-wrap: wrap; }
    .dkp-cta .big { padding: 0 22px; }
    .dkp-doc-head { grid-template-columns: auto 1fr; align-items: center; }
    .dkp-doc-btns { justify-self: end; grid-template-columns: auto auto; }
}
@media (min-width: 1040px) {
    .dkp-switch { display: none; }
    .dkp[data-view] .dkp-col-form { position: static; width: auto; visibility: visible; }
    .dkp .dkp-col-doc, .dkp[data-view] .dkp-col-doc { position: sticky; top: 72px; left: auto; width: auto; visibility: visible; }
    .dkp-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 32px; align-items: start; }
    .dkp-viewport { max-height: calc(100vh - 170px); overflow-y: auto; }
}

@media print {
    @page { size: A4; margin: 0; }
    html, body { margin: 0 !important; padding: 0 !important; background: #fff !important; }
    body > *:not(#dkp-print) { display: none !important; }
    #dkp-print { position: static; visibility: visible; }
    #dkp-print .dkp-page { height: 296mm; margin: 0; box-shadow: none; break-after: page; page-break-after: always; }
    #dkp-print .dkp-page.dkp-over { height: auto; }
    #dkp-print .dkp-page:last-child { break-after: auto; page-break-after: auto; }
    #dkp-print .dkp-pages { transform: none !important; }
    #dkp-print .dkp-foot { color: #555; }
}