/*
 * ============================================================
 *  WealthNub Fintech Design System — Auth Layer  v1.0
 *  fintech-auth.css
 *
 *  Styles specific to login / register / forgot / reset /
 *  verify pages. Depends on fintech-ds.css for tokens.
 * ============================================================
 */

/* ----------------------------------------------------------------
   AUTH PAGE ROOT
   ---------------------------------------------------------------- */
.wn-auth-page {
  min-height: 100vh;
  background: var(--wn-bg-deep);
  display: flex;
  align-items: stretch;
  font-family: var(--wn-font-sans);
  color: var(--wn-text-primary);
  position: relative;
  overflow: hidden;
}

/* Animated background grid */
.wn-auth-page::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(30,179,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,179,255,0.025) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}

/* ----------------------------------------------------------------
   SPLIT LAYOUT
   ---------------------------------------------------------------- */
.wn-auth-split {
  display: flex;
  width: 100%;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

/* LEFT PANEL — branding / trust messaging */
.wn-auth-panel--brand {
  flex: 0 0 45%;
  background: linear-gradient(
    145deg,
    rgba(20, 24, 32, 0.98) 0%,
    rgba(11, 14, 20, 0.99) 100%
  );
  border-right: 1px solid var(--wn-border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--wn-sp-10) var(--wn-sp-12);
  position: relative;
  overflow: hidden;
}

/* Accent blob in brand panel */
.wn-auth-panel--brand::after {
  content: '';
  position: absolute;
  bottom: -100px;
  left: -80px;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(30,179,255,0.08), transparent 65%);
  pointer-events: none;
}

/* RIGHT PANEL — form */
.wn-auth-panel--form {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--wn-sp-8) var(--wn-sp-6);
  background: var(--wn-bg-deep);
  position: relative;
}

/* ----------------------------------------------------------------
   AUTH FORM CARD
   ---------------------------------------------------------------- */
.wn-auth-card {
  width: 100%;
  max-width: 440px;
}

.wn-auth-logo {
  display: block;
  margin-bottom: var(--wn-sp-8);
}
.wn-auth-logo img {
  height: 36px;
  width: auto;
}

.wn-auth-heading {
  font-size: var(--wn-text-2xl);
  font-weight: var(--wn-fw-bold);
  color: var(--wn-text-primary);
  line-height: var(--wn-lh-tight);
  margin-bottom: var(--wn-sp-2);
}
.wn-auth-subheading {
  font-size: var(--wn-text-sm);
  color: var(--wn-text-muted);
  margin-bottom: var(--wn-sp-8);
  line-height: var(--wn-lh-normal);
}

/* ----------------------------------------------------------------
   AUTH FORM FIELDS
   ---------------------------------------------------------------- */
.wn-auth-form .wn-form-group {
  margin-bottom: var(--wn-sp-5);
}
.wn-auth-form .wn-form-label {
  font-size: var(--wn-text-sm);
  font-weight: var(--wn-fw-medium);
  color: var(--wn-text-secondary);
  margin-bottom: var(--wn-sp-2);
}
.wn-auth-form .wn-input {
  height: 48px;
  font-size: var(--wn-text-base);
}
.wn-auth-form .wn-input-icon { top: 50%; transform: translateY(-50%); }
.wn-auth-form .wn-input-wrap .wn-input { padding-top: 0; padding-bottom: 0; }

/* Password toggle */
.wn-input-toggle-pw {
  position: absolute;
  right: var(--wn-sp-4);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--wn-text-muted);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  font-size: 0.9rem;
  transition: color var(--wn-duration-fast) var(--wn-ease);
}
.wn-input-toggle-pw:hover { color: var(--wn-text-primary); }

/* Submit button */
.wn-auth-submit {
  height: 48px;
  font-size: var(--wn-text-base);
  font-weight: var(--wn-fw-semi);
  letter-spacing: 0.02em;
  border-radius: var(--wn-radius-md);
  width: 100%;
  margin-top: var(--wn-sp-2);
}

/* Bottom link row */
.wn-auth-footer-link {
  text-align: center;
  margin-top: var(--wn-sp-6);
  font-size: var(--wn-text-sm);
  color: var(--wn-text-muted);
}
.wn-auth-footer-link a {
  color: var(--wn-accent);
  font-weight: var(--wn-fw-medium);
}
.wn-auth-footer-link a:hover { color: var(--wn-accent-hover); }

/* Forgot password link */
.wn-auth-forgot {
  font-size: var(--wn-text-xs);
  color: var(--wn-text-muted);
  text-decoration: none;
  transition: color var(--wn-duration-fast) var(--wn-ease);
}
.wn-auth-forgot:hover { color: var(--wn-accent); }

/* ----------------------------------------------------------------
   SOCIAL LOGIN DIVIDER
   ---------------------------------------------------------------- */
.wn-auth-or {
  display: flex;
  align-items: center;
  gap: var(--wn-sp-3);
  margin: var(--wn-sp-6) 0;
  font-size: var(--wn-text-xs);
  color: var(--wn-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.wn-auth-or::before,
.wn-auth-or::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--wn-border-subtle);
}

/* Social button */
.wn-btn--social {
  width: 100%;
  background: var(--wn-bg-elevated);
  border: 1px solid var(--wn-border);
  color: var(--wn-text-secondary);
  height: 44px;
  border-radius: var(--wn-radius-md);
  font-size: var(--wn-text-sm);
  font-weight: var(--wn-fw-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--wn-sp-3);
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--wn-duration-fast) var(--wn-ease),
    border-color var(--wn-duration-fast) var(--wn-ease),
    color var(--wn-duration-fast) var(--wn-ease);
}
.wn-btn--social:hover {
  background: var(--wn-bg-surface);
  border-color: var(--wn-accent);
  color: var(--wn-text-primary);
}

