@import "../../variables.less";

@footer:
{
	float: left;
	width: 100%;
	position: static;
	background-color: @color-white;

	.container {
		@pv-footer-content();
	}

	> .container > .footer-content {

		div {
			width: 230px;
		}
	}

	.box {
		li {
			line-height: 24px;

			.cookies-text {
				a {
					text-decoration: underline;
				}
			}

			a {
				color: @color-primary;
				text-decoration: none;
				font-weight: normal;
				font-size: 14px;
				line-height: 24px;
			}
		}

		.payment {
			margin: 5px 0;
			width: 100%;

			li {
				float: left;
			}

			span {
				display: block;
				width: 30px;
				height: 27px;
				overflow: hidden;
				text-indent: -9999px;
				margin-right: 5px;
				content: none;

				&.dummy {
					background: url(img/Base/logo/ico-dummy.svg) no-repeat !important;
					background-size: 30px 30px !important;
				}

				&.ideal {
					background: url(img/Base/logo/ico-ideal.svg) no-repeat !important;
				}

				&.bcmc {
					background: url(img/Base/logo/ico-bancontact.svg) no-repeat !important;
					width: 43px;
				}

				&.amex {
					background: url(img/Base/logo/ico-amex.svg) no-repeat !important;
					width: 27px;
				}

				&.mastercard {
					background: url(img/Base/logo/ico-mastercard.svg) no-repeat !important;
					width: 36px;
				}

				&.maestro {
					background: url(img/Base/logo/ico-maestro.svg) no-repeat !important;
					width: 43px;
				}

				&.paypal {
					background: url(img/Base/logo/ico-paypal-blue.svg) no-repeat !important;
					width: 61px;
				}

				&.visa {
					background: url(img/Base/logo/ico-visa.svg) no-repeat !important;
					width: 51px;
				}
			}
		}

		h4 {
			text-transform: none;
			font-weight: 600;
			color: #004979;
			font-size: 16px;
			margin: 0 0 8px 0;
		}

		.social li {
			margin-right: 0px;
			float: left;

			span {
				margin-bottom: 5px;
			}
		}

		.social span {
			background: url(img/Base/logo/social-icons.png) no-repeat left top;
			background-size: auto 32px;
			width: 30px;
			height: 30px;
			display: inline-block;
			margin-right: 5px;
			vertical-align: top;
			text-indent: -9999px;
			overflow: hidden;

			&.facebook {
				background-position: 0 0;
			}

			&.youtube {
				background-position: -31px 0;
			}

			&.twitter {
				background-position: -62px 0;
			}

			&.googleplus {
				background-position: -93px 0;
			}

			&.pinterest {
				background-position: -124px 0;
			}

			&.instagram {
				background-position: -155px 0;
			}

			&.mail {
				background-position: -186px 0;
			}

			&.favorite {
				background-position: -217px 0;
			}

			&.remove {
				background-position: -248px 0;
			}
		}

		.cookies-text {
			width: 100%;
			font-size: 14px;
			font-weight: 500;
			line-height: 20px !important;
			color: @color-primary;
		}

		@media @tablet {
			margin-bottom: 20px;
			margin-left: 0;
			min-height: 175px;
		}

		@media @mobile {
			margin-left: 0;
			width: 100% !important;
		}
	}

	> .container > .footer-content {
		position: relative;
		float: left;
		padding: 22px 0 42px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		row-gap: 22px;


		@media @mobile {
			div.col3 {
				margin-top: 0 !important;
				width: 100% !important;
			}
		}
	}

	@media @mobile {
		padding-left: 10px;
		width: ~"calc(100% - 10px)";
	}

	@media print {
		display: none;
	}
};

#footer {
	@footer();
}

@footer-bottom:
{
	float: left;
	height: 72px;
	width: 100%;
	background-color: @color-primary;
	font-family: Open Sans;
	font-style: normal;
	font-weight: normal;
	font-size: 14px;
	line-height: 24px;
	color: #FFFFFF;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	position:relative;
	overflow:hidden;

	@media @mobile {
		width: 100%;
		height: auto;
		min-width: auto !important;
		padding: 10px;
		box-sizing: border-box;
		overflow: visible !important;
	text-align:center;		
	}

	a {
		color: #fff;
		text-decoration: none;
		font-weight:normal;
	}

	&.book-footer {
		@media @mobile, @tablet {
			height: 80px;
		}
	}

	.footer-bottom-text {
		span, a {
			margin-right: 25px;
		}
	}

	.footer-bottom-icons {
		float: right;
		font-size: 24px;

		i, a {
			margin-left: 15px;
			margin-right: 0;
		}

		@media @mobile {
			margin-top: 10px;
			float: none;
			display: flex;
			flex-basis: content;
			align-content: center;
			justify-content: center;
		}
	}



	.container {
		@pv-footer-content();
		position:static;

		@media @mobile {
			width: 100%;
		}
					
			& > .dollar
		    {
			    display:block;
			    width:55px;
			    height:72px;
			    position:absolute;
			    left:~"calc(50% - 28px)";
			    bottom:-8px;
                background: url(img/Base/ico/2021/logo/Dollar.svg) no-repeat;
				pointer-events:none;
		    }
	}
};

