/*
 * Gambit — Conversational Forms Overrides
 *
 * Works WITH GF Orbital by overriding CSS custom properties.
 * No custom checkboxes. No JS class hacks. Just variable overrides.
 */

/* ==========================================================================
   GF Orbital CSS Custom Property Overrides
   ========================================================================== */

/* GF Orbital CSS custom property overrides are in a footer <style> tag
   (gravity-forms-config.php) to beat GF's own inline styles. See GRAVITY.md.
   Only non-variable overrides belong here. */

#gform-conversational,
.gform-conversational {
	--gf-convo-nav-bg-color: #FFFFFF;
	--gf-convo-nav-color: #1A1A1E;
}

/* ==========================================================================
   Logo — top of conversational form
   ========================================================================== */

.gform-conversational__header::before {
	content: "";
	display: block;
	width: 200px;
	height: 36px;
	background: url('/wp-content/uploads/2026/04/gambit-logo-horizontal-white.svg') no-repeat center / contain;
	filter: brightness(0) saturate(100%);
	margin: 24px auto 16px;
}

/* ==========================================================================
   Background
   ========================================================================== */

body.gf-conversational-form-page,
.gform-conversational {
	background: #FFFFFF !important;
}

/* ==========================================================================
   Progress Bar
   ========================================================================== */

.gform-conversational__progress-bar {
	background: rgba(0, 0, 0, 0.06) !important;
	height: 4px !important;
}

.gform-conversational__progress-bar-fill,
.gform-conversational__progress-bar-inner {
	background: #C43D2F !important;
}

/* ==========================================================================
   Question Labels
   ========================================================================== */

.gform-conversational .gfield_label,
.gform-conversational .gform-field-label:not(.gform-field-label--type-inline) {
	font-family: 'General Sans', sans-serif !important;
	font-weight: 700 !important;
	font-size: clamp(22px, 4vw, 28px) !important;
	color: #1A1A1E !important;
	line-height: 1.3 !important;
}

.gform-conversational .gfield_error .gfield_label {
	color: #C43D2F !important;
}

.gform-conversational .gfield_required {
	color: #C43D2F !important;
}

.gform-conversational .gfield_description:not(.validation_message) {
	font-size: 15px !important;
	color: #666 !important;
}

/* Sub-labels (First, Last, etc.) — keep small */
.gform-conversational .ginput_complex label,
.gform-conversational .ginput_complex .gform-field-label {
	font-size: 13px !important;
	font-weight: 500 !important;
	color: #666 !important;
}

/* ==========================================================================
   Validation
   ========================================================================== */

.gform-conversational .validation_message,
.gform-conversational .gfield_description.validation_message,
.gform-conversational .gform-conversational__field-error,
.gform-conversational .gfield_validation_message,
.gform-conversational [class*="validation"],
.gform-conversational .gform_validation_errors,
.gform-conversational .gform_validation_errors h2 {
	color: #C43D2F !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	margin-top: 12px !important;
}

.gform-conversational .gfield_error input,
.gform-conversational .gfield_error textarea,
.gform-conversational .gfield_error select {
	border-color: #C43D2F !important;
}

.gform-conversational .gfield_error .gfield_description,
.gform-conversational .gfield_error .instruction {
	color: #C43D2F !important;
}

/* ==========================================================================
   Radio & Checkbox — Card style with GF's native indicator
   ========================================================================== */

/* Card wrapper — left padding gives checkbox breathing room */
.gform-conversational .gchoice {
	display: flex !important;
	align-items: center !important;
	position: relative !important;
	padding: 0 0 0 16px !important;
	margin-bottom: 10px !important;
	background: #FFFFFF !important;
	border: 1.5px solid rgba(0, 0, 0, 0.12) !important;
	border-radius: 12px !important;
	cursor: pointer !important;
	transition: border-color 0.15s ease, background-color 0.15s ease !important;
}

