/* ===============================
   鳩環屋 購入の流れの見た目（カート → お客様情報 → 配送・支払方法 → 内容の確認 → 完了）
   Welcart Basic の見た目（usces_cart.css）を上書きする。<body> に prs-checkout があるときだけ効く
   色は colors.css、文字の大きさ・余白は site.css の変数を使う
   入力欄・ボタン・エラーの形は、会員ページと共通（forms.css）
   しくみ：includes/welcart-checkout.php
   =============================== */

/* ===============================
   上の「手順 2 / 4　次は『配送・支払方法』」
   形は商品ページの「手順 1 / 3」（shop.css の .prs-bulk__progress）とそろえる
   =============================== */
/* Welcart の黒い矢印の帯と、「別の窓で数を変えないで」の注意は出さない */
body.prs-checkout #content .cart_navi,
body.prs-checkout #content .confiem_notice {
	display: none;
}

body.prs-checkout #content .header_explanation {
	margin: 0;
	padding: 0;
}

.prs-steps {
	margin: 0 0 var(--prs-s-5);
}

.prs-steps__text {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0 var(--prs-s-4);
	margin: 0;
	padding: var(--prs-s-2) var(--prs-s-4);
	border-radius: var(--prs-r-large) var(--prs-r-large) 0 0;
	background: var(--prs-color-beige);
	font-size: var(--prs-f-base);
	line-height: 1.6;
}

.prs-steps__text b {
	color: var(--prs-color-main);
	font-size: var(--prs-f-h2);
}

.prs-steps__next {
	align-self: center;
	font-weight: 700;
}

.prs-steps__list {
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	gap: var(--prs-s-1);
	margin: var(--prs-s-1) 0 0;
	padding: 0;
	list-style: none;
}

.prs-steps__list li {
	margin: 0;
	padding: 6px 2px;
	background: var(--prs-color-beige);
	color: var(--prs-color-note);
	font-size: var(--prs-f-small);
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	list-style: none;
}

.prs-steps__list li:first-child {
	border-radius: 0 0 0 var(--prs-r-small);
}

.prs-steps__list li:last-child {
	border-radius: 0 0 var(--prs-r-small) 0;
}

.prs-steps__list li.is-done {
	background: var(--prs-color-main-light);
	color: var(--prs-color-main);
}

.prs-steps__list li.is-now {
	background: var(--prs-color-main);
	color: var(--prs-color-white);
}

/* ===============================
   ボタン（形と色は forms.css。ここは購入の流れだけの並び）
   =============================== */
/* JS が動かないとき：会員登録のボタンは、ゲストのボタンの下に */
body.prs-checkout #content .send input.to_reganddeliveryinfo_button {
	order: 2;
}

/* ===============================
   お客様情報
   =============================== */
/* 見出し「会員の方」「はじめての方・会員でない方」の形は forms.css（.prs-heading と同じ） */
body.prs-checkout #content #customer-info .prs-steps + h5,
body.prs-checkout #content #customer-info .error_message + h5 {
	margin-top: 0;
}

/* 会員の方：小さめの箱 */
body.prs-checkout #content form[name="customer_loginform"] {
	padding: var(--prs-s-2) var(--prs-s-5) var(--prs-s-5);
	border: 2px solid var(--prs-color-main-light);
	border-radius: var(--prs-r-large);
	background: var(--prs-color-main-light);
}

body.prs-checkout #content form[name="customer_loginform"] .customer_form tr {
	border-bottom: 0;
	padding-bottom: 0;
}

body.prs-checkout #content form[name="customer_loginform"] #nav {
	margin: var(--prs-s-3) 0 0;
	padding: 0;
	font-size: var(--prs-f-base);
}

body.prs-checkout #content form[name="customer_loginform"] .send {
	margin-top: var(--prs-s-4);
}

/* 会員登録もする方だけ（checkout.js が作る箱） */
.prs-register {
	max-width: 480px;
	margin: var(--prs-s-6) auto 0;
	padding: var(--prs-s-4) var(--prs-s-5) var(--prs-s-5);
	border: 2px solid var(--prs-color-border);
	border-radius: var(--prs-r-large);
	background: var(--prs-color-white);
}

