/**
 * Integrity Forms front-end styles.
 *
 * Everything is scoped under .imf so it never leaks into the theme.
 *
 * WHY SO MANY !important RULES:
 * This form runs inside Elementor, whose kit stylesheet targets bare `button`
 * and global typography with high specificity and its own !important flags.
 * Without armor, the theme repaints our buttons (yellow pills), rounds our
 * corners, and applies text-transform: capitalize to body copy. Every property
 * marked below is one a host theme is known to hijack. Layout-only properties
 * that themes do not touch are left unflagged on purpose, so this stays
 * readable and overridable by a future child theme that genuinely needs to.
 *
 * Fonts still use `inherit`, so the form picks up the site's real typography.
 * Colors are variables: override --imf-accent via the shortcode's accent=""
 * attribute or in the theme.
 */

.imf {
	--imf-accent: #1b2a48;
	--imf-accent-ink: #1b2a48;
	--imf-accent-soft: #eef1f6;
	--imf-icon-bg: #eef1f6;
	--imf-num: #b3bcc6;
	--imf-ink: #17242e;
	--imf-muted: #5a6b76;
	--imf-line: #dde6ec;
	--imf-surface: #ffffff;
	--imf-err: #c0392b;
	--imf-radius: 16px;
	--imf-radius-ctl: 12px;

	max-width: 600px;
	margin: 0 auto;
	font-family: inherit;
	color: var(--imf-ink);
	box-sizing: border-box;
}
.imf *, .imf *::before, .imf *::after { box-sizing: border-box; }

/* ---------------------------------------------------------------------------
 * Armor. Neutralize theme bleed before we style anything of our own.
 * ------------------------------------------------------------------------ */

/* Themes commonly apply text-transform: capitalize / uppercase site-wide.
   Kill it everywhere, then opt back in below where we actually want it. */
.imf, .imf p, .imf span, .imf h2, .imf label, .imf button, .imf input {
	text-transform: none !important;
	letter-spacing: normal !important;
}

.imf button {
	-webkit-appearance: none !important;
	appearance: none !important;
	background-image: none !important;
	text-shadow: none !important;
	text-decoration: none !important;
	font-family: inherit !important;
	line-height: normal !important;
	min-height: 0 !important;
	min-width: 0 !important;
	width: auto !important;
	margin: 0;
	transition: none;
}

/* The JS focuses each step heading so screen readers announce the new
   question. That is programmatic focus, not keyboard navigation, so the
   theme's focus ring around the <h2> is noise. Real controls keep theirs. */
.imf .imf-q:focus,
.imf .imf-q:focus-visible,
.imf .imf-done h2:focus,
.imf .imf-done h2:focus-visible {
	outline: none !important;
	box-shadow: none !important;
	border: 0 !important;
}

/* ---------------------------------------------------------------------------
 * Shell
 * ------------------------------------------------------------------------ */

.imf-brandbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.imf-wordmark { font-weight: 700; font-size: 1.15rem; display: inline-flex; align-items: center; gap: 9px; }
.imf-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--imf-accent); box-shadow: 0 0 0 4px var(--imf-accent-soft); }

.imf-card {
	background: var(--imf-surface) !important;
	border: 1px solid var(--imf-line);
	border-radius: var(--imf-radius);
	box-shadow: 0 18px 50px -24px rgba(23,36,46,.28);
	overflow: hidden;
}

.imf-progress { padding: 22px 30px 0; }
.imf-progress-meta {
	display: flex; justify-content: space-between; align-items: baseline;
	font-size: .72rem; color: var(--imf-muted); margin-bottom: 10px;
	text-transform: uppercase !important; letter-spacing: .12em !important;
}
.imf-track { height: 6px; background: var(--imf-line); border-radius: 999px; overflow: hidden; }
.imf-fill { height: 100%; width: 25%; background: var(--imf-accent); border-radius: 999px; transition: width .45s cubic-bezier(.4,0,.2,1); }

.imf-steps { padding: 26px 30px 30px; margin: 0; }
.imf-step { display: none; }
.imf-step.active { display: block; animation: imf-slidein .38s cubic-bezier(.2,.7,.2,1); }
@keyframes imf-slidein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ---------------------------------------------------------------------------
 * Question typography
 * ------------------------------------------------------------------------ */

.imf .imf-eyebrow {
	font-size: .72rem; color: var(--imf-accent-ink); font-weight: 600; margin: 0 0 8px;
	text-transform: uppercase !important; letter-spacing: .14em !important;
}
.imf .imf-q {
	font-weight: 700; font-size: clamp(1.5rem, 4.2vw, 2.1rem);
	line-height: 1.14 !important; margin: 0 0 8px; color: var(--imf-ink) !important;
}
.imf .imf-sub {
	color: var(--imf-muted) !important; font-size: .95rem; line-height: 1.5 !important;
	margin: 0 0 22px; max-width: 46ch;
}

