/* Blog Enhancement CSS - Matching Main Site Design */

/* Override default body and background colors */
body.u-body {
    background-color: #f4f4f4 !important;
    font-family: 'Roboto', 'Open Sans', sans-serif !important;
    color: #333 !important;
}

/* Header styling to match main site */
.u-header {
    background-color: #2c3e50 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
}

/* Header logo and navigation styling */
.u-header .u-logo-image {
    filter: brightness(0) invert(1) !important; /* Make logo white */
}

/* Main content area styling */
.u-section-1 {
    background-color: #f4f4f4 !important;
    padding: 60px 0 !important;
}

.u-section-1 .u-sheet-1 {
    background-color: transparent !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

/* Blog post cards styling */
.u-repeater-1 .u-container-layout {
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
    border: 1px solid #e1e5e9 !important;
    overflow: hidden !important;
}

.u-repeater-1 .u-container-layout:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px rgba(113, 171, 218, 0.2) !important;
    border-color: #71abda !important;
}

/* Blog post titles */
.u-repeater-1 .u-text-1,
.u-repeater-1 .u-text-3,
.u-repeater-1 .u-text-5 {
    color: #2c3e50 !important;
    font-weight: 600 !important;
    font-size: 1.25rem !important;
    line-height: 1.4 !important;
    margin-bottom: 12px !important;
}

/* Blog post content text */
.u-repeater-1 .u-text-2,
.u-repeater-1 .u-text-4,
.u-repeater-1 .u-text-6 {
    color: #666 !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    margin-bottom: 16px !important;
}

/* Blog post images */
.u-repeater-1 .u-image {
    border-radius: 8px !important;
    overflow: hidden !important;
    transition: transform 0.3s ease !important;
}

.u-repeater-1 .u-container-layout:hover .u-image {
    transform: scale(1.02) !important;
}

/* Read more buttons */
.u-repeater-1 .u-btn {
    background: linear-gradient(135deg, #71abda, #5a9bc4) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 24px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.u-repeater-1 .u-btn:hover {
    background: linear-gradient(135deg, #5a9bc4, #4a8bb0) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(113, 171, 218, 0.3) !important;
}

.u-repeater-1 .u-btn:active {
    transform: translateY(0) !important;
}

/* Add icon to read more buttons */
.u-repeater-1 .u-btn::after {
    content: '→' !important;
    margin-left: 4px !important;
    transition: transform 0.3s ease !important;
}

.u-repeater-1 .u-btn:hover::after {
    transform: translateX(4px) !important;
}

/* Individual Blog Post Detail Page Styling */
#sec-b03b {
    background-color: #f4f4f4 !important;
    padding: 80px 0 !important;
}

#sec-b03b .u-sheet-1 {
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
    padding: 48px !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    border: 1px solid #e1e5e9 !important;
}

/* Blog post detail title */
#sec-b03b .u-text-1 {
    color: #2c3e50 !important;
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin-bottom: 24px !important;
    text-align: center !important;
    position: relative !important;
}

#sec-b03b .u-text-1::after {
    content: '' !important;
    display: block !important;
    width: 80px !important;
    height: 4px !important;
    background: linear-gradient(135deg, #71abda, #5a9bc4) !important;
    margin: 16px auto 0 !important;
    border-radius: 2px !important;
}

/* Blog post date */
#sec-b03b .u-text-2 {
    color: #666 !important;
    font-size: 0.9rem !important;
    text-align: center !important;
    margin-bottom: 32px !important;
    font-style: italic !important;
    padding-bottom: 24px !important;
    border-bottom: 1px solid #e1e5e9 !important;
}

/* Blog post content */
#sec-b03b .u-text-3 {
    color: #333 !important;
    font-size: 1.1rem !important;
    line-height: 1.8 !important;
    text-align: justify !important;
}

/* Blog post content styling for rich text */
#sec-b03b .u-text-3 h1,
#sec-b03b .u-text-3 h2,
#sec-b03b .u-text-3 h3,
#sec-b03b .u-text-3 h4,
#sec-b03b .u-text-3 h5,
#sec-b03b .u-text-3 h6 {
    color: #2c3e50 !important;
    font-weight: 600 !important;
    margin-top: 32px !important;
    margin-bottom: 16px !important;
}

#sec-b03b .u-text-3 h2 {
    font-size: 1.8rem !important;
    border-left: 4px solid #71abda !important;
    padding-left: 16px !important;
}

#sec-b03b .u-text-3 h3 {
    font-size: 1.5rem !important;
}

