/* ──────────────────────────────────────────────────────────────
 * BL-18 Fas A: Interaktiv ?-wizard
 * Flytande knapp nere-vänster → modal overlay med spotlight på
 * aktuell sektion + Next/Previous för att stega genom sidan.
 * Ingen extern JS-lib. Fungerar på alla cloud-sidor via layout.php.
 * ────────────────────────────────────────────────────────────── */

/* ── FAB-knapp ──────────────────────────────────────────────── */
.tour-fab {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #3b82f6;
  color: #fff;
  border: none;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .45);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s, box-shadow .15s;
}
.tour-fab:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(59, 130, 246, .55);
}
.tour-fab.tour-unseen::after {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 10px;
  height: 10px;
  background: #f59e0b;
  border: 2px solid #0f172a;
  border-radius: 50%;
  animation: tour-pulse 1.8s ease-in-out infinite;
}
@keyframes tour-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.3); opacity: .7; }
}

/* ── Overlay (mörk bakgrund + spotlight-hål) ─────────────────── */
.tour-overlay {
  position: fixed;
  inset: 0;
  pointer-events: auto;
  z-index: 9999;
  background: transparent;   /* Själva dimningen görs via box-shadow på spotlight */
}

/* Spotlight-ram kring aktivt element — använder box-shadow-trick
   för att dimma allt annat (en stor box-shadow som täcker viewport) */
.tour-spotlight {
  position: fixed;
  border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .68),
              0 0 0 3px #3b82f6,
              0 0 20px 3px rgba(59, 130, 246, .5);
  transition: all .25s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
  z-index: 9999;
}

/* ── Popup-panel med text + knappar ─────────────────────────── */
.tour-popup {
  position: fixed;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 10px;
  padding: 1rem 1.2rem;
  max-width: 380px;
  min-width: 280px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .6);
  z-index: 10000;
  color: #e2e8f0;
  font-size: .88rem;
  line-height: 1.45;
  animation: tour-fadein .2s ease-out;
}
@keyframes tour-fadein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tour-popup h3 {
  margin: 0 0 .4rem;
  font-size: 1rem;
  color: #93c5fd;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tour-popup .tour-progress {
  font-size: .7rem;
  color: #64748b;
  font-weight: 400;
}
.tour-popup p {
  margin: 0 0 .8rem;
}
.tour-popup .tour-extra {
  font-size: .78rem;
  color: #94a3b8;
  background: #1e293b;
  padding: .4rem .6rem;
  border-radius: 5px;
  margin-bottom: .8rem;
  border-left: 3px solid #3b82f6;
}
.tour-popup .tour-learn-more {
  margin: -.3rem 0 .7rem;
  font-size: .78rem;
}
.tour-popup .tour-learn-more a {
  display: inline-block;
  background: #0f2744;
  color: #93c5fd;
  padding: 4px 10px;
  border-radius: 9999px;
  text-decoration: none;
  border: 1px solid #3b82f6;
  transition: all .15s;
}
.tour-popup .tour-learn-more a:hover {
  background: #1e3a5f;
  color: #e2e8f0;
}

.tour-popup .tour-buttons {
  display: flex;
  gap: .5rem;
  justify-content: space-between;
}
.tour-popup button {
  padding: .4rem .9rem;
  font-size: .8rem;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid #334155;
  background: #1e293b;
  color: #e2e8f0;
  transition: background .12s;
}
.tour-popup button:hover:not(:disabled) {
  background: #334155;
}
.tour-popup button.primary {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #fff;
}
.tour-popup button.primary:hover {
  background: #2563eb;
}
.tour-popup button:disabled {
  opacity: .4;
  cursor: not-allowed;
}
.tour-popup .tour-close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: none;
  color: #64748b;
  font-size: 1.2rem;
  padding: 0 .3rem;
  cursor: pointer;
  line-height: 1;
}
.tour-popup .tour-close:hover { color: #e2e8f0; }

/* ── Pil som pekar från popup mot spotlight ─────────────────── */
.tour-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border: 10px solid transparent;
}
.tour-arrow.arrow-up    { border-bottom-color: #0f172a; top: -20px; left: 30px; }
.tour-arrow.arrow-down  { border-top-color: #0f172a;    bottom: -20px; left: 30px; }
.tour-arrow.arrow-left  { border-right-color: #0f172a;  left: -20px; top: 30px; }
.tour-arrow.arrow-right { border-left-color: #0f172a;   right: -20px; top: 30px; }

/* Mobila: popupen blir fullbreddig nederst */
@media (max-width: 600px) {
  .tour-popup {
    left: 10px !important;
    right: 10px !important;
    bottom: 20px !important;
    top: auto !important;
    max-width: none;
  }
  .tour-arrow { display: none; }
}