/********************************************

 * 1. BO-stijl knoppen

 ********************************************/

.bo-style-panel-wrapper {

    margin-top: 10px;

}



.bo-style-panel {

    display: flex;

    gap: 8px;

    flex-wrap: wrap;

}



.bo-style-panel .bo-style-btn,

.bo-style-panel .bo-style-btn-clear {

    padding: 6px 12px;

    font-size: 12px;

    border-radius: 6px;

    border: none;

    cursor: pointer;

    background: #f3f3f3;

    border: 1px solid #ccc;

    transition: 0.2s ease;

    font-family: inherit;

}



.bo-style-panel .bo-style-btn:hover,

.bo-style-panel .bo-style-btn-clear:hover {

    background: #e2e2e2;

    border-color: #999;

}



.bo-style-panel .bo-style-btn:active,

.bo-style-panel .bo-style-btn-clear:active {

    transform: scale(0.97);

}







/********************************************

 * 2. BASIS (frontend + editor)

 ********************************************/





/********************************************

 * 3. HIGHLIGHT ALLEEN IN EDITOR (NOOIT FRONTEND)

 ********************************************/



/* Elementor editor paneel (links) + preview iframe */

html.elementor-editor-active body .bo-style-1,

body.elementor-edit-mode .bo-style-1 {

    outline: 2px dashed rgba(255, 190, 0, 0.6) !important;

    background: rgba(255, 230, 140, 0.25) !important;

}



html.elementor-editor-active body .bo-style-2,

body.elementor-edit-mode .bo-style-2 {

    outline: 2px dashed rgba(0, 150, 255, 0.6) !important;

    background: rgba(0, 150, 255, 0.15) !important;

}





/********************************************

 * 4. FORCE FRONTEND CLEAN

 ********************************************/

html:not(.elementor-editor-active) .bo-style-1,

html:not(.elementor-editor-active) .bo-style-2 {

    outline: none !important;

    background: none !important;

}