/* 予約フォーム - テーマスタイル適配（不足要素の補完） */

/* カレンダー／時間帯区域 */
#calendar-widget {
  margin: 2rem 0;
}
.p-form__time-slots {
  background: #fff;
  border: 1px solid #2d261f;
  border-radius: 6px;
  padding: 1.6rem;
}

/* 価格まとめ */
.p-form__price span {
  font-size: 2.0rem;
  font-weight: 700;
  line-height: 1;
}
.total-price-row .p-form__price span {
  color: #f77a26;
}

/* 確認ページ */
.p-form__confirm {
  margin-top: 2rem;
}
.p-form__confirm__title {
  font-weight: 700;
  border-bottom: 1px solid #2d261f;
  padding-bottom: 0.6rem;
  margin: 0 0 1rem;
}
.p-form__confirm__list {
  list-style: disc;
  margin: 0 0 0 1.4rem;
}
#p-conf-total {
  font-weight: 700;
  color: #f77a26;
}
.p-form__dl__item {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: start;
  gap: 0.8rem;
}
.p-form__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 20px;
}

/* ボタンを上下に並べるための縦並びレイアウト */
.p-form__actions.p-form__actions--vertical {
  flex-direction: column;
  align-items: center;
}
/* .p-form__actions.p-form__actions--vertical .p-form__btn {
  width: 100%;
  max-width: none;
} */

/* テーマ調のフォームボタン（確認画面・送信の統一用） */
.p-form__btn {
  display: inline-block;
  background-color: #2d261f;
  color: #fff;
  border: none;
  border-radius: 3.5rem;
  height: 3.2rem;
  padding: 0 1.6rem;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: 0.3s ease;
}
.p-form__btn:hover {
  opacity: 1;
  background-color: #897e76;
}
.p-form__btn--primary {
  background-color: #2d261f;
  color: #fff;
}
.p-form__btn--secondary {
  background-color: #897e76;
  color: #fff;
}
.p-form__btn--back {
  background-color: transparent;
  color: #2d261f;
  border: 1px solid #2d261f;
}

.p-form__select.soldout { color: #d00000; }
.p-form__select:disabled { color: #d00000; }

/* メール認証区域 */
.cake-email-verification .verification-description {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0 0 1rem 0;
}
.cake-verification-container {
  background: #fff;
  border: 1px solid #2d261f;
  border-radius: 6px;
  padding: 1.6rem;
}
.cake-verification-step,
.cake-verification-step-2 {
  margin-top: 1rem;
}
.cake-verification-code-input {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.verification-code-field {
  width: 10rem;
  text-align: center;
  padding: 0.6rem 0.8rem;
  border: 1px solid #2d261f;
  border-radius: 4px;
}
.success-message {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #2e7d32;
  font-weight: 700;
}

/* 旧ボタンをテーマ風に合わせる（JSはIDを使用） */
.cake-btn {
  display: inline-block;
  background-color: #2d261f;
  color: #fff;
  border: none;
  border-radius: 3.5rem;
  height: 3.2rem;
  padding: 0 1.6rem;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: 0.3s ease;
}
.cake-btn:hover {
  opacity: 1;
  background-color: #897e76;
}
.cake-btn-verify,
.cake-btn-verification {
  min-width: 12rem;
}

/* 追加商品区域（軽く整える） */
.cake-additional-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
.cake-additional-product {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: #fff;
  border: 1px solid #2d261f;
  border-radius: 6px;
  padding: 1rem;
}
.cake-additional-product-price {
  font-weight: 700;
}
.cake-quantity-control {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.cake-quantity-btn {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: #2d261f;
  color: #fff;
  border: none;
  cursor: pointer;
}
.cake-quantity-input {
  width: 4.8rem;
  text-align: center;
  border: 1px solid #2d261f;
  border-radius: 4px;
}

/* 店舗選択 */
.shop-selection {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
.radio-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: #fff;
  border: 1px solid #2d261f;
  border-radius: 6px;
  padding: 0.8rem 1rem;
}
.radio-label input[type="radio"] {
  accent-color: #2d261f;
}

/* 確認セクションの余白（必要時） */
#confirmation-section {
  margin-top: 2rem;
}

/* 支払いセクション（Stripeカード） */
#payment-section {
  margin-top: 2rem;
}
.p-form__card {
  background: #fff;
  border: 1px solid #2d261f;
  border-radius: 6px;
  padding: 1rem;
}
.p-form__hint {
  text-align: center;
  font-size: 1.5rem;
  color: #6c757d;
  margin-top: 0.6rem;
}

/* 入力欄直下のエラーメッセージ */
.p-form__error {
  font-size: 1.5rem;
  color: #e74c3c;
  margin-top: 0.6rem;
}

/* 必須項目マーカー（入力前に表示する赤い*） */
.required-marker {
  color: #e74c3c;
  font-weight: 700;
  margin-right: 0.4rem;
  display: inline-block;
  line-height: 1;
}

/* 必須項目のラベル後に表示する注記 */
.required-note {
  color: #e74c3c;
  font-size: 14px;
  font-weight: 700;
  margin-left: 0.2rem;
}

/* 確認ページ（成功）追加調整 */
.p-form__confirm__head { text-align: center; }
.p-form__confirm__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  background: #e6f4ea; color: #2e7d32; font-weight: 700;
  margin-bottom: 0.4rem;
}
.p-form__confirm__message { color: #555; }
.p-form__dl__item--total dd { color: #f77a26; font-size: 1.8rem; }
.p-form__section__title { font-size: 1.6rem; }