/* Prevent background scroll on all devices */
.no-scroll {
    overflow: hidden;
    position: fixed; /* Locks scroll position on mobile and tablet */
    width: 100%;
}

/* Star Rating Container */
#ssr-rating {
    font-size: 24px;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
}

/* Stars */
#ssr-rating .ssr-star {
    color: #ddd;
    cursor: pointer;
    font-size: 2em;
    margin-right: 5px;
    transition: font-size 0.2s ease;
    -webkit-user-select: none; /* For Safari */
    -moz-user-select: none;    /* For Firefox */
    -ms-user-select: none;     /* For Internet Explorer */
    user-select: none;         /* Standard syntax */
}
#ssr-rating .ssr-star.selected {
    color: #FFD700; /* Gold for selected stars */
}
#ssr-rating .ssr-star.hovered {
    color: #FFD700; /* Red for hovered stars */
}

/* Rating Counter */
#ssr-rating-counter {
    margin-left: 10px;
    font-size: 1.5em;
    color: #333;
    display: none; /* Hidden by default */
}

/* Popup */
#ssr-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: none;
    border-radius: 8px;
    text-align: center;
    width: 50%; /* Default width for desktop */
    max-width: 800px;
    max-height: 80vh; /* Maximum height at 80% of viewport height */
    overflow-y: auto; /* Enables vertical scroll within the popup if content overflows */
}

#ssr-popup input{
display: inline-block;
}

/* Close Button for Popup */
#ssr-close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 18px;
    color: #333;
    cursor: pointer;
}
#ssr-close-button:hover {
    color: #FF4500; /* Color on hover */
}

/* Responsive Styles */
@media (max-width: 768px) {
    #ssr-popup {
        width: 80%; /* 80% width for tablet and mobile */
    }
    #ssr-rating {
        font-size: 20px; /* Smaller font for stars on tablet */
    }
    #ssr-rating .ssr-star {
        font-size: 2.5em; /* Smaller stars */
        margin-right: 3px;
    }
}

@media (max-width: 480px) {
    #ssr-rating {
        font-size: 18px; /* Further reduce font size on smaller mobile screens */
    }
    #ssr-rating .ssr-star {
        font-size: 3.5em; /* Even smaller stars for mobile */
        margin-right: 2px;
    }
}