.gform-conversational .gchoice:hover {
	border-color: rgba(0, 0, 0, 0.3) !important;
	background: rgba(0, 0, 0, 0.01) !important;
}

/* Selected card */
.gform-conversational .gchoice:has(input:checked) {
	border-color: #C43D2F !important;
	background: rgba(196, 61, 47, 0.04) !important;
}

/* Label carries ALL right/top/bottom padding = zero deadzone */
.gform-conversational .gchoice label.gform-field-label,
.gform-conversational .gchoice .gform-field-label--type-inline {
	flex: 1 !important;
	padding: 14px 18px !important;
	margin: 0 !important;
	background: transparent !important;
	border: none !important;
	cursor: pointer !important;
	color: #1A1A1E !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	order: 1 !important;
}

/* Undo gravity-forms.css hiding of native checkbox/radio.
   That file sets opacity:0, width:0, height:0 for custom ::before indicators,
   but conversational forms use GF's native Orbital checkbox instead. */
.gform-conversational .gchoice input[type="checkbox"],
.gform-conversational .gchoice input[type="radio"],
.gform-conversational .gform_wrapper .gfield--type-checkbox input[type="checkbox"],
.gform-conversational .gform_wrapper .gfield--type-radio input[type="radio"] {
	position: relative !important;
	opacity: 1 !important;
	width: auto !important;
	height: auto !important;
	flex-shrink: 0 !important;
	cursor: pointer !important;
}

/* Hide the custom ::before indicator from gravity-forms.css on conversational forms
   (that's on .gchoice, NOT on the input — Orbital's checkmark is on input::before) */
.gform-conversational .gchoice::before {
	display: none !important;
}

/* Smaller checkboxes, keep radio at XL */
.gform-conversational .gfield--type-checkbox .gchoice input[type="checkbox"] {
	--gf-ctrl-choice-size: var(--gf-ctrl-choice-size-lg) !important;
	--gf-ctrl-checkbox-check-size: var(--gf-ctrl-checkbox-check-size-lg) !important;
}

