/* 1. استيراد الخط العربي */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap');

/* 2. إعدادات عامة */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body { 
    font-family: 'Tajawal', sans-serif; 
    background-color: #1a252f; /* الخلفية الداكنة الفخمة */
    color: #333;
    line-height: 1.6;
}

/* 3. الرأس (Header) */
header { 
    background: #2c3e50; 
    color: white; 
    text-align: center; 
    padding: 60px 20px;
    border-bottom: 4px solid #3498db;
}

header h1 { font-size: 2.5rem; margin-bottom: 10px; }
header p { font-size: 1.2rem; opacity: 0.9; }

/* 4. الحاويات (Containers) */
.container, .quiz-wrapper { 
    max-width: 1200px; 
    margin: 40px auto; 
    padding: 0 20px; 
    min-height: 60vh;
}

/* 5. أزرار التحكم واللغة (موحدة) */
.top-bar, .quiz-controls {
    max-width: 1200px;
    margin: 0 auto 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lang-btn, .control-btn, .filter-btn { 
    background: #34495e; 
    color: white; 
    border: 2px solid #ffffff33; 
    padding: 10px 20px; 
    border-radius: 10px; 
    cursor: pointer; 
    font-family: 'Tajawal';
    font-weight: bold;
    transition: all 0.3s ease;
    text-decoration: none;
}

.lang-btn:hover, .control-btn:hover, .filter-btn:hover {
    background: #3d5a7a;
    border-color: #3498db;
}

.filter-btn.active {
    background: #3498db;
    border-color: white;
}

/* 6. شبكة الإشارات والبطاقات (الرئيسية) */
.filter-container { 
    display: flex; 
    justify-content: center; 
    gap: 10px; 
    margin-bottom: 40px; 
    flex-wrap: wrap; 
}

.signs-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 30px; 
}

.sign-card { 
    background: white; 
    border-radius: 20px; 
    overflow: hidden; 
    box-shadow: 0 15px 35px rgba(0,0,0,0.3); 
    transition: transform 0.3s ease;
    text-align: center;
}

.sign-card:hover { transform: translateY(-10px); }

.image-box { 
    background: #f8f9fa; 
    padding: 30px; 
    border-bottom: 1px solid #eee;
}

