/* ==========================================================================
   Base Styles (Mobile First) & Logical Properties for Global LTR/RTL Support
   ========================================================================== */

.post-content {
    width: 100%;
    margin-top: 24px;
}



/* ------------------ Layout ------------------ */
.blog-layout {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 24px;
}

.main-content {
    width: 100%;
}

.sidebar {
    display: none;
    /* در موبایل مخفی، در دسکتاپ نمایش داده می‌شود */
    width: 100%;
    flex-direction: column;
    gap: 24px;
}

/* ------------------ Hero Section ------------------ */
.post-hero-section {
    position: relative;
    width: 100%;
    background-color: var(--accent-green);
    box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    z-index: 1;
    min-height: auto;
    text-align: center;
    padding: 56px 32px;
    clip-path: polygon(30px 0, calc(100% - 30px) 0, 100% 30px, 100% calc(100% - 30px),
            calc(100% - 30px) 100%, 30px 100%, 0 calc(100% - 30px), 0 30px);
}

.post-hero-section img {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

.post-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--accent-green);
    mix-blend-mode: multiply;
    z-index: -1;
}

.title-desc {
    display: flex;
    flex-direction: column;
    gap: 9px;
    color: #ffffff;
    max-width: 800px;
    margin-bottom: 48px;
}

.post-title {
    font-size: 20px;
    font-weight: 875;
    line-height: 1.5;
}

.post-excerpt {
    font-size: 14px;
    font-weight: 325;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.85);
}

.post-meta-tags {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    width: 100%;
}

.meta-tag {
    background-color: var(--accent-gold);
    color: #000000;
    padding: 8px 9px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 450;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    max-width: 300px;
}

/* ------------------ Typography & Post Content (WP Standards) ------------------ */
.post-body {
    width: 100%;
    border-radius: 24px;
    padding: 24px;
    margin-top: 56px;
    background: #FFFFFF;
    border: 1px solid #34343414;
    box-shadow: 0px 0px 60px 0px #0000000A;
    line-height: 32px;
    font-weight: 325;
    font-size: 16px;
    color: #666666;
}

.post-body a {
    color: #0060F1;
    font-size: 16px;
    text-decoration: underline;
}

.post-body h2 {
    font-weight: 600;
    font-size: 20px;
    line-height: 32px;
    color: #333333;
    margin: 16px 0;
}

/* WP Lists (UL & OL) */
.post-body ul,
.post-body ol {
    padding-inline-start: 24px;
    margin: 24px 0;
}

.post-body ul li {
    list-style-type: disc;
    margin-bottom: 8px;
}

.post-body ol li {
    list-style-type: decimal;
    margin-bottom: 8px;
}

/* WP Blockquote */
.post-body blockquote {
    position: relative;
    margin: 32px 0;
    padding: 24px;
    background-color: #ECEEEF;
    border-inline-start: 4px solid var(--accent-green);
    border-start-end-radius: 12px;
    border-end-end-radius: 12px;
    font-style: italic;
    color: #112931;
}

/* WP Image Alignments & Wrapping */
.main-content .post-body img {
    max-width: 100%;
    height: auto;
    border-radius: 24px;
    margin: 24px auto;
    display: block;
}

.post-body img+h2 {
    margin-top: 0;
}

/* کلاس‌های ضروری وردپرس برای قرارگیری متن کنار عکس */
.post-body .alignleft {
    float: inline-start;
    margin-inline-end: 24px;
    margin-bottom: 24px;
}

.post-body .alignright {
    float: inline-end;
    margin-inline-start: 24px;
    margin-bottom: 24px;
}

.post-body .aligncenter {
    display: block;
    margin-inline-start: auto;
    margin-inline-end: auto;
    clear: both;
}

.post-body figure.wp-caption {
    max-width: 100%;
    margin-bottom: 24px;
}

.post-body figcaption,
.post-body .wp-caption-text {
    text-align: center;
    font-size: 14px;
    color: #A4A9AA;
    margin-top: 12px;
}

/* ------------------ Sidebar Widgets ------------------ */
.custom-widget {
    background-color: #ffffff;
    border-radius: 24px;
    padding: 8px;
    box-shadow: 0px 16px 32px 0px #00000014;
}

.widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    margin-bottom: 24px;
    padding: 0 8px;
}

.widget-title {
    font-weight: 600;
    font-size: 16px;
    line-height: 140%;
    color: #52595A;
}

.widget-action-link {
    font-weight: 450;
    color: var(--accent-green);
    line-height: 120%;
    text-decoration: none;
    transition: color 0.3s ease;
}

.widget-action-link:hover {
    color: #1a6f48;
}

.related-posts-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.related-post-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 16px;
    background: #F6F7F7;
    border: 1px solid #F0F1F1;
}

.related-post-image {
    width: 140px;
    height: 96px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
}

.related-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.related-post-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.related-post-title {
    color: #112931;
    margin: 0;
    font-weight: 450;
    line-height: 1.6;
}

.related-post-title a {
    color: #112931;
    text-decoration: none;
    transition: color 0.3s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-post-title a:hover {
    color: var(--accent-green);
}

.related-post-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background-color: #E4E7E8;
    padding: 2px;
    border-radius: 8px;
    font-weight: 450;
    color: #A4A9AA;
}

.share-widget {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
}

.share-widget .widget-title {
    color: #112931;
}

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

.share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #11293114;
    border: 1px solid #11293114;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.share-btn:hover {
    background-color: #ffffff;
}

/* ------------------ Footer Elements (Author & Tags) ------------------ */
.post-footer-info {
    display: flex;
    flex-direction: column-reverse;
    gap: 56px;
    margin-top: 56px;
}

.author-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    height: auto;
    border-radius: 24px;
    padding: 24px;
    background: #FFFFFF;
    border: 1px solid #34343414;
    box-shadow: 0px 0px 60px 0px #0000000A;
}

.author-profile {
    display: flex;
    align-items: center;
    gap: 16px;
}

