.wp-block-themeisle-blocks-review {
	--background-color: transparent;
	--primary-color: #ED6F57;
	--text-color: inherit;
	--button-text-color: #FFF;
	--border-color: #343130;
	--stars-color: #FFBB38;
	--pros-color: #89B784;
	--cons-color: #D26F6F;
	--image-width: 33;
	--content-font-size: inherit;
	--padding-top: var( --padding-desktop-top, 32px );
	--padding-bottom: var( --padding-desktop-bottom, 32px );
	--padding-left: var( --padding-desktop-left, 32px );
	--padding-right: var( --padding-desktop-right, 32px );
	--border-width: 0;
	--border-radius: 0;
	--box-shadow: none;

	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 0 0;
	grid-template-areas: 'header header header' 'left left right' 'footer footer footer';
	margin-bottom: 10px;
	border: 0;
	box-shadow: var( --box-shadow );
	border-radius: var( --border-radius );

	&.is-style-boxed {
		--border-width: 3px;
	}

	&.is-style-single-column {
		grid-template-columns: 1fr;
		grid-template-areas: 'header' 'left' 'right' 'footer';

		div:last-child {
			border-bottom-left-radius: var( --border-radius );
			border-bottom-right-radius: var( --border-radius );
		}

		.o-review__left {
			border-right: var( --border-width ) solid var( --border-color );
		}

		.o-review__left_details {
			grid-template-columns: 1fr;
		}

		.o-review__right {
			border-left: var( --border-width ) solid var( --border-color );
			padding: 20px var( --padding-right ) 20px var( --padding-left );
		}
	}

	&:is(.is-style-inline-features) {
		.o-review__left_feature_ratings {
			margin-left: -5px;

			span {
				padding-left: 5px;
			}
		}

		.o-review__left_features {
			gap: 16px;
		}

		@media (min-width: 764px) {
			.o-review__left_feature {
				flex-basis: 48%;
			}
		}

		.o-review__left_feature_ratings {
			flex-wrap: wrap;
		}
	}

	&.no-pros-cons {
		grid-template-columns: 1fr;
		grid-template-areas: 'header' 'left' 'footer';

		.o-review__left {
			border-right: var( --border-width ) solid var( --border-color );
		}
	}

	&.no-footer {
		.o-review__left {
			border-bottom-left-radius: var( --border-radius );
		}

		.o-review__right {
			border-bottom-right-radius: var( --border-radius );
		}

		&.no-pros-cons {
			.o-review__left {
				border-bottom-right-radius: var( --border-radius );
			}
		}

		&.is-style-single-column {
			.o-review__left {
				border-bottom-left-radius: 0;
			}
		}
	}

	&.has-dark-bg {
		--text-color: #FFF;
	}

	.o-review {
		&__header {
			background: var( --background-color );
			padding: var( --padding-top ) var( --padding-right ) 20px var( --padding-left );
			grid-area: header;
			overflow: hidden;
			border: var( --border-width ) solid var( --border-color );
			border-top-left-radius: var( --border-radius );
			border-top-right-radius: var( --border-radius );

			h2, h3, h4, h5, h6 {
				color: var( --text-color );
				text-align: left;
				margin: 0;
			}

			&_meta {
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-wrap: wrap;
				font-size: 28px;
				margin-top: 20px;
			}

			&_ratings {
				display: flex;
				align-items: center;

				svg {
					max-width: 36px;
					max-height: 36px;
					width: 100%;
					fill: var(--stars-color);

					&:not( .filled ) {
						opacity: 0.5;
						filter: grayscale(75%);
					}
				}

				span {
					color: var(--text-color);
					padding-left: 10px;
					font-size: 13px;
					min-width: 50px;
				}

				&__stars {
					display: flex;
					gap: 5px;
					flex-wrap: nowrap;
				}

				@media (max-width: 600px) {
					flex-wrap: wrap;

					span {
						padding-left: 5px;
					}
				}
			}

			&_price {
				color: var( --text-color );

				del {
					color: var( --text-color );
					opacity: 0.4;
					padding-right: 10px;
				}
			}

			&_details {
				display: grid;
				grid-template-columns: 1fr 2fr;
				gap: 24px;
				align-items: center;
				padding-top: 30px;

				&.is-quarter {
					grid-template-columns: 1fr 3fr;
				}

				&.is-half {
					grid-template-columns: 1fr 1fr;
				}

				&.is-full {
					grid-template-columns: auto;
					justify-items: center;
				}

				p {
					display: flex;
					justify-self: flex-start;
					color: var( --text-color );
					margin: 0;
					font-size: var( --content-font-size );
				}

				img {
					max-width: 100%;
					display: block;
					height: auto;
					justify-self: center;
				}

				&.is-single {
					grid-template-columns: 1fr;
				}
			}
		}

		&__left {
			background: var( --background-color );
			grid-area: left;
			padding: 20px 20px 20px var( --padding-left );
			overflow: hidden;
			border-bottom: var( --border-width ) solid var( --border-color );
			border-left: var( --border-width ) solid var( --border-color );
			border-right: calc( var( --border-width ) / 2 ) solid var( --border-color );

			&_features {
				display: flex;
				flex-wrap: wrap;
				padding: 10px 0;
			}

			&_feature {
				flex-basis: 100%;
				padding: 15px 0;
				min-width: 0;
				min-height: 0;

				font-size: var( --content-font-size );

				&_title {
					color: var( --text-color );
					font-weight: 600;
					font-size: var( --content-font-size );
				}

				&_num {
					display: block;
					color: var(--text-color);
					font-size: 13px;
					word-break: keep-all;
				}

				&_ratings {
					display: flex;
					align-items: center;

					svg {
						max-width: 25px;
						max-height: 25px;
						fill: var( --stars-color );
						width: 100%;

						&:not( .filled ) {
							opacity: 0.5;
							filter: grayscale(75%);
						}
					}

					&__stars {
						display: flex;
						gap: 5px;
						flex-wrap: nowrap;
					}

					span {
						padding-left: 10px;
					}

					@media ( max-width: 600px ) {
						flex-wrap: wrap;
						margin-left: -5px;

						span {
							padding-left: 5px;
						}
					}
				}

				&_description {
					color: var( --text-color );
					font-size: 80%; /* 80% of feature's title font-size */
					opacity: 0.7;
				}
			}
		}

		&__right {
			background: var( --background-color );
			grid-area: right;
			padding: 20px var( --padding-right ) 20px 20px;
			overflow: hidden;
			border-bottom: var( --border-width ) solid var( --border-color );
			border-left: calc( var( --border-width ) / 2 ) solid var( --border-color );
			border-right: var( --border-width ) solid var( --border-color );

			&_pros, &_cons {
				padding: 10px 0;

				h2, h3, h4, h5, h6 {
					color: var( --text-color );
					margin: 0;
				}

				&_item {
					display: flex;
					padding: 2px 0;

					svg {
						width: 20px;
						height: 20px;
						min-width: 20px;
						min-height: 20px;
						border-radius: 4px;
						padding: 2px;
						margin-top: 3px;
						margin-right: 10px;
					}

					p {
						color: var( --text-color );
						margin: 0;
						font-size: var( --content-font-size );
					}
				}
			}

			&_pros_item {
				svg {
					fill: var( --pros-color );
				}
			}

			&_cons_item {
				svg {
					fill: var( --cons-color );
				}
			}
		}

		&__footer {
			background: var( --background-color );
			grid-area: footer;
			padding: 20px var( --padding-right ) var( --padding-bottom ) var( --padding-left );
			overflow: hidden;
			border: var( --border-width ) solid var( --border-color );
			border-top: none;
			border-bottom-left-radius: var( --border-radius );
			border-bottom-right-radius: var( --border-radius );

			&_label {
				color: var( --text-color );
				margin: 0;
			}

			&_buttons {
				display: flex;
				flex-wrap: wrap;

				a,
				span {
					background: var( --primary-color );
					color: var( --button-text-color );
					padding: 12px 50px;
					margin: 20px 20px 0 0;
					cursor: pointer;
					text-align: center;
					font-size: var( --content-font-size );
					text-decoration: none;

					&:hover {
						opacity: 0.8;
						color: #ffffff;
					}
				}

				span {
					cursor: text;
				}
			}
		}
	}
}

