/* ---------------------------------------------------------------------------
   Sign-in screen.

   The layout is a direct transcription of the approved artwork: a 1672 × 941
   board split at x = 983 into a photographic panel and a cream one. Every
   measurement below is written in that board's own pixels and multiplied by
   --u (--hu on the photo side), a container-query unit that equals one board
   pixel when the panel is shown at its design size and scales with it
   otherwise. So the proportions hold at any window size, and the numbers in
   this file can still be checked against the artwork.
   --------------------------------------------------------------------------- */
.login-body {
  margin: 0;
  overflow: hidden;
  background: #fcfaf7;
  font-family: var(--font-family-primary);
}

.signin {
  direction: ltr;                      /* the photo is on the left in both scripts */
  display: grid;
  grid-template-columns: 983fr 689fr;
  min-height: 100vh;
  min-height: 100dvh;
}
.signin-hero,
.signin-panel { direction: rtl; }


/* ── photographic panel ──────────────────────────────────────────────────── */
.signin-hero {
  position: relative;
  container-type: size;
  display: grid;
  align-content: start;
  justify-items: center;
  overflow: hidden;
  background: #efe7dc;
}
.signin-hero > * { --hu: clamp(.42px, min(100cqw / 983, 100cqh / 941), 1.3px); }

.signin-hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* The copy sits a little right of centre, clear of the dark glass edge the
   photograph carries down its left side. */
.signin-hero-copy {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  width: 100%;
  padding-left: 12.3%;
  padding-top: calc(52 * var(--hu));
  text-align: center;
}
.signin-seal {
  width: calc(332 * var(--hu));
  height: calc(332 * var(--hu));
  margin: 0;
}
.signin-hero-name {
  margin: calc(12 * var(--hu)) 0 0;
  font-size: calc(53 * var(--hu));
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  color: #0a0a0a;
}
.signin-hero-trade {
  margin: calc(20 * var(--hu)) 0 0;
  font-size: calc(35 * var(--hu));
  font-weight: 700;
  line-height: 1;
  color: #a47434;
}
.signin-hero-tag {
  display: flex;
  align-items: center;
  gap: calc(26 * var(--hu));
  margin: calc(20 * var(--hu)) 0 0;
  font-size: calc(29 * var(--hu));
  font-weight: 700;
  line-height: 1;
  color: #0a0a0a;
}
.signin-hero-rule {
  width: calc(71 * var(--hu));
  height: calc(2 * var(--hu));
  background: #a98a5c;
}


/* ── cream panel ─────────────────────────────────────────────────────────── */
.signin-panel {
  position: relative;
  container-type: size;
  display: grid;
  align-content: center;
  justify-items: center;
  overflow: hidden;
  background: #fcfaf7;
}
.signin-panel > * { --u: clamp(.42px, min(100cqw / 689, 100cqh / 941), 1.12px); }

/* The gold line-work in the corners, lifted off the artwork. */
.signin-weave { position: absolute; z-index: 0; pointer-events: none; }
.signin-weave-top {
  top: 0; right: 0;
  width: calc(289 * var(--u)); height: calc(320 * var(--u));
}
.signin-weave-bottom {
  bottom: 0; right: 0;
  width: calc(234 * var(--u)); height: calc(251 * var(--u));
}

.signin-form {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  width: calc(555 * var(--u));
  /* The block is centred against the panel less the footer line, which is
     anchored to the bottom edge on its own. */
  margin-bottom: calc(18 * var(--u));
}

.signin-avatar {
  width: calc(60 * var(--u));
  height: calc(64 * var(--u));
  color: #b8894a;
}
.signin-title {
  margin: calc(26 * var(--u)) 0 0;
  font-size: calc(46 * var(--u));
  font-weight: 800;
  line-height: 1;
  color: #0c1420;
}
.signin-welcome {
  margin: calc(22 * var(--u)) 0 0;
  font-size: calc(25 * var(--u));
  font-weight: 500;
  line-height: 1;
  color: #5c6474;
}

