:root {
  --seo-conf-date-bg: var(--wp--preset--color--slate-950);
  --seo-conf-date-panel: var(--wp--preset--color--slate-900);
  --seo-conf-date-text: var(--wp--preset--color--white);
  --seo-conf-date-muted: var(--wp--preset--color--primary-400);
  --seo-conf-date-accent: var(--wp--preset--color--primary-600);
  --seo-conf-date-arrow: var(--wp--preset--color--primary-400);
  --seo-conf-date-arrow-hover: var(--wp--preset--color--primary-600);
}

/* Light mode: reuse the theme's light tokens so custom dropdowns don't stay dark. */
html:not(.dark),
html[data-theme="light"] {
  --seo-conf-date-panel: var(--seo-conf-bg);
  --seo-conf-date-bg: var(--seo-conf-surface);
  --seo-conf-date-text: var(--slate-900);
}

.flatpickr-calendar {
  background: var(--seo-conf-date-panel);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 0.75rem;
  box-shadow: none;
  color: var(--seo-conf-date-text);
  font-family: inherit;
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month,
.flatpickr-weekdays {
  background: transparent;
  color: var(--seo-conf-date-text);
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  color: var(--seo-conf-date-text) !important;
}

.flatpickr-current-month,
.flatpickr-current-month span.cur-month {
  color: var(--seo-conf-date-text) !important;
}

/* Month dropdown list text can default to black */
.flatpickr-monthDropdown-months {
  color: var(--seo-conf-date-text) !important;
}

.flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background: var(--seo-conf-date-panel);
  color: var(--seo-conf-date-text) !important;
}

.flatpickr-monthDropdown-months .flatpickr-monthDropdown-month:hover,
.flatpickr-monthDropdown-months .flatpickr-monthDropdown-month:focus {
  background: var(--seo-conf-date-bg);
}

.flatpickr-weekday {
  color: var(--seo-conf-date-muted) !important;
}

.flatpickr-day {
  color: var(--seo-conf-date-text);
  border-radius: 0.75rem;
}

/* Previous/next month days should be visible, just muted */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: var(--seo-conf-date-text) !important;
  opacity: 0.35;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  color: var(--seo-conf-date-text) !important;
  opacity: 0.25;
}

.flatpickr-day:hover,
.flatpickr-day:focus {
  background: var(--seo-conf-date-bg);
  border-color: var(--seo-conf-date-bg);
}

.flatpickr-day.today {
  border-color: var(--seo-conf-date-muted);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
  background: var(--seo-conf-date-accent);
  border-color: var(--seo-conf-date-accent);
  color: var(--seo-conf-date-text);
}

.flatpickr-time input,
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
  color: var(--seo-conf-date-text);
}

.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after {
  display: none;
}

.flatpickr-prev-month,
.flatpickr-next-month {
  color: var(--seo-conf-date-arrow) !important;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
  color: var(--seo-conf-date-arrow-hover) !important;
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg {
  fill: currentColor !important;
}

/* Year increment/decrement arrows */
.flatpickr-current-month .numInputWrapper span.arrowUp:after,
.flatpickr-current-month .numInputWrapper span.arrowDown:after {
  border-top-color: var(--seo-conf-date-arrow) !important;
  border-bottom-color: var(--seo-conf-date-arrow) !important;
}

.flatpickr-current-month .numInputWrapper span.arrowUp:hover:after,
.flatpickr-current-month .numInputWrapper span.arrowDown:hover:after {
  border-top-color: var(--seo-conf-date-arrow-hover) !important;
  border-bottom-color: var(--seo-conf-date-arrow-hover) !important;
}

/* Alt input inherits Tailwind field styling but ensure text is visible */
input.flatpickr-input[readonly] {
  color: var(--seo-conf-date-text);
}

/* Custom dropdowns for #submit-form selects (theme-matching, not OS-native). */
#submit-form .seo-conf-select {
  position: relative;
  width: 100%;
}

