/* public_html/assets/css/front_password.css */

.nf-pw-wrap{
  padding: 0 12px;
  text-align: start;
}

.nf-pw-card{
  max-width:560px;
  margin:24px auto;
  padding:18px;
  border-radius:18px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  backdrop-filter: blur(6px);
}

.nf-card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:14px;
}

.nf-card-head-text{ flex:1; min-width:0; }

.nf-card-title{
  margin:0;
  font-size:20px;
  line-height:1.2;
}

.nf-card-sub{
  margin-top:6px;
  font-size:13px;
  opacity:.82;
  max-width: 46ch;
}

.nf-form{ margin-top: 6px; }

.nf-field{ margin-bottom:14px; }

.nf-label{
  display:block;
  margin:0 0 8px;
  font-size:13px;
  opacity:.88;
}

/* icon input wrapper */
.nf-input-wrap{
  position:relative;
  display:block;
}

.nf-input-icon{
  position:absolute;
  inset-inline-start:12px;
  top:50%;
  transform:translateY(-50%);
  width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  opacity:.95;
  pointer-events:none;
  user-select:none;
  z-index:2;

  color: rgba(255,255,255,.92);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}

.nf-input-icon svg{
  width:18px;
  height:18px;
  display:block;
  fill: currentColor;
}

.nf-input{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.16);

  /* base input background (cool/dark) */
  background: rgba(10, 16, 28, .62);

  color:#fff;
  outline:none;
  line-height: 1.35;
  text-align: inherit;
}

/* LTR: add space on inline-start */
.nf-input-wrap .nf-input{
  padding-inline-start:44px;
}

.nf-input::placeholder{ opacity:.8; }

.nf-input:focus{
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 0 0 3px rgba(255,255,255,.06);
}

.nf-input-invalid{
  border-color: rgba(255, 99, 132, .45);
  box-shadow: 0 0 0 3px rgba(255, 99, 132, .10);
}

/* FIX: Chrome/Safari Autofill yellow/bright background */
.nf-input:-webkit-autofill,
.nf-input:-webkit-autofill:hover,
.nf-input:-webkit-autofill:focus,
.nf-input:-webkit-autofill:active{
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff !important;

  /* force same background as normal input */
  box-shadow: 0 0 0px 1000px rgba(10, 16, 28, .78) inset !important;
  -webkit-box-shadow: 0 0 0px 1000px rgba(10, 16, 28, .78) inset !important;

  border:1px solid rgba(255,255,255,.16) !important;

  /* prevent sudden flash */
  transition: background-color 999999s ease-in-out 0s;
}

/* ensure icon visible even when autofill applies */
.nf-input:-webkit-autofill ~ .nf-input-icon,
.nf-input:-webkit-autofill + .nf-input-icon{
  color: rgba(255,255,255,.92) !important;
  opacity: .98 !important;
}

.nf-pass-row{
  display:flex;
  gap:10px;
  align-items:stretch;
}

.nf-pass-row .nf-input{ flex:1; }

.nf-btn-pass{ min-width: 92px; }

.nf-w-100{ width:100%; }

.nf-error{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255, 99, 132, .35);
  background: rgba(255, 99, 132, .10);
  font-size:13px;
}

.nf-flash-wrap{ margin: 0 0 12px; }

.nf-flash{
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}

.nf-flash-error{
  border-color: rgba(255, 99, 132, .35);
  background: rgba(255, 99, 132, .10);
}

.nf-flash-success{
  border-color: rgba(34, 197, 94, .35);
  background: rgba(34, 197, 94, .10);
}

/* ✅ Added: notice block used in reset_password.php (keeps same visual language as toast/flash) */
.nf-notice{
  margin: 0 0 12px;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}

.nf-notice-title{
  font-weight:700;
  font-size:13px;
  margin:0 0 6px;
  opacity:.95;
}

.nf-notice-msg{
  font-size:13px;
  line-height:1.75;
  opacity:.9;
}

.nf-notice-success{
  border-color: rgba(34, 197, 94, .35);
  background: rgba(34, 197, 94, .10);
}

.nf-notice-error{
  border-color: rgba(255, 99, 132, .35);
  background: rgba(255, 99, 132, .10);
}

.nf-notice-warning{
  border-color: rgba(234, 179, 8, .35);
  background: rgba(234, 179, 8, .10);
}

.nf-notice-info{
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}

.nf-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color:#fff;
  text-decoration:none;
  cursor:pointer;
  user-select:none;
  font-weight:600;
  line-height:1.1;
  min-height: 44px;
}

.nf-btn:active{ transform: translateY(1px); }

.nf-btn-primary{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
}

.nf-btn-ghost{ background: transparent; }

.nf-link{
  color:#fff;
  opacity:.92;
  text-decoration:none;
  font-size:13px;
}

.nf-link:hover{ opacity: 1; text-decoration: underline; }

.nf-meta-row{
  margin-top: 12px;
  display:flex;
  align-items:center;
  gap:14px;
  justify-content:space-between;
}

.nf-meta-row-single{ justify-content:flex-start; }

/* RTL */
.nf-pw-wrap[dir="rtl"]{ text-align: right; }

.nf-pw-wrap[dir="rtl"] .nf-card-title,
.nf-pw-wrap[dir="rtl"] .nf-card-sub,
.nf-pw-wrap[dir="rtl"] .nf-error,
.nf-pw-wrap[dir="rtl"] .nf-flash,
.nf-pw-wrap[dir="rtl"] .nf-link,
.nf-pw-wrap[dir="rtl"] .nf-notice,
.nf-pw-wrap[dir="rtl"] .nf-notice-title,
.nf-pw-wrap[dir="rtl"] .nf-notice-msg{
  text-align: right;
}

.nf-pw-wrap[dir="rtl"] .nf-input{
  text-align: right;
  direction: ltr;
}

/* RTL: icon is on right -> pad inline-end */
.nf-pw-wrap[dir="rtl"] .nf-input-wrap .nf-input{
  padding-inline-start:12px;
  padding-inline-end:44px;
}

.nf-pw-wrap[dir="rtl"] .nf-meta-row{ flex-direction: row; }
.nf-pw-wrap[dir="rtl"] .nf-meta-row-single{ justify-content:flex-end; }
.nf-pw-wrap[dir="rtl"] .nf-pass-row{ flex-direction: row; }

/* ✅ Small-screen ergonomics */
@media (max-width: 420px){
  .nf-pw-card{ padding:14px; border-radius:16px; }
  .nf-card-title{ font-size:18px; }
  .nf-pass-row{ gap:8px; }
  .nf-btn-pass{ min-width: 84px; }
}

/* SR-only */
.nf-sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0, 0, 0, 0) !important;
  white-space:nowrap !important;
  border:0 !important;
}