: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);
  color: var(--text-dark);
  margin: 0;
  padding: 0;
}

header {
  padding: 20px 0; /* Убираем боковые отступы */
  background-color: transparent;
}

header .logo {
  display: flex;
  align-items: center;
  margin-left: 0; /* Убираем сдвиг вправо */
  max-width: 800px; /* Ограничиваем ширину, как у основного контента */
  margin: 0 auto; /* Центрируем логотип */
  padding: 0 20px; /* Добавляем отступы по бокам */
}

header .logo a {
  text-decoration: none;
  margin-right: 20px; /* Уменьшаем отступ между "COMIDA" и "Лучшие рецепты" */
}

header .logo .comida {
  color: var(--primary);
  font-size: 48px;
}

header .logo .slogan {
  color: var(--secondary);
  font-size: 48px;
}

.recipe-detail {
  display: flex;
  max-width: 1200px; /* Увеличиваем максимальную ширину */
  margin: 0 auto;
  padding: 20px;
  gap: 40px; /* Расстояние между основным контентом и списком ингредиентов */
}

.main-content {
  flex: 1; /* Основной контент занимает оставшееся пространство */
}

.recipe-title {
  color: var(--primary);
  font-size: 32px;
  margin-bottom: 20px;
}

.recipe-image {
  max-height: 400px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 20px;
}

.recipe-info, .nutritional-value {
  margin-bottom: 20px;
}

.recipe-info h2, .nutritional-value h2 {
  color: var(--secondary);
  margin-bottom: 10px;
}

.recipe-info ul, .nutritional-value ul {
  list-style-type: none;
  padding: 0;
}

.recipe-info li, .nutritional-value li {
  margin-bottom: 5px;
}

.ingredients {
  margin-bottom: 20px;
}

.ingredients h2 {
  color: var(--secondary);
  margin-bottom: 10px;
}

.ingredients ul {
  list-style-type: decimal;
  padding-left: 20px;
}

.steps {
  margin-bottom: 20px;
}

.steps h2 {
  color: var(--secondary);
  margin-bottom: 10px;
}

.step {
  margin-bottom: 20px;
}

.step-description {
  margin-bottom: 10px;
}

.step-image {
  max-height: 200px;
  object-fit: cover;
  border-radius: 10px;
}

.container.position-relative {
  padding-bottom: 2rem; /* Добавляем отступ снизу */
}

.back-button {
  display: block; /* Изменяем на block */
  padding: 10px 20px; /* Увеличиваем отступы для лучшего вида */
  border: 2px solid var(--secondary);
  border-radius: 5px;
  background-color: transparent;
  color: var(--secondary);
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  text-align: center; /* Центрируем текст внутри кнопки */
  position: absolute;
  left: 50%; /* Центрируем по горизонтали */
  transform: translateX(-50%); /* Смещаем на половину ширины кнопки */
}

/* Стили для закреплённого списка ингредиентов */
.sticky-ingredients {
  width: 300px; /* Ширина списка ингредиентов */
  position: sticky;
  top: 20px; /* Отступ сверху */
  align-self: flex-start; /* Выравниваем по верхнему краю */
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Тень для выделения */
}

.sticky-ingredients h2 {
  color: var(--secondary);
  margin-bottom: 10px;
}

.sticky-ingredients ul {
  list-style-type: none;
  padding: 0;
}

.sticky-ingredients li {
  margin-bottom: 10px;
  color: var(--text-dark);
}