/* Basic Star Rating CSS */
.simplestarcomment-module .star-rating-container {
    margin-bottom: 15px;
}

.simplestarcomment-module .star-rating {
    display: inline-block;
    font-size: 1.8em; /* Adjust size */
    direction: rtl; /* Right-to-left */
    unicode-bidi: bidi-override; /* Override text direction */
}

.simplestarcomment-module .star-rating input[type="radio"] {
    display: none; /* Hide the actual radio button */
}

.simplestarcomment-module .star-rating label {
    display: inline-block;
    color: #ddd; /* Color of empty stars */
    font-size: 30px;
    cursor: pointer;
    margin: 0 1px; /* Spacing between stars */
    transition: color 0.2s ease-in-out;
}


/* Style stars when hovered or checked (up to the hovered/checked one) */
/* The ~ selector selects siblings that appear AFTER the element */
/* Due to rtl direction, this correctly colors stars from right to left */
.simplestarcomment-module .star-rating input[type="radio"]:checked ~ label,
.simplestarcomment-module .star-rating input[type="radio"]:hover ~ label {
     color: #f5c518; /* Color of selected/hovered stars */
}

/* Optional: Style form elements */
.simplestarcomment-module .form-group {
    margin-bottom: 1rem;
}
.simplestarcomment-module label {
    display: block;
    margin-bottom: .5rem;
    font-weight: bold;
}
.simplestarcomment-module textarea.form-control {
    display: block;
    width: 95%; /* Adjust as needed */
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
/* Add styles for .btn .btn-primary if your template doesn't define them */
.simplestarcomment-module .btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.simplestarcomment-module .btn-primary {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}
.simplestarcomment-module .btn-primary:hover {
    color: #fff;
    background-color: #0056b3;
    border-color: #004085;
}
.simplestarcomment-thankyou {
    padding: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
}
.simplestarcomment-thankyou.alert-success {
     color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}