/* ============================================ */
/* mobile.css - تحسينات إضافية للجوال           */
/* المتوافقة مع تصميم الأزرار الزرقاء الداكنة   */
/* ============================================ */

/* تحسين المسافات والهوامش للهواتف الصغيرة جداً */
@media (max-width: 420px) {
    .headword {
        font-size: 1.1rem !important;
    }
    .card-header {
        padding: 12px 15px !important;
    }
    .entry-body {
        padding: 12px 15px !important;
        font-size: 0.9rem !important;
    }
    .section-title {
        font-size: 0.9rem !important;
    }
    .definition-box {
        font-size: 0.85rem !important;
        padding: 10px 12px !important;
    }
    
    /* بطاقات الإحصائيات */
    .stat-card {
        padding: 6px 10px !important;
        min-width: 55px !important;
    }
    .stat-number {
        font-size: 1rem !important;
    }
    .stat-label {
        font-size: 0.5rem !important;
    }
    
    /* الشعار */
    .site-logo {
        max-width: 110px !important;
    }
    
    /* مربع البحث */
    .smart-search-input {
        font-size: 0.75rem !important;
        padding: 8px 12px !important;
    }
    .search-btn {
        font-size: 0.7rem !important;
        padding: 8px !important;
    }
    
    /* ===== أزرار القوائم (الفلاتر) في الجوال ===== */
    .filter-select {
        padding: 8px 12px !important;
        font-size: 0.75rem !important;
        min-width: 100% !important; /* تأخذ عرض كامل الشاشة */
        width: 100% !important;
        background: linear-gradient(135deg, #0f2b4a, #1a4a7a) !important; /* نفس لون البانر */
        color: #ffffff !important;
    }
    .filter-select option {
        background: #ffffff !important;
        color: #1a2a3a !important;
    }
    
    /* شريط التنقل */
    .navbar-logo {
        font-size: 1.1rem !important;
    }
    .navbar-links a {
        font-size: 0.75rem !important;
        padding: 5px 12px !important;
    }
    .pos-badge {
        font-size: 0.65rem !important;
        padding: 3px 12px !important;
    }
}

/* تحسين أزرار الوسائط المتعددة على الجوال */
@media (max-width: 768px) {
    .media-row {
        flex-direction: column !important;
        align-items: center !important;
    }
    .media-item {
        width: 100% !important;
        max-width: 100% !important;
        min-width: auto !important;
    }
    .media-thumb {
        max-height: 180px !important;
    }
    .local-video {
        max-width: 100% !important;
    }
    .video-thumb {
        min-height: 150px !important;
    }
    .play-icon {
        width: 45px !important;
        height: 45px !important;
        font-size: 1.3rem !important;
    }
    
    /* تحسينات لتطبيقات المساعدة (إن وجدت) */
    .translator-card .search-form,
    .spell-card .search-form {
        flex-direction: column !important;
    }
    .translator-card .search-form button,
    .spell-card .search-form button {
        width: 100% !important;
    }
}

/* تحسين القوائم المنسدلة الخاصة بالمصطلحات */
@media (max-width: 768px) {
    .terms-dropdown {
        font-size: 0.85rem !important;
        padding: 12px 16px !important;
    }
}

/* تحسين عرض نافذة المساعد الذكي على الجوال الصغير جداً */
@media (max-width: 400px) {
    .welcome-popup {
        width: 92% !important;
        left: 4% !important;
        bottom: 70px !important;
    }
    .welcome-popup .content {
        font-size: 0.8rem !important;
        padding: 10px !important;
        max-height: 280px !important;
    }
    .welcome-popup .header {
        padding: 10px 14px !important;
        font-size: 0.9rem !important;
    }
    .robot-avatar {
        width: 42px !important;
        height: 42px !important;
    }
    .robot-container {
        bottom: 15px !important;
        left: 15px !important;
    }
}

/* تحسين الإطارات والحدود على الشاشات المتوسطة (تابلت) */
@media (min-width: 401px) and (max-width: 768px) {
    .search-header {
        padding: 20px !important;
    }
    .stat-card {
        padding: 10px 18px !important;
        min-width: 80px !important;
    }
    .stat-number {
        font-size: 1.4rem !important;
    }
    
    /* أزرار الفلاتر في التابلت */
    .filter-select {
        min-width: 120px !important;
        padding: 10px 16px !important;
        background: linear-gradient(135deg, #0f2b4a, #1a4a7a) !important;
        color: #ffffff !important;
    }
    .filter-select option {
        background: #ffffff !important;
        color: #1a2a3a !important;
    }
}

/* تحسين عرض الأزرار الصوتية والترجمة على الجوال */
@media (max-width: 480px) {
    .speak-btn {
        padding: 6px 18px !important;
        font-size: 0.75rem !important;
    }
    .translation-result {
        padding: 10px !important;
    }
    .translation-text {
        font-size: 0.9rem !important;
        padding: 8px !important;
    }
    .related-word {
        font-size: 0.75rem !important;
        padding: 4px 10px !important;
    }
    .colloc-tag {
        font-size: 0.7rem !important;
        padding: 3px 10px !important;
    }
    .usage-badge {
        font-size: 0.7rem !important;
        padding: 3px 10px !important;
    }
}

/* تحسين خاص لعنوان شريط التنقل على الشاشات الصغيرة */
@media (max-width: 480px) {
    .navbar {
        padding: 10px 15px !important;
        border-radius: 40px !important;
    }
    .navbar-links {
        gap: 5px !important;
    }
    
    /* التأكد من أن أزرار الفلاتر في أصغر حجم تظهر بشكل مثالي */
    .filter-bar {
        gap: 8px !important;
    }
    .filter-select {
        width: 100% !important;
        min-width: unset !important;
        font-size: 0.8rem !important;
        padding: 10px 14px !important;
        background: linear-gradient(135deg, #0f2b4a, #1a4a7a) !important;
        color: #ffffff !important;
        border-radius: 60px !important;
    }
}