.author-avatar {
    width: 69px;
    height: 69px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

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

.author-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.author-name {
    margin: 0;
    font-size: 20px;
    font-weight: 875;
    color: #353535;
}

.author-role {
    font-weight: 450;
    color: #35353566;
}

.author-socials {
    display: flex;
    gap: 8px;
}

.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 56px;
    background-color: var(--accent-gold);
    border-radius: 16px;
    transition: transform 0.3s ease;
}

.social-btn:hover {
    transform: translateY(-3px);
}

.tags-section {
    display: flex;
    flex-direction: column;
    gap: 29px;
    width: 100%;
}

.tags-title {
    margin: 0;
    font-size: 16px;
    font-weight: 725;
    color: #353535;
}

.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    overflow: hidden;
}

.tag-item {
    background-color: var(--accent-green);
    color: #ffffff;
    padding: 7.5px 16px;
    border-radius: 888px;
    font-size: 16px;
    font-weight: 325;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.tag-item:hover {
    background-color: #1a6f48;
}

/* ------------------ Articles Slider & Cards ------------------ */
.articles-slider-section {
    width: 100%;
    margin-top: 96px;
}

.filter-tabs {
    display: flex;
    gap: 16px;
    margin-bottom: 40px;
    border-radius: 16px;
    padding: 16px;
    background: #FFFFFF;
    border: 1px solid rgba(52, 52, 52, 0.08);
    box-shadow: 0px 20px 40px 0px rgba(0, 0, 0, 0.04);
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-green) #E5E7EB;
}

.filter-tabs::-webkit-scrollbar {
    height: 6px;
}

.filter-tabs::-webkit-scrollbar-track {
    background: #E5E7EB;
    border-radius: 8px;
}

.filter-tabs::-webkit-scrollbar-thumb {
    background-color: var(--accent-green);
    border-radius: 8px;
}

.filter-btn {
    min-width: 130px;
    height: 48px;
    font-family: inherit;
    border: 1px solid rgba(52, 52, 52, 0.16);
    background-color: #ffffff;
    color: #A4A9AA;
    padding: 11px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 450;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0
}

.filter-btn.active,
.filter-btn:hover {
    background-color: var(--accent-green);
    color: #ffffff;
    border-color: var(--accent-green);
}

.slider-wrapper {
    position: relative;
    min-height: 370px;
}

.loading-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.loading-overlay.show {
    display: flex !important;
    opacity: 1;
    visibility: visible;
}

.loader {
    width: 48px;
    height: 48px;
    border: 5px solid #E5E7EB;
    border-bottom-color: var(--accent-green);
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.article-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    width: 100%;
}

