/* =============================================================
 * AI Smart Login Pro v7 — Universal Social Gateway styles
 * Distinct, brand-authentic social buttons with premium micro-
 * interactions. RTL/LTR safe. Light mode only.
 * ============================================================= */

.aislp-sg {
  --sg-radius: 14px;
  --sg-radius-pill: 999px;
  --sg-height-md: 46px;
  --sg-height-sm: 38px;
  --sg-height-lg: 54px;
  --sg-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Tajawal, system-ui, sans-serif;
  --sg-fg: var(--aislp-fg, #111827);
  --sg-fg-2: var(--aislp-fg-2, #4b5563);
  --sg-line: var(--aislp-line, rgba(0,0,0,.08));
  --sg-bg: var(--aislp-bg, #ffffff);
  --sg-shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.06);
  --sg-shadow-hover: 0 6px 20px rgba(16,24,40,.10), 0 3px 6px rgba(16,24,40,.06);
  font-family: var(--sg-font);
  color: var(--sg-fg);
}
/* -- Header --------------------------------------------------- */
.aislp-sg__head {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 10px;
  color: var(--sg-fg-2); font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}
.aislp-sg__head::before, .aislp-sg__head::after {
  content: ""; flex: 1 1 auto; height: 1px;
  background: linear-gradient(90deg, transparent, var(--sg-line), transparent);
}

/* -- Continue-as pill ---------------------------------------- */
.aislp-sg__continue {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; margin-bottom: 12px;
  border-radius: var(--sg-radius);
  background: linear-gradient(135deg, rgba(109,40,217,.08), rgba(245,158,11,.06));
  border: 1px solid var(--sg-line);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease;
}
.aislp-sg__continue:hover { transform: translateY(-1px); box-shadow: var(--sg-shadow-hover); }
.aislp-sg__continue-icon { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; color: #fff; }
.aislp-sg__continue-body { flex: 1; text-align: start; }
.aislp-sg__continue-hint { font-size: 11px; color: var(--sg-fg-2); }
.aislp-sg__continue-label { font-size: 14px; font-weight: 700; }

/* -- Grid layouts ------------------------------------------- */
.aislp-sg__grid { display: grid; gap: 10px; }
.aislp-sg[data-layout="grid"] .aislp-sg__grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.aislp-sg[data-layout="list"] .aislp-sg__grid { grid-template-columns: 1fr; }
.aislp-sg[data-layout="stacked"] .aislp-sg__grid { grid-template-columns: 1fr; gap: 6px; }
.aislp-sg[data-layout="grid"][data-size="sm"] .aislp-sg__grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }

/* Compact icon-only row (used when many providers active) */
.aislp-sg--icons { display: flex; flex-wrap: wrap; gap: 8px; }
.aislp-sg--icons .aislp-sg-btn { padding: 0; width: 46px; height: 46px; }
.aislp-sg--icons .aislp-sg-btn__label,
.aislp-sg--icons .aislp-sg-btn__prefix { display: none; }

/* -- The button --------------------------------------------- */
.aislp-sg-btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--sg-height-md);
  padding: 0 14px;
  border-radius: var(--sg-radius);
  border: 1px solid var(--sg-line);
  background: var(--sg-bg); color: var(--sg-fg);
  font: 600 14px/1 var(--sg-font);
  cursor: pointer; user-select: none;
  transition: transform .16s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
  overflow: hidden;
  box-shadow: var(--sg-shadow);
  text-decoration: none;
}
.aislp-sg[data-size="sm"] .aislp-sg-btn { height: var(--sg-height-sm); font-size: 13px; padding: 0 12px; }
.aislp-sg[data-size="lg"] .aislp-sg-btn { height: var(--sg-height-lg); font-size: 15px; padding: 0 18px; }
.aislp-sg[data-shape="pill"] .aislp-sg-btn { border-radius: var(--sg-radius-pill); }
.aislp-sg[data-shape="square"] .aislp-sg-btn { border-radius: 8px; }

.aislp-sg-btn:hover { transform: translateY(-1px); box-shadow: var(--sg-shadow-hover); }
.aislp-sg-btn:active { transform: translateY(0) scale(.98); }
.aislp-sg-btn:focus-visible { outline: 2px solid var(--aislp-primary, #6d28d9); outline-offset: 2px; }
.aislp-sg-btn[disabled] { opacity: .5; cursor: wait; }
.aislp-sg-btn__icon { display: inline-flex; }
.aislp-sg-btn__label { white-space: nowrap; }
.aislp-sg-btn__prefix { color: currentColor; opacity: .7; margin-inline-end: 4px; }

/* Ripple */
.aislp-sg-btn::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle at var(--x,50%) var(--y,50%), rgba(255,255,255,.35) 0%, transparent 40%);
  opacity: 0; transition: opacity .5s ease;
  pointer-events: none;
}
.aislp-sg-btn.is-ripple::after { opacity: 1; transition: opacity 0s; animation: aislp-sg-ripple .6s ease-out; }
@keyframes aislp-sg-ripple { to { opacity: 0; } }

