@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 */
    }
/* ==========================================================================
       Enhanced Links within Post Content
       ========================================================================== */
    #wrp .box1 .bx_center .post .body .cnt a {
        font-weight: bold; /* متن لینک را بولد می‌کند */
        display: inline-block; /* برای اعمال padding و margin و عرض روی لینک ضروری است */
        padding: 8px 15px; /* فضای داخلی دور متن لینک */
        margin: 5px 0; /* فاصله از عناصر بالا و پایین (برای لینک‌های درون خطی) */
        background-color: #f3edf7; /* رنگ پس‌زمینه ملایم */
        border: 1px solid #d0abdb; /* کادر دور لینک */
        border-radius: 6px; /* گوشه‌های گرد برای ظاهر زیباتر */
        color: #502b65; /* رنگ متن لینک (تیره تر برای کنتراست) */
        text-decoration: none; /* خط زیر لینک را حذف می‌کند */
        transition: all 0.3s ease; /* انیمیشن نرم برای تغییرات در هاور */
        line-height: 1.5; /* ارتفاع خط برای خوانایی بهتر داخل باکس */
        box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* سایه بسیار ملایم */
    }

    #wrp .box1 .bx_center .post .body .cnt a:hover {
        background-color: #a16fb2; /* رنگ اصلی قالب در حالت هاور */
        border-color: #a16fb2; /* رنگ کادر هماهنگ با پس‌زمینه در هاور */
        color: #fff; /* متن سفید در حالت هاور */
        text-decoration: none;
        transform: translateY(-1px); /* یک حرکت کوچک به سمت بالا برای جذابیت */
        box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* سایه بیشتر در حالت هاور */
    }
    #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;
        }
        /* Removed float:right from .pagesList to rely fully on flexbox */
        .pagination .pagesList {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
        }


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