/* Transition for smooth check animation */
.gform-conversational .gchoice input[type="checkbox"],
.gform-conversational .gchoice input[type="radio"] {
	transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

/* Prevent focus state from showing red border on unselected options (auto-focus on page load) */
.gform-conversational .gchoice input[type="checkbox"]:focus:not(:checked),
.gform-conversational .gchoice input[type="radio"]:focus:not(:checked),
.gform-conversational .gchoice input[type="checkbox"]:focus-visible:not(:checked),
.gform-conversational .gchoice input[type="radio"]:focus-visible:not(:checked) {
	border-color: rgba(0, 0, 0, 0.25) !important;
	outline: none !important;
	box-shadow: none !important;
}

/* Checked checkbox — Signal Red fill with white checkmark (via Orbital ::before) */
.gform-conversational .gchoice input[type="checkbox"]:checked {
	background-color: #C43D2F !important;
	border-color: #C43D2F !important;
}

/* Checked radio — Signal Red border + filled dot */
.gform-conversational .gchoice input[type="radio"]:checked {
	border-color: #C43D2F !important;
	background-color: #FFFFFF !important;
}

/* Force the radio dot to show (Orbital uses ::before with opacity transition) */
.gform-conversational .gchoice input[type="radio"]:checked::before {
	opacity: 1 !important;
	background-color: #C43D2F !important;
}

/* ==========================================================================
   Text Inputs
   ========================================================================== */

.gform-conversational input[type="text"],
.gform-conversational input[type="email"],
.gform-conversational input[type="tel"],
.gform-conversational input[type="number"],
.gform-conversational textarea {
	border: 1.5px solid rgba(0, 0, 0, 0.15) !important;
	border-radius: 12px !important;
	padding: 14px 16px !important;
	font-size: 16px !important;
	color: #1A1A1E !important;
	background: #FFFFFF !important;
	font-family: 'Inter', sans-serif !important;
	min-height: 48px !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.gform-conversational input:focus,
.gform-conversational textarea:focus {
	border-color: #C43D2F !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(196, 61, 47, 0.1) !important;
}

.gform-conversational input::placeholder,
.gform-conversational textarea::placeholder {
	color: #999 !important;
}

/* ==========================================================================
   Select / Dropdown
   ========================================================================== */

.gform-conversational select {
	border: 1.5px solid rgba(0, 0, 0, 0.15) !important;
	border-radius: 12px !important;
	padding: 0 40px 0 16px !important;
	font-size: 16px !important;
	color: #1A1A1E !important;
	background: #FFFFFF !important;
	font-family: 'Inter', sans-serif !important;
	height: 48px !important;
	line-height: 48px !important;
	width: 100% !important;
	box-sizing: border-box !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' fill='none' stroke='%23333' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 16px center !important;
}

.gform-conversational select:focus {
	border-color: #C43D2F !important;
	outline: none !important;
}

/* ==========================================================================
   Hide per-field Continue button — bottom nav handles navigation
   ========================================================================== */

button[data-js="gform-conversational-nav-field-next"],
.gform-conversational__nav-button[data-js="gform-conversational-nav-field-next"],
.gform-conversational .gform-conversational__nav-button[data-js="gform-conversational-nav-field-next"] {
	display: none !important;
}

.gform-conversational__field-nav-helper-text {
	color: #999 !important;
	font-size: 13px !important;
}

@media (max-width: 768px) {
	.gform-conversational__field-nav-helper-text,
	.gform-conversational__field-nav-helper-icon {
		display: none !important;
	}
}

/* ==========================================================================
   Submit Button — Signal Red
   ========================================================================== */

.gform-conversational .gform_button,
.gform-conversational input[type="submit"],
.gform-conversational .gform-theme-button,
.gform-conversational__field-form-footer-submit .gform-theme-button,
.gform-conversational__field-form-footer-submit button {
	background: #C43D2F !important;
	color: #FFFFFF !important;
	border: none !important;
	border-radius: 32px !important;
	padding: 14px 32px !important;
	font-family: 'General Sans', sans-serif !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	cursor: pointer !important;
	min-height: 48px !important;
}

.gform-conversational .gform_button:hover,
.gform-conversational input[type="submit"]:hover,
.gform-conversational .gform-theme-button:hover {
	background: #a83327 !important;
}

.gform-conversational .gform_button:focus-visible,
.gform-conversational input[type="submit"]:focus-visible,
.gform-conversational .gform-theme-button:focus-visible {
	outline: 2px solid #C43D2F !important;
	outline-offset: 2px !important;
}

/* ==========================================================================
   Bottom Nav — "Back" / "Next" pill buttons
   ========================================================================== */

/* Frosted glass nav bar — very translucent so options are readable underneath */
.gform-conversational__form-nav,
.gform-conversational.gform-theme--framework .gform-conversational__form-nav {
	background: rgba(255, 255, 255, 0.25) !important;
	background-color: rgba(255, 255, 255, 0.25) !important;
	-webkit-backdrop-filter: blur(1.5px) !important;
	backdrop-filter: blur(1.5px) !important;
	border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.gform-conversational.gform-theme--framework .gform-conversational__nav-button--prev,
.gform-conversational.gform-theme--framework .gform-conversational__nav-button--next,
.gform-conversational .gform-conversational__nav-button--prev,
.gform-conversational .gform-conversational__nav-button--next {
	background: #FFFFFF !important;
	background-color: #FFFFFF !important;
	border: 1.5px solid rgba(0, 0, 0, 0.2) !important;
	border-radius: 32px !important;
	color: #1A1A1E !important;
	font-family: 'General Sans', sans-serif !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	padding: 10px 24px !important;
	min-width: 80px !important;
	cursor: pointer !important;
}

.gform-conversational .gform-conversational__nav-button--prev:hover,
.gform-conversational .gform-conversational__nav-button--next:hover {
	background: #F5F5F5 !important;
	border-color: rgba(0, 0, 0, 0.35) !important;
}

.gform-conversational .gform-conversational__nav-button--prev:focus-visible,
.gform-conversational .gform-conversational__nav-button--next:focus-visible {
	outline: 2px solid #1A1A1E !important;
	outline-offset: 2px !important;
}

/* Hide icon font arrows */
.gform-conversational.gform-theme--framework .gform-conversational__nav-button-icon,
.gform-conversational .gform-conversational__nav-button-icon {
	display: none !important;
}

/* Progress indicator between Back and Next buttons (NiaHealth style) */
/* Hide the visual bar, show only the X/Y label */
.gform-conversational.gform-theme--framework .gform-conversational__progress-bar-outer {
	display: none !important;
}

.gform-conversational.gform-theme--framework .gform-conversational__progress-bar {
	order: 2 !important;
	flex: 0 !important;
	min-width: auto !important;
	max-width: none !important;
	background: none !important;
	border: none !important;
	height: auto !important;
	padding: 0 !important;
}

.gform-conversational.gform-theme--framework .gform-conversational__progress-bar-label {
	font-size: 13px !important;
	color: #999 !important;
	white-space: nowrap !important;
	margin: 0 !important;
}

/* Back | X/Y | Next — grouped to the right */
.gform-conversational.gform-theme--framework .gform-conversational__form-nav-wrapper {
	justify-content: flex-end !important;
	gap: 12px !important;
	align-items: center !important;
}

/* display:contents lets individual buttons participate in parent flex */
.gform-conversational.gform-theme--framework .gform-conversational__nav-buttons {
	display: contents !important;
}

.gform-conversational.gform-theme--framework .gform-conversational__nav-button--prev {
	order: 1 !important;
}

/* Progress bar order is set above (order: 2) */

.gform-conversational.gform-theme--framework .gform-conversational__nav-button--next {
	order: 3 !important;
}

/* Undo GF's sr-only on button text */
.gform-conversational.gform-theme--framework .gform-conversational__nav-button--prev .gform-conversational__nav-button-text,
.gform-conversational.gform-theme--framework .gform-conversational__nav-button--next .gform-conversational__nav-button-text {
	position: static !important;
	width: auto !important;
	height: auto !important;
	clip: auto !important;
	clip-path: none !important;
	overflow: visible !important;
	white-space: normal !important;
	margin: 0 !important;
	border: 0 !important;
	padding: 0 !important;
	font-size: 0 !important;
	color: transparent !important;
}

/* Inject "Back" / "Next" text */
.gform-conversational.gform-theme--framework .gform-conversational__nav-button--prev .gform-conversational__nav-button-text::after {
	content: "Back" !important;
	font-size: 14px !important;
	color: #1A1A1E !important;
	font-weight: 600 !important;
}

.gform-conversational.gform-theme--framework .gform-conversational__nav-button--next .gform-conversational__nav-button-text::after {
	content: "Next" !important;
	font-size: 14px !important;
	color: #1A1A1E !important;
	font-weight: 600 !important;
}

/* ==========================================================================
   File Upload
   ========================================================================== */

.gform-conversational .ginput_container_fileupload {
	border: 2px dashed rgba(0, 0, 0, 0.12) !important;
	border-radius: 12px !important;
	padding: 24px !important;
	text-align: center !important;
}

/* ==========================================================================
   Save & Continue
   ========================================================================== */

/* Save & Continue — visible, styled as a subtle text link */
.gform-conversational .gpasc-new-draft-button,
.gform-conversational .gform_save_link {
	color: #666 !important;
	opacity: 1 !important;
	font-size: 14px !important;
	text-decoration: underline !important;
}

.gform-conversational .gpasc-new-draft-button:hover,
.gform-conversational .gform_save_link:hover {
	color: #1A1A1E !important;
}