/* Datepicker - Main Container */
.datepicker {
	width: -moz-min-content;
	width: min-content;
	
	/* Custom variables */
	--mf-form-datepicker-bg: var(--mf-bg-secondary);
	--mf-form-datepicker-header-text: var(--mf-text-secondary);
	--mf-form-datepicker-bt-default: var(--mf-text-primary);
	--mf-form-datepicker-bt-hover: var(--mf-text-primary);
	--mf-form-datepicker-bt-active: var(--mf-text-primary);
	--mf-form-datepicker-bt-disabled: var(--mf-text-disabled);
	--mf-form-datepicker-bt-bg-default: var(--mf-bg-tertiary);
	--mf-form-datepicker-bt-bg-hover: var(--mf-bg-tertiary);
	--mf-form-datepicker-bt-bg-active: var(--mf-link-color-hover);
	--mf-form-datepicker-bt-bg-disabled: transparent;
	--mf-form-datepicker-bt-inRange: rgba(153, 102, 51, 1);
	--mf-form-datepicker-border-inRange: rgba(153, 102, 51, 1);
	--mf-form-datepicker-bt-bg-selected: var(--mf-link-color-active);
	--mf-form-datepicker-bt-border-selected: var(--mf-link-color-active);
	--mf-form-icon-arrow-next: url('data:image/svg+xml,<svg fill="none" viewBox="0 0 12 18" xmlns="http://www.w3.org/2000/svg"><path stroke="%23E6E6E6" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 2l7 7-7 7"/></svg>');
	--mf-form-icon-arrow-prev: url('data:image/svg+xml,<svg fill="none" viewBox="0 0 12 18" xmlns="http://www.w3.org/2000/svg"><path stroke="%23E6E6E6" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 2l-7 7 7 7"/></svg>');
	--mf-datepicker-gap: 8px 6px;
	--mf-datepicker-width: 460px;
	--mf-datepicker-btn-controls-size: 32px;
	--mf-form-transition: color 250ms, box-shadow 250ms, background-color 250ms, transform 250ms, opacity 250ms, border-color 250ms;
	
	/* Custom styling */
	border-radius: 8px;
	border: 1px solid var(--mf-border-color);
	box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
	background-color: var(--mf-bg-secondary);
	padding: 32px;
	max-width: var(--mf-datepicker-width);
	width: 100%;
}
body.mf-zoom-110 .datepicker {
	--mf-datepicker-width: 400px;
}
body.mf-zoom-125 .datepicker {
	--mf-datepicker-width: 350px;
}
body.mf-zoom-150 .datepicker,
body.mf-zoom-175 .datepicker,
body.mf-zoom-200 .datepicker {
	--mf-datepicker-width: 310px;
}

div.datepicker:not(.active) {
	display: none;
}

/* Datepicker Dropdown */
.datepicker-dropdown {
	position: absolute;
	z-index: 9999;
}

.datepicker.datepicker-orient-top {
	margin-bottom: 6px;
}

.datepicker.datepicker-orient-bottom {
	margin-top: 6px;
}

