/* =====================================================================
   LIYOG WORLD — auth-ui.css
   Styles for the signup/login flow. Loaded only alongside auth-ui.js.
   Reuses the same design tokens as profile.css for visual consistency.
   ===================================================================== */

.lp-auth-card {
  max-width: 420px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl, 24px);
  padding: 32px 28px;
  box-shadow: var(--shadow-md);
  text-align: center;
  animation: lp-fade-in 0.3s ease;
}
.lp-auth-card h2 {
  font-family: var(--font-display);
  font-size: 22px;
  margin: 0 0 8px;
}
.lp-auth-sub {
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.5;
  margin: 0 0 20px;
}

.lp-consent-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 18px;
  cursor: pointer;
}
.lp-consent-row input { margin-top: 3px; flex-shrink: 0; width: 16px; height: 16px; }

#lp-google-btn-slot { display: flex; justify-content: center; margin-bottom: 14px; }

.lp-auth-fineprint { font-size: 11.5px; color: var(--ink-faint); margin: 0; line-height: 1.5; }
.lp-auth-error { color: var(--liyog-red); font-size: 13.5px; }

.lp-auth-loading {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px; color: var(--ink-soft); font-size: 14px;
}
.lp-auth-spinner {
  width: 18px; height: 18px; border: 2.5px solid var(--line);
  border-top-color: var(--liyog-blue); border-radius: 50%;
  animation: lp-spin 0.7s linear infinite;
}
@keyframes lp-spin { to { transform: rotate(360deg); } }

.lp-welcome-row {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 13.5px; color: var(--ink-soft); margin-bottom: 18px;
}
.lp-welcome-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }

.lp-field-label {
  display: block; text-align: left; font-size: 13px; font-weight: 700;
  color: var(--ink); margin: 16px 0 6px;
}
.lp-field-input {
  width: 100%; height: 46px; border: 1px solid var(--line); border-radius: var(--r-md, 16px);
  padding: 0 14px; font-family: var(--font-body); font-size: 15px; color: var(--ink);
  background: var(--surface-soft, var(--bg));
  transition: border-color 0.2s ease;
}
.lp-field-input:focus { outline: none; border-color: var(--liyog-blue); }

.lp-slug-input-wrap {
  display: flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-md, 16px);
  overflow: hidden; background: var(--surface-soft, var(--bg));
}
.lp-slug-prefix {
  padding: 0 0 0 14px; font-size: 13px; color: var(--ink-faint); white-space: nowrap;
}
.lp-slug-input { border: none; background: transparent; }
.lp-slug-input:read-only { color: var(--ink-soft); cursor: not-allowed; background: var(--line); }
.lp-slug-input:focus { outline: none; }
.lp-slug-status { text-align: left; font-size: 12.5px; margin: 6px 0 0; min-height: 16px; }
.lp-slug-checking { color: var(--ink-faint); }
.lp-slug-ok { color: var(--liyog-green); font-weight: 600; }
.lp-slug-taken { color: var(--liyog-red); font-weight: 600; }

.lp-submit-btn { width: 100%; margin-top: 22px; }
.lp-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.lp-existing-profiles { display: flex; flex-direction: column; gap: 10px; }
.lp-existing-profile-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md, 16px);
  text-decoration: none; color: var(--ink); font-weight: 600; font-size: 14.5px;
  transition: border-color 0.2s ease;
}
.lp-existing-profile-link:hover { border-color: var(--liyog-blue); }
.lp-status-badge {
  font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  text-transform: uppercase;
}
.lp-status-approved { background: rgba(37,211,102,0.15); color: #1B7A3D; }
.lp-status-pending { background: rgba(212,175,55,0.15); color: #8A6D1F; }
.lp-status-rejected { background: rgba(255,59,48,0.15); color: #C4291F; }

.lp-auth-success .lp-success-icon {
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(37,211,102,0.12);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
  animation: lp-pop-in 0.4s var(--ease, ease) 0.1s backwards;
}