/* GF Date Limit – frontend.css (v3.3.0)
 *
 * ── Design rules ─────────────────────────────────────────────────────────────
 *
 * jQuery UI manages position:absolute, top, left, and display on .ui-datepicker
 * via INLINE STYLES. We must NOT override those with !important — doing so
 * breaks the widget's ability to open and position itself next to its input.
 *
 * What we DO add:
 *   1. #ui-datepicker-div { display:none } – initial hidden state (see below)
 *   2. z-index – so the calendar renders above theme overlays/modals
 *   3. Table cell padding/border-collapse – fixes "2728 2930" number-merging
 *      caused by theme global "table { border-collapse:collapse }" rules
 *   4. Our three blocked-date CSS classes
 * ──────────────────────────────────────────────────────────────────────────── */


/* ── Initial hidden state ────────────────────────────────────────────────────
 *
 * jQuery UI's own stylesheet provides ".ui-datepicker { display:none }" so the
 * calendar widget starts hidden and jQuery UI shows/hides it via inline styles.
 *
 * Many WordPress themes and some GF setups do NOT load the full jQuery UI CSS,
 * leaving #ui-datepicker-div as a plain <div> (display:block by default).
 * Without this rule, the calendar renders as a visible static block at the
 * bottom of the page on every page load — even before any user interaction.
 *
 * We target the ID (not the class) so jQuery UI's inline style="display:block"
 * still wins when it opens the calendar, and inline style="display:none" wins
 * when it closes it. We must NOT use !important here — that would lock the
 * calendar permanently hidden and jQuery UI could never open it.
 * ────────────────────────────────────────────────────────────────────────── */

#ui-datepicker-div {
	display: none;
}


/* ── z-index — keeps calendar above theme overlays ───────────────────────────
 *
 * We use !important here because z-index is NOT managed by jQuery UI inline
 * styles in the same way display/top/left are — it's safe to override.
 * ────────────────────────────────────────────────────────────────────────── */

.ui-datepicker {
	z-index: 99999 !important;
}


/* ── Fix: day numbers merging together ───────────────────────────────────────
 *
 * Many themes apply "table { border-collapse: collapse !important }" globally.
 * When applied to the datepicker's <table>, this causes adjacent <td> cells
 * to share borders and appear merged, making "27 28" display as "2728".
 *
 * border-collapse:separate ensures each cell has its own border model.
 * The padding on th/td ensures each day number has breathing room.
 * These rules use !important to override theme globals.
 * ────────────────────────────────────────────────────────────────────────── */

.ui-datepicker table {
	border-collapse: separate !important;
	border-spacing: 2px !important;
	width: auto !important;
}

.ui-datepicker th,
.ui-datepicker td {
	padding: 3px 4px !important;
	text-align: center !important;
	border: none !important;
	box-sizing: border-box !important;
}

.ui-datepicker td a,
.ui-datepicker td span {
	display: block !important;
	padding: 3px 5px !important;
	text-align: center !important;
	min-width: 1.8em;
	box-sizing: border-box !important;
}


/* ── Our custom blocked-day states ───────────────────────────────────────────
 *
 * These classes are applied by our beforeShowDay callback to <td> elements.
 * We dim the cell and block interaction with pointer-events:none on the link.
 * ────────────────────────────────────────────────────────────────────────── */

/* Unavailable day-of-week */
.ui-datepicker td.gf-date-limit-unavailable {
	opacity: 0.3 !important;
	cursor: not-allowed !important;
}

/* Blocked month */
.ui-datepicker td.gf-date-limit-blocked-month {
	opacity: 0.3 !important;
	cursor: not-allowed !important;
	background-color: #fdf3f3 !important;
}

/* Fully booked date */
.ui-datepicker td.gf-date-limit-booked {
	opacity: 0.35 !important;
	cursor: not-allowed !important;
	background-color: #fff0f0 !important;
	position: relative !important;
}

/* Links and spans inside all our blocked cells — prevent interaction */
.ui-datepicker td.gf-date-limit-unavailable a,
.ui-datepicker td.gf-date-limit-unavailable span,
.ui-datepicker td.gf-date-limit-blocked-month a,
.ui-datepicker td.gf-date-limit-blocked-month span,
.ui-datepicker td.gf-date-limit-booked a,
.ui-datepicker td.gf-date-limit-booked span {
	cursor: not-allowed !important;
	pointer-events: none !important;
	background: none !important;
	border: none !important;
	color: #999 !important;
	position: relative !important;
}

/* Strikethrough on fully booked dates */
.ui-datepicker td.gf-date-limit-booked a::after,
.ui-datepicker td.gf-date-limit-booked span::after {
	content: '' !important;
	display: block !important;
	position: absolute !important;
	top: 50% !important;
	left: 15% !important;
	right: 15% !important;
	height: 1px !important;
	background: #c0392b !important;
	opacity: 0.8 !important;
	pointer-events: none !important;
}