/* ==========================================================================
   login.css
   Split-screen authentication layout for login.html
   ========================================================================== */

.auth {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
}

/* Brand / marketing side */
.auth__aside {
  position: relative;
  color: #fff;
  padding: clamp(2rem, 5vw, 4rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  background:
    linear-gradient(150deg, rgba(9, 18, 38, 0.86), rgba(16, 61, 179, 0.82)),
    url("https://images.unsplash.com/photo-1600880292203-757bb62b4baf?auto=format&fit=crop&w=1400&q=80");
  background-size: cover;
  background-position: center;
}
.auth__brand { display: inline-flex; align-items: center; gap: 0.65rem; position: relative; z-index: 2; }
.auth__brand .brand__name { color: #fff; }
.auth__brand .brand__tag { color: rgba(255, 255, 255, 0.7); }

.auth__pitch { position: relative; z-index: 2; max-width: 460px; }
.auth__pitch h2 { color: #fff; font-size: var(--fs-h2); }
.auth__pitch p { color: rgba(255, 255, 255, 0.85); font-size: var(--fs-lead); }
.auth__points { display: grid; gap: var(--space-md); margin-top: var(--space-xl); }
.auth__points li { display: flex; gap: 0.75rem; align-items: center; font-weight: var(--fw-medium); }
.auth__points i { color: var(--color-accent); }

.auth__foot { position: relative; z-index: 2; font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.7); }

/* Form side */
.auth__main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 5vw, 4rem);
  background: var(--color-bg);
}
.auth__card { width: 100%; max-width: 420px; }
.auth__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-sm);
  color: var(--color-text-light);
  margin-bottom: var(--space-xl);
}
.auth__back:hover { color: var(--color-primary); }
.auth__title { font-size: var(--fs-h2); margin-bottom: 0.35rem; }
.auth__subtitle { color: var(--color-text-light); margin-bottom: var(--space-xl); }

/* Tabs */
.auth__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  padding: 0.3rem;
  margin-bottom: var(--space-xl);
}
.auth__tab {
  border: none;
  background: transparent;
  padding: 0.65rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  color: var(--color-text-light);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.auth__tab.is-active { background: #fff; color: var(--color-primary); box-shadow: var(--shadow-xs); }

.auth__options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-sm);
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
  gap: 0.5rem;
}
.auth__remember { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--color-text-light); }
.auth__remember input { accent-color: var(--color-primary); }

.auth__divider {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: var(--space-xl) 0;
  color: var(--color-text-light);
  font-size: var(--fs-sm);
}
.auth__divider::before,
.auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }

.auth__social { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.auth__social .btn i { font-size: 1.05em; }

.auth__switch { text-align: center; margin-top: var(--space-xl); font-size: var(--fs-sm); color: var(--color-text-light); }

/* Password field with toggle */
.password-field { position: relative; }
.password-field input { padding-right: 3rem; }
.password-toggle {
  position: absolute;
  right: 0.5rem; top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: var(--color-text-light);
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
}
.password-toggle:hover { color: var(--color-primary); }