.loading-posts {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 30px 20px;
background: transparent;
}

.loading-posts.hidden {
display: none;
}

.loading-spinner {
width: 32px;
height: 32px;
border: 3px solid rgba(255, 255, 255, 0.2);
border-top: 3px solid #7b88ff;
border-radius: 50%;
animation: spin 0.8s linear infinite;
margin-bottom: 12px;
}

.loading-text {
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
font-weight: 500;
text-align: center;
}

@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

@keyframes pulse {
0%, 80%, 100% {
transform: scale(0.8);
opacity: 0.5;
}
40% {
transform: scale(1);
opacity: 1;
}
}

@keyframes progress {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}

.loading-posts-minimal {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
background: linear-gradient(135deg, rgba(123, 136, 255, 0.08) 0%, rgba(26, 31, 46, 0.6) 50%, rgba(123, 136, 255, 0.08) 100%);
background-size: 200% 200%;
backdrop-filter: blur(10px);
border-radius: 12px;
margin: 15px 0 0 0;
border: 1px solid rgba(123, 136, 255, 0.2);
animation: fadeInUp 0.3s ease-out, shimmer 3s ease-in-out infinite;
box-shadow: 0 4px 12px rgba(123, 136, 255, 0.1);
}

.loading-spinner-small {
width: 32px;
height: 32px;
border: 3px solid rgba(123, 136, 255, 0.2);
border-top: 3px solid #7b88ff;
border-right: 3px solid #9f7aea;
border-radius: 50%;
animation: spin 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
margin-bottom: 12px;
box-shadow: 0 0 15px rgba(123, 136, 255, 0.3);
}

.loading-text-small {
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
font-weight: 500;
text-align: center;
}

.loading-text-small::after {
content: '';
animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
0%, 20% {
content: '';
}
40% {
content: '.';
}
60% {
content: '..';
}
80%, 100% {
content: '...';
}
}

@keyframes shimmer {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}

.loading-posts-fade-in {
animation: fadeInUp 0.3s ease-out;
}

@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

@media (max-width: 768px) {
.loading-posts {
padding: 30px 15px;
}

.loading-spinner {
width: 40px;
height: 40px;
border-width: 3px;
}

.loading-text {
font-size: 14px;
}

.loading-subtext {
font-size: 12px;
}

.loading-progress {
width: 150px;
}
}