/* =====================================================================
   Iqra Public School - login page
   Matches the approved mock-up (1746 x 901). login-bg.webp is that mock-up
   with the text/icons/card removed; everything is placed in mock-up pixels:
     --sx / --sy : 1 mock-up px horizontally / vertically (background is stretched
                   to the viewport, so positions always line up with the picture)
     --s         : uniform scale for sizes and fonts (keeps text in proportion)
   ===================================================================== */
@font-face { font-family: "Poppins"; src: url("../fonts/poppins/Poppins-Regular.ttf"); font-weight: 400; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins/Poppins-Medium.ttf"); font-weight: 500; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins/Poppins-SemiBold.ttf"); font-weight: 600; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins/Poppins-Bold.ttf"); font-weight: 700; }

:root {
  --sx: calc(100vw / 1746);
  --sy: calc(100vh / 901);
  --s: min(var(--sx), var(--sy));

  --green: #02825f;
  --green-dark: #01433c;
  --green-icon: #0a8e68;
  --rule: #01b880;
  --label: #005c4e;
  --cell: #e8f9f6;
  --navy: #1d3557;
  --muted: #7d8b9c;
  --line: #e3e8ee;
  --req: #e5484d;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: "Poppins", "Segoe UI", Arial, sans-serif;
  color: var(--navy);
  background: #01433c url("login-bg.webp") 0 0 / 100% 100% no-repeat fixed;
  min-height: 100vh;
}

.shell { position: relative; min-height: 100vh; }

/* ---------- left: school information ---------- */
.hero { position: absolute; inset: 0 auto 0 0; width: calc(940 * var(--sx)); color: #fff; }

.brand img {
  position: absolute;
  left: calc(116 * var(--sx));
  top: calc(74 * var(--sy));
  width: calc(116 * var(--s));
  height: calc(116 * var(--s));
  border-radius: 50%;
  background: #fff;
  padding: calc(12 * var(--s));
  box-shadow: 0 calc(8 * var(--s)) calc(28 * var(--s)) #00302a55;
}

.brand h1 {
  position: absolute;
  left: calc(264 * var(--sx));
  top: calc(78 * var(--sy));
  margin: 0;
  font-size: calc(46 * var(--s));
  font-weight: 600;
  letter-spacing: calc(-0.5 * var(--s));
  line-height: 1.15;
  white-space: nowrap;
}

.brand p {
  position: absolute;
  left: calc(264 * var(--sx));
  top: calc(140 * var(--sy));
  margin: 0;
  font-size: calc(28 * var(--s));
  font-weight: 500;
  white-space: nowrap;
}

.short-rule {
  position: absolute;
  left: calc(264 * var(--sx));
  top: calc(191 * var(--sy));
  width: calc(158 * var(--s));
  height: calc(5 * var(--s));
  border-radius: 3px;
  background: var(--rule);
}

.tagline {
  position: absolute;
  left: calc(264 * var(--sx));
  top: calc(208 * var(--sy));
  margin: 0;
  font-size: calc(19 * var(--s));
  white-space: nowrap;
  opacity: 0.95;
}

.features { position: absolute; left: calc(70 * var(--sx)); top: calc(278 * var(--sy)); display: flex; }
.feature {
  position: relative;
  width: calc(203 * var(--sx));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(12 * var(--s));
  font-size: calc(17 * var(--s));
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}
.feature + .feature:before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(24 * var(--s));
  width: 1px;
  height: calc(90 * var(--s));
  background: #ffffff66;
}
.feature-icon {
  display: grid;
  place-items: center;
  width: calc(68 * var(--s));
  height: calc(68 * var(--s));
  border-radius: 50%;
  background: var(--green-icon);
  box-shadow: 0 calc(8 * var(--s)) calc(20 * var(--s)) #00302a40;
}

svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.feature-icon svg { width: calc(32 * var(--s)); height: calc(32 * var(--s)); }

.doodles { position: absolute; left: calc(730 * var(--sx)); top: calc(30 * var(--sy)); width: calc(210 * var(--s)); opacity: 0.18; }
.doodles svg { width: 100%; height: auto; stroke: #fff; stroke-width: 1.6; }

/* ---------- right: login card ---------- */
.login-area { position: absolute; left: calc(957 * var(--sx)); top: calc(30 * var(--sy)); width: calc(633 * var(--sx)); height: calc(840 * var(--sy)); }

.login-card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 calc(41 * var(--sx));
  background: #fff;
  border-radius: calc(26 * var(--s));
  box-shadow: 0 calc(20 * var(--s)) calc(60 * var(--s)) #00302a40;
}

.welcome-icon { color: var(--green-icon); text-align: center; line-height: 0; }
.welcome-icon svg { width: calc(50 * var(--s)); height: calc(50 * var(--s)); stroke-width: 1.8; }

.login-card h2 { margin: calc(8 * var(--s)) 0 calc(4 * var(--s)); text-align: center; font-size: calc(34 * var(--s)); font-weight: 600; color: var(--navy); }
.intro { margin: 0 0 calc(34 * var(--s)); text-align: center; font-size: calc(17 * var(--s)); color: var(--muted); }

