/**
 * Estilos de botones de Blueprint para Content Egg
 * Estos estilos replican los botones del tema Blueprint para que coincidan con el diseño del sitio
 * 
 * IMPORTANTE: Este archivo usa las variables CSS del tema Blueprint.
 * Si Blueprint no está activo, se usarán los valores por defecto definidos aquí.
 */

/* 
 * Variables CSS de Blueprint - Valores por defecto (fallback)
 * Estos valores se usan SOLO si Blueprint no está activo o no define las variables.
 * Si Blueprint está activo, sus variables tendrán prioridad.
 */
.egg-container,
.cegg-list,
.egg-list,
.egg-grid,
.cegg5-container,
.cegg-custom-product-buttons {
    /* Variables de fuente - fallback a valores sensatos de Blueprint */
    --cs-font-primary-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --cs-font-primary-size: 1rem;
    --cs-font-primary-weight: 400;
    --cs-font-primary-style: normal;
    --cs-font-primary-letter-spacing: 0;
    --cs-font-primary-text-transform: none;
    
    /* Variables de botón - fallback a valores de Blueprint por defecto */
    --cs-button-border-radius: 4px;
    --cs-color-button: #292929;
    --cs-color-button-contrast: #ffffff;
    --cs-color-button-hover: #515151;
    --cs-color-button-hover-contrast: #ffffff;
}

