/*!
 * Mition Embed Forms v1.0 default stylesheet
 * https://www.mition.com/embed/v1.0/form.css
 *
 * Neutral, self-contained styles for the embed runtime markup
 * (.mition-form / .mition-field / .mition-field-error / .mition-message ...).
 * All rules are scoped under .mition-form or [data-mition-form] so nothing
 * leaks into the host page. Hosts can:
 *   - override any rule with their own CSS (these selectors are low
 *     specificity on purpose), or
 *   - set window.MITION_EMBED_NO_CSS = true before loading form.js to
 *     skip this stylesheet entirely.
 */

.mition-form,
.mition-form * {
    box-sizing: border-box;
}

.mition-form {
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    color: inherit;
    max-width: 100%;
}

.mition-form h2 {
    margin: 0 0 0.25em;
    font-size: 1.5em;
    line-height: 1.2;
}

.mition-form > p {
    margin: 0 0 1em;
}

/* Fields flow like a bootstrap row: containerSize -> .mition-col-N */
.mition-form form {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -8px;
}

.mition-field {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0 8px;
    margin: 0 0 16px;
}

.mition-col-3 { flex-basis: 25%; max-width: 25%; }
.mition-col-4 { flex-basis: 33.3333%; max-width: 33.3333%; }
.mition-col-6 { flex-basis: 50%; max-width: 50%; }
.mition-col-9 { flex-basis: 75%; max-width: 75%; }
.mition-col-12 { flex-basis: 100%; max-width: 100%; }

/* Mobile: every field on its own row (matches the main app behaviour) */
@media (max-width: 575px) {
    .mition-col-3,
    .mition-col-4,
    .mition-col-6,
    .mition-col-9 {
        flex-basis: 100%;
        max-width: 100%;
    }
}

.mition-field > label {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
}

.mition-mandatory {
    color: #b00020;
}

.mition-field-description {
    font-size: 0.875em;
    color: #666;
    margin-bottom: 6px;
}

.mition-field-hint {
    font-size: 0.75em;
    color: #888;
    margin-top: 2px;
}

.mition-field input[type="text"],
.mition-field input[type="email"],
.mition-field input[type="number"],
.mition-field input[type="date"],
.mition-field select,
.mition-field textarea {
    display: block;
    width: 100%;
    padding: 8px 10px;
    font: inherit;
    color: #222;
    background-color: #fff;
    border: 1px solid #c4c4c4;
    border-radius: 4px;
}

.mition-field textarea {
    min-height: 96px;
    resize: vertical;
}

.mition-field input:focus,
.mition-field select:focus,
.mition-field textarea:focus {
    outline: 2px solid #4a7dbd;
    outline-offset: 1px;
}

/* Checkbox rows: box + label text side by side */
.mition-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-weight: 400;
    cursor: pointer;
}

.mition-checkbox input[type="checkbox"] {
    width: 1em;
    height: 1em;
    margin-top: 0.25em;
    flex: 0 0 auto;
}

/* Headers (no input) */
.mition-header h3 {
    margin: 0.75em 0 0.25em;
    font-size: 1.2em;
    line-height: 1.3;
}

.mition-header hr {
    border: 0;
    border-top: 1px solid #ddd;
    margin: 4px 0 0;
}

/* Per-field validation error (empty = hidden; runtime sets textContent) */
.mition-field-error {
    color: #b00020;
    font-size: 0.875em;
    margin-top: 4px;
}

.mition-field-error:empty {
    display: none;
}

/* Global message area under the form (thank you / failure) */
.mition-message {
    margin-top: 12px;
}

.mition-message:empty {
    display: none;
}

.mition-message--error {
    color: #b00020;
}

/* Submit button */
.mition-submit {
    flex: 0 0 auto;
    margin: 0 8px;
    padding: 10px 20px;
    font: inherit;
    font-weight: 600;
    color: #fff;
    background-color: #2f5f8f;
    border: 1px solid #2f5f8f;
    border-radius: 4px;
    cursor: pointer;
}

.mition-submit:hover {
    background-color: #274f78;
}

.mition-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Loading placeholder while the form definition is fetched */
.mition-loading {
    padding: 12px 0;
    color: #666;
    font-style: italic;
}