/* =========================================================
   صفحات المصادقة — هويّة OPT Care
   ---------------------------------------------------------
   تُحمَّل بعد style.css فتعلو عليها. الغرض ثلاثة:

   ١. الخطّ: كانت الصفحة على Poppins من Google، وهو لاتيني بحت لا يحوي
      حرفًا عربيًّا واحدًا — فكل نصّ عربي فيها كان يسقط على خطّ النظام.
   ٢. اللون: كان #6571FF، بنفسجيّ المورّد الأصلي، ولا لون واحد مشترك مع
      الهوية. والروابط على #0099FB بتباين 3.02 مقابل 4.5 المطلوبة.
   ٣. التركيز: style.css تُلغي المخطَّط والظلّ معًا على كل حقل وخانة
      اختيار، فكان مستخدم لوحة المفاتيح لا يرى أين هو إطلاقًا — إخفاق
      WCAG 2.4.7. مقيس: بعد Tab كان outline: none 0px و box-shadow: none
      ولون الحدّ بلا تغيّر.

   الخصائص منطقية لا فيزيائية، فالورقة تعمل في الاتجاهين.
   ========================================================= */

:root {
    --navy: #16325C;
    --navy-deep: #0E2444;
    --violet: #6C4BD8;
    --violet-deep: #5433C0;
    --cyan: #1CA0E3;
    --ink: #10203A;
    --ink-2: #45566E;
    --line: #E2E8F1;
    --surface-2: #F5F8FC;

    --display: 'Readex Pro', 'IBM Plex Sans Arabic', system-ui, sans-serif;
    --body: 'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif;
}

body {
    font-family: var(--body) !important;
    background-color: var(--surface-2) !important;
    color: var(--ink) !important;
}

h1, h2, h3, .h1, .h2, .h3 {
    font-family: var(--display) !important;
    letter-spacing: -0.01em;
    color: var(--navy) !important;
}

/* ── الأزرار ──────────────────────────────────────────── */

.btn-primary {
    background-color: var(--violet) !important;
    border-color: var(--violet) !important;
    font-family: var(--display) !important;
    font-weight: 600;
    /* 41 بكسل كان دون هدف اللمس المريح على الجوّال */
    min-height: 46px;
    border-radius: 12px !important;
}

.btn-primary:hover,
.btn-primary:active {
    background-color: var(--violet-deep) !important;
    border-color: var(--violet-deep) !important;
}

/* ── الروابط ─────────────────────────────────────────── */

.link-info,
a.link-info {
    /* #0099FB كان يعطي 3.02:1؛ هذا يتجاوز 4.5:1 على خلفية بيضاء */
    color: #0B6FA4 !important;
    font-weight: 500;
}

.link-info:hover {
    color: var(--navy) !important;
    text-decoration: underline !important;
}

/* ── الحقول ──────────────────────────────────────────── */

.form-control {
    border-color: var(--line) !important;
    border-radius: 12px !important;
    min-height: 46px;
    font-family: var(--body) !important;
}

.form-label {
    color: var(--ink-2) !important;
    font-weight: 500;
}

/* علامة الحقل الإلزامي كانت عنصرًا فارغًا ترسم نجمتها بـ::after،
   فلا يقرأ قارئ الشاشة شيئًا. النجمة تبقى مخفيّة عنه هنا لأن الحقل
   نفسه يحمل required، وهو ما يُعلنه القارئ. */
.required::after {
    color: #C0392B;
}

/* ── حالة التركيز: أهمّ ما في هذه الورقة ─────────────── */

.form-control:focus,
.form-check-input:focus,
.btn:focus-visible,
a:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--cyan) !important;
    outline-offset: 2px !important;
    border-color: var(--violet) !important;
    box-shadow: 0 0 0 4px rgba(28, 160, 227, .18) !important;
}

.form-check-input:checked {
    background-color: var(--violet) !important;
    border-color: var(--violet) !important;
}

/* ── مبدّل اللغة ─────────────────────────────────────── */

.language-picker {
    display: flex;
    justify-content: flex-end;
    padding: 1.25rem 1.5rem 0;
}

.language-picker select {
    font-family: var(--body);
    font-size: .95rem;
    color: var(--ink);
    background-color: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding-block: .55rem;
    padding-inline: .9rem 2.2rem;
    min-height: 44px;
    cursor: pointer;
}

/* ── الشعار ──────────────────────────────────────────── */

.logo-fix-size {
    /* كان object-fit: cover يقصّ أي شعار بنسبة مختلفة عن الإطار */
    object-fit: contain;
    max-width: 240px;
    height: auto;
}

/* ── البطاقة ─────────────────────────────────────────── */

.bg-theme-white {
    background-color: #fff !important;
    border: 1px solid var(--line);
    border-radius: 20px !important;
    box-shadow: 0 12px 36px rgba(16, 32, 58, .09) !important;
}

/* البريد الإلكتروني يُقرأ من اليسار في كل اللغات */
input[type="email"],
input[name="hospital_slug"],
input[name="username"] {
    direction: ltr;
    text-align: start;
}