/* المتغيرات الجديدة */
/*:root {
    --primary-color: #212529;*/ /* لون أساسي: أسود / رمادي داكن */
    /*--secondary-color: #ff8c00;*/ /* لون ثانوي: برتقالي حيوي */
    /*--light-bg-color: #f8f9fa;*/ /* لون الخلفية الفاتح */
    /*--dark-bg-color: white;*/ /* لون الخلفية الداكن */
    /*--text-color-dark: #343a40;*/ /* لون النص الداكن */
    /*--text-color-light: #ffffff;*/ /* لون النص الفاتح */
    /*--link-hover-color: #ffa726;*/ /* لون الروابط عند التمرير */
    /*--border-radius: 8px;
}

body {
    font-family: 'Tajawal', sans-serif;*/ /* تطبيق خط Tajawal */
    /*background-color: var(--light-bg-color);
    color: var(--text-color-dark);
    line-height: 1.6;
}*/

/* Navbar */
/*.Smart Cafee-header {
    background-color: var(--text-color-light);
    border-bottom: 3px solid var(--secondary-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);*/ /* ظل أقوى قليلًا */
    /*padding: 0.75rem 0;*/ /* تقليل الـ padding للنافبار */
/*}

.brand-logo {
    height: 38px;*/ /* حجم أصغر للشعار في النافبار */
    /*width: auto;
}

.brand-text {
    font-size: 1.3rem;*/ /* حجم نص الشعار */
    /*font-weight: 700;
    color: var(--primary-color);
}

.navbar-toggler {
    border-color: rgba(0,0,0,0.1);*/ /* لون حد زر الموبايل */
/*}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");*/ /* أيقونة زر الموبايل */
/*}

.nav-item {
    margin-left: 0.75rem;*/ /* مسافة بين عناصر القائمة */
    /*margin-right: 0.75rem;
}

.nav-link {
    color: var(--text-color-dark);
    font-weight: 500;
    transition: color 0.3s ease, background-color 0.3s ease;
    padding: 0.6rem 0.8rem;*/ /* تعديل الـ padding للروابط */
    /*border-radius: 6px;*/ /* زوايا مستديرة للروابط */
    /*display: flex;
    align-items: center;
    gap: 8px;*/ /* مسافة بين الأيقونة والنص */
/*}

    .nav-link:hover,
    .nav-link.active {
        color: var(--secondary-color);
        background-color: rgba(var(--secondary-color-rgb), 0.1);*/ /* خلفية خفيفة عند التمرير */
    /*}

    .nav-link .nav-icon {
        font-size: 0.95rem;*/ /* حجم الأيقونات في النافبار */
        /*color: var(--primary-color);*/ /* لون افتراضي للأيقونات */
    /*}

    .nav-link:hover .nav-icon,
    .nav-link.active .nav-icon {
        color: var(--secondary-color);*/ /* تغيير لون الأيقونة عند التمرير */
    /*}

.btn-book-now {
    background-color: var(--secondary-color);
    color: var(--text-color-light);
    font-weight: 600;*/ /* وزن خط أثقل */
    /*border-radius: var(--border-radius);
    border: none;
    padding: 0.6rem 1.2rem;*/ /* تعديل الـ padding للزر */
    /*transition: background-color 0.3s ease, transform 0.3s ease;
    font-size: 0.95rem;*/ /* حجم خط الزر */
/*}

    .btn-book-now:hover {
        background-color: var(--link-hover-color);
        transform: translateY(-2px);*/ /* تأثير رفع خفيف */
    /*}

.language-selector .dropdown-toggle {
    font-weight: 500;
    color: var(--text-color-dark);
    border-color: rgba(0,0,0,0.1);
    padding: 0.6rem 0.8rem;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .language-selector .dropdown-toggle:hover {
        background-color: var(--light-bg-color);
    }

.language-selector .nav-icon {
    font-size: 0.95rem;
}*/

/* Footer */
/*.Smart Cafee-footer {
    background-color: var(--primary-color);
    color: rgba(255, 255, 255, 0.8);
    padding: 3.5rem 0 2rem;*/ /* زيادة الـ padding للفوتر */
/*}

.footer-logo {
    height: 55px;*/ /* حجم الشعار في الفوتر */
    /*width: auto;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 12px;*/ /* مسافة أكبر بين الشعار والنص */
