body {
    font-family: 'Tajawal', 'Roboto', sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

// navbar - Start
.navbar {
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap; /* تأكيد عدم التفاف العناصر */
    padding: 0.5rem 1rem; /* إضافة حشو لتقليل الفراغ حول العناصر */
}

.navbar-brand {
    margin-<?php echo $lang === 'ar' ? 'left' : 'right'; ?>: 0; /* ضبط الهامش ليكون 0 لجعل الـ Logo يلتصق بجانب الشاشة */
    display: flex;
    align-items: center;
}

.d-flex.align-items-center {
    display: flex;
    align-items: center;
    margin-<?php echo $lang === 'ar' ? 'right' : 'left'; ?>: auto;
    gap: 10px; /* إضافة فراغ صغير بين الأيقونات */
}

.navbar-toggler {
    color: #333 !important;
    border: none;
    margin-<?php echo $lang === 'ar' ? 'right' : 'left'; ?>: 0; /* إزالة الهامش الافتراضي لضبط المحاذاة بشكل أفضل */
}

#toggleLang {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-<?php echo $lang === 'ar' ? 'left' : 'right'; ?>: 0; /* ضبط الهامش لتتناسب مع اتجاه اللغة */
}

.navbar-toggler-icon {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"%3E%3Cpath stroke="rgba(0, 0, 0, 1)" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/%3E%3C/svg%3E');
    margin-<?php echo $lang === 'ar' ? 'left' : 'right'; ?>: 0; /* ضبط المحاذاة لتكون ملائمة */
}
// navbar - End

#showcase {
    background: url('./images/sitehomebg04DSA.webp') no-repeat center center/cover;
    color: #fff;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#showcase h1 {
    font-size: 4rem;
    margin-bottom: 20px;
}

#showcase p {
    font-size: 1.5rem;
}

.container {
    padding: 60px 15px;
    max-width: 1200px;
    margin: 0 auto;
}

// Footer - Start
.footer {
    display: flex !important; /* تأكد من إضافة هذا السطر */
    flex-direction: column !important; /* يضمن أن المحتوى يرتب عمودياً */
    background-color: #fff !important;
    color: #333 !important;
    justify-content: center !important; /* توسيط العناصر أفقياً */
    align-items: center !important; /* توسيط العناصر عمودياً */
    text-align: center !important;
    padding: 20px 0 !important;
    border-top: 1px solid #ddd !important;
}

.visit-count {
    color: #000 !important;
    font-size: 1.5rem !important;
    font-weight: bold !important;
    text-align: center !important; /* تأكيد التوسيط لعدد الزيارات */
}

/* تصغير حجم الخط للفقرات داخل الفوتر على الشاشات الصغيرة مع الحفاظ على التوسيط */
@media (max-width: 768px) {
    .footer p {
        font-size: 0.9rem !important; /* تصغير حجم الخط للفقرات في الفوتر */
        line-height: 1.4 !important; /* تحسين ارتفاع السطر لضمان سهولة القراءة */
        text-align: center !important; /* تأكيد التوسيط */
        margin: 0 auto !important; /* تأكيد التوسيط بتطبيق الهامش الأوتوماتيكي */
    }

    .visit-count {
        font-size: 1.2rem !important; /* تصغير حجم الخط لعدد الزيارات */
        text-align: center !important; /* تأكيد التوسيط */
        margin: 0 auto !important; /* تأكيد التوسيط بتطبيق الهامش الأوتوماتيكي */
    }
}
// Footer - End



form {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    margin-top: 20px;
}

form label {
    font-size: 1rem;
    color: #333;
    display: block;
    margin-bottom: 5px;
}

form input[type="text"],
form input[type="number"],
form input[type="tel"],
form input[type="submit"] {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 4px;
}

form input[type="checkbox"] {
    margin-right: 10px;
}

form input[type="submit"] {
    background: #333;
    color: #fff;
    cursor: pointer;
}

form input[type="submit"]:hover {
    background: #555;
}

