.ui-datepicker-inline.gform-theme-datepicker {
	box-shadow: none;
}

.ui-datepicker-inline.gform-legacy-datepicker {
	width: 216px;
}

/**
 * Responsive styles for Inline Datepickers.
 *
 * These styles cap the datepicker at it's native max-width of 398px. Would love to explore responsive styles for much
 * larger datepickers in the future.
 */

.gpld-inline-datepicker {
	max-width: 398px;
	width: 100%;
}

.gpld-inline-datepicker .ui-datepicker-inline .ui-datepicker-calendar {
	width: 100%;
}

.gpld-inline-datepicker .gform-theme-datepicker:not(.gform-legacy-datepicker) .ui-datepicker-calendar td,
.gpld-inline-datepicker .gform-theme-datepicker:not(.gform-legacy-datepicker) th {
	width: 14.28%;
	height: auto;
	position: relative;
	padding: 0;
}

.gpld-inline-datepicker .gform-theme-datepicker:not(.gform-legacy-datepicker) td:before,
.gpld-inline-datepicker .gform-theme-datepicker:not(.gform-legacy-datepicker) th:before {
	content: '';
	display: block;
	padding-top: 100%;
}

.gpld-inline-datepicker .gform-theme-datepicker:not(.gform-legacy-datepicker) .ui-datepicker-calendar .ui-state-default,
.gpld-inline-datepicker .gform-theme-datepicker:not(.gform-legacy-datepicker) .ui-datepicker-calendar th span {
	width: auto !important;
	height: auto !important;
	position: absolute;
	/* Goal here is to more aggressively reduce the "padding" as the width decreases. The 3px reduction achieves this
	   as the static reduction is more impactful as the value of the 15% decreases with the width. */
	top: calc( 15% - 3px );
	right: calc( 15% - 3px );
	bottom: calc( 15% - 3px );
	left: calc( 15% - 3px );
	line-height: 1;
}

/**
 * Standalone inline datepicker styles.
 *
 * Gravity Forms 3.0 dropped the jQuery UI datepicker, and with it the stylesheet that used to render
 * the inline calendar. Inline datepickers still need jQuery UI, so this perk loads it and attaches the
 * calendar itself — which means it also has to supply the presentation.
 *
 * Everything below is scoped to .gpld-inline-datepicker--standalone, a class added only when this perk
 * initializes the calendar. On GF 2.x, Gravity Forms initializes it and provides the theme, so that
 * class is absent and none of these rules apply.
 *
 * Colours are taken from the Gravity Forms theme's custom properties where available, with plain
 * fallbacks so the calendar stays legible on themes that do not define them.
 */

.gpld-inline-datepicker.gpld-inline-datepicker--standalone {
	/* Re-assert the inline datepicker's width cap, matching GF 2.x. Two classes are needed because the
	   container also carries GF's `gform-datepicker` class, which GF 3.0 styles as a full-width control. */
	max-width: 398px;
}

