/**
 * 聯絡瓦吉頁面樣式
 * 包含首圖、表單、聯絡資訊三區塊
 */

/* ========== 頁面容器 ========== */
.contact-wagi-page {
	width: 100%;
}

/* ========== 第一區塊：首圖 ========== */
.contact-wagi-hero {
	width: 100%;
	margin: 0;
	padding: 0;
}

.contact-wagi-hero .hero-image {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

/* ========== 主內容區 ========== */
.contact-wagi-main {
	margin-top: -155px;
	margin-bottom: 165px;
	padding: 0;
}

/* ========== 第二區塊：聯絡表單 ========== */
.contact-form-wrapper {
	border: 3px solid #000;
	background-color: var(--bg-color);
	width: 100%;
	max-width: 1627px;
}

.form-section-title {
	width: 100%;
	background-color: var(--color-primary-light);
	color: #000;
	font-size: 2rem;
	font-weight: 400;
	margin: 0;
	padding: var(--spacing-lg) var(--spacing-xl);
	border-bottom: 3px solid #000;
	text-align: center;
}

.form-content {
	padding: 76px 0 88px;
}

/* 表單雙欄佈局（桌面版） */

.contact-form {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.contact-form .form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 105px;
	width: 100%;
	max-width: 1200px;
}

.contact-form .form-column {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg);
}

.contact-form .form-group {
	display: flex;
	flex-direction: column;
	border-bottom: 1px solid #000;
}

.contact-form .form-group-full {
	/* 不展開，保持自動高度 */
}

.contact-form .form-label {
	font-size: 1.8rem;
	font-weight: 400;
	color: #000;
	margin-bottom: var(--spacing-sm);
}

.contact-form .required {
	color: var(--color-danger);
	margin-left: 0.25rem;
}

.contact-form .form-input,
.contact-form .form-textarea {
	width: 100%;
	border: none;
	padding: 0;
	font-size: 1.5rem;
	color: #000;
	background-color: transparent;
	outline: none;
}

.contact-form .form-input::placeholder,
.contact-form .form-textarea::placeholder {
	color: #f2f2f2;
	font-size: 1.5rem;
}

.contact-form .form-textarea {
	resize: none;
	min-height: auto;
	overflow: hidden;
}

/* 送出按鈕 */
.contact-form .form-actions {
	display: flex;
	justify-content: center;
	margin-top: var(--spacing-2xl);
	width: 100%;
	max-width: 282px;
}

.contact-form .btn-submit {
	background-color: var(--color-primary);
	color: #FFF;
	font-size: 1.8rem;
	padding: 15px 0;
	border: 3px solid #000;
	border-radius: 3rem;
	width: 100%;
	cursor: pointer;
	transition: all var(--transition-base);
}

.contact-form .btn-submit:hover {
	background-color: var(--color-primary-dark);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(255, 171, 54, 0.3);
}

/* 訊息樣式 */