.black-text {
    color: #000 !important;
}

.bold-label {
    font-weight: bold;
}

/* Login, Data Display, and Logout Screen Styles */
.login-container,
.data-display-container,
.logout-container {
    background: #fff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    max-width: 500px;
    margin: 40px auto;
}

.login-container h2,
.data-display-container h2,
.logout-container h2 {
    text-align: center;
    margin-bottom: 30px;
    color: #333;
}

.login-container input[type="text"],
.login-container input[type="password"],
.logout-container button {
    width: 100%;
    padding: 15px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
}

.login-container input[type="submit"],
.logout-container button {
    background: #333;
    color: #fff;
    cursor: pointer;
    font-size: 1.2rem;
}

.login-container input[type="submit"]:hover,
.logout-container button:hover {
    background: #555;
}

.table {
    width: 100%;
    margin-bottom: 20px;
    border-collapse: collapse;
}

.table th, .table td {
    padding: 12px 15px;
    border: 1px solid #ddd;
    text-align: left;
    color: #333;
}

.table th {
    background-color: #f4f4f4;
}

.alternate-showcase {
    background-color: #f0f0f0; /* لون خلفية بديل */
    color: #333; /* لون نص بديل */
    min-height: 50vh; /* تقليل الحد الأدنى للارتفاع */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    margin-bottom: 20px; /* إضافة تباعد إضافي من الأسفل */
}

.alternate-showcase .content-box {
    background: #fff; /* خلفية للصندوق المحتوي */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    max-width: 800px;
    margin: 0 auto;
}

.alternate-showcase h1 {
    font-size: 3rem;
    margin-bottom: 20px;
    color: #444; /* لون النص */
}

.alternate-showcase .events {
    margin-top: 20px;
}

.alternate-showcase .event {
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #fafafa;
}

.alternate-showcase .event h2 {
    font-size: 1.8rem;
    color: #555;
}

.alternate-showcase .event p {
    font-size: 1rem;
    margin: 5px 0;
}

.custom-logout {
    color: red !important;
}

/* top-banner - Start */
.top-banner {
    background-color: #004085; /* لون خلفية أزرق غامق لإبراز النص */
    color: #fff; /* لون النص أبيض ليتباين مع الخلفية */
    padding: 20px;
    text-align: center;
    border-bottom: 3px solid #cce5ff; /* خط فاصل أسفل الشريط */
    font-size: 1.2em; /* حجم النص أكبر قليلاً */
}

.top-banner h2 {
    font-size: 1.5em; /* تكبير حجم عنوان الترحيب */
    margin-bottom: 10px;
    font-weight: bold; /* جعل النص عريضاً */
}

.top-banner p {
    margin: 5px 0;
}

