@charset "UTF-8";

/**
 * matching-cf7-form.css
 *
 * 公開面 CF7 フォーム（求人エントリー / スタッフ登録 JA・EN / 性格診断）の
 * 共通基底スタイル。フォーム HTML wrapper に `class="matching-cf7-form"` を
 * 付けたページで自動的に当たる。
 *
 * トークンは style.css :root の `--matching-cf7-*` を参照しており、各ページの
 * 固有サイズ差はページ側 CSS で `--matching-cf7-th-fs` 等を上書きする運用。
 *
 * 集約している項目:
 *   - .contactTable / th.title / td.input の table 骨組み（SP 1 列化含む）
 *   - 基本入力欄（input[type=text|email|tel|number|date|url|password] / textarea / select）
 *   - .input-sub（補足説明行）
 *   - .wpcf7-not-valid-tip / .wpcf7-not-valid（バリデーションエラーの強調）
 *   - .headling #handling .frame_box（個人情報枠の 21rem スクロール + h1/ol/ul/li）
 *   - .must（th.title 内バッジの上書きサイズ）
 *
 * @package Matching
 */

/* ========== コンテナ ========== */
.matching-cf7-form {
	width: 100%;
	color: var(--matching-color-text);
	font-size: var(--matching-cf7-td-fs);
	line-height: var(--matching-cf7-td-lh);
	letter-spacing: var(--matching-cf7-td-track);
	box-sizing: border-box;
}

/* ========== テーブル骨組み ========== */
.matching-cf7-form .contactTable {
	width: 100%;
	margin: 0 0 1.8rem;
	border-collapse: collapse;
	table-layout: fixed;
	border: 1px solid var(--matching-cf7-table-border-color);
	border-radius: var(--matching-cf7-table-radius);
	overflow: hidden;
	background: var(--matching-cf7-table-bg);
}

.matching-cf7-form .contactTable tr {
	border-bottom: 1px solid var(--matching-cf7-table-border-row);
}

.matching-cf7-form .contactTable tr:last-child {
	border-bottom: 0;
}

.matching-cf7-form .contactTable th.title {
	width: var(--matching-cf7-th-width);
	min-width: var(--matching-cf7-th-min-width);
	padding: var(--matching-cf7-cell-pad-y) var(--matching-cf7-cell-pad-x);
	font-size: var(--matching-cf7-th-fs);
	font-weight: var(--matching-cf7-th-fw);
	letter-spacing: 0.024em;
	line-height: var(--matching-cf7-th-lh);
	color: var(--matching-cf7-th-color);
	text-align: left;
	vertical-align: top;
	background: var(--matching-cf7-th-bg);
	border-right: 1px solid color-mix(in srgb, var(--matching-cf7-table-border-row) 94%, transparent);
}

/* th.title の中身を <label> で包む流儀（診断・求人エントリーで採用）に合わせ、
 * label 要素のデフォルトを継承表示に揃える。`for=` を持つラベルだけ
 * `.matching-cf7-form .contactTable th.title label[for]` の specificity で
 * 必要ならポインタを上書きする。 */
.matching-cf7-form .contactTable th.title label {
	margin: 0;
	font-weight: inherit;
	color: inherit;
	display: inline;
}
.matching-cf7-form .contactTable th.title label[for] {
	cursor: pointer;
}

.matching-cf7-form .contactTable td.input {
	padding: var(--matching-cf7-cell-pad-y) var(--matching-cf7-cell-pad-x);
	font-size: var(--matching-cf7-td-fs);
	color: var(--matching-cf7-td-color);
	vertical-align: top;
	line-height: var(--matching-cf7-td-lh);
	letter-spacing: var(--matching-cf7-td-track);
	background-color: var(--matching-cf7-table-bg);
}

/* zebra（読みやすさ） */
.matching-cf7-form .contactTable tbody tr:nth-child(even) td.input {
	background-color: var(--matching-cf7-cell-zebra);
}

/* destyle が span に当てる font-size を打ち消し、セル基準に揃える */
.matching-cf7-form .contactTable td.input span {
	font-size: inherit;
	line-height: inherit;
}

