/**
 * KCPSR Command Center Form Design System
 * ---------------------------------------
 * One stylesheet for every form in the Lost Pet Command Center. The reference
 * implementation is the emergency lost cat / lost dog intake (forms 3 and 6);
 * everything here generalises that design so the rest of the system can adopt
 * it without a second copy of the CSS existing anywhere.
 *
 * SCOPING CONTRACT — this is what keeps unrelated site forms safe:
 *   Gravity Forms puts a form's cssClass on the <form> element AND appends
 *   "_wrapper" to each class for the surrounding div. So a form registered with
 *   cssClass "kcpsr-form kcpsr-form--cat" produces:
 *       div.gform_wrapper.kcpsr-form_wrapper.kcpsr-form--cat_wrapper
 *       form.kcpsr-form.kcpsr-form--cat
 *   Nothing below matches a bare .gform_wrapper. A form that has not been
 *   explicitly opted in by kcpsr-form-design-system/includes/form-classes.php
 *   is untouched by this file. The camera loan, advisor team and community
 *   forms are deliberately NOT opted in.
 *
 * The non-Gravity Command Center forms (public sighting report, and the owner
 * panels on a case page) are mapped onto the same tokens at the bottom of this
 * file, so they inherit the identical look without duplicating any rules.
 *
 * VARIANTS
 *   .kcpsr-form--cat     pink / violet   (lost cat journeys)
 *   .kcpsr-form--dog     orange / amber  (lost dog journeys)
 *   .kcpsr-form--staff   slate / amber   (staff-only screens, denser)
 *   default              orange / amber
 */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

.gform_wrapper.kcpsr-form_wrapper,
.kcpsr-cc-form {
	--kcf-accent:        #ff7a00;
	--kcf-accent-2:      #ffb300;
	--kcf-accent-rgb:    255, 122, 0;

	--kcf-surface:       #0a0a0a;
	--kcf-surface-2:     rgba(255, 255, 255, .05);
	--kcf-surface-3:     rgba(255, 255, 255, .035);

	--kcf-ink:           #ffffff;
	--kcf-ink-2:         #f0f0f0;
	--kcf-ink-muted:     #a6a6a6;
	--kcf-ink-faint:     #7d7d7d;

	--kcf-line:          rgba(255, 255, 255, .22);
	--kcf-line-soft:     rgba(255, 255, 255, .10);

	--kcf-danger:        #ff5a5a;
	--kcf-danger-ink:    #ff8b8b;

	--kcf-radius:        16px;
	--kcf-radius-sm:     10px;
	--kcf-max:           820px;
	--kcf-field-h:       52px;
	--kcf-gap:           20px;

	--kcf-font: Arial, Helvetica, sans-serif;
}

.kcpsr-form--cat_wrapper,
.kcpsr-cc-form.is-cat {
	--kcf-accent:     #ff008c;
	--kcf-accent-2:   #a855f7;
	--kcf-accent-rgb: 255, 0, 140;
}

.kcpsr-form--dog_wrapper,
.kcpsr-cc-form.is-dog {
	--kcf-accent:     #ff7a00;
	--kcf-accent-2:   #ffb300;
	--kcf-accent-rgb: 255, 122, 0;
}

/* Staff screens carry more fields, so they get a wider container and tighter
   vertical rhythm. Same shapes, same controls -- just denser. */
.kcpsr-form--staff_wrapper {
	--kcf-accent:     #ffb300;
	--kcf-accent-2:   #ff7a00;
	--kcf-accent-rgb: 255, 179, 0;
	--kcf-max:        1000px;
	--kcf-gap:        15px;
	--kcf-field-h:    46px;
}

/* ==========================================================================
   2. CONTAINER
   ========================================================================== */

.gform_wrapper.kcpsr-form_wrapper,
.gform_wrapper.gravity-theme.kcpsr-form_wrapper {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--kcf-max) !important;
	margin: 12px auto 18px !important;
	padding: 20px 18px 22px !important;
	border: 1px solid rgba(var(--kcf-accent-rgb), .42) !important;
	border-radius: var(--kcf-radius) !important;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .035) 0%, rgba(255, 255, 255, .012) 100%),
		var(--kcf-surface) !important;
	box-shadow: 0 0 30px rgba(var(--kcf-accent-rgb), .14) !important;
	font-family: var(--kcf-font);
	color: var(--kcf-ink);
}

.gform_wrapper.kcpsr-form_wrapper *,
.gform_wrapper.kcpsr-form_wrapper *::before,
.gform_wrapper.kcpsr-form_wrapper *::after {
	box-sizing: border-box;
}

/* The theme sets a serif face and its own colours on headings inside content;
   the form has to win inside its own container. */
