/* MVZ Roth — Patient forms (appointment request / prescription order).
   Loaded only on templates that render a .mvz-form. Cascade layer: components. */
@layer components {

    .mvz-form { max-width: 640px; }

    .mvz-form .form-row {
        margin-bottom: var(--space-5);
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .mvz-form label {
        font-weight: 600;
        color: var(--ink-deep);
        font-size: var(--text-sm);
    }

    /* The required marker is decorative; the accessible name carries
       aria-required, so the asterisk is hidden from assistive tech. */
    .mvz-form .required-mark {
        color: var(--alert);
        margin-inline-start: 2px;
    }

    .mvz-form input[type="text"],
    .mvz-form input[type="email"],
    .mvz-form input[type="tel"],
    .mvz-form input[type="date"],
    .mvz-form textarea,
    .mvz-form select {
        width: 100%;
        padding: 12px 14px;
        border: 1px solid var(--border);
        border-radius: 8px;
        font-family: inherit;
        font-size: 1rem;
        background: var(--pure-white);
        color: var(--ink);
        transition: border-color var(--t-fast), box-shadow var(--t-fast);
    }

    .mvz-form input:focus,
    .mvz-form input:focus-visible,
    .mvz-form textarea:focus,
    .mvz-form textarea:focus-visible,
    .mvz-form select:focus-visible {
        outline: 2px solid var(--teal);
        outline-offset: 2px;
        border-color: var(--teal);
        box-shadow: 0 0 0 3px rgba(13, 74, 92, 0.25);
    }

    .mvz-form textarea { resize: vertical; min-height: 110px; }

    /* ---- Field-level validation (WCAG 3.3.1 / 3.3.3) ---- */
    .mvz-form [aria-invalid="true"] {
        border-color: var(--alert);
        background: var(--alert-soft);
    }
    .mvz-form .field-error {
        color: #9c3520; /* 5.2:1 on --alert-soft, 6.6:1 on white */
        font-size: var(--text-sm);
        font-weight: 500;
        display: flex;
        align-items: flex-start;
        gap: 6px;
    }
    .mvz-form .field-error::before {
        content: '!';
        flex: 0 0 auto;
        width: 1.15em;
        height: 1.15em;
        border-radius: 50%;
        background: var(--alert);
        color: #fff;
        font-size: 0.8em;
        font-weight: 700;
        line-height: 1.15em;
        text-align: center;
        margin-top: 0.15em;
    }
    .mvz-form .field-error:empty { display: none; }

    .mvz-form .form-radio-group { display: flex; flex-wrap: wrap; gap: 18px; }

    .mvz-form .form-fieldset {
        border: none;
        padding: 0;
        margin: 0 0 var(--space-5);
    }
    .mvz-form .form-fieldset legend {
        font-weight: 600;
        color: var(--ink-deep);
        font-size: var(--text-sm);
        padding: 0;
        margin-bottom: 6px;
    }

    .mvz-form .radio-inline,
    .mvz-form .checkbox-inline {
        font-weight: 400;
        display: flex;
        align-items: flex-start;
        gap: 8px;
        cursor: pointer;
        /* WCAG 2.5.5 — a comfortable pointer target around small native controls */
        min-height: 24px;
    }
    .mvz-form .radio-inline input,
    .mvz-form .checkbox-inline input {
        margin-top: 3px;
        flex-shrink: 0;
        width: 18px;
        height: 18px;
        accent-color: var(--teal);
    }

    .mvz-form .form-consent { font-size: var(--text-sm); }
    .mvz-form .form-consent span {
        font-weight: 400;
        line-height: 1.5;
        color: var(--ink-soft);
    }

    .mvz-form button[type="submit"] { margin-top: var(--space-3); }
    .mvz-form button[disabled] { opacity: 0.6; cursor: not-allowed; }

    .form-required-note {
        font-size: var(--text-sm);
        color: var(--ink-mute);
        margin-bottom: var(--space-4);
    }

    /* Live region for the submit result. Reserve height so the layout does not
       shift (CLS) when the message appears. */
    .form-feedback {
        margin-top: var(--space-4);
        font-weight: 600;
        min-height: 1.4em;
    }
    .form-feedback.success { color: #1a6b42; }  /* 5.0:1 on paper */
    .form-feedback.error { color: #9c3520; }

    /* Summary of field errors, rendered above the submit button. */
    .form-error-summary {
        border: 1px solid var(--alert);
        background: var(--alert-soft);
        border-radius: var(--r-sm);
        padding: var(--space-4);
        margin-bottom: var(--space-4);
        color: #7d2a19;
    }
    .form-error-summary:empty { display: none; }
    .form-error-summary h3 {
        font-family: var(--font-body);
        font-size: var(--text-base);
        font-weight: 700;
        color: inherit;
        margin-bottom: var(--space-2);
    }
    .form-error-summary ul { list-style: disc; padding-inline-start: 1.25rem; }
    .form-error-summary a { color: inherit; text-decoration: underline; }

    /* Anti-spam honeypot: hidden from sight and from assistive tech, but not
       via display:none (some bots skip those). */
    .mvz-hp {
        position: absolute !important;
        left: -9999px !important;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }

    /* Health-data warning callout (Art. 9 DSGVO) */
    .mvz-form .form-health-warning {
        border-inline-start: 3px solid var(--clay);
        background: var(--clay-pale);
        padding: var(--space-4) var(--space-5);
        border-radius: 0 var(--r-sm) var(--r-sm) 0;
        margin-bottom: var(--space-5);
        font-size: var(--text-sm);
        color: var(--ink);
    }
}