/**
 * Flatpickr 主题：套用 China Train Travel 品牌色
 * 主色（深蓝） / 强调色（橙） 来自 style.css 的 CSS 变量
 *
 * 加载顺序：在 flatpickr.min.css 之后，覆盖默认配色
 */

/* 弹层整体 */
.flatpickr-calendar {
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
  font-family: var(--font-body);
}

/* 顶栏：月份和年份 */
.flatpickr-months .flatpickr-month {
  background: var(--color-primary-dark);
  color: #fff;
  border-radius: 10px 10px 0 0;
  height: 44px;
}

.flatpickr-current-month {
  padding-top: 6px;
  font-size: 1rem;
  font-weight: 600;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* 月份下拉选项（展开后是白底） */
.flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background: #fff;
  color: var(--color-text);
}

/* 年份输入框右侧的上下箭头 */
.flatpickr-current-month .numInputWrapper:hover {
  background: rgba(255, 255, 255, 0.1);
}

.flatpickr-current-month .numInputWrapper span.arrowUp:after {
  border-bottom-color: rgba(255, 255, 255, 0.6);
}

.flatpickr-current-month .numInputWrapper span.arrowDown:after {
  border-top-color: rgba(255, 255, 255, 0.6);
}

/* 左右翻月份的箭头 */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  color: #fff;
  fill: #fff;
  padding: 12px;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--color-accent);
}

/* 星期表头 */
.flatpickr-weekdays {
  background: var(--color-primary-dark);
}

.flatpickr-weekdaycontainer {
  background: var(--color-primary-dark);
}

span.flatpickr-weekday,
.flatpickr-weekdays .flatpickr-weekday {
  background: var(--color-primary-dark);
  color: #fff;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

/* 日期单元格 */
.flatpickr-day {
  border-radius: 6px;
  color: var(--color-text);
  font-weight: 500;
}

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

/* 今天 */
.flatpickr-day.today {
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
  font-weight: 700;
}

.flatpickr-day.today:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* 已选日期：橙色（强调色） */
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

/* 不可选（minDate 之前） */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  color: rgba(72, 72, 72, 0.25);
  background: transparent;
  cursor: not-allowed;
}

/* 上下月日期淡化 */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: rgba(72, 72, 72, 0.35);
}

/* input 视觉：让带 flatpickr 的输入框看起来像日期框 */
.flatpickr-input.has-flatpickr-icon {
  cursor: pointer;
  background: #fff
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>")
    no-repeat right 0.7rem center;
  padding-right: 2.2rem;
}