/* =========================
   📅 GLOBAL RTL FIX
   ملاحظة: الأفضل تحطها على container مش body
========================= */
.datepicker-container {
    direction: rtl !important; /* يخلي التقويم يمين لليسار */
    font-family: 'Cairo', sans-serif; /* خط عربي */
}

/* =========================
   📦 CALENDAR WRAPPER
   (الصندوق الخارجي للتقويم)
========================= */
.datepicker-plot-area {
    background: #fff !important; /* خلفية نظيفة */
    border: 1px solid #eee !important; /* حدود خفيفة */
    border-radius: 14px !important; /* زوايا ناعمة */
    box-shadow: 0 8px 24px rgba(0,0,0,0.06) !important; /* ظل خفيف */
    padding: 10px !important; /* مسافة داخلية */
    text-align: center;
    direction: rtl !important; /* RTL داخلي */
}

/* =========================
   📆 HEADER (Month / Year)
   ملاحظة: ده أهم جزء لازم يتظبط RTL
========================= */
.datepicker-navigator {
    background: #fafafa !important;
    border-radius: 10px !important;
    margin-bottom: 8px !important;

    display: flex !important;
    align-items: center;
    justify-content: space-between;

    direction: rtl !important;
}



/* اسم الشهر / السنة */
.pwt-btn-switch {
    font-weight: 600;
    color: #333 !important;
}

/* =========================
   📅 DAYS HEADER (Sun–Sat)
========================= */
.header-row-cell {
    font-size: 11px !important;
    color: #999 !important;
}

/* =========================
   📆 DAYS (الخلايا)
========================= */
.table-days td span {
    border-radius: 8px !important;
    font-size: 13px;
    font-weight: 500;
    color: #444 !important;
    text-align: center !important;

    transition: 0.2s ease;
    display: block;
}

/* إجبار الكالندر يعرض RTL بشكل سليم */
.datepicker-container, .datepicker-plot-area {
    direction: rtl !important;
    font-family: 'Cairo', sans-serif !important;
}



/* تأكيد أن النصوص تتنقل من اليمين لليسار */
.datepicker-navigator, .table-days {
    direction: rtl !important;
}

/* Hover */
.table-days td span:hover {
    background: #e3f2fd !important;
    color: #0d6efd !important;
}

/* =========================
   ⭐ SELECTED DAY
========================= */
.table-days td.selected span {
    background: #1e88e5 !important;
    color: #fff !important;
    font-weight: bold;
}

/* =========================
   🔵 TODAY
========================= */
.table-days td.today span {
    background: #333 !important;
    color: #fff !important;
}

/* =========================
   🚫 DISABLED DAYS
========================= */
.table-days td.disabled span {
    background: #f5f5f5 !important;
    color: #ccc !important;
    cursor: not-allowed;
}

/* =========================
   📆 OUTSIDE MONTH
========================= */
.table-days td span.other-month {
    color: #ccc !important;
}

/* =========================
   🔄 FLIP DAYS LAYOUT
   نخلي الرقم فوق واليوم تحت
========================= */

/* نخلي كل خلية يوم تتعامل كـ column */
.table-days td {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* الرقم (اليوم) فوق */
.table-days td span {
    order: 1;
}

/* اسم اليوم (لو موجود داخل header أو عنصر إضافي) */
.table-days td .day-name,
.table-days td small,
.table-days td .weekday {
    order: 2;
    font-size: 10px;
    color: #999;
    margin-top: 3px;
}

/* تحسين شكل الرقم */
.table-days td span:first-child {
    font-size: 14px;
    font-weight: 600;
}

.unavailable {
    text-decoration: line-through; /* خط فوق النص */
    color: #aaa; /* تغيير اللون لجعل النص باهتًا */
}