.card-image {
    width: 100%;
    height: 167px;
    position: relative;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 271 167'%3E%3Cpath fill='black' d='M21.7667 5.19001C24.9752 1.87292 29.3925 0 34.0074 0L236.993 0C241.607 0 246.025 1.87292 249.233 5.19L266.211 22.7421C269.283 25.918 271 30.1635 271 34.5821V131.578C271 135.997 269.283 140.243 266.211 143.418L249.233 160.971C246.025 164.288 241.607 166.161 236.993 166.161H34.0074C29.3925 166.161 24.9752 164.288 21.7667 160.971L4.78926 143.418C1.71732 140.243 0 135.997 0 131.578L0 34.5821C0 30.1635 1.71732 25.918 4.78927 22.7421L21.7667 5.19001Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 271 167'%3E%3Cpath fill='black' d='M21.7667 5.19001C24.9752 1.87292 29.3925 0 34.0074 0L236.993 0C241.607 0 246.025 1.87292 249.233 5.19L266.211 22.7421C269.283 25.918 271 30.1635 271 34.5821V131.578C271 135.997 269.283 140.243 266.211 143.418L249.233 160.971C246.025 164.288 241.607 166.161 236.993 166.161H34.0074C29.3925 166.161 24.9752 164.288 21.7667 160.971L4.78926 143.418C1.71732 140.243 0 135.997 0 131.578L0 34.5821C0 30.1635 1.71732 25.918 4.78927 22.7421L21.7667 5.19001Z'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-card .card-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--accent-green);
    mix-blend-mode: multiply;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.card-badge {
    position: absolute;
    top: 16px;
    inset-inline-end: 16px;
    width: 60px;
    height: 57px;
    background-color: #ECEEEF;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
    color: var(--accent-green);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 57'%3E%3Cpath fill='black' d='M17.3545 4.14979C19.9135 1.49788 23.4406 0 27.1259 0L32.8765 0C36.5618 0 40.0888 1.49788 42.6479 4.14978L56.1946 18.1878C58.6373 20.7191 60.0024 24.0995 60.0024 27.6172V28.9537C60.0024 32.4715 58.6373 35.8519 56.1946 38.3832L42.6479 52.4212C40.0888 55.0731 36.5618 56.571 32.8765 56.571H27.1259C23.4406 56.571 19.9135 55.0731 17.3545 52.4212L3.80778 38.3832C1.36509 35.8519 0 32.4715 0 28.9538L0 27.6172C0 24.0995 1.36509 20.7191 3.80779 18.1878L17.3545 4.14979Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 57'%3E%3Cpath fill='black' d='M17.3545 4.14979C19.9135 1.49788 23.4406 0 27.1259 0L32.8765 0C36.5618 0 40.0888 1.49788 42.6479 4.14978L56.1946 18.1878C58.6373 20.7191 60.0024 24.0995 60.0024 27.6172V28.9537C60.0024 32.4715 58.6373 35.8519 56.1946 38.3832L42.6479 52.4212C40.0888 55.0731 36.5618 56.571 32.8765 56.571H27.1259C23.4406 56.571 19.9135 55.0731 17.3545 52.4212L3.80778 38.3832C1.36509 35.8519 0 32.4715 0 28.9538L0 27.6172C0 24.0995 1.36509 20.7191 3.80779 18.1878L17.3545 4.14979Z'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.badge-day {
    font-size: 15px;
    font-weight: bold;
    line-height: 1;
}

.badge-month {
    font-size: 10px;
    font-weight: 600;
}

.card-content {
    width: 100%;
    height: 108px;
    flex-shrink: 0;
    padding: 16px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ECEEEF;
    transition: background-color 0.3s ease;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 271 108'%3E%3Cpath fill='black' d='M21.7721 5.15346C24.9782 1.85865 29.3801 0 33.9774 0L237.022 0C241.619 0 246.021 1.85865 249.228 5.15345L266.175 22.57C269.269 25.7493 271 30.0103 271 34.4464L271 73.1461C271 77.5823 269.269 81.8434 266.175 85.0228L249.228 102.439C246.022 105.734 241.62 107.593 237.023 107.593L33.9777 107.593C29.3804 107.593 24.9785 105.734 21.7724 102.439L4.82499 85.0227C1.7313 81.8434 0.00028904 77.5823 0.000263424 73.1462L3.99503e-05 34.4465C1.43333e-05 30.0103 1.73103 25.7492 4.82477 22.5699L21.7721 5.15346Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 271 108'%3E%3Cpath fill='black' d='M21.7721 5.15346C24.9782 1.85865 29.3801 0 33.9774 0L237.022 0C241.619 0 246.021 1.85865 249.228 5.15345L266.175 22.57C269.269 25.7493 271 30.0103 271 34.4464L271 73.1461C271 77.5823 269.269 81.8434 266.175 85.0228L249.228 102.439C246.022 105.734 241.62 107.593 237.023 107.593L33.9777 107.593C29.3804 107.593 24.9785 105.734 21.7724 102.439L4.82499 85.0227C1.7313 81.8434 0.00028904 77.5823 0.000263424 73.1462L3.99503e-05 34.4465C1.43333e-05 30.0103 1.73103 25.7492 4.82477 22.5699L21.7721 5.15346Z'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.card-content h3 a {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #112931;
    font-weight: 725;
    transition: color 0.3s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.article-card:hover .card-content {
    background-color: var(--accent-green);
}

.article-card:hover .card-content h3 a {
    color: #ffffff;
}

.article-card:hover .card-image::after {
    opacity: 1;
}

@media (min-width: 768px) {
    .card-image {
        height: 252px;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 411 252'%3E%3Cpath fill='black' d='M33.0115 7.8712C37.8775 2.84049 44.5768 0 51.5758 0L359.424 0C366.423 0 373.122 2.84048 377.988 7.87118L403.737 34.4907C408.396 39.3074 411 45.7462 411 52.4473V199.553C411 206.254 408.396 212.693 403.737 217.509L377.988 244.129C373.122 249.159 366.423 252 359.424 252L51.5758 252C44.5768 252 37.8775 249.159 33.0115 244.129L7.26343 217.509C2.60451 212.693 0 206.254 0 199.553L0 52.4473C0 45.7462 2.6045 39.3073 7.26343 34.4907L33.0115 7.8712Z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 411 252'%3E%3Cpath fill='black' d='M33.0115 7.8712C37.8775 2.84049 44.5768 0 51.5758 0L359.424 0C366.423 0 373.122 2.84048 377.988 7.87118L403.737 34.4907C408.396 39.3074 411 45.7462 411 52.4473V199.553C411 206.254 408.396 212.693 403.737 217.509L377.988 244.129C373.122 249.159 366.423 252 359.424 252L51.5758 252C44.5768 252 37.8775 249.159 33.0115 244.129L7.26343 217.509C2.60451 212.693 0 206.254 0 199.553L0 52.4473C0 45.7462 2.6045 39.3073 7.26343 34.4907L33.0115 7.8712Z'/%3E%3C/svg%3E");
    }

    .card-badge {
        width: 91px;
        height: 86px;
        top: 24px;
        inset-inline-end: 24px;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 91 86'%3E%3Cpath fill='black' d='M26.3199 6.29359C30.201 2.27169 35.5501 0 41.1393 0L49.8607 0C55.4498 0 60.7989 2.27169 64.6801 6.29358L85.2251 27.5837C88.9297 31.4227 91 36.5495 91 41.8844V43.9114C91 49.2464 88.9297 54.3732 85.2251 58.2122L64.6801 79.5023C60.799 83.5242 55.4498 85.7959 49.8607 85.7959H41.1393C35.5501 85.7959 30.201 83.5242 26.3199 79.5023L5.7749 58.2122C2.07029 54.3732 0 49.2464 0 43.9114L0 41.8844C0 36.5495 2.0703 31.4227 5.77491 27.5837L26.3199 6.29359Z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 91 86'%3E%3Cpath fill='black' d='M26.3199 6.29359C30.201 2.27169 35.5501 0 41.1393 0L49.8607 0C55.4498 0 60.7989 2.27169 64.6801 6.29358L85.2251 27.5837C88.9297 31.4227 91 36.5495 91 41.8844V43.9114C91 49.2464 88.9297 54.3732 85.2251 58.2122L64.6801 79.5023C60.799 83.5242 55.4498 85.7959 49.8607 85.7959H41.1393C35.5501 85.7959 30.201 83.5242 26.3199 79.5023L5.7749 58.2122C2.07029 54.3732 0 49.2464 0 43.9114L0 41.8844C0 36.5495 2.0703 31.4227 5.77491 27.5837L26.3199 6.29359Z'/%3E%3C/svg%3E");
    }

    .badge-day {
        font-size: 18px;
    }

    .badge-month {
        font-size: 11px;
    }

    .card-content {
        height: 110px;
        padding: 24px;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 411 110'%3E%3Cpath fill='black' d='M33.0197 7.81577C37.882 2.81885 44.5581 0 51.5303 0L359.469 0C366.441 0 373.117 2.81883 377.98 7.81575L403.682 34.2298C408.374 39.0515 411 45.5137 411 52.2414L411 57.758C411 64.4861 408.375 70.9486 403.683 75.7705L377.98 102.184C373.118 107.181 366.442 110 359.47 110L51.5307 110C44.5585 110 37.8825 107.181 33.0201 102.184L7.31748 75.7701C2.62564 70.9484 0.000394744 64.4863 0.000277942 57.7586L0.000182165 52.2419C6.53571e-05 45.5139 2.62533 39.0514 7.31739 34.2295L33.0197 7.81577Z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 411 110'%3E%3Cpath fill='black' d='M33.0197 7.81577C37.882 2.81885 44.5581 0 51.5303 0L359.469 0C366.441 0 373.117 2.81883 377.98 7.81575L403.682 34.2298C408.374 39.0515 411 45.5137 411 52.2414L411 57.758C411 64.4861 408.375 70.9486 403.683 75.7705L377.98 102.184C373.118 107.181 366.442 110 359.47 110L51.5307 110C44.5585 110 37.8825 107.181 33.0201 102.184L7.31748 75.7701C2.62564 70.9484 0.000394744 64.4863 0.000277942 57.7586L0.000182165 52.2419C6.53571e-05 45.5139 2.62533 39.0514 7.31739 34.2295L33.0197 7.81577Z'/%3E%3C/svg%3E");
    }

    .card-content h3 {
        font-size: 16px;
    }
}

/* ==========================================================================
   Desktop Layout (min-width: 768px)
   ========================================================================== */
@media (min-width: 768px) {

    .post-content {
        margin-top: 40px;
    }

    .blog-layout {
        flex-direction: row;
        margin-top: 40px;
    }

    .main-content {
        width: 66.015%;
    }

    .sidebar {
        display: flex;
        width: 32.11%;
    }

    .post-hero-section {
        min-height: 336px;
        text-align: start;
        align-items: flex-start;
        padding: 40px 64px;
        clip-path: polygon(45px 0, calc(100% - 45px) 0, 100% 45px, 100% calc(100% - 45px), calc(100% - 45px) 100%, 45px 100%, 0 calc(100% - 45px), 0 45px);
    }

    .post-meta-tags {
        flex-direction: row;
    }

    .meta-tag {
        width: auto;
    }

    .post-body {
        padding: 32px;
        margin-top: 17px;
    }

    .main-content .post-body img {
        margin: 32px auto;
    }

    .post-footer-info {
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
        gap: 32px;
        margin-top: 24px;
    }

    .author-section {
        flex: 1;
        width: 405px;
        height: 200px;
    }

    .author-text {
        align-items: flex-start;
    }

    .social-btn {
        width: 56px;
        height: 56px;
    }

    .tags-section {
        flex: 1;
    }
}

/**
** ==========================================================================
**   Start Comments Style
**   ========================================================================== */

.comment-article {
    margin-top: 29px;
}

.comments-area {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 32px;
}

.comments-area .comment-box-flex {
    width: 65.9%;
    display: flex;
    flex-direction: column;
    gap: 28px;
    border-radius: 24px;
    padding: 15px;
    background: #FFFFFF;
    border: 1px solid #34343414;
    box-shadow: 0px 20px 40px 0px #0000000A;
}

.comments-area ul.comment-list.comment {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 19px;
}

.comment-list .comments-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.comments-title .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 12px;
    background: #ffffff29;
    box-shadow: 0px 6px 16px 0px #0000000f;
}

.comments-title h2 {
    font-weight: 800;
    font-size: 18px;
    color: #242424;
}

.line-comments {
    border: 1px solid #E1E2E3;
}

.comment-list li.comment {
    padding: 16px;
    background: #FFFFFF;
    border-radius: 24px;
    list-style: none;
    border: 1px solid #E1E2E3;
}

li.comment .comment {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.comment .nema-comments {
    display: flex;
    align-items: center;
    gap: 11px;
}

.nema-comments .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 12px;
    background: #11293114;
}

.nema-comments .comment-by {
    font-weight: 725;
    font-size: 16px;
    color: #242424;
}

.nema-comments .comment-approved {
    font-size: 12px;
    color: #242424;
}

.comment .text-comments {
    font-weight: 325;
    font-size: 16px;
    line-height: 180%;
    letter-spacing: 0%;
    text-align: justify;
    color: #52595A;
}

.comment .comment-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.comment-block .replay {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 12px;
    padding: 10px 16px 10px 14px;
    border: 1px solid #1129311F;
    color: #A4A9AA;
    transition: all 0.3s ease;
}

.comment-block .replay a {
    font-weight: 600;
    font-size: 15px;
    color: inherit;
    /* ارث‌بری رنگ از والد */
    text-decoration: none;
    transition: color 0.3s ease;
}

.comment-block .replay svg {
    transition: transform 0.3s ease;
}

.comment-block .replay:hover {
    color: var(--accent-green);
}

.comment-block .replay:hover svg {
    transform: translateX(-4px);
}

[dir="ltr"] .comment-block .replay:hover svg,
body.ltr .comment-block .replay:hover svg {
    transform: translateX(4px);
}

ul.children {
    margin-top: 15px;
}

ul.comment-list li.comment ul.children li.depth-2 {
    background: #F6F7F7;
}

ul.comment-list li.comment ul.children li.depth-3 {
    background: #E4E7E8;
}

/* Depth 4 */
ul.comment-list li.comment ul.children li.depth-4 {
    background: #DCE1E1;
}

/* Depth 5 */
ul.comment-list li.comment ul.children li.depth-5 {
    background: #CFD6D6;
}

/* Depth 6 */
ul.comment-list li.comment ul.children li.depth-6 {
    background: #C2CACA;
}

.date-comments {
    display: flex;
    align-items: center;
    gap: 8px;
}

.date-comments .date-time {
    font-weight: 325;
    font-size: 14px;
    color: #A4A9AA;
}

.box-comment-replay {
    width: 31%;
    display: flex;
    flex-direction: column;
    gap: 24px;
    border-radius: 16px;
    gap: 24px;
    padding: 24px;
    background: #FFFFFF;
    border: 1px solid #34343414;
    box-shadow: 0px 20px 40px 0px #0000000A;
}

.box-comment-replay p {
    font-weight: 450;
    font-size: 16px;
    color: #52595A;
}

.box-comment-replay .btn-comment-replay {
    font-family: "YekanBakh";
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 13.5px;
    border-radius: 12px;
    font-weight: 500;
    font-size: 14px;
    color: var(--accent-gold);
    cursor: pointer;
    border: 1px solid var(--accent-gold);
    background-color: #ffffff;
    transition: all 0.3s ease;
}

.box-comment-replay .btn-comment-replay svg {
    transition: transform 1s ease-in-out;
}

.box-comment-replay .btn-comment-replay:hover {
    background-color: var(--accent-gold);
    color: #000000;
    box-shadow: 0px 8px 24px 0px rgba(244, 178, 0, 0.25);
    transform: translateY(-2px);
}

.box-comment-replay .btn-comment-replay:hover svg {
    transform: rotate(810deg) translateX(-4px);
}

[dir="ltr"] .box-comment-replay .btn-comment-replay:hover svg,
body.ltr .box-comment-replay .btn-comment-replay:hover svg {
    transform: rotate(810deg) translateX(4px);
}

.comment-respond {
    display: none;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.comment-modal {
    max-width: 878px;
    border-radius: 24px;
    padding: 32px;
    background: #ffffff;
    border: 1px solid #34343414;
    box-shadow: 0px 20px 40px 0px #00000014;

    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.modal-overlay.active .comment-modal {
    transform: scale(1);
}

.comment-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-header .modal-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-title .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 8px;
    background: #0d3e6214;
}

.modal-title h3 {
    font-weight: 700;
    font-size: 18px;
}

.modal-header .modal-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 8px;
    background: #0d3e6214;
    cursor: pointer;
}

.comment-box-flex .no-comments {
    font-weight: 500;
    font-size: 16px;
    color: #fff;
}

.comment .text-comments a {
    color: #1874b8;
    text-decoration: underline;
    font-weight: 600;
}

.comment-form {
    margin-top: 34px;
}

.comment-form label {
    font-weight: 600;
    font-size: 16px;
    color: #343434;
}

.comment-form input[type="text"],
.comment-form textarea {
    padding: 16px 14px;
    background: #f8f9f9 !important;
    border: 1px solid #34343414 !important;
    font-family: "YekanBakh";
    margin: 8px 0;
}

/* Start Comment Submit Button */

.comment-form .form-submit .submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 56px;
    min-width: 134px;
    padding-inline-end: 20px;
    padding-inline-start: 16px;
    border-radius: 12px;
    background-color: var(--accent-green);
    color: #FFFFFF;
    font-family: inherit;
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    border: none;
    cursor: pointer;
    margin-top: 34px;
    transition: all 0.3s ease;
}