/* ---------------------------------------------------------------------------
 * Option cards
 * ------------------------------------------------------------------------ */

.imf-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.imf .imf-opt {
	position: relative;
	text-align: left !important;
	background: var(--imf-surface) !important;
	border: 1.5px solid var(--imf-line) !important;
	border-radius: var(--imf-radius-ctl) !important;
	padding: 18px !important;
	cursor: pointer;
	font: inherit;
	font-size: 1rem !important;
	color: var(--imf-ink) !important;
	box-shadow: none !important;
	display: flex; flex-direction: column;
	transition: border-color .16s, box-shadow .16s, transform .12s, background-color .16s !important;
}
.imf .imf-opt:hover {
	border-color: var(--imf-accent) !important;
	box-shadow: 0 10px 24px -16px rgba(23,36,46,.5) !important;
	transform: translateY(-2px);
}

.imf .imf-opt-t {
	font-weight: 700 !important; font-size: .84rem !important; margin-bottom: 5px;
	color: var(--imf-ink) !important;
	text-transform: uppercase !important; letter-spacing: .04em !important;
}
.imf .imf-opt-d {
	font-size: .8rem !important; color: var(--imf-muted) !important;
	line-height: 1.45 !important; margin-bottom: 14px; font-weight: 400 !important;
}
.imf .imf-opt-select {
	margin-top: auto;
	font-size: .68rem !important; font-weight: 600 !important;
	color: var(--imf-muted) !important;
	text-transform: uppercase !important; letter-spacing: .12em !important;
	display: flex; align-items: center; gap: 6px;
	transition: color .16s, gap .16s !important;
}
.imf .imf-opt:hover .imf-opt-select { color: var(--imf-accent) !important; gap: 10px; }

/* Selected: accent tint, accent edge, and a check badge so the state is
   unmistakable at a glance rather than a one-pixel border change. */
.imf .imf-opt.selected {
	border-color: var(--imf-accent) !important;
	background: var(--imf-accent-soft) !important;
	box-shadow: inset 0 0 0 1px var(--imf-accent) !important;
}
.imf .imf-opt.selected .imf-opt-select { color: var(--imf-accent) !important; }
.imf .imf-opt.selected::after {
	content: "";
	position: absolute; top: 12px; right: 12px;
	width: 18px; height: 18px; border-radius: 50%;
	background: var(--imf-accent) center / 11px 11px no-repeat;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
 * Pills
 *
 * Was flex-wrap, which produced a ragged 1 / 2 / 1 layout that read as broken.
 * A two-column grid gives equal widths and equal heights.
 * ------------------------------------------------------------------------ */

.imf-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.imf .imf-pill {
	background: var(--imf-surface) !important;
	border: 1.5px solid var(--imf-line) !important;
	border-radius: var(--imf-radius-ctl) !important;
	padding: 16px 18px !important;
	font: inherit;
	font-size: .95rem !important;
	font-weight: 500 !important;
	color: var(--imf-ink) !important;
	text-align: left !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: border-color .16s, background-color .16s, transform .12s !important;
}
.imf .imf-pill:hover {
	border-color: var(--imf-accent) !important;
	transform: translateY(-2px);
}
.imf .imf-pill.selected {
	border-color: var(--imf-accent) !important;
	background: var(--imf-accent-soft) !important;
	color: var(--imf-accent-ink) !important;
	font-weight: 600 !important;
	box-shadow: inset 0 0 0 1px var(--imf-accent) !important;
}

/* ---------------------------------------------------------------------------
 * Text fields (already solid; armored so they stay that way)
 * ------------------------------------------------------------------------ */

.imf-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.imf-field { margin: 0; }
.imf-field.full { grid-column: 1 / -1; }
.imf .imf-lab {
	display: block; font-size: .74rem; color: var(--imf-muted) !important;
	font-weight: 600 !important; margin-bottom: 6px;
	text-transform: uppercase !important; letter-spacing: .09em !important;
}
.imf .imf-inp {
	width: 100% !important;
	background: var(--imf-surface) !important;
	border: 1.5px solid var(--imf-line) !important;
	border-radius: var(--imf-radius-ctl) !important;
	padding: 13px 14px !important;
	font: inherit; font-size: 1rem !important;
	color: var(--imf-ink) !important;
	box-shadow: none !important;
	transition: border-color .16s, box-shadow .16s !important;
}
.imf .imf-inp:focus {
	outline: none !important;
	border-color: var(--imf-accent) !important;
	box-shadow: 0 0 0 3px var(--imf-accent-soft) !important;
}
/* Textarea shares .imf-inp so it inherits the border, radius and focus ring.
   Only the things an input does not need are set here. Vertical-only resize:
   horizontal dragging would break the card layout. */
.imf textarea.imf-inp {
	line-height: 1.55 !important;
	min-height: 132px;
	resize: vertical !important;
	display: block;
}
.imf .imf-err { color: var(--imf-err) !important; font-size: .8rem; margin-top: 6px; display: none; }
.imf .imf-field.invalid .imf-inp { border-color: var(--imf-err) !important; }
.imf .imf-field.invalid .imf-err { display: block; }

.imf-reassure {
	display: flex; gap: 9px; align-items: flex-start;
	background: var(--imf-accent-soft); border-radius: var(--imf-radius-ctl);
	padding: 12px 14px; font-size: .84rem; color: var(--imf-accent-ink); margin: 18px 0 0;
}
.imf-reassure svg { flex: none; margin-top: 1px; }

/* ---------------------------------------------------------------------------
 * Navigation buttons
 *
 * Back was inheriting the theme's yellow primary button, so it shouted louder
 * than Continue. Back is secondary: quiet, outlined, ink-colored.
 * ------------------------------------------------------------------------ */

.imf-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 26px; gap: 12px; }

