/* Login, Register, Lupa Sandi, dan panel Account Icon. Login/Register/Lupa
   Sandi belum punya mockup; tata letak satu kolom memakai token spec §6 —
   keputusan yang ditulis terbuka di spec §9 no. 2. */

/*
 * LEBAR FORM DIPEGANG PEMBUNGKUS, DAN DITULIS SEBAGAI LEBAR NYATA.
 *
 * Dulu `.hbt-auth` memakai `width: 100%; max-width: 400px`. Itu benar selama
 * widgetnya melebar penuh, tapi hancur begitu widgetnya di-align center di
 * Elementor: align center memasang `align-self: center` pada elemen widget,
 * dan flex item yang tidak lagi stretch dilebarkan menurut max-content isinya.
 * `width: 100%` tidak menyumbang apa pun ke max-content — persentase terhadap
 * lebar yang belum diketahui dianggap nol — jadi yang tersisa cuma lebar
 * intrinsik input dan tombol. Hasilnya form menciut jadi beberapa puluh piksel.
 *
 * Ditulis sebagai lebar tetap (token --hbt-auth-w) plus `max-width: 100%`,
 * max-content-nya jadi 400px dan form tetap 400px walau di-align center;
 * di kolom yang lebih sempit, max-width yang menahannya.
 */
.hbt-auth-wrap {
  --hbt-auth-w: 400px;
  display: flex; flex-direction: column; gap: 16px;
  width: var(--hbt-auth-w); max-width: 100%;
  font-family: var(--hbt-font); color: var(--hbt-ink);
}

/* Perataan form di dalam kolomnya sendiri — tidak bergantung pada align
   milik Elementor, yang justru sumber masalah di atas. Posisi kotak dan rata
   teks dipisah: form boleh berada di tengah kolom tanpa isinya ikut rata
   tengah, dan itu memang bentuk yang lebih lazim untuk form. */
.hbt-auth-wrap--pos-center { margin-inline: auto; }
.hbt-auth-wrap--pos-right  { margin-inline: auto 0; }

.hbt-auth-wrap--center { text-align: center; }
.hbt-auth-wrap--center .hbt-auth__field { align-items: center; }
/* Baris "Ingat saya" adalah flex arah baris: yang memindahkannya ke tengah
   justify-content, bukan align-items. */
.hbt-auth-wrap--center .hbt-auth__check { justify-content: center; }
.hbt-auth-wrap--center .hbt-auth__links { justify-content: center; }
.hbt-auth-wrap--right  { text-align: right; }
.hbt-auth-wrap--right  .hbt-auth__field { align-items: flex-end; }
.hbt-auth-wrap--right  .hbt-auth__check { justify-content: flex-end; }
.hbt-auth-wrap--right  .hbt-auth__links { justify-content: flex-end; }

/*
 * Pengaman kedua: isi widget tidak boleh ikut menciut walau pengguna
 * memakai align milik Elementor. Ditulis dengan spesifisitas nyata, bukan
 * :where() — lihat catatan yang sama di habits-core.css.
 */
.elementor-widget-habits_login > .elementor-widget-container,
.elementor-widget-habits_register > .elementor-widget-container,
.elementor-widget-habits_password > .elementor-widget-container { width: 100%; }

.hbt-auth {
  display: flex; flex-direction: column; gap: 16px;
  width: 100%;
  font-family: var(--hbt-font); color: var(--hbt-ink);
}
.hbt-auth__heading { margin: 0; font-size: 24px; font-weight: 600; }
.hbt-auth__intro   { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--hbt-body); }

.hbt-auth__field { display: flex; flex-direction: column; gap: 7px; }
.hbt-auth__label { font-size: 13px; color: var(--hbt-body); }
.hbt-auth__req   { color: var(--hbt-sale); }
.hbt-auth__help  { font-size: 12.5px; line-height: 1.6; color: var(--hbt-muted); }

/* `input` disertakan supaya menang atas reset.css tema — lihat catatan di
   habits-newsletter.css. */
