/* Blog-specific styles extending base.css */

/* ===== BREADCRUMB STYLES ===== */
.breadcrumb-nav {
    margin: 8px 0 0 0;
    padding: 0;
    border: none;
}

.breadcrumb-nav ol {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.3);
    align-items: center;
    flex-wrap: wrap;
}

.breadcrumb-nav li {
    display: flex;
    align-items: center;
    margin-right: 4px;
}

.breadcrumb-nav li:not(:last-child)::after {
    content: "›";
    margin-left: 4px;
    color: rgba(255, 255, 255, 0.2);
    font-weight: 300;
    opacity: 0.4;
}

.breadcrumb-nav a {
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    transition: all 0.2s ease;
    padding: 1px 3px;
    border-radius: 2px;
    position: relative;
}

.breadcrumb-nav a:hover {
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.03);
    text-decoration: none;
}

.breadcrumb-nav a::before {
    display: none;
}

.breadcrumb-nav li:last-child {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 300;
    padding: 1px 3px;
    background: none;
    border: none;
}

/* Mobile breadcrumb adjustments */
@media (max-width: 768px) {
    .breadcrumb-nav {
        margin: 3px 0 10px 0;
    }
    
    .breadcrumb-nav ol {
        font-size: 0.6rem;
    }
    
    .breadcrumb-nav li {
        margin-right: 3px;
    }
    
    .breadcrumb-nav li:not(:last-child)::after {
        margin-left: 3px;
    }
    
    .breadcrumb-nav a,
    .breadcrumb-nav li:last-child {
        padding: 1px 2px;
    }
}

@media (max-width: 480px) {
    .breadcrumb-nav ol {
        font-size: 0.55rem;
    }
    
    .breadcrumb-nav li {
        margin-right: 2px;
    }
    
    .breadcrumb-nav li:not(:last-child)::after {
        margin-left: 2px;
    }
}

/* ===== VIDEO EMBED STYLES ===== */
.video-embed {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 20px 0;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.video-embed:hover {
    box-shadow: 0 0 0 2px var(--primary-color);
}

.video-embed.selected-video {
    box-shadow: 0 0 0 3px var(--primary-color);
    outline: 2px solid var(--accent-text-color);
    position: relative;
}

.video-embed.selected-video::before {
    content: "Edit Mode - Click 'Play Video' to interact";
    position: absolute;
    top: -30px;
    left: 0;
    right: 0;
    background: var(--primary-color);
    color: white;
    padding: 5px 10px;
    font-size: 0.8rem;
    text-align: center;
    border-radius: 4px 4px 0 0;
    z-index: 10;
    pointer-events: none;
}

/* Clickable overlay for video selection */
.video-embed::after {
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: transparent;
    border: 2px dashed transparent;
    border-radius: 8px;
    transition: all 0.2s ease;
    pointer-events: none;
    z-index: 5;
}

.video-embed:hover::after {
    border-color: var(--primary-color);
    background: rgba(45, 112, 150, 0.1);
    pointer-events: auto;
}

.video-embed.selected-video::after {
    border-color: var(--primary-color);
    background: rgba(45, 112, 150, 0.15);
    pointer-events: auto;
}

.video-embed iframe {
    max-width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Video wrapping styles - similar to image wrapping */
.video-embed.align-left {
    float: left !important;
    margin: 0 1.5em 1em 0 !important;
    max-width: 50% !important;
}

.video-embed.align-right {
    float: right !important;
    margin: 0 0 1em 1.5em !important;
    max-width: 50% !important;
}

.video-embed.align-center {
    margin: 1em auto !important;
    float: none !important;
    max-width: 100% !important;
}

/* Video Controls */
.video-controls {
    position: fixed;
    background: var(--editor-toolbar-bg);
    border: 1px solid var(--editor-border);
    border-radius: 6px;
    padding: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    display: none;
    flex-direction: column;
    gap: 6px;
    min-width: 150px;
    max-width: 250px;
}

.video-controls.show {
    display: flex;
}

.video-controls button {
    background: var(--editor-button-bg);
    border: 1px solid var(--editor-border);
    color: var(--editor-text);
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 6px;
}

.video-controls button:hover {
    background: var(--editor-button-hover);
    border-color: var(--primary-color);
}

.video-controls button i {
    font-size: 0.8rem;
    width: 14px;
}

/* Responsive video embeds */
@media (max-width: 768px) {
    .video-embed iframe {
        width: 100%;
        height: 200px;
    }
    
    .video-embed.align-left,
    .video-embed.align-right,
    .single-post-body .video-embed.align-left,
    .single-post-body .video-embed.align-right,
    #blog-content .ql-editor .video-embed.align-left,
    #blog-content .ql-editor .video-embed.align-right,
    .blog-rich-editor .ql-editor .video-embed.align-left,
    .blog-rich-editor .ql-editor .video-embed.align-right,
    .ql-editor .video-embed.align-left,
    .ql-editor .video-embed.align-right {
        float: none !important;
        margin: 1em 0 !important;
        max-width: 100% !important;
    }
}

/* Responsive image embeds - match video behavior */
@media (max-width: 768px) {
    .single-post-body img.align-left,
    .single-post-body img.align-right,
    #blog-content .ql-editor img.align-left,
    #blog-content .ql-editor img.align-right,
    .blog-rich-editor .ql-editor img.align-left,
    .blog-rich-editor .ql-editor img.align-right,
    .ql-editor img.align-left,
    .ql-editor img.align-right,
    img.align-left,
    img.align-right {
        float: none !important;
        margin: 1em 0 !important;
        max-width: 100% !important;
        display: block !important;
    }
}

/* ===== BLOG MANAGEMENT ADMIN STYLES ===== */

/* Blog Editor Container */
.blog-editor-container {
    background-color: var(--secondary-color);
    padding: 25px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    margin-bottom: 25px;
}

.blog-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
}

.blog-editor-title {
    margin: 0;
    color: var(--text-color);
    font-size: 1.4rem;
}

.blog-editor-actions {
    display: flex;
    gap: 10px;
}

/* Blog Form Styles */
.blog-form {
    display: grid;
    gap: 20px;
}

.blog-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

@media (max-width: 768px) {
    .blog-form-row {
        grid-template-columns: 1fr;
    }
}

.blog-form-group {
    display: flex;
    flex-direction: column;
}

.blog-form-group label {
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-color);
}

.blog-form-group input,
.blog-form-group textarea,
.blog-form-group select {
    padding: 12px;
    border-radius: 5px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.blog-form-group input:focus,
.blog-form-group textarea:focus,
.blog-form-group select:focus {
    outline: none;
    border-color: var(--highlight-color);
    box-shadow: 0 0 0 2px rgba(45, 112, 150, 0.2);
}

.blog-form-group textarea {
    resize: vertical;
    min-height: 120px; /* Increased height for better visibility */
    max-height: 300px; /* Allow reasonable expansion */
}

/* Custom scrollbar styling for textareas to match site theme */
.blog-form-group textarea::-webkit-scrollbar {
    width: 8px;
    background-color: rgba(0, 0, 0, 0.1);
}

.blog-form-group textarea::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 4px;
}

.blog-form-group textarea::-webkit-scrollbar-thumb:hover {
    background-color: var(--highlight-color);
}

/* Firefox scrollbar styling for textareas */
.blog-form-group textarea {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) rgba(0, 0, 0, 0.1);
}

.blog-form-group.full-width {
    grid-column: 1 / -1;
}

