/* Полоса согласия на печенье.
   Показывается, пока посетитель не выбрал; счётчик посещаемости до выбора не
   подключается вовсе (см. app/page/general/head.php).

   ⚠️ z-index ниже, чем у окна закрытия сезона (60), — полоса не должна лезть
   поверх диалогов. */

.cookie_bar {
  --cookie-line: var(--transparent-10-w, rgb(255 255 255 / 10%));
  position: fixed;
  z-index: 55;
  right: 1rem;
  bottom: 1rem;
  width: min(30rem, calc(100% - 2rem));
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--cookie-line);
  border-radius: var(--br-16, 16px);
  background: var(--card, #14161c);
  color: var(--text-default);
  box-shadow: 0 18px 44px rgb(0 0 0 / 45%);
  font-family: var(--font-family-1);
}

/* Своё правило нужно: `display: flex` выше перебивает скрытие из таблицы
   браузера, и без этой строки полоса висела бы на экране всегда. */
.cookie_bar[hidden] {
  display: none;
}

.cookie_bar__title {
  margin: 0 0 .35rem;
  font-size: var(--font-size-m, 1rem);
  font-weight: var(--font-weight-7, 700);
  color: var(--text-default);
}

.cookie_bar__text {
  margin: 0;
  font-size: var(--font-size-s, .875rem);
  line-height: 1.5;
  color: var(--text-secondary);
}

.cookie_bar__text a {
  color: var(--span, #ffb648);
  text-decoration: underline;
}

.cookie_bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

/* min-width: 0 обязателен: без него длинная подпись кнопки не даёт ей сжаться
   и полоса распирается за край экрана. */
.cookie_bar__actions .button {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
  text-align: center;
}

.button.cookie_bar__min {
  background: transparent;
  border: 1px solid var(--cookie-line);
  color: var(--text-secondary);
}

.button.cookie_bar__min:hover {
  color: var(--text-default);
  border-color: var(--span, #ffb648);
}

/* ⚠️ На узком экране снизу висит панель навигации высотой 4rem (см. блок
   мобильной адаптации в теме), поэтому полосу поднимаем над ней — иначе она
   накрывает кнопки навигации. */
@media (max-width: 768px) {
  .cookie_bar {
    right: .5rem;
    left: .5rem;
    bottom: calc(4rem + env(safe-area-inset-bottom, 0px) + .5rem);
    width: auto;
    gap: .7rem;
    padding: .85rem .9rem;
    border-radius: var(--br-12, 12px);
  }

  .cookie_bar__actions .button {
    flex: 1 1 100%;
    min-height: 2.75rem;
  }
}