/* convert-bar.css — 底部固定 CTA 条（snippets/convert_bar.liquid 専用）。
   position:fixed は本文件のみ（body 内 inline position 禁止の thin-client 規約）。
   LINE 緑 #06C755 は R3 ブランド锁色（token 化しない・全页唯一の高饱和）；booking 分支は --convert-bg / --convert-fg。

   設計稿：条 = 页壳と同幅の全幅ブロック。故に「面板は全幅・内栏だけ页壳幅」の二層。
   内栏幅は var(--maxw)（页壳 / 水印页脚 / 本条で同じ token を引く = W16 が要求する三者同幅を
   一箇所で担保する。字面量で書くと改一処漏一処になる）。
   面板色 --bar-bg は页壳の外側に覗く帯の色（設計稿の body 底色と同じ）。视口が页壳より狭い時は
   緑の按钮が面板を覆い尽くすので見えない。
   R11：上緣 1px 分隔線あり・投影なし・pill は譲る（理由は convert_bar.liquid の注釈）。 */
.convert-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  background: var(--bar-bg);
  border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  z-index: 60;
  /* 既定は隐れた状態。app.js が [data-main-cta]（hero と 予約段の大按钮）を observe し、
     どちらも視口外の時だけ --shown を付ける（R11 の「滚过首屏后に出る」＋ 同じ入口を二重に出さない）。
     JS が動かない環境では条が出ないが、予約入口は页尾の大按钮（R11 の主渲染位）が受ける。 */
  transform: translateY(110%);
  transition: transform 0.35s ease;
}
.convert-bar--shown { transform: translateY(0); }
.convert-bar-inner {
  box-sizing: border-box;
  max-width: var(--maxw);
  margin: 0 auto;
}
/* 条それ自体が按钮：全幅・2 行（主行 + 副行）・上下 15px + safe-area（設計稿と同値）。 */
.convert-bar-cta {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  padding: 15px 16px calc(15px + env(safe-area-inset-bottom));
  border-radius: var(--radius);
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.convert-bar-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--stack-body);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.4;
  letter-spacing: 0.14em;
}
/* LINE アイコン（kind == 'line' 分支のみ）。flex:none = 文言が長くても潰れない。 */
.convert-bar-icon { flex: none; display: block; }
.convert-bar-sub {
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  opacity: 0.94;
}
.convert-bar-cta--line { background: #06C755; color: #FFFFFF; }
.convert-bar-cta--line:hover { background: #05B44C; color: #FFFFFF; }
.convert-bar-cta--booking { background: var(--convert-bg); color: var(--convert-fg); }
.convert-bar-cta--booking:hover { opacity: 0.92; color: var(--convert-fg); }
@media (prefers-reduced-motion: reduce) {
  .convert-bar, .convert-bar-cta { transition: none; }
}