/* Improved Author Section Layout */
.blog-author-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.blog-author-input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.blog-author-input-group input {
    width: 100%;
    padding: 12px;
    border-radius: 5px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.blog-author-input-group input:focus {
    outline: none;
    border-color: var(--highlight-color);
    box-shadow: 0 0 0 2px rgba(45, 112, 150, 0.2);
}

.blog-author-input-group small {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    line-height: 1.3;
}

.blog-author-dropdown-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.blog-author-dropdown-group select {
    width: 100%;
    padding: 12px;
    border-radius: 5px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: 1rem;
    transition: border-color 0.3s ease;
    cursor: pointer;
}

.blog-author-dropdown-group select:focus {
    outline: none;
    border-color: var(--highlight-color);
    box-shadow: 0 0 0 2px rgba(45, 112, 150, 0.2);
}

.blog-author-dropdown-group small {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    line-height: 1.3;
}

/* Responsive Author Section */
@media (min-width: 769px) {
    .blog-author-section {
        flex-direction: row;
        gap: 16px;
        align-items: flex-start;
    }
    
    .blog-author-input-group {
        flex: 1;
    }
    
    .blog-author-dropdown-group {
        flex: 0 0 200px;
    }
}

@media (max-width: 768px) {
    .blog-author-section {
        gap: 16px;
    }
    
    .blog-author-input-group,
    .blog-author-dropdown-group {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .blog-author-section {
        gap: 12px;
    }
    
    .blog-author-input-group input,
    .blog-author-dropdown-group select {
        padding: 10px;
        font-size: 0.95rem;
    }
    
    .blog-author-input-group small,
    .blog-author-dropdown-group small {
        font-size: 0.8rem;
    }
}

/* UNIFIED CONTENT STYLING - EDITOR AND BLOG DISPLAY */
/* Base content styling for both editor and blog display */
.editor-content,
.single-post-body,
#blog-content .ql-editor,
.blog-rich-editor .ql-editor,
.ql-editor {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-color);
}

/* All text elements inherit the base styling */
.editor-content *,
.single-post-body *,
#blog-content .ql-editor *,
.blog-rich-editor .ql-editor *,
.ql-editor * {
    font-size: inherit;
    line-height: inherit;
}

/* Font Manager Applied Fonts - Let them use their own font-family in BOTH editor and public blog */
.editor-content [data-font-applied],
.single-post-body [data-font-applied] {
    /* Remove inheritance, allow element to use its own font-family style */
}

.editor-content [data-font-applied] *,
.single-post-body [data-font-applied] * {
    /* Child elements can inherit from the font-applied parent */
    font-family: inherit;
}

/* Paragraphs */
.editor-content p,
.single-post-body p,
#blog-content .ql-editor p,
.blog-rich-editor .ql-editor p,
.ql-editor p {
    font-size: 1rem;
    margin: 0.75rem 0;
    line-height: 1.6;
}

/* Divs and spans */
.editor-content div,
.single-post-body div,
#blog-content .ql-editor div,
.blog-rich-editor .ql-editor div,
.ql-editor div {
    font-size: 1rem;
    line-height: 1.6;
}

.editor-content span,
.single-post-body span,
#blog-content .ql-editor span,
.blog-rich-editor .ql-editor span,
.ql-editor span {
    font-size: inherit;
    line-height: inherit;
}

/* Placeholder text */
#blog-content .ql-editor.ql-blank::before,
.blog-rich-editor .ql-editor.ql-blank::before,
.ql-editor.ql-blank::before {
    font-size: 1rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Professional Heading Sizes */
#blog-content .ql-editor h1,
.blog-rich-editor .ql-editor h1,
.ql-editor h1,
.single-post-body h1 {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    margin: 1.5rem 0 1rem 0 !important;
    line-height: 1.2 !important;
    color: var(--text-color) !important;
}

#blog-content .ql-editor h2,
.blog-rich-editor .ql-editor h2,
.ql-editor h2,
.single-post-body h2 {
    font-size: 2rem !important;
    font-weight: 600 !important;
    margin: 1.25rem 0 0.75rem 0 !important;
    line-height: 1.3 !important;
    color: var(--text-color) !important;
}

#blog-content .ql-editor h3,
.blog-rich-editor .ql-editor h3,
.ql-editor h3,
.single-post-body h3 {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    margin: 1rem 0 0.5rem 0 !important;
    line-height: 1.4 !important;
    color: var(--text-color) !important;
}

#blog-content .ql-editor h4,
.blog-rich-editor .ql-editor h4,
.ql-editor h4,
.single-post-body h4 {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    margin: 0.75rem 0 0.5rem 0 !important;
    line-height: 1.4 !important;
    color: var(--text-color) !important;
}

#blog-content .ql-editor h5,
.blog-rich-editor .ql-editor h5,
.ql-editor h5,
.single-post-body h5 {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    margin: 0.5rem 0 0.25rem 0 !important;
    line-height: 1.4 !important;
    color: var(--text-color) !important;
}

#blog-content .ql-editor h6,
.blog-rich-editor .ql-editor h6,
.ql-editor h6,
.single-post-body h6 {
    font-size: 1rem !important;
    font-weight: 600 !important;
    margin: 0.5rem 0 0.25rem 0 !important;
    line-height: 1.4 !important;
    color: var(--text-color) !important;
}

/* Lists - IDENTICAL TO EDITOR */
#blog-content .ql-editor li,
.blog-rich-editor .ql-editor li,
.ql-editor li,
.single-post-body li {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    margin: 0.5em 0 !important;
    display: list-item !important;
    list-style-type: inherit !important;
}

/* Force list items to be direct children and prevent block wrapping */
#blog-content .ql-editor ul > li,
.blog-rich-editor .ql-editor ul > li,
.ql-editor ul > li,
.single-post-body ul > li {
    display: list-item !important;
    margin: 0.5em 0 !important;
    padding: 0 !important;
}

#blog-content .ql-editor ol > li,
.blog-rich-editor .ql-editor ol > li,
.ql-editor ol > li,
.single-post-body ol > li {
    display: list-item !important;
    margin: 0.5em 0 !important;
    padding: 0 !important;
}

/* Prevent any div or p elements between list items from creating spacing */
#blog-content .ql-editor ul > div,
.blog-rich-editor .ql-editor ul > div,
.ql-editor ul > div,
.single-post-body ul > div,
#blog-content .ql-editor ul > p,
.blog-rich-editor .ql-editor ul > p,
.ql-editor ul > p,
.single-post-body ul > p {
    display: none !important;
}

#blog-content .ql-editor ul,
.blog-rich-editor .ql-editor ul,
.ql-editor ul,
.single-post-body ul {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    margin: 1em 0 !important;
    padding-left: 1.8em !important;
    list-style-position: inside !important;
}

#blog-content .ql-editor ol,
.blog-rich-editor .ql-editor ol,
.ql-editor ol,
.single-post-body ol {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    margin: 1em 0 !important;
    padding-left: 1.8em !important;
    list-style-position: inside !important;
}

/* Ensure bullets/numbers align with text even if editor wraps list text in <p> */
#blog-content .ql-editor li > p,
.blog-rich-editor .ql-editor li > p,
.ql-editor li > p,
.single-post-body li > p {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Critical: prevent paragraphs from clearing floats inside list items */
.single-post-body li > p[style*="clear"],
.single-post-body li[style*="clear"],
#blog-content .ql-editor li > p[style*="clear"],
.blog-rich-editor .ql-editor li > p[style*="clear"],
.ql-editor li > p[style*="clear"] {
    clear: none !important;
}

/* Ensure list items themselves do not start a new block formatting context */
.single-post-body li,
#blog-content .ql-editor li,
.blog-rich-editor .ql-editor li,
.ql-editor li {
    overflow: visible !important;
}

/* Ensure list items wrap properly */
#blog-content .ql-editor li,
.blog-rich-editor .ql-editor li,
.ql-editor li,
.single-post-body li {
    line-height: 1.6 !important;
    margin: 0.5em 0 !important;
    padding-left: 1.5em !important;
    position: relative !important;
}

/* Blockquotes (editor and public) */
.editor-content blockquote,
#blog-content .ql-editor blockquote,
.blog-rich-editor .ql-editor blockquote,
.ql-editor blockquote,
.single-post-body blockquote {
    font-size: 1.1rem; /* no !important so custom sizes/classes can override */
    font-style: italic !important;
    margin: 1rem 0 !important;
    padding: 0.75rem 1rem !important;
    border-left: 4px solid var(--highlight-color) !important;
    background-color: rgba(45, 112, 150, 0.1) !important;
    border-radius: 0 4px 4px 0 !important;
    display: inline-block !important; /* prevent background spanning full width */
    max-width: 100% !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

/* Blockquote alignment helpers to mirror image behavior */
.editor-content blockquote.align-left,
.single-post-body blockquote.align-left,
#blog-content .ql-editor blockquote.align-left,
.blog-rich-editor .ql-editor blockquote.align-left,
.ql-editor blockquote.align-left,
blockquote.align-left {
    float: left !important;
    margin: 0 1.5em 1em 0 !important;
    max-width: 50% !important;
}

.editor-content blockquote.align-right,
.single-post-body blockquote.align-right,
#blog-content .ql-editor blockquote.align-right,
.blog-rich-editor .ql-editor blockquote.align-right,
.ql-editor blockquote.align-right,
blockquote.align-right {
    float: right !important;
    margin: 0 0 1em 1.5em !important;
    max-width: 50% !important;
}

.editor-content blockquote.align-center,
.single-post-body blockquote.align-center,
#blog-content .ql-editor blockquote.align-center,
.blog-rich-editor .ql-editor blockquote.align-center,
.ql-editor blockquote.align-center,
blockquote.align-center {
    float: none !important;
    margin: 1em auto !important;
    display: block !important;
    max-width: 80% !important;
}

/* Map native text alignment coming from editor to layout alignment */
.editor-content blockquote[style*="text-align: right"],
.single-post-body blockquote[style*="text-align: right"],
#blog-content .ql-editor blockquote[style*="text-align: right"],
.blog-rich-editor .ql-editor blockquote[style*="text-align: right"],
.ql-editor blockquote[style*="text-align: right"] {
    float: right !important;
    margin: 0 0 1em 1.5em !important;
    max-width: 50% !important;
}

.editor-content blockquote[style*="text-align: center"],
.single-post-body blockquote[style*="text-align: center"],
#blog-content .ql-editor blockquote[style*="text-align: center"],
.blog-rich-editor .ql-editor blockquote[style*="text-align: center"],
.ql-editor blockquote[style*="text-align: center"] {
    float: none !important;
    margin: 1em auto !important;
    display: block !important;
    max-width: 80% !important;
}

/* Code blocks */
#blog-content .ql-editor pre,
.blog-rich-editor .ql-editor pre,
.ql-editor pre,
.single-post-body pre {
    font-size: 0.9rem !important;
    font-family: 'Courier New', monospace !important;
    background-color: var(--secondary-color) !important;
    padding: 1rem !important;
    border-radius: 4px !important;
    margin: 1rem 0 !important;
    overflow-x: auto !important;
}

/* Inline code */
#blog-content .ql-editor code,
.blog-rich-editor .ql-editor code,
.ql-editor code,
.single-post-body code {
    font-size: 0.9rem !important;
    font-family: 'Courier New', monospace !important;
    background-color: var(--secondary-color) !important;
    padding: 0.2rem 0.4rem !important;
    border-radius: 3px !important;
}

/* Tables */
#blog-content .ql-editor table,
.blog-rich-editor .ql-editor table,
.ql-editor table,
.single-post-body table {
    font-size: 1rem !important;
    border-collapse: collapse !important;
    margin: 1rem 0 !important;
    width: 100% !important;
}

#blog-content .ql-editor th,
.blog-rich-editor .ql-editor th,
.ql-editor th,
.single-post-body th {
    font-size: 1rem !important;
    font-weight: 600 !important;
    padding: 0.75rem !important;
    border: 1px solid var(--border-color) !important;
    background-color: var(--secondary-color) !important;
}

#blog-content .ql-editor td,
.blog-rich-editor .ql-editor td,
.ql-editor td,
.single-post-body td {
    font-size: 1rem !important;
    padding: 0.75rem !important;
    border: 1px solid var(--border-color) !important;
}

/* Rich Text Editor Styles */
.blog-rich-editor {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-color);
    overflow: hidden;
    position: relative;
    height: 960px; /* increased ~60% from 600px */
    display: flex;
    flex-direction: column;
    resize: vertical; /* Allow vertical resizing */
    min-height: 640px; /* Minimum height adjusted up */
    max-height: 1600px; /* Maximum height adjusted */
}

/* Resize handle styling for blog editor */
.blog-rich-editor::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 12px 12px;
    border-color: transparent transparent var(--border-color) transparent;
    cursor: se-resize;
    z-index: 100;
}

.blog-rich-editor:hover::after {
    border-color: transparent transparent var(--highlight-color) transparent;
}

/* Enhanced Toolbar Styles */
.blog-rich-editor .editor-toolbar {
    border-bottom: 1px solid var(--border-color);
    background-color: var(--secondary-color);
    padding: 12px 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 10;
    flex-shrink: 0; /* Prevent toolbar from shrinking */
}

.blog-rich-editor .toolbar-section {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 0 8px;
    border-right: 1px solid var(--border-color);
}

.blog-rich-editor .toolbar-section:last-child {
    border-right: none;
}

.blog-rich-editor .toolbar-group {
    display: flex;
    gap: 2px;
    align-items: center;
}

/* Toolbar Button Styles */
.blog-rich-editor .toolbar-btn {
    padding: 8px 10px;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--text-color);
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    position: relative;
}

.blog-rich-editor .toolbar-btn:hover {
    background-color: var(--highlight-color);
    border-color: var(--highlight-color);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.blog-rich-editor .toolbar-btn.active {
    background-color: var(--highlight-color);
    border-color: var(--highlight-color);
    color: white;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.blog-rich-editor .toolbar-btn:active {
    transform: translateY(0);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.blog-rich-editor .toolbar-select {
    padding: 6px 10px;
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-color);
    font-size: 0.9rem;
    cursor: pointer;
    min-width: 80px;
    height: 32px;
    transition: all 0.2s ease;
}

.blog-rich-editor .toolbar-select:hover {
    border-color: var(--highlight-color);
    box-shadow: 0 0 0 2px rgba(45, 112, 150, 0.1);
}

.blog-rich-editor .toolbar-select:focus {
    outline: none;
    border-color: var(--highlight-color);
    box-shadow: 0 0 0 2px rgba(45, 112, 150, 0.2);
}

/* Color button specific styles */
.blog-rich-editor .color-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    min-width: auto;
}

.blog-rich-editor .color-btn span {
    font-size: 0.8rem;
    font-weight: 500;
}

/* Responsive toolbar */
@media (max-width: 768px) {
    .blog-rich-editor .editor-toolbar {
        padding: 8px 10px;
        gap: 4px;
    }
    
    .blog-rich-editor .toolbar-section {
        padding: 0 4px;
        gap: 4px;
    }
    
    .blog-rich-editor .toolbar-group {
        gap: 1px;
    }
    
    .blog-rich-editor .toolbar-btn {
        padding: 6px 8px;
        min-width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }
    
    .blog-rich-editor .toolbar-select {
        padding: 4px 8px;
        min-width: 60px;
        height: 28px;
        font-size: 0.8rem;
    }
}

/* Font Selector Styles */
.font-selector {
    position: relative;
    display: inline-block;
    z-index: 999999;
}

.font-selector-btn {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 40px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.font-selector-btn:hover {
    background: var(--highlight-color);
    color: white;
    border-color: var(--highlight-color);
}

.font-selector-btn.active {
    background: var(--highlight-color);
    color: white;
    border-color: var(--highlight-color);
}

.font-dropdown {
    position: fixed;
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    max-height: 400px;
    overflow-y: auto;
    z-index: 999999;
    min-width: 280px;
    padding: 8px 0;
}

.font-category-header {
    padding: 12px 16px 8px 16px;
    font-weight: 600;
    color: #4a9eff;
    border-bottom: 1px solid #444;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    background: #1a1a1a;
    margin: 0;
}

.font-preview {
    /* font-family: inherit; - Removed to allow custom fonts to display */
    padding: 12px 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    line-height: 1.4;
    color: #ffffff;
    margin: 2px 8px;
    border: 1px solid transparent;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Ensure font-family is not inherited from parent */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.font-preview:hover {
    background: #4a9eff;
    color: white;
    border-color: #4a9eff;
}

.font-loading {
    padding: 8px 12px;
    color: #888;
    font-style: italic;
    text-align: center;
}

/* Responsive font selector */
@media (max-width: 768px) {
    .font-dropdown {
        min-width: 240px;
        max-height: 300px;
    }
    
    .font-preview {
        padding: 10px 12px;
        font-size: 13px;
    }
}

/* Editor Content Styles */
.blog-rich-editor .editor-content {
    padding: 20px;
    flex: 1; /* Take remaining space */
    color: var(--text-color);
    font-size: 1rem;
    line-height: 1.4;
    outline: none;
    background-color: var(--bg-color);
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

/* Custom Scrollbar Styling - Site-wide theme */
.blog-rich-editor .editor-content::-webkit-scrollbar {
    width: 8px;
    background-color: rgba(0, 0, 0, 0.1);
}

.blog-rich-editor .editor-content::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 4px;
}

.blog-rich-editor .editor-content::-webkit-scrollbar-thumb:hover {
    background-color: var(--highlight-color);
}

/* Firefox Scrollbar Styling */
.blog-rich-editor .editor-content {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) rgba(0, 0, 0, 0.1);
}

.blog-rich-editor .editor-content:empty::before {
    content: 'Start writing your blog post here...';
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

.blog-rich-editor .editor-content.drag-over {
    background-color: rgba(45, 112, 150, 0.1);
    border: 2px dashed var(--highlight-color);
}

/* BETTER IMAGE HANDLING IN MANAGEMENT CONSOLE */
.blog-rich-editor .ql-editor img {
    max-width: 100% !important;
    height: auto !important;
    max-height: 300px !important;
    border-radius: 4px;
    margin: 10px 0;
    display: block;
}

/* Better image spacing for blog content */
.blog-rich-editor .ql-editor img.align-left {
    float: left !important;
    margin: 0 1.5em 1em 0 !important;
    max-width: 50% !important;
}

.blog-rich-editor .ql-editor img.align-right {
    float: right !important;
    margin: 0 0 1em 1.5em !important;
    max-width: 50% !important;
}

.blog-rich-editor .ql-editor img.align-center {
    margin: 1em auto !important;
    float: none !important;
    max-width: 100% !important;
}



/* Featured Image Preview in Management Console */
.blog-featured-image-preview {
    margin-top: 15px;
    padding: 20px;
    background-color: var(--secondary-color);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
}

.blog-featured-image-preview img {
    max-width: 100% !important;
    max-height: 400px !important; /* Increased from 200px to show more like blog preview */
    height: auto !important;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    margin: 0 auto 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Remove Image Button Styling */
.blog-featured-image-remove {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background-color: #dc3545;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
}

.blog-featured-image-remove:hover {
    background-color: #c82333;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(220, 53, 69, 0.4);
    color: white;
}

.blog-featured-image-remove:active {
    transform: translateY(0);
}

.blog-featured-image-remove::before {
    content: '\f1f8'; /* FontAwesome trash icon */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

/* Drag and Drop States */
.blog-image-upload.dragover {
    border-color: var(--highlight-color);
    background-color: rgba(45, 112, 150, 0.1);
    transform: scale(1.02);
}

.blog-featured-image-preview.dragover {
    border-color: var(--highlight-color);
    background-color: rgba(45, 112, 150, 0.1);
    transform: scale(1.02);
}

.blog-featured-image-preview.dragover::after {
    content: 'Drop new image to replace';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(45, 112, 150, 0.9);
    color: white;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 500;
    pointer-events: none;
    z-index: 10;
}

/* Image Resize Controls */
.image-resize-controls {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
    background: var(--secondary-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
    color: var(--text-color);
}

.image-resize-panel h4 {
    margin: 0 0 15px 0;
    color: var(--text-color);
    font-size: 1.1rem;
    text-align: center;
}

.size-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.size-btn {
    padding: 8px 16px;
    background-color: var(--highlight-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.size-btn:hover {
    background-color: var(--accent-text-color);
    transform: translateY(-1px);
}

.close-btn {
    width: 100%;
    padding: 8px 16px;
    background-color: var(--border-color);
    color: var(--text-color);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.close-btn:hover {
    background-color: #dc3545;
    color: white;
}

/* Image Upload Styles */
.blog-image-upload {
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    padding: 40px 20px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    background-color: rgba(45, 112, 150, 0.05);
}

/* Blog Posts Table Styles - FIX FONT SIZE ISSUES */
.blog-posts-table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--secondary-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    font-size: 0.9rem; /* Proper readable font size */
}

.blog-posts-table th,
.blog-posts-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9rem !important; /* Force readable font size */
    line-height: 1.4;
}

.blog-posts-table th {
    background-color: var(--primary-color);
    color: var(--text-color);
    font-weight: 600;
    font-size: 0.95rem !important;
}

.blog-posts-table tr:hover {
    background-color: rgba(45, 112, 150, 0.1);
}

.blog-posts-table .blog-status {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem !important;
    font-weight: 500;
}

.blog-posts-table .blog-status.published {
    background-color: #28a745;
    color: white;
}

.blog-posts-table .blog-status.draft {
    background-color: #ffc107;
    color: #000;
}

.blog-posts-table .blog-post-title {
    font-size: 0.9rem !important;
    font-weight: 500;
    color: var(--text-color);
    text-decoration: none;
    line-height: 1.4;
}

.blog-posts-table .blog-post-title:hover {
    color: var(--highlight-color);
    text-decoration: underline;
}

/* Force smaller font for ALL text in blog table */
.blog-posts-table * {
    font-size: 0.85rem !important;
}

.blog-posts-table th * {
    font-size: 0.9rem !important;
    font-weight: 600;
}

.table-responsive-wrapper {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.blog-post-title {
    font-weight: 600;
    color: var(--accent-text-color);
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.blog-post-status {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.blog-post-status.published {
    background-color: rgba(40, 167, 69, 0.2);
    color: #28a745;
}

.blog-post-status.draft {
    background-color: rgba(255, 193, 7, 0.2);
    color: #ffc107;
}

.blog-post-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.blog-post-actions .button-small {
    padding: 6px 12px;
    font-size: 0.8rem;
    margin: 0;
}

/* ===== PUBLIC BLOG STYLES V2 - MAGAZINE LAYOUT ===== */

.blog-layout-container-v2 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 30px;
    width: 100%;
}

.blog-post-card {
    background: linear-gradient(145deg, var(--secondary-color) 0%, rgba(26, 31, 36, 0.95) 100%);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: var(--text-color);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(44, 51, 58, 0.6);
    display: flex;
    flex-direction: column;
    position: relative;
    backdrop-filter: blur(10px);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.15),
        0 1px 3px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.blog-post-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--highlight-color), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.blog-post-card:hover {
    transform: translateY(-8px);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 8px 16px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border-color: var(--highlight-color);
}

.blog-post-card:hover::before {
    opacity: 1;
}

.blog-post-card .post-image-container {
    position: relative;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    overflow: hidden;
}

.blog-post-card .post-image-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(45, 112, 150, 0.1) 0%, rgba(26, 31, 36, 0.2) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.blog-post-card:hover .post-image-container::after {
    opacity: 1;
}

.blog-post-card .post-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.blog-post-card:hover .post-image-container img {
    transform: scale(1.08);
}

.blog-post-card .post-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background: linear-gradient(180deg, rgba(26, 31, 36, 0.8) 0%, rgba(26, 31, 36, 0.95) 100%);
    position: relative;
}

.blog-post-card .post-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(44, 51, 58, 0.8), transparent);
}

.blog-post-card .post-category {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent-text-color);
    text-transform: uppercase;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
    position: relative;
    display: inline-block;
}

.blog-post-card .post-category::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 20px;
    height: 2px;
    background: var(--accent-text-color);
    transition: width 0.3s ease;
}

.blog-post-card:hover .post-category::after {
    width: 100%;
}

.blog-post-card .post-title {
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 16px;
    color: var(--text-color);
    transition: color 0.3s ease;
}

.blog-post-card:hover .post-title {
    color: var(--accent-text-color);
}

.blog-post-card .post-meta {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid rgba(44, 51, 58, 0.4);
    display: flex;
    align-items: center;
    gap: 8px;
}

.blog-post-card .post-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.blog-post-card .post-meta span:first-child::after {
    content: '•';
    margin-left: 8px;
    color: rgba(255, 255, 255, 0.3);
}

/* Loading and error states with enhanced styling */
.blog-loading, .blog-error, .blog-empty {
    background: linear-gradient(145deg, var(--secondary-color) 0%, rgba(26, 31, 36, 0.95) 100%);
    border-radius: 16px;
    padding: 40px;
    text-align: center;
    border: 1px solid rgba(44, 51, 58, 0.6);
    backdrop-filter: blur(10px);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.15),
        0 1px 3px rgba(0, 0, 0, 0.1);
}

.blog-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    color: var(--text-color);
}

.blog-loading i {
    font-size: 2rem;
    color: var(--accent-text-color);
    animation: spin 1s linear infinite;
}

.blog-error h3, .blog-empty h3 {
    color: var(--text-color);
    margin-bottom: 12px;
    font-size: 1.5rem;
}

.blog-error p, .blog-empty p {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 20px;
}

/* Pagination with enhanced styling */
.blog-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
    padding: 24px;
    background: linear-gradient(145deg, var(--secondary-color) 0%, rgba(26, 31, 36, 0.95) 100%);
    border-radius: 16px;
    border: 1px solid rgba(44, 51, 58, 0.6);
    backdrop-filter: blur(10px);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.15),
        0 1px 3px rgba(0, 0, 0, 0.1);
}

