/**
 * 予約フォーム（/reserve/）のスタイル。
 *
 * 色・角丸・書体は、既存テーマ（style.css の :root デザイントークン、
 * assets/css/main.css の .btn 系クラス）に実在する値をそのまま使う。
 * 「赤いボタンではなく、既存HPと同じ緑系デザインに合わせる」という
 * 要件のため、色を推測せず fukugakuru-care-taxi/style.css を直接確認して
 * 転記した（--color-primary: #2f7a68 など）。
 *
 * CSS変数（var(--color-primary)等）は算出値の時点で解決されるため、
 * このファイルの読み込み順がテーマのstyle.cssより前でも後でも、
 * 実際に描画されるときにはテーマの:root値が反映される。値が見つからない
 * 万一の場合に備えて、各var()には同じ値をフォールバックとして必ず添える。
 *
 * 要件との対応:
 * - 高齢の利用者にも読みやすいコントラスト・タップ領域(44px以上)
 * - 「戻る」ボタンは「次へ」等の主要ボタンとはっきり区別する（枠線のみ vs 塗り）
 * - 状態（エラー・成功・注記）を色だけに頼らず記号でも示す
 * - モバイルで横スクロールが発生しない
 */

.hkb-booking-form,
.hkb-booking-form-placeholder {
	font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif);
	font-size: 1.15rem;
	line-height: 1.8;
	max-width: 640px;
	margin: 0 auto;
	color: var(--color-text, #2b2a26);
	box-sizing: border-box;
}

.hkb-booking-form *,
.hkb-booking-form *::before,
.hkb-booking-form *::after {
	box-sizing: border-box;
}

