/* =========================================================
   Site footer (HomeFooter.razor) — Figma 190:56724
   Already dark in light mode; dark theme only swaps --al-footer-bg for a deeper navy.
   ========================================================= */

.al-footer {
  position: relative;
  overflow: hidden;
  padding-block: var(--al-sp-4xl);
  padding-inline: var(--al-gutter-min);
  background: var(--al-footer-bg);
  color: var(--al-footer-text);
}

/* Dotted texture: a soft light disc seen through the dot-grid mask, centred low in the footer.
   Anchored to the bottom (not 50%) so it stays put when the footer grows on small screens. */
.al-footer__texture { position: absolute; inset: 0; pointer-events: none; }
.al-footer__blur {
  position: absolute;
  inset-inline: 0;
  bottom: -289px;
  width: 710px;
  height: 710px;
  margin-inline: auto;
  opacity: 0.06;
  -webkit-mask-image: url('../../assets/home/ft-blur-mask.png');
  mask-image: url('../../assets/home/ft-blur-mask.png');
  -webkit-mask-position: -365px -106px;
  mask-position: -365px -106px;
  -webkit-mask-size: 1440px 1024px;
  mask-size: 1440px 1024px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.al-footer__blur img {
  position: absolute;
  inset: -28.17%;
  width: 156.34%;
  height: 156.34%;
  max-width: none;
}

.al-footer__content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--al-sp-xl);
  width: 100%;
  max-width: var(--al-content);
  margin-inline: auto;
}

/* The landing fills the viewport, so its footer must too or the footer reads narrower than every
   section above it. Scoped to .ammn-landing (MainLayout's public shell) ON PURPOSE: HomeFooter is the
   app's only footer and also renders in the service shell, whose content is still capped at 1100px
   — there the centred column above is still correct. */
.ammn-landing .al-footer__content {
  max-width: none;
}

/* ---------------- Top: brand | links | app ---------------- */
.al-footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--al-sp-xl);
  width: 100%;
}

.al-footer__heading {
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: var(--al-footer-text);
  text-align: start;
}
.al-footer__text {
  font-family: var(--al-f-plex);
  font-size: 16px;
  line-height: 21px;
  color: var(--al-footer-text);
  text-align: start;
}
:lang(ar) .al-footer__text,
:lang(ur) .al-footer__text { font-family: var(--al-f-main); }

.al-footer__link {
  font-family: inherit;
  font-size: 16px;
  line-height: 21px;
  color: var(--al-footer-text);
  text-align: start;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
}
.al .al-footer__link { color: var(--al-footer-text); }
.al-footer__link:hover { text-decoration-color: currentColor; }

/* Brand + newsletter */
.al-footer__brand {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--al-sp-xl);
  width: 383px;
  flex-shrink: 0;
}
.al-footer__logo-link { display: inline-block; border-radius: 4px; }
.al-footer__logo { width: 153px; height: 64px; }

.al-footer__newsletter {
  display: flex;
  flex-direction: column;
  gap: var(--al-sp-lg);
  width: 100%;
}
.al-footer__nl-text {
  display: flex;
  align-items: flex-start;
  gap: var(--al-sp-xs);
  font-size: 16px;
  line-height: 21px;
  color: var(--al-footer-text);
  text-align: start;
}
.al-footer__nl-text > span { flex: 1 1 0; min-width: 0; max-width: 340px; }
.al-footer__nl-icon { width: 19px; height: 19px; flex-shrink: 0; }

/* A mailto link, not a form: the newsletter column is a flex column, so keep it button-sized. */
.al-footer__nl-btn { min-height: 40px; align-self: flex-start; }

/* Link columns */
.al-footer__links {
  display: flex;
  align-items: flex-start;
  gap: var(--al-sp-4xl);
}
.al-footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--al-sp-sm);
  min-width: 132px;
}
.al-footer__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--al-sp-sm);
}

/* App column */
.al-footer__app {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--al-sp-lg);
  width: 321px;
  flex-shrink: 0;
}
.al-footer__app-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--al-sp-sm);
}
.al-footer__stores { justify-content: flex-start; }
.al-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--al-sp-sm) var(--al-sp-lg);
  width: 100%;
}
.al-footer__copy { width: 100%; }

/* ---------------- Bottom bar ---------------- */
.al-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--al-sp-lg);
  width: 100%;
}
.al-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--al-sp-md) var(--al-sp-xl);
  width: 100%;
}

.al-footer__contacts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--al-sp-md) var(--al-sp-4xl);
}
.al-footer__contact {
  display: flex;
  align-items: center;
  gap: var(--al-sp-md);
}
.al-footer__contact-icon { width: 24px; height: 24px; flex-shrink: 0; }
.al-footer__contact-text {
  font-family: var(--al-f-cairo);
  font-size: 16px;
  line-height: 24px;
  color: var(--al-footer-text);
  white-space: nowrap;
}
.al .al-footer__contact-text { color: var(--al-footer-text); }
.al-footer__contact-text--link {
  text-decoration: underline;
  text-underline-position: from-font;
}
.al-footer__contact-text bdi { unicode-bidi: isolate; }
/* The full national address (2026-09-25) is a sentence, not a token: held on one line by the nowrap above it
   would run wider than the footer on a narrow screen, so it wraps like body text. */
.al-footer__contact-text--address { white-space: normal; }

