/* =========================================================
 * Smart Punch - Contact page
 * ========================================================= */

.contact-hero{
	padding:50px 20px 20px;
}

.contact-hero .section-heading{
	margin-bottom:0;
}

.contact-section{
	padding-top:30px;
}

.contact-section .section-inner{
	max-width:900px;
}


/* Contact card */
.contact-card{
	padding:42px 48px 48px;
	background:#fff;
	border:1px solid var(--line);
	border-radius:var(--radius-large);
	box-shadow:var(--shadow-medium);
}

.contact-intro{
	margin-bottom:38px;
	text-align:center;
}

.contact-intro h2{
	margin:0;
	color:var(--text);
	font-size:26px;
	font-weight:900;
}

.contact-intro p{
	margin:14px 0 0;
	color:var(--muted);
	font-size:15px;
	line-height:1.9;
}


/* Form */
.contact-form{
	display:grid;
	gap:28px;
}

.contact-field{
	display:grid;
	gap:10px;
}

.contact-label{
	display:flex;
	align-items:center;
	gap:10px;
	color:var(--text);
	font-size:15px;
	font-weight:800;
}

.contact-required,
.contact-optional{
	display:inline-flex;
	min-height:22px;
	padding:2px 8px;
	align-items:center;
	justify-content:center;
	border-radius:999px;
	font-size:11px;
	font-weight:800;
	line-height:1;
}

.contact-required{
	background:color-mix(in srgb,var(--brand) 10%,#fff);
	color:var(--brand);
}

.contact-optional{
	background:var(--surface);
	color:var(--muted);
}

.contact-input,
.contact-select,
.contact-textarea{
	width:100%;
	background:#fff;
	color:var(--text);
	border:1px solid var(--line);
	border-radius:var(--radius-small);
	outline:none;
	transition:
		border-color .16s ease,
		box-shadow .16s ease,
		background .16s ease;
}

.contact-input,
.contact-select{
	height:54px;
	padding:0 16px;
}

.contact-textarea{
	min-height:190px;
	padding:15px 16px;
	resize:vertical;
	line-height:1.8;
}

.contact-input::placeholder,
.contact-textarea::placeholder{
	color:#a8afbc;
}

.contact-input:focus,
.contact-select:focus,
.contact-textarea:focus{
	border-color:color-mix(in srgb,var(--brand) 58%,var(--line));
	box-shadow:0 0 0 4px rgba(28,63,148,.08);
}

.contact-input.is-error,
.contact-select.is-error,
.contact-textarea.is-error{
	border-color:#d94b4b;
	box-shadow:0 0 0 4px rgba(217,75,75,.07);
}


/* Select */
.contact-select-wrap{
	position:relative;
}

.contact-select{
	padding-right:48px;
	appearance:none;
	-webkit-appearance:none;
	cursor:pointer;
}

.contact-select-wrap > i{
	position:absolute;
	top:50%;
	right:18px;
	color:var(--muted);
	font-size:14px;
	pointer-events:none;
	transform:translateY(-50%);
}


/* Errors */
.contact-error{
	min-height:0;
	margin:0;
	color:#c63f3f;
	font-size:13px;
	font-weight:700;
	line-height:1.5;
}

.contact-error:empty{
	display:none;
}


/* Agreement */
.contact-agreement{
	padding:20px;
	background:var(--surface);
	border-radius:var(--radius-small);
}

.contact-check{
	display:flex;
	align-items:flex-start;
	justify-content:center;
	gap:10px;
	color:var(--text);
	font-size:14px;
	line-height:1.7;
	cursor:pointer;
}

.contact-check input{
	width:18px;
	height:18px;
	margin:3px 0 0;
	flex:0 0 18px;
	accent-color:var(--brand);
	cursor:pointer;
}

.contact-check a{
	color:var(--brand);
	font-weight:800;
	text-decoration:underline;
	text-underline-offset:3px;
}


/* Honeypot */
.contact-honeypot{
	position:absolute !important;
	left:-9999px !important;
	width:1px !important;
	height:1px !important;
	overflow:hidden !important;
	opacity:0 !important;
	pointer-events:none !important;
}


/* Message / submit */
.contact-message{
	display:none;
	padding:14px 18px;
	border-radius:var(--radius-small);
	font-size:14px;
	font-weight:700;
	line-height:1.7;
	text-align:center;
}

.contact-message.is-error{
	display:block;
	background:#fff3f3;
	color:#b53b3b;
	border:1px solid #f2cccc;
}

.contact-message.is-success{
	display:block;
	background:#effaf7;
	color:var(--accent-dark);
	border:1px solid color-mix(in srgb,var(--accent) 26%,#fff);
}

.contact-actions{
	text-align:center;
}

.contact-submit{
	min-width:280px;
	border:0;
	cursor:pointer;
}

.contact-submit:disabled{
	opacity:.55;
	cursor:default;
	transform:none;
}


/* Complete */
.contact-complete{
	padding:44px 20px 28px;
	text-align:center;
}

.contact-complete-icon{
	display:flex;
	width:68px;
	height:68px;
	margin:0 auto 22px;
	align-items:center;
	justify-content:center;
	background:color-mix(in srgb,var(--accent) 13%,#fff);
	color:var(--accent-dark);
	border-radius:50%;
	font-size:30px;
}

.contact-complete h2{
	margin:0;
	color:var(--text);
	font-size:28px;
	font-weight:900;
}

.contact-complete p{
	margin:16px 0 0;
	color:var(--muted);
	font-size:15px;
	line-height:1.9;
}


@media(max-width:640px){
	.contact-card{
		padding:30px 20px 32px;
		border-radius:var(--radius-medium);
	}

	.contact-intro{
		margin-bottom:30px;
	}

	.contact-intro h2{
		font-size:22px;
	}

	.contact-intro p{
		font-size:14px;
	}

	.contact-form{
		gap:24px;
	}

	.contact-input,
	.contact-select{
		height:52px;
	}

	.contact-textarea{
		min-height:170px;
	}

	.contact-agreement{
		padding:18px 14px;
	}

	.contact-check{
		justify-content:flex-start;
	}

	.contact-submit{
		min-width:0;
		width:100%;
	}

	.contact-complete{
		padding:34px 4px 20px;
	}

	.contact-complete h2{
		font-size:23px;
	}

	.contact-complete p{
		font-size:14px;
	}
}