/* =========================================================================
   صفحة التسجيل.

   تُعرض فوق قالب صفحات الحساب الذي يحمّل admin_style.css وحده — لا تنسيق
   الموقع العام. فهذا الملف مكتفٍ بذاته ولا يعتمد على أي قاعدة من style.css.

   ولأن القالب يحمّل بوتستراب أيضاً، تُكتب القواعد هنا على أصناف jedg- الخاصة
   لا على عناصر عامة، فلا تتصادم مع أنماطه.
   ========================================================================= */

.jedg-signup-page {
    --jedg-navy: #295281;
    --jedg-navy-dark: #1f406a;
    --jedg-bronze: #af7a4a;
    --jedg-ink: #111827;
    --jedg-muted: #6b7280;
    --jedg-line: #d7dbe0;
    --jedg-danger: #9d3630;
    --jedg-field: 2.875rem;

    min-height: 100vh;
    background: #f4f6f8;
    padding: clamp(1rem, 4vw, 2.5rem) clamp(.75rem, 3vw, 1.5rem) 4rem;
    font-family: "Open Sans", "Segoe UI", system-ui, sans-serif;
    color: var(--jedg-ink);
    -webkit-font-smoothing: antialiased;
}

.jedg-signup-page *, .jedg-signup-page *::before, .jedg-signup-page *::after { box-sizing: border-box; }

.jedg-signup { padding: 0; max-width: 46rem; margin-inline: auto; }

/* ---------- مبدّل اللغة ---------- */
.jedg-pagelang {
    display: flex; justify-content: center; flex-wrap: wrap; gap: .35rem;
    margin: 0 auto 1.1rem;
}
.jedg-pagelang__item {
    padding: .32rem .9rem;
    border: 1px solid var(--jedg-line); border-radius: 999px;
    font-size: .8rem; line-height: 1.5; color: #4b5563;
    background: #fff; text-decoration: none;
}
.jedg-pagelang__item:hover { border-color: var(--jedg-bronze); color: var(--jedg-bronze); }
.jedg-pagelang__item.is-active {
    background: var(--jedg-navy); border-color: var(--jedg-navy); color: #fff;
    font-weight: 700; cursor: default;
}
.jedg-pagelang__item:focus-visible { outline: 2px solid var(--jedg-bronze); outline-offset: 2px; }

/* مؤشّر المراحل: تعريفه الموحَّد في آخر الملف (يخدم الشاشات الثلاث). */

/* ---------- البطاقة ---------- */
.jedg-signup__card {
    background: #fff; border: 1px solid #e8eaed; border-radius: 12px;
    padding: clamp(1.25rem, 4vw, 2.25rem);
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 16px 40px -28px rgba(16,24,40,.35);
}
.jedg-signup__head { text-align: center; margin-bottom: 1.6rem; }
.jedg-signup__logo { display: inline-block; }
.jedg-signup__logo img {
    /* ملف الشعار كبير الأبعاد؛ بلا حدّ صريح كان يملأ الشاشة. */
    max-height: 68px; width: auto; max-width: 100%;
}
.jedg-signup__title { font-size: clamp(1.25rem, 4vw, 1.5rem); font-weight: 700; margin: .85rem 0 .3rem; }
.jedg-signup__lead { color: var(--jedg-muted); font-size: .92rem; margin: 0; }

