/* "Apple / Google sign in creates a different account" warning — same dialog conventions as
   the other v2 popups. */

/* Below the dialog/toast layer (9999 in lib/dialog.css) and above every page element. */
#social-login-warning-overlay{
  display:none;position:fixed;inset:0;z-index:9000;
  background:rgba(0,0,0,.72);align-items:center;justify-content:center;
  backdrop-filter:blur(1px);padding:24px 12px;overflow-y:auto
}
#social-login-warning-overlay.visible{display:flex}

.social-login-warning-box{
  position:relative;background:var(--card);
  border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-lg);
  width:100%;max-width:420px;margin:auto;padding:24px 20px 20px;text-align:center
}

/* Icon and title on one line, like a heading with its mark. */
.social-login-warning-head{
  display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:14px
}
.social-login-warning-icon{font-size: 1.5rem;line-height:1;flex:0 0 auto}
.social-login-warning-title{
  margin:0;font-size: 1.125rem;font-weight:700;color:var(--t1)
}

/* The question the whole popup hangs on, read first: the player who answers "no" can go on
   without reading further. */
.social-login-warning-question{
  margin:0 0 12px;padding:10px 14px;
  border-radius:var(--r);background:var(--raised);border:1px solid var(--border2);
  font-size: 0.9375rem;font-weight:700;line-height:1.4;color:var(--primary)
}

.social-login-warning-msg{
  margin:0 0 10px;font-size: 0.875rem;line-height:1.5;color:var(--t2);text-align:left
}

/* The way back into the existing account, right where the explanation ends. */
.social-login-warning-forgot{
  display:inline-block;margin:2px 0 0;font-size: 0.875rem;color:var(--primary)
}

/* "Never again", set apart from the warning above it: a quiet line the player has to mean to
   tick, with the whole row clickable. */
.social-login-warning-dont-show{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--border);
  font-size: 0.8125rem;color:var(--t3);cursor:pointer
}
.social-login-warning-dont-show input{
  width:16px;height:16px;margin:0;flex-shrink:0;
  accent-color:var(--primary);cursor:pointer
}

/* The provider button first, full attention, and the quiet way out under it. */
.social-login-warning-actions{
  display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:18px
}
.social-login-warning-provider{display:flex;justify-content:center;width:100%}
/* The page buttons space themselves from the Google one above them; not needed here. */
.social-login-warning-provider .apple-signin-btn,
.social-login-warning-provider .google-native-btn{margin:0}