/**
 * LSX Search styles.
 *
 * @package lsx-search
 */

@import "include-media";
@import "customizer-search-body-colours";
@import "lsx-blog-customizer";
@import "layout-selector";

// Spacing
/*@include media('phone') {
	.search, .archive {
		.facetwp-sidebar.widget-area {
			+ .content-area {
				width: 66.66667%;
			}
		}
	}
}*/

@include media(">=tablet") {
	.search,
	.archive,
	.blog {
		.content.role.row {
			margin-right: auto;
			margin-left: auto;
		}
		.facetwp-sidebar.widget-area {
			padding: 0px 20px 20px 20px;
			margin-top: 4.25rem;
			max-width: 271px;
			margin-left: 5px;
			margin-right: 5px;
			+ .content-area {
				margin-top: 4.25rem;
				width: 100%;
				max-width: 695px;
				padding-left: 20px;
				padding-right: 0;
				&.search-sidebar-left {
					padding-left: 0;
					padding-right: 20px;
				}
				.facetwp-template {
					.lsx-to-archive-item {
						margin-top: 2.4rem;
					}
				}
				.facetwp-bottom-row-1 {
					margin-top: 2.4rem;
				}
			}
		}
	}
}

@include media(">=desktop") {
	.search,
	.archive,
	.blog {
		.facetwp-sidebar.widget-area {
			+ .content-area {
				width: 100%;
				max-width: 859px;
			}
		}
	}
}

%bootstrap-form-control {
	display: block;
	width: 100%;
	height: 50px;
	// padding: 6px 12px;
	// font-size: 15px;
	// line-height: 1.6;
	color: #4a4a4a;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ddd;
	border-radius: 2px;
	// box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	// transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;

	// lsx-form-control

	border-width: 2px;
	box-shadow: none;
	font-size: 18px;
	line-height: 1.33;
	padding: 10px 20px;
	transition: all 150ms ease;

	&:focus {
		border-color: #418ad0;
		// outline: 0;
		// box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(65, 138, 208, 0.6);
	}
}

#primary.content-area {
	@include media("<phone") {
		margin-top: 4.25rem;
	}
	#facetwp-top {
		.facetwp-sort-select,
		.facetwp-type-sort select {
			//left: 10px;
			position: relative;
		}
	}
}

#secondary.facetwp-sidebar {
	padding: 0px 15px 15px 11px;
	@include media("<phone") {
		margin-top: 4.25rem;
		margin-bottom: 2.4rem;
		// .row:not(.facetwp-row) {
		// 	display: none;
		// }
	}
	@media (min-width: 768px) {
		.facetwp-row {
			border-radius: 3px 3px 3px 3px;
		}
	}
	.facetwp-filter-title {
		text-align: left;
		@include media("<phone") {
			display: none;
		}
	}
	.facetwp-item,
	.facetwp-filter-title {
		background: #ffffff;
		border-radius: 0;
		padding: 15px 12px;
		margin-bottom: 3px;
	}

	.facetwp-type-search {
		background: transparent;
		padding: 0px;
		margin-top: 0 !important;
	}

	.facetwp-item.facetwp-form {
		background: transparent;
		padding: 0px;
		margin-bottom: 25px;
		.search-form {
			.input-group {
				.field:first-child {
					width: 77%;
				}
				.field:nth-child(2) {
					width: 23%;
				}
			}
			.btn.search-submit {
				box-shadow: 1px 1px 0 0 #27639e;
				border-radius: 0 2px 2px 0;
			}
		}
	}
}

.archive-tour-operator {
	.facetwp-template {
		.row.lsx-to-archive-items {
			margin-top: -2.5rem;
		}
	}
}

.facetwp-type-search {
	.facetwp-search-wrap {
		.facetwp-search {
			@extend %bootstrap-form-control;

			border-radius: 2px 0 0 2px;
			float: none;
			padding: 8px 14px 10px;
			width: 190px;

			@include media(">=phone") {
				width: 120px;
			}

			@include media(">=desktop") {
				width: 170px;
			}
		}
	}
}

