/*--------------------------------------------------------------
BuddyPress Member Blog - Editor Page Styles
This file contains styles specific to the post editor page.
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# CSS Variables (Design System)
--------------------------------------------------------------*/
:root {
    /* Primary Colors */
    --bpmb-primary: #2468c6;
    --bpmb-primary-hover: #1b4f9e;
    --bpmb-primary-light: #e8f0fb;

    /* Secondary Colors */
    --bpmb-secondary: #6c757d;
    --bpmb-secondary-hover: #545b62;
    --bpmb-secondary-light: #f8f9fa;

    /* State Colors */
    --bpmb-success: #28a745;
    --bpmb-success-light: #ebf9eb;
    --bpmb-danger: #dc3545;
    --bpmb-danger-light: #fce8ea;
    --bpmb-warning: #ffc107;
    --bpmb-warning-light: #fff8e1;
    --bpmb-info: #17a2b8;
    --bpmb-info-light: #e7f6f8;

    /* Text Colors */
    --bpmb-text-primary: #303030;
    --bpmb-text-secondary: #6c757d;
    --bpmb-text-muted: #999;
    --bpmb-text-light: #fff;

    /* Background Colors */
    --bpmb-bg-primary: #fff;
    --bpmb-bg-secondary: #f8f9fa;
    --bpmb-bg-tertiary: #f2f2f2;
    --bpmb-bg-hover: rgba(0, 0, 0, 0.05);

    /* Border Colors */
    --bpmb-border-color: #eee;
    --bpmb-border-color-dark: #ccc;
    --bpmb-border-color-light: rgba(0, 0, 0, 0.1);

    /* Spacing */
    --bpmb-space-xs: 4px;
    --bpmb-space-sm: 8px;
    --bpmb-space-md: 16px;
    --bpmb-space-lg: 24px;
    --bpmb-space-xl: 32px;
    --bpmb-space-2xl: 48px;

    /* Border Radius */
    --bpmb-radius-sm: 4px;
    --bpmb-radius-md: 6px;
    --bpmb-radius-lg: 10px;
    --bpmb-radius-xl: 16px;
    --bpmb-radius-full: 100px;

    /* Typography */
    --bpmb-font-size-xs: 12px;
    --bpmb-font-size-sm: 13px;
    --bpmb-font-size-md: 14px;
    --bpmb-font-size-base: 15px;
    --bpmb-font-size-lg: 16px;
    --bpmb-font-size-xl: 18px;
    --bpmb-font-size-2xl: 20px;
    --bpmb-font-size-3xl: 22px;

    /* Font Weights */
    --bpmb-font-weight-normal: 400;
    --bpmb-font-weight-medium: 500;
    --bpmb-font-weight-semibold: 600;
    --bpmb-font-weight-bold: 700;

    /* Line Heights */
    --bpmb-line-height-tight: 1.2;
    --bpmb-line-height-base: 1.5;
    --bpmb-line-height-relaxed: 1.7;

    /* Shadows */
    --bpmb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --bpmb-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --bpmb-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --bpmb-shadow-focus: 0 0 0 3px rgba(36, 104, 198, 0.25);

    /* Transitions */
    --bpmb-transition-fast: 150ms ease;
    --bpmb-transition-base: 200ms ease;
    --bpmb-transition-slow: 300ms ease;

    /* Z-index Layers */
    --bpmb-z-dropdown: 100;
    --bpmb-z-modal: 1000;
    --bpmb-z-tooltip: 1100;
}

/* Dark mode support */
.dark-mode .bp-member-blog-container,
.dark-scheme .bp-member-blog-container {
    --bpmb-bg-primary: #1a1a1a;
    --bpmb-bg-secondary: #2d2d2d;
    --bpmb-bg-tertiary: #3a3a3a;
    --bpmb-text-primary: #e0e0e0;
    --bpmb-text-secondary: #a0a0a0;
    --bpmb-border-color: #404040;
    --bpmb-border-color-dark: #555;
}

.dark-mode,
.dark-scheme {
    /* Dark Mode Colors */
    --bpmb-dark-bg-primary: #1e1e1e;
    --bpmb-dark-bg-secondary: #2c3338;
    --bpmb-dark-bg-tertiary: #3c434a;
    --bpmb-dark-text-primary: #c3c4c7;
    --bpmb-dark-text-secondary: #8c8f94;
    --bpmb-dark-text-muted: #50575e;
    --bpmb-dark-border-color: #3c434a;
    --bpmb-dark-border-color-light: #50575e;
    --bpmb-dark-accent: #72aee6;
    --bpmb-dark-accent-hover: #a3c9e6;
    --bpmb-dark-success: #46b450;
    --bpmb-dark-shadow: rgba(0,0,0,.15);
}

.select2-container--default .select2-results__option[aria-selected=true], 
.select2-container--default .select2-results__option[data-selected=true] {
    background-color: var(--bpmb-bg-primary);
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/*--------------------------------------------------------------
# Notice
--------------------------------------------------------------*/
.buddypress-wrap>.bp-feedback {
    margin: 10px 0;
}

.bp-feedback span.bp-icon {
    color: #fff;
    display: block;
    font-family: dashicons;
    left: 0;
    margin-right: 10px;
    position: relative;
    padding: 0 .5em;
}

.bp-feedback span.bp-icon:before {
    content: "\f534";
}

.bp-feedback:not(.bp-sitewide-notice) button[data-bp-close="clear"] {
    display: none;
}

.bp-feedback:not(.bp-sitewide-notice) .bp-icon+p {
    margin: 0;
}

.bp-feedback:not(.bp-sitewide-notice) .dashicons-dismiss:before {
    content: none;
}

/*--------------------------------------------------------------
# Container
--------------------------------------------------------------*/
.bp-member-blog-container {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--bpmb-space-lg);
    background: var(--bpmb-bg-primary);
    border-radius: var(--bpmb-radius-lg);
    box-shadow: var(--bpmb-shadow-sm);
}

/*--------------------------------------------------------------
# Form Styles
--------------------------------------------------------------*/
.bp-member-blog-post-form {
    display: flex;
    flex-direction: column;
    gap: var(--bpmb-space-sm);
}

.bp-member-blog-field-container {
    display: flex;
    flex-direction: column;
    gap: var(--bpmb-space-sm);
}

.bp-member-blog-field-container>label {
    display: flex;
    flex-direction: column;
    gap: var(--bpmb-space-sm);
}

.bp-member-blog-field-container>label>span:first-child {
    font-weight: var(--bpmb-font-weight-semibold);
    color: var(--bpmb-text-primary);
    font-size: var(--bpmb-font-size-md);
}

.bp-member-blog-field-container .required {
    color: var(--bpmb-danger);
    margin-left: 2px;
}

/* Text Inputs */
.bp-member-blog-field-container input[type="text"],
.bp-member-blog-field-container textarea {
    width: 100%;
    padding: var(--bpmb-space-sm) var(--bpmb-space-md);
    border: 1px solid var(--bpmb-border-color-dark);
    border-radius: var(--bpmb-radius-md);
    font-size: var(--bpmb-font-size-base);
    line-height: var(--bpmb-line-height-base);
    color: var(--bpmb-text-primary);
    background: var(--bpmb-bg-primary);
    transition: border-color var(--bpmb-transition-fast), box-shadow var(--bpmb-transition-fast);
}

.bp-member-blog-field-container input[type="text"]:focus,
.bp-member-blog-field-container textarea:focus {
    outline: none;
    border-color: var(--bpmb-primary);
    box-shadow: var(--bpmb-shadow-focus);
}

.bp-member-blog-field-container input#bpmb-category-name {
    margin-bottom: 10px;
}

/* Title Input */
#bp_member_blog_post_title {
    font-size: var(--bpmb-font-size-2xl);
    font-weight: var(--bpmb-font-weight-medium);
    padding: var(--bpmb-space-md);
}

/* Field Hints */
.bpmb-field-hint,
.bpmb-error-message {
    display: block;
    margin-top: var(--bpmb-space-xs);
    font-size: var(--bpmb-font-size-sm);
    color: var(--bpmb-text-muted);
}



/*--------------------------------------------------------------
# Classic Editor (TinyMCE) Styles
--------------------------------------------------------------*/
.wp-editor-wrap {
    border-radius: var(--bpmb-radius-md);
    overflow: hidden;
}

.wp-editor-container {
    border: 1px solid var(--bpmb-border-color-dark);
    border-radius: var(--bpmb-radius-md);
}

.mce-tinymce {
    border: none !important;
    box-shadow: none !important;
}

.mce-toolbar-grp {
    border-bottom: 1px solid var(--bpmb-border-color) !important;
    background: var(--bpmb-bg-secondary) !important;
}

.mce-edit-area iframe {
    min-height: 400px;
}

.mce-statusbar {
    border-top: 1px solid var(--bpmb-border-color) !important;
}

/*--------------------------------------------------------------
# Editor Stats (Word Count, Reading Time)
--------------------------------------------------------------*/
.bpmb-editor-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bpmb-space-md);
    padding: var(--bpmb-space-sm) var(--bpmb-space-md);
    background: var(--bpmb-bg-secondary);
    border-radius: var(--bpmb-radius-sm);
    font-size: var(--bpmb-font-size-sm);
    color: var(--bpmb-text-secondary);
    margin-top: var(--bpmb-space-sm);
}

.bpmb-editor-stats>span {
    display: inline-flex;
    align-items: center;
    gap: var(--bpmb-space-sm);
}

.bpmb-editor-stats svg {
    opacity: 0.7;
}

.dark-mode .bpmb-editor-stats {
    background: var(--bpmb-bg-tertiary);
}

@media (max-width: 480px) {
    .bpmb-editor-stats {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--bpmb-space-sm);
    }
}

/*--------------------------------------------------------------
# Focus Mode Toggle
--------------------------------------------------------------*/
button.bpmb-focus-mode-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: auto;
    padding: 0 !important;
    border: none;
    border-radius: var(--bpmb-radius-sm);
    background: transparent;
    color: var(--bpmb-text-secondary);
    cursor: pointer;
    transition: all var(--bpmb-transition-fast);
}

button.bpmb-focus-mode-toggle:hover {
    background: var(--bpmb-bg-hover);
    color: var(--bpmb-primary);
    border: none;
}

button.bpmb-focus-mode-toggle:focus {
    outline: none;
    box-shadow: var(--bpmb-shadow-focus);
}

button.bpmb-focus-mode-toggle[aria-pressed="true"] {
    background: var(--bpmb-primary-light);
    color: var(--bpmb-primary);
}

/* button.bpmb-focus-mode-toggle[aria-pressed="true"] .bpmb-icon-expand {
    display: none;
} */

button.bpmb-focus-mode-toggle[aria-pressed="true"] .bpmb-icon-collapse {
    display: inline;
}

.bpmb-focus-exit {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 9px;
    border-radius: 100px;
}

.bpmb-focus-exit span {
    display: none;
}

/*--------------------------------------------------------------
# Focus Mode (Distraction-Free)
--------------------------------------------------------------*/
body.bpmb-focus-mode {
    overflow: hidden;
}

