body {
    font-family: 'Tajawal', sans-serif;
    margin: 0;
    padding: 0;
}
header {
    background-color: #007bff;
    padding: 10px 20px;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
}
header .site-name {
    font-size: 1.5rem;
    font-weight: bold;
}
.header-controls .btn {
    margin-left: 10px;
}
.sidebar {
    background-color: #333;
    color: white;
    padding: 20px 0;
    position: fixed;
    height: 100%;
    width: 250px;
    transform: translateX(-100%);
    transition: transform 0.3s;
}
.sidebar.active {
    transform: translateX(0);
}
.sidebar a {
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    display: block;
}
.sidebar a:hover {
    background-color: #444;
}
.menu-toggle {
    font-size: 24px;
    cursor: pointer;
}
.main-content {
    margin-left: 250px;
    padding: 20px;
}
@media (max-width: 768px) {
    .sidebar {
        width: 200px;
    }
    .main-content {
        margin-left: 0;
    }
}
.header-controls {
display: flex;
align-items: center;
}

.navbar-menu {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}

.navbar-menu li {
margin: 0 10px;
position: relative;
}

.navbar-menu li a {
text-decoration: none;
color: white;
font-size: 16px;
padding: 5px 10px;
transition: color 0.3s ease;
}

.navbar-menu li a:hover {
color: #ffce44;
}

.notification-box {
display: none;
position: absolute;
top: 30px;
right: 0;
background: white;
color: black;
width: 250px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 5px;
z-index: 1000;
padding: 10px;
}

.notification-box h3 {
margin: 0;
padding-bottom: 10px;
border-bottom: 1px solid #ddd;
font-size: 16px;
}

.notification-box ul {
list-style: none;
padding: 0;
margin: 0;
}

.notification-box ul li {
padding: 5px 0;
font-size: 14px;
border-bottom: 1px solid #eee;
}

.notification-box ul li:last-child {
border-bottom: none;
}

/* لإظهار صندوق الإشعارات عند التحويم */
.dropdown:hover .notification-box {
display: block;
}
.sidebar {
background-color: #333;
color: white;
padding: 20px 0;
position: fixed; /* اجعل القائمة ثابتة */
height: 100%;
width: 250px;
top: 0;
left: 0;
transform: translateX(-100%); /* تبدأ خارج الشاشة */
transition: transform 0.3s ease; /* انتقال سلس عند الفتح */
z-index: 1000; /* اجعل القائمة فوق المحتوى */
}

.sidebar.active {
transform: translateX(0); /* ادخل القائمة إلى الشاشة */
}

.main-content {
padding: 20px;
transition: opacity 0.3s ease; /* تأثير خفيف عند الفتح */
}

.sidebar.active ~ .main-content {
opacity: 0.5; /* تقليل وضوح المحتوى عندما تكون القائمة مفتوحة */
pointer-events: none; /* تعطيل التفاعل مع المحتوى */
}

@media (max-width: 768px) {
.sidebar {
width: 200px; /* عرض أصغر للشاشات الصغيرة */
}
}

body {
font-family: 'Tajawal', sans-serif;
margin: 0;
padding: 0;
}

/* تصميم الهيدر */
header {
background-color: #007bff;
padding: 10px 20px;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
z-index: 1000;
}

/* اسم الموقع داخل الهيدر */
header .site-name {
font-size: 1.5rem;
font-weight: bold;
}

.header-controls .btn {
margin-left: 10px;
}

/* تصميم قائمة التنقل (Navbar) داخل الهيدر */
.navbar-menu {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}

.navbar-menu li {
margin: 0 10px;
position: relative;
}

.navbar-menu li a {
text-decoration: none;
color: white;
font-size: 16px;
padding: 5px 10px;
transition: color 0.3s ease;
}

.navbar-menu li a:hover {
color: #ffce44;
}

