body {

}

#AccOuterHeaderPanel {
    height: 64px;
    z-index: 9999;
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
}

[data-bs-theme="dark"] {
    scrollbar-color: #444 #222;
}


.xcard {
    background-color: var(--bs-body-bg);
    
    transition: background-color 0.3s ease, border-color 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05) !important;
}

[data-bs-theme="light"] .xcard {
    background-color: #F8F9FA;
}

/* في الوضع الداكن (Dark Mode) */
[data-bs-theme="dark"] .xcard {
    background-color: var(--bs-secondary-bg);
    background-color: #31363C;
  
    /* حدود واضحة عشان تفصل الكارت عن الخلفية */
    border-color: var(--bs-border-color);
    /* في الدارك مود بنلغي الحدود السوداء الصريحة ونخليها أغمق بسيط */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3) !important;
}

    /* تحسين إضافي (اختياري) عشان الكارت يبقى عليه ظل خفيف في الدارك مود */
    [data-bs-theme="dark"] .xcard.shadow-sm {
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.4) !important;
    }

[data-bs-theme="dark"] #AccOuterHeaderPanel {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5) !important;
    border-bottom: 1px solid #333 !important;
}
[data-bs-theme="dark"] .table {
    --bs-table-border-color: #444; /* لون حدود أغمق قليلاً للدارك مود */
}
[data-bs-theme="dark"] .table-hover {
    --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
}


#AccContentPanel {
    margin-top: 64px;
}

#alertpanelparent {
    position: fixed;
    top: 0px;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 999999;
    height: auto;
}

#alertpanel {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    transition: all .15s ease;
    height: auto;
}

    #alertpanel > div {
        width: 100%;
        min-height: 42px;
        color: white;
        display: flex;
        transition: all .15s ease;
    }

        #alertpanel > div > span {
            flex: 1;
            height: 100%;
            line-height: 40px;
            text-align: center;
            text-shadow: 0 0 1px #666;
            font-weight: bold;
            font-size: 18px;
            cursor: pointer;
        }

        #alertpanel > div > a {
            display: block;
            width: 40px;
            height: 40px;
            padding: 4px;
            line-height: 40px;
            font-weight: bold;
            text-align: center;
            cursor: pointer;
            /* background-image: url('https://www.jumia.com.eg/assets_he/images/i-icons.e70b7734.svg#close')*/
            background-image: url('/images/res/svg/close.svg');
            background-size: 32px 32px;
            background-repeat: no-repeat;
            background-position: center;
        }


.side-nav {
    height: 100%;
    width: 280px;
    max-width: 100vw;
    position: fixed;
    z-index: 9999;
    top: 0;
    /* التعديل الجوهري هنا */
    inset-inline-start: -280px; /* يعمل كـ left في LTR و right في RTL تلقائياً */
    background: #212529;
    transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
}

    .side-nav.active {
        inset-inline-start: 0;
        opacity: 1;
    }

 
.navbar-nav .nav-link {
    text-align: start;  
    justify-content: flex-start;
}

.orderst {
    min-width: 130px ;
    min-width : 165px
}

#overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9998;
}


.round-start {
    border-start-start-radius: 0.375rem !important;
    border-end-start-radius: 0.375rem !important;
    border-start-end-radius: 0 !important;
    border-end-end-radius: 0 !important;
}

.round-end {
    border-start-end-radius: 0.375rem !important;
    border-end-end-radius: 0.375rem !important;
    border-start-start-radius: 0 !important;
    border-end-start-radius: 0 !important;
}





/* هذا يجعل الـ input-group متناظر تماماً في الجهتين */
.input-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
}

/* لضمان أن العناصر لا تلتصق ببعضها في الموبايل */
.col-12 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

#deptListGroup {
   padding:0 !important
}


@media (max-width: 600px) {

    .servmain {
        flex-direction:column;
    }

    .dept-col-wrapper {
        width: 100% !important;
        min-width: 100% !important;
    }

    /* جعل حاوية الأقسام في الموبايل شريطاً أفقياً */
    #deptListGroup {
        flex-direction: row !important;
        overflow-x: auto;
        white-space: nowrap;
        width: 100vw; /* عرض الشاشة بالكامل */
    }

        /* ضمان عرض مناسب للكروت في الموبايل */
        #deptListGroup .card {
            flex: 0 0 auto; /* منع الكروت من الانضغاط */
        }

    /* جعل منطقة الخدمات تأخذ طولاً ثابتاً وتسمح بالسكرول (إذا لزم الأمر) */
    #categoriesContainer {
        overflow-y: auto;
    }
}