/* ---------------------------------------------------------------------------
   Guided admission application.

   One stylesheet, no framework. The page is served outside the website asset
   bundle, so nothing here has to out-specify a theme -- plain class names and
   a single layer of tokens are enough.
   --------------------------------------------------------------------------- */

:root {
    --ax-bg: #f4f6fb;
    --ax-surface: #ffffff;
    --ax-surface-2: #f8fafc;
    --ax-ink: #0f172a;
    --ax-ink-2: #334155;
    --ax-muted: #64748b;
    --ax-line: #e3e8f0;
    --ax-line-strong: #cbd5e1;

    --ax-primary: #2563eb;
    --ax-primary-dark: #1d4ed8;
    --ax-primary-ink: #1e40af;
    --ax-primary-soft: #eef4ff;

    --ax-ok: #15803d;
    --ax-ok-soft: #ecfdf3;
    --ax-warn: #b45309;
    --ax-warn-soft: #fffbeb;
    --ax-err: #dc2626;
    --ax-err-soft: #fef2f2;

    --ax-radius: 14px;
    --ax-radius-sm: 10px;
    --ax-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
    --ax-shadow-lg: 0 24px 60px rgba(15, 23, 42, .12);

    --ax-font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial,
        "Noto Sans Arabic", sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--ax-bg);
    color: var(--ax-ink);
    font-family: var(--ax-font);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--ax-primary); }

/* --- boot / noscript ----------------------------------------------------- */

.ax-boot {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: var(--ax-muted);
}
.ax-boot__spinner {
    width: 34px; height: 34px;
    border: 3px solid var(--ax-line);
    border-top-color: var(--ax-primary);
    border-radius: 50%;
    animation: ax-spin .7s linear infinite;
}
@keyframes ax-spin { to { transform: rotate(360deg); } }
.ax-boot__text { margin: 0; font-size: 14px; }

.ax-noscript {
    max-width: 640px;
    margin: 80px auto;
    padding: 32px;
    background: var(--ax-surface);
    border-radius: var(--ax-radius);
    box-shadow: var(--ax-shadow);
}

/* --- shell --------------------------------------------------------------- */

.ax-app { min-height: 100vh; display: flex; flex-direction: column; }

.ax-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid var(--ax-line);
}
.ax-topbar__inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.ax-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ax-brand__mark {
    width: 32px; height: 32px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--ax-primary), #7c3aed);
    color: #fff;
    display: grid; place-items: center;
    font-weight: 700; font-size: 15px;
    flex: none;
}
/* The uploaded logo. Height is fixed so the bar never changes height; width
   follows the picture, up to a cap, so a wide logo cannot push the step
   counter off a phone. */
