@import '_vars.less';

#header {
	@media screen and (min-width: 701px) {
		&:after {
			margin-left: -40px;
			width: ~"calc( 100% + 80px )";
		}
	}
}

body {
	@media screen and (min-width: 601px) {
		&:before {
			content: '';
			display: block;
		}
	}
	&:before {
		@media screen and (min-width: 701px) and (max-width: 1000px) {
			height: 25vw;
		}
		@media screen and (min-width: 1001px) and (max-width: 1200px) {
			height: 20vw;
		}
		@media screen and (min-width: 1201px) and (max-width: 1400px) {
			height: 16.666vw;
		}
		@media screen and (min-width: 1401px) {
			height: 14.285vw;
		}
	}
}

#datePicker {
	font-size: 0;
	min-height: 30px;
	text-align: center;
	@media screen and (max-width: 700px) {
		margin-top: 20px;
	}
	@media screen and (min-width: 701px) and (max-width: 1000px) {
		top: ~"calc( 22vw - 28px)";
	}
	@media screen and (min-width: 1001px) and (max-width: 1200px) {
		top: ~"calc( 17.6vw - 28px)";
	}
	@media screen and (min-width: 1201px) and (max-width: 1400px) {
		top: ~"calc( 14.6vw - 28px)";
	}
	@media screen and (min-width: 1401px) {
		top: ~"calc( 12.5vw - 28px)";
	}

	@media screen and (min-width: 701px) {
		position: fixed;
		z-index: 6;
		width: 336px;
		padding: 4px 0 4px 38px;
	}
	@media screen and (min-width: 701px) and (max-width: 1000px) {
		right: 13px;
	}
	@media @m3456 {
		transform: translateX(-50%);
	}


	@media @m3 { left: 58vw; }
	@media @m456 { left: 50vw; }
	h2 {
		text-transform: uppercase;
		display: inline-block;
		vertical-align: middle;
		text-align: center;
		@media @m12 {
			font-size: 16px;
			width: 170px;
		}
		@media @m3456 {
			font-size: 21px;
			width: 220px;
		}
	}
	.arrow {
		display: inline-block;
		width: 19px;
		height: 19px;
		vertical-align: middle;
		&.prev {
			background: url('/images/arrow-left.svg') no-repeat center;
		}
		&.next {
			background: url('/images/arrow-right.svg') no-repeat center;
		}
		&:hover {
			opacity: 0.5;
		}
	}
	.changeDate {
		display: inline-block;
		vertical-align: top;
		margin-left: 20px;
		@media (min-width: 701px) {
			position: relative;			
		}
		.toggleCalendar {
			font-size: 0;
			display: inline-block;		
			width: 19px;
			height: 19px;
			cursor: pointer;
			background: url('/images/calendar.svg') no-repeat center;
			background-size: 15px;
			&:hover {
				opacity: 0.5;
			}
		}
		.calendar {
			display: none;
			position: absolute;
			right: 50%;
			@media (max-width: 700px) {
				transform: translateX(50%);
			}
			@media (max-width: 600px) {
				top: 150px;
			}
			@media (max-width: 601px) and (max-width: 700px) {
				top: ~"calc( 33.3vw ) + 50px";
			}
			@media (min-width: 701px) {
				top: 100%;	
			}
			background: #E4E4E4;
			width: 320px;
			color: @grey;
			padding: 0 10px 10px;
			margin-top: 20px;
			z-index: 4;
			.semibold;
			&:before {
				content: '';
				position: absolute;
				border: 7px solid #E4E4E4;
				top: -14px;
				border-left-color: transparent;
				border-top-color: transparent;
				@media (max-width: 700px) {
					left: 50%;
					margin-left: -7px;
					border-right-color: transparent;
				}
				@media (min-width: 701px) {
					right: 0;
				}
			}
			button {
				all: unset;
				font-size: 0;
				line-height: 1em;
				position: absolute;
				top: 0;
				width: 40px;
				padding: 25px 18px;
				cursor: pointer;
				&.prev {
					left: 0;
				}
				&.next {
					right: 0;
				}
				&[disabled] {
					opacity: 0.2;
					pointer-events: none;
				}
				&:hover {
					opacity: 0.6;
				}
			}
			.years {
				.year:not(.active) {
					display: none;
				}
				.year {
					p {
						font-size: 17px;
						text-align: center;
						padding: 1.3em 0;
					}
					.months {
						display: grid;
						grid-template-columns: 1fr 1fr 1fr;
						font-size: 14px;
						a {
							padding: 1em 0;
							border-bottom: 1px solid @grey;
							text-transform: lowercase;
							&:hover {
								opacity: 0.6;
							}
							&.active {
								color: @red;
							}
							&:nth-child(3n-1),
							&:nth-child(3n) {
								border-left: 1px solid @grey;
							}
							&:nth-child(10),
							&:nth-child(11),
							&:nth-child(12) {
								border-bottom: 0;
							}
						}
					}
				}
			}
		}
	}
}

