.hidden-for-calendar {
	display: none;
}

#filter-dates .filter-header,
#filter-time-slots .filter-header {
	text-transform: uppercase;
	color: #00254A;
	font-weight: bold;
	font-size: 12px;
	letter-spacing: 2px;
	padding: 10px 15px;
	background-color: #FAFAFA;
	border-top: 1px solid #D8D8D8;
	border-bottom: 1px solid #D8D8D8;
}

#filter-dates {
	.dates-select-h,
	.dates-select-v {
		display: flex;
		overflow: auto;
		/*scrollbar-width: thin;*/
		scroll-behavior: smooth;
	}
	.dates-select-h {
		flex-wrap: nowrap;
	}
	.dates-select-v {
		flex-wrap: wrap;
		padding-right: 0 !important;
		transition: max-height 0.4s ease;
	}
	.date-option {
		flex: 0 0 auto;
		width: 60px;
		text-align: center;
		font-weight: 600;
		padding: 10px 0;
		border: 2px solid #D8D8D8;
		border-radius: 6px;
		cursor: pointer;
		color: #00254A;
		.weekday {
			font-size: 8px;
			line-height: 10px;
			text-transform: uppercase;
			letter-spacing: 2px;
			opacity: 0.5;
		}
		.month {
			font-size: 12px;
			line-height: 18px;
		}
		.date {
			font-size: 18px;
			line-height: 24px;
		}
		.others-label {
			font-size: 12px;
			line-height: 14px;
		}
		.others-icon {
			font-size: 18px;
			line-height: 18px;
			margin-top: 3px;
		}
	}
	.date-option:hover {
		border-color: color-mix(in srgb, var(--brand-color) 30%, white);
		background-color: color-mix(in srgb, var(--brand-color) 10%, white);
	}
	.date-option.active {
		border-color: var(--brand-color);
		background-color: var(--brand-color);
		color: white;
	}
	.date-option.active:hover {
		border-color: color-mix(in srgb, var(--brand-color) 70%, white);
		background-color: color-mix(in srgb, var(--brand-color) 90%, white);
	}
}

#dates-calendar {
	.ui-datepicker {
		display: inline-block;
		box-shadow: none;
		padding: 0 0 1.5em;
		max-width: 576px;
		margin: 0 auto;
	}
	.ui-datepicker-header {
		text-align: center;
		padding: 0.5em 0;
		position: relative;
		font-weight: bold;
	}
	.ui-datepicker-prev,
	.ui-datepicker-next {
		position: absolute;
		top: 0.5em;
		width: 20px;
		height: 20px;
		cursor: pointer;
		span { display: none; }
	}
	.ui-datepicker-prev { left: 0.5em; }
	.ui-datepicker-next { right: 0.5em; }
	.ui-datepicker-prev::before,
	.ui-datepicker-next::before {
		content: '';
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		width: 10px;
		height: 10px;
		border: solid #CCC;
		border-width: 0 2px 2px 0;
		padding: 3px;
	}
	.ui-datepicker-prev::before { transform: translate(-50%, -50%) rotate(135deg); }
	.ui-datepicker-next::before { transform: translate(-50%, -50%) rotate(-45deg); }
	.ui-datepicker-calendar {
		border-collapse: collapse;
		margin: 5px auto 0;
		width: 100%;
	}
	.ui-datepicker-calendar th {
		text-align: center;
		padding: 0.5em 0;
		font-size: 0.85em;
	}
	.ui-datepicker-calendar td {
		text-align: center;
		padding: 0;
		font-weight: 600;
		height: 50px;
	}
	.ui-datepicker-calendar td a,
	.ui-datepicker-calendar td span {
		display: inline-block;
		border-radius: 6px;
		border: 2px solid transparent;
		color: #00254A;
		width: calc(100% - 6px);
		height: calc(100% - 6px);
		align-content: center;
	}
	.ui-datepicker-calendar td span {
		border-radius: 0;
		cursor: default;
	}

	.ui-datepicker-calendar {
		td.has-event a {
			border-color: #D8D8D8;
			background-color: white;
			color: #00254A;
		}
		td.has-event a:hover {
			border-color: color-mix(in srgb, var(--brand-color) 30%, white);
			background-color: color-mix(in srgb, var(--brand-color) 10%, white);
		}
		td.active a {
			border-color: var(--brand-color);
			background-color: var(--brand-color);
			color: white;
		}
		td.active a:hover {
			border-color: color-mix(in srgb, var(--brand-color) 70%, white);
			background-color: color-mix(in srgb, var(--brand-color) 90%, white);
		}
		td.ui-datepicker-unselectable span {
			opacity: 0.4;
		}
	}
	.ui-datepicker-calendar {
		td.colored.has-event a {
			border-color: var(--active-dates-color);
			background-color: color-mix(in srgb, var(--active-dates-color) 10%, white);
			color: #00254A;
		}
		td.colored.has-event a:hover {
			border-color: color-mix(in srgb, var(--active-dates-color) 60%, white);
			background-color: color-mix(in srgb, var(--active-dates-color) 30%, white);
		}
		td.colored.active a {
			border-color: var(--active-dates-color);
			background-color: var(--active-dates-color);
			color: white;
		}
		td.colored.active a:hover {
			border-color: color-mix(in srgb, var(--active-dates-color) 70%, white);
			background-color: color-mix(in srgb, var(--active-dates-color) 70%, white);
		}
		td.colored.no-event span {
			opacity: 1;
			background-color: var(--inactive-dates-color, transparent);
		}
		td.colored.no-event.text-black span {
			color: #00254A;
		}
		td.colored.no-event.text-white span {
			color: white;
		}
	}
}

#filter-time-slots {
	.time-slot-option {
		border: 2px solid #D8D8D8;
		border-radius: 6px;
		padding: 8px 24px;
		font-weight: 600;
		font-size: 12px;
		line-height: 24px;
		letter-spacing: 1px;
		cursor: pointer;
		white-space: nowrap;
		input {
			display: none;
		}
	}
	.time-slot-option:hover {
		border-color: color-mix(in srgb, var(--brand-color) 30%, white);
		background-color: color-mix(in srgb, var(--brand-color) 10%, white);
		color: #00254A;
	}
	.time-slot-option:has(input:checked) {
		border-color: var(--brand-color);
		background-color: var(--brand-color);
		color: white;
	}
	.time-slot-option:has(input:checked):hover {
		border-color: color-mix(in srgb, var(--brand-color) 70%, white);
		background-color: color-mix(in srgb, var(--brand-color) 90%, white);
	}
	.time-slot-option.animate__highlight {
		animation: timeSlotHighlight 800ms ease-in-out both;
	}
}
@keyframes timeSlotHighlight {
	0%, 60%, 100% { transform: scale(1); }
	80% { transform: scale(1.05); }
}