@charset "utf-8";
/* CSS Document - v4.0.0 - Responsive & Enhanced UI/UX */

/* ==========================================================================
   Print Styles - بدون تغییر
   ========================================================================== */
@media print {
    .bx_left, .bx_right, .footer_contain_bg, .footer_contain, .footer, .content_bg, .main_menu, .header, .post_detail, .messages, .post_comments, .cmt_reply, .commentForm, .pagination, .page_cls, .post_cls {
        display: none !important; /* Use !important to ensure override */
    }
    #body { /* This ID is not in the provided HTML, assuming it wraps main content for print */
        display: block;
        width: 650px;
        margin: auto;
        margin-top: 5px;
        border: 2px solid #bbb;
        outline: 1px solid #333;
        padding: 15px;
        direction: rtl;
        font-family: Tahoma, arial, "Times New Roman", Times;
        cursor: default;
        font-size: 12px;
    }
    .date_title {
        font-size: 10px;
        padding-bottom: 10px;
        color: #444;
    }
    h2 a {
        font-family: "Times New Roman", Times, arial;
        font-size: 18px;
        color: #333;
        text-decoration: none;
        padding-bottom: 0px;
    }
    .cnt {
        font-size: 12px;
        color: #000;
        text-decoration: none;
        line-height: 18px;
    }
    #print .title h2 {
        font-family: "Times New Roman", Times, arial;
        margin-bottom: 0px;
        display: block;
        text-align: center;
        text-decoration: none;
        font-size: 17px;
        color: #333;
    }
    #print .title span {
        font-family: Tahoma, arial, "Times New Roman", Times;
        display: block;
        text-align: center;
        padding-top: 5px;
        padding-bottom: 10px;
        margin-bottom: 20px;
        text-decoration: none;
        border-bottom: 1px solid #333;
        font-size: 11px;
        color: #333;
    }
    a {
        text-decoration: none;
        padding: 5px;
    }
}

/* ==========================================================================
   Screen Styles - Responsive & Enhanced UI/UX
   ========================================================================== */
