@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');

/* Aljeeraan Auth Screen (/log-reg/)
   Target design: aljeeraan-auth-reference.jpg. Background artwork: aljeeraan-auth-bg-v3.jpg
   (1213x1296, ratio 0.9359) which already carries the skyline wave, so nothing is added
   for the footer. v3 is v2 with the baked-in centred logo and wordmark painted out. */

/* ---------- page chrome: the auth screen is a standalone poster ---------- */
body.page-id-428 .alj-topbar,
body.page-id-428 header.c27-main-header,
body.page-id-428 .c27-top-content-margin { display: none !important; }
body.page-id-428 { background: linear-gradient(#f2f0fb, #dedaf5); }
body.page-id-428 #c27-site-wrapper { width: 100%; }
body.page-id-428 .elementor,
body.page-id-428 .e-con,
body.page-id-428 .elementor-widget-shortcode { padding: 0 !important; margin: 0 !important; }

/* ---------- stage: the artwork fills the viewport ---------- */
.alj-auth {
  min-height: 100dvh;
  display: flex;
  font-family: 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
}
/* cover never distorts; on wide screens it trims some sky and some wave, which is
   preferred to letterboxing the artwork. */
.alj-auth__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 100dvh;
  background: url("aljeeraan-auth-bg-v3.jpg") center / cover no-repeat;
  overflow: hidden;
  container-type: inline-size;
}

/* Language pill, top-right of the artwork. */
.alj-auth__lang {
  position: absolute;
  top: 2.4%;
  right: 3.6%;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(124, 47, 224, .18);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(47, 8, 126, .12);
}
.alj-auth__lang a {
  display: block;
  padding: 8px 18px;
  border-radius: 999px;
  color: #3e147e;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.alj-auth__lang a:hover { background: #f3ecff; }
.alj-auth__lang a[aria-current="true"] {
  background: linear-gradient(135deg, #6d28d9, #8b5cf6);
  color: #fff;
  box-shadow: 0 4px 12px rgba(93, 30, 190, .35);
}
.alj-auth__lang a[aria-current="true"]:hover { background: linear-gradient(135deg, #6d28d9, #8b5cf6); }

/* Audience call-outs floated over the skyline, clear of the people's faces.
   Heads start at ~44% of the artwork; `cover` lands that line at ~39% of a 16:9
   viewport, so the call-outs are anchored well above it. */
.alj-auth__badge {
  position: absolute;
  top: 20%;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  width: clamp(200px, 25cqw, 300px);
  padding: 14px 16px;
  background: rgba(255, 255, 255, .95);
  border-radius: 20px;
  box-shadow: 0 10px 28px rgba(47, 8, 126, .14);
}
.alj-auth__badge--residents { left: 3.5%; flex-direction: row-reverse; }
.alj-auth__badge--business { right: 3.5%; }
.alj-auth__badge-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: #efe7ff;
  color: #5b1bb5;
}
.alj-auth__badge strong { display: block; font-size: 17px; color: #2d0872; }
.alj-auth__badge span { display: block; margin-top: 3px; font-size: 12.5px; color: #746a83; }

/* ---------- form tokens ---------- */
#aljeeraan-form-wrap {
  --primary: #4A1DB8;
  --primary-light: #7C3AED;
  --primary-gradient: linear-gradient(135deg, #4A1DB8 0%, #8B5CF6 100%);
  --bg-soft: #F4F4F4;
  --bg-input: #F9F8FF;
  --border: #E9E0FF;
  --border-focus: #7C3AED;
  --text-dark: #1E1B2E;
  --text-muted: #6B7280;
  --text-faint: #9A8FA8;
  --lavender: #EDE6FF;
  --lavender-light: #F5F0FF;
  position: absolute;
  /* The card is meant to fill most of the poster height; only a small margin is kept
     clear of the language pill at the top and the skyline at the bottom. */
  inset: 3% 0 3.5%;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
#aljeeraan-form-wrap * { font-family: 'Tajawal', 'Segoe UI', Tahoma, sans-serif !important; box-sizing: border-box; }

/* ---------- card ---------- */
.alj-card {
  width: clamp(300px, 41cqw, 470px);
  /* Fixed poster height; `max-height` only matters in a window shorter than the card,
     where it stops the form being clipped by the stage. */
  height: 650px;
  max-height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: none;
  margin: 0;
  background: #fff;
  border: 0;
  border-radius: 28px;
  box-shadow: 0 24px 60px rgba(47, 8, 126, .18), 0 3px 10px rgba(47, 8, 126, .06);
  position: relative;
}
.alj-card::-webkit-scrollbar { width: 0; height: 0; }

.alj-header { flex: 0 0 auto; text-align: center; padding: 26px 26px 4px; background: none; }
.alj-logo-fade { width: auto; height: auto; margin: 0 auto 14px; display: block; background: none; border-radius: 0; }
.alj-logo-fade img {
  width: 180px;
  height: auto;
  margin: 0 auto;
  display: block;
  -webkit-mask-image: none;
  mask-image: none;
  filter: none;
}
.alj-title { font-size: 23px; font-weight: 800; color: var(--text-dark); margin: 0 0 6px; }
.alj-subtitle { font-size: 14.5px; color: var(--text-muted); margin: 0 0 3px; font-weight: 500; }
.alj-subtitle-2 { display: block; font-size: 13.5px; color: var(--text-faint); margin: 0 0 4px; }

/* Absorbs the slack of the fixed 650px card so the fields sit centred, not stacked at
   the top with a long empty strip under them. */
.alj-body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding: 18px 26px 24px; }
.alj-label { display: block; margin-bottom: 8px; color: var(--text-dark); font-size: 14px; font-weight: 700; }

.alj-phone-row { display: flex; gap: 10px; direction: ltr; margin-bottom: 6px; }
.alj-country {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 96px;
  padding: 0 12px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  color: var(--text-dark);
  font-weight: 700;
  font-size: 15px;
}
.alj-country::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg) translateY(-2px);
}
.alj-input {
  flex: 1;
  min-width: 0;
  padding: 14px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  font-size: 16px;
  outline: none;
  transition: all .2s ease;
  color: var(--text-dark);
  direction: ltr;
  text-align: left;
}
.alj-input::placeholder { color: #B6AEC4; }
.alj-input:focus { border-color: var(--border-focus); box-shadow: 0 0 0 4px rgba(124, 58, 237, .12); }

.alj-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 0 14px;
  color: var(--text-faint);
  font-size: 12.5px;
}
.alj-hint svg { flex: 0 0 auto; }

.alj-terms {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  padding: 0;
  margin-bottom: 16px;
  font-size: 13.5px;
  color: var(--text-dark);
}
.alj-terms input { accent-color: var(--primary); width: 20px; height: 20px; flex: 0 0 auto; cursor: pointer; }

.alj-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 20px;
  background: linear-gradient(255deg, #8B5CF6 0%, #6D28D9 55%, #4A1DB8 100%);
  color: #fff;
  border: none;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s ease;
  box-shadow: 0 10px 26px rgba(74, 29, 184, .3);
}
.alj-btn-send { justify-content: space-between; }
.alj-btn-primary .alj-btn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  font-size: 15px;
}
.alj-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(74, 29, 184, .38); }
.alj-btn-primary:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.alj-btn-secondary {
  width: 100%;
  padding: 14px;
  background: var(--bg-soft);
  color: var(--text-dark);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s ease;
}
.alj-btn-secondary:hover { background: var(--lavender); border-color: var(--primary-light); color: var(--primary); }

.alj-input-otp {
  width: 100%;
  padding: 16px;
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 14px;
  direction: ltr;
  outline: none;
  color: var(--primary);
  transition: all .2s ease;
}
.alj-input-otp:focus { background: #fff; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(124, 58, 237, .12); }

.alj-link { color: var(--primary-light); text-decoration: none; font-weight: 600; font-size: 13px; }
.alj-link:hover { text-decoration: underline; }
/* The message slot is empty until something goes wrong; it must not reserve height. */
.alj-msg { margin-top: 14px; text-align: center; font-size: 13px; font-weight: 500; }
.alj-msg:empty { display: none; }
.alj-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: #9CA3AF; font-size: 12px; }
.alj-divider::before, .alj-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.alj-type-card {
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  background: #fff;
  cursor: pointer;
  transition: all .2s ease;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-bottom: 12px;
  text-align: right;
}
.alj-type-card:hover { border-color: var(--primary-light); background: var(--lavender-light); }
.alj-type-card strong { font-size: 15px; color: var(--text-dark); }
.alj-type-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

/* ---------- narrow screens: the poster fills the viewport, call-outs step aside ---------- */
/* The call-outs must never overlap the card. Between 761 and 900px there is not room
   for both lines, so they switch to a stacked, title-only form. */
@container (max-width: 900px) {
  .alj-auth__badge {
    top: 24%;
    width: clamp(120px, 18cqw, 190px);
    gap: 8px;
    padding: 9px 8px;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    border-radius: 15px;
  }
  .alj-auth__badge--residents { left: 2%; }
  .alj-auth__badge--business { right: 2%; }
  .alj-auth__badge-icon { width: 30px; height: 30px; border-radius: 9px; }
  .alj-auth__badge-icon svg { width: 17px; height: 17px; }
  .alj-auth__badge strong { font-size: 11.5px; line-height: 1.3; }
  .alj-auth__badge > span:last-child > span { display: none; }
}

@media (max-width: 760px) {
  .alj-auth__badge { display: none; }
  .alj-auth__lang { top: 14px; right: 14px; }
  .alj-auth__lang a { padding: 7px 13px; font-size: 13px; }
  #aljeeraan-form-wrap { position: relative; inset: auto; padding: 76px 14px 30px; }
  .alj-card { width: 100%; height: auto; max-width: 430px; margin: 0 auto; border-radius: 22px; }
  .alj-body { flex: 0 0 auto; display: block; }
  .alj-header { padding-top: 22px; }
  .alj-logo-fade img { width: 160px; }
  .alj-title { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .alj-btn-primary, .alj-input, .alj-type-card { transition: none; }
}