@import "variables";
.p-reviews {
	h1, h2 {
		font-size: 34px;
		font-weight: bold;
	}
	.p-reviews-form {
		background: #d4e6f6;
		margin-bottom: 24px;
		padding: 12px 16px;
		font-size: 14px;
		@include border-radius(3px);
		.form-row {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			margin-left: -16px;
			margin-right: -16px;
			@media(max-width: 575px){
				flex-direction: column;
				align-items: flex-start;
			}
			.form-col {
				padding-left: 16px;
				padding-right: 16px;
				@media(max-width: 575px){
					&:not(:first-child){
						margin-top: 12px;
					}
				}
			}
		}
		.form-group {
			@media(min-width: 576px){
				display: flex;
				align-items: center;
				.form-label {
					margin-right: 8px;
				}
				.form-field {
					flex-grow: 1;
				}
			}
		}
	}
	.p-reviews-list {
		.list-head {
			margin-bottom: 12px;
			font-size: 18px;
			font-weight: bold;
		}
		.list-body {}
		.list-item {
			border-bottom: 1px solid #dde4ec;
			margin-bottom: 8px;
			padding: 0 12px 8px;
			@media(max-width: 767px){
				padding-left: 0;
				padding-right: 0;
			}
			.list-item__head {
				display: flex;
				align-items: center;
				margin-bottom: 8px;
				font-size: 14px;
				.flag {
					margin-right: 10px;
					img {
						display: block;
						height: 12px;
						@include box-shadow(1px 1px 4px rgba(0,0,0,.25));
					}
				}
				.icon {
					margin-right: 10px;
					color: #9b9b9b;
				}
				.name {
					font-weight: bold;
				}
			}
			.list-item__description {
				margin-bottom: 8px;
				font-size: 12px;
				color: #9b9b9b;
			}
			.list-item__row {
				display: flex;
				@media(max-width: 767px){
					display: block;
					font-size: 14px;
				}
				.list-item__rating {
					position: relative;
					padding-right: 20px;
					table {
						tr {
							td {
								vertical-align: top;
								padding-bottom: 4px;
								&:not(:first-child) {
									padding-left: 12px;
								}
							}
						}
						.rate-stars {
							margin-top: 6px;
							width: 60px;
						}
						a {
							border-bottom-color: transparent;
							&:hover {
								border-bottom-color: $blue;
							}
						}
					}
					.rating-toggle {
						position: absolute; top: 0; right: 0;
						font-size: 22px;
						color: #7e93b2;
						display: none;
						&:hover {
							cursor: pointer;
						}
					}
					@media(max-width: 767px){
						display: inline-block;
						.rating-toggle {
							display: block;
						}
						&:not(.in){
							table {
								tbody {
									display: none;
								}
							}
						}
						&.in {
							.rating-toggle {
								@include transform(rotate(180deg));
							}
						}
					}
				}
				.list-item__body {
					flex-grow: 1;
					padding-top: 1px;
				}
			}
			.list-item__answer {
				background: #eef2f6;
				padding: 12px 16px;
				@include border-radius(3px);
				.logo {
					img {
						display: block;
						max-width: 50px;
						margin-bottom: 8px;
					}
				}
				.message {}
			}
		}
		.list-navs {
			display: flex;
			margin: 24px 0 0 0;
			padding: 0;
			list-style: none;
			& > li {
				&:not(:first-child){
					margin-left: 12px;
				}
			}
			a {
				border: 0;
				display: block;
				font-size: 18px;
				font-weight: bold;
				line-height: 32px;
				min-width: 32px;
				text-align: center;
				@include border-radius(16px);
				&:hover {
					background: rgba(0,0,0,.1);
				}
				&.active {
					background: $blue;
					color: $white;
				}
			}
		}
	}
	.p-reviews-other {
		margin-bottom: 24px;
		.other-head {
			font-weight: bold;
			font-size: 18px;
		}
		.other-body {
			max-width: 320px;
			margin: 0;
			padding: 0;
			font-size: 0;
			list-style: none;
			-webkit-column-count: 2;
			-moz-column-count: 2;
			column-count: 2;
			-webkit-column-width: 320px;
			-moz-column-width: 320px;
			column-width: 320px;
			& > li {
				position: relative;
				overflow: hidden;
				display: inline-block;
				width: 50%;
				padding-top: 8px;
				font-size: 16px;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			a {
				border-bottom-color: transparent;
				&:hover {
					border-bottom-color: $blue;
				}
			}
		}
	}
}

.owl-carousel-reviews {
	padding: 0 24px;
	@media(min-width: 576px){
		border: 1px solid #dde4ec;
		padding: 16px 48px;
	}
	.owl-carousel {
		.owl-nav {
			.owl-prev, .owl-next {
				position: absolute; top: 30px;
				font-size: 28px;
				color: #7e93b2;
				&:hover {
					color: $blue;
				}
			}
			.owl-prev {
				left: -28px;
				@media(max-width: 575px){
					left: -24px;
				}
			}
			.owl-next {
				right: -28px;
				@media(max-width: 575px){
					right: -24px;
				}
			}
		}
	}
	.owl-review {
		.owl-review__head {
			display: flex;
			align-items: center;
			margin-bottom: 8px;
			font-size: 14px;
			.flag {
				margin-right: 10px;
				img {
					display: block;
					height: 12px;
					@include box-shadow(1px 1px 4px rgba(0,0,0,.25));
				}
			}
			.icon {
				margin-right: 10px;
				color: #9b9b9b;
			}
			.name {
				font-weight: bold;
			}
		}
		.owl-review__description {
			margin-bottom: 8px;
			font-size: 12px;
			color: #9b9b9b;
		}
		.owl-review__rating {
			margin-bottom: 8px;
			.rate-stars {
				max-width: 80px;
			}
		}
		.owl-review__body {
			a {
				border-bottom-color: transparent;
				&:hover {
					border-bottom-color: $blue;
				}
			}
		}
	}
	.reviews-more {
		margin-top: 20px;
		text-align: center;
		a {
			background: #d8e0e9;
			border: 0;
			display: inline-block;
			padding: 8px 16px;
			color: #333;
			&:hover {
				background: darken(#d8e0e9, 5%);
			}
		}
	}
}