/**
 * PX Forms – Global Gravity Forms styles
 * Replaces GF's disabled default CSS with theme-consistent styling.
 */


/* ==========================================================================
   1. Wrapper & body reset
   ========================================================================== */



/* ==========================================================================
   2. Hidden elements
   ========================================================================== */

.gform_wrapper .gform_heading,
.gform_wrapper .gform_required_legend,
.gform_wrapper .admin-hidden-markup,
.gform_wrapper .gfield_description {
	display: none;
}


/* ==========================================================================
   3. Field layout
   ========================================================================== */

.gform_wrapper .gform_fields {
	display: flex;
	flex-direction: column;
	gap: var(--space-d075);
}

.gform_wrapper .gfield {
	display: flex;
	flex-direction: column;
	gap: var(--space-d05);
}

.gform_wrapper fieldset {
	border: none;
	margin: var(--space-d05) 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-d05);
}


/* ==========================================================================
   4. Labels
   ========================================================================== */

.gform_wrapper .gfield_label {
	display: flex;
	align-items: center;
	gap: var(--space-d025);
	margin: 0;
	color: var(--text-base);

	font-family: var(--font-display);
	font-size: var(--text-d1);
	font-weight: var(--weight-semibold);
	line-height: var(--lh-normal);
	letter-spacing: var(--ls-tight);
}


/* ==========================================================================
   5. Text inputs
   ========================================================================== */

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper textarea,
.gform_wrapper select {
	display: flex;
	align-items: center;
	align-self: stretch;
	width: 100%;

	padding: var(--space-d075) var(--space-d1);
	border-radius: var(--space-d05);
	border: var(--space-d001) solid var(--navy);
	background-color: var(--white);

	font-family: var(--font-body);
	font-size: var(--text-d1);
	font-weight: var(--weight-regular);
	line-height: var(--lh-relaxed);
	color: var(--text-base);
	transition: border-color var(--duration-normal) var(--ease-smooth);
}

.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder {
	color: var(--gray-mid);
	font-family: var(--font-body);
	font-size: var(--text-d1);
	font-weight: var(--weight-regular);
	line-height: var(--lh-relaxed);
}


/* ==========================================================================
   6. Focus states
   ========================================================================== */

/* Active / Focus */
.gform_wrapper input[type="text"]:focus,
.gform_wrapper input[type="email"]:focus,
.gform_wrapper input[type="number"]:focus,
.gform_wrapper input[type="tel"]:focus,
.gform_wrapper input[type="url"]:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
	border-color: var(--action);
	outline: none;
}

.gform_wrapper input[type="text"]:focus-visible,
.gform_wrapper input[type="email"]:focus-visible,
.gform_wrapper input[type="number"]:focus-visible,
.gform_wrapper input[type="tel"]:focus-visible,
.gform_wrapper input[type="url"]:focus-visible,
.gform_wrapper textarea:focus-visible,
.gform_wrapper select:focus-visible {
	outline: solid 3px var(--btn-focus-ring);
	outline-offset: 0;
}

/* Filled — keep active border when input has a value */
.gform_wrapper input[type="text"][placeholder]:not(:placeholder-shown),
.gform_wrapper input[type="email"][placeholder]:not(:placeholder-shown),
.gform_wrapper input[type="number"][placeholder]:not(:placeholder-shown),
.gform_wrapper input[type="tel"][placeholder]:not(:placeholder-shown),
.gform_wrapper input[type="url"][placeholder]:not(:placeholder-shown),
.gform_wrapper textarea[placeholder]:not(:placeholder-shown) {
	border-color: var(--action);
}

/* Error — field with validation error */
.gform_wrapper .gfield_error input[type="text"],
.gform_wrapper .gfield_error input[type="email"],
.gform_wrapper .gfield_error input[type="number"],
.gform_wrapper .gfield_error input[type="tel"],
.gform_wrapper .gfield_error input[type="url"],
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select {
	border-color: var(--coral);
}

/* Disabled */
.gform_wrapper input:disabled,
.gform_wrapper textarea:disabled,
.gform_wrapper select:disabled {
	border-color: var(--gray-mid);
	cursor: not-allowed;
}


/* ==========================================================================
   7. Radio buttons
   ========================================================================== */

/* -- List layout -- */

