@font-face {
    font-family: 'AlFont29LTKaffLight';
    src: url('uploads/alfont_com_AlFont_com_29LTKaff-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Monadi.ttf';
    src: url('uploads/Monadi.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'AlFont29LTKaffLight', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #000;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 100%;
    margin: 50px auto auto auto;
    padding: 20px;
    background-color: #eeeeee;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);

}

h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: #666;
}

.form-group input[type="text"],
.form-group input[type="file"] {
    width: calc(100% - 20px);
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

.form-group input[type="text"]:focus,
.form-group input[type="file"]:focus {
    outline: none;
    border-color: #4caf50;
}

.form-group button[type="submit"] {
    font-family: 'Monadi.ttf', 'Segoe UI', Tahoma, Verdana, sans-serif;
    padding: 5px 10px;
    text-decoration: none;
    background-color: #222130;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    width: 100%;
}

.submit {
    width: 100%;
    font-family: 'Monadi.ttf', 'Segoe UI', Tahoma, Verdana, sans-serif;
    padding: 5px 10px;
    text-decoration: none;
    background-color: #222130;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 16px;

}

button {
    font-family: 'Monadi.ttf', 'Segoe UI', Tahoma, Verdana, sans-serif;
    padding: 5px 10px;
    text-decoration: none;
    background-color: #009495;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 16px;

}
.btn {
    font-family: 'Monadi.ttf', 'Segoe UI', Tahoma, Verdana, sans-serif;
    padding: 5px 10px;
    text-decoration: none;
    background-color: #009495;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 16px;

}
.btn-danger {
    background-color: #000;
}
/*
.btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    background-color: #4CAF50;
    color: white;
    transition: background-color 0.3s;
}

.btn:hover {
    background-color: #45a049;
}
*/

      /* Style the accordion container */
      .accordion {
        max-width: 400px;
        margin: auto;
      }
    
      /* Style the accordion items */
      .accordion-item {
        background-color: #f4f4f4;
        margin-bottom: 5px;
        border-radius: 5px;
      }
    
      /* Style the accordion header (button) */
      .accordion-header {
        font-family: 'Monadi.ttf', 'Segoe UI', Tahoma, Verdana, sans-serif;
        background-color: #222130;
        color: #009495;;
        padding: 10px;
        cursor: pointer;
        border-bottom: 1px solid #ccc;
        border-radius: 40px 40px 40px 40px; /* Add border radius for rounded corners */
        text-align: center;
    }
    
      /* Style the active accordion header */
      .accordion-header.active {
        background-color: #000;
        color: #009495;
        border-radius: 40px 40px 0px 0px; /* Add border radius for rounded corners */
      }
    
      /* Style the accordion content */
      .accordion-content {
        padding: 10px;
        display: none;
      }
    
      /* Style the active accordion content */
      .accordion-content.active {
        display: block;
        background-color: #dbdbdb;
    }
    
/* Add a background color to the top navigation */
.topnav {
    font-family: 'Monadi.ttf', 'Segoe UI', Tahoma, Verdana, sans-serif;
    background-color: #000; /* Light gray background */
    overflow: hidden;
    direction: rtl; /* Right-to-left direction */
    border-radius: 0px 0px 40px 40px; /* Add border radius for rounded corners */
    box-shadow: 0px 12px 9px rgba(46, 5, 76, 0.251); /* Add shadow */
  }
  h2 {
   /* font-family: 'Monadi.ttf', 'Segoe UI', Tahoma, Verdana, sans-serif;
    */
    color:#009495;
  }
  /* Style the links inside the navigation bar */
  .topnav a {
    float: right; /* Float the links to the right */
    color: #009495; /* Dark gray text color */
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  
  /* Change the color of links on hover */
  .topnav a:hover {
    border-radius: 0 0 40px 40px; /* Add border radius for rounded corners */
    color: white; /* Dark gray text color on hover */
  }
  
  /* Add a color to the active/current link */
  .topnav a.active {
    border-radius: 0px 0px 40px 40px; /* Add border radius for rounded corners */
    color: white; /* White text color for active link */
  }
  .footer {
    background-color: #222130;
    color: #009495; /* Text color for the footer */
    padding: 1px; /* Padding around footer content */
    text-align: center; /* Center-align the text */
}

.footer-content {
    max-width: 100%; /* Limit the width of footer content */
    margin: 0 auto; /* Center footer content horizontally */
}

  .gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
}


.thumbnails {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 20px;
}

.thumbnail {
margin: 10px;
cursor: pointer;
}

.thumbnail img {
width: 150px;
height: 150px;
object-fit: cover;
border: 2px solid transparent;
transition: border-color 0.3s ease;
}

.thumbnail img:hover {
border-color: #009495;
}

.main-image {
width: 70%;
margin: 0 auto;
text-align: center;
}

.main-image img {
max-width: 100%;
max-height: 80vh;
border: 2px solid #009495;
}
    /* CSS for modal */
    .modal {
        display: none;
        position: fixed;
        z-index: 9999;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.9);
    }

    .modal-content {
        margin: auto;
        display: block;
        width: 80%;
        max-width: 700px;
    }

    .modal-content img {
        width: 100%;
        height: auto;
    }

    /* CSS for close button */
    .close {
        color: #fff;
        position: absolute;
        top: 10px;
        right: 25px;
        font-size: 35px;
        font-weight: bold;
        transition: 0.3s;
        cursor: pointer;
    }

    .close:hover,
    .close:focus {
        color: #999;
        text-decoration: none;
        cursor: pointer;
    }
    form {
        margin: 20px auto;
        width: 80%;
    }
    label {
        display: block;
        margin-bottom: 5px;
    }
    input, textarea, select {
        width: 100%;
        padding: 8px;
        margin-bottom: 10px;
        box-sizing: border-box;
    }
  .center {
    text-align: center;
}
table {
    width: 100%;
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid #009495;
    padding: 1%;
}

th {
    background-color: #000;
    color: #fff;
}
th, td {
    text-align: center;
    vertical-align: top;

}
 /* Define a class for borderless table */
 .borderless-table {
    border-collapse: collapse;
    width: 100%;
}

/* Style the table rows and cells */
.borderless-table th, .borderless-table td {
    border: none;
    padding: 8px;
    font-weight: normal;
}

/* Style the table header */
.borderless-table th {
    background-color: #f2f2f2;
    font-weight: bold;
}
.highlighted-day {
    background-color: #eec5c5; /* Set the background color for highlighted days */
    text-align: center; /* Center the content horizontally */
}
.custom-button {
    display: inline-block;
    background-color: #222130;
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    cursor: pointer;
    border-radius: 8px;
    padding: 10px 20px;
    transition: background-color 0.3s;
}

.custom-button:hover {
    background-color: #222130;
}
.custom-button2 {
    display: inline-block;
    background-color: #009495;
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    cursor: pointer;
    border-radius: 8px;
    padding: 10px 20px;
    transition: background-color 0.3s;
}

.custom-button2:hover {
    background-color: #009495;
}

.day-name {
    font-size: 16px;
}

.current-day {
    font-size: 18px;
    line-height: 1.2;
}
.container33 {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  /* Hide the browser's default checkbox */
  .container33 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }
  
  /* Create a custom checkbox */
  .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
  }
  
  /* On mouse-over, add a grey background color */
  .container33:hover input ~ .checkmark {
    background-color: #ccc;
  }
  
  /* When the checkbox is checked, add a blue background */
  .container33 input:checked ~ .checkmark {
    background-color: #2196F3;
  }
  
  /* Create the checkmark/indicator (hidden when not checked) */
  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }
  
  /* Show the checkmark when checked */
  .container33 input:checked ~ .checkmark:after {
    display: block;
  }
  
  /* Style the checkmark/indicator */
  .container33 .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }


