@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&family=Roboto:wght@400;500;700&display=swap');

:root {
    --primary: #0f172a;       /* كحلي غامق */
    --primary-light: #1e293b; 
    --accent: #0ea5e9;        /* سماوي */
    --accent-hover: #0284c7;
    --gold: #f59e0b;
    --text: #334155;
    --text-light: #64748b;
    --bg: #f8fafc;
    --white: #ffffff;
    --shadow: 0 10px 30px -10px rgba(0,0,0,0.1);
}

body { margin:0; font-family:'Tajawal', sans-serif; background:var(--bg); color:var(--text); line-height:1.6; overflow-x:hidden; }
html[dir="ltr"] body { font-family:'Roboto', sans-serif; }

a { text-decoration:none; color:inherit; transition:0.3s; }
ul { list-style:none; padding:0; margin:0; }

/* --- Header Professional Layout --- */
.header {
    background: #ffffff;
    height: 80px; /* ارتفاع ثابت للهيدر */
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 15px rgba(0,0,0,0.04); /* ظل ناعم جداً */
    border-bottom: 1px solid #f1f5f9;
}

.header-inner {
    display: flex;
    justify-content: space-between; /* أقصى اليمين وأقصى اليسار */
    align-items: center;
    width: 100%;
}

/* --- الجهة اليمنى: الشعار + الروابط --- */
.nav-start {
    display: flex;
    align-items: center;
    gap: 40px; /* مسافة كبيرة بين الشعار والروابط */
}

.logo img {
    width: 50px;
    height: 50px;
    border-radius: 50%; /* دائري */
    object-fit: cover;
    border: 1px solid #eee; /* إطار خفيف */
    display: block;
    transition: transform 0.3s ease;
}
.logo img:hover { transform: scale(1.05); }

.nav-links {
    display: flex;
    gap: 25px; /* مسافة بين الروابط */
    font-weight: 600; /* خط متوسط السمك */
    font-size: 0.95rem;
}

.nav-links a {
    color: #475569; /* لون رمادي غامق احترافي */
    text-decoration: none;
    transition: 0.3s;
    padding: 5px 0;
    position: relative;
}

.nav-links a:hover, .nav-links a.active {
    color: var(--accent); /* اللون الأزرق عند التحويم */
}

/* --- الجهة اليسرى: الأزرار --- */
.nav-end {
    display: flex;
    align-items: center;
    gap: 15px; /* مسافة بين الأزرار */
}

/* زر اللغة */
.lang-switch {
    font-size: 0.9rem;
    font-weight: bold;
    color: #64748b;
    border: 1px solid #e2e8f0;
    padding: 8px 14px;
    border-radius: 8px;
    transition: 0.3s;
}
.lang-switch:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* زر دخول (Outline - مفرغ) */
.btn-login {
    color: var(--accent);
    font-weight: bold;
    padding: 10px 20px;
    border: 1px solid transparent; /* بدون حدود في العادة */
    border-radius: 8px;
    transition: 0.3s;
}
.btn-login:hover {
    background-color: #f0f9ff;
    color: var(--accent-hover);
}

/* زر إنشاء حساب (Solid - ممتلئ) */
.btn-register {
    background-color: var(--accent);
    color: #ffffff !important; /* النص أبيض دائماً */
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(14, 165, 233, 0.2); /* ظل أزرق خفيف */
    transition: 0.3s;
    border: 1px solid var(--accent);
}
.btn-register:hover {
    background-color: var(--primary); /* يغمق قليلاً عند التحويم */
    border-color: var(--primary);
    transform: translateY(-1px);
}


/* --- Buttons --- */
.btn { padding:12px 28px; border-radius:12px; border:none; cursor:pointer; font-weight:bold; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition: all 0.3s ease; font-size: 1rem; }
.btn-primary { 
    background: linear-gradient(135deg, var(--accent) 0%, #0284c7 100%); 
    color: white; 
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(14, 165, 233, 0.4); }

/* --- Hero & Page Header Unified --- */
.hero, .page-header {
    position: relative;
    color: white;
    text-align: center;
    /* هذا هو السطر المسؤول عن اللون الموحد */
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.85) 100%), url('../uploads/images/hero_bg.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    border-radius: 0 0 50px 50px;
}

/* تنسيق خاص للرئيسية (أكبر قليلاً) */
.hero { padding: 160px 20px 100px; }
.hero h1 { font-size: 3.5rem; font-weight: 800; margin-bottom: 20px; }

/* تنسيق الصفحات الفرعية (أصغر قليلاً) */
.page-header { padding: 100px 20px 80px; margin-bottom: 50px; }
.page-header h1 { font-size: 2.8rem; font-weight: 800; margin-bottom: 10px; }


/* --- Sections --- */
.container { max-width:1200px; margin:0 auto; padding:0 20px; }
.section-title { text-align: center; margin-bottom: 50px; font-size: 2.2rem; color: var(--primary); font-weight: 800; position: relative; }
.section-title::after { content:''; display:block; width:60px; height:4px; background:var(--accent); margin:15px auto 0; border-radius:2px; }

