/* === ARBPAY Login — vibe matched & fixed 387×941 === */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

:root{
  /* colors tweaked to feel like ARBPAY */
  --bg:#8f939b;          /* backdrop grey */
  --card:#ffffff;
  --title:#141820;       /* heading */
  --label:#6b717a;       /* form labels */
  --placeholder:#c6ccd4; /* input placeholder */
  --field:#f5f6f8;       /* input bg */
  --border:#e7e9ee;      /* input border */
  --yellow:#ffc107;      /* primary */
  --yellow-press:#f0b40a;
  --help:#eceff3;        /* help button */
  --shadow:0 16px 36px rgba(0,0,0,.22); /* deeper app shadow */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--title);
  -webkit-font-smoothing:antialiased;
}

.wrapper{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
}

/* fixed “mobile frame” */
.phone-frame{
  width:387px; height:941px;
  background:var(--card);
  border-radius:16px;
  box-shadow:var(--shadow);
  overflow:hidden;
  display:flex; flex-direction:column;
}

/* header spacing tuned to ARBPAY */
.header{
  padding:26px 26px 4px;
  position:relative;
}
.header .lang{
  position:absolute; right:20px; top:18px;
  display:flex; align-items:center; gap:8px;
  font-size:12px; color:#8a8f96;
}
.title{
  margin:0;
  font-size:34px;        /* bigger like ARBPAY */
  font-weight:800;
  letter-spacing:.3px;
  line-height:1.05;
  color:var(--title);
}

/* content */
.section{ padding:10px 26px 22px; overflow:auto; }

.label{
  font-size:13px; color:var(--label);
  margin:16px 0 8px;
}

/* input rows */
.input-row{
  display:flex; align-items:center; gap:10px;
  height:46px;
  background:var(--field);
  border:1px solid var(--border);
  border-radius:10px;
  padding:0 12px;
}
.input-row input{
  width:100%; border:0; outline:none; background:transparent;
  font-size:15px; color:#1b1f24;
}
.input-row input::placeholder{ color:var(--placeholder); }

.input{
  width:100%; height:46px;
  background:var(--field);
  border:1px solid var(--border);
  border-radius:10px;
  padding:0 12px; font-size:15px; color:#1b1f24; outline:none;
}
.input::placeholder{ color:var(--placeholder); }

.input:focus, .input-row:focus-within{
  border-color:#cfd3d9; background:#fff;
}

/* flag [+91] chip */
.flagchip{
  display:flex; align-items:center; gap:8px;
  padding:4px 10px; border-radius:10px;
  background:#fff; border:1px solid var(--border);
}
.flagchip .dial{ font-size:13px; color:#6b7076; }

/* row utils */
.row-between{ display:flex; align-items:center; justify-content:space-between; }
.link{ color:#f0b40a; font-size:12.5px; text-decoration:none; }
.link:hover{ text-decoration:underline; }

.icon-eye{ width:20px; height:20px; opacity:.45; }

/* buttons */
.btn{
  width:100%; height:46px; border-radius:10px; border:0; cursor:pointer;
  font-weight:700; font-size:15px;
}
.btn-primary{ background:var(--yellow); color:#111; }
.btn-primary:active{ background:var(--yellow-press); }
.btn-light{ background:var(--help); color:#1b1f24; }

.footer-note{ padding:6px 26px 22px; font-size:12.5px; color:#6f7680; }
.notice{ color:#e11d48; font-size:12.5px; margin-top:10px; }

/* small polish for card corners shadow “lift” */
.phone-frame::after{
  content:""; position:absolute; inset:0; border-radius:16px; pointer-events:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.02) inset;
}