/* إعدادات عامة */
body { overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; overflow-x: hidden; }
::-webkit-scrollbar { width: 0px; background: transparent; }
.app-content { height: calc(100vh - 80px); overflow-y: auto; scroll-behavior: smooth; padding-bottom: 100px; }

/* القائمة السفلية */
.bottom-nav-container { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; display: flex; justify-content: center; pointer-events: none; }
.bottom-nav { background: white; width: 100%; height: 65px; display: flex; justify-content: space-around; align-items: center; border-radius: 20px 20px 0 0; box-shadow: 0 -5px 20px rgba(0,0,0,0.05); pointer-events: auto; }
.dark .bottom-nav { background: #1e293b; box-shadow: 0 -5px 20px rgba(0,0,0,0.2); }
.nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 30%; color: #94a3b8; transition: 0.3s; cursor: pointer; }
.nav-item.active .icon-container { transform: translateY(-20px); background: #6366f1; color: white; box-shadow: 0 8px 15px rgba(99, 102, 241, 0.4); border: 4px solid #f3f4f6; }
.dark .nav-item.active .icon-container { border-color: #0f172a; }
.icon-container { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: 0.4s; }
.nav-label { font-size: 0.65rem; font-weight: 700; opacity: 0; transform: translateY(10px); transition: 0.3s; }
.nav-item.active .nav-label { opacity: 1; transform: translateY(-8px); color: #6366f1; }

/* الأقسام والبطاقات */
.page-section { display: none; animation: fadeIn 0.3s ease-in-out; }
.page-section.active-section { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.elegant-card {
    background: linear-gradient(145deg, #ffffff, #f9fafb);
    border-radius: 24px;
    padding: 20px;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.05);
    border: 1px solid rgba(255,255,255,0.5);
    transition: transform 0.3s ease;
}
.dark .elegant-card {
    background: linear-gradient(145deg, #1e293b, #0f172a);
    border-color: rgba(255,255,255,0.05);
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.3);
}
.elegant-card:hover { transform: translateY(-5px); }
.parenting-tip { border-right: 4px solid #f59e0b; background: rgba(254, 243, 199, 0.3); }
.dark .parenting-tip { background: rgba(251, 191, 36, 0.1); }

/* النوافذ المنبثقة (Modals) */
.glass-modal { background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(10px); }
.dark .glass-modal { background: rgba(30, 41, 59, 0.98); }
.hidden-modal { opacity: 0; pointer-events: none; transform: scale(0.95); transition: 0.3s; }
.visible-modal { opacity: 1; pointer-events: all; transform: scale(1); }
.hidden-form { display: none; }
.visible-form { display: block; animation: slideUp 0.4s; }
@keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.welcome-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(5px); z-index: 200; 
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: all 0.5s ease;
}
.welcome-overlay.active { opacity: 1; pointer-events: all; }

/* 1. الصورة المتزحلقة من اليسار لليمين */
.sliding-character {
    position: fixed;
    bottom: 80px; 
    left: -200px; 
    height: 120px; 
    z-index: 34;
    pointer-events: none; 
    transition: left 8s linear; 
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
}
.sliding-visible {
    left: calc(100vw + 200px); 
}

/* 2. الصور الثابتة في أسفل اليسار */
.fixed-left-character {
    position: fixed;
    bottom: 80px; 
    left: 20px; 
    height: 120px; 
    z-index: 35;
    pointer-events: none; 
    opacity: 0; 
    transition: opacity 0.8s ease-in-out; 
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
}
.fixed-left-visible {
    opacity: 1; 
}

/* تأثيرات عامة */
#hero-quote-text { transition: opacity 0.5s ease-in-out; }
.fade-out { opacity: 0; }
.course-card { transition: transform 0.2s; cursor: pointer; }
.course-card:active { transform: scale(0.97); }
.shake-horizontal { animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; }
@keyframes shake-horizontal { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70% { transform: translateX(-10px); } 20%, 40%, 60%, 80% { transform: translateX(10px); } }

/* تأثير الخلفية المتدرجة المتحركة للسلايدر */
.animated-gradient-bg {
    background: linear-gradient(-45deg, #4f46e5, #9333ea, #ec4899, #06b6d4);
    background-size: 400% 400%;
    animation: gradientBG 12s ease infinite;
}
@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}