/* Estilos para botones de Content Egg usando las clases de Bootstrap */
.egg-container .btn,
.cegg-list .btn,
.egg-list .btn,
.egg-grid .btn,
.cegg5-container .btn,
.cegg-custom-product-buttons .btn {
    /* Tipografía - usando variables de Blueprint */
    font-family: var(--cs-font-primary-family), sans-serif !important;
    font-size: var(--cs-font-primary-size) !important;
    font-weight: var(--cs-font-primary-weight) !important;
    font-style: var(--cs-font-primary-style) !important;
    letter-spacing: var(--cs-font-primary-letter-spacing) !important;
    text-transform: var(--cs-font-primary-text-transform) !important;
    
    /* Estilos de diseño */
    display: inline-block !important;
    text-decoration: none !important;
    text-align: center !important;
    padding: 1.25rem 2rem !important;
    line-height: 1 !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    
    /* Bordes y transición */
    border-radius: var(--cs-button-border-radius) !important;
    transition: all 0.25s ease !important;
    
    /* Prevenir selección de texto */
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

/* Estilos para el botón principal (btn-primary) */
.egg-container .btn-primary,
.cegg-list .btn-primary,
.egg-list .btn-primary,
.egg-grid .btn-primary,
.cegg5-container .btn-primary,
.cegg-custom-product-buttons .btn-primary {
    background-color: var(--cs-color-button) !important;
    color: var(--cs-color-button-contrast) !important;
}

.egg-container .btn-primary:hover,
.egg-container .btn-primary:focus,
.cegg-list .btn-primary:hover,
.cegg-list .btn-primary:focus,
.egg-list .btn-primary:hover,
.egg-list .btn-primary:focus,
.egg-grid .btn-primary:hover,
.egg-grid .btn-primary:focus,
.cegg5-container .btn-primary:hover,
.cegg5-container .btn-primary:focus,
.cegg-custom-product-buttons .btn-primary:hover,
.cegg-custom-product-buttons .btn-primary:focus {
    background-color: var(--cs-color-button-hover) !important;
    color: var(--cs-color-button-hover-contrast) !important;
    opacity: 0.75 !important;
    outline: none !important;
}

/* Estilos para variantes de botones - Mantener colores de Bootstrap pero con tipografía de Blueprint */

/* Success - Verde */
.egg-container .btn-success,
.cegg-list .btn-success,
.egg-list .btn-success,
.egg-grid .btn-success,
.cegg5-container .btn-success,
.cegg-custom-product-buttons .btn-success {
    background-color: #28a745 !important;
    color: #ffffff !important;
    border-color: #28a745 !important;
}

.egg-container .btn-success:hover,
.egg-container .btn-success:focus,
.cegg-list .btn-success:hover,
.cegg-list .btn-success:focus,
.egg-list .btn-success:hover,
.egg-list .btn-success:focus,
.egg-grid .btn-success:hover,
.egg-grid .btn-success:focus,
.cegg5-container .btn-success:hover,
.cegg5-container .btn-success:focus,
.cegg-custom-product-buttons .btn-success:hover,
.cegg-custom-product-buttons .btn-success:focus {
    background-color: #218838 !important;
    color: #ffffff !important;
    border-color: #1e7e34 !important;
    opacity: 1 !important;
}

/* Info - Azul claro */
.egg-container .btn-info,
.cegg-list .btn-info,
.egg-list .btn-info,
.egg-grid .btn-info,
.cegg5-container .btn-info,
.cegg-custom-product-buttons .btn-info {
    background-color: #17a2b8 !important;
    color: #ffffff !important;
    border-color: #17a2b8 !important;
}

.egg-container .btn-info:hover,
.egg-container .btn-info:focus,
.cegg-list .btn-info:hover,
.cegg-list .btn-info:focus,
.egg-list .btn-info:hover,
.egg-list .btn-info:focus,
.egg-grid .btn-info:hover,
.egg-grid .btn-info:focus,
.cegg5-container .btn-info:hover,
.cegg5-container .btn-info:focus,
.cegg-custom-product-buttons .btn-info:hover,
.cegg-custom-product-buttons .btn-info:focus {
    background-color: #138496 !important;
    color: #ffffff !important;
    border-color: #117a8b !important;
    opacity: 1 !important;
}

/* Warning - Amarillo/Naranja */
.egg-container .btn-warning,
.cegg-list .btn-warning,
.egg-list .btn-warning,
.egg-grid .btn-warning,
.cegg5-container .btn-warning,
.cegg-custom-product-buttons .btn-warning {
    background-color: #ffc107 !important;
    color: #212529 !important;
    border-color: #ffc107 !important;
}

.egg-container .btn-warning:hover,
.egg-container .btn-warning:focus,
.cegg-list .btn-warning:hover,
.cegg-list .btn-warning:focus,
.egg-list .btn-warning:hover,
.egg-list .btn-warning:focus,
.egg-grid .btn-warning:hover,
.egg-grid .btn-warning:focus,
.cegg5-container .btn-warning:hover,
.cegg5-container .btn-warning:focus,
.cegg-custom-product-buttons .btn-warning:hover,
.cegg-custom-product-buttons .btn-warning:focus {
    background-color: #e0a800 !important;
    color: #212529 !important;
    border-color: #d39e00 !important;
    opacity: 1 !important;
}

/* Danger - Rojo */
.egg-container .btn-danger,
.cegg-list .btn-danger,
.egg-list .btn-danger,
.egg-grid .btn-danger,
.cegg5-container .btn-danger,
.cegg-custom-product-buttons .btn-danger {
    background-color: #dc3545 !important;
    color: #ffffff !important;
    border-color: #dc3545 !important;
}

.egg-container .btn-danger:hover,
.egg-container .btn-danger:focus,
.cegg-list .btn-danger:hover,
.cegg-list .btn-danger:focus,
.egg-list .btn-danger:hover,
.egg-list .btn-danger:focus,
.egg-grid .btn-danger:hover,
.egg-grid .btn-danger:focus,
.cegg5-container .btn-danger:hover,
.cegg5-container .btn-danger:focus,
.cegg-custom-product-buttons .btn-danger:hover,
.cegg-custom-product-buttons .btn-danger:focus {
    background-color: #c82333 !important;
    color: #ffffff !important;
    border-color: #bd2130 !important;
    opacity: 1 !important;
}

/* Dark - Negro/Gris oscuro */
.egg-container .btn-dark,
.cegg-list .btn-dark,
.egg-list .btn-dark,
.egg-grid .btn-dark,
.cegg5-container .btn-dark,
.cegg-custom-product-buttons .btn-dark {
    background-color: #343a40 !important;
    color: #ffffff !important;
    border-color: #343a40 !important;
}

.egg-container .btn-dark:hover,
.egg-container .btn-dark:focus,
.cegg-list .btn-dark:hover,
.cegg-list .btn-dark:focus,
.egg-list .btn-dark:hover,
.egg-list .btn-dark:focus,
.egg-grid .btn-dark:hover,
.egg-grid .btn-dark:focus,
.cegg5-container .btn-dark:hover,
.cegg5-container .btn-dark:focus,
.cegg-custom-product-buttons .btn-dark:hover,
.cegg-custom-product-buttons .btn-dark:focus {
    background-color: #23272b !important;
    color: #ffffff !important;
    border-color: #1d2124 !important;
    opacity: 1 !important;
}

/* Secondary - Gris */
.egg-container .btn-secondary,
.cegg-list .btn-secondary,
.egg-list .btn-secondary,
.egg-grid .btn-secondary,
.cegg5-container .btn-secondary,
.cegg-custom-product-buttons .btn-secondary {
    background-color: #6c757d !important;
    color: #ffffff !important;
    border-color: #6c757d !important;
}

.egg-container .btn-secondary:hover,
.egg-container .btn-secondary:focus,
.cegg-list .btn-secondary:hover,
.cegg-list .btn-secondary:focus,
.egg-list .btn-secondary:hover,
.egg-list .btn-secondary:focus,
.egg-grid .btn-secondary:hover,
.egg-grid .btn-secondary:focus,
.cegg5-container .btn-secondary:hover,
.cegg5-container .btn-secondary:focus,
.cegg-custom-product-buttons .btn-secondary:hover,
.cegg-custom-product-buttons .btn-secondary:focus {
    background-color: #5a6268 !important;
    color: #ffffff !important;
    border-color: #545b62 !important;
    opacity: 1 !important;
}

/* Estilo outline (transparente con borde) */
.egg-container .btn-outline-primary,
.egg-container .btn-outline-success,
.egg-container .btn-outline-info,
.egg-container .btn-outline-warning,
.egg-container .btn-outline-danger,
.cegg-list .btn-outline-primary,
.cegg-list .btn-outline-success,
.cegg-list .btn-outline-info,
.cegg-list .btn-outline-warning,
.cegg-list .btn-outline-danger,
.egg-list .btn-outline-primary,
.egg-list .btn-outline-success,
.egg-list .btn-outline-info,
.egg-list .btn-outline-warning,
.egg-list .btn-outline-danger,
.egg-grid .btn-outline-primary,
.egg-grid .btn-outline-success,
.egg-grid .btn-outline-info,
.egg-grid .btn-outline-warning,
.egg-grid .btn-outline-danger,
.cegg5-container .btn-outline-primary,
.cegg5-container .btn-outline-success,
.cegg5-container .btn-outline-info,
.cegg5-container .btn-outline-warning,
.cegg5-container .btn-outline-danger,
.cegg-custom-product-buttons .btn-outline-primary,
.cegg-custom-product-buttons .btn-outline-success,
.cegg-custom-product-buttons .btn-outline-info,
.cegg-custom-product-buttons .btn-outline-warning,
.cegg-custom-product-buttons .btn-outline-danger {
    background-color: transparent !important;
    color: var(--cs-color-button) !important;
    border: 2px solid var(--cs-color-button) !important;
}

.egg-container .btn-outline-primary:hover,
.egg-container .btn-outline-success:hover,
.egg-container .btn-outline-info:hover,
.egg-container .btn-outline-warning:hover,
.egg-container .btn-outline-danger:hover,
.cegg-list .btn-outline-primary:hover,
.cegg-list .btn-outline-success:hover,
.cegg-list .btn-outline-info:hover,
.cegg-list .btn-outline-warning:hover,
.cegg-list .btn-outline-danger:hover,
.egg-list .btn-outline-primary:hover,
.egg-list .btn-outline-success:hover,
.egg-list .btn-outline-info:hover,
.egg-list .btn-outline-warning:hover,
.egg-list .btn-outline-danger:hover,
.egg-grid .btn-outline-primary:hover,
.egg-grid .btn-outline-success:hover,
.egg-grid .btn-outline-info:hover,
.egg-grid .btn-outline-warning:hover,
.egg-grid .btn-outline-danger:hover,
.cegg5-container .btn-outline-primary:hover,
.cegg5-container .btn-outline-success:hover,
.cegg5-container .btn-outline-info:hover,
.cegg5-container .btn-outline-warning:hover,
.cegg5-container .btn-outline-danger:hover,
.cegg-custom-product-buttons .btn-outline-primary:hover,
.cegg-custom-product-buttons .btn-outline-success:hover,
.cegg-custom-product-buttons .btn-outline-info:hover,
.cegg-custom-product-buttons .btn-outline-warning:hover,
.cegg-custom-product-buttons .btn-outline-danger:hover {
    background-color: var(--cs-color-button) !important;
    color: var(--cs-color-button-contrast) !important;
    border-color: var(--cs-color-button) !important;
    opacity: 1 !important;
}

/* Botones grandes */
.egg-container .btn.cegg-btn-big {
    padding: 1.5rem 3rem !important;
    font-size: 1.25rem !important;
    font-weight: bold !important;
}

/* Asegurar que los enlaces dentro de botones no tengan decoración */
.egg-container .btn a,
.cegg-list .btn a,
.egg-list .btn a,
.egg-grid .btn a,
.cegg5-container .btn a,
.cegg-custom-product-buttons .btn a {
    text-decoration: none !important;
    color: inherit !important;
}

/* Estilos para botones en listas con logos */
.egg-container .cegg-list-withlogos .btn {
    font-weight: bold !important;
    font-size: 1rem !important;
    padding: 0.75rem 1.5rem !important;
}

/* Ajustes responsivos para móviles */
@media (max-width: 768px) {
    .egg-container .row-products .btn {
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem !important;
    }
}

/* Asegurar que los botones en grid tengan ancho completo cuando sea necesario */
.d-grid .btn {
    width: 100% !important;
}

/* Estilos para botones de cupones */
.egg-list-coupons .btn {
    font-size: 1rem !important;
    font-weight: bold !important;
    display: block !important;
}

/* Remover estilos de box-shadow predeterminados de Bootstrap */
.egg-container .btn:focus,
.cegg-list .btn:focus,
.egg-list .btn:focus,
.egg-grid .btn:focus,
.cegg5-container .btn:focus,
.cegg-custom-product-buttons .btn:focus {
    box-shadow: none !important;
    outline: none !important;
}

/* Estilos para el botón cerrar del modal */
.egg-container .modal .btn-close {
    background-color: transparent !important;
    border: none !important;
    padding: 0.5rem !important;
}