/* WP Calendar — read-only display */

.wp-calendar-wrap {
	--wpc-bg: #ffffff;
	--wpc-fg: #1f2328;
	--wpc-muted: #8a8f98;
	--wpc-border: #e6e8eb;
	--wpc-available-bg: #10b981; /* emerald-500 — available */
	--wpc-available-fg: #ffffff;
	--wpc-booked-bg: #8a8a8a;    /* grey 138,138,138 — booked */
	--wpc-booked-fg: #4d4d4d;    /* dimmed day number, still legible */
	--wpc-past-bg: #f3f4f6;      /* light grey — past */
	--wpc-past-fg: #b6bac0;
	--wpc-today-outline: #2563eb;
	--wpc-turnover-line: #ffffff;
	--wpc-radius: 6px;
	--wpc-gap: 3px;
	--wpc-cell-min: 30px;

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	color: var(--wpc-fg);
	max-width: 100%;
	line-height: 1.4;
	container-type: inline-size;
}

.wp-calendar-months {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1rem;
}

.wp-calendar-month {
	background: var(--wpc-bg);
	border: 1px solid var(--wpc-border);
	border-radius: var(--wpc-radius);
	padding: 0.75rem;
	min-width: 0;
}

.wp-calendar-month--hidden {
	display: none;
}

/* When the picker is inside the title, hide the plain label (the picker already shows the month). */
.wp-calendar-month-title:has(.wp-calendar-picker) .wp-calendar-month-label {
	display: none;
}

.wp-calendar-month-title {
	font-size: 0.95rem;
	font-weight: 600;
	text-align: center;
	margin: 0 0 0.5rem;
	letter-spacing: 0.01em;
}

/* First-month picker: arrows + <select> styled as a clickable title */
.wp-calendar-picker {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.15rem;
	margin: 0;
}

.wp-calendar-nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	padding: 0;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 4px;
	color: var(--wpc-fg);
	cursor: pointer;
	transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.wp-calendar-nav svg {
	width: 12px;
	height: 12px;
	display: block;
}
.wp-calendar-nav:hover:not([disabled]),
.wp-calendar-nav:focus-visible:not([disabled]) {
	background-color: rgba(0, 0, 0, 0.06);
	border-color: var(--wpc-border);
	outline: none;
}
.wp-calendar-nav[disabled] {
	color: var(--wpc-muted);
	opacity: 0.35;
	cursor: not-allowed;
}
.wp-calendar-picker select {
	font: inherit;
	font-weight: 600;
	color: var(--wpc-fg);
	background: transparent;
	border: 1px solid transparent;
	border-radius: 4px;
	padding: 0.1rem 1.4rem 0.1rem 0.4rem;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	text-align: center;
	text-align-last: center;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 4.5l3 3 3-3' fill='none' stroke='%23555' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat: no-repeat;
	background-position: right 0.35rem center;
	background-size: 10px 10px;
	transition: background-color 120ms ease, border-color 120ms ease;
}
.wp-calendar-picker select:hover,
.wp-calendar-picker select:focus {
	background-color: rgba(0, 0, 0, 0.04);
	border-color: var(--wpc-border);
	outline: none;
}
.wp-calendar-picker .screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.wp-calendar-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: var(--wpc-gap);
}

