/**
 * Flatpickr theme for Toolset date fields.
 * Uses CSS variables with sensible fallbacks so it works across sites.
 */

/* Hide legacy jQuery UI calendar trigger if Toolset still injects it */
.ui-datepicker-trigger,
img.ui-datepicker-trigger {
  display: none !important;
}

/* Never show the old orange jQuery UI calendar */
#ui-datepicker-div {
  display: none !important;
}

input.js-wpt-date.tsfp-flatpickr-date,
input.js-wpt-date.flatpickr-input {
  cursor: pointer;
}

.flatpickr-calendar.tsfp-flatpickr {
  z-index: 999999;
  border: 1px solid var(--gcid-t4dp5ke4yf, #e6e6e6);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
  font-family: var(--et_global_body_font, system-ui, -apple-system, Segoe UI, Roboto, sans-serif);
}

.flatpickr-calendar.tsfp-flatpickr .flatpickr-months {
  padding: 4px 4px 0;
}

.flatpickr-calendar.tsfp-flatpickr .flatpickr-months .flatpickr-month {
  height: 40px;
}

.flatpickr-calendar.tsfp-flatpickr .flatpickr-current-month {
  font-size: 110%;
  padding-top: 6px;
}

.flatpickr-calendar.tsfp-flatpickr .flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-calendar.tsfp-flatpickr .flatpickr-current-month input.cur-year {
  font-weight: 600;
  color: var(--gcid-body-color, #222);
}

.flatpickr-calendar.tsfp-flatpickr .flatpickr-prev-month,
.flatpickr-calendar.tsfp-flatpickr .flatpickr-next-month {
  fill: var(--gcid-primary-color, #1f6f78);
  padding: 8px 10px;
}

.flatpickr-calendar.tsfp-flatpickr .flatpickr-prev-month:hover,
.flatpickr-calendar.tsfp-flatpickr .flatpickr-next-month:hover,
.flatpickr-calendar.tsfp-flatpickr .flatpickr-prev-month:hover svg,
.flatpickr-calendar.tsfp-flatpickr .flatpickr-next-month:hover svg {
  fill: var(--gcid-0e6s480mtd, #026570);
}

.flatpickr-calendar.tsfp-flatpickr .flatpickr-weekdays {
  background: var(--gcid-467wmelwgk, #eef7f8);
}

.flatpickr-calendar.tsfp-flatpickr span.flatpickr-weekday {
  color: var(--gcid-primary-color, #1f6f78);
  font-weight: 600;
}

.flatpickr-calendar.tsfp-flatpickr .flatpickr-day {
  border-radius: 8px;
  max-width: 40px;
  height: 38px;
  line-height: 38px;
  color: var(--gcid-body-color, #222);
}

.flatpickr-calendar.tsfp-flatpickr .flatpickr-day:hover,
.flatpickr-calendar.tsfp-flatpickr .flatpickr-day:focus {
  background: var(--gcid-467wmelwgk, #eef7f8);
  border-color: var(--gcid-467wmelwgk, #eef7f8);
}

.flatpickr-calendar.tsfp-flatpickr .flatpickr-day.today {
  border-color: var(--gcid-primary-color, #1f6f78);
}

.flatpickr-calendar.tsfp-flatpickr .flatpickr-day.today:hover,
.flatpickr-calendar.tsfp-flatpickr .flatpickr-day.today:focus {
  background: var(--gcid-467wmelwgk, #eef7f8);
  border-color: var(--gcid-primary-color, #1f6f78);
  color: var(--gcid-primary-color, #1f6f78);
}

.flatpickr-calendar.tsfp-flatpickr .flatpickr-day.selected,
.flatpickr-calendar.tsfp-flatpickr .flatpickr-day.selected:hover,
.flatpickr-calendar.tsfp-flatpickr .flatpickr-day.selected:focus {
  background: var(--gcid-primary-color, #1f6f78);
  border-color: var(--gcid-primary-color, #1f6f78);
  color: #fff;
}

.flatpickr-calendar.tsfp-flatpickr .flatpickr-day.flatpickr-disabled,
.flatpickr-calendar.tsfp-flatpickr .flatpickr-day.flatpickr-disabled:hover {
  color: #bbb;
}

/* WP admin meta boxes: keep calendar above chrome */
.wp-admin .flatpickr-calendar.tsfp-flatpickr {
  z-index: 100100;
}