/* Кнопки входа через площадки и разделитель к ним.

   Отдельным файлом, потому что партиал partials/oauth_buttons.html
   включается в трёх разных местах: на странице входа, в регистрации и в
   квизе на главной. Раньше стили лежали внутри <style> шаблона
   авторизации, и в квизе кнопка выходила без оформления вовсе — логотип
   VK разворачивался во весь экран, потому что размер задавался как раз
   этими правилами.

   Цвета фирменные, не наши: человек ищет знакомый синий VK и красный
   Яндекс, а не золото бренда. */

.btn-oauth {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin-top: 12px;
  padding: 13px 22px;
  border: 0;
  border-radius: 14px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: filter .16s, transform .16s;
}
.btn-oauth:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-oauth:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* Размер иконки обязателен: без него SVG растягивается по ширине
   контейнера, и кнопка превращается в полотно с логотипом. */
.btn-oauth svg { width: 19px; height: 19px; flex: 0 0 auto; }

.btn-vk { background: linear-gradient(180deg, #5181b8 0%, #4a76a8 60%, #3b6899 100%); }
.btn-yandex { background: linear-gradient(180deg, #fc3f1d 0%, #e8361a 60%, #c92d15 100%); }

/* Разделитель «или войти через». Полоски рисуются псевдоэлементами: без
   них надпись висит в пустоте и не читается как разделитель. */
.divider {
  display: flex;
  align-items: center;
  margin: 22px 0;
  color: var(--text-muted, #8590B4);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--glass-border-2, rgba(170,190,255,.16));
}
.divider span { padding: 0 14px; }

@media (prefers-reduced-motion: reduce) {
  .btn-oauth { transition: none; }
}