/* style.css - DragonMeta Inspired Design (Grainy Dark) */
@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@300;400;500;700&family=Exo:wght@300;400;500;700&display=swap');

:root {
    --primary-color: #667eea;
    --secondary-color: #764ba2;
    --bg-color: #0f172a;
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.08);
    --text-color: #ffffff;
    --text-muted: #94a3b8;
    --success: #2ecc71;
    --danger: #e74c3c;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background-color: #0e0020;
    
    /* خلفية الموقع الرئيسية (نويز + تدرجات) */
    background-image: 
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E"),
        radial-gradient(at 0% 0%, hsla(20, 85%, 15%, 1) 0, transparent 50%), 
        radial-gradient(at 50% 0%, hsla(0, 80%, 10%, 1) 0, transparent 50%), 
        radial-gradient(at 100% 0%, hsla(345, 85%, 15%, 1) 0, transparent 50%);
        
    background-attachment: fixed;
    color: var(--text-color);
    font-family: 'Exo', 'Alexandria', sans-serif;
    overflow-x: hidden;
    min-height: 100vh;
    display: flex; 
    flex-direction: column; /* لضمان أن الفوتر ينزل للأسفل دائماً */
}

html[lang="ar"] body { direction: rtl; }

/* حماية الأيقونات */
.bx, .bxs, .bxl, .far, .fas, .fa { font-family: 'boxicons' !important; }

/* Glassmorphism Panels */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}

.btn-main {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white; border: none; padding: 10px 20px; border-radius: 8px;
    cursor: pointer; transition: 0.3s; font-weight: bold; text-decoration: none;
    display: inline-block; font-family: 'Exo', 'Alexandria', sans-serif;
}
.btn-main:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(118, 75, 162, 0.4); }

/* البحث */
.search-container {
    max-width: 800px; margin: 40px auto; padding: 10px;
    background: rgba(10, 10, 10, 0.6);
    border-radius: 16px;
    border: 1px solid var(--glass-border);
    display: flex; gap: 10px; align-items: center;
    backdrop-filter: blur(10px);
}

.search-input-group { flex-grow: 1; position: relative; }

.search-input-group i {
    position: absolute; top: 50%; transform: translateY(-50%);
    left: 15px; color: var(--text-muted); font-size: 1.2rem;
}
html[lang="ar"] .search-input-group i { left: auto; right: 15px; }

.search-input {
    width: 100%; background: rgba(255,255,255,0.05); border: none;
    padding: 15px 45px; border-radius: 12px; color: white;
    font-family: 'Exo', 'Alexandria', sans-serif; font-size: 1rem;
    transition: 0.3s;
}
.search-input:focus { background: rgba(255,255,255,0.1); outline: none; }

.filter-select {
    background: rgba(255,255,255,0.05); border: none; color: white;
    padding: 15px 20px; border-radius: 12px; cursor: pointer;
    font-family: 'Exo', 'Alexandria', sans-serif;
}
.filter-select option { background: #0f172a; }

@media (max-width: 768px) {
    .search-container { flex-direction: column; }
    .filter-select { width: 100%; }
}

/* الكروت والشبكة */
.courses-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px; padding: 20px 60px;
}



.course-card {
    overflow: hidden; transition: 0.3s; position: relative;
    background: rgba(0,0,0,0.2);
}
.course-card:hover {
    transform: translateY(-5px); 
    border-color: rgba(255,255,255,0.2);
    box-shadow: 0 15px 30px rgba(0,0,0,0.4);
}
.course-img { width: 100%; height: 180px; object-fit: cover; }
.course-content { padding: 20px; }

h1, h2, h3, h4, h5, h6, .course-title { font-family: 'Exo', 'Alexandria', sans-serif; }

