/**
 * Gravity Forms (Orbital theme) — LFBC 2026 skin.
 *
 * Reskins `.gform_wrapper` to the Figma form design (node 11709:12831): a white
 * rounded card with Oatmeal-500 inputs, Pollen-400 focus / Poppy-900 error
 * borders, custom Soft-black radios, and a Nootka-Rose pill submit button.
 *
 * Orbital ships its palette as `--gf-*` custom properties inside an inline
 * <style> scoped by `#gform_wrapper_N[data-form-index="0"].gform-theme`
 * (ID-level specificity), so a class selector can't override the variables.
 * We therefore override the resolved *properties* with `!important` rather than
 * redefining the vars — that beats the var-driven rules regardless of their
 * specificity.
 *
 * Scoped to `.gform_wrapper`. Enqueued frontend + editor in functions.php
 * (handle: lfbc-gforms).
 */

/* ---- Card -------------------------------------------------------------- */
.gform_wrapper.gform-theme--orbital {
	background-color: var(--wp--preset--color--white);
	border-radius: 20px;
	padding: 38px;
}

/* ---- Field grid spacing ------------------------------------------------ */
.gform_wrapper .gform_fields {
	grid-row-gap: 20px !important;
	grid-column-gap: 20px !important;
}

/* ---- Labels ------------------------------------------------------------ */
/* Text-field labels are <label> (SemiBold); radio/checkbox legends are
 * <legend> (Regular per design). */
.gform_wrapper .gfield_label {
	font-family: var(--wp--preset--font-family--noto-sans);
	font-size: 16px;
	line-height: 1.4;
	color: var(--wp--preset--color--soft-black-500);
	margin-bottom: 4px;
}

.gform_wrapper label.gfield_label {
	font-weight: 600;
}

.gform_wrapper legend.gfield_label {
	font-weight: 400;
	line-height: 1.5;
}

/* Required marker: replace GF's "(Required)" text with a Poppy asterisk. */
.gform_wrapper .gfield_required_text {
	font-size: 0;
}

/* Only the outer .gfield_required wrapper gets the asterisk — the inner
 * .gfield_required_text span also carries .gfield_required, so excluding it
 * prevents a doubled "**". */
.gform_wrapper .gfield_required:not(.gfield_required_text)::after {
	content: "*";
	margin-left: 4px;
	font-size: 16px;
	font-weight: 400;
	color: var(--wp--preset--color--poppy-900);
}

/* ---- Text / email inputs ----------------------------------------------- */
.gform_wrapper .gfield input[type="text"],
.gform_wrapper .gfield input[type="email"],
.gform_wrapper .gfield input[type="tel"],
.gform_wrapper .gfield input[type="url"],
.gform_wrapper .gfield input[type="number"],
.gform_wrapper .gfield textarea,
.gform_wrapper .gfield select {
	background-color: var(--wp--preset--color--oatmeal-500) !important;
	border: 1px solid var(--wp--preset--color--oatmeal-700) !important;
	border-radius: 5px !important;
	padding: 11px 18px !important;
	color: var(--wp--preset--color--soft-black-500) !important;
	font-family: var(--wp--preset--font-family--noto-sans) !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
	box-shadow: none !important;
}

/* Focus / active → Pollen border. */
.gform_wrapper .gfield input[type="text"]:focus,
.gform_wrapper .gfield input[type="email"]:focus,
.gform_wrapper .gfield input[type="tel"]:focus,
.gform_wrapper .gfield input[type="url"]:focus,
.gform_wrapper .gfield input[type="number"]:focus,
.gform_wrapper .gfield textarea:focus,
.gform_wrapper .gfield select:focus {
	border-color: var(--wp--preset--color--pollen-400) !important;
	outline: none !important;
	box-shadow: none !important;
}

/* Error → Poppy border. */
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select {
	border-color: var(--wp--preset--color--poppy-900) !important;
}

/* ---- Radio buttons ----------------------------------------------------- */
/* Lay choices out in a row (design shows Yes / No inline). */
.gform_wrapper .gfield_radio {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	gap: 16px 31px;
}

.gform_wrapper .gchoice {
	display: flex;
	flex: 0 0 auto;
	width: auto;
	align-items: center;
	gap: 16px;
	margin: 0;
}

/* Custom radio: black ring, white-gap filled dot when checked. */
.gform_wrapper .gfield-choice-input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin: 0;
	border: 2px solid var(--wp--preset--color--soft-black-500) !important;
	border-radius: 50% !important;
	background-color: var(--wp--preset--color--white) !important;
	cursor: pointer;
}

.gform_wrapper .gfield-choice-input[type="radio"]:checked {
	background-color: var(--wp--preset--color--soft-black-500) !important;
	box-shadow: inset 0 0 0 4px var(--wp--preset--color--white) !important;
}

.gform_wrapper .gchoice label {
	margin: 0;
	padding-left: 8px;
	font-family: var(--wp--preset--font-family--noto-sans);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--wp--preset--color--soft-black-500);
}

/* ---- Separator above radio questions ----------------------------------- */
.gform_wrapper .gfield--type-radio {
	border-top: 1px solid var(--wp--preset--color--oatmeal-700);
	padding-top: 20px;
}

/* ---- Submit button ----------------------------------------------------- */
.gform_wrapper .gform_footer {
	margin-top: 24px;
	padding: 0;
}

.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_button {
	display: inline-flex;
	align-items: center;
	width: auto !important;
	background-color: var(--wp--preset--color--nootka-rose-900) !important;
	color: var(--wp--preset--color--white) !important;
	border: 1.3px solid var(--wp--preset--color--white) !important;
	border-radius: 100px !important;
	padding: 15px 44px 15px 24px !important;
	font-family: var(--wp--preset--font-family--noto-sans) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	cursor: pointer;
	/* white right-arrow, matches the .wp-block-button arrow */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='2' y1='7' x2='12' y2='7'/%3E%3Cpolyline points='7 2 12 7 7 12'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 24px center !important;
	background-size: 14px 14px !important;
	transition: background-color 0.2s ease;
}

.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper .gform_footer input[type="submit"]:focus,
.gform_wrapper .gform_button:hover,
.gform_wrapper .gform_button:focus {
	background-color: var(--wp--preset--color--poppy-500) !important;
}