/* لیست تاریخ‌های قابل رزرو */
.std-range-list{display:flex; gap:10px; flex-direction:column; margin-bottom:12px}
.std-range-item{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 12px; border-radius:12px; background:#fff;
  border:2px solid #e5e7eb; cursor:pointer; font-weight:600;
}
.std-range-item .std-range-arrow{opacity:.7; margin:0 8px}
.std-range-item.is-active{border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.std-range-item:disabled, .std-range-item[disabled]{opacity:.5; cursor:not-allowed}

/* تقویم و دکمه‌ها – آبی */
.std-cal-nav button,
.std-reserve-btn{
  border:2px solid #2563eb; color:#2563eb; background:#fff;
}
.std-reserve-btn{padding:10px 14px; border-radius:10px; font-weight:700}
.std-reserve-btn:hover,
.std-cal-nav button:hover{background:rgba(37,99,235,.06)}\
.std-cal-nav button:disabled{opacity:.4; cursor:not-allowed}

.std-cal-title{font-weight:700; margin-bottom:8px}
.std-cal{border:1px solid #eee; border-radius:12px; padding:12px; background:#fcfcfc}
.std-cal-bar{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.std-cal-head{font-weight:700}

/* New: Weekday headers for calendar */
.std-cal-weekdays-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 6px; /* Space between weekdays and days */
  font-weight: 600;
  color: #6b7280; /* Gray color for weekdays */
  text-align: center;
  font-size: 13px;
}
.std-weekday {
  padding: 4px 0;
}

.std-cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px}
.std-day{border:1px dashed #e5e7eb; padding:8px; text-align:center; border-radius:8px; font-size:13px; user-select:none}
.std-day.is-marked{border:1px solid #f59e0b; background:#fff7e6; font-weight:700; cursor:pointer}
.std-day.is-marked.is-selected{outline:2px solid #2563eb; outline-offset:2px}
.std-day.is-empty { /* Style for empty cells (padding) */
  background: none;
  border: none;
  cursor: default;
  font-weight: normal;
  color: transparent;
  pointer-events: none;
}

/* فرم پایین */
.std-form{margin-top:14px; display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:end}
.std-form .std-field{display:flex; flex-direction:column; gap:6px}
.std-selected{font-size:14px; color:#333; background:#f8fafc; border:1px solid #e5e7eb; padding:10px; border-radius:8px}\
.std-total{font-weight:800}
@media(max-width:800px){ .std-form{grid-template-columns:1fr} }

/* ==== لیست تاریخ‌ها (بالای تقویم) ==== */
.std-range-list{
  display:flex; gap:10px; flex-direction:column; margin-bottom:12px;
  /* NEW: Scrollable list with fade */
  max-height: 160px; /* Adjust as needed, e.g., for 3 items + half of 4th */
  overflow-y: auto;
  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}
.std-range-item{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 12px; border-radius:12px; background:#fff;
  border:2px solid #e5e7eb;
  color:#6b7280; /* خاکستری */
  cursor:pointer; font-weight:600;
  transition:all .15s ease;
}
.std-range-item .std-range-arrow{opacity:.7; margin:0 8px}
.std-range-item:hover{border-color:#94a3b8; color:#374151; background:#f9fafb}
.std-range-item.is-active{
  border-color:#2563eb;           /* آبی انتخاب‌شده */
  color:#2563eb;                   /* متن آبی */
  background:#eff6ff;              /* آبی خیلی کم‌رنگ */
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
.std-range-item:disabled,
.std-range-item[disabled]{opacity:.5; cursor:not-allowed}

/* ==== دکمه رزرو تور آبی با متن سفید ==== */
.std-reserve-btn{
  padding:10px 14px; border-radius:10px; font-weight:700;
  background:#2563eb;             /* آبی */
  color:#fff;                     /* متن سفید */
  border:2px solid #2563eb;
}
.std-reserve-btn:hover{background:#1d4ed8; border-color:#1d4ed8}
.std-reserve-btn:disabled{
  background:#93c5fd; border-color:#93c5fd; color:#fff; opacity:.7; cursor:not-allowed
}

/* (اگر می‌خوای دکمه‌های ماه قبل/بعد مثل قبل بمانند، نیاز به تغییر ندارند) */
/* ====== دکمه رزرو تور: آبی با متن سفید + هاور آبی پررنگ ====== */
.std-box .std-reserve-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 16px; border-radius:10px; font-weight:700;
  background:#2563eb !important;           /* آبی */
  color:#fff !important;                    /* متن سفید */
  border:2px solid #2563eb !important;
  transition:all .15s ease;
}
.std-box .std-reserve-btn:hover:not(:disabled){
  background:#1d4ed8 !important;            /* آبی پررنگ در هاور */
  border-color:#1d4ed8 !important;
  color:#fff !important;
}
.std-box .std-reserve-btn:disabled{
  background:#93c5fd !important;
  border-color:#93c5fd !important;
  color:#fff !important;
  opacity:.75; cursor:not:disabled;
}

/* ====== دکمه‌های ماه قبل/بعد: هاور با زمینه آبی ====== */
.std-box .std-cal-nav button{
  border:2px solid #2563eb; color:#2563eb; background:#fff;
  border-radius:10px; padding:8px 12px; transition:all .15s ease;
}
.std-box .std-cal-nav button:hover:not(:disabled){
  background:#2563eb; color:#fff;
}
.std-box .std-cal-nav button:disabled{
  opacity:.45; cursor:not(:disabled);
}

/* ====== آیتم‌های لیست تاریخ‌ها (بالای تقویم) ====== */
.std-box .std-range-item{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 12px; border-radius:12px; background:#fff;
  border:2px solid #e5e7eb; color:#6b7280;
  cursor:pointer; font-weight:600; transition:all .15s ease;
}
.std-box .std-range-item:hover{
  background:#2563eb; color:#fff; border-color:#2563eb;
}
.std-box .std-range-item.is-active{
  border-color:#2563eb; color:#2563eb; background:#eff6ff;
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
.std-box .std-range-item.is-active:hover{
  background:#2563eb; color:#fff; border-color:#2563eb;
}
/* ترتیب نمایش در لیست تاریخ‌ها: رفت (چپ) → برگشت (راست) */
.std-box .std-range-item { direction: ltr; }          /* فقط همین خط کافیه */

/* دلخواه: اگر تم استایل‌های flex رو تغییر داد، این‌ها تضمین می‌کنند ترتیب همینه */
.std-box .std-range-left  { order: 1; }
.std-box .std-range-arrow { order: 2; margin: 0 8px; }
.std-box .std-range-right { order: 3; }