/*
 * Ninja Forms — Rochdale access-request form (form id 3) restyle.
 *
 * Scoped to the access-request card (.access-form) so it only affects the
 * request form, not any other Ninja Form elsewhere on the site. Adds field
 * icons via background-image on the input, matched to each NF field-type
 * container class (firstname/lastname/email/address/phone).
 *
 * Icons are inline SVG data-URIs (slate #6B7178) so there are no extra HTTP
 * requests and nothing to upload.
 */

/* ---- Layout: kill NF's default chrome, tighten spacing ---- */
.access-form .nf-form-content { padding: 0 !important; margin: 0 !important; max-width: none !important; }
.access-form .nf-before-form-content .nf-form-fields-required {
	font-size: 12px;
	color: var(--slate);
	margin-bottom: 14px;
}
.access-form .ninja-forms-req-symbol { color: var(--accent); }
.access-form .nf-field-container { margin-bottom: 14px !important; }

/* ---- Labels ---- */
.access-form .nf-field-label label {
	font-size: 12.5px !important;
	font-weight: 600 !important;
	color: var(--ink) !important;
	margin-bottom: 5px !important;
	line-height: 1.3 !important;
}

/* ---- Inputs: portal styling + room for an icon on the left ---- */
.access-form .nf-field-element input[type=text],
.access-form .nf-field-element input[type=email],
.access-form .nf-field-element input[type=tel] {
	width: 100% !important;
	border: 1px solid var(--stone-300) !important;
	border-radius: 9px !important;
	background-color: var(--stone-50) !important;
	background-repeat: no-repeat !important;
	background-position: 13px center !important;
	background-size: 16px 16px !important;
	padding: 11px 13px 11px 40px !important;   /* left pad for icon */
	font-family: inherit !important;
	font-size: 14px !important;
	color: var(--ink) !important;
	box-shadow: none !important;
	transition: border-color .15s, box-shadow .15s !important;
	height: auto !important;
}
.access-form .nf-field-element input:focus {
	border-color: var(--accent) !important;
	box-shadow: 0 0 0 3px var(--accent-soft) !important;
	background-color: #fff !important;
	outline: 0 !important;
}
.access-form .nf-field-element input::placeholder { color: #A9AEB2 !important; }

/* ---- Per-field icons (data-URI SVG, slate) ---- */
/* First name / Last name — user icon */
.access-form .firstname-container input,
.access-form .lastname-container input {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7178' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
/* Email — envelope icon */
.access-form .email-container input {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7178' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='M22 7l-10 6L2 7'/%3E%3C/svg%3E");
}
/* Address — map pin icon */
.access-form .address-container input {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7178' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}
/* Phone — phone icon */
.access-form .phone-container input {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7178' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

/* ---- Submit button: portal terracotta CTA, full width ---- */
.access-form .submit-container { margin-top: 4px !important; margin-bottom: 0 !important; }
.access-form .submit-container .nf-field-label { display: none !important; }
.access-form input[type=submit],
.access-form .nf-element[type=submit] {
	width: 100% !important;
	background: var(--accent) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 10px !important;
	font-family: inherit !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	padding: 13px !important;
	cursor: pointer !important;
	transition: background .15s !important;
	box-shadow: none !important;
	height: auto !important;
}
.access-form input[type=submit]:hover,
.access-form .nf-element[type=submit]:hover {
	background: var(--accent-ink) !important;
}

/* ---- Error text ---- */
.access-form .nf-error-wrap .nf-error-msg,
.access-form .nf-error-msg { color: var(--accent-ink) !important; font-size: 12px !important; }
.access-form .nf-field-element input.nf-error {
	border-color: var(--accent) !important;
}

/* ---- Hide the honeypot row cleanly (NF already visually hides it) ---- */
.access-form .nf-form-hp { position: absolute !important; left: -9999px !important; }