.imf .imf-back {
	background: transparent !important;
	border: 1.5px solid var(--imf-line) !important;
	border-radius: var(--imf-radius-ctl) !important;
	color: var(--imf-muted) !important;
	font: inherit; font-size: .95rem !important; font-weight: 500 !important;
	padding: 12px 20px !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: border-color .16s, color .16s !important;
}
.imf .imf-back:hover {
	border-color: var(--imf-accent) !important;
	color: var(--imf-ink) !important;
	background: transparent !important;
}
.imf .imf-back[hidden] { visibility: hidden; display: inline-block; }

.imf .imf-cta {
	background: var(--imf-accent) !important;
	color: #fff !important;
	border: 1.5px solid var(--imf-accent) !important;
	border-radius: var(--imf-radius-ctl) !important;
	padding: 13px 28px !important;
	font: inherit; font-size: 1rem !important; font-weight: 600 !important;
	box-shadow: none !important;
	cursor: pointer;
	margin-left: auto;
	transition: filter .16s, transform .12s !important;
}
.imf .imf-cta:hover { filter: brightness(1.12); transform: translateY(-1px); }
.imf .imf-cta[disabled] { opacity: .6 !important; cursor: default; transform: none; }

.imf .imf-hint { text-align: center !important; font-size: .78rem; color: var(--imf-muted) !important; margin: 14px 0 0; }

.imf .imf-cta:focus-visible,
.imf .imf-opt:focus-visible,
.imf .imf-pill:focus-visible,
.imf .imf-back:focus-visible,
.imf .imf-inp:focus-visible {
	outline: 3px solid var(--imf-accent) !important;
	outline-offset: 2px !important;
}

.imf-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

/* reCAPTCHA disclosure. Sits outside the card so it reads as fine print. */
.imf .imf-legal {
	text-align: center !important;
	font-size: .72rem !important;
	line-height: 1.5 !important;
	color: var(--imf-muted) !important;
	margin: 12px 0 0 !important;
}
.imf .imf-legal a { color: var(--imf-muted) !important; text-decoration: underline !important; }
.imf .imf-legal a:hover { color: var(--imf-accent) !important; }

/* ---------------------------------------------------------------------------
 * Confirmation
 * ------------------------------------------------------------------------ */

.imf-done { text-align: center; padding: 8px 0 6px; }
.imf-check { width: 62px; height: 62px; border-radius: 50%; background: var(--imf-accent-soft); color: var(--imf-accent); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.imf .imf-done h2 { font-size: 1.8rem !important; margin: 0 0 8px; color: var(--imf-ink) !important; }
.imf .imf-done-msg { color: var(--imf-muted) !important; margin: 0 auto 22px; max-width: 40ch; }
.imf-next { text-align: left; border: 1px solid var(--imf-line); border-radius: 14px; padding: 6px 18px; max-width: 380px; margin: 0 auto; list-style: none; }
.imf-next li { padding: 14px 0; border-bottom: 1px solid var(--imf-line); display: flex; gap: 12px; align-items: center; font-size: .92rem; }
.imf-next li:last-child { border-bottom: none; }
.imf-num { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--imf-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; }

/* ---------------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------------ */

@media (max-width: 560px) {
	.imf-pills { grid-template-columns: 1fr; }
}

@media (max-width: 460px) {
	.imf-options { grid-template-columns: 1fr; }
	.imf-fields { grid-template-columns: 1fr; }
	.imf-field.half { grid-column: 1 / -1; }
	.imf-progress, .imf-steps { padding-left: 20px; padding-right: 20px; }
	.imf .imf-back, .imf .imf-cta { padding-left: 18px !important; padding-right: 18px !important; }
}

@media (prefers-reduced-motion: reduce) {
	.imf-step.active { animation: none; }
	.imf-fill { transition: none; }
	.imf .imf-cta:hover, .imf .imf-opt:hover, .imf .imf-pill:hover { transform: none; }
}