/* =========================================================
   AUTH  -  login / register
   ========================================================= */

.auth-wrap {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  max-width: 960px;
  margin: 28px auto 8px;
  background: var(--surface-2);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* ---------- SIDE PANEL ---------- */
.auth-side {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  padding: 40px 32px;
  background: var(--mint);
  color: var(--mint-deep);
  overflow: hidden;
}
.auth-side-peach { background: var(--peach); color: var(--text); }

.auth-side::before, .auth-side::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: var(--surface-2);
  opacity: .22;
}
.auth-side::before { width: 220px; height: 220px; top: -80px; right: -70px; }
.auth-side::after  { width: 150px; height: 150px; bottom: -50px; left: -40px; }

.auth-side > * { position: relative; z-index: 1; }

.auth-gem {
  width: 64px; height: 64px;
  display: grid; place-items: center;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--primary);
  font-size: 1.7rem;
  box-shadow: var(--shadow-clay);
}
.auth-side h2 { margin-bottom: 8px; color: inherit; }
.auth-side p { margin-bottom: 22px; font-weight: 600; }

.auth-perks { display: grid; gap: 12px; }
.auth-perks li {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: rgba(var(--white-rgb), .45);
  border-radius: var(--radius-md);
  font-weight: 700; font-size: .9rem;
}
.auth-perks i { width: 18px; text-align: center; }

/* ---------- FORM CARD ---------- */
.auth-card { padding: 40px 36px; }
.auth-card h1 { font-size: 1.8rem; margin-bottom: 4px; }
.auth-sub { margin-bottom: 24px; color: var(--text-soft); font-weight: 600; }
.auth-sub a { color: var(--primary); font-weight: 800; }
.auth-sub a:hover { text-decoration: underline; }

.auth-card .form-group { margin-bottom: 14px; }
.auth-card .btn-block { margin-top: 10px; }
.auth-card .form-row { gap: 0 16px; }
.form-error:empty { display: none; }

/* password eye */
.input-icon .pass-toggle {
  position: absolute;
  top: 50%; right: 8px;
  width: 36px; height: 36px;
  transform: translateY(-50%);
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--text-light);
  transition: color var(--ease), background var(--ease);
}
.input-icon .pass-toggle:hover { color: var(--primary); background: var(--peach-soft); }
.input-icon .pass-toggle ~ .form-control, 
.input-icon:has(.pass-toggle) .form-control { padding-right: 48px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 820px) {
  .auth-wrap { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
  .auth-side { display: none; }
  .auth-card { padding: 30px 22px 28px; }
}

@media (max-width: 480px) {
  .auth-wrap { margin-top: 16px; border-radius: var(--radius-lg); }
  .auth-card h1 { font-size: 1.5rem; }
}