/**
 * Villa Mariner - kalendarz flatpickr w barwach motywu.
 *
 * Osobny plik, bo flatpickr.min.css laduje sie dopiero razem z formularzem
 * rezerwacji, a wiec PO main.css - nadpisania trzymane tam przegrywalyby
 * kolejnoscia. Ten arkusz jest zalezny od flatpickr i wchodzi zaraz po nim.
 */

/* --- Kalendarz flatpickr w barwach motywu --- */

.flatpickr-calendar {
	border-radius: var(--vm-radius-lg);
	box-shadow: var(--vm-shadow-lg);
	font-family: var(--vm-font-body);
}

.flatpickr-months .flatpickr-month {
	background: var(--vm-navy-deep);
	color: var(--vm-white);
	border-radius: var(--vm-radius-lg) var(--vm-radius-lg) 0 0;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
	font-weight: 500;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
	fill: var(--vm-white);
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
	fill: var(--vm-sky);
}

span.flatpickr-weekday {
	background: var(--vm-navy-deep);
	color: var(--vm-on-dark-muted);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.flatpickr-day {
	border-radius: var(--vm-radius);
	color: var(--vm-ink);
}

.flatpickr-day:hover {
	background: var(--vm-sand);
	border-color: var(--vm-sand);
}

.flatpickr-day.today {
	border-color: var(--vm-sky);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
	background: var(--vm-navy);
	border-color: var(--vm-navy);
	color: var(--vm-white);
}

.flatpickr-day.inRange {
	background: var(--vm-sky-soft);
	border-color: var(--vm-sky-soft);
	box-shadow: -5px 0 0 var(--vm-sky-soft), 5px 0 0 var(--vm-sky-soft);
	color: var(--vm-navy-deep);
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
	color: rgba(95, 110, 125, 0.35);
}

.booking__submit {
	display: flex;
}

.booking__submit .btn {
	border-radius: 0;
	padding-inline: clamp(1.5rem, 2.5vw, 2.5rem);
}

@media (max-width: 980px) {
	.booking__card {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.booking__field:nth-child(2n) {
		border-inline-end: 0;
	}

	.booking__field {
		border-bottom: 1px solid var(--vm-line);
	}

	.booking__submit {
		grid-column: 1 / -1;
	}

	.booking__submit .btn {
		width: 100%;
		padding-block: 1.1em;
	}
}

@media (max-width: 560px) {
	.booking--overlap {
		margin-top: var(--vm-space-6);
	}

	.booking__card {
		grid-template-columns: minmax(0, 1fr);
	}

	.booking__field {
		border-inline-end: 0;
	}
}

/* Pasek dni tygodnia siedzi we wlasnym kontenerze z osobnym tlem. */
.flatpickr-weekdays {
	background: var(--vm-navy-deep);
}

.flatpickr-weekdaycontainer {
	background: var(--vm-navy-deep);
}

/* Przy dwoch miesiacach flatpickr ustala wysokosc wedlug krotszego z nich,
   przez co szosty tydzien dluzszego miesiaca wypadal poza panel. Rezerwujemy
   miejsce na szesc wierszy w kazdym miesiacu - kalendarz nie skacze tez przy
   przewijaniu miedzy miesiacami o roznej liczbie tygodni. */
.flatpickr-calendar.multiMonth .flatpickr-days {
	height: auto !important;
	align-items: flex-start;
}

.flatpickr-calendar.multiMonth .dayContainer {
	min-height: 246px;
	align-content: flex-start;
}

.flatpickr-calendar {
	overflow: hidden;
}

/* Zaokraglenie dolnych rogow po ukryciu przepelnienia. */
.flatpickr-innerContainer {
	border-radius: 0 0 var(--vm-radius-lg) var(--vm-radius-lg);
}