.gform_wrapper.kcpsr-form_wrapper h1,
.gform_wrapper.kcpsr-form_wrapper h2,
.gform_wrapper.kcpsr-form_wrapper h3,
.gform_wrapper.kcpsr-form_wrapper h4,
.gform_wrapper.kcpsr-form_wrapper label,
.gform_wrapper.kcpsr-form_wrapper legend,
.gform_wrapper.kcpsr-form_wrapper p,
.gform_wrapper.kcpsr-form_wrapper li,
.gform_wrapper.kcpsr-form_wrapper span {
	font-family: var(--kcf-font);
}

/* ==========================================================================
   3. STEP INDICATOR
   ========================================================================== */

.gform_wrapper.kcpsr-form_wrapper .gf_page_steps {
	display: flex;
	gap: 6px;
	margin: 0 0 20px;
	padding: 0 0 14px;
	border-bottom: 1px solid var(--kcf-line-soft);
	list-style: none;
}

.gform_wrapper.kcpsr-form_wrapper .gf_step {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin: 0 !important;
	padding: 0;
	opacity: 1;
	font-size: 11.5px;
}

.gform_wrapper.kcpsr-form_wrapper .gf_step .gf_step_number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	font-size: 13px;
	font-weight: 900;
	font-style: normal;
	background: rgba(255, 255, 255, .07);
	color: var(--kcf-ink-muted);
	border: 1.5px solid rgba(255, 255, 255, .16);
}

.gform_wrapper.kcpsr-form_wrapper .gf_step .gf_step_label {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--kcf-ink-muted);
	text-align: center;
	line-height: 1.2;
}

.gform_wrapper.kcpsr-form_wrapper .gf_step_active .gf_step_number {
	background: linear-gradient(96deg, var(--kcf-accent) 0%, var(--kcf-accent-2) 100%);
	color: #0a0a0a;
	border-color: transparent;
	box-shadow: 0 0 0 4px rgba(var(--kcf-accent-rgb), .18);
}

.gform_wrapper.kcpsr-form_wrapper .gf_step_active .gf_step_label { color: var(--kcf-ink); }

.gform_wrapper.kcpsr-form_wrapper .gf_step_completed .gf_step_number {
	background: rgba(var(--kcf-accent-rgb), .22);
	color: var(--kcf-ink);
	border-color: rgba(var(--kcf-accent-rgb), .6);
}

.gform_wrapper.kcpsr-form_wrapper .gf_step_completed .gf_step_label { color: #d8d8d8; }

/* Gravity Forms draws connector pseudo-elements that fight the pill shape. */
.gform_wrapper.kcpsr-form_wrapper .gf_step_number::before,
.gform_wrapper.kcpsr-form_wrapper .gf_step_number::after { content: none !important; }

/* Percentage-bar pagination, for forms that use it instead of steps. */
.gform_wrapper.kcpsr-form_wrapper .gf_progressbar_wrapper {
	margin: 0 0 20px;
	padding: 0 0 14px;
	border-bottom: 1px solid var(--kcf-line-soft);
}
.gform_wrapper.kcpsr-form_wrapper .gf_progressbar_title {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--kcf-ink-muted);
	margin-bottom: 8px;
}
.gform_wrapper.kcpsr-form_wrapper .gf_progressbar {
	background: rgba(255, 255, 255, .08);
	border-radius: 999px;
	overflow: hidden;
	height: 8px;
}
.gform_wrapper.kcpsr-form_wrapper .gf_progressbar_percentage {
	height: 8px;
	background: linear-gradient(96deg, var(--kcf-accent) 0%, var(--kcf-accent-2) 100%);
}
.gform_wrapper.kcpsr-form_wrapper .gf_progressbar_percentage span { display: none; }

/* ==========================================================================
   4. FIELDS
   ========================================================================== */

.gform_wrapper.kcpsr-form_wrapper .gform_fields { row-gap: var(--kcf-gap) !important; }

.gform_wrapper.kcpsr-form_wrapper .gfield_label,
.gform_wrapper.kcpsr-form_wrapper .gform-field-label {
	display: block;
	font-size: 16px !important;
	font-weight: 800 !important;
	line-height: 1.32 !important;
	color: var(--kcf-ink) !important;
	margin-bottom: 8px !important;
}

.gform_wrapper.kcpsr-form_wrapper .gfield_required,
.gform_wrapper.kcpsr-form_wrapper .gfield_required_text {
	color: var(--kcf-accent) !important;
	font-weight: 800 !important;
	font-size: 12.5px !important;
	letter-spacing: .02em;
	text-transform: none;
}

.gform_wrapper.kcpsr-form_wrapper .gfield_description,
.gform_wrapper.kcpsr-form_wrapper .gform-field-description {
	font-size: 13.5px !important;
	line-height: 1.45 !important;
	color: var(--kcf-ink-muted) !important;
	padding-top: 6px !important;
}

