/* Дополнения: MUI-стили, которые в оригинале генерирует React (emotion) */

/* Поле ввода номера */
.check-receipt .numberInput .MuiInputBase-root {
  background: var(--milk-dark);
}

.check-receipt .numberInput .MuiInputBase-input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  padding: 17px 16px;
  font-family: "SF Pro Display", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--base-day-800, #3A3A3C);
}

.check-receipt .numberInput .MuiInputBase-input::placeholder {
  color: var(--light-grey, #6D6D72);
}

.check-receipt .numberInput .MuiFormHelperText-root {
  margin: 0;
  padding: 0 4px;
  color: #D32F2F;
  font-family: "SF Pro Display", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

.check-receipt .numberInput .MuiInputBase-root.Mui-error {
  border: 1px solid #D32F2F;
}

.check-receipt .numberInput:has(.Mui-error) .MuiInputBase-input::placeholder {
  color: #D32F2F;
}

/* Кнопки: базовые MUI-сбросы */
.check-receipt .MuiButton-root {
  box-shadow: none;
  text-transform: none;
}

.check-receipt .MuiButton-root:active,
.check-receipt .MuiButtonBase-root:active {
  opacity: .85;
}

/* Блок проверки занимает высоту между шапкой и футером */
#react-app__CheckReceiptPage .check-receipt {
  min-height: 60vh;
}