.pagination-button {
    background: transparent;
    border: 1px solid rgba(45, 112, 150, 0.3);
    padding: 12px 24px;
    border-radius: 8px;
    color: var(--text-color);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(26, 31, 36, 0.6);
}

.pagination-button:hover:not(:disabled) {
    background-color: rgba(45, 112, 150, 0.1);
    border-color: rgba(45, 112, 150, 0.5);
    transform: translateY(-1px);
}

.pagination-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.pagination-info {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

.pagination-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
}

.pagination-current {
    background-color: rgba(45, 112, 150, 0.2);
    border: 1px solid rgba(45, 112, 150, 0.5);
    padding: 12px 16px;
    border-radius: 8px;
    color: var(--accent-text-color);
    font-weight: 600;
    min-width: 40px;
    text-align: center;
}


/* -- HERO POST (POST 1) -- */
.blog-post-hero {
    grid-column: span 12;
    min-height: 500px;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}

.blog-post-hero .post-image-container {
    height: 100%;
    position: absolute;
    width: 100%;
}

.blog-post-hero .post-image-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(0,0,0,0.9) 0%, 
        rgba(0,0,0,0.7) 30%, 
        rgba(0,0,0,0.4) 60%, 
        rgba(0,0,0,0.2) 100%
    );
}

