/*
 * Form primitives shared by every page that has a form (§21.4).
 *
 * These lived in public-pages.css, which only the marketing pages load — so the auth pages
 * styled their *modifiers* (.zs-field__input--iconed, .zs-field__labelrow) on top of a base
 * that was never served to them, and every login input rendered as a raw browser control.
 * A component used by more than one page set belongs in a layer more than one page set
 * loads (§11.1).
 */

/* --- field ------------------------------------------------------------------ */
.zs-field + .zs-field {
    margin-top: 16px;
}

.zs-field__label {
    display: block;
    margin-bottom: 8px;
    color: var(--zs-text-muted);
    font-size: 13px;
    font-weight: 700;
}

.zs-field__input {
    width: 100%;
    /* block, or a textarea leaves a baseline descender gap the inputs do not have. */
    display: block;
    padding: 13px 15px;
    border: 1px solid var(--zs-border-field);
    border-radius: var(--zs-radius);
    background: var(--zs-field);
    color: var(--zs-text);
    font-size: 14px;
    transition: border-color .15s, box-shadow .15s;
}

.zs-field__input:focus {
    border-color: var(--zs-green);
    box-shadow: 0 0 0 3px var(--zs-green-pale);
}

.zs-field__input--area {
    resize: vertical;
}

/* Two fields share a row where the design puts them side by side. */
.zs-fieldrow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* The stacking margin must not apply between siblings that are grid cells, or the second
   field sits 16px lower than the first inside its own cell. */
.zs-fieldrow > .zs-field + .zs-field {
    margin-top: 0;
}

.zs-fieldrow + .zs-field {
    margin-top: 16px;
}

/* --- validation ------------------------------------------------------------- */
/*
 * Replaces the browser's bubble, which is English, left-aligned and unstyleable. The message
 * sits under the field it belongs to, so there is no guessing which control it refers to.
 * form-validation.js is what puts it there.
 */
.zs-field__input.is-invalid {
    border-color: var(--zs-red);
    background: var(--zs-red-pale);
}

.zs-field__input.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(248, 40, 90, .16);
}

.zs-field__error {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 7px 0 0;
    color: var(--zs-red);
    font-size: 12.5px;
    font-weight: 600;
}

.zs-field__error[hidden] {
    display: none;
}

/* The icon is decorative — the text is the message — so it is drawn, not read. */
.zs-field__error::before {
    content: '';
    flex: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    mask: center / 12px no-repeat
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
    background-color: var(--zs-red);
}