/* auth.css — Auth pages stylesheet
 * T11 CSP refactor: externalized from login.html inline <style> blocks.
 * Sources: F6 social login (sess193) + auth logo SVG text classes.
 * Include in every auth page (login / register / forgot-password) after globals.css.
 */

/* === Social login UI (F6 sess193) === */
.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-6) 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}
.btn-google {
  background: var(--color-bg-card);
  color: var(--color-text);
  border: 1.5px solid var(--color-border);
  gap: var(--space-3);
}
.btn-google:hover {
  background: var(--color-bg);
  text-decoration: none;
}
.btn-google__icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

/* === Auth logo SVG text classes (externalized from inline <svg><style>) === */
.al-r    { font-family: Onest, system-ui, sans-serif; font-weight: 800; font-size: 32px; letter-spacing: -1.5px; fill: currentColor; }
.al-tail { font-family: Onest, system-ui, sans-serif; font-weight: 600; font-size: 32px; letter-spacing: -1px;   fill: currentColor; }
.al-ai   { font-family: Onest, system-ui, sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.5px;  fill: currentColor; }

/* === Password strength meter (register / reset-password) — T11 CSP === */
.auth-pwd-strength {
  margin-top: 8px;
}
.auth-pwd-bars {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
}
.auth-pwd-bar {
  height: 4px;
  flex: 1;
  border-radius: 2px;
  background: var(--color-border);
  transition: background .2s;
}
.auth-pwd-label {
  font-size: 12px;
  margin: 0;
  color: var(--color-text-muted);
}

/* === Address row (register) — T11 CSP === */
.auth-addr-row {
  display: flex;
  gap: 12px;
}
.auth-addr-cap {
  flex: 0 0 120px;
}
.auth-addr-city {
  flex: 1;
}

/* === Billing details (register) — T11 CSP === */
.auth-billing-details {
  margin-bottom: 16px;
}
.auth-billing-summary {
  cursor: pointer;
  font-size: 14px;
  color: var(--color-text-secondary);
  padding: 4px 0;
}
.auth-billing-body {
  padding-top: 12px;
}

/* === Login link margin in success message (register) === */
.auth-login-link-ml {
  margin-left: 4px;
}

/* === Email verify loading state (verify) — T11 CSP === */
.auth-verify-loading {
  text-align: center;
  padding: 24px 0;
  color: var(--color-text-muted);
}
.auth-verify-spinner {
  animation: spin 1s linear infinite;
  display: inline-block;
}
.auth-verify-msg {
  margin-top: 12px;
  font-size: 0.9rem;
}
.auth-verify-login {
  margin-top: 16px;
}

/* === Spin animation (verify page) === */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}