/* New sites as of August 2025 use this stylesheet - includes traffic light classes for dates and times */
:root {
	
}

/*  ----------------------------------------------------------	*/
/*  					Datepicker Resets 	 					*/
/*  ----------------------------------------------------------	*/
.ll-skin-melon .ui-datepicker table {
	width: 100%;
	text-align: center;
}

/*  ----------------------------------------------------------	*/
/*  					Datepicker Heading/Title 	 			*/
/*  ----------------------------------------------------------	*/
.ll-skin-melon .ui-datepicker-header {
	display: flex;
	align-items:center;
	justify-content: space-between;
}

.ll-skin-melon .ui-datepicker .ui-datepicker-prev{
	order:1;
}
.ll-skin-melon .ui-datepicker .ui-datepicker-title{
	order:2;
	flex-grow:1;
	text-align:center;
	
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 1.5rem;
	padding: 1rem 1rem;
}
.ll-skin-melon .ui-datepicker .ui-datepicker-next{
	order:3;
}

/* Remove default prev/next arrows */
.ll-skin-melon .ui-datepicker span.ui-icon{
	display:none;
}

.ll-skin-melon .ui-datepicker-prev, .ll-skin-melon .ui-datepicker-next{
	cursor:pointer;
}

.ll-skin-melon .ui-datepicker-prev:before, .ll-skin-melon .ui-datepicker-next:before{
	display:block;
	content: "";
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url("data:image/svg+xml,<svg class='bi bi-chevron-left' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
	height: 30px;
	width: 30px;
}

.ll-skin-melon .ui-datepicker-prev:before {

}

.ll-skin-melon .ui-datepicker-next:before {
	transform: rotate(180deg);

}

/*  ----------------------------------------------------------	*/
/*  					Datepicker Calendar 	 				*/
/*  ----------------------------------------------------------	*/
.ll-skin-melon .ui-datepicker tr{
	display:flex;

}
.ll-skin-melon .ui-datepicker td, .ll-skin-melon .ui-datepicker th{
	background: transparent;
	width: 20px;
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	flex-grow:1;
	display:flex;
	align-content:stretch;
	justify-content:center;
}

.ll-skin-melon .ui-datepicker th {
	color: var(--secondary);
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 1rem;
}

/*hack to get the cells to be a minimum of the cell width */
.ll-skin-melon .ui-datepicker td:before{
	content: "";
	display: block;
	padding-top: 90%;
	float: left;
	opacity:0.3;
	width:0px;
}

.ll-skin-melon .ui-datepicker td .ui-state-default{
	position:relative;
	display:flex;
	align-content:center;
	justify-content:center;
	flex-direction:column;
	width:100%;
	text-decoration: none;
	color: var(--font-body-color);
}

.ll-skin-melon .ui-datepicker td:not(.ui-state-disabled) .ui-state-default:hover{
	text-decoration: none;
	cursor:pointer;
}
	
/* Disabled dates */
.ll-skin-melon .ui-datepicker td.ui-state-disabled .ui-state-default{
	opacity: 0.2;
}

/* Pricing */
.ll-skin-melon .ui-datepicker td .ui-state-default .datePrice{
	font-weight: normal;
	font-size:90%;
	opacity: 0.8;
}

/* Hover */
.ll-skin-melon .ui-datepicker td:not(.ui-state-disabled):hover .ui-state-default:not(.ui-state-active){
	background: var(--secondary);
	color: #fff;
}


/* Selected date */
.ll-skin-melon .ui-datepicker td:not(.ui-state-disabled) .ui-state-default.ui-state-active {
	background: var(--primary);
	color: #fff;
}

/* events */
.ui-state-default .dateEvent {
	position: absolute;
	top: 2px;
	left: 2px;
	border-radius: 30px;
	height: 10px;
	width: 10px;
}

/*  ----------------------------------------------------------	*/
/*  					Dates Traffic Light 	 				*/
/*  ----------------------------------------------------------	*/
.ll-skin-melon .ui-datepicker td.availability-good .ui-state-default{
	background-color:#28a745;
	color: #fff;
}

.availability-good-text{
	color: #28a745;
}

.ll-skin-melon .ui-datepicker td.availability-limited .ui-state-default{
	background-color:#ffc107;
	color: #fff;
}
.availability-limited-text{
	color: #ffc107;
}

.ll-skin-melon .ui-datepicker td.availability-soldout .ui-state-default{
	background-color:#dc3545;
	color: #fff;
}

.availability-soldout-text{
	color: #dc3545;
}

/*  ----------------------------------------------------------	*/
/*  						Time slots 	 						*/
/*  ----------------------------------------------------------	*/
.time-slot{
	display: block;
	border-color: var(--primary); 
	background: var(--primary);
	color: #fff;
	padding: 10px;
	cursor: pointer;
	word-wrap: break-word;
	position:relative;
	overflow:hidden;
}

.time-slot:hover{
	color: #fff;
}

.time-slot:not(.time-slot-unavailable):hover{
	text-decoration:none;
	opacity: 0.7;
	transform: none;
}
#pricing_types .time-slot:hover{
	text-decoration:none;
	opacity: 1;
	transform: none;
}

.time-slot.time-slot-unavailable{
	opacity: 0.4;
	line-height:norma;
}

/*  ----------------------------------------------------------	*/
/*  				Time slots 	Traffic Lights					*/
/*  ----------------------------------------------------------	*/
.time-slot:before{
	content: "";
	position: absolute;
	top: 0px;
	width: 100%;
	height: 5px;
}
.time-slot.timeslot-good:before, #perentageFreeKey .timeslot-good{
	background: #179E5B;
}

.time-slot.timeslot-limited:before, #perentageFreeKey .timeslot-limited{
	background-color:rgb(232,138,50);
}

.time-slot.timeslot-low:before, #perentageFreeKey .timeslot-low{
	background-color:red;
}

/*should stop the empty div at the bottom of the page */
/*#ui-datepicker-div { 
	display:none; 
	width: 40vw;
	max-width: 372px;
	min-width: 372px;
}
*/