/**
 * Button Utilities
 * Sistema modular de botones reutilizables para el tema Menudos
 *
 * Uso:
 *   <a class="btn btn--primary">Dona Ahora</a>
 *   <a class="btn btn--secondary btn--lg">Ver más</a>
 *   <button class="btn btn--outline btn--sm">Cancelar</button>
 */

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

.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
    font-weight: 700;
    line-height: 1.21;
    text-decoration: none;
    border-radius: 24px;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    border: 1px solid transparent;
    box-sizing: border-box;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

.btn:disabled,
.btn.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ==========================================================================
   Size Variants
   ========================================================================== */

/* Small - Para cards, acciones secundarias */
.btn--sm {
    padding: 8px 16px;
    font-size: 14px;
    height: 36px;
}

/* Medium (default) - Para la mayoría de casos */
.btn--md {
    padding: 12px 20px;
    font-size: 14px;
    height: 40px;
}

/* Large - Para CTAs principales, hero */
.btn--lg {
    padding: 16px 24px;
    font-size: 18px;
    height: 48px;
}

/* Extra Large - Para CTAs muy destacados */
.btn--xl {
    padding: 16px 48px;
    font-size: 18px;
    height: 52px;
}

/* ==========================================================================
   Style Variants
   ========================================================================== */

/* Primary - Rojo Menudos (CTA principal) */
.btn--primary {
    background-color: var(--wp--preset--color--primary, #D50032);
    color: var(--wp--preset--color--white, #FFFFFF);
    border-color: var(--wp--preset--color--primary, #D50032);
}

.btn--primary:hover {
    background-color: var(--wp--preset--color--primary-hover, #B0002A);
    border-color: var(--wp--preset--color--primary-hover, #B0002A);
    color: var(--wp--preset--color--white, #FFFFFF);
}

.btn--primary:active {
    background-color: #9A0025;
}

/* Secondary - Blanco con borde gris */
.btn--secondary {
    background-color: var(--wp--preset--color--white, #FFFFFF);
    color: var(--wp--preset--color--text-dark, #333333);
    border-color: var(--wp--preset--color--secondary, #787878);
}

.btn--secondary:hover {
    background-color: var(--wp--preset--color--light-gray, #F5F5F5);
    border-color: var(--wp--preset--color--text-dark, #333333);
    color: var(--wp--preset--color--text-dark, #333333);
}

/* Outline - Transparente con borde rojo */
.btn--outline {
    background-color: transparent;
    color: var(--wp--preset--color--primary, #D50032);
    border-color: var(--wp--preset--color--primary, #D50032);
}

.btn--outline:hover {
    background-color: var(--wp--preset--color--primary, #D50032);
    color: var(--wp--preset--color--white, #FFFFFF);
}

/* Ghost - Solo texto, sin borde */
.btn--ghost {
    background-color: transparent;
    color: var(--wp--preset--color--primary, #D50032);
    border-color: transparent;
}

.btn--ghost:hover {
    background-color: rgba(213, 0, 50, 0.1);
    color: var(--wp--preset--color--primary-hover, #B0002A);
}

/* Dark - Para fondos claros, botón oscuro */
.btn--dark {
    background-color: var(--wp--preset--color--text-dark, #333333);
    color: var(--wp--preset--color--white, #FFFFFF);
    border-color: var(--wp--preset--color--text-dark, #333333);
}

.btn--dark:hover {
    background-color: var(--wp--preset--color--black, #000000);
    border-color: var(--wp--preset--color--black, #000000);
}

/* Light - Para fondos oscuros */
.btn--light {
    background-color: var(--wp--preset--color--white, #FFFFFF);
    color: var(--wp--preset--color--primary, #D50032);
    border-color: var(--wp--preset--color--white, #FFFFFF);
}

.btn--light:hover {
    background-color: transparent;
    color: var(--wp--preset--color--white, #FFFFFF);
}

/* ==========================================================================
   Layout Modifiers
   ========================================================================== */

/* Full width */
.btn--full {
    width: 100%;
}

/* Icon only (circular) */
.btn--icon {
    padding: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.btn--icon.btn--sm {
    width: 36px;
    height: 36px;
}

.btn--icon.btn--lg {
    width: 48px;
    height: 48px;
}

/* Icon inside button */
.btn__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.btn--lg .btn__icon {
    width: 20px;
    height: 20px;
}

/* ==========================================================================
   Special Effects
   ========================================================================== */

/* With shadow on hover */
.btn--shadow:hover {
    box-shadow: 0 4px 12px rgba(213, 0, 50, 0.4);
}

/* Scale effect on hover */
.btn--scale:hover {
    transform: scale(1.02);
}

/* ==========================================================================
   Button Groups
   ========================================================================== */

.btn-group {
    display: flex;/* 
    flex-wrap: wrap; */
    gap: 8px;
}

.btn-group--center {
    justify-content: center;
}

.btn-group--right {
    justify-content: flex-end;
}

.btn-group--vertical {
    flex-direction: column;
}

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

@media (max-width: 768px) {
    .btn--lg {
        padding: 14px 20px;
        font-size: 16px;
        height: 44px;
    }

    .btn--xl {
        padding: 14px 32px;
        font-size: 16px;
        height: 48px;
    }

    /* Stack buttons on mobile */
    .btn-group--stack-mobile {
        flex-direction: row;
    }

    .btn-group--stack-mobile .btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .btn--sm {
        padding: 6px 14px;
        font-size: 13px;
        height: 32px;
    }

    .btn--md {
        padding: 8px 16px;
        font-size: 13px;
        height: 36px;
    }

    .btn--lg {
        padding: 12px 18px;
        font-size: 15px;
        height: 40px;
    }

    .btn--xl {
        padding: 12px 24px;
        font-size: 15px;
        height: 44px;
        width: 100%;
    }
}