/*
 * Gravity Forms - Datepicker fix
 * Opmaak voor de nieuwe datepicker van Gravity Forms 3.x
 * (.gform-datepicker-toggle / .gform-datepicker-calendar).
 * Werkt ook als het thema de CSS van Gravity Forms niet laadt of het datumveld afknipt (overflow: hidden).
 * Alle regels richten zich op de nieuwe markup; de oude jQuery UI-datepicker wordt niet geraakt.
 */

/* Veld */
.gfield--type-date,
.ginput_container_date {
	overflow: visible !important;
}

.ginput_container_date {
	position: relative !important;
}

/*
 * --wbz-dp-top / --wbz-dp-h: positie en hoogte van het invoerveld (gezet door de JS),
 * zodat icoon en kalender goed staan, ook als het thema een marge onder het veld zet.
 * --wbz-dp-pad: de linker-opvulling van het veld, zodat het icoon rechts evenveel ruimte heeft.
 */
.ginput_container_date input.gform-datepicker {
	width: 100% !important;
	max-width: 100%;
	margin-right: 0 !important;
	padding-right: calc(var(--wbz-dp-pad, 14px) + 26px) !important;
	box-sizing: border-box;
}

/* Kalender-knop in het veld */
.ginput_container_date .gform-datepicker-toggle {
	position: absolute !important;
	top: var(--wbz-dp-top, 0px) !important;
	right: 0 !important;
	bottom: auto !important;
	left: auto !important;
	height: var(--wbz-dp-h, 100%) !important;
	width: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 var(--wbz-dp-pad, 14px) 0 8px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	display: flex !important;
	align-items: center;
	justify-content: flex-end;
	cursor: pointer;
	color: inherit !important;
	line-height: 1;
	z-index: 2;
	transform: none !important;
	transition: none !important; /* thema-transities laten het icoon anders 'schuiven' na het laden */
}

.ginput_container_date .gform-datepicker-toggle img {
	width: 18px !important;
	height: 18px !important;
	margin: 0 !important;
}

/* Standaard-icoon (icon font of dashicon) vervangen door een eigen icoon */
.ginput_container_date .gform-datepicker-toggle .gform-calendar-icon {
	display: block !important;
	width: 18px !important;
	height: 18px !important;
	font-size: 0 !important;
	opacity: .6;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.ginput_container_date .gform-datepicker-toggle .gform-calendar-icon::before,
.ginput_container_date .gform-datepicker-toggle .gform-calendar-icon::after {
	content: none !important;
	display: none !important;
}

.ginput_container_date .gform-datepicker-toggle:hover .gform-calendar-icon {
	opacity: 1;
}

/* Knop pas tonen als de JS het veld heeft opgemeten, zodat het icoon na het laden niet verspringt */
.ginput_container_date:not(.wbz-dp-ready) .gform-datepicker-toggle {
	visibility: hidden !important;
}

/* Open kalender boven de rest van de pagina (class wordt door de JS gezet) */
.wbz-dp-open {
	z-index: 2147483000 !important;
}

/* Kalender-popup */
.gform-datepicker-calendar {
	position: absolute !important;
	top: calc(var(--wbz-dp-top, 0px) + var(--wbz-dp-h, 100%)) !important;
	left: 0;
	z-index: 9999 !important;
	margin-top: 6px !important;
	padding: 12px !important;
	width: auto !important;
	max-width: calc(100vw - 32px);
	background: #fff !important;
	color: #2f4054 !important;
	border: 1px solid rgba(0, 0, 0, .1) !important;
	border-radius: 8px !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .15) !important;
	font-size: 14px !important;
	font-weight: 400;
	line-height: 1.2 !important;
	text-align: left;
}

.gform-datepicker-calendar table.calendar {
	border-collapse: collapse !important;
	border: 0 !important;
	margin: 0 !important;
	width: auto !important;
	background: none !important;
	table-layout: auto !important;
}

.gform-datepicker-calendar table.calendar tr {
	background: none !important;
	border: 0 !important;
}

.gform-datepicker-calendar table.calendar td,
.gform-datepicker-calendar table.calendar th {
	display: table-cell !important; /* sommige thema's maken cellen inline-block of flex */
	float: none !important;
	height: auto !important;
	padding: 2px !important;
	border: 0 !important;
	background: none !important;
	text-align: center !important;
	vertical-align: middle !important;
	font-size: 14px !important;
	font-weight: 400;
	line-height: 1.2 !important;
	color: inherit;
}

.gform-datepicker-calendar table.calendar th span,
.gform-datepicker-calendar table.calendar td.day span,
.gform-datepicker-calendar table.calendar td.empty span {
	box-sizing: border-box !important;
	padding: 0 !important;
}