/* Datepicker Picker */
.datepicker-picker {
	background-color: transparent;
	border-radius: unset;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.datepicker-dropdown .datepicker-picker {
	box-shadow: unset;
}

/* Datepicker Main */
.datepicker-main {
	flex: auto;
	padding: 0;
	width: 100%;
}

/* Datepicker Footer */
.datepicker-footer {
	display: none;
}

/* Datepicker Title */
.datepicker-title {
	box-shadow: inset 0 -1px 1px hsla(0,0%,4%,.1);
	font-weight: 700;
	text-align: center;
}

/* Datepicker Controls */
.datepicker-controls {
	display: flex;
}

.datepicker-header .datepicker-controls {
	align-items: center;
	gap: 8px;
	padding: 0;
}

/* Datepicker Control Buttons */
.datepicker-controls .button {
	align-items: center;
	box-shadow: none;
	cursor: pointer;
	display: inline-flex;
	justify-content: center;
	position: relative;
	text-align: center;
	vertical-align: top;
	white-space: nowrap;
}

.datepicker-controls .button[disabled] {
	cursor: not-allowed;
}

/* Header Control Buttons - Custom Styling */
.datepicker-header .datepicker-controls button:not(.view-switch) {
	all: unset;
	background-color: var(--mf-bg-tertiary);
	border: 1px solid var(--mf-border-color);
	width: var(--mf-datepicker-btn-controls-size);
	height: var(--mf-datepicker-btn-controls-size);
	border-radius: 4px;
	transition: var(--mf-form-transition);
	position: relative;
	display: grid;
	place-items: center;
	cursor: pointer;
	text-indent: -9999px;
	padding: 0 !important;
	font-size: 0;
	line-height: 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 10px;
	stroke: var(--mf-text-primary) !important;
}

.datepicker-header .datepicker-controls button.prev-button {
	background-image: var(--mf-form-icon-arrow-prev) !important;
}

.datepicker-header .datepicker-controls button.next-button {
	background-image: var(--mf-form-icon-arrow-next) !important;
}

.datepicker-header .datepicker-controls button:not(.view-switch, :disabled):hover {
	border-color: var(--mf-border-color-hover);
}

.datepicker-header .datepicker-controls button:not(.view-switch, :disabled):active,
.datepicker-header .datepicker-controls button:not(.view-switch, :disabled):focus {
	background-color: var(--mf-bg-secondary);
	border-color: var(--mf-border-color-hover);
}

.datepicker-header .datepicker-controls button:disabled {
	opacity: 0.4 !important;
	cursor: not-allowed;
	background-color: var(--mf-bg-tertiary) !important;
}

/* View Switch Button */
.datepicker-controls .view-switch {
	flex: auto;
}

.datepicker-header .datepicker-controls button.view-switch {
	all: unset;
	font-family: var(--mf-font-base);
	color: var(--mf-text-primary);
	text-align: center;
	font-size: 18px;
	font-weight: 700;
	line-height: 28px;
	margin: 0 auto;
	text-transform: capitalize;
	letter-spacing: 0;
}

/* Navigation Buttons */
.datepicker-controls .next-button,
.datepicker-controls .prev-button {
	flex: 0 0 14.2857142857%;
	padding-left: .375rem;
	padding-right: .375rem;
}

.datepicker-controls .next-button.disabled,
.datepicker-controls .prev-button.disabled {
	visibility: hidden;
}

.datepicker-footer .datepicker-controls .button {
	border-radius: 2px;
	flex: auto;
	font-size: .75rem;
	margin: calc(.375rem - 1px) .375rem;
}

/* Datepicker Grid and Views */
.datepicker-grid,
.datepicker-view {
	display: flex;
}

.datepicker-view {
	align-items: stretch;
	width: 100%;
	padding: 0;
}

.datepicker-grid {
	flex: auto;
	flex-wrap: wrap;
}

.datepicker-main .days-of-week,
.datepicker-main .datepicker-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: var(--mf-datepicker-gap);
}

/* Days Structure */
.datepicker .days {
	display: flex;
	flex: auto;
	flex-direction: column;
}

.datepicker .days-of-week {
	display: flex;
}

.datepicker .week-numbers {
	display: flex;
	flex: 0 0 9.6774193548%;
	flex-direction: column;
}

.datepicker .weeks {
	align-items: stretch;
	display: flex;
	flex: auto;
	flex-direction: column;
}

