/*
 * CloudBuddy Canvas — injected Gravity Forms (plugin v0.4.0)
 *
 * Loaded only on canvas pages that carry a `data-cbfs-form` placeholder.
 * Restyles the REAL Gravity Forms markup (legacy or 2.5+) to the rebuilt
 * design system, and covers the constant-gated local mock and the
 * call/contact fallback with the same rules.
 *
 * Specificity: every rule is scoped to `.cbfs-form[data-cbfs-form]` (0,2,0
 * before the descendant part), which beats Gravity's legacy `body
 * .gform_wrapper …` chains without `!important`. The handful of `!important`
 * declarations below are marked with the Gravity rule they exist to defeat —
 * Gravity itself uses `!important` in those places.
 *
 * The attribute in the selector is load-bearing twice over: it also keeps
 * these rules off the feedback overlay's popup, which carries the same
 * `.cbfs-form` class (see feedback.css).
 */

.cbfs-form[data-cbfs-form] {
	/* ---- tune the look here ---- */
	--cbfs-accent: #f05b2b; /* FS-01 heat orange, primary action */
	--cbfs-accent-hover: #cf4517;
	--cbfs-primary: #005aa3; /* FS-01 cool blue, focus + links */
	--cbfs-ink: #141a25;
	--cbfs-ink-soft: #4c5871;
	--cbfs-line: #c6cdd9;
	--cbfs-line-strong: #9aa5b8;
	--cbfs-surface: #ffffff;
	--cbfs-surface-sunken: #f7f6f3;
	--cbfs-error: #b91c1c;
	--cbfs-error-surface: #fef2f2;
	--cbfs-radius: 12px;
	--cbfs-radius-field: 8px;
	--cbfs-font: "Inter Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--cbfs-field-py: 0.85rem;
	--cbfs-field-px: 1rem;
	--cbfs-gap: 1rem;
	--cbfs-card-pad: 1.5rem;
	--cbfs-shadow: 0 18px 45px rgba(11, 16, 26, 0.18);

	/* ---- card ---- */
	position: relative;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: var(--cbfs-card-pad);
	background: var(--cbfs-surface);
	color: var(--cbfs-ink);
	border: 1px solid var(--cbfs-line);
	border-radius: var(--cbfs-radius);
	box-shadow: var(--cbfs-shadow);
	font-family: var(--cbfs-font);
	font-size: 16px;
	line-height: 1.45;
	text-align: left;
}

.cbfs-form[data-cbfs-form] *,
.cbfs-form[data-cbfs-form] *::before,
.cbfs-form[data-cbfs-form] *::after {
	box-sizing: border-box;
}

/* Gravity wraps everything in .gform_wrapper; neutralise its own spacing. */
.cbfs-form[data-cbfs-form] .gform_wrapper {
	margin: 0;
	padding: 0;
	font-size: inherit;
}

.cbfs-form[data-cbfs-form] .gform_wrapper form,
.cbfs-form[data-cbfs-form] form {
	margin: 0;
}

.cbfs-form[data-cbfs-form] .gform_heading,
.cbfs-form[data-cbfs-form] .gform_title,
.cbfs-form[data-cbfs-form] .gform_description {
	margin: 0 0 0.75rem;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--cbfs-ink);
}

/* ---- field list -------------------------------------------------------- */
/* Gravity legacy sets margins/padding on ul.gform_fields with !important. */
.cbfs-form[data-cbfs-form] ul.gform_fields,
.cbfs-form[data-cbfs-form] .gform_fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--cbfs-gap);
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.cbfs-form[data-cbfs-form] ul.gform_fields > li.gfield,
.cbfs-form[data-cbfs-form] .gform_fields > .gfield {
	display: block;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
	overflow: visible;
}

/* Fields Gravity marks as admin-hidden stay hidden, exactly as on the live
 * site (input_24 "How Did You Hear About Us"). Gravity's own rule uses
 * !important, so this one has to as well. */
.cbfs-form[data-cbfs-form] .gfield_visibility_hidden,
.cbfs-form[data-cbfs-form] .gform_hidden,
.cbfs-form[data-cbfs-form] .admin-hidden-markup {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---- labels ------------------------------------------------------------ */
/* The live form uses placeholder-only fields (Gravity's `hidden_label` clips
 * the label with !important). The rebuilt design shows real labels, so this
 * has to out-shout that rule. */
.cbfs-form[data-cbfs-form] .gfield_label,
.cbfs-form[data-cbfs-form] .gform-field-label {
	display: block;
	position: static !important;
	clip: auto !important;
	clip-path: none !important;
	width: auto !important;
	height: auto !important;
	margin: 0 0 0.35rem;
	overflow: visible;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--cbfs-ink-soft);
}