body.bpmb-focus-mode #wpadminbar,
body.bpmb-focus-mode header,
body.bpmb-focus-mode .site-header,
body.bpmb-focus-mode nav,
body.bpmb-focus-mode .site-navigation,
body.bpmb-focus-mode footer,
body.bpmb-focus-mode .site-footer,
body.bpmb-focus-mode aside,
body.bpmb-focus-mode .sidebar,
body.bpmb-focus-mode .widget-area {
    display: none !important;
}

body.bpmb-focus-mode .bpmb-focus-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: #fff;
    overflow-y: auto;
    padding: var(--bpmb-space-xl);
}

body.bpmb-focus-mode  h3.bpmb-focus-header-title {
    margin: 0;
}

body.bpmb-focus-mode .bp-member-blog-post-form {
    max-width: 800px;
    margin: 0 auto;
}

body.bpmb-focus-mode .bp-member-blog-post-form>*:not(.bpmb-focus-visible) {
    display: none !important;
}

/* body.bpmb-focus-mode .bp-member-blog-post-form .bpmb-focus-visible {
    display: block !important;
} */

body.bpmb-focus-mode .bp-member-blog-content-field,
body.bpmb-focus-mode .bpmb-editorjs-wrapper,
body.bpmb-focus-mode .bpmb-medium-editor-wrapper,
body.bpmb-focus-mode #wp-bp_member_blog_post_content-wrap {
    display: block !important;
    opacity: 1 !important;
}

body.bpmb-focus-mode .bpmb-focus-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--bpmb-space-md) 0;
    margin-bottom: var(--bpmb-space-lg);
    border-bottom: 1px solid var(--bpmb-border-color);
}

body.bpmb-focus-mode .bp-member-blog-field-container {
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
}

body.bpmb-focus-mode .bp-member-blog-field-container>label>span:first-child {
    display: none;
}

body.bpmb-focus-mode #bp_member_blog_post_title {
    font-size: 42px;
    font-weight: var(--bpmb-font-weight-semibold);
    border: none;
    padding: var(--bpmb-space-sm) 0;
    background: transparent;
    color: var(--bpmb-text-primary);
    line-height: var(--bpmb-line-height-tight);
}

body.bpmb-focus-mode #bp_member_blog_post_title::placeholder {
    color: var(--bpmb-text-muted);
}

body.bpmb-focus-mode #bp_member_blog_post_title:focus {
    box-shadow: none;
}

body.bpmb-focus-mode .wp-editor-wrap {
    border: none;
}

body.bpmb-focus-mode .wp-editor-container {
    border: none;
}

body.bpmb-focus-mode .mce-tinymce {
    border: none !important;
}

body.bpmb-focus-mode .mce-toolbar-grp {
    background: transparent !important;
    border: none !important;
    padding: var(--bpmb-space-sm) 0;
}

body.bpmb-focus-mode .mce-toolbar-grp .mce-toolbar {
    justify-content: center;
}

body.bpmb-focus-mode .mce-btn {
    background: transparent;
}

body.bpmb-focus-mode .mce-btn:hover {
    background: var(--bpmb-bg-secondary);
}

body.bpmb-focus-mode .mce-edit-area {
    border-top: 1px solid var(--bpmb-border-color) !important;
}

body.bpmb-focus-mode .mce-edit-area iframe {
    min-height: calc(100vh - 300px);
}

body.bpmb-focus-mode .mce-statusbar {
    display: none !important;
}

body.bpmb-focus-mode .bpmb-editor-stats {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: var(--bpmb-space-md) var(--bpmb-space-xl);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--bpmb-border-color);
    border-radius: 0;
    z-index: 10000;
    justify-content: center;
    align-content: center;
}

body.bpmb-focus-mode .bpmb-editor-stats .bpmb-focus-mode-toggle {
    position: absolute;
    right: var(--bpmb-space-xl);
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: var(--bpmb-primary);
    color: #fff;
    border-radius: var(--bpmb-radius-full);
}

body.bpmb-focus-mode .bpmb-editor-stats .bpmb-focus-mode-toggle:hover {
    background: var(--bpmb-primary-hover);
}


.bp-member-blog-field-container .select2-container .select2-selection--multiple .select2-selection__rendered {
    margin: 0px;
}

.body.bpmb-focus-mode .bpmb-focus-header

/* Dark mode focus mode */
.dark-mode.bpmb-focus-mode .bpmb-focus-container {
    background: var(--bpmb-bg-primary);
}

.dark-mode.bpmb-focus-mode #bp_member_blog_post_title {
    color: var(--bpmb-text-primary);
}

.dark-mode.bpmb-focus-mode .bpmb-editor-stats {
    background: rgba(26, 26, 26, 0.95);
}

@media (max-width: 768px) {
    body.bpmb-focus-mode .bpmb-focus-container {
        padding: var(--bpmb-space-md);
    }

    body.bpmb-focus-mode #bp_member_blog_post_title {
        font-size: 28px;
    }

    body.bpmb-focus-mode .bpmb-editor-stats {
        padding: var(--bpmb-space-sm) var(--bpmb-space-md);
    }
}

/*--------------------------------------------------------------
# Dropzone (Featured Image Upload)
--------------------------------------------------------------*/
.bpmb-dropzone {
    position: relative;
    border: 2px dashed var(--bpmb-border-color-dark);
    border-radius: var(--bpmb-radius-lg);
    background: var(--bpmb-bg-secondary);
    padding: var(--bpmb-space-xl);
    text-align: center;
    cursor: pointer;
    transition: all var(--bpmb-transition-base);
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bpmb-dropzone:hover {
    border-color: var(--bpmb-primary);
    background: var(--bpmb-primary-light);
}

.bpmb-dropzone:focus {
    outline: none;
    border-color: var(--bpmb-primary);
    box-shadow: var(--bpmb-shadow-focus);
}

.bpmb-dropzone.is-dragover {
    border-color: var(--bpmb-primary);
    background: var(--bpmb-primary-light);
    border-style: solid;
    transform: scale(1.02);
}

.bpmb-dropzone.is-dragover .bpmb-dropzone-icon {
    transform: scale(1.1);
    color: var(--bpmb-primary);
}

.bpmb-dropzone.has-image .bpmb-dropzone-upload {
    display: none;
}

.bpmb-dropzone.has-image {
    padding: 0;
    border-style: solid;
}

/* Hidden file input */
.bpmb-dropzone-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.bpmb-dropzone.has-image .bpmb-dropzone-input {
    display: none;
}

/* Upload state */
.bpmb-dropzone-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--bpmb-space-md);
}

.bpmb-dropzone-icon {
    color: var(--bpmb-text-muted);
    transition: all var(--bpmb-transition-base);
}

.bpmb-dropzone-icon svg {
    width: 48px;
    height: 48px;
}

.bpmb-dropzone-text {
    display: flex;
    flex-direction: column;
    gap: var(--bpmb-space-xs);
}

.bpmb-dropzone-primary {
    font-size: var(--bpmb-font-size-lg);
    font-weight: var(--bpmb-font-weight-medium);
    color: var(--bpmb-text-primary);
}

.bpmb-dropzone-secondary {
    font-size: var(--bpmb-font-size-md);
    color: var(--bpmb-text-secondary);
}

.bpmb-dropzone-hint {
    font-size: var(--bpmb-font-size-sm);
    color: var(--bpmb-text-muted);
    margin-top: var(--bpmb-space-sm);
}

/* Preview state */
.bpmb-dropzone-preview {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bpmb-bg-tertiary);
    border-radius: calc(var(--bpmb-radius-lg) - 2px);
    overflow: hidden;
}

.bpmb-dropzone-preview img {
    max-width: 100%;
    max-height: 300px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Overlay with actions */
.bpmb-dropzone-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--bpmb-space-md);
    opacity: 0;
    transition: opacity var(--bpmb-transition-base);
}

.bpmb-dropzone-preview:hover .bpmb-dropzone-overlay {
    opacity: 1;
}

.bpmb-dropzone-change,
.bpmb-dropzone-remove {
    display: inline-flex;
    align-items: center;
    gap: var(--bpmb-space-sm);
    padding: var(--bpmb-space-sm) var(--bpmb-space-md);
    border: none;
    border-radius: var(--bpmb-radius-md);
    font-size: var(--bpmb-font-size-md);
    font-weight: var(--bpmb-font-weight-medium);
    cursor: pointer;
    transition: all var(--bpmb-transition-fast);
}

.bpmb-dropzone-change {
    background: var(--bpmb-primary);
    color: var(--bpmb-text-light);
}

.bpmb-dropzone-change:hover {
    background: var(--bpmb-primary-hover);
}

.bpmb-dropzone-remove {
    background: var(--bpmb-danger);
    color: var(--bpmb-text-light);
}

.bpmb-dropzone-remove:hover {
    background: #c82333;
}

.bpmb-dropzone-change svg,
.bpmb-dropzone-remove svg {
    width: 18px;
    height: 18px;
}

/* Loading state */
.bpmb-dropzone-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--bpmb-space-md);
    color: var(--bpmb-text-secondary);
}

.bpmb-dropzone-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--bpmb-border-color);
    border-top-color: var(--bpmb-primary);
    border-radius: 50%;
    animation: bpmb-spin 0.8s linear infinite;
}

@keyframes bpmb-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Error state */
.bpmb-dropzone.has-error {
    border-color: var(--bpmb-danger);
    background: var(--bpmb-danger-light);
}

.bpmb-dropzone-error {
    position: absolute;
    bottom: var(--bpmb-space-sm);
    left: var(--bpmb-space-md);
    right: var(--bpmb-space-md);
    padding: var(--bpmb-space-sm) var(--bpmb-space-md);
    background: var(--bpmb-danger);
    color: var(--bpmb-text-light);
    border-radius: var(--bpmb-radius-sm);
    font-size: var(--bpmb-font-size-sm);
    text-align: center;
}

/* Dark mode dropzone */
.dark-mode .bpmb-dropzone {
    background: var(--bpmb-bg-tertiary);
    border-color: var(--bpmb-border-color);
}

.dark-mode .bpmb-dropzone:hover {
    border-color: var(--bpmb-primary);
}

.dark-mode .bpmb-dropzone-primary {
    color: var(--bpmb-text-primary);
}

/* Mobile dropzone */
@media (max-width: 480px) {
    .bpmb-dropzone {
        padding: var(--bpmb-space-lg);
        min-height: 150px;
    }

    .bpmb-dropzone-icon svg {
        width: 36px;
        height: 36px;
    }

    .bpmb-dropzone-primary {
        font-size: var(--bpmb-font-size-md);
    }

    .bpmb-dropzone-preview img {
        max-height: 200px;
    }

    .bpmb-dropzone-overlay {
        flex-direction: column;
        gap: var(--bpmb-space-sm);
    }

    .bpmb-dropzone-change,
    .bpmb-dropzone-remove {
        width: 100%;
        max-width: 150px;
        justify-content: center;
    }
}

