@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Roboto&display=swap');

.toplist-esi__wrapper {
	margin: 16px 0;
}

.toplist-esi__offers {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.toplist-esi__offer {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.toplist-esi__offer.hidden {
	display: none;
}

.toplist-esi__offer-inner {
	display: grid;
	align-items: center;
	border: 0.5px solid #d8d8d8;
	border-radius: 20px;
	background: #ece3c6;
	gap: 24px;
	grid-template-areas: 'logo main extra';
	grid-template-columns: 230px auto 230px;
	grid-template-rows: 1fr;
}

.toplist-esi__offer-logo-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	flex-direction: column;
	height: 100%;
	padding: 24px 30px;
	background: #fff;
	gap: 6px;
	grid-area: logo;
	border-radius: 20px 0 0 20px;
}

.toplist-esi__offer-logo img {
	width: 170px;
	height: 60px;
	object-fit: contain;
}

.toplist-esi__offer-ribbon {
	font-family: proxima-nova, sans-serif;
	font-size: 10px;
	font-weight: 700;
	font-style: normal;
	line-height: 120%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	height: 20px;
	padding: 4px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #61a229;
	background: #eaffe8;
	gap: 8px;
}

.toplist-esi__offer-ribbon:before {
	position: absolute;
	top: 0;
	left: -6px;
	width: 7px;
	height: 20px;
	content: '';
	background-image: url("data:image/svg+xml,%3Csvg width='6' height='20' viewBox='0 0 6 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 20L-1.90735e-06 20L6 0L6 20Z' fill='%23EAFFE8'/%3E%3C/svg%3E%0A");
	background-repeat: no-repeat;
	background-position: center;
}

.toplist-esi__offer-ribbon:after {
	position: absolute;
	top: 0;
	right: -6px;
	width: 7px;
	height: 20px;
	content: '';
	background-image: url("data:image/svg+xml,%3Csvg width='7' height='20' viewBox='0 0 7 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H7L0 20V0Z' fill='%23EAFFE8'/%3E%3C/svg%3E%0A");
	background-repeat: no-repeat;
	background-position: center;
}

.toplist-esi__offer-rating-wrapper {
	display: flex;
	align-items: center;
}

.toplist-esi__offer-rating-score {
	font-family: proxima-nova, sans-serif;
	font-size: 10px;
	font-weight: 700;
	font-style: normal;
	line-height: 120%;
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 33px;
	height: 22px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
	background-image: url('/images/forRating2.svg');
}

.toplist-esi__offer-rating-score:after {
	position: absolute;
	top: 0;
	right: -1px;
	width: 3px;
	height: 3.5px;
	content: '';
	background-image: url("data:image/svg+xml,%3Csvg width='3' height='4' viewBox='0 0 3 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 4L1.5 0.5L3 4H0Z' fill='%236F2759'/%3E%3C/svg%3E%0A");
}

.toplist-esi__offer-rating {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 65px;
	height: 16px;
	margin-left: -8px;
	background-image: url('/images/for-rating.svg');
}

.toplist-esi__offer-rating img {
	height: 8px !important;
}

.toplist-esi__offer-main {
	display: flex;
	align-items: center;
	justify-content: center;
	grid-area: main;
}

.toplist-esi__offer-title,
.toplist-esi__offer-title p {
	font-family: proxima-nova, sans-serif;
	font-size: 18px;
	font-weight: 400;
	font-style: normal;
	line-height: 22px;
	display: flex;
	align-items: center;
	flex-direction: column;
	text-align: center;
	color: #464646;
}

.toplist-esi__offer-title p {
	margin: 0;
	padding: 0;
}

.toplist-esi__offer-title span {
	font-size: 33px;
	font-weight: 700;
	line-height: 40px;
	color: #3d589b !important;
}

.toplist-esi__offer-extra {
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	padding: 24px 30px;
	background: #fff;
	gap: 5px;
	grid-area: extra;
	border-radius: 0 20px 20px 0;
}

.toplist-esi__offer-coupon-code {
	font-family: proxima-nova, sans-serif;
	font-size: 14px;
	font-weight: 700;
	font-style: normal;
	line-height: 150%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 32px;
	padding: 0 16px 0 40px;
	cursor: pointer;
	text-transform: uppercase;
	color: #464646;
	border: 1px solid rgb(0 0 0 / 3%);
	border-radius: 2px;
	background: #faf8f8;
	gap: 8px;
}

.toplist-esi__offer-coupon-code:before {
	position: absolute;
	top: 8px;
	left: 16px;
	width: 16px;
	height: 16px;
	content: '';
	background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_3528_1182)'%3E%3Cpath d='M16 3.35235C15.2607 2.29651 13.7908 2.01826 12.7347 2.75757L7.30479 6.5596L5.33032 5.17692C6.06551 3.9076 5.71969 2.26507 4.49563 1.40807C3.20301 0.50326 1.42204 0.81726 0.516849 2.10963C-0.387932 3.40207 -0.0741819 5.18342 1.21847 6.0886C2.10547 6.70967 3.22276 6.75623 4.12876 6.30679L6.54713 8.00007L4.12897 9.69317C3.22297 9.24395 2.10576 9.29051 1.21869 9.91135C-0.0739006 10.8165 -0.387682 12.5977 0.517068 13.8901C1.42226 15.1827 3.20341 15.4967 4.49582 14.5919C5.71972 13.7349 6.06547 12.0924 5.33051 10.823L7.30497 9.44035L12.7347 13.2422C13.7907 13.9817 15.2607 13.7033 16 12.6474L9.36216 8.00004L16 3.35235ZM2.86335 5.2356C2.04544 5.2356 1.38235 4.57251 1.38235 3.7546C1.38235 2.9367 2.04547 2.2736 2.86335 2.2736C3.68144 2.2736 4.34435 2.9367 4.34435 3.7546C4.34435 4.57251 3.68144 5.2356 2.86335 5.2356ZM2.86335 13.7267C2.04544 13.7267 1.38235 13.0636 1.38235 12.2457C1.38235 11.4278 2.04544 10.7647 2.86335 10.7647C3.68144 10.7647 4.34435 11.4278 4.34435 12.2457C4.34435 13.0635 3.68144 13.7267 2.86335 13.7267Z' fill='%23464646'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3528_1182'%3E%3Crect width='16' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
	background-repeat: no-repeat;
	background-position: center;
}

