/* ============================================================
   THE GOAT — صفحات حساب الطالب: الدخول، استعادة كلمة المرور،
   والتسجيل بعد الاختبار المجاني.

   شاشةٌ مقسومة: النموذج على خلفية بيضاء، وصورة الأكاديمية في الجهة
   الأخرى بطبقةٍ داكنة مسطّحة. لونٌ واحد للهوية (الأزرار والتركيز
   والروابط) ورماديّات للباقي — بلا تدرّجات ولا ألوانٍ صارخة.
   وعلى الهاتف: الصورة شريطٌ أعلى الصفحة، والنموذج صفحةٌ بيضاء فوقه.
   ============================================================ */

:root {
    --brand: #5b5ea6;
    --brand-hover: #4b4e92;
    --brand-ring: rgba(91, 94, 166, 0.18);
    --brand-soft: #f4f4fa;

    --ink: #101828;
    --ink-2: #344054;
    --ink-3: #667085;
    --ink-4: #98a2b3;

    --line: #d0d5dd;
    --line-soft: #eaecf0;
    --bg: #f7f7f9;
    --surface: #ffffff;
    --surface-2: #f9fafb;

    --danger: #b42318;
    --danger-bg: #fef3f2;
    --danger-line: #fecdca;
    --ok: #067647;
    --ok-bg: #ecfdf3;
    --ok-line: #abefc6;
    --warn: #93370d;
    --warn-bg: #fffaeb;
    --warn-line: #fedf89;

    --r: 10px;
    --control-h: 48px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
}

body.auth {
    background: var(--surface);
    color: var(--ink);
    font-family: 'Alexandria', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

button,
input,
select {
    font: inherit;
    color: inherit;
}

a {
    color: var(--brand);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.is-hidden {
    display: none !important;
}

[dir="ltr"] .flip-ltr {
    transform: scaleX(-1);
}

/* ---------- الإطار: عمودان على الشاشة العريضة ---------- */
.auth-shell {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    /* الصورة في جهة البداية (يمين العربية، يسار الإنجليزية): الشعار عليها
       واللغة على النموذج، كلٌّ في زاويته الخارجية */
    grid-template-columns: minmax(0, 45%) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "visual top"
        "visual main"
        "visual foot";
    background: var(--surface);
}

.auth-top {
    grid-area: top;
    display: flex;
    justify-content: flex-end;
    padding: 24px 32px 0;
}

.auth-main {
    grid-area: main;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 32px 40px;
}

.auth-foot {
    grid-area: foot;
    padding: 0 32px 24px;
    color: var(--ink-4);
    font-size: 0.8rem;
    text-align: center;
}

.auth-card {
    width: min(400px, 100%);
}

.auth-card.is-wide {
    width: min(440px, 100%);
}

.auth-card.is-xl {
    width: min(560px, 100%);
}

.auth-below {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--line-soft);
    text-align: center;
    color: var(--ink-3);
    font-size: 0.9rem;
}

.auth-below a {
    font-weight: 500;
}

/* زرّ اللغة */
.auth-lang {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink-2);
    font-size: 0.85rem;
    font-weight: 500;
}

.auth-lang:hover {
    border-color: var(--line);
    text-decoration: none;
}

.auth-lang i {
    color: var(--ink-4);
    font-size: 0.85rem;
}

/* ---------- الصورة ---------- */
.auth-visual {
    grid-area: visual;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: #1b1c3a;
    color: #ffffff;
}

.auth-visual-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 30% 50%;
    /* الأحمر في الصورة يُهدَّأ: الصفحة صفحة نموذج لا إعلان */
    filter: saturate(0.55);
}

/* طبقةٌ مسطّحة بلون الهوية الداكن — لونٌ واحد لا تدرّج */
.auth-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(22, 23, 52, 0.62);
}

.auth-visual-inner {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 32px 40px 44px;
}

.auth-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
}

.auth-brand:hover {
    text-decoration: none;
    opacity: 0.9;
}

.auth-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #ffffff;
}

.auth-brand-mark img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.auth-visual-text {
    max-width: 440px;
}

.auth-visual-tagline {
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.9rem;
    font-weight: 500;
}

.auth-visual-title {
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 1.45;
}

/* ---------- العنوان ---------- */
.auth-head {
    margin-bottom: 28px;
}

.auth-title {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ink);
}

.auth-lead {
    margin-top: 6px;
    color: var(--ink-3);
    font-size: 0.93rem;
}

/* مراحل الرحلة بعد الاختبار: سطرٌ هادئ لا شارات ملوّنة */
.auth-steps {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin-bottom: 18px;
    color: var(--ink-4);
    font-size: 0.8rem;
    font-weight: 500;
}

.auth-steps li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.auth-steps li + li::before {
    content: "";
    width: 16px;
    height: 1px;
    background: var(--line);
}

.auth-steps .is-done {
    color: var(--ink-3);
}

