/* Tour guiado (onboarding). Holofote + balãozinho. Tokens de reset.css. */

/* Entrada leve: a tela toda faz um fade suave em vez de "aparecer do nada". */
.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  overflow: hidden;
  animation: tour-overlay-in 0.5s ease both;
}

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

/* sem alvo (passo "no centro"): escurece a tela toda (classe posta pelo JS) */
.tour-overlay--dim {
  background: rgba(10, 10, 10, 0.46);
}

.tour-spot {
  position: absolute;
  border-radius: 16px;
  box-shadow: 0 0 0 9999px rgba(10, 10, 10, 0.55);
  pointer-events: none;
  transition: left 0.5s ease, top 0.5s ease, width 0.5s ease, height 0.5s ease;
}

/* anel que pulsa uma vez quando o holofote muda de alvo */
.tour-spot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.tour-spot--foca::after {
  animation: tour-foca 0.85s ease;
}

@keyframes tour-foca {
  0%   { box-shadow: 0 0 0 3px rgba(91, 0, 204, 0.75), 0 0 26px 8px rgba(91, 0, 204, 0.45); }
  100% { box-shadow: 0 0 0 3px rgba(91, 0, 204, 0), 0 0 26px 8px rgba(91, 0, 204, 0); }
}

/* viagem do holofote saindo do cartão de boas-vindas: bem mais devagar,
   com uma curva que dá pra acompanhar com o olho */
.tour-spot--viajando {
  transition-duration: 1.2s;
  transition-timing-function: cubic-bezier(0.45, 0.02, 0.15, 1);
}

.tour-pop {
  position: absolute;
  width: min(340px, calc(100vw - 32px));
  padding: 20px;
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(10, 10, 10, 0.32);
  /* entra depois da tela já ter escurecido; desliza entre os passos */
  animation: tour-pop-in 0.4s ease 0.22s both;
  transition: left 0.3s ease, top 0.3s ease;
}

/* balão acompanha a viagem do holofote no 1º pulo (sai do centro junto) */
.tour-pop--viajando {
  transition: left 1.2s cubic-bezier(0.45, 0.02, 0.15, 1),
              top 1.2s cubic-bezier(0.45, 0.02, 0.15, 1);
}

@keyframes tour-pop-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.tour-contador {
  display: block;
  margin-bottom: 6px;
  color: var(--green-600);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tour-pop h3 {
  margin: 0 0 8px;
  color: var(--green-900);
  font-size: 19px;
  line-height: 1.15;
}

.tour-texto {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
}

.tour-naomostrar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 12.5px;
  cursor: pointer;
}

/* display:flex acima ganha do atributo `hidden` — precisa reforçar */
.tour-naomostrar[hidden] { display: none; }

.tour-naomostrar input { accent-color: var(--green-700); }

.tour-acoes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
}

.tour-voltar,
.tour-proximo {
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.12s ease;
}

.tour-voltar {
  color: var(--green-800);
  background: transparent;
  border: 1px solid var(--line);
}

.tour-voltar:hover { background: var(--green-050); }
.tour-voltar[hidden] { display: none; }

.tour-proximo {
  margin-left: auto;
  color: #fff;
  background: var(--green-900);
  border: 1px solid var(--green-900);
}

.tour-proximo:hover { background: var(--green-800); }
.tour-voltar:active,
.tour-proximo:active { transform: scale(0.96); }

.tour-fechar {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--muted);
  background: var(--green-050);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.tour-fechar:hover { background: var(--green-100); }
.tour-fechar[hidden] { display: none; }
.tour-fechar .material-symbols-rounded { font-size: 18px; }

.tour-pop:focus { outline: none; }

/* Balão fixo no rodapé (mobile ou passo sem espaço) */
.tour-pop--sheet {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  top: auto;
  width: auto;
}

@media (max-width: 600px) {
  .tour-pop {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    top: auto;
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tour-overlay { animation: none; }
  .tour-spot,
  .tour-spot--viajando { transition: none; }
  .tour-spot--foca::after { animation: none; }
  .tour-pop,
  .tour-pop--viajando { animation: none; transition: none; }
}