/* ============================================================
   Спільні стилі калькулятора «Черкаси Буд».
   Використовується index.html і всіма лендінгами.
   Кольори бренду — у змінних нижче.
   ============================================================ */
:root{
  --brand:#e8552a;          /* акцент (кнопки, прогрес) */
  --brand-dark:#c8431d;
  --ink:#141a1f;            /* основний текст */
  --muted:#5d6670;          /* сірий текст (контраст ≥4.5:1 з фоном) */
  --line:#e7eaee;           /* лінії/рамки */
  --bg:#f4f6f8;             /* фон сторінки */
  --card:#ffffff;
  --ok:#1a9d5a;
  --radius:16px;
  --shadow:0 10px 30px rgba(20,26,31,.08);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;line-height:1.45;
}
.wrap{max-width:560px;margin:0 auto;padding:16px 16px 40px;min-height:100dvh}

/* Шапка */
.top{display:flex;align-items:center;gap:10px;padding:6px 2px 14px}
.logo{font-weight:800;font-size:18px;letter-spacing:-.3px}
.logo b{color:var(--brand)}
.badge{margin-left:auto;font-size:12px;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:5px 10px;background:#fff}

/* Hero (SEO-заголовок лендінга) */
.hero{font-size:21px;line-height:1.25;margin:2px 2px 14px;letter-spacing:-.4px}
.hero small{display:block;font-weight:500;font-size:14px;color:var(--muted);margin-top:5px}

/* Прогрес */
.progress{margin:2px 2px 16px}
.progress .row{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin-bottom:8px}
.progress .row b{color:var(--ink)}
.bar{height:8px;background:#e9edf1;border-radius:999px;overflow:hidden}
.bar>span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand),#ff7d52);
  border-radius:999px;transition:width .35s cubic-bezier(.4,0,.2,1)}

/* Картка кроку */
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:22px 18px;animation:pop .28s ease}
@keyframes pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.q{font-size:21px;line-height:1.25;margin:0 0 4px;letter-spacing:-.4px}
.q:focus{outline:none}                 /* фокус ставимо програмно, рамку не показуємо */
p.sub{margin:0 0 16px;color:var(--muted);font-size:14px}

/* Опції (радіо як великі кнопки) */
.opts{display:grid;gap:10px}
.opt{display:flex;align-items:center;gap:12px;padding:15px 16px;border:1.5px solid var(--line);
  border-radius:13px;cursor:pointer;background:#fff;transition:.15s;font-size:16px;font-weight:500;
  -webkit-tap-highlight-color:transparent;position:relative}
.opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.opt:hover{border-color:#cfd6dd}
.opt:active{transform:scale(.99)}
.opt .dot{width:22px;height:22px;border-radius:50%;border:2px solid #cfd6dd;flex:0 0 auto;position:relative}
.opt:has(input:checked){border-color:var(--brand);background:#fff6f3}
.opt:has(input:checked) .dot{border-color:var(--brand)}
.opt:has(input:checked) .dot:after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--brand)}
.opt:has(input:focus-visible){outline:3px solid rgba(232,85,42,.4);outline-offset:2px}
.opt .em{font-size:20px;margin-right:-2px}

/* Чекбокси */
.checks{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:420px){.checks{grid-template-columns:1fr}}
.chk{display:flex;align-items:center;gap:10px;padding:13px 13px;border:1.5px solid var(--line);
  border-radius:12px;cursor:pointer;background:#fff;font-size:15px;font-weight:500;transition:.15s;
  -webkit-tap-highlight-color:transparent;position:relative}
.chk input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.chk .box{width:20px;height:20px;border-radius:6px;border:2px solid #cfd6dd;flex:0 0 auto;position:relative}
.chk:has(input:checked){border-color:var(--brand);background:#fff6f3}
.chk:has(input:checked) .box{background:var(--brand);border-color:var(--brand)}
.chk:has(input:checked) .box:after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.chk:has(input:focus-visible){outline:3px solid rgba(232,85,42,.4);outline-offset:2px}

/* Площа */
.area{text-align:center}
.area .val{font-size:44px;font-weight:800;letter-spacing:-1px;margin:6px 0}
.area .val small{font-size:18px;color:var(--muted);font-weight:600}
input[type=range]{width:100%;height:6px;-webkit-appearance:none;appearance:none;
  background:linear-gradient(90deg,var(--brand) var(--fill,20%),#e9edf1 var(--fill,20%));
  border-radius:999px;outline:none;margin:14px 0 4px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;
  background:#fff;border:2px solid var(--brand);box-shadow:0 3px 10px rgba(232,85,42,.35);cursor:pointer}
input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fff;
  border:2px solid var(--brand);cursor:pointer}
.area .scale{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:2px}
.area .manual{margin-top:14px}
.area .manual input{width:120px;text-align:center;font-size:18px;font-weight:700;padding:10px;
  border:1.5px solid var(--line);border-radius:10px}
.area .manual label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}

/* Кнопки навігації */
.nav{display:flex;gap:10px;margin-top:18px}
.btn{flex:1;padding:15px;border:none;border-radius:13px;font-size:16px;font-weight:700;cursor:pointer;
  font-family:inherit;transition:.15s;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.99)}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-dark)}
