.reviews-and-questions-section {
	display: flex;
	flex-flow: column;
	gap: 16px;
	margin-top: 32px;
	scroll-margin-top: 100px;

	@include mobile {
		padding: 0 16px;
	}

	@include desktop {
		align-self: center;
		gap: 32px;
		margin-top: 80px;
		width: calc(100% - 32px);
		max-width: $width-desktop;
	}
}

.reviews-and-questions-section__tabs {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 16px;

	@include desktop {
		gap: 32px;
	}
}

.reviews-and-questions-section__tab-btn {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: $color-gray-low;

	&.active {
		color: $color-black;
	}

	@include desktop {
		font-size: 38px;
	}
}

.reviews-and-questions-section__container {
	display: flex;
	flex-flow: column;
	gap: 16px;

	@include desktop {
		flex-flow: row-reverse nowrap;
		align-items: flex-start;
		gap: 20px;
	}
}

.reviews-and-questions-section__rating-block {
	display: flex;
	flex-flow: column;
	gap: 14px;
	padding: 18px;
	border-radius: 28px;
	background-color: $color-surface;
	box-sizing: border-box;

	@include desktop {
		flex: 0 0 297px;
		padding: 24px;
		border-radius: 32px;
	}
}

.reviews-and-questions-section__rating-block__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;

	@include desktop {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

.reviews-and-questions-section__rating-block__rating {
	display: flex;
	flex-flow: column;

	&-current {
		font-size: 24px;
		font-weight: 700;
		letter-spacing: -0.03em;

		@include desktop {
			font-size: 38px;
		}
	}

	&-desc {
		margin-top: 10px;
		font-weight: 500;
		font-size: 14px;
		line-height: 16px;

		@include desktop {
			margin-top: 6px;
			font-size: 16px;
			line-height: 18px;
		}
	}

	&-stars {
		margin-top: 6px;
	}
}

.reviews-and-questions-section__rating-block__stats {
	display: flex;
	flex-flow: column;
	gap: 4px;

	@include desktop {
		gap: 6px;
	}
}

.reviews-and-questions-section__rating-block__stat-item {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 6px;

	@include desktop {
		gap: 10px;
	}

	span {
		font-size: 14px;
		line-height: 16px;
		color: $color-gray-md;

		@include desktop {
			font-size: 16px;
			line-height: 18px;
		}

		&:last-child {
			min-width: 32px;
		}
	}
}

.reviews-and-questions-section__rating-block__stat-item__progress {
	position: relative;
	flex: 1;
	height: 4px;
	border-radius: calc(4px / 2);
	background-color: #e1e1e1;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		max-width: var(--progress-percent);
		background-color: $color-green;
		border-radius: calc(4px / 2);
	}
}

.reviews-and-questions-section__rating-block__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0px 16px;
	border-radius: 14px;
	background-color: $color-white;
	font-size: 16px;
	font-weight: 500;
	line-height: 18px;
	color: $color-green;
	text-align: center;
	box-sizing: border-box;

	@include desktop {
		padding: 0px 20px;
		min-height: 54px;
		border-radius: 16px;
		font-size: 18px;
		line-height: 21px;

		&:hover {
			color: $color-white;
			background-color: $color-green-hover;
		}
	}
}

.reviews-and-questions-section__list-empty {
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 50px;
	border-radius: 28px;
	border: 1px solid $color-border;
	box-sizing: border-box;

	@include mobile {
		min-height: 199px;
	}

	@include desktop {
		flex-flow: row nowrap;
		flex: 1;
		gap: 16px;
		height: -webkit-fill-available;
		border-radius: 32px;
	}
}

.reviews-and-questions-section__list-empty__icon {
	width: 40px;
	aspect-ratio: 2 / 2;
	color: $color-green;
}

.reviews-and-questions-section__list-empty__main {
	display: flex;
	flex-flow: column;
	gap: 4px;

	@include mobile {
		text-align: center;
	}

	@include desktop {
		gap: 6px;
	}

	span {
		font-size: 20px;
		font-weight: 700;
		letter-spacing: -0.03em;

		@include desktop {
			font-size: 32px;
		}
	}

	p {
		font-size: 14px;
		line-height: 150%;

		@include desktop {
			font-size: 16px;
		}
	}
}

.reviews-and-questions-section__list {
	display: flex;
	flex-flow: column;
	gap: 14px;

	@include desktop {
		flex: 1;
		gap: 16px;
	}
}

.reviews-and-questions-section__item {
	display: flex;
	flex-flow: column;
	padding: 18px;
	border-radius: 28px;
	background-color: $color-surface;

	@include desktop {
		padding: 24px;
		border-radius: 32px;
	}
}

.reviews-and-questions-section__item-head {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 14px;

	@include desktop {
		gap: 16px;
	}
}

.reviews-and-questions-section__item-head__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	aspect-ratio: 2 / 2;
	border-radius: 50%;
	background-color: $color-green;

	@include desktop {
		width: 64px;
	}

	span {
		font-size: 18px;
		font-weight: 700;
		letter-spacing: -0.03em;
		color: $color-white;

		@include desktop {
			font-size: 24px;
		}
	}

	img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		pointer-events: none;
	}
}