/* CF7 が生成するラッパー（チェック・ラジオ以外は最大幅で抑える） */
.matching-cf7-form .contactTable td.input .wpcf7-form-control-wrap:not([class*="radio"]):not([class*="checkbox"]) {
	display: block;
	width: 100%;
	max-width: var(--matching-cf7-input-max);
	box-sizing: border-box;
}

/* 補足説明行 */
.matching-cf7-form .input-sub {
	display: block;
	margin: 0.55rem 0 0;
	font-size: var(--matching-cf7-caption-fs);
	line-height: 1.55;
	color: var(--matching-cf7-caption-color);
	letter-spacing: 0;
}

/* ========== 必須バッジ：th.title 内サイズ調整 ========== */
.matching-cf7-form .contactTable th.title .must,
.matching-cf7-form .contactTable th.title .matching-must {
	font-size: var(--matching-cf7-must-fs);
	padding: var(--matching-cf7-must-pad-y) var(--matching-cf7-must-pad-x);
	border-radius: 4px;
	min-width: 0;
}

/* ========== 基本入力欄（共通） ========== */
.matching-cf7-form input[type="text"],
.matching-cf7-form input[type="email"],
.matching-cf7-form input[type="tel"],
.matching-cf7-form input[type="url"],
.matching-cf7-form input[type="number"],
.matching-cf7-form input[type="date"],
.matching-cf7-form input[type="time"],
.matching-cf7-form input[type="password"],
.matching-cf7-form select,
.matching-cf7-form textarea {
	display: block;
	width: 100%;
	max-width: var(--matching-cf7-input-max);
	min-height: var(--matching-cf7-input-h);
	padding: var(--matching-cf7-input-padding-y) var(--matching-cf7-input-padding-x);
	font-family: inherit;
	font-size: var(--matching-cf7-input-fs);
	line-height: 1.52;
	letter-spacing: var(--matching-cf7-td-track);
	color: var(--matching-color-heading);
	background: var(--matching-color-bg);
	border: 1px solid var(--matching-cf7-input-border);
	border-radius: var(--matching-cf7-input-radius);
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color var(--matching-transition), box-shadow var(--matching-transition), background-color var(--matching-transition);
}

.matching-cf7-form input::placeholder,
.matching-cf7-form textarea::placeholder {
	color: color-mix(in srgb, var(--matching-color-label) 70%, transparent);
}

.matching-cf7-form input:hover,
.matching-cf7-form select:hover,
.matching-cf7-form textarea:hover {
	border-color: var(--matching-cf7-input-border-hover);
	background: var(--matching-color-bg);
}

.matching-cf7-form input:focus,
.matching-cf7-form select:focus,
.matching-cf7-form textarea:focus {
	outline: none;
	border-color: var(--matching-color-primary);
	box-shadow: var(--matching-cf7-input-focus-shadow);
}

.matching-cf7-form input[readonly] {
	background: var(--matching-color-surface);
	color: var(--matching-color-secondary);
	cursor: default;
}

.matching-cf7-form textarea {
	min-height: var(--matching-cf7-textarea-min);
	resize: vertical;
}

/* select は appearance:none + SVG 矢印で見た目を統一（ブランドカラー arrow） */
.matching-cf7-form select {
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M2 2l6 6 6-6' fill='none' stroke='%231557b0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 0.9rem auto;
	padding-right: calc(var(--matching-cf7-input-padding-x) + 2.2rem);
}

/* ========== CF7 バリデーションエラー ========== */
.matching-cf7-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.45rem;
	font-size: var(--matching-cf7-not-valid-fs);
	font-weight: 600;
	color: var(--matching-cf7-not-valid-color);
}

.matching-cf7-form .wpcf7-not-valid-tip::before {
	content: var(--matching-cf7-not-valid-prefix);
}

.matching-cf7-form .wpcf7-not-valid {
	border-color: var(--matching-color-danger) !important;
	background: color-mix(in srgb, var(--matching-color-danger) 4%, var(--matching-color-bg));
}

/* ========== 個人情報の取り扱い（.headling#handling .frame_box） ========== */
.matching-cf7-form .headling#handling {
	margin: 0 0 0.9rem;
	width: 100%;
}