.gform_wrapper .gfield_radio {
	display: flex;
	flex-direction: column;
	gap: var(--space-d075);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* -- Single item wrapper -- */

.gform_wrapper .gfield_radio .gchoice {
	display: flex;
	align-items: center;
	gap: var(--space-d025);
}

/* -- Label -- */

.gform_wrapper .gfield_radio label {
	font-family: var(--font-display);
	font-size: var(--text-d1);
	font-weight: var(--weight-semibold);
	line-height: var(--lh-normal);
	letter-spacing: var(--ls-tight);
	color: var(--text-base);
	cursor: pointer;
}

/* -- Circle -- */

.gform_wrapper input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	width: 25px;
	height: 25px;
	flex-shrink: 0;
	border-radius: 50%;
	border: 2px solid var(--gray-dark);
	background-color: var(--white);
	box-shadow: inset 0 0 0 0 var(--gray-dark),
	            inset 0 0 0 3.5px var(--white),
	            inset 0 0 0 4.5px var(--gray-dark);
	cursor: pointer;
	transition: border-color var(--duration-fast) var(--ease-smooth),
	            box-shadow var(--duration-fast) var(--ease-smooth);
}

/* Hover — 3px action border + inner ring */
.gform_wrapper input[type="radio"]:hover {
	border-color: var(--action);
	box-shadow: inset 0 0 0 1px var(--action),
	            inset 0 0 0 3.5px var(--white),
	            inset 0 0 0 4.5px var(--gray-dark);
}

/* Focus — reset default outline */
.gform_wrapper input[type="radio"]:focus {
	outline: none;
}

/* Focus-visible — 3px gray ring + 3px action border + inner ring */
.gform_wrapper input[type="radio"]:focus-visible {
	border-color: var(--action);
	box-shadow: inset 0 0 0 1px var(--action),
	            inset 0 0 0 3.5px var(--white),
	            inset 0 0 0 4.5px var(--gray-dark),
	            0 0 0 3px var(--gray-dark);
}

/* Checked — solid action dot, no inner ring */
.gform_wrapper input[type="radio"]:checked {
	box-shadow: inset 0 0 0 0 var(--gray-dark),
	            inset 0 0 0 3px var(--white),
	            inset 0 0 0 12.5px var(--action);
}

/* Checked + focus-visible — focus ring around checked dot */
.gform_wrapper input[type="radio"]:checked:focus-visible {
	box-shadow: inset 0 0 0 0 var(--gray-dark),
	            inset 0 0 0 3px var(--white),
	            inset 0 0 0 12.5px var(--action),
	            0 0 0 3px var(--gray-dark);
}

/* Error — 3px coral border + inner ring */
.gform_wrapper .gfield_error input[type="radio"] {
	border-color: var(--coral);
	box-shadow: inset 0 0 0 1px var(--coral),
	            inset 0 0 0 3.5px var(--white),
	            inset 0 0 0 4.5px var(--gray-dark);
}

/* Disabled — gray-mid border + gray-mid inner ring */
.gform_wrapper input[type="radio"]:disabled {
	border-color: var(--gray-mid);
	box-shadow: inset 0 0 0 0 var(--gray-mid),
	            inset 0 0 0 3.5px var(--white),
	            inset 0 0 0 4.5px var(--gray-mid);
	cursor: not-allowed;
}


/* ==========================================================================
   8. Checkboxes
   ========================================================================== */

/* -- List layout -- */

.gform_wrapper .gfield_checkbox {
	display: flex;
	flex-direction: column;
	gap: var(--space-d075);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* -- Single item wrapper -- */

.gform_wrapper .gfield_checkbox .gchoice {
	display: flex;
	align-items: center;
	gap: var(--space-d025);
}

/* -- Label -- */

.gform_wrapper .gfield_checkbox label {
	font-family: var(--font-display);
	font-size: var(--text-d1);
	font-weight: var(--weight-semibold);
	line-height: var(--lh-normal);
	letter-spacing: var(--ls-tight);
	color: var(--text-base);
	cursor: pointer;
}

/* -- Tick box -- */

.gform_wrapper input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 25px;
	height: 25px;
	flex-shrink: 0;
	border-radius: 3px;
	border: 2px solid var(--gray-dark);
	background: var(--white) no-repeat center;
	background-size: 100% 100%;
	box-shadow: inset 0 0 0 0 var(--gray-dark),
	            inset 0 0 0 3px var(--white),
	            inset 0 0 0 4px var(--gray-dark);
	cursor: pointer;
	transition: border-color var(--duration-fast) var(--ease-smooth),
	            box-shadow var(--duration-fast) var(--ease-smooth);
}

