/* === CSS: Переменные (тема, шрифт, отступы, анимации) === */
:root {
  /* Цвета */
  --color-bg: #111827; /* Тёмный цвет фона */
  --color-text: #f9fafb; /* Цвет текста для тёмной темы */
  --color-muted: #9ca3af; /* Цвет для менее заметного текста */
  --color-primary: #2563eb; /* Основной цвет */
  --color-border: #374151; /* Тёмный цвет границ */
  --color-code-bg: #1f2937; /* Цвет фона для кода - тёмная тема */
  --color-highlight: #facc15; /* Цвет выделения */

  --color-red: #b91c1c; /* Красный цвет */
  --color-red-border: #ef4444; /* Граница красного цвета */
  --color-green: #15803d; /* Зелёный цвет */
  --color-green-border: #22c55e; /* Граница зелёного цвета */
  --color-yellow-border: #fde68a; /* Граница жёлтого цвета */
  --color-yellow-bg: #2b2b1b; /* Фон жёлтого цвета */
  --color-red-bg: #261c1c; /* Фон красного цвета */

  /* Шрифты */
  --font-main: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Основной шрифт */
  --font-mono: 'Fira Code', 'Courier New', monospace; /* Моноширинный шрифт */

  /* Размеры */
  --radius: 0.5rem; /* Радиус углов */
  --padding: 1rem; /* Общие отступы */
  --padding-sm: 0.5rem; /* Маленькие отступы */
  --gap: 1rem; /* Промежутки */
  --max-width: 1100px; /* Максимальная ширина контейнера */
  --search-section-height: 210px; /* Высота секции поиска */
  
  /* Анимации */
  --blink-speed: 1s; /* Скорость мигания */
}

/* === Сброс и базовые стили === */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-main);
  background-color: var(--color-bg);
  color: var(--color-text);
  padding: var(--padding);
  line-height: 1.6;
  font-size: 1rem;
  max-width: var(--max-width);
  margin: 0 auto;
}

/* === Фиксированный верхний блок поиска === */
#search-section {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--max-width);
  background-color: var(--color-bg);
  padding: var(--padding);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

main {
  padding-top: var(--search-section-height);
}

h1, h2, h3, h4 {
  margin-bottom: 0.5em;
  line-height: 1.2;
  color: var(--color-text); /* Цвет заголовков */
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
  margin-top: 2rem;
}

/* === Поле поиска === */
input#search {
  font-size: 1rem;
  padding: var(--padding-sm);
  width: 100%;
  max-width: 500px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: var(--gap);
  transition: border 0.2s;
}

input#search:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
}

/* === Результаты === */
#results-container {
  max-height: 50vh; /* или 300px — на ваш выбор */
  overflow-y: auto;
  border: 1px solid var(--color-border);
  padding: var(--padding-sm);
  border-radius: var(--radius);
  background: var(--color-bg); /* Цвет фона для контейнера */
  scroll-behavior: smooth;
  margin-bottom: var(--gap);
}

#results p {
  color: var(--color-text); /* Цвет текста для параграфа */
}

#results, #warnings {
  margin-bottom: var(--gap);
  font-size: 1rem;
}

#results ul, #warnings ul {
  list-style: none;
  padding-left: 0;
}

#results li, #warnings li {
  margin-bottom: 0.5em;
  color: var(--color-text); /* Цвет текста для списка */
}

/* === Карточки стран === */
.country-block {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--padding);
  margin-bottom: var(--gap);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
}

.group-block {
  margin-top: var(--padding-sm);
  padding-left: var(--padding-sm);
  border-left: 3px solid var(--color-primary);
}

#knowledge-base {
  max-height: calc(100vh - var(--search-section-height) - 60px);
  overflow-y: auto;
  padding-right: 0.5rem;
}

code {
  background-color: var(--color-code-bg);
  border-radius: 0.3rem;
  padding: 0.2em 0.4em;
  font-family: var(--font-mono);
  font-size: 0.95em;
}

/* === Индикаторы: статус и дата === */
.flag-status {
  font-weight: bold;
  padding: 0.2em 0.4em;
  border-radius: var(--radius);
  font-size: 0.85em;
  border: 1px solid;
  display: inline-block;
  margin-left: 1rem;
  color: var(--color-text); /* Цвет текста для статуса */
}

.flag-status-test {
  color: var(--color-red);
  border-color: var(--color-red-border);
  animation: blink-red var(--blink-speed) infinite;
}

.flag-status-real {
  color: var(--color-green);
  border-color: var(--color-green-border);
}

@keyframes blink-red {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.last-updated {
  margin-left: 1rem;
  font-size: 0.8rem;
  color: var(--color-muted);
}

/* === Цветной результат поиска === */
.country-result {
  padding: var(--padding-sm);
  margin-bottom: var(--gap);
  border: 1px solid;
  border-radius: var(--radius);
}

.country-result-0 {
  border-color: var(--color-red-border);
  background-color: var(--color-red-bg);
}

.country-result-1 {
  border-color: var(--color-yellow-border);
  background-color: var(--color-yellow-bg);
}

/* === Адаптивность === */
@media (max-width: 768px) {
  h1 {
    font-size: 1.5rem;
  }
  h2 {
    font-size: 1.25rem;
  }
  input#search {
    font-size: 0.95rem;
  }
  .country-block {
    padding: 0.75rem;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 0.9rem;
    padding: 0.5rem;
  }
  input#search {
    font-size: 0.85rem;
    padding: 0.5rem;
  }
  code {
    font-size: 0.85rem;
  }
}