/*
 * Date fields written as dd / mm / yyyy, with a calendar button inside the field and the calendar
 * below it. Used on the booking form (dark) and on the staff booking list (light): the colours are
 * variables, light by default, and the booking form sets its own.
 */

.icedive-date {
	position: relative;
}

.icedive-date > input[data-date-mask] {
	padding-right: 2.1rem;
}

.icedive-date .icedive-date-button {
	position: absolute;
	top: 1px;
	right: 1px;
	bottom: 1px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0 4px 4px 0;
	background: transparent;
	box-shadow: none;
	color: inherit;
	opacity: 0.7;
	cursor: pointer;
}

.icedive-date .icedive-date-button:hover,
.icedive-date .icedive-date-button[aria-expanded="true"] {
	background: transparent;
	color: inherit;
	opacity: 1;
}

.icedive-date .icedive-date-button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -4px;
	opacity: 1;
}

.icedive-cal {
	--icedive-cal-bg: #fff;
	--icedive-cal-text: #1d2327;
	--icedive-cal-border: #c3c4c7;
	--icedive-cal-muted: #646970;
	--icedive-cal-hover: #f0f0f1;
	--icedive-cal-chosen-bg: #2271b1;
	--icedive-cal-chosen-text: #fff;
	--icedive-cal-focus: #2271b1;
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	z-index: 1000;
	box-sizing: border-box;
	width: 16.5rem;
	padding: 0.45rem;
	border: 1px solid var(--icedive-cal-border);
	border-radius: 8px;
	background: var(--icedive-cal-bg);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
	color: var(--icedive-cal-text);
	font-size: 0.8125rem;
	line-height: 1.3;
}

.icedive-cal[hidden] {
	display: none;
}

/* No room on the right: line up with the right edge of the field instead. */
.icedive-cal.is-right {
	right: 0;
	left: auto;
}

.icedive-cal .icedive-cal-head {
	display: flex;
	gap: 0.25rem;
	align-items: center;
	margin: 0 0 0.3rem;
}

.icedive-cal .icedive-cal-head select {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	margin: 0;
}

.icedive-cal .icedive-cal-nav {
	flex: none;
	width: 1.9rem;
	height: 1.9rem;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 5px;
	background: transparent;
	box-shadow: none;
	color: inherit;
	font: inherit;
	font-size: 1.35em;
	line-height: 1;
	cursor: pointer;
}

.icedive-cal .icedive-cal-nav:hover {
	background: var(--icedive-cal-hover);
	color: inherit;
}

.icedive-cal .icedive-cal-nav[aria-disabled="true"] {
	opacity: 0.3;
	cursor: default;
}

.icedive-cal .icedive-cal-nav[aria-disabled="true"]:hover {
	background: transparent;
}

.icedive-cal table.icedive-cal-grid {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	table-layout: fixed;
	background: none;
}

.icedive-cal .icedive-cal-grid th,
.icedive-cal .icedive-cal-grid td {
	height: 2rem;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	text-align: center;
	vertical-align: middle;
}

.icedive-cal .icedive-cal-grid th {
	height: 1.6rem;
	color: var(--icedive-cal-muted);
	font-size: 0.9em;
	font-weight: 500;
}

.icedive-cal .icedive-cal-grid td[data-date] {
	border-radius: 5px;
	cursor: pointer;
}

.icedive-cal .icedive-cal-grid td[data-date]:hover {
	background: var(--icedive-cal-hover);
}

.icedive-cal .icedive-cal-grid td[aria-current="date"] {
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.icedive-cal .icedive-cal-grid td[aria-selected="true"],
.icedive-cal .icedive-cal-grid td[aria-selected="true"]:hover {
	background: var(--icedive-cal-chosen-bg);
	color: var(--icedive-cal-chosen-text);
	font-weight: 600;
}

.icedive-cal .icedive-cal-grid td[aria-disabled="true"],
.icedive-cal .icedive-cal-grid td[aria-disabled="true"]:hover {
	background: none;
	color: var(--icedive-cal-muted);
	opacity: 0.45;
	cursor: default;
}

.icedive-cal .icedive-cal-grid td:focus {
	outline: 2px solid var(--icedive-cal-focus);
	outline-offset: -2px;
}