.gform_wrapper.kcpsr-form_wrapper .ginput_complex label,
.gform_wrapper.kcpsr-form_wrapper .gform-field-label--type-sub {
	font-size: 12.5px !important;
	font-weight: 700 !important;
	color: #9d9d9d !important;
}

/* Section breaks. The continuation and staff forms lean on these heavily, so
   they have to read as real dividers rather than stray bold text. */
.gform_wrapper.kcpsr-form_wrapper .gsection {
	margin: 8px 0 0 !important;
	padding: 16px 0 0 !important;
	border-bottom: 0 !important;
	border-top: 1px solid var(--kcf-line-soft) !important;
}
.gform_wrapper.kcpsr-form_wrapper .gsection_title {
	font-size: 13px !important;
	font-weight: 900 !important;
	letter-spacing: .1em !important;
	text-transform: uppercase !important;
	color: var(--kcf-accent) !important;
	margin: 0 0 4px !important;
}
.gform_wrapper.kcpsr-form_wrapper .gsection_description {
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: var(--kcf-ink-muted) !important;
	margin: 0 !important;
}
/* A section immediately after the step bar has nothing to divide. */
.gform_wrapper.kcpsr-form_wrapper .gform_page .gfield--type-section:first-of-type .gsection {
	border-top: 0 !important;
	padding-top: 0 !important;
}

/* ==========================================================================
   5. INPUTS
   16px is deliberate: anything smaller makes iOS zoom the viewport on focus.
   ========================================================================== */

.gform_wrapper.kcpsr-form_wrapper input[type="text"],
.gform_wrapper.kcpsr-form_wrapper input[type="email"],
.gform_wrapper.kcpsr-form_wrapper input[type="tel"],
.gform_wrapper.kcpsr-form_wrapper input[type="number"],
.gform_wrapper.kcpsr-form_wrapper input[type="url"],
.gform_wrapper.kcpsr-form_wrapper input[type="password"],
.gform_wrapper.kcpsr-form_wrapper input[type="date"],
.gform_wrapper.kcpsr-form_wrapper input[type="time"],
.gform_wrapper.kcpsr-form_wrapper select,
.gform_wrapper.kcpsr-form_wrapper textarea {
	width: 100%;
	min-height: var(--kcf-field-h) !important;
	padding: 13px 14px !important;
	font-family: var(--kcf-font);
	font-size: 16px !important;
	line-height: 1.35 !important;
	color: var(--kcf-ink) !important;
	background: var(--kcf-surface-2) !important;
	border: 1.5px solid var(--kcf-line) !important;
	border-radius: var(--kcf-radius-sm) !important;
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.gform_wrapper.kcpsr-form_wrapper textarea {
	min-height: 110px !important;
	padding-top: 12px !important;
	resize: vertical;
}

.gform_wrapper.kcpsr-form_wrapper select {
	background-image:
		linear-gradient(45deg, transparent 50%, var(--kcf-ink-muted) 50%),
		linear-gradient(135deg, var(--kcf-ink-muted) 50%, transparent 50%) !important;
	background-position:
		calc(100% - 20px) calc(50% + 2px),
		calc(100% - 14px) calc(50% + 2px) !important;
	background-size: 6px 6px, 6px 6px !important;
	background-repeat: no-repeat !important;
	padding-right: 38px !important;
}

.gform_wrapper.kcpsr-form_wrapper input::placeholder,
.gform_wrapper.kcpsr-form_wrapper textarea::placeholder {
	color: var(--kcf-ink-faint) !important;
	opacity: 1;
}

/* Focus is a box-shadow ring, never an outline: an outline is clipped by the
   rounded container on this theme and effectively disappears. */
.gform_wrapper.kcpsr-form_wrapper input:focus,
.gform_wrapper.kcpsr-form_wrapper select:focus,
.gform_wrapper.kcpsr-form_wrapper textarea:focus {
	outline: none !important;
	background: rgba(255, 255, 255, .08) !important;
	border-color: var(--kcf-accent) !important;
	box-shadow: 0 0 0 3px rgba(var(--kcf-accent-rgb), .30) !important;
}

.gform_wrapper.kcpsr-form_wrapper .ginput_container_date input,
.gform_wrapper.kcpsr-form_wrapper .ginput_container_time input { min-width: 0; }

.gform_wrapper.kcpsr-form_wrapper .gfield_time_hour,
.gform_wrapper.kcpsr-form_wrapper .gfield_time_minute,
.gform_wrapper.kcpsr-form_wrapper .gfield_time_ampm { display: inline-flex; align-items: center; }

/* ==========================================================================
   6. CHOICES — radio and checkbox as full-width tappable cards
   ========================================================================== */

.gform_wrapper.kcpsr-form_wrapper .gfield_radio,
.gform_wrapper.kcpsr-form_wrapper .gfield_checkbox { display: grid; gap: 8px; }

.gform_wrapper.kcpsr-form_wrapper .gchoice {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin: 0 !important;
	padding: 12px 13px;
	border-radius: var(--kcf-radius-sm);
	background: var(--kcf-surface-3);
	border: 1.5px solid rgba(255, 255, 255, .16);
	transition: border-color .15s ease, background-color .15s ease;
}

.gform_wrapper.kcpsr-form_wrapper .gchoice:hover { border-color: rgba(var(--kcf-accent-rgb), .55); }

.gform_wrapper.kcpsr-form_wrapper .gchoice:has(input:checked) {
	border-color: var(--kcf-accent);
	background: rgba(var(--kcf-accent-rgb), .12);
}

.gform_wrapper.kcpsr-form_wrapper .gchoice input[type="radio"],
.gform_wrapper.kcpsr-form_wrapper .gchoice input[type="checkbox"] {
	width: 22px !important;
	height: 22px !important;
	min-width: 22px;
	margin: 0 !important;
	flex: 0 0 22px;
	accent-color: var(--kcf-accent);
}

/* Stretching the label makes the whole card the tap target rather than just
   the words next to a 22px control. */
.gform_wrapper.kcpsr-form_wrapper .gchoice label {
	flex: 1 1 auto;
	align-self: stretch;
	display: flex;
	align-items: center;
	min-height: 24px;
	font-size: 15.5px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	color: var(--kcf-ink-2) !important;
	margin: 0 !important;
	padding: 0 !important;
	cursor: pointer;
	max-width: none !important;
}

.gform_wrapper.kcpsr-form_wrapper .gchoice input:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--kcf-surface), 0 0 0 6px #ffffff;
	border-radius: 4px;
}

