/* Wedding Yoyaku Frontend Styles */

.wy-form-wrapper {
	max-width: 1040px;
	margin: 30px auto;
	padding: 20px;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.wy-form-title {
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 10px;
	color: #333;
	text-align: center;
}

.wy-form-description {
	background: #f9f9f9;
	border-left: 4px solid #d4a574;
	padding: 12px;
	margin-bottom: 20px;
	font-size: 14px;
	line-height: 1.6;
	color: #555;
}

.wy-form-section {
	margin-bottom: 30px;
}

.wy-section-title {
	font-size: 16px;
	font-weight: bold;
	color: #333;
	margin-bottom: 15px;
	padding-bottom: 8px;
	border-bottom: 2px solid #f0f0f0;
}

.wy-form-group {
	margin-bottom: 20px;
}

.wy-label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
	color: #333;
	font-size: 14px;
}

.wy-label .required {
	color: #d32f2f;
	margin-left: 4px;
}

.wy-input,
.wy-textarea,
.wy-select {
	width: 100%;
	padding: 14px 14px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 16px;
	line-height: 1.5;
	font-family: inherit;
	transition: border-color 0.3s ease;
	box-sizing: border-box;
}

/* 1行入力は高さを揃える（date/select はブラウザ差が出やすいため） */
.wy-input,
.wy-select {
	min-height: 52px;
}

.wy-input:focus,
.wy-textarea:focus,
.wy-select:focus {
	outline: none;
	border-color: #d4a574;
	box-shadow: 0 0 0 2px rgba(212, 165, 116, 0.1);
}

.wy-textarea {
	resize: vertical;
	min-height: 140px;
}

.wy-radio-group,
.wy-checkbox-group {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* ヘアセット・メイキャップの「あり／なし」は横並び */
.wy-radio-group--inline {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 24px;
}

.wy-radio-item,
.wy-checkbox-item {
	display: flex;
	align-items: center;
	gap: 8px;
}

.wy-radio-item input[type="radio"],
.wy-checkbox-item input[type="checkbox"] {
	width: 18px;
	height: 18px;
	cursor: pointer;
	accent-color: #d4a574;
}

.wy-radio-item label,
.wy-checkbox-item label {
	cursor: pointer;
	margin: 0;
	font-weight: normal;
}

/* Salon Selection */
.wy-salon-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	align-items: start; /* 画像の高さが異なる場合にカードが伸びないように */
	gap: 15px;
	margin-bottom: 20px;
}

/* タブレット以下は2列 */
@media (max-width: 860px) {
	.wy-salon-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

.wy-salon-card {
	border: 2px solid #e0e0e0;
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
	transition: all 0.3s ease;
	text-align: center;
}

.wy-salon-card:hover {
	border-color: #d4a574;
	box-shadow: 0 4px 12px rgba(212, 165, 116, 0.2);
}

.wy-salon-card.selected {
	border-color: #d4a574;
	background: #fafafa;
}

.wy-salon-image {
	display: block;
	width: 100%;
	height: auto;          /* 入稿画像の縦横比のまま全体を表示 */
	background: #f0f0f0;
}

/* 画像内に店舗名が入っているため、テキストの店舗名は非表示
   （JS の希望日ラベル用に DOM 上には残す） */
.wy-salon-name {
	display: none;
}

/* Calendar Picker */
.wy-calendar-picker {
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 15px;
	background: #fafafa;
	margin-top: 10px;
}

.wy-calendar-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
}

.wy-calendar-header button {
	background: #d4a574;
	color: white;
	border: none;
	padding: 6px 10px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 12px;
}

.wy-calendar-header button:hover {
	background: #b8935d;
}

.wy-calendar-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 5px;
}

.wy-calendar-day {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 12px;
	background: white;
	cursor: not-allowed;
	color: #999;
}

.wy-calendar-day.available {
	cursor: pointer;
	background: white;
	color: #333;
	border-color: #ddd;
	transition: all 0.2s ease;
}

.wy-calendar-day.available:hover {
	background: #f0e6d2;
	border-color: #d4a574;
}

.wy-calendar-day.selected {
	background: #d4a574;
	color: white;
	border-color: #d4a574;
	font-weight: bold;
}

.wy-calendar-day.other-month {
	color: #ccc;
}

/* Multiple Guests */
.wy-guest-list {
	margin-top: 15px;
}

