/**
 * AAE Forms PRO — date picker skin.
 *
 * Loaded AFTER Elementor's flatpickr.min.css (a style dependency) and scoped
 * to `.flatpickr-calendar.aae-fp`, the class the runtime adds in onReady —
 * Elementor Pro's own form date field keeps flatpickr's stock look.
 *
 * Every colour is a custom property with a neutral default. The runtime
 * overwrites them from the field's and the submit button's computed style,
 * so the calendar follows the form it belongs to (a dark form gets a dark
 * calendar) without a single panel control for it.
 */

.flatpickr-calendar.aae-fp {
	--aae-fp-bg: #ffffff;
	--aae-fp-text: #1f2a24;
	--aae-fp-muted: color-mix(in srgb, var(--aae-fp-text) 55%, transparent);
	--aae-fp-border: rgba(0, 0, 0, 0.1);
	--aae-fp-accent: #2f6f5e;
	--aae-fp-on-accent: #ffffff;
	--aae-fp-hover: color-mix(in srgb, var(--aae-fp-accent) 14%, transparent);
	--aae-fp-range: color-mix(in srgb, var(--aae-fp-accent) 10%, transparent);
	--aae-fp-radius: 10px;
	--aae-fp-font: inherit;

	width: auto;
	padding: 8px 8px 6px;
	background: var(--aae-fp-bg);
	color: var(--aae-fp-text);
	font-family: var(--aae-fp-font);
	border: 1px solid var(--aae-fp-border);
	border-radius: var(--aae-fp-radius);
	box-shadow:
		0 2px 6px rgba(0, 0, 0, 0.06),
		0 16px 40px -16px rgba(0, 0, 0, 0.28);
}

/* flatpickr's popover arrow is two borders; recolour both halves. */
.flatpickr-calendar.aae-fp.arrowTop::before,
.flatpickr-calendar.aae-fp.arrowBottom::before {
	border-top-color: var(--aae-fp-border);
	border-bottom-color: var(--aae-fp-border);
}
.flatpickr-calendar.aae-fp.arrowTop::after,
.flatpickr-calendar.aae-fp.arrowBottom::after {
	border-top-color: var(--aae-fp-bg);
	border-bottom-color: var(--aae-fp-bg);
}

/* Month header */
.flatpickr-calendar.aae-fp .flatpickr-months .flatpickr-month,
.flatpickr-calendar.aae-fp .flatpickr-current-month,
.flatpickr-calendar.aae-fp .flatpickr-current-month input.cur-year,
.flatpickr-calendar.aae-fp .flatpickr-current-month .flatpickr-monthDropdown-months {
	color: inherit;
	fill: currentColor;
	background: transparent;
	font-family: inherit;
}
.flatpickr-calendar.aae-fp .flatpickr-current-month {
	font-size: 15px;
	font-weight: 600;
	padding-top: 6px;
}
.flatpickr-calendar.aae-fp .flatpickr-current-month .flatpickr-monthDropdown-months {
	font-weight: 600;
}
.flatpickr-calendar.aae-fp .flatpickr-current-month .flatpickr-monthDropdown-months option {
	color: var(--aae-fp-text);
	background: var(--aae-fp-bg);
}
.flatpickr-calendar.aae-fp .flatpickr-months .flatpickr-prev-month,
.flatpickr-calendar.aae-fp .flatpickr-months .flatpickr-next-month {
	color: inherit;
	fill: currentColor;
	border-radius: 6px;
	top: 4px;
	padding: 8px;
}
.flatpickr-calendar.aae-fp .flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-calendar.aae-fp .flatpickr-months .flatpickr-next-month:hover {
	color: var(--aae-fp-accent);
	background: var(--aae-fp-hover);
}
.flatpickr-calendar.aae-fp .flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-calendar.aae-fp .flatpickr-months .flatpickr-next-month:hover svg {
	fill: currentColor;
}