.auth-steps .is-done i {
    color: var(--ok);
    font-size: 0.75rem;
}

.auth-steps .is-now {
    color: var(--ink);
    font-weight: 600;
}

/* ---------- الحقول ---------- */
.field {
    margin-bottom: 18px;
}

.field-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.field-label-row .field-label {
    margin-bottom: 0;
}

.field-label {
    display: block;
    margin-bottom: 6px;
    color: var(--ink-2);
    font-size: 0.875rem;
    font-weight: 500;
}

.field-link {
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
}

.field-input {
    display: block;
    width: 100%;
    height: var(--control-h);
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    color: var(--ink);
    font-size: 1rem;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field-input::placeholder {
    color: var(--ink-4);
}

.field-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-ring);
}

.field-input:disabled {
    background: var(--surface-2);
    color: var(--ink-4);
    cursor: not-allowed;
}

.field-input.ltr {
    direction: ltr;
}

[dir="rtl"] .field-input.ltr {
    text-align: right;
}

[dir="rtl"] .field-input.ltr:not(:placeholder-shown) {
    text-align: left;
}

.otp-input,
[dir="rtl"] .otp-input,
[dir="rtl"] .otp-input:not(:placeholder-shown) {
    text-align: center;
    letter-spacing: 0.4em;
    font-size: 1.15rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.otp-input::placeholder {
    letter-spacing: 0.3em;
}

.field-hint {
    margin-top: 6px;
    color: var(--ink-3);
    font-size: 0.8rem;
    line-height: 1.7;
}

.field-hint.is-top {
    margin: -2px 0 8px;
}

/* كلمة المرور وزرّ إظهارها */
.password-field {
    position: relative;
}

.password-field .field-input {
    padding-inline-end: 48px;
}

/* الحقل ltr داخل صفحة rtl: الحشوة الفيزيائية تتبع موضع الزرّ لا اتجاه الحقل */
[dir="rtl"] .password-field .field-input {
    padding-right: 14px;
    padding-left: 48px;
}

.password-toggle {
    position: absolute;
    top: 4px;
    bottom: 4px;
    inset-inline-end: 4px;
    width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ink-4);
    cursor: pointer;
}

.password-toggle:hover {
    color: var(--ink-2);
    background: var(--surface-2);
}

/* ---------- رقم الهاتف: الدولة والرقم في حقل واحد ---------- */
.phone-input-group {
    display: flex;
    align-items: stretch;
    direction: ltr;
    height: var(--control-h);
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.phone-input-group:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-ring);
}

/* القائمة الأصلية شفّافةٌ فوق وجهٍ قصير (العلم والمفتاح): تُفتح بأسماء
   الدول كاملة، ولا يُقصّ اسمٌ طويل داخل الحقل على شاشة الهاتف */
.country-picker {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px 0 12px;
    border-right: 1px solid var(--line-soft);
    background: var(--surface-2);
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
}

.country-picker::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-right: 1.5px solid var(--ink-4);
    border-bottom: 1.5px solid var(--ink-4);
    transform: rotate(45deg);
}

.country-picker:hover {
    background: #f2f4f7;
}

.country-select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    /* 16px: أقلّ منها يجعل iOS يقرّب الصفحة عند النقر */
    font-size: 16px;
}

.country-select:disabled {
    cursor: not-allowed;
}

.country-picker:has(.country-select:disabled) {
    color: var(--ink-4);
}

.phone-number-input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    padding: 0 14px;
    color: var(--ink);
    font-size: 1rem;
    letter-spacing: 0.02em;
}

.phone-number-input::placeholder {
    color: var(--ink-4);
}

.phone-number-input:disabled {
    background: var(--surface-2);
    color: var(--ink-4);
}

/* ---------- الأزرار ---------- */
.auth-btn {
    width: 100%;
    min-height: var(--control-h);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 20px;
    border: 1px solid var(--brand);
    border-radius: var(--r);
    background: var(--brand);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.auth-btn:hover:not(:disabled) {
    background: var(--brand-hover);
    border-color: var(--brand-hover);
}

.auth-btn:disabled,
.auth-btn.loading {
    opacity: 0.6;
    cursor: default;
    pointer-events: none;
}

.auth-btn.is-secondary {
    background: var(--surface);
    border-color: var(--line);
    color: var(--ink-2);
}

.auth-btn.is-secondary:hover:not(:disabled) {
    background: var(--surface-2);
    border-color: var(--line);
}

.auth-btn.is-secondary i {
    color: var(--ink-3);
}

.auth-btn + .auth-btn {
    margin-top: 10px;
}

.field .auth-btn.is-secondary {
    margin-top: 10px;
}

/* زرٌّ بشكل رابط: إعادة الإرسال، والرجوع لتغيير الرقم */
.auth-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--brand);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
}

