/********************************************
 * 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)
 ********************************************/

.bo-style-1 {
    font-weight: 600;
}

.bo-style-2 {
    font-style: italic;
}


/********************************************
 * 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;
}