/* ════════════════════════════════════════════════════════════════════
   منتقي التاريخ المحسّن لجمعية سراج للعيون
   Siraj Date Picker - Premium Edition v2.0
   ════════════════════════════════════════════════════════════════════ */

/* القاعدة الذهبية */
[hidden]{display:none !important}

/* ════════ Input الحقل ════════ */
.siraj-dp-input{
  width:100%;
  padding:12px 16px;
  border:1.5px solid #e0e0e0;
  border-radius:10px;
  font-family:inherit;
  font-size:14px;
  background:#fff;
  color:#222;
  direction:rtl;
  text-align:right;
  cursor:text;
  box-sizing:border-box;
  transition:all .2s ease;
}
.siraj-dp-input:focus,
.siraj-dp-input.active{
  outline:none;
  border-color:#386b22;
  box-shadow:0 0 0 4px rgba(56,107,34,.10);
}
.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:12.5px;
  margin-top:8px;
  background:#ffebee;
  padding:8px 12px;
  border-radius:8px;
  border-right:3px solid #c62828;
  font-weight:500;
}
.siraj-dp-error.show{display:block}

/* ════════ المنتقي العائم ════════ */
.siraj-dp{
  position:fixed;
  background:#fff;
  border-radius:18px;
  box-shadow:
    0 24px 60px rgba(0,0,0,.18),
    0 8px 20px rgba(56,107,34,.08),
    0 0 0 1px rgba(0,0,0,.04);
  width:380px;
  font-family:'Tajawal','Cairo',Arial,sans-serif;
  z-index:99999;
  overflow:hidden;
  animation:sdp-fade-in .22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes sdp-fade-in{
  from{opacity:0; transform:translateY(-8px) scale(0.98)}
  to{opacity:1; transform:translateY(0) scale(1)}
}

/* ════════ النمط الموسّع (range - شهرين + sidebar) ════════ */
.siraj-dp.range-mode{
  width:auto;
  max-width:760px;
  display:flex;
  flex-direction:row-reverse;
}

/* ════════ Sidebar الأزرار السريعة ════════ */
.sdp-quick-sidebar{
  background:linear-gradient(180deg,#fafaf8 0%,#f5f5f3 100%);
  border-left:1px solid #ebe9e3;
  padding:16px 10px;
  min-width:155px;
  display:none;
  flex-direction:column;
  gap:5px;
}
.siraj-dp.range-mode .sdp-quick-sidebar{display:flex}

.sdp-quick-btn{
  background:transparent;
  border:0;
  text-align:right;
  padding:10px 14px;
  border-radius:9px;
  cursor:pointer;
  font-family:inherit;
  font-size:13.5px;
  color:#444;
  font-weight:500;
  transition:all .2s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;
  overflow:hidden;
}
.sdp-quick-btn::before{
  content:'';
  position:absolute;
  top:0;
  right:0;
  width:0;
  height:100%;
  background:rgba(56,107,34,0.08);
  transition:width .25s ease;
}
.sdp-quick-btn:hover{
  background:#e8f5e9;
  color:#386b22;
  font-weight:600;
  transform:translateX(-2px);
}
.sdp-quick-btn:hover::before{width:100%}
.sdp-quick-btn.active{
  background:linear-gradient(135deg,#386b22 0%,#4a8128 100%);
  color:#fff;
  font-weight:700;
  box-shadow:0 4px 12px rgba(56,107,34,0.25);
  transform:translateX(-2px);
}

/* ════════ الهيدر (الشهر/السنة) ════════ */
.sdp-header{
  background:linear-gradient(135deg,#386b22 0%,#2d5219 100%);
  padding:16px 18px;
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:center;
  direction:rtl;
  position:relative;
}
.sdp-header::after{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent);
}

.sdp-nav{
  background:rgba(255,255,255,.18);
  border:0;
  color:#fff;
  width:34px;
  height:34px;
  border-radius:9px;
  cursor:pointer;
  font-size:20px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:inherit;
  line-height:1;
  padding:0;
  transition:all .2s ease;
}
.sdp-nav:hover{
  background:rgba(255,255,255,.30);
  transform:scale(1.08);
}
.sdp-nav:active{transform:scale(0.95)}

/* ════════ أزرار اختيار الشهر/السنة ════════ */
.sdp-fake-select{
  background:#fff;
  color:#386b22;
  border:0;
  border-radius:8px;
  font-family:inherit;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  height:36px;
  line-height:1;
  padding:0 10px;
  min-width:125px;
  transition:all .15s ease;
  box-shadow:0 2px 6px rgba(0,0,0,0.08);
}
.sdp-fake-select.year{min-width:88px}
.sdp-fake-select:hover{
  background-color:#f5f5f3;
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(0,0,0,0.12);
}
.sdp-fake-select::after{
  content:'';
  position:absolute;
  left:9px;
  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:#fafaf8;
  display:grid;
  grid-template-columns:repeat(7,1fr);
  padding:10px 8px;
  direction:rtl;
  border-bottom:1px solid #f0eeea;
}
.sdp-weekday{
  text-align:center;
  font-size:12px;
  font-weight:700;
  color:#888;
  padding:5px 0;
  letter-spacing:0.3px;
}

/* ════════ شبكة الأيام ════════ */
.sdp-days{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  padding:12px 10px;
  gap:3px;
  direction:rtl;
}
.sdp-day{
  background:transparent;
  border:0;
  cursor:pointer;
  padding:11px 0;
  border-radius:10px;
  font-family:inherit;
  font-size:13.5px;
  font-weight:500;
  color:#333;
  transition:all .15s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;
}
.sdp-day:hover{
  background:#e8f5e9;
  color:#386b22;
  transform:scale(1.08);
  font-weight:700;
}
.sdp-day.other-month{color:#ccc; opacity:0.5}
.sdp-day.today{
  border:2px solid #c8a04a;
  color:#c8a04a;
  font-weight:700;
  background:rgba(200,160,74,0.06);
}
.sdp-day.today::after{
  content:'';
  position:absolute;
  bottom:3px;
  left:50%;
  transform:translateX(-50%);
  width:4px;
  height:4px;
  border-radius:50%;
  background:#c8a04a;
}
.sdp-day.selected{
  background:linear-gradient(135deg,#386b22 0%,#4a8128 100%);
  color:#fff !important;
  font-weight:700;
  box-shadow:0 4px 12px rgba(56,107,34,0.35);
  transform:scale(1.05);
}
.sdp-day.in-range{
  background:#dcedc8;
  color:#1b5e20;
  border-radius:0;
  font-weight:600;
}
.sdp-day.range-start{
  background:linear-gradient(135deg,#386b22 0%,#4a8128 100%);
  color:#fff;
  border-radius:10px 0 0 10px;
  box-shadow:0 4px 12px rgba(56,107,34,0.35);
  font-weight:700;
}
.sdp-day.range-end{
  background:linear-gradient(135deg,#386b22 0%,#4a8128 100%);
  color:#fff;
  border-radius:0 10px 10px 0;
  box-shadow:0 4px 12px rgba(56,107,34,0.35);
  font-weight:700;
}
.sdp-day:disabled{
  color:#ddd !important;
  cursor:not-allowed;
  background:transparent !important;
  transform:none !important;
}
.sdp-day:disabled:hover{
  background:transparent !important;
  transform:none !important;
}

/* ════════ القائمة المنسدلة (شهر/سنة/ساعة) ════════ */
.sdp-custom-list{
  position:fixed;
  background:#fff;
  border:1px solid #d4d4d2;
  border-radius:10px;
  box-shadow:
    0 10px 30px rgba(0,0,0,.15),
    0 0 0 1px rgba(0,0,0,.03);
  max-height:260px;
  overflow-y:auto;
  z-index:100000;
  min-width:85px;
  padding:5px 0;
  font-family:'Tajawal','Cairo',Arial,sans-serif;
  animation:sdp-fade-in .15s ease-out;
}
.sdp-custom-list::-webkit-scrollbar{width:6px}
.sdp-custom-list::-webkit-scrollbar-track{background:#f5f5f3}
.sdp-custom-list::-webkit-scrollbar-thumb{
  background:#386b22;
  border-radius:3px;
}
.sdp-custom-list::-webkit-scrollbar-thumb:hover{background:#2d5219}

.sdp-custom-item{
  padding:9px 16px;
  cursor:pointer;
  text-align:center;
  font-family:inherit;
  font-weight:600;
  font-size:14px;
  color:#333;
  direction:rtl;
  transition:all .12s ease;
}
.sdp-custom-item:hover{
  background:#e8f5e9;
  color:#386b22;
  padding-right:20px;
}
.sdp-custom-item.selected{
  background:linear-gradient(135deg,#386b22 0%,#4a8128 100%);
  color:#fff;
  font-weight:700;
}

/* ════════ شريط الوقت ════════ */
.sdp-time{
  background:linear-gradient(180deg,#fafaf8 0%,#f5f5f3 100%);
  border-top:1px solid #ececea;
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  direction:rtl;
}
.sdp-time-label{
  font-size:13px;
  color:#555;
  margin-left:6px;
  font-weight:600;
}
.sdp-time .sdp-fake-select{
  border:1.5px solid #e0e0e0;
  background-color:#fff;
  font-size:15px;
  min-width:78px;
  height:40px;
}
.sdp-time .sdp-fake-select.ampm{min-width:68px}
.sdp-time .colon{
  font-size:20px;
  font-weight:700;
  color:#386b22;
}

/* ════════ الفوتر (الأزرار) ════════ */
.sdp-footer{
  display:flex;
  border-top:1px solid #ececea;
  background:#fafaf8;
  padding:10px 12px;
  gap:8px;
}
.sdp-btn{
  flex:1;
  border:0;
  padding:11px 14px;
  border-radius:9px;
  font-family:inherit;
  font-size:13.5px;
  font-weight:700;
  cursor:pointer;
  transition:all .2s ease;
}
.sdp-btn-clear{
  background:transparent;
  color:#c62828;
  border:1px solid #ffcdd2;
}
.sdp-btn-clear:hover{
  background:#ffebee;
  border-color:#ef9a9a;
}
.sdp-btn-today{
  background:#fff;
  color:#386b22;
  border:1px solid #c8e6c9;
}
.sdp-btn-today:hover{
  background:#e8f5e9;
  border-color:#a5d6a7;
}
.sdp-btn-confirm{
  color:#fff;
  background:linear-gradient(135deg,#386b22 0%,#4a8128 100%);
  flex:1.5;
  box-shadow:0 3px 8px rgba(56,107,34,0.25);
}
.sdp-btn-confirm:hover{
  background:linear-gradient(135deg,#2d5219 0%,#386b22 100%);
  box-shadow:0 5px 14px rgba(56,107,34,0.35);
  transform:translateY(-1px);
}

/* ════════ شريط معلومات النطاق ════════ */
.sdp-range-info{
  background:linear-gradient(135deg,#e8f5e9 0%,#dcedc8 100%);
  padding:12px 16px;
  text-align:center;
  font-size:13px;
  color:#1b5e20;
  font-weight:700;
  border-bottom:1px solid #c8e6c9;
  letter-spacing:0.3px;
}
.sdp-range-info.complete{
  background:linear-gradient(135deg,#386b22 0%,#4a8128 100%);
  color:#fff;
  box-shadow:inset 0 -2px 4px rgba(0,0,0,0.05);
}

/* ════════ الوضع المركزي (للـ modals) ════════ */
.sdp-backdrop{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.50);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  z-index:2147483646;
  animation:sdpBackdropIn .2s ease;
}
@keyframes sdpBackdropIn{from{opacity:0}to{opacity:1}}

.siraj-dp.sdp-centered{
  position:fixed !important;
  z-index:2147483647;
  max-height:90vh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  box-shadow:0 24px 70px rgba(0,0,0,.4);
  animation:sdpPopIn .22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes sdpPopIn{
  from{opacity:0;transform:translate(-50%,-50%) scale(.92)}
  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;
}

/* ════════ Responsive للجوال ════════ */
@media(max-width:480px){
  .siraj-dp{
    width:calc(100vw - 28px);
    max-width:360px;
  }
  .siraj-dp.range-mode{
    width:calc(100vw - 28px);
    max-width:360px;
    flex-direction:column;
  }
  .siraj-dp.range-mode .sdp-quick-sidebar{
    flex-direction:row;
    flex-wrap:wrap;
    border-left:0;
    border-bottom:1px solid #ebe9e3;
    min-width:auto;
    padding:10px;
  }
  .siraj-dp.range-mode .sdp-quick-btn{
    flex:1 1 calc(50% - 4px);
    text-align:center;
    padding:8px 6px;
    font-size:12px;
  }
  .siraj-dp.sdp-centered{
    width:calc(100vw - 24px);
    max-width:360px;
  }
}