/*--------------------------------------------------------------
# Category & Tag Inputs
--------------------------------------------------------------*/
.bp-member-blog-post-category-wrapper {
    display: flex;
    gap: var(--bpmb-space-sm);
    align-items: center;
}

.bp-member-blog-post-category-wrapper select {
    flex: 1;
}

.add-bpmb-category {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--bpmb-radius-md);
    background: var(--bpmb-primary);
    color: var(--bpmb-text-light);
    text-decoration: none;
    transition: all var(--bpmb-transition-fast);
}

.add-bpmb-category:hover {
    background: var(--bpmb-primary-hover);
    color: var(--bpmb-text-light);
}

.add-bpmb-cat-row {
    display: none;
    flex-wrap: wrap;
    gap: var(--bpmb-space-sm);
    margin-top: var(--bpmb-space-sm);
    padding: var(--bpmb-space-md);
    background: var(--bpmb-bg-secondary);
    border-radius: var(--bpmb-radius-md);
}

.add-bpmb-cat-row input[type="text"] {
    flex: 1;
    min-width: 200px;
}

/* Tag List */
.bpmb-post-tag-lists {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bpmb-space-sm);
    list-style: none;
    padding: 0;
    margin: var(--bpmb-space-sm) 0 0 0;
}

.added-post-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--bpmb-space-xs);
    padding: var(--bpmb-space-xs) var(--bpmb-space-sm);
    background: var(--bpmb-primary-light);
    color: var(--bpmb-primary);
    border-radius: var(--bpmb-radius-full);
    font-size: var(--bpmb-font-size-sm);
}

.bpmb-tag-remove {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0 !important;
    border: none;
    border-radius: 50% !important;
    background: transparent;
    color: var(--bpmb-primary);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    transition: all var(--bpmb-transition-fast);
}

.bpmb-tag-remove:hover {
    background: var(--bpmb-danger);
    color: var(--bpmb-text-light);
}

/*--------------------------------------------------------------
# Select2 Overrides
--------------------------------------------------------------*/
.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--bpmb-border-color-dark);
    border-radius: var(--bpmb-radius-md);
    min-height: 40px;
    padding: var(--bpmb-space-xs);
}

.select2-container--default .select2-selection--multiple:focus-within {
    border-color: var(--bpmb-primary);
    box-shadow: var(--bpmb-shadow-focus);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--bpmb-primary-light);
    border: none;
    border-radius: var(--bpmb-radius-full);
    color: var(--bpmb-primary);
    padding: var(--bpmb-space-xs) var(--bpmb-space-sm);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--bpmb-primary);
    margin-right: var(--bpmb-space-xs);
    border-radius: 0px;
    height: 100%;
}

.select2-dropdown {
    border-color: var(--bpmb-border-color-dark);
    border-radius: var(--bpmb-radius-md);
    box-shadow: var(--bpmb-shadow-md);
}

.select2-results__option--highlighted {
    background: var(--bpmb-primary) !important;
}

/*--------------------------------------------------------------
# Form Actions
--------------------------------------------------------------*/
.bp-member-blog-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bpmb-space-md);
    padding-top: var(--bpmb-space-lg);
    border-top: 1px solid var(--bpmb-border-color);
    margin-top: var(--bpmb-space-lg);
}

.bp-member-blog-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--bpmb-space-sm);
    padding: var(--bpmb-space-sm) var(--bpmb-space-lg);
    border: 2px solid transparent;
    border-radius: var(--bpmb-radius-md);
    font-size: var(--bpmb-font-size-base);
    font-weight: var(--bpmb-font-weight-medium);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--bpmb-transition-fast);
}

.bp-member-blog-btn.button-primary,
#blog-submit-publish {
    background: var(--bpmb-primary);
    color: var(--bpmb-text-light);
    border-color: var(--bpmb-primary);
}

.bp-member-blog-btn.button-primary:hover,
#blog-submit-publish:hover {
    background: var(--bpmb-primary-hover);
    border-color: var(--bpmb-primary-hover);
}

.bp-member-blog-btn.button-secondary,
#blog-submit-save {
    background: var(--bpmb-bg-primary);
    color: var(--bpmb-text-primary);
    border-color: var(--bpmb-border-color-dark);
}

.bp-member-blog-btn.button-secondary:hover,
#blog-submit-save:hover {
    background: var(--bpmb-bg-secondary);
    color: var(--bpmb-text-primary);
    border-color: var(--bpmb-primary);
}

.bp-member-blog-btn.button-outline {
    background: transparent;
    color: var(--bpmb-text-secondary);
    border-color: var(--bpmb-border-color-dark);
}

.bp-member-blog-btn.button-outline:hover {
    background: var(--bpmb-bg-secondary);
    color: var(--bpmb-primary);
    border-color: var(--bpmb-primary);
}

.bp-member-blog-btn:focus {
    outline: none;
    box-shadow: var(--bpmb-shadow-focus);
}

@media (max-width: 480px) {
    .bp-member-blog-form-actions {
        flex-direction: column;
    }

    .bp-member-blog-btn {
        width: 100%;
    }
}

/*--------------------------------------------------------------
# Preview Modal
--------------------------------------------------------------*/
.bpmb-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--bpmb-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--bpmb-space-lg);
}

.bpmb-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.bpmb-modal-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    max-height: 90vh;
    background: var(--bpmb-bg-primary);
    border-radius: var(--bpmb-radius-lg);
    box-shadow: var(--bpmb-shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.bpmb-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--bpmb-space-md) var(--bpmb-space-lg);
    border-bottom: 1px solid var(--bpmb-border-color);
}

.bpmb-modal-header h2 {
    margin: 0;
    font-size: var(--bpmb-font-size-xl);
    font-weight: var(--bpmb-font-weight-semibold);
}

.bpmb-modal-close {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0 !important;
    border: none;
    border-radius: var(--bpmb-radius-sm);
    background: transparent;
    color: var(--bpmb-text-secondary);
    cursor: pointer;
    transition: all var(--bpmb-transition-fast);
}

.bpmb-modal-close:hover {
    background: var(--bpmb-bg-secondary);
    color: var(--bpmb-danger);
    border: none;
}

.bpmb-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--bpmb-space-lg);
}

.bpmb-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--bpmb-space-md);
    padding: var(--bpmb-space-md) var(--bpmb-space-lg);
    border-top: 1px solid var(--bpmb-border-color);
}

/* Preview Content */
.bpmb-preview-content {
    max-width: 100%;
}

.bpmb-preview-featured-image {
    margin-bottom: var(--bpmb-space-lg);
    border-radius: var(--bpmb-radius-md);
    overflow: hidden;
}

.bpmb-preview-featured-image img {
    width: 100%;
    height: auto;
    display: block;
}

.bpmb-preview-post-title {
    font-size: var(--bpmb-font-size-2xl);
    font-weight: var(--bpmb-font-weight-bold);
    margin: 0 0 var(--bpmb-space-md) 0;
    color: var(--bpmb-text-primary);
}

.bpmb-preview-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bpmb-space-md);
    margin-bottom: var(--bpmb-space-lg);
    font-size: var(--bpmb-font-size-sm);
    color: var(--bpmb-text-secondary);
}

.bpmb-preview-meta>span {
    display: inline-flex;
    align-items: center;
    gap: var(--bpmb-space-xs);
}

.bpmb-preview-categories,
.bpmb-preview-tags {
    font-size: var(--bpmb-font-size-sm);
    color: var(--bpmb-text-secondary);
    margin-bottom: var(--bpmb-space-md);
}

.bpmb-preview-post-content {
    line-height: var(--bpmb-line-height-relaxed);
    color: var(--bpmb-text-primary);
}

.bpmb-preview-post-content p {
    margin-bottom: var(--bpmb-space-md);
}

@media (max-width: 768px) {
    .bpmb-modal {
        padding: var(--bpmb-space-sm);
    }

    .bpmb-modal-container {
        max-height: 95vh;
    }

    .bpmb-modal-header,
    .bpmb-modal-body,
    .bpmb-modal-footer {
        padding: var(--bpmb-space-md);
    }

    .bpmb-modal-footer {
        flex-direction: column;
    }

    .bpmb-modal-footer button {
        width: 100%;
    }
}

/*--------------------------------------------------------------
# Toast Notifications
--------------------------------------------------------------*/
.bpmb-toast-container {
    position: fixed;
    bottom: var(--bpmb-space-lg);
    right: var(--bpmb-space-lg);
    z-index: var(--bpmb-z-tooltip);
    display: flex;
    flex-direction: column;
    gap: var(--bpmb-space-sm);
}

.bpmb-toast {
    display: flex;
    align-items: center;
    gap: var(--bpmb-space-sm);
    padding: var(--bpmb-space-md);
    background: var(--bpmb-bg-primary);
    border-radius: var(--bpmb-radius-md);
    box-shadow: var(--bpmb-shadow-lg);
    min-width: 280px;
    max-width: 400px;
    animation: bpmb-slide-in 0.3s ease;
}

.bpmb-toast.is-success {
    border-left: 4px solid var(--bpmb-success);
}

.bpmb-toast.is-error {
    border-left: 4px solid var(--bpmb-danger);
}

.bpmb-toast.is-warning {
    border-left: 4px solid var(--bpmb-warning);
}

.bpmb-toast.is-info {
    border-left: 4px solid var(--bpmb-info);
}

@keyframes bpmb-slide-in {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@media (max-width: 480px) {
    .bpmb-toast-container {
        left: var(--bpmb-space-md);
        right: var(--bpmb-space-md);
        bottom: var(--bpmb-space-md);
    }

    .bpmb-toast {
        min-width: auto;
        max-width: none;
    }
}

/*--------------------------------------------------------------
# Loading States
--------------------------------------------------------------*/
.bpmb-loading {
    display: inline-flex;
    align-items: center;
    gap: var(--bpmb-space-sm);
}

.bpmb-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--bpmb-border-color);
    border-top-color: var(--bpmb-primary);
    border-radius: 50%;
    animation: bpmb-spin 0.8s linear infinite;
}

/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/
@media (max-width: 768px) {
    .bp-member-blog-container {
        padding: var(--bpmb-space-md);
        margin: 0;
        border-radius: 0;
    }

    #bp_member_blog_post_title {
        font-size: var(--bpmb-font-size-xl);
    }
}

@media (max-width: 480px) {
    .bp-member-blog-container {
        padding: var(--bpmb-space-sm);
    }

    .bp-member-blog-field-container>label>span:first-child {
        font-size: var(--bpmb-font-size-sm);
    }
}

/*--------------------------------------------------------------
# Medium Editor Styles
--------------------------------------------------------------*/
.bpmb-medium-editor-wrapper {
    position: relative;
    margin-top: var(--bpmb-space-md);
    overflow: visible;
}

.bpmb-medium-editable {
    min-height: 400px;
    max-height: none;
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--bpmb-space-lg);
    background-color: var(--bpmb-bg-primary);
    border: 1px solid var(--bpmb-border-color-dark);
    border-radius: var(--bpmb-radius-md);
    font-size: 18px;
    line-height: 1.7;
    color: var(--bpmb-text-primary);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.bpmb-medium-editable.medium-editor-element,
