.hlg-rating-box{
    max-width:900px;
    margin:32px auto 42px;
    padding:28px 30px;
    background:#ffffff;
    border:1px solid #e5e9f2;
    border-radius:20px;
    box-shadow:0 12px 32px rgba(17,35,70,.07);
    text-align:center;
    box-sizing:border-box;
}

.hlg-rating-title{
    margin:0 0 8px;
    font-size:24px;
    line-height:1.4;
    font-weight:800;
    color:#10213f;
}

.hlg-rating-subtitle{
    margin:0 0 20px;
    font-size:15px;
    line-height:1.7;
    color:#6a768b;
}

.hlg-rating-stars{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    direction:ltr;
    margin:6px 0 14px;
}

.hlg-rating-star{
    appearance:none;
    -webkit-appearance:none;
    width:46px;
    height:46px;
    border:1px solid #d8deea;
    border-radius:12px;
    background:#f7f8fc;
    color:#c4cad5;
    font-size:28px;
    line-height:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:
        transform .15s ease,
        background .15s ease,
        color .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;
}

.hlg-rating-star:hover,
.hlg-rating-star.hover{
    transform:translateY(-2px);
    color:#f4b400;
    background:#fff9e8;
    border-color:#f0cf74;
    box-shadow:0 6px 16px rgba(244,180,0,.14);
}

.hlg-rating-star.active,
.hlg-rating-star.selected{
    color:#f4b400;
    background:#fff8dd;
    border-color:#f0c95f;
}

.hlg-rating-summary{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
    font-size:14px;
    color:#647087;
}

.hlg-rating-value{
    font-weight:800;
    color:#172b4d;
    font-size:17px;
}

.hlg-rating-count{
    margin-inline-start:4px;
}

.hlg-rating-message{
    min-height:22px;
    margin-top:10px;
    font-size:14px;
    font-weight:700;
    color:#2f6f55;
}

/* Arabic */
html[dir="rtl"] .hlg-rating-box,
html[lang="ar"] .hlg-rating-box{
    direction:rtl;
    text-align:center;
}

/* English */
html[lang="en"] .hlg-rating-box{
    direction:ltr;
    text-align:center;
}

/* Mobile */
@media (max-width:768px){
    .hlg-rating-box{
        margin:24px 14px 32px;
        padding:24px 16px;
        border-radius:16px;
    }

    .hlg-rating-title{
        font-size:21px;
    }

    .hlg-rating-subtitle{
        font-size:14px;
    }

    .hlg-rating-stars{
        gap:6px;
    }

    .hlg-rating-star{
        width:42px;
        height:42px;
        font-size:25px;
        border-radius:10px;
    }
}