.image-box img { height: 150px; max-width: 100%; object-fit: contain; }
.sign-info { padding: 25px; }
.sign-info h3 { color: #2c3e50; margin-bottom: 10px; font-size: 1.4rem; }

/* 7. صندوق الفحص (Quiz Page) */
.game-container { 
    background: white; 
    padding: 50px 80px; 
    border-radius: 30px; 
    box-shadow: 0 20px 60px rgba(0,0,0,0.4); 
    text-align: center;
}

.stats { 
    display: flex; 
    justify-content: space-between; 
    font-size: 1.8rem; 
    font-weight: bold; 
    margin-bottom: 20px; 
    color: #2c3e50;
}

.progress-bar-container { 
    width: 100%; height: 15px; background: #ecf0f1; 
    border-radius: 10px; overflow: hidden; margin-bottom: 40px; 
}

#progress-bar { 
    width: 100%; height: 100%; 
    background: linear-gradient(90deg, #e74c3c, #f1c40f, #2ecc71); 
    transition: width 1s linear; 
}

#sign-image { height: 280px; max-width: 100%; object-fit: contain; margin-bottom: 30px; }

.options { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 20px; 
}

.btn-option { 
    padding: 25px; 
    border: 3px solid #3498db; 
    background: white !important; 
    border-radius: 15px; 
    cursor: pointer; 
    font-size: 1.3rem; 
    font-weight: bold; 
    font-family: 'Tajawal';
    transition: all 0.2s;
}

/* 8. حالات الإجابة (الألوان) */
.correct { 
    background-color: #2ecc71 !important; 
    color: white !important; 
    border-color: #27ae60 !important; 
}

.wrong { 
    background-color: #e74c3c !important; 
    color: white !important; 
    border-color: #c0392b !important; 
}

/* 9. التذييل الحكومي (Footer) */
.site-footer { 
    background-color: #f3f2f1; 
    color: #0b0c0c; 
    padding: 40px 20px; 
    text-align: center; 
    border-top: 5px solid #1d70b8; 
    margin-top: 80px;
}

.site-footer a { color: #1d70b8; text-decoration: underline; font-weight: bold; }
.copyright-text { margin-top: 15px; font-weight: bold; color: #505a5f; }

/* 10. أزرار خاصة */
.btn-start-quiz, .btn-restart { 
    display: inline-block; 
    margin-top: 25px; 
    padding: 15px 40px; 
    background: #27ae60; 
    color: white; 
    text-decoration: none; 
    border-radius: 50px; 
    font-weight: bold; 
    border: none;
    cursor: pointer;
}

.back-link { color: white; text-decoration: none; font-weight: bold; }

/* 11. التجاوب مع الشاشات الصغيرة */
@media (max-width: 768px) {
    .options { grid-template-columns: 1fr; }
    .game-container { padding: 30px 20px; }
    #sign-image { height: 180px; }
    header h1 { font-size: 1.8rem; }
}

.hidden { display: none; }

.privacy-link {
    display: inline-block;
    padding: 8px 15px;
    background-color: #34495e; /* نفس لون أزرار التحكم */
    color: white !important; /* لضمان ظهور اللون الأبيض */
    text-decoration: none;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: bold;
    transition: background 0.3s ease;
    border: 1px solid #ffffff33;
}

.privacy-link:hover {
    background-color: #1d70b8; /* يتغير للون الأزرق عند تمرير الماوس */
    text-decoration: none;
}

/* Start Screen Styles */
.start-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: #1a252f;
    color: #ecf0f1;
    padding: 20px;
}

.start-screen h2 {
    margin-bottom: 30px;
    font-size: 2rem;
    text-align: center;
}

.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.quiz-option-btn {
    padding: 15px 30px;
    font-size: 1.2rem;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.quiz-option-btn:hover {
    background-color: #2980b9;
}

[dir="rtl"] .quiz-option-btn {
    font-family: 'Tajawal', sans-serif;
}

.hidden {
    display: none !important;
}

/* Quiz Styles */
.quiz-container {
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
    max-width: 800px;
    margin: 0 auto;
}

.quiz-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.score-timer {
    display: flex;
    gap: 20px;
    font-size: 1.2rem;
    font-weight: bold;
    color: #2c3e50;
}

.progress-bar {
    width: 100%;
    height: 10px;
    background: #ecf0f1;
    border-radius: 5px;
    overflow: hidden;
    margin-top: 20px;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #e74c3c, #f1c40f, #2ecc71);
    width: 0%;
    transition: width 0.5s ease;
}

.question-container {
    text-align: center;
}

.question-container img {
    height: 200px;
    max-width: 100%;
    object-fit: contain;
    margin-bottom: 20px;
}

.question-container h2 {
    margin-bottom: 30px;
    color: #2c3e50;
}

.options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

.option-btn {
    padding: 15px;
    border: 2px solid #3498db;
    background: white;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    font-family: 'Tajawal';
    transition: all 0.3s ease;
    text-align: center;
}

.option-btn:hover:not(:disabled) {
    background: #f8f9fa;
}

.option-btn:disabled {
    cursor: not-allowed;
}

.option-btn.correct {
    background-color: #2ecc71 !important;
    color: white !important;
    border-color: #27ae60 !important;
}

.option-btn.wrong {
    background-color: #e74c3c !important;
    color: white !important;
    border-color: #c0392b !important;
}

.results-container {
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.results-container h2 {
    color: #2c3e50;
    margin-bottom: 20px;
}

.results-container p {
    font-size: 1.5rem;
    margin-bottom: 30px;
    color: #34495e;
}

.btn-restart, .btn-home {
    display: inline-block;
    margin: 10px;
    padding: 15px 30px;
    background: #3498db;
    color: white;
    text-decoration: none;
    border-radius: 10px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease;
}

.btn-restart:hover, .btn-home:hover {
    background: #2980b9;
}

.quiz-options {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.quiz-options .option-btn {
    background: #3498db;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    transition: background 0.3s ease;
}

.quiz-options .option-btn:hover {
    background: #2980b9;
}

/* Responsive */
@media (max-width: 768px) {
    .options {
        grid-template-columns: 1fr;
    }
    .quiz-container, .results-container {
        padding: 20px;
    }
    .question-container img {
        height: 150px;
    }
    .score-timer {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }
    .quiz-options {
        flex-direction: column;
        align-items: center;
    }
}