/* Frontend styles for VentraConnect Social Login */
.wsc-buttons { display:flex; flex-wrap:wrap; gap:12px; margin:10px 0; align-items:center; }
.wsc-buttons .vcs-btn { flex:0 0 auto; }
.wsc-style-wide { flex-direction:column; align-items:flex-start; gap:12px; }
.wsc-style-wide .vcs-btn { --vcs-wide-justify:flex-start; --vcs-wide-max-width:320px; width:var(--vcs-width, auto); }
.wsc-style-wide .vcs-btn { width:100%; }
.login .wsc-style-wide .vcs-btn { --vcs-wide-max-width:100%; width:100%; padding: 10px; }
.wsc-style-compact { gap:10px; }
.wsc-style-compact .vcs-btn { --vcs-compact-size:44px; --vcs-compact-icon-size:40px; --vcs-radius:0px; }
.wsc-style-compact .vcs-btn:hover { box-shadow:0 2px 6px rgba(15,23,42,.15); }
.wsc-buttons .wsc-linked { font-weight:500; color:#2c3338; }
/* WP login context adjustments */
.login .wsc-buttons { margin:12px 0; }
.login .vcs-login-divider {
  display:flex;
  align-items:center;
  gap:12px;
  margin:50px 0 20px;
  font-size:12px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#6b7280;
}
.login .vcs-login-divider::before,
.login .vcs-login-divider::after {
  content:"";
  flex:1 1 auto;
  height:1px;
  background:#d1d5db;
}
.login .vcs-login-divider span { display:inline-block; }

/* Legacy button compatibility */
.wsc-button { display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:4px; border:1px solid rgba(0,0,0,0.08); background:#f3f4f6; color:#111827; text-decoration:none; font-weight:600; cursor:pointer; }
.wsc-button:hover { background:#e5e7eb; }
.wsc-button:focus { outline:2px solid #005fcc; outline-offset:2px; }
.wsc-button img { width:28px !important; height:28px !important; display:inline-block; object-fit:contain; }
.wsc-button-google { background:#F5F5F5; color:#363636; width: 100%; }
.wsc-button-facebook { background:#1877F2; color: #ffffff; width: 100%;}

.wsc-style-compact .wsc-button {

  padding:0px 0px;
}

/* Brand backgrounds for compact/wide buttons */
.wsc-button-github { background:#24292E; color:#fff; }
.wsc-button-spotify { background:#1DB954; color:#fff; }
.wsc-button-twitter,.wsc-button-x { background:#000; color:#fff; width: 100%; }
.wsc-button-linkedin { background:#0A66C2; color:#fff; }
.wsc-button-slack { background:#4A154B; color:#fff; }
.wsc-button-microsoft { background:#2F2F2F; color:#fff; }
.wsc-button-amazon { background:#232F3E; color:#FF9900; }
.wsc-button-yahoo { background:#6001D2; color:#fff; }
.wsc-button-wordpress { background:#0087BE; color:#fff; }
.wsc-button-discord { background:#5865F2; color:#fff; }
.wsc-button-line { background:#06C755; color:#fff; }
.wsc-button-tiktok { background:#000; color:#fff; }

/* Social provider badge next to avatars (comments) */
.vcs-badge { display:inline-block; width:16px; height:16px; margin-left:4px; vertical-align:middle; background-size:contain; background-repeat:no-repeat; background-position:center; }
.vcs-badge-google { background-image:url('../img/provider-icons/google.svg'); }
.vcs-badge-facebook { background-image:url('../img/provider-icons/facebook.svg'); }
.vcs-badge-github { background-image:url('../img/provider-icons/github.svg'); }
.vcs-badge-microsoft { background-image:url('../img/provider-icons/microsoft.svg'); }
.vcs-badge-linkedin { background-image:url('../img/provider-icons/linkedin.svg'); }
.vcs-badge-amazon { background-image:url('../img/provider-icons/amazon.svg'); }
.vcs-badge-yahoo { background-image:url('../img/provider-icons/yahoo.svg'); }
.vcs-badge-wordpress { background-image:url('../img/provider-icons/wordpress.svg'); }
.vcs-badge-discord { background-image:url('../img/provider-icons/discord.svg'); }
.vcs-badge-spotify { background-image:url('../img/provider-icons/spotify.svg'); }
.vcs-badge-line { background-image:url('../img/provider-icons/line.svg'); }
.vcs-badge-twitter { background-image:url('../img/provider-icons/twitter.svg'); }
.vcs-badge-twitch { background-image:url('../img/provider-icons/twitch.svg'); }
.vcs-badge-reddit { background-image:url('../img/provider-icons/reddit.svg'); }
.vcs-badge-tiktok { background-image:url('../img/provider-icons/tiktok.svg'); }
.vcs-badge-slack { background-image:url('../img/provider-icons/slack.svg'); }