#sec-b03b .u-text-3 p {
    margin-bottom: 16px !important;
}

#sec-b03b .u-text-3 ul,
#sec-b03b .u-text-3 ol {
    margin-bottom: 16px !important;
    padding-left: 24px !important;
}

#sec-b03b .u-text-3 li {
    margin-bottom: 8px !important;
}

#sec-b03b .u-text-3 blockquote {
    background: #f8f9fa !important;
    border-left: 4px solid #71abda !important;
    padding: 16px 24px !important;
    margin: 24px 0 !important;
    font-style: italic !important;
    color: #555 !important;
}

#sec-b03b .u-text-3 code {
    background: #f8f9fa !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-family: 'Courier New', monospace !important;
    color: #e83e8c !important;
}

#sec-b03b .u-text-3 pre {
    background: #f8f9fa !important;
    padding: 16px !important;
    border-radius: 8px !important;
    overflow-x: auto !important;
    margin: 16px 0 !important;
    border: 1px solid #e1e5e9 !important;
}

#sec-b03b .u-text-3 img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
    margin: 16px 0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

#sec-b03b .u-text-3 a {
    color: #71abda !important;
    text-decoration: none !important;
    border-bottom: 1px solid transparent !important;
    transition: all 0.3s ease !important;
}

#sec-b03b .u-text-3 a:hover {
    color: #5a9bc4 !important;
    border-bottom-color: #5a9bc4 !important;
}

/* Responsive grid improvements */
@media (max-width: 992px) {
    .u-repeater-1 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
    
    #sec-b03b .u-sheet-1 {
        padding: 32px !important;
        margin: 0 20px !important;
    }
    
    #sec-b03b .u-text-1 {
        font-size: 2rem !important;
    }
}

@media (max-width: 768px) {
    .u-repeater-1 {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    
    .u-section-1 {
        padding: 40px 0 !important;
    }
    
    .u-section-1 .u-sheet-1 {
        padding: 0 20px !important;
    }
    
    #sec-b03b {
        padding: 40px 0 !important;
    }
    
    #sec-b03b .u-sheet-1 {
        padding: 24px !important;
        margin: 0 16px !important;
    }
    
    #sec-b03b .u-text-1 {
        font-size: 1.8rem !important;
    }
    
    #sec-b03b .u-text-3 {
        font-size: 1rem !important;
    }
}

/* Enhanced typography */
.u-repeater-1 h1, .u-repeater-1 h2, .u-repeater-1 h3, .u-repeater-1 h4, .u-repeater-1 h5, .u-repeater-1 h6 {
    font-family: 'Roboto', sans-serif !important;
    color: #2c3e50 !important;
}

/* Loading animation for images */
.u-repeater-1 .u-image img {
    transition: opacity 0.3s ease !important;
}

/* Focus states for accessibility */
.u-repeater-1 .u-btn:focus {
    outline: 2px solid #71abda !important;
    outline-offset: 2px !important;
}

/* Additional spacing and layout improvements */
.u-repeater-1 .u-container-layout {
    padding: 24px !important;
}

/* Ensure consistent spacing */
.u-repeater-1 .u-text-1:first-child,
.u-repeater-1 .u-text-3:first-child,
.u-repeater-1 .u-text-5:first-child {
    margin-top: 0 !important;
}

/* Page title styling if exists */
.u-section-1 h1:first-child {
    color: #2c3e50 !important;
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    margin-bottom: 48px !important;
    position: relative !important;
}

.u-section-1 h1:first-child::after {
    content: '' !important;
    display: block !important;
    width: 80px !important;
    height: 4px !important;
    background: linear-gradient(135deg, #71abda, #5a9bc4) !important;
    margin: 16px auto 0 !important;
    border-radius: 2px !important;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth !important;
}

/* ===== BLOG POST DETAIL PAGE STYLING ===== */

/* Blog Post Detail Container */
.blog-post-detail {
    background-color: #f4f4f4;
    min-height: 100vh;
    padding: 40px 0;
}

.blog-post-container {
    max-width: 900px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: 1px solid #e1e5e9;
}

/* Blog Post Header */
.blog-post-header {
    padding: 40px 50px 30px;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-bottom: 1px solid #e1e5e9;
}

.blog-post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
    font-size: 14px;
    color: #6c757d;
}

