/*
 * GD Contact — public /contact-us/ page (v1.0.8).
 *
 * The form sits in IPS's normal content area — sidebar and
 * widgets stay visible. contact.css styles ONLY our own
 * .gdcontact-form-area block; nothing here targets any IPS
 * ancestor container. v1.0.7's :has() rules on
 * .ipsContentWrap / .ipsLayout__primary-column are gone —
 * they touched containers we don't own and caused knock-on
 * issues.
 *
 * All selectors are class-based; NO attribute selectors
 * anywhere (whitespace-in-brackets bit gdffl multiple times).
 * Palette is explicit hex — no theme dependency.
 */

/* --- Layout ------------------------------------------------- *
 *
 * v1.0.8: the background + padding live ON OUR OWN element.
 * The v1.0.7 rules that targeted IPS ancestors (.ipsContentWrap,
 * .ipsLayout__primary-column) have been removed — those touched
 * containers we don't own and caused knock-on issues. Every
 * property below is scoped to `.gdcontact-form-area`, so nothing
 * outside our block is affected.
 */

.gr5 .gdcontact-form-area,
.gdcontact-form-area {
	box-sizing: border-box;
	max-width: 720px;
	margin: 0 0 24px;
	padding: 28px 32px;
	background-color: hsl( 0 0% 99% );
	border-radius: 12px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: #0f172a;
}
.gr5 .gdcontact-form-area *,
.gr5 .gdcontact-form-area *::before,
.gr5 .gdcontact-form-area *::after { box-sizing: inherit; }

.gr5 .gdcontact-title {
	font-size: 22px;
	font-weight: 600;
	margin: 0 0 4px;
	color: #0f172a;
	line-height: 1.25;
}
.gr5 .gdcontact-intro {
	color: #64748b;
	font-size: 14px;
	margin: 0 0 20px;
	line-height: 1.5;
}

/* --- Banners ------------------------------------------------ */

.gr5 .gdcontact-success {
	margin: 0 0 16px;
	padding: 12px 16px;
	background: #f0fdf4;
	border: 1px solid #86efac;
	border-left: 4px solid #16a34a;
	border-radius: 10px;
	color: #166534;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
}
.gr5 .gdcontact-error {
	margin: 0 0 16px;
	padding: 12px 16px;
	background: #fef2f2;
	border: 1px solid #fca5a5;
	border-left: 4px solid #dc2626;
	border-radius: 10px;
	color: #991b1b;
	font-size: 14px;
	line-height: 1.5;
}
.gr5 .gdcontact-error > div + div { margin-top: 4px; }

/* --- Form + fields ----------------------------------------- */

.gr5 .gdcontact-body { margin: 0; }
.gr5 .gdcontact-form { margin: 0; }

.gr5 .gdcontact-field { margin-bottom: 18px; }
.gr5 .gdcontact-field:last-of-type { margin-bottom: 0; }

.gr5 .gdcontact-label {
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: #0f172a;
	margin: 0 0 6px;
	line-height: 1.3;
}
.gr5 .gdcontact-req {
	color: #dc2626;
	font-weight: 700;
	margin-left: 2px;
}

.gr5 .gdcontact-input {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	height: 44px;
	padding: 0 14px;
	border: 1.5px solid #cbd5e1;
	border-radius: 8px;
	background: #ffffff;
	color: #0f172a;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	transition: border-color .15s ease, box-shadow .15s ease;
	box-shadow: none;
}
.gr5 .gdcontact-input:hover { border-color: #94a3b8; }
.gr5 .gdcontact-input:focus {
	outline: none;
	border-color: #0f6e56;
	box-shadow: 0 0 0 3px rgba( 15, 110, 86, .15 );
}

.gr5 .gdcontact-textarea {
	height: auto;
	min-height: 120px;
	padding: 12px 14px;
	line-height: 1.5;
	resize: vertical;
}

/* SVG chevron on select — data-URI so nothing external loads. */
.gr5 select.gdcontact-input {
	background-image: url( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='%2364748b'><path d='M5.516 7.548 10 12.032l4.484-4.484 1.406 1.406L10 14.844 4.11 8.954z'/></svg>" );
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 40px;
}

.gr5 .gdcontact-help {
	display: block;
	margin-top: 4px;
	color: #64748b;
	font-size: 12px;
	line-height: 1.4;
}

/* Checkbox row. */
.gr5 .gdcontact-field--checkbox { margin-bottom: 18px; }
.gr5 .gdcontact-check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: 14px;
	color: #0f172a;
	line-height: 1.4;
}
.gr5 .gdcontact-check input {
	appearance: auto;
	-webkit-appearance: auto;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: #0f6e56;
}

/* --- CAPTCHA + submit --------------------------------------- */

.gr5 .gdcontact-captcha { margin: 8px 0 20px; }

.gr5 .gdcontact-submit {
	appearance: none;
	-webkit-appearance: none;
	display: inline-block;
	padding: 0 28px;
	height: 46px;
	border: 0;
	border-radius: 8px;
	background: #0f6e56;
	color: #ffffff;
	font: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease, transform .05s ease;
	box-shadow: 0 1px 0 rgba( 15, 23, 42, .08 );
}
.gr5 .gdcontact-submit:hover  { background: #0b5a46; }
.gr5 .gdcontact-submit:active { transform: translateY( 1px ); }
.gr5 .gdcontact-submit:focus  {
	outline: none;
	box-shadow: 0 0 0 3px rgba( 15, 110, 86, .3 );
}

/* --- Honeypot — always off-screen -------------------------- */

.gr5 .gdcontact-hp,
.gdcontact-hp {
	position: absolute !important;
	left: -9999px !important;
	top: -9999px !important;
	width: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* --- Mobile ------------------------------------------------- */

@media (max-width: 600px) {
	.gr5 .gdcontact-title  { font-size: 20px; }
	.gr5 .gdcontact-submit { width: 100%; height: 50px; font-size: 16px; }
}