.bpmb-medium-editable.medium-editor-placeholder {
    min-height: 400px;
}

.bpmb-medium-editable:focus {
    border-color: var(--bpmb-primary);
    box-shadow: 0 0 0 3px rgba(36, 104, 198, 0.15);
}

/* Ensure contenteditable works properly */
.bpmb-medium-editable[contenteditable="true"] {
    -webkit-user-modify: read-write;
    -moz-user-modify: read-write;
    user-modify: read-write;
    white-space: pre-wrap;
}

/* Allow images and embeds to be resizable/deletable */
.bpmb-medium-editable img,
.bpmb-medium-editable iframe {
    max-width: 100%;
    cursor: pointer;
}

.bpmb-medium-editable img:focus,
.bpmb-medium-editable figure:focus {
    outline: 2px solid var(--bpmb-primary);
    outline-offset: 2px;
}

/* Placeholder */
.medium-editor-placeholder-relative:after {
    color: #b3b3b1;
}

.medium-editor-placeholder-relative:after {
    position: absolute;
    left: 0;
    top: 0;
}

/* Content Styling */
.bpmb-medium-editable p {
    margin: 0 0 1.2em;
}

.bpmb-medium-editable p:last-child {
    margin-bottom: 0;
}

.bpmb-medium-editable h2,
.bpmb-medium-editable h3 {
    margin-top: 1.5em;
    margin-bottom: 0.75em;
    font-weight: 600;
    line-height: 1.3;
    color: var(--bpmb-text-primary);
}

.bpmb-medium-editable h2 {
    font-size: 1.75em;
}

.bpmb-medium-editable h3 {
    font-size: 1.35em;
}

.bpmb-medium-editable h2:first-child,
.bpmb-medium-editable h3:first-child {
    margin-top: 0;
}

.bpmb-medium-editable blockquote {
    margin: 1.5em 0;
    padding-left: var(--bpmb-space-lg);
    border-left: 4px solid var(--bpmb-primary);
    font-style: italic;
    color: var(--bpmb-text-secondary);
}

.bpmb-medium-editable ul,
.bpmb-medium-editable ol {
    margin: 1em 0;
    padding-left: 1.5em;
}

.bpmb-medium-editable li {
    margin-bottom: 0.5em;
}

.bpmb-medium-editable a {
    color: var(--bpmb-primary);
    text-decoration: underline;
}

.bpmb-medium-editable a:hover {
    color: var(--bpmb-primary-hover);
}

/* Medium Editor Toolbar Customization */
.medium-editor-toolbar {
    border: none;
    background: linear-gradient(to bottom, #3a3a3a, #2a2a2a);
    border-radius: var(--bpmb-radius-md);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    padding: var(--bpmb-space-xs);
}

.medium-editor-toolbar li button {
    min-width: 36px;
    height: 36px;
    padding: 0;
    margin: 2px;
    background-color: transparent;
    border: none;
    border-radius: var(--bpmb-radius-sm);
    color: #fff !important;
    transition: background-color 0.15s ease;
}

.medium-editor-toolbar li button:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.medium-editor-toolbar li button.medium-editor-button-active {
    background-color: var(--bpmb-primary);
    color: #fff;
}

.medium-editor-toolbar li .medium-editor-button-first {
    border-radius: var(--bpmb-radius-sm) 0 0 var(--bpmb-radius-sm);
}

.medium-editor-toolbar li .medium-editor-button-last {
    border-radius: 0 var(--bpmb-radius-sm) var(--bpmb-radius-sm) 0;
}

/* Toolbar arrow */
.medium-editor-toolbar:after {
    border-top-color: #2a2a2a;
}

/* Anchor Preview */
.medium-editor-anchor-preview {
    background: #2a2a2a;
    border-radius: var(--bpmb-radius-sm);
    padding: var(--bpmb-space-sm) var(--bpmb-space-md);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.medium-editor-anchor-preview a {
    color: #4a90d9;
    text-decoration: none;
}

/* Anchor Form */
.medium-editor-toolbar-form {
    background: #2a2a2a;
    border-radius: var(--bpmb-radius-sm);
}

.medium-editor-toolbar-form input {
    background: #444;
    border: 1px solid #555;
    border-radius: var(--bpmb-radius-sm);
    color: #fff;
    padding: var(--bpmb-space-sm) var(--bpmb-space-md);
}

.medium-editor-toolbar-form input:focus {
    border-color: var(--bpmb-primary);
    outline: none;
}

.medium-editor-toolbar-form a {
    color: #fff;
}

.medium-editor-toolbar-form .medium-editor-toolbar-save,
.medium-editor-toolbar-form .medium-editor-toolbar-close {
    min-width: 36px;
    height: 36px;
    padding: 0;
    margin: 2px;
    background-color: transparent;
    border: none;
    border-radius: var(--bpmb-radius-sm);
    color: #fff;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.medium-editor-toolbar-form .medium-editor-toolbar-save:hover {
    background-color: var(--bpmb-success);
}

.medium-editor-toolbar-form .medium-editor-toolbar-close:hover {
    background-color: var(--bpmb-danger);
}

/* Medium Editor Responsive */
@media (max-width: 768px) {
    .bpmb-medium-editable,
    .bpmb-medium-editable.medium-editor-element,
    .bpmb-medium-editable.medium-editor-placeholder {
        min-height: 300px;
        padding: var(--bpmb-space-md);
        font-size: 16px;
    }

    .medium-editor-toolbar {
        left: var(--bpmb-space-sm) !important;
        right: var(--bpmb-space-sm) !important;
        width: auto !important;
    }

    .medium-editor-toolbar li button {
        min-width: 32px;
        height: 32px;
    }
}

/*--------------------------------------------------------------
# Medium Editor - Bottom Toolbar
--------------------------------------------------------------*/
.bpmb-medium-bottom-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bpmb-space-sm);
    padding: var(--bpmb-space-md);
    margin-top: var(--bpmb-space-md);
    background-color: var(--bpmb-bg-secondary);
    border: 1px solid var(--bpmb-border-color);
    border-radius: var(--bpmb-radius-md);
}

.bpmb-toolbar-btn {
    display: inline-flex !important;
    align-items: center;
    gap: var(--bpmb-space-sm);
    padding: var(--bpmb-space-sm) var(--bpmb-space-md);
    background-color: var(--bpmb-bg-primary);
    border: 1px solid var(--bpmb-border-color-dark);
    border-radius: var(--bpmb-radius-sm);
    color: var(--bpmb-text-secondary);
    font-size: var(--bpmb-font-size-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bpmb-toolbar-btn:hover {
    background-color: var(--bpmb-primary-light);
    border-color: var(--bpmb-primary);
    color: var(--bpmb-primary);
}

.bpmb-toolbar-btn:active {
    transform: translateY(1px);
}

.bpmb-toolbar-btn svg {
    flex-shrink: 0;
}

.bpmb-toolbar-btn span {
    font-weight: 500;
}

/*--------------------------------------------------------------
# Medium Editor - Image Blocks
--------------------------------------------------------------*/
.bpmb-medium-editable .bpmb-image-block {
    margin: 1.5em 0;
    padding: 0;
    text-align: center;
}

.bpmb-medium-editable .bpmb-image-block img {
    max-width: 100%;
    height: auto;
    border-radius: var(--bpmb-radius-md);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.bpmb-medium-editable .bpmb-image-block figcaption {
    margin-top: var(--bpmb-space-sm);
    font-size: var(--bpmb-font-size-sm);
    color: var(--bpmb-text-secondary);
    font-style: italic;
}

/*--------------------------------------------------------------
# Medium Editor - Code Blocks
--------------------------------------------------------------*/
.bpmb-medium-editable code {
    padding: 2px 6px;
    background-color: var(--bpmb-bg-tertiary);
    border-radius: var(--bpmb-radius-sm);
    font-family: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', monospace;
    font-size: 0.9em;
    color: var(--bpmb-danger);
}

.bpmb-medium-editable pre {
    margin: 1.5em 0;
    padding: var(--bpmb-space-md);
    background-color: #1e1e1e;
    border-radius: var(--bpmb-radius-md);
    overflow-x: auto;
}

.bpmb-medium-editable pre code {
    display: block;
    padding: 0;
    background: none;
    color: #d4d4d4;
    font-size: 14px;
    line-height: 1.6;
}

/*--------------------------------------------------------------
# Medium Editor - Video Embeds
--------------------------------------------------------------*/
.bpmb-medium-editable .bpmb-video-block {
    margin: 1.5em 0;
}

.bpmb-medium-editable .bpmb-video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    border-radius: var(--bpmb-radius-md);
    background-color: #000;
}

.bpmb-medium-editable .bpmb-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/*--------------------------------------------------------------
# Medium Editor - Horizontal Rule
--------------------------------------------------------------*/
.bpmb-medium-editable hr {
    margin: 2em 0;
    border: none;
    border-top: 2px solid var(--bpmb-border-color);
}

/*--------------------------------------------------------------
# Uniform Form Styling
--------------------------------------------------------------*/
/* Form Container */
.bp-member-blog-container {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--bpmb-space-xl);
    background-color: var(--bpmb-bg-primary);
    border-radius: var(--bpmb-radius-lg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Form Header */
.bp-member-blog-container h2,
.bp-member-blog-container .bpmb-form-title {
    margin: 0 0 var(--bpmb-space-lg);
    padding-bottom: var(--bpmb-space-md);
    border-bottom: 1px solid var(--bpmb-border-color);
    font-size: var(--bpmb-font-size-2xl);
    font-weight: 600;
    color: var(--bpmb-text-primary);
}

/* Form Fields Container */
.bp-member-blog-field-container {
    margin-bottom: var(--bpmb-space-sm);
}

/* Labels */
.bp-member-blog-field-container>label {
    display: block;
    margin-bottom: var(--bpmb-space-sm);
}

.bp-member-blog-field-container>label>span:first-child {
    display: block;
    margin-bottom: var(--bpmb-space-xs);
    font-weight: 600;
    font-size: var(--bpmb-font-size-base);
    color: var(--bpmb-text-primary);
}

/* Required indicator */
.bp-member-blog-field-container>label .required {
    color: var(--bpmb-danger);
    margin-left: 2px;
}

/* All Input Fields */
.bp-member-blog-field-container input[type="text"],
.bp-member-blog-field-container input[type="email"],
.bp-member-blog-field-container input[type="url"],
.bp-member-blog-field-container textarea,
.bp-member-blog-field-container select {
    width: 100%;
    padding: var(--bpmb-space-sm) var(--bpmb-space-md);
    border: 1px solid var(--bpmb-border-color-dark);
    border-radius: var(--bpmb-radius-md);
    font-size: var(--bpmb-font-size-base);
    line-height: 1.5;
    color: var(--bpmb-text-primary);
    background-color: var(--bpmb-bg-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.bp-member-blog-field-container input[type="text"]:focus,
.bp-member-blog-field-container input[type="email"]:focus,
.bp-member-blog-field-container input[type="url"]:focus,
.bp-member-blog-field-container textarea:focus,
.bp-member-blog-field-container select:focus {
    border-color: var(--bpmb-primary);
    box-shadow: 0 0 0 3px rgba(36, 104, 198, 0.15);
    outline: none;
}

/* Title Field - Make it more prominent */
#bp_member_blog_post_title {
    padding: var(--bpmb-space-md);
    font-size: var(--bpmb-font-size-xl);
    font-weight: 500;
}

/* Select2 Uniform Styling */
.bp-member-blog-field-container .select2-container {
    width: 100% !important;
}

.bp-member-blog-field-container .select2-container--default .select2-selection--multiple,
.bp-member-blog-field-container .select2-container--default .select2-selection--single {
    border: 1px solid var(--bpmb-border-color-dark);
    border-radius: var(--bpmb-radius-md);
    min-height: 42px;
    padding: var(--bpmb-space-xs);
}

.bp-member-blog-field-container .select2-container--default .select2-selection--multiple:focus-within,
.bp-member-blog-field-container .select2-container--default .select2-selection--single:focus-within {
    border-color: var(--bpmb-primary);
    box-shadow: 0 0 0 3px rgba(36, 104, 198, 0.15);
}

.bp-member-blog-field-container .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--bpmb-primary-light);
    border: none;
    border-radius: var(--bpmb-radius-sm);
    padding: var(--bpmb-space-xs) var(--bpmb-space-sm);
    color: var(--bpmb-primary);
    margin-left: 0;
    margin-right: 5px;
    margin-bottom: 3px;
    /* padding-left: 32px; */
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    font-size: var(--bpmb-font-size-md);
    line-height: 1.7;
    padding: 0px;
}

.select2-container--default .select2-search--inline .select2-search__field {
    font-family: inherit;
    border-radius: 0 !important;
    max-height: 32px;
    height: 100%;
    font-size: 16px;
}

.select2-container--default .select2-selection--multiple .select2-selection__clear {
    color: inherit;
    opacity: 0.5;
}

.select2-container--open .select2-dropdown.select2-dropdown--below {
    margin-top: 32px;
}

/* Featured Image Section */
.bpmb-featured-image-section {
    padding: var(--bpmb-space-lg);
    background-color: var(--bpmb-bg-secondary);
    border: 2px dashed var(--bpmb-border-color-dark);
    border-radius: var(--bpmb-radius-lg);
    text-align: center;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.bpmb-featured-image-section:hover {
    border-color: var(--bpmb-primary);
    background-color: var(--bpmb-primary-light);
}

.bpmb-featured-image-section.has-image {
    border-style: solid;
    border-color: var(--bpmb-border-color);
}

/* Tags Section */
.bpmb-post-tag-lists {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bpmb-space-sm);
    margin-top: var(--bpmb-space-sm);
}

.bpmb-post-tag-lists .added-post-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--bpmb-space-xs);
    padding: var(--bpmb-space-xs) var(--bpmb-space-sm);
    background-color: var(--bpmb-bg-secondary);
    border: 1px solid var(--bpmb-border-color);
    border-radius: var(--bpmb-radius-full);
    font-size: var(--bpmb-font-size-sm);
    color: var(--bpmb-text-secondary);
}