/* Hover — 3px action border + inner frame */
.gform_wrapper input[type="checkbox"]:hover {
	border-color: var(--action);
	box-shadow: inset 0 0 0 1px var(--action),
	            inset 0 0 0 3px var(--white),
	            inset 0 0 0 4px var(--gray-dark);
}

/* Focus — reset default outline */
.gform_wrapper input[type="checkbox"]:focus {
	outline: none;
}

/* Focus-visible — 3px gray ring + 3px action border + inner frame */
.gform_wrapper input[type="checkbox"]:focus-visible {
	border-color: var(--action);
	box-shadow: inset 0 0 0 1px var(--action),
	            inset 0 0 0 3px var(--white),
	            inset 0 0 0 4px var(--gray-dark),
	            0 0 0 3px var(--gray-dark);
}

/* Checked — 2px gray border, blue fill with checkmark */
.gform_wrapper input[type="checkbox"]:checked {
	box-shadow: inset 0 0 0 0 var(--gray-dark),
	            inset 0 0 0 0 var(--white),
	            inset 0 0 0 0 var(--gray-dark);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4.5 4.5 21 21'%3E%3Cpath d='M21.25 7.5H8.75C8.41848 7.5 8.10054 7.6317 7.86612 7.86612C7.6317 8.10054 7.5 8.41848 7.5 8.75V21.25C7.5 21.5815 7.6317 21.8995 7.86612 22.1339C8.10054 22.3683 8.41848 22.5 8.75 22.5H21.25C21.5815 22.5 21.8995 22.3683 22.1339 22.1339C22.3683 21.8995 22.5 21.5815 22.5 21.25V8.75C22.5 8.41848 22.3683 8.10054 22.1339 7.86612C21.8995 7.6317 21.5815 7.5 21.25 7.5ZM18.5672 13.5672L14.1922 17.9422C14.1341 18.0003 14.0652 18.0464 13.9893 18.0779C13.9135 18.1093 13.8321 18.1255 13.75 18.1255C13.6679 18.1255 13.5865 18.1093 13.5107 18.0779C13.4348 18.0464 13.3659 18.0003 13.3078 17.9422L11.4328 16.0672C11.3155 15.9499 11.2497 15.7909 11.2497 15.625C11.2497 15.4591 11.3155 15.3001 11.4328 15.1828C11.5501 15.0655 11.7091 14.9997 11.875 14.9997C12.0409 14.9997 12.1999 15.0655 12.3172 15.1828L13.75 16.6164L17.6828 12.6828C17.7409 12.6247 17.8098 12.5787 17.8857 12.5473C17.9616 12.5158 18.0429 12.4997 18.125 12.4997C18.2071 12.4997 18.2884 12.5158 18.3643 12.5473C18.4402 12.5787 18.5091 12.6247 18.5672 12.6828C18.6253 12.7409 18.6713 12.8098 18.7027 12.8857C18.7342 12.9616 18.7503 13.0429 18.7503 13.125C18.7503 13.2071 18.7342 13.2884 18.7027 13.3643C18.6713 13.4402 18.6253 13.5091 18.5672 13.5672Z' fill='%230093F5'/%3E%3C/svg%3E");
}

/* Checked + focus-visible — focus ring around checked box */
.gform_wrapper input[type="checkbox"]:checked:focus-visible {
	box-shadow: inset 0 0 0 0 var(--gray-dark),
	            inset 0 0 0 0 var(--white),
	            inset 0 0 0 0 var(--gray-dark),
	            0 0 0 3px var(--gray-dark);
}

/* Error — 3px coral border + inner frame */
.gform_wrapper .gfield_error input[type="checkbox"] {
	border-color: var(--coral);
	box-shadow: inset 0 0 0 1px var(--coral),
	            inset 0 0 0 3px var(--white),
	            inset 0 0 0 4px var(--gray-dark);
}