.blog-post-hero .post-content {
    position: relative;
    z-index: 2;
    justify-content: flex-end;
    padding: 40px;
    color: white;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.8) 0%,
        rgba(0,0,0,0.4) 50%,
        transparent 100%
    );
}

.blog-post-hero .post-category {
    /* Match category color used by other cards for consistency */
    color: var(--accent-text-color) !important;
    font-size: 0.85rem;
    margin-bottom: 16px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.65); /* improve readability over imagery */
}

.blog-post-hero .post-category::after {
    background: var(--accent-text-color);
}

.blog-post-hero .post-title {
    font-size: 3rem;
    color: white;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.blog-post-hero .post-meta {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 20px;
}


/* -- STANDARD POSTS (POSTS 2, 3, 4) -- */
.blog-post-standard {
    grid-column: span 4;
}

.blog-post-standard .post-image-container {
    height: 200px;
}


/* -- MEDIUM FEATURED POST (POST 5) -- */
.blog-post-medium-featured {
    grid-column: span 8;
    flex-direction: row;
    min-height: 300px;
}

.blog-post-medium-featured .post-image-container {
    flex-basis: 55%;
    position: relative;
}

.blog-post-medium-featured .post-image-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.3) 0%, transparent 50%);
    pointer-events: none;
}

.blog-post-medium-featured .post-content {
    flex-basis: 45%;
    justify-content: center;
    padding: 32px;
    background: linear-gradient(180deg, rgba(26, 31, 36, 0.9) 0%, rgba(26, 31, 36, 0.95) 100%);
}

.blog-post-medium-featured .post-title {
    font-size: 2rem;
    line-height: 1.3;
    margin-bottom: 20px;
}

.blog-post-medium-featured .post-category {
    font-size: 0.8rem;
    margin-bottom: 16px;
}


/* -- SIDE POST (POST 6) -- */
.blog-post-side {
    grid-column: span 4;
}

.blog-post-side .post-image-container {
    height: 200px;
}


/* -- REMAINING POSTS -- */
.blog-post-regular {
    grid-column: span 6;
}

.blog-post-regular .post-image-container {
    height: 220px;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .blog-post-hero,
    .blog-post-standard,
    .blog-post-medium-featured,
    .blog-post-side,
    .blog-post-regular {
        grid-column: span 6;
    }
    .blog-post-hero .post-title {
        font-size: 2.5rem;
    }
    .blog-post-medium-featured .post-title {
        font-size: 1.6rem;
    }
}

@media (max-width: 768px) {
    .blog-post-hero,
    .blog-post-standard,
    .blog-post-medium-featured,
    .blog-post-side,
    .blog-post-regular {
        grid-column: span 12;
    }
    .blog-post-medium-featured {
        flex-direction: column;
    }
    .blog-post-hero .post-title {
        font-size: 2rem;
    }
    .blog-post-hero .post-content {
        padding: 30px 20px;
    }
    .blog-post-medium-featured .post-content {
        padding: 24px 20px;
    }
    .blog-post-card .post-content {
        padding: 20px;
    }
    .blog-loading, .blog-error, .blog-empty {
        padding: 30px 20px;
    }
    .blog-pagination {
        padding: 20px;
        flex-direction: column;
        gap: 16px;
    }
}

