:root{
  --wslp-primary:#afcb20;
  --wslp-ink:#111827;
  --wslp-border:#e6e8ec;

  /* Brand colors */
  --g-blue:#4285F4;
  --g-red:#EA4335;
  --g-yellow:#FBBC05;
  --g-green:#34A853;

  --fb:#1877F2;
  --x:#0F1419;
}

/* Контейнери и делимитер */
.wslp-shell{display:block;width:100%; margin-bottom: 20px;}
.wslp-layout-inline{display:inline-block;}
.wslp-divider{
  display:flex;align-items:center;gap:10px;
  margin:16px 0 20px;
  color:#111827;font-size:18px;font-weight:900;letter-spacing:.2px
}
.wslp-divider:before,.wslp-divider:after{content:'';flex:1;height:1px;background:#e5e7eb}

/* Размери — стеснени бутони */
.wslp-size-small .wslp-pill{height:30px}
.wslp-size-medium .wslp-pill{height:34px}
.wslp-size-large .wslp-pill{height:50px}

.wslp-rail{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center
}

/* Плоски бели пил-бутони (иконка само) */
.wslp-pill{
  min-width:50px;padding:0 10px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--wslp-border);background:#fff;
  box-shadow:0 1px 0 rgba(17,24,39,.04), 0 2px 8px rgba(17,24,39,.05);
  transition:
    transform .18s cubic-bezier(.2,.7,.3,1.2),
    box-shadow .18s,
    border-color .18s,
    background .18s,
    outline-color .18s;
  position:relative;overflow:hidden;text-decoration:none;will-change:transform,box-shadow;
  margin-bottom:6px;
  outline:2px solid transparent; outline-offset:2px;
}
.wslp-pill:hover{
  transform:translateY(-2px) scale(1.02);
}
.wslp-pill:active{
  transform:translateY(0) scale(.99);
  box-shadow:0 1px 3px rgba(17,24,39,.12);
}
.wslp-ico{width:30px;height:30px;display:block}

/* Ripple (приглушен) */
.wslp-ripple{position:absolute;border-radius:50%;transform:scale(0);animation:wslpRipple .6s linear;background:rgba(0,0,0,.08)}
@keyframes wslpRipple{to{transform:scale(4);opacity:0}}

/* Provider-специфични hover/focus рингове — плоски, без градиенти */
.wslp-google:hover{
  border-color:var(--g-blue);
  box-shadow:
    0 0 0 3px rgba(66,133,244,.15),
    0 10px 24px rgba(17,24,39,.08);
}
.wslp-google:focus-visible{
  outline-color:var(--g-blue);
}

.wslp-facebook:hover{
  border-color:var(--fb);
  box-shadow:
    0 0 0 3px rgba(24,119,242,.15),
    0 10px 24px rgba(17,24,39,.08);
}
.wslp-facebook:focus-visible{
  outline-color:var(--fb);
}

.wslp-x:hover{
  border-color:var(--x);
  box-shadow:
    0 0 0 3px rgba(15,20,25,.18),
    0 10px 24px rgba(17,24,39,.08);
}
.wslp-x:focus-visible{
  outline-color:var(--x);
}

/* Достъпност — по-малко движение */
@media (prefers-reduced-motion: reduce){
  .wslp-pill{transition:none}
  .wslp-pill:hover{transform:none}
}