/* Long checkbox groups read better in two columns on wide screens. Opt-in per
   field with the gf_list_2col class so it is never applied blindly. */
@media (min-width: 700px) {
	.gform_wrapper.kcpsr-form_wrapper .gf_list_2col .gfield_checkbox,
	.gform_wrapper.kcpsr-form_wrapper .gf_list_2col .gfield_radio {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ==========================================================================
   7. CONSENT
   ========================================================================== */

.gform_wrapper.kcpsr-form_wrapper .gfield--type-consent {
	padding: 14px 15px;
	border-radius: 12px;
	background: var(--kcf-surface-3);
	border: 1.5px solid rgba(255, 255, 255, .16);
}

.gform_wrapper.kcpsr-form_wrapper .gfield--type-consent > .gfield_label {
	font-size: 12px !important;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--kcf-ink-muted) !important;
}

.gform_wrapper.kcpsr-form_wrapper .ginput_container_consent {
	display: flex;
	align-items: flex-start;
	gap: 11px;
}

.gform_wrapper.kcpsr-form_wrapper .ginput_container_consent input[type="checkbox"] {
	width: 22px !important;
	height: 22px !important;
	min-width: 22px;
	margin: 2px 0 0 !important;
	flex: 0 0 22px;
	accent-color: var(--kcf-accent);
}

.gform_wrapper.kcpsr-form_wrapper .ginput_container_consent label {
	font-size: 14.5px !important;
	font-weight: 600 !important;
	line-height: 1.45 !important;
	color: var(--kcf-ink-2) !important;
}

.gform_wrapper.kcpsr-form_wrapper .gfield--type-consent .gfield_description {
	padding-top: 9px !important;
	font-size: 13px !important;
	color: #9e9e9e !important;
}

.gform_wrapper.kcpsr-form_wrapper .gfield--type-consent .gfield_description a { color: #ffd9b0; text-decoration: underline; }

/* ==========================================================================
   8. FILE UPLOAD
   ========================================================================== */

.gform_wrapper.kcpsr-form_wrapper .gform_drop_area {
	padding: 22px 16px !important;
	border-radius: 12px !important;
	border: 2px dashed rgba(var(--kcf-accent-rgb), .55) !important;
	background: rgba(var(--kcf-accent-rgb), .06) !important;
	color: #d8d8d8 !important;
	text-align: center;
}

.gform_wrapper.kcpsr-form_wrapper .gform_button_select_files,
.gform_wrapper.kcpsr-form_wrapper .gform_fileupload_rules + input[type="file"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto !important;
	min-height: 48px !important;
	margin-top: 10px !important;
	padding: 12px 22px !important;
	font-size: 15.5px !important;
	font-weight: 800 !important;
	color: #0a0a0a !important;
	background: linear-gradient(96deg, var(--kcf-accent) 0%, var(--kcf-accent-2) 100%) !important;
	border: 0 !important;
	border-radius: 999px !important;
	cursor: pointer;
}

.gform_wrapper.kcpsr-form_wrapper .gform_drop_instructions {
	display: block;
	font-size: 14px;
	color: #b4b4b4;
	margin-bottom: 2px;
}

.gform_wrapper.kcpsr-form_wrapper .gform_fileupload_rules,
.gform_wrapper.kcpsr-form_wrapper .gfield_fileupload_filesize { color: var(--kcf-ink-muted) !important; font-size: 13px !important; }

.gform_wrapper.kcpsr-form_wrapper .ginput_preview,
.gform_wrapper.kcpsr-form_wrapper .gfield_fileupload_filename { color: var(--kcf-ink-2) !important; font-size: 14px !important; }

.gform_wrapper.kcpsr-form_wrapper .gform_delete_file {
	background: rgba(255, 255, 255, .10) !important;
	color: var(--kcf-ink) !important;
	border: 0 !important;
	border-radius: 6px !important;
	min-height: 34px !important;
	padding: 4px 10px !important;
}

/* Single-file inputs, which do not get the drop area. */
.gform_wrapper.kcpsr-form_wrapper input[type="file"] {
	width: 100%;
	padding: 12px 14px;
	font-size: 14px;
	color: var(--kcf-ink-2);
	background: var(--kcf-surface-2);
	border: 1.5px dashed var(--kcf-line);
	border-radius: var(--kcf-radius-sm);
}

/* ==========================================================================
   9. ERRORS
   ========================================================================== */

.gform_wrapper.kcpsr-form_wrapper .gform_validation_errors {
	margin: 0 0 18px !important;
	padding: 14px 16px !important;
	border-radius: var(--kcf-radius-sm) !important;
	background: rgba(255, 45, 45, .12) !important;
	border: 1px solid rgba(255, 90, 90, .6) !important;
	border-left: 5px solid var(--kcf-danger) !important;
	box-shadow: none !important;
}

.gform_wrapper.kcpsr-form_wrapper .gform_validation_errors h2,
.gform_wrapper.kcpsr-form_wrapper .gform_validation_errors .gform_submission_error {
	font-size: 16px !important;
	font-weight: 900 !important;
	color: var(--kcf-ink) !important;
	margin: 0 !important;
}

.gform_wrapper.kcpsr-form_wrapper .gform_validation_errors ol,
.gform_wrapper.kcpsr-form_wrapper .gform_validation_errors ul { margin: 8px 0 0 18px !important; }
.gform_wrapper.kcpsr-form_wrapper .gform_validation_errors li,
.gform_wrapper.kcpsr-form_wrapper .gform_validation_errors a { color: #ffd2d2 !important; font-size: 14px !important; }

.gform_wrapper.kcpsr-form_wrapper .gfield_error input,
.gform_wrapper.kcpsr-form_wrapper .gfield_error select,
.gform_wrapper.kcpsr-form_wrapper .gfield_error textarea {
	border-color: var(--kcf-danger) !important;
	background: rgba(255, 45, 45, .07) !important;
}

.gform_wrapper.kcpsr-form_wrapper .validation_message,
.gform_wrapper.kcpsr-form_wrapper .gfield_validation_message {
	margin-top: 7px !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: var(--kcf-danger-ink) !important;
}

.gform_wrapper.kcpsr-form_wrapper .gfield_error .gfield_label { color: var(--kcf-ink) !important; }

/* ==========================================================================
   10. BUTTONS
   Order is set explicitly so "continue" is always the visually dominant
   control and always sits on the right on desktop / on top on mobile.
   ========================================================================== */

.gform_wrapper.kcpsr-form_wrapper .gform_page_footer,
.gform_wrapper.kcpsr-form_wrapper .gform_footer {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin: 22px 0 0 !important;
	padding: 18px 0 0 !important;
	border-top: 1px solid var(--kcf-line-soft);
}

.gform_wrapper.kcpsr-form_wrapper .gform_next_button,
.gform_wrapper.kcpsr-form_wrapper .gform_button,
.gform_wrapper.kcpsr-form_wrapper .gform_save_link {
	order: 2;
	flex: 1 1 220px;
	width: 100% !important;
	max-width: none !important;
	min-height: 56px !important;
	padding: 15px 24px !important;
	font-family: var(--kcf-font);
	font-size: 17px !important;
	font-weight: 900 !important;
	letter-spacing: .01em !important;
	text-align: center;
	text-decoration: none !important;
	color: #0a0a0a !important;
	background: linear-gradient(96deg, var(--kcf-accent) 0%, var(--kcf-accent-2) 100%) !important;
	border: 0 !important;
	border-radius: 999px !important;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(var(--kcf-accent-rgb), .30) !important;
	transition: transform .16s ease, box-shadow .16s ease;
}

.gform_wrapper.kcpsr-form_wrapper .gform_next_button:hover,
.gform_wrapper.kcpsr-form_wrapper .gform_button:hover { transform: translateY(-1px); }

.gform_wrapper.kcpsr-form_wrapper .gform_previous_button {
	order: 1;
	flex: 0 0 auto;
	width: auto !important;
	min-height: 52px !important;
	padding: 13px 22px !important;
	font-family: var(--kcf-font);
	font-size: 15px !important;
	font-weight: 800 !important;
	color: var(--kcf-ink) !important;
	background: transparent !important;
	border: 1.5px solid rgba(255, 255, 255, .32) !important;
	border-radius: 999px !important;
	cursor: pointer;
}

/* Save and continue is a quiet tertiary action -- never competing with the
   button that actually advances the form. */
.gform_wrapper.kcpsr-form_wrapper .gform_save_link {
	order: 3;
	flex: 1 1 100%;
	min-height: 44px !important;
	padding: 10px 18px !important;
	font-size: 14.5px !important;
	font-weight: 700 !important;
	color: var(--kcf-ink-muted) !important;
	background: none !important;
	box-shadow: none !important;
	border: 0 !important;
	text-decoration: underline !important;
}

.gform_wrapper.kcpsr-form_wrapper .gform_next_button:focus-visible,
.gform_wrapper.kcpsr-form_wrapper .gform_button:focus-visible,
.gform_wrapper.kcpsr-form_wrapper .gform_previous_button:focus-visible,
.gform_wrapper.kcpsr-form_wrapper .gform_save_link:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--kcf-surface), 0 0 0 6px #ffffff !important;
}

/* ==========================================================================
   11. CONFIRMATION
   ========================================================================== */

.kcpsr-form-confirm,
.gform_confirmation_wrapper.kcpsr-form_wrapper {
	max-width: var(--kcf-max, 820px);
	margin: 16px auto 30px;
	padding: 22px 20px;
	border-radius: var(--kcf-radius, 16px);
	background: var(--kcf-surface, #0a0a0a);
	border: 1px solid rgba(var(--kcf-accent-rgb, 255, 122, 0), .45);
	color: #eaeaea;
	font-family: var(--kcf-font, Arial, Helvetica, sans-serif);
	font-size: 16px;
	line-height: 1.6;
}

/* ==========================================================================
   12. HTML BLOCKS INSIDE A FORM
   Used for safety notices and inline guidance.
   ========================================================================== */

.gform_wrapper.kcpsr-form_wrapper .kcpsr-gf-safety,
.gform_wrapper.kcpsr-form_wrapper .kcf-note {
	padding: 13px 15px;
	border-radius: var(--kcf-radius-sm);
	background: rgba(255, 60, 0, .10);
	border: 1px solid rgba(255, 120, 0, .5);
	border-left: 4px solid var(--kcf-accent);
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--kcf-ink);
}
.gform_wrapper.kcpsr-form_wrapper .kcpsr-gf-safety strong,
.gform_wrapper.kcpsr-form_wrapper .kcf-note strong { font-weight: 900; color: var(--kcf-ink); }

.gform_wrapper.kcpsr-form_wrapper .kcf-intro {
	font-size: 15px;
	line-height: 1.55;
	color: var(--kcf-ink-muted);
	margin: 0;
}

/* Long instructions collapse by default so they never become a wall of text. */
.gform_wrapper.kcpsr-form_wrapper .kcf-more {
	border: 1px solid var(--kcf-line-soft);
	border-radius: var(--kcf-radius-sm);
	background: var(--kcf-surface-3);
	padding: 0;
}
.gform_wrapper.kcpsr-form_wrapper .kcf-more > summary {
	list-style: none;
	cursor: pointer;
	padding: 12px 14px;
	font-size: 14.5px;
	font-weight: 800;
	color: var(--kcf-ink-2);
}
.gform_wrapper.kcpsr-form_wrapper .kcf-more > summary::-webkit-details-marker { display: none; }
.gform_wrapper.kcpsr-form_wrapper .kcf-more > summary::after { content: " ▾"; color: var(--kcf-accent); }
.gform_wrapper.kcpsr-form_wrapper .kcf-more[open] > summary::after { content: " ▴"; }
.gform_wrapper.kcpsr-form_wrapper .kcf-more > div { padding: 0 14px 14px; font-size: 14px; line-height: 1.55; color: var(--kcf-ink-muted); }
.gform_wrapper.kcpsr-form_wrapper .kcf-more > summary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--kcf-surface), 0 0 0 6px #fff; border-radius: var(--kcf-radius-sm); }