/* Animation for loading spinner */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Form validation styles */
.blog-form-group.error input,
.blog-form-group.error textarea,
.blog-form-group.error select {
    border-color: #dc3545;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2);
}

.blog-form-error {
    color: #dc3545;
    font-size: 0.9rem;
    margin-top: 4px;
}

.blog-form-success {
    color: #28a745;
    font-size: 0.9rem;
    margin-top: 4px;
}

/* Post options styling - using universal checkbox styling from base.css */
.blog-form-group .form-group {
    margin: 0;
    padding: 8px 12px;
    border-radius: 5px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: all 0.3s ease;
}

.blog-form-group .form-group:hover {
    border-color: var(--highlight-color);
    background-color: rgba(45, 112, 150, 0.1);
}

/* Blog form checkbox specific styles */
.blog-form-group .form-group {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.blog-form-group .form-group:hover {
    border-color: var(--highlight-color);
    background: rgba(45, 112, 150, 0.1);
}

.blog-form-group .form-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    margin-right: 0;
}

.blog-form-group .form-group input[type="checkbox"]:checked + span {
    color: var(--highlight-color);
    font-weight: 600;
}

.blog-form-group .form-group span {
    color: var(--text-color);
    font-weight: 500;
    cursor: pointer;
}

.blog-form-group .form-group small {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    font-weight: normal;
}

/* Toast notifications for blog actions */
.blog-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 15px 20px;
    border-radius: 8px;
    color: white;
    font-weight: 500;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    z-index: 10002; /* Ensure blog notifications appear above all nav elements */
    animation: slideInRight 0.3s ease;
}

.blog-toast.success {
    background-color: #28a745;
}

.blog-toast.error {
    background-color: #dc3545;
}

.blog-toast.info {
    background-color: var(--highlight-color);
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
} 

/* ===== SINGLE BLOG POST STYLES ===== */

.single-post-container {
    max-width: 1800px;
    margin: 40px auto;
    padding: 30px;
    background: linear-gradient(145deg, var(--secondary-color) 0%, rgba(26, 31, 36, 0.95) 100%);
    border-radius: 20px;
    border: 1px solid rgba(44, 51, 58, 0.6);
    backdrop-filter: blur(10px);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.2),
        0 4px 16px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    position: relative;
}

.single-post-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--highlight-color), transparent);
    border-radius: 20px 20px 0 0;
}

/* Modern Compact Header */
.single-post-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(44, 51, 58, 0.4);
    position: relative;
}

.single-post-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, var(--highlight-color), transparent);
}

.single-post-title {
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 16px;
    color: var(--text-color);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Compact Meta Information */
.post-meta-compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 30px;
}

.post-meta-left {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.post-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    padding: 6px 12px;
    background: rgba(45, 112, 150, 0.1);
    border-radius: 16px;
    border: 1px solid rgba(45, 112, 150, 0.2);
    transition: all 0.3s ease;
}

.post-meta-item:hover {
    background: rgba(45, 112, 150, 0.15);
    border-color: rgba(45, 112, 150, 0.3);
}

.post-meta-item i {
    font-size: 0.9rem;
    color: var(--highlight-color);
}

/* Inline Author Info */
.author-info-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.author-info-inline img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(45, 112, 150, 0.3);
}

/* Compact Social Sharing */
.post-social-compact {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: flex-end;
}

.share-label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
}

.share-buttons-compact {
    display: flex;
    gap: 8px;
}

.share-buttons-compact .social-share-button {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
    border-radius: 8px;
    transform: translateZ(0);
}

.share-buttons-compact .social-share-button:hover {
    transform: translateY(-2px) scale(1.05);
}

.single-post-featured-image {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
    border-radius: 16px;
    margin-bottom: 10px;
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.3),
        0 4px 12px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(44, 51, 58, 0.4);
    transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
    will-change: transform;
}

/* Match editor content container styling for consistent look */
.single-post-body {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-color);
    padding: 20px; /* same as .blog-rich-editor .editor-content */
    margin-top: 5px;
    animation: postFadeUp 420ms ease-out both;
}

/* Use unified heading margins from the shared editor/blog rules above */
/* Intentionally remove custom margins here to keep editor and blog identical */

/* Hide empty headings that cause unwanted spacing */
.single-post-body h1:empty,
.single-post-body h2:empty,
.single-post-body h3:empty,
.single-post-body h4:empty,
.single-post-body h5:empty,
.single-post-body h6:empty {
    display: none;
}

/* Reduce top margin for the first heading after hero image */
.single-post-body > h1:first-child,
.single-post-body > h2:first-child,
.single-post-body > h3:first-child,
.single-post-body > h4:first-child,
.single-post-body > h5:first-child,
.single-post-body > h6:first-child {
    margin-top: 0.5em;
}

/* Paragraph spacing is governed by the unified rules (0.75rem 0) */

/* Prevent paragraph margins from affecting list items */
/* Lists already normalize inner paragraph spacing via unified rules */

/* Target p tags inside list items specifically */
/* Keep default inline paragraph behavior from shared list styles */

/* Target empty p tags inside list items */
/* Avoid special-casing empty p tags inside lists; follow editor behavior */

/* Ensure list items have identical styling between editor and blog post */
/* List item typography is already set in the unified section */

.single-post-body ul > li {
    display: list-item !important;
    margin: 0.1rem 0 !important;
    padding: 0 !important;
}

.single-post-body ol > li {
    display: list-item !important;
    margin: 0.1rem 0 !important;
    padding: 0 !important;
}

.single-post-body ul {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    margin: 0.75rem 0 !important;
    padding-left: 1.5rem !important;
}

.single-post-body ol {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    margin: 0.75rem 0 !important;
    padding-left: 1.5rem !important;
}

.single-post-body a {
    color: var(--highlight-color);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease;
}

.single-post-body a:hover {
    border-bottom-color: var(--highlight-color);
}

/* Legacy image styling - now handled by unified rules above */

/* UNIFIED IMAGE ALIGNMENT - EDITOR AND BLOG DISPLAY */
/* Base image styling */
.editor-content img,
.single-post-body img,
#blog-content .ql-editor img,
.blog-rich-editor .ql-editor img,
.ql-editor img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1.5em 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: transform 300ms ease, box-shadow 300ms ease;
    will-change: transform;
}

.single-post-body img:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

@keyframes postFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}



/* Left alignment - for blog post display only */
.single-post-body img.align-left,
#blog-content .ql-editor img.align-left,
.blog-rich-editor .ql-editor img.align-left,
.ql-editor img.align-left,
img.align-left {
    float: left !important;
    margin: 0 1.5em 1em 0 !important;
    max-width: min(50%, 400px) !important; /* sensible default for un-sized floats */
}

/* Right alignment - for blog post display only */
.single-post-body img.align-right,
#blog-content .ql-editor img.align-right,
.blog-rich-editor .ql-editor img.align-right,
.ql-editor img.align-right,
img.align-right {
    float: right !important;
    margin: 0 0 1em 1.5em !important;
    max-width: min(50%, 400px) !important; /* sensible default for un-sized floats */
}

/* Size classes: when floated left/right, keep a 50% cap so text can wrap */
.single-post-body img.align-left[class*="size-"],
/* Do NOT override size classes when floating left/right; let size-* control width */
.single-post-body img.align-left,
.single-post-body img.align-right,
#blog-content .ql-editor img.align-left,
#blog-content .ql-editor img.align-right,
.blog-rich-editor .ql-editor img.align-left,
.blog-rich-editor .ql-editor img.align-right,
.ql-editor img.align-left,
.ql-editor img.align-right,
img.align-left,
img.align-right {
    /* width controlled by size-* classes below */
}

/* Size classes (non-floated or centered) */
.single-post-body img.size-small,
#blog-content .ql-editor img.size-small,
.blog-rich-editor .ql-editor img.size-small,
.ql-editor img.size-small,
img.size-small {
    max-width: 240px !important;
    width: 100% !important; /* width 100% of its max to prevent natural image width from expanding */
    height: auto !important;
}

.single-post-body img.size-medium,
#blog-content .ql-editor img.size-medium,
.blog-rich-editor .ql-editor img.size-medium,
.ql-editor img.size-medium,
img.size-medium {
    max-width: 480px !important;
    width: 100% !important;
    height: auto !important;
}

.single-post-body img.size-large,
#blog-content .ql-editor img.size-large,
.blog-rich-editor .ql-editor img.size-large,
.ql-editor img.size-large,
img.size-large {
    max-width: 720px !important;
    width: 100% !important;
    height: auto !important;
}

/* Extra large size */
.single-post-body img.size-xlarge,
#blog-content .ql-editor img.size-xlarge,
.blog-rich-editor .ql-editor img.size-xlarge,
.ql-editor img.size-xlarge,
img.size-xlarge {
    max-width: 900px !important; /* keep */
    width: 100% !important;
    height: auto !important;
}

.single-post-body img.size-full,
#blog-content .ql-editor img.size-full,
.blog-rich-editor .ql-editor img.size-full,
.ql-editor img.size-full,
img.size-full {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
}

/* Center alignment - for blog post display only */
.single-post-body img.align-center,
#blog-content .ql-editor img.align-center,
.blog-rich-editor .ql-editor img.align-center,
.ql-editor img.align-center,
img.align-center {
    display: block !important;
    margin: 1em auto !important;
    float: none !important;
    /* Do not force full width if a size-* class is present */
    max-width: 100%;
}