/* تصميم القائمة الجانبية */
.sidebar {
background-color: #333;
color: white;
padding: 20px 0;
position: fixed;
top: 70px; /* تحديد المسافة أسفل الهيدر */
left: 0;
height: 100%;
width: 250px;
transform: translateX(-100%); /* تبدأ القائمة مخفية خارج الشاشة */
transition: transform 0.3s ease;
z-index: 1000; /* جعل القائمة فوق المحتوى */
}

/* عند تفعيل القائمة الجانبية (عند النقر على زر القائمة) */
.sidebar.active {
transform: translateX(0); /* عرض القائمة */
}

/* روابط القائمة الجانبية */
.sidebar a {
color: white;
text-decoration: none;
padding: 10px 20px;
display: block;
}

/* تأثير التمرير على روابط القائمة الجانبية */
.sidebar a:hover {
background-color: #444;
}

/* تصميم زر القائمة (أي الأيقونة) */
.menu-toggle {
font-size: 24px;
cursor: pointer;
}

/* المحتوى الرئيسي */
.main-content {
margin-left: 250px; /* المسافة على يسار المحتوى لتفادي تداخل القائمة */
padding: 20px;
}

/* تأثيرات استجابة القوائم عند الشاشات الصغيرة */
@media (max-width: 768px) {
.sidebar {
width: 200px; /* عرض القائمة الجانبية على الشاشات الصغيرة */
}

.main-content {
margin-left: 0; /* إزالة المسافة عند عرض القائمة */
}
}
/* تنسيق الحاويات العامة */
.container {
margin: 30px auto;
max-width: 1200px;
padding: 0 15px;
}

/* تنسيق الأقسام */
.options, .order-list {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 40px;
}

/* تنسيق صندوق الخيارات */
.option-box {
flex: 1;
min-width: 250px;
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 8px;
padding: 20px;
text-align: center;
}

.option-box h3 {
font-size: 20px;
margin-bottom: 15px;
}

/* الأزرار */
.btn {
display: inline-block;
padding: 10px 20px;
background-color: #0056b3;
color: white;
text-decoration: none;
border-radius: 5px;
margin-top: 10px;
font-size: 16px;
}

.btn:hover {
background-color: #0056b3;
}

/* تنسيق قائمة الطلبات */
.orders-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}

/* تصميم بطاقة الطلب */
.order-card {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 8px;
padding: 15px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.order-card p {
margin: 8px 0;
}

/* الرسالة الإضافية */
.status-message {
background-color: #f8f9fa;
padding: 10px;
border-radius: 5px;
margin-bottom: 15px;
}

/* تفاصيل إضافية */
.more-details {
display: none;
margin-top: 15px;
background-color: #f9f9f9;
padding: 15px;
border-radius: 8px;
}

.show-details:focus + .more-details,
.show-details:hover + .more-details {
display: block;
}

/* تصميم صورة المنتج */
.product-img {
max-width: 100px;
height: auto;
border-radius: 8px;
}
.notification-box {
display: none;
position: absolute;
top: 40px;
right: 0;
background: white;
color: black;
width: 300px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 5px;
z-index: 1000;
padding: 15px;
}

.notification-box h3 {
margin: 0;
padding-bottom: 10px;
border-bottom: 1px solid #ddd;
font-size: 18px;
}

.notification-box ul {
list-style: none;
padding: 0;
margin: 0;
}

.notification-box ul li {
padding: 10px 0;
font-size: 14px;
border-bottom: 1px solid #eee;
}

.notification-box ul li:last-child {
border-bottom: none;
}

.dropdown:hover .notification-box {
display: block;
}
    /* مثال على تنسيق الـ Sidebar */
    .sidebar {
        width: 250px;
        height: 100%;
        background-color: #333;
        position: fixed;
        left: -250px;
        transition: all 0.3s ease;
    }
    .sidebar.active {
        left: 0;
    }
    .sidebar a {
        display: block;
        padding: 15px;
        color: white;
        text-decoration: none;
        font-size: 18px;
        transition: background 0.3s;
    }
    .sidebar a:hover {
        background-color: #575757;
    }