/* =====================================================
   SIMPSONSUA PREMIUM RATING V2
===================================================== */

.su-rating-box{

    display:flex;

    align-items:center;

    gap:36px;

    padding:26px 32px;

    margin:25px 0;

    background:linear-gradient(180deg,#111a2a,#0f1827);

    border:1px solid rgba(255,255,255,.06);

    border-radius:22px;

    box-shadow:0 8px 28px rgba(0,0,0,.22);

}

.su-rating-left{

    width:300px;

    flex-shrink:0;

}

.su-rating-title{

    color:#fff;

    font-size:42px;

    font-weight:800;

    line-height:1.05;

    margin-bottom:18px;

}

.su-rating-desc{

    color:#aeb7c8;

    font-size:20px;

    line-height:1.6;

    margin-bottom:24px;

}

.su-rating-score{

    display:flex;

    align-items:center;

    gap:18px;

    padding:18px 22px;

    border-radius:18px;

    background:rgba(255,255,255,.035);

    border:1px solid rgba(255,255,255,.07);

}

.su-rating-icon{

    width:74px;

    height:74px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:60px;

    color:#FFD54A;

    text-shadow:0 0 18px rgba(255,210,60,.45);

    flex-shrink:0;

}

.su-rating-score-info{

    display:flex;

    flex-direction:column;

}

.su-rating-value{

    color:#fff;

    font-size:58px;

    font-weight:800;

    line-height:1;

}

.su-rating-votes{

    margin-top:8px;

    color:#b5bfce;

    font-size:18px;

    font-weight:500;

}

/* ==========================================
   ПРАВА ЧАСТИНА
========================================== */

.su-rating-right{

    flex:1;

    padding-left:34px;

    border-left:1px solid rgba(255,255,255,.08);

}

.su-rate-title{

    color:#fff;

    font-size:34px;

    font-weight:800;

    margin-bottom:22px;

}

.su-rate-text{

    margin-top:18px;

    color:#9da8ba;

    font-size:18px;

    line-height:1.5;

}

/* ==========================================
   ЗІРКИ
========================================== */

.su-rate-stars{

    display:flex;

    align-items:center;

    gap:10px;

}

.su-star{

    display:flex;

    align-items:center;

    justify-content:center;

    width:58px;

    height:58px;

    font-size:52px;

    color:#555d6c;

    text-decoration:none !important;

    transition:all .18s ease;

    cursor:pointer;

    user-select:none;

}

.su-star:hover{

    color:#ffd54a;

    transform:scale(1.16);

    text-shadow:
        0 0 10px rgba(255,213,74,.7),
        0 0 22px rgba(255,213,74,.35);

}

/* Заповнення попередніх зірок */

.su-rate-stars:has(.s1:hover) .s1,

.su-rate-stars:has(.s2:hover) .s1,
.su-rate-stars:has(.s2:hover) .s2,

.su-rate-stars:has(.s3:hover) .s1,
.su-rate-stars:has(.s3:hover) .s2,
.su-rate-stars:has(.s3:hover) .s3,

.su-rate-stars:has(.s4:hover) .s1,
.su-rate-stars:has(.s4:hover) .s2,
.su-rate-stars:has(.s4:hover) .s3,
.su-rate-stars:has(.s4:hover) .s4,

.su-rate-stars:has(.s5:hover) .su-star{

    color:#ffd54a;

    text-shadow:
        0 0 10px rgba(255,213,74,.7),
        0 0 22px rgba(255,213,74,.35);

}

/* ==========================================
   HOVER КАРТКИ
========================================== */

@media (hover:hover) and (pointer:fine){

    .su-rating-box{

        transition:
            transform .22s ease,
            box-shadow .22s ease;

    }

    .su-rating-box:hover{

        transform:translateY(-2px);

        box-shadow:
            0 16px 40px rgba(0,0,0,.25);

    }

}

/* ==========================================
   МОБІЛЬНА ВЕРСІЯ
========================================== */

@media (max-width:700px){

    .su-rating-box{

        flex-direction:column;

        align-items:stretch;

        gap:22px;

        padding:20px;

    }

    .su-rating-left{

        width:100%;

    }

    .su-rating-right{

        width:100%;

        padding:22px 0 0;

        border-left:0;

        border-top:1px solid rgba(255,255,255,.08);

    }

    .su-rating-title{

        font-size:28px;

        margin-bottom:12px;

    }

    .su-rating-desc{

        font-size:15px;

        line-height:1.45;

        margin-bottom:18px;

    }

    .su-rating-score{

        padding:14px 16px;

    }

    .su-rating-icon{

        width:56px;

        height:56px;

        font-size:42px;

    }

    .su-rating-value{

        font-size:42px;

    }

    .su-rating-votes{

        font-size:15px;

    }

    .su-rate-title{

        font-size:22px;

        margin-bottom:14px;

    }

    .su-rate-stars{

        justify-content:center;

        gap:6px;

    }

    .su-star{

        width:42px;

        height:42px;

        font-size:38px;

    }

    .su-rate-text{

        margin-top:14px;

        font-size:14px;

        text-align:center;

    }

}

/* ==========================================
   DLE
========================================== */

.su-rating-box *{

    box-sizing:border-box;

}

.su-rating-box a{

    -webkit-tap-highlight-color:transparent;

}

.su-rating-box img{

    user-select:none;

    -webkit-user-drag:none;

}

/* ==========================================
   COMPACT RATING
========================================== */

.su-rating-box{

    gap:24px;

    padding:22px 26px;

}

.su-rating-left{

    width:250px;

}

.su-rating-title{

    font-size:28px;

    margin-bottom:14px;

    line-height:1.15;

}

.su-rating-desc{

    font-size:16px;

    line-height:1.55;

    margin-bottom:18px;

}

.su-rating-score{

    gap:14px;

    padding:14px 16px;

}

.su-rating-icon{

    width:58px;

    height:58px;

    font-size:46px;

}

.su-rating-value{

    font-size:40px;

}

.su-rating-votes{

    margin-top:4px;

    font-size:15px;

}

.su-rating-right{

    padding-left:24px;

}

.su-rate-title{

    font-size:26px;

    margin-bottom:16px;

}

.su-rate-stars{

    gap:8px;

}

.su-star{

    width:44px;

    height:44px;

    font-size:38px;

}

.su-rate-text{

    margin-top:12px;

    font-size:15px;

}