/* ============================================
   booking-package 予約フォーム UX改善
   - 進捗バー（4ステップ可視化）
   - メニューカード化
   - 戻るボタンのボタン化
   - モバイル最適化
   - プラグイン本体は無改造、CSSオーバーライドのみ
   ============================================ */

/* ===== 進捗バー（JSで .am-progress-bar を #booking-package の直前に注入） ===== */
.am-progress-bar {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  padding: 16px 12px 14px;
  background: linear-gradient(to bottom, #fff, #fafafa);
  border-bottom: 1px solid #eee;
  position: relative;
  z-index: 1;
}
.am-progress-bar .am-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
  font-size: 11px;
  color: #999;
  text-align: center;
  line-height: 1.2;
}
.am-progress-bar .am-step .am-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e0e0e0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 13px;
  transition: all 0.3s;
  z-index: 1;
}
.am-progress-bar .am-step.active .am-dot { background: #b30000; }
.am-progress-bar .am-step.done .am-dot { background: #bbb; }
.am-progress-bar .am-step.active { color: #b30000; font-weight: bold; }
.am-progress-bar .am-step.done { color: #999; }
.am-progress-bar .am-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 14px;
  left: calc(50% + 14px);
  right: calc(-50% + 14px);
  height: 2px;
  background: #e0e0e0;
  z-index: 0;
}
.am-progress-bar .am-step.done:not(:last-child)::after { background: #bbb; }

/* ===== Step1: カレンダー（カレンダーセル拡大・タップしやすく） ===== */
#booking-package .calendarData td.day_slot {
  height: 48px !important;
  font-size: 14px !important;
}
#booking-package .calendarData td.available_day {
  cursor: pointer;
  transition: background 0.15s;
}
#booking-package .calendarData td.available_day:hover {
  background: #fff8e1 !important;
}

/* ===== Step2上部に複製した戻るボタン（JSで注入する .am-back-top） ===== */
.am-back-top {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 12px 20px !important;
  min-width: 110px !important;
  background: #fff !important;
  color: #555 !important;
  border: 1.5px solid #999 !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  text-decoration: none !important;
  margin: 12px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.15s !important;
}
.am-back-top::before {
  content: "‹";
  font-size: 16px;
  font-weight: bold;
  color: #999;
  margin-right: 4px;
}
.am-back-top:hover {
  background: #f5f5f5 !important;
  border-color: #555 !important;
  color: #222 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
}

/* ===== Step3（時間選択中）はメニュー一覧を隠す（specificityを上げて display:flex に勝つ） ===== */
#booking-package_schedulePage.am-on-time #courseMainPanel.courseListPanel,
#booking-package_schedulePage.am-on-time #courseMainPanel {
  display: none !important;
}

/* ===== Step1のメニュー確認エリアを非表示（メニュー選択即遷移にするため） ===== */
#booking-package #booking-package_serviceDetails {
  display: none !important;
}


/* ===== 前/次の日付ボタン（戻るボタン右の「木30 土2」など）を非表示
       日付変更はStep1に戻る運用のため不要 ===== */
#booking-package #previous_available_day_button,
#booking-package #next_available_day_button {
  display: none !important;
}

/* ===== 親レイアウトを縦並び強制（プラグイン既定の2カラム absolute 配置を解除） - servicePage / schedulePage 共通 ===== */
#booking-package_schedulePage,
#booking-package_servicePage {
  display: block !important;
  width: 100% !important;
  position: relative !important;
}
#booking-package_schedulePage > #topPanel,
#booking-package_schedulePage > #daysListPanel,
#booking-package_schedulePage > #courseMainPanel,
#booking-package_schedulePage > div,
#booking-package_servicePage > #courseMainPanel,
#booking-package_servicePage > div {
  display: block !important;
  width: 100% !important;
  float: none !important;
  clear: both !important;
  position: static !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  height: auto !important;
}
#booking-package_schedulePage > #daysListPanel.daysListPanel {
  display: flex !important;
}

/* ===== Step2: 選択日付ヘッダは非表示（日付変更はStep1に戻る） ===== */
#booking-package_schedulePage #topPanel,
#booking-package_schedulePage #topPanel.topPanel,
#booking-package_schedulePage #selectedDate,
#booking-package_schedulePage #leftButtonPanel,
#booking-package_schedulePage #rightButtonPanel {
  display: none !important;
}

