.mod-socialauth { margin: 0 0 1.5rem; }
.mod-socialauth__title { font-weight: 600; margin: 0 0 .75rem; text-align:center; }
.mod-socialauth__buttons { display: flex; justify-content: center; align-items: stretch; gap: .75rem; margin-left:auto; margin-right:auto; }
.mod-socialauth--inline .mod-socialauth__buttons { flex-direction: row; flex-wrap: wrap; }
.mod-socialauth--stacked .mod-socialauth__buttons { flex-direction: column; flex-wrap: nowrap; max-width: 420px; }
.mod-socialauth__item { display:flex; flex-direction:column; align-items:stretch; }
.mod-socialauth__button {
  display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
  min-width: 220px; padding: .8rem 1rem; border-radius: .6rem; text-decoration: none;
  border: 1px solid #d6d9de; background: #fff; color: #222; font-weight: 600;
  transition: transform .12s ease, box-shadow .12s ease;
}
.mod-socialauth__button:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.08); text-decoration: none; }
.mod-socialauth__button--facebook { background: #1877f2; border-color: #1877f2; color: #fff; }
.mod-socialauth__button--google { background: #fff; color: #333; }
.mod-socialauth__icon {
  width: 1.5rem; height: 1.5rem; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; font-weight: 700; background: rgba(255,255,255,.18);
}
.mod-socialauth__button--google .mod-socialauth__icon { background: #f1f3f4; }
.mod-socialauth__status { margin-top: .9rem; padding: .8rem 1rem; border-radius: .5rem; background: #eef5ff; color: #11356f; }
.mod-socialauth__facebook-note { margin-top: .45rem; font-size: .92rem; line-height: 1.4; color: #5a6370; text-align: center; max-width: 320px; }
@media (max-width: 640px) {
  .mod-socialauth__buttons,
  .mod-socialauth--inline .mod-socialauth__buttons,
  .mod-socialauth--stacked .mod-socialauth__buttons { flex-direction: column; max-width: 100%; }
  .mod-socialauth__button { width: 100%; }
  .mod-socialauth__item { width: 100%; }
  .mod-socialauth__facebook-note { max-width: none; }
}