/* Disabled — gray-mid border, dark inner frame */
.gform_wrapper input[type="checkbox"]:disabled {
	border-color: var(--gray-mid);
	box-shadow: inset 0 0 0 3px var(--white),
	            inset 0 0 0 4px var(--gray-dark);
	cursor: not-allowed;
}


/* ==========================================================================
   9. Complex fields (name, address, email-confirm)
   ========================================================================== */



/* ==========================================================================
   10. Description / help text
   ========================================================================== */



/* ==========================================================================
   11. Submit button
   ========================================================================== */

.gform_wrapper .gform_footer,
.gform_wrapper .gform_page_footer {
	margin-top: var(--space-d2);
}


/* ==========================================================================
   12. Multi-page forms
   ========================================================================== */

/* -- Step indicators -- */

.form_steps {
	display: flex;
	align-items: center;
	gap: var(--space-d075);
	margin-bottom: var(--space-d2);
}

.form_steps__title {
	margin: 0 auto 0 0;
}

.form_steps__step {
	display: flex;
	align-items: center;
	justify-content: center;
}

.form_steps__number {
	display: flex;
	align-items: center;
	justify-content: center;

	width: var(--space-d2);
	height: var(--space-d2);

	font-family: var(--font-display);
	font-size: var(--text-d1);
	font-weight: var(--weight-semibold);
	line-height: var(--lh-normal);
	letter-spacing: var(--ls-tight);
	text-align: center;

	border-radius: var(--space-d2);
	border: 1px solid var(--sand);
	color: var(--text-base);
	background-color: var(--sand-light);

	transition: background-color var(--duration-normal) var(--ease-smooth),
	            border-color var(--duration-normal) var(--ease-smooth),
	            color var(--duration-normal) var(--ease-smooth);
}

/* Active step */
.form_steps__step--active .form_steps__number {
	background-color: var(--action);
	border-color: var(--action);
	color: var(--white);
}

/* Completed step */
.form_steps__step--completed .form_steps__number {
	background-color: var(--action);
	border-color: var(--action);
	color: var(--white);
}

/* Pending step — uses defaults (sand-light bg, sand border) */

/* -- Page footer (next / prev buttons) -- */

.gform_wrapper .gform_page_footer {
	display: flex;
	align-items: center;
	gap: var(--space-d1);
}

.gform_wrapper .gform_previous_button .px-arrow-flip {
	display: flex;
	transform: scaleX(-1);
}


/* ==========================================================================
   13. Validation & error states
   ========================================================================== */

.gform_wrapper .gfield_validation_message {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--space-d025);

	color: var(--text-base);
	font-family: var(--font-display);
	font-size: var(--text-d1);
	font-weight: 400;
	line-height: var(--lh-snug);
}

.gform_wrapper .gfield_validation_message::before {
	content: '';
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	background-color: var(--coral);
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M18.5 17.006l-6.832-11.865a2.25 2.25 0 0 0-3.336 0L1.5 17.006a2.25 2.25 0 0 0 1.668 2.806h13.664a2.25 2.25 0 0 0 1.668-2.806zM9.376 10.437a.625.625 0 0 1 1.25 0v3.125a.625.625 0 0 1-1.25 0v-3.125zm.625 6.875a.937.937 0 1 1 0-1.875.937.937 0 0 1 0 1.875z'/%3E%3C/svg%3E");
	mask-size: contain;
	mask-repeat: no-repeat;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M18.5 17.006l-6.832-11.865a2.25 2.25 0 0 0-3.336 0L1.5 17.006a2.25 2.25 0 0 0 1.668 2.806h13.664a2.25 2.25 0 0 0 1.668-2.806zM9.376 10.437a.625.625 0 0 1 1.25 0v3.125a.625.625 0 0 1-1.25 0v-3.125zm.625 6.875a.937.937 0 1 1 0-1.875.937.937 0 0 1 0 1.875z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
}


/* ==========================================================================
   14. Confirmation
   ========================================================================== */



/* ==========================================================================
   15. Responsive
   ========================================================================== */

@media (max-width: 767px) {
	.form_steps {
		flex-wrap: wrap;
		row-gap: var(--space-d15);
	}

	.form_steps__title {
		order: 1;
		width: 100%;
		margin: 0;
	}
}