#settings fieldset{
	display: flex;
	gap: 20px;
	@media screen and (max-width: 700px) {
		padding: 10px 20px 20px;
	}
	// padding: 10px 40px 20px;
	@media screen and (min-width: 1001px) {
		position: fixed;
		right: 40px;
		z-index: 6;
	}
	@media screen and (min-width: 701px) and (max-width: 1000px) {
		padding: 30px 40px;
	}
	@media screen and (min-width: 1001px) and (max-width: 1279px) {
		display: block;
		> div {
			width: 100% !important;
		}
		div + div {
			margin-top: 10px;
		}
	}
	@media screen and (min-width: 1001px) and (max-width: 1200px) {
		top: ~"calc( 17.6vw - 72px)";
	}
	@media screen and (min-width: 1201px) and (max-width: 1279px) {
		top: ~"calc( 14.6vw - 72px)";
	}
	@media screen and (min-width: 1280px) and (max-width: 1400px) {
		top: ~"calc( 14.6vw - 30px)";
	}
	@media screen and (min-width: 1401px) {
		top: ~"calc( 12.5vw - 30px)";
	}
	> div {
		width: 50%;
		background-color: rgba(0,0,0,.15);
		height: 30px;
		font-size: 0;
	}
	select, input {
		display: inline-block;
		-webkit-appearance: none;
		appearance: none;
		border-radius: 0;
		vertical-align: top;
		height: 100%;
		border: 0;
		color: #fff;
	}
	select, .select-selected {
		cursor: pointer;
		width: 100%;
		height: 100%;
		line-height: 28px;
		padding: 0 30px 0 11px;
		background: url('/images/select-arrow.svg') no-repeat right 10px center;
		opacity: 0.5;
		option {
			color: #000;
		}
		&:hover, &.active {
			opacity: 1;
		}
	}
	select.active + .select-selected {
		opacity: 1;
	}
	.custom-select {
		font-size: 14px;
	}
	.search {
		input[type="search"] {
			width: ~"calc( 100% - 23px )";
			background: transparent;
			padding: 0 7px 2px 11px;
			line-height: 28px;
			&::-webkit-input-placeholder { /* Edge */
				color: #fff;
				opacity: 0.5;
			}
			&:-ms-input-placeholder { /* Internet Explorer 10-11 */
				color: #fff;
				opacity: 0.5;
			}
			&::placeholder {
				color: #fff;
				opacity: 0.5;
			}
			&:hover {
				&::-webkit-input-placeholder { /* Edge */
					opacity: 1;
				}
				&:-ms-input-placeholder { /* Internet Explorer 10-11 */
					opacity: 1;
				}
				&::placeholder {
					opacity: 1;
				}				
			}
		}
		input[type="submit"] {
			cursor: pointer;
			background: url('/images/search.svg') no-repeat left center;
			background-size: 16px;
			width: 23px;
			opacity: 0.5;
			font-size: 0;
			&:hover {
				opacity: 1;
			}
		}
	}
}

