/* --- 1. GRUND-LAYOUT & ABSTÄNDE --- */

#CalenderLegendeTop{
	margin-top: -10px;
	margin-left: 20px;
}

.property-info span {
    margin-right: 0;
}

.datepicker__month-row {
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 4px !important;
}

.datepicker__month-day {
    margin: 2px !important;
    border: 1px solid #fff !important;
    transition: all 0.2s ease;
    box-sizing: border-box;
    position: relative; /* Wichtig für Z-Index */
}

/* Fix für "Extra"-Inhalte */
.datepicker__month-day--with-extra span {
    display: block;
    height: 2px;
	margin: 0;
	pointer-events: none;
}

.datepicker__month-day--with-extra span.reservation-full,
.datepicker__month-day--with-extra span.reservation-start,
.datepicker__month-day--with-extra span.reservation-end {
    background-color: rgb(255, 193, 7);
}

.datepicker__month-day--with-extra span.offer-full {
    background-color: rgb(203,51,95);
}


/* --- 2. SCHRAFFUR-LOGIK (BELEGT) --- */
.datepicker__month-day--disabled,
.datepicker__month-day--no-checkin,
.datepicker__month-day--no-checkout,
.datepicker__month-day--out-of-range {
    --schraffur: repeating-linear-gradient(
        45deg,
        #f5f5f5,
        #f5f5f5 12px,
        #e8e8e8 12px,
        #e8e8e8 24px
    );
}

.datepicker__month-day--disabled,
.datepicker__month-day--out-of-range {
    cursor: not-allowed;
    background: var(--schraffur) !important;
    color: #bbb !important;
    border-color: #fff !important;
    opacity: 0.8;
}

/* Anreise (Links frei, Rechts schraffiert) */
.datepicker__month-day--no-checkin {
    background: linear-gradient(to left, transparent 50%, #ffffff 50%), var(--schraffur) !important;
    color: #444 !important;
}

/* Abreise (Links schraffiert, Rechts frei) */
.datepicker__month-day--no-checkout {
    background: linear-gradient(to right, transparent 50%, #ffffff 50%), var(--schraffur) !important;
    color: #444 !important;
}

/* --- 3. SELEKTION (BLAU ENTFERNEN & GRÜN SETZEN) --- */

/* ALLE ausgewählten Tage (Range) - BLAU KILLEN */
.datepicker__month-day--selected,
.datepicker__month-day--in-range,
.datepicker__month-day--today.datepicker__month-day--selected {
    background-color: #c8e6c9 !important;
    background-image: none !important; /* Entfernt das Standard-Blau */
    color: #2e7d32 !important;
    border-color: #fff !important;
}

/* START- UND ENDDATUM (Dunkelgrün) - Höchste Priorität */
.datepicker__month-day--first-day-selected,
.datepicker__month-day--last-day-selected,
.datepicker__month-day--selected.datepicker__month-day--first-day-selected,
.datepicker__month-day--selected.datepicker__month-day--last-day-selected {
    background-color: #1b5e20 !important;
    background-image: none !important;
    color: #ffffff !important;
    z-index: 20 !important;
    opacity: 1 !important;
}

/* --- 4. HOVER & INTERAKTION --- */
.datepicker__month-day--hovering,
.datepicker__month-day--in-selection,
.datepicker__month-day--selected.datepicker__month-day--hovering {
    background-color: #c8e6c9 !important;
    background-image: none !important;
    color: #2e7d32 !important;
}

.datepicker__month-day--selected:hover,
.datepicker__month-day--in-range:hover {
    background-color: #1b5e20 !important;
    background-image: none !important;
}

/* --- Pfeil LINKS (Zurück) --- */
.datepicker__month-button--prev {
    background-image: none !important;
}

.datepicker__month-button--prev:after {
    background-image: none !important;
    content: "\f0a8" !important;      /* FontAwesome arrow-left */
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-size: 20px;
    color: #3B71CA;
    display: inline-block;
}

/* --- Pfeil RECHTS (Vorwärts) --- */
.datepicker__month-button--next {
    background-image: none !important;
}

.datepicker__month-button--next:after {
    background-image: none !important;
    content: "\f0a9" !important;      /* FontAwesome arrow-right */
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-size: 20px;
    color: #3B71CA;
    display: inline-block;
}

/* Optional: Hover-Effekt für die Pfeile */
.datepicker__month-button--prev:hover:after,
.datepicker__month-button--next:hover:after {
    color: #1b5e20;
}

/* Verhindert Hover auf gesperrten Tagen */
.datepicker__month-day--disabled:hover {
    background: var(--schraffur) !important;
}

/* Pseudo-Elemente entfernen, die oft für die blauen Balken/Schatten verantwortlich sind */
.datepicker__month-day--selected::before,
.datepicker__month-day--selected::after,
.datepicker__month-day--in-range::before,
.datepicker__month-day--in-range::after,
.datepicker__month-day--first-day-selected::before,
.datepicker__month-day--last-day-selected::after {
    display: none !important;
    background-image: none !important;
    content: none !important;
}

/* Erhöht den z-index für das Info-Fenster (Nächte-Anzeige) */
.datepicker__tooltip {
    z-index: 9999 !important;
    background-color: #333 !important;
    color: #fff !important;
    padding: 5px 10px !important;
}

.datepicker__month-day--disabled:after {
	content: '' !important;
}

.datepicker__inner th {
	text-align: center !important;
}

.datepicker.datepicker--inline {
	width: 100% !important;
	border: 1px solid #ddd !important;
	border-radius: 7px !important;
	box-shadow: none !important;
}

.datepicker--inline .datepicker__month {
	width: 48% !important;
}
	
	@media (max-width: 500px) {
		
		.datepicker__months:before {
			background: none !important;
		}
		
		.datepicker--inline .datepicker__month {
			width: 100% !important;
		}
	}