.blog-post-meta > span,
.blog-post-meta > time {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #f8f9fa;
    border-radius: 20px;
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

.blog-post-meta > span:hover,
.blog-post-meta > time:hover {
    background: #71abda;
    color: #ffffff;
    transform: translateY(-1px);
}

.blog-post-meta i {
    font-size: 12px;
    opacity: 0.8;
}

.blog-post-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2c3e50;
    line-height: 1.2;
    margin: 0 0 20px 0;
    font-family: 'PINAR-FD', 'Roboto', sans-serif;
}

.blog-post-excerpt {
    font-size: 1.1rem;
    color: #6c757d;
    line-height: 1.6;
    margin-bottom: 30px;
    padding: 20px;
    background: #f8f9fa;
    border-left: 4px solid #71abda;
    border-radius: 0 8px 8px 0;
    font-style: italic;
}

.blog-post-featured-image {
    margin-top: 30px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.blog-post-featured-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.blog-post-featured-image:hover img {
    transform: scale(1.02);
}

/* Blog Post Content */
.blog-post-content {
    padding: 50px;
    font-size: 1.1rem;
    line-height: 1.8;
    color: #333;
}

.blog-post-content h1,
.blog-post-content h2,
.blog-post-content h3,
.blog-post-content h4,
.blog-post-content h5,
.blog-post-content h6 {
    color: #2c3e50;
    font-family: 'PINAR-FD', 'Roboto', sans-serif;
    font-weight: 600;
    margin: 30px 0 15px 0;
    line-height: 1.3;
}

.blog-post-content h1 { font-size: 2.2rem; }
.blog-post-content h2 { 
    font-size: 1.8rem; 
    border-bottom: 2px solid #71abda;
    padding-bottom: 10px;
    margin-bottom: 20px;
}
.blog-post-content h3 { font-size: 1.5rem; }
.blog-post-content h4 { font-size: 1.3rem; }
.blog-post-content h5 { font-size: 1.1rem; }
.blog-post-content h6 { font-size: 1rem; }

.blog-post-content p {
    margin-bottom: 20px;
    text-align: justify;
}

.blog-post-content ul,
.blog-post-content ol {
    margin: 20px 0;
    padding-left: 30px;
}

.blog-post-content li {
    margin-bottom: 8px;
    line-height: 1.6;
}

.blog-post-content blockquote {
    margin: 30px 0;
    padding: 20px 30px;
    background: #f8f9fa;
    border-left: 4px solid #71abda;
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: #495057;
}

.blog-post-content code {
    background: #f8f9fa;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    color: #e83e8c;
}

.blog-post-content pre {
    background: #2d3748;
    color: #e2e8f0;
    padding: 20px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 20px 0;
}

.blog-post-content pre code {
    background: none;
    color: inherit;
    padding: 0;
}

.blog-post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 20px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.blog-post-content a {
    color: #71abda;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}

.blog-post-content a:hover {
    color: #2c3e50;
    border-bottom-color: #71abda;
}

/* Blog Post Footer */
.blog-post-footer {
    padding: 30px 50px 40px;
    background: #f8f9fa;
    border-top: 1px solid #e1e5e9;
}

.blog-post-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;
    font-size: 14px;
}

.blog-post-tags i {
    color: #71abda;
    margin-right: 5px;
}

.tags-label {
    font-weight: 600;
    color: #495057;
}

.blog-tag {
    background: #71abda;
    color: #ffffff;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.blog-tag:hover {
    background: #2c3e50;
    transform: translateY(-1px);
}

.blog-post-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.btn-back-to-blog {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #2c3e50;
    color: #ffffff;
    text-decoration: none;
    border-radius: 25px;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 2px solid #2c3e50;
}

.btn-back-to-blog:hover {
    background: transparent;
    color: #2c3e50;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(44, 62, 80, 0.2);
}

.blog-post-share {
    display: flex;
    align-items: center;
    gap: 15px;
}

.share-label {
    font-weight: 600;
    color: #495057;
    font-size: 14px;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-decoration: none;
    color: #ffffff;
    transition: all 0.3s ease;
    font-size: 16px;
}

.share-btn.twitter {
    background: #1da1f2;
}

.share-btn.facebook {
    background: #4267b2;
}

.share-btn.linkedin {
    background: #0077b5;
}

.share-btn:hover {
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* Responsive Design for Blog Post Detail */
@media (max-width: 768px) {
    .blog-post-container {
        margin: 0 20px;
        border-radius: 12px;
    }
    
    .blog-post-header,
    .blog-post-content,
    .blog-post-footer {
        padding: 30px 25px;
    }
    
    .blog-post-title {
        font-size: 2rem;
    }
    
    .blog-post-meta {
        gap: 10px;
    }
    
    .blog-post-actions {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    
    .blog-post-share {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .blog-post-detail {
        padding: 20px 0;
    }
    
    .blog-post-container {
        margin: 0 10px;
    }
    
    .blog-post-header,
    .blog-post-content,
    .blog-post-footer {
        padding: 20px 15px;
    }
    
    .blog-post-title {
        font-size: 1.6rem;
    }
    
    .blog-post-content {
        font-size: 1rem;
    }
    
    .blog-post-meta {
        flex-direction: column;
        gap: 8px;
    }
}

/* Print Styles for Blog Post */
@media print {
    .blog-post-detail {
        background: #ffffff;
        padding: 0;
    }
    
    .blog-post-container {
        box-shadow: none;
        border: none;
        max-width: none;
    }
    
    .blog-post-footer,
    .blog-post-share,
    .btn-back-to-blog {
        display: none;
    }
    
    .blog-post-content a {
        color: #000000;
        text-decoration: underline;
    }
}

/* RTL Support for Persian/Farsi Language */
[dir="rtl"] body.u-body,
html[lang="fa"] body.u-body,
html[lang="fa-IR"] body.u-body {
    font-family: 'PINAR-FD', 'Tahoma', 'Arial', sans-serif !important;
    direction: rtl !important;
    text-align: right !important;
}

/* RTL Blog Post Cards */
[dir="rtl"] .u-repeater-1 .u-container-layout,
html[lang="fa"] .u-repeater-1 .u-container-layout,
html[lang="fa-IR"] .u-repeater-1 .u-container-layout {
    text-align: right !important;
    direction: rtl !important;
}

/* RTL Blog Post Titles */
[dir="rtl"] .u-blog-control.u-text h4,
[dir="rtl"] .u-blog-control.u-text h4 a,
html[lang="fa"] .u-blog-control.u-text h4,
html[lang="fa"] .u-blog-control.u-text h4 a,
html[lang="fa-IR"] .u-blog-control.u-text h4,
html[lang="fa-IR"] .u-blog-control.u-text h4 a {
    text-align: right !important;
    direction: rtl !important;
    font-family: 'PINAR-FD', 'Tahoma', 'Arial', sans-serif !important;
}

/* RTL Blog Post Content */
[dir="rtl"] .u-blog-control.u-post-content,
html[lang="fa"] .u-blog-control.u-post-content,
html[lang="fa-IR"] .u-blog-control.u-post-content {
    text-align: right !important;
    direction: rtl !important;
    font-family: 'PINAR-FD', 'Tahoma', 'Arial', sans-serif !important;
}

/* RTL Read More Buttons */
[dir="rtl"] .u-blog-control.u-btn,
html[lang="fa"] .u-blog-control.u-btn,
html[lang="fa-IR"] .u-blog-control.u-btn {
    text-align: center !important;
    font-family: 'PINAR-FD', 'Tahoma', 'Arial', sans-serif !important;
    float: left !important; /* Float left in RTL means right visually */
}

/* RTL Blog Post Detail Page */
[dir="rtl"] .blog-post-detail,
html[lang="fa"] .blog-post-detail,
html[lang="fa-IR"] .blog-post-detail {
    direction: rtl !important;
    text-align: right !important;
}

/* RTL Blog Post Header */
[dir="rtl"] .blog-post-header,
html[lang="fa"] .blog-post-header,
html[lang="fa-IR"] .blog-post-header {
    text-align: right !important;
    direction: rtl !important;
}

/* RTL Blog Post Title */
[dir="rtl"] .blog-post-title,
html[lang="fa"] .blog-post-title,
html[lang="fa-IR"] .blog-post-title {
    text-align: right !important;
    direction: rtl !important;
    font-family: 'PINAR-FD', 'Tahoma', 'Arial', sans-serif !important;
}

/* RTL Blog Post Meta */
[dir="rtl"] .blog-post-meta,
html[lang="fa"] .blog-post-meta,
html[lang="fa-IR"] .blog-post-meta {
    text-align: right !important;
    direction: rtl !important;
    font-family: 'PINAR-FD', 'Tahoma', 'Arial', sans-serif !important;
}

[dir="rtl"] .blog-post-meta span,
html[lang="fa"] .blog-post-meta span,
html[lang="fa-IR"] .blog-post-meta span {
    margin-left: 0 !important;
    margin-right: 15px !important;
}

[dir="rtl"] .blog-post-meta span:last-child,
html[lang="fa"] .blog-post-meta span:last-child,
html[lang="fa-IR"] .blog-post-meta span:last-child {
    margin-right: 0 !important;
}

/* RTL Blog Post Content */
[dir="rtl"] .blog-post-content,
html[lang="fa"] .blog-post-content,
html[lang="fa-IR"] .blog-post-content {
    text-align: right !important;
    direction: rtl !important;
    font-family: 'PINAR-FD', 'Tahoma', 'Arial', sans-serif !important;
}

[dir="rtl"] .blog-post-content h1,
[dir="rtl"] .blog-post-content h2,
[dir="rtl"] .blog-post-content h3,
[dir="rtl"] .blog-post-content h4,
[dir="rtl"] .blog-post-content h5,
[dir="rtl"] .blog-post-content h6,
html[lang="fa"] .blog-post-content h1,
html[lang="fa"] .blog-post-content h2,
html[lang="fa"] .blog-post-content h3,
html[lang="fa"] .blog-post-content h4,
html[lang="fa"] .blog-post-content h5,
html[lang="fa"] .blog-post-content h6,
html[lang="fa-IR"] .blog-post-content h1,
html[lang="fa-IR"] .blog-post-content h2,
html[lang="fa-IR"] .blog-post-content h3,
html[lang="fa-IR"] .blog-post-content h4,
html[lang="fa-IR"] .blog-post-content h5,
html[lang="fa-IR"] .blog-post-content h6 {
    text-align: right !important;
    direction: rtl !important;
    font-family: 'PINAR-FD', 'Tahoma', 'Arial', sans-serif !important;
}

[dir="rtl"] .blog-post-content p,
[dir="rtl"] .blog-post-content li,
html[lang="fa"] .blog-post-content p,
html[lang="fa"] .blog-post-content li,
html[lang="fa-IR"] .blog-post-content p,
html[lang="fa-IR"] .blog-post-content li {
    text-align: right !important;
    direction: rtl !important;
    font-family: 'PINAR-FD', 'Tahoma', 'Arial', sans-serif !important;
}

/* RTL Blog Post Footer */
[dir="rtl"] .blog-post-footer,
html[lang="fa"] .blog-post-footer,
html[lang="fa-IR"] .blog-post-footer {
    text-align: right !important;
    direction: rtl !important;
}

/* RTL Blog Post Actions */
[dir="rtl"] .blog-post-actions,
html[lang="fa"] .blog-post-actions,
html[lang="fa-IR"] .blog-post-actions {
    flex-direction: row-reverse !important;
}

[dir="rtl"] .btn-back-to-blog,
html[lang="fa"] .btn-back-to-blog,
html[lang="fa-IR"] .btn-back-to-blog {
    font-family: 'PINAR-FD', 'Tahoma', 'Arial', sans-serif !important;
}

[dir="rtl"] .btn-back-to-blog i,
html[lang="fa"] .btn-back-to-blog i,
html[lang="fa-IR"] .btn-back-to-blog i {
    margin-left: 8px !important;
    margin-right: 0 !important;
    transform: scaleX(-1) !important; /* Flip arrow for RTL */
}

/* RTL Blog Post Tags */
[dir="rtl"] .blog-post-tags,
html[lang="fa"] .blog-post-tags,
html[lang="fa-IR"] .blog-post-tags {
    text-align: right !important;
    direction: rtl !important;
    font-family: 'PINAR-FD', 'Tahoma', 'Arial', sans-serif !important;
}

[dir="rtl"] .blog-post-tags i,
html[lang="fa"] .blog-post-tags i,
html[lang="fa-IR"] .blog-post-tags i {
    margin-left: 8px !important;
    margin-right: 0 !important;
}

/* RTL Social Share */
[dir="rtl"] .blog-post-share,
html[lang="fa"] .blog-post-share,
html[lang="fa-IR"] .blog-post-share {
    direction: rtl !important;
}

[dir="rtl"] .share-label,
html[lang="fa"] .share-label,
html[lang="fa-IR"] .share-label {
    font-family: 'PINAR-FD', 'Tahoma', 'Arial', sans-serif !important;
    margin-left: 10px !important;
    margin-right: 0 !important;
}

/* RTL Navigation and Header */
[dir="rtl"] .u-header,
html[lang="fa"] .u-header,
html[lang="fa-IR"] .u-header {
    direction: rtl !important;
}

[dir="rtl"] .u-nav,
html[lang="fa"] .u-nav,
html[lang="fa-IR"] .u-nav {
    direction: rtl !important;
}

/* RTL Responsive adjustments */
@media (max-width: 768px) {
    [dir="rtl"] .blog-post-actions,
    html[lang="fa"] .blog-post-actions,
    html[lang="fa-IR"] .blog-post-actions {
        flex-direction: column !important;
        align-items: flex-end !important;
    }
    
    [dir="rtl"] .btn-back-to-blog,
    html[lang="fa"] .btn-back-to-blog,
    html[lang="fa-IR"] .btn-back-to-blog {
        margin-bottom: 15px !important;
        align-self: flex-end !important;
    }
    
    [dir="rtl"] .blog-post-share,
    html[lang="fa"] .blog-post-share,
    html[lang="fa-IR"] .blog-post-share {
        justify-content: flex-end !important;
    }
}

/* Print styles */
@media print {
    .u-repeater-1 .u-container-layout {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
    
    .u-repeater-1 .u-btn {
        display: none !important;
    }
    
    #sec-b03b .u-sheet-1 {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 20px !important;
    }
}

/* Additional overrides for HTML file content display */
/* Force full width for all HTML content containers - AGGRESSIVE OVERRIDES */
#sec-b03b .u-text-3,
#sec-b03b .u-text-3 * {
    max-width: 100% !important;
    width: auto !important;
    box-sizing: border-box !important;
}

/* Override any container elements within HTML content - MORE SPECIFIC */
#sec-b03b .u-text-3 div,
#sec-b03b .u-text-3 section,
#sec-b03b .u-text-3 article,
#sec-b03b .u-text-3 main,
#sec-b03b .u-text-3 .container,
#sec-b03b .u-text-3 .wrapper,
#sec-b03b .u-text-3 .content,
#sec-b03b .u-text-3 .content-wrapper,
#sec-b03b .u-text-3 .row,
#sec-b03b .u-text-3 .container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: none !important;
    display: block !important;
}

/* Override Bootstrap and other framework containers - COMPREHENSIVE */
#sec-b03b .u-text-3 .col,
#sec-b03b .u-text-3 .col-1,
#sec-b03b .u-text-3 .col-2,
#sec-b03b .u-text-3 .col-3,
#sec-b03b .u-text-3 .col-4,
#sec-b03b .u-text-3 .col-5,
#sec-b03b .u-text-3 .col-6,
#sec-b03b .u-text-3 .col-7,
#sec-b03b .u-text-3 .col-8,
#sec-b03b .u-text-3 .col-9,
#sec-b03b .u-text-3 .col-10,
#sec-b03b .u-text-3 .col-11,
#sec-b03b .u-text-3 .col-12,
#sec-b03b .u-text-3 .col-sm-1,
#sec-b03b .u-text-3 .col-sm-2,
#sec-b03b .u-text-3 .col-sm-3,
#sec-b03b .u-text-3 .col-sm-4,
#sec-b03b .u-text-3 .col-sm-5,
#sec-b03b .u-text-3 .col-sm-6,
#sec-b03b .u-text-3 .col-sm-7,
#sec-b03b .u-text-3 .col-sm-8,
#sec-b03b .u-text-3 .col-sm-9,
#sec-b03b .u-text-3 .col-sm-10,
#sec-b03b .u-text-3 .col-sm-11,
#sec-b03b .u-text-3 .col-sm-12,
#sec-b03b .u-text-3 .col-md-1,
#sec-b03b .u-text-3 .col-md-2,
#sec-b03b .u-text-3 .col-md-3,
#sec-b03b .u-text-3 .col-md-4,
#sec-b03b .u-text-3 .col-md-5,
#sec-b03b .u-text-3 .col-md-6,
#sec-b03b .u-text-3 .col-md-7,
#sec-b03b .u-text-3 .col-md-8,
#sec-b03b .u-text-3 .col-md-9,
#sec-b03b .u-text-3 .col-md-10,
#sec-b03b .u-text-3 .col-md-11,
#sec-b03b .u-text-3 .col-md-12,
#sec-b03b .u-text-3 .col-lg-1,
#sec-b03b .u-text-3 .col-lg-2,
#sec-b03b .u-text-3 .col-lg-3,
#sec-b03b .u-text-3 .col-lg-4,
#sec-b03b .u-text-3 .col-lg-5,
#sec-b03b .u-text-3 .col-lg-6,
#sec-b03b .u-text-3 .col-lg-7,
#sec-b03b .u-text-3 .col-lg-8,
#sec-b03b .u-text-3 .col-lg-9,
#sec-b03b .u-text-3 .col-lg-10,
#sec-b03b .u-text-3 .col-lg-11,
#sec-b03b .u-text-3 .col-lg-12 {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Override inline styles for width - ULTRA SPECIFIC */
#sec-b03b .u-text-3 [style*="width"],
#sec-b03b .u-text-3 [style*="Width"],
#sec-b03b .u-text-3 [style*="WIDTH"] {
    width: 100% !important;
    max-width: 100% !important;
}

#sec-b03b .u-text-3 [style*="max-width"],
#sec-b03b .u-text-3 [style*="Max-Width"],
#sec-b03b .u-text-3 [style*="MAX-WIDTH"] {
    max-width: 100% !important;
}

