/**
 * Reusable Button System - MigraWP Theme
 * Design Flat Minimalista - Cores da Marca
 *
 * @package MigraWP
 * @since 1.0
 *
 * USO:
 * .btn = classe base (sempre necessária)
 * .btn-primary = botão verde (ação principal)
 * .btn-secondary = botão azul (ação secundária)
 * .btn-outline = botão transparente com borda
 * .btn-lg = tamanho grande
 * .btn-sm = tamanho pequeno
 * .btn-block = largura total (100%)
 *
 * EXEMPLOS:
 * <a href="#" class="btn btn-primary">Botão Verde</a>
 * <button class="btn btn-secondary btn-lg">Botão Azul Grande</button>
 * <a href="#" class="btn btn-outline btn-sm">Botão Outline Pequeno</a>
 * <button class="btn btn-primary btn-block">Botão Full Width</button>
 */

/* ==========================================================================
   Base Button
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 0.875rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    line-height: 1.5;
}

.btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(20, 201, 150, 0.2);
}

/* Icon inside button */
.btn .migrawp-icon {
    flex-shrink: 0;
}

/* ==========================================================================
   Button Variants - Cores da Marca
   ========================================================================== */

/* Primary Button (Verde #14C996) */
.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-white);
    box-shadow: 0 4px 14px rgba(20, 201, 150, 0.25);
}

.btn-primary:hover {
    background-color: var(--color-primary-dark);
    
    box-shadow: 0 6px 20px rgba(20, 201, 150, 0.35);
    color: var(--color-white);
}

.btn-primary:active {
    
    box-shadow: 0 2px 8px rgba(20, 201, 150, 0.2);
    background-color: var(--color-primary-dark);
}

/* Secondary Button (Azul #054760) */
.btn-secondary {
    background-color: var(--color-secondary);
    color: var(--color-white);
    box-shadow: 0 4px 14px rgba(5, 71, 96, 0.25);
}

.btn-secondary:hover {
    background-color: var(--color-secondary-dark);
    
    box-shadow: 0 6px 20px rgba(5, 71, 96, 0.35);
    color: var(--color-white);
}

.btn-secondary:active {
    
    box-shadow: 0 2px 8px rgba(5, 71, 96, 0.2);
    background-color: var(--color-secondary-dark);
}

/* Outline Button (Borda Verde) */
.btn-outline {
    background-color: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    box-shadow: none;
}

.btn-outline:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
    
    box-shadow: 0 4px 14px rgba(20, 201, 150, 0.25);
}

.btn-outline:active {
    
    box-shadow: 0 2px 8px rgba(20, 201, 150, 0.15);
}

/* Outline Secondary (Borda Azul) */
.btn-outline-secondary {
    background-color: transparent;
    color: var(--color-secondary);
    border: 2px solid var(--color-secondary);
    box-shadow: none;
}

.btn-outline-secondary:hover {
    background-color: var(--color-secondary);
    color: var(--color-white);
    
    box-shadow: 0 4px 14px rgba(5, 71, 96, 0.25);
}

.btn-outline-secondary:active {
    
    box-shadow: 0 2px 8px rgba(5, 71, 96, 0.15);
}

/* ==========================================================================
   Button Sizes
   ========================================================================== */

/* Large Button */
.btn-lg {
    padding: 1.125rem 3rem;
    font-size: 1.125rem;
}

/* Small Button */
.btn-sm {
    padding: 0.625rem 1.5rem;
    font-size: 0.875rem;
}

/* Extra Small Button */
.btn-xs {
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
}

/* ==========================================================================
   Button Layout
   ========================================================================== */

/* Full Width Button */
.btn-block {
    width: 100%;
    display: flex;
}

/* Icon Only Button */
.btn-icon {
    padding: 0.75rem;
    gap: 0;
}

.btn-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* ==========================================================================
   Button States
   ========================================================================== */

/* Disabled Button */
.btn:disabled,
.btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Loading State */
.btn.loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.btn.loading::after {
    content: '';
    position: absolute;
    width: 1rem;
    height: 1rem;
    top: 50%;
    left: 50%;
    margin-left: -0.5rem;
    margin-top: -0.5rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: var(--color-white);
    animation: btn-spin 0.6s linear infinite;
}

@keyframes btn-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 640px) {
    .btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.9375rem;
    }

    .btn-lg {
        padding: 1rem 2.5rem;
        font-size: 1rem;
    }

    .btn-sm {
        padding: 0.5rem 1.25rem;
        font-size: 0.8125rem;
    }
}