.cbfs-form[data-cbfs-form] .gfield_required,
.cbfs-form[data-cbfs-form] .gfield_required_asterisk {
	color: var(--cbfs-accent);
	font-weight: 700;
}

.cbfs-form[data-cbfs-form] .sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---- inputs ------------------------------------------------------------ */
.cbfs-form[data-cbfs-form] .ginput_container input[type="text"],
.cbfs-form[data-cbfs-form] .ginput_container input[type="email"],
.cbfs-form[data-cbfs-form] .ginput_container input[type="tel"],
.cbfs-form[data-cbfs-form] .ginput_container input[type="number"],
.cbfs-form[data-cbfs-form] .ginput_container input[type="url"],
.cbfs-form[data-cbfs-form] .ginput_container select,
.cbfs-form[data-cbfs-form] .ginput_container textarea {
	display: block;
	width: 100% !important; /* legacy Gravity sets .large width in % with !important */
	max-width: 100%;
	margin: 0;
	padding: var(--cbfs-field-py) var(--cbfs-field-px);
	background: var(--cbfs-surface);
	color: var(--cbfs-ink);
	border: 1px solid var(--cbfs-line-strong);
	border-radius: var(--cbfs-radius-field);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.35;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

/* Gravity ships rows="10" on the message field, which is far taller than the
 * card wants. Set the height here (still user-resizable). */
.cbfs-form[data-cbfs-form] .ginput_container textarea {
	height: 7rem;
	min-height: 4rem;
	resize: vertical;
}

.cbfs-form[data-cbfs-form] .ginput_container select {
	/* room for the caret we draw ourselves, since appearance is stripped */
	padding-right: 2.5rem;
	background-image: linear-gradient(45deg, transparent 50%, var(--cbfs-ink-soft) 50%),
		linear-gradient(135deg, var(--cbfs-ink-soft) 50%, transparent 50%);
	background-position: calc(100% - 1.15rem) 55%, calc(100% - 0.85rem) 55%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	cursor: pointer;
}

.cbfs-form[data-cbfs-form] .ginput_container input::placeholder,
.cbfs-form[data-cbfs-form] .ginput_container textarea::placeholder {
	color: var(--cbfs-ink-soft);
	opacity: 0.75;
}

.cbfs-form[data-cbfs-form] .ginput_container input:hover,
.cbfs-form[data-cbfs-form] .ginput_container select:hover,
.cbfs-form[data-cbfs-form] .ginput_container textarea:hover {
	border-color: var(--cbfs-ink-soft);
}

.cbfs-form[data-cbfs-form] .ginput_container input:focus,
.cbfs-form[data-cbfs-form] .ginput_container select:focus,
.cbfs-form[data-cbfs-form] .ginput_container textarea:focus,
.cbfs-form[data-cbfs-form] .gfield-choice-input:focus-visible {
	outline: none;
	border-color: var(--cbfs-primary);
	box-shadow: 0 0 0 3px rgba(0, 90, 163, 0.28);
}

/* ---- consent checkbox (small print) ------------------------------------ */
.cbfs-form[data-cbfs-form] .gfield--type-checkbox .gfield_label,
.cbfs-form[data-cbfs-form] .gfield_label_before_complex {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--cbfs-ink-soft);
}