/* Override common HTML file patterns */
#sec-b03b .u-text-3 table[style*="width"],
#sec-b03b .u-text-3 div[style*="width"],
#sec-b03b .u-text-3 p[style*="width"] {
    width: 100% !important;
    max-width: 100% !important;
}

/* Image sizing fixes for HTML content - REDUCED SIZES */
#sec-b03b .u-text-3 img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    margin: 15px auto !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    max-height: 300px !important;
    object-fit: contain !important;
}

/* Featured images within HTML content - SMALLER */
#sec-b03b .u-text-3 img[src*="featured"],
#sec-b03b .u-text-3 .featured-image img,
#sec-b03b .u-text-3 .blog-image img {
    max-height: 250px !important;
    object-fit: cover !important;
    width: 100% !important;
}

/* Large images that need to be constrained - MUCH SMALLER */
#sec-b03b .u-text-3 img[width],
#sec-b03b .u-text-3 img[height] {
    max-width: 100% !important;
    max-height: 200px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Inline images should not break text flow - SMALLER */
#sec-b03b .u-text-3 p img,
#sec-b03b .u-text-3 span img {
    display: inline-block !important;
    max-width: 120px !important;
    max-height: 120px !important;
    vertical-align: middle !important;
    margin: 0 8px !important;
}

