/* Mas d'images Booking widget */
.masd-booking-form {
	--masd-radius: 8px;
	--masd-gap: 12px;
	box-sizing: border-box;
	padding: 16px;
	border-radius: var(--masd-radius);
	max-width: 100%;
}
.masd-booking-form *,
.masd-booking-form *::before,
.masd-booking-form *::after {
	box-sizing: border-box;
}
.masd-booking-form__form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--masd-gap);
}
.masd-booking-form--portrait .masd-booking-form__form {
	flex-direction: column;
	align-items: stretch;
}

.masd-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	flex: 1 1 140px;
}
.masd-field__label {
	font-size: 0.78em;
	line-height: 1.2;
	opacity: 0.85;
	margin: 0;
}
.masd-field__input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-radius: 6px;
	background: #fff;
	color: inherit;
	font: inherit;
	line-height: 1.2;
	min-height: 44px;
}
.masd-field__input:focus {
	outline: 2px solid rgba(142, 182, 225, 0.9);
	outline-offset: 1px;
}
.masd-date {
	cursor: pointer;
	background-image: none;
}

.masd-units {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--masd-gap);
	flex: 2 1 260px;
}
.masd-field--units {
	flex: 0 0 90px;
}
.masd-rooms {
	display: flex;
	flex-wrap: wrap;
	gap: var(--masd-gap);
	flex: 1 1 auto;
}
.masd-room {
	display: flex;
	align-items: flex-end;
	gap: var(--masd-gap);
	flex: 1 1 200px;
}
.masd-room__title {
	display: none;
	font-size: 0.78em;
	opacity: 0.85;
	width: 100%;
}
.masd-booking-form--multi .masd-room {
	flex-wrap: wrap;
	padding: 10px;
	border: 1px dashed rgba(0, 0, 0, 0.15);
	border-radius: 6px;
}
.masd-booking-form--multi .masd-room__title {
	display: block;
}

.masd-booking-form__submit {
	flex: 0 0 auto;
	padding: 12px 22px;
	min-height: 44px;
	border: 0;
	border-radius: 6px;
	background: #8eb6e1;
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: filter 0.15s ease;
}
.masd-booking-form__submit:hover {
	filter: brightness(0.94);
}
.masd-booking-form--portrait .masd-booking-form__submit {
	width: 100%;
}

.masd-booking-notice {
	padding: 10px 14px;
	border: 1px solid #f0c36d;
	background: #fff8e5;
	border-radius: 6px;
	font-size: 14px;
}

/* Hide the faded spillover days from the previous/next month so each month tab
   shows only its own bookable days (e.g. Nov 1 appears on the November tab, not
   greyed at the bottom of October). Scoped to our widget's calendars via .masd-fp.
   visibility:hidden (not display:none) keeps the weekday columns aligned. */
.masd-fp.flatpickr-calendar .flatpickr-day.prevMonthDay,
.masd-fp.flatpickr-calendar .flatpickr-day.nextMonthDay {
	visibility: hidden;
	pointer-events: none;
}

/* The theme's large serif heading styles bleed into flatpickr's month/year
   header and push it out of the top of the calendar. Let the header sit in
   normal flow with room to breathe, and normalise its sizing. Scoped to .masd-fp. */
.masd-fp.flatpickr-calendar {
	line-height: 1.3;
}
.masd-fp.flatpickr-calendar .flatpickr-months {
	position: relative; /* anchor the nav arrows to the header, not the whole calendar */
	align-items: center;
	min-height: 44px;
	padding: 0 40px; /* reserve room on both sides for the ‹ › arrows */
}
.masd-fp.flatpickr-calendar .flatpickr-months .flatpickr-month {
	height: auto;
}
.masd-fp.flatpickr-calendar .flatpickr-current-month {
	position: static;
	width: 100%;
	height: auto;
	padding: 10px 0 4px;
	font-size: 16px;
	line-height: 1.3;
	text-align: center;
}
.masd-fp.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
.masd-fp.flatpickr-calendar .flatpickr-current-month input.cur-year {
	font-size: inherit;
	line-height: 1.3;
	height: auto;
	padding: 0 2px;
	vertical-align: baseline;
}
.masd-fp.flatpickr-calendar .flatpickr-prev-month,
.masd-fp.flatpickr-calendar .flatpickr-next-month {
	top: 50%;
	transform: translateY(-50%);
	height: auto;
	width: 34px;
	padding: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}
.masd-fp.flatpickr-calendar .flatpickr-prev-month {
	left: 2px;
	right: auto;
}
.masd-fp.flatpickr-calendar .flatpickr-next-month {
	right: 2px;
	left: auto;
}
.masd-fp.flatpickr-calendar .flatpickr-prev-month svg,
.masd-fp.flatpickr-calendar .flatpickr-next-month svg {
	width: 14px;
	height: 14px;
}

/* --- Availability colour-coding ---------------------------------------------
   green  = available night (bookable check-in)
   red    = booked night (not bookable)
   green + ring = a booked night right after a free one: a valid check-OUT
                  boundary (end of a bookable period) but not a valid check-IN,
                  so on the arrival calendar it looks green yet stays disabled. */
.masd-fp.flatpickr-calendar .flatpickr-day.masd-day-available,
.masd-fp.flatpickr-calendar .flatpickr-day.masd-day-checkout {
	background-color: rgba(56, 161, 105, 0.16);
	color: #1c5238;
}
.masd-fp.flatpickr-calendar .flatpickr-day.masd-day-booked {
	background-color: rgba(200, 62, 62, 0.14);
	color: #8a2b2b;
}
.masd-fp.flatpickr-calendar .flatpickr-day.masd-day-checkout {
	box-shadow: inset 0 0 0 1px rgba(56, 161, 105, 0.6);
}
.masd-fp.flatpickr-calendar .flatpickr-day.masd-day-available:hover,
.masd-fp.flatpickr-calendar .flatpickr-day.masd-day-checkout:not(.flatpickr-disabled):hover {
	background-color: rgba(56, 161, 105, 0.30);
	color: #1c5238;
}
/* Keep the "today" outline and the selected day clearly on top of the tints. */
.masd-fp.flatpickr-calendar .flatpickr-day.today:not(.selected) {
	border-color: #8eb6e1;
}
.masd-fp.flatpickr-calendar .flatpickr-day.selected,
.masd-fp.flatpickr-calendar .flatpickr-day.selected:hover {
	background: #569ff7;
	border-color: #569ff7;
	color: #fff;
	box-shadow: none;
}

/* Small screens: stack into a column */
@media (max-width: 640px) {
	.masd-booking-form__form {
		flex-direction: column;
		align-items: stretch;
	}
	.masd-field,
	.masd-units,
	.masd-room {
		flex: 1 1 auto;
		width: 100%;
	}
	.masd-booking-form__submit {
		width: 100%;
	}
}