.cbfs-form[data-cbfs-form] ul.gfield_checkbox,
.cbfs-form[data-cbfs-form] ul.gfield_radio {
	display: block;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.cbfs-form[data-cbfs-form] .gchoice {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
}

.cbfs-form[data-cbfs-form] .gchoice input[type="checkbox"],
.cbfs-form[data-cbfs-form] .gchoice input[type="radio"] {
	flex: 0 0 auto;
	width: 1.05rem;
	height: 1.05rem;
	margin: 0.15rem 0 0;
	accent-color: var(--cbfs-primary);
	cursor: pointer;
}

.cbfs-form[data-cbfs-form] .gchoice label {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	color: var(--cbfs-ink-soft);
	cursor: pointer;
}

/* Terms / privacy HTML field */
.cbfs-form[data-cbfs-form] .gfield_html p {
	margin: 0;
	font-size: 0.75rem;
	color: var(--cbfs-ink-soft);
	text-align: center;
}

.cbfs-form[data-cbfs-form] a {
	color: var(--cbfs-primary);
	text-decoration: underline;
}

.cbfs-form[data-cbfs-form] a:hover {
	color: var(--cbfs-accent-hover);
}

.cbfs-form[data-cbfs-form] a:focus-visible {
	outline: 2px solid var(--cbfs-primary);
	outline-offset: 2px;
}

/* ---- submit ------------------------------------------------------------ */
.cbfs-form[data-cbfs-form] .gform_footer,
.cbfs-form[data-cbfs-form] .gform-footer {
	display: block;
	margin: 1.25rem 0 0 !important; /* legacy Gravity sets footer padding with !important */
	padding: 0 !important;
}

.cbfs-form[data-cbfs-form] .gform_footer input[type="submit"],
.cbfs-form[data-cbfs-form] .gform_footer button,
.cbfs-form[data-cbfs-form] .gform-footer input[type="submit"],
.cbfs-form[data-cbfs-form] .gform-footer button,
.cbfs-form[data-cbfs-form] .gform_button {
	display: block;
	width: 100%;
	margin: 0;
	padding: 1rem 1.5rem;
	background: var(--cbfs-accent);
	color: #fff;
	border: 1px solid var(--cbfs-accent);
	border-radius: var(--cbfs-radius-field);
	font-family: inherit;
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.2;
	text-align: center;
	text-shadow: none;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.cbfs-form[data-cbfs-form] .gform_footer input[type="submit"]:hover,
.cbfs-form[data-cbfs-form] .gform-footer input[type="submit"]:hover,
.cbfs-form[data-cbfs-form] .gform_button:hover:not([disabled]) {
	background: var(--cbfs-accent-hover);
	border-color: var(--cbfs-accent-hover);
}

.cbfs-form[data-cbfs-form] .gform_footer input[type="submit"]:focus-visible,
.cbfs-form[data-cbfs-form] .gform-footer input[type="submit"]:focus-visible,
.cbfs-form[data-cbfs-form] .gform_button:focus-visible {
	outline: 3px solid var(--cbfs-primary);
	outline-offset: 2px;
}

.cbfs-form[data-cbfs-form] .gform_button[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
}

.cbfs-form[data-cbfs-form] .gform_ajax_spinner {
	display: inline-block;
	margin: 0.75rem auto 0;
}

/* ---- validation / errors ----------------------------------------------- */
.cbfs-form[data-cbfs-form] .gform_validation_errors,
.cbfs-form[data-cbfs-form] .validation_error {
	margin: 0 0 1rem;
	padding: 0.85rem 1rem;
	background: var(--cbfs-error-surface);
	color: var(--cbfs-error);
	border: 1px solid var(--cbfs-error);
	border-radius: var(--cbfs-radius-field);
	font-size: 0.875rem;
	font-weight: 600;
}

.cbfs-form[data-cbfs-form] .gfield_error .gfield_label,
.cbfs-form[data-cbfs-form] .gfield_error .gform-field-label {
	color: var(--cbfs-error);
}

.cbfs-form[data-cbfs-form] .gfield_error input,
.cbfs-form[data-cbfs-form] .gfield_error select,
.cbfs-form[data-cbfs-form] .gfield_error textarea,
.cbfs-form[data-cbfs-form] .ginput_container input[aria-invalid="true"],
.cbfs-form[data-cbfs-form] .ginput_container select[aria-invalid="true"],
.cbfs-form[data-cbfs-form] .ginput_container textarea[aria-invalid="true"] {
	border-color: var(--cbfs-error);
	background: var(--cbfs-error-surface);
}

.cbfs-form[data-cbfs-form] .gfield_error input:focus,
.cbfs-form[data-cbfs-form] .gfield_error select:focus,
.cbfs-form[data-cbfs-form] .gfield_error textarea:focus {
	box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.25);
}

.cbfs-form[data-cbfs-form] .gfield_validation_message,
.cbfs-form[data-cbfs-form] .validation_message {
	margin: 0.35rem 0 0;
	padding: 0;
	background: none;
	border: none;
	color: var(--cbfs-error);
	font-size: 0.8125rem;
	font-weight: 600;
}

/* Confirmation after an ajax submit */
.cbfs-form[data-cbfs-form] .gform_confirmation_message {
	margin: 0;
	padding: 1rem;
	background: var(--cbfs-surface-sunken);
	border-radius: var(--cbfs-radius-field);
	font-size: 1rem;
	color: var(--cbfs-ink);
}

/* ---- variant: hero (compact, stacked, sits on a photo) ----------------- */
.cbfs-form--hero[data-cbfs-form] {
	--cbfs-card-pad: 1.25rem;
	--cbfs-gap: 0.75rem;
	--cbfs-field-py: 0.7rem;
	--cbfs-shadow: 0 24px 60px rgba(11, 16, 26, 0.35);
	max-width: 27rem;
	border-color: rgba(255, 255, 255, 0.6);
}

.cbfs-form--hero[data-cbfs-form] .gfield_label,
.cbfs-form--hero[data-cbfs-form] .gform-field-label {
	font-size: 0.75rem;
	margin-bottom: 0.25rem;
}

.cbfs-form--hero[data-cbfs-form] .ginput_container textarea {
	height: 4.5rem;
}

.cbfs-form--hero[data-cbfs-form] .gform_footer,
.cbfs-form--hero[data-cbfs-form] .gform-footer {
	margin-top: 1rem !important;
}

/* ---- variant: section (roomier, mid-page) ------------------------------ */
.cbfs-form--section[data-cbfs-form] {
	--cbfs-card-pad: 2rem;
	--cbfs-gap: 1.25rem;
	--cbfs-field-py: 0.95rem;
	--cbfs-shadow: 0 10px 30px rgba(11, 16, 26, 0.1);
	max-width: 46rem;
	margin-inline: auto;
}

@media (min-width: 700px) {
	.cbfs-form--section[data-cbfs-form] ul.gform_fields,
	.cbfs-form--section[data-cbfs-form] .gform_fields {
		grid-template-columns: 1fr 1fr;
	}

	/* Pairs the short fields (name + email, phone + address) and gives the
	 * select, message, consent and terms rows the full width, so no half
	 * cell is ever left empty. */
	.cbfs-form--section[data-cbfs-form] .gfield--type-select,
	.cbfs-form--section[data-cbfs-form] .gfield--type-textarea,
	.cbfs-form--section[data-cbfs-form] .gfield--type-checkbox,
	.cbfs-form--section[data-cbfs-form] .gfield--type-html,
	.cbfs-form--section[data-cbfs-form] .gfield--width-full {
		grid-column: 1 / -1;
	}

	.cbfs-form--section[data-cbfs-form] .gform_footer,
	.cbfs-form--section[data-cbfs-form] .gform-footer {
		text-align: center;
	}

	/* Selector list mirrors the base submit rule so specificity matches and
	 * these declarations win by source order. */
	.cbfs-form--section[data-cbfs-form] .gform_footer input[type="submit"],
	.cbfs-form--section[data-cbfs-form] .gform_footer button,
	.cbfs-form--section[data-cbfs-form] .gform-footer input[type="submit"],
	.cbfs-form--section[data-cbfs-form] .gform-footer button,
	.cbfs-form--section[data-cbfs-form] .gform_button {
		display: inline-block;
		width: auto;
		min-width: 18rem;
	}
}

/* ---- local mock (CBFS_FAKE_FORMS) -------------------------------------- */
.cbfs-form--mock[data-cbfs-form] {
	border-style: dashed;
	border-color: var(--cbfs-accent);
}

.cbfs-form[data-cbfs-form] .cbfs-form__mock-note {
	margin: 0 0 1rem;
	padding: 0.5rem 0.75rem;
	background: #fde5db;
	color: #8a2c0c;
	border-radius: var(--cbfs-radius-field);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* ---- fallback (no Gravity form available) ------------------------------ */
.cbfs-form--fallback[data-cbfs-form] {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
}

.cbfs-form[data-cbfs-form] .cbfs-form__fallback-eyebrow {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cbfs-ink-soft);
}

.cbfs-form[data-cbfs-form] .cbfs-form__fallback-lead {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--cbfs-ink);
}

