/*
  Default look for the form builder's forms (/_inc/form-render.css). Light and
  neutral on purpose: every rule is wrapped in :where(), which has no
  specificity, so any rule in a site's own CSS beats it. Retheme with the
  variables on .cmsf, e.g.  .cmsf { --cmsf-accent: #961F23; }
*/
:where(.cmsf) {
	--cmsf-accent: #222222;
	--cmsf-line: #c9c9c9;
	--cmsf-bad: #b3261e;
	--cmsf-radius: 6px;
	max-width: 640px;
}
:where(.cmsf-field) { margin: 0 0 1.1rem; }
:where(.cmsf-label) { display: block; font-weight: 600; margin: 0 0 0.35rem; }
:where(.cmsf-check) { display: flex; gap: 0.55rem; align-items: flex-start; font-weight: 400; }
:where(.cmsf-check input) { margin-top: 0.3em; }
:where(.cmsf-req) { color: var(--cmsf-bad); }

:where(.cmsf input[type=text], .cmsf input[type=email], .cmsf input[type=tel], .cmsf select, .cmsf textarea) {
	width: 100%;
	box-sizing: border-box;
	font: inherit;
	color: inherit;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--cmsf-line);
	border-radius: var(--cmsf-radius);
	background: #ffffff;
}
:where(.cmsf textarea) { resize: vertical; }
:where(.cmsf :focus-visible) { outline: 2px solid var(--cmsf-accent); outline-offset: 2px; }
:where(.cmsf [aria-invalid="true"]) { border-color: var(--cmsf-bad); }
:where(.cmsf-error) { color: var(--cmsf-bad); font-size: 0.9em; margin-top: 0.3rem; }

:where(.cmsf-drop) {
	position: relative;
	border: 2px dashed var(--cmsf-line);
	border-radius: var(--cmsf-radius);
	padding: 1.25rem 1rem;
	text-align: center;
	background: #fafafa;
	transition: border-color 0.15s, background-color 0.15s;
}
:where(.cmsf-drop.cmsf-over) { border-color: var(--cmsf-accent); background: #f0f0f0; }
:where(.cmsf-drop input[type=file]) {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}
:where(.cmsf-drop-text span) { display: block; font-size: 0.85em; opacity: 0.7; margin-top: 0.15rem; }
/* the file list sits above the invisible file input so its remove buttons can be clicked */
:where(.cmsf-files) { list-style: none; margin: 0.75rem 0 0; padding: 0; position: relative; z-index: 1; text-align: left; }
:where(.cmsf-files li) { display: flex; gap: 0.6rem; align-items: center; padding: 0.4rem 0; border-top: 1px solid #e3e3e3; }
:where(.cmsf-fname) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(.cmsf-fsize) { opacity: 0.65; font-size: 0.85em; white-space: nowrap; }
:where(.cmsf-remove) { border: 0; background: none; color: inherit; cursor: pointer; font-size: 1.3em; line-height: 1; padding: 0 0.25rem; }

:where(.cmsf-privacy) { font-size: 0.85em; opacity: 0.8; margin: 0 0 1rem; }
:where(.cmsf-btn) {
	font: inherit;
	font-weight: 600;
	padding: 0.7rem 1.7rem;
	border: 0;
	border-radius: var(--cmsf-radius);
	background: var(--cmsf-accent);
	color: #ffffff;
	cursor: pointer;
}
:where(.cmsf-btn:disabled) { opacity: 0.6; cursor: wait; }
:where(.cmsf-status) { margin-top: 0.75rem; min-height: 1.2em; }
:where(.cmsf-status.cmsf-bad) { color: var(--cmsf-bad); font-weight: 600; }
:where(.cmsf-thanks) {
	max-width: 640px;
	padding: 1rem 1.25rem;
	border-left: 4px solid var(--cmsf-accent, #222222);
	background: #f6f6f6;
	white-space: pre-line;
}
:where(.cmsf-missing) { padding: 0.75rem 1rem; background: #fff4f4; color: var(--cmsf-bad); }

/* the editor draws the form inert so nothing can be typed or sent while editing */
:where(.cmsf-inert) { pointer-events: none; }