/**
 * Pretpot Dynamic Visibility – Frontend Styles
 * File: pretpot-massive-addons-kit-pro/assets/css/dynamic-visibility.css
 *
 * Provides the base hidden state and ensures theme display rules cannot
 * override our hidden class.
 */

/**
 * Hard-hidden state set by JS when no animation is used,
 * or once the hide animation completes.
 * The !important is intentional — it must override any theme display rules.
 */
.pretpot-dv-hidden {
    display: none !important;
}

/**
 * During a show/hide animation, opacity and transform are controlled
 * inline by JS. We prevent any accidental visibility: hidden or pointer
 * events issues while the transition is running.
 */
[data-pretpot-dv] {
    /* Ensure transforms work on flex children inside Elementor containers */
    will-change: opacity, transform, filter;
}

/**
 * Elementor editor – make the hidden state visible in the editor panel
 * so designers can still select and edit elements even when they are
 * conditionally hidden on the frontend.
 */
.elementor-editor-active .pretpot-dv-hidden,
body.elementor-editor-active [data-pretpot-dv].pretpot-dv-hidden {
    display: block !important;
    opacity: 0.35 !important;
    outline: 2px dashed #b11;
    outline-offset: 2px;
}