/* ========================================
   Guided tour (scripts/tour.js)
======================================== */

.tour-layer {
  position: fixed;
  inset: 0;
  z-index: 3000;
  font-family: inherit;
  direction: rtl;
}

.tour-spot {
  position: fixed;
  border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(0, 32, 46, .62);
  outline: 2px solid #00ceb7;
  outline-offset: 2px;
  pointer-events: none;
  transition: top .3s ease, left .3s ease, width .3s ease, height .3s ease;
}

.tour-layer.is-center { background: rgba(0, 32, 46, .62); }
.tour-layer.is-center .tour-spot { display: none; }

.tour-card {
  position: fixed;
  width: min(360px, calc(100vw - 24px));
  padding: 22px 22px 16px;
  border-radius: 18px;
  background: #ffffff;
  color: #1d2b33;
  box-shadow: 0 24px 60px rgba(0, 32, 46, .3);
  transition: top .3s ease, left .3s ease;
  animation: tour-in .25s ease;
}

.tour-layer.is-center .tour-card {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  width: min(420px, calc(100vw - 24px));
  padding: 30px 28px 18px;
  text-align: center;
}

@keyframes tour-in { from { opacity: 0; } }

.tour-count { display: block; margin-bottom: 6px; color: #40bca9; font-size: 13px; font-weight: 700; }
.tour-title { margin: 0 0 8px; color: #00344b; font-size: 19px; line-height: 1.5; }
.tour-text { margin: 0 0 18px; color: #5b6b73; font-size: 15px; line-height: 1.85; }

.tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tour-nav { display: flex; gap: 8px; }

.tour-card button {
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.tour-next { background: #00344b; color: #ffffff; }
.tour-next:hover { background: #005a7a; }
.tour-back { background: #eef4f5; color: #00344b; }
.tour-skip { padding: 0 6px !important; background: none; color: #5b6b73; }
.tour-skip:hover { color: #00344b; }
.tour-card button:focus-visible { outline: 2px solid #00ceb7; outline-offset: 2px; }

.tour-dots { display: flex; gap: 5px; }
.tour-dots i { width: 7px; height: 7px; border-radius: 50%; background: #d5e1e4; }
.tour-dots i.is-on { width: 18px; border-radius: 4px; background: #00ceb7; }

@media (max-width: 560px) {
  .tour-dots { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tour-spot, .tour-card { transition: none; animation: none; }
}

/* «شرح الصفحة»: floating bulb (bottom right); shows its words at first, then folds */
.tour-help-btn {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1500;
  display: flex;
  align-items: center;
  height: 52px;
  max-width: 52px;
  padding: 0 14px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: #00344b;
  color: #ffffff;
  box-shadow: 0 10px 28px rgba(0, 52, 75, .28);
  font: inherit;
  font-size: 14.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: max-width .45s ease, background .2s ease, bottom .25s ease, transform .15s ease;
}
.tour-help-btn svg { flex: 0 0 24px; width: 24px; height: 24px; color: #00ceb7; }
.tour-help-label { padding-inline-start: 10px; opacity: 0; transition: opacity .25s ease; }
.tour-help-btn.is-open, .tour-help-btn:hover, .tour-help-btn:focus-visible { max-width: 270px; }
.tour-help-btn.is-open .tour-help-label, .tour-help-btn:hover .tour-help-label, .tour-help-btn:focus-visible .tour-help-label { opacity: 1; }
.tour-help-btn:hover { background: #005a7a; }
.tour-help-btn:active { transform: scale(.97); }
.tour-help-btn:focus-visible { outline: 3px solid #00ceb7; outline-offset: 3px; }
.tour-layer ~ .tour-help-btn { z-index: 3001; }
@media (max-width: 560px) {
  .tour-help-btn { right: 16px; bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .tour-help-btn, .tour-help-label { transition: none; }
}