/* Розрахунок теплої підлоги за планом — сторінка клієнта (tepla-pidloga.html).
   Стилі живуть усередині .calc, тому підхоплюють його ж змінні з calc.css. */

.tpc-steps{
  display:flex; gap:8px; list-style:none; margin:0 0 18px; padding:0; flex-wrap:wrap;
}
.tpc-steps li{
  display:flex; align-items:center; gap:8px; padding:8px 14px 8px 8px;
  border:1px solid var(--c-line); border-radius:999px; background:var(--c-card);
  font:600 13px/1 var(--c-body); color:var(--c-ink-soft);
}
.tpc-steps li b{
  width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  background:var(--c-line); color:var(--c-ink); font:700 12px/1 var(--c-body);
}
.tpc-steps li.is-on{ color:var(--c-ink); border-color:var(--c-line-strong); }
.tpc-steps li.is-on b{ background:var(--c-lime); color:var(--c-lime-ink); }
.tpc-steps li.is-done b{ background:var(--c-ink); color:var(--c-card); }

.tpc-card{ padding:18px; margin-bottom:16px; }
.tpc-h{ font:700 18px/1.25 var(--c-display); margin:0 0 6px; }
.tpc-note{ color:var(--c-ink-soft); font-size:13.5px; margin:0 0 14px; }
.tpc-fine{ margin:14px 0 0; font-size:12.5px; }

/* ---------------------------------------------------------------- крок 1 */
.tpc-drop{
  display:grid; place-items:center; gap:6px; text-align:center;
  padding:34px 18px; border:1.5px dashed var(--c-line-strong); border-radius:var(--c-r);
  background:var(--c-ground); cursor:pointer; transition:border-color .15s, background .15s;
}
.tpc-drop:hover, .tpc-drop.is-over{ border-color:var(--c-ink); background:#fff; }
.tpc-drop svg{ width:34px; height:34px; color:var(--c-ink-soft); }
.tpc-drop-title{ font:600 15px/1.3 var(--c-body); }
.tpc-drop-sub{ font-size:12.5px; color:var(--c-ink-soft); }

.tpc-filerow{
  display:flex; align-items:center; gap:10px; margin-top:12px;
  font-size:13.5px; color:var(--c-ink-soft);
}
.tpc-link{
  border:0; background:none; padding:0; cursor:pointer; color:var(--c-ink);
  text-decoration:underline; font:inherit;
}

/* ---------------------------------------------------------------- крок 2 */
.tpc-stage{
  position:relative; border:1px solid var(--c-line); border-radius:var(--c-r);
  background:var(--c-ground); overflow:hidden; touch-action:none;
}
.tpc-stage{ display:grid; place-items:center; padding:6px; }
/* План буває високий; обмежуємо висотою екрана, щоб поля під ним лишались
   на видноті. Масштабується рівномірно, тому перерахунок кліку не ламається. */
.tpc-stage canvas{
  display:block; cursor:crosshair; max-width:100%; max-height:58vh;
  width:auto; height:auto;
}

.tpc-scale{
  display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-top:14px;
}
.tpc-scale .field{ min-width:200px; }
.tpc-inline{ display:flex; align-items:center; gap:8px; }
.tpc-inline input{ max-width:130px; }
.tpc-inline span{ font-size:13.5px; color:var(--c-ink-soft); }

/* ---------------------------------------------------------------- кроки */
.tpc-bar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:4px;
}
.tpc-status{ font-size:13.5px; color:var(--c-ink-soft); }
.tpc-status.is-bad{ color:var(--c-bad); }

.calc textarea{
  width:100%; padding:11px 12px; border:1px solid var(--c-line-strong);
  border-radius:10px; background:#fff; font:15px/1.5 var(--c-body);
  color:var(--c-ink); resize:vertical;
}
.calc input[type=text], .calc input[type=tel], .calc input[type=email]{
  padding:11px 12px; border:1px solid var(--c-line-strong); border-radius:10px;
  background:#fff; font:15px/1.2 var(--c-body); color:var(--c-ink); width:100%;
}
/* приманка для ботів — не показуємо й не даємо сфокусувати */
.tpc-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

.tpc-done{ padding:20px 18px; }
.tpc-done b{ font-variant-numeric:tabular-nums; }

.tpc-how{
  margin-top:8px; border:1px solid var(--c-line); border-radius:var(--c-r);
  background:var(--c-card); padding:0 18px;
}
.tpc-how summary{
  cursor:pointer; padding:14px 0; font:600 14.5px/1.3 var(--c-body); list-style:none;
}
.tpc-how summary::-webkit-details-marker{ display:none; }
.tpc-how summary::after{ content:' ▾'; color:var(--c-ink-soft); }
.tpc-how[open] summary::after{ content:' ▴'; }
.tpc-how > div{ padding-bottom:14px; font-size:13.5px; color:var(--c-ink-soft); }
.tpc-how p{ margin:0 0 10px; }
.tpc-how b{ color:var(--c-ink); }

@media (max-width:560px){
  .tpc-card{ padding:14px; }
  .tpc-drop{ padding:24px 14px; }
  .tpc-bar .btn{ flex:1 1 auto; }
}

/* --------------------------------------------------------- спосіб доставки
   КП збирає людина й відправляє руками, тому питаємо КУДИ. Без цього
   менеджер гадав: у Viber писати, в Telegram чи на пошту. */
.tpc-chan{ display:flex; gap:8px; flex-wrap:wrap; }
.tpc-chan button{
  padding:9px 16px; border-radius:999px; cursor:pointer;
  border:1px solid var(--c-line); background:#fff; color:var(--c-ink-soft);
  font:600 14px/1 Inter,Arial,sans-serif;
}
.tpc-chan button:hover{ border-color:var(--c-ink); color:var(--c-ink); }
.tpc-chan button.is-on{ background:var(--c-ink); border-color:var(--c-ink); color:#fff; }

/* Вхід для менеджера — внизу сторінки, як у кошику */
.tpc-mgr{ margin:26px 0 8px; display:flex; justify-content:center; }
.tpc-mgr .mgr-toggle{ text-decoration:none; }