.reviews {
    margin-top: 50px;
    padding-bottom: 40px;
    color: var(--font-color-primary);
    font-weight: 400;
}

button {
    background-color: transparent;
    border: none;
}

.reviews__btn {
    width: 100%;
    height: 50px;
    background-color: #D9D9D9;
    border-radius: 5px;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 48px;
    white-space: nowrap;
    border: 1px solid transparent;
    box-sizing: border-box;
}

.reviews__btn:hover,
.reviews__btn:focus {
    background-color: #B0B0B0;
}

.reviews__btn:active{
    background: #3F3F3F;
    color: #ffffff;
}



.reviews__page-title {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    font-family: var(--font-accent);
    -webkit-font-smoothing: antialiased;
    line-height: 140%;
    text-align: center;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}


.reviews__rating {
    text-align: center;
}

.reviews__rating-description {
    font-size: 14px;
    line-height: 120%;
    text-align: center;
    letter-spacing: 0.055em;
    color: #828282;
}

.reviews__rating-number-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    background-image: url('/include/reviews-page/rating-scores_bg.svg');
    background-repeat: no-repeat;
    background-position: center;
}

.reviews__rating-number {
    margin-bottom: 0;
    font-family: var(--font-accent);
    -webkit-font-smoothing: antialiased;
    line-height: 150%;
    text-align: center;
    letter-spacing: -0.03em;
}


.reviews__share-opinion {
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
    max-width: 322px;
    width: 100%;
}

.reviews__share-opinion-descr {
    margin-bottom: 0;
    font-size: 14px;
    line-height: 150%;
    text-align: center;
    letter-spacing: 0.045em;
}


.reviews__opinions-list {
    width: 100%;
    max-width: 570px;
    margin-left: auto;
    margin-right: auto;
}

.reviews__opinions-filters-wrapper {
    position: sticky;
    top: 10px;
}

.reviews__filter,
.reviews__share-opinion-btn--side-bar-desk {
    font-weight: bold;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.reviews__filter {
    color: #A3A3A3;
}

.reviews__filter:hover,
.reviews__filter:focus {
    text-decoration: underline;
}

.reviews__filter.active {
    color: var(--font-color-primary);
}

.reviews__share-opinion-btn--side-bar-desk {
    text-decoration: underline;
}

.reviews__share-opinion-btn--side-bar-desk:hover,
.reviews__share-opinion-btn--side-bar-desk:focus {
    text-decoration: none;
}

.reviews__opinion-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.reviews__opinion-autor {
    font-weight: bold;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    margin-bottom: 0;
}

.personal-rate__star {
    stroke: #3F3F3F;
}

.reviews__opinion-rate .personal-rate__star {
    width: 18px;
    height: 18px;
}

.personal-rate--popup .personal-rate__star {
    cursor: pointer;
    width: 23px;
    height: 23px;
}

.reviews__opinion-rate--1-star .personal-rate__star:nth-child(-n+1),
.personal-rate--1-star .personal-rate__star:nth-child(-n+1) {
    fill: #3F3F3F;
}

.reviews__opinion-rate--2-star .personal-rate__star:nth-child(-n+2),
.personal-rate--2-star .personal-rate__star:nth-child(-n+2) {
    fill: #3F3F3F;
}

.reviews__opinion-rate--3-star .personal-rate__star:nth-child(-n+3),
.personal-rate--3-star .personal-rate__star:nth-child(-n+3) {
    fill: #3F3F3F;
}

.reviews__opinion-rate--4-star .personal-rate__star:nth-child(-n+4),
.personal-rate--4-star .personal-rate__star:nth-child(-n+4) {
    fill: #3F3F3F;
}

.reviews__opinion-rate--5-star .personal-rate__star:nth-child(-n+5),
.personal-rate--5-star .personal-rate__star:nth-child(-n+5) {
    fill: #3F3F3F;
}

.reviews__opinion-text-wrapper,
.reviews__shop-answer-text {
    flex-basis: 100%;
    padding: 23px 26px 23px 19px;
    border-radius: 10px;
}

.reviews__opinion-text-wrapper > p,
.reviews__shop-answer-text {
    margin-bottom: 0;
}

.reviews__opinion-text-wrapper {
    margin-top: 11px;
    border: 2px solid #E7E7E7;
    box-sizing: border-box;
}

.reviews__opinion-info {
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 0.055em;
    color: #C1C1C1;
}

    
.reviews__shop-answer-title-wrapper {
    width: 100%;
    text-align: right;
}

.reviews__shop-answer-title {
    margin-bottom: 0;
    font-weight: bold;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0.055em;
    color: #D7C2B9;
}

.reviews__shop-answer-text {
    background-color: #F4F1EF;
}


/* popups */

.popup--add-review,
.popup--success {
    display: none;
}

.popup-add-review {
    background-color: #f5f5f5;
}

.popup-add-review__title,
.popup-review-success__title {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    text-align: center;
    line-height: 120%;
    font-family: var(--font-accent);
    text-transform: uppercase;
}

.popup-add-review__stars-rate-wrrapper {
    text-align: center;
}

.personal-rate--popup .personal-rate__star:not(:first-child) {
    margin-left: 10px;
}

.popup-add-review__form {
    margin-top: 15px;
}

.popup-add-review__label {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 123%;
    text-align: center;
    letter-spacing: 0.05em;
    color: #828282;
    text-align: center;
}

.popup-add-review__field-group-wrapper {
    margin-top: 10px;
}

.popup-add-review__input,
.popup-add-review__textarea {
    width: 100%;
    border: 1px solid #C9C9C9;
    border-radius: 5px;
    background-color: #ffffff;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 0.055em;
    box-sizing: border-box;
    color: var(--font-color-primary);
}

.popup-add-review__textarea {
    display: block;
    overflow: scroll;
    resize: none;
}

.popup-add-review__input {
    height: 50px;
    padding: 10px;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--font-color-primary);
    box-shadow: 0 0 0px 9999rem #ffffff inset;
    border: 1px solid #C9C9C9;
}

