/**
 * Imports
 */
@use "sass:color";
@use "variables" as *;
@use "mixins" as *;

// Products list icon
table.wp-list-table span.product-type.appointment::before {
	content: "\f321";
	font-family: "dashicons" !important;
}

// Product data tabs
#woocommerce-product-data {
	ul.wc-tabs {
		li.appointments_staff_tab {
			a {
				&::before {
					content: "\e03a" !important;
					font-family: "woocommerce" !important;
				}
			}
		}

		li.appointments_availability_tab {
			a {
				&::before {
					content: "\e00e" !important;
					font-family: "woocommerce" !important;
				}
			}
		}
	}
}

// CPT table.
.post-type-wc_appointment {
	.wp-list-table {
		// Descriptions.
		span.description {
			display: block;
			color: $grey;
		}

		// Addons.
		.wc-item-meta {
			margin: 0;

			strong {
				font-weight: 400;
			}

			li:last-child {
				margin: 0;
			}

			p {
				color: $grey;
			}
		}

		// Columns.
		th.column-appointment_id {
			width: 30ch;

			@media only screen and ( min-width: 980px ) {
				width: 42ch;
			}
		}

		th.column-appointment_actions {
			padding-right: 2em;
			width: 12ch;

			@media screen and ( min-width: 782px ) {
				text-align: right;
			}
		}

		//* Appointment actions.
		td.column-appointment_actions {
			@media screen and ( min-width: 782px ) {
				text-align: right;
			}

			&:last-child {
				padding-right: 2em;
			}

			a {
				@include il();
				padding: 0 !important;
				height: 2em !important;
				width: 2em;
				margin: 2px 0 2px 4px;
				overflow: hidden;
				vertical-align: middle;

				&::after {
					@include icon();
					line-height: 2.1;
				}

				&.confirm::after {
					content: "\e017";
				}

				&.cancel::after {
					content: "\e013";
				}

				&.view::after {
					content: "\e010";
				}
			}
		}

		// Appointment statuses.
		.appointment-status {
			@include statuses();
		}
	}

	// Appointments list table.
	.tablenav {
		.date_filter {
			display: inline-block;
			position: relative;

			.date_from,
			.date_to {
				margin-right: 6px;
				max-width: 7.5rem;
				padding: 0 0 0 28px;
				vertical-align: middle;
			}

			.ui-datepicker-trigger {
				background: transparent;
				border: 0;
				color: #777;
				margin: -10px 0 0 6px;
				padding: 0;
				position: absolute;
				left: 0;
				top: 50%;
			}
		}

		.actions {
			.select2 {
				margin-right: 6px;
			}
		}
	}

	.calendar_filter {
		display: inline-block;
		position: relative;
		width: 100%;

		.date_from,
		.date_to {
			padding: 7px 7px 7px 35px;
		}

		.ui-datepicker-trigger {
			background: transparent;
			border: 0;
			color: #777;
			margin: -10px 0 0 10px;
			padding: 0;
			position: absolute;
			left: 0;
			top: 50%;
		}
	}
}

#woocommerce-appointment-data {
	border-bottom: 1px solid #ccd0d4;

	h2.hndle,
	h3.hndle,
	.handlediv,
	.postbox-header {
		display: none;
	}

	.inside {
		display: block !important;
		margin: 0;
		padding: 0;
	}
}

#woocommerce-appointable-staff-data {
	.inside,
	.woocommerce_options_panel {
		padding: 0;
		margin: 0;
	}
}

#woocommerce-customer-data {
	.customer_data {
		strong {
			display: block;
		}

		p {
			padding: 0;
		}

		.view {
			margin: 2em 0 0;
		}
	}
}

//* Appointment details
#appointment_data {
	@include clearfix();

	h2 {
		margin: 0;
		font-size: 21px;
		line-height: 1.2;
		text-shadow: 1px 1px 1px #fff;
		padding: 0;

		a {
			font-size: 16px;
			margin-left: 5px;
			text-decoration: none;
		}
	}

	h3 {
		color: #333;
		font-weight: 400;
		margin: 0;
	}

	h4 {
		font-size: 14px;
		margin: 1.33em 0 0;
	}

	p {
		color: #777;
	}

	p.appointment-order-number {
		margin: 0;
		line-height: 1.6em;
		font-size: 1.2em;
	}

	.appointment_data_container {
		clear: both;
		padding: 24px 24px 32px;

		&.appointment_data_addons {
			background: #f8f8f8;
			border-top: 1px solid #ddd;
		}
	}

	.appointment_data_column {
		width: 32%;
		padding: 0 2% 0 0;
		float: left;

		&.last_column {
			padding-right: 0;
		}

		&.data_column_wide {
			clear: both;
			width: 100%;
		}

		.wc-item-meta {
			margin: 1em 0 0;

			strong {
				margin-right: 0.2em;
			}

			p {
				display: inline-block;
				margin: 0.5em 0;

				&:last-child {
					margin-bottom: 0;
				}
			}
		}

		.form-field {
			float: left;
			width: 48%;
			padding: 0;
			margin: 9px 0 0 0;

			&._appointment_parent_id_field,
			&.appointment_start_date_field,
			&.appointment_end_date_field {
				margin-right: 3.8%;
			}

			&._appointment_all_day_field {
				width: 100%;
			}

			label {
				display: block;
				padding: 0 0 3px;
			}

			input[type="text"],
			input[type="number"],
			input[type="time"],
			textarea,
			select {
				width: 100%;
			}

			#appointment_status_chzn {
				.chzn-search {
					display: none;
				}
			}

			.chzn-container {
				width: 100% !important;
			}

			.date-picker {
				width: 100%;
			}

			.hour,
			.minute {
				width: 3.5em;
			}

			small {
				display: block;
				margin: 5px 0 0 0;
				color: $grey;
			}

			&.form-field-wide {
				input[type="text"] {
					width: auto;
				}
			}
		}

		.form-field.last {
			float: right;
		}

		.form-field-wide {
			width: 100%;
			clear: both;

			input,
			textarea {
				width: 100%;
			}

			select {
				width: 100%;
			}
		}

		p.none_set {
			color: $grey;
		}

		._billing_first_name_field,
		._billing_address_1_field,
		._billing_city_field,
		._billing_country_field,
		._billing_email_field,
		._shipping_first_name_field,
		._shipping_address_1_field,
		._shipping_city_field,
		._shipping_country_field {
			float: left;
		}

		._billing_last_name_field,
		._billing_address_2_field,
		._billing_postcode_field,
		._billing_state_field,
		._billing_phone_field,
		._shipping_last_name_field,
		._shipping_address_2_field,
		._shipping_postcode_field,
		._shipping_state_field {
			float: right;
		}

		._billing_company_field,
		._shipping_company_field {
			clear: both;
			width: 100%;
		}

		._billing_email_field {
			clear: left;
		}

		div.edit_address {
			display: none;
			overflow: hidden;
			zoom: 1;
			padding-right: 1px;
		}
	}

	#appointment_date {
		width: 50%;
	}

	.select2-container {
		min-width: 100% !important;
		max-width: 100% !important;
	}
}

/**
 * Small screen optimisation
 */
@media only screen and ( max-width: 1280px ) {
	#appointment_data {
		.appointment_data_column {
			width: 48%;
		}
	}
}

