/* Manifesto request form. The accent and dark colours come from Manifesto > Settings (inline --mf-* on .mf-form-wrap);
   everything else follows the theme's font and sizes. */
.mf-form-wrap {
	--mf-ink: var(--mf-ink, #15140f);
	--mf-muted: color-mix(in srgb, var(--mf-ink) 68%, #fff);
	--mf-line: color-mix(in srgb, var(--mf-ink) 22%, #fff);
	--mf-accent: var(--mf-accent, #1b2151);
	--mf-on-accent: var(--mf-on-accent, #fff);
	--mf-error: #b3261e;
	--mf-radius: 12px;
}
.mf-form { margin: 0; }
.mf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
.mf-wide { grid-column: 1 / -1; }
.mf-field { margin: 0; min-width: 0; }
.mf-field > label, .mf-photos__label { display: block; margin-bottom: 6px; font-size: 0.875rem; font-weight: 600; color: var(--mf-ink); }
.mf-req { color: var(--mf-accent); margin-left: 2px; }
.mf-optional { font-weight: 400; color: var(--mf-muted); }
.mf-form input[type="text"], .mf-form input[type="tel"], .mf-form input[type="email"], .mf-form select, .mf-form textarea {
	box-sizing: border-box; width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--mf-line); border-radius: var(--mf-radius);
	background: #fff; color: var(--mf-ink); font: inherit; font-size: 1rem;
}
.mf-form textarea { min-height: 130px; resize: vertical; }
.mf-form [aria-invalid="true"] { border-color: var(--mf-error); }
.mf-error { margin: 6px 0 0; color: var(--mf-error); font-size: 0.875rem; }

.mf-drop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 16px; border: 1.5px dashed var(--mf-line); border-radius: var(--mf-radius); text-align: center; cursor: pointer; transition: border-color .2s, background-color .2s; }
.mf-drop:hover, .mf-drop.is-over, .mf-drop:focus-within { border-color: var(--mf-accent); background: color-mix(in srgb, var(--mf-accent) 6%, #fff); }
.mf-drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.mf-drop__title { font-weight: 700; color: var(--mf-accent); }
.mf-drop__title::before { content: "+ "; }
.mf-drop__hint { font-size: 0.875rem; color: var(--mf-muted); max-width: 40ch; }
.mf-photos__list { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.mf-photos__list:empty { display: none; }
.mf-photo { position: relative; width: 84px; height: 84px; border-radius: 10px; overflow: hidden; background: color-mix(in srgb, var(--mf-ink) 8%, #fff); }
.mf-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mf-photo span { display: flex; align-items: center; justify-content: center; height: 100%; padding: 4px; font-size: 0.6875rem; text-align: center; word-break: break-all; color: var(--mf-muted); }
.mf-photo button { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(28, 28, 26, .8); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; }
.mf-photo button:focus-visible { outline: 3px solid var(--mf-accent); outline-offset: 1px; }

.mf-check { display: flex; gap: 10px; align-items: flex-start; font-size: 0.875rem; font-weight: 400; color: var(--mf-muted); cursor: pointer; }
.mf-check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--mf-accent); }
.mf-check a { color: var(--mf-ink); }

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

.mf-submit { display: block; width: 100%; min-height: 52px; margin-top: 22px; border: 0; border-radius: 999px; background: var(--mf-accent); color: var(--mf-on-accent); font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; transition: background-color .2s; }
.mf-submit:hover { background: var(--mf-ink); color: #fff; }
.mf-submit:focus-visible { outline: 3px solid var(--mf-accent); outline-offset: 3px; }
.mf-submit:disabled { opacity: .7; cursor: progress; }
.mf-status { margin: 12px 0 0; font-size: 0.9375rem; color: var(--mf-error); }
.mf-status:empty { display: none; }
.mf-note { margin: 10px 0 0; font-size: 0.8125rem; color: var(--mf-muted); text-align: center; }

.mf-thanks { padding: 8px 0; }
.mf-thanks:focus { outline: none; }
.mf-thanks__title { margin: 0 0 8px; font-size: 1.375rem; font-weight: 700; color: var(--mf-ink); }
.mf-thanks__title::before { content: "✓"; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-right: 10px; border-radius: 50%; background: var(--mf-accent); color: var(--mf-on-accent); font-size: 1rem; }

@media (max-width: 600px) {
	.mf-grid { grid-template-columns: 1fr; }
}