/*
 * شاشة التحميل في الدخول المباشر (router_login.php): تظهر لحظة الضغط على "اتصال".
 * الخلفية الزرقاء المتدرجة نفسها (ثابتة في الثيمين)، وبلاطة بيضاء فيها اللوجو ازرق تنبض، والنص والشريط ابيضان.
 * ⚠ الشكل العام للصفحة كله في auth.css.
 */
.loading-overlay {
    position: fixed; inset: 0; z-index: 2000; overflow: hidden;
    background: linear-gradient(180deg, #2A63D0 0%, #2459B8 45%, #1d4fbf 100%);
    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; }
.ld-c1, .ld-c2, .ld-c3 { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.08); pointer-events: none; }
.ld-c1 { top: -70px; inset-inline-start: -70px; width: 240px; height: 240px; }
.ld-c2 { top: 22%; inset-inline-end: 12%; width: 64px; height: 64px; }
.ld-c3 { bottom: -90px; inset-inline-end: -80px; width: 260px; height: 260px; background: rgba(255, 255, 255, 0.07); }
.loading-box { position: relative; text-align: center; }
.loading-box .tile {
    width: 76px; height: 76px; margin: 0 auto; border-radius: 22px; display: flex; align-items: center; justify-content: center;
    background: #fff; box-shadow: 0 20px 40px -14px rgba(8, 20, 60, 0.6);
    animation: pulse-mark 1.1s ease-in-out infinite;
}
.loading-box .tile svg { width: 46px; height: 46px; color: #3978E8; }
@keyframes pulse-mark { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.loading-text { margin: 20px 0 16px; font-size: 15px; font-weight: 800; color: #fff; }
.loading-bar { width: 200px; height: 6px; margin: 0 auto; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, 0.3); }
.loading-bar-fill { height: 100%; width: 40%; border-radius: 999px; background: #fff; animation: loading-sweep 1s ease-in-out infinite; }
@keyframes loading-sweep {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}
@media (prefers-reduced-motion: reduce) {
    .loading-box .tile, .loading-bar-fill { animation: none; }
}