/* Общий стиль для контейнера пагинации */
#pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px; /* Расстояние между кнопками */
  margin-top: 20px;
}

/* Общий стиль для кнопок пагинации */
#pagination button {
  background-color: #f5f5f5;
  border: 2px solid #ccc;
  color: #333;
  font-size: 14px; /* Размер шрифта */
  font-weight: bold;
  width: 40px; /* Одинаковая ширина */
  height: 40px; /* Одинаковая высота */
  border-radius: 5px; /* Закругленные углы */
  cursor: pointer;
  text-align: center;
  display: flex; /* Используем flex для выравнивания */
  justify-content: center; /* Горизонтальное выравнивание текста */
  align-items: center; /* Вертикальное выравнивание текста */
  transition: opacity 0.15s ease;
}

/* Стиль кнопок при наведении */
#pagination button:hover {
  background-color: #e0e0e0;
  border-color: #999;
}

#pagination button:focus {
  outline: none; /* Убираем стандартный фокус */
}

/* Стиль активной кнопки (текущая страница) */
#pagination button.active {
  background-color: #d80027;
  color: #fff;
  border-color: #d80027;
  font-weight: bold;
}

/* Стиль кнопок "Назад", "Вперед", "На первую страницу", "На последнюю страницу" */
#pagination .pagination-prev,
#pagination .pagination-next,
#pagination .pagination-first,
#pagination .pagination-last {
  font-size: 16px; /* Увеличенный размер текста для стрелок */
  width: 40px; /* Одинаковая ширина */
  height: 40px; /* Одинаковая высота */
  line-height: normal; /* Убираем line-height */
  background-color: #f5f5f5;
  border-radius: 5px;
  display: flex; /* Используем flex для выравнивания */
  justify-content: center; /* Горизонтальное выравнивание текста */
  align-items: center; /* Вертикальное выравнивание текста */
}

/* Стиль стрелок при наведении */
#pagination .pagination-prev:hover,
#pagination .pagination-next:hover,
#pagination .pagination-first:hover,
#pagination .pagination-last:hover {
  background-color: #e0e0e0;
  border-color: #999;
}

/* Обертка для кнопки и поля ввода */
.pagination-input-wrapper {
  display: inline-flex;
  align-items: center;
  position: relative; /* Относительное позиционирование для обертки */
}

/* Кнопка для ввода страницы */
.pagination-input {
  background-color: #f5f5f5;
  color: #333;
  font-size: 14px;
  width: 40px;
  height: 40px;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  font-weight: bold;
}

/* Поле ввода номера страницы */
.pagination-input-field {
  border-radius: 5px;
  font-size: 14px;
  text-align: center;
  box-sizing: border-box;
  background-color: #fff;
  z-index: 10;
  font-weight: bold;
  border: 1px solid #000;
}

/* Кнопка галочки */
.pagination-confirm {
  background-color: #4caf50;
  border: 2px solid #4caf50!important;
  color: #148818!important;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 25px!important;
  transition: all 0.3s ease;
  font-weight: bold;
}

.pagination-confirm:hover {
  background-color: #45a049;
}

/* Кнопка крестика */
.pagination-cancel {
  background-color: #f44336;
  border: 2px solid #d80027 !important;
  color: #d80027 !important;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 25px !important;
  transition: all 0.3s ease;
  font-weight: bold;
}

.pagination-cancel:hover {
  background-color: #e53935;
}

/* Общие переходы для кнопок */
.pagination-button {
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

/* Активная кнопка с номером страницы */
.pagination-button.active {
  background: #007bff;
  color: white;
  animation: highlight 0.3s ease;
}

/* Анимация для подсветки активной кнопки */
@keyframes highlight {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}