/* assets/form.css */
.tcbn-reserve{
  --ink:#201010;
  --muted:#6f625e;
  --line:#e8e2de;
  --paper:#fff;
  --bg:#faf7f4;
  --brand:#D05090;
  --brand2:#E070A0;
  --brandSoft: rgba(208,80,144,.12);
  --focus: rgba(208,80,144,.18);
  --radius:12px;
  font-family:"Noto Sans JP",system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--ink);
}
.tcbn-steps{
  display:flex;
  gap:10px;
  margin:0 0 14px;
  flex-wrap:nowrap;         /* 縦積みにしない */
  overflow-x:auto;          /* 画面が狭ければ横スクロール */
  -webkit-overflow-scrolling:touch;
  padding-bottom:6px;
}
.tcbn-step{
  flex:0 0 auto;
  min-width: 140px;         /* SPで潰れすぎない */
}
.tcbn-step{
  flex:1; padding:10px 12px; border:1px solid var(--line); border-radius:12px;
  background:#fff; font-weight:700; letter-spacing:.02em;
  display:flex; justify-content:space-between; align-items:baseline;
}
.tcbn-step span{font-weight:600;color:var(--muted);font-size:12px}
.tcbn-step{
  position:relative;
}
.tcbn-step.is-active{
  border-color:rgba(210,34,34,.55);
  box-shadow:0 8px 20px rgba(0,0,0,.06);
}
.tcbn-step.is-active::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:8px;
  height:3px;
  border-radius:999px;
  background: rgba(210,34,34,.85);
}
.tcbn-card{
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  padding:18px;
  box-shadow:0 14px 34px rgba(0,0,0,.08);
}
.tcbn-pane{display:none}
.tcbn-pane.is-active{display:block}

.tcbn-title{font-size:18px;margin:0 0 6px}
.tcbn-lead{margin:0 0 16px;color:var(--muted);line-height:1.6}

.tcbn-field{margin:0 0 14px}
.tcbn-label{display:flex;gap:8px;align-items:center;font-weight:700;margin:0 0 6px}
.tcbn-req{
  font-size:12px; font-weight:800; color:#fff; background:var(--brand);
  padding:2px 8px; border-radius:999px;
}
.tcbn-opt{
  font-size:12px; font-weight:800; color:var(--muted); background:#f2eeeb;
  padding:2px 8px; border-radius:999px;
}
.tcbn-input{
  width:100%;
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 12px;
  font-size:15px;
  background:#fff;
}
.tcbn-input:focus{outline:none;border-color:rgba(210,34,34,.45);box-shadow:0 0 0 3px rgba(210,34,34,.12)}
.tcbn-hint{font-size:12px;color:var(--muted);margin-top:6px}

.tcbn-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width: 760px){
  .tcbn-grid2{grid-template-columns:1fr}
}

.tcbn-pref{
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  background:var(--bg);
  margin:0 0 12px;
}
.tcbn-pref-head{
  display:flex; justify-content:space-between; align-items:center;
  margin:0 0 10px;
}
.tcbn-pref-title{font-weight:900}
.tcbn-pref-del{
  border:1px solid var(--line); background:#fff; border-radius:999px;
  padding:6px 10px; cursor:pointer;
}

.tcbn-chips{display:flex;gap:8px;flex-wrap:wrap}
.tcbn-chip{
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  padding:10px 12px;
  font-weight:800;
  cursor:pointer;
}
.tcbn-chip input{margin-right:6px}
.tcbn-chip:has(input:checked){
  border-color:rgba(210,34,34,.5);
  box-shadow:0 8px 18px rgba(210,34,34,.12);
}

.tcbn-row{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 12px}
.tcbn-nav{display:flex;gap:10px;justify-content:flex-end;margin-top:10px}

.tcbn-btn{
  border-radius:12px;
  padding:12px 14px;
  font-weight:900;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
}
.tcbn-btn:disabled{opacity:.55;cursor:not-allowed}
.tcbn-btn-primary{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
}
.tcbn-btn-sub{
  background:#fff;
}