.gpld-inline-datepicker--standalone .ui-datepicker-inline {
	width: 100%;
	padding: 0.75rem;
	border: 1px solid var( --gform-theme-color-outside-control-light, #d1d5db );
	border-radius: var( --gform-theme-border-radius, 4px );
	background: var( --gform-theme-color-inside-control, #fff );
	font-size: var( --gform-theme-font-size-secondary, 0.875rem );
	box-sizing: border-box;
}

/* Header: month/year controls and the prev/next arrows. */
.gpld-inline-datepicker--standalone .ui-datepicker-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

.gpld-inline-datepicker--standalone .ui-datepicker-title {
	display: flex;
	flex: 1 1 auto;
	gap: 0.5rem;
	order: 2;
}

.gpld-inline-datepicker--standalone .ui-datepicker-title select {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

.gpld-inline-datepicker--standalone .ui-datepicker-prev,
.gpld-inline-datepicker--standalone .ui-datepicker-next {
	flex: 0 0 auto;
	width: 1.75rem;
	height: 1.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var( --gform-theme-border-radius, 4px );
	cursor: pointer;
	text-decoration: none;
	/* jQuery UI puts the label ("Previous"/"Next") in a nested span; replace it with an arrow glyph. */
	position: relative;
	overflow: hidden;
	color: inherit;
}

.gpld-inline-datepicker--standalone .ui-datepicker-prev { order: 1; }
.gpld-inline-datepicker--standalone .ui-datepicker-next { order: 3; }

.gpld-inline-datepicker--standalone .ui-datepicker-prev span,
.gpld-inline-datepicker--standalone .ui-datepicker-next span {
	/* Hide the text label without hiding the clickable box. */
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}

.gpld-inline-datepicker--standalone .ui-datepicker-prev:before { content: '\2039'; }
.gpld-inline-datepicker--standalone .ui-datepicker-next:before { content: '\203A'; }

.gpld-inline-datepicker--standalone .ui-datepicker-prev:before,
.gpld-inline-datepicker--standalone .ui-datepicker-next:before {
	font-size: 1.25rem;
	line-height: 1;
}

.gpld-inline-datepicker--standalone .ui-datepicker-prev:hover,
.gpld-inline-datepicker--standalone .ui-datepicker-next:hover {
	background: var( --gform-theme-color-outside-control-light, #f3f4f6 );
}

/* jQuery UI marks the arrows unusable when navigation would leave the allowed date range. */
.gpld-inline-datepicker--standalone .ui-datepicker-prev.ui-state-disabled,
.gpld-inline-datepicker--standalone .ui-datepicker-next.ui-state-disabled {
	opacity: 0.35;
	cursor: default;
	background: none;
}

/* Calendar grid. */
.gpld-inline-datepicker--standalone .ui-datepicker-calendar {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	table-layout: fixed;
}

.gpld-inline-datepicker--standalone .ui-datepicker-calendar th,
.gpld-inline-datepicker--standalone .ui-datepicker-calendar td {
	width: 14.28%;
	padding: 1px;
	border: 0;
	text-align: center;
	background: none;
}

.gpld-inline-datepicker--standalone .ui-datepicker-calendar th {
	font-weight: 600;
	padding-bottom: 0.375rem;
	opacity: 0.7;
}

.gpld-inline-datepicker--standalone .ui-datepicker-calendar td a,
.gpld-inline-datepicker--standalone .ui-datepicker-calendar td span {
	display: flex;
	align-items: center;
	justify-content: center;
	/* A fixed row height rather than square cells, so the calendar stays compact at any width. */
	min-height: 2.25rem;
	border-radius: var( --gform-theme-border-radius, 4px );
	text-decoration: none;
	color: inherit;
}

.gpld-inline-datepicker--standalone .ui-datepicker-calendar td a:hover {
	background: var( --gform-theme-color-outside-control-light, #f3f4f6 );
}

/* Unavailable dates: the whole point of this perk, so keep them clearly non-interactive. */
.gpld-inline-datepicker--standalone .ui-datepicker-calendar td.ui-state-disabled span,
.gpld-inline-datepicker--standalone .ui-datepicker-calendar td.ui-datepicker-unselectable span {
	opacity: 0.35;
	text-decoration: line-through;
	cursor: default;
}

.gpld-inline-datepicker--standalone .ui-datepicker-calendar td.ui-datepicker-today a,
.gpld-inline-datepicker--standalone .ui-datepicker-calendar td.ui-datepicker-today span {
	box-shadow: inset 0 0 0 1px var( --gform-theme-color-primary, #204ce5 );
}

.gpld-inline-datepicker--standalone .ui-datepicker-calendar td.ui-datepicker-current-day a {
	background: var( --gform-theme-color-primary, #204ce5 );
	color: var( --gform-theme-color-inside-control, #fff );
}