.search-submit-facetwp {
	body.facetwp-loading-body & {
		display: none;
	}
}

.lsx-search-form {
	.input-group {
		width: 100%;
	}
	.field {
		display: inline-block;
		float: left;
		margin-left: 0;
		margin-top: 10px;
		width: 80%;
		.facetwp-search {
			min-width: 100%;
			border: 1px solid rgb(228, 228, 228);
		}
		&:not(.submit-button) {
			position: relative;
			z-index: 2;
		}
		&.submit-button {
			width: 20%;
			.search-submit {
				width: 100%;
			}
		}
		@include media(">=phone") {
			margin-left: 10px;
			margin-top: 0;

			&:first-child {
				margin-left: 0;
			}
		}

		&.combination-toggle.hidden {
			display: none;
		}

		.search-field {
			border-radius: 0;
			float: none;
			padding: 8px 14px 10px;
			width: 230px;

			@include media(">=phone") {
				width: 400px;
			}

			&.error {
				border-color: red;
			}
		}

		.btn {
			@include media("<phone") {
				padding: {
					left: 20px;
					right: 20px;
				}

				.fa {
					display: none;
				}
			}
		}

		.btn-dropdown {
			@include media("<phone") {
				min-width: 230px;
			}
		}

		&.submit-button:nth-child(2) {
			margin-left: 0;

			.btn {
				margin-left: -3px;

				@include media("<phone") {
					padding-right: 17px;
				}
			}
		}

		&.submit-button:not(:nth-child(2)) {
			.btn {
				@include media("<phone") {
					min-width: 228px;
				}
			}
		}
	}
}

.blog,
.archive,
.search-results,
.search-no-results {

	.is-loading .facetwp-overlay {
		position:absolute;
	}

	.facetwp-sidebar.widget-area {
		.facetwp-item {
			//margin-top: 4.25rem;

			&:first-child {
				margin-top: 0;
			}
			.facetwp-collapsed {
				display: flex;
				justify-content: space-between;
				button.facetwp-collapse {
					border: none;
					background: none;
					height: 100%;
					&:before {
						content: " ";
						font-family: FontAwesome;
						font-size: 15px;
					}
					&[aria-expanded="false"] {
						&:before {
							content: "\f067";
						}
					}
					&[aria-expanded="true"] {
						&:before {
							content: "\f068";
						}
					}
				}
			}
		}

		.facetwp-facet {
			margin-bottom: 0;
			margin-top: 2rem;
		}

		.lsx-search-title {
			text-align: left;

			@include media(">=phone") {
				margin-top: 2rem;
				margin-bottom: 2rem;
				&.lsx-to-search-title-results {
					padding-bottom: 2rem;
				}
			}

			@include media(">=phone") {
				margin-top: 0;
				margin-bottom: 0;
			}

			.facetwp-counts {
				display: inline-block;
			}
		}

		.facetwp-results {
			margin-top: 20px !important;
			//border-bottom: 1px solid #edebeb;
			padding-bottom: 20px;
			.lsx-search-title {
				margin-bottom: 0;
			}
		}

		.facetwp-results {
			.input-group-btn {
				vertical-align: top;
			}
		}

		.facetwp-type-slider {
			.noUi-connect {
				box-shadow: none;
			}

			.noUi-target {
				background-color: #fff;
				border-radius: 2px;
				box-shadow: none;
				padding: 0 15px;
			}
		}

		.facetwp-form {
			.search-field {
				width: 190px;
				height: 50px;
				@include media(">=phone") {
					width: 120px;
				}

				@include media(">=desktop") {
					width: 170px;
				}
			}

			.btn.search-submit {
				padding-left: 20px;
				padding-right: 17px;
				font-size: 0;
				height: 48px;
				&:before {
					content: "\f002";
					font-family: FontAwesome;
					font-size: 20px;
					text-align: center;
					font-weight: 200;
				}
			}
		}
	}
}

