@charset "UTF-8";
/* =========================================================
   enn. — booking-extra.css (v1.6.8)
   予約ページ v2 / 予約管理ページの追加スタイル (booking.css の上に重ねる)
   ========================================================= */
.booking-contact { margin-top: 0.8em; font-family: var(--gothic); font-size: 0.86rem; letter-spacing: 0.04em; color: var(--ink-2); }
.booking-contact a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 0.2em; }

/* 初めて / 2回目以降 */
.bk-visit { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6em; margin: 0 0 1.2em; }
.bk-visit-btn { font-family: var(--gothic); font-size: 0.86rem; letter-spacing: 0.1em; padding: 0.55em 1.2em; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: 999px; cursor: pointer; transition: all 0.3s var(--ease); }
.bk-visit-btn.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.bk-visit-label { font-family: var(--gothic); font-size: 0.78rem; color: var(--ink-3); letter-spacing: 0.04em; }
.bk-hair-notice { font-family: var(--gothic); font-size: 0.86rem; line-height: 1.9; color: var(--ink-2); background: var(--bg-warm); border: 1px solid var(--line); padding: 0.9em 1.1em; margin: 0 0 1.2em; }

/* カテゴリタブ */
.bk-tabs { display: flex; gap: 0.5em; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 0.4em; margin-bottom: 1em; scrollbar-width: none; }
.bk-tabs::-webkit-scrollbar { display: none; }
.bk-tab { flex: none; font-family: var(--gothic); font-size: 0.84rem; letter-spacing: 0.08em; padding: 0.55em 1.1em; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: 999px; cursor: pointer; white-space: nowrap; transition: all 0.3s var(--ease); }
.bk-tab.is-active { border-color: var(--gold); color: var(--gold-deep); background: var(--gold-soft); }
.bk-menu-desc { display: block; font-family: var(--gothic); font-size: 0.78rem; line-height: 1.7; color: var(--ink-3); margin-top: 0.3em; }
.bk-menu[hidden] { display: none; }

/* オプション */
.bk-options { margin-top: 1.4em; border: 1px solid var(--line); background: var(--surface); padding: 1em 1.2em; }
.bk-options-title { font-family: var(--mincho); font-size: var(--fz-0); letter-spacing: 0.08em; color: var(--ink); margin-bottom: 0.6em; }
.bk-option { display: grid; grid-template-columns: auto 1fr auto; gap: 0.8em; align-items: center; padding: 0.7em 0; border-top: 1px solid var(--line-soft); cursor: pointer; font-family: var(--gothic); }
.bk-option input { width: 18px; height: 18px; accent-color: var(--gold); }
.bk-option-name { font-size: 0.92rem; color: var(--ink); }
.bk-option-name small { display: block; font-size: 0.76rem; color: var(--ink-3); margin-top: 0.15em; }
.bk-option-meta { font-size: 0.86rem; color: var(--gold-deep); letter-spacing: 0.04em; white-space: nowrap; }
.bk-option.is-on { background: var(--gold-soft); margin: 0 -1.2em; padding-left: 1.2em; padding-right: 1.2em; }

/* 最短の空き */
.bk-earliest { font-family: var(--gothic); font-size: 0.9rem; letter-spacing: 0.04em; color: var(--ink); background: var(--gold-soft); border: 1px solid var(--gold); padding: 0.8em 1.1em; margin-bottom: 1em; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em 0.8em; }
.bk-earliest b { color: var(--gold-deep); font-weight: 500; }
.bk-earliest-btn { font-family: var(--gothic); font-size: 0.8rem; letter-spacing: 0.1em; padding: 0.45em 1em; border: 1px solid var(--gold); background: #fff; color: var(--gold-deep); border-radius: 999px; cursor: pointer; }
.bk-slots-note { font-family: var(--gothic); font-size: 0.78rem; color: var(--ink-3); margin-top: 0.8em; letter-spacing: 0.04em; }
.bk-calendar.is-loading { opacity: 0.5; pointer-events: none; }

/* お客様情報 */
.bk-member-done, .bk-member-hint { font-family: var(--gothic); font-size: 0.86rem; line-height: 1.8; padding: 0.8em 1.1em; margin-bottom: 1em; border: 1px solid var(--line); }
.bk-member-done { background: var(--gold-soft); border-color: var(--gold); color: var(--ink); }
.bk-member-hint { background: var(--bg-warm); color: var(--ink-2); }
.bk-member-hint a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 0.2em; }
.bk-opt { font-family: var(--gothic); font-size: 0.7rem; letter-spacing: 0.12em; color: var(--ink-3); border: 1px solid var(--line); padding: 0.1em 0.5em; margin-left: 0.4em; border-radius: 999px; vertical-align: middle; }
.bk-field-note { display: block; font-family: var(--gothic); font-size: 0.76rem; line-height: 1.7; color: var(--ink-3); margin-top: 0.4em; }
.bk-precheck { background: var(--bg-warm); border: 1px solid var(--line); padding: 1em 1.2em; }
.bk-check { display: flex; align-items: flex-start; gap: 0.7em; padding: 0.55em 0; font-family: var(--gothic); font-size: 0.9rem; line-height: 1.7; color: var(--ink); cursor: pointer; }
.bk-check input { width: 18px; height: 18px; margin-top: 0.2em; accent-color: var(--gold); flex: none; }