/* تحسينات التصميم على الشاشات الصغيرة */
@media (max-width: 768px) {
    .navbar-brand img {
        height: 50px; /* تصغير شعار النافبار على الشاشات الصغيرة */
    }

    #showcase {
        height: auto; /* تعديل الارتفاع ليكون تلقائيًا */
        padding: 40px 20px; /* تقليل الحشو داخل showcase */
        text-align: center;
        background-position: top center; /* تحسين عرض الخلفية */
        background-size: cover;
    }

    #showcase h1 {
        font-size: 2.5rem; /* تصغير حجم العنوان الرئيسي */
    }

    #showcase p {
        font-size: 1.2rem; /* تصغير حجم النص */
    }

    .container {
        padding: 30px 10px; /* تقليل الحشو داخل الحاوية */
    }

    .table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .table thead {
        display: none;
    }

    .table tr {
        display: block;
        margin-bottom: 10px;
    }

    .table td {
        display: block;
        text-align: right;
        font-size: 0.9rem; /* تصغير حجم النص داخل الجدول */
    }

   .table td:before {
    content: attr(data-label); /* إضافة عناوين الأعمدة بجانب القيم */
    font-weight: bold;
    text-transform: uppercase;
    text-align: <?php echo $lang === 'ar' ? 'right' : 'left'; ?>; /* محاذاة النص داخل العنوان */
    padding-<?php echo $lang === 'ar' ? 'left' : 'right'; ?>: 10px; /* تعديل الحشو بناءً على الاتجاه */
    line-height: 1.5; /* زيادة ارتفاع السطر لضمان عدم التصاق النص */
    margin-bottom: 5px; /* إضافة هامش صغير أسفل العنوان لزيادة المسافة */
    display: block; /* عرض العنوان ككتلة مستقلة */
}

    form {
        padding: 15px; /* تقليل حشو النماذج */
        margin-top: 10px; /* تقليل المسافة العلوية للنماذج */
    }

    form input[type="text"],
    form input[type="number"],
    form input[type="tel"],
    form input[type="submit"] {
        padding: 8px; /* تقليل حشو حقول الإدخال */
        font-size: 0.9rem; /* تقليل حجم النص داخل الحقول */
    }

    .alternate-showcase h1 {
        font-size: 2rem; /* تقليل حجم النص في العناوين الكبيرة */
    }

    .alternate-showcase .content-box {
        padding: 15px; /* تقليل حشو الصناديق */
    }

    .alternate-showcase .event h2 {
        font-size: 1.5rem; /* تقليل حجم النص في العناوين داخل الأحداث */
    }

    .alternate-showcase .event p {
        font-size: 0.9rem; /* تصغير النص داخل الأحداث */
    }

    .top-banner {
        padding: 15px; /* تقليل الحشو قليلاً لتناسب الشاشات الصغيرة */
        font-size: 1em; /* تقليل حجم النص على الشاشات الصغيرة */
    }
    
    .top-banner h2 {
        font-size: 1.3em; /* تقليل حجم عنوان الترحيب لتناسب الشاشات الصغيرة */
    }

    .top-banner p {
        font-size: 0.9em; /* تقليل حجم النص في الفقرات لتناسب الشاشات الصغيرة */
    }
}

// Progress Bar - Start
.countdown-container {
    margin-bottom: 20px; /* مسافة أسفل الحاوية */
}

.countdown-timer {
    font-size: 16px;
    margin-bottom: 5px; /* مسافة بين العد التنازلي وشريط التقدم */
}
/* حاوية شريط التقدم */
.progress-bar {
    background-color: #f3f3f3 !important;  /* لون خلفية الشريط */
    border-radius: 5px;         /* زوايا مستديرة للحاوية */
    overflow: hidden;           /* إخفاء أي شيء يتجاوز الحاوية */
    height: 20px;               /* ارتفاع الشريط */
    width: 100%;                /* عرض الشريط بالكامل */
    margin-top: 10px;           /* مسافة بسيطة من الأعلى */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); /* إضافة ظل داخلي */
}

/* الشريط الفعلي الذي يمثل التقدم */
.progress-bar .progress {
    height: 100%;               /* يملأ الحاوية عموديًا */
    background-color: #4caf50 !important;  /* اللون الأخضر الافتراضي */
    width: 0%;                  /* عرض التقدم (يبدأ من 0%) */
    transition: width 0.5s ease-in-out; /* حركة سلسة عند تغيير العرض */
    text-align: center;         /* توسيط النص داخل الشريط */
    color: white;               /* لون النص داخل الشريط */
    font-weight: bold;          /* جعل النص عريض */
    line-height: 20px;          /* محاذاة النص عموديًا */
}
/* لون الشريط إذا كان التسجيل مفتوحًا */
.progress-bar.open .progress {
    background-color: #4caf50 !important; /* أخضر */
}

/* لون الشريط إذا كان التسجيل لم يبدأ بعد */
.progress-bar.not-yet-open .progress {
    background-color: #2196F3 !important; /* أزرق */
}

/* لون الشريط إذا كان التسجيل مغلقًا */
.progress-bar.closed .progress {
    background-color: #f44336 !important; /* أحمر */
}

// Progress Bar - End