/* ==========================================================================
   pzh-risk.ru — страница «Стоимость работ по пожарному риску»
   Собственные стили калькулятора. Опирается на переменные css/design.css:
   --d-ink, --d-muted, --d-line, --d-soft, --d-blue, --d-blue-2, --d-blue-3,
   --d-blue-4, --d-green, --d-amber, --d-red, --d-dark, --d-mono, --d-f.
   ========================================================================== */

.pc-page{ background:var(--d-soft); padding-bottom:56px; min-height:60vh }

/* ---------- шапка страницы ---------- */
.pc-hero{
  background:var(--d-dark); color:#e8edf2; padding:clamp(28px,4vw,48px) 0 clamp(24px,3vw,40px);
}
.pc-hero .deyebrow{ color:#9cc6f2 }
.pc-hero h1{ color:#fff; margin-top:12px }
.pc-hero__lead{ margin:16px 0 0; font-size:1.02rem; line-height:1.6; color:#c2cedb; max-width:62ch }
.pc-hero__note{
  margin:14px 0 0; font-size:.86rem; line-height:1.55; color:#9fb0c0; max-width:72ch;
  border-left:3px solid rgba(156,198,242,.5); padding-left:12px;
}

/* ---------- сетка ---------- */
.pc-layout{
  display:grid; grid-template-columns:minmax(0,1fr) 372px; gap:22px; align-items:start;
  margin-top:26px;
}

/* ---------- левая колонка ---------- */
.pc-left{ min-width:0 }

.pc-steplist{
  list-style:none; margin:0 0 18px; padding:0;
  display:flex; flex-wrap:wrap; gap:8px;
}
.pc-step{
  display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:99px;
  border:1px solid var(--d-line); background:#fff; color:var(--d-muted);
  font-size:.82rem; font-weight:600; cursor:default; white-space:nowrap;
}
.pc-step__n{
  width:20px; height:20px; border-radius:50%; background:var(--d-soft-2); color:var(--d-ink-2);
  display:inline-grid; place-items:center; font:700 11px/1 var(--d-mono); flex:none;
}
.pc-step.is-active{ border-color:var(--d-blue); color:var(--d-blue-ink); background:var(--d-blue-4) }
.pc-step.is-active .pc-step__n{ background:var(--d-blue); color:#fff }
.pc-step.is-done{ color:var(--d-green); border-color:#bcdccc; background:var(--d-green-soft, #e2f0e9) }
.pc-step.is-done .pc-step__n{ background:var(--d-green); color:#fff }

.pc-stepbody{
  background:#fff; border:1px solid var(--d-line); border-radius:var(--d-r-lg);
  padding:24px; box-shadow:var(--d-shadow-1);
}
.pc-step__title{ font-size:1.18rem; font-weight:700; letter-spacing:-.02em; margin:0 }
.pc-step__hint{ margin:8px 0 20px; color:var(--d-muted); font-size:.9rem; line-height:1.55 }

/* ---------- варианты ответа ---------- */
.pc-opts{ display:grid; gap:10px; grid-template-columns:repeat(2,minmax(0,1fr)) }
.pc-opt{ display:block; cursor:pointer; min-width:0 }
.pc-opt input{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none }
.pc-opt__box{
  display:flex; flex-direction:column; gap:4px; min-height:44px;
  padding:13px 15px; border:1.5px solid var(--d-line); border-radius:var(--d-r);
  background:var(--d-soft); transition:border-color .18s, background .18s, box-shadow .18s;
}
.pc-opt:hover .pc-opt__box{ border-color:#9cc6f2; background:var(--d-blue-4) }
.pc-opt input:checked + .pc-opt__box{
  border-color:var(--d-blue); background:var(--d-blue-4); box-shadow:0 0 0 3px rgba(42,99,160,.13);
}
.pc-opt input:focus-visible + .pc-opt__box{ box-shadow:0 0 0 4px rgba(42,99,160,.2) }
.pc-opt__t{ font-size:.92rem; font-weight:600; line-height:1.4; color:var(--d-ink); overflow-wrap:anywhere }
.pc-opt__p{ font:600 .8rem/1.3 var(--d-mono); color:var(--d-blue-ink) }

/* ---------- навигация шагов ---------- */
.pc-nav{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; align-items:center }
.pc-nav .dbtn{ height:48px; min-height:44px }
.pc-reset{ margin-left:auto }
.pc-navidx{ margin:10px 0 0; font-size:.85rem; color:var(--d-amber) }

/* ---------- форма заявки ---------- */
.pc-form{ display:flex; flex-direction:column; gap:16px }
.pc-form__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px }
.pc-check{
  display:flex; gap:10px; align-items:flex-start; font-size:.87rem; line-height:1.5; color:var(--d-ink-2);
  padding:12px 14px; background:var(--d-soft); border-radius:var(--d-r-sm); cursor:pointer;
}
.pc-check input{ width:18px; height:18px; margin:1px 0 0; flex:none; accent-color:var(--d-blue) }
.pc-check a{ color:var(--d-blue-ink); font-weight:600 }
.pc-form__err:empty{ display:none }
.pc-form__err{ font-size:.86rem; line-height:1.55; color:var(--d-red) }
.pc-form__err.is-err{ background:var(--d-red-soft, #f7e6e4); border-radius:var(--d-r-sm); padding:11px 13px }
.pc-ok{ color:var(--d-green) }
.pc-form__actions{ display:flex; flex-direction:column; gap:10px }
.pc-form__actions .dbtn{ min-height:48px }

.pc-copy{ border-top:1px solid var(--d-line); padding-top:16px; display:flex; flex-direction:column; gap:10px }
.pc-copy__h{ font-weight:700; font-size:.95rem }
.pc-copy__d{ margin:0; font-size:.85rem; color:var(--d-muted); line-height:1.5 }
.pc-copy__ta{
  width:100%; font:12.5px/1.5 var(--d-mono); color:var(--d-ink); background:var(--d-soft);
  border:1px solid var(--d-line); border-radius:var(--d-r-sm); padding:11px 12px; resize:vertical;
}
.pc-copy__note:empty{ display:none }
.pc-copy__note{ font-size:.82rem }
.pc-copy__note.is-ok{ color:var(--d-green) }
.pc-copy__note.is-warn{ color:var(--d-amber) }

/* ---------- правая колонка: лист расчёта ---------- */
.pc-right{ position:sticky; top:86px; min-width:0 }
.pc-sheet{
  background:#fff; border:1px solid var(--d-line); border-radius:var(--d-r-lg);
  padding:20px; box-shadow:var(--d-shadow-1); display:flex; flex-direction:column; gap:16px;
}
.pc-sheet__h{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap }
.pc-sheet__t{ font-weight:700; font-size:.95rem }
.pc-sheet__sec{ border-top:1px solid var(--d-line-2); padding-top:14px }
.pc-sheet__sh{ font:600 11px/1.3 var(--d-mono); letter-spacing:.09em; text-transform:uppercase; color:var(--d-muted); margin-bottom:10px }
.pc-sheet__note{ margin:0; font-size:.78rem; line-height:1.5; color:var(--d-muted) }

.pc-price{ background:var(--d-blue-4); border:1px solid var(--d-blue-3); border-radius:var(--d-r); padding:16px }
.pc-price__k{ font-size:.78rem; font-weight:600; color:var(--d-muted) }
.pc-price__v{ font-size:clamp(1.4rem,1.1rem + 1vw,1.85rem); font-weight:700; letter-spacing:-.02em; color:var(--d-ink); margin:6px 0 4px }
.pc-price__r{ font-size:.8rem; color:var(--d-blue-ink); font-family:var(--d-mono) }

.pc-prows{ display:flex; flex-direction:column; gap:8px }
.pc-prow{ display:flex; gap:12px; align-items:baseline; justify-content:space-between }
.pc-prow__k{ font-size:.8rem; color:var(--d-muted); flex:none }
.pc-prow__v{ font-size:.85rem; font-weight:600; text-align:right; min-width:0; overflow-wrap:anywhere }

.pc-works{ margin:0; padding-left:18px; display:flex; flex-direction:column; gap:6px }
.pc-works li{ font-size:.85rem; line-height:1.5; color:var(--d-ink-2) }
.pc-muted{ color:var(--d-muted); font-style:italic }

/* ---------- подвал ---------- */
.pc-foot{ background:#fff; border-top:1px solid var(--d-line); padding:24px 0; margin-top:30px }
.pc-foot p{ margin:0 0 6px; font-size:.84rem; color:var(--d-muted) }
.pc-foot__links a{ color:var(--d-blue-ink) }

/* ---------- печатная версия ---------- */
.pc-print{ display:none }

@media print{
  body{ background:#fff !important }
  .site-header, .pc-hero, .pc-left, .pc-right, .pc-foot, .pc-print{ display:none !important }
  .pc-page{ padding:0; background:#fff }
  .pc-print{ display:block !important; padding:0 0 20px; color:#000 }
  .pc-print__head{ border-bottom:2px solid #000; padding-bottom:10px; margin-bottom:14px }
  .pc-print__t{ font-size:1.15rem; font-weight:700 }
  .pc-print__s{ font-size:.82rem; color:#444; margin-top:4px }
  .pc-print__price{ font:700 1.5rem/1.2 var(--d-mono); margin:14px 0 4px }
  .pc-print__days{ font-size:.9rem; margin-bottom:14px }
  .pc-print__tbl{ width:100%; border-collapse:collapse; font-size:.88rem; margin-bottom:14px }
  .pc-print__tbl th{ text-align:left; width:34%; padding:6px 8px 6px 0; vertical-align:top; color:#333; font-weight:600 }
  .pc-print__tbl td{ padding:6px 0; vertical-align:top }
  .pc-print__tbl tr{ border-bottom:1px solid #ddd }
  .pc-print__h{ font-weight:700; font-size:.95rem; margin-bottom:6px }
  .pc-print__works{ margin:0 0 14px; padding-left:18px; font-size:.88rem }
  .pc-print__works li{ margin-bottom:4px }
  .pc-print__note{ font-size:.78rem; color:#444; border-top:1px solid #ccc; padding-top:8px }
  a[href^="http"]::after{ content:"" }
}

/* ======================= АДАПТИВ ======================= */
@media (max-width:1100px){
  .pc-layout{ grid-template-columns:1fr }
  .pc-right{ position:static; order:-1 }
  .pc-form__grid{ grid-template-columns:1fr 1fr }
}
@media (max-width:820px){
  .pc-opts{ grid-template-columns:1fr }
}
@media (max-width:640px){
  .dw{ width:min(100% - 28px,1240px) }
  .pc-layout{ margin-top:18px; gap:16px }
  .pc-stepbody{ padding:16px }
  .pc-hero{ padding:24px 0 22px }
  .pc-sheet{ padding:16px }
  .pc-form__grid{ grid-template-columns:1fr }
  .pc-nav{ flex-direction:column; align-items:stretch }
  .pc-nav .dbtn{ width:100%; justify-content:center }
  .pc-reset{ margin-left:0 }
  .pc-steplist{ gap:6px }
  .pc-step{ font-size:.76rem; padding:6px 10px }
  .pc-prow{ flex-direction:column; gap:2px; align-items:flex-start }
  .pc-prow__v{ text-align:left }
  .pc-price__v{ font-size:1.35rem }
}
@media (max-width:380px){
  .dw{ width:min(100% - 20px,1240px) }
  .pc-stepbody{ padding:13px }
  .pc-opt__box{ padding:11px 12px }
}