.comment-form .form-submit .submit:hover {
    background-color: #1a6f48;
    box-shadow: 0px 8px 24px 0px rgba(36, 147, 96, 0.4);
    transform: translateY(-2px);
}

.comment-form .form-submit .submit svg {
    transition: transform 0.3s ease;
}

.comment-form .form-submit .submit:hover svg {
    transform: translateX(-4px);
}

[dir="ltr"] .comment-form .form-submit .submit:hover svg,
body.ltr .comment-form .form-submit .submit:hover svg {
    transform: translateX(4px);
}

/* End Comment Submit Button */

.comment-form-comment {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

.comment-form-comment label {
    font-size: 14px;
    font-weight: 600;
    color: #112931;
}

.comment-form-comment .required {
    color: #E74C3C;
    margin-inline-start: 4px;
}

.comment-form-comment textarea {
    width: 100%;
    padding: 16px;
    font-family: inherit;
    font-size: 15px;
    color: #112931;
    background-color: #F6F7F7;
    border: 1px solid #E4E7E8;
    border-radius: 16px;
    outline: none;
    resize: vertical;
    min-height: 160px;
    transition: all 0.3s ease;
}

.comment-form-comment textarea:hover {
    background-color: #ffffff;
    border-color: rgba(36, 147, 96, 0.3);
    box-shadow: 0px 4px 16px 0px rgba(36, 147, 96, 0.05);
}

.comment-form-comment textarea:focus {
    background-color: #ffffff;
    border-color: var(--accent-green);
    box-shadow: 0px 4px 16px 0px rgba(36, 147, 96, 0.15);
}

/* Start Comment Form Inputs */

.comment-form-author,
.comment-form-email {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

.comment-form-author label,
.comment-form-email label {
    font-size: 14px;
    font-weight: 600;
    color: #112931;
}

.comment-form-author .required,
.comment-form-email .required {
    color: #E74C3C;
    margin-inline-start: 4px;
}

.comment-form-author input,
.comment-form-email input {
    width: 100%;
    padding: 16px;
    font-family: inherit;
    font-size: 15px;
    color: #112931;
    background-color: #F6F7F7;
    border: 1px solid #E4E7E8;
    border-radius: 16px;
    outline: none;
    transition: all 0.3s ease;
}

.comment-form-author input::placeholder,
.comment-form-email input::placeholder {
    color: #A4A9AA;
    font-weight: 450;
}

.comment-form-author input:hover,
.comment-form-email input:hover {
    background-color: #ffffff;
    border-color: rgba(36, 147, 96, 0.3);
    box-shadow: 0px 4px 16px 0px rgba(36, 147, 96, 0.05);
}

.comment-form-author input:focus,
.comment-form-email input:focus {
    background-color: #ffffff;
    border-color: var(--accent-green);
    box-shadow: 0px 4px 16px 0px rgba(36, 147, 96, 0.15);
}

/* End Comment Form Inputs */

/**
** ==========================================================================
**   End Comments Style
**   ========================================================================== */








/* ==========================================================================
   Start Recent Comments Widget
   ========================================================================== */
.widget_recent_comments ul#recentcomments {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.widget_recent_comments .recentcomments {
    padding: 16px;
    background-color: #F6F7F7;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.8;
    color: #A4A9AA;
    transition: all 0.3s ease;
    border-inline-start: 4px solid transparent;
    word-break: break-word;
}

.widget_recent_comments .recentcomments:hover {
    background-color: #ffffff;
    border-inline-start-color: var(--accent-green);
    box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.widget_recent_comments .comment-author-link a {
    font-weight: 700;
    color: #112931;
    text-decoration: none;
    transition: color 0.3s ease;
}

.widget_recent_comments .comment-author-link a:hover {
    color: var(--accent-green);
}

.widget_recent_comments .recentcomments>a {
    color: #52595A;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.widget_recent_comments .recentcomments>a:hover {
    color: var(--accent-green);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ==========================================================================
   End Recent Comments Widget
   ========================================================================== */

/* ==========================================================================
   Start Search Widget
   ========================================================================== */
.widget_search .screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.widget_search .searchform>div {
    display: flex;
    gap: 8px;
    width: 100%;
}

.widget_search input[type="text"] {
    flex-grow: 1;
    width: 100%;
    padding: 12px 16px;
    font-family: inherit;
    font-size: 14px;
    color: #112931;
    background-color: #F6F7F7;
    border: 1px solid #E4E7E8;
    border-radius: 12px;
    outline: none;
    transition: all 0.3s ease;
}

.widget_search input[type="text"]:focus {
    background-color: #ffffff;
    border-color: var(--accent-green);
    box-shadow: 0px 4px 16px 0px rgba(36, 147, 96, 0.1);
}

.widget_search input[type="submit"] {
    flex-shrink: 0;
    padding: 12px 24px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    background-color: var(--accent-green);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.widget_search input[type="submit"]:hover {
    background-color: #1a6f48;
    box-shadow: 0px 8px 24px 0px rgba(36, 147, 96, 0.2);
    transform: translateY(-2px);
}

/* ==========================================================================
   End Search Widget
   ========================================================================== */

/* ==========================================================================
   Start Nav Menu Widget
   ========================================================================== */

.widget_nav_menu ul.menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.widget_nav_menu ul.menu ul.sub-menu {
    list-style: none;
    padding-inline-start: 16px;
    margin-top: 8px;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-inline-start: 2px solid #F0F1F1;
}

.widget_nav_menu ul.menu li {
    margin: 0;
    padding: 0;
}

.widget_nav_menu ul.menu li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background-color: transparent;
    border: 1px solid #E4E7E8;
    border-radius: 12px;
    color: #52595A;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

.widget_nav_menu ul.menu li a:hover,
.widget_nav_menu ul.menu li.current-menu-item>a {
    background-color: var(--accent-green);
    color: #ffffff;
    border-color: var(--accent-green);
    box-shadow: 0px 8px 24px 0px rgba(36, 147, 96, 0.2);
    transform: translateY(-2px);
}

/* ==========================================================================
   End Nav Menu Widget
   ========================================================================== */


/* ==========================================================================
   Start Categories Widget
   ========================================================================== */
.widget_categories ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.widget_categories ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 12px 16px;
    background-color: #F6F7F7;
    border-radius: 12px;
    border: 1px solid transparent;
    color: #A4A9AA;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.widget_categories ul li a {
    color: #52595A;
    text-decoration: none;
    font-size: 15px;
    transition: all 0.3s ease;
    flex-grow: 1;
}

.widget_categories ul li:hover {
    background-color: #ffffff;
    border-color: rgba(36, 147, 96, 0.2);
    box-shadow: 0px 8px 24px 0px rgba(36, 147, 96, 0.08);
    transform: translateY(-2px);
}

.widget_categories ul li:hover>a {
    color: var(--accent-green);
    padding-inline-start: 6px;
}

/* ------------------ Sub-categories (زیردسته‌ها) ------------------ */

.widget_categories ul ul.children {
    width: 100%;
    padding-inline-start: 16px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #E4E7E8;
    gap: 4px;
}

.widget_categories ul ul.children li {
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding: 8px 0;
    transform: none;
}

.widget_categories ul ul.children li:hover {
    background-color: transparent;
    box-shadow: none;
    transform: none;
}

.widget_categories ul ul.children li::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #E4E7E8;
    margin-inline-end: 8px;
    transition: all 0.3s ease;
}

.widget_categories ul ul.children li:hover::before {
    background-color: var(--accent-green);
    transform: scale(1.5);
}

/*Start Categories Dropdown Widget */

.widget_categories .screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.widget_categories select {
    width: 100%;
    max-width: 100%;
    padding: 14px 16px;
    padding-inline-end: 40px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: #52595A;
    background-color: #F6F7F7;
    border: 1px solid #E4E7E8;
    border-radius: 12px;
    outline: none;
    cursor: pointer;
    transition: all 0.3s ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A4A9AA' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 14px;
}

[dir="rtl"] .widget_categories select,
body.rtl .widget_categories select {
    background-position: left 16px center;
}

.widget_categories select:hover {
    background-color: #ffffff;
    border-color: rgba(36, 147, 96, 0.3);
    box-shadow: 0px 4px 16px 0px rgba(36, 147, 96, 0.05);
}

.widget_categories select:focus {
    background-color: #ffffff;
    border-color: var(--accent-green);
    box-shadow: 0px 4px 16px 0px rgba(36, 147, 96, 0.15);
}

.widget_categories select option {
    font-weight: 500;
    color: #112931;
    padding: 12px;
}

/* End Categories Dropdown Widget*/

/* ==========================================================================
   End Categories Widget
   ========================================================================== */

/* ==========================================================================
   Start Recent Entries Widget
   ========================================================================== */

.widget_recent_entries ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.widget_recent_entries ul li {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    background-color: #F6F7F7;
    border-radius: 16px;
    transition: all 0.3s ease;
    border-inline-start: 4px solid transparent;
}

.widget_recent_entries ul li a {
    font-size: 15px;
    font-weight: 600;
    color: #112931;
    text-decoration: none;
    line-height: 1.6;
    transition: color 0.3s ease;
}

.widget_recent_entries ul li .post-date {
    font-size: 13px;
    font-weight: 450;
    color: #A4A9AA;
    display: flex;
    align-items: center;
    gap: 6px;
}

.widget_recent_entries ul li .post-date::before {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #E4E7E8;
    transition: background-color 0.3s ease;
}

.widget_recent_entries ul li:hover {
    background-color: #ffffff;
    border-inline-start-color: var(--accent-green);
    box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.widget_recent_entries ul li:hover a {
    color: var(--accent-green);
}

.widget_recent_entries ul li:hover .post-date::before {
    background-color: var(--accent-green);
}

/* ==========================================================================
   End Recent Entries Widget
   ========================================================================== */

/* ==========================================================================
   Start Text Widget
   ========================================================================== */

.widget_text .textwidget {
    padding: 0 8px 8px;
    color: #666666;
    font-size: 15px;
    font-weight: 450;
    line-height: 1.8;
}

.widget_text .textwidget p {
    margin-top: 0;
    margin-bottom: 16px;
}

.widget_text .textwidget p:last-child {
    margin-bottom: 0;
}

.widget_text .textwidget a {
    color: var(--accent-green);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dashed rgba(36, 147, 96, 0.4);
    transition: all 0.3s ease;
    padding-bottom: 2px;
}

.widget_text .textwidget a:hover {
    color: #112931;
    border-bottom-color: #112931;
    border-bottom-style: solid;
}

.widget_text .textwidget img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
    margin: 16px auto;
}

.widget_text .textwidget ul,
.widget_text .textwidget ol {
    padding-inline-start: 24px;
    margin-bottom: 16px;
}

.widget_text .textwidget ul li,
.widget_text .textwidget ol li {
    margin-bottom: 8px;
}

/* ==========================================================================
   End Text Widget
   ========================================================================== */
/* ==========================================================================
   Start Media Gallery Widget
   ========================================================================== */

.widget_media_gallery .gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 0 !important;
    padding: 8px;
}

.widget_media_gallery .gallery-item {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
}

.widget_media_gallery .gallery-icon {
    margin: 0;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    aspect-ratio: 1 / 1;
    background-color: #F6F7F7;
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.04);
}