.field { margin-bottom: calc(20 * var(--s)); }
.field label { display: block; margin-bottom: calc(9 * var(--s)); font-size: calc(17 * var(--s)); font-weight: 600; color: var(--label); }
.field label .req { color: var(--req); margin-right: calc(5 * var(--s)); }

.input-wrap {
  display: flex;
  align-items: center;
  height: calc(56 * var(--s));
  border: 1.5px solid var(--line);
  border-radius: calc(28 * var(--s));
  overflow: hidden;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.input-wrap:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px #02825f22; }

.leading-icon { display: grid; place-items: center; align-self: stretch; min-width: calc(62 * var(--s)); background: var(--cell); color: var(--green-icon); }
.leading-icon svg { width: calc(26 * var(--s)); height: calc(26 * var(--s)); }

.input-wrap input,
.input-wrap select {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 calc(14 * var(--s));
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: calc(17 * var(--s));
  color: #3c4f63;
}
.input-wrap input::placeholder { color: #8a99ab; }
.select-wrap select { cursor: pointer; }

.eye-btn { display: grid; place-items: center; padding: 0 calc(18 * var(--s)); border: 0; background: transparent; color: #6f7f92; cursor: pointer; }
.eye-btn:hover { color: var(--green); }
.eye-btn svg { width: calc(26 * var(--s)); height: calc(26 * var(--s)); }

.login-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--s));
  width: 100%;
  height: calc(60 * var(--s));
  margin-top: calc(28 * var(--s));
  border: 0;
  border-radius: calc(30 * var(--s));
  background: var(--green);
  color: #fff;
  font-family: inherit;
  font-size: calc(21 * var(--s));
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 calc(8 * var(--s)) calc(18 * var(--s)) #02825f33;
  transition: filter 0.15s, transform 0.15s;
}
.login-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.login-button:disabled { opacity: 0.75; cursor: wait; }
.login-button svg { width: calc(26 * var(--s)); height: calc(26 * var(--s)); }

.form-message { margin-top: calc(6 * var(--s)); padding: calc(10 * var(--s)); border-radius: 8px; font-size: calc(14 * var(--s)); color: #a33b20; background: #fff1ed; }
.form-message.info { color: var(--label); background: var(--cell); }

.help { margin-top: calc(26 * var(--s)); text-align: center; }
.help-separator { display: flex; align-items: center; gap: calc(14 * var(--s)); margin-bottom: calc(18 * var(--s)); font-size: calc(16 * var(--s)); color: #8a97a8; }
.help-separator:before, .help-separator:after { content: ""; flex: 1; height: 1px; background: var(--line); }
.help a { display: inline-flex; align-items: center; gap: calc(9 * var(--s)); font-size: calc(17 * var(--s)); font-weight: 500; color: var(--label); cursor: pointer; text-decoration: none; }
.help a svg { width: calc(22 * var(--s)); height: calc(22 * var(--s)); }

/* ---------- phones / narrow or very tall windows: simple stacked layout ---------- */
@media (max-width: 900px), (max-aspect-ratio: 5/4) {
  body { background: #f3f8f6; }
  .shell { display: flex; flex-direction: column; }
  .hero, .login-area { position: static; width: auto; height: auto; }
  .hero { padding: 26px 20px 28px; background: radial-gradient(ellipse at 65% 30%, #02825f 0%, #01433c 70%); }
  .brand { display: flex; align-items: center; gap: 14px; }
  .brand img, .brand h1, .brand p, .short-rule, .tagline, .features { position: static; }
  .brand img { width: 62px; height: 62px; padding: 7px; }
  .brand h1 { font-size: 24px; white-space: normal; }
  .brand p { font-size: 14px; white-space: normal; }
  .short-rule { width: 110px; height: 4px; margin: 14px 0 8px 76px; }
  .tagline { margin: 0 0 20px 76px; font-size: 13px; white-space: normal; }
  .features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .feature { width: auto; font-size: 10px; gap: 6px; }
  .feature + .feature:before, .doodles { display: none; }
  .feature-icon { width: 42px; height: 42px; }
  .feature-icon svg { width: 21px; height: 21px; }
  .login-area { padding: 20px 12px 30px; }
  .login-card { height: auto; padding: 28px 20px 24px; border-radius: 18px; box-shadow: 0 6px 24px #00302a1a; }
  .welcome-icon svg { width: 42px; height: 42px; }
  .login-card h2 { font-size: 26px; }
  .intro { font-size: 14px; margin-bottom: 22px; }
  .field { margin-bottom: 16px; }
  .field label, .input-wrap input, .input-wrap select, .help a { font-size: 15px; }
  .input-wrap { height: 50px; border-radius: 25px; }
  .leading-icon { min-width: 54px; }
  .leading-icon svg, .eye-btn svg, .login-button svg { width: 22px; height: 22px; }
  .eye-btn { padding: 0 14px; }
  .login-button { height: 52px; font-size: 18px; border-radius: 26px; margin-top: 22px; }
  .form-message { font-size: 13px; padding: 10px; }
  .help-separator { font-size: 14px; }
}