/* Centered images should respect explicit size classes */
.editor-content img.align-center.size-small,
.single-post-body img.align-center.size-small,
#blog-content .ql-editor img.align-center.size-small,
.blog-rich-editor .ql-editor img.align-center.size-small,
.ql-editor img.align-center.size-small { max-width: 240px !important; }

.editor-content img.align-center.size-medium,
.single-post-body img.align-center.size-medium,
#blog-content .ql-editor img.align-center.size-medium,
.blog-rich-editor .ql-editor img.align-center.size-medium,
.ql-editor img.align-center.size-medium { max-width: 480px !important; }

.editor-content img.align-center.size-large,
.single-post-body img.align-center.size-large,
#blog-content .ql-editor img.align-center.size-large,
.blog-rich-editor .ql-editor img.align-center.size-large,
.ql-editor img.align-center.size-large { max-width: 720px !important; }

.editor-content img.align-center.size-xlarge,
.single-post-body img.align-center.size-xlarge,
#blog-content .ql-editor img.align-center.size-xlarge,
.blog-rich-editor .ql-editor img.align-center.size-xlarge,
.ql-editor img.align-center.size-xlarge { max-width: 900px !important; }

/* OVERRIDE INLINE STYLES - MAXIMUM SPECIFICITY */
/* Force override any inline styles that might exist in database content */
/* Respect explicit size classes even if legacy inline float exists */
.single-post-body img[style*="float: left"],
.single-post-body img[style*="float:left"] {
    float: left !important;
    margin: 0 1.5em 1em 0 !important;
}

.single-post-body img[style*="float: right"],
.single-post-body img[style*="float:right"] {
    float: right !important;
    margin: 0 0 1em 1.5em !important;
}

.single-post-body img[style*="margin: 10px auto"],
.single-post-body img[style*="margin: 1em auto"],
.single-post-body img[style*="margin:auto"] {
    display: block !important;
    margin: 1em auto !important;
    float: none !important;
    max-width: 100% !important;
}

.single-post-body .align-center {
    text-align: center;
}

.single-post-body .align-center img {
    margin: 1em auto;
    float: none;
    max-width: 100%;
}

/* UNIFIED VIDEO ALIGNMENT - EDITOR AND BLOG DISPLAY */
/* Base video styling */
.editor-content .video-embed,
.single-post-body .video-embed,
#blog-content .ql-editor .video-embed,
.blog-rich-editor .ql-editor .video-embed,
.ql-editor .video-embed {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 20px 0;
    text-align: center;
}

/* Remove hover effects for blog post display */
.single-post-body .video-embed:hover {
    box-shadow: none !important;
    outline: none !important;
}

.single-post-body .video-embed::after {
    display: none !important;
}

.single-post-body .video-embed:hover::after {
    display: none !important;
}

.editor-content .video-embed iframe,
.single-post-body .video-embed iframe,
#blog-content .ql-editor .video-embed iframe,
.blog-rich-editor .ql-editor .video-embed iframe,
.ql-editor .video-embed iframe {
    max-width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Left alignment - support both old and new classes */
.editor-content .video-embed.align-left,
.single-post-body .video-embed.align-left,
#blog-content .ql-editor .video-embed.align-left,
.blog-rich-editor .ql-editor .video-embed.align-left,
.ql-editor .video-embed.align-left,
.video-embed.align-left {
    float: left !important;
    margin: 0 1.5em 1em 0 !important;
    max-width: 50% !important;
    width: auto !important;
    text-align: left !important;
}

/* Right alignment - support both old and new classes */
.editor-content .video-embed.align-right,
.single-post-body .video-embed.align-right,
#blog-content .ql-editor .video-embed.align-right,
.blog-rich-editor .ql-editor .video-embed.align-right,
.ql-editor .video-embed.align-right,
.video-embed.align-right {
    float: right !important;
    margin: 0 0 1em 1.5em !important;
    max-width: 50% !important;
    width: auto !important;
    text-align: right !important;
}

/* Center alignment - support both old and new classes */
.editor-content .video-embed.align-center,
.single-post-body .video-embed.align-center,
#blog-content .ql-editor .video-embed.align-center,
.blog-rich-editor .ql-editor .video-embed.align-center,
.ql-editor .video-embed.align-center,
.video-embed.align-center {
    margin: 1em auto !important;
    text-align: center !important;
}

/* OVERRIDE INLINE STYLES FOR VIDEOS - MAXIMUM SPECIFICITY */
.single-post-body .video-embed[style*="float: left"],
.single-post-body .video-embed[style*="float:left"] {
    float: left !important;
    margin: 0 1.5em 1em 0 !important;
    max-width: 50% !important;
}

.single-post-body .video-embed[style*="float: right"],
.single-post-body .video-embed[style*="float:right"] {
    float: right !important;
    margin: 0 0 1em 1.5em !important;
    max-width: 50% !important;
}

.single-post-body .video-embed[style*="margin: 10px auto"],
.single-post-body .video-embed[style*="margin: 1em auto"],
.single-post-body .video-embed[style*="margin:auto"] {
    margin: 1em auto !important;
    text-align: center !important;
}

.single-post-body blockquote {
    border-left: 4px solid var(--highlight-color);
    padding-left: 1.5em;
    margin: 2em 0;
    font-style: italic;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(45, 112, 150, 0.05);
    padding: 1.5em;
    border-radius: 0 8px 8px 0;
}

/* Optional larger quote size that survives sanitizer (class-based) */
.editor-content blockquote.quote-lg,
.single-post-body blockquote.quote-lg,
#blog-content .ql-editor blockquote.quote-lg,
.blog-rich-editor .ql-editor blockquote.quote-lg,
.ql-editor blockquote.quote-lg {
    font-size: 1.4rem !important;
    line-height: 1.5 !important;
}

/* Responsive: remove floats for narrow screens to avoid awkward wrapping */
@media (max-width: 768px) {
    .editor-content blockquote.align-left,
    .editor-content blockquote.align-right,
    .single-post-body blockquote.align-left,
    .single-post-body blockquote.align-right,
    #blog-content .ql-editor blockquote.align-left,
    #blog-content .ql-editor blockquote.align-right,
    .blog-rich-editor .ql-editor blockquote.align-left,
    .blog-rich-editor .ql-editor blockquote.align-right,
    .ql-editor blockquote.align-left,
    .ql-editor blockquote.align-right,
    blockquote.align-left,
    blockquote.align-right,
    .single-post-body blockquote[style*="text-align: right"],
    #blog-content .ql-editor blockquote[style*="text-align: right"],
    .blog-rich-editor .ql-editor blockquote[style*="text-align: right"],
    .ql-editor blockquote[style*="text-align: right"] {
        float: none !important;
        margin: 1em 0 !important;
        max-width: 100% !important;
    }
}

/* Full-width blockquote option */
.editor-content blockquote.full-width,
.single-post-body blockquote.full-width,
#blog-content .ql-editor blockquote.full-width,
.blog-rich-editor .ql-editor blockquote.full-width,
.ql-editor blockquote.full-width,
blockquote.full-width {
    float: none !important;
    display: block !important;
    width: 100% !important;
    margin: 1em 0 !important;
}

/* If a blockquote is marked full-width but sits in a column next to a floated image,
   keep it within the available column instead of clearing under the image */
.single-post-body img.align-left + blockquote.full-width,
.single-post-body img.align-right + blockquote.full-width,
.editor-content img.align-left + blockquote.full-width,
.editor-content img.align-right + blockquote.full-width {
    width: auto !important;        /* shrink to column */
    max-width: 50% !important;     /* same cap as floats for side-by-side */
    display: inline-block !important;
}
/* Sibling fallback when elements are not adjacent */
.single-post-body img.align-left ~ blockquote.full-width,
.single-post-body img.align-right ~ blockquote.full-width,
.editor-content img.align-left ~ blockquote.full-width,
.editor-content img.align-right ~ blockquote.full-width {
    width: auto !important;
    max-width: 50% !important;
}

/* Text color utility classes (editor and public) */
.editor-content .text-accent,
.single-post-body .text-accent { color: var(--accent-text-color) !important; }
.editor-content .text-muted,
.single-post-body .text-muted { color: var(--text-muted) !important; }
.editor-content .text-highlight,
.single-post-body .text-highlight { color: var(--highlight-color) !important; }

.single-post-body pre {
    background: rgba(0, 0, 0, 0.3);
    padding: 1.5em;
    border-radius: 8px;
    overflow-x: auto;
    border: 1px solid rgba(44, 51, 58, 0.4);
    margin: 1.5em 0;
}

/* Clear floats at the container level (not every paragraph) so text wraps like the editor */
.single-post-body::after {
    content: "";
    display: table;
    clear: both;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .single-post-container {
        margin: 20px auto;
        padding: 20px;
        max-width: 100%;
    }

    .single-post-title {
        font-size: 2.2rem;
        margin-bottom: 12px;
    }

    .post-meta-compact {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .post-meta-left {
        gap: 12px;
    }

    .post-meta-item {
        font-size: 0.9rem;
        padding: 4px 10px;
    }

    .author-info-inline img {
        width: 20px;
        height: 20px;
    }

    .post-social-compact {
        align-self: stretch;
        justify-content: flex-start;
    }

    .share-buttons-compact {
        gap: 6px;
    }

    .share-buttons-compact .social-share-button {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }

    .single-post-body {
        padding: 20px;
        font-size: 1rem;
    }
}

/* Enhanced Author Bio Section */
.blog-author-bio {
    margin: 30px 0;
    padding: 20px;
    background: linear-gradient(135deg, rgba(45, 112, 150, 0.08) 0%, rgba(26, 31, 36, 0.9) 100%);
    border-radius: 12px;
    border: 1px solid rgba(45, 112, 150, 0.2);
    backdrop-filter: blur(10px);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.1),
        0 2px 8px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

.blog-author-bio::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(45, 112, 150, 0.4), transparent);
}