/* Datepicker Spans */
.datepicker span {
	-webkit-touch-callout: none;
	align-items: center;
	border-radius: 4px;
	cursor: default;
	display: flex;
	justify-content: center;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

.datepicker .dow {
	font-size: .875rem;
	font-weight: 700;
	height: 1.5rem;
}

.datepicker-main .days-of-week span,
.datepicker-main .datepicker-grid span {
	aspect-ratio: 1 / 1;
	height: auto;
}

.datepicker .week {
	color: #b8b8b8;
	flex: auto;
	font-size: .75rem;
}

.datepicker .days .dow,
.datepicker-cell {
	flex-basis: 14.2857142857%;
}

/* Datepicker Cells - Enhanced Styling */
.datepicker-cell {
	height: 2.25rem;
}

.datepicker-cell:not(.day) {
	flex-basis: 25%;
	height: 4.5rem;
}

.datepicker-main .datepicker-grid span {
	box-shadow: unset !important;
	border-radius: 4px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: var(--mf-form-datepicker-bt-default);
	border: 1px solid var(--mf-border-color);
	background: var(--mf-form-datepicker-bt-bg-default);
	font-size: 14px;
	font-weight: 700;
	line-height: 22px;
	font-family: var(--mf-font-base);
	position: relative;
	transition: var(--mf-form-transition);
}

.datepicker-cell:not(.disabled):hover,
.datepicker-main .datepicker-grid span:not(:focus, :active, .selected, .range-end, .range-start):hover {
	background: var(--mf-form-datepicker-bt-bg-hover);
	border-color: var(--mf-border-color-hover);
	color: var(--mf-form-datepicker-bt-hover);
	cursor: pointer;
}

.datepicker-main .datepicker-grid span:not(.range, .selected, .range-end, .range-start):active {
	background: var(--mf-form-datepicker-bt-bg-active);
	border-color: var(--mf-form-datepicker-bt-bg-active);
	color: var(--mf-form-datepicker-bt-active);
}

/* Selected and Range States */
.datepicker-cell.selected,
.datepicker-cell.selected:hover,
.datepicker-main .datepicker-grid span.range-end,
.datepicker-main .datepicker-grid span.range-start,
.datepicker-main .datepicker-grid span.selected {
	background: var(--mf-form-datepicker-bt-bg-selected);
	color: #fff;
	font-weight: 600;
	border: unset;
}

/* Range Styling */
.datepicker-cell.range,
.datepicker-main .datepicker-grid span.range {
	background: var(--mf-form-datepicker-bt-inRange) !important;
	border: unset;
	border-radius: 0;
}

/* Range Start/End Styling */
.datepicker-cell.range-start:not(.range-end),
.datepicker-main .datepicker-grid span.range-start:not(.range-end) {
	border-radius: 4px 0 0 4px;
}

.datepicker-cell.range-end:not(.range-start),
.datepicker-main .datepicker-grid span.range-end:not(.range-start) {
	border-radius: 0 4px 4px 0;
}

.datepicker-main .datepicker-grid span.range:not(.range-end) {
	border-radius: 0;
}

/* Range Connectors */
.datepicker-main .datepicker-grid span.range-start ~ span.range:not(.disabled):before,
.datepicker-main .datepicker-grid span.range-end:not(.disabled, .range-start):before,
.datepicker-main .datepicker-grid span.range:not(.disabled):before {
	content: '';
	position: absolute;
	background: var(--mf-form-datepicker-bt-inRange);
	width: 6px;
	height: 100%;
	left: -6px;
	top: 0;
}

.datepicker-main .datepicker-grid span:nth-child(7n - 6):before,
.datepicker-main .datepicker-grid span.range.prev.disabled:before,
.datepicker-main .datepicker-grid span.disabled + span.range:before,
.datepicker-main .datepicker-grid span.disabled + span.range-end:before {
	display: none;
}

.datepicker-main .datepicker-grid span.range:nth-child(7n - 6):not(.disabled) {
	border-radius: 4px 0 0 4px !important;
}

.datepicker-main .datepicker-grid span.range:nth-child(7n):not(.disabled) {
	border-radius: 0 4px 4px 0 !important;
}

/* Disabled States */
.datepicker-cell.disabled,
.datepicker-main .datepicker-grid span.disabled {
	background: var(--mf-form-datepicker-bt-bg-disabled) !important;
	box-shadow: unset !important;
	border: unset !important;
	color: var(--mf-form-datepicker-bt-disabled) !important;
	font-weight: 400 !important;
	border-radius: unset !important;
	cursor: not-allowed !important;
}

/* Previous/Next Month */
.datepicker-cell.next:not(.disabled),
.datepicker-cell.prev:not(.disabled),
.datepicker-main .datepicker-grid span.next,
.datepicker-main .datepicker-grid span.prev {
	opacity: 0.4;
}


/* Mobile Responsive */
@media(max-width: 768px) {
	.datepicker {
		left: 24px !important;
		padding: 24px;
		width: calc(100% - 48px);
	}
}