/* ---------- الشبكة ---------- */
.jedg-grid { display: grid; grid-template-columns: 1fr; gap: 1.05rem 1.25rem; }
@media (min-width: 48rem) { .jedg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.jedg-field--wide { grid-column: 1 / -1; }

/* ---------- الحقول ---------- */
.jedg-field { display: flex; flex-direction: column; gap: .3rem; border: 0; margin: 0; padding: 0; min-width: 0; }
.jedg-field > label, .jedg-field > legend {
    font-size: .82rem; font-weight: 600; color: #374151;
    padding: 0; margin: 0; float: none; width: auto; line-height: 1.5;
}
.jedg-field input[type="text"], .jedg-field input[type="email"], .jedg-field input[type="tel"],
.jedg-field input[type="password"], .jedg-field input[type="number"], .jedg-field select {
    width: 100%; height: var(--jedg-field); padding: 0 .8rem;
    border: 1px solid var(--jedg-line); border-radius: 8px; background: #fff;
    font: inherit; font-size: .95rem; color: var(--jedg-ink);
    transition: border-color .12s ease, box-shadow .12s ease;
}
.jedg-field select { padding-inline-end: 2rem; }
.jedg-field input:hover, .jedg-field select:hover { border-color: #b6bcc4; }
.jedg-field input:focus, .jedg-field select:focus {
    outline: none; border-color: var(--jedg-navy); box-shadow: 0 0 0 3px rgba(41,82,129,.14);
}
.jedg-field input.is-invalid, .jedg-field select.is-invalid { border-color: var(--jedg-danger); }
.jedg-field input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(157,54,48,.14); }
.jedg-req { color: var(--jedg-danger); }

/* الإرشاد دائم ورمادي، والخطأ أحمر ولا يظهر إلا عند الخطأ — كانا صنفاً واحداً
   فبدا الإرشاد وكأنه خطأ. */
.jedg-hint { margin: 0; font-size: .76rem; color: var(--jedg-muted); line-height: 1.5; }
.jedg-error { display: none; margin: 0; font-size: .76rem; color: var(--jedg-danger); line-height: 1.5; }

/* ---------- كلمة المرور: زر إظهار/إخفاء ---------- */
.jedg-password { position: relative; display: block; }
.jedg-password input { padding-inline-end: 2.9rem !important; }
.jedg-password__toggle {
    position: absolute; inset-inline-end: .35rem; top: 50%; transform: translateY(-50%);
    display: grid; place-items: center;
    width: 2.1rem; height: 2.1rem; padding: 0;
    border: 0; border-radius: 6px; background: transparent;
    color: var(--jedg-muted); cursor: pointer; font-size: 1rem; line-height: 1;
}
.jedg-password__toggle:hover { background: #f1f3f5; color: var(--jedg-ink); }
.jedg-password__toggle:focus-visible { outline: 2px solid var(--jedg-bronze); outline-offset: 1px; }

/* ---------- حقل الجوال (intl-tel-input) ---------- */
/* المكوّن يلفّ الحقل بعنصر خاص به، فبلا هذه القواعد يخرج بعرض افتراضي
   ويظهر صندوق العلم بلا محاذاة مع بقية الحقول. */
.jedg-field .iti { width: 100%; display: block; }
.jedg-field .iti__flag-container { inset-inline-start: 0; inset-inline-end: auto; }
.jedg-field .iti--allow-dropdown input[type="tel"] { padding-inline-start: 3.25rem; padding-inline-end: .8rem; }
.jedg-field .iti__selected-flag { border-start-start-radius: 8px; border-end-start-radius: 8px; padding: 0 .55rem 0 .6rem; }
.jedg-field .iti__country-list { text-align: start; }

/* ---------- الاختيارات ---------- */
.jedg-choices { display: flex; flex-wrap: wrap; gap: .5rem; padding-top: .1rem; }
.jedg-choice {
    display: inline-flex; align-items: center; gap: .5rem; margin: 0;
    padding: .5rem .9rem; min-height: 2.5rem;
    border: 1px solid var(--jedg-line); border-radius: 8px; background: #fff;
    font-size: .9rem; font-weight: 400; cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}
.jedg-choice:hover { border-color: #b6bcc4; }
.jedg-choice input { accent-color: var(--jedg-navy); width: 1rem; height: 1rem; margin: 0; }
.jedg-choice:has(input:checked) { border-color: var(--jedg-navy); background: #eef3f9; font-weight: 600; }
.jedg-choice:has(input:focus-visible) { outline: 2px solid var(--jedg-bronze); outline-offset: 2px; }

.jedg-check {
    display: flex; align-items: flex-start; gap: .55rem; margin: 0;
    font-size: .9rem; font-weight: 400; line-height: 1.55; cursor: pointer;
}
.jedg-check + .jedg-check { margin-top: .55rem; }
.jedg-check input { accent-color: var(--jedg-navy); width: 1.05rem; height: 1.05rem; margin-top: .18rem; flex: 0 0 auto; }
.jedg-check a { color: var(--jedg-navy); }

/* ---------- الموافقة على الشروط ---------- *
 * إلزاميّةٌ تقف بين الزائر وزرّ التسجيل، وكانت تُرسم كالمربّعين الاختياريّين
 * فوقها حرفاً بحرف: النصّ نفسه، والرابط بلون المتن، ولا نجمة. فيمرّ عليها الزائر
 * ولا يُدرك أنها المانع، ويقف أمام زرٍّ رماديّ لا يدري سببه.
 *
 * ثلاثةٌ تفصلها: إطارٌ وأرضيّةٌ يجعلانها كتلةً مستقلّة، ونجمةٌ حمراء ككلّ حقلٍ
 * مطلوب في هذا النموذج، ورابطٌ مسطَّرٌ ثقيلٌ لا يُقرأ نصّاً عادياً. وتحمرّ الكتلة
 * كلّها إن ضُغط الإرسال وهي غير مؤشّرة — is-invalid يضعها submitSignup على
 * المربّع نفسه، و:has ترفعها إلى الإطار.
 */
.jedg-terms {
    align-items: center;
    padding: .8rem .95rem;
    border: 1px solid var(--jedg-line); border-radius: 8px;
    background: #fff;
    font-size: .92rem; font-weight: 600; color: var(--jedg-ink);
    transition: border-color .12s ease, background .12s ease;
}
.jedg-terms:hover { border-color: #b6bcc4; }
.jedg-terms input { width: 1.2rem; height: 1.2rem; margin-top: 0; }
.jedg-terms a {
    color: var(--jedg-navy); font-weight: 700;
    text-decoration: underline; text-underline-offset: .18em;
}
.jedg-terms a:hover { color: var(--jedg-navy-dark); }
.jedg-terms .jedg-req { font-size: 1.05em; line-height: 1; }
.jedg-terms__required { color: var(--jedg-danger); font-size: .78rem; font-weight: 600; }

.jedg-terms:has(input:checked) { border-color: var(--jedg-navy); background: #eef3f9; }
.jedg-terms:has(input:focus-visible) { outline: 2px solid var(--jedg-bronze); outline-offset: 2px; }
.jedg-terms:has(input.is-invalid) { border-color: var(--jedg-danger); background: #fdeceb; }

/* ---------- التنبيهات ---------- */
.jedg-alert {
    margin-bottom: 1rem; padding: .7rem 1rem;
    border: 1px solid #f0c9c6; border-radius: 8px;
    background: #fdeceb; color: var(--jedg-danger); font-size: .88rem;
}
.jedg-alert:empty { display: none; }
.jedg-alert a {
    color: var(--jedg-navy);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.jedg-alert a:hover { color: var(--jedg-navy-dark); }

/* ---------- الإرسال ---------- */
.jedg-submit {
    width: 100%; margin-top: 1.6rem; min-height: 3rem; padding: .75rem 1rem;
    border: 0; border-radius: 8px; background: var(--jedg-navy); color: #fff;
    font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer;
    transition: background .12s ease;
}
.jedg-submit:hover:not(:disabled) { background: var(--jedg-navy-dark); }
.jedg-submit:focus-visible { outline: 2px solid var(--jedg-bronze); outline-offset: 2px; }
.jedg-submit:disabled { background: #c2c8d0; cursor: not-allowed; }

/* سبب تعطيل الزر يُقال صراحةً؛ زرٌّ رماديّ بلا تفسير يترك الزائر حائراً. */
.jedg-submit-note { margin: .55rem 0 0; text-align: center; font-size: .78rem; color: var(--jedg-muted); }
.jedg-submit-note[hidden] { display: none; }

.jedg-signup__foot { text-align: center; margin: 1.1rem 0 0; font-size: .9rem; color: var(--jedg-muted); }
.jedg-signup__foot a { color: var(--jedg-navy); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
    .jedg-signup-page * { transition: none !important; }
}

/*
 * المؤشّر المشترك (_BookingSteps) — مظهر واحد على الشاشات الثلاث.
 *
 * كان مضبوطاً على خلفية صفحة التسجيل الفاتحة وحدها، فبدا غريباً فوق خلفية بوابة
 * الحجز الداكنة. فصار له غلافٌ خاصّ به لا يتّكئ على خلفية الصفحة.
 */
.jedg-steps {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem auto 2rem;
    padding: .7rem 1.4rem;
    background: #fff;
    border: 1px solid rgba(41, 82, 129, .12);
    border-radius: 999px;
    box-shadow: 0 2px 14px rgba(41, 82, 129, .08);
    width: fit-content;
    max-width: 100%;
    list-style: none;
    flex-wrap: wrap;
    justify-content: center;
}

.jedg-steps__item {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: var(--jedg-muted, #6c757d);
    font-size: .85rem;
    white-space: nowrap;
}

.jedg-steps__item:not(:last-child)::after {
    content: "";
    width: 2.2rem;
    height: 1px;
    background: rgba(41, 82, 129, .18);
    margin-inline-start: 1rem;
}

.jedg-steps__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: #eef1f6;
    color: #6c757d;
    font-size: .8rem;
    font-weight: 600;
    flex: 0 0 auto;
}

.jedg-steps__item.is-active { color: var(--jedg-navy, #295281); font-weight: 600; }
.jedg-steps__item.is-active .jedg-steps__num { background: var(--jedg-navy, #295281); color: #fff; }

.jedg-steps__item.is-done { color: var(--jedg-navy, #295281); }
.jedg-steps__item.is-done .jedg-steps__num { background: #2e7d32; color: #fff; }

@media (max-width: 575px) {
    .jedg-steps { gap: .5rem; padding: .55rem .9rem; }
    .jedg-steps__label { display: none; }
    .jedg-steps__item:not(:last-child)::after { width: 1.2rem; margin-inline-start: .5rem; }
}

/*
 * صفحات الحساب داخل قالب الموقع: القالب يفرض ترويسة ثابتة وتذييلاً، فلا حاجة
 * لأن تملأ البطاقة الشاشة طولاً كما كانت في قالب اللوحة.
 */
.jedg-signup-page { min-height: auto; padding-block: 2rem 4rem; }

/*
 * تحصين طباعة بطاقة الحساب داخل قالب الموقع.
 *
 * style.css الخاص بالموقع يضبط محاذاة العناوين صراحةً، فالتوسيط الموروث من
 * .jedg-signup__head لا يصل إلى <h1> — كان العنوان يخرج محاذياً بينما الشعار
 * والسطر تحته موسّطان. فيُذكر التوسيط على العنصر نفسه.
 */
.jedg-signup__head .jedg-signup__title,
.jedg-signup__head .jedg-signup__lead {
    text-align: center;
}

.jedg-signup__head .jedg-signup__title {
    color: inherit;
    letter-spacing: normal;
}

/* خيار تواصل معطّل: السبب مشروح تحته، فيكفي أن يبدو غير متاح. */
.jedg-choice input:disabled + span { opacity: .45; }
.jedg-choice:has(input:disabled) { cursor: not-allowed; }

/* بطاقة ضيّقة لصفحات الدخول والاستعادة والنتائج. */
.jedg-signup__card--narrow { max-width: 30rem; margin-inline: auto; }
.jedg-signup__card--result { text-align: center; }

.jedg-result__icon {
    width: 3.25rem; height: 3.25rem; margin: 0 auto 1rem;
    display: grid; place-items: center;
    border-radius: 50%; background: #e8f5e9; color: #2e7d32;
    font-size: 1.6rem; font-weight: 700;
}

/* زرّ الإجراء في صفحات النتائج رابطٌ لا زرّ إرسال. */
.jedg-submit--link { display: inline-block; text-decoration: none; text-align: center; }

/*
 * إزاحة شريط المراحل عن أعلى الصفحة.
 *
 * بحشوة على غلافه لا بهامش عليه: <main> و<div class="container">‎ بلا حدّ ولا
 * حشوة، فالهامش العلوي كان ينهار عبرهما ويخرج الشريط ملتصقاً بأعلى الصفحة.
 */
.jedg-steps-wrap {
    padding-block: 2.25rem 1.75rem;
    display: flex;
    justify-content: center;
}

.jedg-steps-wrap .jedg-steps { margin: 0; }

@media (max-width: 767px) {
    .jedg-steps-wrap { padding-block: 1.25rem 1rem; }
}

/*
 * قائمة الدول (intl-tel-input) في واجهة عربية.
 *
 * المكتبة تثبّتها بـleft:0 مع white-space:nowrap، فتنطلق يساراً بعرض أطول اسم دولة
 * وتخرج عن البطاقة. تُثبَّت هنا على حافة الحقل الابتدائية، ويُحدّ عرضها بعرض الحقل
 * فلا تتجاوزه — والأسماء الطويلة تُقتطع بثلاث نقاط بدل توسيع القائمة.
 */
.jedg-field .iti__country-list {
    inset-inline-start: 0;
    left: auto;
    right: auto;

    /*
     * الحدود بالبكسل لا بالـrem.
     *
     * جذر الخطّ في هذا الموقع 22px لا 16px، فـ24rem صارت 528px وخرجت القائمة عن
     * البطاقة. والعرض يُقاس على زرّ العلم (هو الحاوية الموضِعة) لا على الحقل،
     * فالنسبة المئوية لا تنفع أيضاً.
     */
    width: max-content;
    min-width: 240px;
    max-width: var(--iti-list-max, 320px);

    margin: 0;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(17, 24, 39, .14);
}

.jedg-field .iti__country {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
}

/* الاسم يأخذ ما بقي، والمفتاح يبقى ظاهراً في آخر السطر مهما طال الاسم. */
.jedg-field .iti__country-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jedg-field .iti__dial-code { flex: 0 0 auto; direction: ltr; unicode-bidi: embed; }
.jedg-field .iti__flag-box { flex: 0 0 auto; }
.jedg-field .iti__divider { margin: .25rem 0; }


/*
 * الحقل مع المفتاح المنفصل: زرّ العلم صار يحمل المفتاح أيضاً فاتّسع، والحشوة
 * الافتراضية للمكتبة تُحسب لعرض العلم وحده فيركب الرقمُ المفتاحَ.
 */
.jedg-field .iti--separate-dial-code input[type="tel"] {
    padding-inline-start: 96px;
    padding-inline-end: .8rem;
}

/*
 * وجهةُ الحشوة تُقلب في الواجهة العربية — وليست مخالفةً للخصائص المنطقية بل
 * إقرارٌ بأن العنصرين يقيسان من اتجاهين مختلفين: صندوقُ العلم يُوضَع باتجاه
 * الغلاف (RTL) فيستقرّ يميناً، والحقلُ نفسه dir="ltr" ليُقرأ الرقم من اليسار،
 * فـ«بدايتُه» يسارُه. فكانت الحشوة تُترك في جهةٍ لا شيء فيها بينما يمتدّ الرقم
 * حتى يركب المفتاح. والمحاذاة إلى النهاية تُلصق الرقم بمفتاحه فيُقرآن معاً
 * بدل أن يفصلهما عرضُ الحقل كلُّه.
 */
html[dir="rtl"] .jedg-field .iti--allow-dropdown input[type="tel"] {
    padding-inline-start: .8rem;
    padding-inline-end: 3.25rem;
}

html[dir="rtl"] .jedg-field .iti--separate-dial-code input[type="tel"] {
    padding-inline-start: .8rem;
    padding-inline-end: 96px;
    text-align: end;
}

.jedg-field .iti--separate-dial-code .iti__selected-flag {
    background: transparent;
    gap: .3rem;
}

.jedg-field .iti__selected-dial-code {
    direction: ltr;
    unicode-bidi: embed;
    font-size: .9rem;
    color: var(--jedg-ink);
}

.jedg-account-tabs { margin-bottom: 0; }
.jedg-signup-page .jedg-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.jedg-signup-page .jedg-tab {
    flex: 1;
    background: #fff;
    border: 1px solid var(--jedg-line);
    border-radius: 8px;
    padding: 14px 12px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--jedg-muted);
    cursor: pointer;
}
.jedg-signup-page .jedg-tab.is-active {
    background: var(--jedg-navy);
    border-color: var(--jedg-navy);
    color: #fff;
    font-weight: 700;
}
.jedg-signup-page .jedg-tab:focus-visible {
    outline: 2px solid var(--jedg-bronze);
    outline-offset: 2px;
}
.jedg-account-tabs > .jedg-signup__card { margin-top: 0; }

@media (max-width: 575px) {
    .jedg-signup-page .jedg-tabs { gap: 4px; }
    .jedg-signup-page .jedg-tab { font-size: 1.05rem; padding: 12px 8px; }
}