.popup-add-review__submit-description {
    font-size: 13px;
    line-height: 120%;
    text-align: center;
    letter-spacing: 0.055em;
    color: #B7B7B7;
}

.popup-add-review__submit-description a {
    color: #B7B7B7;
    text-decoration: underline;
}

.popup-add-review__submit-description a:hover,
.popup-add-review__submit-description a:focus {
    text-decoration: none;
}

.popup__content.popup-review-success {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #F1E5E2;
}

.popup-review-success__description {
    line-height: 120%;
    text-align: center;
    letter-spacing: 0.055em;
}

.personal-rate__stars-count-input-wrapper {
    display: inline-block;
    max-height: 0;
    overflow: hidden;
}

.personal-rate__stars-count-input {
    max-height: 0px;
    border: none;
    appearance: none;
}




@media (min-width: 768px) {
    .reviews {
        margin-top: 50px;
    }

    .reviews__page-title {
        max-width: 650px;
        font-size: 40px;
    }

    .reviews__rating {
        margin-top: 30px;
    }

    .reviews__rating-number-wrapper {
        width: 139px;
        height: 139px;
    }

    .reviews__rating-number {
        font-size: 25px;
    }

    .reviews__rating-number span:nth-of-type(2) {
        font-size: 14px;
    }
    
    .reviews__share-opinion-btn {
        margin-top: 31px;
    }

    .reviews__opinions-list {
        margin-top: 55px;
    }

    /* .reviews__opinion-item:not(:nth-of-type(2)) {
        margin-top: 72px;
    } */

    .reviews__opinion-item {
        margin-bottom: 72px;
    }

    .reviews__opinion-item:last-child {
        margin-bottom: 0;
    }

    .reviews__opinion-info {
        margin-top: 27px;
    }

    .reviews__shop-answer-title-wrapper {
        margin-top: 20px;
    }

    .reviews__shop-answer-text {
        margin-top: 10px;
    }

    /* popup */

    .popup-add-review {
        top: calc(50% - 310px);
		left: calc(50% - 450px);
        width: 895px;
        height: 595px;
        padding: 42px 56px;
    }

    .popup-add-review__title {
        font-size: 46px;
        letter-spacing: 0.04em;
    }

    .popup-add-review__field-group-wrapper,
    .popup-add-review__submit-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 61px;
    }

    .popup-add-review__textarea {
        padding: 23px;
        height: 258px;
    }

    .popup-add-review__input:not(:last-of-type) {
        margin-bottom: 27px;
    }

    .popup-add-review__submit-wrapper {
        margin-top: 35px;
    }

    .popup-review-success {
        top: calc(50% - 275px);
		left: calc(50% - 240px);
        width: 480px;
        height: 550px;
    }


    .popup-review-success__title {
        font-size: 55px;
        letter-spacing: 0.04em;
    }

    .popup-review-success__description {
        font-size: 20px;
        margin-top: 35px;
    }
}




