/* Overlay */
.shepherd-modal-overlay-container {
  opacity: 0.5 !important;
  z-index: 9998 !important;
}

/* Tour Step Container - Base */
.shepherd-element {
  z-index: 9999 !important;
  max-width: 500px !important;
}

/* Centralizar modal quando não tem attachTo (modal inicial) */
.shepherd-element.shepherd-enabled {
  position: fixed !important;
}

/* Centralizar modal quando não tem attachTo (modal inicial) */
.shepherd-element:not([data-popper-placement]) {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
}

/* Garantir que o conteúdo seja visível */
.shepherd-element .shepherd-content {
  position: relative !important;
}

/* Classes genéricas para steps customizados */
.custom-tour-step,
.playground-tour-step,
.game-tour-step {
  background: white !important;
  border-radius: 16px !important;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06),
    0 20px 60px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  position: relative !important;
}

/* Tour Header com Ícone */
.tour-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}

.tour-icon-wrapper {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  background: var(--action-green) !important; /* action button color */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.tour-icon {
  color: white !important;
  stroke-width: 2 !important;
}

/* Header */
.shepherd-header {
  padding: 24px 24px 0 24px !important;
  background: transparent !important;
}

/* Content */
.shepherd-text {
  padding: 24px !important;
  color: #333 !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  font-family: 'Lato', system-ui, sans-serif !important;
}

.shepherd-text h3 {
  margin: 0 !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  font-family: 'Barlow Semi Condensed', sans-serif !important;
  color: #1f2937 !important; /* same as GameFaseInfo title */
}

.shepherd-text ul {
  margin: 12px 0 !important;
  padding-left: 20px !important;
  list-style: none !important;
}

.shepherd-text ul li {
  margin: 8px 0 !important;
  color: #555 !important;
  position: relative !important;
  padding-left: 20px !important;
}

.shepherd-text ul li::before {
  content: "●" !important;
  position: absolute !important;
  left: 0 !important;
  color: var(--brand-primary) !important;
  font-weight: bold !important;
}

.shepherd-text strong {
  color: #111 !important;
  font-weight: 600 !important;
}

.shepherd-text em {
  color: #666 !important;
  font-style: italic !important;
}

/* Footer */
.shepherd-footer {
  padding: 0 24px 24px 24px !important;
  background: transparent !important;
  display: flex !important;
  gap: 12px !important;
  justify-content: flex-end !important;
  border-top: 1px solid #e5e7eb !important;
  padding-top: 16px !important;
  margin-top: 8px !important;
}

.shepherd-button {
  border: none !important;
  padding: 12px 28px !important;
  border-radius: 9999px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif !important;
}

.shepherd-button:not(.shepherd-button-secondary) {
  background: var(--action-green) !important; /* action button color (green-100) */
  color: black !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
  font-family: 'Lato', system-ui, sans-serif !important;
}

.shepherd-button:not(.shepherd-button-secondary):hover {
  background: #B4E34E !important; /* approximate green-200 */
  transform: scale(1.05) !important;
  box-shadow:
    0 8px 40px 0 rgba(44, 44, 84, 0.35),
    0 2px 16px 0 rgba(44, 44, 84, 0.25) !important;
}

.shepherd-button-secondary {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(4px) !important;
  color: #1f2937 !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
  font-family: 'Lato', system-ui, sans-serif !important;
}
.shepherd-button-secondary:hover {
  background: rgba(255, 255, 255, 0.95) !important;
  color: #111827 !important;
  transform: scale(1.05) !important;
  box-shadow: 0 8px 20px 0 rgba(44, 44, 84, 0.2) !important;
}

/* Cancel Icon (X) */
.shepherd-cancel-icon {
  /* Tour-specific positioning */
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
}

/* Arrow - Ocultar */
.shepherd-arrow {
  display: none !important;
}

/* Animations */
@keyframes shepherd-element-fade-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.shepherd-element {
  animation: shepherd-element-fade-in 0.3s ease-out !important;
}

/* Responsive */
@media (max-width: 768px) {
  .shepherd-element {
    max-width: 90vw !important;
    margin: 10px !important;
  }

  .shepherd-text {
    font-size: 14px !important;
    padding: 16px !important;
  }

  .shepherd-text h3 {
    font-size: 18px !important;
  }

  .shepherd-button {
    padding: 8px 16px !important;
    font-size: 13px !important;
  }

  .tour-icon-wrapper {
    width: 40px !important;
    height: 40px !important;
  }

  .shepherd-element:not([data-popper-placement]) {
    max-width: calc(100vw - 32px) !important;
    left: 50% !important;
    top: 50% !important;
  }

  /* Posicionamento específico para áreas destacadas em mobile */
  /* Quando anexado à esquerda ou direita, posicionar acima em mobile */
  .shepherd-element[data-popper-placement^="right"],
  .shepherd-element[data-popper-placement^="left"] {
    position: fixed !important;
    top: auto !important;
    bottom: 16px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
    max-width: calc(100vw - 32px) !important;
  }

  /* Para workspace, lixeira, code viewer e console */
  /* Posicionar na parte inferior quando anexado */
  .shepherd-element[data-popper-placement="left"],
  .shepherd-element[data-popper-placement="right"] {
    bottom: 80px !important;
  }
}

/* Garantir visibilidade total do modal inicial */
.shepherd-element:not([data-popper-placement]) .shepherd-content {
  max-height: 90vh !important;
  overflow-y: auto !important;
}

/* Scroll suave no conteúdo se necessário */
.shepherd-element:not([data-popper-placement]) .shepherd-text {
  max-height: calc(90vh - 120px) !important;
  overflow-y: auto !important;
}
