/* =====================================================================
   Навчальні підказки-облачка (coach marks) для проходження маршрутів.
   Підключається через resources/views/parts/tutorial.blade.php,
   керується /js/tutorial.js. Елементи-цілі позначаються в блейд-шаблонах
   атрибутом data-tutorial-id + data-tutorial-text.
   ===================================================================== */

/* Затемнення всієї сторінки з "вирізаним" світлим колом навколо цільового
   елемента (box-shadow-трюк — сам .tutorial-spot лишається прозорим/
   некерованим кліками, а величезна тінь навколо і затемнює решту сторінки). */
.tutorial-overlay{
  position:fixed;
  inset:0;
  z-index:99990;
  pointer-events:none;
}
.tutorial-spot{
  position:fixed;
  border-radius:14px;
  box-shadow:0 0 0 9999px rgba(20,26,23,.6);
  transition:top .25s ease,left .25s ease,width .25s ease,height .25s ease;
  pointer-events:none;
}

/* Підняти цільовий елемент над затемненням і додати кільце, що пульсує,
   щоб було очевидно, про що саме йдеться. */
.tutorial-target{
  position:relative;
  z-index:99991;
  outline:3px solid var(--sage, #7BA697);
  outline-offset:3px;
  border-radius:10px;
  animation:tutorial-pulse 1.6s ease-in-out infinite;
}
@keyframes tutorial-pulse{
  0%,100%{ outline-color:rgba(123,166,151,1); }
  50%{ outline-color:rgba(123,166,151,.45); }
}
@media (prefers-reduced-motion: reduce){
  .tutorial-target{ animation:none; }
}

/* Хмаринка-підказка */
.tutorial-bubble{
  position:fixed;
  z-index:99992;
  max-width:320px;
  width:calc(100% - 32px);
  background:#fff;
  color:#2F3A34;
  border-radius:18px;
  padding:16px 18px 14px;
  box-shadow:0 20px 50px -12px rgba(20,26,23,.45);
  font-family:inherit;
  transition:top .25s ease,left .25s ease;
}
.tutorial-bubble__progress{
  font-size:11.5px;
  font-weight:700;
  color:#8C9389;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:6px;
}
.tutorial-bubble__text{
  font-size:14.5px;
  line-height:1.5;
  margin-bottom:14px;
}
.tutorial-bubble__actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.tutorial-bubble__skip{
  background:none;
  border:0;
  padding:6px 2px;
  font-size:13px;
  font-weight:600;
  color:#8C9389;
  cursor:pointer;
}
.tutorial-bubble__skip:hover{ color:#2F3A34; }
.tutorial-bubble__next{
  background:linear-gradient(135deg,#7BA697,#5E8A7B);
  color:#fff;
  border:0;
  border-radius:12px;
  padding:9px 18px;
  font-size:13.5px;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
}
.tutorial-bubble__next:hover{ filter:brightness(1.05); }

/* Стрілка хмаринки, напрямок задається модифікатором */
.tutorial-bubble__arrow{
  position:absolute;
  width:14px;
  height:14px;
  background:#fff;
  transform:rotate(45deg);
}
.tutorial-bubble--top .tutorial-bubble__arrow{ bottom:-6px; left:24px; }
.tutorial-bubble--bottom .tutorial-bubble__arrow{ top:-6px; left:24px; }
.tutorial-bubble--left .tutorial-bubble__arrow{ right:-6px; top:20px; }
.tutorial-bubble--right .tutorial-bubble__arrow{ left:-6px; top:20px; }

@media (max-width:480px){
  .tutorial-bubble{
    max-width:none;
    left:16px !important;
    right:16px;
    width:auto;
  }
}