/* =========================================
   ABC Dental 下部固定 CTA バー
   ========================================= */

/* バー本体を覆い隠さないよう body に下余白 */
body {
    padding-bottom: 50px;
}

.abc-cta-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: #F5F0E8;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    box-sizing: border-box;
    z-index: 10050;
}

.abc-cta-bar__btn {
    flex: 1;
    border: 1px solid #1A2A4A;
    color: #1A2A4A;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: relative;
    padding-top: 10px;
    padding-bottom: 10px;
    /* !important: Astra テーマの a { text-decoration: underline } を上書きするため必要 */
    text-decoration: none !important;
    font-family: 'Hiragino Mincho ProN', 'Yu Mincho', serif;
    font-size: 14px;
    letter-spacing: 2px;
    box-sizing: border-box;
    transition: background-color 0.2s ease, color 0.2s ease;
    /* <button> 要素用 reset（<a> には無影響） */
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.abc-cta-bar__btn:hover,
.abc-cta-bar__btn:focus-visible {
    background: #1A2A4A;
    color: #F5F0E8;
}

.abc-cta-bar__btn:hover .abc-cta-bar__arrow line,
.abc-cta-bar__btn:hover .abc-cta-bar__arrow polyline,
.abc-cta-bar__btn:focus-visible .abc-cta-bar__arrow line,
.abc-cta-bar__btn:focus-visible .abc-cta-bar__arrow polyline {
    stroke: #F5F0E8;
}

/* Item 2 (Phase B 2026/04/20): 初めての方 CTA を中推奨強調
   flex 1.5 で横幅を 1.5 倍（他 CTA 比）、gold 左ライン 3px でアクセント、letter-spacing 3px で引き締め */
.abc-cta-bar__btn--first {
    flex: 1.5;
    border-left: 3px solid #C9A96E;
    letter-spacing: 3px;
}

.abc-cta-bar__label {
    font-weight: 400;
}
.abc-cta-bar__label--emphasis {
    font-weight: 500;
}

.abc-cta-bar__arrow {
    flex-shrink: 0;
}
.abc-cta-bar__arrow line,
.abc-cta-bar__arrow polyline {
    transition: stroke 0.2s ease;
}

/* =========================================
   ページ種別によるボタン表示切替
   ========================================= */

/* トップページ以外: 再診の方 ボタンを非表示 */
body:not(.home) .abc-cta-bar__btn--repeat {
    display: none;
}

/* トップページ: INDEX ボタンを非表示 */
body.home .abc-cta-bar__btn--menu {
    display: none;
}

/* /flow/ ページ上（page-id-33972）では非表示（循環リンク回避） */
body.page-id-33972 .abc-cta-bar {
    display: none;
}
body.page-id-33972 {
    padding-bottom: 0;
}

/* TODO: /reservation/ のページIDが判明したら同様のルールを追加
   例: body.page-id-XXXXX .abc-cta-bar { display: none; }
        body.page-id-XXXXX { padding-bottom: 0; } */