/* ALAE front-end refinements.
 * Keep Booked's structure and Public Appointments functionality intact.
 */

body .booked-calendar-shortcode-wrap i[class*="fa-"],
body #booked-profile-page i[class*="fa-"],
body .booked-modal i[class*="fa-"] {
	display: none !important;
}

/* Month navigation: a large CSS chevron, independent of icon fonts. */
body div.booked-calendar-wrap div.booked-calendar .bc-head .bc-row .bc-col .page-left,
body div.booked-calendar-wrap div.booked-calendar .bc-head .bc-row .bc-col .page-right {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	top: 50%;
	margin-top: -20px;
	font-size: 0;
	line-height: 1;
	text-decoration: none;
}

body div.booked-calendar-wrap div.booked-calendar .bc-head .bc-row .bc-col .page-left {
	left: 8px;
}

body div.booked-calendar-wrap div.booked-calendar .bc-head .bc-row .bc-col .page-right {
	right: 8px;
}

body div.booked-calendar-wrap div.booked-calendar .bc-head .bc-row .bc-col .page-left:hover {
	left: 8px;
}

body div.booked-calendar-wrap div.booked-calendar .bc-head .bc-row .bc-col .page-right:hover {
	right: 8px;
}

body div.booked-calendar-wrap .page-left::before,
body div.booked-calendar-wrap .page-right::before {
	content: "";
	display: block;
	box-sizing: border-box;
	width: 12px;
	height: 12px;
	border-top: 3px solid currentColor;
	border-right: 3px solid currentColor;
}

body div.booked-calendar-wrap .page-left::before {
	transform: rotate(-135deg);
}

body div.booked-calendar-wrap .page-right::before {
	transform: rotate(45deg);
}

body .booked-modal .bm-window > a.close {
	font-family: inherit;
	font-size: 25px;
	line-height: 1;
}

/* Available-day hover and selected-day marker share an exact visual size.
 * Reset transforms and every dimension that Booked or the theme can override. */
body div.booked-calendar-wrap div.booked-calendar .bc-body .bc-row.week .bc-col:not(.prev-date):not(.blur):hover .date .number,
body div.booked-calendar-wrap div.booked-calendar .bc-body .bc-row.week .bc-col.active .date .number,
body div.booked-calendar-wrap div.booked-calendar.booked-pa-active .bc-row.week .bc-col.booked.active .date .number,
body div.booked-calendar-wrap div.booked-calendar .bc-body .bc-row.week .bc-col.today.active .date .number,
body div.booked-calendar-wrap div.booked-calendar .bc-body .bc-row.week .bc-col.active:hover .date .number {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	width: 35px !important;
	height: 35px !important;
	min-width: 35px !important;
	min-height: 35px !important;
	max-width: 35px !important;
	max-height: 35px !important;
	padding: 0 !important;
	margin: -17.5px 0 0 -17.5px !important;
	border-radius: 50% !important;
	background: var(--booked-alae-accent, #0cb4ce) !important;
	color: #fff !important;
	line-height: 35px !important;
	transform: none !important;
	box-shadow: none !important;
}

/* List-view date selector: real day number, without an icon font. */
body .booked-list-view a.booked_list_date_picker_trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 34px;
	height: 34px;
	padding: 0;
	border-radius: 50%;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
}

body .booked-list-view a.booked_list_date_picker_trigger::before,
body .booked-list-view a.booked_list_date_picker_trigger::after {
	content: none !important;
	display: none !important;
}

/* The appointment card needs useful inner space in ALAE's narrow column. */
body div.booked-calendar-wrap .booked-appt-list {
	box-sizing: border-box;
	padding: 22px 16px 16px;
}

body div.booked-calendar-wrap .booked-appt-list h2 {
	margin: 0 0 18px;
	font-size: 18px;
	line-height: 1.35;
}

/* Each slot is a two-column grid. Height is content-driven, so public names
 * never overlap the next slot. */
body div.booked-calendar-wrap .booked-appt-list .timeslot,
body div.booked-calendar-wrap.small .booked-appt-list .timeslot {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 96px;
	column-gap: 12px;
	align-items: stretch;
	box-sizing: border-box;
	min-width: 0;
	margin: 0;
	padding: 0;
	border-top: 1px solid #ddd;
}

body div.booked-calendar-wrap .booked-appt-list .timeslot .timeslot-time,
body div.booked-calendar-wrap.small .booked-appt-list .timeslot .timeslot-time,
body div.booked-calendar-wrap .booked-appt-list .timeslot .timeslot-time.booked-public-appointments {
	display: flex !important;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	box-sizing: border-box;
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 72px;
	padding: 12px 0;
	font-size: 15px;
	line-height: 1.25;
}

body div.booked-calendar-wrap .booked-appt-list .timeslot .timeslot-range {
	display: block;
	font-weight: 700;
	line-height: 1.25;
}

body div.booked-calendar-wrap .booked-appt-list .timeslot .spots-available {
	display: block;
	padding-top: 4px;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.25;
	text-transform: none;
}

