/**
 * تنسيقات مخصصة لأوقات الحجز
 * ضع هذا الملف في مجلد القالب الخاص بك كـ custom-booking-slots.css
 */

/* تنسيق قائمة الأوقات بشكل عام */
select.yith-wcbk-booking-start-date-time {
    width: 100%;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #ddd;
    font-size: 16px;
}

/* تنسيق الأوقات المحجوزة */
select.yith-wcbk-booking-start-date-time option.booked-time {
    color: #ff0000 !important;
    text-decoration: line-through;
    position: relative;
    background-color: rgba(255, 0, 0, 0.1);
    pointer-events: none;
    font-weight: bold;
}

/* إضافة أيقونة تشير إلى عدم توفر الوقت */
select.yith-wcbk-booking-start-date-time option.booked-time:after {
    content: " (محجوز)";
}

/* تغيير لون عند تمرير المؤشر فوق الخيارات */
select.yith-wcbk-booking-start-date-time option:hover {
    background-color: #f0f0f0;
}

/* تحسين مظهر الحقل عند تحديده */
select.yith-wcbk-booking-start-date-time:focus {
    outline: none;
    border-color: #007cba;
    box-shadow: 0 0 5px rgba(0, 124, 186, 0.3);
}

/* إضافة نص تحذيري أسفل القائمة المنسدلة للأوقات المحجوزة */
.booked-time-notice {
    color: #ff0000;
    font-size: 12px;
    margin-top: 5px;
    display: block;
}

/* تنسيق الإطار المحيط بحقل الوقت */
.yith-booking-time-field-wrapper {
    margin-bottom: 15px;
    position: relative;
}

/* إضافة مؤشر لتوضيح أن الوقت محجوز */
.booking-time-status {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;
}

.booking-time-status.booked {
    background-color: #ff0000;
}

.booking-time-status.available {
    background-color: #4CAF50;
}