/* --- overlay + spotlight (theme-agnostic; everything else comes from Metronic/Bootstrap) --- */
:root{
  --tut-overlay-opacity:.48;
  --tut-primary-rgb: var(--kt-primary-rgb, var(--bs-primary-rgb, 13,110,253));
}

.tutorial-container{ position:fixed; inset:0; z-index:20000; pointer-events:none; }
.tutorial-blocker{ position:fixed; background:rgba(0,0,0,var(--tut-overlay-opacity)); pointer-events:auto; }

/* highlight ring uses theme primary + soft glow; we match target radius in JS */
.tutorial-highlight{
  position:fixed; pointer-events:none;
  border:2px solid rgba(var(--tut-primary-rgb),.95);
  box-shadow: 0 0 0 .35rem rgba(var(--tut-primary-rgb),.16), 0 14px 34px rgba(0,0,0,.24);
  border-radius:.75rem; transition:all .15s ease;
}

/* block the hole when allowInteract=false */
.tutorial-hole-cover{ position:fixed; background:transparent; pointer-events:auto; }

/* Bootstrap/Metronic popover gets lifted above overlay */
.tut-popover{ z-index:20002; }