body.prs-checkout #content .prs-register__title {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--prs-color-main);
	font-size: var(--prs-f-large);
	font-weight: 700;
	line-height: 1.5;
}

.prs-register__note {
	margin: var(--prs-s-1) 0 0;
	color: var(--prs-color-note);
	font-size: var(--prs-f-small);
	line-height: 1.6;
}

body.prs-checkout #content .prs-register .customer_form tr:last-child {
	border-bottom: 0;
}

body.prs-checkout #content .prs-register .send {
	margin-top: var(--prs-s-2);
}

/* 選んだ方法で使わない部分（checkout.js が付ける）。テーマや forms.css の display より強くする */
body.prs-checkout #content .prs-is-off {
	display: none !important;
}

/* 上の帯「選んだ方法：○○［選びなおす］」（checkout.js が作る） */
.prs-entry-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--prs-s-2) var(--prs-s-4);
	margin: 0 0 var(--prs-s-5);
	padding: var(--prs-s-3) var(--prs-s-4);
	border-radius: var(--prs-r-large);
	background: var(--prs-color-main-light);
	scroll-margin-top: 90px; /* 選びなおしたあとにここまで動くとき、上に残るヘッダーに隠れないように（shop.css と同じ） */
}

body.prs-checkout #content .prs-entry-bar__text {
	margin: 0;
	color: var(--prs-color-main-dark);
	font-size: var(--prs-f-base);
	font-weight: 700;
	line-height: 1.5;
}

.prs-entry-bar__change {
	min-height: 44px;
	padding: 0 var(--prs-s-4);
	border: 2px solid var(--prs-color-main);
	border-radius: var(--prs-r-small);
	background: var(--prs-color-white);
	color: var(--prs-color-main);
	font-family: inherit;
	font-size: var(--prs-f-base);
	font-weight: 700;
	cursor: pointer;
}

/* ===============================
   カートの［購入手続きへ進む］で出す「どの方法で進むか」の窓（welcart-checkout.php が出す <dialog>）
   =============================== */
.prs-entry {
	width: min(92vw, 30em);
	max-height: 92vh;
	overflow: auto;
	padding: var(--prs-s-5);
	border: none;
	border-radius: var(--prs-r-large);
	background: var(--prs-color-white);
	color: var(--prs-color-text);
	font-family: var(--prs-font);
	font-size: var(--prs-f-base);
	line-height: 1.6;
	text-align: center;
}

.prs-entry::backdrop {
	background: rgba(0, 0, 0, 0.6);
}

.prs-entry .prs-entry__title {
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--prs-color-main-dark);
	font-size: var(--prs-f-large);
	font-weight: 700;
	line-height: 1.5;
}

.prs-entry__lead {
	margin: var(--prs-s-1) 0 var(--prs-s-4);
	color: var(--prs-color-note);
	font-size: var(--prs-f-small);
}

/* 選ぶボタン：会員の方・会員登録は白に青い線、ゲストはオレンジ（買うボタンと同じ） */
.prs-entry .prs-entry__choice {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	width: 100%;
	min-height: 64px;
	margin: 0 0 var(--prs-s-3);
	padding: var(--prs-s-3) var(--prs-s-4);
	border: 2px solid var(--prs-color-main);
	border-radius: var(--prs-r-small);
	background: var(--prs-color-white);
	color: var(--prs-color-main);
	font-family: inherit;
	line-height: 1.4;
	cursor: pointer;
}

.prs-entry .prs-entry__choice:hover {
	background: var(--prs-color-main-light);
}

.prs-entry .prs-entry__choice--guest {
	border-color: var(--prs-color-accent);
	background: var(--prs-color-accent);
	color: var(--prs-color-white);
}

.prs-entry .prs-entry__choice--guest:hover {
	border-color: var(--prs-color-accent-dark);
	background: var(--prs-color-accent-dark);
}

