.asm-blog-advanced-wrapper {
width: 100%;
} .asm-category-filter-wrapper {
display: flex;
flex-direction: row;
gap: 40px;
justify-content: space-between;
margin-bottom: 40px;
}
@media only screen and (max-width:480px){
.asm-category-filter-wrapper {
flex-direction: column;
gap: 0;
}
.asm-hidden-categories {
flex-wrap: wrap;
}
}
.asm-category-filter {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 10px !important;
}
.asm-filter-btn {
font-family: 'Balto', sans-serif;
font-size: .875em;
font-weight: 500;
color: #32327B;
padding: 10px 20px;
background: transparent;
border: 2px solid var(--asm-magenta);
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.asm-filter-btn:hover,
.asm-filter-btn.active {
border-color: #4650C8;
color: #fff;
background: #4650C8;
} .asm-hidden-categories {
display: flex;
gap: 10px;
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height 0.4s ease-in-out, 
opacity 0.3s ease-in-out;
}
.asm-hidden-categories.expanded {
max-height: 2000px;
opacity: 1;
} .asm-show-more-categories {
font-family: 'Balto', sans-serif;
font-size: .875em;
font-weight: 500;
color: #4650C8;
padding: 10px 20px;
background: transparent;
border: 2px dashed var(--asm-magenta);
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease-in-out;
display: inline-flex;
align-items: center;
gap: 8px;
height: 40px;
}
.asm-show-more-categories:hover {
border-style: solid;
border-color: #4650C8;
background: #4650C8;
color: #fff;
}
.asm-show-more-categories .asm-toggle-icon {
font-size: 10px;
transition: transform 0.3s ease-in-out;
display: inline-block;
} .asm-posts-container {
transition: opacity 0.3s ease;
min-height: 200px;
} .asm-load-more-wrapper {
padding: 30px 0;
}
.asm-load-more-btn {
font-family: 'Balto', sans-serif;
font-size: 1em;
font-weight: 500;
color: #ffffff;
text-transform: capitalize;
padding: 10px 30px;
background: #4650C8;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.asm-load-more-btn:hover {
background: #32327B;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.asm-load-more-btn.loading {
opacity: 0.7;
cursor: not-allowed;
pointer-events: none;
}
.asm-load-more-btn.loading::after {
content: '';
display: inline-block;
width: 14px;
height: 14px;
margin-left: 10px;
border: 2px solid #fff;
border-top-color: transparent;
border-radius: 50%;
animation: spinner 0.6s linear infinite;
}
@keyframes spinner {
to {
transform: rotate(360deg);
}
} @media (max-width: 768px) {
.asm-category-filter {
gap: 8px;
}
.asm-filter-btn {
padding: 8px 16px;
font-size: 13px;
}
.asm-show-more-categories {
padding: 8px 16px;
font-size: 13px;
width: 100%;
justify-content: center;
margin-top: 8px;
}
.asm-load-more-btn {
padding: 10px 30px;
font-size: 14px;
}
} .asm-posts-container > div > p {
font-family: 'Balto', sans-serif;
text-align: center;
padding: 40px 20px;
font-size: 16px;
color: #666;
}