@use "variables" as *;

// ===========================================================================
// お問合わせ (page-contact.php) — 電話 / LINE / フォーム の3ブロック。
// 各ブロックは flower アイコン＋緑見出し＋下線（フル幅）の .contact-sec__head と、
// 店舗ループのピル群 .contact-pills（緑アウトライン、hover で緑反転）。
// フォームは CF7 を後から page 本文に貼る想定で、白囲みボックスのみ用意。
// ===========================================================================

// --- section heading: flower icon + green label + full-width rule ----------
.contact-sec__head {
	display: flex;
	align-items: center;
	gap: rem(15);
	padding-bottom: rem(30);
	margin-bottom: rem(30);
	border-bottom: 1px dashed $color-green;

	@include sp {
		gap: rem(12);
		padding-bottom: rem(20);
		margin-bottom: rem(24);
	}
}

.contact-sec__icon {
	flex-shrink: 0;
	width: rem(32);
	height: rem(31);
	object-fit: contain;

	@include sp {
		width: rem(28);
		height: rem(27);
	}
}

.contact-sec__title {
	font-family: $font-sans; // override the global serif on h2
	font-weight: 600;
	font-size: rem(20);
	line-height: 1.4;
	color: $color-green;

	@include sp {
		font-size: rem(18);
	}
}

// --- store pills (4-col → 2 → 1) -------------------------------------------
.contact-pills {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: rem(20);

	@include tab {
		grid-template-columns: repeat(2, 1fr);
	}

	@include sp {
		grid-template-columns: 1fr;
		gap: rem(12);
	}
}

.contact-pill {
	@include hover-invert;

	display: flex;
	align-items: center;
	justify-content: center;
	min-height: rem(43);
	padding: rem(8) rem(16);
	border: 1px solid $color-green;
	border-radius: rem(40);
	font-family: $font-serif;
	font-weight: 700;
	font-size: rem(16);
	line-height: 1.4;
	text-align: center;
}

// --- form block ------------------------------------------------------------
.contact-intro {
	font-family: $font-sans;
	font-size: rem(16);
	line-height: 2;
	color: $color-text;

	p + p {
		margin-top: rem(20);
	}

	@include sp {
		font-size: rem(15);
	}
}

.contact-form {
	margin-top: rem(40);
	padding: rem(60);
	background: $color-white;
	border: 1px dashed $color-rule;
	border-radius: rem(20);

	@include sp {
		margin-top: rem(24);
		padding: rem(30) rem(20);
	}
}

.contact-form__placeholder {
	font-family: $font-sans;
	font-size: rem(16);
	line-height: 2;
	text-align: center;
	color: #828282;

	@include sp {
		font-size: rem(15);
	}
}

// --- CF7 fields ------------------------------------------------------------
// A field = label above + control. Two-up rows on PC via .contact-row,
// stacking on SP. Controls share the green-outline rounded look.
// Vertical rhythm is between TOP-LEVEL blocks only (.contact-field--full /
// .contact-row) — never between the two .contact-field inside a .contact-row
// (that would push the right column down); their spacing is the grid gap.
.contact-field--full + .contact-field--full,
.contact-field--full + .contact-row,
.contact-row + .contact-field--full,
.contact-row + .contact-row {
	margin-top: rem(30);

	@include sp {
		margin-top: rem(24);
	}
}

.contact-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: rem(20) rem(40);

	@include sp {
		grid-template-columns: 1fr;
		gap: rem(24);
	}
}

// 性別 (narrow) | 生年月日 (wide), ~3:7 on PC.
.contact-row--3-7 {
	grid-template-columns: 3fr 7fr;

	@include sp {
		grid-template-columns: 1fr;
	}
}

.contact-field__label {
	display: block;
	margin-bottom: rem(10);
	font-family: $font-sans;
	font-size: rem(16);
	line-height: 1.75;
	color: $color-text;

	@include sp {
		font-size: rem(15);
	}
}

.contact-field__req {
	margin-left: rem(4);
	color: #e40000;
}

.contact-field__note {
	display: block;
	margin: rem(-4) 0 rem(10);
	font-family: $font-sans;
	font-size: rem(14);
	line-height: 1.6;
	color: #828282;
}

// inputs / select / textarea
.contact-form {
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="date"],
	input[type="number"],
	select,
	textarea {
		width: 100%;
		padding: rem(8) rem(16);
		background: $color-white;
		border: 1px solid $color-green;
		border-radius: rem(20);
		font-family: $font-sans;
		font-size: rem(16);
		line-height: 1.5;
		color: $color-text;
		appearance: none;
		-webkit-appearance: none;

		&:focus {
			outline: 2px solid rgba($color-green, 0.4);
			outline-offset: 1px;
		}

		@include sp {
			font-size: rem(16); // keep >=16 to avoid iOS zoom
		}
	}

	input,
	select {
		height: rem(40);
	}

	// dropdown arrow (CSS triangle) for selects
	select {
		padding-right: rem(40);
		background-image:
			linear-gradient(45deg, transparent 50%, #{$color-green} 50%),
			linear-gradient(135deg, #{$color-green} 50%, transparent 50%);
		background-position:
			calc(100% - rem(20)) center,
			calc(100% - rem(14)) center;
		background-size: rem(6) rem(6), rem(6) rem(6);
		background-repeat: no-repeat;
		cursor: pointer;
	}

	// grey placeholder while the empty「店舗を選択 / 都道府県を選択」option is
	// still selected; back to text colour once a real value is chosen.
	select:has(option[value=""]:checked) {
		color: #828282;
	}

	select option {
		color: $color-text;
	}

	textarea {
		min-height: rem(200);
		border-radius: rem(20);
		resize: vertical;
	}

	::placeholder {
		color: #828282;
	}
}

// radio group (性別) — flex the option list itself (.wpcf7-radio), center the
// circle with its text, and tidy the two gaps (circle↔text tight, option↔option
// roomy).
.contact-field__radios {
	display: block;

	// 男性 / 女性 side by side (the .wpcf7-radio span carries .wpcf7-form-control).
	.wpcf7-radio {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: rem(12) rem(40); // between 男性 / 女性
	}

	.wpcf7-list-item {
		margin: 0;
	}

	.wpcf7-list-item label {
		display: inline-flex;
		align-items: center; // circle & text vertically centred
		gap: rem(8); // circle ↔ text
		cursor: pointer;
	}

	.wpcf7-list-item-label {
		margin: 0;
		font-size: rem(16);
		line-height: 1;
	}

	input[type="radio"] {
		flex-shrink: 0;
		width: rem(18);
		height: rem(18);
		margin: 0;
		accent-color: $color-green;
	}
}

// submit
.contact-form__submit {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: rem(50);

	@include sp {
		margin-top: rem(40);
	}

	.wpcf7-submit {
		@include hover-invert($bg: $color-green, $fg: $color-white);

		min-width: rem(241);
		height: rem(43);
		padding: 0 rem(40);
		border: 1px solid $color-green;
		border-radius: rem(40);
		font-family: $font-serif;
		font-weight: 700;
		font-size: rem(16);
		cursor: pointer;
	}
}

// CF7 response / validation messaging
.contact-form {
	.wpcf7-not-valid-tip {
		display: block;
		margin-top: rem(6);
		font-size: rem(13);
		color: #e40000;
	}

	.wpcf7-not-valid {
		border-color: #e40000 !important;
	}

	.wpcf7-response-output {
		margin: rem(30) 0 0;
		padding: rem(12) rem(16);
		border-radius: rem(10);
		font-size: rem(14);
		line-height: 1.6;
	}
}