.wp-calendar-dow {
	font-size: 0.65rem;
	font-weight: 600;
	color: var(--wpc-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-align: center;
	padding-bottom: 0.25rem;
}

.wp-calendar-day {
	position: relative;
	aspect-ratio: 1 / 1;
	min-height: var(--wpc-cell-min);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	font-size: 0.8rem;
	font-weight: 500;
	line-height: 1;
	border: 1px solid transparent;
	overflow: hidden;
}

.wp-calendar-day .wp-calendar-day-num {
	position: relative;
	z-index: 1;
}

.wp-calendar-day.is-outside {
	visibility: hidden;
}

/* Available */
.wp-calendar-day.is-available {
	background: var(--wpc-available-bg);
	color: var(--wpc-available-fg);
	border-color: var(--wpc-available-bg);
}

/* Booked (full night) */
.wp-calendar-day.is-booked {
	background: var(--wpc-booked-bg);
	color: var(--wpc-booked-fg);
	border-color: var(--wpc-booked-bg);
	font-weight: 400;
}

/* Arrival (DTSTART): free morning (top-left), booked afternoon (bottom-right) + thin white line */
.wp-calendar-day.is-checkin {
	background:
		linear-gradient(to bottom right,
			var(--wpc-available-bg) calc(50% - 1px),
			var(--wpc-turnover-line) calc(50% - 1px),
			var(--wpc-turnover-line) calc(50% + 1px),
			var(--wpc-booked-bg) calc(50% + 1px));
	color: var(--wpc-booked-fg);
	border-color: transparent;
	font-weight: 400;
}

/* Departure (DTEND): booked morning (top-left), free afternoon (bottom-right) + thin white line */
.wp-calendar-day.is-checkout {
	background:
		linear-gradient(to bottom right,
			var(--wpc-booked-bg) calc(50% - 1px),
			var(--wpc-turnover-line) calc(50% - 1px),
			var(--wpc-turnover-line) calc(50% + 1px),
			var(--wpc-available-bg) calc(50% + 1px));
	color: var(--wpc-booked-fg);
	border-color: transparent;
	font-weight: 400;
}

/* Turnover (departure + arrival same day): fully booked + thin white line */
.wp-calendar-day.is-turnover {
	background:
		linear-gradient(to bottom right,
			var(--wpc-booked-bg) calc(50% - 1px),
			var(--wpc-turnover-line) calc(50% - 1px),
			var(--wpc-turnover-line) calc(50% + 1px),
			var(--wpc-booked-bg) calc(50% + 1px));
	color: var(--wpc-booked-fg);
	border-color: var(--wpc-booked-bg);
	font-weight: 400;
}

/* Past: greyed out (including half-day cells) */
.wp-calendar-day.is-past {
	background: var(--wpc-past-bg);
	color: var(--wpc-past-fg);
	border-color: var(--wpc-past-bg);
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}
.wp-calendar-day.is-past.is-checkin,
.wp-calendar-day.is-past.is-checkout,
.wp-calendar-day.is-past.is-turnover,
.wp-calendar-day.is-past.is-booked {
	background: var(--wpc-past-bg);
	color: var(--wpc-past-fg);
	border-color: var(--wpc-past-bg);
}

.wp-calendar-day.is-today {
	box-shadow: inset 0 0 0 2px var(--wpc-today-outline);
}

/* Legend */
.wp-calendar-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	font-size: 0.8rem;
	color: var(--wpc-muted);
}
.wp-calendar-legend li {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}
.wp-calendar-legend .swatch {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 3px;
	border: 1px solid var(--wpc-border);
}
.wp-calendar-legend .swatch.is-booked {
	background: var(--wpc-booked-bg);
	border-color: var(--wpc-booked-bg);
}
.wp-calendar-legend .swatch.is-past {
	background: var(--wpc-past-bg);
	border-color: var(--wpc-past-bg);
}
.wp-calendar-legend .swatch.is-available {
	background: var(--wpc-available-bg);
	border-color: var(--wpc-available-bg);
}
.wp-calendar-legend .swatch.is-checkin {
	background:
		linear-gradient(to bottom right,
			var(--wpc-available-bg) calc(50% - 1px),
			var(--wpc-turnover-line) calc(50% - 1px),
			var(--wpc-turnover-line) calc(50% + 1px),
			var(--wpc-booked-bg) calc(50% + 1px));
	border-color: transparent;
}

/* Wide containers: a bit more breathing room */
@container (min-width: 760px) {
	.wp-calendar-wrap {
		--wpc-gap: 4px;
		--wpc-cell-min: 36px;
	}
	.wp-calendar-month {
		padding: 1rem;
	}
	.wp-calendar-month-title {
		font-size: 1rem;
		margin-bottom: 0.75rem;
	}
}

/* Mobile: one month per row, tighter spacing */
@media (max-width: 480px) {
	.wp-calendar-months {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}
	.wp-calendar-wrap {
		--wpc-cell-min: 36px;
	}
}