/* ✅ JetFormBuilder specifieke aanpassingen */
.reservering-toevoegen-form .jet-form-builder-message {
	display: none !important;
}

.reservering-toevoegen-form .jet-form-builder__label {
	display: none !important;
}

/* ✅ Wrapper rondom individuele inputvelden */
.flatpickr-wrapper {
	position: relative;
	display: inline-block;
}

.flatpickr-wrapper.flatpickr-datum::after {
	content: "📅";
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	opacity: 0.6;
	font-size: 16px;
}

.flatpickr-wrapper.flatpickr-tijd::after {
	content: "🕑";
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	opacity: 0.6;
	font-size: 16px;
}


/* ✅ Inputs krijgen ruimte voor het icoon */
input[name="start_datum"],
input[name="eind_datum"],
input[name="start_tijd"],
input[name="eind_tijd"] {
	padding-right: 2em;
	line-height: 1.4;
	min-height: 42px; /* Pas aan indien nodig */
	width: 100%;
	box-sizing: border-box;
}

/* ✅ Flexbox voor combinatie van datum + tijd */
.reservering-datumtijd-wrapper {
	display: flex;
	gap: 20px;
	margin-bottom: 10px;
}

.reservering-datumtijd-wrapper .flatpickr-datum {
	flex: 2;
}
.reservering-datumtijd-wrapper .flatpickr-tijd {
	flex: 1;
}

/* Pop up weergave */
/* UL lijst */
.popup-reserveringen {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* LI item */
.popup-reservering-item {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 10px;
	background-color: var( --e-global-color-b7abb6e );
	box-shadow: 2px 2px 7px 0px rgba(242.00000000000006, 159.00000000000006, 45.99999999999999, 0.52);
	margin-bottom: 20px;
}

/* Afbeelding links */
.popup-reservering-afbeelding img {
	max-width: 80px !important;
	height: 80px !important;
	border-radius: 10px !important;
	object-fit: cover;
}

/* Inhoud rechts */
.popup-reservering-inhoud {
	flex: 1;
}

/* Titel */
.popup-reservering-titel {
	font-family: "Bio Sans", sans-serif;
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 5px;
}

/* Periode */
.popup-reservering-periode {
	font-family: "proxima-nova", Sans-serif;
	font-size: 14px;
	margin-bottom: 8px;
}
.periode-datum {
	text-decoration: underline;
}

/* Upsells */
.popup-reservering-upsells {
	list-style: none;
	padding-left: 0px;
	margin: 0;
}
.popup-reservering-upsells li {
	font-family: "proxima-nova", Sans-serif;
	position: relative;
	font-size: 12px;
}
/* END Pop up weergave */


/* Reserveringslijst weergave */
.reserveringslijst {
	padding: 0px;
}

.reserveringslijst-item {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 20px;
	padding: 20px;
	background-color: var( --e-global-color-b7abb6e );
	box-shadow: 2px 2px 7px 0px rgba(242.00000000000006, 159.00000000000006, 45.99999999999999, 0.52);
}

a.verwijder-reservering {
	color: var( --e-global-color-text );
	font-size: 40px !important;
	text-decoration: none !important;
	font-weight: bold;
}

.verwijder-reservering:hover {
	color: var( --e-global-color-accent );
	text-decoration: none;
}


.reservering-afbeelding img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
}


.reservering-inhoud {
  flex: 1;
}

.reservering-titel {
  font-weight: bold;
}

.reservering-upsells {
  list-style: none;
  padding: 0;
  margin-bottom: 5px;
}

.reservering-upsells li::before {
  content: "+ ";
  color: #888;
}

.reservering-periode input {
  display: inline-block;
  margin: 2px 5px 8px 0;
  width: 120px;
}


.reserveringslijst-update-wrapper {
	display: flex;
	justify-content: flex-end;
	margin-top: 20px;
	gap: 20px;
}


#update-reserveringslijst:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

#update-reserveringslijst.actief {
  opacity: 1;
}

#reserverings-container.loading {
  position: relative;
  opacity: 0.4;
  pointer-events: none;
}

#reserverings-container.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border: 3px solid #ccc;
  border-top: 3px solid #333;
  border-radius: 50%;
  animation: spinner 0.7s linear infinite;
  z-index: 10;
}

@keyframes spinner {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


@media only screen and (max-width: 767px) {
	a.verwijder-reservering {
		color: var( --e-global-color-text );
		font-size: 30px !important;
		text-decoration: none !important;
		font-weight: bold;
	}
	.reservering-afbeelding img {
		display: none!important;
	}
	.reserveringslijst-item {
		display: flex;
		align-items: center;
		gap: 5px;
		margin-bottom: 20px;
		padding: 8px;
		background-color: var( --e-global-color-b7abb6e );
		box-shadow: 2px 2px 7px 0px rgba(242.00000000000006, 159.00000000000006, 45.99999999999999, 0.52);
	}
	.reservering-datumtijd-wrapper {
		display: flex;
		gap: 10px;
		margin-bottom: 10px;
	}
}

/* END Reserveringslijst weergave */

/* Bevestiging weergave */
.reserveringslijst-bevestiging {
	list-style: none;
	margin: 0;
	padding: 0;
}

.reservering-bevestiging-item {
	display: flex;
	flex-direction: column;
	margin-bottom: 20px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.reservering-titel {
	font-family: "Bio Sans", sans-serif;
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 5px;
}

.reservering-periode {
	font-family: "proxima-nova", Sans-serif;
	font-size: 14px;
}
.periode-datum {
	text-decoration: underline;
}

.reservering-upsell {
	list-style: none;
	padding-left: 0px;
	margin-bottom: 10px;
}
.reservering-upsells li {
	font-family: "proxima-nova", Sans-serif;
	position: relative;
	font-size: 12px;
}
/* END Bevestiging weergave */

/* Formulier weergave */
.form-margin {
	margin-top: 50px;
}
/* END Formulier weergave */



.reservering-teller {
    display: inline-flex;
	justify-content: center!important;
	align-items: center!important;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: var(--e-global-color-accent);
	color: var(--e-global-color-text);
	font-weight: 700;
	font-family: "proxima-nova", Sans-serif;
	font-size: 12px;
	text-align: center;
	margin-left: 3px;
}