/*
 * Huisstijl voor alle Litepicker-kalenders op de site
 * (productpagina, beschikbaarheidszoeker en de periodekiezer in de winkelwagen).
 * "body" verhoogt de specificiteit boven de CSS die Litepicker zelf injecteert.
 */
body .litepicker {
	--litepicker-day-width: 32px;
	/* Litepicker rekent de maandbreedte uit op :root (met de standaard dagbreedte); hier opnieuw zetten */
	--litepicker-month-width: calc(var(--litepicker-day-width) * 7);
	--litepicker-container-months-color-bg: #fff;
	--litepicker-container-months-box-shadow-color: transparent;
	--litepicker-month-header-color: var(--wc-color-secondary, #263068);
	--litepicker-month-weekday-color: var(--wc-color-text-muted, #6b6b6b);
	--litepicker-day-color: var(--wc-color-text, #222);
	--litepicker-day-color-hover: var(--wc-color-secondary, #263068);
	--litepicker-is-today-color: var(--wc-color-primary, #bd201c);
	--litepicker-is-in-range-color: #dfe3f2;
	--litepicker-is-start-color-bg: var(--wc-color-secondary, #263068);
	--litepicker-is-start-color: #fff;
	--litepicker-is-end-color-bg: var(--wc-color-secondary, #263068);
	--litepicker-is-end-color: #fff;
	--litepicker-is-locked-color: #c4c4c4;
	--litepicker-button-prev-month-color: var(--wc-color-secondary, #263068);
	--litepicker-button-next-month-color: var(--wc-color-secondary, #263068);
	--litepicker-button-prev-month-color-hover: var(--wc-color-primary, #bd201c);
	--litepicker-button-next-month-color-hover: var(--wc-color-primary, #bd201c);
	font-family: var(--wc-font-body, 'Work Sans', sans-serif);
	font-size: 13px;
	z-index: 9999;
}

body .litepicker .container__main {
	margin-top: 6px;
	overflow: hidden;
	border: 1px solid var(--wc-color-secondary, #263068);
	border-radius: 6px;
	box-shadow: 0 10px 30px rgba(20, 25, 60, 0.25), 0 2px 6px rgba(20, 25, 60, 0.12);
}

/* knoppenbalk (Annuleren/Toepassen) aansluitend onder de kalender */
body .litepicker .container__footer {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	margin: -1px 0 0;
	padding: 8px 10px;
	background: #f0f2f8;
	border: 1px solid var(--wc-color-secondary, #263068);
	border-top: 1px solid #dfe3f2;
	border-radius: 0 0 6px 6px;
	box-shadow: 0 10px 30px rgba(20, 25, 60, 0.25);
}

body .litepicker .container__main:has(+ .container__footer) {
	border-bottom: 0;
	border-radius: 6px 6px 0 0;
}

body .litepicker .container__footer .preview-date-range {
	font-size: 12px;
	color: var(--wc-color-text-muted, #6b6b6b);
}

body .litepicker .container__footer .button-apply,
body .litepicker .container__footer .button-cancel {
	height: 30px;
	padding: 0 14px;
	font-family: var(--wc-font-body, 'Work Sans', sans-serif);
	font-size: 13px;
	font-weight: 700;
	border: 0;
	border-radius: var(--wc-radius, 4px);
	cursor: pointer;
}

body .litepicker .container__footer .button-apply {
	color: #fff;
	background: var(--wc-color-secondary, #263068);
}

body .litepicker .container__footer .button-apply:hover {
	background: var(--wc-color-secondary-hover, #1c2450);
}

body .litepicker .container__footer .button-apply:disabled {
	opacity: 0.45;
}

body .litepicker .container__footer .button-cancel {
	color: var(--wc-color-text, #222);
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--wc-color-border, #dcdcdc);
}

body .litepicker .container__months {
	box-shadow: none;
	border-radius: 0;
}

body .litepicker .container__months .month-item {
	padding: 0 5px 8px; /* standaard Litepicker-breedte aanhouden, anders vallen de maanden onder elkaar */
}

/* gekleurde kopbalk per maand */
body .litepicker .container__months .month-item-header {
	margin: 0 -5px 4px;
	padding: 8px 5px;
	background: #f0f2f8;
	border-bottom: 1px solid #dfe3f2;
	font-family: var(--wc-font-heading, 'Chivo', sans-serif);
	font-size: 14px;
}

body .litepicker .container__months .month-item-header div > strong,
body .litepicker .container__months .month-item-header .month-item-name,
body .litepicker .container__months .month-item-header .month-item-year {
	color: var(--wc-color-secondary, #263068);
	font-weight: 700;
}

body .litepicker .container__months .month-item-weekdays-row > div {
	padding: 4px 0;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
}

body .litepicker .container__days .day-item {
	padding: 7px 0;
	border-radius: 4px;
	font-size: 13px;
}

body .litepicker .container__days .day-item:hover:not(.is-locked) {
	box-shadow: inset 0 0 0 1px var(--wc-color-secondary, #263068);
}

body .litepicker .container__days .day-item.is-in-range {
	border-radius: 0;
}

body .litepicker .container__days .day-item.is-start-date {
	border-radius: 4px 0 0 4px;
}

body .litepicker .container__days .day-item.is-end-date {
	border-radius: 0 4px 4px 0;
}

body .litepicker .container__days .day-item.is-start-date.is-end-date {
	border-radius: 4px;
}

body .litepicker .container__days .day-item.is-today {
	font-weight: 700;
}

/* niet-beschikbare dagen: grijs en doorgestreept */
body .litepicker .container__days .day-item.is-locked {
	color: #c4c4c4 !important;
	text-decoration: line-through;
	cursor: not-allowed;
}

body .litepicker .container__tooltip {
	font-size: 12px;
}

/* het invoerveld met de datums op de productpagina iets nadrukkelijker */
.wcrp-rental-products-rental-dates-parent input:focus {
	border-color: var(--wc-color-secondary, #263068) !important;
	box-shadow: 0 0 0 2px rgba(38, 48, 104, 0.15);
	outline: none;
}

/* altijd precies 7 kolommen, ongeacht lettertype of box-sizing van het thema */
body .litepicker:not(.show-week-numbers) .container__months .month-item {
	box-sizing: content-box;
	width: var(--litepicker-month-width);
}

body .litepicker:not(.show-week-numbers) .container__days,
body .litepicker:not(.show-week-numbers) .month-item-weekdays-row {
	box-sizing: border-box;
	width: 100%;
}

body .litepicker:not(.show-week-numbers) .container__days > div,
body .litepicker:not(.show-week-numbers) .container__days > a,
body .litepicker:not(.show-week-numbers) .month-item-weekdays-row > div {
	box-sizing: border-box;
	flex: 0 0 calc(100% / 7);
	width: calc(100% / 7);
	max-width: calc(100% / 7);
}

@media (max-width: 600px) {
	body .litepicker {
		--litepicker-day-width: 38px;
		--litepicker-month-width: calc(var(--litepicker-day-width) * 7);
	}
}

/* in de winkelwagen staat bij een geblokkeerde dag welk product de oorzaak is */
.zvs-huurperiode .litepicker .container__days .day-item.is-locked,
body .litepicker.zvs-hp-litepicker .container__days .day-item.is-locked {
	cursor: help;
}