@media screen {
    #print { display: none; }

    /* Base Styles & Resets */
    *, *::before, *::after {
        box-sizing: border-box;
    }

    html {
        direction: rtl; /* Set default direction to RTL */
        scroll-behavior: smooth;
    }

    body {
        font-family: 'b nazanin', Tahoma, Verdana, sans-serif; /* Prioritize custom font */
        font-size: 15px; /* Base font size, will adjust */
        line-height: 1.8;
        color: #333;
        margin: 0;
        padding: 0;
        background: #f0f2f5; /* Softer background */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    p { margin-bottom: 1em; } /* More space for paragraphs */
    h1, h2, h3, h4, h5, h6 { margin: 0 0 0.8em 0; line-height: 1.3; } /* Adjusted heading margins */
    ul { margin: 0; padding: 0; list-style: none; } /* Reset list styles */
    img { border: none; max-width: 100%; height: auto; display: block; } /* Responsive images */
    a {
        color: #a16fb2; /* Accent color for links */
        text-decoration: none;
        transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
    }
    a:hover {
        color: #804b93; /* Darker accent on hover */
        text-decoration: none;
    }
    a:active { outline: none; }

    /* Custom Fonts */
    @font-face {
        font-family: 'b traffic';
        src: url('//cdn.bayan.ir/blog/templates/shared/fonts/BTraffic.eot?view'),
             url('//cdn.bayan.ir/blog/templates/shared/fonts/BTraffic.eot?view#iefix') format('embedded-opentype'),
             url('//cdn.bayan.ir/blog/templates/shared/fonts/BTraffic.woff?view') format('woff'),
             url('//cdn.bayan.ir/blog/templates/shared/fonts/BTraffic.ttf?view') format('truetype');
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: 'b nazanin';
        src: url('//cdn.bayan.ir/blog/templates/shared/fonts/BNazanin.eot?view'),
             url('//cdn.bayan.ir/blog/templates/shared/fonts/BNazanin.eot?view#iefix') format('embedded-opentype'),
             url('//cdn.bayan.ir/blog/templates/shared/fonts/BNazanin.woff?view') format('woff'),
             url('//cdn.bayan.ir/blog/templates/shared/fonts/BNazanin.ttf?view') format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    /* Utility */
    .clear { clear: both; }
    .align { text-align: right; } /* Default alignment for RTL */

    /* Scrollbar (keep existing) */
    ::-webkit-scrollbar { background: #eee; width: 12px; height: 12px; }
    ::-webkit-scrollbar-thumb { background: #a16fb2; border-radius: 6px; }
    ::-webkit-scrollbar-corner { background: #f0f2f5; }
    ::-webkit-scrollbar-track { background: #f0f2f5; border-radius: 6px; }
    ::-webkit-scrollbar-thumb:hover { background: #804b93; }
    ::-webkit-scrollbar-thumb:active { background: #603870; }


    /* ==========================================================================
       Wrapper
       ========================================================================== */
    #wrp {
        max-width: 1200px; /* Wider max-width for modern screens */
        width: 95%; /* Fluid width */
        margin: 20px auto; /* Centered with top/bottom margin */
        background: #fff;
        border-radius: 8px; /* Slightly rounded corners */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Softer shadow */
        overflow: hidden; /* Clear floats/contain child elements */
    }

    /* ==========================================================================
       Header
       ========================================================================== */
    #wrp .header {
        background: linear-gradient(to right, #a16fb2, #d0abdb); /* Gradient background */
        padding: 20px 0;
        text-align: center;
        border-radius: 8px 8px 0 0;
        position: relative;
    }

    #wrp .header .title {
        padding: 15px;
    }
    #wrp .header .title h1 {
        font-family: 'b traffic', Arial, Helvetica, sans-serif;
        font-size: 2.5em; /* Responsive font size */
        font-weight: bold;
        color: #fff;
        margin-bottom: 0.2em;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    }
    #wrp .header .title h1 a {
        color: #fff;
    }
    #wrp .header .title h1 a:hover {
        color: #f0f0f0;
    }
    #wrp .header .title .desc h2 {
        font-family: 'b nazanin', Arial, Helvetica, sans-serif;
        font-size: 1.1em;
        font-weight: normal;
        color: #f0f0f0;
        margin-top: 0;
    }

    /* Mini Icons in Header (not main menu) */
    #wrp .mini_icon {
        display: none; /* This was already hidden, keeping it */
    }

    /* Main Menu */
    #wrp .main_menu {
        background: #2d2d2d;
        border-bottom: 3px solid #444;
        min-height: 50px; /* Ensure height */
        display: flex; /* Use flexbox for menu */
        flex-wrap: wrap; /* Allow items to wrap */
        justify-content: space-between; /* Space out items */
        align-items: center;
        padding: 0 15px;
    }
    #wrp .main_menu .cnt ul {
        display: flex; /* Horizontal menu */
        flex-wrap: wrap;
        justify-content: center;
    }
    #wrp .main_menu .cnt li {
        margin: 0 5px;
        background: none; /* Remove separator */
    }
    #wrp .main_menu .cnt a {
        display: block;
        font-family: 'b traffic', Arial, Helvetica, sans-serif;
        font-size: 1.05em;
        color: #ccc;
        padding: 12px 15px;
        margin-top: 0;
        border-radius: 4px;
    }
    #wrp .main_menu .cnt a:hover {
        color: #fff;
        background: #a16fb2;
    }
    #wrp .main_menu .cnt a.selected {
        color: #fff;
        background: #a16fb2;
    }

    .mini-icons {
        display: flex; /* Align icons horizontally */
        margin-right: 10px; /* Space from menu */
    }
    .mini-icons ul {
        margin: 0;
        padding: 0;
        display: flex;
    }
    .mini-icons li {
        margin: 0 3px;
    }
    .mini-icons li a {
        display: block;
        width: 30px; /* Larger touch target */
        height: 30px;
        border-radius: 50%; /* Circle icons */
        background-color: #555;
        background-size: 60%;
        background-position: center;
        background-repeat: no-repeat;
        transition: background-color 0.3s ease;
    }
    .mini-icons li.ico-m-rss a { background-image: url(//cdn.bayan.ir/blog/templates/4048/ico-m-rss.png); }
    .mini-icons li.ico-m-bayan a { background-image: url(//cdn.bayan.ir/blog/templates/4048/ico-m-bayan.png); }
    .mini-icons li.ico-m-bayanbox a { background-image: url(//cdn.bayan.ir/blog/templates/4048/ico-m-bb.png); }
    .mini-icons li.ico-m-blog a { background-image: url(//cdn.bayan.ir/blog/templates/4048/ico-m-blog.png); }

    .mini-icons li.ico-m-rss a:hover { background-color: #ff9c00; }
    .mini-icons li.ico-m-bayan a:hover { background-color: #3aacd7; }
    .mini-icons li.ico-m-bayanbox a:hover { background-color: #eeeeee; }
    .mini-icons li.ico-m-blog a:hover { background-color: #eeeeee; }


    /* ==========================================================================
       Main Content Area - Flexbox Layout
       ========================================================================== */
    #wrp .box1 {
        display: flex;
        flex-direction: column; /* Default to column for mobile */
        padding: 15px;
        gap: 20px; /* Space between columns/rows */
    }

    /* Left Sidebar */
    #wrp .box1 .bx_left {
        width: 100%; /* Full width on mobile */
        order: 2; /* Sidebar below main content on mobile */
    }

    /* Center Content */
    #wrp .box1 .bx_center {
        width: 100%; /* Full width on mobile */
        order: 1; /* Main content above sidebar on mobile */
        margin-left: 0; /* Reset margin */
    }

    #wrp .box1 .bx_center .mod_center {
        width: 100%; /* Ensure it takes full width */
        float: none; /* Remove float */
    }

    /* Module Styles (for both left and center) */
    .mod_left, .mod_center .messages, .mod_center .post, .mod_center .comment_add_form {
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* Lighter shadow */
        margin-bottom: 20px;
        overflow: hidden; /* Contain content */
    }
    .mod_left .title {
        padding: 10px 15px;
        background: #f8f8f8; /* Light background for title */
        border-bottom: 1px solid #eee;
        font-family: 'b nazanin', Arial, Helvetica, sans-serif;
        font-size: 1.1em;
        color: #444;
        font-weight: bold;
        text-align: right;
    }
    .mod_left .title span {
        background: none; /* Remove specific background */
        padding-left: 0;
    }
    .mod_left .cnt {
        padding: 15px;
        background: #fff;
        box-shadow: none; /* Remove inner shadow */
    }

    /* Blog Info Module (mod_left_blank) */
    #wrp .box1 .bx_left .mod_left_blank {
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        margin-bottom: 20px;
        padding: 15px;
        text-align: center;
    }
    #wrp .box1 .bx_left .mod_left_blank .blogImage img {
        margin: 10px auto;
        border-radius: 4px;
        border: 1px solid #eee;
    }
    #wrp .box1 .bx_left .mod_left_blank .blog_description h4 {
        font-size: 0.95em;
        color: #555;
        margin: 10px 0;
        font-weight: normal;
        line-height: 1.6;
    }

    /* Lists (Categories, Links, Recent Posts, etc.) */
    .mod_left ul {
        padding: 0;
        margin: 0;
    }
    .mod_left li {
        list-style: none;
        padding: 8px 0;
        border-bottom: 1px dashed #eee;
        display: flex; /* Use flex for alignment */
        justify-content: space-between; /* Space out link and count */
        align-items: center;
    }
    .mod_left li:last-child {
        border-bottom: none;
    }
    .mod_left li a {
        padding: 0;
        background: none;
        color: #555;
        display: flex; /* For icon and text alignment */
        align-items: center;
    }
    .mod_left li a:hover {
        color: #a16fb2;
    }
    .mod_left li h3 {
        margin: 0;
        font-size: 1em;
        font-family: 'b nazanin', Tahoma, sans-serif;
        font-weight: normal;
    }
    .mod_left .count {
        font-size: 0.85em;
        color: #777;
    }

    /* Specific list styles */
    .mod_left .cats li a::before {
        content: '\25CF'; /* Unicode bullet */
        color: #a16fb2;
        margin-left: 8px;
        font-size: 0.7em;
    }
    .mod_left .subcats {
        margin-right: 20px; /* Indent subcategories */
        margin-top: 5px;
    }
    .mod_left .category_selected {
        background: #f3edf7;
        padding: 5px 10px;
        border-radius: 4px;
        display: block;
        color: #a16fb2;
        font-weight: bold;
    }
    .mod_left .category_selected a {
        color: inherit;
    }
    .mod_left .links li a::before {
        content: '\25B6'; /* Unicode right arrow */
        color: #a16fb2;
        margin-left: 8px;
        font-size: 0.7em;
    }

    /* Advertising */
    .mod_left .cnt.ads {
        text-align: center;
        padding: 15px;
    }
    .mod_left .cnt.ads .view_ads {
        margin-bottom: 10px;
        display: block;
    }

    /* Stat */
    .mod_left .cnt.stat .row {
        padding: 10px 0;
        border-bottom: 1px dashed #eee;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .mod_left .cnt.stat .row:last-child {
        border-bottom: none;
    }
    .mod_left .cnt.stat .StatTitle {
        font-size: 0.95em;
        color: #555;
        font-weight: normal;
    }
    .mod_left .cnt.stat .Value {
        color: #000;
        font-weight: bold;
    }

    /* Tag Cloud */
    .mod_left .cnt .tagcloud {
        display: flex;
        flex-wrap: wrap;
        gap: 8px; /* Space between tags */
    }
    .mod_left .cnt .tagcloud h3 {
        margin: 0;
        font-size: 0.9em;
        font-family: 'b nazanin', Tahoma, sans-serif;
        font-weight: normal;
        display: inline-block; /* Keep inline-block for wrapping */
    }
    .mod_left .cnt .tagcloud a {
        padding: 6px 10px;
        color: #555;
        border: 1px solid #ddd;
        background: #f8f8f8;
        border-radius: 4px;
        white-space: nowrap; /* Prevent breaking tags */
    }
    .mod_left .cnt .tagcloud a:hover,
    .mod_left .cnt .tagcloud a.selected {
        background: #a16fb2;
        border-color: #a16fb2;
        color: #FFF;
    }

    /* Recent Posts / Most Visited / Popular / Most Commented */
    .mod_left .cnt .list_view li {
        display: flex;
        flex-direction: column; /* Stack date and title */
        align-items: flex-start;
        padding: 10px 0;
    }
    .mod_left .cnt .list_view li a {
        color: #333;
        font-weight: bold;
        margin-bottom: 5px;
    }
    .mod_left .cnt .list_view li a:hover {
        color: #a16fb2;
    }
    .mod_left .cnt .list_view .date {
        font-size: 0.8em;
        color: #888;
        order: 2; /* Date after title */
    }
    .mod_left .cnt .list_view.mobile .date { /* Specific for mobile list view */
        display: block;
    }
    .cnt.max {
        overflow: hidden;
        white-space: normal; /* Allow comment text to wrap */
        text-overflow: ellipsis; /* Add ellipsis if needed */
    }
    .mod_left .cnt .list_view .cnt.selected a {
        color: #a16fb2;
    }


    /* ==========================================================================
       Center Content - Posts & Pages
       ========================================================================== */
    .post_break { padding-top: 0; }

    /* Messages (e.g., "No comments yet") */
    #wrp .box1 .bx_center .messages {
        border-top: 4px solid #a16fb2;
        border-bottom: 1px solid #ddd;
        padding: 15px;
        text-align: center;
    }
    #wrp .box1 .bx_center .messages .cnt h2 {
        font-family: 'b nazanin', Arial, Helvetica, sans-serif;
        font-size: 1.4em;
        color: #555;
        font-weight: bold;
        margin: 0;
        text-shadow: none;
    }
    #wrp .box1 .bx_center .messages .cnt h2 a.comment_count {
        color: #a16fb2;
        font-size: 0.9em;
    }
    #wrp .box1 .bx_center .messages .item_error { color: #D8000C; background-color: #FFBABA; border-radius: 4px; padding: 10px; margin-top: 10px; }
    #wrp .box1 .bx_center .messages .item_success { color: #4F8A10; background-color: #DFF2BF; border-radius: 4px; padding: 10px; margin-top: 10px; }


    /* Individual Post/Page */
    #wrp .box1 .bx_center .post {
        padding: 20px;
    }
    #wrp .box1 .bx_center .post .title {
        border-bottom: 1px dashed #eee;
        padding-bottom: 15px;
        margin-bottom: 15px;
        text-align: right;
    }
    #wrp .box1 .bx_center .post .title h2 {
        font-family: 'b nazanin', Arial, Helvetica, sans-serif;
        font-size: 1.6em;
        color: #333;
        font-weight: bold;
        margin: 0;
    }
    #wrp .box1 .bx_center .post .title h2 span {
        background: #a16fb2;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        display: inline-block;
        margin-left: 8px;
        vertical-align: middle;
    }
    #wrp .box1 .bx_center .post .title h2 a {
        color: #333;
    }
    #wrp .box1 .bx_center .post .title h2 a:hover {
        color: #a16fb2;
    }
    #wrp .box1 .bx_center .post .title .date_title {
        color: #888;
        font-size: 0.85em;
        padding: 5px 0 0 0;
        margin-top: 5px;
    }

    #wrp .box1 .bx_center .post .body {
        margin: 0; /* Remove fixed margin */
        padding-bottom: 20px;
        line-height: 1.9em;
    }
    #wrp .box1 .bx_center .post .body .cnt {
        text-align: justify;
        color: #444;
    }
    #wrp .box1 .bx_center .post .body .cnt img {
        margin: 10px auto;
        border-radius: 4px;
        border: 1px solid #eee;
    }
    #wrp .box1 .bx_center .post .body .cnt ul li {
        margin-right: 15px; /* Indent list items */
        list-style: disc; /* Use actual disc for lists */
        color: #555;
    }
    #wrp .box1 .bx_center .post .body .readmore {
        text-align: left; /* Align read more to left (for RTL) */
        margin-top: 20px;
    }
    #wrp .box1 .bx_center .post .body .readmore a {
        display: inline-block;
        padding: 8px 15px;
        background: #a16fb2;
        color: #fff;
        border-radius: 5px;
        font-size: 0.95em;
        transition: background-color 0.3s ease;
    }
    #wrp .box1 .bx_center .post .body .readmore a:hover {
        background: #804b93;
    }

    /* Post Detail (meta info below post body) */
    #wrp .box1 .bx_center .post .post_detail {
        background: #f8f8f8;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
        padding: 15px 20px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        margin: 0 -20px -20px; /* Adjust to extend to full post width */
        border-radius: 0 0 8px 8px; /* Match post container */
    }
    #wrp .box1 .bx_center .post .post_detail .cnt {
        width: 100%; /* Take full width within detail section */
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        color: #777;
    }
    #wrp .box1 .bx_center .post .post_detail .det_left,
    #wrp .box1 .bx_center .post .post_detail .det_right {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }
    #wrp .box1 .bx_center .post .post_detail .det_left ul,
    #wrp .box1 .bx_center .post .post_detail .det_right ul {
        display: flex;
        padding: 0;
        margin: 0;
    }
    #wrp .box1 .bx_center .post .post_detail .det_left li,
    #wrp .box1 .bx_center .post .post_detail .det_right li {
        list-style: none;
        margin-left: 15px; /* Space between items */
        padding: 0;
        border-right: none;
        display: flex;
        align-items: center;
    }
    #wrp .box1 .bx_center .post .post_detail .det_left li:first-child,
    #wrp .box1 .bx_center .post .post_detail .det_right li:first-child {
        margin-left: 0;
    }
    #wrp .box1 .bx_center .post .post_detail .cnt .date::before {
        content: '\f073'; /* Font Awesome calendar icon */
        font-family: 'Font Awesome 5 Free'; /* Assuming Font Awesome is loaded */
        font-weight: 900;
        margin-left: 8px;
        color: #a16fb2;
    }
    #wrp .box1 .bx_center .post .post_detail .cnt .cmt::before {
        content: '\f0e5'; /* Font Awesome comment icon */
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        margin-left: 8px;
        color: #a16fb2;
    }
    #wrp .box1 .bx_center .post .post_detail .cnt .author::before {
        content: '\f007'; /* Font Awesome user icon */
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        margin-left: 8px;
        color: #a16fb2;
    }

    /* Rating */
    .rate-box {
        display: flex;
        align-items: center;
        font-size: 0.9em;
    }
    .rate-button-box {
        display: flex;
        align-items: center;
        margin: 0 5px;
    }
    .rate-button {
        display: flex;
        align-items: center;
        padding: 3px 8px;
        border-radius: 4px;
        background: #eee;
        color: #555;
    }
    .rate-button:hover {
        background: #ddd;
    }
    .rate-up .rate-button:hover { background: #d4edda; color: #090; }
    .rate-down .rate-button:hover { background: #f8d7da; color: #A00; }

    .rate-up img.rateimg { background-position: -3px -5px; }
    .rate-down img.rateimg { background-position: -3px -25px; }
    .rate-up.rated .rate-button, .rate-up .rate-button:hover { background-color: #28a745; color: #fff; }
    .rate-down.rated .rate-button, .rate-down .rate-button:hover { background-color: #dc3545; color: #fff; }
    .rate-up.rated img.rateimg { filter: brightness(0) invert(1); }
    .rate-down.rated img.rateimg { filter: brightness(0) invert(1); }


    /* Keywords Post Tags */
    #wrp .box1 .bx_center .post .post_detail .cnt .keywords_post {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 15px;
        background: none;
        padding-right: 0;
    }
    #wrp .box1 .bx_center .post .post_detail .cnt .keywords_post::before {
        content: '\f02c'; /* Font Awesome tags icon */
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        margin-left: 8px;
        color: #a16fb2;
    }
    #wrp .box1 .bx_center .post .post_detail .cnt .keywords_post span a {
        border-right: none;
        padding: 5px 10px;
        background: #f0f2f5;
        border-radius: 4px;
        color: #555;
        font-size: 0.9em;
    }
    #wrp .box1 .bx_center .post .post_detail .cnt .keywords_post span a:hover {
        background: #a16fb2;
        color: #fff;
    }
    #wrp .box1 .bx_center .post .post_detail .cnt .keywords_post span h3 {
        margin: 0;
        font-size: 1em;
        font-family: 'b nazanin', Tahoma, sans-serif;
        font-weight: normal;
    }

    /* Comments Section */
    #wrp .box1 .bx_center .post_comments {
        margin-top: 20px;
    }
    #wrp .box1 .bx_center .cmt_break {
        margin-bottom: 15px;
        border-bottom: 1px dashed #eee;
        padding-bottom: 15px;
    }
    #wrp .box1 .bx_center .post_comments .cmt_details {
        background: #f8f8f8;
        border: 1px solid #eee;
        border-bottom: none;
        padding: 10px 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 8px 8px 0 0;
        color: #777;
    }
    #wrp .box1 .bx_center .post_comments .cmt_details .dets_right,
    #wrp .box1 .bx_center .post_comments .cmt_details .dets_left {
        display: flex;
        align-items: center;
    }
    #wrp .box1 .bx_center .post_comments .cmt_details li {
        list-style: none;
        margin-left: 10px;
        display: flex;
        align-items: center;
    }
    #wrp .box1 .bx_center .post_comments .cmt_details li:first-child {
        margin-left: 0;
    }
    #wrp .box1 .bx_center .cmt_details .avatar img {
        width: 35px; /* Larger avatar */
        height: 35px;
        border-radius: 50%;
        margin-left: 10px;
        border: 1px solid #ddd;
    }
    #wrp .box1 .bx_center .post_comments .cmt_details .txt {
        font-weight: bold;
        color: #444;
    }
    #wrp .box1 .bx_center .post_comments .cmt_details .cmt_date {
        font-size: 0.85em;
    }
    #wrp .box1 .bx_center .post_comments .cmt_details .website::before {
        content: '\f0ac'; /* Font Awesome globe icon */
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        margin-left: 5px;
        color: #a16fb2;
    }
    #wrp .box1 .bx_center .post_comments .cmt_details .email::before {
        content: '\f0e0'; /* Font Awesome envelope icon */
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        margin-left: 5px;
        color: #a16fb2;
    }
    #wrp .box1 .bx_center .post_comments .body_cmt {
        background: #fff;
        border: 1px solid #eee;
        padding: 15px;
        border-radius: 0 0 8px 8px;
        line-height: 1.8;
    }
    #wrp .box1 .bx_center .post_comments .body_cmt .cnt {
        padding: 0;
        color: #333;
    }
    #wrp .box1 .bx_center .post_comments .body_cmt .cnt ul li {
        margin-right: 15px;
        list-style: disc;
    }

    /* Comment Reply */
    #wrp .box1 .bx_center .cmt_reply {
        background: #f3edf7;
        border: 1px solid #d0abdb;
        border-radius: 8px;
        margin-top: 10px;
        padding: 15px;
        color: #502b65;
        line-height: 1.6;
        font-size: 0.95em;
    }

    /* Comment Form */
    .comment_add_form {
        background: #fff;
        border-top: 4px solid #a16fb2;
        border-bottom: 1px solid #ddd;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
    }
    div.commentForm input[type="text"],
    div.commentForm input[type="email"],
    div.commentForm input[type="url"],
    div.commentForm textarea {
        width: 100%;
        padding: 10px;
        margin-bottom: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-family: 'b nazanin', Tahoma, sans-serif;
        font-size: 1em;
    }
    div.commentForm textarea {
        min-height: 100px;
        resize: vertical;
    }
    div.commentForm input.sendbutton {
        padding: 10px 20px;
        background: #a16fb2;
        color: #fff;
        border: none;
        border-radius: 5px;
        font-size: 1em;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }
    div.commentForm input.sendbutton:hover {
        background: #804b93;
    }
    div.commentForm iframe { background: #F8F8F8; border: 1px solid #ddd; border-radius: 4px; }


    /* Pagination */
    #wrp .box1 .bx_center .pagination {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
        padding: 10px;
        background: #f8f8f8;
        border-radius: 8px;
    }
    #wrp .box1 .bx_center .pagination a {
        display: inline-flex; /* Use flex to center content in button */
        justify-content: center;
        align-items: center;
        min-width: 40px; /* Ensure sufficient touch target */
        height: 40px;
        padding: 0 12px;
        margin: 5px;
        background: #eee;
        color: #555;
        border: 1px solid #ddd;
        border-radius: 5px;
        font-size: 1em;
    }
    #wrp .box1 .bx_center .pagination a:hover {
        background: #a16fb2;
        color: #fff;
        border-color: #a16fb2;
    }
    #wrp .box1 .bx_center .pagination a.current {
        background: #a16fb2;
        color: #fff;
        border-color: #a16fb2;
        font-weight: bold;
    }
    #wrp .box1 .bx_center .pagination .spacer {
        padding: 0 8px;
        color: #999;
    }
    .pagination .pagePrev, .pagination .pageNext {
        font-family: 'b nazanin', Arial, sans-serif;
        font-weight: bold;
    }


    /* ==========================================================================
       Footer
       ========================================================================== */
    .footer {
        clear: both;
        background: #2d2d2d;
        border-top: 4px solid #a16fb2;
        padding: 20px 0;
        border-radius: 0 0 8px 8px; /* Match wrapper border-radius */
    }
    .footer .cnt {
        max-width: 1200px;
        width: 95%;
        margin: auto;
        display: flex;
        flex-direction: column; /* Stack on mobile */
        align-items: center;
        text-align: center;
        gap: 15px; /* Space between links and icons */
    }
    .footer .links {
        color: #9d9d9d;
        font-size: 0.9em;
        line-height: 1.6;
    }
    .footer .links a {
        color: #a16fb2;
        text-decoration: underline;
    }
    .footer .links a:hover {
        color: #fff;
    }

    .footer .icons {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
    }
    .footer .icons a {
        display: block;
        width: 30px;
        height: 30px;
        background-size: cover;
        border-radius: 50%;
        transition: transform 0.3s ease;
    }
    .footer .icons a:hover {
        transform: translateY(-3px);
    }
    .footer .icons .bayan { background-image: url(//cdn.bayan.ir/blog/templates/shared/icon/bayan-icon-crystal.png); }
    .footer .icons .blog { background-image: url(//cdn.bayan.ir/blog/templates/shared/icon/blog-icon-crystal.png); }
    .footer .icons .bayanbox { background-image: url(//cdn.bayan.ir/blog/templates/shared/icon/bayanbox-icon-crystal.png); }
    .footer .icons .rss { background-image: url(//cdn.bayan.ir/blog/templates/shared/icon/rss-icon-crystal.png); }
    .footer .icons .templates { background-image: url(//cdn.bayan.ir/blog/templates/shared/icon/templates-icon-crystal.png); }


    /* ==========================================================================
       Media Queries for Responsiveness
       ========================================================================== */

    /* Tablet & Small Desktops (e.g., 768px and up) */
    @media (min-width: 768px) {
        body {
            font-size: 16px;
        }
        #wrp .header .title h1 {
            font-size: 3.2em;
        }
        #wrp .header .title .desc h2 {
            font-size: 1.2em;
        }
        #wrp .main_menu .cnt a {
            font-size: 1.1em;
            padding: 15px 18px;
        }
        #wrp .box1 {
            flex-direction: row; /* Sidebar and main content side-by-side */
            padding: 20px;
        }
        #wrp .box1 .bx_left {
            width: 280px; /* Fixed width for sidebar */
            order: 1; /* Sidebar on left */
        }
        #wrp .box1 .bx_center {
            flex-grow: 1; /* Main content takes remaining space */
            margin-left: 20px; /* Space between sidebar and main content */
            order: 2; /* Main content on right */
        }
        #wrp .box1 .bx_center .post .title h2 {
            font-size: 1.8em;
        }
        #wrp .box1 .bx_center .post .post_detail .cnt {
            flex-direction: row;
            justify-content: space-between;
        }
        .footer .cnt {
            flex-direction: row; /* Footer items side-by-side */
            justify-content: space-between;
        }
    }

    /* Larger Desktops (e.g., 1024px and up) */
    @media (min-width: 1024px) {
        body {
            font-size: 17px;
        }
        #wrp {
            margin: 40px auto;
        }
        #wrp .header .title h1 {
            font-size: 3.8em;
        }
        #wrp .header .title .desc h2 {
            font-size: 1.3em;
        }
        #wrp .main_menu .cnt a {
            font-size: 1.15em;
            padding: 15px 20px;
        }
        #wrp .box1 .bx_left {
            width: 300px;
        }
        #wrp .box1 .bx_center .post .title h2 {
            font-size: 2em;
        }
    }
}