@media ( min-width: 600px ) and ( max-width: 960px ) {
	.wp-block-themeisle-blocks-review {
		--padding-top: var( --padding-tablet-top, var( --padding-desktop-top, 32px ) );
		--padding-bottom: var( --padding-tablet-bottom, var( --padding-desktop-bottom, 32px ) );
		--padding-left: var( --padding-tablet-left, var( --padding-desktop-left, 32px ) );
		--padding-right: var( --padding-tablet-right, var( --padding-desktop-right, 32px ) );
	}
}

@media ( max-width: 600px ) {
	.wp-block-themeisle-blocks-review {
		--padding-top: var( --padding-mobile-top, var( --padding-tablet-top, var( --padding-desktop-top, 32px ) ) );
		--padding-bottom: var( --padding-mobile-bottom, var( --padding-tablet-bottom, var( --padding-desktop-bottom, 32px ) ) );
		--padding-left: var( --padding-mobile-left, var( --padding-tablet-left, var( --padding-desktop-left, 32px ) ) );
		--padding-right: var( --padding-mobile-right, var( --padding-tablet-right, var( --padding-desktop-right, 32px ) ) );

		grid-template-columns: 1fr;
		grid-template-areas: 'header' 'left' 'right' 'footer';

		div:last-child {
			border-bottom-left-radius: var( --border-radius );
			border-bottom-right-radius: var( --border-radius );
		}

		&.no-footer {
			.o-review__left {
				border-bottom-left-radius: 0;
			}
		}

		.o-review {
			&__header {
				&_meta {
					align-items: flex-start;
					flex-direction: column;
				}

				&_ratings {
					margin-left: -5px;

					svg {
						max-width: 36px;
						max-height: 36px;
					}

					span {
						word-break: break-word;
					}
				}

				&_details {
					grid-template-columns: auto;
					justify-items: center;

					&.is-quarter,
					&.is-half,
					&.is-full {
						grid-template-columns: auto;
					}
				}
			}

			&__left {
				padding-right: var( --padding-right );
				border-right: var( --border-width ) solid var( --border-color );

				&_details {
					grid-template-columns: 1fr;
				}

				&_feature {
					flex-basis: 100%;

					&:nth-child( odd ) {
						padding-right: 0;
					}

					&:nth-child( even ) {
						padding-left: 0;
					}

					&_ratings {
						svg {
							max-width: 30px;
							max-height: 30px;
						}
					}
				}
			}

			&__right {
				padding-left: var( --padding-left );
				border-left: var( --border-width ) solid var( --border-color );
			}

			&__footer_buttons {
				span {
					margin-left: 0;
					margin-right: 20px;
				}
			}
		}
	}
}

@media ( min-width: 600px ) {
	.wp-block-themeisle-blocks-review {
		&.is-style-single-column {
			.o-review__right {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 50px;
			}
		}
	}
}
