/**
 * FactoryLab forms.
 *
 * Inherits the theme's design tokens when the theme is active, and falls back to
 * equivalent values so the forms still look right under any other theme.
 */

.ufl-form,
.ufl-reviews {
	--ufl-paper: var(--paper, #FFFFFF);
	--ufl-card: var(--card, #FFFFFF);
	--ufl-ink: var(--ink, #0E0E0F);
	--ufl-ink-soft: var(--ink-soft, #3A3A3E);
	--ufl-graphite: var(--graphite, #6A6A6D);
	--ufl-hair: var(--hair, #E6E6E3);
	--ufl-hair-strong: var(--hair-strong, #C8C8C4);
	--ufl-anno: var(--anno, #0E0E0F);
	--ufl-brand: var(--brand, #00A3DB);
	--ufl-err: var(--err, #C62828);
	--ufl-brand-ink: var(--brand-ink, #006B92);
	--ufl-mono: var(--mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
	color: var(--ufl-ink);
}

/* ---------------------------------------------------------------- steps */
.ufl-step {
	border-top: 1px solid var(--ufl-hair);
	padding-top: 28px;
	margin-bottom: 8px;
}
.ufl-step-n {
	font-family: var(--ufl-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ufl-anno);
	margin: 0 0 10px;
}
.ufl-step-title {
	font-size: clamp(1.4rem, 2.6vw, 1.9rem);
	line-height: 1.15;
	letter-spacing: -.028em;
	margin: 0 0 10px;
	text-wrap: balance;
}
.ufl-step-title:focus { outline: none; }
.ufl-step-intro {
	color: var(--ufl-graphite);
	margin: 0 0 28px;
	max-width: 58ch;
}
.ufl-rule {
	border: 0;
	border-top: 1px solid var(--ufl-hair);
	margin: 28px 0;
}

/* --------------------------------------------------------------- fields */
.ufl-field { display: grid; gap: 8px; margin-bottom: 22px; }
.ufl-row { display: grid; gap: 0 22px; }
@media (min-width: 620px) { .ufl-row--2 { grid-template-columns: 1fr 1fr; } }

.ufl-field label,
.ufl-choices legend,
.ufl-stars legend {
	font-family: var(--ufl-mono);
	font-size: 10.5px;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--ufl-graphite);
	padding: 0;
}
.ufl-opt { text-transform: none; letter-spacing: .02em; }
.ufl-hint {
	font-size: 13.5px;
	color: var(--ufl-graphite);
	margin: 0;
	max-width: 56ch;
	line-height: 1.5;
}

.ufl-field input[type="text"],
.ufl-field input[type="email"],
.ufl-field input[type="tel"],
.ufl-field input[type="url"],
.ufl-field select,
.ufl-field textarea {
	font: inherit;
	font-size: 16px;
	color: var(--ufl-ink);
	background: var(--ufl-card);
	border: 1px solid var(--ufl-hair-strong);
	border-radius: 2px;
	padding: 14px 15px;
	width: 100%;
	transition: border-color .2s, box-shadow .2s;
}
.ufl-field textarea { resize: vertical; min-height: 130px; }
.ufl-field input:focus,
.ufl-field select:focus,
.ufl-field textarea:focus {
	outline: none;
	border-color: var(--ufl-brand-ink);
	box-shadow: 0 0 0 3px rgba(0, 107, 146, .12);
}
.ufl-field input[type="file"] {
	font-size: 14px;
	padding: 12px;
	border: 1px dashed var(--ufl-hair-strong);
	border-radius: 2px;
	background: var(--ufl-card);
	width: 100%;
}

.ufl-err { font-size: 13px; line-height: 1.45; color: var(--ufl-err); display: none; margin-top: 6px; }
.is-invalid .ufl-err { display: block; }
.is-invalid .ufl-err::before { content: "! "; font-weight: 700; }
.is-invalid input,
.is-invalid select,
.is-invalid textarea {
	border-color: var(--ufl-err);
	background: rgba(198, 40, 40, .06);
}
.is-invalid input:focus,
.is-invalid select:focus,
.is-invalid textarea:focus {
	border-color: var(--ufl-err);
	box-shadow: 0 0 0 3px rgba(198, 40, 40, .14);
}

/* -------------------------------------------------------------- choices */
.ufl-choices { border: 0; padding: 0; margin: 0 0 26px; }
.ufl-choice-grid {
	display: grid;
	gap: 10px;
	margin-top: 12px;
	grid-template-columns: 1fr;
}
@media (min-width: 640px) {
	.ufl-choice-grid { grid-template-columns: repeat(2, 1fr); }
	.ufl-choice-grid.is-compact { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1000px) {
	.ufl-choice-grid.is-compact { grid-template-columns: repeat(4, 1fr); }
}

.ufl-choice {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 15px 16px;
	border: 1px solid var(--ufl-hair-strong);
	border-radius: 2px;
	background: var(--ufl-card);
	cursor: pointer;
	transition: border-color .18s, background .18s;
}
.ufl-choice:hover { border-color: var(--ufl-ink); }
.ufl-choice input { margin: 2px 0 0; flex: none; accent-color: var(--ufl-brand-ink); }
.ufl-choice:has(input:checked) {
	border-color: var(--ufl-anno);
	background: rgba(14, 14, 15, .035);
}
.ufl-choice:has(input:focus-visible) {
	outline: 2px solid var(--ufl-brand-ink);
	outline-offset: 2px;
}
.ufl-choice-body { display: grid; gap: 4px; }
.ufl-choice-label { font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.ufl-choice-note { font-size: 13px; color: var(--ufl-graphite); line-height: 1.45; }

/* ---------------------------------------------------------------- stars */
.ufl-stars {
	border: 0;
	padding: 0;
	margin: 0 0 18px;
	display: grid;
	gap: 8px;
}
@media (min-width: 620px) {
	.ufl-stars { grid-template-columns: 1fr auto; align-items: center; }
	.ufl-stars legend { float: left; }
}
.ufl-star-row { display: flex; gap: 2px; }
.ufl-star-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ufl-star-row label {
	font-size: 26px;
	line-height: 1;
	color: var(--ufl-hair-strong);
	cursor: pointer;
	transition: color .15s;
	/* The radio itself is visually hidden, so the label is the only touch
	   target. Keep it at the 44px minimum. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}
.ufl-star-row:hover label { color: var(--ufl-anno); }
.ufl-star-row label:hover ~ label { color: var(--ufl-hair-strong); }
.ufl-star-row input:checked ~ label { color: var(--ufl-hair-strong); }
.ufl-star-row label:has(~ input:checked),
.ufl-star-row input:checked + label { color: var(--ufl-anno); }
.ufl-star-row input:focus-visible + label {
	outline: 2px solid var(--ufl-anno);
	outline-offset: 2px;
}

/* ------------------------------------------------------------ checkbox */
.ufl-check label {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	font-family: inherit;
	font-size: 14.5px;
	letter-spacing: normal;
	text-transform: none;
	color: var(--ufl-ink-soft);
	line-height: 1.5;
	cursor: pointer;
}
.ufl-check input { margin-top: 3px; accent-color: var(--ufl-anno); flex: none; }

/* ----------------------------------------------------------------- nav */
.ufl-nav {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--ufl-hair);
}
.ufl-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 26px;
	border-radius: 2px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -.01em;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.ufl-btn:hover { transform: translateY(-1px); }
.ufl-btn--primary { background: var(--ufl-anno); color: #fff; }
.ufl-btn--primary:hover { background: #2E2E31; }
.ufl-btn--ghost { border-color: var(--ufl-hair-strong); color: var(--ufl-ink); background: transparent; }
.ufl-btn--ghost:hover { border-color: var(--ufl-ink); background: var(--ufl-ink); color: #fff; }
.ufl-btn:focus-visible { outline: 2px solid var(--ufl-anno); outline-offset: 3px; }

/* A class-level display beats the UA's [hidden] rule, so restate it. Without
   this the Back and Send buttons stay visible on every step. */
.ufl-btn[hidden],
.ufl-step[hidden],
.ufl-form [hidden] { display: none !important; }

.ufl-progress {
	font-family: var(--ufl-mono);
	font-size: 10.5px;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--ufl-graphite);
	margin: 16px 0 0;
}

/* -------------------------------------------------------------- states */
.ufl-alert {
	border-left: 3px solid var(--ufl-err);
	background: rgba(198, 40, 40, .08);
	color: var(--ufl-err);
	padding: 14px 18px;
	margin: 0 0 24px;
	font-size: 14.5px;
}
.ufl-success {
	border: 1px solid var(--ufl-hair-strong);
	background: var(--ufl-card);
	padding: 40px;
	border-radius: 2px;
}
.ufl-success h2 {
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	letter-spacing: -.03em;
	margin: 0 0 14px;
}
.ufl-success p { margin: 0 0 12px; color: var(--ufl-ink-soft); max-width: 60ch; }
.ufl-success p:last-child { margin-bottom: 0; }
.ufl-reference {
	font-family: var(--ufl-mono);
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ufl-graphite);
}
.ufl-reference strong { color: var(--ufl-anno); margin-left: 8px; }

/* honeypot: off-screen rather than display:none, which some bots detect */
.ufl-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ------------------------------------------------------------- reviews */
.ufl-aggregate {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 32px;
	flex-wrap: wrap;
}
.ufl-aggregate-score {
	font-size: clamp(2.4rem, 5vw, 3.4rem);
	font-weight: 800;
	letter-spacing: -.045em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.ufl-aggregate-of { font-size: 1.1rem; color: var(--ufl-graphite); }
.ufl-aggregate-count {
	font-family: var(--ufl-mono);
	font-size: 10.5px;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--ufl-graphite);
	margin-left: 8px;
}

.ufl-review-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1px;
	background: var(--ufl-hair);
	border: 1px solid var(--ufl-hair);
}
@media (min-width: 720px) { .ufl-review-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .ufl-review-grid { grid-template-columns: repeat(3, 1fr); } }

.ufl-review {
	background: var(--ufl-paper);
	padding: 28px 26px;
	display: grid;
	align-content: start;
	gap: 14px;
}
.ufl-review-stars { color: var(--ufl-anno); font-size: 15px; letter-spacing: .08em; margin: 0; }
.ufl-review-body { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ufl-ink); }
.ufl-review-body p { margin: 0 0 10px; }
.ufl-review-body p:last-child { margin: 0; }
.ufl-review-by {
	margin: 0;
	padding-top: 14px;
	border-top: 1px solid var(--ufl-hair);
	display: grid;
	gap: 3px;
}
.ufl-review-name { font-size: 14.5px; font-weight: 650; }
.ufl-review-detail {
	font-family: var(--ufl-mono);
	font-size: 10.5px;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--ufl-graphite);
}

@media (prefers-reduced-motion: reduce) {
	.ufl-btn, .ufl-choice, .ufl-field input, .ufl-field select, .ufl-field textarea {
		transition: none;
	}
}

/* Visually hidden but available to screen readers. Defined here so the plugin
   does not depend on the active theme providing it. */
.screen-reader-text{
	border:0;
	clip-path:inset(50%);
	height:1px;
	margin:-1px;
	overflow:hidden;
	padding:0;
	position:absolute;
	width:1px;
	white-space:nowrap;
}
.screen-reader-text:focus{
	clip-path:none;
	height:auto;
	width:auto;
	margin:0;
	padding:14px 20px;
	position:static;
	white-space:normal;
}

/* ---- our own brands, shown after a form is sent ------------------------ */
.ufl-brands {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--ufl-hair);
}
.ufl-brands-lede {
	margin: 0 0 14px;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--ufl-ink-soft);
	max-width: 56ch;
}
.ufl-brands-links {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 12px;
}
.ufl-brands-links a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 18px;
	border: 1px solid var(--ufl-hair-strong);
	border-radius: 999px;
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--ufl-ink);
	text-decoration: none;
	transition: border-color .2s, color .2s;
}
.ufl-brands-links a:hover {
	border-color: var(--ufl-brand-ink);
	color: var(--ufl-brand-ink);
}