.matching-cf7-form .headling#handling .frame_box {
	display: block;
	max-height: var(--matching-cf7-handling-max-h);
	overflow-y: auto;
	overflow-x: hidden;
	padding: var(--matching-cf7-handling-pad-y) var(--matching-cf7-handling-pad-x) calc(var(--matching-cf7-handling-pad-y) + 0.125rem);
	border: 1px solid var(--matching-cf7-handling-border);
	border-radius: var(--matching-cf7-table-radius);
	background: var(--matching-cf7-handling-bg);
	box-shadow: var(--matching-shadow);
	-webkit-overflow-scrolling: touch;
	color: var(--matching-cf7-handling-text);
	font-size: var(--matching-cf7-handling-prose-fs);
	line-height: var(--matching-cf7-handling-prose-lh);
	letter-spacing: 0.024em;
	scrollbar-gutter: stable both-edges;
}

.matching-cf7-form .headling#handling .frame_box h1 {
	margin: 0 0 0.85rem;
	padding: 0 0 0.8rem;
	font-weight: 700;
	font-size: var(--matching-cf7-handling-prose-title-fs);
	line-height: var(--matching-cf7-handling-prose-title-lh);
	color: var(--matching-cf7-handling-text);
	letter-spacing: 0.032em;
	border-bottom: 1px solid var(--matching-cf7-handling-border);
}

.matching-cf7-form .headling#handling .frame_box .mb-20 {
	margin-bottom: 0.85rem;
}

.matching-cf7-form .headling#handling .frame_box ol {
	margin: 0 0 0.65rem;
	padding-left: var(--matching-cf7-handling-ol-indent);
	color: var(--matching-cf7-handling-text);
	list-style: decimal;
	line-height: var(--matching-cf7-handling-prose-lh);
}

.matching-cf7-form .headling#handling .frame_box ol li {
	margin-bottom: 0.5rem;
	font-size: inherit;
	font-weight: 600;
}

.matching-cf7-form .headling#handling .frame_box ol li p {
	margin: 0.2rem 0 0;
	font-weight: 400;
	color: var(--matching-cf7-handling-text-sub);
	font-size: inherit;
	line-height: inherit;
}

/* お問い合わせ先（ul）は本文より一段小さいメタ情報サイズ */
.matching-cf7-form .headling#handling .frame_box ul {
	margin: 0.85rem 0 0;
	padding: 0.7rem 0 0 var(--matching-cf7-handling-ul-indent);
	border-top: 1px dashed color-mix(in srgb, var(--matching-cf7-handling-border) 80%, transparent);
	list-style: none;
	color: var(--matching-cf7-handling-text-meta);
	font-size: var(--matching-cf7-handling-prose-fs);
	line-height: var(--matching-cf7-handling-prose-lh);
	letter-spacing: 0.018em;
}

.matching-cf7-form .headling#handling .frame_box ul li {
	margin-bottom: 0.18rem;
	font-size: inherit;
	font-weight: 400;
}

/* wpautop で挿入される <p> の既定サイズに引っ張られないよう、ul 配下の <p> は親に揃える */
.matching-cf7-form .headling#handling .frame_box ul li p,
.matching-cf7-form .headling#handling .frame_box ul li span,
.matching-cf7-form .headling#handling .frame_box ul li.address,
.matching-cf7-form .headling#handling .frame_box ul li.address .zipcode {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
}

.matching-cf7-form .headling#handling .frame_box ul li.square {
	margin: 0.1rem 0 0.35rem;
	font-weight: 600;
	color: var(--matching-cf7-handling-text);
	font-size: inherit;
}

.matching-cf7-form .headling#handling .frame_box ul li.square p {
	font-weight: 600;
	color: var(--matching-cf7-handling-text);
}

.matching-cf7-form .headling#handling .frame_box .address .zipcode {
	display: inline;
	font-size: inherit;
}