.prs-entry__label {
	font-size: var(--prs-f-large);
	font-weight: 700;
}

.prs-entry__note {
	color: var(--prs-color-note);
	font-size: var(--prs-f-small);
}

/* ゲストのひとこと（ボタンの下） */
.prs-entry__after {
	margin: calc(var(--prs-s-2) * -1) 0 var(--prs-s-2);
	color: var(--prs-color-note);
	font-size: var(--prs-f-small);
}

/* 「または」の線 */
.prs-entry__or {
	display: flex;
	align-items: center;
	gap: var(--prs-s-3);
	margin: var(--prs-s-1) 0 var(--prs-s-3);
	color: var(--prs-color-note);
	font-size: var(--prs-f-small);
}

.prs-entry__or::before,
.prs-entry__or::after {
	content: "";
	flex: 1;
	border-top: 1px solid var(--prs-color-border);
}

.prs-entry .prs-entry__cancel {
	margin-top: var(--prs-s-2);
	padding: var(--prs-s-2) var(--prs-s-4);
	border: 0;
	background: none;
	color: var(--prs-color-main);
	font-family: inherit;
	font-size: var(--prs-f-base);
	text-decoration: underline;
	cursor: pointer;
}

/* ===============================
   配送・支払方法
   =============================== */
/* 配送方法が1つだけのとき：選ぶ箱の代わりの字（welcart-checkout.php の prs_checkout_delivery_method） */
body.prs-checkout #content .prs-delivery-method {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--prs-s-3);
	margin: 0;
	font-size: var(--prs-f-base);
	line-height: 1.6;
}

.prs-delivery-method b {
	font-size: var(--prs-f-large);
}

.prs-delivery-method span {
	color: var(--prs-color-note);
}

/* 配送先：「お客様情報と同じ」「別の配送先を指定する」を押しやすいカードに */
body.prs-checkout #content #delivery_flag tr {
	padding: var(--prs-s-1) 0;
	border-bottom: 0;
}

body.prs-checkout #content #delivery_flag th {
	margin: var(--prs-s-2) 0 var(--prs-s-1);
}

body.prs-checkout #content #delivery_flag td,
body.prs-checkout #content #time dt label {
	display: flex;
	align-items: center;
	gap: var(--prs-s-3);
	padding: 0 var(--prs-s-4);
	border: 2px solid var(--prs-color-border);
	border-radius: var(--prs-r-small);
	background: var(--prs-color-white);
	cursor: pointer;
}

body.prs-checkout #content #delivery_flag td label {
	flex: 1;
	padding: var(--prs-s-3) 0;
	color: var(--prs-color-text);
	font-weight: 700;
	cursor: pointer;
}

body.prs-checkout #content #delivery_flag td:has(input:checked),
body.prs-checkout #content #time dt:has(input:checked) label,
body.prs-checkout #content #time dt:has(input:checked) + dd {
	border-color: var(--prs-color-main);
	background: var(--prs-color-main-light);
}

body.prs-checkout #content .customer_form input[type="radio"] {
	flex: none;
	width: 24px;
	height: 24px;
	margin: 0;
	accent-color: var(--prs-color-main);
}

/* 別の配送先の欄（Welcart が表示・非表示を style で切りかえる。表示のときも1列の形で） */
body.prs-checkout #content #delivery_table[style*="table"] {
	display: block !important;
}

body.prs-checkout #content #delivery_table {
	margin: 0 0 var(--prs-s-4);
	padding: 0 var(--prs-s-4);
	border: 2px solid var(--prs-color-main-light);
	border-radius: var(--prs-r-large);
}

/* 到着希望日・時間：選べるものがない（「指定できません」だけの）ときは出さない */
body.prs-checkout #content #time tr:has(#delivery_date_select option:only-child),
body.prs-checkout #content #time tr:has(#delivery_time_select option:only-child) {
	display: none;
}

body.prs-checkout #content #time select {
	width: auto;
	min-width: 12em;
}