#footer-bottom {
	@footer-bottom();
}

/*
#footer
{
	float:left;
    width:100%;
    position:relative;
	padding-top:20px;
    
    @pv-footer();

    & > .container
    {
        @pv-footer-content();
        & > .footer-content {
            @pv-footer-content();
            position:relative;
            float:left;
            padding-bottom:5px;

	        & > .dollar
		    {
			    display:block;
			    width:114px;
			    height:136px;
			    position:absolute;
			    right:0;
			    bottom:-5px;
                background: @pv-footer-dollarteken;
		    }

            & > .row {

				& > div {
					margin-bottom:20px;
				}

                & > .col2 {
                    width: @pv-footer-box-width;
                }
            }
        }
    }

	.box
	{
        width:100%;
		min-height:165px;
		font-size:11px;
		padding-left:8px;
		margin-left:1px;
		border-left:@pv-footer-box-border-left;
		@pv-footer-box();

        a
		{
			color:@pv-footer-link-color;
			text-decoration:@pv-footer-link-textdecoration;
            font-size:@pv-footer-font-size;
            font-weight:@pv-footer-font-weight;
		}

		h4
		{
			text-transform:@pv-footer-box-header-texttransform;
			font-weight:bold;
			color:@pv-footer-box-header-color;
			font-size:@pv-footer-box-header-font-size;
			margin-bottom:5px;
		}

		li
		{
			line-height:@pv-footer-line-height;
		}

		p
		{
			display:block;
			line-height:14px;
		}
	}

	ul.social
	{
		margin:5px 0 2px;
		width:100%;
	}

    ul.payment
    {
        &:first-child
        {
			margin:5px 0;
			width:100%;
        }

		li {
			float:none !important;
		}
    }

	.cookies-text {
		width:100%;
		&.last-row{
			width:180px;
		}
        @pv-footer-cookies-text();
	}

}

#footer-bottom
{
	float:left;
	height:@pv-footer-bottom-height;
	width:100%;
    background-color:@pv-footer-bottom-color;
}
	*/


@grid-desktop-hd: ~"screen and (min-width: 1408px)";
@grid-desktop: ~"screen and (min-width: 1300px) and (max-width: 1407px)";
@grid-tablet: ~"screen and (min-width: 768px) and (max-width: 1299px)";
@grid-mobile: ~"screen and (min-width: 0px) and (max-width: 767px)";