@media only screen and ( max-width: 580px ) {
	#appointment_data {
		.appointment_data_column {
			width: 100%;
			clear: both;
		}
	}
}

//* Calendar form
.wc_appointments_calendar_form {
	.appointments {
		color: #000;
		width: 100%;

		.single_appointment {
			font-size: 15px;
			line-height: 1.5em;
			margin: 0 0 4px 0;
			overflow: hidden;
			padding: 0;
			position: absolute;
			width: 100%;
			z-index: 5;

			&:hover {
				z-index: 10;
				box-shadow: 0 8px 9px -6px rgba( 0, 0, 0, 0.2 );
				transition: all 150ms ease;
			}

			a {
				background-color: rgba( 255, 255, 255, 0.8 );
				color: #000;
				display: block;
				height: 100%;
				margin-left: 4px;
				padding: 2px 4px;
				position: relative;
				text-decoration: none;
				width: 100%;

				&:hover {
					background-color: rgba( 255, 255, 255, 0.7 );
				}

				ul {
					padding: 0;
					margin: 0;

					li {
						list-style: none;
						font-size: 0.75em;
						padding: 0;
						margin: 0;
						border: 0;

						&.appointment_status {
							display: inline-block;
							position: absolute;
							top: 3px;
							left: auto;
							right: 16px;
							text-align: right;

							&::before {
								font-family: WooCommerce;
								speak: none;
								font-weight: 400;
								font-variant: normal;
								text-transform: none;
								line-height: 1;
								-webkit-font-smoothing: antialiased;
								margin: 0;
								text-indent: 0;
								content: "";
								font-size: 1.2em;
							}

							&.status-unpaid::before,
							&.status-incart::before {
								content: "\e033";
							}

							&.status-pending::before,
							&.status-pending-confirmation::before {
								content: "\e012";
							}

							&.status-confirmed::before {
								content: "\e011";
							}

							&.status-paid::before {
								content: "\e015";
							}

							&.status-cancelled::before {
								content: "\e013";
							}

							&.status-complete::before {
								content: "\e015";
							}
						}
					}
				}
			}
		}

		&.bymonth {
			margin-top: 10px;
			max-height: 100px;
			overflow: auto;

			.single_appointment {
				position: relative;
			}
		}
	}

	.events {
		color: #000;
		width: 100%;

		.event_card {
			border-radius: 4px;
			font-size: 13px;
			line-height: 22px;
			margin: 0 0 4px 0;
			min-height: 25px;
			overflow: hidden;
			padding: 0;
			position: absolute;
			width: 100%;
			z-index: 5;

			&:hover {
				z-index: 10;
				box-shadow: 0 8px 9px -6px rgba( 0, 0, 0, 0.2 );
				transition: all 150ms ease;
			}

			a {
				background-color: rgba( 255, 255, 255, 0.8 );
				color: #000;
				display: block;
				height: 100%;
				margin-left: 4px;
				padding: 2px 4px;
				position: relative;
				text-decoration: none;
				width: 100%;

				&:hover {
					background-color: rgba( 255, 255, 255, 0.7 );
				}

				ul {
					padding: 0;
					margin: 0;

					li {
						list-style: none;
						line-height: 22px;
						font-size: 0.75em;
						padding: 0;
						margin: 0;
						border: 0;

						&.event_status {
							display: inline-block;
							position: absolute;
							top: 3px;
							left: auto;
							right: 16px;
							text-align: right;

							&::before {
								font-family: WooCommerce;
								speak: none;
								font-weight: 400;
								font-variant: normal;
								text-transform: none;
								line-height: 1;
								-webkit-font-smoothing: antialiased;
								margin: 0;
								text-indent: 0;
								content: "";
								font-size: 1.2em;
							}

							&.status-unpaid::before,
							&.status-incart::before {
								content: "\e033";
							}

							&.status-pending::before,
							&.status-pending-confirmation::before {
								content: "\e012";
							}

							&.status-confirmed::before {
								content: "\e011";
							}

							&.status-paid::before {
								content: "\e015";
							}

							&.status-cancelled::before {
								content: "\e013";
							}

							&.status-complete::before {
								content: "\e015";
							}
						}
					}
				}
			}
		}

		&.bymonth {
			margin-top: 10px;
			max-height: 100px;
			overflow: auto;

			.event_card {
				position: relative;
			}
		}
	}

	.calendar_wrapper {
		display: flex;
		overflow: hidden;

		.calendar_presentation {
			display: flex;
			flex: 1 1 auto;
			flex-direction: column;

			.calendar_header {
				.header_wrapper {
					background-color: #fff;
					border: solid #ddd;
					border-width: 1px 1px 0;
					display: flex;
					flex-flow: row wrap;
					z-index: 10;

					.header_labels {
						flex: 0 0 $labels-width;

						.empty_label {
							cursor: auto;
							display: block;
							height: $elabel-height;
							margin: 10px 10px 0;
							vertical-align: top;

							@include noselect;
						}

						.allday_label {
							cursor: auto;
							display: block;
							box-sizing: border-box;
							height: $alabel-height;
							padding: 6px 12px;
							vertical-align: top;

							@include noselect;
						}
					}

					.header_days {
						flex: 1 1 0;

						&.staff_scroll {
							overflow-x: auto;

							.days_wrapper {
								.header_column {
									flex: 0 0 $column-width;
								}
							}
						}

						.days_wrapper {
							background-color: #fff;
							display: flex;
							margin: 0;
							min-width: 100%;
							position: relative;
							width: auto;
							white-space: nowrap;
							z-index: 4;

							.header_column {
								box-sizing: border-box;
								border-left: 1px solid #ddd;
								cursor: default;
								display: flex;
								flex: 1 1 0%;
								flex-direction: column;
								position: relative;

								.header_label {
									height: $elabel-height;
									margin: 10px 10px 0;

									&.staff_label,
									&.week_label {
										text-align: center;
									}

									a {
										position: relative;
										display: inline-block;
										vertical-align: top;
										text-align: center;
										text-decoration: none;
										z-index: 9;

										&:hover {
											opacity: 0.8;
										}
									}

									img {
										border-radius: 50%;
										margin-right: 5px;
									}

									span {
										vertical-align: top;
										display: block;
										line-height: 1.3;

										&.daynum {
											font-size: 3.5em;
										}

										&.staff_name {
											max-width: 145px;
											overflow: hidden;
										}
									}
								}

								.header_allday {
									box-sizing: border-box;
									display: block;
									padding: 3px 0;
									height: $alabel-height;
								}
							}
						}
					}
				}
			}

			.calendar_body {
				background-image: linear-gradient( to bottom, #999 0%, #f9f9f9 1%, #f9f9f9 26%, #f9f9f9 50%, #ddd 51%, #f9f9f9  52% );
				background-repeat: repeat;
				background-position-x: 0;
				background-size: auto $hours-height;
				background-origin: content-box;
				border: solid #ddd;
				border-width: 0 1px 1px;
				display: flex;
				flex-flow: row wrap;

				.body_labels {
					flex: 0 0 $labels-width;

					.hours {
						font-size: 0.85em;
						margin: 0;
						position: relative;
						z-index: 4;

						.hour_label {
							display: block;
							height: 60px;
							height: $labels-height;

							&:first-child {
								label {
									display: none;
								}
							}

							label {
								background: #f9f9f9;
								float: left;
								margin-top: -15px;
								padding: 5px 10px;
								vertical-align: top;

								@include noselect;
							}
						}
					}
				}

				.body_days {
					flex: 1 1 0;

					&.staff_scroll {
						overflow-x: auto;

						.body_wrapper {
							.body_column {
								flex: 0 0 $column-width;
							}
						}
					}

					.body_wrapper {
						display: flex;
						height: $wrapper-height;
						margin: 0;
						min-width: 100%;
						width: auto;
						white-space: nowrap;
						z-index: 8;

						.body_column {
							box-sizing: border-box;
							border-left: 1px solid #ddd;
							display: flex;
							flex: 1 1 0%;
							flex-direction: column;
							position: relative;
						}
					}
				}
			}

			.current {
				background-color: rgba( 0, 0, 0, 0.05 );
				z-index: 3;
			}

			.past a {
				color: rgba( 0, 0, 0, 0.4 );
			}

			.indicator {
				width: 100%;
				height: 0;
				margin-top: -1px;
				border-bottom: 2px solid rgba( 255, 0, 0, 0.9 );
				background-color: rgba( 255, 255, 255, 0.5 );
				position: absolute;
				z-index: 4;
			}
		}
	}

	.tablenav {
		background-color: #f1f1f1;
		height: auto;
		margin: 0;
		padding-top: 10px;
		width: 100%;

		@include clearfix();

		.filters {
			display: none;
			float: left;

			@media screen and ( min-width: 782px ) {
				display: inline-block;
			}

			.select2 {
				margin-right: 3px;
			}
		}

		.views {
			float: right;
			margin: 0 0 -1px;
			padding: 0;

			a {
				display: inline-block;
				padding: 15px 12px;
				text-decoration: none;

				@media screen and ( min-width: 782px ) {
					padding: 10px 12px;
				}

				&.current {
					background-color: #fff;
					border: solid #ddd;
					border-width: 1px 1px 0;
					color: #000;
					pointer-events: none;
					cursor: default;
				}
			}
		}

		.date_selector {
			display: inline-block;
			float: left;
			margin: 0 5px;

			div {
				float: left;
				margin: 0 3px;

				&:first-of-type {
					select {
						margin-right: 5px;
					}
				}
			}

			select {
				vertical-align: middle;
				width: 6em;
			}

			a {
				@include ir();
				font-size: 1.1em;
				padding: 0.5em;

				&::before {
					@include icon();
					line-height: 2.3;
				}
			}

			a.prev {
				float: left;

				&::before {
					content: "\e00b";
				}
			}

			a.next {
				float: right;

				&::before {
					content: "\e008";
				}
			}

			.calendar_day {
				margin: 0;
			}
		}

		.week_selector {
			display: inline-block;
			float: left;
			margin: 0 5px;

			.week_picker {
				float: left;

				.calendar_day {
					padding: 6px;
					margin: 0;
				}
			}

			button {
				background: 0;
				border: 0;
				padding: 0;
			}

			a {
				@include ir();
				font-size: 1.1em;
				padding: 0.5em;

				&::before {
					@include icon();
					line-height: 2.3;
				}
			}

			a.prev {
				float: left;

				&::before {
					content: "\e00b";
				}
			}

			a.next {
				float: right;

				&::before {
					content: "\e008";
				}
			}
		}
	}

	.wc_appointments_calendar {
		width: 100%;

		td {
			color: #bbb;
			padding: 10px 10px 0 0;
			font-size: 15px;
			border-right: 1px solid #ddd;
			border-bottom: 1px solid #ddd;
			height: 120px;

			.datenum {
				margin-left: 10px;
			}

			&.calendar-current-day {
				.datenum {
					color: $red;
					font-weight: 600;
				}
			}

			&.calendar-passed-day {
				background: #efefef;

				a,
				ul,
				li {
					color: rgba( 0, 0, 0, 0.4 );
				}
			}

			&.calendar-diff-month {
				background: #efefef;
			}
		}

		tbody {
			tr {
				td {
					&:last-child {
						border-right: 0;
					}
				}

				&:last-child {
					td {
						border-bottom: 0;
					}
				}
			}
		}
	}
}

@media only screen and ( max-width: 580px ) {
	.header_days:not(.staff_scroll) {
		.header_column {
			.header_label {
				margin: 5px 5px 0 !important;
				max-height: 50px;

				span.daynum {
					font-size: 1.2em !important;
				}
			}
		}
	}

	.header_labels:not(.staff_scroll) {
		.empty_label {
			margin: 5px 5px 0 !important;
			max-height: 50px;
		}
	}
}

// React admin calendar and appointment dialog (unified)
.wca-react-calendar {
	min-height: 60vh;
	height: auto;

	.wca-calendar-container {
		position: relative;
		padding-top: 1px;
	}

	.wca-loading-bar {
		@include loading-bar(-1px, $wp-primary);
	}

	.wca-react-toolbar {
		display: flex;
		gap: 8px;
		align-items: center;
		margin: 12px 0;
		flex-wrap: wrap;

		.wca-toolbar-left {
			display: flex;
			gap: 6px;
			align-items: center;

			.wca-toolbar-title {
				margin-left: 8px;
				font-size: 1.3em;
			}
		}

		.wca-toolbar-filters {
			display: flex;
			gap: 8px;
			align-items: center;
			margin-left: 16px;

			.wca-async-select {
				position: relative;
				min-width: 240px;
				max-width: 300px;
			}

			.wca-async-select__control {
				display: flex;
				align-items: center;
				border: 1px solid #8c8f94;
				border-radius: 4px;
				background: #fff;
				padding: 0 8px;
				height: 32px;
				box-sizing: border-box;
				cursor: text;
			}

			.wca-async-select__control.is-open {
				border-color: $wp-primary;
				box-shadow: 0 0 0 1px $wp-primary;
			}

			.wca-async-select__selected-avatar {
				display: inline-flex;
				align-items: center;
				margin-right: 6px;

				.wca-avatar {
					width: 18px;
					height: 18px;
					border-radius: 50%;
					object-fit: cover;
				}
			}

			.wca-async-select__control input {
				flex: 1 1 auto;
				border: 0;
				outline: 0;
				padding: 0;
				margin: 0;
				font-size: 13px;
				background: transparent;
				box-shadow: none;
			}

			.wca-async-select__clear {
				appearance: none;
				border: 0;
				background: transparent;
				color: #555;
				cursor: pointer;
				font-size: 15px;
				padding: 0 4px;
				line-height: 1;
			}

			.wca-async-select__caret {
				color: #555;
				cursor: pointer;
				margin-left: 6px;
				font-size: 12px;
			}

			.wca-async-select__menu {
				position: absolute;
				left: 0;
				right: 0;
				top: calc( 100% + 2px );
				background: #fff;
				border: 1px solid #c3c4c7;
				border-radius: 4px;
				box-shadow: 0 8px 16px rgba( 0, 0, 0, 0.08 );
				z-index: 10000;
				max-height: 260px;
				overflow: auto;
			}

			.wca-async-select__loading,
			.wca-async-select__empty {
				padding: 8px;
				font-size: 13px;
				color: #555;
			}

			.wca-async-select__list {
				display: block;
			}

			.wca-async-select__option {
				padding: 8px 10px;
				font-size: 13px;
				cursor: pointer;
				display: flex;
				align-items: center;
				gap: 8px;

				.wca-avatar {
					width: 18px;
					height: 18px;
					border-radius: 50%;
					object-fit: cover;
				}
			}

			.wca-async-select__option:hover {
				background: #f0f6fc;
			}
		}

		.wca-toolbar-views {
			margin-left: auto;
			display: flex;
			gap: 6px;

			.button.is-current {
				background: $wp-primary;
				border-color: $wp-primary;
				color: #fff;
			}
		}
	}

	#wca-calendar-view {
		height: auto;

		&.fc {
			.fc-daygrid-more-link {
				cursor: pointer;
			}

			.fc-daygrid-event,
			.fc-timegrid-event,
			.fc-list-event {
				cursor: pointer;
			}

			.is-past,
			.is-cancelled {
				filter: grayscale(0.6);
				-o-filter: grayscale(0.6);
				-ms-filter: grayscale(0.6);
				-moz-filter: grayscale(0.6);
				-webkit-filter: grayscale(0.65);
			}

			.fc-view-harness {
				overflow: visible;
			}

			.fc-scroller {
				overflow: visible;
			}

			.fc-daygrid-day-events {
				overflow: visible;
			}

			// Month view date alignment
			.fc-daygrid-day-number {
				padding-left: 8px;
			}

			// Keep day number aligned left in month view
			.fc-daygrid-day-top {
				flex-direction: row;
			}

			// Modern hover effects for all calendar cells
			.fc-daygrid-day {
				position: relative;
				transition: background-color 0.15s ease;
				
				&:hover {
					background-color: rgba(130, 130, 130, .08);
					
					// Plus sign in top-right corner
					&::after {
						content: '+';
						position: absolute;
						cursor: pointer;
						top: 2px;
						right: 4px;
						font-size: 25px;
						font-weight: 300;
						color: #333;
						opacity: 0.8;
						pointer-events: auto;
						cursor: pointer;
					}
				}
			}

			// Time grid (week/day) single-cell hover overlay
			.fc-timegrid-col {
				position: relative;
			}

			.fc-timegrid-cell-hover {
				position: absolute;
				z-index: 1;
				background-color: rgba(130, 130, 130, .08);
				pointer-events: none;
				box-sizing: border-box;
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				padding: 4px;
				transition: background-color 0.15s ease, border-color 0.15s ease;

				&::after {
					content: '+';
					position: absolute;
					top: -1px;
					right: 3px;
					font-size: 22px;
					font-weight: 300;
					color: #333;
					opacity: 0.8;
					pointer-events: auto;
					cursor: pointer;
				}

				&.is-empty {
					padding-left: 8px;
				}
			}

			.fc-timegrid-cell-hover-time {
				font-size: 12px;
				line-height: 1.1;
				font-weight: 400;
				letter-spacing: 0.02em;
				color: #666;
			}

			// Ensure hover doesn't interfere with selection
			.fc-daygrid-day-frame.fc-selectable {
				&:hover {
					background-color: rgba(130, 130, 130, .08);
				}
			}

			// Hide dash in short event time display during selection
			.fc-timegrid-event-short .fc-event-time::after {
				display: none;
			}
		}
	}

	.wca-appointment-modal-backdrop {
		position: fixed;
		inset: 0;
		background: rgba( 0, 0, 0, 0.35 );
		z-index: 100000;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 24px;
	}

	.wca-appointment-modal {
		background: #fff;
		width: 500px;
		max-width: 90%;
		max-height: 75vh;
		box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.2 );
		overflow: hidden;
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.wca-appointment-modal-header {
		position: relative;
		height: auto;
		background: #fcfcfc;
		padding: 1em 1.5em;
		border-bottom: 1px solid #ddd;

		.wca-modal-header-main {
			display: flex;
			align-items: center;
			gap: 8px;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			margin-right: 114px;

			.wca-customer-name,
			h1.wca-appointment-title {
				font-size: 18px;
				font-weight: 700;
				line-height: 1.5em;
				padding: 0;
			}
		}

		.wca-modal-header-status {
			display: inline-flex;
			align-items: center;
			gap: 10px;
			position: absolute;
			right: 70px;
			top: 50%;
			transform: translateY( -50% );
			font-size: 1.3em;

			mark.wca-status {
				display: inline-block;
				line-height: 2em;
				font-size: 13px;
				border-radius: 4px;
				padding: 2px 8px;
				background: #eee;
				color: #333;
			}

			mark.wca-status.status-pending,
			mark.wca-status.status-pending-confirmation {
				background: #fef3c7;
				color: #8a6d3b;
			}

			mark.wca-status.status-confirmed {
				background: #dcfce7;
				color: #166534;
			}

			mark.wca-status.status-completed {
				background: #e0f2fe;
				color: #0c4a6e;
			}

			mark.wca-status.status-cancelled,
			mark.wca-status.status-canceled {
				background: #fee2e2;
				color: #7f1d1d;
			}

			.wca-skeleton {
				width: 48px;
				height: 1em;
			}
		}

		.wca-appointment-modal-close {
			cursor: pointer;
			color: #777;
			font-size: 23px;
			height: 54px;
			width: 54px;
			padding: 0;
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY( -50% );
			text-align: center;
			border: 0;
			border-left: 1px solid #ddd;
			background-color: transparent;

			&:focus,
			&:hover {
				background: #ddd;
				border-color: #ccc;
				color: #000;
			}
		}
	}

	.wca-appointment-modal-body {
		padding: 1.5em;
		line-height: 1.45;
		flex: 1 1 auto;
		overflow: auto;
		display: grid;
		grid-template-columns: 1fr 2fr;
		grid-column-gap: 16px;
		grid-row-gap: 8px;

		a {
			color: #0f172a;
			text-decoration: underline;
		}

		.wca-key {
			display: inline-flex;
			align-items: center;
			color: #334155;
		}

		.wca-val {
			display: inline-flex;
			align-items: center;
			gap: 8px;

			.wca-addons > div {
				margin: 2px 0;
			}

			.wca-customer-summary {
				display: inline-flex;
				align-items: center;
				gap: 10px;

				a {
					display: inline-flex;
					align-items: center;

					.wca-avatar {
						width: 22px;
						height: 22px;
						border-radius: 50%;
						object-fit: cover;
					}
				}

				.wca-avatar-skeleton {
					width: 22px;
					height: 22px;
					border-radius: 50%;
					background: #eee;
					display: inline-block;
				}

				.wca-badge {
					font-size: 0.9em;
					display: inline-block;
					line-height: 1.8em;
					border-radius: 3px;
					padding: 0 8px;
					background: #eee;
					color: #333;
				}

				// Customer contact icons in appointment modal
				.wca-contact-icons {
					display: inline-flex;
					gap: 3px;

					a {
						border-radius: 50%;
						background: #f0f0f1;
						color: #50575e;
						transition: background 0.15s, color 0.15s;
						text-decoration: none;

						&:hover {
							background: #2271b1;
							color: #fff;
						}
					}

					.dashicons {
						font-size: 13px;
						line-height: 1.5;
					}
				}
			}

			.wca-staff-summary {
				display: inline-flex;
				align-items: center;
				gap: 10px;

				a {
					display: inline-flex;
					align-items: center;

					.wca-avatar {
						width: 22px;
						height: 22px;
						border-radius: 50%;
						object-fit: cover;
					}
				}

				.wca-avatar-skeleton {
					width: 22px;
					height: 22px;
					border-radius: 50%;
					background: #eee;
					display: inline-block;
				}
			}

			.wca-skeleton {
				width: 84px;
				height: 1em;
				display: inline-block;
				background: #eee;
				border-radius: 3px;
			}
		}

		.wca-appointment-items {
			width: 100%;
			margin-top: 12px;
			grid-column: 1 / -1;

			.wca-item-discount {
				display: inline-block;
				margin-top: 3px;
				font-size: 0.85em;
				background: #eee;
				color: #333;
				border-radius: 3px;
				padding: 1px 6px;

				span {
					font-family: Consolas, Monaco, monospace;
					margin-left: 1px;
				}
			}

			.wca-pricing-section {
				margin-top: 12px;
				padding-top: 12px;
				border-top: 1px solid #ddd;

				.wca-product-name {
					margin-bottom: 10px;
					font-size: 1.2em;

					a {
						color: inherit;
					}

					> div {
						font-weight: 600;
						font-size: 0.95em;
					}
				}

				.wca-cost-tax-row {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 6px;
					font-size: 0.9em;
					color: #666;

					.wca-cost-tax-group {
						display: flex;
						gap: 12px;
					}

					.wca-appointment-total {
						font-weight: 600;
						font-size: 1.05em;
						color: #333;
					}
				}

				.wca-order-total-row {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 10px;
					padding-top: 10px;
					border-top: 1px solid #eee;

					.wca-order-total-label {
						font-weight: 600;
						font-size: 0.9em;
						color: #555;

						a {
							color: inherit;
						}
					}

					.amount {
						font-weight: 600;
						font-size: 1.1em;
					}
				}

				.wca-skeleton {
					&.wca-skeleton-product {
						display: inline-block;
						width: 150px;
						height: 22px;
					}

					&.wca-skeleton-cost {
						display: inline-block;
						width: 80px;
						height: 14px;
					}

					&.wca-skeleton-tax {
						display: inline-block;
						width: 60px;
						height: 14px;
					}

					&.wca-skeleton-total {
						display: inline-block;
						width: 80px;
						height: 16px;
					}

					&.wca-skeleton-order-total {
						display: inline-block;
						width: 80px;
						height: 21px;
					}
				}
			}
		}
	}

	@media ( max-width: 640px ) {
		.wca-appointment-modal-body {
			grid-template-columns: 1fr;
		}
	}

	.wca-appointment-modal-footer {
		padding: 1em 1.5em;
		border-top: 1px solid #ddd;
		background: #fcfcfc;
		display: flex;
		gap: 8px;
		justify-content: space-between;
		align-items: center;

		.wca-footer-left,
		.wca-footer-right {
			display: flex;
			align-items: center;
			gap: 8px;
		}

		.wc-action-button-group {
			max-height: 26px;
		}
	}

	.wca-react-notice {
		margin-top: 12px;
	}

	.wca-react-notice--promo {
		margin: 12px 12px 0 0;
	}
}