/* ========== 個人情報同意（CF7 [acceptance] + .form-check ラッパ） ==========
 * 求人エントリー / staff JA / staff EN / 性格診断 はすべて wpcf7 [acceptance] を
 * `<div class="form-group form-check">` で囲む流儀に統一済み。
 * .form-check の枠装飾と、CF7 [acceptance] が出力する span/label の組を再配置する。
 * 同意未スクロール時は policy-gate.js が `is-policy-locked` クラスを付け、内部の input は
 * disabled になる。チェック時は `:has(:checked)` でアクセントカラーに変える。 */
.matching-cf7-form .form-group.form-check,
.matching-cf7-form .form-check {
	display: block;
	margin: 1.2rem 0 0;
	padding: 0;
	background: var(--matching-color-surface-alt);
	border: 1px solid var(--matching-color-border);
	border-radius: calc(var(--matching-cf7-table-radius) + 2px);
	overflow: hidden;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
	transition: border-color var(--matching-transition), background-color var(--matching-transition),
		box-shadow var(--matching-transition), opacity 0.2s ease;
	font-size: var(--matching-cf7-consent-label-fs);
	line-height: var(--matching-cf7-consent-label-lh);
	letter-spacing: 0.024em;
}

.matching-cf7-form .form-check:hover {
	border-color: color-mix(in srgb, var(--matching-color-primary) 32%, var(--matching-color-border));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* スクロール完了前は同意 input が disabled。視覚的には軽い非アクティブ感だけ示す。
 * 旧仕様（page-jobs / page-staff-registration / page-character-diagnosis それぞれ）でも
 * カーソル変更程度の控えめ表現だったため、合わせる。 */
.matching-cf7-form .form-check input[type="checkbox"]:disabled {
	cursor: not-allowed;
}
.matching-cf7-form .form-check.is-policy-locked .wpcf7-list-item-label,
.matching-cf7-form .form-check input[type="checkbox"]:disabled + .wpcf7-list-item-label,
.matching-cf7-form .form-check:has(input[type="checkbox"]:disabled) .wpcf7-list-item-label {
	cursor: not-allowed;
}

/* CF7 [acceptance] が出力する span 群をリセットして label 1 枚扱いに */
.matching-cf7-form .form-check .wpcf7-form-control-wrap {
	display: block;
	margin: 0;
	width: 100%;
	max-width: none;
}
.matching-cf7-form .form-check .wpcf7-acceptance {
	display: block;
}
.matching-cf7-form .form-check .wpcf7-list-item {
	display: block;
	margin: 0;
}
.matching-cf7-form .form-check .wpcf7-list-item label {
	display: flex !important;
	align-items: center;
	gap: 0.875rem;
	margin: 0 !important;
	padding: var(--matching-cf7-consent-pad-y) var(--matching-cf7-consent-pad-x) !important;
	min-height: var(--matching-cf7-consent-min-height);
	min-width: 0 !important;
	cursor: pointer;
	user-select: none;
	color: var(--matching-color-heading);
	font: inherit;
	font-weight: 600;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	justify-content: flex-start !important;
}

.matching-cf7-form .form-check input[type="checkbox"],
.matching-cf7-form .form-check .form-check-input {
	width: var(--matching-cf7-consent-check-size) !important;
	height: var(--matching-cf7-consent-check-size) !important;
	min-width: var(--matching-cf7-consent-check-size) !important;
	min-height: var(--matching-cf7-consent-check-size) !important;
	margin: 0 !important;
	padding: 0 !important;
	accent-color: var(--matching-color-primary);
	cursor: pointer;
	flex-shrink: 0;
	/* スタッフ登録 page-staff-registration.css の .contactTable 内チップ用
	 * 「視覚的非表示」ルールより優先してネイティブ checkbox を必ず見せる */
	position: static !important;
	opacity: 1 !important;
	clip: auto !important;
	clip-path: none !important;
	overflow: visible !important;
	border: 0 !important;
	-webkit-appearance: checkbox !important;
	appearance: checkbox !important;
}

.matching-cf7-form .form-check .wpcf7-list-item-label {
	flex: 1 1 auto;
	min-width: 0;
	font-size: inherit;
	font-weight: 600;
	color: var(--matching-color-heading);
	line-height: inherit;
}

.matching-cf7-form .form-check:has(input[type="checkbox"]:checked) {
	border-color: var(--matching-color-primary);
	background: color-mix(in srgb, var(--matching-color-primary) 8%, var(--matching-color-bg));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.matching-cf7-form .form-check:has(input[type="checkbox"]:focus-visible) {
	border-color: var(--matching-color-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--matching-color-primary) 22%, transparent);
}

/* 同意未チェック送信時の [acceptance] エラー */
.matching-cf7-form .form-check .wpcf7-not-valid-tip {
	display: block;
	margin: 0;
	padding: 0.6rem 1.4rem 0.8rem;
	color: var(--matching-color-danger-text);
	background: color-mix(in srgb, var(--matching-color-danger) 6%, var(--matching-color-bg));
	border-top: 1px solid color-mix(in srgb, var(--matching-color-danger) 30%, transparent);
}

/* policy-gate のヒント文（共通 / 求人エントリーの旧クラスも併記） */
.matching-cf7-form .matching-policy-gate-hint,
.matching-cf7-form .recruit-entry-policy-hint {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0 0 0.6rem;
	font-size: var(--matching-cf7-caption-fs);
	font-weight: 600;
	color: var(--matching-color-secondary);
	line-height: 1.55;
	letter-spacing: 0.024em;
}
.matching-cf7-form .matching-policy-gate-hint.is-done,
.matching-cf7-form .recruit-entry-policy-hint.is-done {
	display: none;
}

/* ========== 確認画面・送信ボタンブロックの共通レイアウト ==========
 * staff JA / EN / 診断は確認画面と 2 段ボタンを持つ。それぞれの実装に分散している
 * .btn-wrapper / .submit.confirmation / .submit.edit / .submit.contact / .submit-wrapper /
 * .confirmation-wrapper / .edit-wrapper の配置を 1 か所に集約する。
 * `.btn-actions-row` 単独の場合は 2 ボタンを横並び（修正 + 送信）にする。 */
.matching-cf7-form .btn-wrapper {
	display: block;
	margin: 0;
	padding: 1.6rem 0 0;
	border-top: 1px solid color-mix(in srgb, var(--matching-color-border) 70%, transparent);
	text-align: center;
}

.matching-cf7-form .btn-wrapper + .btn-wrapper {
	border-top: 0;
	padding-top: 0.8rem;
}

.matching-cf7-form .btn-wrapper.btn-actions-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.85rem 1.25rem;
}

