/* ==========================================================================
   Memberpaz auth skin — halaman login/lupa/reset/register member.
   Scoped di .auth_area supaya tidak menyentuh halaman publik lain yang
   memakai layout.single (checkout, promo, dsb). Token selaras dengan
   public/member/css/skin.css & public/admin/css/skin.css.
   ========================================================================== */

.auth_area{
  background:
    radial-gradient(900px 400px at 85% -10%, rgba(7,161,72,.12), transparent 60%),
    #F2F7F4 !important;
  min-height: 100vh;
}

/* section di dalam auth_area punya background putih/abu inline — netralkan
   supaya gradient area auth tetap terlihat */
.auth_area section{
  background: transparent !important;
}

/* ---------- Card ---------- */
.auth_area .form_login{
  background: #FFFFFF;
  border-radius: 22px;
  box-shadow: 0 2px 6px rgba(11,59,38,.05), 0 10px 28px rgba(11,59,38,.10);
  padding: 30px 28px;
}
.auth_area .logo_form{
  padding: 0 0 18px;
  margin-bottom: 18px;
}
.auth_area .logo_form h5{
  font-family: 'Circular Std Bold','Circular Std',sans-serif;
  color: #121527;
  font-size: 22px;
  line-height: 1.35;
}

/* ---------- Labels & inputs ---------- */
.auth_area .label_input{
  font-size: 11px !important;
  color: #5F687B !important;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 0 2px 6px;
  font-family: 'Circular Std Medium','Circular Std',sans-serif !important;
}
.auth_area .label_input i{ color: #07A148 !important; }

.auth_area .input_form{
  height: 44px !important;
  font-size: 13px !important;
  border: 1px solid #E3EBE6 !important;
  border-radius: 12px !important;
  padding: 0 14px !important;
  color: #121527;
  font-family: 'Circular Std',sans-serif;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.auth_area .input_form:focus{
  border-color: #07A148 !important;
  box-shadow: 0 0 0 3px rgba(7,161,72,.15) !important;
}
.auth_area .input_form::placeholder{ color: #9aa5b1; }

/* input-group (password + toggle mata) */
.auth_area .input-group .input_form{
  border-radius: 12px 0 0 12px !important;
}
.auth_area .input-group-text{
  border: 1px solid #E3EBE6 !important;
  border-left: none !important;
  border-radius: 0 12px 12px 0 !important;
  background: #FFFFFF !important;
  color: #5F687B;
}

/* ---------- Buttons & links ---------- */
.auth_area .submit_form{
  background: #07A148 !important;
  border: none !important;
  border-radius: 12px !important;
  height: 46px !important;
  line-height: 46px !important;
  font-size: 14px !important;
  font-family: 'Circular Std Medium','Circular Std',sans-serif !important;
  box-shadow: 0 4px 12px rgba(7,161,72,.28) !important;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.auth_area .submit_form:hover{
  background: #00974A !important;
  transform: translateY(-1px);
}
.auth_area .forgot_password_link{
  color: #00974A;
  font-size: 12px;
}
.auth_area .forgot_password_link:hover{ color: #0B3B26; }

/* tombol "Masuk dengan Google" */
.auth_area a[href^="/auth/google"]{
  border-radius: 12px !important;
  border-color: #E3EBE6 !important;
  transition: box-shadow .15s ease, transform .15s ease;
}
.auth_area a[href^="/auth/google"]:hover{
  box-shadow: 0 2px 8px rgba(11,59,38,.10);
  transform: translateY(-1px);
}

/* ---------- Flash notes (logout / error) ---------- */
.auth_area .auth_note{
  border-radius: 12px;
  font-size: 13px;
  padding: 11px 14px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Circular Std',sans-serif;
}
.auth_area .auth_note i{ flex: none; }
.auth_note_success{
  background: #E4F5EC;
  color: #0B3B26;
  border: 1px solid #bfe6d0;
}
.auth_note_error{
  background: #fdecec;
  color: #8a2b2b;
  border: 1px solid #f5c6c6;
}

/* ---------- Notifikasi swal-like (salah password dsb) ---------- */
#NotifArea .swal2-popup,
#NotifPopupArea .swal2-popup{
  border-radius: 16px !important;
  box-shadow: 0 6px 16px rgba(11,59,38,.10), 0 20px 48px rgba(11,59,38,.14) !important;
}
#NotifArea .swal2-title,
#NotifPopupArea .swal2-title{
  font-family: 'Circular Std Bold','Circular Std',sans-serif;
}

/* ---------- Mobile ---------- */
@media (max-width: 576px){
  .auth_area .form_login{ padding: 24px 20px; }
}