.widget_media_gallery .gallery-icon a {
    display: block;
    width: 100%;
    height: 100%;
}

.widget_media_gallery .gallery-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none !important;
    border-radius: 12px;
    transition: transform 0.5s ease;
}

.widget_media_gallery .gallery-icon a::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--accent-green);
    opacity: 0;
    mix-blend-mode: multiply;
    transition: opacity 0.3s ease;
    border-radius: 12px;
    pointer-events: none;
    z-index: 1;
}

.widget_media_gallery .gallery-item:hover .gallery-icon img {
    transform: scale(1.15);
}

.widget_media_gallery .gallery-item:hover .gallery-icon a::after {
    opacity: 0.8;
}

.widget_media_gallery br {
    display: none !important;
}

/* ==========================================================================
   End Media Gallery Widget
   ========================================================================== */
/* ==========================================================================
   Start Calendar Widget
   ========================================================================== */

.widget_calendar .calendar_wrap {
    width: 100%;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.widget_calendar .calendar_wrap::-webkit-scrollbar {
    display: none;
}

.widget_calendar table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 4px;
    text-align: center;
    margin: 0;
}

.widget_calendar caption {
    font-size: 16px;
    font-weight: 700;
    color: #112931;
    text-align: start;
    margin-bottom: 16px;
    padding-inline-start: 4px;
}