.lsx-pagination-wrapper.facetwp-custom {
	margin-top: 2.4rem;

	@include media(">=phone") {
		margin-top: 0;
	}

	.facetwp-page {
		margin: 0;
		padding: 0;
		cursor: pointer;
	}
}

.facetwp-type-alpha {
	&.facetwp-type-alpha {
		margin-bottom: 0;

		@include media(">=desktop") {
			line-height: 40px;
		}
	}

	.facetwp-alpha {
		margin-right: 0;

		&.available {
			transition: color 300ms ease;
		}

		& + .facetwp-alpha {
			margin-left: 5px;
		}
	}
}

.facetwp-top-row-1 {
	margin: 0;
}
.facetwp-top-row-2 {
	margin-top: 12px;
}

.facetwp-bottom-row-1 {
	margin-top: 4.25rem;
}

.facetwp-sort,
.facetwp-per-page,
#facetwp-top .facetwp-type-sort
 {
	@include media(">=phone") {
		float: left;
	}
}

//Original facetwp pager
.facetwp-type-pager {
	@include media(">=phone") {
		float: right;
	}
}
.facetwp-pager {
	@include media(">=phone") {
		float: right;
	}
	> .facetwp-page {
		border-radius: 3px;
		border-style: solid;
		border-width: 2px;
		display: inline-block;
		height: 40px;
		line-height: 36px;
		text-align: center;
		vertical-align: top;
		width: 40px;
		cursor: pointer;
		margin-right: 5px;
		&.active,
		&:hover {
			color: #fff !important;
		}
		&.dots {
			border: none;
		}
		&.prev {
			font-size: 0;
			&:before {
				font: normal normal normal 15px/1 FontAwesome;
				content: "\f100";
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100%;
			}
		}
		&.next {
			font-size: 0;
			&:before {
				font: normal normal normal 15px/1 FontAwesome;
				content: "\f101";
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100%;
			}
		}
	}
}

.facetwp-sort,
.facetwp-per-page,
#facetwp-top .facetwp-type-sort {
	background-color: white;
	border: 1px solid #dadddf;
	&:hover {
		cursor: pointer;
		box-shadow: 0.5px 0.5px 1px #ddd;
		z-index: 1;
	}
}
.facetwp-sort-select,
.facetwp-per-page-select,
.woocommerce select.facetwp-sort-select,
#facetwp-top .facetwp-type-sort select {
	cursor: pointer;
	appearance: none;
	background: transparent;
	background-repeat: no-repeat;
	background-position-x: 100%;
	background-position-y: 50%;
	border-style: solid;
	border-width: 1px;
	box-shadow: none;
	display: inline-block;
	font-size: 14px;
	line-height: 1.25;
	min-width: 160px;
	height: 50px;
	padding: 0;
	transition: all 150ms ease;
	width: auto;
	border-radius: 0;
	background: none;
	border: none;
	z-index: 1;
}

.facetwp-per-page:after,
.facetwp-sort:after,
#facetwp-top .facetwp-type-sort:after {
	content: "\f078";
	color: #999999;
	position: relative;
	right: 30px;
	font-family: FontAwesome;
	font-size: 10px;
	top: 0px;
	cursor: pointer;
	z-index: 0;
}

