/* Web商談の予約カレンダー（お問い合わせフォーム「WEB商談依頼」）2026-10-16
   JS（js/web-booking.js）が動いて空き枠を取れたときだけ .rdlp-booking-on が付き、
   カレンダーの欄が出て自由入力欄が隠れる。JS が無い・空き枠が取れないときは自由入力欄のまま。 */

.rdlp-booking { display: none; position: relative; }
.rdlp-booking-on .rdlp-booking { display: block; }
.rdlp-booking-on .rdlp-booking__fallback { display: none; }
.rdlp-booking__fallback-note { margin: 0 0 8px; font-size: 14px; color: #b32d2e; }

/* 「日付と時間を選択」の欄（フォームの他の入力欄と同じ見た目＋カレンダーの印）
   サイト側の CSS が background の一括指定で上書きするため、印だけ !important で指定 */
.rdlp-booking .rdlp-booking__display {
  cursor: pointer;
  background-color: #ebebeb;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23181818' stroke-width='1.8' 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") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 22px 22px !important;
  padding-right: 48px !important;
  caret-color: transparent;
}
.rdlp-booking .rdlp-booking__display:focus { outline: 2px solid #181818; outline-offset: 1px; }
.rdlp-booking .rdlp-booking__display::placeholder { color: #8a8a8a; }

/* ポップアップ */
.rdlp-bk {
  position: absolute;
  z-index: 60;
  left: 0;
  top: calc(100% + 8px);
  width: 100%;
  max-width: 560px;
  box-sizing: border-box;
  background: #fff;
  color: #181818;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
  padding: 14px 14px 12px;
  font-size: 15px;
  line-height: 1.4;
  text-align: left;
}
.rdlp-bk[hidden] { display: none; }
.rdlp-bk *, .rdlp-bk *::before, .rdlp-bk *::after { box-sizing: border-box; }
.rdlp-bk button { font: inherit; color: inherit; -webkit-appearance: none; appearance: none; }
.rdlp-bk__close {
  position: absolute; top: 6px; right: 8px; width: 32px; height: 32px;
  border: 0; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; color: #666; border-radius: 50%;
}
.rdlp-bk__close:hover { background: #f0f0f0; }
.rdlp-bk__msg { margin: 0 0 10px; padding: 8px 10px; border-radius: 6px; background: #fff3f3; color: #b32d2e; font-size: 14px; }
.rdlp-bk__msg[hidden] { display: none; }

.rdlp-bk__panes { display: flex; gap: 14px; align-items: stretch; }
.rdlp-bk__pane--date { flex: 1 1 300px; min-width: 0; }
.rdlp-bk__pane--time { flex: 0 0 150px; border-left: 1px solid #e6e6e6; padding-left: 14px; display: flex; flex-direction: column; }
.rdlp-bk__pane--time .rdlp-bk__head { padding-right: 26px; }

.rdlp-bk__head { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-weight: bold; font-size: 14px; }
.rdlp-bk__step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; background: #dc0000; color: #fff; font-size: 12px; font-weight: bold;
}

/* 月の切り替え */
.rdlp-bk__nav { display: flex; align-items: center; justify-content: space-between; margin: 0 0 6px; }
.rdlp-bk__month { font-size: 18px; }
.rdlp-bk__month strong { font-weight: bold; }
.rdlp-bk__year { margin-left: 6px; color: #888; font-size: 14px; }
.rdlp-bk__arrow {
  width: 32px; height: 32px; border: 1px solid #d9d9d9; border-radius: 50%; background: #fff; cursor: pointer; font-size: 20px; line-height: 1;
}
.rdlp-bk__arrow:hover:not(:disabled) { background: #f3f3f3; }
.rdlp-bk__arrow:disabled { opacity: .3; cursor: default; }

/* カレンダーの升目 */
.rdlp-bk__grid { display: block; }
.rdlp-bk__row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.rdlp-bk__wd { text-align: center; font-size: 12px; color: #777; padding: 4px 0; }
.rdlp-bk__wd.is-sun { color: #c62828; }
.rdlp-bk__wd.is-sat { color: #1565c0; }
.rdlp-bk__day {
  display: flex; align-items: center; justify-content: center;
  height: 36px; border: 0; border-radius: 50%; background: transparent; font-size: 15px; cursor: pointer; position: relative;
}
.rdlp-bk__day.is-other, .rdlp-bk__day.is-off { color: #c3c3c3; cursor: default; }
.rdlp-bk__day.is-free { color: #181818; font-weight: bold; }
.rdlp-bk__day.is-free:hover { background: #f0f0f0; }
.rdlp-bk__day.is-free.is-sun { color: #c62828; }
.rdlp-bk__day.is-free.is-sat { color: #1565c0; }
.rdlp-bk__day.is-today::after {
  content: ""; position: absolute; inset: 3px; border: 1.5px solid #dc0000; border-radius: 50%; pointer-events: none;
}
.rdlp-bk__day.is-selected, .rdlp-bk__day.is-selected:hover { background: #181818; color: #fff; }
.rdlp-bk__day:focus-visible { outline: 2px solid #181818; outline-offset: 1px; }

/* 時間のボタン */
.rdlp-bk__times { display: flex; flex-direction: column; gap: 8px; }
.rdlp-bk__time {
  width: 100%; height: 40px; border: 1px solid #181818; border-radius: 999px; background: #fff; cursor: pointer; font-size: 15px;
}
.rdlp-bk__time:hover:not(:disabled) { background: #f0f0f0; }
.rdlp-bk__time.is-off { border-color: #e0e0e0; color: #c3c3c3; background: #fafafa; cursor: default; }
.rdlp-bk__time.is-selected { background: #181818; color: #fff; }
.rdlp-bk__time:focus-visible { outline: 2px solid #181818; outline-offset: 1px; }
.rdlp-bk__note { margin: 10px 0 0; font-size: 12px; color: #777; text-align: center; }

/* スマホ：欄の下に続けて表示し、日付と時間を縦に並べる */
@media (max-width: 599px) {
  .rdlp-bk { position: static; max-width: none; margin-top: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, .1); padding: 12px 10px 10px; }
  .rdlp-bk__panes { flex-direction: column; gap: 10px; }
  .rdlp-bk__pane--time { flex: 0 0 auto; border-left: 0; border-top: 1px solid #e6e6e6; padding-left: 0; padding-top: 10px; }
  .rdlp-bk__times { flex-direction: row; flex-wrap: wrap; }
  .rdlp-bk__time { width: calc(33.333% - 6px); height: 42px; }
  .rdlp-bk__day { height: 40px; }
}