/* box-sizing ditulis eksplisit: padding 16px pada input selebar 100% membuat
   kolomnya 34px lebih lebar dari formnya sendiri kalau tema kebetulan tidak
   memasang reset border-box. */
input.hbt-auth__input {
  box-sizing: border-box;
  width: 100%; height: 46px; margin: 0; padding: 0 16px;
  border: 1px solid #E2E2DE; border-radius: var(--hbt-radius);
  background: #fff; outline: 0;
  font-family: inherit; font-size: 14px; color: var(--hbt-ink);
}
input.hbt-auth__input:focus { border-color: var(--hbt-ink); box-shadow: none; }

.hbt-auth__check {
  display: flex; align-items: center; gap: 9px;
  font-size: 13.5px; color: var(--hbt-body); cursor: pointer;
}

.hbt-auth__submit { width: 100%; box-sizing: border-box; }
.hbt-auth__terms  { margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--hbt-muted); }

.hbt-auth__msg { margin: 0; font-size: 13px; min-height: 1em; }
.hbt-auth__msg.is-ok  { color: var(--hbt-accent); }
.hbt-auth__msg.is-err { color: var(--hbt-sale); }

.hbt-auth__links {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
  font-size: 13.5px;
}
.hbt-auth__links a { color: var(--hbt-ink); text-decoration: underline; }
.hbt-auth__links a:hover { color: var(--hbt-accent); }
.hbt-auth__prompt { color: var(--hbt-muted); }

.hbt-auth--in { gap: 14px; }
.hbt-auth__greeting { margin: 0; font-size: 16px; }
.hbt-auth__logout { font-size: 13.5px; color: var(--hbt-muted); text-decoration: underline; }
.hbt-auth__logout:hover { color: var(--hbt-ink); }

/* Varian ringkas untuk panel Account Icon. Panelnya sudah punya lebar
   sendiri, jadi form mengikuti lebar itu. */
.hbt-auth--compact { gap: 13px; }
.hbt-auth--compact input.hbt-auth__input { height: 42px; }

/* Keadaan tamu di panel akun: dua tombol sepenuh lebar panel, satu di atas
   yang lain. Ditumpuk, bukan berdampingan — panel navbar sempit, dan dua
   tombol berdampingan di dalamnya membuat labelnya terpenggal. */
.hbt-account__actions {
  display: flex; flex-direction: column; gap: 10px;
  font-family: var(--hbt-font);
}
.hbt-account__actions .hbt-btn { width: 100%; box-sizing: border-box; }

.hbt-account__greeting { margin: 0 0 14px; font-size: 15px; font-family: var(--hbt-font); }
.hbt-account__menu {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column;
  font-family: var(--hbt-font);
}
.hbt-account__menu a {
  display: block; padding: 13px 0;
  font-size: 15px; color: var(--hbt-ink); text-decoration: none;
  border-bottom: 1px solid #F3F3F1;
}
.hbt-account__menu a:hover { color: var(--hbt-accent); }
.hbt-account__menu li:last-child a { border-bottom: 0; }

/* Sama seperti toggle keranjang: keadaan tautan ditulis eksplisit supaya
   /my-account/ yang sudah dikunjungi tidak berubah ungu. */
.hbt-account-toggle.hbt-account-toggle,
.hbt-account-toggle.hbt-account-toggle:link,
.hbt-account-toggle.hbt-account-toggle:visited {
  color: var(--hbt-ink); text-decoration: none;
  border: 0; background: none;
}
.hbt-account-toggle.hbt-account-toggle:hover,
.hbt-account-toggle.hbt-account-toggle:focus { color: var(--hbt-accent); }
.hbt-account-toggle:focus { outline: none; }
.hbt-account-toggle:focus-visible {
  outline: 2px solid var(--hbt-accent); outline-offset: 3px;
}

.hbt-account__loading { font-size: 13.5px; color: var(--hbt-muted); font-family: var(--hbt-font); }