/*
     * حقول لاتينية باتجاه LTR ومحاذاة يمين.
     *
     * dir="ltr" يمنع لوحة المفاتيح العربية على iOS من إدراج علامة
     * اتجاه خفية (RLM) في الحقل - وهي التي كانت تُرفض بها البورتات
     * الصحيحة برسالة "أرقام فقط".
     *
     * لكنه وحده يدفع النص لليسار بينما التسمية فوقه على اليمين، فيبدو
     * الحقل منفصلًا عن عنوانه. text-align يعيده لليمين: الاتجاه
     * المنطقي LTR (فلا علامة)، والمظهر كما كان.
     */
    .ltr-right { text-align: right; }


    :root {
        --bg-1: #0a0f1c;
        --bg-2: #0d1526;
        --surface: #131d33;
        --surface-2: #192545;
        --border: #23304f;
        --text: #eef2f8;
        --text-dim: #8892ab;
        --primary: #3b6fe0;
        --primary-2: #5b8def;
        --primary-dark: #2c56b8;
        --success: #22b06b;
        --danger: #e5493f;
        --warning: #e0982e;
    }
    html[data-theme="light"] {
        --bg-1: #eef1f7;
        --bg-2: #e4e9f3;
        --surface: #ffffff;
        --surface-2: #f4f6fb;
        --border: #dde3ee;
        --text: #151d30;
        --text-dim: #60698a;
        --primary: #3b6fe0;
        --primary-2: #5b8def;
        --primary-dark: #2c56b8;
        --success: #1a9257;
        --danger: #c8362d;
        --warning: #b9690f;
    }
    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background:
            radial-gradient(1200px 500px at 15% -10%, rgba(59,111,224,0.18), transparent),
            radial-gradient(900px 500px at 100% 110%, rgba(59,111,224,0.12), transparent),
            radial-gradient(600px 400px at 50% 50%, rgba(91,141,239,0.05), transparent),
            linear-gradient(160deg, var(--bg-2) 0%, var(--bg-1) 100%);
        font-family: 'Tajawal', 'Cairo', 'TajawalFallback', 'Segoe UI', Tahoma, 'Noto Sans Arabic', Arial, sans-serif;
        color: var(--text);
        padding: 24px;
        letter-spacing: 0.1px;
    }
    .panel {
        width: 100%;
        max-width: 400px;
        background: var(--surface);
        border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
        border-radius: 24px;
        padding: 22px 30px 26px;
        box-shadow: 0 24px 60px -28px rgba(0,0,0,0.48), 0 8px 24px -20px rgba(59,111,224,0.22);
        position: relative;
        overflow: hidden;
    }
    .panel-top {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 8px;
        margin-bottom: 4px;
    }
    .icon-btn {
        width: 34px;
        height: 34px;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: transparent;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: var(--text-dim);
        transition: color 0.15s, border-color 0.15s, background 0.15s;
        flex-shrink: 0;
    }
    .icon-btn:hover { color: var(--text); border-color: var(--text-dim); background: var(--surface-2); }
    .icon-btn svg { width: 17px; height: 17px; }
    .lang-switch {
        display: flex; border-radius: 999px; overflow: hidden; height: 30px;
        border: 1px solid var(--border); text-decoration: none;
        flex-shrink: 0; margin-inline-start: 6px;
    }
    .lang-opt {
        padding: 0 11px; display: flex; align-items: center;
        font-size: 10.5px; font-weight: 800; font-family: 'Tajawal', 'Cairo', 'TajawalFallback', 'Segoe UI', Tahoma, 'Noto Sans Arabic', Arial, sans-serif;
        color: var(--text-dim); transition: background 0.15s, color 0.15s;
    }
    .lang-opt.active { background: var(--primary); color: #fff; }

    .brand {
        text-align: center;
        margin-bottom: 24px;
        position: relative;
    }
    .brand .mark {
        width: 66px;
        height: 66px;
        margin: 0 auto 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .brand h1 {
        font-size: 20px;
        font-weight: 800;
        margin: 0 0 7px;
        letter-spacing: 0.2px;
    }
    .brand p {
        font-size: 12.5px;
        color: var(--text-dim);
        margin: 0;
        font-weight: 500;
    }
    .field { margin-bottom: 14px; }
    .field-row { display: flex; gap: 10px; }
    .field-row .field { flex: 1; min-width: 0; margin-bottom: 18px; }
    .field-row .field-port { flex: 0 0 68px; }
    .field-row .field-port input { padding-left: 8px; padding-right: 8px; text-align: center; }
    .field label {
        display: block;
        font-size: 12.5px;
        font-weight: 800;
        color: var(--text-dim);
        margin-bottom: 7px;
        letter-spacing: 0.2px;
    }
    .field input[type=text],
    .field input[type=password] {
        width: 100%;
        padding: 12px 14px;
        border-radius: 12px;
        border: 1.5px solid var(--border);
        background: color-mix(in srgb, var(--bg-1) 92%, var(--surface));
        color: var(--text);
        font-family: inherit;
        font-size: 16px;
        font-weight: 600;
        transition: border-color 0.15s, box-shadow 0.15s;
    }
    .field input:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(59,111,224,0.12);
    }
    .field input::placeholder { color: var(--text-dim); opacity: 0.65; }

    .password-wrap { position: relative; }
    .password-wrap #passwordInput { padding-left: 44px; width: 100%; }
    .password-toggle {
        position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
        width: 34px; height: 34px; border: none; background: transparent;
        border-radius: 8px; cursor: pointer; color: var(--text-dim);
        display: flex; align-items: center; justify-content: center;
        transition: color 0.15s, background 0.15s;
    }
    .password-toggle:hover { color: var(--text); background: var(--surface-2); }
    .password-toggle svg { width: 18px; height: 18px; }
    .password-toggle .icon-eye-off { display: none; }
    .password-toggle.showing .icon-eye { display: none; }
    .password-toggle.showing .icon-eye-off { display: block; }

    .remember-row {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        margin: 3px 0 12px;
        padding: 0;
        border: 0;
        background: transparent;
    }
    .remember-label {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        min-width: 0;
        cursor: pointer;
        user-select: none;
    }
    .remember-label input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }
    .remember-box {
        width: 20px;
        height: 20px;
        border-radius: 6px;
        border: 1.5px solid var(--border);
        background: var(--surface);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 20px;
        transition: all 0.16s ease;
    }
    .remember-box svg {
        width: 13px;
        height: 13px;
        stroke: #fff;
        stroke-width: 2.8;
        opacity: 0;
        transform: scale(0.7);
        transition: opacity 0.14s, transform 0.14s;
    }
    .remember-label input:checked + .remember-box {
        border-color: var(--primary);
        background: var(--primary);
    }
    .remember-label input:checked + .remember-box svg {
        opacity: 1;
        transform: scale(1);
    }
    .remember-label input:focus-visible + .remember-box {
        outline: 3px solid rgba(59,111,224,0.18);
        outline-offset: 2px;
    }
    .remember-copy {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }
    .remember-title {
        font-size: 13px;
        font-weight: 800;
        color: var(--text);
    }
    .remember-note {
        font-size: 10px;
        font-weight: 600;
        color: var(--text-dim);
    }
    button.submit {
        width: 100%;
        padding: 13px;
        border: none;
        border-radius: 11px;
        background: linear-gradient(135deg, var(--primary-2), var(--primary));
        color: #fff;
        font-family: inherit;
        font-size: 15px;
        font-weight: 800;
        cursor: pointer;
        transition: filter 0.15s, transform 0.1s;
        margin-top: 4px;
        letter-spacing: 0.2px;
        box-shadow: 0 12px 26px -14px rgba(59,111,224,0.58);
    }
    button.submit:hover { filter: brightness(1.06); }
    button.submit:active { transform: translateY(1px); }

    .alert {
        background: rgba(229,73,63,0.1);
        border: 1px solid rgba(229,73,63,0.35);
        color: var(--danger);
        padding: 12px 14px;
        border-radius: 11px;
        font-size: 13px;
        font-weight: 700;
        margin-bottom: 20px;
    }

    /* زرار تسجيل اشتراك جديد - تحت زرار الاتصال.
       الكارت خلفيته --surface (بيضا في الوضع الفاتح)، فأي شفافية بيضا
       عليه بتختفي تمامًا. فبنستخدم لون ثابت مختلف عن زرار الاتصال. */
    a.signup-btn {
        display: flex; align-items: center; justify-content: center; gap: 8px;
        width: 100%; padding: 13px; margin-top: 10px;
        border-radius: 11px; text-decoration: none;
        background: var(--surface-2);
        border: 1.5px solid var(--primary);
        color: var(--primary);
        font-family: inherit; font-size: 14.5px; font-weight: 800;
        letter-spacing: 0.2px;
        transition: background 0.15s, transform 0.1s;
    }
    a.signup-btn:hover { background: rgba(57,120,232,0.10); }
    a.signup-btn:active { transform: scale(0.985); }
    a.signup-btn svg { width: 17px; height: 17px; stroke-width: 2.6; }

    .loading-overlay {
        position: fixed; inset: 0; z-index: 2000;
        background: var(--bg-1);
        display: flex; align-items: center; justify-content: center;
        opacity: 0; visibility: hidden; transition: opacity 0.15s ease, visibility 0.15s;
    }
    .loading-overlay.show { opacity: 1; visibility: visible; }
    .loading-box { text-align: center; }
    .loading-box .mark {
        width: 52px; height: 52px; margin: 0 auto 20px;
        display: flex; align-items: center; justify-content: center;
        animation: pulse-mark 1.1s ease-in-out infinite;
    }
    @keyframes pulse-mark { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
    .loading-text { font-size: 14px; font-weight: 700; color: var(--text-dim); margin-bottom: 18px; }
    .loading-bar {
        width: 200px; height: 5px; border-radius: 999px; background: var(--border);
        overflow: hidden; margin: 0 auto;
    }
    .loading-bar-fill {
        height: 100%; width: 40%; border-radius: 999px;
        background: linear-gradient(90deg, var(--primary-2), var(--primary));
        animation: loading-sweep 1s ease-in-out infinite;
    }
    @keyframes loading-sweep {
        0%   { transform: translateX(-100%); }
        100% { transform: translateX(250%); }
    }

    /* تصميم مضغوط ومتجاوب للموبايل */
    .brand .mark { width: 54px; height: 54px; padding: 0; }
    .brand .mark img, .loading-box .mark img { width: 100%; height: 100%; display: block; object-fit: contain; max-width: 100%; max-height: 100%; }
    .brand { margin-bottom: 22px; }
    .brand h1 { font-size: 18px; margin-bottom: 4px; }
    .brand p { font-size: 12px; }
    .field { margin-bottom: 12px; }
    .field-row .field { margin-bottom: 12px; }
    .field label { margin-bottom: 6px; font-size: 12.5px; }
    .field input[type=text], .field input[type=password] { padding: 12px 13px; border-radius: 10px; }
    .remember-row { margin: 3px 0 10px; }
    .remember-note { font-size: 10px; }
    button.submit { margin-top: 2px; padding: 12px; }
    .loading-box .mark { padding: 0; }
    @media (max-width: 520px) {
        body { padding: 10px; align-items: center; }
        .panel { max-width: 390px; padding: 20px 17px 21px; border-radius: 20px; }
        .panel-top { margin-bottom: 0; }
        .brand .mark { width: 58px; height: 58px; margin-bottom: 11px; }
        .brand { margin-bottom: 15px; }
        .brand h1 { font-size: 17px; }
        .brand p { font-size: 11px; }
        .field-row { gap: 8px; }
        .field-row .field-port { flex: 0 0 64px; }
        .field { margin-bottom: 10px; }
        .field-row .field { margin-bottom: 10px; }
        .field input[type=text], .field input[type=password] { font-size: 15px; padding: 11px 12px; }
        .remember-label { gap: 7px; }
        .remember-title { font-size: 12px; }
        .remember-note { font-size: 9.5px; }
        button.submit { font-size: 14px; padding: 11px; }
    }


    /*
     * أيقونة المظهر.
     *
     * ⚠ تصف الوضع الحالي: النهاري شمس ☀ والليلي هلال ☾.
     *
     * و data-theme="light" هو النهاري - يضعه السكريبت في <head> لمن لم
     * يختر الداكن، فغيابه يعني الليلي. والتبديل بالـCSS لا
     * بالجافاسكريبت: الوسم موجود قبل أي رسم فلا ومضة.
     */
    .ic-sun  { display: none; }
    .ic-moon { display: block; }
    html[data-theme="light"] .ic-sun  { display: block; }
    html[data-theme="light"] .ic-moon { display: none; }

    /*
     * ⚠ منع التكبير باللمس المزدوج.
     *
     * سفاري على iOS يتجاهل user-scalable=no في وسم viewport، وهذه
     * الخاصية هي ما يحترمه فعلًا.
     *
     * ⚠ ولا تمنع التمرير.
     *
     * pan-x و pan-y يُبقيان التمرير أفقيًا ورأسيًا كما هو - المحظور
     * هو pinch-zoom وحده.
     */
    html { touch-action: pan-x pan-y; }

    /*
     * ⚠ وحجم الخط لا يتضخّم عند دوران الشاشة.
     *
     * سفاري يكبّر النصّ تلقائيًا حين تنتقل للوضع الأفقي، فتنكسر
     * التخطيطات المحسوبة بدقّة.
     */
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }