.mn-lazy-posts-widget {
    position: relative;
    width: 100%;
}

.mn-lazy-posts-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mn-lazy-post-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    transition: background-color 0.3s ease;
}

.mn-lazy-post-item.no-border {
    border-bottom: none;
}

.mn-lazy-post-item:last-child {
    border-bottom: none;
}

.mn-lazy-post-item:hover {
    background-color: transparent; /* Changed to allow parent color or set explicitly */
}

/* Add hover effect only if no custom background set, 
   but since we are using Elementor controls, let's keep it simple.
   Elementor selector will override this if set.
*/


.mn-lazy-post-icon {
    margin-left: 10px; /* RTL support */
    color: #e74c3c; /* Example color */
    font-size: 1.2em;
    min-width: 24px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* RTL Support */
body.rtl .mn-lazy-post-icon {
    margin-left: 10px;
    margin-right: 0;
}

body:not(.rtl) .mn-lazy-post-icon {
    margin-right: 10px;
    margin-left: 0;
}

.mn-lazy-post-title {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    text-decoration: none;
    flex-grow: 1;
    transition: color 0.3s ease;
    line-height: 1.4;
}

.mn-lazy-post-title:hover {
    color: #e74c3c;
}

.mn-lazy-load-more {
    text-align: center;
    margin-top: 20px;
}

.mn-load-more-btn {
    display: inline-block;
    padding: 8px 25px;
    background-color: #f5f5f5;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 13px;
    font-weight: 600;
}

.mn-load-more-btn:hover {
    background-color: #e74c3c;
    color: #fff;
    border-color: #e74c3c;
}

/* Loading Animation */
.mn-lazy-loader {
    display: none;
    text-align: center;
    padding: 20px 0;
}

.mn-spinner {
    width: 30px;
    height: 30px;
    margin: 0 auto;
    background-color: #e74c3c;
    border-radius: 100%;  
    -webkit-animation: mn-scaleout 1.0s infinite ease-in-out;
    animation: mn-scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes mn-scaleout {
    0% { -webkit-transform: scale(0) }
    100% {
        -webkit-transform: scale(1.0);
        opacity: 0;
    }
}

@keyframes mn-scaleout {
    0% { 
        -webkit-transform: scale(0);
        transform: scale(0);
    } 100% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
        opacity: 0;
    }
}