.jdate-wrap{position:relative;display:inline-block;width:100%;border-radius: 12px;}
.jdate-popup{position:absolute;z-index:1000;top:100%;right:0;background:#fff;border:1px solid #dee2e6;border-radius:.5rem;box-shadow:0 4px 24px rgba(0,0,0,.08);padding:.5rem;min-width:280px;direction:rtl}
.jdate-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}
.jdate-month{font-weight:600}
.jdate-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.25rem}
.jdate-cell{padding:.45rem;text-align:center;border-radius:.4rem;cursor:pointer}
.jdate-cell:hover{background:#f1f3f5}
.jdate-cell.muted{opacity:.4}
.jdate-cell.active{background:#0d6efd;color:#fff}
.jdate-weekday{font-weight:bold;color:#cdd6df}


/* ---------- تم و سایه کارت ---------- */
.jdate-popup{
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  padding: .75rem;
  min-width: 250px;        /* کمی عریض‌تر از قبل */
  transition: transform .12s ease, opacity .12s ease;
  transform-origin: top right;
}

/* وقتی نمایش داده میشه، کمی انیمیشن لطیف */
.jdate-popup[style*="display: block"]{
  transform: scale(1);
  opacity: 1;
}

/* ---------- هدر (ماه/سال + دکمه‌های قبلی/بعدی) ---------- */
.jdate-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .2rem;
  margin-bottom: .5rem;
}
.jdate-month{
  font-weight: 800;
  font-size: .95rem;
  color: #111827;
  letter-spacing: .1px;
}
.jdate-header .btn{
  border-radius: 10px;
  padding: .3rem .55rem;
  line-height: 1;
  border-color: #e5e7eb !important;
  background: #f8fafc;
  color: #111827;
}
.jdate-header .btn:hover{
  background: #eef2f7;
}

/* ---------- گرید روزها ---------- */
.jdate-grid{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .35rem;   
  color: #9ba3b4;              /* فاصله‌ی بیشتر برای تنفس */
}

/* نام روزهای هفته */
.jdate-weekday{
  font-weight: 700;
  color: #9ba3b4;
  font-size: .8rem;
}

/* سلول‌ها */
.jdate-cell{
  padding: .5rem .35rem;
  text-align: center;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
  user-select: none;
  font-size: .92rem;
}
.jdate-cell:hover{
  background: #f3f4f6;
}
.jdate-cell.muted{
  opacity: .45;
}
.jdate-cell.active{
  background: #2563eb;
  color: #fff;
  box-shadow: 0 0 0 2px rgba(37,99,235,.15) inset;
}

/* امروز (در JS علامت می‌زنیم) */
.jdate-cell.today{
  box-shadow: 0 0 0 2px #2563eb inset;
  font-weight: 800;
}

/* ---------- ورودی با آیکن تقویم (RTL) ---------- */
.jdate-wrap input.jdate,
.jdate-wrap input[data-jdate="1"]{
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='5' width='18' height='16' rx='3' stroke='%236b7280' stroke-width='1.5'/%3E%3Cpath d='M8 3v4M16 3v4' stroke='%236b7280' stroke-width='1.5'/%3E%3Cpath d='M3 9h18' stroke='%236b7280' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left .6rem center;   /* چون متن راست‌چین است، آیکن سمت چپ باشد */
  padding-left: 2rem;
}

/* فوکوس ورودی‌ها: حلقه‌ی ظریف */
.jdate-wrap input:focus{
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .18);
  border-color: #93c5fd;
}

/* ---------- بهینگی موبایل ---------- */
@media (max-width: 576px){
  .jdate-popup{
    right: .5rem !important;
    left: .5rem !important;
    min-width: auto;
    width: auto;
  }
  .jdate-grid{ gap: .3rem; }
  .jdate-cell{ padding: .45rem .25rem; font-size: .9rem; }
}

/* حالت تیره اختیاری (اگر بعداً خواستی تم دارک بسازی) */
@media (prefers-color-scheme: dark){
  .jdate-popup{
    background: #0b1220;
    border-color: #1f2937;
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
  }
  .jdate-month{ color: #e5e7eb; }
  .jdate-header .btn{ background:#0f172a; color:#e5e7eb; border-color:#1f2937 !important; }
  .jdate-header .btn:hover{ background:#111827; }
  .jdate-weekday{ color:#9ca3af; }
  .jdate-cell:hover{ background:#0f172a; }
  .jdate-cell.active{ background:#2563eb; color:#fff; }
  .jdate-cell.today{ box-shadow: 0 0 0 2px #60a5fa inset; }
}



/* فقط خود فیلد تاریخ (ورودی) */
.jdate-wrap input.jdate,
.jdate-wrap input[data-jdate="1"]{
  border-radius: 12px;            /* گوشه‌گرد */
  border: 1px solid #e5e7eb;      /* مرز لطیف */
  background-color: #ffffff;      /* زمینه سفید */
  color: #111827;                 /* رنگ متن */
  padding: .45rem .75rem;         /* فاصله داخلی */
  line-height: 1.4;
  height: 34px;                   /* هم‌قد دکمه‌های sm بوت‌استرپ */
  font-size: .95rem;              /* بزرگ‌تر از 16px برای iOS (جلوگیری از زوم) */
  direction: rtl;                 /* راست‌چین */
  text-align: left;               /* عددها مرتب دیده بشن */
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='5' width='18' height='16' rx='3' stroke='%236b7280' stroke-width='1.5'/%3E%3Cpath d='M8 3v4M16 3v4' stroke='%236b7280' stroke-width='1.5'/%3E%3Cpath d='M3 9h18' stroke='%236b7280' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left .6rem center;  /* آیکن سمت چپ */
  padding-left: 2rem;                       /* جا برای آیکن */
}

/* هاور و فوکوس */
.jdate-wrap input.jdate:hover,
.jdate-wrap input[data-jdate="1"]:hover{
  border-color: #cbd5e1;
}
.jdate-wrap input.jdate:focus,
.jdate-wrap input[data-jdate="1"]:focus{
  outline: none;
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(37,99,235,.18);
}

/* Placeholder کم‌رنگ‌تر */
.jdate-wrap input.jdate::placeholder,
.jdate-wrap input[data-jdate="1"]::placeholder{
  color: #9ca3af;
}

/* حالت غیر فعال */
.jdate-wrap input.jdate:disabled,
.jdate-wrap input[data-jdate="1"]:disabled{
  background-color: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
}

/* موبایل: کمی جمع‌وجورتر */
@media (max-width: 576px){
  .jdate-wrap input.jdate,
  .jdate-wrap input[data-jdate="1"]{
    height: 32px;
    font-size: 16px; /* برای iOS جلوگیری از زوم */
  }
}


/* رفع مشکل نصفه رندر شدن پس‌زمینه پاپ‌آپ در iOS */
.jdate-popup{
  background: #fff !important;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  /* مهم: انیمیشن/ترنسفورم حذف شود */
  transform: none !important;
  opacity: 1 !important;
  /* کمک به رندر تمیز لبه‌ها */
  background-clip: padding-box;
  /* مطمئن شو عرض به اندازه محتواست */
  width: max-content;
  min-width: 280px;
  direction: rtl;
}

/* اگر قبلاً این سلکتور رو گذاشتیم، بی‌اثر بشه */
.jdate-popup[style*="display: block"]{
  transform: none !important;
  opacity: 1 !important;
}

/* اختیاری: در بعضی نسخه‌های iOS کمک می‌کند */
.jdate-popup{
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: auto;
  overflow: visible; /* مطمئن شو چیزی کلیپ نمی‌شود */
}


.jdate-popup{ transition: opacity .12s ease; }
.jdate-popup[style*="display: block"]{ opacity: 1; }