.widget_calendar th {
    font-weight: 600;
    font-size: 13px;
    color: #52595A;
    background-color: #F6F7F7;
    padding: 10px 0;
    border-radius: 8px;
}

.widget_calendar td {
    padding: 8px 0;
    color: #666666;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.widget_calendar td:not(.pad):hover {
    background-color: rgba(36, 147, 96, 0.05);
    color: var(--accent-green);
}

.widget_calendar td a {
    display: block;
    width: 100%;
    height: 100%;
    color: var(--accent-green);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: all 0.3s ease;
}

.widget_calendar td a:hover {
    color: #1a6f48;
}

.widget_calendar td#today {
    background-color: var(--accent-green);
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0px 4px 12px 0px rgba(36, 147, 96, 0.2);
    transform: scale(1.05);
}

.widget_calendar td#today a {
    color: #ffffff;
    text-decoration: none;
}

.widget_calendar td#today a:hover {
    color: #e0f2e9;
}

.widget_calendar .wp-calendar-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed #E4E7E8;
}

.widget_calendar .wp-calendar-nav span a {
    font-size: 14px;
    font-weight: 600;
    color: #52595A;
    text-decoration: none;
    transition: color 0.3s ease;
}

.widget_calendar .wp-calendar-nav span a:hover {
    color: var(--accent-green);
}

