/* =========================================================================
   Application form — component layer
   Base field, form and aside styles come from the shared forms stylesheet
   (lbp-forms-style). This layer gives every application one quiet finish:
   the form on a white card, outlined rounded fields with labels that float
   inside them, plain black section titles split by hairlines, segmented
   toggles for short choices, brand-purple checkboxes and focus, the
   progress steps in the aside, signature ink and the success message.
   (c) HAUS XXIV, LLC · Licensed to Long Beach Pride
   ========================================================================= */

.lbp-application {
	--app-purple: #6D28D9;
	--app-purple-2: #5B21B6;
	--app-purple-soft: #F3EEFF;
	--app-ink: #4C1D95;
	--app-label: #6E6E73;      /* secondary text */
	--app-line: #D2D2D7;       /* field outline */
	--app-line-hover: #86868B;
	--app-hair: #E8E8ED;       /* dividers */
	--app-fill: #F5F5F7;       /* quiet surfaces */
	--app-r: 12px;             /* field radius */
	--app-ring: 0 0 0 4px rgba(109, 40, 217, .14);
	--app-ease: cubic-bezier(.2, .8, .2, 1);
}

/* Sticky left column: generous room under the header and breadcrumbs */
@media (min-width: 1201px) {
	.lbp-application .form-shell { column-gap: clamp(48px, 6vw, 112px); }
	.lbp-application .form-aside {
		top: calc(var(--lbp-sticky-top, var(--nav-h, 84px)) + var(--crumbs-h, 46px) + 40px);
		padding-top: 32px;
		padding-bottom: 32px;
	}
}

/* Top of the form sits close to the hero */
.lbp-application > section.sec,
.lbp-application > section.sec-s { padding-top: clamp(40px, 4vw, 56px); }

/* The form card ---------------------------------------------------------------- */

.lbp-application .form-shell > .fm,
.lbp-application .form-shell > .fm-col > .fm {
	padding: clamp(28px, 4vw, 56px);
	border-radius: 28px;
	background: #fff;
}

/* Rhythm: sections ~90px apart with a hairline between; fields tight within. */

.lbp-application .fm { gap: 44px; }
.lbp-application .fm > fieldset:not(:first-of-type) { padding-top: 44px; border-top: 1px solid var(--app-hair); }
.lbp-application .fm .fs-head { display: block; margin: 0 0 24px; padding: 0; border: 0; }
.lbp-application .fm .fs-head .no { display: none; } /* the aside already shows each section's icon */
.lbp-application .fm legend {
	float: none;
	margin: 0;
	padding: 0;
	font-family: var(--sans, "Inter", system-ui, sans-serif);
	font-size: clamp(24px, 2vw, 28px);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -.02em;
	color: var(--ink);
}
.lbp-application .fm .fs-head p { margin: 6px 0 0; max-width: 60ch; font-size: 15px; line-height: 1.5; color: var(--app-label); }
.lbp-application .req-key { margin: 0; padding: 0; border-radius: 0; background: none; font-size: 13px; line-height: 1.5; color: var(--app-label); }
.lbp-application .fm > .req-key { margin-bottom: -16px; }
.lbp-application .fm-actions { margin-top: 4px; padding-top: 32px; border-top: 1px solid var(--app-hair); gap: 16px 20px; }

/* Layout: two equal columns; long answers, checklists, uploads and agreements
   span both. */

.lbp-application .fg {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	align-items: start;
}

.lbp-application :is(.fg, .fg > .fcond) > .f { grid-column: span 1; min-width: 0; }
.lbp-application :is(.fg, .fg > .fcond) > .f-full { grid-column: 1 / -1; }
.lbp-application :is(.fg, .fg > .fcond) > .f:not(.f-half):has(> .opts:not(.opts-seg)) { margin-top: 12px; }

.lbp-application :is(.fg, .fg > .fcond) > .f { display: flex; flex-direction: column; gap: 6px; }
.lbp-application :is(.fg, .fg > .fcond) > .f > .count { align-self: flex-end; }
.lbp-application :is(.fg, .fg > .fcond) > .f > .err:not(:empty) ~ .sig-note { display: none; }

