/* تصميم متجاوب مخصص للموبايلات فقط */
/* شاشات من 320px إلى 768px */

/* تحسينات عامة للموبايل */
* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input, textarea {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

@media screen and (min-width: 320px) and (max-width: 768px) {
    
    /* الكونتينر - عرض كامل بدون حواف جانبية */
    .container {
        width: 100%;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    /* حجم الخط الأساسي للموبايل */
    body {
        font-size: 14px;
        line-height: 1.4;
    }
    
    /* العناوين الرئيسية */
    h1, h2, h3 {
        font-size: 16px;
    }
    
    /* الصور - عرض كامل مع الحفاظ على النسبة */
    img {
        width: 100%;
        height: auto;
        max-width: 100%;
        object-fit: cover;
    }
    
    /* الأزرار - حد أدنى 40px × 40px */
    button, .btn, input[type="submit"], input[type="button"] {
        min-width: 40px;
        min-height: 40px;
        padding: 8px 12px;
        font-size: 14px;
        border-radius: 4px;
        cursor: pointer;
        touch-action: manipulation;
    }
    
    /* تحسينات إضافية للموبايل */
    
    /* النصوص */
    p, span, div {
        font-size: 14px;
    }
    
    /* الروابط */
    a {
        font-size: 14px;
        min-height: 40px;
        display: inline-block;
        padding: 8px;
    }
    
    /* الحقول النصية */
    input[type="text"], input[type="email"], input[type="password"], textarea {
        width: 100%;
        min-height: 40px;
        font-size: 16px; /* منع التكبير التلقائي في iOS */
        padding: 10px;
        box-sizing: border-box;
    }
    
    /* القوائم */
    ul, ol {
        padding-left: 20px;
    }
    
    li {
        font-size: 14px;
        margin-bottom: 5px;
    }
    
    /* تحسينات إضافية للموبايل */
    
    /* منع التمرير الأفقي */
    html, body {
        overflow-x: hidden;
        max-width: 100%;
    }
    
    /* تحسين الجداول للموبايل */
    table {
        width: 100%;
        font-size: 12px;
        border-collapse: collapse;
    }
    
    th, td {
        padding: 8px 4px;
        text-align: left;
    }
    
    /* تحسين النوافذ المنبثقة */
    .modal, .popup {
        width: 95%;
        max-width: 95%;
        margin: 5% auto;
    }
    
    /* تحسين القوائم المنسدلة */
    select {
        width: 100%;
        min-height: 40px;
        font-size: 16px;
        padding: 10px;
    }
    
    /* تحسين الشبكات */
    .grid, .row {
        display: block;
    }
    
    .col, .column {
        width: 100%;
        margin-bottom: 15px;
    }
    
    /* تحسين الكروت */
    .card {
        margin: 10px 5px;
        padding: 15px;
        border-radius: 8px;
    }
    
    /* تحسين الهيدر والفوتر */
    header, footer {
        padding: 10px 15px;
    }
    
    /* تحسين القائمة الجانبية */
    .sidebar {
        width: 100%;
        position: static;
        transform: none;
    }
    
    /* تحسين المحتوى الرئيسي */
    main, .main-content {
        padding: 15px;
        margin: 0;
    }
}

/* شاشات صغيرة جداً (320px - 480px) */
@media screen and (min-width: 320px) and (max-width: 480px) {
    
    /* حجم خط أصغر للشاشات الصغيرة جداً */
    body {
        font-size: 13px;
    }
    
    h1, h2, h3 {
        font-size: 15px;
    }
    
    /* أزرار أكثر إحكاماً */
    button, .btn {
        padding: 6px 10px;
        font-size: 13px;
    }
}

/* شاشات متوسطة (481px - 768px) */
@media screen and (min-width: 481px) and (max-width: 768px) {
    
    /* حجم خط أكبر قليلاً */
    body {
        font-size: 15px;
    }
    
    h1, h2, h3 {
        font-size: 17px;
    }
    
    /* أزرار أكبر قليلاً */
    button, .btn {
        padding: 10px 15px;
        font-size: 15px;
    }
}