/* A read-only recap of what the system already knows, so a form can visibly
   avoid re-asking for it. */
.gform_wrapper.kcpsr-form_wrapper .kcf-known {
	border: 1px solid var(--kcf-line-soft);
	border-radius: var(--kcf-radius-sm);
	background: var(--kcf-surface-3);
	padding: 14px 15px;
}
.gform_wrapper.kcpsr-form_wrapper .kcf-known h3 {
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--kcf-accent);
}
.gform_wrapper.kcpsr-form_wrapper .kcf-known p { margin: 0 0 10px; font-size: 13.5px; color: var(--kcf-ink-muted); }
.gform_wrapper.kcpsr-form_wrapper .kcf-known dl { margin: 0; display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 1fr); gap: 6px 14px; }
.gform_wrapper.kcpsr-form_wrapper .kcf-known dt { font-size: 13px; font-weight: 800; color: var(--kcf-ink-muted); }
.gform_wrapper.kcpsr-form_wrapper .kcf-known dd { margin: 0; font-size: 14.5px; color: var(--kcf-ink); }

/* ==========================================================================
   13. HIDDEN / HONEYPOT HOUSEKEEPING
   The HTML hidden attribute is only a UA display rule and loses to anything
   that sets display later, which this file does a lot of.
   ========================================================================== */