.ax-brand__logo {
    height: 32px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    display: block;
    flex: none;
}
@media (max-width: 640px) {
    .ax-brand__logo { max-width: 104px; }
}
.ax-brand__name {
    font-weight: 650;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ax-topbar__spacer { flex: 1; }
.ax-topbar__step {
    font-size: 13px;
    color: var(--ax-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.ax-topbar__saved {
    font-size: 12px;
    color: var(--ax-ok);
    opacity: 0;
    transition: opacity .25s;
    white-space: nowrap;
}
.ax-topbar__saved.is-on { opacity: 1; }

.ax-progress {
    height: 3px;
    background: var(--ax-line);
}
.ax-progress__bar {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--ax-primary), #7c3aed);
    transition: width .35s cubic-bezier(.2, .8, .2, 1);
}

.ax-main {
    flex: 1;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 28px 20px 140px;
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}
.ax-main--wide { grid-template-columns: minmax(0, 1fr); max-width: 760px; padding-bottom: 60px; }
@media (max-width: 900px) {
    .ax-main { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 20px 16px 150px; }
    .ax-rail { display: none; }
}

/* --- step rail ----------------------------------------------------------- */

.ax-rail { position: sticky; top: 78px; }
.ax-rail__list { list-style: none; margin: 0; padding: 0; }
.ax-rail__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: var(--ax-radius-sm);
    color: var(--ax-muted);
    font-size: 13.5px;
    cursor: default;
    border: 1px solid transparent;
}
.ax-rail__item.is-done { color: var(--ax-ink-2); }
.ax-rail__item.is-open { cursor: pointer; }
.ax-rail__item.is-open:hover { background: var(--ax-surface); border-color: var(--ax-line); }
.ax-rail__item.is-current {
    background: var(--ax-surface);
    border-color: var(--ax-line);
    color: var(--ax-ink);
    font-weight: 600;
    box-shadow: var(--ax-shadow);
}
.ax-rail__dot {
    width: 20px; height: 20px;
    flex: none;
    border-radius: 50%;
    border: 2px solid var(--ax-line-strong);
    display: grid; place-items: center;
    background: var(--ax-surface);
}
/* The tick and the ::after marker share one grid cell. Left to auto-placement
   they take a row each, which pushed the marker into the bottom half of the
   ring and left it looking off-centre. */
.ax-rail__dot > .ax-rail__tick,
.ax-rail__dot::after { grid-area: 1 / 1; }
.ax-rail__tick { font-size: 0; line-height: 1; color: #fff; }

.ax-rail__item.is-current .ax-rail__dot { border-color: var(--ax-primary); }
.ax-rail__item.is-current .ax-rail__dot::after {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: var(--ax-primary);
}
.ax-rail__item.is-done .ax-rail__dot {
    border-color: var(--ax-ok);
    background: var(--ax-ok);
}
.ax-rail__item.is-done .ax-rail__tick { font-size: 11px; }

/* Opened, and still missing something. */
.ax-rail__item.is-gap { color: var(--ax-ink-2); }
.ax-rail__item.is-gap .ax-rail__dot { border-color: var(--ax-warn); background: var(--ax-warn-soft); }
.ax-rail__item.is-gap .ax-rail__dot::after {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--ax-warn);
}

/* The page you stopped on, so coming back to an earlier one is not a guess. */
.ax-rail__item.is-last {
    background: var(--ax-primary-soft);
    border-color: #c7dbff;
    color: var(--ax-primary-ink);
    font-weight: 600;
}
.ax-rail__here {
    margin-inline-start: auto;
    flex: none;
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ax-primary-ink);
    background: var(--ax-surface);
    border: 1px solid #c7dbff;
    border-radius: 999px;
    padding: 1px 7px;
}
.ax-rail__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- card ---------------------------------------------------------------- */

.ax-card {
    background: var(--ax-surface);
    border: 1px solid var(--ax-line);
    border-radius: var(--ax-radius);
    box-shadow: var(--ax-shadow);
    padding: 30px 32px 34px;
    animation: ax-in .28s cubic-bezier(.2, .8, .2, 1);
}
@media (max-width: 900px) { .ax-card { padding: 22px 18px 26px; } }
@keyframes ax-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

.ax-eyebrow {
    font-size: 12px;
    letter-spacing: .09em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ax-primary);
    margin: 0 0 6px;
}
.ax-title { margin: 0 0 6px; font-size: 25px; line-height: 1.25; font-weight: 700; letter-spacing: -.015em; }
.ax-lede { margin: 0 0 24px; color: var(--ax-muted); font-size: 14.5px; max-width: 60ch; }

.ax-section {
    margin: 28px 0 14px;
    padding-top: 20px;
    border-top: 1px solid var(--ax-line);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ax-muted);
}
.ax-section:first-of-type { border-top: 0; padding-top: 0; margin-top: 4px; }

/* --- fields -------------------------------------------------------------- */