.price-tag {
    position: absolute; top: 15px; right: 15px;
    background: rgba(0,0,0,0.8); padding: 5px 10px; border-radius: 8px;
    font-weight: bold; color: var(--success); backdrop-filter: blur(5px);
    font-family: 'Exo', 'Alexandria', sans-serif; border: 1px solid rgba(255,255,255,0.1);
}
html[lang="ar"] .price-tag { right: auto; left: 15px; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.fade-in { animation: fadeIn 0.6s ease-out forwards; }

/* -------------------------------------------------------------------------- */
/* ✅✅ ستايل الفوتر الجديد (Grainy Footer) - موحد لجميع الصفحات */
/* -------------------------------------------------------------------------- */
footer, .main-footer, .simple-footer {
    margin-top: 10px;
    padding: -7px 0px 0px;
    width: 100%;
    background-color: #05050512 !important;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E") !important;
    border-top: 1px solid rgba(255,255,255,0.05);
    position: relative;
    overflow: hidden;
    text-align: center;
    backdrop-filter: blur(40px);
    height: 156px;
}
/* خط مضيء أعلى الفوتر */
footer::before, .main-footer::before, .simple-footer::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
}


/* =========================================
   📱 MOBILE RESPONSIVE FIXES (أكواد تحسين الموبايل)
   ========================================= */

@media (max-width: 768px) {
    
    /* 1. النصوص والعناوين */
    html { font-size: 14px; } /* تصغير الخط الأساسي قليلاً */
    h1, .hero-title, .banner-title { font-size: 1.8rem !important; line-height: 1.3; }
    h2, .page-title { font-size: 1.5rem !important; }
    
    /* 2. الحاويات والمسافات */
    .container { width: 95% !important; padding: 20px 0; }
    .glass-panel { padding: 20px !important; }
    
    /* 3. الناف بار (Navbar) */
    .main-navbar {
        padding: 10px 15px !important;
        gap: 10px;
        border-radius: 0 0 15px 15px; /* إلغاء التدوير من الأعلى لتوفير مساحة */
        width: 100%;
        margin-top: 0;
        top: 0;
    }
    
    .nav-logo img { height: 30px; } /* تصغير اللوجو */
    .nav-logo i { font-size: 1.5rem; }
    
    /* إظهار الأيقونات فقط وإخفاء النصوص في الروابط لتوفير مساحة */
    .nav-link-item span { display: none; }
    .nav-link-item i { font-size: 1.6rem; margin: 0; }
    .nav-link-item { padding: 5px; }
    
    /* زر الخروج والدخول */
    .nav-btn-glow { padding: 6px 15px; font-size: 0.8rem; }
    
    /* زر اللغة */
    .nav-lang-switch { padding: 4px 8px; font-size: 0.75rem; }

    /* 4. البانر والهيرو */
    .banner-wrapper { height: 250px !important; margin-top: 15px; border-radius: 16px; }
    .banner-content { padding: 15px; }
    .banner-badge { font-size: 0.7rem; padding: 3px 10px; }
    .btn-banner { padding: 8px 20px; font-size: 0.9rem; }
    
    /* 5. شبكة الكورسات */
    .courses-grid {
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr)); /* كارت واحد في الصف */
        gap: 20px;
    }
    
    /* 6. تفاصيل الكورس */
    .course-header { height: 25vh; min-height: 200px; margin-bottom: -50px; }
    .meta-badges { gap: 5px; }
    .badge { font-size: 0.8rem; padding: 4px 10px; }
    .price-text { font-size: 1.5rem; }
    
    /* 7. الجداول (في صفحة الأدمن) */
    table { display: block; overflow-x: auto; white-space: nowrap; }
    
    /* 8. النماذج (Forms) */
    input, select, textarea { font-size: 16px !important; } /* يمنع الزووم التلقائي في الآيفون */
    .grid-2, .grid-3 { grid-template-columns: 1fr !important; } /* تحويل الشبكات لعمود واحد */
}

/* للموبايلات الصغيرة جداً (iPhone SE, Fold) */
@media (max-width: 380px) {
    .nav-links-group { gap: 5px; }
    .nav-logo { display: none; } /* إخفاء اللوجو في الشاشات الضيقة جداً للتركيز على الروابط */
}