/* ================================ HYVABLOG.CSS FROM MY SIDE Start ======================================== */

body[class*="mbblog-"][class*="page-layout-2columns-"] main .sidebar-main { width: 22%; display: block;}
body[class*="mbblog-"][class*="page-layout-2columns-"] main .column.main { width: 78%; display: block; }

.mb-post-info a.mb-info:hover,
.post-list-content .mb-post-title a:hover { text-decoration: underline; }
.mbblog-post-view .about-admin h2, 
.mbblog-post-view .topic-list h2, 
.mbblog-post-view .blog-comment h2, 
.mbblog-post-view .products-same-post h2 {
    margin-bottom: 16px;
}
.mb-post-list .post-item-list .post-image img {
    width: 100%;
    height: auto; 
    object-fit: cover;
    transition: transform 500ms ease;
}
.mb-post-list .post-item-list:hover .post-image img {
    transform: scale(1.1);
}
.mb-blog-view .post-view-image img {
    min-width: 800px;
}
.topic-list #card-carousel .post-list-item { height: 100%; background: #fff; }
/* post view details content */
.mb-blog-view .post-post_content {
    line-height: 30px;
}

/* Tags, Topics and Admin alse Author section  */
.mbblog-post-view .mb-post-list .mb-post-info {
    font-size: 14px;
    gap: 7px;
    margin: 10px 0;
}
/* Review section  */
.mbblog-post-view .column.main .mb-post-list {
    margin: 20px 0px;
}
/* grid view for review section in related posts */
.topic-list .related-content-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}
/* author-content-information */
.mbblog-post-view .block-blog-related .about-admin {
    margin-bottom: 12px;
}
.block-blog-related .related-content-container .author-content-information {    
    width: calc(100% - 155px);
}
/* Related post information details sections */
.topic-list .post-info-wraper { padding: 0px; }
.topic-list .post-info-wraper h2 { border: none; }
.topic-list .mb-post-info {
    line-height: 18px;
    margin: 0;
}
.topic-list .post-image {
    position: relative;
}
/* SIDEBAR POST BLOCK CARD POPULAR/RECENT */
.sidebar .mbblog-search {
    display: flex;
    align-items: center;
    gap: 10px; margin-bottom: 0;
}
.sidebar .mbblog-search .actions .search {
    display: flex;
    align-items: center;
    height: 38px;
    padding: 10px;
    border: 1px solid #ddd;
    background: rgb(238, 238, 238);
    border-radius: 5px;
    margin-bottom: 7px;
}
.sidebar .control { width: 100%;  }
.sidebar #mbblog-search-box { width: 100%; }
.sidebar .product.data.items {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #ddd;
}

/* Hide Alpine elements before JS loads */
[x-cloak] {
    display: none !important;
}
/* Tabs header */
.sidebar .blog-tabs-header {
    display: flex; width: 100%;
    border-bottom: 1px solid #ddd;
}
/* Tab buttons */
.sidebar .blog-tabs-header .tab-btn {
    width: 50%;
    padding: 10px;
    background: #f8fafc;
    border: none;
    cursor: pointer;
    font-weight: 600;
    text-align: center;
}
/* Active tab */
.sidebar .blog-tabs-header .tab-btn.active {
    background: #fff;
    border-bottom: 2px solid #000;
}
/* Tab content */
.sidebar .tab-content {
    padding: 15px;
}
/* Post item */
.sidebar .list-post-tabs:last-child {
    border-bottom: none;
}
/* Post image */
.sidebar .post-left img {
    border-radius: 6px;
}
/* Post text */
.sidebar .list-post-tabs .post-right { padding-bottom: 10px; }
.sidebar .list-post-tabs .post-right span:hover { text-decoration: underline; }

/* SUB CATEGORY */
.sidebar .categories-items-list ul ul {
    padding-left: 15px;
    margin-top: 8px;
}
/* ADD LEFT BORDER INDICATOR */
.sidebar .menu-categories li a::before,
.sidebar .categories-items-list li a::before {
    content: "";
    width: 4px;
    height: 0%;
    background: #37ae52;
    position: absolute;
    left: 0;
    top: 0;
    transition: 0.3s;
    border-radius: 3px;
}
.sidebar .menu-categories li a:hover::before,
.sidebar .categories-items-list li a:hover::before {
    height: 100%;
}
.sidebar .menu-categories li.category-item .mb-category-toggle i {
    margin-top: 4px; right: 0; top: 4px; left: unset; font-size: 14px; cursor: pointer;
}
.sidebar .menu-categories .category-item .category-children {
    padding-left: 18px;
}
/* TAB CONTENT */
.sidebar .list-post-tabs:last-child {
    border-bottom: 0;
    margin-bottom: 0;
   padding-bottom: 0;
}
/* image */
.sidebar .post-left img {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
}

