/**
 * Re-skins the flatpickr calendar popup to match the site's brand colors
 * (falls back to sensible defaults if the theme's CSS variables aren't
 * present, e.g. --ctb-primary from cebutours-theme's style.css).
 */

/* The visible text field flatpickr shows when altInput:true is used —
   inherits the same look as every other booking-form field. */
.ctb-booking-form input.ctb-date-input-alt {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--ctb-border, #dfe6e2);
	border-radius: var(--ctb-radius, 8px);
	box-sizing: border-box;
	font-family: inherit;
	font-size: 14px;
	color: var(--ctb-text, #22312c);
	background: var(--ctb-white, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b6e4f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='3'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") no-repeat right 12px center;
	background-size: 17px 17px;
	padding-right: 38px;
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ctb-booking-form input.ctb-date-input-alt:hover {
	border-color: var(--ctb-primary, #0b6e4f);
}
.ctb-booking-form input.ctb-date-input-alt:focus {
	outline: none;
	border-color: var(--ctb-primary, #0b6e4f);
	box-shadow: 0 0 0 3px rgba(11, 110, 79, 0.15);
}

/* Calendar popup shell */
.flatpickr-calendar {
	border-radius: 14px;
	box-shadow: var(--ctb-shadow, 0 10px 30px rgba(20, 40, 35, 0.16));
	border: 1px solid var(--ctb-border, #e2ece8);
	font-family: var(--ctb-font-body, inherit);
	padding: 6px;
	width: 300px !important;
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
	display: none;
}
.flatpickr-innerContainer,
.flatpickr-rContainer,
.flatpickr-days,
.dayContainer {
	width: 100% !important;
	max-width: 100% !important;
	/* flatpickr's own stylesheet also sets a fixed min-width (307.875px) on
	   .dayContainer so the 7-day grid always has room at its default 340px
	   popup size. We shrink the popup to 300px to match the rest of the
	   form's compact fields, but that leftover min-width was still forcing
	   the day grid wider than the 300px shell has room for — the 7th
	   column (Saturday) got pushed past the shell's right edge and clipped
	   by flatpickr's own overflow:hidden. Overriding min-width lets the
	   grid actually shrink to fit the smaller popup. */
	min-width: 100% !important;
}

/* Month header */
.flatpickr-months {
	padding: 6px 4px 10px;
}
.flatpickr-current-month {
	font-size: 15px;
	font-weight: 700;
	color: var(--ctb-text, #22312c);
	padding: 0;
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
	font-weight: 700;
	color: var(--ctb-text, #22312c);
}
.flatpickr-prev-month,
.flatpickr-next-month {
	border-radius: 50%;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease;
}
.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
	background: var(--ctb-bg-alt, #f4f9f7);
}
.flatpickr-prev-month svg,
.flatpickr-next-month svg {
	fill: var(--ctb-primary, #0b6e4f);
}

/* Weekday row */
.flatpickr-weekdays {
	margin-bottom: 4px;
}
span.flatpickr-weekday {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: var(--ctb-text-light, #5b6b65);
}

/* Day cells — smooth hover/select transitions instead of flatpickr's
   default instant color snap. */
.flatpickr-day {
	border-radius: 50%;
	color: var(--ctb-text, #22312c);
	transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.flatpickr-day.today {
	border-color: var(--ctb-primary, #0b6e4f);
}
.flatpickr-day:hover,
.flatpickr-day:focus {
	background: var(--ctb-bg-alt, #f4f9f7);
	border-color: var(--ctb-bg-alt, #f4f9f7);
	transform: scale(1.06);
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
	background: var(--ctb-primary, #0b6e4f);
	border-color: var(--ctb-primary, #0b6e4f);
	color: #fff;
	box-shadow: 0 4px 10px rgba(11, 110, 79, 0.35);
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
	color: var(--ctb-border, #d7e0dc);
	cursor: not-allowed;
}
.flatpickr-day.flatpickr-disabled:hover {
	background: transparent;
	transform: none;
}

/* Fade/slide the calendar in instead of it just popping into place. */
.flatpickr-calendar.open {
	animation: ctb-fp-in 0.16s ease-out;
}
@keyframes ctb-fp-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}