/* assets/css/visit-calendar.css — تقویم انتخاب روز و ساعت بازدید
   ---------------------------------------------------------------------------
   رنگ‌ها همه از توکن‌های تم می‌آیند (--tm-*) و fallback روشن دارند تا در «تم
   پیش‌فرض» همان ظاهر قبلی حفظ شود. پیش‌تر سطوح #fff هاردکد بودند؛ نتیجه در تم
   تیره یک جعبهٔ سفید وسط صفحهٔ تیره بود که با بقیهٔ سایت هماهنگ نبود.
   --------------------------------------------------------------------------- */
.vc-root {
  --vc-surface: var(--tm-surface, #fff);
  --vc-input: var(--tm-input, #f8fafc);
  --vc-border: var(--tm-border, rgba(148,163,184,.28));
  --vc-ink: var(--tm-ink, #0f172a);
  --vc-muted: var(--tm-muted, #64748b);
  --vc-muted-strong: var(--tm-muted-strong, #64748b);
  --vc-chip: var(--tm-chip, rgba(91,69,232,.08));
  --vc-brand: var(--brand, #5b45e8);
  --vc-brand-ink: var(--brand-ink, #5b45e8);
  background: var(--vc-surface);
  border: 1px solid var(--vc-border);
  border-radius: 18px;
  padding: .9rem .95rem 1rem;
  user-select: none;
  color: var(--vc-ink);
}

/* --- سربرگ ماه --- */
.vc-head { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.65rem; }
.vc-title { font-weight:800; color:var(--vc-ink); font-size:.95rem; display:flex; align-items:center; gap:.4rem; }
.vc-title small { font-weight:600; color:var(--vc-muted-strong); font-size:.7rem; }
.vc-today-btn { border:0; background:none; color:var(--vc-brand-ink); font:inherit; font-size:.72rem; font-weight:700; cursor:pointer; padding:.15rem .3rem; border-radius:8px; }
.vc-today-btn:hover { background:var(--vc-chip); }
.vc-nav {
  width:34px; height:34px; border-radius:12px; border:1px solid var(--vc-border);
  background:var(--vc-surface); color:var(--vc-brand-ink); display:grid; place-items:center;
  cursor:pointer; transition:all .18s ease;
}
.vc-nav:hover { border-color:var(--vc-brand); background:var(--vc-chip); }
.vc-nav:disabled { opacity:.45; cursor:not-allowed; }

/* --- روزهای هفته --- */
.vc-week { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:4px; }
.vc-week span { text-align:center; font-size:.7rem; font-weight:700; color:var(--vc-muted-strong); padding:.2rem 0; }

/* --- شبکهٔ روزها --- */
.vc-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.vc-day {
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  min-height:54px; border-radius:12px; border:1px solid transparent; background:var(--vc-input);
  color:var(--vc-ink); font:inherit; cursor:pointer; transition:all .15s ease; padding:.25rem .1rem;
}
.vc-day b { font-size:.86rem; line-height:1.2; }
.vc-day small { font-size:.6rem; color:var(--vc-muted-strong); font-weight:700; line-height:1.2; }
.vc-day:hover:not(.off):not(:disabled) { border-color:var(--vc-brand); background:var(--vc-chip); }
.vc-day.today { border-color:var(--vc-brand); }
.vc-day.today::after { content:''; position:absolute; top:4px; inset-inline-end:4px; width:5px; height:5px; border-radius:50%; background:var(--vc-brand); }
.vc-day.has-slots small { color:var(--vc-brand-ink); }
.vc-day.selected {
  border-color:var(--vc-brand);
  background:var(--vc-chip);
  box-shadow:0 0 0 2px var(--vc-chip);
}
.vc-day.selected b { color:var(--vc-brand-ink); }
.vc-day.full small { color:#e11d48; }
.vc-day.off { background:color-mix(in srgb, var(--vc-input) 55%, transparent); color:var(--vc-muted); opacity:.55; cursor:not-allowed; }
.vc-day.off small { color:var(--vc-muted); }
.vc-day.off::after { display:none; }

/* --- انتخاب ساعت --- */
.vc-slots { margin-top:.7rem; }
.vc-slots-head { font-size:.74rem; font-weight:700; color:var(--vc-muted-strong); margin-bottom:.4rem; }
.vc-slot-row { display:flex; flex-wrap:wrap; gap:.4rem; }
.vc-slot {
  display:inline-flex; align-items:center; gap:.3rem; border:1px solid var(--vc-border);
  background:var(--vc-input); color:var(--vc-ink); border-radius:999px;
  padding:.34rem .8rem; font:inherit; font-size:.78rem; font-weight:700; cursor:pointer; transition:all .15s ease;
}
.vc-slot i { font-size:.72rem; color:var(--vc-muted-strong); }
.vc-slot:hover:not(:disabled) { border-color:var(--vc-brand); background:var(--vc-chip); }
.vc-slot.selected { background:var(--vc-brand); border-color:var(--vc-brand); color:#fff; }
.vc-slot.selected i { color:rgba(255,255,255,.85); }
.vc-slot.full, .vc-slot:disabled { opacity:.5; cursor:not-allowed; text-decoration:line-through; }
.vc-slots-empty { font-size:.75rem; color:var(--vc-muted-strong); }

/* --- پانوشت --- */
.vc-foot { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-top:.7rem; border-top:1px dashed var(--vc-border); padding-top:.6rem; }
.vc-status { font-size:.76rem; color:var(--vc-muted-strong); }
.vc-clear { border:1px dashed var(--vc-border); background:var(--vc-surface); color:var(--vc-ink); border-radius:999px; padding:.3rem .8rem; font:inherit; font-size:.75rem; cursor:pointer; }
.vc-clear:hover:not(:disabled) { border-color:#ef4444; color:#ef4444; }
.vc-clear:disabled { opacity:.5; cursor:not-allowed; }

/* --- حالت فشرده (ستون کنار صفحهٔ ملک) --- */
.consult-visit { display:flex; flex-direction:column; gap:.35rem; margin-top:.2rem; }
.consult-visit input[readonly] { background:var(--vc-input); cursor:pointer; border:1px solid var(--vc-border); border-radius:11px; padding:.6rem .8rem; font:inherit; font-size:.86rem; color:var(--vc-ink); width:100%; }
.consult-visit input[readonly]:focus { border-color:var(--vc-brand); outline:none; }

/* --- کارت «وقت بازدید» در ستون کنار صفحهٔ ملک --- */
.pd-sec-visit .visit-note { color:var(--tm-muted-strong,#64748b); font-size:.82rem; line-height:1.9; margin:0 0 .7rem; }
.pd-sec-visit .visit-actions { margin-top:.8rem; }
.pd-sec-visit .visit-hint { color:var(--tm-muted-strong,#64748b); font-size:.75rem; margin:.55rem 0 0; line-height:1.8; }

/* خلاصهٔ زمان انتخاب‌شده در کارت (به‌جای تقویمِ باز که چیدمان را می‌کشید) */
.visit-picked { display:flex; align-items:center; gap:.5rem; border:1px dashed var(--tm-border,rgba(148,163,184,.35)); background:var(--tm-input,var(--vc-input)); color:var(--tm-ink,var(--vc-ink)); border-radius:12px; padding:.6rem .8rem; font-size:.84rem; line-height:1.8; }
.visit-picked i { color:var(--vc-brand-ink,var(--vc-brand,#5b45e8)); }
.visit-picked span { font-weight:700; }

/* دکمهٔ تمام‌عرض «انتخاب زمان بازدید» (در ویندوز/موبایل کشیده نمی‌شود) */
.visit-open-btn { width:100%; display:inline-flex; align-items:center; justify-content:center; gap:.45rem; border:1px solid var(--tm-border,rgba(148,163,184,.35)); border-radius:999px; padding:.7rem 1rem; font:inherit; font-weight:700; font-size:.88rem; color:var(--vc-brand-ink,var(--vc-brand,#5b45e8)); background:var(--tm-surface,#fff); cursor:pointer; transition:border-color .2s ease, transform .25s cubic-bezier(.32,.72,0,1), color .2s ease; }
.visit-open-btn:hover { border-color:var(--vc-brand,#5b45e8); transform:translateY(-2px); }

/* --- مودال تقویم وقت بازدید --- */
.visit-modal { display:none; position:fixed; inset:0; background:rgba(15,23,42,.55); z-index:205; justify-content:center; align-items:center; overflow-y:auto; padding:1.1rem; }
.visit-modal.open { display:flex; }
.visit-modal-card { width:min(560px,100%); max-height:92vh; overflow-y:auto; background:var(--tm-surface,#fff); border:1px solid var(--tm-border,rgba(148,163,184,.22)); border-radius:22px; box-shadow:0 30px 70px rgba(15,23,42,.35); }
.visit-modal-head { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:.9rem 1rem; background:var(--tm-surface,#fff); border-bottom:1px solid var(--tm-border,rgba(148,163,184,.2)); }
.visit-modal-head strong { display:flex; align-items:center; gap:.45rem; font-size:.98rem; color:var(--tm-ink,var(--ink)); }
.visit-modal-head strong i { color:var(--vc-brand-ink,var(--vc-brand,#5b45e8)); }
.visit-modal-close { width:34px; height:34px; border:0; border-radius:10px; background:var(--tm-chip,rgba(148,163,184,.14)); color:var(--tm-ink,var(--ink)); cursor:pointer; font-size:1rem; }
.visit-modal-body { padding:.9rem 1rem 1.1rem; }
.visit-modal-body input[readonly] { width:100%; background:var(--tm-input,var(--vc-input)); border:1px solid var(--tm-border,rgba(148,163,184,.3)); border-radius:11px; padding:.6rem .8rem; font:inherit; font-size:.86rem; color:var(--tm-ink,var(--vc-ink)); margin-bottom:.7rem; }
.visit-modal-note { color:var(--tm-muted-strong,#64748b); font-size:.75rem; line-height:1.85; margin:.6rem 0 0; }
.visit-modal-actions { display:flex; gap:.5rem; margin-top:.9rem; }
.visit-modal-done, .visit-modal-clear { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; border-radius:12px; padding:.7rem .9rem; font:inherit; font-weight:700; font-size:.85rem; cursor:pointer; }
.visit-modal-done { border:0; color:#fff; background:linear-gradient(135deg,var(--brand),var(--brand-2)); }
.visit-modal-clear { border:1px dashed var(--tm-border,rgba(148,163,184,.4)); background:var(--tm-surface,#fff); color:var(--tm-ink,var(--ink)); }

/* --- خلاصهٔ وقت بازدید داخل مودال مشاوره --- */
/* خلاصهٔ «وقت بازدید انتخابی» تا وقتی زمانی انتخاب نشده نباید دیده شود؛
   display:flex این عنصر، ویژگی hidden را بی‌اثر می‌کرد. */
.consult-visit-summary[hidden] { display:none !important; }
.consult-visit-summary { display:flex; align-items:center; gap:.5rem; border:1px solid var(--vc-border); background:var(--vc-chip); border-radius:12px; padding:.55rem .75rem; font-size:.82rem; color:var(--vc-ink); }
.consult-visit-summary i { color:var(--vc-brand-ink,var(--vc-brand)); }
.consult-visit-summary b { color:var(--vc-brand-ink,var(--vc-brand)); }
.consult-visit-clear { margin-inline-start:auto; border:0; background:none; color:var(--vc-muted-strong); cursor:pointer; font-size:.9rem; padding:.15rem .35rem; border-radius:8px; }
.consult-visit-clear:hover { color:#ef4444; }

@media (max-width:520px) {
  .vc-day { min-height:46px; border-radius:10px; }
  .vc-day b { font-size:.8rem; }
  .vc-day small { font-size:.55rem; }
  .vc-root { padding:.75rem .7rem .85rem; }
}

/* موبایل و تبلت: مودال تقویم مثل شیت پایین صفحه باز می‌شود تا هیچ‌جای چیدمان
   کشیده یا سرریز نشود (قبلاً تقویم بازِ داخل کارت، ارتفاع موبایل را می‌ترکاند) */
@media (max-width:960px) {
  .visit-modal { padding:0; align-items:flex-end; }
  .visit-modal-card { width:100%; max-height:94vh; border-radius:22px 22px 0 0; }
  .visit-modal-actions { position:sticky; bottom:0; background:var(--tm-surface,#fff); padding-top:.6rem; padding-bottom:.2rem; }
}
@media (max-width:380px) {
  .visit-modal-done, .visit-modal-clear { font-size:.8rem; padding:.65rem .6rem; }
}