/* ==========================================
   BOTÕES 3D PREMIUM - ESTILO GAMER
   ========================================== */

/* Botão Base */
.btn {
    position: relative;
    padding: 10px 20px;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Nunito', sans-serif;
    overflow: hidden;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Efeito de brilho ao passar mouse */
.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.btn:hover::before {
    left: 100%;
}

/* Botão Primário - Azul com Glow */
.btn-primary {
    background: linear-gradient(180deg, #4fc3f7 0%, #0288d1 100%);
    color: #fff;
    box-shadow: 
        0 6px 0 #01579b,
        0 8px 25px rgba(79, 195, 247, 0.4),
        inset 0 -2px 5px rgba(0, 0, 0, 0.2);
}

.btn-primary:hover {
    background: linear-gradient(180deg, #81d4fa 0%, #039be5 100%);
    transform: translateY(-2px);
    box-shadow: 
        0 8px 0 #01579b,
        0 12px 35px rgba(79, 195, 247, 0.6),
        0 0 30px rgba(79, 195, 247, 0.4),
        inset 0 -2px 5px rgba(0, 0, 0, 0.2);
}

.btn-primary:active {
    transform: translateY(4px);
    box-shadow: 
        0 2px 0 #01579b,
        0 4px 15px rgba(79, 195, 247, 0.3),
        inset 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Botão Secundário - Verde */
.btn-secondary {
    background: linear-gradient(180deg, #66bb6a 0%, #388e3c 100%);
    color: #fff;
    box-shadow: 
        0 6px 0 #1b5e20,
        0 8px 25px rgba(102, 187, 106, 0.4),
        inset 0 -2px 5px rgba(0, 0, 0, 0.2);
}

.btn-secondary:hover {
    background: linear-gradient(180deg, #81c784 0%, #43a047 100%);
    transform: translateY(-2px);
    box-shadow: 
        0 8px 0 #1b5e20,
        0 12px 35px rgba(102, 187, 106, 0.6),
        0 0 30px rgba(102, 187, 106, 0.4),
        inset 0 -2px 5px rgba(0, 0, 0, 0.2);
}

.btn-secondary:active {
    transform: translateY(4px);
    box-shadow: 
        0 2px 0 #1b5e20,
        0 4px 15px rgba(102, 187, 106, 0.3),
        inset 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Botão de Perigo - Vermelho */
.btn-danger {
    background: linear-gradient(180deg, #ef5350 0%, #c62828 100%);
    color: #fff;
    box-shadow: 
        0 6px 0 #b71c1c,
        0 8px 25px rgba(244, 67, 54, 0.4),
        inset 0 -2px 5px rgba(0, 0, 0, 0.2);
}

.btn-danger:hover {
    background: linear-gradient(180deg, #e57373 0%, #d32f2f 100%);
    transform: translateY(-2px);
    box-shadow: 
        0 8px 0 #b71c1c,
        0 12px 35px rgba(244, 67, 54, 0.6),
        0 0 30px rgba(244, 67, 54, 0.4),
        inset 0 -2px 5px rgba(0, 0, 0, 0.2);
}

.btn-danger:active {
    transform: translateY(4px);
    box-shadow: 
        0 2px 0 #b71c1c,
        0 4px 15px rgba(244, 67, 54, 0.3),
        inset 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Botão Dourado - Premium */
.btn-gold {
    background: linear-gradient(180deg, #ffd54f 0%, #f57f17 100%);
    color: #1a1a1a;
    box-shadow: 
        0 6px 0 #e65100,
        0 8px 25px rgba(255, 193, 7, 0.5),
        inset 0 -2px 5px rgba(0, 0, 0, 0.2);
    font-weight: 800;
}

.btn-gold:hover {
    background: linear-gradient(180deg, #ffeb3b 0%, #f9a825 100%);
    transform: translateY(-2px);
    box-shadow: 
        0 8px 0 #e65100,
        0 12px 35px rgba(255, 193, 7, 0.7),
        0 0 40px rgba(255, 193, 7, 0.5),
        inset 0 -2px 5px rgba(0, 0, 0, 0.2);
}

.btn-gold:active {
    transform: translateY(4px);
    box-shadow: 
        0 2px 0 #e65100,
        0 4px 15px rgba(255, 193, 7, 0.4),
        inset 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Botão Roxo - Místico */
.btn-mystic {
    background: linear-gradient(180deg, #ab47bc 0%, #6a1b9a 100%);
    color: #fff;
    box-shadow: 
        0 6px 0 #4a148c,
        0 8px 25px rgba(171, 71, 188, 0.5),
        inset 0 -2px 5px rgba(0, 0, 0, 0.2);
}

.btn-mystic:hover {
    background: linear-gradient(180deg, #ba68c8 0%, #7b1fa2 100%);
    transform: translateY(-2px);
    box-shadow: 
        0 8px 0 #4a148c,
        0 12px 35px rgba(171, 71, 188, 0.7),
        0 0 35px rgba(171, 71, 188, 0.5),
        inset 0 -2px 5px rgba(0, 0, 0, 0.2);
}

.btn-mystic:active {
    transform: translateY(4px);
    box-shadow: 
        0 2px 0 #4a148c,
        0 4px 15px rgba(171, 71, 188, 0.4),
        inset 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Botão Desabilitado */
.btn:disabled {
    background: linear-gradient(180deg, #757575 0%, #424242 100%);
    color: rgba(255, 255, 255, 0.5);
    cursor: not-allowed;
    box-shadow: 
        0 4px 0 #212121,
        0 6px 15px rgba(0, 0, 0, 0.3);
    transform: none !important;
}

.btn:disabled::before {
    display: none;
}

/* Botão Pequeno */
.btn-sm {
    padding: 6px 14px;
    font-size: 0.8rem;
}

/* Botão Grande */
.btn-lg {
    padding: 12px 28px;
    font-size: 1rem;
}

/* Botão Largo */
.btn-wide {
    width: 100%;
}

/* Animação de Pulso para Botões Importantes */
.btn-pulse {
    animation: btnPulse 2s ease-in-out infinite;
}

@keyframes btnPulse {
    0%, 100% {
        box-shadow: 
            0 6px 0 #01579b,
            0 8px 25px rgba(79, 195, 247, 0.4);
    }
    50% {
        box-shadow: 
            0 6px 0 #01579b,
            0 8px 35px rgba(79, 195, 247, 0.7),
            0 0 40px rgba(79, 195, 247, 0.5);
    }
}

/* Botão com Ícone */
.btn-icon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-icon .icon {
    font-size: 1.2em;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3));
}