/* Social buttons — Figma's DGA hover variant switches instantly, so no transition. */
.al-footer__social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--al-sp-lg);
}
.al-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  color: var(--al-footer-text);
}
.al .al-footer__social-link { color: var(--al-footer-text); }
.al-footer__social-link:hover { background: color-mix(in srgb, var(--al-footer-text) 14%, transparent); }
.al-footer__social-link:active { background: color-mix(in srgb, var(--al-footer-text) 22%, transparent); }
.al-footer__social-icon {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  overflow: hidden;
}
.al-footer__social-icon > svg { display: block; width: 20px; height: 20px; }
.al-footer__x  { inset: 9.38% 9.37%; }
.al-footer__in { inset: 5.21%; }
/* Figma exports this glyph upside down; the flip restores it. */
.al-footer__ig { inset: 7.29%; transform: scaleY(-1); }

/* ---------------- Carried over from the retired ServiceFooter ----------------
   ServiceFooter drew these with .wizard-footer__* rules in wizard.css. Restated here in this
   file's tokens and logical properties, so they mirror under RTL instead of being placed
   physically the way the originals were. */

/* Insurance Authority licence mark, on every page — it is the regulator's mark, not decoration,
   and it used to be invisible to anyone who never signed in. */
.al-footer__ia {
  display: flex;
  align-items: center;
  gap: var(--al-sp-sm);
  margin-block-start: var(--al-sp-lg);
}
.al-footer__ia-badge {
  width: 72px;
  height: auto;
  flex: none;
  /* Dark-on-light artwork over a navy footer: it needs the plate to be legible at all. */
  background: var(--al-footer-chip-bg);
  border-radius: 4px;
  padding: 4px 6px;
}
.al-footer__ia-text {
  font-size: 14px;
  line-height: 20px;
  color: var(--al-footer-text);
  opacity: 0.85;
}

/* Scannable store codes. Composes .al-stores for the row itself, so only the offset is new. */
.al-footer__qr-row { margin-block-start: var(--al-sp-md); }
.al .al-footer__qr-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--al-sp-xxs);
  color: var(--al-footer-text);
  transition: opacity var(--al-dur-hover) var(--al-ease-out);
}
.al-footer__qr-link:hover { opacity: 0.85; }
.al-footer__qr {
  width: 88px;
  /* Square comes from the img's own width/height attributes — a stretched QR does not scan.
     No plate: both PNGs already carry a white quiet zone (verified at the pixel level), which is
     what a scanner needs and what makes them read against the navy. */
  height: auto;
  border-radius: 4px;
}
.al-footer__qr-label {
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}

/* Accepted payment marks. Not dimmed: they are trust marks, and a hover-to-reveal would be
   unreachable on the touch devices most of this traffic arrives on. */
.al-footer__paymarks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--al-sp-sm);
  width: 100%;
}
.al-footer__paymarks img {
  height: 32px;
  width: auto;
  object-fit: contain;
  /* A plate the original did NOT need: it sat on a light footer, this one is navy, and
     apple-mni.svg is solid black artwork that all but vanished against it. */
  background: var(--al-footer-chip-bg);
  border-radius: 4px;
  padding: 2px 4px;
}

/* ---------------- ≤1279: brand on its own row, columns in a grid ---------------- */
@media (max-width: 1279.98px) {
  .al-footer__top {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--al-sp-2xl) var(--al-sp-xl);
  }
  .al-footer__brand {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    width: 100%;
  }
  .al-footer__newsletter { width: min(100%, 420px); }
  .al-footer__links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--al-sp-xl);
  }
  .al-footer__app { width: 100%; }
  .al-footer__legal { justify-content: flex-start; }
}

/* ---------------- <768: single column ---------------- */
@media (max-width: 767.98px) {
  .al-footer { padding-block: var(--al-sp-2xl); }
  .al-footer__top {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--al-sp-xl);
  }
  .al-footer__brand {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--al-sp-lg);
  }
  .al-footer__newsletter { width: 100%; }
  .al-footer__col { min-width: 0; }
  .al-footer__list { gap: 0; }

  /* Stacked text links need finger-sized hit areas. */
  .al-footer__list .al-footer__link,
  .al-footer__legal .al-footer__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .al-footer__legal { gap: 0 var(--al-sp-lg); }

  .al-footer__bar {
    flex-direction: column;
    align-items: flex-start;
  }
  .al-footer__contacts {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--al-sp-xs);
  }
  .al-footer__contact { min-height: 44px; }
  .al-footer__contact-text { white-space: normal; overflow-wrap: anywhere; }
  .al-footer__social { gap: var(--al-sp-xs); }
  .al-footer__social-link { width: 44px; height: 44px; }
  /* The first icon's box starts at the gutter; pull it back so the glyph lines up with the text above. */
  .al-footer__social { margin-inline-start: -12px; }

  .al-footer__ia { margin-block-start: var(--al-sp-md); }
  .al-footer__qr-row { gap: var(--al-sp-sm); }
  .al-footer__paymarks { gap: var(--al-sp-xs); }
  .al-footer__paymarks img { height: 24px; }
}

/* Hidden until the app is ready (2026-09-25) — delete this rule to show it again.
   Only the download pieces of the app column: the column also holds the Terms / Privacy links and the
   copyright line, which must stay. Prefixed with .al-footer and last in the file so neither .al-stores
   (home-base.css, display: flex) nor a breakpoint above can re-show them; the markup stays in HomeFooter.razor. */
.al-footer .al-footer__app-head,
.al-footer .al-footer__stores,
.al-footer .al-footer__qr-row { display: none; }