.bpmb-post-tag-lists .added-post-tag .remove-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background-color: var(--bpmb-text-muted);
    border-radius: 50%;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.bpmb-post-tag-lists .added-post-tag .remove-tag:hover {
    background-color: var(--bpmb-danger);
}


/* Seo Setting */

.bp-member-blog-seo-section {
    margin-top: 20px;
}

.bpmb-seo-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    margin-bottom: 20px;
}

.bpmb-seo-header h4 {
    margin-bottom: 0px;
}

.bpmb-seo-header .bpmb-seo-toggle-icon {
    transition: all 0.3s;
}

.bpmb-seo-header[aria-expanded="true"] .bpmb-seo-toggle-icon {
    transform: rotate(180deg);
}

/* Form Actions */
.bp-member-blog-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bpmb-space-md);
    margin-top: var(--bpmb-space-xl);
    padding-top: var(--bpmb-space-lg);
    border-top: 1px solid var(--bpmb-border-color);
}

/* Buttons */
.bp-member-blog-form-actions button,
.bp-member-blog-form-actions input[type="submit"],
.bp-member-blog-form-actions .button {
    padding: var(--bpmb-space-sm) var(--bpmb-space-lg);
    border: none;
    border-radius: var(--bpmb-radius-md);
    font-size: var(--bpmb-font-size-base);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Primary Button (Submit/Publish) */
.bp-member-blog-form-actions input[type="submit"],
.bp-member-blog-form-actions .bpmb-btn-primary {
    background-color: var(--bpmb-primary);
    color: #fff;
}

.bp-member-blog-form-actions input[type="submit"]:hover,
.bp-member-blog-form-actions .bpmb-btn-primary:hover {
    background-color: var(--bpmb-primary-hover);
}

/* Secondary Button (Draft/Preview) */
.bp-member-blog-form-actions .bpmb-btn-secondary,
.bp-member-blog-form-actions button:not(.bpmb-btn-primary) {
    background-color: var(--bpmb-bg-secondary);
    border: 1px solid var(--bpmb-border-color-dark);
    color: var(--bpmb-text-secondary);
}

.bp-member-blog-form-actions .bpmb-btn-secondary:hover,
.bp-member-blog-form-actions button:not(.bpmb-btn-primary):hover {
    background-color: var(--bpmb-bg-tertiary);
    color: var(--bpmb-text-primary);
}

/* Form Section Dividers */
.bpmb-form-section {
    margin-bottom: var(--bpmb-space-xl);
    padding-bottom: var(--bpmb-space-lg);
    border-bottom: 1px solid var(--bpmb-border-color);
}

.bpmb-form-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* Section Headers */
.bpmb-section-header {
    margin-bottom: var(--bpmb-space-md);
    font-size: var(--bpmb-font-size-lg);
    font-weight: 600;
    color: var(--bpmb-text-primary);
}

/* Helper Text */
.bpmb-helper-text {
    margin-top: var(--bpmb-space-xs);
    font-size: var(--bpmb-font-size-sm);
    color: var(--bpmb-text-muted);
}

/* Responsive Form */
@media (max-width: 768px) {
    .bp-member-blog-container {
        padding: var(--bpmb-space-md);
    }

    .bp-member-blog-form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .bp-member-blog-form-actions button,
    .bp-member-blog-form-actions input[type="submit"] {
        width: 100%;
        text-align: center;
    }

    .bpmb-medium-bottom-toolbar {
        justify-content: center;
    }

    .bpmb-toolbar-btn span {
        display: none;
    }

    .bpmb-toolbar-btn {
        padding: var(--bpmb-space-sm);
    }
}

/*--------------------------------------------------------------
# Success Notice
--------------------------------------------------------------*/
.bpmb-success-notice {
    display: flex;
    align-items: center;
    gap: var(--bpmb-space-md);
    padding: var(--bpmb-space-md) var(--bpmb-space-lg);
    margin-bottom: var(--bpmb-space-lg);
    background: linear-gradient(135deg, var(--bpmb-success-light) 0%, #d4edda 100%);
    border: 1px solid var(--bpmb-success);
    border-radius: var(--bpmb-radius-lg);
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.15);
    animation: bpmb-slide-down 0.3s ease-out;
}

@keyframes bpmb-slide-down {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.bpmb-success-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: var(--bpmb-success);
    border-radius: 50%;
    color: #fff;
}

.bpmb-success-icon svg {
    width: 24px;
    height: 24px;
}

.bpmb-success-icon--draft {
    background: var(--bpmb-info);
}

.bpmb-success-icon--pending {
    background: var(--bpmb-warning);
    color: var(--bpmb-text-primary);
}

.bpmb-success-content {
    flex: 1;
    min-width: 0;
}

.bpmb-success-content strong {
    display: block;
    font-size: var(--bpmb-font-size-lg);
    font-weight: 600;
    color: #155724;
    margin-bottom: var(--bpmb-space-xs);
}

.bpmb-success-content p {
    margin: 0;
    font-size: var(--bpmb-font-size-md);
    color: #155724;
    opacity: 0.9;
}

.bpmb-success-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--bpmb-space-sm);
    padding: var(--bpmb-space-sm) var(--bpmb-space-lg);
    background: var(--bpmb-success);
    color: #fff !important;
    font-size: var(--bpmb-font-size-md);
    font-weight: 500;
    text-decoration: none !important;
    border-radius: var(--bpmb-radius-md);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bpmb-success-btn:hover,
.bpmb-success-btn:focus {
    background: #218838;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(40, 167, 69, 0.3);
}

.bpmb-success-btn svg {
    width: 16px;
    height: 16px;
}

.bpmb-success-dismiss,
button.bpmb-success-dismiss {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0 !important;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: #155724;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.2s ease;
}

.bpmb-success-dismiss:hover,
button.bpmb-success-dismiss:hover {
    background: rgba(0, 0, 0, 0.1);
    opacity: 1;
    border: none;
}

.bpmb-success-dismiss svg {
    width: 18px;
    height: 18px;
}

/* Draft notice variant */
.bpmb-success-notice:has(.bpmb-success-icon--draft) {
    background: linear-gradient(135deg, var(--bpmb-info-light) 0%, #d1ecf1 100%);
    border-color: var(--bpmb-info);
    box-shadow: 0 2px 8px rgba(23, 162, 184, 0.15);
}

.bpmb-success-notice:has(.bpmb-success-icon--draft) .bpmb-success-content strong,
.bpmb-success-notice:has(.bpmb-success-icon--draft) .bpmb-success-content p {
    color: #0c5460;
}

.bpmb-success-notice:has(.bpmb-success-icon--draft) .bpmb-success-dismiss {
    color: #0c5460;
}

/* Pending notice variant */
.bpmb-success-notice:has(.bpmb-success-icon--pending) {
    background: linear-gradient(135deg, var(--bpmb-warning-light) 0%, #fff3cd 100%);
    border-color: var(--bpmb-warning);
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.15);
}

.bpmb-success-notice:has(.bpmb-success-icon--pending) .bpmb-success-content strong,
.bpmb-success-notice:has(.bpmb-success-icon--pending) .bpmb-success-content p {
    color: #856404;
}

.bpmb-success-notice:has(.bpmb-success-icon--pending) .bpmb-success-dismiss {
    color: #856404;
}

/* Scheduled notice variant */
.bpmb-success-icon--scheduled {
    background: #6f42c1;
}

.bpmb-success-notice:has(.bpmb-success-icon--scheduled) {
    background: linear-gradient(135deg, #e2d9f3 0%, #f3e8ff 100%);
    border-color: #6f42c1;
    box-shadow: 0 2px 8px rgba(111, 66, 193, 0.15);
}

.bpmb-success-notice:has(.bpmb-success-icon--scheduled) .bpmb-success-content strong,
.bpmb-success-notice:has(.bpmb-success-icon--scheduled) .bpmb-success-content p {
    color: #4a2c8a;
}

.bpmb-success-notice:has(.bpmb-success-icon--scheduled) .bpmb-success-dismiss {
    color: #4a2c8a;
}

/* Success notice responsive */
@media (max-width: 768px) {
    .bpmb-success-notice {
        flex-wrap: wrap;
        gap: var(--bpmb-space-sm);
        padding: var(--bpmb-space-md);
    }

    .bpmb-success-icon {
        width: 40px;
        height: 40px;
    }

    .bpmb-success-icon svg {
        width: 20px;
        height: 20px;
    }

    .bpmb-success-content {
        flex: 1 1 calc(100% - 90px);
    }

    .bpmb-success-content strong {
        font-size: var(--bpmb-font-size-md);
    }

    .bpmb-success-content p {
        font-size: var(--bpmb-font-size-sm);
    }

    .bpmb-success-btn {
        flex: 1 1 100%;
        justify-content: center;
        margin-top: var(--bpmb-space-sm);
    }

    .bpmb-success-dismiss {
        position: absolute;
        top: var(--bpmb-space-sm);
        right: var(--bpmb-space-sm);
    }

    .bpmb-success-notice {
        position: relative;
    }
}

/*--------------------------------------------------------------
# Editor.js Styles
--------------------------------------------------------------*/
.bpmb-editorjs-wrapper {
    border: 1px solid var(--bpmb-border-color-dark);
    border-radius: var(--bpmb-radius-md);
    background: var(--bpmb-bg-primary);
    min-height: 450px;
    display: flex;
    flex-direction: column;
}

.bpmb-editorjs-container {
    flex: 1;
    min-height: 350px;
    padding: var(--bpmb-space-lg);
    cursor: text;
    position: relative;
}

/* Editor.js Loading State */
.bpmb-editorjs-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--bpmb-space-md);
    padding: var(--bpmb-space-2xl);
    color: var(--bpmb-text-muted);
    font-size: 14px;
    min-height: 200px;
}