@keyframes wcaLoadingBarSlide {
	0% {
		transform: translateX(0) scaleX(0);
	}

	60% {
		transform: translateX(20%) scaleX(0.7);
	}

	100% {
		transform: translateX(100%) scaleX(0);
	}
}

@keyframes wcaBarSlide {
	0% {
		left: -40%;
	}

	50% {
		left: 30%;
	}

	100% {
		left: 100%;
	}
}

//* Calendar dialog
#wca-dialog-container-edit-appointment,
#wca-dialog-container-add-appointment {
	display: none;
	position: relative;
	z-index: 11;
}

#wca-dialog-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	min-height: 310px;
	background: #000;
	opacity: 0.7;
	filter: alpha( opacity=70 );
	z-index: 100100;
}

#wca-dialog-wrap {
	background-color: #fff;
	-webkit-box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.3 );
	box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.3 );
	width: 440px;
	height: 305px;
	overflow: hidden;
	margin-left: -220px;
	margin-top: -150px;
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 100105;
}

#wca-dialog {
	position: relative;
	height: 100%;

	.button .dashicons {
		vertical-align: text-top;
		font-size: 18px;
	}

	.button-success {
		background-color: $dark-green;
		color: #fff;
		border-color: color.adjust( $dark-green, $lightness: -5% )  color.adjust( $dark-green, $lightness: -6% )  color.adjust( $dark-green, $lightness: -7% );
		box-shadow: 0 1px 0 color.adjust( $dark-green, $lightness: -10% );

		&:hover {
			background-color: color.adjust( $dark-green, $lightness: 2% );
		}
	}
}