/* ===== Step2: 日付タブ（daysListPanel）は非表示（日付変更はStep1に戻る） ===== */
#booking-package_schedulePage #daysListPanel,
#booking-package_schedulePage #daysListPanel.daysListPanel {
  display: none !important;
}
#booking-package_schedulePage #daysListPanel .selectable_day_slot {
  flex: 0 0 auto !important;
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  padding: 10px 4px !important;
  background: #fff !important;
  border: 1.5px solid #e0e0e0 !important;
  border-radius: 8px !important;
  text-align: center !important;
  cursor: pointer !important;
  font-size: 13px !important;
  transition: all 0.15s !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  align-items: center !important;
}
#booking-package_schedulePage #daysListPanel .selectable_day_slot.closed {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  background: #f5f5f5 !important;
}
#booking-package_schedulePage #daysListPanel .selectable_day_slot.selected_day_slot {
  background: #b30000 !important;
  border-color: #b30000 !important;
  color: #fff !important;
  font-weight: bold !important;
  box-shadow: 0 2px 6px rgba(179, 0, 0, 0.3) !important;
}
#booking-package_schedulePage #daysListPanel .selectable_day_slot .weekPanel {
  font-size: 11px !important;
  font-weight: normal !important;
  margin-bottom: 2px !important;
}
#booking-package_schedulePage #daysListPanel .selectable_day_slot.selected_day_slot .weekPanel {
  color: #ffe0e0 !important;
}
#booking-package_schedulePage #daysListPanel .selectable_day_slot .weekPanel.0_OfWeek { color: #d32f2f; }
#booking-package_schedulePage #daysListPanel .selectable_day_slot .weekPanel.6_OfWeek { color: #1976d2; }

/* ===== メニューカード（selectable_service_slot） - servicePage / schedulePage 共通 ===== */
#booking-package #courseMainPanel.courseListPanel {
  height: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 4px 12px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
#booking-package .selectable_service_slot {
  background: #fff !important;
  border: 1.5px solid #e0e0e0 !important;
  border-radius: 10px !important;
  padding: 14px 14px 14px 14px !important;
  margin: 0 0 12px 0 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  position: relative !important;
}
#booking-package .selectable_service_slot:hover,
#booking-package .selectable_service_slot:active {
  border-color: #b30000 !important;
  box-shadow: 0 4px 12px rgba(179, 0, 0, 0.15) !important;
  transform: translateY(-1px) !important;
}
#booking-package .selectable_service_slot::after {
  content: "›";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #b30000;
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
}
#booking-package .selectable_service_slot .service_details {
  margin: 0 !important;
  padding-right: 28px !important;
}
/* メニュー名は font-size をやや抑えて1行に収まりやすく */
#booking-package .service_name_cost {
  font-size: 14px !important;
  font-weight: bold !important;
  line-height: 1.5 !important;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
}

/* メニュー説明文（descriptionOfService）のスタイル */
#booking-package .descriptionOfService {
  font-size: 12px !important;
  color: #888 !important;
  margin-top: 6px !important;
  line-height: 1.4 !important;
}

/* メニュー名（service_name_cost）をカードタイトルに（font-size指定は下で上書き） */
#booking-package .service_name_cost {
  color: #222 !important;
  display: block !important;
}

/* ===== Step2: 時間枠スロット（selectable_time_slot）をボタングリッド化 ===== */
#booking-package_schedulePage .selectable_time_slot {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 14px !important;
  margin: 4px 6px 4px 0 !important;
  background: #fff !important;
  border: 1.5px solid #b30000 !important;
  color: #b30000 !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  font-weight: bold !important;
  min-width: 76px !important;
  width: auto !important;
  max-width: none !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  box-shadow: 0 1px 3px rgba(179, 0, 0, 0.15) !important;
}
#booking-package_schedulePage .selectable_time_slot:hover {
  background: #b30000 !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(179, 0, 0, 0.3) !important;
}
#booking-package_schedulePage .selectable_time_slot.closed,
#booking-package_schedulePage .selectable_time_slot.unavailable {
  background: #f5f5f5 !important;
  border-color: #ddd !important;
  color: #bbb !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}
/* 時間枠の親パネルをグリッド表示に（hidden_panel 時は隠れたまま） */
#booking-package_schedulePage #scheduleMainPanel:not(.hidden_panel),
#booking-package_schedulePage .courseListPanel.postionCenterForScheduleListPanel:not(.hidden_panel) {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  padding: 12px !important;
  height: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  position: static !important;
  left: auto !important;
  top: auto !important;
}