.wy-guest-item {
	background: #f9f9f9;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	padding: 15px;
	margin-bottom: 12px;
	position: relative;
}

.wy-guest-item-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.wy-guest-item-number {
	font-weight: bold;
	color: #666;
}

.wy-guest-item-remove {
	background: #ff6b6b;
	color: white;
	border: none;
	padding: 4px 8px;
	border-radius: 3px;
	cursor: pointer;
	font-size: 12px;
}

.wy-guest-item-remove:hover {
	background: #ee5a52;
}

.wy-add-guest-btn {
	background: #d4a574;
	color: white;
	border: none;
	padding: 10px 16px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	width: 100%;
	margin-top: 10px;
}

.wy-add-guest-btn:hover {
	background: #b8935d;
}

/* Form Actions */
.wy-form-actions {
	display: flex;
	gap: 10px;
	margin-top: 30px;
}

.wy-submit-btn {
	flex: 1;
	background: #d4a574;
	color: white;
	border: none;
	padding: 12px;
	border-radius: 4px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.3s ease;
}

.wy-submit-btn:hover {
	background: #b8935d;
}

.wy-submit-btn:disabled {
	background: #ccc;
	cursor: not-allowed;
}

/* Confirmation and Completion */
.wy-confirmation-screen,
.wy-completion-screen {
	background: #f9f9f9;
	border-radius: 8px;
	padding: 30px;
	text-align: center;
}

.wy-completion-icon {
	font-size: 48px;
	margin-bottom: 15px;
}

.wy-completion-message {
	font-size: 18px;
	font-weight: 600;
	color: #333;
	margin-bottom: 10px;
}

.wy-completion-detail {
	font-size: 14px;
	color: #666;
	line-height: 1.6;
	margin-bottom: 30px;
}

/* Utility */
.wy-description {
	font-size: 12px;
	color: #666;
	margin-top: 4px;
	line-height: 1.5;
}

.wy-error {
	background: #ffebee;
	border-left: 4px solid #d32f2f;
	color: #c62828;
	padding: 12px;
	border-radius: 4px;
	margin-bottom: 20px;
}

.wy-success {
	background: #e8f5e9;
	border-left: 4px solid #4caf50;
	color: #2e7d32;
	padding: 12px;
	border-radius: 4px;
	margin-bottom: 20px;
}

/* Responsive */
@media (max-width: 768px) {
	.wy-form-wrapper {
		padding: 15px;
	}

	.wy-form-title {
		font-size: 20px;
	}

	.wy-section-title {
		font-size: 14px;
	}

	.wy-label {
		font-size: 13px;
	}

	.wy-input,
	.wy-textarea,
	.wy-select {
		font-size: 16px; /* Prevents iOS zoom on input focus */
	}

	.wy-form-actions {
		flex-direction: column;
	}

	.wy-submit-btn {
		width: 100%;
	}
}

/* ==================================================================
 * v1.0.0 追加分
 * ================================================================== */

/* --- 選択カード（試着目的・ご予約種別） --- */
.wy-choice-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}

.wy-choice-grid-2 {
	grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 767px) {
	.wy-choice-grid,
	.wy-choice-grid-2 {
		grid-template-columns: repeat(2, 1fr);
	}
}

.wy-choice-card {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 12px 10px;
	border: 2px solid #e0dcd5;
	border-radius: 6px;
	background: #fff;
	cursor: pointer;
	text-align: center;
	transition: border-color .15s, background .15s;
}

.wy-choice-card:hover {
	border-color: #d4a574;
}

.wy-choice-card input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.wy-choice-label {
	font-size: 14px;
	line-height: 1.4;
	color: #333;
}

/* チェック状態 */
.wy-choice-card:has(input:checked),
.wy-choice-card.checked {
	border-color: #d4a574;
	background: #faf3ea;
}

.wy-choice-card:has(input:checked)::after,
.wy-choice-card.checked::after {
	content: '✓';
	position: absolute;
	top: 4px;
	right: 8px;
	color: #d4a574;
	font-weight: bold;
}

/* --- サロン選択の選択状態を明示 --- */
.wy-salon-card {
	position: relative;
	cursor: pointer;
	border: 2px solid transparent;
	border-radius: 6px;
	transition: border-color .15s;
}

.wy-salon-card.selected {
	border-color: #d4a574;
	background: #faf3ea;
}

