/* Multaqa email-action page — mirrors the marketing site's design system
   (violet #6C63FF on lavender, real app fonts, OS dark mode, Arabic-first RTL).
   Self-hosted fonts, one mascot, inline-SVG illustrations: zero external assets. */

/* --- App fonts (OFL, self-hosted, subset → WOFF2 — see fonts/OFL-NOTICE.txt).
   Arabic families keep the full Arabic block + Latin + punctuation with all
   layout features (contextual shaping intact); Inter is Latin + punctuation.
   Any glyph outside the subset degrades to the system-font fallback below. --- */
@font-face{font-family:"Cairo";src:url(fonts/cairo_regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Cairo";src:url(fonts/cairo_semibold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"IBM Plex Sans Arabic";src:url(fonts/ibm_plex_sans_arabic_regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Sans Arabic";src:url(fonts/ibm_plex_sans_arabic_semibold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter_regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter_semibold.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --f-head:"Cairo","IBM Plex Sans Arabic",system-ui,"Segoe UI",Tahoma,"Noto Kufi Arabic",sans-serif;
  --f-body:"IBM Plex Sans Arabic","Cairo",system-ui,"Segoe UI",Tahoma,"Noto Sans Arabic",Arial,sans-serif;
  --f-latin:"Inter",system-ui,"Segoe UI",Arial,sans-serif;
  --violet:#6C63FF; --violet-ink:#5B54E6; --violet-2:#8B7BFF; --violet-soft:#E9E7FF;
  --bg:#F4F2FB; --surface:#FFFFFF; --ink:#1E1B2E; --muted:#6B6780; --line:#E7E4F2;
  --ok:#1E9E6A; --err:#D14343; --gold:#E0A83A;
  --r:22px; --rb:14px; --shadow:0 18px 44px -20px rgba(76,63,160,.42); --maxw:640px;
}
@media (prefers-color-scheme:dark){:root{
  --violet:#8B84FF; --violet-ink:#ADA7FF; --violet-2:#8B7BFF; --violet-soft:#241F45;
  --bg:#100F20; --surface:#191830; --ink:#ECEAF6; --muted:#A6A1BE; --line:#2C2A47;
  --ok:#43C892; --err:#F1736F; --gold:#E9BE63;
  --shadow:0 18px 46px -20px rgba(0,0,0,.65);
}}

*{box-sizing:border-box}
/* [hidden] must win over the display rules below (e.g. the flex form-area). */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh; display:flex; flex-direction:column;
  background:
    radial-gradient(120% 70% at 88% -10%,var(--violet-soft),transparent 55%),
    var(--bg);
  color:var(--ink); font-family:var(--f-body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:20px}
a{color:var(--violet-ink)}

/* --- Header (mirrors the site header: mark badge + Beta chip) --- */
header.site{
  position:sticky; top:0; z-index:9; backdrop-filter:saturate(140%) blur(10px);
  background:color-mix(in srgb,var(--bg) 82%,transparent); border-bottom:1px solid var(--line);
}
.bar{display:flex; align-items:center; justify-content:space-between; gap:14px; padding-block:14px}
.mark{display:flex; align-items:center; gap:10px; font-weight:900; font-size:1.3rem; text-decoration:none; color:var(--ink); font-family:var(--f-head)}
.mark .m{display:grid; place-items:center; width:38px; height:38px; border-radius:11px; background:var(--violet); color:#fff}
.mark .wm{font-size:.78rem; color:var(--muted); font-weight:700}
.chip{display:inline-flex; align-items:center; gap:.5ch; font-size:.74rem; font-weight:800; color:var(--violet-ink);
  background:var(--violet-soft); border:1px solid var(--line); padding:.3em .8em; border-radius:999px; white-space:nowrap}
.chip .dot{width:.5em; height:.5em; border-radius:50%; background:var(--gold)}

/* --- Stage (centers the card) --- */
.stage{flex:1; display:grid; place-items:center; padding:clamp(24px,6vw,52px) 20px}
.card{
  width:100%; max-width:460px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow);
  padding:clamp(26px,6vw,40px); text-align:center;
}

/* --- State illustrations --- */
.art{display:flex; justify-content:center; margin-bottom:18px}
.illus svg{width:clamp(84px,26vw,100px); height:auto; display:block}
.art-bg-ok{fill:color-mix(in srgb,var(--ok) 15%,transparent)}   .art-stroke-ok{stroke:var(--ok)}
.art-bg-warn{fill:color-mix(in srgb,var(--gold) 16%,transparent)} .art-stroke-warn{stroke:var(--gold)}
.art-bg-err{fill:color-mix(in srgb,var(--err) 15%,transparent)}  .art-stroke-err{stroke:var(--err)}
.art-bg-v{fill:var(--violet-soft)}  .art-stroke-v{stroke:var(--violet-ink)}  .art-fill-v{fill:var(--violet-ink)}
/* loading ring */
.ring{display:block; width:76px; height:76px; margin:6px auto; border-radius:50%;
  border:5px solid var(--violet-soft); border-top-color:var(--violet); animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ring{animation:none}}

.title{margin:0; font-family:var(--f-head); font-size:clamp(1.4rem,5.4vw,1.75rem); font-weight:800; letter-spacing:-.02em; line-height:1.25}
.subtitle{margin:.5em 0 0; color:var(--muted); font-family:var(--f-latin); font-size:1.02rem}
.detail{margin:.6em 0 0; color:var(--violet-ink); font-family:var(--f-latin); font-weight:700; font-size:.95rem; word-break:break-all}
.note{margin:18px 0 0; color:var(--muted); font-size:.95rem}

/* --- Password-reset form --- */
.form-area{margin-top:22px; text-align:start; display:flex; flex-direction:column; gap:5px}
.field-label{font-weight:700; font-size:.9rem; margin-top:8px}
.field{width:100%; font:inherit; padding:.78em .95em; border-radius:var(--rb);
  border:1.5px solid var(--line); background:var(--bg); color:var(--ink)}
.field:focus-visible{outline:3px solid var(--violet); outline-offset:1px; border-color:var(--violet)}
.form-error{margin:6px 0 0; color:var(--err); font-size:.9rem; font-weight:700}

/* --- CTAs --- */
.ctas{margin-top:22px; display:flex; flex-direction:column; gap:10px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.6ch;
  font:inherit; font-family:var(--f-head); font-weight:800; text-decoration:none; cursor:pointer;
  padding:.85em 1.5em; border-radius:var(--rb); border:1.5px solid transparent; width:100%}
.btn .btn-en{font-family:var(--f-latin); font-weight:600; font-size:.82em; opacity:.85}
.btn .btn-en::before{content:"· "}
.btn-primary{background:var(--violet); color:#fff; box-shadow:var(--shadow); transition:transform .15s,background .15s}
.btn-primary:hover{transform:translateY(-1px); background:var(--violet-ink)}
.btn-primary:disabled{opacity:.6; cursor:default; transform:none}
.btn-ghost{background:transparent; color:var(--violet-ink); border-color:var(--line)}
.btn-ghost:hover{background:var(--violet-soft)}
.btn:focus-visible{outline:3px solid var(--violet); outline-offset:2px}
.cta-note{margin:4px 0 0; color:var(--muted); font-size:.8rem; line-height:1.5}

/* --- Footer --- */
.foot{border-top:1px solid var(--line); background:var(--surface); padding-block:26px; text-align:center}
.foot-mascot{width:64px; height:64px; display:block; margin:0 auto 8px; filter:drop-shadow(0 10px 16px rgba(76,63,160,.28))}
.foot .tag{margin:0; color:var(--muted); font-size:.92rem}
.foot .copy{margin:8px 0 0; color:var(--muted); font-size:.82rem}

@media (max-width:420px){
  .mark .wm{display:none}
  .btn{padding-block:.95em}
}