/* ===== Step3: 入力フォーム ===== */
#booking-package_inputFormPanel input[type="text"],
#booking-package_inputFormPanel input[type="email"],
#booking-package_inputFormPanel input[type="tel"],
#booking-package_inputFormPanel select,
#booking-package_inputFormPanel textarea {
  width: 100% !important;
  padding: 12px !important;
  border: 1px solid #ccc !important;
  border-radius: 6px !important;
  font-size: 16px !important;
  box-sizing: border-box !important;
}

/* ===== 戻るボタン（return_button）をしっかりボタン化 ===== */
#booking-package button.return_button,
#booking-package .return_button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 14px 24px !important;
  min-width: 120px !important;
  background: #fff !important;
  color: #555 !important;
  border: 1.5px solid #999 !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.15s !important;
  margin: 12px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}
#booking-package button.return_button::before,
#booking-package .return_button::before {
  content: "‹";
  font-size: 18px;
  font-weight: bold;
  color: #999;
}
#booking-package button.return_button:hover,
#booking-package .return_button:hover {
  background: #f5f5f5 !important;
  border-color: #555 !important;
  color: #222 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
}
#booking-package button.return_button.hidden_panel,
#booking-package .return_button.hidden_panel {
  display: none !important;
}

/* 戻るボタンを含むパネル */
#booking-package .bottomPanelForPositionInherit {
  padding: 8px 0 16px !important;
  text-align: left !important;
}

/* ===== 次へ進む系ボタン全般（予約する・確定・Next pageなど） ===== */
#booking-package button.book_now_button,
#booking-package button#confirmBookingButton,
#booking-package button.next_page_button,
#booking-package input[type="submit"]:not(.return_form_button):not(.return_button),
#booking-package button.nextStep,
#booking-package .nextButton,
#booking-package .submitButton,
#booking-package #booking-package_subscribeButton {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px 24px !important;
  background: #b30000 !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 16px 0 8px !important;
  box-shadow: 0 3px 8px rgba(179, 0, 0, 0.35) !important;
  transition: all 0.15s !important;
}
#booking-package button.book_now_button:hover,
#booking-package input[type="submit"]:hover,
#booking-package button.nextStep:hover {
  background: #8a0000 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 12px rgba(179, 0, 0, 0.45) !important;
}

/* 予約するボタンの親パネル */
#booking-package #booking-package_pay_locally,
#booking-package .bottomBarPanel {
  padding: 0 12px !important;
  width: 100% !important;
}

/* Step3戻るボタン（return_form_button）も明確なボタン化 */
#booking-package button.return_form_button,
#booking-package #returnToSchedules {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 14px 24px !important;
  width: 100% !important;
  background: #fff !important;
  color: #555 !important;
  border: 1.5px solid #999 !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  margin: 0 0 24px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}
#booking-package button.return_form_button::before,
#booking-package #returnToSchedules::before {
  content: "‹";
  font-size: 18px;
  color: #999;
  margin-right: 4px;
}
#booking-package button.return_form_button:hover,
#booking-package #returnToSchedules:hover {
  background: #f5f5f5 !important;
  border-color: #555 !important;
  color: #222 !important;
}

/* ===== 全体のフォントサイズ底上げ・行間 + PC版で幅制限 ===== */
/* booking-package が display:table で子を table-cell 化していたのを block に矯正 */
#booking-package {
  font-size: 14px !important;
  line-height: 1.6 !important;
  display: block !important;
  width: 100% !important;
  max-width: 600px !important; /* PC版で広がりすぎないように制限 */
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}
/* 進捗バーも同じ幅に揃える */
.am-progress-bar {
  max-width: 600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
#booking-package * {
  box-sizing: border-box !important;
}
#booking-package > div:not(.hidden_panel) {
  display: block !important;
  width: 100% !important;
}
/* hidden_panel は確実に隠す（プラグインの規約を尊重） */
#booking-package .hidden_panel,
#booking-package > .hidden_panel {
  display: none !important;
}

/* ===== レスポンシブ ===== */
@media (max-width: 480px) {
  .am-progress-bar { padding: 12px 6px 10px; gap: 2px; }
  .am-progress-bar .am-step { font-size: 9px; }
  .am-progress-bar .am-step .am-dot { width: 22px; height: 22px; font-size: 11px; }
  .am-progress-bar .am-step:not(:last-child)::after { top: 11px; }
  #booking-package_schedulePage #selectedDate { font-size: 16px !important; padding: 12px !important; }
  #booking-package_schedulePage .selectable_service_slot { padding: 14px !important; }
  #booking-package .service_name_cost { font-size: 15px !important; }
}