/* =========================================================
   Diamond Cars - Theme fuer den flatpickr-Zeitraumkalender
   =========================================================
   Wird sowohl vom Reservierungstool als auch vom Buchungsformular der
   Hauptseite geladen (dort per js/dc-daterange.js bzw. functions.js
   nachgeladen). Setzt auf flatpickr.min.css auf und muss danach eingebunden
   werden.

   Der Kalender wird bewusst als zentriertes Overlay dargestellt - so wie
   vorher der dateDropper mit expandedOnly/overlay. Damit gibt es keine
   Positionierungsprobleme, wenn das Formular auf der Hauptseite in das
   Buchungs-Modal verschoben wird.
   ========================================================= */

:root {
	--dc-cal-gold: #c8b274;
	--dc-cal-gold-soft: rgba(200, 178, 116, .16);
	--dc-cal-gold-edge: rgba(200, 178, 116, .45);
	--dc-cal-black: #191919;
	--dc-cal-muted: #8a8a8a;
	--dc-cal-divider: #ececec;
	/* Kantenlaenge einer Tageszelle - daraus wird die Breite der Monatsspalte
	   berechnet, damit die Zellen luecken- und nahtlos aneinanderstossen. */
	--dc-cal-day: 40px;
}

/* Unsichtbares Ankerfeld, an dem der Kalender haengt. */
.dc-datepicker-anchor {
	position: fixed;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

/* Abdunkelnder Hintergrund */
.dc-datepicker-backdrop {
	position: fixed;
	inset: 0;
	z-index: 2147483646;
	background: rgba(0, 0, 0, .55);
	opacity: 0;
	visibility: hidden;
	transition: opacity .18s ease, visibility .18s ease;
}
.dc-datepicker-backdrop.is-visible {
	opacity: 1;
	visibility: visible;
}

body.dc-datepicker-open {
	overflow: hidden;
}

/* =========================================================
   Container
   ========================================================= */
.flatpickr-calendar.dc-datepicker {
	position: fixed !important;
	top: 50% !important;
	left: 50% !important;
	right: auto !important;
	bottom: auto !important;
	z-index: 2147483647;
	margin: 0 !important;
	padding: 10px 10px 12px;
	max-width: calc(100vw - 24px);
	max-height: calc(100vh - 24px);
	overflow: auto;
	width: auto !important;
	transform: translate(-50%, -50%);
	border: 0;
	border-top: 3px solid var(--dc-cal-gold);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 26px 70px rgba(0, 0, 0, .32);
	font-family: inherit;
	color: var(--dc-cal-black);
}

/* flatpickr zeichnet standardmaessig ein kleines Dreieck zum Eingabefeld.
   Im zentrierten Overlay ergibt das keinen Sinn. */
.flatpickr-calendar.dc-datepicker::before,
.flatpickr-calendar.dc-datepicker::after {
	display: none !important;
}

.flatpickr-calendar.dc-datepicker.animate.open {
	animation: none;
}

/* =========================================================
   Kopfbereich: Monat, Jahr, Pfeile
   ========================================================= */
.dc-datepicker .flatpickr-months {
	align-items: center;
	padding: 2px 0 10px;
}
.dc-datepicker .flatpickr-month {
	height: 38px;
	color: var(--dc-cal-black);
	fill: var(--dc-cal-black);
}
.dc-datepicker .flatpickr-current-month {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 38px;
	padding: 0;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .01em;
}
.dc-datepicker .flatpickr-current-month .cur-month,
.dc-datepicker .flatpickr-current-month input.cur-year {
	font-size: 15px;
	font-weight: 700;
	color: var(--dc-cal-black);
}
.dc-datepicker .flatpickr-current-month input.cur-year {
	padding: 0;
}
/* Das Zahlen-Spinnfeld am Jahr wird nicht gebraucht. */
.dc-datepicker .numInputWrapper span {
	display: none !important;
}

.dc-datepicker .flatpickr-prev-month,
.dc-datepicker .flatpickr-next-month {
	top: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border-radius: 50%;
	color: var(--dc-cal-black);
	fill: var(--dc-cal-black);
	transition: background .15s ease, color .15s ease;
}
.dc-datepicker .flatpickr-prev-month:hover,
.dc-datepicker .flatpickr-next-month:hover {
	background: var(--dc-cal-gold-soft);
	color: var(--dc-cal-black);
}
.dc-datepicker .flatpickr-prev-month:hover svg,
.dc-datepicker .flatpickr-next-month:hover svg {
	fill: var(--dc-cal-black);
}
.dc-datepicker .flatpickr-prev-month svg,
.dc-datepicker .flatpickr-next-month svg {
	width: 13px;
	height: 13px;
}
.dc-datepicker .flatpickr-prev-month.flatpickr-disabled,
.dc-datepicker .flatpickr-next-month.flatpickr-disabled {
	opacity: .25;
}

/* =========================================================
   Wochentage
   ========================================================= */
.dc-datepicker .flatpickr-weekdays {
	height: 26px;
	background: transparent;
	border-bottom: 1px solid var(--dc-cal-divider);
}
.dc-datepicker span.flatpickr-weekday {
	background: transparent;
	color: var(--dc-cal-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* =========================================================
   Tage
   =========================================================
   flatpickr rechnet die Breite des Kalenders aus seiner eigenen Zellgroesse
   (39 px) aus und schreibt sie fest ins Markup. Weil die Zellen hier groesser
   sind, werden Kalender, Tagesraster und Monatsspalte auf "automatisch" bzw.
   auf 7 Zellenbreiten gesetzt - sonst wird der zweite Monat abgeschnitten.
   ========================================================= */
.dc-datepicker .flatpickr-rContainer {
	width: auto;
}
.dc-datepicker .flatpickr-days {
	width: auto !important;
	padding-top: 6px;
}
.dc-datepicker .dayContainer,
.dc-datepicker .flatpickr-weekdaycontainer {
	width: calc(var(--dc-cal-day) * 7) !important;
	min-width: calc(var(--dc-cal-day) * 7) !important;
	max-width: calc(var(--dc-cal-day) * 7) !important;
	padding: 0;
}
.dc-datepicker .flatpickr-day {
	height: var(--dc-cal-day);
	line-height: var(--dc-cal-day);
	max-width: var(--dc-cal-day);
	flex-basis: var(--dc-cal-day);
	border: 0;
	border-radius: 9px;
	color: var(--dc-cal-black);
	font-size: 14px;
	font-weight: 500;
}
.dc-datepicker .flatpickr-day:hover {
	background: var(--dc-cal-gold-soft);
	color: var(--dc-cal-black);
}

/* Heute */
.dc-datepicker .flatpickr-day.today {
	box-shadow: inset 0 0 0 1px var(--dc-cal-gold-edge);
	font-weight: 700;
}
.dc-datepicker .flatpickr-day.today:hover {
	background: var(--dc-cal-gold-soft);
}

/* Zeitraum-Enden */
.dc-datepicker .flatpickr-day.selected,
.dc-datepicker .flatpickr-day.startRange,
.dc-datepicker .flatpickr-day.endRange,
.dc-datepicker .flatpickr-day.selected:hover,
.dc-datepicker .flatpickr-day.startRange:hover,
.dc-datepicker .flatpickr-day.endRange:hover {
	background: var(--dc-cal-gold);
	border-color: var(--dc-cal-gold);
	box-shadow: none !important;
	color: #fff;
	font-weight: 700;
}
.dc-datepicker .flatpickr-day.startRange {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
.dc-datepicker .flatpickr-day.endRange {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}
.dc-datepicker .flatpickr-day.startRange.endRange {
	border-radius: 9px;
}

/* Tage dazwischen.
   flatpickr ueberbrueckt die Luecken zwischen den Zellen sonst mit einem
   seitlichen Schatten. Den braucht es hier nicht - die Zellen stossen durch
   die feste Spaltenbreite nahtlos aneinander, und der Schatten wuerde sich an
   den Uebergaengen doppeln und dort dunkle Streifen erzeugen. */
.dc-datepicker .flatpickr-day.inRange,
.dc-datepicker .flatpickr-day.inRange:hover {
	border-radius: 0;
	background: var(--dc-cal-gold-soft);
	color: var(--dc-cal-black);
	box-shadow: none;
}

/* Nicht waehlbar bzw. Nachbarmonate */
.dc-datepicker .flatpickr-day.flatpickr-disabled,
.dc-datepicker .flatpickr-day.flatpickr-disabled:hover,
.dc-datepicker .flatpickr-day.prevMonthDay,
.dc-datepicker .flatpickr-day.nextMonthDay {
	background: transparent;
	color: #cfcfcf;
	box-shadow: none;
	cursor: default;
}
.dc-datepicker .flatpickr-day.prevMonthDay.inRange,
.dc-datepicker .flatpickr-day.nextMonthDay.inRange {
	background: var(--dc-cal-gold-soft);
	color: #b9b9b9;
}

/* Zwei Monate nebeneinander: Abstand plus feine Trennlinie. */
.dc-datepicker.multiMonth .flatpickr-days .dayContainer + .dayContainer {
	margin-left: 16px;
	box-shadow: -8px 0 0 -7px var(--dc-cal-divider);
}

/* =========================================================
   Schmale Bildschirme
   ========================================================= */
@media only screen and (max-width: 480px) {
	.flatpickr-calendar.dc-datepicker {
		padding: 8px 6px 10px;
		border-radius: 12px;
	}
	.flatpickr-calendar.dc-datepicker {
		--dc-cal-day: 42px;
	}
	.dc-datepicker .flatpickr-day {
		font-size: 15px;
	}
	.dc-datepicker .flatpickr-current-month,
	.dc-datepicker .flatpickr-current-month .cur-month,
	.dc-datepicker .flatpickr-current-month input.cur-year {
		font-size: 16px;
	}
}