/* IntroJS Custom Styles */

/* Sistema de Z-Index
 * Header: 100
 * IntroJS Overlay: 200
 * IntroJS Helper Layer: 250 (acima do overlay para não ter blur)
 * IntroJS Tooltip Reference Layer: 350 (acima do overlay, abaixo do tooltip)
 * IntroJS Tooltip: 400
 * IntroJS Close Button: 500
 */

/* Overlay - deve estar acima do header */
.introjs-overlay {
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(1px) !important;
  z-index: 200 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Remover text-shadow globalmente de todos os elementos IntroJS com máxima especificidade */
.introjs-tooltip *,
.introjs-tooltip *::before,
.introjs-tooltip *::after,
div.introjs-tooltip *,
div.introjs-tooltip *::before,
div.introjs-tooltip *::after,
.introjs-tooltip[role="dialog"] *,
.introjs-tooltip[role="dialog"] *::before,
.introjs-tooltip[role="dialog"] *::after {
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

/* Tooltip Container */
.introjs-tooltip {
  max-width: 90vw !important;
  background: white !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
  padding: 20px !important;
  border: 1px solid #e5e7eb !important;
  position: absolute !important;
  z-index: 400 !important;
  transform: translateZ(0) !important;
  /* Forçar aceleração de hardware */
  will-change: transform, top, left !important;
  /* Otimizar animações */
}

@media (min-width: 768px) {
  .introjs-tooltip {
    max-width: 400px !important;
  }
}

.introjs-tooltip-header {
  position: static;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  min-height: 1.5em;
}

/* Título do tooltip (header) */
.introjs-tooltip-title {
  color: #111827 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  padding: 0 !important;
  margin: 0 0 12px 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* Texto do tooltip */
.introjs-tooltiptext {
  color: #1f2937 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  padding: 0 !important;
  margin: 0 0 16px 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

.introjs-tooltiptext br {
  display: none !important;
}

.introjs-tooltiptext * {
  color: inherit !important;
}

/* Remover progresso (1 of 7) */
.introjs-progress {
  display: none !important;
}

/* Dots (bullets) - apenas dots visíveis */
.introjs-bullets {
  text-align: center !important;
  padding: 12px 0 !important;
  margin: 0 !important;
}

.introjs-bullets ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
}

.introjs-bullets li {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.introjs-bullets li a {
  display: block !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: #d1d5db !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}

.introjs-bullets li a:hover {
  background: #9ca3af !important;
  transform: scale(1.2) !important;
}

/* Dot ativo - laranja */
.introjs-bullets li a.active,
.introjs-bullets li.active a,
.introjs-bullets ul li.active a,
.introjs-bullets ul li a.active {
  background: #ef6a0e !important;
  width: 12px !important;
  height: 12px !important;
  box-shadow: 0 0 0 2px rgba(239, 106, 14, 0.2) !important;
}

/* Botão Skip - Manter estilo padrão do IntroJS */
.introjs-skip-button {
  text-shadow: none !important;
}

.introjs-tooltipbuttons {
  border-top: none !important;
}

/* Remover text-shadow dos botões e outline do focus */
.introjs-button,
a.introjs-button {
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  border-radius: .5rem;
  outline: none !important;
}

.introjs-button *,
a.introjs-button * {
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  outline: none !important;
}

.introjs-button:focus,
a.introjs-button:focus,
.introjs-button *:focus,
a.introjs-button *:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Botão Próximo e Concluir - Gradiente laranja */
.introjs-nextbutton,
.introjs-donebutton {
  background: linear-gradient(270deg, #de3140, #ef6a0e, #ff9244, #de3140) !important;
  background-size: 400% 400% !important;
  background-position: 0% 50% !important;
  color: white !important;
  text-shadow: none !important;
  border: 2px solid #ef6a0e !important;
}

.introjs-nextbutton:hover,
.introjs-donebutton:hover {
  background-position: 150% 75% !important;
  transition: all 0.3s ease !important;
}

.introjs-nextbutton:active,
.introjs-donebutton:active {
  transform: translateY(0) !important;
}

/* Botão Anterior - Borda laranja */
.introjs-prevbutton {
  background: white !important;
  border: 2px solid #ef6a0e !important;
  color: #ef6a0e !important;
  text-shadow: none !important;
}

.introjs-prevbutton:hover {
  background: #ef6a0e !important;
  color: white !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(239, 106, 14, 0.3) !important;
  text-shadow: none !important;
}

.introjs-prevbutton:active {
  transform: translateY(0) !important;
}

/* Botão de fechar (×) - Absolute no topo direito com fundo laranja */
.introjs-tooltipheader,
.introjs-tooltip .introjs-tooltipheader,
div.introjs-tooltip .introjs-tooltipheader {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  z-index: 500 !important;
  border-radius: 0 12px 0 12px !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

.introjs-tooltipheader .introjs-closebutton,
.introjs-tooltip .introjs-tooltipheader .introjs-closebutton,
div.introjs-tooltip .introjs-tooltipheader .introjs-closebutton,
.introjs-tooltipheader a,
.introjs-tooltip .introjs-tooltipheader a {
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0 12px 0 12px !important;
  background: #ef6a0e !important;
  border: none !important;
  color: white !important;
  font-size: 20px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
  margin: 0 !important;
  font-weight: bold !important;
  text-decoration: none !important;
  text-shadow: none !important;
}

.introjs-tooltipheader .introjs-closebutton:hover,
.introjs-tooltip .introjs-tooltipheader .introjs-closebutton:hover,
div.introjs-tooltip .introjs-tooltipheader .introjs-closebutton:hover,
.introjs-tooltipheader a:hover,
.introjs-tooltip .introjs-tooltipheader a:hover {
  background: #d97706 !important;
  transform: scale(1.05) !important;
  color: white !important;
}

/* Ajustes de posicionamento */
.introjs-tooltipReferenceLayer {
  position: absolute !important;
  visibility: hidden !important;
  z-index: 350 !important;
  background: transparent !important;
  border-radius: 0 !important;
}

.introjs-helperLayer {
  box-shadow: 0 0 0 2px rgba(239, 106, 14, 0.5), 0 0 0 4px rgba(239, 106, 14, 0.2) !important;
  border-radius: 8px !important;
  z-index: 250 !important;
}

/* Responsividade */
@media (max-width: 640px) {
  .introjs-tooltip {
    padding: 16px !important;
  }

  .introjs-tooltiptext {
    font-size: 13px !important;
  }

  .introjs-tooltiptext strong {
    font-size: 15px !important;
  }
}