@import url('../main.css');

.rating-btn-for-popup,
.rating-btn {
    border: none;
    padding: clamp(1px, 0.325vw, 5px);

}

.rating-btn-for-popup .star-icon,
.rating-btn .star-icon{
    width: clamp(1px, 2.275vw, 35px);
    height: clamp(1px, 2.275vw, 35px);
    transition: 0.3s;
}

.rating-btn-for-popup:hover,
.rating-btn:hover {
    background: none;
}

.rating-btn-for-popup:hover .star-icon,
.rating-btn:hover .star-icon {
    color: rgb(229, 11, 85);
}

.rating-btn-for-popup.active,
.rating-btn.active,
.rating-btn-for-popup.active_long {
    color: rgb(229, 11, 85);
}

.rating {
    text-align: center;
    position: relative;
    gap: var(--fs-gap10);
    display: flex;
    flex-direction: column;
}

.rating .star-and-number {
    display: flex;
    align-items: center;
    justify-content: center;
}

.rating .star-and-number.visual {
    gap: var(--fs-gap10);
}

.rating .star-and-number .star-icon{
    width: clamp(1px, 2.275vw, 35px);   
    height: clamp(1px, 2.275vw, 35px);
}

.rating .popup-stars {
    position: absolute;
    z-index: 2000;
    display: flex;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(360deg, #0b172b, #331635);
    padding: var(--fs-padding);
    border-radius: var(--fs-border-radius);
}

.rating .popup-stars .popup-stars-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1px, 0.325vw, 5px);
}

@media (max-width:768px) {
    .rating-btn-for-popup .star-icon,
    .rating-btn .star-icon,
    .page-anime .star-icon,
    .rating .star-and-number .star-icon {
        width: clamp(1px, 8vw, 100px);
        height: clamp(1px, 8vw, 100px);
        transition: 0.3s;
    }


    .rating .star-and-number.visual h3 {
        font-weight: bold;
    }

    .page-anime .dropdown-icon {
        width: clamp(1px, 5.34vw, 100px);
        height: clamp(1px, 5.34vw, 100px);
    }

    .page-anime .dropdown-btn {
        gap: clamp(1px, 0.8vw, 15px);
    }
}