#footer-about {
	padding: 38px 0;

	&.gray-grid {
		background-color: #eff8fe;
		float: left;
		clear: both;
		width: 100%;
	}

	section.result-page-content {
		position: relative;
		padding: 0;
		margin: 0 auto;
		color: #004979;
		text-rendering: optimizeLegibility;

		& > .grid {
			padding: 0 36px;
		}

		@media @grid-mobile {
			width: ~"calc(100% - 32px)";

			&.results {
				width: 100%;
			}

			clear: both;
		}

		@media @grid-tablet {
			width: ~"calc(100% - 32px)";
			clear: both;
		}

		@media @grid-desktop {
			width: ~"calc(100% - 96px)";
		}

		@media @grid-desktop-hd {
			width: 950px;
		}

		.grid {
			display: grid;
			display: -ms-grid;
			grid-template-columns: repeat(12, minmax(0, 1fr));
			grid-row-gap: 50px;
			-ms-grid-column: repeat(12, minmax(0, 1fr));
			-ms-column-gap: 1em;

			@media @grid-mobile {
				grid-column-gap: 16px;
				-ms-column-gap: 16px;
			}

			@media @grid-tablet {
				grid-column-gap: 24px;
				-ms-column-gap: 24px;
			}

			@media @grid-desktop {
				grid-column-gap: 24px;
				-ms-column-gap: 24px;
			}

			@media @grid-desktop-hd {
				grid-column-gap: 32px;
				-ms-column-gap: 32px;
			}

			.width-2 {
				grid-column: span 2;
				-ms-grid-row-span: 2;
			}

			.width-4 {
				grid-column: span 4;
				-ms-grid-row-span: 4;
			}

			.width-6 {
				grid-column: span 6;
				-ms-grid-row-span: 6;
			}

			.width-12 {
				grid-column: span 12;
				-ms-grid-row-span: 12;
			}
		}
	}

	h2 {
		font-family: Hermes Maia T4;
		font-style: normal;
		font-weight: bold;
		font-size: 24px;
		line-height: 32px;
		text-align: center;
		letter-spacing: -.02em;
	}

	.about-company-item {
		font-size: 16px;
		line-height: 24px;
		margin-top: 16px;
		position: relative;

		.iconbox {
			width: 20px;
			height: 20px;
			margin: 2px 10px 0 0;
		}

		i {
			color: #390;
			font-size: 20px;
			margin-right: 10px;
		}
	}

	.deal-guarantee {
		position: absolute;
		top: -16px;
		right: 32px;
		width: 96px;
		height: 96px;
		background-size: contain;
		background-image: url(img/Base/elements/pc/Best_Deal.svg);
		background-repeat: no-repeat;
		filter: drop-shadow( 0px 100px 80px rgba(0, 0, 0, 0.07)) drop-shadow( 0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198)) drop-shadow( 0px 22.3363px 17.869px rgba(0, 0, 0, 0.0417275)) drop-shadow( 0px 12.5216px 10.0172px rgba(0, 0, 0, 0.035)) drop-shadow( 0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0282725)) drop-shadow( 0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802));
	}

	.usp-container {
		border-right: 1px solid #fff;
		padding-right: 119px;
	}

	.review-container {
		position: relative;

		&:after {
			position: absolute;
			left: calc(50% - 9px);
			display: inline-block;
			bottom: 37px;
			content: '';
			height: 0;
			width: 0;
			border-left: 18px solid transparent;
			border-right: 18px solid transparent;
			border-top: 18px solid #fff;
		}
	}

	.about-company-trustpilot {
		background-color: white;
		border-radius: 8px;
		width: 100%;
		padding: 24px;
		height: 212px;
		overflow: hidden;
		box-sizing: border-box;
		position: relative;

		strong {
			font-weight: bold;
			font-size: 16px;
			line-height: 24px;
			color: #004979;
			margin-bottom: 6px;
			float: left;
			clear: both;
			width: 100%;
		}

		.review-text {
			font-style: normal;
			font-weight: normal;
			font-size: 16px;
			line-height: 24px;
			color: #A8A8A8;
			float:left;
			white-space: normal;
			text-overflow: ellipsis;
			overflow: hidden;
			box-sizing:border-box;
			width:100%;
			max-height:70px;
			/* dit zal niet overal werken, maar als het werkt is het prachtig */
			-webkit-line-clamp:3;
			-webkit-box-orient:vertical;
			display:-webkit-box;

			@media @mobile{
				-webkit-line-clamp:2;
			}
		}

		.review-date {
			font-weight: bold;
			font-size: 10px;
			line-height: 12px;
			letter-spacing: 0.03em;
			text-transform: uppercase;
			color: #0092F2;
			margin-bottom: 4px;
		}

		.reviews-container {
			position: relative;

			div.carousel {
				margin-top: 40px;
				height: 130px;

				div {
					width: 100%;
				}
			}

			div.single-item,
			li {
				padding: 0 0 20px 0;
				float: left;
				clear: both;
				width: 100%;
				height: 130px;

				@media @mobile{
					height:90px;
				}
			}

			.slick-slide {
				width: 100% !important;
				height: 130px !important;
			}
		}

		.reviews-score-text {
			margin-left: 8px;
			font-family: Hermes Maia T4;
			font-weight: bold;
			font-size: 20px;
			line-height: 24px;
			letter-spacing: -0.02em;
			color: #73CF11;
		}

		.reviews-score-stamp {
			font-family: Hermes Maia T4;
			font-style: normal;
			font-weight: bold;
			font-size: 20px;
			line-height: 46px;
			text-align: center;
			letter-spacing: -0.02em;
			color: #73CF11;
			height: 48px;
			width: 48px;
			display: block;
			border-radius: 50%;
			border: 1px solid #73CF11;
		}
	}

	.result-page-reviews-amount {
		font-weight: 600;
		font-size: 12px;
		line-height: 20px;
		margin: 18px 0 10px;
		color: #A8A8A8;
		display: flex;
		display: -ms-flexbox;
		justify-content: center;
		-ms-flex-align: center;

		p {
			margin-left: 5px;
			margin-top: 7px;
		}
	}
}