/* RPG Style Button with Progress Bar
 * Reusable component for progress-based buttons with RPG game-style visual
 * Usage: Add class "rpg-button" to any button and set CSS variable --progress-width
 */

.rpg-button {
  width: 100%;
  padding: 1rem 2rem;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 8px;
  border: 2px solid #1e3a8a;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  color: #ffffff;
  box-shadow: 
    inset 0 2px 4px rgba(255, 255, 255, 0.1),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3),
    0 4px 8px rgba(0, 0, 0, 0.2);
  text-decoration: none;
}

/* Barra de progresso no botão - estilo RPG azul claro (carregamento) */
.rpg-button::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: var(--progress-width, 0%);
  min-width: 0;
  max-width: 100%;
  background: linear-gradient(180deg, #93c5fd 0%, #60a5fa 50%, #3b82f6 100%);
  background-size: 200% 200%;
  animation: rpgGlowBlue 2s ease-in-out infinite;
  transition: width 0.4s ease, background 0.4s ease;
  z-index: 0;
  box-shadow: 
    inset 0 2px 4px rgba(255, 255, 255, 0.3),
    inset 0 -2px 4px rgba(0, 0, 0, 0.2),
    0 0 8px rgba(96, 165, 250, 0.4),
    0 0 16px rgba(96, 165, 250, 0.2);
  border-right: 2px solid rgba(255, 255, 255, 0.3);
  pointer-events: none;
  border-radius: 8px 0 0 8px;
}

@keyframes rpgGlowBlue {
  0%, 100% {
    background-position: 0% 50%;
    box-shadow: 
      inset 0 2px 4px rgba(255, 255, 255, 0.3),
      inset 0 -2px 4px rgba(0, 0, 0, 0.2),
      0 0 8px rgba(96, 165, 250, 0.4),
      0 0 16px rgba(96, 165, 250, 0.2);
  }
  50% {
    background-position: 100% 50%;
    box-shadow: 
      inset 0 2px 4px rgba(255, 255, 255, 0.4),
      inset 0 -2px 4px rgba(0, 0, 0, 0.2),
      0 0 12px rgba(96, 165, 250, 0.6),
      0 0 20px rgba(96, 165, 250, 0.3);
  }
}

@keyframes rpgGlowGreen {
  0%, 100% {
    background-position: 0% 50%;
    box-shadow: 
      inset 0 2px 4px rgba(255, 255, 255, 0.3),
      inset 0 -2px 4px rgba(0, 0, 0, 0.2),
      0 0 12px rgba(74, 222, 128, 0.6),
      0 0 24px rgba(74, 222, 128, 0.4),
      0 0 36px rgba(34, 197, 94, 0.3);
  }
  50% {
    background-position: 100% 50%;
    box-shadow: 
      inset 0 2px 4px rgba(255, 255, 255, 0.4),
      inset 0 -2px 4px rgba(0, 0, 0, 0.2),
      0 0 16px rgba(74, 222, 128, 0.8),
      0 0 32px rgba(74, 222, 128, 0.6),
      0 0 48px rgba(34, 197, 94, 0.4);
  }
}

/* Conteúdo do botão acima da barra de progresso */
.rpg-button > * {
  position: relative;
  z-index: 1;
}

/* Garantir que o botão tenha position relative para o ::before funcionar */
.rpg-button {
  position: relative !important;
}

.rpg-button-text {
  flex: 1;
}

.rpg-button-progress {
  font-size: 0.9rem;
  font-weight: 700;
  opacity: 0.9;
  margin-left: 0.5rem;
  padding-left: 0.75rem;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}

.rpg-button-loading {
  display: inline-flex;
  align-items: center;
}

.rpg-button-loading .spinner-border-sm {
  width: 0.875rem;
  height: 0.875rem;
  border-width: 0.15em;
  border-color: currentColor;
  border-right-color: transparent;
}

.rpg-button.disabled .rpg-button-progress {
  border-left-color: rgba(148, 163, 184, 0.3);
}

