/*------------------------------------------------------------

  応募締切カレンダー（flatpickr）の見た目
  サイト共通の色（styles.css の :root 変数）に合わせています

------------------------------------------------------------*/

/* 入力欄：右にカレンダーアイコン */
.contact_form .period-date-alt {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
}

.contact_form .period-date-alt.active {
  border-color: var(--blue);
}

/* カレンダー本体 */
.flatpickr-calendar {
  width: 300px;
  padding: 12px;
  border: 1px solid var(--card-border, #dde2ea);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-lg, 0 18px 42px rgba(15, 23, 42, .14));
  font-family: inherit;
  box-sizing: border-box;
}

.flatpickr-calendar.open {
  animation: period-cal-in .14s ease-out;
}

@keyframes period-cal-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* 吹き出しの三角は消す */
.flatpickr-calendar::before,
.flatpickr-calendar::after {
  display: none;
}

.flatpickr-calendar.arrowTop {
  margin-top: 6px;
}

.flatpickr-calendar.arrowBottom {
  margin-top: -6px;
}

/* 年月ヘッダー */
.flatpickr-months {
  align-items: center;
  margin-bottom: 6px;
}

.flatpickr-months .flatpickr-month {
  height: 36px;
  color: var(--color-text);
}

.flatpickr-current-month {
  left: 0;
  width: 100%;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 15px;
  font-weight: 700;
}

/* 「2026年 11月」の並びを日本語らしく：年 → 月 */
.flatpickr-current-month {
  flex-direction: row-reverse;
}

.flatpickr-current-month span.cur-month {
  margin: 0;
  font-weight: 700;
}

.flatpickr-current-month span.cur-month:hover {
  background: none;
}

.flatpickr-current-month .numInputWrapper {
  width: auto;
  display: inline-flex;
  align-items: center;
}

.flatpickr-current-month input.cur-year {
  width: 4.3ch;
}

.flatpickr-current-month .numInputWrapper::after {
  content: "年";
  margin-left: 1px;
}

.flatpickr-current-month input.cur-year {
  height: auto;
  padding: 0;
  font-weight: 700;
  pointer-events: none;
}

.flatpickr-current-month .numInputWrapper span.arrowUp,
.flatpickr-current-month .numInputWrapper span.arrowDown {
  display: none;
}

.flatpickr-current-month .numInputWrapper:hover {
  background: none;
}

/* 前月・次月ボタン */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  top: 12px;
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--color-text);
  transition: background .15s;
}

.flatpickr-months .flatpickr-prev-month { left: 12px; }
.flatpickr-months .flatpickr-next-month { right: 12px; }

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  background: var(--gray-200);
  color: var(--color-text);
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  width: 18px;
  height: 18px;
}

.flatpickr-months .flatpickr-prev-month svg path,
.flatpickr-months .flatpickr-next-month svg path,
.flatpickr-months .flatpickr-prev-month:hover svg path,
.flatpickr-months .flatpickr-next-month:hover svg path {
  fill: none;
  stroke: currentColor;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: none;
}

.flatpickr-months .flatpickr-prev-month.flatpickr-disabled {
  display: flex;
  opacity: .25;
  cursor: default;
}

.flatpickr-months .flatpickr-prev-month.flatpickr-disabled:hover {
  background: none;
}

/* 曜日 */
.flatpickr-weekdays {
  height: 28px;
}

span.flatpickr-weekday {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 700;
}

span.flatpickr-weekday:nth-child(1) { color: var(--red); }
span.flatpickr-weekday:nth-child(7) { color: var(--blue); }

/* 日付：7列ぴったりに並べる */
.flatpickr-days,
.dayContainer {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}

.flatpickr-innerContainer,
.flatpickr-rContainer,
.flatpickr-weekdays,
.flatpickr-weekdaycontainer {
  width: 100%;
}

.dayContainer {
  padding: 0;
  row-gap: 4px;
}

.flatpickr-day {
  box-sizing: border-box;
  flex-basis: calc(100% / 7);
  max-width: calc(100% / 7);
  height: 38px;
  line-height: 36px;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--color-text);
  font-size: 14px;
  transition: background .12s;
}

/* 日曜・土曜の色 */
.dayContainer .flatpickr-day:nth-child(7n+1) { color: var(--red); }
.dayContainer .flatpickr-day:nth-child(7n)   { color: var(--blue); }

.flatpickr-day:hover,
.flatpickr-day:focus {
  background: var(--gray-200);
  border-color: transparent;
}

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

.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
  background: var(--gray-200);
  border-color: var(--border-strong);
  color: var(--color-text);
}

/* 選択中 */
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus,
.dayContainer .flatpickr-day.selected {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  font-weight: 700;
}

/* 前後の月・選べない日（過去日） */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.dayContainer .flatpickr-day.prevMonthDay,
.dayContainer .flatpickr-day.nextMonthDay {
  color: var(--gray-500);
  opacity: .6;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.dayContainer .flatpickr-day.flatpickr-disabled {
  color: var(--gray-400);
  background: none;
  cursor: default;
}

/* スマホ：画面幅に合わせる */
@media only screen and (max-width: 767px) {
  .flatpickr-calendar {
    width: calc(100vw - 32px);
    max-width: 340px;
  }

  .flatpickr-day {
    height: 42px;
    line-height: 40px;
  }
}