/* Shared look for login / forgot password / reset password pages (21-10-2026). Copied from login.php. */
  :root { --brand:#164563; --brand-dark:#0f3249; --accent:#1fa2b8; --ink:#1d2b36; --muted:#6b7a86; --line:#d6dee4; --bg:#eef6f8; }
  html, body { height:100%; }
  /* loginstyle.css forces a serif font on "*" - override it for this page (icons keep FontAwesome) */
  .login-wrap, .login-wrap *:not(.fa) { font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
  body.login-page { background: linear-gradient(135deg, #e6f4f7 0%, #f7fbfc 55%, #e9f1f6 100%); color:var(--ink);
                    font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
  .login-wrap { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px 16px; }
  .login-card { width:100%; max-width:940px; display:flex; background:#fff; border-radius:16px; overflow:hidden;
                box-shadow:0 18px 50px rgba(22,69,99,.16); }
  .login-art  { flex:1 1 50%; position:relative; padding:40px 32px; color:#fff; display:flex; flex-direction:column; justify-content:space-between;
                background: linear-gradient(160deg, var(--brand) 0%, #1c6a8a 60%, var(--accent) 100%); }
  .login-art h1 { font-size:28px; font-weight:700; margin:0 0 8px; }
  .login-art p  { margin:0; opacity:.85; font-size:15px; line-height:1.5; }
  .login-art .art-slides { position:relative; height:260px; margin:24px 0; }
  .login-art .art-slides img { position:absolute; inset:0; margin:auto; max-width:100%; max-height:100%; opacity:0; transition:opacity .8s ease;
                               background:rgba(255,255,255,.92); border-radius:12px; padding:10px; }
  .login-art .art-slides img.is-active { opacity:1; }
  .login-art .art-foot { font-size:13px; opacity:.8; }
  .login-form-col { flex:1 1 50%; padding:40px 44px; }
  .brand-row { display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
  .brand-row .ihrms-logo { height:52px; width:auto; }
  .brand-row .company-logo { max-height:52px; max-width:180px; width:auto; }
  .login-title { font-size:22px; font-weight:700; text-align:center; margin:0 0 4px; }
  .login-sub   { text-align:center; color:var(--muted); font-size:14px; margin-bottom:22px; }
  .login-form-col label { font-weight:600; font-size:13px; margin-bottom:6px; color:var(--ink); }
  .field { position:relative; margin-bottom:16px; }
  .field .fa-icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; }
  .field .form-control { height:46px; padding-left:40px; border-radius:10px; border-color:var(--line); font-size:15px; }
  .field .form-control:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(31,162,184,.18); }
  .field.has-toggle .form-control { padding-right:46px; }
  .pw-toggle { position:absolute; right:4px; top:50%; transform:translateY(-50%); border:0; background:transparent; width:40px; height:40px;
               color:var(--muted); border-radius:8px; cursor:pointer; }
  .pw-toggle:hover, .pw-toggle:focus { color:var(--brand); outline:none; background:#f1f5f8; }
  .caps-hint { display:none; font-size:12px; color:#a35b00; margin-top:-10px; margin-bottom:12px; }
  .row-between { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; font-size:14px; }
  .row-between a { color:var(--brand); }
  .btn-login { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; height:46px; border:0; border-radius:10px;
               background:var(--brand); color:#fff; font-weight:600; font-size:15px; transition:background .2s ease; }
  .btn-login:hover, .btn-login:focus { background:var(--brand-dark); color:#fff; outline:none; box-shadow:0 0 0 3px rgba(22,69,99,.25); }
  .btn-login[disabled] { opacity:.7; cursor:wait; }
  .btn-login .spinner-border { width:1rem; height:1rem; border-width:.15em; display:none; }
  .btn-login.is-busy .spinner-border { display:inline-block; }
  .login-alert { border-radius:10px; font-size:14px; padding:10px 14px; margin-bottom:16px; }
  .otp-input { letter-spacing:.5em; font-size:20px !important; text-align:center; padding-left:12px !important; }
  .otp-actions { display:flex; justify-content:space-between; align-items:center; margin-top:14px; font-size:14px; }
  .otp-actions button.link { border:0; background:none; padding:0; color:var(--brand); text-decoration:underline; cursor:pointer; }
  .otp-actions button.link[disabled] { color:var(--muted); text-decoration:none; cursor:default; }
  .stores { display:flex; justify-content:center; gap:14px; margin-top:22px; }
  .stores img { height:34px; width:auto; }
  .privacy-note { font-size:12px; color:var(--muted); text-align:center; margin-top:18px; line-height:1.5; }
  .privacy-note a { color:var(--brand); }
  .login-copy { margin-top:18px; font-size:13px; color:var(--muted); text-align:center; }
  @media (max-width: 767.98px) {
    .login-art { display:none; }
    .login-form-col { padding:28px 20px; }
    .login-card { border-radius:14px; }
  }
  @media (prefers-reduced-motion: reduce) { .login-art .art-slides img { transition:none; } }

/* extra for forgot / reset pages */
.back-link { display:inline-flex; align-items:center; gap:6px; font-size:14px; color:var(--brand); margin-top:16px; }
.pw-rules { font-size:12px; color:var(--muted); margin:-8px 0 14px; line-height:1.5; }
.pw-rules li.ok { color:#1e7e34; }
.pw-rules ul { padding-left:18px; margin:4px 0 0; }
.single-card { max-width:460px; }
.single-card .login-form-col { flex:1 1 100%; }
body.login-page { background-attachment: fixed; min-height: 100vh; }