/* new single post design */
.single-categories-section .blog-category-item a:hover{
    text-decoration: underline;
} 
.single-title-div h1.post_title{
    font-size: 48px;
    line-height: 64px;
    margin-bottom: 1.5rem;
}
.author-meta img{
    width: 48px;
    border-radius: 50%;
}
.single-blog-image-div .post_thumbnail{
    border-radius: 40px;
}
.sharing-icons-div .sharing-links img{
    width: 32px;
}
.view-plans-card{
    border-radius: 20px; 
    display: grid;
    gap: 16px;
}
.categories_links{
    overflow-x: auto;
}
.single-blog-content-div .single-blog-content-right{
    width: 100%;
    top: 80px;
    position: sticky;
    min-width: 300px;
    max-width: 300px;
}
.view-plans-card .title{
    font-size: 24px;
    line-height: 34px;
    font-weight: 600;
    text-align: center;
}
.view-plans-card .image img{ 
    border-radius: 20px;
    max-height: 250px;
    margin: 0 auto;
}
.view-plans-card .content{
    text-align: center;
}
.single-blog-content-left h2{
    font-size: 28px;
    line-height: 40px;
}
.single-blog-content-left p{
    margin-bottom: 1.5rem;
}
.single-blog-content-left ul{
    margin-bottom: 1.5rem; 
    list-style: disc;
    list-style-position: outside;
    padding-left: 30px;
}
.single-blog-content-left ol{
    list-style: auto;
    list-style-position: outside;
    padding-left: 30px;
    margin-bottom: 1.5rem; 
}
.blog-search-div svg path{
    stroke: #2a2a2e;
}
.single-categories-section .blog-search-div{
    position: relative;
}
.single-categories-section .blog-search-div .blog_search_form{
    position: absolute;
    right: 0;
    top: 30px;
    min-width: 300px;
    border-radius: 12px;
    border: 1px solid #e2e2e4;
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .08);
    background-color: #FFFFFF;
    padding: 1rem;
    display: none;
}
.single-categories-section .blog-search-div .searchform #s {
    margin-bottom: 10px;
}
.blog-notes-pattern-one{
    border-radius: var(--corners-brand);
    padding: 24px;
    display: grid;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
.blog-notes-pattern-one p{
    margin-bottom: 0;
}
.blog-notes-pattern-one a{
    color: var(--text-brand);
    font-weight: 600;
} 


/* newsletter popup */
/* Overlay */
.blog-newsletter-section.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    display: flex;              /* keep flex */
    justify-content: center;
    align-items: center;
    z-index: 9999;
    padding: 20px;

    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    display: none;
}
.popup-overlay.active {
    opacity: 1;
    visibility: visible;
    display: flex;
}
  
/* Popup Box */
.blog-newsletter-section .popup-content {
    background: url(../img/pink-voye.svg), var(--surface-opposite); 
    background-size: 100% 80%;
    background-repeat: no-repeat;
    background-position: center bottom;
    max-width: 600px;
    width: 100%;
    padding: 30px;
    border-radius: 12px;
    position: relative;
    box-shadow: 0 5px 25px rgba(0,0,0,0.2);
    animation: fadeInUp 0.3s ease;
}
  
/* Close Button */
.blog-newsletter-section .blog-newsletter-close-popup {
    position: absolute;
    top: 12px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
    z-index: 1;
}

.blog-newsletter-section .form-div{
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
}
.blog-related-product-pattern .blog-related-products{
    width: 100%;
}
.blog-related-product-pattern .blog-related-products ul li{
    padding: 20px;
    border: 1px solid var(--border-light);
}
.blog-related-product-pattern .blog-related-products ul li .wp-block-woocommerce-product-image{
    display: none;
}
.blog-related-product-pattern .blog-related-products ul li .title{
    color:var(--surface-brand);
}  
/* Animation */
@keyframes fadeInUp {
    from {
      transform: translateY(40px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
}


/* ======= RTL CSS ======== */
.rtl .home-plans-explore-button .see svg{
    transform: rotate(180deg);
}
.rtl .single-blog-content-left ul{
    padding-left: 0px;
    padding-right: 30px;
}
.rtl .single-blog-content-left ol{
    padding-left: 0px;
    padding-right: 30px;
}

/* Mobile devices */
@media only screen and (max-width:1023.5px){
    .blog-newsletter-section .popup-content {
        max-width: 100%;
        padding: 20px;
    }
    .form-div .phone-img{
        display: none;
    } 
    .categories_links_div{
        display: grid;
        grid-template-columns: 85% 10%;
        gap:8px;
    }
    .categories_links_div ul li{
        width: 100%;
    }
    .single-breadcrumb .breadcrumbs{
        gap: 0px;
    }
    .single-title-div h1.post_title{
        font-size: 28px;
        line-height: 35px;
        margin-bottom: 0px;
    }
    .single-title-div .blog-header{
        display: grid;
        gap: 1rem;
    }
    .single-title-div .blog-header .sharing-icons-div{
        display: flex;
        margin-bottom: 1rem;
        gap: 2px;
        align-items: center;
    }
    .author-meta img {
        width: 30px;
    }
    .single-title-section .single-blog-status-div{
        display: grid;
        gap: 5px; 
        padding: 1rem 0rem 0rem;
    }
    .single-title-section .single-blog-content-div{
        display: grid;
        gap: 0;
    }
    .view-plans-card .title{
        font-size: 22px;
        line-height: 26px;
    }
    .view-plans-card{
        gap: 1rem;
    }
    .home-plans-explore-button .See{
        display: ruby-text;
    } 
    .voye-single-blog .section-blog-popular .popular-product .inner{
        background-color: var(--surface-primary);
    }
    .blog-newsletter-section .form-div{
        grid-template-columns:1fr;
    }
    .single-blog-content-div .single-blog-content-right{
        max-width: 100%;
    }
}

@media only screen and (min-width:767.5px) and (max-width:1023.5px){
    .categories_links_div{
        display: grid;
        grid-template-columns: 85% 5%; 
        gap:8px;
    }
}