/* ===============================
   鳩環屋 入力欄とボタンの共通の見た目（購入の流れ・会員ページで共通）
   Welcart Basic の見た目を上書きする。<body> に prs-form-page があるときだけ効く
   色は colors.css、文字の大きさ・余白は site.css の変数を使う
   しくみ：includes/welcart-forms.php
   画面ごとの形は checkout.css（購入の流れ）・member.css（会員ページ）
   =============================== */

/* .prs-button はプラグインが出すボタン（<a> にも付ける。サイト全体のリンクの色より強くするため body.prs-form-page を付ける）
   進むボタンの色：購入の流れはオレンジ（買うボタン）。会員ページは member.css で青にする */
body.prs-form-page {
	--prs-go: var(--prs-color-accent);
	--prs-go-dark: var(--prs-color-accent-dark);
}

/* 中身の幅：入力欄が横に長くなりすぎないように、PC でも真ん中にまとめる */
body.prs-form-page #content article.post {
	max-width: 820px;
	margin: 0 auto;
}

body.prs-form-page #content .cart_page_title,
body.prs-form-page #content .member_page_title {
	margin: 0 0 var(--prs-s-4);
	padding: 0;
	border: 0;
	background: none;
	color: var(--prs-color-text);
	font-size: var(--prs-f-h1);
	font-weight: 700;
	line-height: 1.4;
	text-align: left;
}

/* 見出し（お客様情報の「会員の方」・会員ページの「ご注文の履歴」・ログインの「会員登録がまだの方」）：左に青い線 */
body.prs-form-page #content #customer-info h5,
body.prs-form-page #content #memberinfo > h3,
body.prs-form-page #content .new-entry > h2 {
	margin: var(--prs-s-6) 0 var(--prs-s-3);
	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-form-page #content .error_message:not(:empty) {
	margin: 0 0 var(--prs-s-5);
	padding: var(--prs-s-3) var(--prs-s-4);
	border: 2px solid var(--prs-color-error);
	border-radius: var(--prs-r-large);
	background: var(--prs-color-error-bg);
	color: var(--prs-color-error);
	font-size: var(--prs-f-base);
	font-weight: 700;
	line-height: 1.6;
	text-align: left;
}

/* ===============================
   ボタン：進むボタンは大きな色つき、もどるボタンは白に青い線
   スマホでも PC でも縦にならべる（いちばん上が進むボタン）。形は商品ページのボタンとそろえる
   =============================== */
body.prs-form-page #content .send,
body.prs-form-page #content p.submit {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--prs-s-3);
	max-width: 480px;
	margin: var(--prs-s-6) auto 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: 0; /* ボタンのあいだの空白（&nbsp;）で、すき間がずれないように */
	text-align: center;
}

body.prs-form-page #content .send input[type="submit"],
body.prs-form-page #content .send input[type="button"],
body.prs-form-page #content .send a,
body.prs-form-page #content .prs-cf .wpcf7-submit, /* お問い合わせフォームの［送信する］ */
body.prs-form-page #content #member_login, /* Welcart Basic の「#wc_login .loginbox #member_login」より強く */
body.prs-form-page #content .new-entry #nav a,
body.prs-member-lostmemberpassword #content .loginbox #nav a,
body.prs-member-completion #content #memberpages > p:has(+ .send) > a,
body.prs-form-page .prs-button {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 60px;
	margin: 0;
	padding: var(--prs-s-2) var(--prs-s-4);
	border: 2px solid var(--prs-go);
	border-radius: var(--prs-r-small);
	box-shadow: none;
	background: var(--prs-go);
	color: var(--prs-color-white);
	font-family: inherit;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	text-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

body.prs-form-page #content .send input[type="submit"]:hover,
body.prs-form-page #content .send input[type="button"]:hover,
body.prs-form-page #content .send a:hover,
body.prs-form-page #content .prs-cf .wpcf7-submit:hover,
body.prs-form-page #content #member_login:hover,
body.prs-form-page #content .new-entry #nav a:hover,
body.prs-member-lostmemberpassword #content .loginbox #nav a:hover,
body.prs-member-completion #content #memberpages > p:has(+ .send) > a:hover,
body.prs-form-page .prs-button:hover {
	border-color: var(--prs-go-dark);
	background: var(--prs-go-dark);
	color: var(--prs-color-white);
}

/* 青いボタン：ログインして購入・会員登録をして次へ進む・トップへ戻る（完了の画面） */
body.prs-form-page #content .send input.to_memberlogin_button,
body.prs-form-page #content .send input.to_reganddeliveryinfo_button,
body.prs-form-page #content .send a.back_to_top_button {
	border-color: var(--prs-color-main);
	background: var(--prs-color-main);
}

body.prs-form-page #content .send input.to_memberlogin_button:hover,
body.prs-form-page #content .send input.to_reganddeliveryinfo_button:hover,
body.prs-form-page #content .send a.back_to_top_button:hover {
	border-color: var(--prs-color-main-dark);
	background: var(--prs-color-main-dark);
}

/* オレンジのボタン：カートへ進む（会員ページでも、買うボタンはオレンジ） */
body.prs-form-page .prs-button--cart {
	border-color: var(--prs-color-accent);
	background: var(--prs-color-accent);
}

body.prs-form-page .prs-button--cart:hover {
	border-color: var(--prs-color-accent-dark);
	background: var(--prs-color-accent-dark);
}

/* もどるボタン（白に青い線・いちばん下）
   購入の流れ：買い物を続ける・戻る ／ 会員ページ：トップページへ戻る・ログインの画面へもどる（会員登録の画面は .prs-button--back） */