/* Image containers and figures - CONSTRAINED */
#sec-b03b .u-text-3 figure,
#sec-b03b .u-text-3 .image-container,
#sec-b03b .u-text-3 .img-container {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    margin: 15px 0 !important;
}

#sec-b03b .u-text-3 figure img,
#sec-b03b .u-text-3 .image-container img,
#sec-b03b .u-text-3 .img-container img {
    max-width: 100% !important;
    max-height: 250px !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Override any large image dimensions from HTML files */
#sec-b03b .u-text-3 img[style*="height"],
#sec-b03b .u-text-3 img[style*="Height"],
#sec-b03b .u-text-3 img[style*="HEIGHT"] {
    max-height: 200px !important;
    height: auto !important;
}

/* Ensure very large images are scaled down */
#sec-b03b .u-text-3 img[width="800"],
#sec-b03b .u-text-3 img[width="900"],
#sec-b03b .u-text-3 img[width="1000"],
#sec-b03b .u-text-3 img[width="1200"] {
    max-width: 100% !important;
    max-height: 180px !important;
    width: auto !important;
    height: auto !important;
}

/* Tables in HTML content */
#sec-b03b .u-text-3 table {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    display: block !important;
    white-space: nowrap !important;
}

/* Responsive media elements */
#sec-b03b .u-text-3 iframe,
#sec-b03b .u-text-3 video,
#sec-b03b .u-text-3 embed,
#sec-b03b .u-text-3 object {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
}

