/* ==========================================================================
   Invozy Auth Modal  —  shared/auth-modal.css   (pasangan: auth-modal.js)
   Butuh: tokens.css + components.css (iv-btn, iv-input, iv-input-group).
   Satu popup login/daftar/lupa/ganti kata sandi untuk landing, app, template store.
   ========================================================================== */
body.iv-auth-open { overflow: hidden; }

.iv-auth {
  position: fixed; inset: 0; z-index: var(--iv-z-auth);
  display: none; align-items: center; justify-content: center;
  padding: var(--iv-space-5); box-sizing: border-box; overflow-y: auto;
  background: color-mix(in srgb, var(--iv-green-950) 62%, transparent);
  -webkit-backdrop-filter: blur(var(--iv-blur-overlay)); backdrop-filter: blur(var(--iv-blur-overlay));
}
.iv-auth.is-open { display: flex; }

.iv-auth__card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  width: 100%; max-width: 414px; margin: auto;
  background: var(--iv-surface-muted); border: var(--iv-bw) solid var(--iv-border);
  border-radius: var(--iv-radius-xl); box-shadow: var(--iv-shadow-md);
}
.iv-auth__close {
  position: absolute; top: var(--iv-space-3); right: var(--iv-space-3); z-index: var(--iv-z-5);
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--iv-radius-full);
  background: var(--iv-surface); box-shadow: var(--iv-shadow-hairline);
  font-size: var(--iv-text-16); color: var(--iv-text-muted); cursor: pointer;
}
.iv-auth__close:hover { color: var(--iv-text); }
.iv-auth__close:focus-visible { outline: none; box-shadow: var(--iv-focus-ring); }

.iv-auth__inner {
  display: flex; flex-direction: column; gap: var(--iv-space-6);
  padding: var(--iv-space-7) var(--iv-space-6);
  background: var(--iv-surface); border: var(--iv-bw) solid var(--iv-border);
  border-radius: var(--iv-radius-xl); box-shadow: var(--iv-shadow-xs);
}
.iv-auth__brand { display: flex; flex-direction: column; align-items: center; gap: var(--iv-space-4); }
.iv-auth__logo {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 56px; height: 56px; border-radius: var(--iv-radius-lg);
  background: var(--iv-primary); box-shadow: var(--iv-shadow-sm);
  border: var(--iv-bw) solid color-mix(in srgb, var(--iv-accent) 80%, transparent);
}
.iv-auth__logo > i { color: var(--iv-accent); font-size: var(--iv-text-30); }
.iv-auth__heading { display: flex; flex-direction: column; align-items: center; gap: var(--iv-space-1-5); text-align: center; }
.iv-auth__title { font: var(--iv-fw-medium) var(--iv-text-22)/var(--iv-leading-display) var(--iv-font-sans); color: var(--iv-text); }
.iv-auth__sub { font: var(--iv-fw-regular) var(--iv-text-13)/var(--iv-leading-snug) var(--iv-font-sans); color: var(--iv-text-muted); }
.iv-auth__sub:empty { display: none; }

.iv-auth__panel { display: none; flex-direction: column; gap: var(--iv-space-4); }
.iv-auth__panel.is-active { display: flex; }
.iv-auth__fields { display: flex; flex-direction: column; gap: var(--iv-space-3-5); }
.iv-auth__actions { display: flex; flex-direction: column; gap: var(--iv-space-0-5); }
.iv-auth__divider { display: flex; align-items: center; gap: var(--iv-space-2); }
.iv-auth__divider::before, .iv-auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--iv-neutral-200); }
.iv-auth__divider span { font: var(--iv-fw-regular) var(--iv-text-13)/var(--iv-leading-none) var(--iv-font-sans); color: var(--iv-text-muted); }
.iv-auth__hint { padding: 0 var(--iv-space-1); text-align: center; font: var(--iv-fw-regular) var(--iv-text-12)/var(--iv-leading-body) var(--iv-font-sans); color: var(--iv-text-muted); }
.iv-auth__hint strong { color: var(--iv-text); }
.iv-auth__msg { margin: 0; padding: 0 var(--iv-space-1); text-align: center; font: var(--iv-fw-regular) var(--iv-text-12)/var(--iv-leading-body) var(--iv-font-sans); color: var(--iv-text-muted); }
.iv-auth__msg.is-error { color: var(--iv-danger-strong); }
.iv-auth__msg[hidden] { display: none; }
.iv-auth__terms { text-align: center; font: var(--iv-fw-regular) var(--iv-text-11)/var(--iv-leading-body) var(--iv-font-sans); color: var(--iv-text-muted); }
.iv-auth__terms a, .iv-auth__terms u { color: var(--iv-text); }
.iv-auth__footer {
  display: flex; align-items: center; justify-content: center; gap: var(--iv-space-1-5);
  padding: var(--iv-space-3-5) var(--iv-space-6); background: var(--iv-bg);
}
.iv-auth__footer span { font: var(--iv-fw-regular) var(--iv-text-13)/var(--iv-leading-none) var(--iv-font-sans); color: var(--iv-text-muted); }
.iv-auth__footer button {
  padding: var(--iv-space-1); border: 0; background: none; cursor: pointer;
  font: var(--iv-fw-medium) var(--iv-text-14)/var(--iv-leading-none) var(--iv-font-sans); color: var(--iv-primary);
}
.iv-auth__footer button:focus-visible { outline: none; box-shadow: var(--iv-focus-ring); border-radius: var(--iv-radius-sm); }

@keyframes iv-auth-fade { from { opacity: 0; transform: translateY(var(--iv-space-1)); } to { opacity: 1; transform: none; } }
.iv-auth__heading.is-anim, .iv-auth__footer.is-anim { animation: iv-auth-fade var(--iv-dur-slow) ease; }
@media (prefers-reduced-motion: reduce) { .iv-auth__heading.is-anim, .iv-auth__footer.is-anim { animation: none; } }