.author-bio-container {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.author-bio-avatar {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(45, 112, 150, 0.3);
    background: var(--bg-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

.author-bio-avatar:hover {
    transform: scale(1.05);
}

.author-bio-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.author-bio-info {
    flex: 1;
}

.author-bio-info h4 {
    margin: 0 0 6px 0;
    font-size: 1.1rem;
    color: var(--text-color);
    font-weight: 600;
}

.author-bio-info h4 span {
    color: var(--accent-text-color);
}

.author-bio-info p {
    margin: 0 0 12px 0;
    color: var(--text-muted);
    line-height: 1.5;
    font-size: 0.95rem;
}

/* Author Social Links */
.author-social-links {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.author-social-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    background: rgba(45, 112, 150, 0.1);
    border: 1px solid rgba(45, 112, 150, 0.2);
    border-radius: 6px;
    color: var(--accent-text-color);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.author-social-link:hover {
    background: rgba(45, 112, 150, 0.2);
    border-color: var(--highlight-color);
    color: var(--text-color);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(45, 112, 150, 0.2);
}

.author-social-link i {
    font-size: 1rem;
}

/* Hide the duplicate author section in blog posts (not in forms) */
.blog-post .blog-author-section,
.single-post-body .blog-author-section {
    display: none !important;
}

/* ===== BLOG POST NAVIGATION STYLES ===== */

.blog-post-navigation {
    margin: 30px 0 20px 0;
    padding: 12px;
    background: rgba(26, 31, 36, 0.4);
    border-radius: 8px;
    border: 1px solid rgba(44, 51, 58, 0.3);
}

.blog-post-navigation .nav-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 20px;
    align-items: center;
}

/* When only one navigation item is visible, center it */
.blog-post-navigation .nav-container.single-nav {
    grid-template-columns: auto;
    justify-content: center;
}

.blog-post-navigation .nav-item {
    display: flex;
    align-items: center;
}

.blog-post-navigation .nav-item.nav-prev {
    justify-content: flex-start;
}

.blog-post-navigation .nav-item.nav-center {
    justify-content: center;
}

.blog-post-navigation .nav-item.nav-next {
    justify-content: flex-end;
}

.blog-post-navigation .nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: transparent;
    color: var(--text-color);
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.2s ease;
    border: 1px solid rgba(44, 51, 58, 0.4);
    min-width: 120px;
    justify-content: center;
    font-size: 0.85rem;
}

.blog-post-navigation .nav-link:hover {
    background: rgba(45, 112, 150, 0.1);
    border-color: var(--highlight-color);
    color: var(--accent-text-color);
    transform: translateY(-1px);
}

.blog-post-navigation .nav-link.nav-center-link {
    background: transparent;
    border: 1px solid rgba(44, 51, 58, 0.4);
    color: var(--text-color);
}

.blog-post-navigation .nav-link.nav-center-link:hover {
    background: rgba(45, 112, 150, 0.1);
    border-color: var(--highlight-color);
    color: var(--accent-text-color);
}

.blog-post-navigation .nav-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: rgba(45, 112, 150, 0.1);
    border-radius: 50%;
    transition: all 0.2s ease;
    font-size: 0.75rem;
}

.blog-post-navigation .nav-link:hover .nav-arrow {
    background: rgba(45, 112, 150, 0.2);
    transform: scale(1.05);
}

.blog-post-navigation .nav-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
}

.blog-post-navigation .nav-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
}

/* SOCIAL SHARING STYLES */
.blog-social-share {
    text-align: center;
    margin: 20px 0;
    padding: 12px;
    background: rgba(26, 31, 36, 0.4);
    border-radius: 8px;
    border: 1px solid rgba(44, 51, 58, 0.3);
}

.blog-social-share h4 {
    margin-bottom: 8px;
    color: var(--text-color);
    font-weight: 500;
    font-size: 0.85rem;
    opacity: 0.8;
}

.share-buttons-container {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.social-share-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    color: var(--text-color);
    background-color: transparent;
    border: 1px solid rgba(45, 112, 150, 0.2);
    text-decoration: none;
    font-size: 12px;
    transition: all 0.2s ease;
    cursor: pointer;
    opacity: 0.7;
}

.social-share-button:hover {
    opacity: 1;
    background-color: rgba(45, 112, 150, 0.05);
    border-color: rgba(45, 112, 150, 0.3);
    transform: translateY(-1px);
}

/* Special styling for the X logo */
.x-logo {
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
}

.copy-link-feedback {
    text-align: center;
    margin-top: 4px;
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--accent-text-color);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* Top and Bottom Social Sharing */
.blog-social-share-top {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    text-align: center;
}

.blog-social-share-bottom {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

/* Responsive author bio */
@media (max-width: 768px) {
    .author-bio-container {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .author-bio-avatar {
        width: 45px;
        height: 45px;
        align-self: center;
    }

    .author-bio-info h4 {
        font-size: 1rem;
    }

    .author-bio-info p {
        font-size: 0.9rem;
    }
}

/* Responsive author section */
@media (max-width: 768px) {
    .blog-author-section {
        margin: 35px 0;
        padding: 25px;
    }

    .author-section-container {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .author-section-avatar {
        width: 70px;
        height: 70px;
        align-self: center;
    }

    .author-section-info h3 {
        font-size: 1.5rem;
    }

    .author-section-info p {
        font-size: 1rem;
    }
}

/* Responsive navigation */
@media (max-width: 768px) {
    .blog-post-navigation {
        margin: 20px 0 15px 0;
        padding: 8px;
    }
    
    .blog-post-navigation .nav-container {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .blog-post-navigation .nav-item.nav-prev,
    .blog-post-navigation .nav-item.nav-next {
        justify-content: center;
    }
    
    .blog-post-navigation .nav-link {
        min-width: auto;
        width: 100%;
        padding: 8px 12px;
    }
}

/* Related Posts Section */
.related-posts-section {
    margin: 40px 0;
    padding: 25px 0;
    border-top: 1px solid var(--border-color);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.related-posts-section h3 {
    margin: 0 0 20px 0;
    font-size: 1.4rem;
    color: var(--text-color);
    font-weight: 600;
    text-align: center;
}

.related-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Override blog post card display when inside related posts grid */
.related-posts-grid .blog-post-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important;
    min-height: 0 !important;
    grid-column: span 1 !important; /* Force single column span */
}

/* Ensure grid layout is applied */
.related-posts-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

/* Force related posts to be small cards like the main blog layout */
.related-posts-grid .blog-post-card {
    grid-column: span 1 !important;
    min-height: 300px !important;
}

.related-posts-grid .blog-post-card .post-image-container {
    height: 160px !important;
}

.related-posts-grid .blog-post-card .post-content {
    padding: 16px !important;
}

.related-posts-grid .blog-post-card .post-title {
    font-size: 1.1rem !important;
    margin-bottom: 12px !important;
}

.related-posts-grid .blog-post-card .post-meta {
    font-size: 0.8rem !important;
    padding-top: 12px !important;
}

.related-post-card {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.related-post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-color: var(--highlight-color);
}

.related-post-link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.related-post-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.related-post-card:hover .related-post-image {
    transform: scale(1.05);
}

.related-post-content {
    padding: 20px;
}

.related-post-title {
    margin: 0 0 10px 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color);
    line-height: 1.4;
    transition: color 0.3s ease;
}

.related-post-card:hover .related-post-title {
    color: var(--highlight-color);
}

.related-post-excerpt {
    margin: 0 0 15px 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-post-date {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 500;
}

/* Responsive Design for New Elements */
@media (max-width: 992px) {
    .related-posts-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 18px;
    }
}

@media (max-width: 768px) {
    .author-container {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .author-avatar {
        width: 60px;
        height: 60px;
    }

    .author-info h4 {
        font-size: 1.1rem;
    }

    .related-posts-grid {
        grid-template-columns: 1fr !important;
        gap: 15px;
        max-width: 100%;
    }

    .related-posts-section {
        margin: 30px 0;
        padding: 20px 0;
    }

    .related-posts-section h3 {
        margin: 0 0 15px 0;
        font-size: 1.3rem;
    }

    .related-post-content {
        padding: 12px;
    }

    .related-post-title {
        font-size: 1rem;
    }

    .blog-social-share-top,
    .blog-social-share-bottom {
        margin: 20px 0;
        padding: 15px 0;
    }
}

/* Author Image Upload Styles */
.blog-author-image-upload {
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    padding: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--bg-color);
    min-height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.blog-author-image-upload:hover {
    border-color: var(--highlight-color);
    background: rgba(45, 112, 150, 0.05);
}

.blog-author-image-upload-icon {
    font-size: 1.5rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.blog-author-image-upload-text {
    font-weight: 500;
    color: var(--text-color);
    margin-bottom: 3px;
    font-size: 0.9rem;
}

.blog-author-image-upload-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.blog-author-image-preview {
    text-align: center;
    padding: 10px;
    background: var(--secondary-color);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.blog-author-image-preview img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 10px;
    border: 3px solid var(--border-color);
}

.blog-author-image-remove {
    color: var(--accent-text-color);
    cursor: pointer;
    font-size: 0.9rem;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.blog-author-image-remove:hover {
    color: var(--highlight-color);
} 

/* Pinned/Featured Post Styles */
.blog-post-card.pinned {
    position: relative;
    border: 2px solid var(--highlight-color);
    box-shadow: 0 4px 20px rgba(45, 112, 150, 0.3);
}

/* Remove the old ::before pseudo-element to prevent duplicate pinned badges */
/* .blog-post-card.pinned::before {
    content: '📌 PINNED';
    position: absolute;
    top: -10px;
    left: 20px;
    background: var(--highlight-color);
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
} */

.blog-post-card.pinned .post-category {
    color: var(--highlight-color);
}

.blog-post-card.pinned .post-category::after {
    background: var(--highlight-color);
}

/* Featured post indicator - REMOVED to prevent doubling up with new badge system */
.blog-post-card.featured {
    position: relative;
}

/* Remove the old ::after pseudo-element to prevent badge doubling */
/* .blog-post-card.featured::after {
    content: '⭐ FEATURED';
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 193, 7, 0.9);
    color: #333;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 600;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
} */ 

/* Status Badges */
.post-status-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 10;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.pinned-badge {
    background: linear-gradient(135deg, #ff4444, #cc3333);
    color: white;
    box-shadow: 0 2px 8px rgba(255, 68, 68, 0.3);
}

.featured-badge {
    background: linear-gradient(135deg, #ffaa00, #ff8800);
    color: white;
    box-shadow: 0 2px 8px rgba(255, 170, 0, 0.3);
}

/* Multiple badges positioning */
.blog-post-card .post-content {
    position: relative;
}

.blog-post-card .post-status-badge {
    position: absolute;
    top: 15px;
    right: 15px;
}

/* Position pinned badge first (rightmost), then featured badge to the left */
.blog-post-card .pinned-badge {
    right: 15px;
}

.blog-post-card .featured-badge {
    right: 85px; /* Position featured badge to the left of pinned badge */
}

/* If only featured badge (no pinned), position it on the right */
.blog-post-card:not(.pinned) .featured-badge {
    right: 15px;
}

/* Single Post Container */
.blog-post-card:not(.pinned) .featured-badge {
    display: none;
}

/* Author Management Styles */
#author-management-section {
    margin-top: 30px;
    padding: 20px;
    background: var(--secondary-color);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

/* Enhanced Author Edit Modal Styles */
.author-edit-modal-content {
    max-width: 700px !important;
    width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    background: linear-gradient(145deg, var(--secondary-color) 0%, rgba(26, 31, 36, 0.95) 100%);
    border: 1px solid rgba(44, 51, 58, 0.6);
    backdrop-filter: blur(10px);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.2),
        0 4px 16px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 30px;
    position: relative;
}

.author-edit-modal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--highlight-color), transparent);
    border-radius: 16px 16px 0 0;
}

.author-edit-modal-content h3 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 25px;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Author Avatar Section */
.author-avatar-section {
    margin-bottom: 25px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(45, 112, 150, 0.08) 0%, rgba(26, 31, 36, 0.9) 100%);
    border-radius: 12px;
    border: 1px solid rgba(45, 112, 150, 0.2);
    backdrop-filter: blur(10px);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.1),
        0 2px 8px rgba(0, 0, 0, 0.05);
}

.author-avatar-section label {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 15px;
    display: block;
}

.author-avatar-container {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 10px;
}

.author-avatar-preview {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(45, 112, 150, 0.3);
    background: var(--bg-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.author-avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.author-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(45, 112, 150, 0.1) 0%, rgba(26, 31, 36, 0.8) 100%);
    color: rgba(255, 255, 255, 0.6);
    font-size: 2rem;
}

.author-avatar-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.author-avatar-actions .button-small {
    padding: 10px 16px;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}

.author-avatar-actions .button-small:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(45, 112, 150, 0.2);
}

/* Enhanced Form Styling */
.author-edit-modal-content .blog-form-group {
    margin-bottom: 20px;
}

.author-edit-modal-content .blog-form-group label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 8px;
    display: block;
}