/* Override any fixed positioning that might cause issues */
#sec-b03b .u-text-3 [style*="position: fixed"],
#sec-b03b .u-text-3 [style*="position: absolute"] {
    position: relative !important;
}

/* Ensure text content flows properly */
#sec-b03b .u-text-3 p,
#sec-b03b .u-text-3 div,
#sec-b03b .u-text-3 span {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* BLOG POST DETAIL PAGE SPECIFIC FIXES */
/* Target the blog-post-content class specifically */
.blog-post-content,
.blog-post-content * {
    max-width: 100% !important;
    width: auto !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Override any container elements within blog post content */
.blog-post-content div,
.blog-post-content section,
.blog-post-content article,
.blog-post-content main,
.blog-post-content .container,
.blog-post-content .wrapper,
.blog-post-content .content,
.blog-post-content .content-wrapper,
.blog-post-content .row,
.blog-post-content .container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: none !important;
    display: block !important;
    flex: none !important;
}

/* Bootstrap Grid Overrides for Blog Post Content */
.blog-post-content .col,
.blog-post-content .col-1,
.blog-post-content .col-2,
.blog-post-content .col-3,
.blog-post-content .col-4,
.blog-post-content .col-5,
.blog-post-content .col-6,
.blog-post-content .col-7,
.blog-post-content .col-8,
.blog-post-content .col-9,
.blog-post-content .col-10,
.blog-post-content .col-11,
.blog-post-content .col-12,
.blog-post-content .col-sm-1,
.blog-post-content .col-sm-2,
.blog-post-content .col-sm-3,
.blog-post-content .col-sm-4,
.blog-post-content .col-sm-5,
.blog-post-content .col-sm-6,
.blog-post-content .col-sm-7,
.blog-post-content .col-sm-8,
.blog-post-content .col-sm-9,
.blog-post-content .col-sm-10,
.blog-post-content .col-sm-11,
.blog-post-content .col-sm-12,
.blog-post-content .col-md-1,
.blog-post-content .col-md-2,
.blog-post-content .col-md-3,
.blog-post-content .col-md-4,
.blog-post-content .col-md-5,
.blog-post-content .col-md-6,
.blog-post-content .col-md-7,
.blog-post-content .col-md-8,
.blog-post-content .col-md-9,
.blog-post-content .col-md-10,
.blog-post-content .col-md-11,
.blog-post-content .col-md-12,
.blog-post-content .col-lg-1,
.blog-post-content .col-lg-2,
.blog-post-content .col-lg-3,
.blog-post-content .col-lg-4,
.blog-post-content .col-lg-5,
.blog-post-content .col-lg-6,
.blog-post-content .col-lg-7,
.blog-post-content .col-lg-8,
.blog-post-content .col-lg-9,
.blog-post-content .col-lg-10,
.blog-post-content .col-lg-11,
.blog-post-content .col-lg-12 {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    margin: 0 !important;
    padding: 10px !important;
}

