/* ============================================
   来店予約ページ 追加スタイル
   contact.css をベースに、予約日・予約時間まわりを追加
   ============================================ */

/* 予約日入力欄(flatpickr) */
.reservation-calendar input {
  max-width: 22vw;
  cursor: pointer;
}

/* 予約時間枠 */
.reservation-slots {
  display: grid;
  gap: 0.9vw;
}

.reservation-slots__notice {
  margin: 0;
  padding: 0.9vw 1vw;
  color: #8a8a8a;
  font-size: 0.9vw;
  font-weight: 600;
  line-height: 1.6;
  background: #ffffff;
}

.reservation-slots__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.7vw;
}

.reservation-slots__grid[hidden] {
  display: none;
}

.reservation-slots__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3vw;
  padding: 0.4vw 0.6vw;
  color: #1a1a1a;
  font-family: inherit;
  font-size: 0.9vw;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04vw;
  border: 0.0625rem solid #1a1a1a;
  border-radius: 0;
  background: #ffffff;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.reservation-slots__button:hover:not(:disabled) {
  color: #ffffff;
  background: #1a1a1a;
}

.reservation-slots__button.is-selected {
  color: #ffffff;
  background: #1a1a1a;
}

.reservation-slots__button:disabled {
  color: #bdbdbd;
  border-color: #d8d8d8;
  background: #ededed;
  cursor: not-allowed;
}

/* flatpickr カラーカスタマイズ(サイト色に統一) */
.flatpickr-day.selected,
.flatpickr-day.selected:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  color: #ffffff;
  border-color: #1a1a1a;
  background: #1a1a1a;
}

.flatpickr-day.today {
  border-color: #1a1a1a;
}

.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
  color: #ffffff;
  border-color: #1a1a1a;
  background: #1a1a1a;
}

.flatpickr-day:hover {
  background: #f4f4f4;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  color: #d8d8d8;
  background: transparent;
}

/* モバイル */
@media (max-width: 767px) {
  .reservation-calendar input {
    max-width: 100%;
  }

  .reservation-slots {
    gap: 3vw;
  }

  .reservation-slots__notice {
    padding: 3vw;
    font-size: 3vw;
  }

  .reservation-slots__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2vw;
  }

  .reservation-slots__button {
    min-height: 10vw;
    padding: 2vw;
    font-size: 3.2vw;
  }
}