/* Date picker (flatpickr): the Gridbuilder "By Date" filter on the listings (range mode) and the date fields in the
   "My market listings" dashboard (page 553). flatpickr appends the calendar to <body>, so these rules are global;
   they win over flatpickr's own CSS by one extra class (.flatpickr-calendar), without !important.
   Moved from the child theme's style.css (9 Oct), which used !important throughout. */

.flatpickr-calendar {
  padding-block-end: calc(var(--space-xs) / 2);
  border: 1px solid var(--neutral-light);
  border-radius: var(--radius-l, var(--radius));
  box-shadow: 0 var(--space-xs) var(--space-m) var(--black-trans-10);
  font-family: inherit;
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after {
  display: none; /* no pointer arrow: the calendar opens right under its field */
}

/* Month row: arrows, month menu and year as plain text (the year's spinner arrows are hidden; type it, or use the
   month arrows). */
.flatpickr-calendar .flatpickr-months {
  align-items: center;
  padding-block: calc(var(--space-xs) / 2);
}
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month {
  position: static;
  display: grid;
  place-items: center;
  inline-size: calc(var(--space-xs) * 3.25); /* 44px targets */
  block-size: calc(var(--space-xs) * 3.25);
  padding: 0;
  border-radius: var(--radius);
}
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover {
  background: var(--primary-ultra-light);
}
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--primary-dark);
}
.flatpickr-calendar .flatpickr-months .flatpickr-disabled {
  display: grid;
  opacity: .35;
  cursor: default;
}
.flatpickr-calendar .flatpickr-month {
  flex: 1;
  block-size: auto;
  overflow: visible;
}
.flatpickr-calendar .flatpickr-current-month {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--space-xs) / 2);
  inline-size: auto;
  block-size: auto;
  padding: 0;
  font-size: var(--text-m);
}
.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-calendar .flatpickr-current-month input.cur-year {
  margin: 0;
  padding: calc(var(--space-xs) / 4) calc(var(--space-xs) / 2);
  border-radius: var(--radius);
  color: var(--text-dark, var(--neutral-ultra-dark));
  font-weight: 600;
}
.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.flatpickr-calendar .flatpickr-current-month input.cur-year:hover {
  background: var(--primary-ultra-light);
}
.flatpickr-calendar .flatpickr-current-month .numInputWrapper {
  inline-size: 6ch;
}
.flatpickr-calendar .flatpickr-current-month .numInputWrapper span {
  display: none; /* year spinner arrows */
}

/* Weekdays and days */
.flatpickr-calendar .flatpickr-weekdaycontainer,
.flatpickr-calendar .dayContainer {
  padding-inline: calc(var(--space-xs) / 2);
}
.flatpickr-calendar span.flatpickr-weekday {
  color: var(--text-dark-muted);
  font-size: var(--text-xs);
  font-weight: 600;
}
.flatpickr-calendar .flatpickr-day {
  border-radius: var(--radius);
  color: var(--text-dark, var(--neutral-ultra-dark));
}
.flatpickr-calendar .flatpickr-day:hover {
  border-color: var(--primary-ultra-light);
  background: var(--primary-ultra-light);
}
.flatpickr-calendar .flatpickr-day.today {
  border-color: var(--primary-dark);
}
.flatpickr-calendar .flatpickr-day.prevMonthDay,
.flatpickr-calendar .flatpickr-day.nextMonthDay,
.flatpickr-calendar .flatpickr-day.flatpickr-disabled {
  color: var(--neutral-semi-light, var(--black-trans-40));
}
/* A range: pale teal band between the two ends. */
.flatpickr-calendar .flatpickr-day.inRange,
.flatpickr-calendar .flatpickr-day.inRange:hover,
.flatpickr-calendar .flatpickr-day.prevMonthDay.inRange,
.flatpickr-calendar .flatpickr-day.nextMonthDay.inRange {
  border-color: var(--primary-ultra-light);
  background: var(--primary-ultra-light);
  box-shadow: -5px 0 0 var(--primary-ultra-light), 5px 0 0 var(--primary-ultra-light);
  color: var(--text-dark, var(--neutral-ultra-dark));
}
/* Selected day and the two ends of a range: dark with lime text (the original design; 12:1); range ends keep
   flatpickr's pill shape (owner, 9 Oct). flatpickr's own
   rules combine these classes (.selected.startRange …), so the same combinations are listed here. */
.flatpickr-calendar .flatpickr-day:is(.selected, .startRange, .endRange),
.flatpickr-calendar .flatpickr-day:is(.selected, .startRange, .endRange):is(:hover, :focus, .inRange, .prevMonthDay, .nextMonthDay),
.flatpickr-calendar .flatpickr-day.selected:is(.startRange, .endRange),
.flatpickr-calendar .flatpickr-day.startRange.endRange,
.flatpickr-calendar .flatpickr-day.endRange.endRange,
.flatpickr-calendar .flatpickr-day.startRange.startRange {
  border-color: transparent;
  background: var(--bg-dark);
  box-shadow: none;
  color: var(--accent);
}
.flatpickr-calendar .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)),
.flatpickr-calendar .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)),
.flatpickr-calendar .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) {
  box-shadow: -10px 0 0 var(--bg-dark);
}
/* One day (the same day as start and end), or a start with no end chosen yet: a whole rounded day, not half a pill. */
.flatpickr-calendar .flatpickr-day.startRange.endRange.startRange,
.flatpickr-calendar:not(:has(.endRange)) .flatpickr-day.startRange.startRange {
  border-radius: var(--radius);
}
/* Keyboard */
.flatpickr-calendar .flatpickr-day:focus-visible,
.flatpickr-calendar .flatpickr-months :is(.flatpickr-prev-month, .flatpickr-next-month):focus-visible,
.flatpickr-calendar .flatpickr-current-month :is(select, input):focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

/* Dashboard page 553 ("My market listings"): open under the field inside its card (kept from the theme). */
.page-id-553 .flatpickr-calendar.animate.open {
  inset-inline-start: 1em !important; /* overrides flatpickr's inline position */
  inset-block-start: 100% !important;
}

@media (prefers-reduced-motion: reduce) {
  .flatpickr-calendar.animate.open {
    animation: none;
  }
}