.contact-info-wrapper {
	border-top: 3px solid #000;
	background: #ffd036;
	padding: 76px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.contact-form .form-message {
	padding: var(--spacing-lg);
	border-radius: var(--border-radius-md);
	margin-top: var(--spacing-xl);
	font-size: var(--font-size-base);
	text-align: center;
}

.contact-form .form-success {
	background-color: rgba(16, 185, 129, 0.1);
	color: #10b981;
	border: 1px solid #10b981;
}

.contact-form .form-error {
	background-color: rgba(239, 68, 68, 0.1);
	color: #ef4444;
	border: 1px solid #ef4444;
}

/* ========== 第三區塊：聯絡資訊 ========== */
.info-section-title {
	color: #000;
	background-color: #FFF;
	text-align: center;
	padding: 20px 0;
	border-radius: 3rem;
	margin-bottom: var(--spacing-2xl);
	font-weight: 400;
	max-width: 650px;
	width: 100%;
}

.contact-info-grid {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 31px;
	max-width: 650px;
	width: 100%;
}

.contact-info-grid .info-item {
	flex: 1;
	text-align: center;
	display: flex;
	flex-direction: row;
	gap: 12px;
}

.contact-info-grid .info-label {
	font-weight: 700;
	color: #000;
	margin-bottom: var(--spacing-sm);
}

.contact-info-grid .info-value {
	color: #000;
	font-weight: 400;
}

.contact-info-grid .info-value a {
	color: #000;
	text-decoration: none;
	font-weight: 400;
	transition: all var(--transition-base);
	cursor: pointer;
	border-bottom: 2px solid transparent;
}

.contact-info-grid .info-value a:hover {
	color: #fff;
	border-bottom: 1px solid #FFF;
}

@media(max-width: 1440px) {
	.contact-wagi-main {
		margin-top: -115px;
	}

	.contact-form .form-row {
		max-width: 1000px;
	}
}

@media (max-width: 1024px) {
	.contact-wagi-main {
		margin-top: -65px;
	}

	.info-section-title {
		max-width: 595px;
	}

	.contact-info-grid {
		max-width: 595px;
	}

	.contact-form .form-row {
		gap: 45px;
		max-width: 700px;
	}
}

@media (max-width: 820px) {
	.contact-wagi-main {
		margin-top: -45px;
	}

	.contact-form .form-row {
		max-width: 550px;
	}
}

/* ========== 響應式：手機版 (≤480px) ========== */
@media (max-width: 480px) {
	.contact-wagi-main {
		margin-top: -15px;
		margin-bottom: 60px;
	}

	/* 表單容器 */
	.contact-form-wrapper {
		border: 1px solid #000;
		padding: 0;
	}

	.contact-form .form-label {
		font-size: 14px;
		margin-bottom: 0;
	}

	.contact-form .form-input::placeholder,
	.contact-form .form-textarea::placeholder {
		color: #f2f2f2;
		font-size: 14px;
	}

	.contact-form .form-input,
	.contact-form .form-textarea {
		font-size: 14px;
	}

	.form-section-title {
		font-size: 1.25rem;
		padding: var(--spacing-md);
		border-bottom: 1px solid #000;
	}

	.form-content {
		padding: var(--spacing-lg);
	}

	/* 表單單欄佈局 */
	.contact-form .form-row {
		grid-template-columns: 1fr;
		gap: var(--spacing-lg);
	}

	/* 扁平化欄位結構以便重新排序 */
	.contact-form .form-column {
		display: contents;
	}

	/* 手機版表單欄位排序 */
	.contact-form .form-group:has(#contact-name) {
		order: 1;
	}

	.contact-form .form-group:has(#contact-phone) {
		order: 2;
	}

	.contact-form .form-group:has(#contact-email) {
		order: 3;
	}

	.contact-form .form-group:has(#contact-company) {
		order: 4;
	}

	.contact-form .form-group:has(#contact-address) {
		order: 5;
	}

	.contact-form .form-group:has(#contact-message) {
		order: 6;
	}

	.contact-form .form-group:has(#contact-other) {
		order: 7;
	}

	.contact-form .btn-submit {
		font-size: 1rem;
		padding: 6px 0;
		border: 1px solid #000;
		max-width: 130px;
	}

	/* 聯絡資訊 */

	.contact-info-wrapper {
		border-top: 1px solid #000;
		padding: 12px 0 16px;
	}

	.info-section-title {
		font-size: 1.25rem;
		padding: 5px 0;
		max-width: 265px;
		margin-bottom: 12px;
	}

	.contact-info-grid {
		flex-direction: column;
		gap: 10px;
		max-width: 265px;
	}

	.contact-info-grid .info-label,
	.contact-info-grid .info-value {
		font-size: 12px !important;
	}

	.contact-info-grid .info-value a {
		font-size: 12px !important;
	}

	.contact-info-grid .info-item {
		text-align: left;
	}
}

/* ========== 響應式：平板版 (481px - 1024px) ========== */
@media (max-width: 1024px) and (min-width: 481px) {
	.contact-form-wrapper {
		border: 2px solid #000;
	}

	.form-section-title {
		border-bottom: 2px solid #000;
		font-size: 1.5rem;
	}

	.contact-form .btn-submit {
		border: 2px solid #000;
	}
}