/* 支払方法：丸ボタンだけでなく、箱ごと押せるカードに */
body.prs-checkout #content #time dl {
	margin: 0;
}

body.prs-checkout #content #time dt {
	margin: var(--prs-s-3) 0 0;
	padding: 0;
}

body.prs-checkout #content #time dt:first-child {
	margin-top: 0;
}

body.prs-checkout #content #time dt label {
	min-height: 56px;
	padding: var(--prs-s-2) var(--prs-s-4);
	color: var(--prs-color-text);
	font-size: var(--prs-f-large);
	font-weight: 700;
}

/* 説明があるときは、ラベルと説明で1枚のカードに見せる */
body.prs-checkout #content #time dt:has(+ dd) label {
	border-bottom: 0;
	border-radius: var(--prs-r-small) var(--prs-r-small) 0 0;
}

body.prs-checkout #content #time dd {
	margin: 0;
	padding: 0 var(--prs-s-4) var(--prs-s-3) calc(var(--prs-s-4) + 24px + var(--prs-s-3));
	border: 2px solid var(--prs-color-border);
	border-top: 0;
	border-radius: 0 0 var(--prs-r-small) var(--prs-r-small);
	color: var(--prs-color-note);
	font-size: var(--prs-f-small);
	line-height: 1.6;
}

body.prs-checkout #content #notes_table {
	margin-top: 0;
}

/* ===============================
   内容の確認：ご注文者・お届け先・配送とお支払い
   =============================== */
body.prs-checkout #content #confirm_table,
body.prs-checkout #content #confirm_table tbody {
	display: block;
	width: 100%;
	margin: 0;
	border: 0;
}

body.prs-checkout #content #confirm_table tr {
	display: grid;
	grid-template-columns: 9em minmax(0, 1fr);
	gap: 0 var(--prs-s-4);
	margin: 0;
	padding: var(--prs-s-2) 0;
	border: 0;
	border-bottom: 1px solid var(--prs-color-border);
}

body.prs-checkout #content #confirm_table th,
body.prs-checkout #content #confirm_table td {
	display: block;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--prs-color-text);
	font-size: var(--prs-f-base);
	text-align: left;
	overflow-wrap: anywhere;
}

body.prs-checkout #content #confirm_table th {
	color: var(--prs-color-note);
	font-weight: 400;
}

body.prs-checkout #content #confirm_table td {
	font-weight: 700;
}

body.prs-checkout #content #confirm_table tr.ttl,
body.prs-checkout #content #confirm_table tr.prs-same-address {
	display: block;
}

body.prs-checkout #content #confirm_table tr.ttl {
	padding: 0;
	border-bottom: 0;
}

body.prs-checkout #content #confirm_table tr.ttl td {
	padding: var(--prs-s-6) 0 var(--prs-s-2);
}

body.prs-checkout #content #confirm_table tr.ttl h3 {
	margin: 0;
	padding: 0 0 0 var(--prs-s-3);
	border: 0;
	border-left: 6px solid var(--prs-color-main);
	background: none;
	color: var(--prs-color-text);
	font-size: var(--prs-f-h2);
	font-weight: 700;
	line-height: 1.4;
}

body.prs-checkout #content #confirm_table tr.prs-same-address td {
	padding: var(--prs-s-1) 0;
}

/* ===============================
   内容の確認：ご注文の前にご確認ください（［この内容で注文する］のすぐ上）
   完了：このあとの流れ
   =============================== */
.prs-notice {
	margin: var(--prs-s-6) 0 0;
	padding: var(--prs-s-4) var(--prs-s-5);
	border: 2px solid var(--prs-color-accent);
	border-radius: var(--prs-r-large);
	background: var(--prs-color-wait-bg);
	color: var(--prs-color-text);
	font-size: var(--prs-f-base);
	line-height: 1.7;
	text-align: left;
}

