/* ============================================================
   منتقي التاريخ المخصص لجمعية سراج للعيون
   Custom Date Picker for Siraj Eyes Charity
   v1.0 - مع دعم RTL كامل وقوائم مخصصة للعربية
   ============================================================ */

/* القاعدة الذهبية: hidden دائماً يفوز */
[hidden]{display:none !important}

/* ── Input الحقل ── */
.siraj-dp-input{
  width:100%;
  padding:11px 14px;
  border:1.5px solid #ddd;
  border-radius:9px;
  font-family:inherit;
  font-size:14px;
  background:#fff;
  color:#222;
  direction:rtl;
  text-align:right;
  cursor:text;
  box-sizing:border-box;
}
.siraj-dp-input:focus,
.siraj-dp-input.active{
  outline:none;
  border-color:#386b22;
  box-shadow:0 0 0 3px rgba(56,107,34,.12);
}
.siraj-dp-input::placeholder{color:#999}
.siraj-dp-input.error{border-color:#c62828;background:#fff5f5}
.siraj-dp-input[readonly]{cursor:pointer}

/* ── رسالة الخطأ ── */
.siraj-dp-error{
  display:none;
  color:#c62828;
  font-size:12px;
  margin-top:6px;
  background:#ffebee;
  padding:7px 10px;
  border-radius:7px;
  border-right:3px solid #c62828;
}
.siraj-dp-error.show{display:block}

/* ── المنتقي العائم ── */
.siraj-dp{
  position:fixed;
  background:#fff;
  border:1px solid #d4d4d2;
  border-radius:14px;
  box-shadow:0 12px 36px rgba(0,0,0,.18);
  width:340px;
  font-family:'Tajawal','Cairo',Arial,sans-serif;
  z-index:99999;
  overflow:hidden;
}

/* ── الهيدر (الشهر/السنة/الأسهم) ── */
.sdp-header{
  background:#386b22;
  padding:14px 16px;
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:center;
  direction:rtl;
}
.sdp-nav{
  background:rgba(255,255,255,.15);
  border:0;
  color:#fff;
  width:32px;
  height:32px;
  border-radius:7px;
  cursor:pointer;
  font-size:18px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:inherit;
  line-height:1;
  padding:0;
}
.sdp-nav:hover{background:rgba(255,255,255,.28)}

/* ── الأزرار المنسدلة (شهر/سنة/وقت) ── */
.sdp-fake-select{
  background:#fff;
  color:#386b22;
  border:0;
  border-radius:7px;
  font-family:inherit;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  height:34px;
  line-height:1;
  padding:0 8px;
  min-width:120px;
}
.sdp-fake-select.year{min-width:85px}
.sdp-fake-select:hover{background-color:#f5f5f3}
.sdp-fake-select::after{
  content:'';
  position:absolute;
  left:8px;
  top:50%;
  transform:translateY(-50%);
  width:0;
  height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:6px solid #386b22;
}
.sdp-fake-select-text{
  display:block;
  text-align:center;
  flex:1;
  padding:0 14px;
}

/* ── أيام الأسبوع ── */
.sdp-weekdays{
  background:#f5f5f3;
  display:grid;
  grid-template-columns:repeat(7,1fr);
  padding:8px 6px;
  direction:rtl;
}
.sdp-weekday{
  text-align:center;
  font-size:12px;
  font-weight:700;
  color:#666;
  padding:4px 0;
}

/* ── شبكة الأيام ── */
.sdp-days{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  padding:8px 6px;
  gap:2px;
  direction:rtl;
}
.sdp-day{
  background:transparent;
  border:0;
  cursor:pointer;
  padding:9px 0;
  border-radius:8px;
  font-family:inherit;
  font-size:13px;
  font-weight:500;
  color:#333;
}
.sdp-day:hover{background:#e8f5e9;color:#386b22}
.sdp-day.other-month{color:#ccc}
.sdp-day.today{border:2px solid #c8a04a;color:#c8a04a;font-weight:700}
.sdp-day.selected{background:#386b22;color:#fff;font-weight:700}
.sdp-day.in-range{background:#c8e6c9;color:#1b5e20;border-radius:0}
.sdp-day.range-start{background:#386b22;color:#fff;border-radius:8px 0 0 8px}
.sdp-day.range-end{background:#386b22;color:#fff;border-radius:0 8px 8px 0}
.sdp-day:disabled{
  color:#ddd !important;
  cursor:not-allowed;
  background:transparent !important;
}

/* ── القائمة المنسدلة المخصصة ── */
.sdp-custom-list{
  position:fixed;
  background:#fff;
  border:1px solid #d4d4d2;
  border-radius:9px;
  box-shadow:0 6px 20px rgba(0,0,0,.15);
  max-height:240px;
  overflow-y:auto;
  z-index:100000;
  min-width:80px;
  padding:4px 0;
  font-family:'Tajawal','Cairo',Arial,sans-serif;
}
.sdp-custom-item{
  padding:8px 14px;
  cursor:pointer;
  text-align:center;
  font-family:inherit;
  font-weight:600;
  font-size:14px;
  color:#333;
  direction:rtl;
}
.sdp-custom-item:hover{background:#e8f5e9;color:#386b22}
.sdp-custom-item.selected{
  background:#386b22;
  color:#fff;
  font-weight:700;
}

/* ── شريط الوقت ── */
.sdp-time{
  background:#fafaf8;
  border-top:1px solid #eee;
  padding:12px 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  direction:rtl;
}
.sdp-time-label{
  font-size:12px;
  color:#666;
  margin-left:4px;
  font-weight:500;
}
.sdp-time .sdp-fake-select{
  border:1.5px solid #e0e0e0;
  background-color:#fff;
  font-size:15px;
  min-width:74px;
  height:38px;
}
.sdp-time .sdp-fake-select.ampm{min-width:65px}
.sdp-time .colon{
  font-size:18px;
  font-weight:700;
  color:#386b22;
}

/* ── الفوتر (الأزرار) ── */
.sdp-footer{
  display:flex;
  border-top:1px solid #eee;
  background:#fafaf8;
}
.sdp-btn{
  flex:1;
  background:transparent;
  border:0;
  padding:11px 0;
  cursor:pointer;
  font-family:inherit;
  font-weight:700;
  font-size:13px;
}
.sdp-btn-clear{color:#999}
.sdp-btn-clear:hover{background:#f5f5f3;color:#c62828}
.sdp-btn-today{color:#386b22;border-right:1px solid #eee}
.sdp-btn-today:hover{background:#e8f5e9}
.sdp-btn-confirm{color:#fff;background:#386b22;flex:1.3}
.sdp-btn-confirm:hover{background:#2d5219}

/* ── شريط معلومات النطاق ── */
.sdp-range-info{
  background:#e8f5e9;
  padding:10px 14px;
  text-align:center;
  font-size:12px;
  color:#1b5e20;
  font-weight:600;
  border-bottom:1px solid #c8e6c9;
}
.sdp-range-info.complete{
  background:#386b22;
  color:#fff;
}

/* ═══════════ 🆕 إصلاح الشاشات القصيرة ═══════════ */

/* خلفية معتمة — تظهر فقط في الوضع المركزي */
.sdp-backdrop{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  z-index:99998;          /* تحت التقويم مباشرة */
  animation:sdpFadeIn .15s ease;
}
@keyframes sdpFadeIn{from{opacity:0}to{opacity:1}}

/* الوضع المركزي — التقويم في منتصف الشاشة */
.siraj-dp.sdp-centered{
  z-index:99999;
  max-height:90vh;        /* ما يطلع برّا الشاشة أبداً */
  overflow-y:auto;        /* لو طويل، يصير قابل للتمرير داخلياً */
  -webkit-overflow-scrolling:touch;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  animation:sdpPopIn .18s ease;
}
@keyframes sdpPopIn{
  from{opacity:0;transform:translate(-50%,-50%) scale(.95)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}

/* في الوضع المركزي، الهيدر يثبت فوق عند التمرير */
.siraj-dp.sdp-centered .sdp-header{
  position:sticky;
  top:0;
  z-index:2;
}
/* والفوتر (الأزرار) يثبت تحت */
.siraj-dp.sdp-centered .sdp-footer{
  position:sticky;
  bottom:0;
  z-index:2;
  background:#fff;
}

/* على الجوال — التقويم يستغل عرض الشاشة بذكاء */
@media(max-width:420px){
  .siraj-dp{
    width:calc(100vw - 24px);
    max-width:340px;
  }
  .siraj-dp.sdp-centered{
    width:calc(100vw - 24px);
    max-width:360px;
  }
}