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

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

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

/* 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;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 50%;
    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;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    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);
}

.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;
}

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