/* ============================================================
   شاشة الدخول — النمط الرسمي
   بيتحمّل بعد ستايل الصفحة لما "نمط التصميم" = رسمي.
   لوحة هوية هادية بلون واحد + فورم فاتح، من غير صور ولا أرقام دعائية.
   ============================================================ */
body.ui-formal { background: #f5f6f8; font-weight: 500; --login-form-w: 480px; }
.ui-formal .particles,
.ui-formal .hero-text,
.ui-formal .features-grid,
.ui-formal .stats-row,
.ui-formal .welcome-emoji { display: none !important; }

/* لوحة الهوية */
.ui-formal .brand-side {
    background: var(--brand-dark, #141a2e);
    align-items: flex-start;
    justify-content: space-between;
    padding: 56px 64px;
}
.ui-formal .logo-section { margin-bottom: 0; gap: 16px; }
.ui-formal .logo-icon {
    width: 56px; height: 56px;
    border-radius: 12px;
    background: var(--primary);
    font-size: 1.6rem;
    color: #fff;
    animation: none;
    box-shadow: none;
    overflow: hidden;
}
.ui-formal .logo-text h1 {
    font-size: 1.9rem; font-weight: 700;
    background: none; -webkit-text-fill-color: #fff; color: #fff;
}
.ui-formal .logo-text p { font-size: .95rem; color: rgba(255,255,255,.62); }
.ui-formal .brand-side::after {
    content: attr(data-footer);
    color: rgba(255,255,255,.38);
    font-size: .8rem;
}
.ui-formal .brand-tagline {
    display: block !important;
    max-width: 420px;
    color: rgba(255,255,255,.78);
    font-size: 1.35rem; font-weight: 600; line-height: 1.7;
}
.ui-formal .brand-tagline small { display: block; margin-top: 10px; font-size: .92rem; font-weight: 500; color: rgba(255,255,255,.5); }

/* الفورم */
.ui-formal .form-side {
    width: var(--login-form-w);
    background: #fff;
    backdrop-filter: none;
    border-right: 1px solid #e4e7ec;
    padding: 56px;
}
.ui-formal .form-header { text-align: right; margin-bottom: 28px; }
.ui-formal .form-header h2 { color: #101828; font-size: 1.6rem; font-weight: 700; margin-bottom: 6px; }
.ui-formal .form-header p { color: #667085; font-size: .95rem; }
.ui-formal .form-group { margin-bottom: 18px; }
.ui-formal .form-group label { color: #344054; font-size: .88rem; font-weight: 600; margin-bottom: 6px; }
.ui-formal .form-control {
    padding: 12px 44px;
    background: #fff;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    color: #101828;
    font-size: 1rem;
    box-shadow: 0 1px 2px rgba(16,24,40,.05);
}
.ui-formal .form-control:focus { background: #fff; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb-login), .16); }
.ui-formal .form-control::placeholder { color: #98a2b3; }
.ui-formal .input-wrapper .icon { right: 14px; font-size: 1rem; color: #98a2b3; }
.ui-formal .toggle-password { color: #98a2b3; left: 12px; font-size: 1rem; }
.ui-formal .checkbox-wrapper { color: #344054; font-size: .92rem; }
.ui-formal .options-row { margin-bottom: 22px; }
.ui-formal .btn { padding: 12px; border-radius: 8px; font-size: 1rem; font-weight: 600; }
.ui-formal .btn:hover { transform: none; }
.ui-formal .btn-login { background: var(--primary); box-shadow: 0 1px 2px rgba(16,24,40,.05); color: #fff; }
.ui-formal .btn-login:hover { background: var(--primary-dark-login, var(--primary)); box-shadow: 0 1px 2px rgba(16,24,40,.05); }
.ui-formal .divider { margin: 22px 0; }
.ui-formal .divider::before, .ui-formal .divider::after { background: #e4e7ec; }
.ui-formal .divider span { color: #98a2b3; font-size: .85rem; }
.ui-formal .btn-trial { background: #fff; color: #344054; border: 1px solid #d0d5dd; box-shadow: 0 1px 2px rgba(16,24,40,.05); }
.ui-formal .btn-trial:hover { background: #f9fafb; box-shadow: 0 1px 2px rgba(16,24,40,.05); }
.ui-formal .btn-trial i { color: var(--primary); }
.ui-formal .form-footer { margin-top: 28px; }
.ui-formal .form-footer p { color: #98a2b3; }
.ui-formal .alert-error {
    background: #fef3f2; border: 1px solid #fecdca; border-radius: 8px;
    color: #b42318; padding: 12px 14px; margin-bottom: 20px; animation: none;
}

/* مودال الحساب التجريبي */
.ui-formal .modal-overlay { background: rgba(16,24,40,.6); backdrop-filter: blur(2px); }
.ui-formal .modal-box { background: #fff; border: 1px solid #e4e7ec; border-radius: 12px; }
.ui-formal .modal-header { background: #fff; border-bottom: 1px solid #e4e7ec; padding: 18px 22px; }
.ui-formal .modal-header h3 { color: #101828; font-size: 1.1rem; }
.ui-formal .modal-header h3 i { color: var(--primary); }
.ui-formal .close-modal { background: #f2f4f7; color: #475467; border-radius: 8px; width: 34px; height: 34px; }
.ui-formal .trial-info { background: #f9fafb; border-color: #e4e7ec; color: #344054; }
.ui-formal .trial-info i, .ui-formal .trial-info strong { color: var(--primary); }
.ui-formal .modal-footer { background: #f9fafb; border-top: 1px solid #e4e7ec; }
.ui-formal .btn-cancel { background: #fff; color: #344054; border: 1px solid #d0d5dd; }
.ui-formal .btn-create, .ui-formal .btn-enter { background: var(--primary); color: #fff; }
.ui-formal .success-modal-content h3 { color: #101828; }
.ui-formal .success-modal-content > p { color: #667085; }
.ui-formal .success-icon-big { background: #ecfdf3; color: #079455; }
.ui-formal .credentials-box { background: #f9fafb; border: 1px solid #e4e7ec; }
.ui-formal .cred-item { border-bottom-color: #e4e7ec; }
.ui-formal .cred-label { color: #667085; }
.ui-formal .cred-value span { color: #101828; }
.ui-formal .copy-btn { background: #fff; border: 1px solid #d0d5dd; color: #475467; }
.ui-formal .warning-box { background: #fffaeb; border-color: #fedf89; color: #b54708; }
.ui-formal .refund-note { background: #fffaeb; border-color: #fedf89; color: #7a2e0e; }
.ui-formal .refund-note i, .ui-formal .refund-note strong { color: #b54708; }
.ui-formal .refund-check { color: #344054; }
.ui-formal .modal-body label { color: #344054 !important; }

/* الموبايل */
@media (max-width: 768px) {
    .ui-formal .form-side { padding: 0; background: #fff; }
    .ui-formal .mobile-brand { background: var(--brand-dark, #141a2e); padding: 36px 24px 28px; }
    .ui-formal .mobile-brand .logo-icon { width: 56px; height: 56px; font-size: 1.5rem; }
    .ui-formal .mobile-brand h1 { background: none; -webkit-text-fill-color: #fff; color: #fff; font-size: 1.6rem; font-weight: 700; }
    .ui-formal .mobile-brand p { color: rgba(255,255,255,.6); }
    .ui-formal .form-wrapper { padding: 28px 20px 36px; background: #fff; backdrop-filter: none; border-radius: 20px 20px 0 0; margin-top: -18px; position: relative; }
    /* نفس صورة الجيم الباهتة ورا اللوجو على الموبايل */
    .ui-formal .mobile-brand {
        background:
            linear-gradient(to top, rgba(var(--primary-rgb-login), .28), transparent 70%),
            linear-gradient(160deg, rgba(20, 26, 46, .90), rgba(20, 26, 46, .80)),
            url("https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=900&q=55&auto=format") center / cover,
            var(--brand-dark, #141a2e);
        padding-bottom: 46px;
    }
}
/* أقل من الكمبيوتر: الفورم بعرض الشاشة (كان ثابت 480 فبيطلع بره الموبايل) */
@media (max-width: 1024px) {
    .ui-formal .form-side { width: 100%; border: none; }
}

/* لوحة الهوية (يمين الشاشة على الكمبيوتر): صور جيم باهتة بتتبدّل ببطء
   تحت طبقة بلون النظام — بتدي روح للصفحة والكلام فوقها يفضل واضح */
.ui-formal .bg-slideshow { display: none; }
@media (min-width: 1025px) {
    .ui-formal .bg-slideshow {
        display: block;
        position: fixed;
        top: 0; bottom: 0; right: 0;
        left: var(--login-form-w);           /* الفورم على الشمال */
        background: var(--brand-dark, #141a2e);
        overflow: hidden;
    }
    .ui-formal .bg-slide {
        filter: grayscale(35%) contrast(1.05);
        transition: opacity 2.2s ease;
        transform: scale(1.08);
    }
    .ui-formal .bg-slide.active { animation: loginSlowZoom 16s ease-out forwards; }
    .ui-formal .bg-slide::after {
        background:
            linear-gradient(to top, rgba(var(--primary-rgb-login), .30), transparent 60%),
            linear-gradient(160deg, rgba(20, 26, 46, .92), rgba(20, 26, 46, .80));
        background:
            linear-gradient(to top, rgba(var(--primary-rgb-login), .30), transparent 60%),
            linear-gradient(160deg, color-mix(in srgb, var(--brand-dark, #141a2e) 92%, transparent), color-mix(in srgb, var(--brand-dark, #141a2e) 80%, transparent));
    }
    /* صور أخف (عرض 1400 وجودة متوسطة) — اللوحة مش ملء الشاشة */
    .ui-formal .bg-slide:nth-child(1) { background-image: url("https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=1400&q=60&auto=format"); }
    .ui-formal .bg-slide:nth-child(2) { background-image: url("https://images.unsplash.com/photo-1571902943202-507ec2618e8f?w=1400&q=60&auto=format"); }
    .ui-formal .bg-slide:nth-child(3) { background-image: url("https://images.unsplash.com/photo-1583454110551-21f2fa2afe61?w=1400&q=60&auto=format"); }
    .ui-formal .bg-slide:nth-child(4) { background-image: url("https://images.unsplash.com/photo-1517836357463-d25dfeac3438?w=1400&q=60&auto=format"); }
    .ui-formal .bg-slide:nth-child(5) { background-image: url("https://images.unsplash.com/photo-1540497077202-7c8a3999166f?w=1400&q=60&auto=format"); }
    .ui-formal .brand-side { background: transparent; }
    .ui-formal .logo-text h1, .ui-formal .brand-tagline { text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
}
@keyframes loginSlowZoom { from { transform: scale(1.08); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
    .ui-formal .bg-slide.active { animation: none; transform: none; }
}