/* ==========================================================================
   Date Range Filter — input + Flatpickr calendar
   Barvy multiwebu se injectnou přes wp_add_inline_style jako CSS variables:
   --rosa-calendar-color-primary, --rosa-calendar-color-secondary
   ========================================================================== */

/* --- Input (styl jako Elementor formulář) --- */

.rosa-date-filter {
	position: relative;
	display: inline-block;
}

.rosa-date-filter input.flatpickr-input {
	box-sizing: border-box;
	width: 100%;
	min-height: 40px;
	padding: 8px 40px 8px 16px;
	font-size: 15px;
	font-family: Roboto, sans-serif;
	line-height: 1.4;
	color: inherit;
	background-color: rgba(255, 255, 255, 0.41);
	border: 1px solid rgb(105, 114, 125);
	border-radius: 10px;
	outline: 0;
	cursor: pointer;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.rosa-date-filter input.flatpickr-input:focus {
	box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 1px inset;
	border-color: var(--rosa-calendar-color-primary, #6EC1E4);
}

.rosa-date-filter input.flatpickr-input::placeholder {
	color: inherit;
	opacity: 0.6;
}

/* --- Clear button --- */

.rosa-date-filter__clear {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	background: none;
	border: none;
	font-size: 16px;
	padding: 4px;
	line-height: 1;
	color: #999;
	transition: color 0.15s;
}

.rosa-date-filter__clear:hover {
	color: #333;
}

/* --- Loading overlay --- */

.rosa-date-filter__loading {
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	font-size: 14px;
	color: #666;
}

/* ==========================================================================
   Flatpickr calendar — override barvy multiwebu
   ========================================================================== */

/* Vybraný den (start, end) */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
	background: var(--rosa-calendar-color-primary, #6EC1E4);
	border-color: var(--rosa-calendar-color-primary, #6EC1E4);
	color: #fff;
}

/* Rozsah mezi start a end */
.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange {
	background: color-mix(in srgb, var(--rosa-calendar-color-primary, #6EC1E4) 15%, transparent);
	border-color: color-mix(in srgb, var(--rosa-calendar-color-primary, #6EC1E4) 15%, transparent);
}

.flatpickr-day.inRange {
	box-shadow:
		-5px 0 0 color-mix(in srgb, var(--rosa-calendar-color-primary, #6EC1E4) 15%, transparent),
		 5px 0 0 color-mix(in srgb, var(--rosa-calendar-color-primary, #6EC1E4) 15%, transparent);
}

/* Start/end box-shadow connector */
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
	box-shadow: -10px 0 0 var(--rosa-calendar-color-primary, #6EC1E4);
}

/* Hover na dny */
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
	background: color-mix(in srgb, var(--rosa-calendar-color-primary, #6EC1E4) 20%, transparent);
	border-color: color-mix(in srgb, var(--rosa-calendar-color-primary, #6EC1E4) 20%, transparent);
}

/* Dnešek */
.flatpickr-day.today {
	border-color: var(--rosa-calendar-color-primary, #6EC1E4);
}

.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
	background: var(--rosa-calendar-color-primary, #6EC1E4);
	border-color: var(--rosa-calendar-color-primary, #6EC1E4);
	color: #fff;
}

/* Navigace měsíců — hover barva */
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
	color: var(--rosa-calendar-color-primary, #6EC1E4);
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
	fill: var(--rosa-calendar-color-primary, #6EC1E4);
}