.bpmb-editorjs-container.editor-ready .bpmb-editorjs-loading {
    display: none !important;
}

/* Ensure Editor.js renders properly */
.bpmb-editorjs-container .codex-editor {
    min-height: 300px;
}

.bpmb-editorjs-container .codex-editor__redactor {
    padding-bottom: 100px !important;
    min-height: 280px;
}

.bpmb-editorjs-container .ce-block {
    padding: 0;
}

.bpmb-editorjs-container .ce-paragraph {
    line-height: 1.7;
    font-size: 16px;
    outline: none;
}

/* Empty editor placeholder */
.bpmb-editorjs-container .codex-editor--empty .ce-block:first-child .ce-paragraph[data-placeholder]:empty::before {
    content: attr(data-placeholder);
    color: var(--bpmb-text-muted);
    pointer-events: none;
}

/* Editor.js Top Toolbar */
.bpmb-editorjs-toolbar {
    display: flex;
    align-items: center;
    gap: var(--bpmb-space-xs);
    padding: var(--bpmb-space-sm) var(--bpmb-space-md);
    border-bottom: 1px solid var(--bpmb-border-color);
    background: var(--bpmb-bg-secondary);
    flex-wrap: wrap;
    border-radius: var(--bpmb-radius-md) var(--bpmb-radius-md) 0 0;
}