/* Sharing button in view page */
.mbblog-post-view #sharing {
    margin-bottom: 15px;
}
/* related post topic pages */
.mbblog-post-view .related-post-slider {
    margin-bottom: 45px;
}
/* Comment section code  */
/* Inside the files css that not removed */

.blog-comment .mbblog-comment-username .username{
    font-weight: 600;
    color: #000000;
    padding-bottom: 6px;
    border-bottom: 2px solid #000;
}

.blog-comment .mbblog-comment-createdate {
    font-size: 14px;
    color: #5c5656;
}
.blog-comment .mbblog-comment-submitbtn { color: #fff; }
.blog-comment  a.mbblog-comment-action-btn.mbblog-like { color: #333333 }

/* Review buttons css */

.products-same-post .product-items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px 15px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.products-same-post .rating-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
}
.products-same-post .actions-primary .action.tocart {
    background: #000;
    margin-bottom: 12px;
    margin-top: 0px;
}
.products-same-post .actions-primary {
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Author page details minor change */
.mbblog-author-details .share-col-left h5 {
    margin-bottom: 0px;
}
.mbblog-author-details .share-col-right {
    margin: 10px 0px;
}
.about-admin .related-content-container { margin-bottom: 24px; }

.product-item-info:hover, .products-grid .product-item-info.active { 
    box-shadow: none;
    border: 1px solid #ddd;
}
/* post list list view for block pages */
.column.main .post-list-content .post-list-item { background: #fff; }
.products-grid .grid-column-2 { display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px; 
}
.products-grid .grid-column-3 { display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px; 
}
.products-grid .grid-column-4 { display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px; 
}
.column .products-grid .post-image {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border-radius: 10px 10px 0 0;
}
.column .products-grid .post-image img {
    transition: transform 0.5s ease;
    border-radius: 10px 10px 0 0;
}
.column .post-item-grid:hover .post-image img {
    transform: scale(1.05);
}
.column .products-grid .post-image img {
    width: 100%;
    max-width: 100%;
}
.column .products-grid .post-info .details-sharing {
    display: flex; 
    border-top: 1px solid #ddd;
    margin-top: 20px;
    padding-top: 8px;
}
.column .products-grid .mb-post-meta-info {
    margin-top: 10px;
}

.column .products-grid .details-sharing #sharing {
    margin: 0;
    justify-content: space-between
}
.column .products-grid .mb-post-list .post-info {
    padding: 0px;
}
.mb-post-list hr { border-top: 1px solid #ccc; margin-bottom: 16px; margin-top: 16px; }
.topic-list .related-post-slider .mb-post-title .post-link-title {
    font-weight: 600;
}
/* footer pagination code */
.mbblog-posts-number { display: flex; justify-content: space-between; gap: 12px;}
.mbblog-pagination { display: flex; align-items: center; justify-content: end;}
.mbblog-posts-number .post-numbers p { display: flex; align-items: center; justify-content: flex-start; }
/* products related product code */
.products-same-post { margin-bottom: 25px; }
.products-same-post .splide__pagination { bottom: -2.5em; }

.mbblog-product-slider {  min-height: 545px; }
.products-same-post #products-carousel-track { margin-top: 25px; }
.products-same-post .splide__pagination__page.is-active {  background: #6b6b6bff }

/*========================================== Hyva theme frontend form-field section design ==========================================*/
/*CMS home page list showing for blog page design */
.cms-home .post-list-container .post-item-wraper {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #e9eaec;
    border-radius: 7px;
    box-shadow: none;
    position: relative;
}
.cms-home .post-list-container .post-image {
    max-width: 370px;
    min-width: 370px;
    height: auto;
    overflow: hidden;
    display: block;
}
.cms-home .post-list-container .post-info-wraper {
    width: 100%;
}
.cms-home .post-list-container .mb-post-title h2{
    margin: 0px 0px 12px 0px;
    font-weight: 600;
}
.cms-home .post-list-container .mb-post-info {
    color: #313131;
    font-size: 14px;
    line-height: 17px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin: 10px 0;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
}
.cms-home .post-list-container .mb-post-meta-info.mb-alignright {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: end;
}
.cms-home .post-list-container .actions {
    margin: 24px 12px 0px 0px;
}
.mbblog-post-history .column.main .popup-container {
    width: 98%; max-width: 1000px;
}
.add-post-form .mb-field, 
.author-form .mb-field, 
.author-form .mb-field { margin-top: 25px; display: flex; gap: 8px;}
.add-post-form .mb-field .control { align-items: flex-start; width: 100%; }
.add-post-form .mb-field .control .input-file[type="file"],
.author-form .mb-field .control .input-file[type="file"],
.author-form .mb-field .control .input-file[type="file"] {
    border: 1px solid #8aa1bd;
    padding: 8px 5px;
    border-radius: 8px;
    margin-right: 20px;
    width: 100%;
}
.author-form .mb-field .control .mb_full_url,
.author-form .mb-field .control .mb_full_url,
.add-post-form .mb-field .control .mb_full_url {
    border: 1px solid #8aa1bd;
    padding: 8px 5px;
    border-radius: 8px;
    width: 100%;
    display: inline-flex;
}
.author-form .post-status {
    padding: 9px 20px;
    border-radius: 8px;
}
.add-post-form .mb-field .label { width: 30%; }
.mbblog-post-history .sidebar.sidebar-main:before { content: unset !important; }
.mbblog-author-signup .author-form, .mbblog-author-information .author-form {
    background: #fff;
    border-radius: 8px;
    border: 1px solid #ccc;
}
.post-list-body .image-content {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-top: 40px;
    border-top: 1px solid #ddd;
    padding-top: 10px;
}
.mbblog-post-history .post-list-content .post-item-wraper {position: relative;}
.mbblog-author-information .column.main .mb-blog-new-post .btn-primary {  display: flex;}
/* post list section */
.mbblog-post-history .post-list-content .modal-header.mb-3 h3 {
    padding: 0 0 9px 0;
}
.mbblog-post-history .mb-blog-new-post .post-list-content #mb-blog-new-post-popup {
    padding: 20px;
}
.mbblog-post-history .post-list-content .mb-post-title a {
    font-size: 22px;
    font-weight: 500;
}
.mbblog-post-history .post-list-content .post-item-wraper {
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 5px;
}
.mbblog-post-history .post-list-content .mb-post-info {
    margin: 10px 0;
    flex-wrap : wrap;
    display: flex;
    gap: 5px;
}
.mbblog-post-history .post-list-content .mb-post-info i {
    margin-top: 3px;
}
.sidebar .blog-content-nav li { margin-bottom: 8px; }
.mbblog-post-history #mb_blog_post_form form{ margin: 0px 10px; }
.mbblog-post-history #mb-blog-new-post-popup { padding: 20px; }  
.mb-blog-new-post {  height: 60px; }
.post-info-action div { cursor: pointer; }
/* Inline css that need to remove from php files */
.product-item .price-box { margin: 10px 0 25px; }
.product-item-info:hover .btn.btn-primary { display: block;  }
.products-grid .product-item-actions { margin: -10px 0 10px;}
.topic-list .splide__pagination { bottom: -2.2em;}
.topic-list .splide__arrow { display: none !important; }
.topic-list .splide__pagination__page.is-active {  background: #6b6b6bff }
.mb-blog-owl-carousel .splide,
.relatedposts-list a:visited, 
.relatedposts-list .alink:visited { color: #37ae52;  text-decoration: none;}
.mb-blog-owl-carousel .splide a:hover, 
.mb-blog-owl-carousel .splide .alink:hover { text-decoration: underline; }
.mbblog-product-slider .item.post-list-item { width: 100%; }
.mbblog-product-slider .splide__arrow,
.topic-list.splide__arrow { display: none !important; }
.blog-comment .helpdesk_email { display: none !important; }
.blog-comment .contactformpro_email { display: none !important; }
.blog-comment  a.white-space-pre-line { white-space: pre-line; }
/* Admin category code that tacking form .phtml file */
.admin__action-multiselect-crumb .action-close:before { top: -6px; right: 8px;  }
.admin__action-multiselect-menu-inner-item._root .action-menu-item .admin__action-multiselect-label:before {
    content: '\f846'; font-family: 'porto-icons'; }
.admin__action-multiselect-dropdown:before {  content: '\f803'; font-family: 'porto-icons'; }
.admin__action-multiselect-tree .action-menu-item._expended .admin__action-multiselect-dropdown:before {
     right: 5px; position: absolute; content: '\f800'; font-family: 'porto-icons'; }
/* Design.phtml file css blocks */
.sidebar-info .list-post-tabs a { background: #fbfbfb; }
.sidebar-info a.label.label-default.tags-list:hover,
.sidebar-info a.label.label-default.tags-list:focus { color: #fff; }

.add-post-form .treeselect-input { padding-left: 8px; }
.mbblog-post-popup .modal-header h3 { padding-bottom: 5px; }


@media(min-width:1440px) and (max-width:1640px) { 
    .mbblog-post-view .topic-list .post-item-wraper { display: block; }
    .mbblog-post-view .topic-list .post-image { min-width: auto; }
}
@media(min-width:1280px) and (max-width:1440px) {
    .mbblog-post-view .topic-list .post-item-wraper { display: block; }
    .mbblog-post-view .topic-list .post-image { min-width: auto; }
    .column .products-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media(min-width:1024px) and (max-width:1279px) {
    .column .products-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .mbblog-post-view .topic-list .post-item-wraper { display: block; }
    .mbblog-post-view .topic-list .post-image { min-width: auto; }
    .products-grid .grid-column-4 { grid-template-columns: repeat(3, 1fr); gap: 12px; }
 }
@media (min-width: 768px) and (max-width: 1023px) {    
    body[class*="mbblog-"][class*="page-layout-2columns-"] main .sidebar-main { width: 30%; }
    body[class*="mbblog-"][class*="page-layout-2columns-"] main .column.main { width: 70%; }

    body[class*="mbblog-"][class*="page-layout-2columns-"] main .columns { gap:20px; }
    .products-same-post .product-items { grid-template-columns: repeat(3, 1fr); gap: 30px 15px; }
    .topic-list .related-content-container { grid-template-columns: repeat(2, 1fr); gap: 15px; }
    .products-grid .grid-column-4, .products-grid .grid-column-3 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .mb-blog-view .post-view-image img { min-width: auto; }
    .mb-blog-new-post .delete-container { padding: 20px 20px; width: 90%; }
    .mbblog-post-history .column.main .popup-container { max-width: 880px; }
    .blog-comment .mbblog-comment-details.row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .mbblog-post-view .topic-list .post-item-wraper { display: block; }
    .mbblog-post-view .topic-list .post-image { min-width: auto; }
    .mb-blog-view .post-view-image img { min-width: auto; }
    .mb-blog-new-post .delete-container { padding: 20px 20px; width: 90%; }
    .mbblog-post-history .column.main .popup-container { width: 96%; }
    .topic-list .related-content-container { grid-template-columns: repeat(1, 1fr); gap: 15px; }
    .block-blog-related .related-content-container .author-content-information { width: auto; }
    .blog-comment .mbblog-comment-details.row { grid-template-columns: repeat(2, 1fr); }
    .products-grid .grid-column-3, .products-grid .grid-column-4 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .products-same-post .product-items { grid-template-columns: repeat(2, 1fr); gap: 30px 15px; }
    .mbblog-post-history .page-title { margin-bottom: 24px; }
    .add-post-form .mb-field .control { width:100%; flex-direction: column;  gap: 14px; }
    .add-post-form .mb-field .control .delete-image { width: 100%; }
 
    body[class*="mbblog-"][class*="page-layout-2columns-"] main .sidebar-main { width: 100%; order: 1; grid-column: span 2/span 2; }
    body[class*="mbblog-"][class*="page-layout-2columns-"] main .column.main { width: 100%; }
    body[class*="account"][class*="mbblog-post-history"] main .sidebar-main,
    body[class*="account"][class*="mbblog-author-information"] main .sidebar-main,
    body[class*="mbblog-author-signup"][class*="page-layout-2columns-"] main .sidebar-main  {
        width: 100%;
        order: 0 ;
    }
    
}
@media (max-width: 575px) { 
    .mb-blog-view .post-view-image img { min-width: auto; }
    .products-same-post .splide__pagination { bottom: -24px; }
    .post-list-content .products-grid .details-sharing #sharing {  margin-top: 10px; }
    .column .products-grid { grid-template-columns: repeat(1, 1fr); gap: 8px; }
    .mb-footer span.mb-footer-links-light h3 { min-width: 308px; }
    .add-post-form .mb-field { flex-direction: column; }
    .post-list-body .image-content { flex-direction: column; }
    .add-post-form .mb-field .label { width: auto; }
}
@media (max-width: 480px) { 
    .blog-comment .mbblog-comment-details.row { grid-template-columns: 1fr; }
    .blog-comment .mbblog-comment-field-full { grid-column: span 1; }
    .post-list-content .products-grid .details-sharing #sharing {  margin-top: 10px; }
    .column .products-grid { grid-template-columns: repeat(1, 1fr); gap: 8px; }
    .products-grid .grid-column-4, .products-grid .grid-column-2,
    .products-grid .grid-column-3 { grid-template-columns: repeat(1, 1fr); gap: 12px; }
    .products-same-post .product-items { grid-template-columns: repeat(1, 1fr); gap: 30px 15px; }
}

/* ================================ HYVABLOG.CSS FROM MY SIDE End ======================================== */