/* 確認 */
.bk-policy-box { font-family: var(--gothic); font-size: 0.86rem; line-height: 1.9; color: var(--ink-2); border: 1px solid var(--line); background: var(--surface); padding: 1em 1.2em; margin: 1.2em 0 1em; }
.bk-policy-title { font-family: var(--mincho); font-size: var(--fz-0); letter-spacing: 0.08em; color: var(--ink); margin-bottom: 0.3em; }
.bk-policy-box a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 0.2em; }
.bk-ticket-total dd small { font-size: 0.7em; margin-left: 0.5em; color: var(--ink-3); }

/* 完了 */
.bk-cal-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6em; margin: 1.4em 0 0; }
.bk-cal-btn { font-family: var(--gothic); font-size: 0.84rem; letter-spacing: 0.1em; padding: 0.7em 1.3em; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; transition: border-color 0.3s var(--ease); }
.bk-cal-btn:hover { border-color: var(--gold); }
.bk-manage { margin: 1.4em auto 0; max-width: 560px; font-family: var(--gothic); font-size: 0.86rem; line-height: 1.8; color: var(--ink-2); border: 1px solid var(--line); background: var(--bg-warm); padding: 1em 1.2em; text-align: center; }
.bk-manage small { font-size: 0.76rem; color: var(--ink-3); }
.bk-manage-link { display: inline-block; margin-top: 0.6em; color: var(--gold-deep); text-decoration: underline; text-underline-offset: 0.25em; word-break: break-all; }
.bk-prep, .bk-shopinfo { max-width: 560px; margin: 1.6em auto 0; text-align: left; font-family: var(--gothic); font-size: 0.88rem; line-height: 1.9; color: var(--ink-2); }
.bk-prep-list { list-style: none; padding: 0; }
.bk-prep-list li { position: relative; padding-left: 1.3em; }
.bk-prep-list li::before { content: ""; position: absolute; left: 0; top: 0.85em; width: 0.45em; height: 0.45em; border-radius: 50%; background: var(--gold); }
.bk-prep-list[hidden] { display: none; }

/* 下部の信頼要素 */
.bk-trust { max-width: 1080px; margin: clamp(2.4rem, 5vw, 4rem) auto 0; padding: clamp(1.6rem, 4vw, 3rem) var(--pad-x, 20px) 6rem; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(1.6rem, 4vw, 3rem); }
.bk-trust-reviews { grid-column: 1 / -1; }
.bk-trust-flow { list-style: none; padding: 0; }
.bk-trust-flow li { display: grid; grid-template-columns: 2em 1fr; gap: 0.6em; padding: 0.6em 0; border-top: 1px solid var(--line-soft); font-family: var(--gothic); }
.bk-trust-flow b { display: block; font-size: 0.92rem; color: var(--ink); font-weight: 500; }
.bk-trust-flow span { font-size: 0.8rem; line-height: 1.7; color: var(--ink-2); }
.bk-trust .faq-list { max-width: none; }
.bk-trust .faq-q { font-size: 0.95rem; }
.bk-trust .review-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.bk-trust-contact { grid-column: 1 / -1; font-family: var(--gothic); font-size: 0.86rem; color: var(--ink-2); text-align: center; margin-top: 0.4em; }
.bk-trust-contact a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 0.2em; }
.bk-summary .bk-sum-meta, .bk-summary .bk-sum-date, .bk-summary .bk-sum-opt { display: inline-block; margin-left: 0.8em; font-size: 0.82em; color: var(--ink-2); }

/* 予約管理ページ */
.booking-manage .mg-panel { max-width: 720px; margin-inline: auto; }
.mg-loading, .mg-notoken, .mg-error, .mg-locked, .mg-done { font-family: var(--gothic); font-size: 0.9rem; line-height: 1.9; color: var(--ink-2); }
.mg-notoken, .mg-error { border: 1px solid var(--line); background: var(--surface); padding: 1.2em 1.4em; }
.mg-notoken a, .mg-error a, .mg-done a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 0.2em; }
.mg-status { font-family: var(--gothic); font-size: 0.9rem; color: var(--ink); margin-bottom: 0.8em; display: flex; align-items: center; gap: 0.7em; flex-wrap: wrap; }
.mg-badge { font-size: 0.74rem; letter-spacing: 0.12em; padding: 0.3em 0.9em; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); }
.mg-badge.is-confirmed { border-color: var(--gold); color: var(--gold-deep); }
.mg-badge.is-cancelled, .mg-badge.is-no_show { background: var(--ink-3); color: #fff; border-color: var(--ink-3); }
.mg-locked { margin-top: 1em; padding: 0.9em 1.1em; background: var(--bg-warm); border: 1px solid var(--line); }
.mg-actions { display: flex; flex-wrap: wrap; gap: 0.8em; margin-top: 1.4em; }
.mg-btn { position: static; width: auto; }
.mg-btn-cancel { color: var(--ink-2); }
.mg-reschedule { margin-top: 1.6em; padding-top: 1.4em; border-top: 1px solid var(--line); }
.mg-done { margin-top: 1.4em; padding: 1em 1.2em; border: 1px solid var(--gold); background: var(--gold-soft); color: var(--ink); }