/* --- Cards --- */
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:30px; margin-bottom:60px; }
.card { 
    background: var(--white); 
    padding: 30px; 
    border-radius: 20px; 
    border: 1px solid #f1f5f9;
    box-shadow: var(--shadow); 
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    position: relative;
    overflow: hidden;
}
.card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); border-color: var(--accent); }

/* --- Feature Icon --- */
.feat-icon { width: 70px; height: 70px; background: #e0f2fe; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.feat-icon img { width: 35px; }

/* --- Image & Text Section (CTA) --- */
.cta-section { display: flex; align-items: center; gap: 50px; margin: 100px 0; flex-wrap: wrap; }
.cta-content { flex: 1; }
.cta-image { flex: 1; position: relative; }
.cta-image img { width: 100%; border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.15); transform: rotate(2deg); transition:0.3s; }
.cta-image:hover img { transform: rotate(0); }

/* --- Footer --- */
footer { background:var(--primary); color:white; text-align:center; padding:50px 20px; margin-top:80px; }
footer a:hover { color: var(--accent); text-decoration: underline; }

/* Responsive */
@media (max-width: 768px) {
    .hero h1 { font-size: 2.2rem; }
    .nav { display: none; } /* يحتاج لزر قائمة في المستقبل */
}
/* --- تنسيقات الصفحات الداخلية (Page Headers) --- */
.page-header {
    background: var(--primary);
    color: white;
    padding: 80px 20px 60px; /* مساحة علوية وسفلية */
    text-align: center;
    border-radius: 0 0 40px 40px; /* انحناء من الأسفل فقط */
    margin-bottom: 50px;
    background-image: linear-gradient(rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.8)), url('../uploads/images/hero_bg.jpg');
    background-size: cover;
    background-position: center;
}
.page-header h1 { font-size: 2.8rem; margin: 0; font-weight: 800; }
.page-header p { font-size: 1.1rem; opacity: 0.8; margin-top: 10px; max-width: 600px; margin-left: auto; margin-right: auto; }

/* --- توحيد شكل حقول الإدخال (Forms) --- */
input[type="text"], input[type="email"], input[type="password"], input[type="number"], select, textarea {
    width: 100%;
    padding: 14px 18px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-family: inherit;
    font-size: 1rem;
    background: #f8fafc;
    transition: 0.3s;
    box-sizing: border-box; /* مهم جداً لضبط العرض */
}
input:focus, select:focus, textarea:focus {
    border-color: var(--accent);
    background: white;
    outline: none;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.15);
}

/* --- تحسين شكل الفلاتر (في صفحة الكورسات) --- */
.filter-btn {
    padding: 10px 25px;
    border-radius: 30px;
    border: 1px solid #e2e8f0;
    background: white;
    color: var(--text-light);
    cursor: pointer;
    font-weight: bold;
    transition: 0.3s;
}
.filter-btn:hover, .filter-btn.active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(14, 165, 233, 0.3);
}
/* --- 1. توحيد الخلفية والانيميشن (الهوية البصرية) --- */
/* هذا الكلاس سيستخدم في الرئيسية، الصفحات الفرعية، والادمن */
.unified-hero {
    position: relative;
    text-align: center;
    color: white;
    /* هذا هو الكود المسؤول عن توحيد اللون 100% */
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%), url('../uploads/images/hero_bg.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* تثبيت الخلفية لتبدو احترافية */
    border-radius: 0 0 50px 50px;
    padding: 140px 20px 80px; /* مسافة موحدة */
    margin-bottom: 50px;
}

/* حركة النصوص (Animation) */
.animate-up {
    animation: fadeInUp 1s ease-out forwards;
    opacity: 0; /* مخفي في البداية */
    transform: translateY(30px);
}

@keyframes fadeInUp {
    to { opacity: 1; transform: translateY(0); }
}

/* --- 2. تنسيقات الأدمن والجداول --- */
.admin-nav {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    padding: 15px 0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    margin-bottom: 0; /* تلصق بالهيرو */
}

table { width: 100%; border-collapse: separate; border-spacing: 0 10px; }
th { text-align: right; color: var(--text-light); padding: 15px; font-size: 0.9rem; }
td { background: white; padding: 15px; }
tr td:first-child { border-radius: 0 10px 10px 0; } /* تدوير الحواف لليمين */
tr td:last-child { border-radius: 10px 0 0 10px; } /* تدوير الحواف لليسار */
tr:hover td { transform: scale(1.01); transition: 0.2s; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }

/* --- تحسينات عامة --- */
.page-title { font-size: 3rem; font-weight: 800; margin-bottom: 15px; }
.page-desc { font-size: 1.2rem; opacity: 0.9; max-width: 600px; margin: 0 auto; }