#list {
	font-size: 0;
	color: #fff;
	width: 100vw;
	a {
		font-size: 14px;
		position: relative;
		@media screen and (max-width: 374px) {
			display: block;
			width: 100%;
			border-bottom: 1px solid #fff;
			.image {
				height: 100vw;
				position: relative;
			}
			.date {
				margin-top: -20px;
				p {
					display: inline-block;
					padding-right: 10px;
				}
			}
		}
		@media screen and (min-width: 375px) {
			display: inline-block;
			border-top: 1px solid #fff;
			margin-top: -1px;
			vertical-align: top;
			position: relative;
			.image {
				height: 50%;
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 50%;
			}
			.info {
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				height: 50%;
				.date, .photo-count {
					position: absolute;
					bottom: 0;
				}
			}
		}
		@media screen and (min-width: 375px) and (max-width: 600px) {
			width: 50vw;
			padding-bottom: 100%;
			border-bottom: 1px solid #fff;
			&:not(:nth-child(2n)) {
				border-right: 1px solid #fff;
			}
		}
		@media screen and (min-width: 601px) and (max-width: 700px) {
			width: 33.3vw;
			padding-bottom: 66.6%;
			border-bottom: 1px solid #fff;
			&:not(:nth-child(3n)) {
				border-right: 1px solid #fff;
			}
		}
		@media screen and (min-width: 701px) and (max-width: 1000px) {
			width: 25vw;
			padding-bottom: 50%;
			border-bottom: 1px solid #fff;
			&:not(:nth-child(4n)) {
				border-right: 1px solid #fff;
			}
		}
		@media screen and (min-width: 1001px) and (max-width: 1200px) {
			width: 20vw;
			padding-bottom: 40%;
			border-bottom: 1px solid #fff;
			&:not(:nth-child(5n)) {
				border-right: 1px solid #fff;
			}
		}
		@media screen and (min-width: 1201px) and (max-width: 1400px) {
			width: 16.666vw;
			padding-bottom: 33.333%;
			border-bottom: 1px solid #fff;
			&:not(:nth-child(6n)) {
				border-right: 1px solid #fff;
			}
		}
		@media screen and (min-width: 1401px) {
			width: 14.285vw;
			padding-bottom: 28.57%;
			border-bottom: 1px solid #fff;
			&:not(:nth-child(7n)) {
				border-right: 1px solid #fff;
			}
		}
		.image {
			background-color: @grey - #111;
			div {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background: no-repeat center;
				background-size: cover;
				transition: opacity 0.3s ease;
				&.normal {
					filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
					filter: gray;
					-webkit-filter: grayscale(100%);
					opacity: 0.55;
				}
				&.hover {
					opacity: 0;
					transition: opacity 0.3s @easing;
				}
			}
		}
		&.image-loading {
			.image div {
				opacity: 0;
			}
		}
		.info {
			transition: background-color 0.1s @easing;
			.title {
				font-size: 125%;
				max-width: 230px;
				padding: 12px 10px 12px 15px;
			}
			.date {
				padding: 12px 30px 12px 15px;
				line-height: 1.3em;
				opacity: 0.5;
			}
			.photo-count {
				padding: 13px 15px;
				opacity: 0.5;
			}
		}
		&:hover, &:focus {
			.image {
				.hover {
					opacity: 1;
				}
			}
			.info {
				background-color: @red;
			}
		}
		&.past {
			.info {
				opacity: 0.5;
			}
			&:hover .info {
				background-color: #555;
			}
		}
		&.bookings {
			.info:after {
				display: block;
				content: 'R';
				color: @red;
				padding: 13px 15px;
				position: absolute;
				right: 0;
				bottom: 0;
				pointer-events: none;
			}
			&:hover .info:after {
				color: #fff;
			}
		}
	}
}


.daterangepicker {
	font-family: inherit !important;
	color: #000 !important;
	border-radius: 0 !important;
	border: 0 !important;
	margin-top: 13px !important;
	@media screen and (max-width: 700px) {
		z-index: 4 !important;
	}
	.in-range {
	    background-color: @red + #999 !important;
	}
	.active {
		background-color: @red !important;
		color: #fff !important;
	}
	.applyBtn {
		color: @red;
	}
	button {
		cursor: pointer;
		&:hover {
			text-decoration: underline;
		}
	}
}


// .daterangepicker .drp-selected,
// .daterangepicker .drp-buttons .btn,
// .daterangepicker .calendar-table th,
// .daterangepicker .calendar-table td {
// 	font-size: 13px !important;
// 	// padding-bottom: 2px;
// 	height: 26px !important;
// 	font-weight: normal !important;
// }
// .daterangepicker .calendar-table th,
// .daterangepicker .drp-buttons .btn {
// 	.bold;
// }

.custom-select {
	display: block;
	width: 100%;
}
.select-items {
	background-color: #fff;
	font-size: 13px;
	color: #000;
	margin-top: 14px;
	padding: 8px;
	> div {
		padding: 5px 12px;
		&:hover {
			background-color: #eee;
		}
	}
	.same-as-selected {
		background-color: @red !important;
		color: #fff;
	}
	&:before {
		content: '';
		display: block;
		position: absolute;
		left: 50%;
		margin-left: -3px;
		top: -6px;
	    border-right: 6px solid transparent;
	    border-bottom: 6px solid #fff;
	    border-left: 6px solid transparent;
	}
}