#wca-dialog-header {
	display: flex;
	align-items: flex-end;
	background: #fcfcfc;
	border-bottom: 1px solid #ddd;
	height: 60px;
	margin: 0;
	padding: 0 36px 8px 23px;

	.dashicons {
		vertical-align: middle;
	}

	a {
		text-decoration: none;
	}

	#wca-dialog-close {
		color: #666;
		padding: 0;
		position: absolute;
		top: 0;
		right: 0;
		width: 36px;
		height: 36px;
		text-align: center;
		background: none;
		border: none;
		cursor: pointer;

		&::before {
			font: 400 20px/36px dashicons;
			vertical-align: top;
			speak: none;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			width: 36px;
			height: 36px;
			content: "\f158";
		}

		&:hover {
			color: $wp-primary;
		}

		&:focus {
			color: $wp-primary;
			outline: none;
			-webkit-box-shadow:
				0 0 0 1px #5b9dd9,
				0 0 2px 1px rgba( 30, 140, 190, 0.8 );
			box-shadow:
				0 0 0 1px #5b9dd9,
				0 0 2px 1px rgba( 30, 140, 190, 0.8 );
		}
	}

	#wca-dialog-name {
		display: inline-block;
		height: 48px;
		line-height: 48px;
		overflow: hidden;
		white-space: nowrap;

		dd {
			vertical-align: middle;
		}

		.wca-customer-avatar {
			width: 44px;
			height: 44px;
			border-radius: 50%;
			margin-right: 20px;
			vertical-align: middle;
		}

		.wca-availability-name {
			font-size: 17px;
		}

		.wca-customer-name {
			font-size: 17px;
			font-weight: 700;
		}

		.wca-customer-status {
			font-style: italic;
			font-size: 0.8em;
			font-weight: 400;
			margin-left: 0.45em;
		}

		.wca-customer-meta {
			display: inline-block;
			margin-left: 0.45em;

			.dashicons {
				font-size: 17px;
			}
		}
	}
}

