/* Progressive visual layer only. No JavaScript means untouched native fields. */
[data-hrs-calculator] .hrs-native-field { position: relative; display: block; min-width: 0; }
[data-hrs-calculator] .hrs-native-field-display {
  position: absolute; inset: 2px; border-radius: 999px; background: #fff;
  display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 22px;
  color: var(--hrs-orange, #f24932); font: 500 22px "General Sans", "Noto Sans", sans-serif;
  white-space: nowrap; pointer-events: none;
}
[data-hrs-calculator] .hrs-native-field-display::before {
  content: ""; position: absolute; left: 22px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px;
  background: center / contain no-repeat url('../images/calendar-field.png');
}
[data-hrs-calculator] .hrs-native-field--time .hrs-native-field-display::before { background-image: url('../images/time-field.png'); }
[data-hrs-calculator] .hrs-native-field:focus-within .hrs-native-field-display { display: none; }
[data-hrs-calculator] .hrs-native-field input { text-align: center; font-weight: 500; }
[data-hrs-calculator] .hrs-native-field input::-webkit-date-and-time-value { text-align: center; }
[data-hrs-calculator] .hrs-native-field input:focus-visible { outline: 2px solid var(--hrs-dark, #065d58); outline-offset: 3px; }
@media (max-width: 1759px) {
  [data-hrs-calculator] .hrs-native-field-display { font-size: 14px; padding-inline: 14px; gap: 8px; }
  [data-hrs-calculator] .hrs-native-field-display::before { left: 14px; width: 20px; height: 20px; }
}
@media (max-width: 767.98px) {
  [data-hrs-calculator] .hrs-native-field-display { font-size: 16px; line-height: 1.2; font-weight: 500; padding-left: 45px; padding-right: 15px; gap: 15px; }
  [data-hrs-calculator] .hrs-native-field-display::before { left: 15px; width: 20px; height: 20px; }
}
@media (forced-colors: active) {
  [data-hrs-calculator] .hrs-native-field-display { display: none; }
}