/* Brokio calculator — PolicyBazaar-style sliders + light polish.
   Colours are literal (teal #34777b, orange #e6691f, line #dfeceb) so they
   apply regardless of the calculator engine's own variable scope. */
.bk-range-host { margin: 10px 2px 2px; }
.bk-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 6px; padding: 0; margin: 0;
  background: linear-gradient(90deg, #34777b 0, #34777b var(--bk-fill, 50%), #dfeceb var(--bk-fill, 50%), #dfeceb 100%);
  outline: none; cursor: pointer;
}
.bk-range:focus-visible { box-shadow: 0 0 0 3px rgba(52, 119, 123, .22); }
.bk-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 3px solid #e6691f;
  box-shadow: 0 2px 7px rgba(20, 40, 40, .28); cursor: grab; transition: transform .12s ease;
}
.bk-range::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.12); }
.bk-range::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 3px solid #e6691f;
  box-shadow: 0 2px 7px rgba(20, 40, 40, .28); cursor: grab;
}
.bk-range::-moz-range-track { height: 6px; border-radius: 6px; background: transparent; }

/* Light polish so the sliders sit cleanly with the existing calculator UI */
.bk-calc .bk-input-wrap input:focus { border-color: #34777b; box-shadow: 0 0 0 3px rgba(52, 119, 123, .12); }
.bk-calc .bk-field { margin-bottom: 4px; }