.gform_wrapper.kcpsr-form_wrapper [hidden] { display: none !important; }
.gform_wrapper.kcpsr-form_wrapper .gform_validation_container,
.gform_wrapper.kcpsr-form_wrapper .gfield--type-honeypot { display: none !important; }

/* ==========================================================================
   14. RESPONSIVE
   ========================================================================== */

@media (max-width: 750px) {
	.gform_wrapper.kcpsr-form_wrapper,
	.gform_wrapper.gravity-theme.kcpsr-form_wrapper {
		margin: 10px 0 16px !important;
		padding: 16px 13px 18px !important;
		border-radius: 14px !important;
	}

	.gform_wrapper.kcpsr-form_wrapper .gf_page_steps { gap: 3px; margin-bottom: 14px; padding-bottom: 10px; }
	.gform_wrapper.kcpsr-form_wrapper .gf_step { gap: 4px; }
	.gform_wrapper.kcpsr-form_wrapper .gf_step .gf_step_number { width: 24px; height: 24px; font-size: 11.5px; }
	/* Labels wrap to two lines rather than truncating. Measured at 360px, a
	   nowrap label had 48-54px to work with and "Where & When" became an
	   ellipsis, which defeats the point of naming the steps at all. */
	.gform_wrapper.kcpsr-form_wrapper .gf_step .gf_step_label {
		font-size: 9.5px;
		letter-spacing: 0;
		line-height: 1.15;
		max-width: 100%;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		hyphens: auto;
	}

	.gform_wrapper.kcpsr-form_wrapper .gform_fields { row-gap: 17px !important; }

	.gform_wrapper.kcpsr-form_wrapper .gform_previous_button { flex: 1 1 100%; order: 2; }
	.gform_wrapper.kcpsr-form_wrapper .gform_next_button,
	.gform_wrapper.kcpsr-form_wrapper .gform_button { order: 1; flex: 1 1 100%; }
	.gform_wrapper.kcpsr-form_wrapper .gform_save_link { order: 3; }

	.gform_wrapper.kcpsr-form_wrapper .kcf-known dl { grid-template-columns: 1fr; gap: 2px; }
	.gform_wrapper.kcpsr-form_wrapper .kcf-known dd { margin-bottom: 8px; }
}