#wca-dialog-content {
	-webkit-overflow-scrolling: touch;
	overflow-y: auto;
	padding: 0 16px;
	position: absolute;
	top: 70px;
	left: 0;
	right: 0;
	bottom: 44px;
}

#wca-dialog-inner {
	display: table;
	padding: 12px 0;
	width: 100%;

	dl {
		display: table-row;

		dt,
		dd {
			display: table-cell;
			padding: 0.35em 0.65em;
		}

		dt {
			width: 90px;
			text-align: left;
			color: $subtext;
		}
		// Addons.
		.wc-item-meta {
			margin: 0;

			p {
				margin: 5px 0 0;
			}

			li:last-child {
				margin: 0;
			}
		}
	}

	a {
		text-decoration: none;
	}

	#wca-product-qty {
		color: $secondarytext;
	}
}

#wca-dialog-footer {
	padding: 8px 16px;
	background: #fcfcfc;
	border-top: 1px solid #ddd;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;

	#wca-dialog-cancel {
		line-height: 25px;
		float: left;
	}

	#wca-dialog-update {
		line-height: 23px;
		float: right;

		.button:first-child {
			border-top-left-radius: 3px;
			border-bottom-left-radius: 3px;
		}
	}
}

@media screen and ( max-width: 782px ) {
	#wca-dialog-content {
		padding: 0 16px 60px;
		bottom: 52px;
	}

	#wca-dialog-cancel {
		line-height: 32px;
	}

	#wca-dialog-footer .button {
		margin-bottom: 0;
	}
}