@media (max-width: 767px) {
    .reviews {
        margin-top: 30px;
    }

    .reviews__page-title {
        width: 90%;
        font-size: 27px;
    }

    .reviews__rating {
        margin-top: 20px;
    }

    .reviews__rating-number-wrapper {
        background-size: cover;
        width: 94px;
        height: 94px;
    }

    .reviews__rating-number {
        font-size: 20px;
    }

    .reviews__rating-number span:nth-of-type(2) {
        font-size: 12px;
    }

    .reviews__share-opinion-descr {
        display: none;
    }

    .reviews__opinion-item:not(:nth-of-type(2)) {
        margin-top: 45px;
    }

    .reviews__opinion-info {
        margin-top: 15px;
    }

    .reviews__shop-answer-title-wrapper {
        margin-top: 15px;
    }

    .reviews__shop-answer-text {
        margin-top: 7px;
    }

    /* popup */
    .popup-add-review__title {
        width: 85%;
        font-size: 27px;
        letter-spacing: 0.05em;
    }

    .popup-add-review__form {
        margin-top: 35px;
    }

    .popup-add-review__field-group-wrapper {
        margin-top: 35px;
    }

    .popup-add-review__textarea {
        min-height: 200px;
        padding: 15px;
    }

    .popup-add-review__input-group-wrapper .popup-add-review__label {
        margin-top: 26px;
    }
    
    .popup-add-review__submit-wrapper {
        margin-top: 31px;
    }

    .popup-add-review__btn-submit {
        width: 100%;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .popup-add-review__submit-description {
        margin-top: 18px;
    }

    .popup-review-success__title {
        font-size: 35px;
        letter-spacing: 0.05em;
    }

    .popup-review-success__description {
        margin-top: 20px;
        font-size: 15px;
    }
    
}


/* media for sidebar filters */

@media (min-width: 1025px) {
    .reviews__opinions-filters-wrapper {
        max-height: 0;
        margin-left: -200px;
    }
    
    .reviews__opinions-filters {
        width: 143px;
        padding-top: 33px;
    }

    .reviews__share-opinion-btn--side-bar-mobile {
        display: none;
    }

}

@media (max-width: 1024px) {
    .reviews__opinions-list {
        margin-top: 30px;
    }

    .reviews__opinions-filters-wrapper {
        display: flex;
        flex-direction: column;
        top: 0;
        padding: 9px 0;
        margin-bottom: 26px;
        background-color: #ffffff;
    }

    .reviews__opinions-filters {
        margin-top: 20px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        order: 1;
    }

    .reviews__filter {
        padding: 0;
    }

    .reviews__filter--plus {
        order: 2;
    }

    .reviews__share-opinion-btn--main,
    .reviews__share-opinion-btn--side-bar-desk {
        display: none;
    }

    .reviews__share-opinion-btn--side-bar-mobile {
        display: block;
    }
}

@media (max-width: 350px) {
    .reviews__filter--minus,
    .reviews__filter--plus {
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: 120px;
        white-space: nowrap;
        display: block;
    }
}




/* renew style for close icon - for all popups */

@media (min-width: 767px) and (min-height: 730px) {
    .popup-add-review .popup__close-icon,
    .popup-review-success .popup__close-icon {
        padding: 0;
        display: flex;
        justify-content: space-between;
        width: 85px;
        top: -25px;
        right: 0;
    }

    .popup__close-icon-descr {
        color: #ffffff;
        font-size: 14px;
        line-height: 120%;
        letter-spacing: 0.055em;
    }

    .popup__close-icon-svg path {
        stroke: #ffffff;
    }

}

@media (max-width: 767px) {
    .popup__close-icon-descr {
        display: none;
    }

    .popup__close-icon-svg path {
        stroke: var(--font-color-primary);
    }

    .popup__content {
        overflow: scroll;
        padding: 60px 20px;
        height: 100vh;
        min-height: -webkit-fill-available;
    }
}

@media (max-height: 730px) and (min-width: 426px) {
    .popup__content {
        overflow: scroll;
    }

    .popup__close-icon-descr {
        display: none;
    }

    .popup__close-icon-svg path {
        stroke: var(--font-color-primary);
    }
}