.auth-link-btn:hover:not(:disabled) {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.auth-link-btn:disabled {
    color: var(--ink-4);
    cursor: default;
}

.auth-link-btn.is-muted {
    margin: 0 0 16px;
    color: var(--ink-3);
}

/* ---------- الرسائل ---------- */
.auth-error,
.auth-alert {
    margin-bottom: 16px;
    padding: 10px 12px;
    border: 1px solid var(--danger-line);
    border-radius: 8px;
    background: var(--danger-bg);
    color: var(--danger);
    font-size: 0.875rem;
    line-height: 1.7;
}

/* الخطأ نصٌّ جارٍ (قد يحمل رابطاً في وسطه)، والتنبيه أيقونةٌ ونص */
.auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

/* الخطأ لا يحجز مكاناً وهو فارغ */
.auth-error:empty {
    display: none;
}

.auth-error a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

/* ملاحظة لا خطأ (رمز الاختبار خارج الإنتاج) */
.auth-error.is-note {
    border-color: var(--line-soft);
    background: var(--surface-2);
    color: var(--ink-3);
}

.auth-alert i {
    margin-top: 5px;
    font-size: 0.85rem;
}

.auth-alert.is-ok {
    border-color: var(--ok-line);
    background: var(--ok-bg);
    color: var(--ok);
}

.auth-alert.is-warn {
    border-color: var(--warn-line);
    background: var(--warn-bg);
    color: var(--warn);
}

/* سطرٌ يسبق مجموعة حقول: «رقمٌ جديد — أكمل بياناتك» */
.auth-note {
    margin: 0 0 16px;
    color: var(--ink-3);
    font-size: 0.875rem;
}

/* ---------- خطوات الاستعادة ---------- */
.auth-step {
    display: none;
}

.auth-step.is-active {
    display: block;
}

/* ---------- الحساب القائم بعد التحقق ---------- */
.account-box {
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: 0.9rem;
    line-height: 1.8;
}

.account-box h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 600;
}

.account-box h2 i {
    color: var(--ink-3);
}

.account-box p + p {
    margin-top: 6px;
}

.account-box .auth-alert {
    margin: 10px 0 0;
}

/* ---------- الشاشات الضيّقة: الصورة شريطٌ أعلى الصفحة ---------- */
@media (max-width: 959px) {
    .auth-shell {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
            "visual"
            "main"
            "foot";
    }

    .auth-visual {
        position: relative;
        height: 200px;
    }

    .auth-visual-img {
        object-position: 50% 30%;
    }

    .auth-visual-inner {
        padding: 18px 20px 36px;
    }

    .auth-visual-tagline {
        display: none;
    }

    .auth-visual-title {
        font-size: 1.15rem;
        max-width: 300px;
    }

    /* اللغة فوق الصورة، في الزاوية المقابلة للشعار */
    .auth-top {
        position: absolute;
        top: 16px;
        inset-inline-end: 16px;
        z-index: 3;
        padding: 0;
    }

    .auth-lang {
        border-color: rgba(255, 255, 255, 0.35);
        background: rgba(255, 255, 255, 0.12);
        color: #ffffff;
    }

    .auth-lang i {
        color: rgba(255, 255, 255, 0.8);
    }

    .auth-lang:hover {
        border-color: rgba(255, 255, 255, 0.6);
    }

    /* النموذج صفحةٌ بيضاء ترتفع فوق طرف الصورة */
    .auth-main {
        position: relative;
        z-index: 2;
        margin-top: -20px;
        padding: 28px 20px 32px;
        border-radius: 20px 20px 0 0;
        background: var(--surface);
        align-items: flex-start;
    }

    .auth-card,
    .auth-card.is-wide {
        width: min(480px, 100%);
    }

    .auth-card.is-xl {
        width: min(560px, 100%);
    }

    .auth-foot {
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }

    .auth-title {
        font-size: 1.35rem;
    }

    .auth-head {
        margin-bottom: 24px;
    }
}

/* ---------- تعهّد يُقرّ بنقرة (شاشة إنشاء الحساب) ---------- */
.pledge {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: 0.875rem;
    line-height: 1.7;
    cursor: pointer;
}

.pledge input {
    width: 18px;
    height: 18px;
    margin-top: 3px;
    flex: 0 0 auto;
    accent-color: var(--brand);
}

.pledge:has(input:checked) {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--ink);
}

/* ---------- الحساب القائم: خياران صريحان لصاحبه ---------- */
.account-choice {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line-soft);
}

.account-choice-q {
    margin-bottom: 10px;
    color: var(--ink);
    font-size: 0.875rem;
    font-weight: 600;
}

.account-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    cursor: pointer;
}

.account-option input {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    accent-color: var(--brand);
}

.account-option strong {
    display: block;
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 600;
}

.account-option small {
    display: block;
    margin-top: 2px;
    color: var(--ink-3);
    font-size: 0.8rem;
    line-height: 1.6;
}

.account-option:has(input:checked) {
    border-color: var(--brand);
    background: var(--brand-soft);
}