@media screen and ( max-width: 460px ) {
	#wca-dialog-wrap {
		width: auto;
		margin-left: 0;
		left: 10px;
		right: 10px;
		max-width: 440px;
	}
}

@media screen and ( max-height: 320px ) {
	#wca-dialog-wrap {
		-webkit-transition: none;
		transition: none;
		height: auto;
		margin-top: 0;
		top: 10px;
		bottom: 10px;
	}
}

@media screen and ( max-height: 290px ) {
	#wca-dialog-content {
		height: -webkit-calc( 100% - 92px );
		height: calc( 100% - 92px );
		padding-bottom: 2px;
	}
}

div.wca-dialog-input {
	float: left;
	margin: 2px;
	max-width: 694px;

	input {
		width: 300px;
		padding: 3px;
		box-sizing: border-box;
	}
}

@media screen and ( max-width: 782px ) {
	div.wca-dialog-input {
		max-width: 70%;
		max-width: -webkit-calc( 100% - 86px );
		max-width: calc( 100% - 86px );
		width: 300px;

		input {
			width: 100%;
			font-size: 16px;
			padding: 5px;
		}
	}
}

//* Appointment form
.wp-admin {
	.wc-appointments-appointment-form-wrap {
		display: block;
		width: 100%;

		.wc-appointments-appointment-form {
			margin: 0;
			max-width: 430px;

			.select2-container {
				max-width: 100% !important;
			}

			.ui-datepicker th,
			.ui-datepicker td {
				display: table-cell;
			}
		}

		div.quantity {
			float: left;
			margin: 0 4px 0 0;

			.qty {
				padding: 0 8px;
				width: 100%;
			}
		}
	}

	div.appointment-order-label-select {
		display: none;
		margin-top: 10px;
	}

	.billing_row {
		a.edit_billing {
			width: 16px;
			height: 0;
			padding: 18px 0 0;
			margin: 0 0 0 6px;
			overflow: hidden;
			position: relative;
			color: #999;
			border: 0;
			float: right;

			&::before {
				content: "\f464";
				font-family: dashicons;
				position: absolute;
				top: 0;
				left: 0;
				text-align: center;
				vertical-align: top;
				line-height: 18px;
				font-size: 14px;
				font-weight: 400;
			}
		}

		.billing_column {
			.edit_billing {
				width: 100%;
				max-width: 400px;

				.form-field {
					float: left;
					clear: left;
					color: #777;
					width: 48%;
					padding: 0;
					margin: 9px 0 0;

					label {
						display: block;
						padding: 0 0 3px;
					}

					input,
					textarea {
						width: 100% !important;
					}

					select,
					p {
						max-width: 100%;
					}
				}

				._billing_company_field,
				._shipping_company_field,
				._transaction_id_field,
				.form-field-wide {
					width: 100%;
					clear: both;
				}

				._billing_address_2_field,
				._billing_last_name_field,
				._billing_phone_field,
				._billing_postcode_field,
				._billing_state_field,
				._shipping_address_2_field,
				._shipping_last_name_field,
				._shipping_postcode_field,
				._shipping_state_field,
				.form-field.last {
					float: right;
					clear: right;
				}

				._billing_first_name_field,
				._billing_last_name_field {
					margin: 0;
				}
			}

			.none_set {
				color: #999;
			}
		}
	}
}

//* Appointments data
#appointments_product_data,
#appointments_availability .options_group,
#appointments_pricing {
	.table_grid {
		padding: 0 9px;
		overflow: auto;

		@media only screen and ( min-width: 1500px ) {
			.price_wrap {
				position: relative;
				width: 100%;

				select {
					margin-right: 7px;
					width: calc( 45% - 7px );
				}

				input[type="number"] {
					width: 55%;
				}
			}
		}
	}
}