/* ==========================================================================
   End Calendar Widget
   ========================================================================== */
/* ==========================================================================
   Start Media Image Widget
   ========================================================================== */

.widget_media_image {
    text-align: center;
}

.widget_media_image a {
    display: block;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.04);
    transition: all 0.4s ease;
}

.widget_media_image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
    transition: transform 0.5s ease;
}

.widget_media_image a:hover {
    box-shadow: 0px 12px 32px 0px rgba(36, 147, 96, 0.15);
    transform: translateY(-4px);
}

.widget_media_image a:hover img {
    transform: scale(1.05);
}

.widget_media_image>img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.widget_media_image>img:hover {
    box-shadow: 0px 12px 32px 0px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   End Media Image Widget
   ========================================================================== */
/* ==========================================================================
   Start Pages Widget
   ========================================================================== */

.widget_pages ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.widget_pages ul li {
    margin: 0;
    padding: 0;
}

.widget_pages ul li a {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background-color: #F6F7F7;
    border-radius: 12px;
    color: #52595A;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
}

.widget_pages ul li a::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 4px;
    height: 100%;
    background-color: var(--accent-green);
    opacity: 0;
    transition: all 0.3s ease;
}

.widget_pages ul li a:hover,
.widget_pages ul li.current_page_item>a {
    background-color: #ffffff;
    color: var(--accent-green);
    border-color: rgba(36, 147, 96, 0.1);
    box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
    padding-inline-start: 24px;
}

