/* nd-auth-theme.css — modal login/daftar mengikuti tema aktif.

   Masalah: partials/frontend-auth-modal.blade.php membawa <style> sendiri dengan
   warna terang yang dipatok keras (#fff, #1c2333, #d5deef, ...). Akibatnya di tema
   gelap muncul kartu putih menyilaukan di atas halaman gelap.

   Berkas ini TIDAK mengubah markup maupun JS modal — hanya mewarnai ulang lewat
   token. Semua pemilih diawali `body.nd-ui` sehingga specificity-nya (0,1,2)
   mengalahkan aturan asli (0,1,0) tanpa perlu !important. */

/* nd-allow-ns-file: seluruh berkas ini me-restyle class `nd-auth-*` yang SUDAH ADA
   di partials/frontend-auth-modal.blade.php — bukan komponen baru bernama itu. */

body.nd-ui .nd-auth-backdrop {
  background: var(--nd-scrim, rgba(8, 12, 20, .66));
  backdrop-filter: blur(6px);
}

body.nd-ui .nd-auth-card {
  background: var(--nd-s1);
  border: 0;
  border-radius: var(--nd-r-4);
  box-shadow: var(--nd-e3);
  color: var(--nd-t2);
  padding: var(--nd-sp-6);
  font-family: var(--nd-font-text);
}

body.nd-ui .nd-auth-card h3 {
  color: var(--nd-t1);
  font-family: var(--nd-font-display);
  font-size: var(--nd-fs-xl);
  margin-block-end: var(--nd-sp-2);
}

body.nd-ui .nd-auth-note   { color: var(--nd-t3); font-size: var(--nd-fs-sm); }
body.nd-ui .nd-auth-status { color: var(--nd-t3); font-size: var(--nd-fs-sm); }

body.nd-ui .nd-auth-close {
  color: var(--nd-t3);
  border-radius: var(--nd-r-full);
  inline-size: 2rem;
  block-size: 2rem;
  display: grid;
  place-items: center;
  transition: background-color var(--nd-dur-1) var(--nd-ease-out), color var(--nd-dur-1) var(--nd-ease-out);
}
body.nd-ui .nd-auth-close:hover { background: var(--nd-s2); color: var(--nd-t1); }

/* ---------- Tab ---------- */

body.nd-ui .nd-auth-tab {
  background: var(--nd-s2);
  border: 0;
  color: var(--nd-t3);
  border-radius: var(--nd-r-full);
  padding: var(--nd-sp-2) var(--nd-sp-3);
  font-size: var(--nd-fs-2xs);
  transition: background-color var(--nd-dur-1) var(--nd-ease-out), color var(--nd-dur-1) var(--nd-ease-out);
}
body.nd-ui .nd-auth-tab:hover { background: var(--nd-s3); color: var(--nd-t1); }
body.nd-ui .nd-auth-tab.is-active {
  background: var(--nd-accent);
  color: var(--nd-t-on-accent);
  border: 0;
}

/* ---------- Kolom isian ---------- */

body.nd-ui .nd-auth-panel label { color: var(--nd-t2); }

body.nd-ui .nd-auth-panel input,
body.nd-ui .nd-auth-panel select,
body.nd-ui .nd-auth-custom-trigger {
  background: var(--nd-s2);
  border: 0;
  border-radius: var(--nd-r-2);
  color: var(--nd-t1);
  font-family: var(--nd-font-text);
}
body.nd-ui .nd-auth-panel input::placeholder { color: var(--nd-t3); }

body.nd-ui .nd-auth-panel input:focus,
body.nd-ui .nd-auth-panel select:focus,
body.nd-ui .nd-auth-custom-trigger:focus-visible {
  outline: 0;
  border: 0;
  box-shadow: 0 0 0 2px var(--nd-accent-400);
}

/* Panah select digambar dari dua gradien; warnanya ikut teks sekunder. */
body.nd-ui .nd-auth-panel select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--nd-t3) 50%),
    linear-gradient(135deg, var(--nd-t3) 50%, transparent 50%);
}

body.nd-ui .nd-auth-custom-caret { color: var(--nd-t3); }

body.nd-ui .nd-auth-custom-menu {
  background: var(--nd-s1);
  border: 0;
  border-radius: var(--nd-r-3);
  box-shadow: var(--nd-e3);
}
body.nd-ui .nd-auth-custom-option { color: var(--nd-t2); border-radius: var(--nd-r-2); }
body.nd-ui .nd-auth-custom-option:hover { background: var(--nd-s2); color: var(--nd-t1); }
body.nd-ui .nd-auth-custom-option.active {
  background: var(--nd-accent-tint);
  color: var(--nd-accent-400);
}

/* ---------- Tombol ---------- */

body.nd-ui .nd-auth-btn {
  background: var(--nd-accent);
  color: var(--nd-t-on-accent);
  border: 0;
  border-radius: var(--nd-r-full);
  padding: var(--nd-sp-3) var(--nd-sp-5);
  font-weight: 800;
  transition: background-color var(--nd-dur-1) var(--nd-ease-out), transform var(--nd-dur-1) var(--nd-ease-out);
}
body.nd-ui .nd-auth-btn:hover  { background: var(--nd-accent-500); }
body.nd-ui .nd-auth-btn:active { transform: scale(.98); }
body.nd-ui .nd-auth-btn.alt    { background: var(--nd-info-solid, var(--nd-info)); }
body.nd-ui .nd-auth-btn.nd-auth-btn-ghost { background: var(--nd-s3); color: var(--nd-t1); }

body.nd-ui .nd-auth-link-btn { color: var(--nd-accent-400); }
body.nd-ui .nd-auth-link-btn:hover { color: var(--nd-accent); }

/* Tombol Google: tetap netral dan dikenali, tapi memakai permukaan tema supaya
   tidak jadi kotak putih di tengah kartu gelap. */
body.nd-ui .nd-auth-google-btn {
  background: var(--nd-s2);
  border: 0;
  border-radius: var(--nd-r-full);
  color: var(--nd-t1);
}
body.nd-ui .nd-auth-google-btn:hover { background: var(--nd-s3); box-shadow: none; }

/* ---------- Pemisah "atau" ---------- */

body.nd-ui .nd-auth-or { color: var(--nd-t3); }
body.nd-ui .nd-auth-or::before,
body.nd-ui .nd-auth-or::after { background: var(--nd-s3); }

@media (prefers-reduced-motion: reduce) {
  body.nd-ui .nd-auth-btn:active { transform: none; }
}