.wy-salon-card.selected::after {
	content: '選択中';
	position: absolute;
	top: 6px;
	right: 6px;
	padding: 2px 8px;
	background: #d4a574;
	color: #fff;
	font-size: 11px;
	border-radius: 3px;
}

/* --- カレンダー --- */
.wy-date-field {
	position: relative;
}

.wy-calendar-trigger {
	cursor: pointer;
	background: #fff;
}

.wy-calendar-picker {
	position: relative;
	margin-top: 6px;
	padding: 12px;
	border: 1px solid #e0dcd5;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
	z-index: 10;
}

.wy-calendar-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.wy-cal-title {
	font-weight: bold;
	font-size: 15px;
}

.wy-cal-prev,
.wy-cal-next {
	padding: 4px 10px;
	border: 1px solid #e0dcd5;
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
}

.wy-calendar-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 3px;
}

.wy-calendar-dow {
	padding: 4px 0;
	text-align: center;
	font-size: 12px;
	color: #888;
}

.wy-calendar-dow:first-child { color: #c0504d; }
.wy-calendar-dow:last-child  { color: #4a7ebb; }

.wy-calendar-day {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	border-radius: 4px;
	color: #ccc;
	cursor: default;
}

.wy-calendar-day.other-month {
	visibility: hidden;
}

.wy-calendar-day.available {
	background: #f3ece2;
	color: #333;
	cursor: pointer;
	font-weight: 500;
}

.wy-calendar-day.available:hover {
	background: #d4a574;
	color: #fff;
}

.wy-calendar-day.selected {
	background: #d4a574;
	color: #fff;
	font-weight: bold;
}

/* --- 横並びラジオ（新郎/新婦） --- */
.wy-inline-radios {
	display: flex;
	gap: 20px;
	margin-bottom: 8px;
}

/* --- 単位付き入力 --- */
.wy-input-inline {
	display: inline-block;
	width: 120px;
	margin-right: 6px;
}

/* --- 注意書き --- */
.wy-note-hotmail,
.wy-note-important {
	padding: 8px 10px;
	border-left: 3px solid #d4a574;
	background: #faf7f2;
	font-size: 12px;
	line-height: 1.6;
}

/* --- PDFダウンロードボタン --- */
.wy-pdf-download {
	margin: 20px 0;
	text-align: center;
}

.wy-pdf-btn {
	display: inline-block;
	padding: 14px 32px;
	border: 2px solid #d4a574;
	border-radius: 6px;
	background: #fff;
	color: #a67c52;
	font-weight: bold;
	text-decoration: none;
	line-height: 1.5;
	transition: background .15s, color .15s;
}

.wy-pdf-btn:hover {
	background: #d4a574;
	color: #fff;
}

.wy-pdf-btn span {
	font-size: 12px;
	font-weight: normal;
}

.wy-inline-link {
	display: inline-block;
	margin-left: 10px;
	font-size: 12px;
	font-weight: normal;
	color: #a67c52;
}

/* --- 確認画面 --- */
.wy-confirm-table {
	width: 100%;
	border-collapse: collapse;
	margin: 16px 0 24px;
}

.wy-confirm-table th,
.wy-confirm-table td {
	padding: 12px 10px;
	border-bottom: 1px solid #eee;
	text-align: left;
	vertical-align: top;
	font-size: 14px;
}

.wy-confirm-table th {
	width: 34%;
	background: #faf7f2;
	font-weight: 500;
	color: #666;
}

@media (max-width: 600px) {
	.wy-confirm-table th,
	.wy-confirm-table td {
		display: block;
		width: 100%;
		border-bottom: none;
	}
	.wy-confirm-table td {
		padding-top: 4px;
		border-bottom: 1px solid #eee;
	}
}

.wy-back-btn {
	padding: 14px 32px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #fff;
	color: #666;
	cursor: pointer;
	margin-right: 10px;
	font-size: 15px;
}

.wy-back-btn:hover {
	background: #f5f5f5;
}

/* ==================================================================
 * 希望日フィールドの幅調整
 * カレンダーのセルは aspect-ratio:1 のため、枠幅がそのまま高さになる。
 * 枠を絞ることで入力欄・カレンダーの両方が適正サイズになる。
 * ================================================================== */

.wy-date-field {
	max-width: 340px;
}

@media (max-width: 600px) {
	.wy-date-field {
		max-width: 100%;
	}
}

/* ==================================================================
 * 可読性の調整（ゴシック体・見出しのメリハリ・文字サイズ）
 * ================================================================== */

/* --- ゴシック体 ---
   テーマ側の明朝を引き継がないよう、フォーム内を明示的に上書きする。
   テーマが見出し等に直接 font-family を指定しているケースに確実に勝つため、
   この一点のみ !important を使用している */
.wy-form-wrapper,
.wy-form-wrapper * {
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue",
		"Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
		"Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif !important;
}

.wy-form-wrapper {
	line-height: 1.8;
	color: #2c2c2c;
}

/* --- フォームタイトル --- */
.wy-form-title {
	font-size: 26px;
	margin-bottom: 16px;
}

.wy-form-description {
	font-size: 15px;
	line-height: 1.8;
	padding: 16px;
	color: #444;
}

/* --- セクション区切りのメリハリ --- */
.wy-form-section {
	margin-bottom: 40px;
}

.wy-section-title {
	font-size: 18px;
	font-weight: bold;
	color: #4a3728;
	background: #f6efe5;
	border-left: 5px solid #d4a574;
	border-bottom: none;
	border-radius: 3px;
	padding: 13px 16px;
	margin-bottom: 22px;
	line-height: 1.5;
}

.wy-section-title .required {
	color: #d32f2f;
	margin-left: 2px;
}

/* --- 設問ラベル --- */
.wy-label {
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 8px;
	color: #2c2c2c;
}

.wy-form-group {
	margin-bottom: 26px;
}

/* --- 補足テキスト --- */
.wy-description {
	font-size: 14px;
	line-height: 1.75;
	color: #555;
	margin-top: 6px;
}

.wy-note-hotmail,
.wy-note-important {
	font-size: 14px;
	line-height: 1.75;
	padding: 12px 14px;
}

/* --- 選択肢 --- */
.wy-radio-item,
.wy-checkbox-item {
	font-size: 16px;
	line-height: 1.6;
	cursor: pointer;
}

.wy-radio-group,
.wy-checkbox-group {
	gap: 14px;
}

.wy-choice-label {
	font-size: 15px;
	line-height: 1.5;
}

/* --- 確認画面 --- */
.wy-confirm-table th,
.wy-confirm-table td {
	font-size: 15px;
	line-height: 1.7;
	padding: 14px 12px;
}

/* --- 完了画面 --- */
.wy-completion-detail {
	font-size: 15px;
	line-height: 1.8;
}

/* --- ボタン --- */
.wy-submit-btn,
.wy-back-btn,
.wy-add-guest-btn {
	font-size: 16px;
}

@media (max-width: 768px) {
	/* 768px 以下でラベル等が小さくなる旧指定を打ち消す */
	.wy-section-title {
		font-size: 16px;
		padding: 11px 13px;
	}

	.wy-label {
		font-size: 15px;
	}

	.wy-form-title {
		font-size: 21px;
	}
}

/* ==================================================================
 * 入力欄の幅を統一（フォーム幅1040pxに対して約30%）
 * ================================================================== */

/* 日付フィールドと同じ基準幅に揃える。
   .wy-date-field 内の input は親側で制御するため直下の子だけを対象にする */
.wy-form-group > .wy-input,
.wy-form-group > .wy-select {
	max-width: 340px;
}

/* メッセージ欄は入力量が多いため広いまま */
.wy-textarea {
	max-width: 100%;
}

@media (max-width: 600px) {
	.wy-form-group > .wy-input,
	.wy-form-group > .wy-select {
		max-width: 100%;
	}
}

/* ==================================================================
 * 設問ラベルの調整
 * テーマ側に .entry-content label（詳細度 0,1,1）があり、
 * .wy-label（0,1,0）では負けるため .wy-form-wrapper を足して確実に効かせる
 * ================================================================== */

.wy-form-wrapper .wy-label {
	color: #777;
	font-size: 15px;
}

/* 必須マークはラベル色に引きずられないよう据え置き */
.wy-form-wrapper .wy-label .required {
	color: #d32f2f;
}

/* --- チェックボックス選択肢の文字サイズ --- */
.wy-form-wrapper .wy-checkbox-item {
	font-size: 15px;
}

/* ==================================================================
 * 注意文（ホットメール注意・初回来店の案内）
 * 背景と縁取りをやめ、文字色だけで注意喚起するシンプルな体裁に
 * ================================================================== */

.wy-form-wrapper .wy-note-hotmail,
.wy-form-wrapper .wy-note-important {
	background: none;
	border: none;
	padding: 0;
	margin-top: 8px;
	color: #b45309;
	font-size: 14px;
	line-height: 1.75;
}

/* --- ラジオボタン選択肢の文字サイズ --- */
.wy-form-wrapper .wy-radio-item {
	font-size: 15px;
}

/* --- 試着の目的の選択肢 ---
   wy-choice-grid-2 は当該設問専用のため、
   列席者衣裳の「ご予約種別」には影響しない */
.wy-form-wrapper .wy-choice-grid-2 .wy-choice-label {
	font-size: 18px;
	font-weight: 400;
}

/* スマホでは16px（767px は選択カードが2列に切り替わる既存のブレークポイント） */
@media (max-width: 767px) {
	.wy-form-wrapper .wy-choice-grid-2 .wy-choice-label {
		font-size: 16px;
	}
}

/* ==================================================================
 * ご試着希望のお客様 / 美容ご希望のお客様（ゲスト行）
 * 項目名と入力欄を横並びにして縦の長さを圧縮する
 * grid ではなく flex を使う理由：
 *   「身長」行の "cm" はテキストノード、美容フォームには補足文があり、
 *   grid だとそれらが別セル扱いになって配置が崩れるため
 * ================================================================== */

.wy-guest-item .wy-form-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.wy-guest-item .wy-form-group:last-child {
	margin-bottom: 0;
}

/* ラベル幅を固定＝入力欄の開始位置が揃う（「メイキャップ予約希望」が改行されない幅） */
.wy-guest-item .wy-label {
	flex: 0 0 185px;
	margin-bottom: 0;
	line-height: 1.4;
}

.wy-guest-item .wy-input,
.wy-guest-item .wy-select {
	flex: 0 1 280px;
	max-width: 280px;
	min-height: 46px;
	padding: 10px 12px;
}

/* 身長（単位付き） */
.wy-guest-item .wy-input-inline {
	flex: 0 0 110px;
	width: 110px;
	margin-right: 0;
}

/* 補足文は次の行へ送り、入力欄の開始位置に合わせる（150px + gap 10px） */
.wy-guest-item .wy-description {
	flex: 0 0 100%;
	margin-left: 195px;
	margin-top: 0;
}

@media (max-width: 600px) {
	.wy-guest-item .wy-form-group {
		display: block;
	}

	.wy-guest-item .wy-label {
		margin-bottom: 6px;
	}

	.wy-guest-item .wy-input,
	.wy-guest-item .wy-select {
		max-width: 100%;
	}

	.wy-guest-item .wy-description {
		margin-left: 0;
		margin-top: 6px;
	}
}

/* ==================================================================
 * ＋追加する ボタン
 * 送信ボタンと同じ塗りつぶしで紛らわしかったため、
 * 破線の輪郭で「追加操作」であることを区別する
 * ================================================================== */

.wy-form-wrapper .wy-add-guest-btn {
	background: #fff;
	color: #a67c52;
	border: 2px dashed #d4a574;
	border-radius: 6px;
	padding: 13px 16px;
	font-size: 15px;
	font-weight: bold;
	transition: background .15s, border-color .15s, color .15s;
}

.wy-form-wrapper .wy-add-guest-btn:hover {
	background: #faf3ea;
	border-color: #c08e58;
	color: #8a6340;
}

/* ==================================================================
 * 画像付きの選択カード（ご予約種別）
 * 画像が登録されている種別のみ .has-image が付く
 * ================================================================== */

.wy-form-wrapper .wy-choice-card.has-image {
	flex-direction: column;
	justify-content: flex-start;
	padding: 0;
	overflow: hidden;
}

.wy-form-wrapper .wy-choice-card.has-image .wy-choice-image {
	display: block;
	width: 100%;
	height: auto; /* 入稿画像の縦横比のまま表示 */
	background: #f0f0f0;
}

/* 画像内に種別名が入っているため、テキストの種別名は非表示。
   確認画面はラベルのテキストを参照するため DOM 上には残す
   （画像未登録の種別はテキストのまま表示される） */
.wy-form-wrapper .wy-choice-card.has-image .wy-choice-label {
	display: none;
}

/* 画像の高さが種別ごとに異なってもカードが伸びないように */
.wy-choice-grid {
	align-items: start;
}