/* Loading spinner overlay */
.aislp-sg-btn.is-loading .aislp-sg-btn__label { visibility: hidden; }
.aislp-sg-btn.is-loading::before {
  content: ""; position: absolute; width: 18px; height: 18px;
  border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent;
  animation: aislp-sg-spin .7s linear infinite;
}
@keyframes aislp-sg-spin { to { transform: rotate(360deg); } }

/* -- Brand mode: each provider gets its own real color ------ */
.aislp-sg[data-style="brand"] .aislp-sg-btn { color: var(--sg-btn-text, #fff); background: var(--sg-btn-bg, #111); border-color: transparent; }
.aislp-sg[data-style="brand"] .aislp-sg-btn:hover { filter: brightness(1.08) saturate(1.05); }

/* Provider-specific tweaks — subtle differentiators */
.aislp-sg-btn[data-provider="google"][data-style="brand"] {
  --sg-btn-bg: #ffffff; --sg-btn-text: #1f1f1f; border: 1px solid #dadce0;
}
.aislp-sg-btn[data-provider="apple"][data-style="brand"] { --sg-btn-bg: #000; --sg-btn-text: #fff; }
.aislp-sg-btn[data-provider="microsoft"][data-style="brand"] { --sg-btn-bg: #2f2f2f; --sg-btn-text: #fff; }
.aislp-sg-btn[data-provider="facebook"][data-style="brand"] { --sg-btn-bg: #1877F2; --sg-btn-text: #fff; }
.aislp-sg-btn[data-provider="github"][data-style="brand"]   { --sg-btn-bg: #24292F; --sg-btn-text: #fff; }
.aislp-sg-btn[data-provider="linkedin"][data-style="brand"] { --sg-btn-bg: #0A66C2; --sg-btn-text: #fff; }
.aislp-sg-btn[data-provider="x"][data-style="brand"]        { --sg-btn-bg: #000; --sg-btn-text: #fff; }
.aislp-sg-btn[data-provider="discord"][data-style="brand"]  { --sg-btn-bg: #5865F2; --sg-btn-text: #fff; }
.aislp-sg-btn[data-provider="tiktok"][data-style="brand"]   { --sg-btn-bg: #010101; --sg-btn-text: #fff; position: relative; }
.aislp-sg-btn[data-provider="tiktok"][data-style="brand"]::before { box-shadow: -2px 0 0 #25F4EE, 2px 0 0 #FE2C55; }
.aislp-sg-btn[data-provider="amazon"][data-style="brand"]   { --sg-btn-bg: #FF9900; --sg-btn-text: #131A22; }
.aislp-sg-btn[data-provider="yahoo"][data-style="brand"]    { --sg-btn-bg: #6001D2; --sg-btn-text: #fff; }
.aislp-sg-btn[data-provider="twitch"][data-style="brand"]   { --sg-btn-bg: #9146FF; --sg-btn-text: #fff; }
.aislp-sg-btn[data-provider="spotify"][data-style="brand"]  { --sg-btn-bg: #1DB954; --sg-btn-text: #000; }
.aislp-sg-btn[data-provider="slack"][data-style="brand"]    { --sg-btn-bg: #4A154B; --sg-btn-text: #fff; }
.aislp-sg-btn[data-provider="gitlab"][data-style="brand"]   { --sg-btn-bg: linear-gradient(135deg, #FC6D26, #E24329); --sg-btn-text: #fff; }
.aislp-sg-btn[data-provider="gitlab"][data-style="brand"]   { background: linear-gradient(135deg, #FC6D26, #E24329); }

/* -- Outline style ------------------------------------------ */
.aislp-sg[data-style="outline"] .aislp-sg-btn {
  background: var(--sg-bg); color: var(--sg-fg);
  border: 1.5px solid var(--sg-btn-bg, var(--sg-line));
}
.aislp-sg[data-style="outline"] .aislp-sg-btn:hover {
  background: color-mix(in oklab, var(--sg-btn-bg, #6d28d9) 8%, var(--sg-bg));
}

/* -- Ghost --------------------------------------------------- */
.aislp-sg[data-style="ghost"] .aislp-sg-btn {
  background: transparent; box-shadow: none; border-color: transparent;
}
.aislp-sg[data-style="ghost"] .aislp-sg-btn:hover {
  background: color-mix(in oklab, var(--sg-btn-bg, #6d28d9) 10%, transparent);
}

/* -- Google GSI button shell (Google requires their own render) - */
.aislp-sg__gsi { min-height: 44px; display: flex; justify-content: center; }
.aislp-sg__gsi > div { max-width: 100%; }

/* -- Show more / less ---------------------------------------- */
.aislp-sg__more {
  background: transparent; border: none; padding: 6px 8px;
  color: var(--aislp-primary, #6d28d9); font: 600 13px var(--sg-font);
  cursor: pointer; margin: 8px auto 0; display: block;
}
.aislp-sg__more:hover { text-decoration: underline; }

/* -- Overlay while a popup is running ------------------------ */
.aislp-sg__overlay {
  position: fixed; inset: 0; z-index: 100000;
  background: rgba(9,10,20,.55); backdrop-filter: blur(4px);
  display: grid; place-items: center; opacity: 0; pointer-events: none;
  transition: opacity .18s ease;
}
.aislp-sg__overlay.is-open { opacity: 1; pointer-events: auto; }
.aislp-sg__overlay-card {
  background: #fff; color: #111;
  border-radius: 20px; padding: 22px 28px;
  min-width: 260px; text-align: center;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.aislp-sg__spinner {
  width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid currentColor; border-top-color: transparent;
  animation: aislp-sg-spin .8s linear infinite;
  color: var(--aislp-primary, #6d28d9);
}

/* -- No-email notice ---------------------------------------- */
.aislp-sg__notice {
  margin-top: 8px; padding: 8px 10px; border-radius: 10px;
  background: rgba(245,158,11,.10); color: #b45309;
  font-size: 12px; text-align: center;
}
/* -- Linked accounts manager --------------------------------- */
.aislp-sm { display: grid; gap: 10px; max-width: 620px; }
.aislp-sm__item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--sg-line); background: var(--sg-bg);
}
.aislp-sm__icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.aislp-sm__body { flex: 1; text-align: start; }
.aislp-sm__label { font-weight: 700; font-size: 14px; }
.aislp-sm__sub { font-size: 12px; color: var(--sg-fg-2); }
.aislp-sm__btn {
  padding: 6px 12px; border-radius: 8px; border: 1px solid var(--sg-line);
  background: transparent; color: var(--sg-fg); cursor: pointer; font-weight: 600; font-size: 12px;
  transition: all .15s ease;
}
.aislp-sm__btn:hover { background: rgba(239,68,68,.1); color: #dc2626; border-color: #fca5a5; }
.aislp-sm__btn--connect:hover { background: rgba(34,197,94,.10); color: #16a34a; border-color: #86efac; }

@media (max-width: 480px) {
  .aislp-sg[data-layout="grid"] .aislp-sg__grid { grid-template-columns: 1fr 1fr; }
  .aislp-sg-btn__label { font-size: 13px; }
}

/* =============================================================
 * v9.5.6 — Google button refinement
 * Brand-accurate "Continue with Google" button, hardened against
 * theme styles that break the layout (RTL, block children, huge
 * line-heights, forced font sizes) and a safe GSI widget shell.
 * ============================================================= */

.aislp-sg .aislp-sg-btn[data-provider="google"] {
  --sg-btn-bg: #ffffff;
  --sg-btn-text: #1f1f1f;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px;
  width: 100%;
  min-height: var(--sg-height-md);
  padding: 0 16px;
  background: #fff;
  color: #1f1f1f;
  border: 1px solid #dadce0;
  box-shadow: 0 1px 2px rgba(60,64,67,.16);
  font-family: "Roboto", var(--sg-font);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  letter-spacing: .15px;
  text-align: center;
  white-space: nowrap;
}
.aislp-sg[data-size="lg"] .aislp-sg-btn[data-provider="google"] { min-height: var(--sg-height-lg); font-size: 15px; }
.aislp-sg[data-size="sm"] .aislp-sg-btn[data-provider="google"] { min-height: var(--sg-height-sm); font-size: 13px; }

.aislp-sg .aislp-sg-btn[data-provider="google"]:hover {
  background: #f8faff;
  border-color: #d2e3fc;
  box-shadow: 0 1px 3px rgba(60,64,67,.24), 0 2px 8px rgba(60,64,67,.12);
  filter: none;
}
.aislp-sg .aislp-sg-btn[data-provider="google"]:active { background: #f1f3f4; }
.aislp-sg .aislp-sg-btn[data-provider="google"]:focus-visible {
  outline: 2px solid #1a73e8; outline-offset: 2px;
}
.aislp-sg .aislp-sg-btn[data-provider="google"] .aislp-sg-btn__icon {
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
}
.aislp-sg .aislp-sg-btn[data-provider="google"] .aislp-sg-btn__icon svg,
.aislp-sg .aislp-sg-btn[data-provider="google"] .aislp-sg-btn__icon img {
  width: 100%; height: 100%; display: block; margin: 0;
}
.aislp-sg .aislp-sg-btn[data-provider="google"] .aislp-sg-btn__label {
  display: inline-block !important;
  width: auto;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Google's guidelines: never tint the mark on hover/ripple */
.aislp-sg .aislp-sg-btn[data-provider="google"]::after { background: radial-gradient(circle at var(--x,50%) var(--y,50%), rgba(26,115,232,.16) 0%, transparent 45%); }

/* Native GSI widget shell: center it and stop themes from stretching it */
.aislp-sg__gsi {
  min-height: 44px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  direction: ltr;
  overflow: hidden;
}
.aislp-sg__gsi > div,
.aislp-sg__gsi iframe {
  max-width: 100% !important;
  margin: 0 auto !important;
  float: none !important;
}