/* catalog/view/theme/default/stylesheet/social_login.css */

.social-login-buttons {
  margin: 20px 0;
}
.social-login-buttons .buttons.clearfix {
  display: flex;
  flex-direction: column;
  gap: 10px; /* Добавляем отступ между кнопками */
}

.yandex-login-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 44px;
  padding: 0 16px;
  /* Используем CSS-переменную для радиуса. 8px - значение по умолчанию */
  border-radius: var(--sl-yandex-radius, 8px);
  text-decoration: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  transition: filter 0.2s ease-in-out;
  cursor: pointer;
  border: 1px solid transparent;
  width: 100%;
}

.yandex-login-button:hover {
  filter: brightness(0.95);
}
.yandex-login-button:active {
  filter: brightness(0.9);
  transform: translateY(1px);
}

.yandex-login-button__icon {
  display: flex;
  align-items: center;
  width: 24px;
  height: 24px;
  margin-right: 12px;
}

.yandex-login-button__icon svg {
  width: 100%;
  height: 100%;
}

.yandex-login-button__text {
  position: relative;
  top: 1px; /* Небольшая коррекция для вертикального выравнивания текста */
  margin-left: 8px;
  font-family: Arial,
  sans-serif;
  font-weight: 500;
}

/* === Цветовые схемы кнопки Yandex === */
.yandex-login-button--yellow {
  background-color: #FFDE00;
  color: #000000;
}
/* 2. Светлая схема (Переработана) */
.yandex-login-button--light {
  background-color: #f5f5f5; /* Вместо чисто белого - мягкий светло-серый */
  color: #212121; /* Вместо чисто черного - очень темный серый для текста */
  border: 1px solid #e0e0e0; /* Более мягкая рамка */
}
.yandex-login-button--light:hover {
   background-color: #ebebeb; /* Плавное затемнение фона при наведении */
   border-color: #d1d1d1;   /* Рамка становится чуть заметнее */
   filter: none; /* Отключаем общий filter, чтобы использовать свои цвета */
}

/* 3. Темная схема (Переработана) */
.yandex-login-button--dark {
  background-color: #2c2c2c; /* Вместо чисто черного - глубокий темно-серый */
  color: #f0f0f0; /* Вместо чисто белого - мягкий светло-серый для текста */
  border: 1px solid #444;   /* Слегка заметная рамка для выделения */
}
.yandex-login-button--dark:hover {
   background-color: #3a3a3a; /* Плавное осветление фона при наведении */
   border-color: #555;      /* Рамка становится чуть светлее */
   filter: none; /* Отключаем общий filter, чтобы использовать свои цвета */
}
.yandex-login-button__icon {
  display: flex;
  align-items: center;
  /* [ИЗМЕНЕНО] Убираем фиксированный размер отсюда */
  margin-right: 12px;
}

.yandex-login-button__icon svg {
  width: 100%;
  height: 100%;
}


/* === Стили для кнопки Сбер ID (Sber) === */
.sber-login-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-family: -apple-system, system-ui, sans-serif;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    width: 100%;
}

.sber-login-button:hover {
    filter: brightness(0.95);
}

.sber-login-button svg {
    /* Базовый отступ от текста */
    margin-right: 12px;
    /* Размер иконки теперь задается классами ниже */
}

/* Размеры кнопок (только геометрия, которая не зависит от цвета) */
.sber-login-button--size-s {
    /* Высота и размер шрифта задаются инлайн-стилем из PHP */
    padding: 0 16px;
    border-radius: 6px;
}

.sber-login-button--size-m {
    /* Высота и размер шрифта задаются инлайн-стилем из PHP */
    padding: 0 20px;
    border-radius: 8px;
}

.sber-login-button--size-l {
    /* Высота и размер шрифта задаются инлайн-стилем из PHP */
    padding: 0 24px; 
    border-radius: 12px;
}

/* [ИСПРАВЛЕНО] Размеры ИКОНКИ в зависимости от размера кнопки */
.sber-login-button--size-s svg {
    width: 16px;
    height: 16px;
}

.sber-login-button--size-m svg {
    width: 22px;
    height: 22px;
}

.sber-login-button--size-l svg {
    width: 26px;
    height: 26px;
}