/* Калькулятор інвентаризації (техпаспорт) — public price calc for the «Технічні паспорти»
   category. Reuses the uform__ shell (universal-form.css) for the section/fields. Brand #ff4501. */

/* ---- service checkboxes (grid of cards) ---- */
.calc-inv-services { display: grid; grid-template-columns: 1fr; gap: clamp(8px, 0.9vw, 12px); }
@media (min-width: 640px) { .calc-inv-services { grid-template-columns: 1fr 1fr; } }

.calc-inv-service {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  border: 1.5px solid rgba(51,51,51,0.14); border-radius: 6px;
  padding: clamp(12px,1.1vw,16px) clamp(14px,1.2vw,18px);
  font-weight: 600; font-size: clamp(14px,1vw,16px); color: #333; line-height: 1.3;
  transition: border-color .2s, background .2s;
}
.calc-inv-service:hover { border-color: rgba(255,69,1,0.45); }
.calc-inv-service:has(input:checked) { border-color: #ff4501; background: rgba(255,69,1,0.05); }
.calc-inv-service input { accent-color: #ff4501; width: 20px; height: 20px; flex: none; margin-top: 1px; }
.calc-inv-service small { display: block; margin-top: 4px; font-weight: 400; font-size: clamp(11px,0.8vw,13px); color: #777; }

/* ---- option checkbox (urgent) ---- */
.calc-inv-opt {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  border: 1.5px solid rgba(51,51,51,0.14); border-radius: 6px;
  padding: clamp(12px,1.1vw,16px) clamp(14px,1.2vw,18px);
  font-weight: 600; font-size: clamp(14px,1vw,16px); color: #333;
  transition: border-color .2s, background .2s, opacity .2s;
}
.calc-inv-opt input { accent-color: #ff4501; width: 20px; height: 20px; flex: none; }
.calc-inv-opt:has(input:checked) { border-color: #ff4501; background: rgba(255,69,1,0.05); }
.calc-inv-opt.is-disabled { opacity: 0.5; cursor: not-allowed; }

.calc-inv-nonres .calc-inv-land-lbl { margin-top: clamp(14px,1.4vw,20px); }
.calc-inv-land-hint { margin: 4px 0 8px; display: block; }

/* ---- range slider + number box (land scheme) — framed control row, scoped with
   3 classes so it beats the universal-form base input styles that also load on this
   page (which would otherwise force the number field full-width and strip its border). */
.uform__field .calc-slider {
  display: flex; align-items: center; gap: clamp(14px, 1.6vw, 24px); width: 100%;
  padding: clamp(9px, 1vw, 14px) clamp(14px, 1.3vw, 18px);
  background: #f6f6f6; border: 1px solid rgba(51,51,51,0.10); border-radius: 10px;
}
.uform__field .calc-slider .calc-range {
  flex: 1 1 auto; min-width: 0; height: 24px; margin: 0; cursor: pointer;
  background: transparent; accent-color: #ff4501;
}
.uform__field .calc-slider .calc-num {
  flex: 0 0 auto; box-sizing: border-box; width: clamp(88px, 7vw, 116px);
  height: clamp(44px, 2.6vw, 52px); padding: 0 10px; text-align: center;
  font-weight: 700; font-size: clamp(15px, 1vw, 17px); color: #232323;
  background: #fff; border: 1.5px solid rgba(51,51,51,0.22); border-radius: 8px;
}
.uform__field .calc-slider .calc-num:focus {
  outline: none; border-color: #ff4501; box-shadow: 0 0 0 3px rgba(255,69,1,0.15);
}
@media (max-width: 480px) {
  .uform__field .calc-slider { gap: 12px; padding: 10px 12px; }
  .uform__field .calc-slider .calc-num { width: 76px; }
}

.calc-gate-note { margin: 0 0 clamp(14px,1.4vw,20px); font-size: clamp(14px,0.95vw,16px); color: rgba(51,51,51,0.85); }

/* ---- result box ---- */
.calc-inv-result {
  margin: clamp(20px,2vw,32px) clamp(20px,2.8vw,56px) clamp(24px,2.4vw,40px);
  padding: clamp(22px,2.4vw,36px); background: #232323; color: #fff; border-radius: 8px; text-align: center;
}
.calc-inv-result-label { font-size: clamp(15px,1.1vw,18px); font-weight: 600; color: #f0f0f0; }
.calc-inv-price { font-size: clamp(30px,3.2vw,44px); font-weight: 800; color: #ff4501; margin: clamp(8px,0.8vw,12px) 0; }
.calc-inv-note { font-size: clamp(12px,0.85vw,14px); color: #bbb; line-height: 1.4; }
.calc-inv-success { margin-top: clamp(12px,1.2vw,18px); font-size: clamp(14px,1vw,16px); font-weight: 700; color: #2ecc71; }