/* Floating-label fields stack the label and the control in one cell. */
.lbp-application :is(.fg, .fg > .fcond) > .f.ff { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
.lbp-application :is(.fg, .fg > .fcond) > .f.ff > * { grid-column: 1; }
.lbp-application :is(.fg, .fg > .fcond) > .f.ff > :is(input, select, textarea, .l) { grid-row: 1; }

/* Question labels above groups (checklists, toggles, uploads) */
.lbp-application .f > span.l,
.lbp-application .f > label.l:not(.ff > .l) { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.lbp-application .f .help { font-size: 13px; line-height: 1.45; color: var(--app-label); }
.lbp-application .f .err { padding-left: 2px; font-size: 13px; }

/* Fields: outlined, rounded, purple on focus ------------------------------------- */

.lbp-application .f input[type=text],
.lbp-application .f input[type=email],
.lbp-application .f input[type=tel],
.lbp-application .f input[type=url],
.lbp-application .f input[type=number],
.lbp-application .f input[type=date],
.lbp-application .f input[type=time],
.lbp-application .f select,
.lbp-application .f textarea {
	width: 100%;
	min-height: 56px;
	padding: 25px 16px 7px;
	border: 1px solid var(--app-line);
	border-radius: var(--app-r);
	background-color: #fff;
	box-shadow: none;
	font-size: 17px; /* 16px+ keeps iOS from zooming */
	line-height: 1.4;
	color: var(--ink);
	transition: border-color .2s, box-shadow .2s;
}

.lbp-application .f textarea { min-height: 128px; padding-top: 28px; resize: vertical; }

.lbp-application .f :is(input, select, textarea):hover { border-color: var(--app-line-hover); }

.lbp-application .f :is(input, select, textarea):focus {
	border-color: var(--app-purple);
	box-shadow: var(--app-ring);
}

.lbp-application .fm .f :is(input, select, textarea):focus-visible { outline: none; }
.lbp-application .f [aria-invalid="true"] { border-color: var(--err); }
.lbp-application .f [aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(180, 35, 24, .12); }

/* One height for every single-line field, so rows line up exactly */
.lbp-application .f :is(input[type=text], input[type=email], input[type=tel], input[type=url], input[type=number], input[type=date], input[type=time]):not(.sig),
.lbp-application .f select,
.lbp-application .lbp-select-btn,
.lbp-application .lbp-dd-field .lbp-dd-btn { box-sizing: border-box; height: 58px; min-height: 58px; }

/* Dropdowns: same field, a quiet chevron */
.lbp-application .f select {
	padding-right: 44px;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386868B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px 18px;
}

.lbp-application .f select option { color: var(--ink); }

/* Designed dropdowns (view.js): a field-styled button and a rounded panel */

.lbp-application .lbp-select-native {
	position: absolute !important;
	width: 1px !important;
	min-height: 0 !important;
	height: 1px !important;
	padding: 0 !important;
	opacity: 0;
	pointer-events: none;
}


.lbp-select { position: relative; grid-row: 1; grid-column: 1; }

.lbp-select-btn {
	display: block;
	width: 100%;
	min-height: 56px;
	padding: 25px 44px 7px 16px;
	border: 1px solid var(--app-line, #D2D2D7);
	border-radius: var(--app-r, 12px);
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386868B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px 18px;
	font: inherit;
	font-size: 17px;
	line-height: 1.4;
	text-align: left;
	color: var(--ink);
	cursor: pointer;
	transition: border-color .2s, box-shadow .2s;
}

.lbp-select-btn:hover { border-color: var(--app-line-hover, #86868B); }
.lbp-select-btn:focus,
.lbp-select.is-open .lbp-select-btn { outline: none; border-color: var(--app-purple); box-shadow: var(--app-ring); }
.lbp-select-btn:focus-visible { outline: none; }
.lbp-select-btn[aria-invalid] { border-color: var(--err); }
.lbp-select.is-open .lbp-select-btn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236D28D9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E"); }

.lbp-select-list {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 30;
	max-height: 300px;
	margin: 0;
	padding: 6px;
	overflow-y: auto;
	list-style: none;
	border: 1px solid rgba(0, 0, 0, .06);
	border-radius: 14px !important;
	background: #fff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .06), 0 20px 48px rgba(0, 0, 0, .12);
	animation: app-drop .16s var(--app-ease);
}

.lbp-select-list:focus { outline: none; }
.lbp-select-list[hidden] { display: none; }

.lbp-select-list li {
	position: relative;
	margin: 0;
	padding: 10px 40px 10px 12px;
	border-radius: 8px;
	font-size: 16px;
	line-height: 1.35;
	color: var(--ink);
	cursor: pointer;
}

.lbp-select-list li.is-active { background: var(--app-fill, #F5F5F7); }
.lbp-select-list li[aria-selected="true"] { font-weight: 600; }
.lbp-select-list li[aria-selected="true"]::after {
	content: "";
	position: absolute;
	right: 12px;
	top: 50%;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	background: var(--app-purple);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

@keyframes app-drop {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: none; }
}

/* Site dropdowns (lbp-select) inside a form: <div class="f lbp-dd-field">.
   Drawn as a field with its label risen, level with the fields beside it. */
.lbp-application .lbp-dd-field .lbp-sel { display: block; }
.lbp-application .lbp-dd-field .lbp-dd-btn {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 0 8px;
	width: 100%;
	height: auto;
	min-height: 56px;
	padding: 8px 16px 7px;
	border: 1px solid var(--app-line);
	border-radius: var(--app-r);
	background: #fff;
	box-shadow: none;
	text-align: left;
}
.lbp-application .lbp-dd-field .lbp-dd-btn:hover { border-color: var(--app-line-hover); box-shadow: none; }
.lbp-application .lbp-dd-field .lbp-dd-btn:focus-visible,
.lbp-application .lbp-dd-field .lbp-dd.is-open .lbp-dd-btn { outline: none; border-color: var(--app-purple); box-shadow: var(--app-ring); }
.lbp-application .lbp-dd-field .lbp-dd-l { grid-column: 1 / -1; margin: 0 0 1px; font-size: 12.5px; font-weight: 500; line-height: 16px; letter-spacing: 0; text-transform: none; color: var(--app-label); }
.lbp-application .lbp-dd-field .lbp-dd-l .req { margin-left: 2px; color: var(--err); }
.lbp-application .lbp-dd-field .lbp-dd-l .optl { margin-left: 4px; font-weight: 400; }
.lbp-application .lbp-dd-field .lbp-dd.is-open .lbp-dd-l { color: var(--app-purple); }
.lbp-application .lbp-dd-field .lbp-dd-i { grid-column: 1; }
.lbp-application .lbp-dd-field .lbp-dd-v { grid-column: 2; font-size: 17px; font-weight: 400; line-height: 22px; }
.lbp-application .lbp-dd-field .lbp-dd-i[hidden] + .lbp-dd-v { grid-column: 1 / 3; }
.lbp-application .lbp-dd-field .lbp-dd-chev { grid-column: 3; border-color: var(--app-line-hover); }
.lbp-application .lbp-dd-field .lbp-dd-list { left: 0; right: 0; min-width: 0; }
.lbp-application .lbp-dd-field:has(select[aria-invalid="true"]) .lbp-dd-btn { border-color: var(--err); }

/* Floating labels: the label is the prompt inside the field and rises to the
   top-left on focus or once there is an answer (view.js sets .is-filled). */

.lbp-application .ff > .l {
	align-self: start;
	z-index: 1;
	margin: 17px 16px 0 17px;
	overflow: hidden;
	font-size: 17px;
	font-weight: 400;
	line-height: 22px;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--app-label);
	pointer-events: none;
	transform-origin: 0 0;
	transition: transform .2s var(--app-ease), color .2s, margin .2s var(--app-ease);
}

.lbp-application .ff:has(> input.ic) > .l { margin-left: 47px; }
.lbp-application .ff:has(> textarea) > .l { white-space: normal; }

.lbp-application .ff.is-filled > .l,
.lbp-application .ff:has(:focus) > .l,
.lbp-application .ff:has(:-webkit-autofill) > .l {
	margin-top: 7px;
	color: var(--app-label);
	transform: scale(.75);
}

.lbp-application .ff:has(:focus) > .l { color: var(--app-purple); }
.lbp-application .ff:has([aria-invalid="true"]) > .l { color: var(--err); }
.lbp-application .ff > .l .optl { margin-left: 5px; font-weight: 400; color: #A1A1A6; }
.lbp-application .ff > .l .req { margin-left: 2px; }

/* Until the label rises, the field's own placeholder stays out of the way */
.lbp-application .ff:not(.is-filled):not(:has(:focus)) ::placeholder { color: transparent; }
.lbp-application .ff:not(.is-filled):not(:has(:focus)) select { color: transparent; }
.lbp-application .ff ::placeholder { color: #A1A1A6; }

/* Icons inside fields (Lucide): drawn beside the input, not as its background,
   so browser autofill can't remove them. Grey at rest, purple in focus.
   <input class="ic ic-{mail|phone|link|user|building|pin|money|briefcase}"> */
.lbp-application .f input.ic { padding-left: 46px; background-image: none; }

.lbp-application .ff:has(> input.ic)::before {
	content: "";
	grid-row: 1;
	grid-column: 1;
	align-self: start;
	z-index: 1;
	width: 18px;
	height: 18px;
	margin: 19px 0 0 17px;
	background: #A1A1A6;
	-webkit-mask: var(--app-ic) center / contain no-repeat;
	mask: var(--app-ic) center / contain no-repeat;
	pointer-events: none;
	transition: background-color .2s;
}

.lbp-application .ff:has(> input.ic:focus)::before { background: var(--app-purple); }
.lbp-application .ff:has(> input.ic-mail) { --app-ic: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d=%22m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7%22/><rect x=%222%22 y=%224%22 width=%2220%22 height=%2216%22 rx=%222%22/></svg>"); }
.lbp-application .ff:has(> input.ic-phone) { --app-ic: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d=%22M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384%22/></svg>"); }
.lbp-application .ff:has(> input.ic-link) { --app-ic: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><circle cx=%2212%22 cy=%2212%22 r=%2210%22/><path d=%22M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20%22/><path d=%22M2 12h20%22/></svg>"); }
.lbp-application .ff:has(> input.ic-user) { --app-ic: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d=%22M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2%22/><circle cx=%2212%22 cy=%227%22 r=%224%22/></svg>"); }
.lbp-application .ff:has(> input.ic-building) { --app-ic: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d=%22M10 12h4%22/><path d=%22M10 8h4%22/><path d=%22M14 21v-3a2 2 0 0 0-4 0v3%22/><path d=%22M6 10H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2%22/><path d=%22M6 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16%22/></svg>"); }
.lbp-application .ff:has(> input.ic-pin) { --app-ic: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d=%22M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0%22/><circle cx=%2212%22 cy=%2210%22 r=%223%22/></svg>"); }
.lbp-application .ff:has(> input.ic-money) { --app-ic: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><circle cx=%2212%22 cy=%2212%22 r=%2210%22/><path d=%22M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8%22/><path d=%22M12 18V6%22/></svg>"); }
.lbp-application .ff:has(> input.ic-briefcase) { --app-ic: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d=%22M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16%22/><rect width=%2220%22 height=%2214%22 x=%222%22 y=%226%22 rx=%222%22/></svg>"); }

/* Browser autofill: no blue fill, keep the field white and the ink colour */
.lbp-application .f input:-webkit-autofill,
.lbp-application .f input:-webkit-autofill:hover,
.lbp-application .f input:-webkit-autofill:focus,
.lbp-application .f textarea:-webkit-autofill,
.lbp-application .f select:-webkit-autofill {
	-webkit-text-fill-color: var(--ink);
	caret-color: var(--ink);
	-webkit-box-shadow: 0 0 0 1000px #fff inset;
	transition: background-color 600000s 0s, color 600000s 0s;
}

.lbp-application .f input:autofill { background-color: #fff; }

/* Short choices (Yes / No, Have it / Will apply, booth sizes): a segmented
   control, label above, the pair sitting level with the field beside it. */

.lbp-application .f:has(> .opts-seg) { gap: 4px; }
.lbp-application .f:has(> .opts-seg) > span.l { margin: 0; font-size: 13px; font-weight: 500; line-height: 16px; color: var(--app-label); }

.lbp-application .opts.opts-seg {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	grid-template-columns: none;
	gap: 2px;
	min-height: 0;
	padding: 2px;
	border-radius: 10px;
	background: #EEEEF0;
}

.lbp-application .opts-seg .opt,
.lbp-application .opts-seg .opt:hover,
.lbp-application .opts-seg .opt:has(input:checked) {
	justify-content: center;
	align-items: center;
	min-height: 32px;
	padding: 0 10px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
	color: var(--ink);
	transition: background-color .2s, box-shadow .2s;
}
.lbp-application .opts-seg .opt .bx { display: none; }
.lbp-application .opts-seg:has(> .opt:nth-child(3)) .opt { padding: 0 6px; font-size: 13.5px; }
.lbp-application .opts-seg .opt:hover { background: rgba(255, 255, 255, .55); }
.lbp-application .opts-seg .opt:has(input:checked) {
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .04);
	font-weight: 600;
}
.lbp-application .opts-seg .opt:has(input:focus-visible) { outline: 2px solid var(--app-purple); outline-offset: 1px; }
.lbp-application .opts-seg[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--err); }

/* Checkboxes and radios: frameless, brand purple ----------------------------- */

.lbp-application .opts { gap: 0 28px; }

/* Email typo suggestion under the field: "Did you mean name@gmail.com?" */
.lbp-application .email-fix { margin: 2px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.lbp-application .email-fix button {
	min-height: 24px;
	padding: 0 2px;
	border: 0;
	background: none;
	font: inherit;
	font-weight: 600;
	color: var(--app-purple);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}
.lbp-application .email-fix button:focus-visible { outline: 2px solid var(--app-purple); outline-offset: 2px; }


/* Conditional groups (e.g. booth vs truck questions) sit in the form grid as if unwrapped. */
.lbp-application .fg > .fcond { display: contents; }
.lbp-application .fg > .fcond[hidden] { display: none; }

/* Pay Vendor Fees window */
.lbp-pay {
	width: min(520px, calc(100vw - 32px));
	padding: 40px 36px 32px;
	border: 0;
	border-top: 3px solid var(--app-purple);
	border-radius: 4px;
	background: #fff;
	color: var(--ink);
	box-shadow: 0 30px 80px -20px rgba(30, 10, 60, .45);
	text-align: center;
}
.lbp-pay::backdrop { background: rgba(20, 8, 40, .55); backdrop-filter: blur(3px); }
.lbp-pay[open] { animation: lbp-pay-in .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes lbp-pay-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.lbp-pay-x {
	position: absolute;
	top: 12px;
	right: 12px;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 0;
	background: none;
	color: var(--ink-2);
	cursor: pointer;
}
.lbp-pay-x svg { width: 20px; height: 20px; }
.lbp-pay-x:hover { color: var(--app-purple); }
.lbp-pay-x:focus-visible { outline: 2px solid var(--app-purple); outline-offset: 2px; }
.lbp-pay-ic { display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: 14px; border-radius: 50%; background: var(--app-purple-soft); color: var(--app-purple); }
.lbp-pay-ic svg { width: 26px; height: 26px; }
.lbp-pay-h { margin: 0 0 10px; font-size: clamp(24px, 3vw, 30px); line-height: 1.15; letter-spacing: -.01em; }
.lbp-pay-d { margin: 0 auto 22px; max-width: 40ch; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.lbp-pay-soon { margin: 0 0 18px; padding: 14px 16px; border-left: 3px solid var(--app-purple); background: var(--app-purple-soft); font-size: 14px; line-height: 1.5; text-align: left; }
.lbp-pay-go { margin-bottom: 14px; }
.lbp-pay-note { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) { .lbp-pay[open] { animation: none; } }

/* Success: application record and signed agreement downloads */
.lbp-application .fm-docs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; margin: 4px 0 22px; }
.lbp-application .fm-docs-h { flex-basis: 100%; margin: 0 0 2px; font-size: 13px; color: var(--ink-2); }
.lbp-application .fm-docs-h b { color: var(--ink); letter-spacing: .02em; }
.lbp-application .fm-doc {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 8px 16px;
	border: 1.5px solid var(--app-purple);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	color: var(--app-purple-2);
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}
.lbp-application .fm-doc svg { width: 18px; height: 18px; flex: none; }
.lbp-application .fm-doc:hover { background: var(--app-purple); color: #fff; }
.lbp-application .fm-doc:focus-visible { outline: 2px solid var(--app-purple); outline-offset: 2px; }


/* Error summary links: 24px targets (WCAG 2.5.8). */
.lbp-application .fm-summary a { display: inline-block; min-height: 24px; padding: 3px 0; }
.lbp-application .fm-summary { border-radius: var(--app-r); }

/* Checkbox groups: "Select all that apply · At least one required · 2 selected" */
.lbp-application .opts-hint {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 0;
	margin: -2px 0 2px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--app-label);
}
.lbp-application .opts-hint-r { display: inline-flex; align-items: center; transition: color .2s ease; }
.lbp-application .opts-hint-r::before { content: "·"; margin: 0 7px; }
.lbp-application .opts-hint-c { margin-left: auto; padding-left: 12px; font-weight: 600; color: var(--app-purple); font-variant-numeric: tabular-nums; }
.lbp-application .f:has(.opts[aria-invalid="true"]) .opts-hint-r { color: var(--err); }

/* The whole label is the target, at least 44px tall, and the hidden native
   control spans it (so it never measures 13px). */
.lbp-application .opt,
.lbp-application .opt:hover,
.lbp-application .opt:has(input:checked) {
	align-items: flex-start;
	gap: 12px;
	min-height: 44px;
	padding: 11px 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-size: 15.5px;
	line-height: 1.4;
	color: var(--ink);
}
.lbp-application .opt > span:last-child { line-height: inherit; }
.lbp-application .opt a { display: inline; padding-block: 0; line-height: inherit; }
.lbp-application .opt input { inset: 0; width: 100%; height: 100%; margin: 0; }

.lbp-application .opt .bx {
	position: relative;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	border: 1.5px solid #AEAEB2;
	border-radius: 6px;
	background: #fff;
	transition: background-color .18s, border-color .18s;
}

.lbp-application .opt:hover .bx { border-color: var(--app-line-hover); }

.lbp-application .opt .bx svg { width: 13px; height: 13px; opacity: 1; color: #fff; }
.lbp-application .opt .bx svg path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .25s .04s var(--app-ease); }

.lbp-application .opt input:checked + .bx { border-color: var(--app-purple); background: var(--app-purple); }
.lbp-application .opt input:checked + .bx svg path { stroke-dashoffset: 0; }

/* Radios: a dot instead of a check */
.lbp-application .opt input[type=radio] + .bx { border-radius: 50%; }
.lbp-application .opt input[type=radio] + .bx svg { display: none; }
.lbp-application .opt input[type=radio] + .bx::after {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fff;
	transform: scale(0);
	transition: transform .2s var(--app-ease);
}
.lbp-application .opt input[type=radio]:checked + .bx::after { transform: scale(1); }

.lbp-application .opt small { font-size: 13px; color: var(--app-label); }
.lbp-application .opt input:focus-visible + .bx { outline: 2px solid var(--app-purple); outline-offset: 3px; }
.lbp-application .opts[aria-invalid="true"] .bx { border-color: var(--err); }

/* Files ----------------------------------------------------------------------- */

.lbp-application .file { padding: 16px; border: 1px dashed var(--app-line); border-radius: var(--app-r); background: #fff; }
.lbp-application .file:hover { border-color: var(--app-line-hover); }
.lbp-application .file:focus-within { border-color: var(--app-purple); box-shadow: var(--app-ring); }

/* Signature: written in the accent script, in ink -------------------------------- */

.lbp-application .f input.sig {
	min-height: 76px;
	padding: 28px 16px 4px;
	font-family: var(--accent, "zooja-pro"), "Brush Script MT", cursive !important;
	font-size: 34px !important;
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: 0;
	color: var(--app-ink);
	-webkit-text-stroke: .012em currentColor;
}

.lbp-application .f input.sig::placeholder { font-family: var(--sans); font-size: 15px; color: #A1A1A6; -webkit-text-stroke: 0; }
.lbp-application .sig-note { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--app-label); }

/* Aside heading: the application's name; supporting copy kept small */

.lbp-app-h {
	margin: 0;
	font-size: clamp(30px, 2.6vw, 42px);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -.025em;
	color: var(--ink);
	text-wrap: balance;
}

.lbp-application .form-aside .lead,
.lbp-application .form-aside > p:not(.lbp-app-h),
.lbp-application .form-aside .small { font-size: 14.5px !important; line-height: 1.55; color: var(--ink-2); }
.lbp-application .form-aside .link { font-size: 14px !important; }

/* Progress steps (built by view.js from each form's sections) ----------------- */

.lbp-application .form-aside > ol { display: none; } /* replaced by the steps below */

.lbp-steps { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }

.lbp-steps-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.lbp-steps-head b { font-variant-numeric: tabular-nums; color: var(--app-purple); }

.lbp-steps-bar { height: 6px; border-radius: 999px; background: #ECE7F6; overflow: hidden; }
.lbp-steps-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #C4B5FD 0%, #8B5CF6 45%, #6D28D9 100%); transition: width .7s var(--app-ease); }

.lbp-steps ol,
.form-aside .lbp-steps ol { display: flex; flex-direction: column; margin: 4px 0 0; padding: 0; list-style: none; border: 0; }
.lbp-steps li { position: relative; margin: 0; padding: 0 0 20px; }
.lbp-steps li:last-child { padding-bottom: 0; }
.lbp-steps li[hidden] { display: none; }

/* Connector between bubbles; fills purple once the step above is done */
.lbp-steps li:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 17px;
	top: 42px;
	bottom: 4px;
	width: 2px;
	border-radius: 2px;
	background: linear-gradient(var(--app-purple), var(--app-purple)) top / 100% 0 no-repeat, #E4E0EE;
	transition: background-size .5s var(--app-ease);
}
.lbp-steps li.done:not(:last-child)::before { background-size: 100% 100%; }

.lbp-steps a,
.form-aside .lbp-steps ol a {
	border: 0;
	background: none;
	font-size: inherit;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 2px 6px 2px 0;
	border-radius: 999px;
	color: var(--ink-3);
	text-decoration: none;
}

.lbp-steps a:hover { color: var(--ink); }

.lbp-step-dot {
	position: relative;
	display: grid;
	flex: none;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #F2F0F7;
	color: #8B86A0;
	transition: background-color .3s, color .3s, transform .3s var(--app-ease), box-shadow .3s;
}

.lbp-step-dot svg { width: 18px; height: 18px; transition: opacity .2s, transform .3s var(--app-ease); }
.lbp-step-dot .lbp-step-check { position: absolute; opacity: 0; transform: scale(.5); }
.lbp-step-dot .lbp-step-check path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .35s .1s var(--app-ease); }

.lbp-step-t { display: flex; flex-direction: column; min-width: 0; font-size: 14.5px; font-weight: 600; line-height: 1.25; }
.lbp-step-t small { font-size: 12px; font-weight: 500; color: var(--ink-3); }

/* Current step: purple ring and a soft breathing glow */
.lbp-steps li.on .lbp-step-dot { background: var(--app-purple-soft); color: var(--app-purple); transform: scale(1.06); box-shadow: 0 0 0 3px rgba(109, 40, 217, .18); animation: app-breathe 2.4s ease-in-out infinite; }
.lbp-steps li.on a { color: var(--ink); }

/* Done: filled bubble, the icon flips to a drawn check */
.lbp-steps li.done .lbp-step-dot { background: var(--app-purple); color: #fff; animation: app-pop .4s var(--app-ease); box-shadow: none; }
.lbp-steps li.done .lbp-step-ic { opacity: 0; transform: scale(.5); }
.lbp-steps li.done .lbp-step-check { opacity: 1; transform: none; }
.lbp-steps li.done .lbp-step-check path { stroke-dashoffset: 0; }
.lbp-steps li.done a { color: var(--ink); }

@keyframes app-breathe {
	0%, 100% { box-shadow: 0 0 0 3px rgba(109, 40, 217, .18); }
	50%      { box-shadow: 0 0 0 7px rgba(109, 40, 217, .08); }
}


/* Tablets and phones: the steps column stacks above the form, so the two field
   columns keep full width (labels never get cut short), and a slim sticky
   progress bar replaces the list.
   Solid white: no backdrop blur inside sticky layers (Chrome skips painting). */
.lbp-mbar { display: none; }

@media (max-width: 1200px) {
	.lbp-application .form-shell { grid-template-columns: minmax(0, 1fr); }
	.lbp-application .form-aside { position: static; }
	.lbp-steps ol { display: none; }
	.lbp-mbar {
		position: sticky;
		top: calc(var(--lbp-sticky-top, var(--nav-h, 64px)) + var(--crumbs-h, 46px) + 8px);
		z-index: 5;
		display: flex;
		flex-direction: column;
		gap: 8px;
		margin: 0 0 -12px;
		padding: 12px 16px;
		border: 1px solid var(--app-hair);
		border-radius: 14px;
		background: #fff;
		box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
	}
	.lbp-mbar .lbp-steps-head { font-size: 12.5px; }
}

/* Success: fades in with the accent script ------------------------------------- */

.lbp-application .fm-done:not([hidden]) {
	align-items: center;
	text-align: center;
	gap: 16px;
	padding: clamp(40px, 6vw, 80px) clamp(24px, 4vw, 64px);
	background: #fff;
	box-shadow: 0 1px 2px rgba(12, 12, 14, .04), 0 18px 48px rgba(12, 12, 14, .07);
	animation: app-rise .8s var(--app-ease) both;
}

.lbp-application .fm-done .d-3 { max-width: 20ch; font-size: clamp(30px, 3.2vw, 48px); line-height: 1.1; }
.lbp-application .fm-done .d-3 i {
	font-family: var(--accent, "zooja-pro"), cursive;
	font-style: normal;
	font-weight: 300;
	font-size: 1.32em;
	line-height: .8;
	color: var(--app-purple);
	-webkit-text-stroke: .012em currentColor;
}

.lbp-application .fm-done .body { max-width: 52ch; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.lbp-application .fm-done .ref { font-variant-numeric: tabular-nums; }

.fm-done-ic { width: 64px; height: 64px; color: var(--app-purple); }
.fm-done-ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.fm-done-ic circle { stroke-dasharray: 152; stroke-dashoffset: 152; animation: app-draw .7s .2s var(--app-ease) forwards; }
.fm-done-ic path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: app-draw .45s .75s var(--app-ease) forwards; }

@keyframes app-rise {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}

@keyframes app-draw { to { stroke-dashoffset: 0; } }


.lbp-application .fm-done:not([hidden]) { border-radius: 28px; box-shadow: none; }

/* Sections whose questions are all conditional and hidden (view.js) */
.lbp-application .fm > fieldset[hidden] { display: none; }

/* Small screens ---------------------------------------------------------------- */

@media (max-width: 640px) {
	.lbp-application .fg { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.lbp-application :is(.fg, .fg > .fcond) > .f { grid-column: 1 / -1; }
	.lbp-application .opts:not(.opts-seg) { --oc: 1 !important; }
	.lbp-application .form-shell > .fm,
	.lbp-application .form-shell > .fm-col > .fm { padding: 24px 20px 28px; border-radius: 22px; }
	.lbp-application .fm { gap: 36px; }
	.lbp-application .fm > fieldset:not(:first-of-type) { padding-top: 36px; }
	.lbp-application .f input.sig { font-size: 30px !important; }
}

/* Reduced motion: everything lands instantly ------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.lbp-application *,
	.lbp-application *::before,
	.lbp-application *::after,
	.lbp-steps *,
	.lbp-steps *::before { animation: none !important; transition: none !important; }
	.lbp-application .opt .bx svg path,
	.lbp-steps li.done .lbp-step-check path,
	.fm-done-ic circle,
	.fm-done-ic path { stroke-dashoffset: 0; }
}

@keyframes app-pop {
	0%   { transform: scale(.82); }
	60%  { transform: scale(1.1); }
	100% { transform: scale(1); }
}

/* Vendor booths --------------------------------------------------------------
   Flat gray surfaces, no borders or tints; ink text, gray secondary, Lucide. */
.lbp-application .fg > .f.bt-card:not([hidden]) { display: grid; gap: 14px; padding: 16px; border-radius: 16px; background: #F5F5F7; text-align: left; }
.lbp-application .bt-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.lbp-application .bt-img { flex: none; width: 60px; height: 60px; border-radius: 12px; object-fit: cover; background: #E8E8ED; }
.lbp-application .bt-card.is-fest .bt-head::before { content: ""; flex: none; width: 60px; height: 60px; border-radius: 12px; background: linear-gradient(135deg, #E40303, #FF8C00 22%, #FFED00 40%, #008026 58%, #004DFF 78%, #750787); }
.lbp-application .bt-tx { display: grid; gap: 3px; min-width: 0; }
.lbp-application .bt-t { font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: #1D1D1F; }
.lbp-application .bt-when,
.lbp-application .bt-facts li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.45; color: #6E6E73; }
.lbp-application .bt-facts { display: grid; gap: 8px; margin: 0; padding: 14px 0 0; border-top: 1px solid #E3E3E8; list-style: none; }
.lbp-application .bt-facts li { margin: 0; color: #1D1D1F; }
.lbp-application .bt-card [hidden] { display: none !important; }
.lbp-application .bt-ic { flex: none; width: 16px; height: 16px; margin-top: 2px; color: #86868B; }

.lbp-application .fg > .f.bt-fee:not([hidden]) { display: grid; gap: 4px; padding: 14px 16px; border-radius: 16px; background: #F5F5F7; text-align: left; }
.lbp-application .bt-fee-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 15px; color: #1D1D1F; }
.lbp-application .bt-fee-amt { font-size: 22px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: #1D1D1F; }
.lbp-application .bt-fee-d { margin: 0; font-size: 13px; line-height: 1.45; color: #6E6E73; }

.lbp-application .bt-borrow .opts { display: flex; flex-wrap: wrap; gap: 0 32px; }
.lbp-application .bt-borrow-h { margin: -6px 0 0; font-size: 13px; line-height: 1.45; color: #6E6E73; }
.lbp-application .lbp-select-btn { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Dropdown menus match the site-wide menu (.lbp-dd in chrome.css): 16px panel,
   soft deep shadow, gray hover row, chosen item in purple with a check. */
.lbp-select-list {
	padding: 6px;
	border: 0;
	border-radius: 16px !important;
	box-shadow: 0 24px 60px -18px rgba(28, 16, 52, .32), 0 0 0 1px rgba(12, 12, 14, .07);
	overscroll-behavior: contain;
}
.lbp-select-list li { padding: 10px 40px 10px 12px; border-radius: 10px; font-size: 15px; font-weight: 500; line-height: 1.3; color: #3B3B41; transition: background-color .15s; }
.lbp-select-list li.is-active { background: #F3F3F3; color: #1D1D1F; }
.lbp-select-list li[aria-selected="true"] { font-weight: 600; color: #6D28D9; }
.lbp-select-list li[aria-selected="true"]::after {
	right: 16px;
	width: 5px;
	height: 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	background: none;
	-webkit-mask: none;
	mask: none;
	margin-top: 0;
	transform: translateY(-65%) rotate(45deg);
}

/* Segmented toggles: a purple pill slides to the chosen option. */
.lbp-application .opts.opts-seg { position: relative; isolation: isolate; --oc: 2; }
.lbp-application .opts.opts-seg::before {
	content: "";
	position: absolute;
	top: 2px;
	bottom: 2px;
	left: 2px;
	z-index: 0;
	width: calc((100% - 4px - (var(--seg-n, 2) - 1) * 2px) / var(--seg-n, 2));
	border-radius: 8px;
	background: #6D28D9;
	box-shadow: 0 1px 2px rgba(76, 29, 149, .25), 0 4px 10px -4px rgba(109, 40, 217, .45);
	opacity: 0;
	transform: translateX(0);
	transition: transform .38s cubic-bezier(.3, 1.3, .5, 1), opacity .2s;
	pointer-events: none;
}
.lbp-application .opts.opts-seg:has(> .opt input:checked)::before { opacity: 1; }
.lbp-application .opts.opts-seg:has(> .opt:nth-child(2) input:checked)::before { transform: translateX(calc(100% + 2px)); }
.lbp-application .opts.opts-seg:has(> .opt:nth-child(3) input:checked)::before { transform: translateX(calc(200% + 4px)); }
.lbp-application .opts.opts-seg:has(> .opt:nth-child(4) input:checked)::before { transform: translateX(calc(300% + 6px)); }
.lbp-application .opts-seg .opt,
.lbp-application .opts-seg .opt:hover,
.lbp-application .opts-seg .opt:has(input:checked) { position: relative; z-index: 1; background: transparent; box-shadow: none; transition: color .25s; }
.lbp-application .opts-seg .opt:hover:not(:has(input:checked)) { color: #6D28D9; }
.lbp-application .opts-seg .opt:has(input:checked) { color: #fff; font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
	.lbp-application .opts.opts-seg::before { transition: none; }
}

/* Documents ------------------------------------------------------------------ */
.lbp-application .f.docs { display: grid; gap: 10px; align-content: start; }
.lbp-application .docs > .l { margin: 0; }
.lbp-application .docs-h { margin: -4px 0 2px; font-size: 13px; line-height: 1.45; color: #6E6E73; }
.lbp-application .docs-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.lbp-application .doc-row { margin: 0; }
.lbp-application .doc-row[hidden] { display: none; }
.lbp-application .doc-row > .fg { margin: 0; }
.lbp-application .doc-cell { display: flex; flex-direction: row; align-items: center; gap: 6px; }
.lbp-application .doc-file { position: relative; display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; height: 58px; padding: 0 14px 0 10px; border: 1px solid var(--app-line); border-radius: var(--app-r); background: #fff; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.lbp-application .doc-file:hover { border-color: var(--app-line-hover); }
.lbp-application .doc-file:focus-within { border-color: var(--app-purple); box-shadow: var(--app-ring); }
.lbp-application .doc-file input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.lbp-application .doc-btn { flex: none; padding: 8px 12px; border-radius: 8px; background: #F5F5F7; font-size: 13.5px; font-weight: 600; line-height: 1.2; color: #1D1D1F; }
.lbp-application .doc-name { overflow: hidden; min-width: 0; font-size: 15px; white-space: nowrap; text-overflow: ellipsis; color: #86868B; }
.lbp-application .doc-file.has-file .doc-name { color: #1D1D1F; }
.lbp-application .doc-rm { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #86868B; cursor: pointer; transition: background-color .2s, color .2s; }
.lbp-application .doc-rm:hover { background: #F5F5F7; color: #1D1D1F; }
.lbp-application .doc-rm svg { width: 18px; height: 18px; }
.lbp-application .doc-add { display: inline-flex; align-items: center; gap: 8px; justify-self: start; width: auto; min-height: 40px; margin-top: 2px; padding: 0 16px 0 12px; border: 0; border-radius: 999px; background: #F5F5F7; font: inherit; font-size: 14px; font-weight: 600; color: #1D1D1F; cursor: pointer; transition: background-color .2s; }
.lbp-application .doc-add:hover { background: #EBEBEF; }
.lbp-application .doc-add[hidden] { display: none; }
.lbp-application .doc-add svg { width: 16px; height: 16px; color: #6D28D9; }
.lbp-application .fg > .f.doc-cell { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 6px; }
.lbp-application .fg > .f.doc-cell > label.doc-file { display: flex; flex: 1 1 auto; width: auto; height: 58px; min-height: 58px; margin: 0; padding: 0 14px 0 10px; font-size: 15px; font-weight: 400; }
.lbp-application .f.docs > .doc-add { justify-self: start; align-self: start; width: max-content; }

/* Booth fee: an amber warning panel so the payment deadline can't be missed. */
.lbp-application .fg > .f.bt-fee.is-warn:not([hidden]) { gap: 8px; padding: 16px 18px; background: #FFF4E0; box-shadow: inset 0 0 0 1px #F5D9A8; }
.lbp-application .bt-fee.is-warn .bt-fee-row,
.lbp-application .bt-fee.is-warn .bt-fee-amt { color: #3D2600; }
.lbp-application .bt-fee-d { display: flex; align-items: flex-start; gap: 8px; }
.lbp-application .bt-warn { display: none; flex: none; width: 18px; height: 18px; margin-top: 1px; }
.lbp-application .bt-fee.is-warn .bt-warn { display: block; color: #B45309; }
.lbp-application .bt-fee.is-warn .bt-fee-d { font-size: 14px; color: #6B4300; }
.lbp-application .bt-fee.is-warn .bt-fee-d b { font-weight: 700; color: #3D2600; }

/* The pill counts its own options (independent of --oc, which phone rules reset). */
.lbp-application .opts.opts-seg:has(> .opt:nth-child(2):last-child) { --seg-n: 2; }
.lbp-application .opts.opts-seg:has(> .opt:nth-child(3):last-child) { --seg-n: 3; }
.lbp-application .opts.opts-seg:has(> .opt:nth-child(4):last-child) { --seg-n: 4; }

/* One template for every application: the submit button, then "Questions?" under it. */
.lbp-application .fm-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.lbp-application .fm-actions .btn { max-width: 100%; }
.lbp-application .fm-actions .link { display: inline-block; } /* an email moves to its own line whole, never past the card */
@media (max-width: 640px) {
	.lbp-application .fm-actions .btn { width: 100%; height: auto; min-height: var(--bh, 50px); padding-block: 12px; }
	.lbp-application .fm-actions .btn > span { white-space: normal; text-align: center; }
}