.btn-primary:disabled{background:#d8b3a7;cursor:not-allowed}
.btn-ghost{flex:0 0 auto;background:#fff;border:1.5px solid var(--line);color:var(--muted);padding:15px 18px}
.hint{text-align:center;font-size:12px;color:var(--muted);margin-top:12px}

/* Розрахунок (анімація) */
.calc{text-align:center;padding:36px 18px}
.spinner{width:52px;height:52px;border:4px solid #eee;border-top-color:var(--brand);border-radius:50%;
  margin:0 auto 22px;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.calc h2{font-size:19px;margin:0 0 18px}
.calc .steps{display:grid;gap:9px;max-width:320px;margin:0 auto;text-align:left}
.calc .steps div{font-size:14px;color:var(--muted);opacity:.35;transition:.3s;display:flex;gap:8px;align-items:center}
.calc .steps div.on{opacity:1;color:var(--ink)}
.calc .steps div .tick{color:var(--ok);font-weight:800}

/* Результат */
.result h1{font-size:22px;margin:0 0 2px;letter-spacing:-.4px}
.result .lead{color:var(--muted);font-size:14px;margin:0 0 18px}
.est{background:linear-gradient(135deg,#fff6f3,#fff);border:1.5px solid #ffd9cc;border-radius:14px;padding:16px}
.est .line{display:flex;justify-content:space-between;padding:9px 0;font-size:15px;border-bottom:1px dashed var(--line)}
.est .line:last-child{border:none}
.est .line span{color:var(--muted)}
.est .line b{font-weight:700}
.est .total{margin-top:6px;padding-top:14px;border-top:2px solid var(--brand)}
.est .total span{font-size:16px;color:var(--ink);font-weight:600}
.est .total b{font-size:26px;color:var(--brand)}
.range{text-align:center;margin:14px 0 2px;font-size:14px;color:var(--muted)}
.range b{color:var(--ink);font-size:17px}
.note{font-size:12px;color:var(--muted);text-align:center;margin-top:10px;line-height:1.5}

/* Кнопка «Змінити параметри» під результатом */
.result-actions{margin-top:12px;text-align:center}
.result-actions button{background:none;border:none;color:var(--brand);font-family:inherit;
  font-size:14px;font-weight:600;cursor:pointer;padding:6px 10px}
.result-actions button:hover{text-decoration:underline}

/* Траст-смуга (соц.доказ) перед формою */
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.trust .t{background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:12px 8px;text-align:center}
.trust .t b{display:block;font-size:20px;color:var(--ink);letter-spacing:-.4px}
.trust .t span{font-size:11px;color:var(--muted);line-height:1.3;display:block;margin-top:3px}

/* Honeypot: приховане поле-пастка для ботів */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;opacity:0}

/* Лід-блок */
.gate{margin-top:20px;background:#0f1720;color:#fff;border-radius:14px;padding:20px 18px}
.gate h3{margin:0 0 4px;font-size:18px}
.gate p{margin:0 0 14px;color:#aab4c0;font-size:14px}
.gate ul{list-style:none;padding:0;margin:0 0 16px;display:grid;gap:8px}
.gate li{font-size:14px;display:flex;gap:9px;align-items:center}
.gate li .c{color:#39d98a;font-weight:800}
.form{display:grid;gap:10px}
.form input{padding:14px;border-radius:11px;border:1.5px solid #2a3541;background:#1a232e;color:#fff;
  font-size:16px;font-family:inherit}
.form input::placeholder{color:#6b7885}
.form input:focus{outline:none;border-color:var(--brand)}
.form .err{color:#ff8a6b;font-size:13px;display:none}
.form.showerr .err{display:block}
.gate .btn-primary{width:100%}
.gate .privacy{font-size:11px;color:#6b7885;text-align:center;margin-top:10px}

/* Дякуємо */
.thanks{text-align:center;padding:40px 20px}
.thanks .ic{width:74px;height:74px;border-radius:50%;background:#e8f8ef;display:flex;align-items:center;
  justify-content:center;margin:0 auto 18px;font-size:38px}
.thanks h1{font-size:24px;margin:0 0 8px}
.thanks p{color:var(--muted);font-size:15px;margin:0 auto;max-width:340px}
.thanks .call{margin-top:20px;font-size:15px}
.thanks .call a{color:var(--brand);font-weight:700;text-decoration:none}

.foot{text-align:center;font-size:12px;color:var(--muted);margin-top:22px}
.foot a{color:var(--muted)}
.hidden{display:none!important}

/* Менше руху для тих, хто про це просить у системі */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .spinner{border-top-color:var(--brand);border-right-color:var(--brand)}
}