.widget_pages ul li a:hover::before,
.widget_pages ul li.current_page_item>a::before {
    opacity: 1;
}

.widget_pages ul ul.children {
    width: 100%;
    padding-inline-start: 16px;
    margin-top: 8px;
    gap: 8px;
}

.widget_pages ul ul.children li a {
    background-color: transparent;
    border: 1px dashed #E4E7E8;
    padding: 10px 16px;
    font-size: 14px;
}

.widget_pages ul ul.children li a:hover {
    background-color: #ffffff;
    border-style: solid;
    border-color: rgba(36, 147, 96, 0.2);
}

/* ==========================================================================
   End Pages Widget
   ========================================================================== */
/* ==========================================================================
   Start Archive Widget
   ========================================================================== */

.widget_archive ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.widget_archive ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 12px 16px;
    background-color: #F6F7F7;
    border-radius: 12px;
    border: 1px solid transparent;
    color: #A4A9AA;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.widget_archive ul li a {
    color: #52595A;
    text-decoration: none;
    font-size: 15px;
    transition: all 0.3s ease;
    flex-grow: 1;
}

.widget_archive ul li:hover {
    background-color: #ffffff;
    border-color: rgba(36, 147, 96, 0.2);
    box-shadow: 0px 8px 24px 0px rgba(36, 147, 96, 0.08);
    transform: translateY(-2px);
}

.widget_archive ul li:hover>a {
    color: var(--accent-green);
    padding-inline-start: 6px;
}

/* ==========================================================================
   End Archive Widget
   ========================================================================== */

/* ==========================================================================
   Start Tag Cloud Widget
   ========================================================================== */

.widget_tag_cloud .tagcloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.widget_tag_cloud .tagcloud a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    background-color: #F6F7F7;
    color: #52595A;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    font-size: 13px !important;
    font-weight: 500;
    line-height: 1.6;
}

.widget_tag_cloud .tagcloud a:hover {
    background-color: var(--accent-green);
    color: #ffffff;
    border-color: var(--accent-green);
    box-shadow: 0px 4px 16px 0px rgba(36, 147, 96, 0.2);
    transform: translateY(-2px);
}

/* ==========================================================================
   End Tag Cloud Widget
   ========================================================================== */

/* ==========================================================================
   Start Audio Widget
   ========================================================================== */

.widget_media_audio .mejs-container {
    background-color: #F6F7F7 !important;
    border-radius: 50px !important;
    height: 56px !important;
    padding: 0 16px !important;
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid rgba(52, 52, 52, 0.05) !important;
    width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.widget_media_audio .mejs-container:hover {
    background-color: #ffffff !important;
    box-shadow: 0px 12px 24px 0px rgba(36, 147, 96, 0.08) !important;
    border-color: rgba(36, 147, 96, 0.15) !important;
    transform: translateY(-2px);
}

.widget_media_audio .mejs-controls {
    background: transparent !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px;
}

.widget_media_audio .mejs-button.mejs-playpause-button {
    background-color: var(--accent-green) !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.widget_media_audio .mejs-button.mejs-playpause-button:hover {
    transform: scale(1.08);
    box-shadow: 0px 4px 12px 0px rgba(36, 147, 96, 0.3);
}

.widget_media_audio .mejs-button.mejs-playpause-button button {
    margin: 0 !important;
    filter: brightness(0) invert(1) !important;
}

.widget_media_audio .mejs-time {
    display: flex;
    align-items: center;
    color: #52595A !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    padding: 0 !important;
    box-sizing: border-box;
}

.widget_media_audio .mejs-time-rail {
    flex-grow: 1 !important;
    padding: 0 8px !important;
    height: auto !important;
}

.widget_media_audio .mejs-time-total {
    background: #E4E7E8 !important;
    height: 6px !important;
    border-radius: 4px !important;
    margin: 0 !important;
}

.widget_media_audio .mejs-time-loaded {
    background: rgba(36, 147, 96, 0.15) !important;
    height: 6px !important;
    border-radius: 4px !important;
}

.widget_media_audio .mejs-time-current {
    background: var(--accent-green) !important;
    height: 6px !important;
    border-radius: 4px !important;
}

.widget_media_audio .mejs-time-handle {
    display: block !important;
}

.widget_media_audio .mejs-time-handle-content {
    background: #ffffff !important;
    border: 2px solid var(--accent-green) !important;
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    top: -4px !important;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1) !important;
    transform: scale(0.9);
    transition: transform 0.2s ease;
}

.widget_media_audio .mejs-time-rail:hover .mejs-time-handle-content {
    transform: scale(1.15);
}

.widget_media_audio .mejs-button.mejs-volume-button button {
    opacity: 0.6;
    filter: invert(1) brightness(0.3) !important;
    transition: all 0.3s ease;
}

.widget_media_audio .mejs-button.mejs-volume-button:hover button {
    opacity: 1;
    transform: scale(1.1);
    filter: brightness(0) saturate(100%) invert(42%) sepia(85%) saturate(399%) hue-rotate(106deg) brightness(92%) contrast(90%) !important;
}

.widget_media_audio .mejs-horizontal-volume-slider {
    display: flex !important;
    align-items: center !important;
}

.widget_media_audio .mejs-horizontal-volume-total {
    background: #E4E7E8 !important;
    height: 4px !important;
    border-radius: 2px !important;
}

.widget_media_audio .mejs-horizontal-volume-current {
    background: var(--accent-green) !important;
    height: 4px !important;
    border-radius: 2px !important;
}

.widget_media_audio .mejs-horizontal-volume-handle {
    display: none !important;
}

.widget_media_audio .mejs-time-float {
    display: none !important;
}

/* ==========================================================================
   End Audio Widget
   ========================================================================== */