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

@footer:
{
	float: left;
	width: 100%;
	position: static;
	background-color: @pv-color-grey-light;

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

	> .container > .footer-content {
		

		div {
			width: 230px;
		}
	}

	.box {
		margin-left: 9px;

		li {
			position: relative;
			padding-left: 10px;
			margin-left: 12px;
			line-height: 24px;

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

			a {
				font-family: Lato;
				font-style: normal;
				font-weight: normal;
				font-size: 14px;
				line-height: 20px;
				color: #333333;
				text-decoration: none;
			}

			&:before {
				display: inline-block;
				width: 19px;
				height: 19px;
				border-radius: 50%;
				top: 1px;
				content: '';
				position: absolute;
				left: -12px;
				background: url(img/Base/ico/pijltje_wit-d.svg) no-repeat 0 0;
				background-size: 19px 19px;
				filter: invert(47%) sepia(53%) saturate(3395%) hue-rotate( 358deg) brightness(102%) contrast(102%);
			}
		}

		.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 {
			font-family: Lato;
			font-style: normal;
			font-weight: bold;
			font-size: 16px;
			line-height: 24px;
			color: #0077BF;
			margin: 0 0 10px 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: @pv-color-blue;
		}

		@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:20px 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		row-gap:10px;
		column-gap:10px;

		div.col3{
			margin-right:0 !important;
		}

		@media @mobile{
			div.col3{
				width:100% !important;
				margin-top:0 !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: @dr-color-blue;
	font-style: normal;
	font-weight: normal;
	font-size: 14px;
	line-height: 24px;
	color: #FFFFFF;
	display: flex;
	justify-content: flex-start;
	align-items: center;

	@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;
	}

	&.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();

		@media @mobile {
			width: 100%;
		}
	}
};

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

	& + div.spacer{
		display:none;
	}
}


/*
#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: 50px 0;

	&.gray-grid {
		background-color: @pv-color-grey-light;
		float: left;
		clear: both;
		width: 100%;
	}

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

		@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: 1em;
			-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: 20px;

		.iconbox {
			margin-right: 18px;
		}

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

	.deal-guarantee {
		position: absolute;
		top: 0;
		right: 0;
		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));
	}

	.about-company-trustpilot {
		background-color: white;
		border-radius: 16px;
		width: 100%;
		padding: 24px;
		height: 212px;
		overflow-y: scroll;
		box-sizing: border-box;

		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;
		}

		.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 {
			li {
				padding: 0 0 20px 0;
				float: left;
				clear: both;
				width: 100%;
			}
		}

		.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: 10px 0;
		color: #A8A8A8;
		display: flex;
		display: -ms-flexbox;
		justify-content: center;
		-ms-flex-align: center;

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