/*
 * Auth screens. Figma "Authentication / Sign in" 2138:11987, frame 1440 x 1024, bg #eff3f3.
 * Measurements read from get_design_context:
 *   hero            680 x 1024 at the physical left edge (export of 2138:11991)
 *   navbar          height 94 (py 10 + inner py 13 + 48); inline padding 40 + 32 = 72
 *   logo            wordmark 127.8 x 25.7 (img 123.87 % wide, clipped), gap 2.14, mark 30 x 30,
 *                   mark fill secondary-500 via mask 26 x 24 at 2px 2px
 *   close / lang    close box 42, icon 24; gap 8; language 42 high, px 14, chevron 16, gap 4,
 *                   text 500 15/22 text-secondary
 *   main            padding-inline 40, two 680 columns; card column padding-inline 40 -> card 600 wide
 *   card            white, padding 40 / 32 (inner 536), gap 32, no radius, no border
 *   heading group   padding 24, gap 12; title 500 19/1.4 ls -0.38 primary-900; sub 400 17/24 gray-700
 *   form            padding-top 24, bottom 32, gap 20; fields block py 12, gap 16
 *   label           400 13/15 text-primary, asterisk #e64449, gap to input 8
 *   input           height 48, border 1 gray-300, px 16, text 400 15/24; email placeholder
 *                   text-disabled; password placeholder 500 17/24 #a4a7ae; eye 18 px gray-700
 *   forgot          500 12/18 #535862, link underlined
 *   buttons         height 48, 500 17/26, no radius; primary shadow 0 2 6 #03424052;
 *                   social: 1px gray-700 border, text gray-700, gap 10, G 24 px
 *   divider         gap 8, lines 1px #e9eaeb, text 400 14/20 #717680; gap to google button 16
 *   signup box      bg #eff3f3, py 16, gap 4, text 400 14/20 gray-700, link 600 14/20 primary-500
 *   footer          height 78, text 300 18/1.2 gray-600 centred
 */

body.auth {
  background: #eff3f3;
}

.auth-page {
  position: relative;
  inline-size: min(var(--portal-width), 100%);
  min-block-size: 100vh;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  background: #eff3f3;
  overflow: hidden;
}

.auth-hero {
  position: absolute;
  inset-block: 0;
  left: 0;
  inline-size: 680px;
  overflow: hidden;
  background: #eff3f3;
}

.auth-hero img {
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
}

.auth-nav,
.auth-main,
.auth-footer {
  position: relative;
}

.auth-nav {
  flex: none;
  block-size: 94px;
  padding-inline: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.auth-logo {
  display: flex;
  align-items: center;
  gap: 2.143px;
  direction: ltr;
}

.auth-logo__word {
  position: relative;
  display: block;
  inline-size: 127.8px;
  block-size: 25.714px;
  overflow: hidden;
}

.auth-logo__word img {
  position: absolute;
  left: 0;
  top: 0;
  inline-size: 123.87%;
  block-size: 100%;
  max-inline-size: none;
}

.auth-logo__mark {
  position: relative;
  flex: none;
  inline-size: 30px;
  block-size: 30px;
}

.auth-logo__mark-fill {
  position: absolute;
  left: 50%;
  top: 50%;
  inline-size: 32.143px;
  block-size: 30px;
  transform: translate(-50%, -50%);
  background: var(--color-secondary-500);
  mask-image: url("../img/auth-logo-mark.a148e39e0614.png");
  mask-size: 26px 24px;
  mask-position: 2px 2px;
  mask-repeat: no-repeat;
  -webkit-mask-image: url("../img/auth-logo-mark.a148e39e0614.png");
  -webkit-mask-size: 26px 24px;
  -webkit-mask-position: 2px 2px;
  -webkit-mask-repeat: no-repeat;
}

.auth-nav__controls {
  display: flex;
  align-items: center;
  gap: 8px;
  direction: ltr;
}

.auth-nav__close {
  inline-size: 42px;
  block-size: 42px;
  display: grid;
  place-items: center;
}

.auth-lang {
  margin: 0;
}

.auth-lang button {
  block-size: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  font: var(--text-btn-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
}

.auth-lang button:hover {
  color: var(--color-primary-900);
}

.auth-lang button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.auth-main {
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding-inline: 40px;
}

.auth-card {
  grid-column: 1;
  margin-inline: 40px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 32px;
  padding: 40px 32px;
  background: var(--color-white);
}

.auth-card__top {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-block-end: 20px;
}

.auth-card__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
}

.auth-card__title {
  font: 500 19px/1.4 var(--font-sans);
  color: var(--color-primary-900);
}

.auth-card__sub {
  font: 400 17px/24px var(--font-sans);
  color: var(--color-gray-700);
}

.auth-card__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-block: 24px 32px;
}

