/* ------------------------------------------------------------------
   jQuery UI Datepicker — Kristina Gray Design

   The single source of truth for datepicker styling. The old orphaned
   .ui-datepicker rules were removed from styles.css so nothing competes
   with this file.

   Self-contained: structure AND theme. The full jQuery UI stylesheet
   (assets/css/jquery-1.11.3-ui.css) is deliberately NOT loaded — its theme
   sprites (assets/css/images/) are missing from the repo and it would
   restyle every other ui-* component on the site. Prev/next arrows use
   Font Awesome 5, which is already loaded site-wide.

   Rules are hung off #ui-datepicker-div (the element jQuery UI appends to
   <body>) so they comfortably outrank the generic .form_holder input /
   select rules in styles.css.

   Loaded after styles.css in includes/metatags-icons-css.php.
   ------------------------------------------------------------------ */

#ui-datepicker-div{
	display: none;
	position: absolute;
	box-sizing: border-box;
	width: 300px;
	padding: 0;
	margin-top: 6px;
	background: #FFFFFF;
	border: 1px solid #e5e3da;
	box-shadow: 0 10px 30px rgba(39, 39, 39, 0.16);
	font-family: 'Josefin Sans', sans-serif;
	font-size: 14px;
	line-height: 1.4;
	z-index: 9999 !important;
}

/* --- Header --- */

#ui-datepicker-div .ui-datepicker-header{
	position: relative;
	background: #272727;
	background-image: none;
	border: none;
	border-radius: 0;
	padding: 12px 44px;
	margin: 0;
	color: #FFFFFF;
	min-height: 54px;
}

#ui-datepicker-div .ui-datepicker-title{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0;
	line-height: 1.2;
	text-align: center;
	color: #FFFFFF;
}

/* changeMonth / changeYear dropdowns — these must not inherit the
   full-width .form_holder select styling */
#ui-datepicker-div .ui-datepicker-title select.ui-datepicker-month,
#ui-datepicker-div .ui-datepicker-title select.ui-datepicker-year{
	display: inline-block;
	width: auto;
	max-width: 46%;
	height: 30px;
	min-height: 0;
	padding: 2px 4px;
	margin: 0;
	font-family: 'Josefin Sans', sans-serif !important;
	font-size: 13px;
	line-height: 1.2;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #272727;
	background: #FFFFFF;
	border: none;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
}

/* --- Prev / next --- */

#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next{
	position: absolute;
	top: 50%;
	margin-top: -14px;
	width: 28px;
	height: 28px;
	line-height: 28px;
	padding: 0;
	text-align: center;
	cursor: pointer;
	background: none !important;
	background-image: none !important;
	border: none !important;
	border-radius: 0;
	overflow: hidden;
}
#ui-datepicker-div .ui-datepicker-prev{ left: 8px; }
#ui-datepicker-div .ui-datepicker-next{ right: 8px; }

/* The default theme puts a sprite image in this span — hide it, use an icon font */
#ui-datepicker-div .ui-datepicker-prev span,
#ui-datepicker-div .ui-datepicker-next span{
	display: none !important;
}
#ui-datepicker-div .ui-datepicker-prev::before,
#ui-datepicker-div .ui-datepicker-next::before{
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	font-size: 13px;
	color: #FFFFFF;
	opacity: .7;
	transition: opacity .2s ease-in-out;
}
#ui-datepicker-div .ui-datepicker-prev::before{ content: '\f053'; }
#ui-datepicker-div .ui-datepicker-next::before{ content: '\f054'; }
#ui-datepicker-div .ui-datepicker-prev:hover::before,
#ui-datepicker-div .ui-datepicker-next:hover::before{
	opacity: 1;
}
#ui-datepicker-div .ui-datepicker-prev.ui-state-disabled::before,
#ui-datepicker-div .ui-datepicker-next.ui-state-disabled::before{
	opacity: .25;
	cursor: default;
}

/* --- Calendar grid --- */

#ui-datepicker-div table.ui-datepicker-calendar{
	width: 100%;
	border: none;
	border-collapse: collapse;
	border-spacing: 0;
	margin: 0;
	padding: 0;
	background: none;
	font-size: 14px;
}
#ui-datepicker-div table.ui-datepicker-calendar th{
	padding: 14px 0 8px;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 10px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #919c8c;
	text-align: center;
	border: none;
	background: none;
}
#ui-datepicker-div table.ui-datepicker-calendar td{
	padding: 1px;
	border: none !important;
	background: none !important;
}
#ui-datepicker-div table.ui-datepicker-calendar td a,
#ui-datepicker-div table.ui-datepicker-calendar td span{
	display: block;
	padding: 9px 0;
	text-align: center;
	text-decoration: none;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 14px;
	font-weight: 300;
	color: #272727;
	background: none !important;
	background-image: none !important;
	border: none !important;
	border-radius: 0;
	transition: background .15s ease-in-out;
}
#ui-datepicker-div table.ui-datepicker-calendar td a:hover{
	background: #f9f8f2 !important;
}
#ui-datepicker-div table.ui-datepicker-calendar td.ui-datepicker-today a{
	background: #f9f8f2 !important;
	font-weight: 600;
}
#ui-datepicker-div table.ui-datepicker-calendar td.ui-datepicker-current-day a{
	background: #272727 !important;
	color: #FFFFFF !important;
	font-weight: 400;
}
/* Padding cells before the 1st / after the last of the month */
#ui-datepicker-div table.ui-datepicker-calendar td.ui-datepicker-unselectable span,
#ui-datepicker-div table.ui-datepicker-calendar td.ui-state-disabled span{
	color: #cdcabd;
}

/* --- Field + calendar button (showOn: 'both') --- */

.form_holder .datepicker_wrapper{
	display: flex;
	align-items: stretch;
	width: 100%;
}
.form_holder .datepicker_wrapper input.datepicker{
	flex: 1 1 auto;
	min-width: 0;
}
.form_holder .datepicker_wrapper .ui-datepicker-trigger{
	flex: 0 0 auto;
	width: 38px;
	height: auto;
	padding: 0;
	margin: 1px 0 5px;
	background: none;
	border: none;
	color: #272727;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	opacity: .7;
	transition: opacity .15s ease-in-out;
}
.form_holder .datepicker_wrapper .ui-datepicker-trigger:hover{
	opacity: 1;
}
/* Inside the contact strip the inputs are underlined rather than boxed,
   so the button carries the underline across to keep the field whole */
.strip06 .content .overhang-content .form_holder .datepicker_wrapper .ui-datepicker-trigger{
	border-bottom: 2px solid #272727;
}