/**
 * Wide Layout CSS - عرض كامل للشاشة
 * 
 * @package Arbah_Web
 */

/* تطبيق عرض أوسع للـ Container - أعلى أولوية */
.container {
    width: calc(100% - 80px) !important;
    margin-inline: auto !important;
    max-width: 1920px !important;
}

/* للشاشات الكبيرة جداً (Full HD+) */
@media (min-width: 1920px) {
    .container {
        max-width: 1920px !important;
        width: calc(100% - 100px) !important;
    }
}

/* للشاشات الكبيرة (1600px - 1919px) */
@media (min-width: 1600px) and (max-width: 1919px) {
    .container {
        max-width: 1800px !important;
        width: calc(100% - 80px) !important;
    }
}

/* للشاشات المتوسطة (1200px - 1599px) */
@media (min-width: 1200px) and (max-width: 1599px) {
    .container {
        width: calc(100% - 100px) !important;
        max-width: none !important;
    }
}

/* للشاشات الصغيرة - لابتوب (1040px - 1199px) */
@media (min-width: 1040px) and (max-width: 1199px) {
    .container {
        width: calc(100% - 60px) !important;
    }
}

/* للشاشات الصغيرة - تابلت (821px - 1039px) */
@media (min-width: 821px) and (max-width: 1039px) {
    .container {
        width: calc(100% - 50px) !important;
    }
}

/* للتابلت (601px - 820px) */
@media (min-width: 601px) and (max-width: 820px) {
    .container {
        width: calc(100% - 40px) !important;
    }
}

/* للموبايل (أقل من 600px) */
@media (max-width: 600px) {
    .container {
        width: calc(100% - 26px) !important;
        max-width: 100% !important;
    }
}