/* assets/css/forget-password.css
   Dedicated styles for the forget-password flow.
   Based on the color variables you provided.
*/

:root {
  --color-primary:     #1e3a8a;
  --color-primary-600: #16306a;
  --color-secondary:   #f59e0b;
  --color-accent:      #10b981;
  --color-bg:          #f9fafb;
  --color-surface:     #ffffff;
  --text-primary:      #0f1724;
  --text-secondary:    #4b5563;
  --muted:             #e5e7eb;
  --danger:            #dc2626;

  --radius: 12px;
  --page-max: 1200px;
  --card-max-width: 640px;

  --gap: 18px;
  --shadow: 0 10px 30px rgba(15,23,36,0.06);

  --input-height: 48px;
  --input-padding: 14px;
  --input-icon-left: 12px;
  --control-transition: 180ms ease;
}

/* Reset + base */
* { box-sizing: border-box; }
html,body { height:100%; }
body {
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text-primary);
  background: linear-gradient(180deg, var(--color-bg) 0%, #ffffff 100%);
  -webkit-font-smoothing:antialiased;
  line-height:1.45;
  padding: 24px 12px;
}

/* Brand */
.navbar-brand {
  margin-top:28px;
  display: inline-flex;
  align-items:center;
  gap:0.6rem;
  text-decoration:none;
  color: var(--color-primary);
  font-weight:700;
  position:relative;
  left:50%;
  transform:translateX(-50%);
}
.brand-badge {
  width:44px; height:44px; min-width:44px; border-radius:10px; display:inline-grid; place-items:center;
  color:#fff; background: linear-gradient(180deg,var(--color-primary),var(--color-primary-600));
  box-shadow:var(--shadow);
  font-weight:800; font-size:0.95rem;
}
.fw-semibold { color: var(--text-primary); font-size:1rem; }

/* Page wrapper */
.page-wrap { display:flex; align-items:center; justify-content:center; min-height: calc(100vh - 110px); padding: 16px; }
.forget-section { width:100%; display:flex; justify-content:center; align-items:center; }

/* Card */
.card { width:100%; max-width:var(--card-max-width); background:var(--color-surface); border-radius: calc(var(--radius) + 2px); box-shadow:var(--shadow); padding:22px; }
.card-header { text-align:center; margin-bottom:12px; }
.card-header h2 { margin:0 0 6px; font-size:20px; color:var(--text-primary); }
.card-sub { margin:0; color:var(--text-secondary); font-size:13px; }

/* Form */
.fp-form { display:flex; flex-direction:column; gap:12px; align-items:center; }
.input-wrap { position:relative; width:100%; max-width:420px; }
.input-wrap input[type="text"], .input-wrap input[type="email"], .input-wrap input[type="password"], .input-wrap input[type="tel"] {
  width:100%; height:var(--input-height); padding: 0 var(--input-padding) 0 calc(var(--input-icon-left) + 28px);
  border-radius:10px; border:1px solid rgba(15,23,36,0.08); outline:none; font-size:15px; background:#fff;
  transition: border var(--control-transition), box-shadow var(--control-transition);
}
.input-wrap input::placeholder { color: rgba(75,85,99,0.45); }
.input-icon { position:absolute; left:var(--input-icon-left); top:50%; transform:translateY(-50%); pointer-events:none; color:var(--text-secondary); font-size:18px; }

/* code input special */
.code-wrap input { letter-spacing: 8px; text-align:center; font-weight:600; font-size:18px; padding-left: calc(var(--input-icon-left) + 6px); }

/* Buttons */
.form-actions { display:flex; gap:12px; align-items:center; justify-content:center; margin-top:6px; }
.btn { background: var(--muted); padding:10px 16px; border-radius:10px; border:none; cursor:pointer; font-weight:700; transition: transform var(--control-transition), box-shadow var(--control-transition), opacity var(--control-transition); }
.btn-primary { background: linear-gradient(180deg,var(--color-primary),var(--color-primary-600)); color:#fff; box-shadow:0 8px 18px rgba(30,58,138,0.12); }
.btn:hover:not([disabled]) { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(22,48,106,0.12); }
.btn[disabled] { opacity:0.6; cursor:not-allowed; transform:none; box-shadow:none; }

/* Tiny link text */
.tiny { font-size:13px; color:var(--text-secondary); margin-top:10px; text-align:center; }
.tiny a { text-decoration:none; color: var(--color-primary); font-weight:600; }

/* Modal / Preloader / Toast (kept simple) */
.modal { position:fixed; inset:0; display:none; align-items:center; justify-content:center; background: rgba(2,6,23,0.45); z-index:120; }
.modal[aria-hidden="false"] { display:flex; }
.modal-panel { width: calc(100% - 48px); max-width:560px; background:#fff; border-radius:12px; padding:18px; box-shadow: 0 20px 60px rgba(2,6,23,0.24); }
.modal-close { background:transparent; border:none; float:right; font-size:18px; cursor:pointer; }
.modal-body { color: var(--text-primary); font-weight:600; }
.modal-actions { margin-top:12px; text-align:right; }

/* Preloader */
.preloader-overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(2,6,23,0.45); z-index: 140; backdrop-filter: blur(4px); }
.preloader-overlay[aria-hidden="false"] { display:flex; }
.preloader { background: rgba(255,255,255,0.98); padding: 14px 18px; border-radius:12px; display:flex; gap:12px; align-items:center; box-shadow: 0 10px 40px rgba(2,6,23,0.12); min-width:220px; }
.spinner { width:34px; height:34px; border-radius:50%; border:4px solid rgba(30,58,138,0.12); border-top-color: var(--color-primary); animation: fp-spin 900ms linear infinite; }
@keyframes fp-spin { to { transform: rotate(360deg); } }
.preloader .msg { font-weight:700; color:var(--text-primary); font-size:15px; }

/* Toast */
.fp-toast { position: fixed; right: 20px; top: 24px; z-index: 160; min-width: 260px; max-width: 420px; border-radius:10px; padding:10px 14px; box-shadow:0 10px 30px rgba(2,6,23,0.12); display:none; color:#fff; font-weight:700; align-items:center; gap:10px; pointer-events:auto; }
.fp-toast[aria-hidden="false"] { display:flex; }
.fp-toast.success { background: linear-gradient(90deg,var(--color-accent), #059669); }
.fp-toast.error { background: linear-gradient(90deg,var(--danger), #ff6b6b); }

/* Accessibility focus */
input:focus, button:focus { box-shadow: 0 6px 18px rgba(30,58,138,0.08); outline: none; border-color: rgba(30,58,138,0.14); }

/* Responsive */
@media (max-width:420px) {
  .card { padding:16px; border-radius:12px; }
  .input-wrap { max-width:100%; }
  .code-wrap input { letter-spacing:6px; font-size:16px; }
}