/* Weekday row */
.flatpickr-calendar.aae-fp span.flatpickr-weekday {
	color: var(--aae-fp-muted);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.flatpickr-calendar.aae-fp .flatpickr-weekdays {
	margin-top: 6px;
}

/* Days */
.flatpickr-calendar.aae-fp .flatpickr-day {
	color: inherit;
	border-radius: 8px;
	border-color: transparent;
	font-weight: 500;
}
.flatpickr-calendar.aae-fp .flatpickr-day:hover,
.flatpickr-calendar.aae-fp .flatpickr-day:focus,
.flatpickr-calendar.aae-fp .flatpickr-day.prevMonthDay:hover,
.flatpickr-calendar.aae-fp .flatpickr-day.nextMonthDay:hover {
	background: var(--aae-fp-hover);
	border-color: transparent;
	color: inherit;
}
.flatpickr-calendar.aae-fp .flatpickr-day.today {
	border-color: var(--aae-fp-accent);
}
.flatpickr-calendar.aae-fp .flatpickr-day.today:hover,
.flatpickr-calendar.aae-fp .flatpickr-day.today:focus {
	background: var(--aae-fp-hover);
	color: inherit;
}
.flatpickr-calendar.aae-fp .flatpickr-day.selected,
.flatpickr-calendar.aae-fp .flatpickr-day.startRange,
.flatpickr-calendar.aae-fp .flatpickr-day.endRange,
.flatpickr-calendar.aae-fp .flatpickr-day.selected:hover,
.flatpickr-calendar.aae-fp .flatpickr-day.startRange:hover,
.flatpickr-calendar.aae-fp .flatpickr-day.endRange:hover,
.flatpickr-calendar.aae-fp .flatpickr-day.selected:focus,
.flatpickr-calendar.aae-fp .flatpickr-day.selected.today {
	background: var(--aae-fp-accent);
	border-color: var(--aae-fp-accent);
	color: var(--aae-fp-on-accent);
	font-weight: 600;
}
.flatpickr-calendar.aae-fp .flatpickr-day.inRange {
	background: var(--aae-fp-range);
	border-color: var(--aae-fp-range);
	box-shadow: -5px 0 0 var(--aae-fp-range), 5px 0 0 var(--aae-fp-range);
}
.flatpickr-calendar.aae-fp .flatpickr-day.prevMonthDay,
.flatpickr-calendar.aae-fp .flatpickr-day.nextMonthDay,
.flatpickr-calendar.aae-fp .flatpickr-day.flatpickr-disabled,
.flatpickr-calendar.aae-fp .flatpickr-day.flatpickr-disabled:hover {
	color: var(--aae-fp-muted);
	background: transparent;
}
.flatpickr-calendar.aae-fp .flatpickr-day.flatpickr-disabled,
.flatpickr-calendar.aae-fp .flatpickr-day.flatpickr-disabled:hover {
	opacity: 0.45;
}

/* Time panel (also the whole picker for a Time field) */
.flatpickr-calendar.aae-fp .flatpickr-time {
	border-top-color: var(--aae-fp-border);
}
.flatpickr-calendar.aae-fp.noCalendar .flatpickr-time {
	border-top: 0;
}
.flatpickr-calendar.aae-fp .flatpickr-time input,
.flatpickr-calendar.aae-fp .flatpickr-time .flatpickr-time-separator,
.flatpickr-calendar.aae-fp .flatpickr-time .flatpickr-am-pm {
	color: inherit;
	background: transparent;
	font-family: inherit;
	font-weight: 500;
}
.flatpickr-calendar.aae-fp .flatpickr-time input:hover,
.flatpickr-calendar.aae-fp .flatpickr-time input:focus,
.flatpickr-calendar.aae-fp .flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-calendar.aae-fp .flatpickr-time .flatpickr-am-pm:focus {
	background: var(--aae-fp-hover);
}
.flatpickr-calendar.aae-fp .flatpickr-time .numInputWrapper span.arrowUp::after {
	border-bottom-color: currentColor;
}
.flatpickr-calendar.aae-fp .flatpickr-time .numInputWrapper span.arrowDown::after {
	border-top-color: currentColor;
}
.flatpickr-calendar.aae-fp .numInputWrapper:hover,
.flatpickr-calendar.aae-fp .numInputWrapper span:hover {
	background: var(--aae-fp-hover);
}

/* Keyboard focus on the visible twin follows the field's own focus style;
   inside the calendar, make it unmistakable. */
.flatpickr-calendar.aae-fp .flatpickr-day:focus-visible {
	outline: 2px solid var(--aae-fp-accent);
	outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
	.flatpickr-calendar.aae-fp.animate.open {
		animation: none;
	}
}