/* `.submit` 系のラッパは「JS が style.display='none'/'inline-block' で出し入れする」
 * 既存運用（script-hearing.js / script-diagnosis.js）に従う。
 * !important で display を上書きすると確認画面遷移前から #editBtn / #submitBtn が
 * 露出してしまうため、display は触らず align のみ整える。 */
.matching-cf7-form .btn-wrapper .submit,
.matching-cf7-form .btn-wrapper .submit.confirmation,
.matching-cf7-form .btn-wrapper .submit.edit,
.matching-cf7-form .btn-wrapper .submit.contact {
	justify-content: center;
	align-items: center;
}

.matching-cf7-form .btn-wrapper.btn-actions-row .submit {
	width: auto;
}

.matching-cf7-form .btn-wrapper .submit-wrapper,
.matching-cf7-form .btn-wrapper .confirmation-wrapper,
.matching-cf7-form .btn-wrapper .edit-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	width: auto;
	max-width: 100%;
	margin: 0 auto;
}

.matching-cf7-form .btn-wrapper .submit-wrapper input[type="submit"],
.matching-cf7-form .btn-wrapper input[type="submit"] {
	width: auto;
	min-width: 22rem;
	max-width: 32rem;
}

/* CF7 標準スピナーは hidden（送信中表示は matching-cf7.css のオーバーレイに集約） */
.matching-cf7-form .wpcf7-spinner {
	display: none;
}

/* ========== スマホ 1 列化（max-width: 640px） ==========
 * .contactTable を block 化して各 tr を縦カードに、th.title を上ラベル、
 * td.input を下入力欄として積み上げる。 */
