/* ===== Guided Tour جولة إرشادية ===== */

/* مخفية افتراضيًا */
.tour-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 9999;
  display: none; /* يظهر عند التشغيل */
}

/* الـ Spotlight يبرز الهدف ويعتم باقي الصفحة عبر box-shadow ضخم */
.tour-spotlight{
  position: fixed;
  border-radius: 14px;
  pointer-events: none;
  box-shadow:
    0 0 0 9999px rgba(0,0,0,.55),  /* التعتيم حول العنصر */
    0 8px 30px rgba(0,0,0,.35);     /* ظل جميل */
  border: 2px solid #ffffff55;
  transition: all .2s ease;
  z-index: 10001;                  /* أعلى من overlay */
  display: none;                   /* يظهر عند التشغيل */
  will-change: top, left, width, height, transform;
}

/* فقاعة الشرح */
.tour-tooltip{
  position: fixed;
  max-width: 320px;
  background: #ffffff;
  color: #000000;
  border: 1px solid var(--stroke, #2b3a60);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 10px 30px #00000050;
  z-index: 10002;                 /* أعلى عنصر في الجولة */
  display: none;                  /* يظهر عند التشغيل */
}
.tour-tooltip h4{
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 900;
}
.tour-tooltip p{
  margin: 0 0 10px;
  color: var(--muted, #a8b4d4);
  line-height: 1.6;
  font-size: 13px;
}

/* أزرار الإجراءات داخل التولتيب */
.tour-actions{
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.tour-actions .btn-xs{
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--stroke, #2b3a60);
  background: #0f1628cc;
  color: #fff;
  cursor: pointer;
  font-weight: 700;
  font-size: 12px;
}
.tour-actions .btn-prim{
  background: linear-gradient(135deg, var(--accent2, #7b5cff), var(--accent, #ba0459));
  border: 0;
}

/* مؤشرات التقدم (النقاط) */
.tour-progress{
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.tour-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff33;
  border: 1px solid #ffffff55;
}
.tour-dot.active{ background: #fff; }

/* نبضة لطيفة لزر المساعدة عند أول زيارة */
#btnHelp.pulse{
  animation: helpPulse 1.2s infinite ease-in-out;
}
@keyframes helpPulse{
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255,255,255,.25); }
  70%  { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(255,255,255,0); }
  100% { transform: scale(1); }
}

/* احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion: reduce){
  .tour-spotlight{ transition: none; }
  #btnHelp.pulse{ animation: none; }
}

/* ===== حالات التفعيل العامة (يضيفها/يحذفها tour.js) ===== */

/* عند بدء الجولة نمنع تمرير الصفحة */
html.tour-open,
body.tour-open{
  overflow: hidden;
}

/* إظهار طبقات الجولة عند وجود كلاس tour-active على body أو html */
.tour-active .tour-overlay,
.tour-active .tour-spotlight,
.tour-active .tour-tooltip{
  display: block;
}