/**
 * Known Universe Date Picker - one look for every WordPress-style date picker.
 * Loaded on every front-end page by KU_Date_Picker, and on any admin screen
 * that calls KU_Date_Picker::enqueue(). The picker stays hidden until its
 * script opens it.
 */

.ui-datepicker {
	display: none;
	z-index: 100000 !important;
	width: 290px;
	padding: 10px;
	border: 1px solid #cbd5df;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(18, 43, 70, .18);
	color: #122b46;
}

.ui-datepicker-header {
	display: grid;
	grid-template-columns: 34px 1fr 34px;
	align-items: center;
	margin-bottom: 8px;
}

.ui-datepicker-prev,
.ui-datepicker-next {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: #122b46;
	color: #fff !important;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

/* The arrows are pinned to row 1 so they sit on the same line as the month and year. */
.ui-datepicker-prev { grid-column: 1; grid-row: 1; }
.ui-datepicker-next { grid-column: 3; grid-row: 1; }
.ui-datepicker-prev .ui-icon,
.ui-datepicker-next .ui-icon {
	display: none !important;
}
.ui-datepicker-prev::before,
.ui-datepicker-next::before {
	content: "";
	display: block;
	box-sizing: border-box;
	width: 9px;
	height: 9px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
}
.ui-datepicker-prev::before {
	transform: rotate(135deg);
}
.ui-datepicker-next::before {
	transform: rotate(-45deg);
}
.ui-datepicker-title { grid-column: 2; grid-row: 1; text-align: center; font-weight: 700; }
.ui-datepicker-calendar { width: 100%; border-collapse: collapse; }
.ui-datepicker-calendar th { padding: 4px 2px; color: #122b46; font-size: 12px; }
.ui-datepicker-calendar td { padding: 2px; text-align: center; }
.ui-datepicker-calendar a {
	display: grid;
	place-items: center;
	min-width: 30px;
	height: 30px;
	border-radius: 6px;
	color: #122b46;
	text-decoration: none;
}
.ui-datepicker-calendar a:hover,
.ui-datepicker-calendar .ui-state-active { background: #122b46; color: #fff; }
.ui-datepicker-calendar .ui-state-highlight { outline: 2px solid #841516; }
.ui-datepicker-other-month { opacity: .45; }

.ku-date-picker-display {
	min-width: 190px;
}