/* ----------------------------------------------------------------
   BRAND PANEL CONTENT
   ---------------------------------------------------------------- */
.wn-brand-top { display: flex; flex-direction: column; gap: var(--wn-sp-8); }

.wn-brand-logo img {
  height: 36px;
  width: auto;
}

.wn-brand-headline {
  font-size: 2rem;
  font-weight: var(--wn-fw-bold);
  color: var(--wn-text-primary);
  line-height: 1.2;
  margin-bottom: var(--wn-sp-3);
}
.wn-brand-headline span { color: var(--wn-accent); }

.wn-brand-sub {
  font-size: var(--wn-text-base);
  color: var(--wn-text-muted);
  line-height: var(--wn-lh-loose);
  max-width: 360px;
}

/* Trust metrics row */
.wn-trust-metrics {
  display: flex;
  flex-direction: column;
  gap: var(--wn-sp-4);
  margin-top: var(--wn-sp-8);
}
.wn-trust-item {
  display: flex;
  align-items: center;
  gap: var(--wn-sp-4);
}
.wn-trust-item__icon {
  width: 40px; height: 40px;
  background: var(--wn-accent-muted);
  border-radius: var(--wn-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wn-accent);
  font-size: 1rem;
  flex-shrink: 0;
}
.wn-trust-item__text strong {
  display: block;
  font-size: var(--wn-text-sm);
  font-weight: var(--wn-fw-semi);
  color: var(--wn-text-primary);
  line-height: 1.2;
}
.wn-trust-item__text span {
  font-size: var(--wn-text-xs);
  color: var(--wn-text-muted);
}

/* Live ticker strip at bottom of brand panel */
.wn-brand-ticker {
  display: flex;
  gap: var(--wn-sp-6);
  padding-top: var(--wn-sp-6);
  border-top: 1px solid var(--wn-border-subtle);
  flex-wrap: wrap;
}
.wn-ticker-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wn-ticker-item__sym {
  font-size: var(--wn-text-xs);
  font-weight: var(--wn-fw-semi);
  color: var(--wn-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.wn-ticker-item__price {
  font-size: var(--wn-text-sm);
  font-weight: var(--wn-fw-bold);
  font-family: var(--wn-font-mono);
  color: var(--wn-text-primary);
}
.wn-ticker-item__chg {
  font-size: var(--wn-text-xs);
  font-weight: var(--wn-fw-medium);
}
.wn-ticker-item__chg.up   { color: var(--wn-success); }
.wn-ticker-item__chg.down { color: var(--wn-danger);  }

/* ----------------------------------------------------------------
   REGISTER — 2-column grid for form fields
   ---------------------------------------------------------------- */
.wn-auth-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--wn-sp-4);
}
.wn-auth-grid-2 .wn-form-group--full {
  grid-column: 1 / -1;
}

/* ----------------------------------------------------------------
   VERIFY / FORGOT — compact centered card
   ---------------------------------------------------------------- */
.wn-auth-card--compact {
  max-width: 400px;
  text-align: center;
}
.wn-auth-card--compact .wn-auth-heading { font-size: var(--wn-text-xl); }
.wn-auth-icon-badge {
  width: 64px; height: 64px;
  border-radius: var(--wn-radius-xl);
  background: var(--wn-accent-muted);
  color: var(--wn-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin: 0 auto var(--wn-sp-5);
}
.wn-auth-icon-badge--success { background: var(--wn-success-muted); color: var(--wn-success); }
.wn-auth-icon-badge--warning { background: var(--wn-warning-muted); color: var(--wn-warning); }

/* ----------------------------------------------------------------
   ERROR MESSAGES (inline form errors)
   ---------------------------------------------------------------- */
.wn-auth-errors {
  background: var(--wn-danger-muted);
  border: 1px solid var(--wn-danger);
  border-radius: var(--wn-radius-md);
  padding: var(--wn-sp-4);
  margin-bottom: var(--wn-sp-5);
  font-size: var(--wn-text-sm);
  color: var(--wn-danger);
}
.wn-auth-errors ul { margin: 0; padding-left: 1rem; }
.wn-auth-errors li { margin-bottom: 2px; }
.wn-auth-errors li:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------------
   COPYRIGHT FOOTER (inside auth card)
   ---------------------------------------------------------------- */
.wn-auth-copyright {
  text-align: center;
  margin-top: var(--wn-sp-8);
  font-size: var(--wn-text-xs);
  color: var(--wn-text-muted);
}

/* ----------------------------------------------------------------
   CHECKBOX — custom check component
   ---------------------------------------------------------------- */
.wn-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  margin: 0;
}
.wn-check input[type="checkbox"] {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  accent-color: var(--wn-accent);
  cursor: pointer;
}
.wn-check__label {
  font-size: var(--wn-text-sm);
  color: var(--wn-text-secondary);
  line-height: 1.5;
}
.wn-check__label a { color: var(--wn-accent); }
.wn-check__label a:hover { text-decoration: underline; }

/* ----------------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------------- */
@media (max-width: 900px) {
  .wn-auth-panel--brand { display: none; }
  .wn-auth-panel--form  { padding: var(--wn-sp-8) var(--wn-sp-5); }
}
@media (max-width: 500px) {
  .wn-auth-card { padding: 0; }
  .wn-auth-grid-2 { grid-template-columns: 1fr; }
  .wn-auth-panel--form { padding: var(--wn-sp-6) var(--wn-sp-4); }
}