/*}

.footer-logo-text {
    color: var(--text-color-light);
    font-size: 1.6rem;*/ /* حجم نص الشعار في الفوتر */
    /*font-weight: 700;
}

.footer-description {
    font-size: 0.9rem;*/ /* حجم أصغر لوصف الفوتر */
    /*line-height: 1.8;
    margin-top: 15px;
}

.footer-title {
    color: var(--secondary-color);
    font-weight: 700;*/ /* وزن خط أثقل */
    /*margin-bottom: 1.5rem;*/ /* مسافة أكبر لعنوان الفوتر */
    /*font-size: 1.25rem;*/ /* حجم أكبر لعنوان الفوتر */
/*}

.footer-links li,
.footer-contact li {
    margin-bottom: 0.9rem;*/ /* مسافة أكبر بين عناصر القائمة */
    /*display: flex;
    align-items: flex-start;*/ /* محاذاة الأيقونات والنص */
    /*gap: 10px;
}

.footer-links a,
.footer-contact span,
.footer-contact i {
    color: rgba(255, 255, 255, 0.75);*/ /* لون أفتح قليلاً للوضوح */
    /*text-decoration: none;
    transition: color 0.3s ease;
    font-size: 0.95rem;*/ /* حجم الخط في الفوتر */
/*}

    .footer-links a:hover {
        color: var(--secondary-color);
    }

.footer-links .footer-icon,
.footer-contact .footer-icon {
    font-size: 0.8rem;*/ /* حجم أيقونات الفوتر */
    /*color: var(--secondary-color);*/ /* لون أيقونات الفوتر بالبرتقالي */
    /*margin-top: 0.2rem;*/ /* ضبط محاذاة الأيقونة مع النص */
/*}

.social-links a {
    background-color: rgba(255, 255, 255, 0.15);*/ /* خلفية أكثر وضوحًا */
    /*color: var(--text-color-light);
    width: 40px;*/ /* حجم أكبر لأيقونات السوشيال ميديا */
    /*height: 40px;
    font-size: 1.1rem;*/ /* حجم الأيقونة نفسها */
    /*border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, color 0.3s ease;
}

    .social-links a:hover {
        background-color: var(--secondary-color);
        color: var(--primary-color);
    }

.download-buttons {
    margin-top: 1rem;
}

.download-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 15px;
    border-radius: var(--border-radius);
    text-decoration: none;
    font-weight: 600;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    font-size: 0.95rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

    .download-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    }

    .download-btn.app-store {
        background: #000;
        color: white;
    }

    .download-btn.google-play {
        background: #fff;
        color: #000;
    }

.footer-divider {
    border-color: rgba(255, 255, 255, 0.2);
    margin: 3rem 0;*/ /* مسافة أكبر للفاصل */
/*}

.footer-bottom {
    font-size: 0.85rem;
}

    .footer-bottom p {
        margin-bottom: 0.5rem;
    }

    .footer-bottom a {
        color: rgba(255, 255, 255, 0.6);
        text-decoration: none;
        transition: color 0.3s ease;
    }

        .footer-bottom a:hover {
            color: var(--secondary-color);
        }*/


/* WhatsApp Button */
/*.whatsapp-float {
    position: fixed;
    width: 58px;*/ /* حجم أكبر قليلاً */
    /*height: 58px;
    bottom: 25px;*/ /* مسافة أكبر من الأسفل واليمين */
    /*right: 25px;
    background-color: #25D366;
    color: white;
    border-radius: 50%;
    text-align: center;
    font-size: 30px;*/ /* حجم أيقونة الواتساب */
    /*box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);*/ /* ظل أوضح */
    /*z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .whatsapp-float:hover {
        transform: scale(1.1);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.35);
        color: white;
    }*/

/* استجابة التصميم للهواتف */

