/* ========================================== Auth Pages ========================================== */ .auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-lg); padding-bottom: calc(var(--space-lg) + 80px); } .auth-container { width: 100%; max-width: 440px; } .auth-card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-xl); animation: fadeInUp 0.5s ease; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .auth-header { text-align: center; margin-bottom: var(--space-xl); } /* بطاقة تحميل التطبيق بديلاً عن بطاقة تسجيل الدخول على متصفحات الجوال. الإظهار/الإخفاء يعتمد على صنف يضعه سكربت الرأس على قبل رسم الصفحة، فلا يظهر نموذج تسجيل الدخول للحظة على الاتصالات البطيئة. */ .auth-store-gate { display: none; text-align: center; } html.is-mobile-web .auth-store-gate { display: block; } html.is-mobile-web #authFormCard { display: none; } /* التخصيص هنا لا بد أن يتجاوز `.store-badge` القادمة لاحقاً في هذا الملف. */ .auth-store-gate .auth-store-gate-badge { display: none; } html.is-ios-web .auth-store-gate .auth-store-gate-badge[data-store="ios"], html.is-android-web .auth-store-gate .auth-store-gate-badge[data-store="android"] { display: flex; } .auth-store-gate .auth-header { margin-bottom: var(--space-lg); } .auth-store-gate-badges { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); margin-bottom: var(--space-lg); } .auth-store-gate .auth-store-gate-badge { min-height: 52px; } /* الارتفاع البصري موحّد بين الشارتين: 52px. شارة Google Play فيها هامش داخلي في الصورة نفسها (نسبة 1.45)، فتُكبَّر ثم تُسحب بهوامش سالبة حتى تطابق شارة App Store. */ .auth-store-gate .auth-store-gate-badge img { height: 52px; } .auth-store-gate .store-badge-google img { height: 76px; margin-top: -12px; margin-bottom: -12px; } .auth-store-gate-vpn { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); background: var(--off-white, #f5f7f6); border: 1px dashed var(--primary-green-accent, #2e7d32); color: var(--text-gray, #555); font-size: 0.88rem; line-height: 1.7; } .auth-store-gate-vpn-icon { font-size: 1rem; } .auth-logo { width: 70px; height: 70px; background: linear-gradient(135deg, var(--primary-green-light), var(--primary-green)); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 2rem; margin: 0 auto var(--space-md); } .site-favicon-preview { width: 64px; height: 64px; margin-top: var(--space-md); border-radius: var(--radius-md); border: 1px solid var(--light-gray); background: var(--off-white); display: flex; align-items: center; justify-content: center; overflow: hidden; } .site-favicon-preview-fallback { font-size: 1.8rem; } .auth-title { font-size: 1.6rem; font-weight: 700; color: var(--primary-green); margin-bottom: var(--space-xs); } .auth-subtitle { color: var(--text-gray); font-size: 0.95rem; } .auth-tabs { display: flex; background: var(--off-white); border-radius: var(--radius-md); padding: var(--space-xs); margin-bottom: var(--space-lg); } .auth-tab { flex: 1; padding: var(--space-sm) var(--space-md); text-align: center; border-radius: var(--radius-sm); font-weight: 600; color: var(--text-gray); transition: all var(--transition-fast); } .auth-tab.active { background: var(--white); color: var(--primary-green); box-shadow: var(--shadow-sm); } .auth-footer { text-align: center; margin-top: var(--space-lg); color: var(--text-gray); font-size: 0.9rem; } .auth-footer a { color: var(--primary-green); font-weight: 600; }