/* ============================================================
   ZASP Social Login Buttons — Modern Bubble Style
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;700&display=swap');

.zasp-social-login {
  width: 100%;
  box-sizing: border-box;
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  margin-bottom: 16px;
}

/* Separator */
.zasp-separator {
  display: flex; align-items: center; gap: 10px;
  margin: 12px 0; color: #94a3b8; font-size: 13px; font-weight: 600;
}
.zasp-separator::before, .zasp-separator::after {
  content: ''; flex: 1; height: 1px; background: #e2e8f0;
}

/* Social button wrapper */
.zasp-social-buttons,
.latl-login_form .zasp-social-buttons,
.zasp-social-login .zasp-social-buttons {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px;
  width: 100%;
}

/* Icon-only layout */
.zasp-style-icon_only .zasp-social-buttons {
  flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px;
}
.zasp-style-icon_only .zasp-social-btn {
  width: 48px; padding: 12px;
  justify-content: center;
}
.zasp-style-icon_only .zasp-social-btn span { display: none; }

/* The button */
.zasp-social-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 11px 20px;
  border-radius: 14px;
  background: #fff;
  color: #1e293b;
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transition: all .25s;
  position: relative;
  overflow: hidden;
  /* Prevent text overflow */
  white-space: nowrap;
  text-overflow: ellipsis;
}

.zasp-social-btn::after {
  content: '';
  position: absolute; inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
  opacity: 0;
  z-index: -1;
  transition: opacity .25s;
}

.zasp-social-btn:hover {
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 20px rgba(99,102,241,.3);
  transform: translateY(-2px);
  text-decoration: none;
}
.zasp-social-btn:hover::after { opacity: 1; }
.zasp-social-btn:hover svg path { fill: #fff !important; }

/* Icon */
.zasp-social-btn svg,
.zasp-social-btn img {
  flex-shrink: 0;
  width: 20px; height: 20px;
  transition: filter .25s;
}
.zasp-social-btn:hover svg { filter: brightness(10); }

/* Text span */
.zasp-social-btn span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Rounded style */
.zasp-style-rounded .zasp-social-btn { border-radius: 50px; }

/* Spacing from surrounding elements */
.zasp-social-login + * { margin-top: 14px; }
* + .zasp-social-login { margin-top: 14px; }

/* Ensure buttons don't inherit dark backgrounds from themes */
.zasp-social-btn,
.zasp-social-btn:visited,
.zasp-social-btn:focus {
  background-color: #fff;
  color: #1e293b;
}
.zasp-social-btn:hover {
  color: #fff !important;
  text-decoration: none !important;
}
.zasp-social-btn svg path,
.zasp-social-btn img {
  transition: filter .25s;
}
.zasp-social-btn:hover svg path { fill: #fff !important; }
.zasp-social-btn:hover img { filter: brightness(10); }

/* ── Login with AJAX modal — force correct button layout ─────── */
/* These rules use high specificity to override anything the AJAX login plugin sets */
.latl-login_form .zasp-social-login,
.woo-login-modal .zasp-social-login,
[class*="login-modal"] .zasp-social-login,
[id*="login-modal"] .zasp-social-login {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 14px !important;
}

.latl-login_form .zasp-social-buttons,
.woo-login-modal .zasp-social-buttons,
[class*="login-modal"] .zasp-social-buttons,
[id*="login-modal"] .zasp-social-buttons {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
  flex-wrap: nowrap !important;
}

.latl-login_form .zasp-social-btn,
.woo-login-modal .zasp-social-btn,
[class*="login-modal"] .zasp-social-btn,
[id*="login-modal"] .zasp-social-btn {
  display: flex !important;
  align-items: center !important;
  flex-direction: row !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 11px 20px !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: #1e293b !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border: 2px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
  margin: 0 !important;
  float: none !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transition: all .25s !important;
}
.latl-login_form .zasp-social-btn:hover,
.woo-login-modal .zasp-social-btn:hover,
[class*="login-modal"] .zasp-social-btn:hover,
[id*="login-modal"] .zasp-social-btn:hover {
  color: #fff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg,#6366f1,#a855f7,#ec4899) !important;
  box-shadow: 0 6px 20px rgba(99,102,241,.3) !important;
}