/* ==============================================
   DATE PICKER (flatpickr) — TRAEXPO theme skin
   Applies to every date field on the site.
   ============================================== */
.flatpickr-calendar {
  --dp-main: var(--ts-blue, #0d2f6e);
  --dp-accent: var(--ts-gold, #f5a623);
  --dp-accent-d: var(--ts-gold-dark, #d4880c);
  width: 328px; max-width: calc(100vw - 24px);
  border: 1px solid #e3e8ee; border-radius: 16px; overflow: hidden; padding-bottom: 8px;
  box-shadow: 0 22px 50px rgba(13, 47, 110, .22), 0 4px 12px rgba(13, 47, 110, .08);
  font-family: 'Nunito Sans', system-ui, sans-serif; background: #fff;
}
.flatpickr-calendar:before, .flatpickr-calendar:after { display: none; }
.flatpickr-calendar.arrowTop, .flatpickr-calendar.arrowBottom { margin: 0; }
.flatpickr-innerContainer, .flatpickr-rContainer, .flatpickr-days, .dayContainer { width: 100%; min-width: 0; max-width: none; }
.flatpickr-innerContainer { padding: 6px 10px 0; box-sizing: border-box; }

/* header */
.flatpickr-months { background: linear-gradient(135deg, var(--dp-main), #1a4a9a); height: 54px; align-items: center; }
.flatpickr-months .flatpickr-month { background: transparent; color: #fff; fill: #fff; height: 54px; }
.flatpickr-current-month { height: 54px; padding-top: 14px; font-family: 'Oswald', sans-serif; font-size: 112%; font-weight: 600; letter-spacing: .03em; color: #fff; }
.flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-current-month input.cur-year { color: #fff; font-weight: 600; background: transparent; }
.flatpickr-current-month .flatpickr-monthDropdown-months:hover { background: rgba(255,255,255,.12); }
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { background: var(--dp-main); color: #fff; }
.numInputWrapper:hover { background: rgba(255,255,255,.12); }
.numInputWrapper span.arrowUp:after { border-bottom-color: #fff; }
.numInputWrapper span.arrowDown:after { border-top-color: #fff; }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { height: 54px; padding: 0 16px; display: flex; align-items: center; color: #fff; fill: #fff; }
.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg { fill: #fff; width: 13px; height: 13px; }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--dp-accent); }

/* weekdays */
.flatpickr-weekdays { height: 38px; margin-top: 6px; }
span.flatpickr-weekday { color: var(--dp-main); font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; background: transparent; }

/* days */
.flatpickr-day {
  max-width: none; width: 14.2857%; flex-basis: 14.2857%; height: 38px; line-height: 38px; margin: 1px 0;
  border-radius: 10px; border: 1px solid transparent; color: #243447; font-weight: 600; font-size: 14px;
}
.flatpickr-day:hover, .flatpickr-day:focus { background: #eaf2fb; border-color: #eaf2fb; color: var(--dp-main); }
.flatpickr-day.today { border-color: var(--dp-accent); color: var(--dp-accent-d); background: #fff; }
.flatpickr-day.today:hover { background: var(--dp-accent); color: #fff; border-color: var(--dp-accent); }
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange,
.flatpickr-day.selected:hover, .flatpickr-day.selected:focus {
  background: var(--dp-accent); border-color: var(--dp-accent); color: #fff; box-shadow: 0 4px 10px rgba(245,166,35,.4);
}
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: #b5bdc9; font-weight: 500; }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover { color: #ccd2db; background: transparent; border-color: transparent; text-decoration: line-through; text-decoration-color: rgba(0,0,0,.08); }

/* "Today" / "Clear" links injected by datepicker.js */
.dp-foot { display: flex; justify-content: space-between; padding: 6px 16px 4px; border-top: 1px solid #eef1f5; margin-top: 6px; }
.dp-foot button { background: none; border: 0; cursor: pointer; font: 700 13px 'Oswald', sans-serif; letter-spacing: .05em; text-transform: uppercase; color: var(--dp-main); padding: 6px 4px; }
.dp-foot button:hover { color: var(--dp-accent-d); }

/* the visible (alt) input keeps the original field look and shows a pointer */
input.dp-alt { cursor: pointer; }