.auth-card__fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-block: 12px;
}

.auth-card__formbox {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
}

.auth-card .field__required {
  color: #e64449;
}

.auth-card .field__input,
.auth-card .btn {
  border-radius: 0;
}

.auth-card .field__input {
  border-color: var(--color-gray-300);
}

.auth-card .field__input::placeholder {
  color: var(--color-text-disabled);
  opacity: 1;
}

.auth-card input[type="password"]::placeholder {
  font: 500 17px/24px var(--font-sans);
  color: var(--color-neutral-400);
}

.auth-card .field__control .field__input {
  padding-inline-end: 48px;
}

.auth-card .field__toggle {
  inset-inline-end: 16px;
  inline-size: 18px;
  block-size: 18px;
  padding: 0;
  color: var(--color-gray-700);
}

.auth-card .field__toggle:hover {
  background: transparent;
}

.auth-card .field__toggle .icon {
  inline-size: 18px;
  block-size: 18px;
}

.auth-card__forgot {
  font: var(--text-xs-medium);
  color: var(--color-neutral-600);
  text-align: left;
}

.auth-card__forgot a {
  color: inherit;
  text-decoration: underline;
}

.auth-card__alt {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 8px;
}

.auth-divider__line {
  flex: 1;
  block-size: 1px;
  background: var(--color-neutral-200);
}

.auth-divider__text {
  font: var(--text-sm-regular);
  color: var(--color-neutral-500);
}

.btn--social {
  gap: 10px;
  padding-inline: var(--pad-4);
  background: transparent;
  border-color: var(--color-gray-700);
  color: var(--color-gray-700);
}

.btn--social[aria-disabled="true"] {
  cursor: help;
}

.btn__g {
  position: relative;
  flex: none;
  inline-size: 14px;
  block-size: 22px;
}

.btn__g img {
  position: absolute;
  max-inline-size: none;
  left: -3px;
  top: -1px;
  inline-size: 24px;
  block-size: 24px;
}

.auth-card__signup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding-block: 16px;
  background: #eff3f3;
  font: var(--text-sm-regular);
  color: var(--color-gray-700);
}

.auth-card__signup a {
  font-weight: 500;
  text-decoration: underline;
  color: var(--color-primary-500);
}

.auth-footer {
  flex: none;
  block-size: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 300 18px/1.2 var(--font-sans);
  color: var(--color-gray-600);
}

/*
 * Sign up (one form, three states). Figma 2138:15341 empty, 2138:15382 first-name focused,
 * 2138:15423 first-name filled. Same markup: states come from :focus-within / :placeholder-shown.
 *   formbox         padding-top 24, gap 20; fields py 12, gap 16
 *   password hint   400 11/13 text-secondary, 8 px under the input
 *   mobile          input 48 high, px 16, gap 10; prefix "+ 966" 400 17/24 + chevron 14, divider 18 x 1
 *   terms           400 12/18 gray-600, links #034240 underlined
 *   signup box      same as sign in
 */
.auth-hero--signup {
  inset-block-end: auto;
  block-size: 1065px;
}

.auth-card__top--signup {
  padding-block-end: 0;
}

.auth-card__formbox--signup {
  padding-block-start: 24px;
}

/* Sign-up password placeholders are 500 15/24 (sign-in uses 17). */
.auth-card__formbox--signup input[type="password"]::placeholder {
  font: 500 15px/24px var(--font-sans);
}

.auth-card .field__help {
  font: 400 11px/13px var(--font-sans);
  color: var(--color-text-secondary);
}

.field__phone {
  display: flex;
  align-items: center;
  gap: 10px;
  block-size: 48px;
  padding-inline: var(--pad-4);
  border: 1px solid var(--color-gray-300);
  background: var(--color-paper);
}

