.mn-form {
--mnf-text: #0f172a;
--mnf-text-muted: #64748b;
--mnf-text-subtle: #94a3b8;
--mnf-bg: #fff;
--mnf-border: #cbd5e1;
--mnf-primary: #2563eb;
--mnf-primary-soft: #dbeafe;
--mnf-success: #15803d;
--mnf-danger: #b91c1c;
--mnf-radius: 6px;
--mnf-max-width: 480px;
--mnf-gap: 14px;
--mnf-button-text: #fff;
display: flex;
flex-direction: column;
gap: var(--mnf-gap);
max-width: var(--mnf-max-width);
font-family: inherit;
color: var(--mnf-text);
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
.mn-form {
--mnf-text: #f1f5f9;
--mnf-text-muted: #94a3b8;
--mnf-text-subtle: #64748b;
--mnf-bg: #1e293b;
--mnf-border: #334155;
--mnf-primary-soft: #312e81;
color-scheme: dark;
}
}
.mn-form__row {
display: flex;
flex-direction: column;
}
.mn-form--two_column {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
}
.mn-form--two_column .mn-form__honey,
.mn-form--two_column .mn-form__consent,
.mn-form--two_column .mn-form__submit,
.mn-form--two_column .mn-form__status {
grid-column: 1 / -1;
}
.mn-form--compact {
gap: 10px;
max-width: 420px;
}
.mn-form--theme-boxed,
.mn-form--theme-editorial {
padding: 24px;
border: 1px solid var(--mnf-border);
border-radius: calc(var(--mnf-radius) + 6px);
background: var(--mnf-bg);
}
.mn-form--theme-minimal {
padding: 0;
border: 0;
background: transparent;
}
.mn-form--theme-editorial {
border-left: 4px solid var(--mnf-primary);
}
.mn-form--shadow-soft {
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}
.mn-form--shadow-elevated {
box-shadow: 0 24px 54px rgba(15, 23, 42, 0.14);
}
.mn-form__row label {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--mnf-text-muted);
margin-bottom: 6px;
line-height: 1.4;
}
.mn-form__row input[type="text"],
.mn-form__row input[type="email"],
.mn-form__row input[type="number"],
.mn-form__row input[type="date"],
.mn-form__row input[type="tel"],
.mn-form__row input[type="url"],
.mn-form__row select,
.mn-form__row textarea {
width: 100%;
box-sizing: border-box;
background: var(--mnf-bg);
border: 1px solid var(--mnf-border);
border-radius: var(--mnf-radius);
padding: 10px 12px;
font-size: 14px;
font-family: inherit;
line-height: 1.4;
min-height: 40px;
color: var(--mnf-text);
transition: border-color 0.15s, box-shadow 0.15s;
-webkit-appearance: none;
appearance: none;
}
.mn-form--field-filled .mn-form__row input[type="text"],
.mn-form--field-filled .mn-form__row input[type="email"],
.mn-form--field-filled .mn-form__row input[type="number"],
.mn-form--field-filled .mn-form__row input[type="date"],
.mn-form--field-filled .mn-form__row input[type="tel"],
.mn-form--field-filled .mn-form__row input[type="url"],
.mn-form--field-filled .mn-form__row select,
.mn-form--field-filled .mn-form__row textarea {
background: color-mix(in srgb, var(--mnf-border) 18%, var(--mnf-bg));
border-color: transparent;
}
.mn-form--field-underlined .mn-form__row input[type="text"],
.mn-form--field-underlined .mn-form__row input[type="email"],
.mn-form--field-underlined .mn-form__row input[type="number"],
.mn-form--field-underlined .mn-form__row input[type="date"],
.mn-form--field-underlined .mn-form__row input[type="tel"],
.mn-form--field-underlined .mn-form__row input[type="url"],
.mn-form--field-underlined .mn-form__row select,
.mn-form--field-underlined .mn-form__row textarea {
border-width: 0 0 1px;
border-radius: 0;
background: transparent;
padding-left: 0;
padding-right: 0;
}
.mn-form__row textarea {
min-height: 88px;
resize: vertical;
line-height: 1.5;
} .mn-form__row select {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 12px 8px;
padding-right: 40px;
cursor: pointer;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
@media (prefers-color-scheme: dark) {
.mn-form__row select {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
}
.mn-form__row select option {
background: var(--mnf-bg);
color: var(--mnf-text);
}
.mn-form__row input::placeholder,
.mn-form__row textarea::placeholder {
color: var(--mnf-text-subtle);
opacity: 1;
}
.mn-form__row input:hover:not(:focus):not(:disabled),
.mn-form__row select:hover:not(:focus):not(:disabled),
.mn-form__row textarea:hover:not(:focus):not(:disabled) {
border-color: var(--mnf-text-subtle);
}
.mn-form__row input:focus,
.mn-form__row select:focus,
.mn-form__row textarea:focus {
border-color: var(--mnf-primary);
box-shadow: 0 0 0 3px var(--mnf-primary-soft);
outline: none;
}
.mn-form__row input:disabled,
.mn-form__row select:disabled,
.mn-form__row textarea:disabled {
background: var(--mnf-border);
color: var(--mnf-text-muted);
cursor: not-allowed;
opacity: 1;
}
.mn-form__custom-field small {
display: block;
margin-top: 5px;
color: var(--mnf-text-subtle);
font-size: 12px;
line-height: 1.45;
} .mn-form__honey {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
} .mn-form__consent {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 13px;
color: var(--mnf-text-muted);
line-height: 1.5;
}
.mn-form__consent input[type="checkbox"] {
width: 18px;
height: 18px;
margin: 1px 0 0;
accent-color: var(--mnf-primary);
cursor: pointer;
flex-shrink: 0;
}
.mn-form__consent label {
margin: 0;
cursor: pointer;
color: var(--mnf-text);
font-weight: 400;
} .mn-form__submit {
align-self: flex-start;
background: var(--mnf-primary);
color: var(--mnf-button-text);
border: 0;
padding: 11px 28px;
border-radius: var(--mnf-radius);
cursor: pointer;
font-size: 14px;
font-weight: 600;
font-family: inherit;
line-height: 1.4;
min-height: 42px;
transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.mn-form--button-soft .mn-form__submit {
background: color-mix(in srgb, var(--mnf-primary) 14%, var(--mnf-bg));
color: var(--mnf-primary);
border: 1px solid color-mix(in srgb, var(--mnf-primary) 28%, var(--mnf-border));
}
.mn-form--button-outline .mn-form__submit {
background: transparent;
color: var(--mnf-primary);
border: 1px solid var(--mnf-primary);
}
.mn-form--button-align-center .mn-form__submit {
align-self: center;
}
.mn-form--button-align-right .mn-form__submit {
align-self: flex-end;
}
.mn-form--button-align-stretch .mn-form__submit {
align-self: stretch;
}
.mn-form__submit:hover:not([disabled]) {
background: #1d4ed8;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
transform: translateY(-1px);
}
.mn-form__submit:focus {
outline: none;
box-shadow: 0 0 0 3px var(--mnf-primary-soft);
}
.mn-form__submit[disabled] {
opacity: 0.6;
cursor: progress;
transform: none;
}
@media (max-width: 560px) {
.mn-form--two_column {
display: flex;
flex-direction: column;
}
} .mn-form__status {
margin: 0;
font-size: 13px;
min-height: 1.4em;
line-height: 1.5;
}
.mn-form__status--ok {
color: var(--mnf-success);
font-weight: 500;
}
.mn-form__status--error {
color: var(--mnf-danger);
font-weight: 500;
}