.toplist-esi__offer-cta-btn {
	font-family: proxima-nova, sans-serif;
	font-size: 18px;
	font-weight: 700;
	font-style: normal;
	line-height: 1;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 48px;
	padding: 0 48px 0 8px;
	text-align: center;
	text-transform: uppercase;
	color: #fff;
	border-radius: 100px;
	background: #a2292b;
	gap: 8px;
}

.toplist-esi__offer-cta-btn:after {
	position: absolute;
	top: 12px;
	right: 8px;
	width: 32px;
	height: 24px;
	padding-left: 8px;
	content: '';
	border-left: 0.5px solid #fff;
	background-image: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 18.5L15 12.5L9 6.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
	background-repeat: no-repeat;
	background-position: right center;
}

.toplist-esi__offer-cta-btn:hover {
	text-decoration: none;
	color: #fff;
	background: #3d589b;
}

.toplist-esi__show-more-btn {
	font-family: proxima-nova, sans-serif;
	font-size: 18px;
	font-weight: 700;
	font-style: normal;
	line-height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	height: 38px;
	margin: 16px auto 0;
	padding: 0 8px;
	text-align: center;
	text-transform: capitalize;
	color: #61a229;
	border: 2px solid #61a229;
	border-radius: 2px;
	background: #fff;
}

.toplist-esi__show-more-btn:hover {
	cursor: pointer;
	color: #fff;
	background: #61a229;
}

.toplist-esi__offer-terms,
.toplist-esi__offer-terms * {
	font-family: proxima-nova, sans-serif;
	font-size: 11px !important;
	font-weight: 400;
	font-style: normal;
	line-height: 13px !important;
	vertical-align: baseline;
	color: #5a6068;
}

.toplist-esi__show-only-on-mobile {
	display: none;
}

@media screen and (width <= 991px) {
	.toplist-esi__show-only-on-mobile {
		display: block;
	}

	.toplist-esi__show-only-on-desktop {
		display: none;
	}

	.toplist-esi__offer-inner {
		align-items: flex-start;
		gap: 16px;
		grid-template-areas:
			'logo'
			'main'
			'extra';
		grid-template-columns: auto;
	}

	.toplist-esi__offer-logo-wrapper {
		padding: 45px 0 16px;
	}

	.toplist-esi__offer-ribbon {
		position: absolute;
		top: 16px;
		left: 16px;
	}

	.toplist-esi__offer-rating-wrapper {
		position: absolute;
		top: 16px;
		right: 16px;
	}

	.toplist-esi__offer-main {
		padding: 0 16px;
	}

	.toplist-esi__offer-title span {
		font-size: 31px;
		line-height: 38px;
	}

	.toplist-esi__offer-extra {
		padding: 0 16px 16px;
		background: #ece3c6;
		gap: 8px;
	}

	.toplist-esi__offer-cta-btn {
		padding: 0 8px;
	}
}

.toplist-esi__filter-tags-json {
	box-sizing: border-box;
}

.toplist-esi__filter-wrapper {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 10px;
	gap: 8px;
}

.toplist-esi__filter-tag {
	font-family: proxima-nova, sans-serif;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	display: flex;
	align-items: center;
	flex-shrink: 0;
	justify-content: center;
	width: fit-content;
	height: 29px;
	padding: 7px 10px;
	cursor: pointer;
	user-select: none;
	text-align: center;
	color: #536090;
	border: 1px solid #536090;
	border-radius: 2px;
}

.toplist-esi__filter-tag.filter-tag-active {
	color: #fff;
	border-color: #151515;
	background: #151515;
}

@media screen and (width <= 991px) {
	.toplist-esi__filter-wrapper {
		overflow-x: scroll;
		flex-wrap: nowrap;
		width: 100vw;
		margin: 0 -16px 8px;
		padding: 0 16px;
	}

	.toplist-esi__filter-wrapper::-webkit-scrollbar {
		display: none;
	}
}