/* Two-column half-width fields collapse before the columns get so narrow that
   labels wrap onto three lines. */
@media (max-width: 640px) {
	.gform_wrapper.kcpsr-form_wrapper .gfield--width-half,
	.gform_wrapper.kcpsr-form_wrapper .gfield--width-third,
	.gform_wrapper.kcpsr-form_wrapper .gfield--width-quarter { grid-column: span 12 !important; }
}

/* Six steps do not fit across a 360px screen with readable labels, so past
   four steps the labels drop and the numbers carry the progress on their own. */
@media (max-width: 480px) {
	.gform_wrapper.kcpsr-form_wrapper .gf_page_steps:has(.gf_step:nth-child(5)) .gf_step_label { display: none; }
	.gform_wrapper.kcpsr-form_wrapper .gf_page_steps:has(.gf_step:nth-child(5)) { gap: 6px; }
	.gform_wrapper.kcpsr-form_wrapper .gf_page_steps:has(.gf_step:nth-child(5)) .gf_step_number { width: 26px; height: 26px; }
}

/* ==========================================================================
   15. NON-GRAVITY COMMAND CENTER FORMS
   The public sighting report and the owner panels on a case page are plain
   markup rendered by the Lost Pet Command Center plugin. They are mapped onto
   the tokens above rather than restyled separately, so there is exactly one
   definition of what a Command Center form looks like.
   ========================================================================== */