.lsx-body-grid-layout.search {
	.facetwp-template {
		> .post-wrapper {
			margin-top: 0 !important;
			.lsx-slot {
				&:first-child,
				&:nth-child(2),
				&:nth-child(3) {
					@include media(">=phone") {
						margin-top: 0 !important;
					}
				}
				.moretag {
					display: block;
					margin: 0px -15px -15px;
					padding: 1.3rem 0;
					text-align: center;
					transition: background 300ms ease;
					color: #fff;
					text-transform: initial;
					@include media("<=phone") {
						margin: 0px -10px -15px;
					}
				}
				.entry-layout {
					padding-bottom: 0;
				}
				.post-tags-wrapper,
				.entry-meta,
				.post-meta-categories {
					display: none;
				}
				.entry-title {
					text-align: center;
				}
			}
		}
	}
}
.facetwp-template {
	.searchwp-revised-search-notice {
		display: block;
		width: 100%;
		padding: 0 15px;
	}
	> .no-results {
		margin-top: 4rem;
	}

	article.lsx-slot {
		position: relative;

		.lsx-label-post-type {
			padding: 4px 1rem;
			position: absolute;
			right: 25px;
			top: 10px;
			z-index: 1;
		}
		.entry-layout {
			padding-bottom: 0;
			.entry-summary {
				padding-bottom: 15px;
			}
		}
		.post-tags-wrapper,
		.entry-meta,
		.post-meta-categories {
			display: none;
		}
		.moretag {
			text-transform: initial;
		}
	}
}
body.blog,
body.category,
body.tag {
	&:not(.lsx-hide-post-category) {
		.facetwp-template {
			article.lsx-slot {
				.post-meta-categories {
					display: block;
				}
			}
		}
	}
	&:not(.lsx-hide-post-tags) {
		.facetwp-template {
			article.lsx-slot {
				.post-tags-wrapper {
					display: block;
				}
			}
		}
	}
	&:not(.lsx-hide-post-author) {
		.facetwp-template {
			article.lsx-slot {
				.entry-meta {
					display: block;
					padding-top: 0;
					.post-meta-author {
						display: inline;
					}
				}
			}
		}
	}
	&:not(.lsx-hide-post-date) {
		.facetwp-template {
			article.lsx-slot {
				.entry-meta {
					display: block;
					padding-top: 0;
					.post-meta-time {
						display: inline;
					}
				}
			}
		}
	}
}
.lsx-body-list-layout {
	.facetwp-template {
		article.lsx-slot {
			.lsx-label-post-type {
				left: 10px;
				right: initial;
				text-transform: capitalize;
			}
		}
	}
}

.woocommerce,
.woocommerce-page {
	.facetwp-template {
		ul.products {
			margin-top: 0; // Same margin-bottom from li.product

			li.product {
				@include media(">=phone") {
					width: 30.75%;
				}
			}
		}
	}
}

.facetwp-filters-wrap {
	@include media("<phone") {
		height: 100%;
		left: 0;
		margin: 0 !important;
		padding: 15px;
		position: fixed !important;
		overflow-x: visible;
		overflow-y: auto;
		top: 0;
		transform: translate(-100%, 0);
		z-index: 7;
	}
}

.ssm-overlay {
	background-color: rgba(0, 0, 0, 0.2);
	bottom: 0;
	display: none;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 5;
}

.ssm-nav-is-open {
	overflow: hidden;

	#secondary {
		z-index: 9999;
	}
}

.ssm-row-margin-bottom {
	margin-bottom: 4.25rem;
}

.ssm-row-margin-top {
	margin-top: 4.25rem;
}

.facetwp-slider-wrap {
	padding-bottom: 2.4rem;
}

.facetwp-slider-label {
	font-size: 18px;
}

.facetwp-hidden {
	display: none;
}

.facetwp-toggle {
	cursor: pointer;
}

