/**
 * Estilos del frontend para el bloque BCNLIP UP Button
 */

/* Variables CSS del tema */
:root {
    --color-primary: #e94f3d;
    --color-secondary: #fcb000;
    --color-tertiary: #1a235c;
}

.wp-block-gutenberg-test-bcnlip-up-button {
    margin: 20px 0;
    
    /* Alineación del botón */
    &.align-left {
        text-align: left;
    }
    
    &.align-center {
        text-align: center;
    }
    
    &.align-right {
        text-align: right;
    }
    
    .bcnlip-up-button {
        display: inline-block;
        border: none;
        text-decoration: none;
        cursor: pointer;
        transition: all 0.3s ease;
        font-weight: 600;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        line-height: 1.2;
        font-family: inherit;
        position: relative;
        overflow: hidden;
        border-radius: 8px;
        background-color: var(--color-primary, #e94f3d);
        color: #ffffff;
        
        /* Accesibilidad */
        &:focus {
            outline: 2px solid #007cba;
            outline-offset: 2px;
        }
        
        &:focus-visible {
            outline: 2px solid #007cba;
            outline-offset: 2px;
        }
        
        /* Prevenir selección de texto */
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        
        /* Tamaños del botón */
        &.size-small {
            font-size: 14px;
            padding: 10px 20px;
        }
        
        &.size-medium {
            font-size: 16px;
            padding: 12px 24px;
        }
        
        &.size-large {
            font-size: 18px;
            padding: 16px 32px;
        }
        
        /* Clases de color para colores del tema */
        &.has-primary-background-color {
            background-color: var(--color-primary, #e94f3d);
        }
        
        &.has-secondary-background-color {
            background-color: var(--color-secondary, #fcb000);
        }
        
        &.has-tertiary-background-color {
            background-color: var(--color-tertiary, #1a235c);
        }
        
        &.has-black-background-color {
            background-color: #000000;
        }
        
        &.has-white-background-color {
            background-color: #ffffff;
        }
        
        &.has-primary-text-color {
            color: var(--color-primary, #e94f3d);
        }
        
        &.has-secondary-text-color {
            color: var(--color-secondary, #fcb000);
        }
        
        &.has-tertiary-text-color {
            color: var(--color-tertiary, #1a235c);
        }
        
        &.has-black-text-color {
            color: #000000;
        }
        
        &.has-white-text-color {
            color: #ffffff;
        }
        
        /* Efectos hover */
        &:hover {
            transform: translateY(-2px);
            text-decoration: none;
        }
        
        /* Efectos activos */
        &:active {
            transform: translateY(-1px);
        }
        
        /* Efectos de animación shimmer */
        &:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, transparent 48%, rgba(255, 255, 255, 0.2) 50%, transparent 52%);
            transform: translateX(-100%);
            transition: transform 0.6s ease;
        }
        
        &:hover:before {
            transform: translateX(100%);
        }
    }
    
    /* Sombra */
    &.has-shadow .bcnlip-up-button {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        
        &:hover {
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }
        
        &:active {
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }
    }
    
    /* Ancho completo */
    &.full-width .bcnlip-up-button {
        width: 100%;
        display: block;
        text-align: center;
    }
}

/* Diseño responsivo */
@media (max-width: 768px) {
    .wp-block-gutenberg-test-bcnlip-up-button {
        .bcnlip-up-button {
            &.size-large {
                font-size: 16px;
                padding: 14px 28px;
            }
            
            &.size-medium {
                font-size: 14px;
                padding: 10px 20px;
            }
            
            &.size-small {
                font-size: 12px;
                padding: 8px 16px;
            }
        }
    }
}

@media (max-width: 480px) {
    .wp-block-gutenberg-test-bcnlip-up-button {
        .bcnlip-up-button {
            &.size-large {
                font-size: 14px;
                padding: 12px 24px;
            }
            
            &.size-medium {
                font-size: 13px;
                padding: 9px 18px;
            }
            
            &.size-small {
                font-size: 11px;
                padding: 7px 14px;
            }
        }
    }
}

/* Estados de botón deshabilitado */
.wp-block-gutenberg-test-bcnlip-up-button .bcnlip-up-button[aria-disabled="true"] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    
    &:hover {
        transform: none !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    }
    
    &:before {
        display: none;
    }
}

/* Modo oscuro */
@media (prefers-color-scheme: dark) {
    .wp-block-gutenberg-test-bcnlip-up-button {
        &.has-shadow .bcnlip-up-button {
            box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
            
            &:hover {
                box-shadow: 0 8px 25px rgba(255, 255, 255, 0.15);
            }
        }
    }
}

/* Animaciones reducidas para usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
    .wp-block-gutenberg-test-bcnlip-up-button .bcnlip-up-button {
        transition: none;
        
        &:hover {
            transform: none;
        }
        
        &:before {
            display: none;
        }
    }
}