/* Inline Style Overrides for Blog Post Content */
.blog-post-content [style*="width"],
.blog-post-content [style*="Width"],
.blog-post-content [style*="WIDTH"],
.blog-post-content [style*="max-width"],
.blog-post-content [style*="Max-Width"],
.blog-post-content [style*="MAX-WIDTH"] {
    width: 100% !important;
    max-width: 100% !important;
}

/* Image Size Fixes for Blog Post Content */
.blog-post-content img {
    max-width: 100% !important;
    max-height: 200px !important;
    height: auto !important;
    width: auto !important;
    object-fit: contain !important;
    margin: 10px 0 !important;
    display: block !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    border-radius: 4px !important;
}

/* Featured Images in Blog Post Content */
.blog-post-content .featured-image img,
.blog-post-content .hero-image img,
.blog-post-content .main-image img {
    max-height: 180px !important;
    width: 100% !important;
    object-fit: cover !important;
}

/* Large Images with Explicit Dimensions in Blog Post Content */
.blog-post-content img[width],
.blog-post-content img[height] {
    max-height: 150px !important;
    width: auto !important;
    height: auto !important;
}

/* Inline Images in Blog Post Content */
.blog-post-content p img,
.blog-post-content span img,
.blog-post-content div img {
    max-width: 100% !important;
    max-height: 120px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 5px !important;
}

