/**
 * Overrides for Ultimate Member's bundled pickadate.js datepicker
 * (wp-content/plugins/ultimate-member/assets/libs/pickadate/default.date.css).
 *
 * Bug: the absolutely-positioned prev/next month nav arrows have no
 * horizontal clearance from the centered month/year <select> dropdowns in
 * the header. On narrow viewports (e.g. mobile) the arrows visually and
 * interactively overlap the year select, so the year gets covered and
 * clicking the arrows lands on the select instead — the month never changes.
 *
 * Fix: reserve space for the nav arrows via header padding (selects are
 * percentage-width, so they shrink into the remaining space automatically)
 * and layer the arrows above the selects as a defensive fallback.
 */

.um .picker__header,
.um-popup .picker__header {
	box-sizing: border-box;
	padding-left: 3.75em;
	padding-right: 3.75em;
}

.um .picker__nav--prev,
.um .picker__nav--next,
.um-popup .picker__nav--prev,
.um-popup .picker__nav--next {
	z-index: 2;
}

.um .picker__select--month,
.um .picker__select--year,
.um-popup .picker__select--month,
.um-popup .picker__select--year {
	position: relative;
	z-index: 1;
}

@media (max-width: 24.5em) {
	.um .picker__header,
	.um-popup .picker__header {
		padding-left: 3em;
		padding-right: 3em;
	}
}