/**
 * Availability dots for the booking datepicker.
 *
 * Everything here rides on classes GP Limit Dates already emits, so there is no
 * new state to keep in sync:
 *
 *   td.gpld-disabled                          -> we are unavailable        (red)
 *   td:not(.ui-state-disabled)                -> bookable                  (green)
 *   td.ui-state-disabled:not(.gpld-disabled)  -> out of range, not blocked (no dot)
 *
 * That third case matters. Yesterday, and anything past the trip-length cap,
 * is unclickable but NOT unavailable. Painting those red would tell customers
 * we are booked up when we are not.
 *
 * Scoped to .yct-oa-dp, which the accompanying JS adds only while the shared
 * jQuery UI calendar is open from one of the booking date fields.
 */

#ui-datepicker-div.yct-oa-dp {
	width: 330px;
	padding: 18px 18px 14px;
	border: 1px solid #ececec;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 10px 30px rgba( 17, 24, 39, 0.10 );
	font-family: inherit;
	z-index: 99999;
}

/* ---------- header ---------- */

#ui-datepicker-div.yct-oa-dp .ui-datepicker-header {
	position: relative;
	padding: 0 0 2px;
	border: 0;
	background: none;
}

#ui-datepicker-div.yct-oa-dp .ui-datepicker-title {
	margin: 0 44px;
	font-size: 19px;
	font-weight: 700;
	line-height: 38px;
	color: #111827;
	text-align: center;
}

/**
 * These MUST declare position:absolute themselves. jQuery UI's own stylesheet
 * normally supplies it, but it is not loaded on this site -- without it the
 * arrows sit in normal flow and the "next" button overflows the card.
 */
#ui-datepicker-div.yct-oa-dp .ui-datepicker-prev,
#ui-datepicker-div.yct-oa-dp .ui-datepicker-next {
	position: absolute;
	top: 0;
	width: 38px;
	height: 38px;
	margin: 0;
	padding: 0;
	border: 1px solid #e5e7eb;
	border-radius: 11px;
	background: #fff;
	cursor: pointer;
	transition: background-color .15s ease;
}

#ui-datepicker-div.yct-oa-dp .ui-datepicker-prev { left: 0; right: auto; }
#ui-datepicker-div.yct-oa-dp .ui-datepicker-next { right: 0; left: auto; }

/* Header must reserve the arrows' height now they are out of flow. */
#ui-datepicker-div.yct-oa-dp .ui-datepicker-header {
	min-height: 38px;
}

#ui-datepicker-div.yct-oa-dp .ui-datepicker-prev:hover,
#ui-datepicker-div.yct-oa-dp .ui-datepicker-next:hover {
	background: #f9fafb;
	border-color: #e5e7eb;
}

/* Replace the jQuery UI sprite arrows with drawn chevrons. */
#ui-datepicker-div.yct-oa-dp .ui-datepicker-prev span,
#ui-datepicker-div.yct-oa-dp .ui-datepicker-next span {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	margin: 0;
	border: 0;
	border-top: 2px solid #374151;
	border-right: 2px solid #374151;
	background: none;
	text-indent: -9999px;
}

#ui-datepicker-div.yct-oa-dp .ui-datepicker-prev span {
	transform: translate( -35%, -50% ) rotate( -135deg );
}

#ui-datepicker-div.yct-oa-dp .ui-datepicker-next span {
	transform: translate( -65%, -50% ) rotate( 45deg );
}

#ui-datepicker-div.yct-oa-dp .yct-oa-subtitle {
	margin: 0 0 12px;
	font-size: 14px;
	color: #6b7280;
	text-align: center;
}

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

#ui-datepicker-div.yct-oa-dp table {
	margin: 0;
	border-collapse: separate;
	border-spacing: 0 2px;
	font-size: 15px;
}

#ui-datepicker-div.yct-oa-dp th {
	padding: 0 0 8px;
	font-size: 13px;
	font-weight: 600;
	color: #374151;
}

#ui-datepicker-div.yct-oa-dp td {
	padding: 1px;
	text-align: center;
}

#ui-datepicker-div.yct-oa-dp td > a,
#ui-datepicker-div.yct-oa-dp td > span {
	display: block;
	width: 38px;
	margin: 0 auto;
	padding: 5px 0 3px;
	border: 2px solid transparent;
	border-radius: 11px;
	background: none;
	font-weight: 500;
	line-height: 1.25;
	color: #111827;
	text-align: center;
}

#ui-datepicker-div.yct-oa-dp td > a:hover {
	background: #f3f4f6;
}

/* Unavailable and out-of-range days both read as muted text. */
#ui-datepicker-div.yct-oa-dp td.ui-state-disabled > span {
	color: #9ca3af;
	opacity: 1;
}

#ui-datepicker-div.yct-oa-dp td.ui-datepicker-other-month > span {
	color: #d1d5db;
}

/* Selected day: outlined, matching the mockup. */
#ui-datepicker-div.yct-oa-dp td.ui-datepicker-current-day > a {
	border-color: #2563eb;
	background: #fff;
	color: #111827;
}

/* ---------- the dots ---------- */

#ui-datepicker-div.yct-oa-dp td > a::after,
#ui-datepicker-div.yct-oa-dp td > span::after {
	content: "";
	display: block;
	width: 6px;
	height: 6px;
	margin: 5px auto 0;
	border-radius: 50%;
	background: transparent;
}

/* Bookable. */
#ui-datepicker-div.yct-oa-dp td:not( .ui-state-disabled ):not( .ui-datepicker-other-month ) > a::after {
	background: #22c55e;
}

/* Genuinely unavailable. */
#ui-datepicker-div.yct-oa-dp td.gpld-disabled > span::after {
	background: #ef4444;
}

/* Out of range, or spill-over from an adjacent month: no dot at all. */
#ui-datepicker-div.yct-oa-dp td.ui-state-disabled:not( .gpld-disabled ) > span::after,
#ui-datepicker-div.yct-oa-dp td.ui-datepicker-other-month:not( .gpld-disabled ) > span::after {
	background: transparent;
}

/* ---------- legend ---------- */

#ui-datepicker-div.yct-oa-dp .yct-oa-legend {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid #ececec;
	font-size: 13px;
	color: #374151;
}

#ui-datepicker-div.yct-oa-dp .yct-oa-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

#ui-datepicker-div.yct-oa-dp .yct-oa-legend-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex: 0 0 auto;
}

#ui-datepicker-div.yct-oa-dp .yct-oa-legend-dot.is-available { background: #22c55e; }
#ui-datepicker-div.yct-oa-dp .yct-oa-legend-dot.is-unavailable { background: #ef4444; }

#ui-datepicker-div.yct-oa-dp .yct-oa-legend-dot.is-selected {
	background: #fff;
	border: 2px solid #2563eb;
	width: 11px;
	height: 11px;
}

/* Divi and other themes like to restyle tables inside content. */
#ui-datepicker-div.yct-oa-dp table,
#ui-datepicker-div.yct-oa-dp td,
#ui-datepicker-div.yct-oa-dp th {
	border: 0;
	background: none;
}