.gform-datepicker-calendar table.calendar th span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 28px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	opacity: .7;
}

.gform-datepicker-calendar table.calendar td.day span,
.gform-datepicker-calendar table.calendar td.empty span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid transparent;
	border-radius: 50%;
	transition: background-color .2s, border-color .2s;
}

.gform-datepicker-calendar table.calendar td.day span {
	cursor: pointer;
}

.gform-datepicker-calendar table.calendar td.day span:hover,
.gform-datepicker-calendar table.calendar td.day span:focus {
	background: rgba(0, 0, 0, .06);
	outline: 0;
}

.gform-datepicker-calendar table.calendar td.dayToday span {
	border-color: rgba(0, 0, 0, .35);
}

.gform-datepicker-calendar table.calendar td.selected span,
.gform-datepicker-calendar table.calendar td.dayMarked span {
	background: #2f4054 !important;
	color: #fff !important;
	border-color: #2f4054;
}

.gform-datepicker-calendar table.calendar td.empty span {
	opacity: .35;
}

.gform-datepicker-calendar table.calendar td.disabled span {
	opacity: .3;
	cursor: not-allowed;
	background: none !important;
}

/* Jaar- en maandkeuze */
.gform-datepicker-calendar tr.yearSelector td,
.gform-datepicker-calendar tr.monthSelector td {
	padding: 0 2px 6px !important;
	vertical-align: middle !important;
}

/* Pijltjes: eigen chevrons, gecentreerd en even hoog als de keuzelijst */
/* Breedte volgt de dagkolom eronder, zodat de pijltjes links en rechts gelijk staan */
.gform-datepicker-calendar td.nav.btn {
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	height: auto !important;
	padding: 0 2px 6px !important;
	background: none !important;
}

.gform-datepicker-calendar td.nav::before,
.gform-datepicker-calendar td.nav::after,
.gform-datepicker-calendar td.nav.btn span::before,
.gform-datepicker-calendar td.nav.btn span::after {
	content: none !important;
	display: none !important;
}

.gform-datepicker-calendar td.nav.btn span {
	display: block !important;
	position: static !important;
	width: 34px !important;
	height: 34px !important;
	margin: 0 auto !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	font-size: 0 !important;
	line-height: 0 !important;
	color: transparent !important;
	cursor: pointer;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f4054' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") center / 16px 16px no-repeat !important;
	transition: background-color .2s;
}

.gform-datepicker-calendar td.nav.btn.next span {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f4054' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") !important;
}

.gform-datepicker-calendar td.nav.btn span:hover {
	background-color: rgba(0, 0, 0, .06) !important;
}

.gform-datepicker-calendar span.nav.current.btn {
	display: none !important;
}

.gform-datepicker-calendar select.nav.current {
	display: block !important;
	width: 100% !important;
	height: 34px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 8px !important;
	border: 1px solid rgba(0, 0, 0, .2) !important;
	border-radius: 4px !important;
	background-color: #fff !important;
	color: #2f4054 !important;
	font-size: 14px !important;
	line-height: 1 !important;
	box-shadow: none !important;
}

.gform-datepicker-calendar .monthMessage {
	margin: 6px 0 0 !important;
	padding: 0 !important;
	font-size: 11px !important;
	opacity: .6;
	text-align: center;
}

.gform-datepicker-calendar .monthMessage p {
	margin: 0 !important;
	padding: 0 !important;
	font-size: inherit !important;
}

/* In een popup/modal die de kalender anders zou afknippen: in de pagina plaatsen (class via JS) */
.gform-datepicker-calendar.wbz-dp-inline {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	box-shadow: none !important;
}

/* Smal veld (bijv. in een popup): compactere kalender (class via JS) */
.gform-datepicker-calendar.wbz-dp-compact {
	padding: 6px !important;
}

.gform-datepicker-calendar.wbz-dp-compact table.calendar td,
.gform-datepicker-calendar.wbz-dp-compact table.calendar th {
	padding: 1px !important;
}

.gform-datepicker-calendar.wbz-dp-compact tr.yearSelector td,
.gform-datepicker-calendar.wbz-dp-compact tr.monthSelector td {
	padding: 0 1px 4px !important;
}

.gform-datepicker-calendar.wbz-dp-compact table.calendar th span,
.gform-datepicker-calendar.wbz-dp-compact table.calendar td.day span,
.gform-datepicker-calendar.wbz-dp-compact table.calendar td.empty span {
	width: 30px !important;
}

.gform-datepicker-calendar.wbz-dp-compact table.calendar td.day span,
.gform-datepicker-calendar.wbz-dp-compact table.calendar td.empty span {
	height: 30px !important;
}

.gform-datepicker-calendar.wbz-dp-compact td.nav.btn span {
	width: 30px !important;
	height: 30px !important;
}