/**
 * BM Elementor Form Conditions
 * Estilos Frontend
 * 
 * @package BM_Elementor_Form_Conditions
 * @version 1.0.0
 */

/* =========================================================================
   CAMPOS CONDICIONALES
   ========================================================================= */

/**
 * Estado oculto de campos condicionales
 * Se usa clase en lugar de display:none para permitir transiciones
 */
.bmefc-conditional-field.bmefc-hidden {
    display: none !important;
    visibility: hidden;
    opacity: 0;
    height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/**
 * Estado visible - asegurar que sea visible
 */
.bmefc-conditional-field:not(.bmefc-hidden) {
    display: block;
    visibility: visible;
}

/* Para campos inline (como algunos checkboxes) */
.elementor-field-group.bmefc-conditional-field:not(.bmefc-hidden) {
    display: flex;
}

/* =========================================================================
   ANIMACIONES
   ========================================================================= */

/**
 * Transición suave para opacity (fade)
 */
.bmefc-conditional-field {
    transition: opacity 0.3s ease-in-out;
}

/**
 * Animación de entrada
 */
@keyframes bmefc-fade-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bmefc-fade-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/**
 * Clase para animación de entrada
 */
.bmefc-conditional-field.bmefc-animate-in {
    animation: bmefc-fade-in 0.3s ease-out forwards;
}

.bmefc-conditional-field.bmefc-animate-out {
    animation: bmefc-fade-out 0.3s ease-out forwards;
}

/* =========================================================================
   INDICADORES VISUALES EN EDITOR (Elementor)
   ========================================================================= */

/**
 * Indicador visual para campos con condiciones en el editor
 */
.elementor-editor-active .bmefc-conditional-field::before {
    content: '⚡';
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 14px;
    opacity: 0.5;
    z-index: 10;
}

.elementor-editor-active .bmefc-conditional-field {
    position: relative;
    border-left: 3px solid #9b59b6;
    padding-left: 10px;
}

/* =========================================================================
   RESPONSIVO
   ========================================================================= */

@media (max-width: 767px) {
    .bmefc-conditional-field {
        /* Asegurar que las transiciones funcionen en móvil */
        transition: opacity 0.2s ease-in-out;
    }
}

/* =========================================================================
   ACCESIBILIDAD
   ========================================================================= */

/**
 * Los campos ocultos no deben ser accesibles por lectores de pantalla
 */
.bmefc-conditional-field.bmefc-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/**
 * Cuando se muestra, restaurar accesibilidad
 */
.bmefc-conditional-field:not(.bmefc-hidden) {
    position: relative !important;
    width: auto !important;
    height: auto !important;
    clip: auto !important;
    white-space: normal !important;
}