/* static/css/simple-cookie-banner.css */
/* Баннер cookie consent */
#simple-cookie-banner {
  /* Позиционирование */
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  /* Стили */
  /* Основной синий фон #1976D2 (цвет темы сайта) */
  background-color: #1976D2;
  /* Белый текст для максимального контраста с синим фоном (WCAG AAA) */
  color: #ffffff;
  padding: 15px 20px;
  box-sizing: border-box;
  /* Раскладка Flexbox */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px; /* Увеличенный отступ между текстом и кнопкой */
  /* Другое */
  z-index: 10000; /* Высокий z-index */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Более современный системный шрифт */
  font-size: 16px; /* Немного увеличенный базовый размер шрифта для лучшей читаемости */
  text-align: center;
  /* Анимация появления */
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Более плавная анимация */
  /* Тень для лучшей отделки */
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
}

/* Класс для показа баннера */
#simple-cookie-banner.show {
  transform: translateY(0);
}

/* Ссылки внутри баннера */
#simple-cookie-banner a {
  /* Белый цвет для ссылок на синем фоне (WCAG AAA) */
  color: #ffffff;
  /* Подчеркивание для четкой идентификации ссылки */
  text-decoration: underline;
  /* Убираем наследование font-weight, чтобы подчеркивание было видно */
  font-weight: normal;
}

/* Кнопка согласия */
#simple-cookie-banner button {
  /* Белый фон кнопки для контраста с синим фоном баннера */
  background-color: #ffffff;
  border: 2px solid #ffffff; /* Граница того же цвета для четкости */
  /* Темно-синий текст #0d47a1 для хорошего контраста с белым фоном кнопки (WCAG AAA) */
  color: #0d47a1;
  /* Размеры и отступы */
  padding: 10px 20px; /* Немного увеличены для лучшей кликабельности */
  text-align: center;
  text-decoration: none;
  display: inline-block;
  /* Размер шрифта кнопки */
  font-size: 16px; /* Совпадает с базовым или чуть больше */
  font-family: inherit; /* Наследуем шрифт от родителя */
  /* Полужирный текст кнопки для лучшей видимости */
  font-weight: 600;
  cursor: pointer;
  /* Скругление углов */
  border-radius: 4px;
  /* Анимация при наведении */
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  /* Минимальный размер для удобства нажатия (рекомендуется 44px) */
  min-height: 44px;
  min-width: 44px;
}

/* Состояние при наведении на кнопку */
#simple-cookie-banner button:hover {
  /* Более светлый фон и граница при наведении #f5f5f5 */
  background-color: #f5f5f5;
  border-color: #f5f5f5;
  /* Немного более темный синий текст при наведении #0a3d8a */
  color: #0a3d8a;
  /* Убираем transform, так как он может конфликтовать с border */
  /* transform: scale(1.02); */
}

/* Состояние фокуса (важно для доступности) */
#simple-cookie-banner button:focus {
  /* Четкая фокусная рамка */
  outline: 2px solid #4285f4; /* Ярко-синий цвет для фокуса */
  outline-offset: 2px;
  /* box-shadow можно убрать, если outline достаточно */
  /* box-shadow: 0 0 0 2px #ffffff, 0 0 5px 3px rgba(66, 133, 244, 0.5); */
}

/* Состояние нажатия на кнопку */
#simple-cookie-banner button:active {
  /* Ещё более светлый фон и граница при нажатии #e0e0e0 */
  background-color: #e0e0e0;
  border-color: #e0e0e0;
  /* Ещё более темный синий текст при нажатии #082d64 */
  color: #082d64;
  /* Убираем transform */
  /* transform: scale(0.98); */
}

/* Адаптивность для больших экранов */
@media (min-width: 768px) {
  #simple-cookie-banner {
    /* Горизонтальная раскладка на больших экранах */
    flex-direction: row;
    justify-content: space-between;
    /* Выравнивание текста влево */
    text-align: left;
    /* Увеличиваем внутренние отступы */
    padding: 15px 40px;
    /* Уменьшаем отступ между элементами */
    gap: 20px;
  }
}