.field__phone .field__input {
  flex: 1;
  min-inline-size: 0;
  block-size: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: right;
}

.field__phone .field__input:focus {
  box-shadow: none;
}

.field__prefix {
  display: flex;
  align-items: center;
  gap: 4px;
  font: 400 17px/24px var(--font-sans);
  color: var(--color-text-primary);
}

.field__prefix-code::first-letter {
  margin-inline-end: 4px;
}

.field__prefix img {
  inline-size: 14px;
  block-size: 14px;
}

.field__phone-divider {
  inline-size: 1px;
  block-size: 18px;
  object-fit: fill;
}

/* Focus: any control in the group lights the border (state 2); a filled input keeps gray-300. */
.auth-card .field__input:focus,
.field__phone:focus-within {
  border-color: var(--color-primary-500);
  box-shadow: var(--focus-ring);
}

.field__phone:focus-within {
  box-shadow: var(--focus-ring);
}

.auth-card .field__input:not(:placeholder-shown):not(:focus) {
  color: var(--color-text-primary);
}

.auth-terms {
  display: grid;
  gap: 4px;
}

.auth-terms__text {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  font: 400 12px/18px var(--font-sans);
  color: var(--color-gray-600);
}

.auth-terms__box {
  flex: none;
  inline-size: 14px;
  block-size: 14px;
  margin: 2px 0 0;
  accent-color: var(--color-primary-500);
}

.auth-terms a {
  color: var(--color-primary-500);
  text-decoration: underline;
}

/* ---- Figma pixel nudges (1440 viewport, Chrome) ---- */

/* Figma's card sits on a .6px fraction; Chrome snaps box edges, so offset it. */
.auth-card {
  transform: translateY(0.6px);
}

/* Chrome ignores letter-spacing on Arabic; shrink word gaps to match Figma's title width. */
.auth-card__title {
  word-spacing: -2px;
}

/* Footer text sits 1px lower in Figma. */
.auth-footer {
  padding-block: 2px 0;
}

/* Email placeholder sits 1px higher in Figma. */
.auth-card input[type="email"] {
  padding-block: 0 2px;
}

/* Password placeholder sits 1px further right in Figma. */
.auth-card input[type="password"] {
  padding-inline-start: 15px;
}

@media (max-width: 1100px) {
  .auth-hero {
    display: none;
  }

  .auth-nav {
    padding-inline: 24px;
  }

  .auth-main {
    grid-template-columns: 1fr;
    padding-inline: 16px;
  }

  .auth-card {
    margin-inline: 0;
    padding-inline: 16px;
  }
}

/* Sign-up card lands on whole pixels in Figma (no .6px offset). */
.auth-card:has(.auth-card__top--signup) {
  transform: none;
}

/* allauth MFA pages (templates/mfa/*) inside the auth card */
.auth-mfa {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-inline: 24px;
}

.auth-mfa__panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--color-gray-200, #e5e7eb);
  border-radius: 12px;
}

.auth-mfa__text h2 {
  font: 500 17px/1.4 var(--font-sans);
  color: var(--color-primary-900);
}

.auth-mfa__text p {
  font: 400 15px/22px var(--font-sans);
  color: var(--color-gray-700);
}

.auth-mfa__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.auth-mfa__qr {
  align-self: center;
  border: 1px solid var(--color-gray-200, #e5e7eb);
  border-radius: 12px;
  padding: 8px;
  background: #fff;
}

.auth-mfa__codes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 0;
  padding: 16px;
  list-style: none;
  border-radius: 12px;
  background: #eff3f3;
  font: 500 16px/24px var(--font-mono, ui-monospace, monospace);
  color: var(--color-primary-900);
}

.auth-mfa__link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 500;
  text-decoration: underline;
  color: var(--color-primary-500);
  cursor: pointer;
}

/* English mirrors the Arabic frame: the image panel moves to the other edge, the form keeps
   the first grid column (left in LTR). */
html[dir="ltr"] .auth-hero {
  left: auto;
  right: 0;
}

/* A phone number reads left to right in both languages: +966 sits on the left. */
.field__phone {
  direction: ltr;
}