.reviews-and-questions-section__item-head__main {
	display: flex;
	flex-flow: column;
	gap: 6px;

	@include desktop {
		gap: 10px;
	}
}

.reviews-and-questions-section__item-head__name {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.03em;

	@include desktop {
		font-size: 20px;
	}
}

.reviews-and-questions-section__item-head__date {
	font-size: 14px;
	line-height: 16px;
	color: $color-gray-md;

	@include desktop {
		font-size: 16px;
		line-height: 18px;
	}
}

.reviews-and-questions-section__item-text {
	margin-top: 10px;
	font-size: 14px;
	line-height: 150%;

	@include desktop {
		font-size: 16px;
		margin-top: 12px;
	}
}

.reviews-and-questions-section__item-photos {
	display: flex;
	flex-flow: row wrap;
	margin-top: 16px;
	gap: 14px;

	@include desktop {
		gap: 16px;
		margin-top: 20px;
	}
}

.reviews-and-questions-section__item-photo {
	cursor: pointer;
	width: 80px;
	aspect-ratio: 2 / 2;
	border-radius: 14px;
	overflow: hidden;

	@include desktop {
		width: 142px;
		border-radius: 24px;
	}

	img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}
}

.reviews-and-questions-section__item-date {
	margin-top: 16px;
	font-size: 14px;
	line-height: 16px;
	color: $color-gray-md;

	@include desktop {
		margin-top: 20px;
		font-size: 16px;
		line-height: 18px;
	}
}

.reviews-and-questions-section__item-answer {
	margin-top: 16px;
	padding-left: 16px;

	@include desktop {
		margin-top: 20px;
		padding-left: 24px;
	}
}

.reviews-and-questions-section__item-answer__head {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 14px;

	@include desktop {
		gap: 16px;
	}
}

.reviews-and-questions-section__item-answer__head__avatar {
	width: 54px;
	aspect-ratio: 2 / 2;
	border-radius: 50%;
	pointer-events: none;

	@include desktop {
		width: 64px;
	}
}

.reviews-and-questions-section__item-answer__head__main {
	display: flex;
	flex-flow: column;
	gap: 6px;

	@include desktop {
		gap: 10px;
	}
}

.reviews-and-questions-section__item-answer__head__name {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 10px;

	span {
		font-size: 16px;
		font-weight: 700;
		letter-spacing: -0.03em;

		@include desktop {
			font-size: 20px;
		}
	}

	img {
		display: block;
		width: 64px;
		height: 16px;
		pointer-events: none;
	}
}

.reviews-and-questions-section__item-answer__head__date {
	font-size: 14px;
	line-height: 16px;
	color: $color-gray-md;

	@include desktop {
		font-size: 16px;
		line-height: 18px;
	}
}

.reviews-and-questions-section__item-answer__text {
	margin-top: 10px;
	font-size: 14px;
	line-height: 150%;

	@include desktop {
		margin-top: 12px;
		font-size: 16px;
	}
}

.reviews-and-questions-section__load-more-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0px 18px;
	min-height: 54px;
	border-radius: 14px;
	border: 1px solid $color-border;
	text-align: center;
	font-size: 14px;
	font-weight: 500;
	line-height: 16px;
	box-sizing: border-box;

	@include desktop {
		min-height: 64px;
		padding: 0px 24px;
		border-radius: 16px;
		font-size: 16px;
		line-height: 18px;

		&:hover {
			border-color: $color-green;
		}
	}
}

.reviews-and-questions-section__form {
	display: flex;
	flex-flow: column;
	gap: 14px;
	margin-top: 18px;

	@include desktop {
		gap: 16px;
		margin-top: 36px;
	}
}

.reviews-and-questions-section__form-title {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.03em;

	@include desktop {
		font-size: 28px;
	}
}

.reviews-and-questions-section__form__textarea {
	padding: 14px;
	min-height: 139px;
	border-radius: 14px;
	background-color: $color-surface;
	font-size: 14px;
	line-height: 16px;
	color: #2c2d2e;
	box-sizing: border-box;

	&::placeholder {
		color: #2c2d2e;
	}

	@include desktop {
		padding: 16px;
		border-radius: 16px;
		font-size: 16px;
		line-height: 18px;
	}
}

.reviews-and-questions-section__form__grid {
	display: flex;
	flex-flow: column;
	gap: 10px;

	@include desktop {
		flex-flow: row nowrap;
		gap: 12px;

		.input-wrapper {
			flex: 0 0 232px;
		}
	}
}

.reviews-and-questions-section__form__submit-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding: 0px 18px;
	border-radius: 14px;
	background-color: #1f895b;
	text-align: center;
	font-size: 14px;
	font-weight: 500;
	line-height: 16px;
	color: $color-white;
	box-sizing: border-box;

	@include desktop {
		flex: 0 0 84px;
		padding: 0px 24px;
		min-height: 64px;
		border-radius: 16px;
		font-size: 16px;
		line-height: 18px;
	}
}

.reviews-and-questions-section__form__terms {
	@include desktop {
		flex: 1;
	}

	.input-checkbox__text {
		font-weight: 400;
		font-size: 14px;
		line-height: 16px;
		color: $color-gray-md;

		@include desktop {
			font-size: 16px;
			line-height: 18px;
		}
	}
}