/* Toasts */
.toast {
    position: fixed;
    top: 72px; /* عدّلها حسب ارتفاع الشريط العلوي عندك */
    right: 16px;
    max-width: 320px;
    padding: 12px 14px;
    border-radius: 12px;
    color: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
    font-size: 14px;
    line-height: 1.45;
    z-index: 9999;
    opacity: 0;
    transform: translateY(-8px);
    animation: toastLife 3.6s ease forwards; /* يظهر ثم يختفي تلقائياً */
}

/* ألوان حسب النوع */
.toast-success {
    background: #16a34a;
}
/* أخضر */
.toast-error {
    background: #dc2626;
}
/* أحمر */
.toast-warning {
    background: #f59e0b;
    color: #111;
}
/* أصفر */
.toast-info {
    background: #3b82f6;
}
/* أزرق */

/* أنيميشن: دخول، ثبات، خروج */
@keyframes toastLife {
    0% {
        opacity: 0;
        transform: translateY(-8px);
    }

    12% {
        opacity: 1;
        transform: translateY(0);
    }

    85% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-8px);
    }
}
/* حاوية تمرير أفقية للجدول */
.table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* سلاسة على iOS */
    scrollbar-width: thin; /* فايرفوكس */
}

    /* نجبر الجدول يكون أعرض شوية لتظهر سكرول على الشاشات الصغيرة */
    .table-scroll > table {
        min-width: 720px; /* عدّل حسب أعمدة جدولك */
    }

/* تحسين تجربة السحب على الشاشات الصغيرة */
@media (max-width: 600px) {
    .table-scroll > table {
        min-width: 820px; /* لو أعمدتك كثيرة زِدها */
    }
}
.table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}
.table-scroll th, .table-scroll td {
    white-space: nowrap;
}
/* لفّافة السحب */
.table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* iOS */
    scrollbar-width: thin; /* Firefox */
}

    /* خلّي الجدول يطلب عرضه الحقيقي (حتى لو أكبر من الشاشة) */
    .table-scroll > table {
        border-collapse: separate; /* أو حسب ستايلك */
        border-spacing: 0;
        width: max-content !important; /* أهم سطر */
        min-width: 720px; /* لضمان سكرول على الشاشات الصغيرة */
    }

    /* منع لفّ النص داخل الخلايا → يزيد العرض وبالتالي يظهر السكرول */
    .table-scroll th,
    .table-scroll td {
        white-space: nowrap;
    }

    /* إن ودّك، ثبّت الهيدر */
    .table-scroll thead th {
        position: sticky;
        top: 0;
        z-index: 1;
    }

/* شاشات أصغر */
@media (max-width: 600px) {
    .table-scroll > table {
        min-width: 820px;
    }
}