.hkb-booking-form h2 {
	font-size: 1.4rem;
	color: var(--color-text, #2b2a26);
}

.hkb-booking-form h3 {
	font-size: 1.1rem;
	color: var(--color-text, #2b2a26);
}

.hkb-booking-form .hkb-progress {
	font-size: 1rem;
	color: var(--color-text-sub, #6b6860);
	margin-bottom: 1em;
}

/* v0.9.20（要件5: 「一つ前に戻る」導線）: 進捗表示の直前に1つだけ置く
   リンク風のボタン（9項目すべてを並べるパンくずではない）。見た目上は
   リンクだが実体は既存の「戻る」ボタンと同じ<button type="submit"
   name="hkb_action" value="back">のため、押しやすさ（44px以上の
   タップ領域）は通常のボタンと同じ基準で確保しつつ、画面下部の主要な
   「次へ」「戻る」ボタンとは視覚的に区別する（枠線・塗りを持たない）。
   固定CTAバー（画面下部）とは離れた位置（進捗表示の直前）にあるため、
   .mobile-cta-bar関連の重なり対策は不要。 */
.hkb-booking-form .hkb-quick-back {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin: 0 0 0.6em;
	padding: 0.4em 0.2em;
	border: none;
	background: none;
	color: var(--color-primary-dark, #1f5b4c);
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
}

.hkb-booking-form .hkb-quick-back:focus-visible {
	outline: 3px solid var(--color-primary, #2f7a68);
	outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
	.hkb-booking-form .hkb-quick-back:hover {
		color: var(--color-primary, #2f7a68);
	}
}

.hkb-booking-form label {
	display: block;
	font-weight: 700;
	margin: 1.2em 0 0.4em;
}

.hkb-booking-form .hkb-field-hint {
	font-size: 0.9rem;
	color: var(--color-text-sub, #6b6860);
	margin: 0 0 0.5em;
}

/* v0.9.5（要件4）: モバイル表示を基準に、テキストボックス・セレクトボックス・
   検索欄をフォーム全体で統一する。以前は420pxという固定上限があり、
   フォームコンテナ自体の最大幅（640px、.hkb-booking-form参照）より狭い
   ため、画面によって入力欄の右端が余ったり、ボタン行（.hkb-buttons、
   下記）の幅と揃わなかったりしていた。max-width自体を撤廃し、
   box-sizing: border-box（33-37行目で*全体に適用済み）と組み合わせて
   width:100%のみでコンテナ幅いっぱいに揃える——ステップごとに入力欄の
   実際の幅が変わることが無くなる。PC幅でもコンテナ自体の640px上限は
   変えていないため、不自然な全幅化にはならない。 */
.hkb-booking-form input[type="text"],
.hkb-booking-form input[type="tel"],
.hkb-booking-form input[type="email"],
.hkb-booking-form input[type="number"],
.hkb-booking-form input[type="date"],
.hkb-booking-form input[type="time"],
.hkb-booking-form input[type="search"],
.hkb-booking-form textarea,
.hkb-booking-form select {
	font: inherit;
	font-size: 1.15rem;
	padding: 0.6em;
	width: 100%;
	/* v0.9.10（本番のLINE内iPhoneで発見・修正）: width:100%だけでは、
	   iOS SafariやLINEアプリ内ブラウザ（同じWebKitエンジン）が
	   input[type="date"]をネイティブの日付ピッカーUIとして描画する際、
	   内部の「年/月/日＋カレンダーアイコン」セグメント（UA内部の
	   ::-webkit-datetime-edit疑似要素）に固有の実測サイズを持たせ、
	   指定したwidthを超えて描画してしまうことがある（Chromiumでは
	   再現しない、WebKit固有の既知の挙動）。max-width:100%を明示して
	   上限として効かせ、下のinput[type="date"]専用ルールで内部疑似
	   要素自体の幅も明示的にコンテナへ合わせる。 */
	max-width: 100%;
	min-width: 0;
	min-height: 44px;
	border: 1px solid var(--color-border, #e2ded2);
	border-radius: 8px;
	background: var(--color-bg, #ffffff);
	color: var(--color-text, #2b2a26);
}

/* v0.9.10: iOS Safari/LINE内ブラウザ（WebKit）でinput[type="date"]の
   内部セグメントがコンテナ幅を超えて描画される既知の問題への対処。
   これらの疑似要素はWebKit系エンジンにのみ存在し、他エンジンでは
   単に無視される（安全に無害）。 */
.hkb-booking-form input[type="date"]::-webkit-date-and-time-value {
	width: 100%;
	text-align: left;
}

.hkb-booking-form input[type="date"]::-webkit-datetime-edit,
.hkb-booking-form input[type="date"]::-webkit-datetime-edit-fields-wrapper {
	width: 100%;
	max-width: 100%;
}

/* v0.9.20（スマホで「ご利用日」欄が「次へ」ボタンと左右で揃わない）:
   input[type="date"]に`appearance`を明示していなかったため、WebKit系
   エンジン（iOS Safari・LINEアプリ内ブラウザ）が自身のネイティブUI
   （カレンダーアイコン領域を含む）向けに予約する内部の最小サイズ・
   余白を、このファイルが指定するpadding/box-sizingとは別に上乗せで
   確保することがある（Chromiumでは标準のフォーム部品スタイルの扱いが
   異なるため再現しない——実機調査でも本番のChromium版では左右端が
   一致していた）。`appearance: none`でブラウザ独自の外観を解除し、
   このファイル自身が指定するborder/padding/box-sizingだけで見た目が
   決まるようにする——ネイティブの日付ピッカー機能（タップでカレンダーが
   開く挙動）自体はappearanceの解除では失われない（type="date"という
   input自体の機能はそのまま）。 */
.hkb-booking-form input[type="date"] {
	appearance: none;
	-webkit-appearance: none;
}

.hkb-booking-form textarea {
	min-height: 7em;
	resize: vertical;
}

.hkb-booking-form input:focus-visible,
.hkb-booking-form textarea:focus-visible,
.hkb-booking-form select:focus-visible {
	outline: 3px solid var(--color-primary, #2f7a68);
	outline-offset: 1px;
}

/* P0（v0.9.3）: 郵便番号入力欄＋「郵便番号から住所を検索」ボタン。
   狭い画面でもボタンがはみ出さないよう折り返す。 */
.hkb-booking-form .hkb-postal-lookup {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em;
	align-items: center;
	margin-bottom: 1em;
}

.hkb-booking-form .hkb-postal-lookup input {
	flex: 1 1 10em;
	max-width: 12em;
	margin: 0;
}

.hkb-booking-form .hkb-postal-lookup button {
	flex: 0 0 auto;
	margin: 0;
}

/* v0.9.4（要件7）: 行き先の「住所から探す」展開欄。<details>/<summary>は
   ブラウザ標準の開閉機能を使うため、JavaScript無効時も操作可能。 */
.hkb-booking-form .hkb-postal-details {
	margin: 0.8em 0 1.2em;
}

.hkb-booking-form .hkb-postal-details summary {
	cursor: pointer;
	color: var(--color-primary, #2f7a68);
	font-weight: 600;
	padding: 0.4em 0;
}

.hkb-booking-form .hkb-postal-details summary:focus-visible {
	outline: 3px solid var(--color-primary, #2f7a68);
	outline-offset: 2px;
}

.hkb-booking-form .hkb-postal-details[open] summary {
	margin-bottom: 0.6em;
}

/* Stage 2 item 3（不具合修正、利用者からの明示的な指示: 「選択肢の枠
   全体をタップ/クリック可能にする」）: 以前は<div class="hkb-radio-option">
   の中にinputとlabelが兄弟要素として並んでいるだけで、labelはテキスト
   幅しか持たず（下の旧`label`ルール参照）、箱の余白（padding）部分は
   クリックに反応しなかった。この要素自体を<label>にする
   （templates/public/steps/*.php・partials/leg-options.php・
   management/cancel-confirm.php・change-intro.php、全箇所で共通）ことで、
   ブラウザのネイティブなlabel-input関連付けにより、paddingの内側
   どこをクリック/タップしてもinputへ委譲されるようになる。cursor:pointer
   で、箱全体が操作可能であることを視覚的にも示す。 */
.hkb-booking-form .hkb-radio-option {
	display: block;
	margin: 0.6em 0;
	padding: 0.7em;
	border: 1px solid var(--color-border, #e2ded2);
	border-radius: var(--radius-card, 16px);
	cursor: pointer;
}

/* 要素自体が<label>になったため、内側のテキストは<span>（旧: 入れ子の
   <label for="...">）。 */
.hkb-booking-form .hkb-radio-option span {
	display: inline;
	font-weight: normal;
	margin: 0 0 0 0.5em;
}

/* Google Places API (New) Autocompleteの候補一覧に必須の帰属表示（ロゴ）。
   docs/ops/GOOGLE_MAPS_SETUP.md参照。公式仕様どおりの余白
   （左右上10dp・下5dp相当）を確保し、ロゴ自体の縦横比・色は一切変更しない
   （widthは指定せずheightのみ固定し、ブラウザに縦横比を維持させる）。 */
.hkb-booking-form .hkb-google-attribution {
	margin: 0 0 0.8em;
	padding: 10px 10px 5px;
	line-height: 0; /* imgの下に生じる余分な行間スペースを消し、余白をpaddingだけで制御する。 */
}

.hkb-booking-form .hkb-google-attribution__logo {
	display: inline-block;
	height: 18px; /* 公式仕様: 16dp以上19dp以下。 */
	width: auto;  /* 縦横比を変えない。ロゴの変形・加工は行わない。 */
	max-width: 100%;
}

.hkb-booking-form .hkb-buttons {
	margin-top: 1.6em;
	display: flex;
	flex-wrap: wrap;
	gap: 0.8em;
}

/* v0.9.5（要件4）: 「次へ」「戻る」「確定」（この場所に決める・この内容で
   申し込む等、テキストの長さは画面ごとに異なる）が、以前はボタン内の
   文字数に応じた自然な幅のままだったため、画面ごとに大きさが揃わなかった。
   flex: 1 1 0で同じ行にある全ボタンを常に等幅にする——ボタン行全体の
   幅（.hkb-buttonsの親である.hkb-booking-formのmax-width基準）はどの
   画面でも同じため、結果としてボタンの実際の幅もステップをまたいで
   揃う。min-width:0は、長いラベル（「この内容で申し込む」等）がflexの
   既定最小幅によって縮小しきれず隣のボタンを圧迫するのを防ぐ。 */
.hkb-booking-form .hkb-buttons button {
	flex: 1 1 0;
	min-width: 0;
}

/* 利用規約・プライバシーポリシーへの同意チェックボックス（確認画面のみ）。
   docs/adr-wp/0009-legal-consent.md、要件8: 高齢者向けにチェック領域・
   文字・リンクを十分大きくする。チェックボックス自体を拡大し、ラベル全体
   （文字部分を含む）をクリック/タップ可能にすることで、実質的な
   タップ領域を広く確保する（WCAG 2.5.5相当、最小44px角を目安にする）。 */
.hkb-booking-form .hkb-consent-block {
	margin: 1.4em 0;
	padding: 0.9em 1em;
	border: 2px solid var(--color-border, #e2ded2);
	border-radius: var(--radius-card, 16px);
	background: var(--color-bg-soft, #faf8f2);
}

.hkb-booking-form .hkb-consent-label {
	display: flex;
	align-items: flex-start;
	gap: 0.7em;
	font-size: 1.1rem;
	line-height: 1.6;
	cursor: pointer;
}

.hkb-booking-form .hkb-consent-label input[type="checkbox"] {
	flex-shrink: 0;
	width: 1.6em;
	height: 1.6em;
	margin-top: 0.1em;
}

.hkb-booking-form .hkb-consent-label a {
	font-weight: 700;
	text-decoration: underline;
}

/* 予約フォームの全ステップ共通、利用規約・プライバシーポリシーへのリンク。 */
.hkb-booking-form .hkb-legal-links {
	margin: 1.4em 0 0;
	padding-top: 0.8em;
	border-top: 1px solid var(--color-border, #e2ded2);
	font-size: 0.85em;
	text-align: center;
}

.hkb-booking-form .hkb-legal-links a {
	color: var(--color-primary-dark, #1f5b4c);
}

/* 住所入力欄のGoogle Maps Platform利用に関する開示文。 */
.hkb-booking-form .hkb-google-data-notice {
	margin: 0.4em 0 0;
	font-size: 0.85em;
	color: var(--color-muted, #6b6558);
}

/* v0.9.17（LINE/WEBチャネル分離）: trip_type.phpの「LINEで予約する」
   リンク（<a class="hkb-btn-secondary">）に、<button>と同じ見た目・
   タップ領域を与える。他の.hkb-booking-form内テンプレートには
   <a class="hkb-btn-*">が無いことを確認済み（.hkb-managementの
   同名クラスは別スコープで別途スタイルされている）。 */
.hkb-booking-form button,
.hkb-booking-form a.hkb-btn-primary,
.hkb-booking-form a.hkb-btn-secondary {
	font: inherit;
	font-size: 1.05rem;
	font-weight: 700;
	text-decoration: none;
	/* v0.9.10（本番のLINE内iPhoneで発見・修正）: 「次へ」「戻る」の文字が
	   縦方向の中央ではなく少し下寄りに見えていた。上下paddingが等しく
	   ても、.hkb-booking-formから継承するline-height:1.8のような大きな
	   行の高さでは、フォントのメトリクス（特にSafari/WebKitでの
	   descender領域の扱い）によって行ボックス内でのグリフの視覚的重心が
	   ずれることがある。paddingやline-heightの微調整に頼らず、
	   inline-flexで文字を縦横とも機械的に中央へ配置することで、
	   フォント・エンジンに依存せず確実に中央にする。 */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1.3;
	padding: 0.8em 1.4em;
	min-height: 44px;
	max-width: 100%;
	min-width: 0;
	border-radius: var(--radius-btn, 12px);
	border: none;
	cursor: pointer;
}

/* 主要な操作（次へ・この場所に決める・この時刻に決める・この内容で申し込む）。
   テーマの .btn--primary と同じ色・影を使う。 */
.hkb-booking-form .hkb-btn-primary {
	background: var(--color-primary-dark, #1f5b4c);
	color: #ffffff;
	box-shadow: 0 6px 14px rgba(31, 91, 76, 0.28);
	/* v0.9.14（今回のE2E再検証で新たに発見・修正）: 480pxを超える幅
	   （タブレット・横向きスマホ等）ではhkb-btn-primary/secondaryが
	   flex: 1 1 0 で左右に並ぶが、.hkb-btn-secondaryのborder: 2px solid
	   （合計4px）分だけ、このボタンの方が常に4px狭く描画されていた
	   （flexの分配自体は同じでも、border-boxの外形にborderの太さの差が
	   そのまま反映されるため）。同じ太さの透明borderを与えることで
	   ボックスモデルを一致させる。background-clipの既定値はborder-box
	   のため、透明border部分にもbackgroundがそのまま透けて表示され、
	   見た目には一切影響しない。 */
	border: 2px solid transparent;
}

/* v0.9.14（本番のLINEアプリ内iPhoneで発見・修正: 「次へ」を1回タップしても
   ボタンの色が変わるだけで画面が進まず、2回目のタップで初めて進む）:
   hoverだけを持ちclickハンドラを持たない要素への最初のタップは、
   hoverを実装できる実ポインタ（マウス）を持たないWebKit系ブラウザ
   （LINEアプリ内ブラウザ・iOS Safari含む）で「ホバー状態の付与」として
   消費され、2回目のタップで初めてclickが発生してしまう既知の挙動が
   ある。hoverスタイルを (hover: hover) and (pointer: fine) を満たす
   端末（実際にマウス等でホバーできる端末）だけに限定することで、
   タッチ端末では最初のタップで即座にclick（フォーム送信）が発生する
   ようにする。focus-visibleはキーボード操作用のため、このメディア
   クエリの外側に残し、タッチの有無に関わらず常に機能させる。 */
.hkb-booking-form .hkb-btn-primary:focus-visible {
	background: var(--color-primary, #2f7a68);
}

@media (hover: hover) and (pointer: fine) {
	.hkb-booking-form .hkb-btn-primary:hover {
		background: var(--color-primary, #2f7a68);
	}
}

/* P0（不具合修正・仕様変更、v0.9.23、利用者からの明示的な指示）: オンライン
   キャンセル期限（お迎え日時の60分前）を過ぎた場合、ボタン自体を消す
   （hidden）のではなく、表示したまま押せない状態（disabled）にする。
   「消えている」と「見えるが押せない」は利用者にとって全く別の体験の
   ため、色を明確に落として押せないことが一目でわかるようにする。 */
.hkb-booking-form .hkb-btn-primary:disabled {
	background: #9ca3af;
	color: #f3f4f6;
	box-shadow: none;
	cursor: not-allowed;
}
@media (hover: hover) and (pointer: fine) {
	.hkb-booking-form .hkb-btn-primary:disabled:hover {
		background: #9ca3af;
	}
}

/* 「戻る」。塗りつぶさない枠線だけのスタイルにし、主要ボタンと形で区別する
   （色だけの違いに頼らない）。 */
.hkb-booking-form .hkb-btn-secondary {
	background: var(--color-bg, #ffffff);
	color: var(--color-primary, #2f7a68);
	border: 2px solid var(--color-primary, #2f7a68);
}

.hkb-booking-form .hkb-btn-secondary:focus-visible {
	background: var(--color-primary-tint, #dcefe8);
}

@media (hover: hover) and (pointer: fine) {
	.hkb-booking-form .hkb-btn-secondary:hover {
		background: var(--color-primary-tint, #dcefe8);
	}
}

.hkb-booking-form button:focus-visible,
.hkb-booking-form a:focus-visible {
	outline: 3px solid var(--color-primary, #2f7a68);
	outline-offset: 2px;
}

.hkb-booking-form .hkb-notice {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
	background: var(--color-bg-mint, #e9f4ef);
	border: 1px solid var(--color-primary-tint, #dcefe8);
	color: var(--color-primary-dark, #1f5b4c);
	padding: 0.8em 1em;
	margin-bottom: 0.8em;
	border-radius: var(--radius-card, 16px);
}

/* P2（v0.9.3）: 端末・フォント依存で描画が割れるUnicode文字（ℹ）ではなく、
   同梱のインラインSVG（templates/public/partials/notice-icon.php）を使う。
   色は継承元(.hkb-noticeのcolor)にcurrentColorで追従させる。 */
.hkb-booking-form .hkb-notice-icon {
	flex: 0 0 auto;
	width: 1.2em;
	height: 1.2em;
	margin-top: 0.2em;
}

.hkb-booking-form .hkb-notice-text {
	white-space: pre-line;
}

/* エラーは色だけでなく記号(⚠)でも示す。色は既存テーマのCF7エラー表示と
   同じ配色（style.cssの.wpcf7-not-valid-tip等）に合わせる。 */
.hkb-booking-form .hkb-error {
	color: #8a241d;
	font-weight: 700;
	margin: 0.4em 0;
}

.hkb-booking-form .hkb-error::before {
	content: "⚠ ";
}

.hkb-booking-form a.hkb-error {
	text-decoration: underline;
	display: inline-block;
}

.hkb-booking-form a.hkb-error:focus-visible {
	outline: 3px solid #8a241d;
	outline-offset: 2px;
}

/* v0.9.4（要件8）: ページ上部のエラー概要。 */
.hkb-booking-form .hkb-error-summary {
	border: 2px solid #8a241d;
	border-radius: 8px;
	padding: 0.8em 1em;
	margin-bottom: 1em;
	background: #fbeceb;
}

.hkb-booking-form .hkb-error-summary:focus-visible {
	outline: 3px solid #8a241d;
	outline-offset: 2px;
}

.hkb-booking-form .hkb-error-summary__heading {
	margin: 0 0 0.4em;
	font-weight: 700;
	color: #8a241d;
}

.hkb-booking-form .hkb-error-summary ul {
	margin: 0;
	padding-left: 1.2em;
}

.hkb-booking-form .hkb-field-error {
	color: #8a241d;
	font-weight: 700;
	font-size: 0.92em;
	margin: 0.2em 0 0.8em;
}

.hkb-booking-form .hkb-field-error::before {
	content: "⚠ ";
}

.hkb-booking-form .hkb-email-confirm {
	font-size: 1.4rem;
	font-weight: 700;
	padding: 0.5em 0.7em;
	background: var(--color-bg-warm, #f7f2ea);
	border-radius: 8px;
	word-break: break-all;
}

.hkb-booking-form .hkb-assistance-notes {
	background: var(--color-bg-warm, #f7f2ea);
	border-radius: 8px;
	padding: 0.8em 1em;
	white-space: pre-line;
}

/* 時刻選択（v0.9.11で1画面化）。要件: 大きなタップ領域、モバイルで
   15分刻み4列、キーボード操作可能（ネイティブのradio+labelのため
   Tab/矢印キーで自然に操作できる）、色だけに頼らない状態表示。
   .hkb-time-period-optionは旧・時間帯選択専用画面（v0.9.10以前）の
   クラス名で、現在は使用箇所が無いが、既存の見た目定義として残す
   （テーマ側からの直接参照は無いことを確認済み）。 */
.hkb-booking-form .hkb-time-period-option {
	padding: 1em 1.1em;
	min-height: 64px;
	display: flex;
	align-items: center;
}

.hkb-booking-form .hkb-time-period-option label {
	font-size: 1.1rem;
	width: 100%;
}

/* v0.9.11: 時間帯タブ（午前/昼/夕方・夜）。この画面内でパネルを
   切り替えるだけのボタン（type="button"）——フォーム送信フィールドでは
   ない。選択中は色だけでなくチェックマーク・太字・枠線でも示す。 */
.hkb-booking-form .hkb-time-period-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin: 0.8em 0 1.2em;
}

.hkb-booking-form .hkb-time-period-tab {
	flex: 1 1 8em;
	min-width: 0;
	max-width: 100%;
	padding: 0.7em 0.6em;
	min-height: 44px;
	background: var(--color-bg, #ffffff);
	color: var(--color-text, #2b2a26);
	border: 2px solid var(--color-border, #e2ded2);
	border-radius: var(--radius-card, 16px);
	font: inherit;
	font-size: 0.98rem;
	line-height: 1.3;
	text-align: center;
	cursor: pointer;
}

.hkb-booking-form .hkb-time-period-tab[aria-selected="true"] {
	border-color: var(--color-primary-dark, #1f5b4c);
	background: var(--color-primary-tint, #dcefe8);
	font-weight: 700;
}

.hkb-booking-form .hkb-time-period-tab[aria-selected="true"]::before {
	content: "✓ ";
}

.hkb-booking-form .hkb-time-period-tab:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.hkb-booking-form .hkb-time-panel-heading {
	font-size: 1.05rem;
	margin: 1em 0 0.5em;
}

/* JS無効時はhidden属性が一切付かず、3つの時間帯すべてが常に表示される
   （安全な代替動作）。JS側（public-form.js）が、非アクティブなパネルにだけ
   hidden属性を付ける。 */
.hkb-booking-form .hkb-time-slot-panel[hidden] {
	display: none;
}

.hkb-booking-form .hkb-slot-count {
	display: inline-block;
	margin-left: 0.6em;
	font-size: 0.85rem;
	font-weight: normal;
	color: var(--color-primary-dark, #1f5b4c);
}

.hkb-booking-form .hkb-slot-empty {
	display: inline-block;
	margin-left: 0.6em;
	font-size: 0.85rem;
	font-weight: normal;
	color: var(--color-text-sub, #6b6860);
}

.hkb-booking-form .hkb-radio-option--disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* v0.9.11: 15分刻みの時刻を横4列・1時間ごとの行で並べる
   （要件どおり、390px幅でも横スクロールなしで収まるよう列内の
   padding・文字サイズを絞る）。往路（time.php）・復路（return_leg.php）の
   どちらもこのクラスを共有する。 */
.hkb-booking-form .hkb-time-slot-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.4em;
}

.hkb-booking-form .hkb-time-slot-grid .hkb-radio-option {
	margin: 0;
	padding: 0.5em 0.3em;
	min-height: 44px;
}

.hkb-booking-form .hkb-time-slot-grid .hkb-radio-option span {
	margin: 0;
	display: block;
	text-align: center;
	font-size: 0.95rem;
	width: 100%;
}

/* 選択中の時刻・時間帯を、色だけでなくチェックマーク・枠線・太字でも
   示す（:has()非対応の古いブラウザでは単に強調が付かないだけで、
   ネイティブのradioの塗りつぶし自体は常に表示されるため判別可能）。 */
.hkb-booking-form .hkb-time-slot-grid .hkb-radio-option:has(input:checked) {
	border-color: var(--color-primary-dark, #1f5b4c);
	border-width: 2px;
	background: var(--color-primary-tint, #dcefe8);
}

.hkb-booking-form .hkb-time-slot-grid .hkb-radio-option:has(input:checked) span {
	font-weight: 700;
}

.hkb-booking-form .hkb-time-slot-grid .hkb-radio-option:has(input:checked) span::before {
	content: "✓ ";
}

/* v0.9.16再監査（要件: 「モバイル基準は4カラムとする」）: 以前はここに
   `@media (max-width: 360px)` で2列へ落とすフォールバックがあった。
   しかし360px幅は「極端に狭い画面」ではなく、Android端末で広く使われる
   一般的な幅であり、この分岐によって多くの実端末が要件の「4カラム基準」
   から外れてしまっていた。実測（強制的に4列のまま320px/344px/359px/
   360pxで描画し、getBoundingClientRect()で列幅・右端・横スクロール有無を
   確認）の結果、いずれの幅でも横スクロールは発生せず、列幅は約71～81px
   （「07:00」ラベル幅は約59～69px）と、時刻ラベルが窮屈になる兆候も
   無かったため、この2列フォールバックは撤去し、4カラムをどの対象幅でも
   一律の基準とした。tests/e2e/css-geometry.mjsのtime-slot-grid関連の
   テストは、この4カラム一律化を前提に検証する。
*/

/* 補助操作（「他の時間帯を選び直す」等）。主要ボタンと混同されないよう、
   下線付きのテキストリンク調にする。 */
.hkb-booking-form .hkb-btn-link {
	background: none;
	border: none;
	padding: 0.4em 0;
	min-height: auto;
	font-weight: normal;
	font-size: 0.95rem;
	color: var(--color-primary, #2f7a68);
	text-decoration: underline;
	cursor: pointer;
}

.hkb-booking-form table {
	width: 100%;
	border-collapse: collapse;
}

.hkb-booking-form table th,
.hkb-booking-form table td {
	text-align: left;
	padding: 0.5em 0.4em;
	border-bottom: 1px solid var(--color-border, #e2ded2);
	vertical-align: top;
}

/* P1（v0.9.3）: 確認画面（templates/public/steps/review.php）専用の要約
   表示。table要素をモバイル向けに無理に潰すのではなく、各行を独立した
   gridコンテナ（dt=ラベル/dd=値）にして、狭い画面ではgrid-template-columns
   自体を切り替えて縦積みにする（「グリッド構造自体を切り替える」要件）。
   labelの途中改行を防ぐため、PC幅ではdtにwhite-space:nowrapを付ける
   （日本語ラベルは短い複合語で、自然な改行位置がなく折り返すと1文字ずつ
   縦に並んでしまうため）。長い住所・施設名でも横スクロールしないよう、
   ddにoverflow-wrap:break-wordと、gridアイテムの既定min-widthをリセット
   するmin-width:0を付ける。 */
.hkb-booking-form .hkb-summary {
	margin: 0 0 1em;
}

/* v0.9.5（要件5）: 往復（帰りの時間も決まっている）予約の確認画面を
   「行き」「帰り」に分ける見出し。1つ目（「行き」）の上には余計な余白を
   足さず、2つ目（「帰り」）の前だけ区切りが分かるよう間隔を空ける。 */
.hkb-booking-form .hkb-summary-heading-row {
	margin-top: 1.2em;
}

.hkb-booking-form .hkb-summary-heading-row:first-child {
	margin-top: 0;
}

.hkb-booking-form .hkb-summary-heading {
	margin: 0 0 0.2em;
	padding-bottom: 0.2em;
	font-size: 1.05rem;
	color: var(--color-primary-dark, #1f5b4c);
	border-bottom: 2px solid var(--color-primary-tint, #dcefe8);
}

.hkb-booking-form .hkb-summary-row {
	display: grid;
	grid-template-columns: 8em 1fr;
	column-gap: 1em;
	row-gap: 0.2em;
	align-items: start;
	padding: 0.6em 0.4em;
	border-bottom: 1px solid var(--color-border, #e2ded2);
}

.hkb-booking-form .hkb-summary-row dt {
	margin: 0;
	font-weight: 700;
	white-space: nowrap;
}

.hkb-booking-form .hkb-summary-row dd {
	margin: 0;
	min-width: 0;
	overflow-wrap: break-word;
	white-space: pre-line;
}

@media (max-width: 768px) {
	.hkb-booking-form .hkb-summary-row {
		grid-template-columns: 1fr;
		row-gap: 0.3em;
	}

	.hkb-booking-form .hkb-summary-row dt {
		white-space: normal;
	}
}

@media (max-width: 480px) {
	.hkb-booking-form {
		font-size: 1.05rem;
	}

	/* 縦積みにし、横スクロールを起こさない。「戻る」を主要操作の下に
	   置き、誤タップを防ぐ。flex-direction: columnではflex(1 1 0)は
	   高さ方向にしか作用しないため、幅はここで明示的にwidth:100%へ
	   固定する（stretchの既定値に暗黙で頼らない）。 */
	.hkb-booking-form .hkb-buttons {
		flex-direction: column-reverse;
	}

	.hkb-booking-form .hkb-buttons button {
		width: 100%;
	}

	.hkb-management .hkb-buttons a {
		width: 100%;
	}
}

/* 予約管理ページ（利用者向け、次期改修）: 「予約内容を変更する」「予約を
   キャンセルする」等はページ遷移のためリンク（<a>）だが、見た目・タップ
   領域はボタンと同じ大きさ・分かりやすさにする（高齢者向けUIの要件）。
   v0.9.23（不具合修正・仕様変更）: キャンセル期限（60分前）を過ぎた
   場合は、同じ見た目のまま押せない<button disabled>へ差し替える
   （非表示にはしない）ため、buttonも同じサイズ・見た目にする。 */
.hkb-management .hkb-buttons a,
.hkb-management .hkb-buttons button.hkb-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font: inherit;
	font-size: 1.05rem;
	font-weight: 700;
	padding: 0.8em 1.4em;
	min-height: 44px;
	border-radius: var( --radius-btn, 12px );
	text-decoration: none;
	box-sizing: border-box;
}

.hkb-management .hkb-buttons a.hkb-btn-primary,
.hkb-management .hkb-buttons button.hkb-btn-primary {
	border: 2px solid transparent;
}

.hkb-management .hkb-buttons a.hkb-btn-primary {
	background: var( --color-primary-dark, #1f5b4c );
	color: #ffffff;
	box-shadow: 0 6px 14px rgba( 31, 91, 76, 0.28 );
}

.hkb-management .hkb-buttons a.hkb-btn-secondary {
	background: var( --color-bg, #ffffff );
	color: var( --color-primary, #2f7a68 );
	border: 2px solid var( --color-primary, #2f7a68 );
}

.hkb-management table th {
	white-space: nowrap;
}

/**
 * v0.9.13（本番反映前の追加監査で発見・修正: 「スマホ固定CTAバー
 * （テーマ側のtemplate-parts/parts/mobile-cta-bar.php、footer.phpから
 * 全ページ共通で出力される）が、時刻グリッド末尾・「次へ」「戻る」・
 * 確認画面の見積内訳と重なる」不具合）。
 *
 * 重要な設計判断（v0.9.12からの変更点）: この修正はテーマ側ファイル
 * （assets/css/main.css・assets/js/main.js・style.css）には一切置かない。
 * 理由は、配布物である本プラグインのZIPだけを本番のwp-content/plugins/
 * hukugakuru-booking/へ置き換えても、テーマ側ファイルは書き換わらない
 * ため、プラグインZIPだけを反映しても不具合が直らないという不整合が
 * v0.9.12で発覚したため。.mobile-cta-bar自体はテーマが描画する要素だが、
 * CSS/JSはどのファイルに書かれていても、そのページで実際に読み込まれて
 * さえいれば、テーマ側要素に対しても等しく適用される——このCSS/JS自体は
 * このファイル（本プラグインのenqueue_assets()により/reserve/・/manage/
 * ページでのみ読み込まれる）に置くことで、テーマ側を一切変更せずに
 * 予約フォームのページに限定して解決する。
 *
 * 予約フォーム自体（.hkb-booking-form）にだけ、CTAバーの実測高さぶんの
 * 下余白を確保する（全ページ共通のbody要素は対象にしない——要件:
 * 「予約ページ、予約フォームへセレクターを限定する」）。実測は
 * assets/js/public-form.js側のResizeObserverが行い、
 * --hkb-mobile-cta-bar-heightへ反映する。JavaScript無効時は、
 * env(safe-area-inset-bottom)を含むフォールバック値が使われる
 * （Safe Area自体はCSSだけでも正しく反映されるため、安全側の初期値
 * として機能する）。
 */
:root {
	--hkb-mobile-cta-bar-height: calc(74px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 1023.98px) {
	.hkb-booking-form {
		padding-bottom: var(--hkb-mobile-cta-bar-height);
	}
}

/**
 * v0.9.13（本番反映前の追加監査で発見・修正）: HTML標準ではhidden属性は
 * ユーザーエージェントスタイルシートの[hidden]{display:none}で実現される
 * が、CSSのカスケード規則上、テーマ側の.btnクラスのdisplay指定
 * （display: inline-flex）は、詳細度が同じでも「作者 > ユーザー
 * エージェント」という出所の優先順位により常に勝つ。そのため、
 * liff-init.jsのhideLineCtaButtons()がLINEアプリ内で
 * [data-hkb-line-cta]要素へhidden属性を付与しても、固定CTAバー内の
 * 「LINEで予約・相談する」ボタン（.btnクラスを持つ）は実際には非表示に
 * ならないという不具合があった（LINE／LIFF内で不要なCTAを隠すという
 * 要件に反する）。
 *
 * サイト全体へ`[hidden] { display: none !important; }`を適用するのでは
 * なく、対象を[data-hkb-line-cta]要素自体に限定して上書きする
 * （要件: 「グローバルな[hidden]上書きを無条件でサイト全体へ適用
 * しない、対象CTAへセレクターを限定する」）。
 */
[data-hkb-line-cta][hidden] {
	display: none !important;
}

/**
 * v0.9.13（本番反映前の追加監査で発見・修正）: テーマ側の.mobile-cta-bar
 * .btnはheight: 50px（固定値）を明示指定しており、OS/ブラウザの文字
 * サイズ拡大設定でボタン内のテキストが箱からはみ出す（＝視覚的に重なる・
 * 読めなくなる）おそれがある。height自体をautoへ明示的に戻したうえで
 * min-heightを指定し、必要なら箱自体が高さ方向に伸びられるようにする。
 * バーの実際の高さはassets/js/public-form.jsがResizeObserverで実測し、
 * --hkb-mobile-cta-bar-heightへ反映する。
 *
 * body.has-mobile-cta-bar（テーマのfukugakuru_body_classes()により全
 * ページへ無条件で付与される既存クラス）を前置し、詳細度をテーマ側の
 * `.mobile-cta-bar .btn`（クラス2つ）より確実に高くする（クラス3つ）
 * ことで、CSSの読み込み順に依存せず常にこちらが優先されるようにする。
 */
body.has-mobile-cta-bar .mobile-cta-bar .btn {
	height: auto;
	min-height: 50px;
}