#appointments_product_data,
#appointments_pricing,
#appointments_availability,
#appointments_products,
#appointments_settings,
#appointments_staff {
	.options_group_heading {
		background: #ececec;
		border-bottom: 1px solid #dfdfdf;
		padding: 0.5em 12px;
		margin: -10px -9px 0.75em;
	}

	.photo {
		vertical-align: middle;
		margin-right: 10px;
	}

	.edit_staff {
		float: right;
		font-weight: 400;
		line-height: 26px;
		margin: 0 1em 0 0;
		padding: 0;
		position: relative;
	}

	.align_right {
		text-align: right;
	}

	.table_grid {
		.wca-nav-wrapper {
			background: #f5f5f5;
			border: solid #e5e5e5;
			border-width: 1px 1px 0;
			display: flex;
			margin: 0 auto;
			position: relative;
			z-index: 10;

			&::before,
			&::after {
				content: " ";
				display: table;
			}

			&::after {
				clear: both;
			}

			a {
				border-right: 1px solid #e5e5e5;
				display: inline-block;
				padding: 10px;
				line-height: 26px;
				font-weight: 700;
				font-size: 14px;
				text-decoration: none;

				&.wca-nav-active {
					background: #fff;
					box-shadow: 0 4px 0 0 #fff;
					color: #777;
				}
			}
		}

		table {
			border-collapse: collapse;
			margin-bottom: 9px;
			position: relative;

			.wc-metabox-sortable-placeholder td {
				border-color: #bbb;
				background-color: #f5f5f5;
				margin-bottom: 9px;
				border-width: 1px;
				border-style: dashed;
			}

			td.sort {
				cursor: move;

				&::before {
					content: "\f333";
					font-family: dashicons;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translateY( -50% ) translateX( -50% );
				}
			}

			.woocommerce_staff_products {
				td.sort {
					cursor: auto;

					&::before {
						@include iconbefore( "\e006" );
					}
				}
			}

			td.remove {
				cursor: pointer;

				&::before {
					content: "\f158";
					font-family: dashicons;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translateY( -50% ) translateX( -50% );
				}

				&:hover {
					background-color: #fb0216;
					color: #fff;
				}
			}

			th.sort,
			td.sort,
			th.remove,
			td.remove {
				color: #ccc;
				width: 16px !important;
			}

			th {
				padding: 15px 5px;
				white-space: nowrap;
			}

			td {
				background-color: #fff;
				border-bottom: 1px solid #dfdfdf;
				border-top: 0;
				padding: 10px 5px;
				position: relative;
				vertical-align: middle;
				width: auto !important;

				input,
				span.text {
					width: 100%;
					height: 35px;
					padding: 6px 7px;
					margin: 0;
					display: block;
					-moz-box-sizing: border-box;
					-webkit-box-sizing: border-box;
					box-sizing: border-box;
					float: none;
					outline: none;
				}

				span.text {
					background: transparent none;
				}

				&.checkbox {
					vertical-align: middle;
					text-align: center;

					input,
					label {
						width: auto;
						float: none;
						display: inline;
					}
				}

				.from_date,
				.to_date,
				.on_date {
					position: relative;
				}

				input.short {
					-moz-box-sizing: content-box;
					-webkit-box-sizing: content-box;
					width: 1em;
					box-sizing: content-box;
					text-align: center;
				}

				.ui-datepicker-trigger {
					background: #fff;
					border: 0;
					color: #777;
					margin: -15px 5px 0 0;
					padding: 5px;
					position: absolute;
					right: 0;
					top: 50%;
				}

				select {
					width: 100%;
					padding: 0 24px 0 8px;
					margin: 0;
					height: 35px;
				}

				.select {
					overflow: hidden;
					zoom: 1;
					min-width: 50px;
				}
			}

			td:last-child {
				border-right: 0;
			}

			tr.current td {
				background: #fefbcc;
			}

			.button {
				clear: none;
				display: inline;
				float: right;
				margin: 0 7px 0 0;

				&::before {
					@include iconbefore( "\e007" );
				}
			}

			tfoot {
				td,
				th {
					background-color: #f5f5f5;
					border-top: 0;
					font-weight: 400;
					line-height: 26px;
					vertical-align: middle;
				}
			}

			.description {
				clear: none;
				display: inline;
				margin: 0 0 0 7px;
				padding: 0;
			}
		}

		.woocommerce-help-tip {
			margin-left: 3px;
		}
	}

	.toolbar {
		font-size: 13px;
		line-height: normal;
		min-height: 32px;
		overflow: hidden;

		.add_staff,
		.add_select_id {
			float: right;

			&::before {
				@include iconbefore( "\e007" );
			}
		}

		.select2-container {
			.select2-selection--single {
				max-height: 32px;

				.select2-selection__rendered {
					line-height: 29px;
				}

				.select2-selection__arrow {
					height: 30px;
				}
			}
		}
	}

	.toolbar h3 {
		float: left;
		padding: 0;
		border: 0;
	}

	.woocommerce_appointment_staff {
		label {
			width: auto;
			float: none;
			margin: 0;
		}

		.handle-item {
			background-position: 6px 5px !important;
			margin-top: 2px;
			height: 26px;
			width: 26px;
			float: right;
			cursor: pointer;
			color: #787c82;

			&::before {
				content: "\f142" !important;
				display: inline-block;
				font: 400 20px / 1 Dashicons;
				line-height: 0.5 !important;
				padding: 8px 10px;
				position: relative;
				right: 12px;
				top: 0;
			}
		}

		&.closed {
			.handle-item {
				&::before {
					content: "\f140" !important;
				}
			}
		}
	}

	.appointment-day-restriction {
		table {
			border: 0;

			label {
				display: block;
				float: none;
				width: auto;
			}

			input.checkbox {
				float: none;
			}
		}
	}
}

#woocommerce-appointment-save {
	.inside {
		margin: 0;
		padding: 0;

		&::after {
			content: " ";
			display: block;
			height: 0;
			clear: both;
		}

		.submitbox {
			background: #f5f5f5;
			clear: both;

			#appointment_date {
				width: 10em;
			}

			#appointment_date_hour,
			#appointment_date_minute {
				width: 3em;
			}

			.minor-save-actions {
				background: #fff;
				border-bottom: 1px solid #ddd;

				label {
					color: #777;
					padding: 0 0 3px;
					display: block;
				}
			}

			.major-save-actions {
				padding: 10px;
			}

			&::after {
				content: " ";
				display: block;
				height: 0;
				clear: both;
			}
		}
	}
}

.appointments-datetime-select-both .from_time,
.appointments-datetime-select-both .to_time {
	margin-top: 1em;
}

label.disabled {
	color: $grey;
	pointer-events: none;
}

//* jQuery inline Datepicker.
.ui-datepicker:not(.ui-datepicker-inline) {
	z-index: 10 !important;

	@include inline_datepicker();
}

//* Appointment summary
.wc-appointment-summary {
	background-color: #eee;
	background-color: rgba( 0, 0, 0, 0.07 );
	padding: 1.5em;

	.wc-appointment-summary-name {
		small {
			padding: 0.2em 0.6em;

			@include statuses();
		}
	}

	.wc-appointment-summary-list {
		margin: 1em 0 0;

		li {
			margin: 0;

			strong {
				margin-left: 0.5em;
			}
		}
	}

	.wc-appointment-summary-actions {
		margin-top: 1em;

		a {
			border-right: 1px solid #ccc;
			margin: 0 5px 0 0;
			padding: 0 4px 0 0;
		}

		a:last-child {
			border-right: 0;
			margin: 0;
			padding: 0;
		}
	}
}

#availability_rows tr {
	display: table-row;
}

//* WCML integration
.icl_div_config {
	margin: 0 1em 1em;
	padding: 0 1em 1em;
}

.wcml_appointments_range_slot,
.wcml_appointments_staff_slot {
	display: flex !important;
	flex-direction: row !important;
	margin-top: 10px !important;

	label {
		display: inline-block !important;
		margin: 0 5px !important;
		width: 20px !important;
	}

	input {
		background-color: #f5f4ec !important;
		display: inline-block !important;
		width: 100% !important;
	}
}

.wcml_custom_cost_field .wcml_appointments_staff_slot {
	clear: both !important;
	padding-top: 5px !important;
	width: 1em !important;
}

.wcml_custom_costs {
	display: inline-block !important;
	margin: 10px !important;

	label {
		width: auto !important;
		margin: 0 5px !important;
		float: left !important;
	}

	input {
		width: 16px !important;
		clear: both !important;
		margin: 2px 5px 2px 0 !important;
		float: left !important;
	}
}