.author-edit-modal-content .blog-form-group input,
.author-edit-modal-content .blog-form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid rgba(44, 51, 58, 0.4);
    background: linear-gradient(135deg, rgba(26, 31, 36, 0.8) 0%, rgba(26, 31, 36, 0.9) 100%);
    color: var(--text-color);
    font-size: 1rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.author-edit-modal-content .blog-form-group input:focus,
.author-edit-modal-content .blog-form-group textarea:focus {
    outline: none;
    border-color: var(--highlight-color);
    box-shadow: 0 0 0 3px rgba(45, 112, 150, 0.2);
    background: linear-gradient(135deg, rgba(26, 31, 36, 0.9) 0%, rgba(26, 31, 36, 1) 100%);
}

.author-edit-modal-content .blog-form-group textarea {
    resize: vertical;
    min-height: 100px;
    line-height: 1.5;
}

.author-edit-modal-content .blog-form-group small {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    margin-top: 6px;
    display: block;
    line-height: 1.4;
}

/* Enhanced Modal Actions */
.author-edit-modal-content .modal-actions {
    display: flex;
    gap: 15px;
    justify-content: flex-end;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(44, 51, 58, 0.4);
}

.author-edit-modal-content .modal-actions button {
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
    min-width: 120px;
}

.author-edit-modal-content .modal-actions button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Responsive Design */
@media (max-width: 768px) {
    .author-edit-modal-content {
        width: 95vw;
        padding: 20px;
        margin: 10px;
    }
    
    .author-edit-modal-content h3 {
        font-size: 1.5rem;
        margin-bottom: 20px;
    }
    
    .author-avatar-container {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .author-avatar-preview {
        width: 80px;
        height: 80px;
        align-self: center;
    }
    
    .author-avatar-actions {
        flex-direction: row;
        justify-content: center;
    }
    
    .author-edit-modal-content .modal-actions {
        flex-direction: column;
        gap: 10px;
    }
    
    .author-edit-modal-content .modal-actions button {
        width: 100%;
    }
}

#author-management-section .section-header {
    margin-bottom: 20px;
}

#author-management-section .section-header h3 {
    color: var(--accent-text-color);
    margin-bottom: 5px;
}

#author-management-section .section-header p {
    color: var(--text-muted);
    font-size: 0.9rem;
}

#authors-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

#authors-table th,
#authors-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.85rem;
}

#authors-table th {
    background-color: rgba(255, 255, 255, 0.05);
    font-weight: 600;
    color: var(--accent-text-color);
}

#authors-table tr:hover {
    background-color: rgba(255, 255, 255, 0.02);
}

.author-name {
    font-weight: 600;
    color: var(--accent-text-color);
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.author-bio {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-color);
}

.author-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.author-actions .button-small {
    padding: 6px 12px;
    font-size: 0.8rem;
    margin: 0;
}

#authors-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

#authors-empty-state h3 {
    margin-bottom: 10px;
    color: var(--text-color);
}

#authors-loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--text-muted);
}

#authors-loading-spinner i {
    margin-bottom: 10px;
    font-size: 2rem;
}

/* Blog Post Options Styling */
.blog-post-options {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 8px;
}

.blog-option-item {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background-color: rgba(255, 255, 255, 0.02);
    transition: all 0.2s ease;
}

.blog-option-item:hover {
    border-color: var(--highlight-color);
    background-color: rgba(45, 112, 150, 0.1);
}

.blog-option-item input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-color);
    border-radius: 3px;
    background-color: rgba(255, 255, 255, 0.05);
    position: relative;
    margin: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: none;
    flex-shrink: 0;
}

.blog-option-item input[type="checkbox"]:checked {
    background-color: var(--highlight-color);
    border-color: var(--highlight-color);
}

.blog-option-item input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -60%) rotate(45deg);
}

.blog-option-item input[type="checkbox"]:focus {
    outline: none;
    border-color: var(--highlight-color); 
    box-shadow: 0 0 0 2px rgba(45, 112, 150, 0.4);
}

.blog-option-item input[type="checkbox"]:hover:not(:checked) {
    border-color: var(--highlight-color);
    background-color: rgba(255, 255, 255, 0.15);
}

.blog-option-item span {
    color: var(--text-color);
    font-weight: 500;
    cursor: pointer;
}

.blog-option-item small {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    font-weight: normal;
}

.blog-option-item input[type="checkbox"]:checked + span {
    color: var(--text-color);
    font-weight: 600;
}

/* Blog Sub-tabs Styling */
.blog-sub-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 25px;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--secondary-color);
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}

.blog-sub-tab {
    flex: 1;
    padding: 15px 20px;
    background-color: transparent;
    border: none;
    color: var(--text-color);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
    position: relative;
}

.blog-sub-tab:hover {
    background-color: rgba(45, 112, 150, 0.1);
    color: var(--accent-text-color);
}

.blog-sub-tab.active {
    background-color: var(--primary-color);
    color: white;
    border-bottom-color: var(--highlight-color);
}

.blog-sub-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--primary-color);
}

/* Blog Sub-content */
.blog-sub-content {
    display: none;
    animation: fadeIn 0.3s ease;
}

.blog-sub-content.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Author Management Title */
.author-management-title {
    color: white !important;
    font-weight: 600;
    margin: 0 0 8px 0;
}

/* Responsive Post Options */
@media (max-width: 768px) {
    .blog-post-options {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .blog-option-item {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 480px) {
    .blog-post-options {
        gap: 8px;
    }
    
    .blog-option-item {
        padding: 6px 10px;
    }
    
    .blog-option-item span {
        font-size: 0.9rem;
    }
    
    .blog-option-item small {
        font-size: 0.75rem;
    }
}

.blog-form-group small {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    line-height: 1.3;
    margin-top: 4px;
    display: block;
}