/* DS — تقويم اختيار التاريخ (يحل محل منتقي التاريخ الافتراضي للمتصفح) */

.ds-date-field{position:relative;display:block}
.ds-date-field .ds-date-native{position:absolute;inset:0;opacity:0;pointer-events:none;width:1px;height:1px}

.ds-date-display{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
  box-sizing:border-box;cursor:pointer;user-select:none;
  font:inherit;color:var(--text);background:var(--surface);
  border:1px solid var(--line);border-radius:10px;padding:9px 12px;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.ds-date-display:hover{border-color:var(--green-600,var(--line))}
.ds-date-display.is-open,.ds-date-display:focus-visible{
  outline:none;border-color:var(--green-700);box-shadow:0 0 0 3px color-mix(in srgb, var(--green-700) 16%, transparent);
}
.ds-date-display .ds-date-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-date-display .ds-date-text.is-placeholder{color:var(--muted)}
.ds-date-display .ds-date-icon{flex:0 0 auto;width:17px;height:17px;color:var(--green-700);opacity:.85}
.ds-date-display .ds-date-icon svg{width:100%;height:100%;display:block}

.ds-datepicker-popup{
  position:fixed;z-index:1400;width:288px;background:var(--surface);border:1px solid var(--line);
  border-radius:16px;box-shadow:0 18px 44px rgba(15,23,42,.18);padding:12px;
  opacity:0;transform:translateY(-6px) scale(.98);pointer-events:none;
  transition:opacity .14s ease,transform .14s ease;
}
.ds-datepicker-popup.is-open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}

.ds-dp-head{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:10px}
.ds-dp-nav{
  width:30px;height:30px;border-radius:9px;border:1px solid var(--line);background:var(--surface-soft);
  color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;
  transition:background .12s ease,color .12s ease;
}
.ds-dp-nav:hover{background:var(--green-700);color:#fff;border-color:var(--green-700)}
.ds-dp-nav svg{width:15px;height:15px}
.ds-dp-title{
  flex:1;text-align:center;font-weight:800;font-size:14px;color:var(--text);cursor:pointer;
  border-radius:8px;padding:5px 6px;transition:background .12s ease;
}
.ds-dp-title:hover{background:var(--surface-soft)}

.ds-dp-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.ds-dp-weekdays span{text-align:center;font-size:11px;font-weight:700;color:var(--muted);padding:4px 0}

.ds-dp-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.ds-dp-day{
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;border-radius:9px;
  font-size:13px;cursor:pointer;color:var(--text);border:1px solid transparent;background:transparent;
  transition:background .12s ease,color .12s ease;
}
.ds-dp-day:hover{background:var(--surface-soft);border-color:var(--line)}
.ds-dp-day.is-outside{color:var(--muted);opacity:.45}
.ds-dp-day.is-today{border-color:var(--green-700);font-weight:800;color:var(--green-700)}
.ds-dp-day.is-selected{background:var(--green-700);color:#fff;font-weight:800;border-color:var(--green-700)}
.ds-dp-day.is-selected.is-today{box-shadow:0 0 0 3px var(--green-100)}

.ds-dp-grid-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:4px}
.ds-dp-grid-picker button{
  padding:9px 4px;border-radius:9px;border:1px solid var(--line);background:var(--surface-soft);
  color:var(--text);font-size:13px;font-weight:600;cursor:pointer;transition:background .12s ease,color .12s ease;
}
.ds-dp-grid-picker button:hover{background:var(--green-700);color:#fff;border-color:var(--green-700)}
.ds-dp-grid-picker button.is-current{border-color:var(--green-700);color:var(--green-700);font-weight:800}

.ds-dp-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.ds-dp-foot button{
  border:none;background:none;color:var(--green-700);font-size:12.5px;font-weight:700;cursor:pointer;
  padding:5px 8px;border-radius:7px;transition:background .12s ease;
}
.ds-dp-foot button:hover{background:var(--surface-soft)}
.ds-dp-foot button.ds-dp-clear{color:var(--danger)}

@media (max-width:480px){
  .ds-datepicker-popup{width:264px}
}