body.prs-form-page #content .send input[name="previous"],
body.prs-form-page #content .send input[name="backCart"],
body.prs-form-page #content .send input[name="backCustomer"],
body.prs-form-page #content .send input[name="backDelivery"],
body.prs-form-page #content .send input[name="top"],
body.prs-form-page #content .send a.prs-button--back,
body.prs-member-lostmemberpassword #content .loginbox #nav a {
	order: 9;
	min-height: 50px;
	border-color: var(--prs-color-main);
	background: var(--prs-color-white);
	color: var(--prs-color-main);
	font-size: var(--prs-f-base);
}

body.prs-form-page #content .send input[name="previous"]:hover,
body.prs-form-page #content .send input[name="backCart"]:hover,
body.prs-form-page #content .send input[name="backCustomer"]:hover,
body.prs-form-page #content .send input[name="backDelivery"]:hover,
body.prs-form-page #content .send input[name="top"]:hover,
body.prs-form-page #content .send a.prs-button--back:hover,
body.prs-member-lostmemberpassword #content .loginbox #nav a:hover {
	border-color: var(--prs-color-main-dark);
	background: var(--prs-color-main-light);
	color: var(--prs-color-main-dark);
}

/* ===============================
   入力欄（お客様情報・配送先・会員登録・会員情報の変更）：見出しは欄の上、欄は横いっぱい、例は欄の下
   お問い合わせフォーム（.prs-cf）も、欄・ボタン・「必須」の印はここ。並べ方は contact.css
   =============================== */
body.prs-form-page #content .customer_form,
body.prs-form-page #content .customer_form tbody {
	display: block;
	width: 100%;
	margin: 0;
	border: 0;
}

body.prs-form-page #content .customer_form tr {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--prs-s-1) var(--prs-s-3);
	margin: 0;
	padding: var(--prs-s-3) 0 var(--prs-s-4);
	border: 0;
	border-bottom: 1px solid var(--prs-color-border);
}

body.prs-form-page #content .customer_form th,
body.prs-form-page #content .customer_form td {
	display: block;
	grid-column: 1 / -1;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--prs-color-text);
	font-size: var(--prs-f-base);
	text-align: left;
}

body.prs-form-page #content .customer_form th {
	font-weight: 700;
	line-height: 1.5;
}

/* 姓と名・セイとメイは横に2つ */
body.prs-form-page #content .customer_form tr.inp1 td {
	display: block;
	grid-column: auto;
	width: auto;
}

body.prs-form-page #content .customer_form .member_name,
body.prs-form-page #content .customer_form .member_furigana {
	display: block;
	padding: 0;
	color: var(--prs-color-note);
	font-size: var(--prs-f-small);
}

/* 「必須」の印（お問い合わせフォームは、欄の名前の <em>） */
body.prs-form-page #content .customer_form th em,
body.prs-form-page #content .prs-cf__label em {
	display: inline-block;
	margin: 0 var(--prs-s-2) 0 0;
	padding: 0 6px;
	border-radius: 4px;
	background: var(--prs-color-error);
	color: var(--prs-color-white);
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 1.6;
	vertical-align: 2px;
}

body.prs-form-page #content .customer_form input[type="text"],
body.prs-form-page #content .customer_form input[type="email"],
body.prs-form-page #content .customer_form input[type="password"],
body.prs-form-page #content .customer_form select,
body.prs-form-page #content .customer_form textarea,
body.prs-form-page #content .prs-cf input[type="text"],
body.prs-form-page #content .prs-cf input[type="email"],
body.prs-form-page #content .prs-cf input[type="tel"],
body.prs-form-page #content .prs-cf textarea,
body.prs-form-page #content #loginform input.loginmail,
body.prs-form-page #content #loginform input.loginpass {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-height: 52px;
	margin: 0;
	padding: var(--prs-s-2) var(--prs-s-3);
	border: 2px solid var(--prs-color-border);
	border-radius: var(--prs-r-small);
	background-color: var(--prs-color-white);
	color: var(--prs-color-text);
	font-family: inherit;
	font-size: var(--prs-f-base); /* 16px 以上にして、iPhone で欄を押したときに画面が勝手に大きくならないように */
	line-height: 1.5;
}

body.prs-form-page #content .customer_form input:focus,
body.prs-form-page #content .customer_form select:focus,
body.prs-form-page #content .customer_form textarea:focus,
body.prs-form-page #content .prs-cf input:focus,
body.prs-form-page #content .prs-cf textarea:focus,
body.prs-form-page #content #loginform input:focus {
	border-color: var(--prs-color-main);
	outline: 3px solid var(--prs-color-sky);
	outline-offset: 0;
}

/* 短い欄は短く（何を入れる欄か分かりやすいように） */
body.prs-form-page #content .customer_form input#zipcode,
body.prs-form-page #content .customer_form select.pref {
	max-width: 12em;
}

body.prs-form-page #content .customer_form input#tel,
body.prs-form-page #content .customer_form input#fax,
body.prs-form-page #content .prs-cf input[type="tel"] {
	max-width: 16em;
}

body.prs-form-page #content .customer_form textarea,
body.prs-form-page #content .prs-cf textarea {
	min-height: 8em;
}

/* 欄の下の例・案内 */
body.prs-form-page #content .prs-example {
	display: block;
	margin: var(--prs-s-1) 0 0;
	color: var(--prs-color-note);
	font-size: var(--prs-f-small);
}

body.prs-form-page #content .customer_form td {
	overflow-wrap: anywhere;
}

body.prs-form-page #content p.password_policy {
	margin: var(--prs-s-1) 0 0;
	color: var(--prs-color-note);
	font-size: var(--prs-f-small);
	text-align: left;
}