.date-field{display:block;position:relative}
.modal .date-label{display:block;color:#63748a;font-size:11px;font-weight:700;margin-bottom:17px}
.modal .date-label small{font-weight:400;color:#aab4c0}
.modal input[type=hidden]{display:none}
.modal .date-field .jalali-display{cursor:pointer;padding-left:38px;background:#fff}
.date-icon{position:absolute;left:12px;top:19px;color:#8fa6c4;pointer-events:none;font-size:16px}
.jalali-calendar{position:absolute;z-index:30;top:calc(100% + 6px);right:0;width:290px;max-width:calc(100vw - 48px);background:#fff;border:1px solid #e2e9f3;border-radius:12px;padding:13px;box-shadow:0 16px 40px #223b5e2b;direction:rtl;font-weight:400}
.jalali-calendar[hidden]{display:none}
.calendar-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px;color:#304663}
.calendar-head strong{font-size:12px}
.calendar-head button,.calendar-foot button{border:0;background:#eef3fb;color:#537cb6;border-radius:7px;padding:4px 9px}
.calendar-head button{font-size:20px;line-height:1}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center;align-items:center}
.calendar-grid .weekday{font-size:10px;color:#9aaabc;margin-bottom:5px}
.calendar-day{height:32px;min-width:0;border:0;background:transparent;border-radius:7px;color:#42556e;font-size:11px}
.calendar-day:hover{background:#eaf1fe}
.calendar-day.today{outline:1px solid #8caee7}
.calendar-day.selected{background:#4d80d9;color:#fff;outline:0}
.calendar-foot{display:flex;justify-content:space-between;border-top:1px solid #edf1f6;margin-top:10px;padding-top:10px}
.calendar-foot button{font-size:10px;background:transparent}
.calendar-foot button:hover{background:#eef3fb}
.modal{overflow:visible}
@media(max-width:700px){.jalali-calendar{right:0;width:270px}}