.ax-grid { display: grid; gap: 16px 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ax-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ax-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ax-grid > .ax-span { grid-column: 1 / -1; }
@media (max-width: 720px) {
    .ax-grid, .ax-grid--3, .ax-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

.ax-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ax-label { font-size: 13.5px; font-weight: 600; color: var(--ax-ink-2); }
.ax-label .ax-label__text { unicode-bidi: isolate; }
.ax-req { color: var(--ax-err); }
.ax-label .ax-opt { color: var(--ax-muted); font-weight: 400; font-size: 12.5px; }

/* --- a name, in two scripts ---------------------------------------------
   The Arabic panel is asked for first and carries the tint, because Arabic is
   the version that has to match the national ID and the ministry paperwork,
   and it is the one most often left half-filled. */

.ax-names {
    border: 1px solid var(--ax-line);
    border-radius: var(--ax-radius);
    background: var(--ax-surface-2);
    padding: 16px 16px 18px;
}
.ax-names--ar {
    background: var(--ax-primary-soft);
    border-color: #c7dbff;
    border-inline-start: 3px solid var(--ax-primary);
}
.ax-names__lead {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 0 0 14px;
    font-size: 12.5px; color: var(--ax-muted);
}
.ax-names--ar .ax-names__lead { color: var(--ax-primary-ink); }
.ax-names__tag {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--ax-primary);
    color: #fff;
    font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
}
.ax-names__tag--en { background: var(--ax-muted); letter-spacing: .06em; }
.ax-names--ar .ax-input { background: var(--ax-surface); }

/* One parent's identity boxes on the first page. */
.ax-subhead {
    margin: 18px 0 10px;
    font-size: 14.5px; font-weight: 700; color: var(--ax-ink);
}
.ax-subhead:first-of-type { margin-top: 6px; }

.ax-input, .ax-select, .ax-textarea {
    width: 100%;
    font: inherit;
    font-size: 14.5px;
    color: var(--ax-ink);
    background: var(--ax-surface);
    border: 1px solid var(--ax-line-strong);
    border-radius: var(--ax-radius-sm);
    padding: 10px 12px;
    transition: border-color .15s, box-shadow .15s, background .15s;
    min-height: 42px;
}
.ax-textarea { min-height: 80px; resize: vertical; }
.ax-select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 34px;
}
.ax-input:focus, .ax-select:focus, .ax-textarea:focus {
    outline: none;
    border-color: var(--ax-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
.ax-input::placeholder, .ax-textarea::placeholder { color: #9aa6b8; }
.ax-input:disabled, .ax-select:disabled { background: var(--ax-surface-2); color: var(--ax-muted); }

.ax-input[dir="rtl"], .ax-input.ax-ar { text-align: right; font-size: 15.5px; }

.ax-field.is-invalid .ax-input,
.ax-field.is-invalid .ax-select,
.ax-field.is-invalid .ax-textarea {
    border-color: var(--ax-err);
    background: var(--ax-err-soft);
}
.ax-field.is-filled-auto .ax-input,
.ax-field.is-filled-auto .ax-select { background: var(--ax-ok-soft); border-color: #a7f3c6; }

.ax-hint { font-size: 12.5px; color: var(--ax-muted); }
.ax-error { font-size: 12.5px; color: var(--ax-err); font-weight: 600; display: none; }
.ax-field.is-invalid .ax-error { display: block; }
.ax-field.is-invalid .ax-hint { display: none; }

.ax-inline-ok { font-size: 12.5px; color: var(--ax-ok); font-weight: 600; }

/* --- choice cards -------------------------------------------------------- */

.ax-choices { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.ax-choices--stack { grid-template-columns: minmax(0, 1fr); }

.ax-choice {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1.5px solid var(--ax-line-strong);
    border-radius: var(--ax-radius);
    background: var(--ax-surface);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background .15s, transform .1s;
}
.ax-choice:hover { border-color: var(--ax-primary); background: var(--ax-primary-soft); }
.ax-choice:active { transform: scale(.995); }
.ax-choice input { position: absolute; opacity: 0; pointer-events: none; }
.ax-choice__box {
    width: 20px; height: 20px; flex: none; margin-top: 1px;
    border: 2px solid var(--ax-line-strong);
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--ax-surface);
    transition: border-color .15s;
}
.ax-choice--check .ax-choice__box { border-radius: 6px; }
.ax-choice__box::after {
    content: ""; width: 9px; height: 9px; border-radius: 50%;
    background: var(--ax-primary);
    transform: scale(0);
    transition: transform .15s cubic-bezier(.2, 1.4, .4, 1);
}
.ax-choice--check .ax-choice__box::after { border-radius: 2px; }
.ax-choice.is-on { border-color: var(--ax-primary); background: var(--ax-primary-soft); box-shadow: 0 0 0 3px rgba(37, 99, 235, .1); }
.ax-choice.is-on .ax-choice__box { border-color: var(--ax-primary); }
.ax-choice.is-on .ax-choice__box::after { transform: scale(1); }
.ax-choice__body { min-width: 0; }
.ax-choice__title { display: block; font-weight: 620; font-size: 14.5px; }
.ax-choice__desc { display: block; font-size: 12.5px; color: var(--ax-muted); margin-top: 3px; }
.ax-choice__emoji { font-size: 20px; line-height: 1; margin-right: 2px; }

/* --- counter ------------------------------------------------------------- */

.ax-counter { display: flex; align-items: center; gap: 14px; }
.ax-counter__btn {
    width: 42px; height: 42px;
    border-radius: 12px;
    border: 1.5px solid var(--ax-line-strong);
    background: var(--ax-surface);
    font-size: 22px; line-height: 1;
    color: var(--ax-ink-2);
    cursor: pointer;
    display: grid; place-items: center;
    transition: border-color .15s, background .15s;
}
.ax-counter__btn:hover:not(:disabled) { border-color: var(--ax-primary); color: var(--ax-primary); }
.ax-counter__btn:disabled { opacity: .4; cursor: not-allowed; }
.ax-counter__value { font-size: 26px; font-weight: 700; min-width: 34px; text-align: center; font-variant-numeric: tabular-nums; }

/* --- notes / banners ----------------------------------------------------- */

.ax-note {
    display: flex; gap: 11px;
    padding: 13px 15px;
    border-radius: var(--ax-radius-sm);
    font-size: 13.5px;
    border: 1px solid;
    margin: 14px 0;
    line-height: 1.5;
}
.ax-note__icon { flex: none; font-size: 16px; line-height: 1.3; }
.ax-note strong { font-weight: 650; }
.ax-note--info { background: var(--ax-primary-soft); border-color: #c7dbff; color: var(--ax-primary-ink); }
.ax-note--ok { background: var(--ax-ok-soft); border-color: #b7ebc9; color: #14532d; }
.ax-note--warn { background: var(--ax-warn-soft); border-color: #fde9b5; color: #78350f; }
.ax-note--err { background: var(--ax-err-soft); border-color: #fecaca; color: #7f1d1d; }
.ax-note__action {
    margin-left: auto;
    background: none; border: 0; padding: 0;
    color: inherit; font: inherit; font-size: 12.5px; font-weight: 650;
    text-decoration: underline; cursor: pointer; white-space: nowrap;
}

.ax-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ax-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--ax-surface);
    border: 1px solid var(--ax-line-strong);
    font-size: 12.5px;
    color: var(--ax-ink-2);
}

/* --- photo --------------------------------------------------------------- */

/* --- the calendar choice on a birth date ------------------------------- */
/* Its own line inside the date field, between the label and the date: as wide
   as its two buttons, never stretched across the field. */
.ax-cal { display: inline-flex; align-self: flex-start; gap: 0; border: 1px solid var(--ax-line);
          border-radius: 8px; overflow: hidden; }
.ax-cal__btn { appearance: none; border: 0; background: transparent; cursor: pointer;
               padding: 5px 12px; font: inherit; font-size: 12.5px; color: var(--ax-muted); }
.ax-cal__btn.is-on { background: var(--ax-primary-soft); color: var(--ax-primary); font-weight: 650; }
/* Day, month and year on one line at every width; on a phone the three boxes
   tighten rather than stack. */
.ax-hijri { display: grid; grid-template-columns: 76px minmax(0, 1fr) 96px; gap: 8px; }
@media (max-width: 560px) {
    .ax-hijri { grid-template-columns: 62px minmax(0, 1fr) 80px; gap: 6px; }
    .ax-hijri .ax-select { padding-left: 10px; padding-right: 26px; background-position: right 7px center; }
    [dir="rtl"] .ax-hijri .ax-select { padding-right: 10px; padding-left: 26px; background-position: left 7px center; }
}

.ax-photo { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
/* The photo box has no input of its own, so the invalid state and the message
   are written for the box itself rather than inherited from .ax-field. */
.ax-photo.is-invalid .ax-photo__drop { border-color: var(--ax-err); background: var(--ax-err-soft); }
.ax-photo.is-invalid .ax-error { display: block; flex-basis: 100%; }
.ax-photo__drop {
    width: 116px; height: 116px; flex: none;
    border-radius: 50%;
    border: 2px dashed var(--ax-line-strong);
    background: var(--ax-surface-2);
    display: grid; place-items: center;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    transition: border-color .15s, background .15s;
}
.ax-photo__drop:hover, .ax-photo__drop.is-drag { border-color: var(--ax-primary); background: var(--ax-primary-soft); }
.ax-photo__drop img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ax-photo__ph { font-size: 26px; color: var(--ax-line-strong); }
.ax-photo__meta { min-width: 0; }
.ax-photo__meta h4 { margin: 0 0 3px; font-size: 14.5px; font-weight: 650; }
.ax-photo__meta p { margin: 0; font-size: 12.5px; color: var(--ax-muted); }
.ax-photo__clear {
    margin-top: 7px;
    background: none; border: 0; padding: 0;
    color: var(--ax-err); font: inherit; font-size: 12.5px; font-weight: 600;
    cursor: pointer; text-decoration: underline;
}

/* --- review -------------------------------------------------------------- */

.ax-review { border: 1px solid var(--ax-line); border-radius: var(--ax-radius); overflow: hidden; margin-bottom: 16px; }
.ax-review__head {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    background: var(--ax-surface-2);
    border-bottom: 1px solid var(--ax-line);
}
.ax-review__title { font-weight: 650; font-size: 14.5px; margin: 0; flex: 1; }
.ax-review__edit {
    background: none; border: 0; padding: 4px 10px;
    border-radius: 999px;
    color: var(--ax-primary); font: inherit; font-size: 12.5px; font-weight: 650;
    cursor: pointer;
}
.ax-review__edit:hover { background: var(--ax-primary-soft); }
.ax-review__body { padding: 6px 16px 14px; }
.ax-kv { display: grid; grid-template-columns: minmax(120px, 34%) minmax(0, 1fr); gap: 2px 16px; padding: 7px 0; border-bottom: 1px dashed var(--ax-line); font-size: 13.5px; }
.ax-kv:last-child { border-bottom: 0; }
.ax-kv__k { color: var(--ax-muted); }
.ax-kv__v { color: var(--ax-ink); word-break: break-word; }
.ax-kv__v.is-empty { color: #9aa6b8; font-style: italic; }
@media (max-width: 560px) { .ax-kv { grid-template-columns: minmax(0, 1fr); } }

.ax-avatar-row { display: flex; align-items: center; gap: 12px; }
.ax-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    object-fit: cover; flex: none;
    background: var(--ax-surface-2);
    border: 1px solid var(--ax-line);
}

/* --- footer nav ---------------------------------------------------------- */

.ax-footer {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 25;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: saturate(160%) blur(10px);
    border-top: 1px solid var(--ax-line);
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
}
.ax-footer__inner {
    max-width: 1120px; margin: 0 auto;
    display: flex; align-items: center; gap: 12px;
}
.ax-footer__hint { font-size: 12.5px; color: var(--ax-muted); flex: 1; min-width: 0; }

.ax-btn {
    font: inherit; font-size: 14.5px; font-weight: 640;
    border-radius: var(--ax-radius-sm);
    padding: 11px 22px;
    border: 1.5px solid transparent;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
    transition: background .15s, border-color .15s, transform .1s, box-shadow .15s;
    white-space: nowrap;
}
.ax-btn:active { transform: scale(.985); }
.ax-btn--primary { background: var(--ax-primary); color: #fff; box-shadow: 0 2px 8px rgba(37, 99, 235, .28); }
.ax-btn--primary:hover { background: var(--ax-primary-dark); }
.ax-btn--ghost { background: transparent; color: var(--ax-ink-2); border-color: var(--ax-line-strong); }
.ax-btn--resume { font-size: 13.5px; padding: 9px 16px; max-width: 42vw; overflow: hidden; text-overflow: ellipsis; display: inline-block; }
.ax-btn--ghost:hover { background: var(--ax-surface-2); border-color: var(--ax-muted); }
.ax-btn--quiet { background: transparent; color: var(--ax-muted); padding: 11px 8px; }
.ax-btn--quiet:hover { color: var(--ax-ink); }
.ax-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

.ax-spin {
    width: 15px; height: 15px; flex: none;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ax-spin .7s linear infinite;
}

/* --- done ---------------------------------------------------------------- */

.ax-done { text-align: center; padding: 18px 8px 8px; }
.ax-done__mark {
    width: 72px; height: 72px; margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--ax-ok-soft);
    color: var(--ax-ok);
    display: grid; place-items: center;
    font-size: 34px;
    animation: ax-pop .45s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes ax-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.ax-done h1 { font-size: 26px; margin: 0 0 8px; }
.ax-done p { color: var(--ax-muted); margin: 0 auto 20px; max-width: 52ch; }
.ax-outcome {
    display: flex; align-items: center; gap: 12px;
    text-align: left;
    padding: 13px 16px;
    border: 1px solid var(--ax-line);
    border-radius: var(--ax-radius-sm);
    margin-bottom: 10px;
    background: var(--ax-surface-2);
}
.ax-outcome__who { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ax-outcome__name { font-weight: 650; }
.ax-outcome__why { font-size: 13px; color: var(--ax-muted); line-height: 1.45; }
.ax-outcome.is-blocked { border-color: var(--ax-warn-soft); }
.ax-done__mark.is-warn { background: var(--ax-warn-soft); color: var(--ax-warn); }
.ax-outcome__state { font-size: 12.5px; font-weight: 650; padding: 3px 11px; border-radius: 999px; }
.ax-outcome__state.is-open { background: var(--ax-ok-soft); color: var(--ax-ok); }
.ax-outcome__state.is-blocked { background: var(--ax-warn-soft); color: var(--ax-warn); }

/* --- misc ---------------------------------------------------------------- */

.ax-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ax-divider { height: 1px; background: var(--ax-line); margin: 24px 0; border: 0; }
.ax-muted { color: var(--ax-muted); }
.ax-link-btn {
    background: none; border: 0; padding: 0;
    color: var(--ax-primary); font: inherit; font-size: 13.5px; font-weight: 620;
    cursor: pointer; text-decoration: underline;
}

/* --- language toggle ----------------------------------------------------- */

.ax-lang {
    display: inline-flex;
    border: 1px solid var(--ax-line-strong);
    border-radius: 999px;
    overflow: hidden;
    background: var(--ax-surface);
    flex: none;
}
.ax-lang__btn {
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    padding: 5px 12px;
    border: 0;
    background: transparent;
    color: var(--ax-muted);
    cursor: pointer;
    white-space: nowrap;
}
.ax-lang__btn:hover { color: var(--ax-ink); }
.ax-lang__btn.is-on { background: var(--ax-primary); color: #fff; }

/* --- searchable picker --------------------------------------------------- */

.ax-combo { position: relative; }
.ax-combo__input { cursor: text; }
.ax-combo__list {
    position: absolute;
    z-index: 30;
    inset-inline: 0;
    top: calc(100% + 4px);
    max-height: 260px;
    overflow-y: auto;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: var(--ax-surface);
    border: 1px solid var(--ax-line-strong);
    border-radius: var(--ax-radius-sm);
    box-shadow: var(--ax-shadow-lg);
}
.ax-combo__item {
    padding: 8px 11px;
    border-radius: 7px;
    font-size: 14px;
    cursor: pointer;
}
.ax-combo__item:hover,
.ax-combo__item.is-active { background: var(--ax-primary-soft); color: var(--ax-primary-ink); }
.ax-combo__item.is-on { font-weight: 650; }
.ax-combo__item.is-on::after { content: " ✓"; color: var(--ax-primary); }
.ax-combo__empty {
    padding: 10px 11px;
    font-size: 13.5px;
    color: var(--ax-muted);
    list-style: none;
}

/* --- suggestions (email typos) ------------------------------------------- */

.ax-suggest { font-size: 12.5px; color: var(--ax-warn); }
.ax-suggest:empty { display: none; }
.ax-suggest .ax-link-btn { font-size: 12.5px; margin-inline-start: 4px; }

/* --- fields the national ID owns ----------------------------------------- */

.ax-field.is-locked .ax-input {
    background: var(--ax-surface-2);
    color: var(--ax-ink-2);
    cursor: not-allowed;
    border-style: dashed;
}
.ax-choice.is-locked {
    background: var(--ax-surface-2);
    cursor: not-allowed;
    opacity: .85;
}
.ax-choice.is-locked:hover { border-color: var(--ax-line-strong); background: var(--ax-surface-2); }
.ax-choice.is-locked.is-on { border-color: var(--ax-primary); background: var(--ax-primary-soft); }

/* --- right to left ------------------------------------------------------- */

[dir="rtl"] .ax-brand__mark { background: linear-gradient(225deg, var(--ax-primary), #7c3aed); }
[dir="rtl"] .ax-progress__bar { background: linear-gradient(270deg, var(--ax-primary), #7c3aed); }
[dir="rtl"] .ax-eyebrow,
[dir="rtl"] .ax-title,
[dir="rtl"] .ax-lede,
[dir="rtl"] .ax-section,
[dir="rtl"] .ax-label,
[dir="rtl"] .ax-hint,
[dir="rtl"] .ax-error,
[dir="rtl"] .ax-choice__body,
[dir="rtl"] .ax-kv,
[dir="rtl"] .ax-rail__label { text-align: right; }
[dir="rtl"] .ax-names__lead { text-align: right; }
[dir="rtl"] .ax-select {
    background-position: left 10px center;
    padding-right: 12px;
    padding-left: 34px;
}
/* The Arabic name boxes are already rtl; the Latin ones must stay ltr even
   when the page around them has flipped. */
[dir="rtl"] .ax-input[dir="ltr"] { text-align: left; }
/* The done screen stays centred in both languages; only its rows read right to left. */
[dir="rtl"] .ax-outcome { text-align: right; }
[dir="rtl"] .ax-counter__value { font-variant-numeric: tabular-nums; }

/* Arabic reads better a shade larger, and needs a face that has the glyphs. */
[lang="ar"] {
    font-family: "Segoe UI", "Noto Sans Arabic", "Tahoma", system-ui, sans-serif;
    font-size: 15.5px;
}
[lang="ar"] .ax-title { letter-spacing: 0; }

/* The robot check, on the review page only. Google draws a fixed-width iframe
   inside it, so the box is centred rather than stretched, and it keeps its own
   breathing room above the footer buttons. */
.ax-captcha {
    display: flex;
    justify-content: center;
    margin: 28px 0 4px;
}
[dir="rtl"] .ax-captcha { justify-content: center; }