.kcpsr-cc-form,
.kcpsr-case-wrap .cc-form,
.kcpsr-case-wrap form {
	font-family: var(--kcf-font, Arial, Helvetica, sans-serif);
}

.kcpsr-case-wrap form label,
.cc-form label {
	display: block;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.32;
	color: var(--kcf-ink, #fff);
	margin-bottom: 7px;
}

.kcpsr-case-wrap form input[type="text"],
.kcpsr-case-wrap form input[type="email"],
.kcpsr-case-wrap form input[type="tel"],
.kcpsr-case-wrap form input[type="date"],
.kcpsr-case-wrap form input[type="time"],
.kcpsr-case-wrap form input[type="url"],
.kcpsr-case-wrap form select,
.kcpsr-case-wrap form textarea,
.cc-form input[type="text"],
.cc-form input[type="email"],
.cc-form input[type="tel"],
.cc-form input[type="date"],
.cc-form input[type="time"],
.cc-form input[type="url"],
.cc-form select,
.cc-form textarea {
	width: 100%;
	min-height: 52px;
	padding: 13px 14px;
	font-family: var(--kcf-font, Arial, Helvetica, sans-serif);
	font-size: 16px;
	line-height: 1.35;
	color: var(--kcf-ink, #fff);
	background: var(--kcf-surface-2, rgba(255, 255, 255, .05));
	border: 1.5px solid var(--kcf-line, rgba(255, 255, 255, .22));
	border-radius: var(--kcf-radius-sm, 10px);
	-webkit-appearance: none;
	appearance: none;
}

.kcpsr-case-wrap form textarea,
.cc-form textarea { min-height: 100px; resize: vertical; }

.kcpsr-case-wrap form input:focus,
.kcpsr-case-wrap form select:focus,
.kcpsr-case-wrap form textarea:focus,
.cc-form input:focus,
.cc-form select:focus,
.cc-form textarea:focus {
	outline: none;
	background: rgba(255, 255, 255, .08);
	border-color: var(--kcf-accent, #ff7a00);
	box-shadow: 0 0 0 3px rgba(var(--kcf-accent-rgb, 255, 122, 0), .30);
}

.kcpsr-case-wrap form button,
.kcpsr-case-wrap form input[type="submit"],
.cc-form button[type="submit"],
.cc-form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 420px;
	min-height: 54px;
	padding: 14px 24px;
	font-family: var(--kcf-font, Arial, Helvetica, sans-serif);
	font-size: 16.5px;
	font-weight: 900;
	color: #0a0a0a;
	background: linear-gradient(96deg, var(--kcf-accent, #ff7a00) 0%, var(--kcf-accent-2, #ffb300) 100%);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(var(--kcf-accent-rgb, 255, 122, 0), .28);
}

.kcpsr-case-wrap form button:focus-visible,
.cc-form button:focus-visible,
.cc-form input[type="submit"]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px #0b0b0b, 0 0 0 6px #ffffff;
}

/* The public sighting report keeps its own single-column rhythm; it is short
   by design and must never become multi-step. */
.cc-form { display: grid; gap: 16px; max-width: 640px; }
.cc-form .cc-field { margin: 0; }
.cc-form .cc-check {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 12px 13px;
	border-radius: var(--kcf-radius-sm, 10px);
	background: var(--kcf-surface-3, rgba(255, 255, 255, .035));
	border: 1.5px solid rgba(255, 255, 255, .16);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--kcf-ink-2, #f0f0f0);
}
.cc-form .cc-check input[type="checkbox"] {
	width: 22px;
	height: 22px;
	min-width: 22px;
	flex: 0 0 22px;
	margin: 0;
	accent-color: var(--kcf-accent, #ff7a00);
}
.cc-form .cc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cc-form .cc-safety,
.kcpsr-case-wrap .cc-safety {
	padding: 13px 15px;
	border-radius: var(--kcf-radius-sm, 10px);
	background: rgba(255, 60, 0, .10);
	border: 1px solid rgba(255, 120, 0, .5);
	border-left: 4px solid var(--kcf-accent, #ff7a00);
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--kcf-ink, #fff);
}

@media (max-width: 750px) {
	.cc-form { gap: 14px; }
	.kcpsr-case-wrap form button,
	.cc-form button[type="submit"] { max-width: none; }
}

/* Visually-hidden text used by kcpsr-forms.js to give the step indicator the
   position and state that Gravity Forms' own markup never announces. Must stay
   in the accessibility tree, so display:none and visibility:hidden are both
   wrong here. */
.gform_wrapper.kcpsr-form_wrapper .kcf-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}