/* Страница сканера штрихкодов */
.session-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: #fff; /* Меняем фон на белый */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Центрирование по вертикали */
  align-items: center;    /* Центрирование по горизонтали */
}

.scanner-container {
  width: 280px;  /* Фиксированный размер "карточки" сканера */
  height: 280px;
  flex-shrink: 0;
}

#barcode-reader {
  width: 100%;
  height: 100%;
  border-radius: 32px; /* Скругленные углы */
  /* Градиент: верх серый (50%), низ черный (50%) */
  background: linear-gradient(to bottom, #b0b0b0 50%, #000000 50%);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* Если используете реальную камеру, видео может перекрыть фон. 
   Вам может понадобиться псевдоэлемент для наложения градиента поверх видео.
   Для статичного вида (как на скрине) фона достаточно. */

.scanner-instruction {
  position: relative; /* Убираем absolute, чтобы он занимал место в потоке */
  margin-top: 32px;   /* Отступ от сканера */
  background-color: transparent; /* Убираем темный фон */
  z-index: 10;
}

.scanner-instruction p {
  font-size: 18px;
  color: #000; /* Черный текст вместо белого */
  font-weight: 500;
  margin: 0;
}

.scanner-reload-button {
  margin-top: 16px;
  padding: 8px 16px;
  background-color: #4318FF;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}