/* إصلاح لون خلفية القائمة المنسدلة في الموبايل */
/* ✅ تعديل نهائي لخلفية القائمة المنسدلة في الموبايل */
/*@media (max-width: 992px) {
    .navbar-collapse {
        background-color: var(--dark-bg-color) !important;*/ /* يستخدم اللون الأبيض من المتغيرات */
        /*padding: 1rem;
        border-radius: var(--border-radius);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        margin-top: 0.5rem;
    }

    .navbar-nav .nav-link {
        color: var(--primary-color) !important;
        font-weight: 600;
        border-radius: 6px;
        padding: 0.75rem 1rem;
    }

        .navbar-nav .nav-link:hover,
        .navbar-nav .nav-link.active {
            background-color: var(--light-bg-color) !important;
            color: var(--secondary-color) !important;
        }
}*/
/* 🔧 تصحيح إجباري لخلفية قائمة الموبايل */
/*@media (max-width: 992px) {
    .navbar-collapse.collapse.show,
    .navbar-collapse.collapsing {
        background-color: #ffffff !important;*/ /* خلفية بيضاء ثابتة */
        /*padding: 1rem !important;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        z-index: 2000 !important;*/ /* يجعلها فوق العناصر الأخرى */
    /*}

    .navbar-nav .nav-link {
        color: #212529 !important;
        font-weight: 600;
    }

        .navbar-nav .nav-link:hover,
        .navbar-nav .nav-link.active {
            background-color: #f8f9fa !important;
            color: #ff8c00 !important;
        }
}*/

/* ✅ تصحيح لون خلفية القائمة المنسدلة في الموبايل */
/*@media (max-width: 992px) {
    .navbar-collapse.collapse.show,
    .navbar-collapse.collapsing {
        background-color: pink !important;*/ /* أبيض شبه شفاف */
        /*padding: 1rem !important;
        border-radius: 12px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        margin-top: 0.5rem;
        z-index: 2000 !important;
    }

    .navbar-nav .nav-link {
        color: #212529 !important;
        font-weight: 600;
    }

        .navbar-nav .nav-link:hover,
        .navbar-nav .nav-link.active {
            background-color: #f8f9fa !important;
            color: #ff8c00 !important;*/ /* برتقالي */
            /*border-radius: 6px;
        }
}*/
/* يستهدف خلفية القائمة المنسدلة في وضع الجوال */
/*.navbar-collapse {*/
    /* تغيير لون الخلفية إلى الأبيض */
    /*background-color: white !important;*/
    /* يمكنك أيضًا استخدام الكود السداسي: */
    /* background-color: #ffffff !important; */
/*}*/

/* إذا لم ينجح الكود أعلاه، قد تحتاج إلى استهداف القائمة نفسها: */
/*
.navbar-collapse .navbar-nav {
    background-color: white !important;
}
*/
/* القائمة الجانبية أو المنسدلة */
.offcanvas,
.offcanvas-body,
.dropdown-menu {
    background-color: #ffffff !important; /* أبيض نقي */
    color: #000000 !important; /* نص أسود */
    border-radius: 12px; /* زوايا ناعمة */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); /* ظل خفيف */
    border: none !important;
    padding: 10px;
}

    /* الروابط داخل القائمة */
    .offcanvas a,
    .dropdown-menu a {
        color: #000000 !important;
        font-weight: 500;
        text-decoration: none;
        padding: 10px 14px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        transition: all 0.25s ease-in-out;
    }

        /* تأثير المرور - اللون البرتقالي للشعار */
        .offcanvas a:hover,
        .dropdown-menu a:hover {
            background-color: #ff8c00 !important; /* برتقالي شعار تذكر */
            color: #ffffff !important;
            transform: translateX(-3px);
        }

    /* الأيقونات داخل القائمة */
    .offcanvas i,
    .dropdown-menu i {
        color: #000 !important;
        margin-left: 6px;
        transition: color 0.25s ease-in-out;
    }

    /* تغيير لون الأيقونات عند المرور */
    .offcanvas a:hover i,
    .dropdown-menu a:hover i {
        color: #fff !important;
    }

    /* حركة لطيفة عند ظهور القائمة */
    .offcanvas.show,
    .dropdown-menu.show {
        animation: fadeIn 0.25s ease-in-out;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.admin-layout {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 240px;
    background: #212529;
    display: flex;
    flex-direction: column;
}

    .sidebar .nav-item {
        color: white;
        padding: 12px 20px;
        text-decoration: none;
        transition: background 0.2s;
    }

        .sidebar .nav-item:hover,
        .sidebar .nav-item.active {
            background: #ff8c00;
            color: white;
        }

.content {
    flex: 1;
    padding: 25px;
    background: #f8f9fa;
}

/* بطاقات الصفحة الرئيسية */

.admin-card {
    background: white;
    border-radius: 12px;
    padding: 25px;
    text-align: center;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

    .admin-card:hover {
        transform: translateY(-5px);
        background: #ff8c00;
        color: white;
    }