/* =========================================================================
 * Boat Kentei Bridge ── 表示スタイル
 *   本体PHPから分離した唯一のスタイルシート。デザイン変更はこの1ファイルで完結する。
 *   ・固定ページのショートコード表示時は wp_enqueue_style で読み込む。
 *   ・テーマに依存しない独立ページ（ログイン/メッセージ）は <style> でインライン注入。
 *   テーマ側で上書きしたいときは、同名セレクタを子テーマCSSで後勝ちさせるか、
 *   テンプレート自体を yourtheme/boat-kentei/ に置いて差し替える。
 * ========================================================================= */

/* ---- 独立ページの外枠（ログイン・メッセージ画面） ---- */
.bk-shell { font-family: sans-serif; max-width: 520px; margin: 48px auto; padding: 24px; line-height: 1.8; }
.bk-title { font-size: 20px; }

/* ---- メッセージ画面 ---- */
.bk-msg-text--error { color: #b00020; }
.bk-msg-text--ok { color: #1b5e20; }
.bk-back { margin-top: 24px; }

/* ---- ログインフォーム（独立ページ・ショートコード共通） ---- */
.bk-error { color: #b00020; }
.bk-login-form { margin-top: 12px; }
.bk-login-form__email {
	width: 100%; max-width: 380px; padding: 14px; font-size: 16px;
	box-sizing: border-box; border: 1px solid #ccc; border-radius: 8px;
}
.bk-login-form__submit {
	margin-top: 12px; padding: 12px 28px; font-size: 16px;
	background: #2a2a2a; color: #fff; border: none; border-radius: 999px; cursor: pointer;
}

/* ---- 会員ページ／マイページ（ショートコード [boat_kentei_member]） ---- */
.bk-welcome { font-weight: bold; }
.bk-note { font-size: 13px; color: #666; }
.bk-muted { color: #888; font-size: 13px; }

/* 共通ボタン */
.bk-btn { display: inline-block; text-decoration: none; border-radius: 999px; color: #fff; }
.bk-btn--exam { padding: 8px 22px; background: #2a2a2a; color: #fff !important; white-space: nowrap; }
.bk-btn--buy { padding: 10px 24px; background: #1565c0; color: #fff !important; }
/* 戻るボタン：白背景＋グレー枠＋濃いグレー文字（テーマのリンク色＝青に負けないよう color を明示上書き） */
.bk-btn--back { padding: 10px 24px; background: #fff; border: 1px solid #9ca3af; color: #374151 !important; }

/* ページ最下部の「戻る」ボタン */
.bk-sales-back { text-align: center; margin: 16px 0 0; }

/* 購入ボタン（オブジェクト）は中央寄せ。見出し等の文章は左寄せのまま（原則：文章=左／オブジェクト=中央）。 */
.bk-buy-item { margin: 12px auto; text-align: center; }
@media (min-width: 601px) { .bk-buy-item { max-width: 360px; } }

/* 受験票の購入スロット：中の Shopify 埋め込みは触らず、外側で中央寄せ・横幅を調整する。
   ＝貼り付けコードを一切いじらなくても見た目が整うようにするためのCSS。 */
.bk-buy-slot { text-align: center; margin: 12px 0; }
.bk-buy-slot .shopify-buy__product {
	max-width: 360px !important;
	margin: 0 auto 16px !important;
	float: none !important;
}

/* 注意事項：左の余白とリストマーク・見出し間隔を調整（リストマークが詰まりすぎる違和感を解消） */
.bk-sales-notice h3 { margin: 0 0 12px; }
.bk-sales-notice ul { margin: 0; padding-left: 1.6em; }
.bk-sales-notice li { margin: 6px 0; line-height: 1.8; }

/* 受験可能な検定（未受験の受験票）。級を大きく見せ、上段に「級＋ボタン」、下段に有効期限 */
.bk-pending { list-style: none; padding: 0; margin: 0 0 24px 0; }
.bk-pending__item {
	margin: 8px 0; padding: 16px 18px; border: 1px solid #ddd; border-radius: 8px;
}
.bk-pending__head {
	display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
}
.bk-pending__round { display: block; font-size: 13px; opacity: 0.9; }
.bk-pending__grade { display: block; font-size: 28px; font-weight: bold; line-height: 1.2; }
.bk-pending__period { margin-top: 10px; font-size: 13px; }

/* カード全体を「勝負駆け会場へ」のリンクにする。文字色は継承（色付きカードでも白文字を維持）し、
   リンク下線は消す。CTA（bk-pending__cta）は見た目だけのボタンで、クリックは親リンクが処理する。
   ※テーマの本文リンク（entry-content-hanyo.css の「.entry-content--hanyo a」= color:#5151ca / underline・
     詳細度0,1,1）に勝つため、.bk-pending__item を前置して2クラス（0,2,0）にする。
     単クラス（.bk-pending__link＝0,1,0）だと負けて文字が青＋下線になる。 */
.bk-pending__item .bk-pending__link,
.bk-pending__item .bk-pending__link:link,
.bk-pending__item .bk-pending__link:visited,
.bk-pending__item .bk-pending__link:hover,
.bk-pending__item .bk-pending__link:focus,
.bk-pending__item .bk-pending__link:active {
	display: block;
	color: inherit;         /* 級バナー色カードでは白（#fff）を継承＝白抜き文字 */
	text-decoration: none;  /* テーマの下線を打ち消す（親リンクで消すとCTA文字の下線も消える） */
}
.bk-pending__cta { pointer-events: none; }
/* リンクカードはホバーで浮かせてクリック可能と分かるようにする（リンクが無い旧受験票カードは対象外）。 */
.bk-pending__item:has(.bk-pending__link) { cursor: pointer; transition: box-shadow 0.15s ease, transform 0.15s ease; }
.bk-pending__item:has(.bk-pending__link):hover { box-shadow: 0 6px 18px rgba(41, 38, 104, 0.22); transform: translateY(-2px); }

/* 最上段の大タイトルは「レスポンスタイトル（.response-title）」＝テーマの全ページ共通部品を使用
   （css/utilities.css で定義。旧 .bk-sales-title はそこへ一般化した）。 */
/* 「購入したのに試験が始まらない場合はこちら」の救済リンク（販売ページ下部）。 */
.bk-sales-help { text-align: center; margin: 20px 0 0; font-size: 14px; }
/* 「手動で受験票を入力して勝負駆けを開始する」＝旧来 /exam/ への明確に別のボタン（枠線＋点線下線で通常CTAと差別化）。 */
.bk-sales-manual { text-align: center; margin: 10px 0 0; }
.bk-btn--manual-exam {
	background: #fff; border: 1px dashed #6b7280; color: #374151 !important;
	padding: 10px 22px; font-size: 14px; font-weight: normal;
}
.bk-btn--manual-exam:hover { background: #f9fafb; border-color: #374151; }
/* ※ セクション見出し（受験票ご購入の注意事項／受験票販売中の検定）は「色変わりタイトル .boat-title」を使用。
   .boat-title の定義・着色はテーマ側（css/utilities.css ＋ functions.php）＝全ページ共通。 */

/* 受付・受験票販売中の検定の案内（受験票が無い人向けのカタログ） */
.bk-catalog-lead { margin: 4px 0 8px; font-weight: bold; }
.bk-catalog { list-style: none; padding: 0; margin: 8px 0; }
.bk-catalog__item {
	margin: 8px 0; padding: 12px; border: 1px solid #ddd; border-radius: 8px;
}
.bk-catalog__name { font-weight: bold; }
.bk-catalog__period { display: block; margin-top: 4px; font-size: 13px; color: #666; }
.bk-catalog-tail { margin: 4px 0; }

/* 受験票販売中の検定：カード全体を購入リンク（カート直行）にする。
   文字色は継承（級バナー色カードでは白抜き文字）、テーマの本文リンク色/下線に勝つよう2クラスで指定。 */
.bk-catalog__item { position: relative; }
.bk-catalog__item .bk-catalog__link,
.bk-catalog__item .bk-catalog__link:link,
.bk-catalog__item .bk-catalog__link:visited,
.bk-catalog__item .bk-catalog__link:hover,
.bk-catalog__item .bk-catalog__link:focus,
.bk-catalog__item .bk-catalog__link:active {
	display: block; color: inherit; text-decoration: none;
	padding-right: 30px; /* 右端の矢印ぶんの余白 */
}
.bk-catalog__link .bk-catalog__name { display: block; }
.bk-catalog__link .bk-catalog__period { display: block; margin-top: 4px; font-size: 13px; }
/* 価格：受験期間の下に、やや大きめの白抜き文字で表示 */
.bk-catalog__price { display: block; margin-top: 6px; font-size: 20px; font-weight: bold; }
/* 矢印（リンクであることの手掛かり）。カード右端中央に置く */
.bk-catalog__arrow {
	position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
	font-size: 22px; line-height: 1; color: inherit;
}
/* リンクカードはホバーで浮かせてクリック可能と分かるようにする（購入URL未設定の非リンクカードは対象外）。 */
.bk-catalog__item:has(.bk-catalog__link) { cursor: pointer; transition: box-shadow 0.15s ease, transform 0.15s ease; }
.bk-catalog__item:has(.bk-catalog__link):hover { box-shadow: 0 6px 18px rgba(41, 38, 104, 0.22); transform: translateY(-2px); }
/* 色付きバナー上では価格も白系で読めるように */
.bk-grade--A .bk-catalog__price,
.bk-grade--B .bk-catalog__price { color: #fff; }

/* 級別バナー色（A級系=赤 / B級系=緑）。受験票ボタン・カタログのカード背景に適用 */
.bk-pending__item.bk-grade--A,
.bk-catalog__item.bk-grade--A { background: #e60012; border-color: #e60012; color: #fff; }
.bk-pending__item.bk-grade--B,
.bk-catalog__item.bk-grade--B { background: #4a7c42; border-color: #4a7c42; color: #fff; }
/* 色付きバナー上は補助テキストも白系で読めるように */
.bk-grade--A .bk-catalog__period,
.bk-grade--B .bk-catalog__period { color: rgba(255, 255, 255, 0.85); }
.bk-grade--A .bk-muted,
.bk-grade--B .bk-muted { color: rgba(255, 255, 255, 0.85); }

/* 受験履歴テーブル */
.bk-history { border-collapse: collapse; width: 100%; font-size: 14px; }
.bk-history th { text-align: left; border-bottom: 1px solid #ccc; padding: 6px; }
.bk-history td { padding: 6px; border-bottom: 1px solid #eee; }
.bk-history__score { text-align: right; }
.bk-history__result { text-align: center; }
.bk-history td.bk-history__result { font-weight: bold; }

/* 合否バッジの色 */
.bk-badge--pass { color: #1b5e20; }
.bk-badge--fail { color: #b00020; }
.bk-badge--expired,
.bk-badge--none { color: #9e9e9e; }

/* 認定証（合格した受験ごと）。サムネイル＝クリックでビューア（表示・保存・SNSシェア）へ。 */
.bk-cert-lead { margin: 4px 0 12px; }
.bk-certs { list-style: none; padding: 0; margin: 8px 0 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.bk-certs__item { position: relative; }
/* テーマの本文リンク（.entry-content--hanyo a）の色/下線に勝つよう2クラスで打ち消し。 */
.bk-certs__item .bk-certs__link,
.bk-certs__item .bk-certs__link:link,
.bk-certs__item .bk-certs__link:visited,
.bk-certs__item .bk-certs__link:hover,
.bk-certs__item .bk-certs__link:focus,
.bk-certs__item .bk-certs__link:active {
	display: block; color: inherit; text-decoration: none;
	border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; background: #fff;
}
.bk-certs__thumb { display: block; width: 100%; height: auto; }
.bk-certs__label { display: block; padding: 10px 12px 0; font-weight: bold; font-size: 14px; }
.bk-certs__cta { display: block; margin: 8px 12px 12px; text-align: center; padding: 8px 0; }
.bk-certs__item:has(.bk-certs__link) { transition: box-shadow 0.15s ease, transform 0.15s ease; }
.bk-certs__item:has(.bk-certs__link):hover { box-shadow: 0 6px 18px rgba(41, 38, 104, 0.22); transform: translateY(-2px); }

.bk-logout { margin-top: 24px; }