@media (max-width: 640px) {
	.matching-cf7-form .contactTable {
		display: block;
		border: 1px solid var(--matching-cf7-table-border-row);
	}

	.matching-cf7-form .contactTable tbody,
	.matching-cf7-form .contactTable tr,
	.matching-cf7-form .contactTable th.title,
	.matching-cf7-form .contactTable td.input {
		display: block;
		width: auto;
	}

	.matching-cf7-form .contactTable tr {
		border-bottom: 1px solid var(--matching-cf7-table-border-row);
	}

	.matching-cf7-form .contactTable tr:last-child {
		border-bottom: 0;
	}

	.matching-cf7-form .contactTable th.title {
		width: 100%;
		min-width: 0;
		padding: 1.05rem 1.2rem;
		border-right: 0;
		border-bottom: 1px solid color-mix(in srgb, var(--matching-cf7-table-border-row) 70%, transparent);
		background: var(--matching-cf7-th-bg);
	}

	.matching-cf7-form .contactTable th.title br {
		display: none;
	}

	.matching-cf7-form .contactTable td.input {
		padding: 1.1rem 1.2rem 1.3rem;
	}

	.matching-cf7-form .contactTable td.input .wpcf7-form-control-wrap:not([class*="radio"]):not([class*="checkbox"]) {
		max-width: 100%;
	}

	.matching-cf7-form .headling#handling .frame_box {
		padding: 1rem 1.2rem 1.1rem;
	}
}

/* ========== 認証エラー導線 / パスワード強度 ========== */
.matching-auth-error-actions {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	margin-left: 0.35rem;
}

.matching-auth-error-link {
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.matching-password-strength {
	margin-top: 0.55rem;
	max-width: 28rem;
}

.matching-password-strength-bar {
	height: 0.35rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--matching-color-border) 70%, transparent);
	overflow: hidden;
}

.matching-password-strength-bar span {
	display: block;
	height: 100%;
	width: 0;
	border-radius: inherit;
	background: var(--matching-color-danger);
	transition: width 0.2s ease, background 0.2s ease;
}

.matching-password-strength.is-fair .matching-password-strength-bar span {
	background: #d97706;
}

.matching-password-strength.is-strong .matching-password-strength-bar span,
.matching-password-strength.is-very-strong .matching-password-strength-bar span {
	background: var(--matching-color-primary);
}

.matching-password-strength-label {
	margin: 0.35rem 0 0;
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--matching-color-secondary);
}

.matching-password-strength-prefix {
	color: var(--matching-color-secondary);
	font-weight: 600;
}

.matching-password-strength-value {
	font-weight: 700;
}

.matching-password-strength.is-weak .matching-password-strength-value {
	color: var(--matching-color-danger, #dc2626);
}

.matching-password-strength.is-fair .matching-password-strength-value {
	color: #d97706;
}

.matching-password-strength.is-strong .matching-password-strength-value,
.matching-password-strength.is-very-strong .matching-password-strength-value {
	color: var(--matching-color-primary, #059669);
}

/* ========== パスワード表示切替（ログイン / スタッフ登録等 共通） ========== */
.matching-password-input-wrap {
	position: relative;
	display: block;
	width: 100%;
	max-width: var(--matching-cf7-input-max, 36rem);
}

.matching-cf7-form .matching-password-input-wrap .wpcf7-form-control,
.matching-cf7-form .matching-password-input-wrap input[type="password"],
.matching-cf7-form .matching-password-input-wrap input[type="text"],
.page-login-field .matching-password-input-wrap .page-login-input {
	padding-right: 2.75rem;
}

.matching-password-toggle {
	position: absolute;
	top: 50%;
	right: 0.65rem;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.2rem;
	height: 2.2rem;
	padding: 0;
	border: 0;
	border-radius: var(--matching-input-radius, 0.45rem);
	background: transparent;
	color: var(--matching-color-muted, #706d65);
	cursor: pointer;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.matching-password-toggle:hover,
.matching-password-toggle:focus-visible {
	color: var(--matching-color-primary);
	background: color-mix(in srgb, var(--matching-color-primary) 10%, transparent);
	outline: none;
}

.matching-password-toggle-icon {
	display: block;
}