/* auth.css */

/* -------------------------------------- */
/* 1. الخلفية الثابتة لصفحة التسجيل */
/* -------------------------------------- */
.auth-background {
    background-image: url('images/loginbackground004.png'); 
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh; 
    overflow-x: hidden; 
    /* تأكيد أن الخلفية تبقى ثابتة عند التمرير إن وجد */
    background-attachment: fixed;
}

/* -------------------------------------- */
/* 2. استيراد وتطبيق خط Expo Arabic (RTL Ready) */
/* -------------------------------------- */

/* 2.1. تعريف الخط Expo Arabic (Regular) */
@font-face {
    font-family: 'Expo Arabic';
    src: url('fonts/Expo-Regular.ttf') format('truetype');
    font-weight: 400; /* الوزن العادي */
    font-style: normal;
    font-display: swap; 
}

/* 2.2. تعريف الخط Expo Arabic (Bold) */
@font-face {
    font-family: 'Expo Arabic';
    src: url('fonts/Expo-Bold.ttf') format('truetype');
    font-weight: 700; /* الوزن العريض */
    font-style: normal;
    font-display: swap;
}

/* 2.3. تطبيق الخط Expo Arabic كخط أساسي للصفحة مع اتجاه النص (RTL) */
body {
    font-family: 'Expo Arabic', sans-serif !important;
    direction: rtl; /* هام جداً للغة العربية */
    text-align: right; /* يضمن محاذاة النص الافتراضية لليمين */
}

/* -------------------------------------- */
/* 3. خط Akira Expanded (للعناوين الفنية فقط) */
/* -------------------------------------- */
@font-face {
    font-family: 'Akira-Like';
    /* بما أن الخط Akira Expanded قد لا يكون متوفراً على جهاز المستخدم، 
       استبدلته بخطوط بديلة ذات مظهر جريء */
    src: local('Akira Expanded Super Bold'), 
         local('Akira Expanded-SuperBold'),
         local('Arial Black'),
         local('Impact');
    font-weight: 900;
}

/* -------------------------------------- */
/* 4. تنسيق طبقة التحميل (Loader Overlay) */
/* -------------------------------------- */

/* هذا التنسيق يجهز طبقة التحميل للاختفاء عبر JavaScript */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* خلفية شفافة قليلاً لتغطية الصفحة بالكامل */
    background-color: rgba(0, 0, 0, 0.9); 
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* لضمان ظهورها فوق كل العناصر */
    /* يمكنك إزالة القاعدة التالية إذا كنت تريد الإخفاء بـ JS */
    display: none !important; /* 🛑 قاعدة الإخفاء القسري الحالية 🛑 */
}


/* -------------------------------------- */
/* أكواد الـ Loader SVG الكاملة (للتذكير في حال الحاجة المستقبلية) */
/* -------------------------------------- */
:root {
    --hue: 35; 
    --dur: 2s; 
}

.loader {
    --dur: 2s;
    display: block;
    margin: auto;
    width: 56px; 
    height: auto;
    overflow: visible;
}

.loader__glare-top,
.loader__glare-bottom,
.loader__model,
.loader__bevel,
.loader__sand-top,
.loader__sand-bottom {
    animation-duration: var(--dur);
    animation-timing-function: cubic-bezier(0.83, 0, 0.17, 1);
    animation-iteration-count: infinite;
}

.loader__model {
    animation-name: loaderModel;
}

@keyframes loaderModel {
    0%, 10% { transform: translate(0, 0); }
    10% { transform: translate(0, 0) scale(1, 1); animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1); }
    30% { transform: translate(0, 56px) scale(1.0, 0.01); }
    40% { transform: translate(0, 56px) scale(1.0, 0.01); animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1); }
    50% { transform: translate(0, 56px) scale(1.0, 0.01); }
    50.001% { transform: translate(0, -56px) scale(1.0, 0.01); }
    70% { transform: translate(0, 0) scale(1, 1); }
    90% { transform: translate(0, 0) scale(1, 1); }
    100% { transform: translate(0, 0); }
}

.loader__sand-top {
    animation-name: loaderSandTop;
    transform-origin: 50% 50%;
}

@keyframes loaderSandTop {
    0%, 10% { transform: scaleY(1); }
    30% { transform: scaleY(0.001); }
    50% { transform: scaleY(0.001); }
    50.001% { transform: scaleY(0.001); }
    70% { transform: scaleY(1); }
    90% { transform: scaleY(1); }
    100% { transform: scaleY(1); }
}

.loader__sand-bottom {
    animation-name: loaderSandBottom;
    transform-origin: 50% 50%;
}

@keyframes loaderSandBottom {
    0%, 10% { transform: scaleY(1); }
    30% { transform: scaleY(0.001); }
    50% { transform: scaleY(0.001); }
    50.001% { transform: scaleY(0.001); }
    70% { transform: scaleY(1); }
    90% { transform: scaleY(1); }
    100% { transform: scaleY(1); }
}

.loader__glare-top {
    animation-name: loaderGlareTop;
    transform-origin: 50% 50%;
}

@keyframes loaderGlareTop {
    0% { transform: translate(0, 0); }
    10% { transform: translate(0, 0); animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1); }
    30% { transform: translate(0, 56px); }
    50% { transform: translate(0, 56px); }
    50.001% { transform: translate(0, -56px); }
    70% { transform: translate(0, 0); }
    90% { transform: translate(0, 0); }
    100% { transform: translate(0, 0); }
}

.loader__glare-bottom {
    animation-name: loaderGlareBottom;
    transform-origin: 50% 50%;
}

@keyframes loaderGlareBottom {
    0% { transform: translate(0, 0); }
    10% { transform: translate(0, 0); animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1); }
    30% { transform: translate(0, 56px); }
    50% { transform: translate(0, 56px); }
    50.001% { transform: translate(0, -56px); }
    70% { transform: translate(0, 0); }
    90% { transform: translate(0, 0); }
    100% { transform: translate(0, 0); }
}