/*
*		    ________      .___   
*	__  _  _\_____  \   __| _/
*	\ \/ \/ / _(__  <  / __ |
*	 \     / /       \/ /_/ |
*	  \/\_/ /______  /\____ |
*	               \/      \/
*
*	@author			Jacques Baars <j@w3d.co.za>
*
*	@notice			This is the property of W3Designs, W3Development, W3D,
*					it is illegal to use this source code without the required permission,
*					contact j@w3d.co.za for further advice or permissions.
*
*	@license		Copyright (c) 2016 W3Designs (PTY) Ltd. (http://www.w3d.co.za)
*/

/* ------------- CARS:ROOT ------------- */

:root{
	--carsSpacing: 20px;
}

/* ------------- CARS ------------- */

/* Cars */
#cars{}
	
	/* Carousel */
	#cars .carousel{
		gap: 20px;
		width: 100%;
		display: flex;
		overflow-x: auto;
		padding-bottom: 30px;
		scroll-behavior: smooth;
		anchor-name: --carousel;
		scroll-marker-group: after;
		scroll-snap-type: x mandatory;
	}
	
	#cars .carousel::-webkit-scrollbar{
		display: none;
	}
	
	#cars .carousel::scroll-marker-group{
		gap: 5px;
		display: flex;
		justify-content: center;
	}
	
	#cars .carousel::scroll-button(*){
		border: none;
		color: #fff;
		height: 60px;
		width: 60px;
		cursor: pointer;
		position: fixed;
		font-weight: bold;
		border-radius: 50%;
		position-anchor: --carousel;
		font-size: var(--fontSize160);
		background-color: var(--bgColor);
	}
	
	#cars .carousel::scroll-button(*):disabled{
		opacity: 0.5;
		cursor: auto;
	}
	
	#cars .carousel::scroll-button(left){
		content: '←';
		translate: calc(-1 * var(--carsSpacing));
		position-area: left center;
	}
	
	#cars .carousel::scroll-button(right){
		content: '→';
		translate: var(--carsSpacing);
		position-area: right center;
	}

		#cars .carousel .vehicle{
			height: 474px;
			flex: 0 0 400px;
			margin-bottom: 0;
			align-content: center;
			scroll-snap-align: start;
			scroll-snap-stop: always;
		}

			#cars .carousel .vehicle::scroll-marker{
				content: '';
				width: 10px;
				height: 10px;
				border-radius: 50%;
				background-color: var(--softBgColor);
			}

			#cars .carousel .vehicle::scroll-marker:target-current{
				background-color: var(--bgColor);
			}
				
				#cars .carousel .vehicle .book-now{
					flex-direction: column;
				}
				
				#cars .carousel .vehicle .book-now .available{
					margin-bottom: var(--carsSpacing);
				}
	
	/* Vehicle */
	#cars .vehicle{
		position: relative;
		background-color: #fff;
		border: 1px solid var(--softBgColor);
		margin-bottom: calc(50px + var(--carsSpacing));
	}
	
	#cars .data-control .vehicle{
		margin-bottom: calc(60px + var(--carsSpacing));
	}

	#cars .vehicle:hover{
		z-index: 1;
		box-shadow: rgba(38, 57, 77, 0.655) 0px 13.0767px 19.615px -6.53833px;
	}
	
		#cars .vehicle .title{
			padding: var(--carsSpacing);
			border-bottom: 1px solid var(--softBgColor);
		}
		
		#cars .vehicle .info{
			padding: var(--carsSpacing);
		}
		
			#cars .vehicle .info .image{}
			
			#cars .vehicle .info .description{}
		
				#cars .vehicle .info .description h5{
					font-size: var(--fontSize100);
				}
				
				#cars .vehicle .info .description .occupants{
					margin-top: 5px;
					margin-bottom: var(--carsSpacing);
					padding-bottom: var(--carsSpacing);
					border-bottom: 1px solid var(--softBgColor);
				}
				
				#cars .vehicle .info .description .safety{
					margin-bottom: var(--carsSpacing);
					padding-bottom: var(--carsSpacing);
					border-bottom: 1px solid var(--softBgColor);
				}
				
				#cars .vehicle .info .description .luxury-comfort{}
				
		#cars .vehicle .book-now.float{
			width: 50%;
			right: 10px;
			bottom: -50px;
			position: absolute;
			padding: var(--carsSpacing);
			justify-content: space-between;
			background-color: var(--softBgColor);
		}
				
		#cars .data-control .vehicle .book-now.float{
			bottom: -60px;
		}

		#cars .vehicle:hover .book-now.float{
			z-index: 1;
			box-shadow: rgba(38, 57, 77, 0.655) 0px 13.0767px 19.615px -6.53833px;
		}
		
			#cars .vehicle .book-now .available{}
			
				#cars .vehicle .book-now .available span{
					width: 16px;
					height: 16px;
					margin-left: 5px;
					border-radius: 50%;
					display: inline-block;
				}
			
					#cars .vehicle .book-now .available span.green{
						background-color: var(--greenColor);
					}
			
					#cars .vehicle .book-now .available span.red{
						background-color: var(--redColor);
					}
			
			#cars .vehicle .book-now .buttons{}
	
	/* Book Now */
	#cars .book-now{
		padding: 0 15%;
	}
			
/* 600px */	
@media screen and (max-width: 600px){
	:root{
		--carsSpacing: 10px;
	}
	
	#cars .carousel::scroll-button(*){
		width: 40px;
		height: 40px;
	}
		
	#cars .carousel .vehicle{
		height: 376px;
		flex: 0 0 100%;
	}
	
	#cars > .vehicle{
		margin-bottom: calc(55px + var(--carsSpacing));
	}
				
		#cars > .vehicle .book-now{
			right: 0;
			bottom: -55px;
			width: calc(100% - 20px);
		}
	
	#cars .book-now{
		padding: 0;
	}
}