.tcbn-alert{
  border-radius:12px;
  padding:12px 12px;
  margin:10px 0 0;
  font-weight:800;
}
.tcbn-alert-error{background:#fff3f3;border:1px solid #f2c2c2}
.tcbn-alert-ok{background:#f1fff3;border:1px solid #bfe7c6}

/* Calendar */
.tcbn-cal{
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  overflow:hidden;
}
.tcbn-cal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 10px;
  border-bottom:1px solid var(--line);
  background:#fff;
}
.tcbn-cal-title{font-weight:900}
.tcbn-cal-nav{
  width:36px;height:32px;border-radius:10px;border:1px solid var(--line);
  background:#fff;cursor:pointer;font-weight:900;
}
.tcbn-cal-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.tcbn-cal-week{background:#faf7f4;border-bottom:1px solid var(--line)}
.tcbn-cal-w{padding:8px 0;text-align:center;font-weight:900;color:var(--muted);font-size:12px}

.tcbn-cal-days{padding:8px}
.tcbn-cal-cell{
  height:40px;border-radius:10px;border:1px solid transparent;background:#fff;
  cursor:pointer;font-weight:900;
}
.tcbn-cal-cell:hover{border-color:rgba(35,24,20,.15);background:#faf7f4}
.tcbn-cal-cell.is-selected{
  border-color:rgba(210,34,34,.55);
  background:rgba(210,34,34,.08);
}
.tcbn-cal-cell.is-disabled{
  opacity:.35; cursor:not-allowed;
}
.tcbn-cal-cell.is-empty{background:transparent;border:0}


/* =========================================================
   Step UI = breadcrumb style (connected + ">" divider)
========================================================= */

/* 全体を1本の帯にする */
.tcbn-reserve .tcbn-steps{
  display:flex;
  gap:0;                      /* 空白をなくす */
  margin:0 0 14px;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background:#fff;

  /* SPでも横並び維持 */
  flex-wrap:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.tcbn-reserve .tcbn-steps::-webkit-scrollbar{display:none;}

/* 各ステップ：繋がったパーツ */
.tcbn-reserve .tcbn-step{
  flex:0 0 auto;
  min-width: 160px;           /* SPでも潰れにくく */
  padding:10px 14px;
  border:0;
  background:transparent;
  border-right:1px solid var(--line);
  border-radius:0;
  box-shadow:none;
  position:relative;
  cursor:pointer;             /* “戻れる”のでポインタ */
}

/* 区切りを ">" に（最後以外） */
.tcbn-reserve .tcbn-step:not(:last-child){
  padding-right:34px;         /* > の分 */
}
.tcbn-reserve .tcbn-step:not(:last-child)::after{
  content: ">";
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  color: rgba(32,16,16,.22);  /* 主張しすぎない */
  font-weight:900;
}

/* 最後は右線なし */
.tcbn-reserve .tcbn-step:last-child{
  border-right:0;
}

/* 文字組 */
.tcbn-reserve .tcbn-step{
  font-weight:900;
  letter-spacing:.01em;
  color:var(--ink);
}
.tcbn-reserve .tcbn-step span{
  display:block;
  margin-top:2px;
  font-weight:700;
  font-size:12px;
  color:var(--muted);
}

/* 現在ステップ：下線ではなく “薄塗り” */
.tcbn-reserve .tcbn-step.is-active{
  background: var(--brandSoft);
}
.tcbn-reserve .tcbn-step.is-active span{
  color: rgba(32,16,16,.78);
}

/* “未来”ステップは薄くして迷いを減らす（JSで class is-disabled を付けます） */
.tcbn-reserve .tcbn-step.is-disabled{
  opacity:.55;
  cursor:default;
}

/* 戻れるステップのホバー（PC） */
@media (hover:hover){
  .tcbn-reserve .tcbn-step.is-backable:hover{
    background: rgba(0,0,0,.03);
  }
}

/* PCでも全体を真ん中に */
.tcbn-reserve{
  --wrap: 960px; /* お好みで 900〜1100px */
}
.tcbn-reserve .tcbn-steps,
.tcbn-reserve .tcbn-card{
  max-width: var(--wrap);
  margin-left: auto;
  margin-right: auto;
}

/* --- 謎ライン対策：過去の疑似要素（下線バー等）を強制無効化 --- */
.tcbn-reserve .tcbn-step::before{
  content: none !important;
}
.tcbn-reserve .tcbn-step.is-active::after{
  /* 旧CSSで is-active::after にバーを出していた場合があるのでリセット */
  background: none !important;
  height: auto !important;
  box-shadow: none !important;
}

/* --- パンくず（繋げて > 区切り）を全デバイスで統一 --- */
.tcbn-reserve .tcbn-steps{
  display:flex;
  gap:0 !important;                /* 空白ゼロ */
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
}

/* 各ステップを“3等分”寄りに（SPで見切れ防止にも効く） */
.tcbn-reserve .tcbn-step{
  flex:1 1 0;
  min-width:0;                     /* これがないとSPで見切れやすい */
  padding:10px 12px;
  border:0;
  border-right:1px solid var(--line);
  border-radius:0;
  background:transparent;
  position:relative;
  cursor:pointer;
  white-space:nowrap;
}

/* 最後は右線なし */
.tcbn-reserve .tcbn-step:last-child{
  border-right:0;
}

/* “>” 区切り（最後以外） */
.tcbn-reserve .tcbn-step:not(:last-child){
  padding-right:26px;              /* > の分だけ余白 */
}
.tcbn-reserve .tcbn-step:not(:last-child)::after{
  content: ">";
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  color: rgba(32,16,16,.22);
  font-weight:900;
  line-height:1;
}

/* 現在ステップ：下線ではなく薄塗り */
.tcbn-reserve .tcbn-step.is-active{
  background: var(--brandSoft, rgba(208,80,144,.12));
}

/* 未来ステップは押せない（JSで is-disabled を付ける前提） */
.tcbn-reserve .tcbn-step.is-disabled{
  opacity:.55;
  cursor:default;
}

/* ステップ内テキスト：はみ出し対策 */
.tcbn-reserve .tcbn-step{
  font-size:13px;
  font-weight:900;
  color:var(--ink);
}
.tcbn-reserve .tcbn-step span{
  display:block;
  margin-top:2px;
  font-size:12px;
  font-weight:700;
  color:var(--muted);
  overflow:hidden;
  text-overflow:ellipsis;
}

/* SPで“3つを1画面に確実に収める” */
@media (max-width: 760px){
  .tcbn-reserve .tcbn-steps{
    overflow: visible !important;  /* 横スクロールさせない */
  }
  .tcbn-reserve .tcbn-step{
    padding:9px 10px;
  }
  .tcbn-reserve .tcbn-step:not(:last-child){
    padding-right:18px;
  }
  .tcbn-reserve .tcbn-step:not(:last-child)::after{
    right:6px;
  }
  .tcbn-reserve .tcbn-step{ font-size:12px; }
  .tcbn-reserve .tcbn-step span{ font-size:11px; }
}