body div.booked-calendar-wrap .booked-appt-list .booked-public-appointment-title {
	display: block;
	margin-top: 9px;
	color: var(--booked-alae-accent, #0cb4ce) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	text-transform: none;
}

body div.booked-calendar-wrap .booked-appt-list .booked-public-appointment-list {
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin: 4px 0 0;
	padding: 0 0 0 17px;
	color: #777;
	list-style: disc outside;
	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 1.35 !important;
	overflow-wrap: anywhere;
}

body div.booked-calendar-wrap .booked-appt-list .booked-public-appointment-list li {
	display: list-item;
	margin: 0;
	padding: 0;
	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 1.35 !important;
}

body div.booked-calendar-wrap .booked-appt-list .booked-public-appointment-list li > * {
	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 1.35 !important;
}

body div.booked-calendar-wrap .booked-appt-list .timeslot .timeslot-people,
body div.booked-calendar-wrap.small .booked-appt-list .timeslot .timeslot-people {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	box-sizing: border-box;
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 72px;
	padding: 10px 0;
}

body div.booked-calendar-wrap .booked-appt-list .timeslot .timeslot-people button.button,
body div.booked-calendar-wrap.small .booked-appt-list .timeslot .timeslot-people button.button {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 96px;
	min-height: 38px;
	margin: 0;
	padding: 7px 8px;
	font-size: 12px;
	line-height: 1.2;
	text-align: center;
	white-space: normal;
}

body div.booked-calendar-wrap .booked-appt-list .timeslot .timeslot-people button.button[disabled],
body div.booked-calendar-wrap .booked-appt-list .timeslot .timeslot-people button.button[disabled]:hover,
body div.booked-calendar-wrap .booked-appt-list .timeslot .timeslot-people button.button[disabled]:focus,
body div.booked-calendar-wrap.small .booked-appt-list .timeslot .timeslot-people button.button[disabled],
body div.booked-calendar-wrap.small .booked-appt-list .timeslot .timeslot-people button.button[disabled]:hover,
body div.booked-calendar-wrap.small .booked-appt-list .timeslot .timeslot-people button.button[disabled]:focus {
	background: #9ca3af !important;
	border-color: #9ca3af !important;
	color: #fff !important;
	cursor: not-allowed;
	opacity: 1 !important;
	box-shadow: none !important;
}

body div.booked-calendar-wrap .booked-appt-list .timeslot .timeslot-people button.button.booked-user-reserved[disabled],
body div.booked-calendar-wrap .booked-appt-list .timeslot .timeslot-people button.button.booked-user-reserved[disabled]:hover,
body div.booked-calendar-wrap .booked-appt-list .timeslot .timeslot-people button.button.booked-user-reserved[disabled]:focus,
body div.booked-calendar-wrap.small .booked-appt-list .timeslot .timeslot-people button.button.booked-user-reserved[disabled],
body div.booked-calendar-wrap.small .booked-appt-list .timeslot .timeslot-people button.button.booked-user-reserved[disabled]:hover,
body div.booked-calendar-wrap.small .booked-appt-list .timeslot .timeslot-people button.button.booked-user-reserved[disabled]:focus {
	background: #64b881 !important;
	border-color: #64b881 !important;
	cursor: default;
}

body div.booked-calendar-wrap .booked-appt-list .timeslot .timeslot-people button .button-text,
body div.booked-calendar-wrap.small .booked-appt-list .timeslot .timeslot-people button .button-text {
	display: inline !important;
	font-weight: 600;
}

body div.booked-calendar-wrap .booked-appt-list .timeslot .timeslot-people button .button-timeslot,
body div.booked-calendar-wrap .booked-appt-list .timeslot .timeslot-people button .spots-available,
body div.booked-calendar-wrap .booked-appt-list .timeslot .timeslot-people button .timeslot-mobile-title {
	display: none !important;
}

body #booked-profile-page .booked-tabs li a {
	justify-content: center;
}

body #booked-profile-page .alae-appointment-datetime {
	display: inline-block;
	color: #777;
}

body #booked-profile-page .booked-profile-appt-list .appt-block {
	position: relative;
}

body #booked-profile-page .booked-profile-appt-list .appt-block .booked-fea-buttons > a.delete {
	box-sizing: border-box;
	width: auto;
	min-width: 0;
	padding: 7px 11px;
	font-size: 12px;
	line-height: 1.2;
	text-decoration: none;
	background: #c62828 !important;
	border-color: #c62828 !important;
	color: #fff !important;
}

body #booked-profile-page .booked-profile-appt-list .appt-block .booked-fea-buttons > a.delete:hover,
body #booked-profile-page .booked-profile-appt-list .appt-block .booked-fea-buttons > a.delete:focus {
	background: #a61f1f !important;
	border-color: #a61f1f !important;
	color: #fff !important;
}

body #booked-profile-page .booked-history-pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 20px 0 0;
}

body #booked-profile-page .booked-history-pagination a,
body #booked-profile-page .booked-history-pagination span {
	font-size: 13px;
	line-height: 1.3;
}

@media screen and (max-width: 480px) {
	body div.booked-calendar-wrap .booked-appt-list {
		padding: 20px 14px 14px;
	}

	body div.booked-calendar-wrap .booked-appt-list .timeslot,
	body div.booked-calendar-wrap.small .booked-appt-list .timeslot {
		grid-template-columns: minmax(0, 1fr) 90px;
		column-gap: 10px;
	}

	body div.booked-calendar-wrap .booked-appt-list .timeslot .timeslot-people button.button,
	body div.booked-calendar-wrap.small .booked-appt-list .timeslot .timeslot-people button.button {
		width: 90px;
	}

	body #booked-profile-page .booked-tabs li a {
		justify-content: flex-start;
	}

	body #booked-profile-page .booked-profile-appt-list .appt-block .booked-fea-buttons {
		float: none;
		margin: 0 0 10px;
	}
}