.facetwp-checkbox {
	cursor: pointer;
	padding-left: 25px;
	position: relative;

	& + & {
		margin-top: 5px;
	}

	&:before {
		content: "\f096";
		color: inherit;
		display: inline-block;
		font-family: "FontAwesome";
		font-size: 18px;
		line-height: 1;
		position: absolute;
		left: 0;
		text-rendering: auto;
		top: 4px;

		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	&.checked {
		&:before {
			content: "\f14a";
		}
	}

	&.depth-1 {
		margin-left: 25px;
	}
	&.depth-2 {
		margin-left: 50px;
	}
	&.country {
		display: none;

		.continent-visible & {
			margin-left: 20px;
		}
		&.continent-checked {
			display: block;
		}
	}
	&.region {
		margin-left: 20px;
		display: none;

		.continent-visible & {
			margin-left: 40px;
		}
		&.country-checked {
			display: block;
		}
	}
}

.facetwp-radio {
	cursor: pointer;
	padding-left: 25px;
	position: relative;

	& + & {
		margin-top: 5px;
	}

	&:before {
		content: "\f10c";
		color: inherit;
		display: inline-block;
		font-family: "FontAwesome";
		font-size: 15px;
		line-height: 1;
		position: absolute;
		left: 0;
		text-rendering: auto;
		top: 5px;

		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	&.checked {
		&:before {
			content: "\f111";
		}
	}
	&.depth-1 {
		margin-left: 25px;
	}
	&.depth-2 {
		margin-left: 50px;
	}
}

.facetwp-overflow {
	margin-top: 5px;
}

.facetwp-loading {
	display: block;

	&:before {
		animation: fa-spin 2s infinite linear;
		content: "\f110";
		color: inherit;
		display: inline-block;
		font-family: "FontAwesome";
		font-size: 16px;
		line-height: 1;
		text-rendering: auto;

		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
}

.facetwp-results-clear-btn {
	margin-top: 10px;
}
.facetwp-slider-reset {
	margin-top: 10px;
}

@include customizer-search-body-colours(
	#f6f6f6,
	#dadddf,
	#4a4a4a,
	#418ad0,
	#f7ae00,
	#919191
);

#ui-datepicker-div {
	z-index: 99 !important;
}

/* New style */

body:not(.search-no-results) {
	#facetwp-top,
	#facetwp-bottom > .row {
		background-color: transparent;
		border: none;
	}
	.lsx-search-title.lsx-search-title-results {
		display: flex;
		margin-bottom: 0;
	}
	.facetwp-sidebar {
		background-color: transparent;
		border: none;
	}

	#facetwp-top {
		margin-bottom: 25px;
	}

	#facetwp-top,
	#facetwp-bottom > .row {
		padding: 0;
		margin-left: 0;
		margin-right: 0;
		min-height: 50px;
		@media (max-width: 767px) {
			margin-left: 0;
			margin-right: 0;
		}
		.row > .col-xs-12 {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0;
			height: 51px;

			.facetwp-pager {
				flex-grow: 2;
				display: flex;
				justify-content: flex-end;
			}
		}
	}
	#facetwp-bottom {
		.col-xs-12 {
			padding: 0;
		}
	}
}

.search-no-results {
	#facetwp-top,
	.facetwp-sidebar {
		background-color: transparent;
		border: none;
	}
	#facetwp-top,
	#facetwp-bottom {
		display: none;
	}
	.facetwp-template {
		margin-top: 1em;
		background-color: #ffffff;
		border: 1px solid #e4e4e4;
		display: flex;
		flex-direction: column;
		min-height: 300px;
		justify-content: center;
	}
}

@media (max-width: 767px) {
	#facetwp-top,
	.search-form:not(.form-inline) {
		display: none;
	}
	.lsx-pagination-wrapper.facetwp-custom {
		margin-top: 0;
	}
	.logged-in {
		.facetwp-item.facetwp-filters-wrap {
			padding-top: 10rem;
		}
		.facetwp-item-wrap > .ssm-row-margin-bottom:first-child {
			margin-top: 12.4rem;
		}
		.ssm-row-margin-bottom {
			margin-top: 8.4rem;
		}
	}
	.facetwp-sort-select,
	.facetwp-per-page-select,
	#facetwp-top .facetwp-type-sort select {
		width: 100%;
		margin-bottom: 0;
	}
}