.cbfs-form[data-cbfs-form] .cbfs-form__fallback-call {
	display: block;
	width: 100%;
	margin-top: 0.35rem;
	padding: 1rem 1.5rem;
	background: var(--cbfs-accent);
	color: #fff;
	border-radius: var(--cbfs-radius-field);
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: 0.01em;
	text-align: center;
	text-decoration: none;
}

.cbfs-form[data-cbfs-form] .cbfs-form__fallback-call:hover {
	background: var(--cbfs-accent-hover);
	color: #fff;
}

.cbfs-form[data-cbfs-form] .cbfs-form__fallback-link {
	font-size: 0.9375rem;
	color: var(--cbfs-primary);
}

@media (prefers-reduced-motion: reduce) {
	.cbfs-form[data-cbfs-form] *,
	.cbfs-form[data-cbfs-form] *::before,
	.cbfs-form[data-cbfs-form] *::after {
		transition-duration: 0.01ms !important;
	}
}
/* Service dialog fallback. The page stylesheet (src/styles/service-dialog.css)
 * owns the dialog's design; these zero-specificity rules only keep it usable
 * on a page published before that stylesheet existed. */
:where(.cbfs-service-dialog) { position: fixed; inset: 0; margin: auto; width: min(42rem, calc(100vw - 0.5rem)); max-height: calc(100dvh - 0.5rem); overflow: auto; border: 0; border-radius: 1rem; padding: 0; background: #fff; }
:where(.cbfs-service-dialog)::backdrop { background: rgb(2 6 23 / 0.6); }
:where(.cbfs-service-head) { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 1rem; }
:where(.cbfs-service-head h2) { margin: 0; font-size: 1rem; }
:where(.cbfs-service-close) { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; background: transparent; cursor: pointer; }
:where(.cbfs-service-close svg) { width: 1.25rem; height: 1.25rem; }