/* Esnad Financial (إسناد المالية) — branded csauth login/register.
   Self-contained + CSP-safe: no CDN, no inline styles, no external fonts.
   Reproduces the green split-card design from the source Bootstrap template. */

/* ---- Tajawal is Google-hosted and blocked by font-src 'self'. To use it, drop
   Tajawal-*.woff2 into this assets/ folder and uncomment the @font-face below;
   otherwise it falls back cleanly to the system Arabic UI font. ----
@font-face { font-family:'Tajawal'; font-style:normal; font-weight:400 700;
  src:url('/tpl-asset/Tajawal.woff2') format('woff2'); font-display:swap; }
*/

:root{
  --brand:#05c483; --brand-2:#029b68; --brand-hover:#04aa70;
  --bg:#eef2f5; --card:#ffffff; --text:#1f2b33; --muted:#6b7b86;
  --input-bg:#ffffff; --input-border:#d3dde3; --input-focus:rgba(5,196,131,.25);
  --shadow:0 10px 40px rgba(2,80,55,.12);
}
:root[data-theme="dark"]{
  --bg:#10161b; --card:#1a232b; --text:#e7edf1; --muted:#9fb0bb;
  --input-bg:#141c22; --input-border:#2c3a44; --input-focus:rgba(5,196,131,.35);
  --shadow:0 10px 40px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Tajawal','Segoe UI',Tahoma,Arial,'Noto Kufi Arabic',sans-serif;
  transition:background-color .3s,color .3s;
  display:flex; align-items:center; justify-content:center; min-height:100vh; padding:1.5rem;
}

/* theme toggle */
.theme-toggle{
  position:fixed; top:1rem; inset-inline-start:1rem; z-index:10;
  background:none; border:none; font-size:1.5rem; line-height:1; cursor:pointer;
  transition:transform .3s; color:inherit;
}
.theme-toggle:hover{transform:rotate(20deg)}

/* card */
.login-card{
  width:100%; max-width:900px; background:var(--card); color:var(--text);
  border-radius:1rem; overflow:hidden; box-shadow:var(--shadow);
  display:grid; grid-template-columns:1fr 1fr; transition:background-color .3s,color .3s;
}
.info-column{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff; padding:3rem; display:flex; flex-direction:column; justify-content:center; text-align:center;
}
.info-column h2{font-weight:700; font-size:2rem; margin:0 0 1rem}
.info-column p{margin:0; line-height:1.9; opacity:.95}
.form-column{padding:3rem; display:flex; flex-direction:column; justify-content:center}

/* logo */
.brand-logo{display:flex; justify-content:center; margin-bottom:1.5rem}
.brand-logo img{width:50%; max-width:180px; height:auto}

/* form */
.field{display:block; margin-bottom:1rem}
.field > span{display:block; margin-bottom:.4rem; font-weight:500; font-size:.95rem}
.field input,.field select{
  width:100%; padding:.7rem .9rem; font:inherit; color:var(--text);
  background:var(--input-bg); border:1px solid var(--input-border); border-radius:.5rem;
  transition:border-color .2s,box-shadow .2s;
}
.field input:focus,.field select:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 .2rem var(--input-focus);
}
.field select{appearance:none; background-image:none}

.row-between{display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; gap:.5rem}
.check{display:flex; align-items:center; gap:.4rem; font-size:.92rem; color:var(--muted)}
.check input{width:auto; margin:0}

.btn{
  display:block; width:100%; padding:.7rem 1rem; margin-top:.5rem;
  font:inherit; font-weight:700; color:#fff; background:var(--brand);
  border:1px solid var(--brand); border-radius:.75rem; cursor:pointer; transition:background-color .25s,border-color .25s;
}
.btn:hover{background:var(--brand-hover); border-color:var(--brand-hover)}

a{color:var(--brand); text-decoration:none}
a:hover{color:var(--brand-hover); text-decoration:underline}
.switch{text-align:center; margin-top:1.25rem; color:var(--muted)}
.switch a{font-weight:600}
.hint{font-size:.82rem; color:var(--muted); margin:.3rem 0 0}

/* honeypot — must stay invisible + non-focusable */
/* honeypot: clip-hide (NOT left:-9999px — that overflows in RTL → blank page on mobile) */
.hp{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;border:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;pointer-events:none}

/* messages */
.alert{background:#fdecea; color:#9b2c2c; border:1px solid #f5c6cb; border-radius:.5rem; padding:.7rem .9rem; margin-bottom:1rem; font-size:.9rem}
:root[data-theme="dark"] .alert{background:#3a1f22; color:#f3b6ba; border-color:#5a2a2e}
.notice{background:#e8f8f1; color:#0a6b47; border:1px solid #bfe9d7; border-radius:.5rem; padding:.7rem .9rem; margin-bottom:1rem; font-size:.9rem}
:root[data-theme="dark"] .notice{background:#123027; color:#8ee0bf; border-color:#1f4a3a}
.fe{color:#c0392b; font-size:.82rem; margin:-.6rem 0 .8rem}
:root[data-theme="dark"] .fe{color:#f0a9a2}

/* responsive: stack, hide the hero on phones (matches the source) */
@media (max-width:767px){
  .login-card{grid-template-columns:1fr}
  .info-column{display:none}
  .form-column{padding:2rem}
}