:root {
  --primary: #AC3B61; /* Основной цвет */
  --secondary: #123C69; /* Вторичный цвет */
  --success: #EDC7B7; /* Цвет успеха */
  --info: #EEE2DC; /* Информационный цвет */
  --warning: #BAB2B5; /* Цвет предупреждения */
  --text-dark: #123C69; /* Основной текст */
  --text-muted: #8e898b; /* Дополнительный текст */
  --text-primary: #AC3B61; /* Выделенный текст */
  --text-secondary: #8e898b; /* Второстепенный текст */
  --text-success: #EDC7B7; /* Текст для успешных действий */
}

/* Применение шрифта */
body {
  font-family: 'Exo 2', sans-serif;
  background-color: var(--info);
}

/* Шапка сайта */
.header {
  padding: 2rem 0;
  text-align: center;
}

.header .site-name {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary);
}

.header .slogan {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-top: 1rem;
}

.header .author {
  font-size: 1rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
}

/* Зона фильтров */
.filters {
  background-color: var(--primary);
  padding: 1rem;
  border-radius: 0; /* Убираем скругление */
  margin-bottom: 2rem;
}

.filters .form-control {
  margin-right: 1rem;
  margin-bottom: 1rem;
}

.filters .btn-primary {
  background-color: var(--secondary);
  border-color: var(--secondary);
}

.filters .btn-primary:hover {
  background-color: var(--text-dark);
  border-color: var(--text-dark);
}

/* Зона контента */
.recipe-card {
  background-color: white;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.2s;
  margin-bottom: 1.5rem;
  text-decoration: none;
  color: inherit;
  display: block;
}

.recipe-card:hover {
  transform: scale(1.05);
  text-decoration: none;
}

.recipe-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.recipe-card .card-body {
  padding: 1rem;
}

.recipe-card .card-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 0.5rem;
}

.recipe-card .card-text {
  font-size: 0.9rem;
  color: var(--text-dark);
  margin-bottom: 0.5rem;
}

.recipe-card .card-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Пагинация */
.pagination {
  justify-content: center;
  margin-top: 2rem;
}

.pagination .page-item {
  margin: 0 0.25rem;
}

.pagination .page-item.active .page-link {
  background-color: var(--secondary); /* Синий цвет для активной страницы */
  border-color: var(--secondary);
  color: white; /* Цвет текста на активной странице */
}

.pagination .page-link {
  color: var(--secondary); /* Синий цвет для текста и стрелок */
  border: 1px solid var(--secondary);
  border-radius: 5px;
  padding: 0.5rem 0.75rem;
  transition: background-color 0.2s, color 0.2s;
}

.pagination .page-link:hover {
  background-color: var(--secondary);
  color: white; /* Цвет текста при наведении */
}