body.prs-checkout #content .prs-notice__title {
	margin: 0 0 var(--prs-s-3);
	padding: 0;
	border: 0;
	background: none;
	color: var(--prs-color-wait);
	font-size: var(--prs-f-h2);
	font-weight: 700;
	line-height: 1.4;
}

.prs-notice__list {
	margin: 0;
}

.prs-notice__row {
	display: grid;
	grid-template-columns: 7em minmax(0, 1fr);
	gap: var(--prs-s-1) var(--prs-s-4);
	padding: var(--prs-s-3) 0;
	border-top: 1px solid var(--prs-color-border);
}

.prs-notice__row dt {
	margin: 0;
	font-weight: 700;
}

.prs-notice__row dd {
	margin: 0;
}

.prs-notice__row dd p {
	margin: 0;
}

.prs-notice__row dd p + p {
	margin-top: var(--prs-s-1);
}

.prs-notice__kind {
	display: block;
	font-weight: 700;
}

.prs-notice__sub {
	margin: var(--prs-s-2) 0 0;
	color: var(--prs-color-note);
	font-size: var(--prs-f-small);
}

.prs-notice__link {
	margin: var(--prs-s-2) 0 0;
	font-size: var(--prs-f-small);
}

/* このあとの流れ（番号つき）の形は site.css の .prs-flow（ご利用ガイドと共通） */

/* 完了の画面では、真ん中の文の下に */
.prs-notice--flow {
	max-width: 560px;
	margin: var(--prs-s-5) auto 0;
	border-color: var(--prs-color-main);
	background: var(--prs-color-main-light);
}

body.prs-checkout #content .prs-notice--flow .prs-notice__title {
	color: var(--prs-color-main);
}

/* ===============================
   完了
   =============================== */
/* 上の黒い「完了」は出さない（すぐ下の「ご注文を受け付けました。」が見出しの役わり） */
body.prs-checkout-ordercompletion #content .cart_page_title {
	display: none;
}

body.prs-checkout #content #cart_completion h3 {
	margin: 0 0 var(--prs-s-4);
	color: var(--prs-color-main);
	font-size: var(--prs-f-h2);
	font-weight: 700;
}

body.prs-checkout #content #cart_completion .header_explanation p {
	font-size: var(--prs-f-base);
	line-height: var(--prs-lh);
}

/* 「ご不明な点は、お問い合わせフォームからご連絡ください。」（流れの箱の下） */
body.prs-checkout #content #cart_completion .header_explanation p.prs-completion-contact {
	max-width: 560px;
	margin: var(--prs-s-4) auto 0;
}

/* ===============================
   スマホ
   =============================== */
@media (max-width: 600px) {
	.prs-steps__text {
		padding: var(--prs-s-2) var(--prs-s-3);
	}

	/* せまい画面では「配送・支払方法」が2行になる（文字は小さくしない） */
	.prs-steps__list li {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 4px 2px;
	}

	/* 「どの方法で進むか」の窓：ボタンの中のひとことが1行に入るように */
	.prs-entry {
		padding: var(--prs-s-5) var(--prs-s-4);
	}

	.prs-entry .prs-entry__choice {
		padding-right: var(--prs-s-2);
		padding-left: var(--prs-s-2);
	}

	body.prs-checkout #content form[name="customer_loginform"],
	.prs-register {
		padding-right: var(--prs-s-4);
		padding-left: var(--prs-s-4);
	}

	/* 内容の確認：見出しを上、中身を下に */
	body.prs-checkout #content #confirm_table tr {
		grid-template-columns: minmax(0, 1fr);
	}

	body.prs-checkout #content #confirm_table th {
		font-size: var(--prs-f-small);
	}

	.prs-notice {
		padding-right: var(--prs-s-4);
		padding-left: var(--prs-s-4);
	}

	body.prs-checkout #content .prs-notice__title {
		font-size: var(--prs-f-large); /* 「ご注文の前にご確認ください」が1行に入るように */
	}

	/* ご注文の前にご確認ください：見出しを上、中身を下に */
	.prs-notice__row {
		grid-template-columns: minmax(0, 1fr);
	}
}