/*
 * The lead form's own look.
 *
 * Loaded by the page at /contact and by the framed copy at /contact/embed, so
 * the form looks the same in both and a change is made once.
 *
 * Deliberately plain. A cross-origin frame cannot be styled from the page
 * around it, so whatever is here is what a product site gets until it supplies
 * a stylesheet of its own — see lead_embed_styles in config/webshop.php. That
 * makes the default's job to be inoffensive next to any design rather than to
 * have one of its own: no brand colour, no font of its own, nothing that will
 * clash with a page it has never seen.
 */

.nl-lead-form {
    /* Inherits the page's font on /contact, falls back to the host system in
       the frame. Naming a font here would be picking one for six product sites
       from a stylesheet none of their designers will ever open. */
    font: inherit;
}

.nl-lead-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -8px;
}

.nl-lead-row > .nl-lead-field {
    flex: 1 1 220px;
    padding: 0 8px;
}

.nl-lead-field {
    margin-bottom: 18px;
}

.nl-lead-field > label {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
    font-size: 0.95em;
}

.nl-lead-input {
    display: block;
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid #818a91;
    border-radius: 3px;
    background-color: #ffffff;
    color: inherit;
    font: inherit;
    /* Without this the padding above pushes the width past 100% and the two
       fields in a row stop lining up with the textarea below them. */
    box-sizing: border-box;
}

.nl-lead-input:focus {
    outline: none;
    border-color: #4a4a4a;
}

textarea.nl-lead-input {
    min-height: 120px;
    resize: vertical;
}

.nl-lead-required {
    color: #d9534f;
}

.nl-lead-consent {
    display: flex;
    align-items: flex-start;
    margin-bottom: 18px;
    font-size: 0.9em;
}

.nl-lead-consent > input {
    margin: 3px 8px 0 0;
    flex: 0 0 auto;
}

.nl-lead-consent > label {
    font-weight: normal;
    margin: 0;
}

.nl-lead-actions {
    margin-bottom: 12px;
}

.nl-lead-submit {
    /* No brand colour: see the note at the top. A product site that wants its
       own green says so in its own stylesheet. */
    padding: 10px 24px;
    border: 1px solid #4a4a4a;
    border-radius: 3px;
    background-color: #4a4a4a;
    color: #ffffff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.nl-lead-submit:hover {
    background-color: #2d2d2d;
}

.nl-lead-submit[disabled] {
    opacity: 0.6;
    cursor: default;
}

.nl-lead-portal-note {
    margin: 16px 0 0;
    font-size: 0.85em;
    opacity: 0.8;
}

.nl-lead-error {
    margin-bottom: 16px;
    padding: 10px 12px;
    border: 1px solid #d9534f;
    border-radius: 3px;
    color: #a94442;
    background-color: #f9eaea;
}

.nl-lead-sent {
    padding: 16px 0;
}

.nl-lead-sent-title {
    font-weight: 600;
    font-size: 1.1em;
}