.calculator-form-inputs {
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: fit-content;
}

.calculator-form-inputs > div,
#conditional-filters-container > div {
  padding: 20px;
  background: var(--calculator-panel-soft);
  border: 1px solid var(--calculator-panel-border);
  border-radius: var(--calculator-radius-md);
}

@media (min-width: 768px) {
  .calculator-form-inputs {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
  }
}

/* KEO legacy: make default variant buttons inside calculator use brand green */
:root[data-theme="keo-legacy"] .calculator .custom-button-default,
:root[data-theme="keo-legacy"] .calculator button.custom-button-default,
:root[data-theme="keo-legacy"] .calculator a.custom-button-default {
  background: #3DD88A !important;
  color: #16384a !important;
  box-shadow: 0 14px 28px rgba(40, 77, 100, 0.2) !important;
}

:root[data-theme="keo-legacy"] .calculator .custom-button-default:hover:not(:disabled),
:root[data-theme="keo-legacy"] .calculator button.custom-button-default:hover:not(:disabled),
:root[data-theme="keo-legacy"] .calculator a.custom-button-default:hover:not(:disabled) {
  background: #33c47d !important;
  transform: translateY(-1px) !important;
}