.bpmb-editorjs-toolbar-btn,
.bp-nouveau .buddypress-wrap .bpmb-editorjs-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid var(--bpmb-border-color);
    border-radius: var(--bpmb-radius-sm);
    background: var(--bpmb-bg-primary);
    color: var(--bpmb-text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bpmb-editorjs-toolbar-btn:hover,
.bp-nouveau .buddypress-wrap .bpmb-editorjs-toolbar-btn:hover {
    background: var(--bpmb-primary-light);
    color: var(--bpmb-primary);
    border-color: var(--bpmb-primary);
}

.bpmb-editorjs-toolbar-btn svg {
    width: 16px;
    height: 16px;
}

.bpmb-editorjs-toolbar-divider {
    width: 1px;
    height: 24px;
    background: var(--bpmb-border-color);
    margin: 0 var(--bpmb-space-xs);
}

/* Editor.js Core Overrides */
.codex-editor {
    font-family: inherit;
}

.codex-editor__redactor {
    padding-bottom: var(--bpmb-space-xl) !important;
}

.ce-block__content {
    max-width: 100%;
    margin: 0;
}

.ce-toolbar__content {
    max-width: 100%;
}

.ce-toolbar__plus {
    color: #fff;
    background: var(--bpmb-primary);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    transition: all 0.2s ease;
}

.ce-toolbar__plus:hover {
    background: var(--bpmb-primary-dark, #1a4f99);
    transform: scale(1.1);
}

.ce-toolbar__plus svg {
    width: 16px;
    height: 16px;
}

.ce-toolbar__settings-btn {
    color: var(--bpmb-text-secondary);
    width: 34px;
    height: 34px;
    border-radius: 50%;
}

.ce-toolbar__settings-btn:hover {
    background: var(--bpmb-bg-hover);
}

.ce-toolbar__actions {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 1;
}

/* Block placeholder */
.ce-paragraph[data-placeholder]:empty::before {
    color: var(--bpmb-text-muted);
}

/* Inline toolbar - larger and more visible */
.ce-inline-toolbar {
    background: var(--bpmb-bg-primary);
    border: 1px solid var(--bpmb-border-color-dark);
    border-radius: var(--bpmb-radius-md);
    box-shadow: var(--bpmb-shadow-lg);
    padding: 4px;
}

.ce-inline-tool {
    color: var(--bpmb-text-primary);
    width: 36px;
    height: 36px;
    padding: 0 !important;
    border-radius: var(--bpmb-radius-sm);
}

.ce-inline-tool svg {
    width: 18px;
    height: 18px;
}

.ce-inline-tool:hover {
    background: var(--bpmb-bg-hover);
    color: var(--bpmb-primary);
}

.ce-inline-tool--active {
    color: var(--bpmb-primary);
    background: var(--bpmb-primary-light);
}

.ce-conversion-toolbar {
    background: var(--bpmb-bg-primary);
    border: 1px solid var(--bpmb-border-color-dark);
    border-radius: var(--bpmb-radius-md);
    box-shadow: var(--bpmb-shadow-lg);
}

.ce-conversion-tool {
    padding: 8px 12px;
}

.ce-conversion-tool:hover {
    background: var(--bpmb-bg-hover);
}

/* Popover (block menu) */
.ce-popover {
    background: var(--bpmb-bg-primary);
    border: 1px solid var(--bpmb-border-color-dark);
    border-radius: var(--bpmb-radius-md);
    box-shadow: var(--bpmb-shadow-lg);
}

.ce-popover-item {
    border-radius: var(--bpmb-radius-sm);
}

.ce-popover-item:hover {
    background: var(--bpmb-bg-hover);
}

.ce-popover-item__icon {
    background: var(--bpmb-bg-secondary);
    border-radius: var(--bpmb-radius-sm);
}

.ce-popover-item__title {
    color: var(--bpmb-text-primary);
    font-weight: 500;
}

/* Header block */
.ce-header {
    padding: 0;
    margin: 0;
    font-weight: 600;
    color: var(--bpmb-text-primary);
}

/* List block */
.cdx-list {
    padding-left: var(--bpmb-space-lg);
}

.cdx-list__item {
    padding: var(--bpmb-space-xs) 0;
}

/* Quote block */
.cdx-quote {
    border-left: 4px solid var(--bpmb-primary);
    padding-left: var(--bpmb-space-md);
    font-style: italic;
}

.cdx-quote__caption {
    color: var(--bpmb-text-secondary);
    font-size: var(--bpmb-font-size-sm);
    margin-top: var(--bpmb-space-sm);
}

/* Code block */
.ce-code__textarea {
    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
    font-size: 14px;
    background: var(--bpmb-bg-tertiary);
    border: 1px solid var(--bpmb-border-color);
    border-radius: var(--bpmb-radius-sm);
    padding: var(--bpmb-space-md);
    min-height: 100px;
    color: var(--bpmb-text-primary);
}

/* Delimiter block */
.ce-delimiter {
    text-align: center;
    padding: var(--bpmb-space-lg) 0;
}

.ce-delimiter::before {
    content: '***';
    font-size: var(--bpmb-font-size-lg);
    color: var(--bpmb-text-muted);
    letter-spacing: 8px;
}

/* Image block */
.cdx-simple-image .cdx-loader {
    min-height: 200px;
}

.cdx-simple-image__picture {
    max-width: 100%;
    border-radius: var(--bpmb-radius-md);
    overflow: hidden;
}

.cdx-simple-image__picture img {
    max-width: 100%;
    height: auto;
}

.cdx-simple-image__caption {
    text-align: center;
    color: var(--bpmb-text-secondary);
    font-size: var(--bpmb-font-size-sm);
    padding: var(--bpmb-space-sm);
}

/* Image tool */
.image-tool {
    border-radius: var(--bpmb-radius-md);
    overflow: hidden;
}

.image-tool__image {
    border-radius: var(--bpmb-radius-md);
    overflow: hidden;
}

.image-tool__image img {
    max-width: 100%;
    height: auto;
}

.image-tool__caption {
    text-align: center;
    color: var(--bpmb-text-secondary);
    font-size: var(--bpmb-font-size-sm);
    padding: var(--bpmb-space-sm);
    border: none;
    background: transparent;
}

/* Embed block */
.embed-tool {
    border-radius: var(--bpmb-radius-md);
    overflow: hidden;
}

.embed-tool__content {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.embed-tool__content iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Marker (highlight) */
.cdx-marker {
    background: rgba(255, 235, 59, 0.5);
    padding: 2px 0;
}

/* Inline code */
.inline-code {
    background: var(--bpmb-bg-tertiary);
    padding: 2px 6px;
    border-radius: var(--bpmb-radius-sm);
    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
    font-size: 0.9em;
    color: var(--bpmb-danger);
}

/* Editor.js Responsive */
@media (max-width: 768px) {
    .bpmb-editorjs-wrapper {
        min-height: 350px;
    }

    .bpmb-editorjs-container {
        min-height: 300px;
        padding: var(--bpmb-space-sm);
    }

    .ce-toolbar__plus,
    .ce-toolbar__settings-btn {
        width: 32px;
        height: 32px;
    }
}

/* BuddyX Pro Theme Support */

.wp-theme-buddyx-pro .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    padding: 0 7px;
}

/*--------------------------------------------------------------
# BuddyBoss Site Notice Protection
Ensures BuddyBoss site-wide notices remain visible and properly
styled on member blog pages. Prevents plugin CSS from affecting
the notice dismiss button or overall notice appearance.
--------------------------------------------------------------*/
.buddypress-wrap button[data-bp-close] {
    border: none !important
}

/*--------------------------------------------------------------
# Font Awesome Icons in Medium Editor
Ensures Font Awesome icons display correctly in the Medium Editor
toolbar, preventing CSS conflicts with themes (BuddyBoss, default
WordPress themes, etc.) that may override Font Awesome styles.
--------------------------------------------------------------*/

/* Force Font Awesome font-family on Medium Editor toolbar icons */
.medium-editor-toolbar .fa,
.medium-editor-toolbar .fas,
.medium-editor-toolbar .far,
.medium-editor-toolbar .fab,
.medium-editor-toolbar [class^="fa-"],
.medium-editor-toolbar [class*=" fa-"],
.medium-editor-toolbar-form .fa,
.medium-editor-toolbar-form .fas,
.medium-editor-toolbar-form .far,
.medium-editor-toolbar-form .fab,
.medium-editor-toolbar-form [class^="fa-"],
.medium-editor-toolbar-form [class*=" fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "FontAwesome" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    display: inline-block !important;
    line-height: 1 !important;
}

/* FA4 shim compatibility - ensure old fa- classes work with FA6 */
/* .medium-editor-toolbar .fa,
.medium-editor-toolbar-form .fa {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
} */

/* Regular style icons (outlined) */
.medium-editor-toolbar .far,
.medium-editor-toolbar-form .far {
    font-weight: 400 !important;
}

/* Brands icons */
.medium-editor-toolbar .fab,
.medium-editor-toolbar-form .fab {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}

/* Ensure icons are visible and properly sized in toolbar buttons */
.medium-editor-toolbar li button .fa,
.medium-editor-toolbar li button .fas,
.medium-editor-toolbar li button .far,
.medium-editor-toolbar li button .fab,
.medium-editor-toolbar li button i[class^="fa-"],
.medium-editor-toolbar li button i[class*=" fa-"] {
    font-size: 14px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
}

/* BuddyBoss Theme specific overrides */
.bb-theme .medium-editor-toolbar .fa,
.bb-theme .medium-editor-toolbar .fas,
.bb-theme .medium-editor-toolbar .far,
.bb-theme .medium-editor-toolbar .fab,
.bb-theme .medium-editor-toolbar [class^="fa-"],
.bb-theme .medium-editor-toolbar [class*=" fa-"],
body.buddyboss-theme .medium-editor-toolbar .fa,
body.buddyboss-theme .medium-editor-toolbar .fas,
body.buddyboss-theme .medium-editor-toolbar .far,
body.buddyboss-theme .medium-editor-toolbar .fab,
body.buddyboss-theme .medium-editor-toolbar [class^="fa-"],
body.buddyboss-theme .medium-editor-toolbar [class*=" fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "FontAwesome" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    display: inline-block !important;
    line-height: 1 !important;
}

/* Twenty Twenty-One, Twenty Twenty-Two, Twenty Twenty-Three, Twenty Twenty-Four theme overrides */
body.theme-flavor-flavor .medium-editor-toolbar .fa,
body.theme-flavor-flavor .medium-editor-toolbar [class^="fa-"],
body.theme-flavor-flavor .medium-editor-toolbar [class*=" fa-"],
.wp-site-blocks .medium-editor-toolbar .fa,
.wp-site-blocks .medium-editor-toolbar [class^="fa-"],
.wp-site-blocks .medium-editor-toolbar [class*=" fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "FontAwesome" !important;
    font-weight: 900 !important;
}

/* Dark mode for WordPress media modal */
.media-frame a {
    color: var(--bpmb-dark-accent, #2271b1) !important
}

.media-frame a:active,
.media-frame a:hover {
    color: var(--bpmb-dark-accent-hover, #135e96) !important
}

.media-frame a:focus {
    box-shadow: 0 0 0 2px var(--bpmb-dark-accent, #2271b1) !important;
    color: var(--bpmb-dark-accent-hover, #135e96) !important;
    outline: 2px solid transparent !important
}

.media-frame a.button {
    color: var(--bpmb-dark-text-primary, #2c3338) !important
}

.media-frame a.button:hover {
    color: var(--bpmb-dark-text-secondary, #646970) !important
}

.media-frame a.button-primary,
.media-frame a.button-primary:hover {
    color: var(--bpmb-text-light, #fff) !important
}

.dark-mode .media-frame input[type=color],
.dark-mode .media-frame input[type=date],
.dark-mode .media-frame input[type=datetime-local],
.dark-mode .media-frame input[type=datetime],
.dark-mode .media-frame input[type=email],
.dark-mode .media-frame input[type=month],
.dark-mode .media-frame input[type=number],
.dark-mode .media-frame input[type=password],
.dark-mode .media-frame input[type=search],
.dark-mode .media-frame input[type=tel],
.dark-mode .media-frame input[type=text],
.dark-mode .media-frame input[type=time],
.dark-mode .media-frame input[type=url],
.dark-mode .media-frame input[type=week],
.dark-mode .media-frame select,
.dark-mode .media-frame textarea {
    border: 1px solid var(--bpmb-dark-border-color-light, #3c434a) !important;
    background-color: var(--bpmb-dark-bg-secondary, #f6f7f7) !important;
    color: var(--bpmb-dark-text-primary, #2c3338) !important
}

.dark-mode .media-frame input[type=email]:focus,
.dark-mode .media-frame input[type=number]:focus,
.dark-mode .media-frame input[type=password]:focus,
.dark-mode .media-frame input[type=search]:focus,
.dark-mode .media-frame input[type=text]:focus,
.dark-mode .media-frame input[type=url]:focus,
.dark-mode .media-frame select:focus,
.dark-mode .media-frame textarea:focus {
    border-color: var(--bpmb-dark-accent, #2271b1) !important;
    box-shadow: 0 0 0 1px var(--bpmb-dark-accent, #2271b1) !important;
    outline: 2px solid transparent !important
}

.dark-mode .media-frame input:disabled,
.dark-mode .media-frame input[readonly],
.dark-mode .media-frame textarea:disabled,
.dark-mode .media-frame textarea[readonly] {
    background-color: var(--bpmb-dark-bg-primary, #2c3338) !important
}

.dark-mode .wp-core-ui .button-primary-disabled, 
.dark-mode .wp-core-ui .button-primary.disabled, 
.dark-mode .wp-core-ui .button-primary:disabled, 
.dark-mode .wp-core-ui .button-primary[disabled] {
    background-color: var(--bpmb-dark-border-color, #dcdcde) !important;
    border-color: var(--bpmb-dark-border-color, #dcdcde) !important;
    color: var(--bpmb-dark-text-secondary, #646970) !important;
    cursor: not-allowed !important
}

.media-frame ::-webkit-input-placeholder {
    color: var(--bpmb-dark-text-secondary, #646970) !important
}

.media-frame ::-moz-placeholder {
    color: var(--bpmb-dark-text-secondary, #646970) !important
}

.media-modal-backdrop {
    background: var(--bpmb-dark-bg-primary, #000) !important
}

.media-modal-close {
    color: var(--bpmb-dark-text-secondary, #646970) !important
}

.media-modal-close:active,
.media-modal-close:hover {
    color: var(--bpmb-dark-accent-hover, #135e96) !important
}

.media-modal-close:focus {
    color: var(--bpmb-dark-accent-hover, #135e96) !important;
    border-color: var(--bpmb-dark-accent, #2271b1) !important;
    box-shadow: 0 0 3px rgba(0,124,186,.8) !important;
    outline: 2px solid transparent !important
}

.media-modal-content {
    background: var(--bpmb-dark-bg-primary, #fff) !important
}

.media-toolbar {
    border: 0 solid var(--bpmb-dark-border-color, #dcdcde) !important
}

.media-frame-toolbar .media-toolbar {
    border-top: 1px solid var(--bpmb-dark-border-color, #dcdcde) !important
}

.media-sidebar {
    background: var(--bpmb-dark-bg-secondary, #f6f7f7) !important;
    border-left: 1px solid var(--bpmb-dark-border-color, #dcdcde) !important
}

.image-details .media-embed h2,
.media-sidebar h2 {
    color: var(--bpmb-dark-text-secondary, #646970) !important
}

.attachment-details .setting .name,
.attachment-details .setting .value,
.attachment-details .setting span,
.compat-item label span,
.media-sidebar .checkbox-label-inline,
.media-sidebar .setting .name,
.media-sidebar .setting .value,
.media-sidebar .setting span {
    color: var(--bpmb-dark-text-secondary, #646970) !important
}

.attachment-details .copy-to-clipboard-container .success,
.media-sidebar .copy-to-clipboard-container .success {
    color: var(--bpmb-dark-success, #46b450) !important
}

.media-menu {
    background: var(--bpmb-dark-bg-secondary, #f6f7f7) !important;
    border-right-color: var(--bpmb-dark-border-color, #dcdcde) !important
}

.media-menu .media-menu-item {
    color: var(--bpmb-dark-accent, #2271b1) !important
}

.media-menu .media-menu-item:hover {
    background: var(--bpmb-dark-shadow, rgba(0,0,0,.04)) !important
}

.media-menu .media-menu-item:active {
    color: var(--bpmb-dark-accent, #2271b1) !important
}

.media-menu .active,
.media-menu .active:hover {
    color: var(--bpmb-dark-text-primary, #2c3338) !important
}

.media-menu .media-menu-item:focus {
    box-shadow: 0 0 0 2px var(--bpmb-dark-accent, #2271b1) !important;
    color: var(--bpmb-dark-accent-hover, #135e96) !important;
    outline: 2px solid transparent !important
}

.media-menu .separator {
    border-top: 1px solid var(--bpmb-dark-border-color, #dcdcde) !important
}

.dark-mode .media-router .media-menu-item:active,
.dark-mode .media-router .media-menu-item:hover {
    color: var(--bpmb-dark-accent, #2271b1) !important
}

.dark-mode .media-router .active,
.dark-mode .media-router .active:hover {
    color: var(--bpmb-dark-text-primary, #2c3338) !important
}

.dark-mode .media-router .media-menu-item:focus {
    box-shadow: 0 0 0 2px var(--bpmb-dark-accent, #2271b1) !important;
    color: var(--bpmb-dark-accent-hover, #135e96) !important;
    outline: 2px solid transparent !important
}

.dark-mode .media-router .active,
.dark-mode .media-router .media-menu-item.active:last-child {
    background: var(--bpmb-dark-bg-primary, #2c3338) !important;
    border: 1px solid var(--bpmb-dark-border-color, #dcdcde) !important
}

.media-frame-content {
    background: var(--bpmb-dark-bg-primary, #fff) !important;
    border-top: 1px solid var(--bpmb-dark-border-color, #dcdcde) !important
}

.media-frame .search {
    color: var(--bpmb-dark-text-primary, #2c3338) !important
}

.wp-core-ui .attachment {
    color: var(--bpmb-dark-text-primary, #2c3338) !important
}

.wp-core-ui .attachment:focus {
    box-shadow: inset 0 0 2px 3px var(--bpmb-text-light, #fff),inset 0 0 0 7px var(--bpmb-dark-accent, #2271b1) !important;
    outline: 2px solid transparent !important
}

.wp-core-ui .selected.attachment {
    box-shadow: inset 0 0 0 5px var(--bpmb-text-light, #fff),inset 0 0 0 7px var(--bpmb-dark-border-color, #dcdcde) !important
}

.wp-core-ui .attachment.details {
    box-shadow: inset 0 0 0 3px var(--bpmb-text-light, #fff),inset 0 0 0 7px var(--bpmb-dark-accent, #2271b1) !important
}

.wp-core-ui .attachment-preview {
    background: var(--bpmb-dark-bg-primary, #fff) !important
}

.wp-core-ui .attachment .filename {
    background: var(--bpmb-dark-shadow, rgba(0,0,0,.8)) !important;
    box-shadow: inset 0 0 0 1px var(--bpmb-dark-shadow, rgba(0,0,0,.15)) !important
}

.wp-core-ui .attachment-close {
    background-color: var(--bpmb-dark-bg-primary, #fff) !important;
    box-shadow: 0 0 0 1px var(--bpmb-dark-shadow, rgba(0,0,0,.3)) !important
}

.wp-core-ui .attachment .check {
    background: var(--bpmb-dark-bg-primary, #fff) !important;
    box-shadow: 0 0 0 1px var(--bpmb-text-light, #fff),0 0 0 2px var(--bpmb-dark-shadow, rgba(0,0,0,.15)) !important
}

.wp-core-ui .attachment.details .check,
.wp-core-ui .attachment.selected .check:focus,
.wp-core-ui .media-frame.mode-grid .attachment.selected .check {
    background-color: var(--bpmb-dark-accent, #2271b1) !important;
    box-shadow: 0 0 0 1px var(--bpmb-text-light, #fff),0 0 0 2px var(--bpmb-dark-accent, #2271b1) !important
}

.attachments-browser .media-toolbar {
    background: var(--bpmb-dark-bg-primary, #fff) !important
}

.attachments-browser .instructions {
    color: var(--bpmb-dark-text-secondary, #646970) !important
}

.more-loaded .attachment:not(.found-media) {
    background: var(--bpmb-dark-bg-tertiary, #dcdcde) !important
}

.attachment.new-media {
    outline: 2px dotted var(--bpmb-dark-border-color, #dcdcde) !important
}

.media-progress-bar {
    background: var(--bpmb-dark-bg-tertiary, #dcdcde) !important
}

.media-progress-bar div {
    background: var(--bpmb-dark-accent, #2271b1) !important
}

.media-uploader-status .upload-details {
    color: var(--bpmb-dark-text-secondary, #646970) !important
}

.media-uploader-status .upload-count {
    color: var(--bpmb-dark-text-primary, #2c3338) !important
}

.upload-errors .upload-error {
    background: var(--bpmb-dark-bg-primary, #fff) !important;
    border-left: 4px solid var(--bpmb-danger, #dc3545) !important;
    box-shadow: 0 1px 1px 0 var(--bpmb-dark-shadow, rgba(0,0,0,.1)) !important
}

.uploader-inline .upload-errors .upload-error {
    background-color: var(--bpmb-dark-bg-secondary, #f6f7f7) !important
}

.uploader-window .media-progress-bar div {
    background: var(--bpmb-text-light, #fff) !important
}

.uploader-inline .has-upload-message .upload-instructions {
    color: var(--bpmb-dark-text-primary, #2c3338) !important
}

.media-selection .button-link {
    border-right: 1px solid var(--bpmb-dark-border-color, #dcdcde) !important;
    color: var(--bpmb-dark-accent, #2271b1) !important
}

.media-selection .button-link:focus,
.media-selection .button-link:hover {
    color: var(--bpmb-dark-accent-hover, #135e96) !important
}

.selection-info .clear-selection {
    color: var(--bpmb-danger, #dc3545) !important
}

.selection-info .clear-selection:focus,
.selection-info .clear-selection:hover {
    color: var(--bpmb-danger, #dc3545) !important
}

.media-selection:after {
    background-image: linear-gradient(to left,var(--bpmb-dark-bg-primary, #fff),rgba(30,30,30,0)) !important
}

.attachment-info {
    color: var(--bpmb-dark-text-primary, #2c3338) !important;
    border-bottom: 1px solid var(--bpmb-dark-border-color, #dcdcde) !important
}

.attachment-info .filename {
    color: var(--bpmb-dark-text-primary, #2c3338) !important
}

.attachment-info .thumbnail-image:after {
    box-shadow: inset 0 0 0 1px var(--bpmb-dark-shadow, rgba(0,0,0,.15)) !important
}

.media-modal .delete-attachment,
.media-modal .trash-attachment,
.media-modal .untrash-attachment {
    color: var(--bpmb-danger, #dc3545) !important
}

.media-modal .delete-attachment:focus,
.media-modal .delete-attachment:hover,
.media-modal .trash-attachment:focus,
.media-modal .trash-attachment:hover,
.media-modal .untrash-attachment:focus,
.media-modal .untrash-attachment:hover {
    color: var(--bpmb-danger, #dc3545) !important
}

.image-details .column-settings {
    background: var(--bpmb-dark-bg-secondary, #f6f7f7) !important;
    border-right: 1px solid var(--bpmb-dark-border-color, #dcdcde) !important
}

.image-details .column-settings h2 {
    border-top: 1px solid var(--bpmb-dark-border-color, #dcdcde) !important;
    color: var(--bpmb-dark-text-primary, #2c3338) !important
}

.image-details .advanced-toggle {
    color: var(--bpmb-dark-text-secondary, #646970) !important
}

.image-details .advanced-toggle:active,
.image-details .advanced-toggle:hover {
    color: var(--bpmb-dark-text-secondary, #646970) !important
}

.media-embed .setting .name,
.media-embed .setting span,
.media-embed .setting-group .name {
    color: var(--bpmb-dark-text-secondary, #646970) !important
}

.embed-url {
    background: var(--bpmb-dark-bg-primary, #fff) !important
}

.embed-preview img {
    background: var(--bpmb-dark-bg-primary, #fff) !important
}

.mejs-container:focus {
    outline: 1px solid var(--bpmb-dark-accent, #2271b1) !important;
    box-shadow: 0 0 0 2px var(--bpmb-dark-accent, #2271b1) !important
}

.media-embed .thumbnail:after {
    box-shadow: inset 0 0 0 1px var(--bpmb-dark-shadow, rgba(0,0,0,.1)) !important
}

.image-details .embed-media-settings .setting .name,
.image-details .embed-media-settings .setting span {
    color: var(--bpmb-dark-text-secondary, #646970) !important
}

.media-frame .setting .button-group {
    color: var(--bpmb-dark-text-primary, #2c3338) !important
}

.rtl .media-frame,
.rtl .media-frame .search,
.rtl .media-frame input[type=email],
.rtl .media-frame input[type=number],
.rtl .media-frame input[type=password],
.rtl .media-frame input[type=search],
.rtl .media-frame input[type=tel],
.rtl .media-frame input[type=text],
.rtl .media-frame input[type=url],
.rtl .media-frame select,
.rtl .media-frame textarea,
.rtl .media-modal {
    color: var(--bpmb-dark-text-primary, #2c3338) !important
}

:lang(he-il) .rtl .media-frame,
:lang(he-il) .rtl .media-frame .search,
:lang(he-il) .rtl .media-frame input[type=email],
:lang(he-il) .rtl .media-frame input[type=number],
:lang(he-il) .rtl .media-frame input[type=password],
:lang(he-il) .rtl .media-frame input[type=search],
:lang(he-il) .rtl .media-frame input[type=tel],
:lang(he-il) .rtl .media-frame input[type=text],
:lang(he-il) .rtl .media-frame input[type=url],
:lang(he-il) .rtl .media-frame select,
:lang(he-il) .rtl .media-frame textarea,
:lang(he-il) .rtl .media-modal {
    color: var(--bpmb-dark-text-primary, #2c3338) !important
}

@media only screen and (max-width: 900px) {
    .media-menu {
        border: 1px solid var(--bpmb-dark-border-color, #dcdcde) !important
    }

    .wp-core-ui .media-frame:not(.hide-menu) .button.media-frame-menu-toggle:focus {
        outline: 1px solid transparent !important
    }

    .uploader-inline .close:focus {
        outline: 1px solid var(--bpmb-dark-accent, #2271b1) !important;
        box-shadow: 0 0 3px rgba(114,174,230,.8) !important
    }

    .attachment-details .copy-to-clipboard-container .success,
    .media-sidebar .copy-to-clipboard-container .success {
        color: var(--bpmb-dark-success, #46b450) !important
    }

    .media-modal .media-toolbar input[type=search] {
        color: var(--bpmb-dark-text-primary, #2c3338) !important
    }

    .media-modal .attachments-browser .media-toolbar .attachment-filters {
        color: var(--bpmb-dark-text-primary, #2c3338) !important
    }

    .media-frame input[type=email],
    .media-frame input[type=number],
    .media-frame input[type=password],
    .media-frame input[type=search],
    .media-frame input[type=text],
    .media-frame input[type=url],
    .media-frame select,
    .media-frame textarea {
        color: var(--bpmb-dark-text-primary, #2c3338) !important
    }

    .media-modal .media-toolbar .spinner {
        color: var(--bpmb-dark-text-primary, #2c3338) !important
    }

    .image-details .column-settings {
        color: var(--bpmb-dark-text-primary, #2c3338) !important
    }

    .image-details .embed-media-settings .setting input.link-to-custom,
    .image-details .embed-media-settings .setting input[type=text],
    .image-details .embed-media-settings .setting textarea {
        color: var(--bpmb-dark-text-primary, #2c3338) !important
    }

    .media-bg-overlay {
        background: var(--bpmb-dark-bg-primary, #fff) !important
    }
}

@media screen and (max-width: 782px) {
    .attachment-details .copy-to-clipboard-container .success,
    .media-sidebar .copy-to-clipboard-container .success {
        color: var(--bpmb-dark-success, #46b450) !important
    }

    .media-bg-overlay {
        background: var(--bpmb-dark-bg-primary, #fff) !important
    }
}

@media only screen and (max-width: 640px),screen and (max-height:400px) {
    .image-details .column-settings {
        color: var(--bpmb-dark-text-primary, #2c3338) !important
    }
}

/* Dark mode for .ce-popover */
.dark-mode .ce-popover , 
.dark-scheme .ce-popover {
    --color-border: #3c434a;
    --color-shadow: rgba(0, 0, 0, .3);
    --color-background: #1e1e1e;
    --color-text-primary: #c3c4c7;
    --color-text-secondary: #8c8f94;
    --color-border-icon: rgba(140, 143, 148, .48);
    --color-border-icon-disabled: #2c3338;
    --color-text-icon-active: #72aee6;
    --color-background-icon-active: rgba(114, 174, 230, .1);
    --color-background-item-focus: rgba(114, 174, 230, .08);
    --color-shadow-item-focus: rgba(114, 174, 230, .08);
    --color-background-item-hover: #2c3338;
}

.dark-mode .ce-inline-tool--active,
.dark-scheme .ce-inline-tool--active,
.dark-mode .ce-inline-toolbar__dropdown:hover,
.dark-scheme .ce-inline-toolbar__dropdown:hover {
    background: var(--bpmb-dark-bg-secondary, #eff2f5);
}