.calendar-wrapper {

	text-align:center;

}



.calendar-controls {

	display:flex;

	justify-content:center;

	align-items:center;

	gap:20px;

}



.calendar-controls button {

	background:none;

	border:1px solid white;

	border-radius:50%;

	width:40px;

	height:40px;

	cursor:pointer;

}



#availability-calendar {

	display:grid;

	grid-template-columns:
	repeat(7,1fr);

	gap:8px;

	margin-top:20px;

}



.calendar-day {

	padding:12px 5px;

	border:1px solid rgba(255,255,255,.4);

	border-radius:8px;

	cursor:pointer;

	transition:.3s;

}



.calendar-day:hover {

	transform:scale(1.1);

}



.calendar-day.limited {

	background:
	rgba(255,200,0,.35);

}



.calendar-day.booked {

	background:
	rgba(255,0,0,.35);

}



.calendar-day:hover {

	background:
	rgba(255,255,255,.2);

}



.calendar-key {

	display:flex;

	justify-content:center;

	gap:10px;

	margin-top:20px;

	flex-wrap:wrap;

}



.calendar-key span {

	padding:5px 12px;

	border-radius:15px;

	font-size:.8rem;

}



.available {

	border:1px solid white;

}



.calendar-note {

	margin-top:20px;

}



@media screen and (max-width:736px){


	#availability-calendar {

		gap:4px;

	}


	.calendar-day {

		padding:8px 2px;

	}


}

/* Remove circles from calendar arrows */

.calendar-controls button {

	background: transparent !important;

	border: none !important;

	border-radius: 0 !important;

	width: auto;

	height: auto;

	padding: 0.5rem;

	line-height: 1;

	font-size: 1.5rem;

	box-shadow: none !important;

}



.calendar-controls button:hover {

	background: transparent !important;

	transform: scale(1.2);

}

/* Calendar availability colours */


/* Available dates */

.calendar-day:not(.limited):not(.booked) {

	border-color: rgba(0,255,100,0.7);

}



.calendar-day:not(.limited):not(.booked):hover {

	background: rgba(0,255,100,0.2);

}





/* Limited availability */

.calendar-day.limited {

	background: rgba(255,200,0,0.25);

	border-color: rgba(255,200,0,0.8);

}



.calendar-day.limited:hover {

	background: rgba(255,200,0,0.45);

}





/* Fully booked */

.calendar-day.booked {

	background: rgba(255,0,0,0.25);

	border-color: rgba(255,0,0,0.8);

	cursor:not-allowed;

}



.calendar-day.booked:hover {

	background: rgba(255,0,0,0.45);

}

/* Styling for the trailing/leading month padding days */
.calendar-day.padding-day {
  color: #b0b0b0 !important;          /* Dulls down the text color */
  background-color: #fafafa !important;   /* Slightly off-white background */
  opacity: 0.6;                       /* Blurs them into the background */
  cursor: not-allowed;                /* Shows a blocked cursor instead of a pointer */
  pointer-events: none;               /* Disables hover actions or clicks completely */
}

/* Styling for the Sun, Mon, Tue header row */
.calendar-day.weekday-header {
  font-weight: bold;
  color: #333;
  background-color: transparent !important; /* Removes block shading background */
  border: none !important;                 /* Optional: removes lines around headers */
  padding-bottom: 10px;                    /* Pushes the header slightly above the calendar cells */
  pointer-events: none;                    /* Disables hover and mouse interaction */
}