/* ============================================================
   浅草相撲部屋 予約ページ専用スタイル
   追記場所: /wp-content/themes/asakusasumo-themes/style.css 末尾
   または functions.php で wp_enqueue_style() して別ファイル読み込み
   ============================================================ */

/* ---------- パターン切替タブ（確認用・本番では .reserve-pattern-tabs { display:none } でOK） ---------- */
.reserve-pattern-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: #f5f0e8;
  font-size: 12px;
  flex-wrap: wrap;
}
.rpt-label { color: #888; }
.rpt-tab {
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid #c8b89a;
  color: #7a3b1e;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  transition: all .15s;
}
.rpt-tab.is-active,
.rpt-tab:hover { background: #7a3b1e; color: #fff; border-color: #7a3b1e; }

/* ---------- レイアウト ---------- */
.reserve-page { padding: 40px 0 80px; }
.reserve-wrap {
  max-width: 520px;
  margin: 0 auto;
  padding: 0 20px;
}
.reserve-container { width: 100%; }

/* ---------- スクリーン制御 ---------- */
.rs-screen { display: none; }
.rs-screen.is-active { display: block; }

/* ---------- ステッパー ---------- */
.rs-stepper {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.rs-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.rs-step__num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid #ccc;
  background: #f5f0e8;
  color: #999;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
}
.rs-step.is-active .rs-step__num { background: #7a3b1e; color: #fff; border-color: #7a3b1e; }
.rs-step.is-done .rs-step__num   { background: #d4edda; color: #2d6a4f; border-color: #2d6a4f; }
.rs-step__label { font-size: 9px; color: #aaa; white-space: nowrap; }
.rs-step.is-active .rs-step__label { color: #7a3b1e; }
.rs-step-line { flex: 1; height: 1px; background: #e0d8cc; margin: 0 2px; }

/* ---------- プログレスバー ---------- */
.rs-progress { height: 3px; background: #ede8df; border-radius: 2px; margin-bottom: 24px; }
.rs-progress__fill { height: 100%; background: #7a3b1e; border-radius: 2px; transition: width .3s; }

/* ---------- セクションラベル ---------- */
.rs-section-label {
  font-size: 10px;
  font-weight: 700;
  color: #999;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 10px;
}

/* ---------- プランカード ---------- */
.rs-plan-card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border .15s;
}
.rs-plan-card:last-of-type { margin-bottom: 0; }
.rs-plan-card.is-selected { border: 2px solid #c8933a; }
.rs-plan-card--annex.is-selected { border: 2px solid #534AB7; }

.rs-plan-card__inner { display: flex; align-items: flex-start; gap: 10px; }
.rs-plan-card__info  { flex: 1; }
.rs-plan-card__name  { font-size: 13px; font-weight: 700; color: #1a0a00; margin: 0 0 3px; }
.rs-plan-card__desc  { font-size: 11px; color: #666; margin: 0 0 5px; line-height: 1.5; }
.rs-plan-card__price { font-size: 12px; font-weight: 700; color: #7a3b1e; margin: 0; }
.rs-plan-card__price--annex { color: #3C3489; }

/* ---------- ラジオボタン ---------- */
.rs-radio {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid #ccc;
  flex-shrink: 0;
  margin-top: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}
.rs-radio.is-on { background: #7a3b1e; border-color: #7a3b1e; }
.rs-radio.is-on::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; }

/* ---------- バッジ ---------- */
.rs-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 5px;
  font-weight: 600;
}
.rs-badge--popular { background: #fdf3e7; color: #7a3b1e; }
.rs-badge--luxury  { background: #f0eaf8; color: #3C3489; }
.rs-badge--eq      { background: #e8f4fd; color: #0c447c; }

/* ---------- フォーム ---------- */
.rs-field-row { display: flex; gap: 10px; margin-bottom: 12px; }
.rs-field-row > .rs-field { flex: 1; min-width: 0; }
.rs-field { margin-bottom: 0; }
.rs-field__label { display: block; font-size: 10px; color: #888; margin-bottom: 4px; font-weight: 600; }
.rs-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 13px;
  color: #222;
  background: #faf9f7;
  -webkit-appearance: none;
}
.rs-input:focus { outline: none; border-color: #c8933a; }

/* ---------- ボタン ---------- */
.rs-btn {
  display: block;
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: opacity .15s;
  margin-bottom: 8px;
  text-decoration: none;
}
.rs-btn:last-child { margin-bottom: 0; }
.rs-btn:hover { opacity: .88; }
.rs-btn--primary { background: #7a3b1e; color: #fff; }
.rs-btn--outline  { background: #f5f0e8; color: #333; border: 1px solid #ccc; }
.rs-btn--annex    { background: #3C3489; color: #fff; }
.rs-btn--sm { font-size: 12px; padding: 8px 12px; }

/* ---------- 空き状況リスト ---------- */
.rs-avail-list { margin-bottom: 16px; }
.rs-avail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #f0ece6;
}
.rs-avail-row:last-child { border-bottom: none; }
.rs-avail-time { font-size: 14px; font-weight: 700; color: #1a0a00; margin: 0 0 2px; }
.rs-avail-note { font-size: 11px; color: #888; margin: 0; }

/* ---------- ステータスタグ ---------- */
.rs-tag {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 700;
  white-space: nowrap;
}
.rs-tag--full { background: #fde8e8; color: #a32d2d; }
.rs-tag--few  { background: #fff4d6; color: #854f0b; }
.rs-tag--open { background: #d4edda; color: #2d6a4f; }

/* ---------- ANNEXバナー ---------- */
.rs-annex-banner {
  border: 2px solid #c8933a;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: background .15s;
}
.rs-annex-banner:hover { background: #fffbf5; }
.rs-annex-banner__eye   { font-size: 10px; color: #c8933a; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; margin: 0 0 4px; }
.rs-annex-banner__title { font-size: 15px; font-weight: 700; color: #1a0a00; margin: 0 0 4px; }
.rs-annex-banner__sub   { font-size: 12px; color: #666; margin: 0; line-height: 1.5; }

/* ---------- ピル・スロット ---------- */
.rs-pill-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.rs-pill {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 20px;
  background: #f5f0e8;
  color: #666;
}
.rs-slot-row, .rs-slot-list { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.rs-slot {
  padding: 5px 13px;
  border: 1px solid #ddd;
  border-radius: 20px;
  font-size: 12px;
  color: #444;
  background: #f5f0e8;
  cursor: pointer;
  transition: all .15s;
}
.rs-slot.is-selected { background: #7a3b1e; color: #fff; border-color: #7a3b1e; }

/* ---------- モーダルヘッド ---------- */
.rs-modal-head {
  background: #1a0a00;
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 14px;
}
.rs-modal-head__pre   { font-size: 10px; color: #c8933a; text-transform: uppercase; letter-spacing: .07em; margin: 0 0 4px; font-weight: 700; }
.rs-modal-head__title { font-size: 16px; font-weight: 700; color: #fff; margin: 0 0 5px; }
.rs-modal-head__sub   { font-size: 12px; color: #c8933a; margin: 0; line-height: 1.5; }

/* ---------- お知らせボックス ---------- */
.rs-notice {
  background: #fdf3e7;
  border-left: 3px solid #c8933a;
  padding: 8px 12px;
  font-size: 12px;
  color: #7a3b1e;
  line-height: 1.6;
  margin-bottom: 14px;
  border-radius: 0 8px 8px 0;
}

/* ---------- 確認ボックス ---------- */
.rs-confirm-box {
  background: #faf9f7;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.rs-confirm-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid #f0ece6;
  font-size: 13px;
}
.rs-confirm-row:last-child { border-bottom: none; }
.rs-confirm-label { color: #888; }
.rs-confirm-val   { font-weight: 700; color: #1a0a00; }

/* ---------- BOKUNボタン注記 ---------- */
.rs-bokun-note {
  text-align: center;
  font-size: 11px;
  color: #aaa;
  margin-top: 8px;
}

/* ---------- 区切り線 ---------- */
.rs-divider { border: none; border-top: 1px solid #ede8df; margin: 14px 0; }

/* ---------- アコーディオン（Pattern B / C） ---------- */
.rs-acc {
  border: 1px solid #ddd;
  border-radius: 10px;
  margin-bottom: 8px;
  overflow: hidden;
}
.rs-acc__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  cursor: pointer;
  background: #fff;
  transition: background .15s;
}
.rs-acc__head:hover { background: #faf9f7; }
.rs-acc__name  { font-size: 13px; font-weight: 700; color: #1a0a00; margin: 0 0 2px; }
.rs-acc__sub   { font-size: 11px; color: #888; margin: 0; }
.rs-acc__right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.rs-acc__price { font-size: 13px; font-weight: 700; color: #7a3b1e; }
.rs-acc__chev  { font-size: 11px; color: #aaa; transition: transform .2s; }
.rs-acc__chev.is-open { transform: rotate(180deg); }
.rs-acc__body  {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease, padding .2s;
  padding: 0 14px;
  background: #faf9f7;
}
.rs-acc.is-open .rs-acc__body { max-height: 300px; padding: 12px 14px; }
.rs-acc__grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.rs-acc__gl    { font-size: 10px; color: #aaa; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 2px; }
.rs-acc__gv    { font-size: 13px; color: #1a0a00; font-weight: 600; margin: 0; }

/* ---------- クイックプラン選択（Pattern C） ---------- */
.rs-quick-plans { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.rs-qp {
  flex: 1;
  min-width: 80px;
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #444;
  background: #f5f0e8;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transition: all .15s;
}
.rs-qp span { font-size: 10px; font-weight: 400; color: #888; }
.rs-qp.is-selected { background: #7a3b1e; color: #fff; border-color: #7a3b1e; }
.rs-qp.is-selected span { color: #f5c89a; }

/* ---------- 体験ステップ（Pattern C） ---------- */
.rs-step-item { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.rs-step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #7a3b1e;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.rs-step-txt { font-size: 13px; color: #444; line-height: 1.6; margin: 0; }

/* ---------- スキップリンク（Pattern C） ---------- */
.rs-skip-link {
  display: block;
  text-align: center;
  font-size: 12px;
  color: #7a3b1e;
  text-decoration: underline;
  margin-top: 8px;
  cursor: pointer;
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 480px) {
  .reserve-wrap { padding: 0 14px; }
  .rs-stepper   { gap: 0; }
  .rs-step__label { display: none; }
  .rs-field-row { flex-direction: column; gap: 8px; }
  .rs-quick-plans .rs-qp { min-width: 70px; font-size: 12px; }
}