/* Estado habilitado - azul claro (carregamento) */
.rpg-button.enabled {
  color: #ffffff;
  border-color: #60a5fa;
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  box-shadow: 
    inset 0 2px 4px rgba(255, 255, 255, 0.2),
    inset 0 -2px 4px rgba(0, 0, 0, 0.2),
    0 4px 12px rgba(96, 165, 250, 0.4),
    0 0 20px rgba(96, 165, 250, 0.3);
}

.rpg-button.enabled::before {
  background: linear-gradient(180deg, #93c5fd 0%, #60a5fa 50%, #3b82f6 100%) !important;
  animation: rpgGlowBlue 1.5s ease-in-out infinite;
}

.rpg-button.enabled:hover {
  transform: translateY(-2px);
  box-shadow: 
    inset 0 2px 4px rgba(255, 255, 255, 0.25),
    inset 0 -2px 4px rgba(0, 0, 0, 0.2),
    0 6px 16px rgba(96, 165, 250, 0.5),
    0 0 24px rgba(96, 165, 250, 0.4);
}

.rpg-button.enabled:hover::before {
  background: linear-gradient(180deg, #bfdbfe 0%, #93c5fd 50%, #60a5fa 100%) !important;
}

/* Estado completo - verde brilhando */
.rpg-button.complete {
  color: #ffffff;
  border-color: #22c55e;
  box-shadow: 
    inset 0 2px 4px rgba(255, 255, 255, 0.2),
    inset 0 -2px 4px rgba(0, 0, 0, 0.2),
    0 4px 12px rgba(34, 197, 94, 0.4),
    0 0 20px rgba(34, 197, 94, 0.3);
}

.rpg-button.complete::before {
  width: 100% !important;
  background: linear-gradient(180deg, #86efac 0%, #4ade80 50%, #22c55e 100%) !important;
  animation: rpgGlowGreen 1s ease-in-out infinite;
  box-shadow: 
    inset 0 2px 4px rgba(255, 255, 255, 0.3),
    inset 0 -2px 4px rgba(0, 0, 0, 0.2),
    0 0 12px rgba(74, 222, 128, 0.6),
    0 0 24px rgba(74, 222, 128, 0.4),
    0 0 36px rgba(34, 197, 94, 0.3);
}

.rpg-button.complete:hover {
  transform: translateY(-2px);
  box-shadow: 
    inset 0 2px 4px rgba(255, 255, 255, 0.25),
    inset 0 -2px 4px rgba(0, 0, 0, 0.2),
    0 6px 16px rgba(34, 197, 94, 0.5),
    0 0 24px rgba(34, 197, 94, 0.4),
    0 0 36px rgba(22, 163, 74, 0.3);
}

.rpg-button.complete:hover::before {
  background: linear-gradient(180deg, #bbf7d0 0%, #86efac 50%, #4ade80 100%) !important;
}

/* Estado desabilitado */
.rpg-button.disabled {
  cursor: not-allowed;
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border-color: #334155;
  color: #94a3b8;
  opacity: 0.6;
  position: relative;
}

.rpg-button.disabled::after {
  content: 'Desabilitado';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.75rem;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 2;
  pointer-events: none;
  opacity: 0.8;
}

.rpg-button.disabled::before {
  background: linear-gradient(180deg, #475569 0%, #334155 50%, #1e293b 100%);
  box-shadow: 
    inset 0 2px 4px rgba(255, 255, 255, 0.05),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3);
  animation: none;
  opacity: 0.3;
}

.rpg-button.disabled .rpg-button-text,
.rpg-button.disabled .rpg-button-progress {
  opacity: 0.4;
}

/* Tamanhos variados */
.rpg-button-sm {
  padding: 0.75rem 1.5rem;
  font-size: 0.95rem;
}

.rpg-button-lg {
  padding: 1.25rem 2.5rem;
  font-size: 1.25rem;
}

/* Largura customizável */
.rpg-button-auto {
  width: auto;
}

/* Variantes de cor (futuro) */
.rpg-button-green::before {
  background: linear-gradient(180deg, #4ade80 0%, #22c55e 50%, #16a34a 100%);
}

.rpg-button-red::before {
  background: linear-gradient(180deg, #f87171 0%, #ef4444 50%, #dc2626 100%);
}

.rpg-button-yellow::before {
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
}