/* The original field icons (absolute left-4) live alongside the enhanced select.
   Ensure they stay visible above the button surface. */
#submit-form :is(i.absolute.left-4, svg.absolute.left-4, span.absolute.left-4) {
  z-index: 5;
  pointer-events: none;
}

/* Keep the real select in the form submission, but hide it visually */
#submit-form .seo-conf-select__native {
  position: absolute !important;
  inset: 0 !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#submit-form .seo-conf-select__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

html:not(.dark) #submit-form .seo-conf-select__button,
html[data-theme="light"] #submit-form .seo-conf-select__button {
  background-color: var(--seo-conf-input-bg) !important;
  border-color: var(--seo-conf-input-border) !important;
  color: var(--slate-900) !important;
}

#submit-form .seo-conf-select__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#submit-form .seo-conf-select__chevron {
  width: 1.25rem;
  height: 1.25rem;
  color: rgba(148, 163, 184, 0.9);
  flex: 0 0 auto;
}

html:not(.dark) #submit-form .seo-conf-select__chevron,
html[data-theme="light"] #submit-form .seo-conf-select__chevron {
  color: rgba(15, 23, 42, 0.7);
}

#submit-form .seo-conf-select.is-open .seo-conf-select__chevron {
  transform: rotate(180deg);
}

#submit-form .seo-conf-select__menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.5rem);
  z-index: 50;
  display: none;
  background: var(--seo-conf-date-panel);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 0.75rem;
  padding: 0.25rem;
  max-height: 16rem;
  overflow: auto;
  box-shadow: none;

  /* Scrollbar theming (Firefox) */
  scrollbar-width: thin;
  scrollbar-color: var(--seo-conf-date-accent) rgba(148, 163, 184, 0.12);
}

/* Scrollbar theming (Chromium/WebKit) */
#submit-form .seo-conf-select__menu::-webkit-scrollbar {
  width: 10px;
}

#submit-form .seo-conf-select__menu::-webkit-scrollbar-track {
  background: rgba(148, 163, 184, 0.12);
  border-radius: 999px;
}

#submit-form .seo-conf-select__menu::-webkit-scrollbar-thumb {
  background: rgba(167, 139, 250, 0.65);
  border-radius: 999px;
  border: 2px solid rgba(15, 23, 42, 0.85);
}

html:not(.dark) #submit-form .seo-conf-select__menu::-webkit-scrollbar-thumb,
html[data-theme="light"] #submit-form .seo-conf-select__menu::-webkit-scrollbar-thumb {
  border-color: rgba(255, 255, 255, 0.9);
}

#submit-form .seo-conf-select__menu::-webkit-scrollbar-thumb:hover {
  background: rgba(167, 139, 250, 0.85);
}

#submit-form .seo-conf-select.is-open .seo-conf-select__menu {
  display: block;
}

#submit-form .seo-conf-select__option {
  width: 100%;
  text-align: left;
  padding: 0.65rem 0.9rem;
  border-radius: 0.65rem;
  background: transparent;
  border: 0;
  color: var(--seo-conf-date-text);
  font: inherit;
  cursor: pointer;
}

#submit-form .seo-conf-select__option:hover,
#submit-form .seo-conf-select__option:focus {
  background: var(--seo-conf-date-bg);
  outline: none;
}

#submit-form .seo-conf-select__option[aria-selected="true"] {
  background: var(--seo-conf-date-accent);
  color: var(--seo-conf-date-text);
}

/* In light mode, keep selected option text white for contrast on the primary background. */
html:not(.dark) #submit-form .seo-conf-select__option[aria-selected="true"],
html[data-theme="light"] #submit-form .seo-conf-select__option[aria-selected="true"] {
  color: var(--wp--preset--color--white);
}

#submit-form .seo-conf-select__option--multi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

#submit-form .seo-conf-select__option-check {
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 auto;
  opacity: 0;
}

#submit-form .seo-conf-select__option[aria-selected="true"] .seo-conf-select__option-check {
  opacity: 1;
}