/* ── the two credential fields ── */
.signin-field {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  width: 100%;
  height: calc(83 * var(--u));
  margin-top: calc(16 * var(--u));
  padding-inline: calc(24 * var(--u));
  border: calc(1.6 * var(--u)) solid #dfe0e6;
  border-radius: calc(16 * var(--u));
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.signin-field:first-of-type { margin-top: calc(34 * var(--u)); }
.signin-field:focus-within {
  border-color: #c69c56;
  box-shadow: 0 0 0 calc(3 * var(--u)) rgba(198, 156, 86, .16);
}
.signin-field-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  color: #0d121c;
}
.signin-field-icon svg { width: 100%; height: 100%; }
.signin-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: calc(25 * var(--u));
  font-weight: 500;
  color: #0c1420;
}
.signin-input::placeholder { color: #646c7c; opacity: 1; }
.signin-input:focus { outline: 0; }
.signin-input:-webkit-autofill { -webkit-text-fill-color: #0c1420; }
.signin-eye {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(34 * var(--u));
  height: calc(34 * var(--u));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #b08044;
  cursor: pointer;
}
.signin-eye svg { width: 100%; height: 100%; }
.signin-eye:hover { color: #926829; }
.signin-eye:focus-visible { outline: calc(2 * var(--u)) solid #c69c56; outline-offset: calc(2 * var(--u)); }

/* ── الدخول ── */
.signin-enter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(19 * var(--u));
  width: 100%;
  height: calc(76 * var(--u));
  margin-top: calc(23 * var(--u));
  border: 0;
  border-radius: calc(16 * var(--u));
  background: linear-gradient(to bottom left, #cb9a55 0%, #a87736 100%);
  box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(168, 119, 54, .22);
  font-family: inherit;
  font-size: calc(28 * var(--u));
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: filter .15s, box-shadow .15s;
}
.signin-enter svg { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
.signin-enter:hover { filter: brightness(1.05); }
.signin-enter:active { filter: brightness(.96); box-shadow: none; }
.signin-enter:focus-visible { outline: calc(2 * var(--u)) solid #8d6324; outline-offset: calc(3 * var(--u)); }

/* ── نفاذ — shown as it will appear, switched off until the link to the
      National Information Center is live. ── */
.signin-nafath {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: calc(94 * var(--u));
  margin-top: calc(28 * var(--u));
  padding: 0;
  border: calc(1.8 * var(--u)) solid #c6a371;
  border-radius: calc(16 * var(--u));
  background: #fdfcfa;
  cursor: not-allowed;
}
.signin-nafath img {
  width: calc(358 * var(--u));
  height: calc(80 * var(--u));
  /* the artwork sets the lockup a touch off centre, towards نفاذ */
  margin-inline-end: calc(20 * var(--u));
  opacity: .92;
}
.signin-soon {
  position: absolute;
  top: calc(-11 * var(--u));
  inset-inline-start: calc(22 * var(--u));
  padding: calc(2 * var(--u)) calc(12 * var(--u));
  border-radius: 999px;
  background: #c6a371;
  font-size: calc(17 * var(--u));
  font-weight: 700;
  color: #fff;
}

/* ── choosing the product before signing in ── */
.signin-picker {
  position: absolute;
  z-index: 2;
  top: calc(44 * var(--u));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: calc(10 * var(--u));
  width: calc(555 * var(--u));
}
.signin-chip { flex: 1 1 0; cursor: pointer; }
.signin-chip input { position: absolute; opacity: 0; pointer-events: none; }
.signin-chip span {
  display: grid;
  place-items: center;
  height: calc(46 * var(--u));
  border: calc(1.4 * var(--u)) solid #e7e2d8;
  border-radius: calc(12 * var(--u));
  background: #fff;
  font-size: calc(21 * var(--u));
  font-weight: 600;
  color: #7c8192;
  transition: border-color .15s, background .15s, color .15s;
}
.signin-chip:hover span { border-color: #d8c49c; }
.signin-chip input:checked + span {
  border-color: #c6a371;
  background: #fbf3e6;
  color: #8d6324;
}
.signin-chip input:focus-visible + span { outline: calc(2 * var(--u)) solid #c69c56; outline-offset: calc(2 * var(--u)); }

.signin-error {
  width: 100%;
  margin: calc(18 * var(--u)) 0 0;
  padding: calc(14 * var(--u)) calc(18 * var(--u));
  border: calc(1.4 * var(--u)) solid #e9b9bb;
  border-radius: calc(12 * var(--u));
  background: #fdf2f2;
  font-size: calc(21 * var(--u));
  font-weight: 600;
  line-height: 1.5;
  color: #9b2227;
}

/* ── the reassurance line along the bottom ── */
.signin-foot {
  position: absolute;
  z-index: 1;
  bottom: calc(82 * var(--u));
  inset-inline: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(22 * var(--u));
  margin: 0;
  font-size: calc(25 * var(--u));
  font-weight: 500;
  color: #606878;
}
.signin-foot-rule {
  width: calc(78 * var(--u));
  height: calc(1.6 * var(--u));
  background: #c3a173;
}
.signin-shield {
  width: calc(31 * var(--u));
  height: calc(38 * var(--u));
  color: #b08044;
}


/* ── stacked, for a phone ────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .login-body { overflow: auto; }
  .signin { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }

  /* The photograph becomes a banner: tall enough for the seal and the company
     name, with the skyline still showing underneath. */
  .signin-hero {
    /* the artwork's top two thirds — seal, name and the skyline beneath it */
    /* aspect-ratio alone would let the box narrow itself to meet max-height */
    width: 100%;
    height: auto;
    aspect-ratio: 983 / 650;
    max-height: 42vh;
  }
  /* cqh is in the unit as well, so a short banner shrinks the copy to fit it
     rather than letting the tagline run off the bottom edge. */
  .signin-hero > * { --hu: clamp(.18px, min(100cqw / 983, 100cqh / 620), .75px); }
  .signin-hero-photo { object-position: center top; }
  .signin-hero-copy { padding-left: 8%; }

  .signin-panel {
    container-type: inline-size;
    padding: calc(30 * var(--u)) 0 calc(34 * var(--u));
  }
  .signin-panel > * { --u: clamp(.5px, (100cqw - 34px) / 555, .85px); }
  .signin-weave-top { width: calc(200 * var(--u)); height: calc(222 * var(--u)); }
  .signin-weave-bottom { width: calc(162 * var(--u)); height: calc(174 * var(--u)); }

  /* No room for a margin to hang the picker in, so it rejoins the form. */
  .signin-picker {
    position: static;
    transform: none;
    width: calc(555 * var(--u));
    margin-bottom: calc(26 * var(--u));
  }
  .signin-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .signin-form { margin-bottom: 0; }
  .signin-foot { position: static; margin-top: calc(48 * var(--u)); }

  /* Type and targets stop shrinking with the artwork below tablet size. */
  .signin-input, .signin-input::placeholder { font-size: max(16px, calc(25 * var(--u))); }
  .signin-field { height: max(56px, calc(83 * var(--u))); }
  .signin-enter { height: max(52px, calc(76 * var(--u))); font-size: max(17px, calc(28 * var(--u))); }
  .signin-chip span { height: max(40px, calc(46 * var(--u))); padding-inline: 2px;
    font-size: max(11.5px, calc(21 * var(--u))); white-space: nowrap; }
  .signin-welcome { font-size: max(14px, calc(25 * var(--u))); }
  .signin-foot { font-size: max(13px, calc(25 * var(--u))); }
}