/* Калькулятор «Будівництво за спрощеною процедурою» — slider + aux-structure styles.
   Reuses the uform__ shell (universal-form.css) for tabs/panes/fields/pills/nav. Brand #ff4501. */

/* range slider + number box — one framed control row. Scoped with 3 classes so it
   beats the universal-form base input styles (`.uform__field input[type="text"]`)
   that also load on this page and would otherwise force the number field to full
   width and strip its border, collapsing the row. */
.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; }
}

/* auxiliary structures */
.calc-aux-list { display: flex; flex-direction: column; gap: clamp(8px, 0.9vw, 12px); }
.calc-aux-item { border: 1.5px solid rgba(51,51,51,0.14); border-radius: 6px; padding: clamp(12px,1.1vw,16px) clamp(14px,1.2vw,18px); transition: border-color .2s, background .2s; }
.calc-aux-item:hover { border-color: rgba(255,69,1,0.45); }
.calc-aux-item:has(.calc-aux-cb:checked) { border-color: #ff4501; background: rgba(255,69,1,0.04); }
.calc-aux-head { display: flex; align-items: center; gap: 12px; cursor: pointer; font-weight: 600; font-size: clamp(14px,1vw,16px); color: #333; margin: 0; }
.calc-aux-head input { accent-color: #ff4501; width: 18px; height: 18px; flex: none; }
.calc-aux-body { margin-top: clamp(12px,1.1vw,16px); padding-top: clamp(12px,1.1vw,16px); border-top: 1px dashed rgba(51,51,51,0.15); }

/* live total badge */
.calc-total {
  margin-top: clamp(16px,1.6vw,24px); padding: clamp(14px,1.3vw,18px) clamp(16px,1.5vw,22px);
  background: #232323; color: #fff; border-radius: 6px; font-size: clamp(14px,1vw,16px);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.calc-total b { color: #ff4501; font-size: clamp(18px,1.4vw,24px); }

/* "already built" alert checkbox */
.calc-alert {
  display: flex; align-items: flex-start; gap: 12px; margin-top: clamp(16px,1.5vw,24px);
  padding: clamp(14px,1.3vw,18px); border: 1.5px solid #ff4501; border-radius: 6px;
  background: rgba(255,69,1,0.05); cursor: pointer; font-size: clamp(13px,0.95vw,15px); color: #333; line-height: 1.4;
}
.calc-alert input { accent-color: #ff4501; width: 20px; height: 20px; flex: none; margin-top: 1px; }
/* the ЗСУ pill field sits right after the alert box (whose preceding sibling isn't a
   .uform__field, so the default field gap doesn't apply) — give it matching top space */
.calc-alert + .uform__field { margin-top: clamp(16px, 1.5vw, 26px); }

.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); }