/**
 * BK-huisstijl voor de Flatpickr-kalender (laadt ná themes/dark.css).
 * Donkere kalender (BK-zwart) met gouden accenten, hoofdletter-weekdagen en
 * huisstijl-fonts — passend bij het donkere afspraakformulier.
 */
.flatpickr-calendar {
	background: var(--bk-dark);
	border: 1px solid rgba(255, 255, 255, .10);
	border-radius: var(--bk-radius);
	box-shadow: 0 14px 44px rgba(0, 0, 0, .55);
	font-family: var(--bk-font-body);
}

/* Pijltje dat de kalender met het invoerveld verbindt → zelfde donkere kleur */
.flatpickr-calendar.arrowTop::before { border-bottom-color: rgba(255, 255, 255, .10); }
.flatpickr-calendar.arrowTop::after { border-bottom-color: var(--bk-dark); }
.flatpickr-calendar.arrowBottom::before { border-top-color: rgba(255, 255, 255, .10); }
.flatpickr-calendar.arrowBottom::after { border-top-color: var(--bk-dark); }

/* Maand-kop én weekdag-balk óók BK-zwart (i.p.v. het standaard blauw-grijs #3f4458) */
.flatpickr-months .flatpickr-month { background: transparent; }
span.flatpickr-weekday { background: transparent; }
.flatpickr-current-month .flatpickr-monthDropdown-months { background: var(--bk-dark); }
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { background-color: var(--bk-dark); }

/* Maand/jaar-kop in het kop-lettertype */
.flatpickr-months .flatpickr-month,
.flatpickr-current-month,
.flatpickr-current-month input.cur-year,
.flatpickr-monthDropdown-months {
	color: var(--bk-white);
	font-family: var(--bk-font-heading);
	font-weight: 600;
}

/* Weekdag-koppen: HOOFDLETTERS, gedempt wit */
.flatpickr-weekday {
	color: rgba(255, 255, 255, .70);
	text-transform: uppercase;
	letter-spacing: .05em;
	font-weight: 600;
}

/* Dagen */
.flatpickr-day { color: var(--bk-white); border-radius: var(--bk-radius); }
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { color: rgba(255, 255, 255, .26); }
.flatpickr-day:hover,
.flatpickr-day:focus { background: rgba(255, 255, 255, .09); border-color: transparent; }

/* Vandaag: gouden rand */
.flatpickr-day.today { border-color: var(--bk-gold); }
.flatpickr-day.today:hover,
.flatpickr-day.today:focus { background: var(--bk-gold); border-color: var(--bk-gold); color: #fff; }

/* Geselecteerde dag: goud gevuld */
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
	background: var(--bk-gold);
	border-color: var(--bk-gold);
	color: #fff;
	box-shadow: none;
}

/* Maand-pijlen: wit, goud bij hover */
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg { fill: var(--bk-white); }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: var(--bk-gold); }

/* Jaar-stepper pijltjes */
.numInputWrapper span.arrowUp::after { border-bottom-color: rgba(255, 255, 255, .6); }
.numInputWrapper span.arrowDown::after { border-top-color: rgba(255, 255, 255, .6); }
.numInputWrapper:hover { background: rgba(255, 255, 255, .06); }

/* Tijdkiezer (indien gebruikt) */
.flatpickr-time input,
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm { color: var(--bk-white); }
.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover { background: rgba(255, 255, 255, .06); }

/* --------------------------------------------------------------------------
   Kalender-icoon in het datumveld (verdween toen type=date → text werd).
   -------------------------------------------------------------------------- */
.bk-afspraak__form .bk-field--date input {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='.6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16.5' rx='2'/%3E%3Cpath d='M3 9.5h18M8 2.5v4M16 2.5v4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 18px 18px;
	padding-right: 46px;
}