/* Image Containers in Blog Post Content */
.blog-post-content figure,
.blog-post-content .image-container,
.blog-post-content .img-container {
    max-width: 100% !important;
    margin: 15px 0 !important;
    text-align: center !important;
}

.blog-post-content figure img,
.blog-post-content .image-container img,
.blog-post-content .img-container img {
    max-height: 180px !important;
    width: auto !important;
    margin: 0 !important;
}

/* Override Inline Height Styles for Blog Post Content */
.blog-post-content [style*="height"],
.blog-post-content [style*="Height"],
.blog-post-content [style*="HEIGHT"] {
    height: auto !important;
    max-height: 150px !important;
}

/* Specific overrides for very large images in Blog Post Content */
.blog-post-content img[style*="800px"],
.blog-post-content img[style*="900px"],
.blog-post-content img[style*="1000px"],
.blog-post-content img[style*="1200px"] {
    max-height: 120px !important;
    width: auto !important;
    height: auto !important;
}

/* Tables in Blog Post Content */
.blog-post-content table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
    overflow-x: auto !important;
    display: block !important;
    white-space: nowrap !important;
}

/* Responsive Design for Blog Post Content */
@media (max-width: 768px) {
    .blog-post-content img {
        max-height: 150px !important;
        margin: 8px 0 !important;
    }
    
    .blog-post-content .featured-image img {
        max-height: 120px !important;
    }
}

@media (max-width: 480px) {
    .blog-post-content img {
        max-height: 100px !important;
        margin: 5px 0 !important;
    }
}