/* =====================================================================
 *  منتقي الموعد المشترك (تقويم شهر + ساعات اليوم) — public_html/assets/css/slot_picker.css
 *  ملاحظات 4/10 (portal3): نفس الستايل لصفحة الحجز ولتعديل الموعد في بوابة المريض
 *  (المكوّن: /assets/js/slot_picker.js). الألوان من متغيّرات الصفحة مع قيمة احتياطية.
 * ===================================================================== */
.sp .nw, .nw{ white-space:nowrap; }

/* ---- التقويم ---- */
.cal-card{ padding:20px; }
.cal-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:14px; }
.cal-title{ flex:1 1 auto; text-align:center; font-family:inherit; font-weight:800; font-size:1.35rem; color:var(--navy,#001440); line-height:1.4; }
.cal-nav{
  display:inline-flex; align-items:center; gap:8px; min-height:50px; padding:6px 16px;
  border:2px solid var(--blue,#1e4fa8); border-radius:13px; background:#fff; color:var(--blue,#1e4fa8);
  font-family:inherit; font-weight:800; font-size:.94rem; cursor:pointer; transition:.15s; flex:0 0 auto;
}
.cal-nav .ico{ display:flex; align-items:center; justify-content:center; }
.cal-nav svg{ width:24px; height:24px; display:block; }
.cal-nav:hover:not(:disabled){ background:var(--blue,#1e4fa8); color:#fff; }
.cal-nav:disabled{ border-color:var(--line,#e6ebf3); color:#b9c1cf; cursor:not-allowed; }
.cal-nav:focus-visible, .cal-day:focus-visible, .slot-opt:focus-visible{ outline:3px solid var(--blue-2,#3f6fd6); outline-offset:2px; }
@media (max-width:600px){
  /* موبايل: سهم كبير في دايرة واسمه تحته */
  .cal-nav{ flex-direction:column; gap:2px; border:0; padding:0; min-width:70px; min-height:0; font-size:.72rem; background:none; }
  .cal-nav.next{ flex-direction:column-reverse; }
  .cal-nav .ico{ width:48px; height:48px; border-radius:50%; border:2px solid currentColor; background:#fff; }
  .cal-nav:hover:not(:disabled){ background:none; color:var(--blue,#1e4fa8); }
  .cal-nav:active:not(:disabled) .ico{ background:var(--blue,#1e4fa8); color:#fff; border-color:var(--blue,#1e4fa8); }
  .cal-title{ font-size:1.22rem; }
}

.cal-wd, .cal-grid{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:6px; }
.cal-wd span{ text-align:center; font-size:.8rem; font-weight:700; color:var(--ink-2,#41506b); padding-bottom:6px; white-space:nowrap; }
.cal-grid{ transition:opacity .15s; min-height:120px; }
.cal-grid.busy{ opacity:.4; pointer-events:none; }
.cal-day{
  min-height:58px; border-radius:12px; border:2px solid transparent; background:none; padding:2px 0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.15;
  font-family:inherit; color:#8b96aa; cursor:default; transition:background .12s, border-color .12s;
}
.cal-day .n{ font-size:1.14rem; font-weight:600; }
.cal-day .s{ font-size:.62rem; font-weight:800; color:#b3264a; margin-top:1px; white-space:nowrap; }
.cal-day.is-available{ background:#e1f5e9; border-color:#86cfa5; color:#0a5a31; cursor:pointer; }
.cal-day.is-available .n{ font-weight:800; font-size:1.22rem; }
.cal-day.is-available:hover{ background:#c6ecd5; border-color:var(--ok,#0f9d58); }
.cal-day.is-full{ background:#f0f2f6; color:#7b8699; }
.cal-day.is-full .n{ font-size:1rem; }
.cal-day.is-today{ border-color:var(--gold,#c9a24b); }
/* موعد المريض الحالي (تعديل الموعد) */
.cal-day.is-current{ border-color:var(--blue,#1e4fa8); border-style:dashed; }
.cal-day.sel, .cal-day.sel:hover{ background:var(--navy,#001440); border-color:var(--navy,#001440); border-style:solid; color:#fff; box-shadow:0 6px 14px rgba(0,20,64,.3); }
.cal-day.sel.is-today{ border-color:var(--gold,#c9a24b); }
.cal-skel{ min-height:58px; border-radius:12px; background:#eef1f6; animation:calpulse 1.1s ease-in-out infinite; }
@keyframes calpulse{ 50%{ opacity:.45; } }
.cal-loading{ text-align:center; color:var(--ink-2,#41506b); font-size:.9rem; font-weight:600; min-height:1.7em; margin-top:8px; }

.cal-legend{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px; margin-top:12px; font-size:.84rem; font-weight:700; color:var(--ink-2,#41506b); }
.cal-legend span{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.cal-legend i{ width:20px; height:20px; border-radius:6px; border:2px solid transparent; display:inline-block; }
.cal-legend .lg-av{ background:#e1f5e9; border-color:#86cfa5; }
.cal-legend .lg-full{ background:#f0f2f6; border-color:#d5dae4; }
.cal-legend .lg-off{ background:#fff; border-color:#e3e7ee; border-style:dashed; }
.cal-legend .lg-today{ background:#fff; border-color:var(--gold,#c9a24b); }
.cal-legend .lg-cur{ background:#fff; border-color:var(--blue,#1e4fa8); border-style:dashed; }
.cal-limit{
  margin-top:12px; text-align:center; font-size:.9rem; font-weight:700; color:#7a5c12;
  background:#fff8e6; border:1px solid #ecd28c; border-radius:11px; padding:8px 12px;
}
.cal-msg .full-box{ margin-top:14px; }

/* رسالة «المواعيد مكتملة» + التواصل */
.full-box{ text-align:center; padding:26px 14px; background:#fff7f8; border:1px dashed #f1c3ce; border-radius:14px; }
.full-box .fb-ic{ font-size:2rem; margin-bottom:6px; }
.full-box h3{ font-family:inherit; color:var(--navy,#001440); font-size:1.14rem; margin-bottom:6px; }
.full-box p{ color:var(--ink-2,#41506b); font-size:.96rem; margin-bottom:14px; }
.full-box .fb-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* ---- الساعات ---- */
.times-card{ margin-top:14px; scroll-margin-top:74px; }
.times-card h2, .times-title{ font-size:1.18rem; margin-bottom:14px; line-height:1.5; color:var(--navy,#001440); font-family:inherit; }
.times-title:focus{ outline:0; }
.slots-wrap{ min-height:90px; }
.slots-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:10px; }
.slot-opt{
  border:2px solid var(--line,#e6ebf3); border-radius:12px; padding:8px 4px; text-align:center; cursor:pointer;
  background:#fff; font-weight:700; color:var(--navy,#001440); transition:.18s; font-size:1.1rem;
  min-height:56px; white-space:nowrap; font-family:inherit; width:100%;
}
.slot-opt:hover{ border-color:var(--blue-2,#3f6fd6); background:var(--sky-2,#eef4ff); }
.slot-opt.sel{ border-color:var(--blue,#1e4fa8); background:var(--navy,#001440); color:#fff; }
.slot-opt.is-current, .slot-opt.is-current:hover{ border-style:dashed; border-color:var(--blue,#1e4fa8); background:#f4f7fc; color:var(--ink-2,#41506b); cursor:default; }
.slot-opt small{ display:block; font-size:.66rem; font-weight:700; line-height:1.3; }
.slot-group-t{ font-weight:800; color:var(--ink-2,#41506b); font-size:.95rem; margin:16px 0 8px; }
.slot-group-t:first-child{ margin-top:0; }

.sp .loading, .sp .empty-state{ text-align:center; padding:40px 20px; color:var(--ink-2,#41506b); }
.sp .spinner{
  width:38px; height:38px; border:3px solid var(--sky,#dbeafe); border-top-color:var(--blue,#1e4fa8);
  border-radius:50%; animation:spspin .8s linear infinite; margin:0 auto 14px;
}
@keyframes spspin{ to{ transform:rotate(360deg); } }

@media (max-width:480px){
  .cal-card{ padding:16px 6px 14px; }
  .cal-head{ padding-inline:6px; }
  .cal-wd, .cal-grid{ gap:3px; }
  .cal-wd span{ font-size:.7rem; }
  .cal-day, .cal-skel{ min-height:52px; border-radius:10px; }
  .cal-day .s{ font-size:.58rem; }
  .cal-legend{ gap:6px 12px; font-size:.8rem; padding-inline:6px; }
  .cal-limit{ margin-inline:6px; }
  .slots-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
  .slot-opt{ font-size:1.05rem; }
}
@media (prefers-reduced-motion: reduce){ .cal-skel{ animation:none; } }