.manga_card{
    position: relative;
    overflow: hidden;
    width: 160px; /* Changed from vw to fixed px for better control */
    min-width: 120px; /* Minimum width */
    max-width: fit-content;
    flex-grow: 0;
    max-width: 160px;
    
}

.manga{
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: all 0.3s ease;
    max-width: 100%;
}

.manga_content{
    display: flex ;
    flex-direction: column ;
    max-width: 100% ;

}

.manga_title{
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important; 
    -webkit-line-clamp: 1 !important;  
    line-clamp:1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    
    text-wrap: wrap;

    margin-top: 0.5em;
    font-size: 0.9rem; /* Added fixed font size */
}

.manga_image{
    width: 160px;
    aspect-ratio: 7/10;
    transition: all 0.3s ease;
    border-radius: 0.5em;
    overflow: hidden;
    object-position: center !important;
    background-repeat: no-repeat !important;
    object-fit: cover !important;
    background: rgba(var(--primary-color),0.2);
}

.manga:hover .manga_image {
    transform: scale(1.05); 
}

.manga_rating{
    font-size: 0.8rem; /* Changed from em to rem */
    width: fit-content;
    position: relative;
    flex: 1;
    margin-top: 0.3em;
}

.rat1{
    filter: brightness(0) invert(0.8);
}
.rat2{
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
    z-index: 2;
    filter: none;
}

.manga_chapter_container{
    position: relative;
    width: 100%;
    margin-top: 0.5em;
    max-width: 100%;
}

.manga_chapter{
    font-size: 0.8rem;
    margin-top: 0.5em;
    display: block;
    color: rgb(var(--text-color));
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 0.2em;
    align-items: center;
    z-index: 5 !important;
    padding: 0.2em 0;
}

.manga_chapter_date{
    font-size: 0.7rem;
    color: rgb(var(--subtext-color));
    white-space: nowrap;
}


.new_chp_lab{
    font-weight: bold;
    background-color: rgba(255, 0, 0, 0.37);
    border-radius: 0.3em;
    padding: 0.1em 0.2em;
    position: relative;
    overflow: hidden;
    font-size: 0.7rem;
}

.new_chp_lab::after{
    content: '';
    position: absolute;
    height: 110%;
    width: 20%;
    background-color: rgba(var(--text-color),0.3);
    left: -10%;
    top: -5%;
    filter: blur(1px);
    animation: chapter_chine 3s normal infinite;
}

.manga_chapter .chapter{
    background-color: rgba(var(--secondary-color),0.9);
    padding: 0.1em 0.5em;
    border-radius: 0.5em;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.3em;
    font-size: 0.8rem;
}

.manga_chapter .chapter svg{
    width: 0.9em;
    height: 0.9em;
    fill: rgb(216, 40, 40);
    margin-top: 0.1em;
}

.manga_chapter:hover .chapter{
    background-color: rgba(var(--primary-color),0.7);
}

.manga_chapter .chapter::after{
    content: '';
    position: absolute;
    height: 110%;
    width: 20%;
    background-color: rgba(var(--text-color),0.2);
    left: -10%;
    top: -5%;
    filter: blur(1px);
    animation: chapter_chine 3s ease infinite;
    border-radius: 0 100%;
}

.manga_card:hover .manga_wishlist{
    top: 0.5em;
}

.manga_wishlist{
    position: absolute;
    background-color: transparent;
    border: none;
    width: 1.5em;
    aspect-ratio: 1;
    left: 0.5em;
    top: -2em;
    cursor: pointer;
    padding: 0;
    margin: 0;
    fill: rgba(var(--secondary-color),0.8);
    transition: all 0.3s ease;
    z-index: 2;
}

.manga_wishlist svg{
    width: 100%;
    height: 100%;
    transition: all 0.3s ease;
}

.manga_wishlist:hover svg{
    fill: rgb(var(--primary-color));
}

@keyframes chapter_chine {
    0% {transform: translateX(0%);}
    30% {transform: translateX(1100%);}
    100% {transform: translateX(1110%);}
}

.manga_card .addto_list{
    background-color: transparent;
    position: absolute;
    left: 1em;
    top: 0.8em;
    width: fit-content;
    height: fit-content;
    opacity: 0;
    transition: all 0.5s ease;
    z-index: 1;
    display: flex;
    gap: 0.5em;
    transform: translateY(-3em);
}

.manga_card .addto_list button{
    background-color: transparent;
    border: none;
    width: 1.5em;
    height: 1.5em;
    transition: all 0.3s ease;
    cursor: pointer;
    box-sizing: border-box;
    padding: 0;
}

.manga_card .addto_list svg{
    width: 100%;
    height: 100%;
    fill: rgb(var(--text-color));
    transition: all 0.3s ease;
}

.manga_card .addto_list button svg:hover{
    fill: rgb(var(--secondary-color));
}

.manga_card:hover .addto_list{
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 1024px){
    .manga_card{
        max-width: 150px;
    }
}
/* Responsive adjustments */
@media (max-width: 768px) {
    .manga_card {
        width: 100px;
        min-width: 100px;
        max-width: 130px;
    }
    
    .manga_title {
        font-size: 0.8rem;
    }
    
    .manga_chapter {
        font-size: 0.7rem;
    }
    
    .manga_chapter_date {
        font-size: 0.6rem;
    }
    .manga_chapter .chapter {
        padding: 0.1em 0.3em;
    }
    .manga_chapter .watched_chapter{
        background-color: rgb(95, 165, 95) !important;
    }
    .manga_chapter .chapter .chapter_svg{
        display: none;
    }
}

@media (max-width: 480px) {
    .manga_card {
            width: 90px;
            min-width: 90px;
            max-width: 100px;
    }
    
    .manga_title {
        font-size: 0.75rem;
    }
    
    .manga_rating {
        font-size: 0.7rem;
    }
    
    .manga_chapter .chapter {
        padding: 0.1em 0.3em;
    }
}