//* Add-ons integration
.style_if_appointment {
	.wc-pao-addons {
		.wc-pao-addon-content-non-option-rows.show_if_appointment.show {
			padding-bottom: 0;
		}
		// grid
		//.wc-pao-addon-content-headers,
		//.wc-pao-addon-option-row {
		//    grid-template-columns: 20px 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 20px 20px;
		//}
		// header
		.wc-pao-addon-content-option-header {
			grid-column: 1/5;
		}

		.wc-pao-addon-content-price-header {
			grid-column: 5/8;
		}

		.wc-pao-addon-content-duration-header {
			display: flex;
			grid-column: 8/17;
			padding-top: 15px;
			padding-bottom: 10px;

			.wc-pao-addon-content-price-wrap {
				display: flex;

				.woocommerce-help-tip {
					margin-left: 4px;
				}
			}
		}

		.checkboxes .wc-pao-addon-content-option-default-header {
			grid-column: 8/9;
		}

		.checkboxes .wc-pao-addon-content-duration-header {
			grid-column: 9/17;
		}
		// content
		.wc-pao-addon-content-label {
			grid-column: 2/5;

			&.full {
				grid-column: 1/5;
			}
		}

		.wc-pao-addon-content-price-type {
			grid-column: 5/7;
		}

		.wc-pao-addon-content-price {
			grid-column: 7/8;
		}

		.wc-pao-addon-content-duration-type {
			display: flex;
			align-self: center;
			grid-column: 8/10;
		}

		.wc-pao-addon-content-duration {
			align-self: center;
			grid-column: 10/12;
		}

		.checkboxes .wc-pao-addon-content-label {
			grid-column: 2/5;

			&.full {
				grid-column: 1/5;
			}
		}

		.checkboxes .wc-pao-addon-content-price-type {
			grid-column: 5/7;
		}

		.checkboxes .wc-pao-addon-content-price {
			grid-column: 7/8;
		}

		.checkboxes .wc-pao-addon-content-default {
			grid-column: 8/9;
		}

		.checkboxes .wc-pao-addon-content-duration-type {
			align-self: center;
			grid-column: 9/11;
		}

		.checkboxes .wc-pao-addon-content-duration {
			align-self: center;
			grid-column: 11/12;
		}
		// Non-option styling.
		.wc-pao-addon-adjust-duration-settings {
			margin-top: 15px;
			margin-bottom: 10px;

			&.show {
				display: flex;
			}

			&.hide {
				display: none;
			}

			select {
				max-width: 20%;
				margin-right: 10px !important;
				float: none;
				flex: 1;
			}

			input[type="text"],
			input[type="number"] {
				flex-basis: 80px !important;
				width: 80px !important;
			}
		}
	}

	.show_if_appointment {
		.show {
			display: block;
		}

		.hide {
			display: none;
		}
	}
}

// Status-only animation for manual re-index
@keyframes wc-appointments-flash {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.35;
	}
}
// Animated loading stripes for progress container
@keyframes wc-appointments-stripes {
	0% {
		background-position: 0 0;
	}

	100% {
		background-position: 40px 0;
	}
}

#wc-appointments-start-reindex {
	margin-right: 5px;
}

#wc-appointments-index-status {
	&.is-running {
		animation: wc-appointments-flash 1.2s ease-in-out infinite;
		font-weight: 600; // Emphasize running status
	}
}

#wc-appointments-index-progress {
	background: #e6e6e6;
	border: 1px solid #dcdcde;
	border-radius: 3px;
	overflow: hidden; // Ensure inner bar corners are clipped
	height: 23px;
	max-width: 420px;
	position: relative;
	display: none;

	.progress-bar {
		background: #c6c6c6;
		position: relative;
		height: 100%;
		transition: width 0.6s ease;
		z-index: 0;
	}

	.progress-text {
		color: #333;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 12px;
		font-weight: 600;
		z-index: 2; // Keep text above stripe overlay
	}

	&.is-disabled {
		cursor: default;
		pointer-events: none;

		&::before {
			content: "";
			position: absolute;
			inset: 0;
			z-index: 1;
			background-image:
				linear-gradient(
					45deg,
					rgba( 255, 255, 255, 0.25 ) 25%,
					rgba( 255, 255, 255, 0 ) 25%,
					rgba( 255, 255, 255, 0 ) 50%,
					rgba( 255, 255, 255, 0.25 ) 50%,
					rgba( 255, 255, 255, 0.25 ) 75%,
					rgba( 255, 255, 255, 0 ) 75%,
					rgba( 255, 255, 255, 0 )
				);
			background-size: 20px 20px;
			animation: wc-appointments-stripes 1s linear infinite;
			pointer-events: none;
		}
	}

	&.is-complete {
		background: $wp-primary; // Match button-primary background
		border-color: $wp-primary; // Match button-primary border color

		.progress-bar {
			background: $wp-primary;
		}

		.progress-text {
			color: #fff; // Improve contrast on blue background
			text-shadow: 0 1px 0 rgba( 0, 0, 0, 0.2 ); // Subtle shadow for readability
		}
	}
}

#wc-appointments-index-counts {
	margin-top: 5px;
	font-size: 12px;
	color: #666;
}

.wc-appointments-last-indexing {
	margin-top: 10px;
	color: #666;
}

/* Appointment Modal Styles moved to assets/css/appointment-admin-modal.scss */

/* Global skeleton styles for modal content */
.wca-skeleton {
	display: inline-block;
	height: 1em;
	width: 60%;
	background: #eee;
	border-radius: 4px;
	position: relative;
	overflow: hidden;
	vertical-align: middle;
}

.wca-skeleton::after {
	content: "";
	position: absolute;
	top: 0;
	left: -40%;
	height: 100%;
	width: 40%;
	background: linear-gradient( 90deg, rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 0.6 ), rgba( 255, 255, 255, 0 ) );
	animation: wcaBarSlide 1.2s infinite;
}

.wca-avatar-skeleton {
	display: inline-block;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #eee;
	position: relative;
	overflow: hidden;
	vertical-align: middle;
}

.wca-avatar-skeleton::after {
	content: "";
	position: absolute;
	top: 0;
	left: -40%;
	height: 100%;
	width: 40%;
	background: linear-gradient( 90deg, rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 0.6 ), rgba( 255, 255, 255, 0 ) );
	animation: wcaBarSlide 1.2s infinite;
}

// Ensure EDD SDK license overlay sits above admin UI.
.edd-sdk__notice__overlay {
	z-index: 1001 !important;
}

// Striped background events for unavailable date/time ranges
.fc-bg-event-striped {
	background-image: repeating-linear-gradient(
		110deg,
		rgba(128, 128, 128, 0.3),
		rgba(128, 128, 128, 0.3) 2px,
		transparent 2px,
		transparent 8px
	) !important;
	background-color: rgba(128, 128, 128, 0.05) !important;
}

// Add gap between calendar events
.fc-event-main-frame {
	gap: 0 8px;
}

// Toast notification styles for admin calendar
.wca-toast-container {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 100200;
	display: flex;
	flex-direction: column-reverse;
	gap: 10px;
	max-width: 400px;
	pointer-events: none;
}

.wca-toast {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	border-left: 4px solid #2271b1;
	animation: wcaToastSlideIn 0.3s ease-out;
	pointer-events: auto;

	&--success {
		border-left-color: #00a32a;

		.dashicons {
			color: #00a32a;
		}
	}

	&--error {
		border-left-color: #d63638;

		.dashicons {
			color: #d63638;
		}
	}

	&--info {
		border-left-color: #2271b1;

		.dashicons {
			color: #2271b1;
		}
	}

	.dashicons {
		font-size: 20px;
		width: 20px;
		height: 20px;
		flex-shrink: 0;
	}
}

.wca-toast-message {
	flex: 1;
	font-size: 13px;
	line-height: 1.4;
	color: #1d2327;
}

.wca-toast-detail {
	display: inline-block;
	background: rgba(34, 113, 177, 0.1);
	border-radius: 3px;
	padding: 1px 4px;
	margin: 0 2px;
	font-weight: 500;
}

.wca-toast-dismiss {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.15s;
	flex-shrink: 0;

	&:hover {
		opacity: 1;
	}

	.dashicons {
		font-size: 16px;
		width: 16px;
		height: 16px;
		color: #666;
	}
}

@keyframes wcaToastSlideIn {
	from {
		transform: translateX(100%);
		opacity: 0;
	}

	to {
		transform: translateX(0);
		opacity: 1;
	}
}
