/* =========================================================
   CW Displays — Ninja Forms Styling
   Scoped to Ninja Form ID 1
   ========================================================= */

#nf-form-1-cont {
    --cw-navy: #081a38;
    --cw-orange: #e98010;
    --cw-orange-dark: #cf6c08;
    --cw-text: #162033;
    --cw-muted: #5c6471;
    --cw-border: #cfd5df;
    --cw-error: #b42318;
    --cw-success-bg: #fff7e7;
}

/* Main form container */
#nf-form-1-cont .nf-form-content {
    max-width: none;
    padding: 0;
}

/* Intro and required notice */
#nf-form-1-cont .nf-before-form-content {
    margin-bottom: 14px;
    color: var(--cw-muted);
    font-size: 15px;
}

#nf-form-1-cont .nf-form-fields-required {
    margin-bottom: 16px;
    color: var(--cw-muted);
    font-size: 14px;
}

/* Field spacing */
#nf-form-1-cont .nf-field-container {
    margin-bottom: 22px;
}

/* Labels */
#nf-form-1-cont .nf-field-label {
    margin-bottom: 7px;
}

#nf-form-1-cont .nf-field-label label {
    color: var(--cw-navy);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}

/* Required symbol */
#nf-form-1-cont .ninja-forms-req-symbol {
    color: #d62d20;
}

/* Inputs, selects and textareas */
#nf-form-1-cont input:not([type="button"]):not([type="submit"]),
#nf-form-1-cont select,
#nf-form-1-cont textarea {
    width: 100%;
    min-height: 46px;
    padding: 11px 13px;
    border: 1px solid var(--cw-border);
    border-radius: 4px;
    background: #ffffff;
    color: var(--cw-text);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.4;
    box-shadow: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

#nf-form-1-cont textarea {
    min-height: 150px;
    resize: vertical;
}

/* Placeholder styling */
#nf-form-1-cont input::placeholder,
#nf-form-1-cont textarea::placeholder {
    color: #7b8492;
    opacity: 1;
}

/* Focus styling */
#nf-form-1-cont input:not([type="button"]):not([type="submit"]):focus,
#nf-form-1-cont select:focus,
#nf-form-1-cont textarea:focus {
    outline: none;
    border-color: var(--cw-orange);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(233, 128, 16, 0.16);
}

/* Make Ninja Forms inner wrappers behave normally */
#nf-form-1-cont .nf-field,
#nf-form-1-cont .field-wrap,
#nf-form-1-cont .nf-field-element {
    width: 100%;
}

/* =========================================================
   Two-column layout
   ========================================================= */

#nf-form-1-cont .one-half {
    width: calc(50% - 8px);
    float: left;
    clear: none;
    margin-left: 16px;
}

#nf-form-1-cont .one-half.first {
    margin-left: 0;
    clear: both;
}

/* Clear the floated rows */
#nf-form-1-cont .nf-fields-wrap::after {
    content: "";
    display: table;
    clear: both;
}

/* Full-width fields */
#nf-form-1-cont .full-width,
#nf-form-1-cont .textarea-container,
#nf-form-1-cont .listselect-container,
#nf-form-1-cont .submit-container,
#nf-form-1-cont .html-container {
    width: 100%;
    float: none;
    clear: both;
    margin-left: 0;
}

/* =========================================================
   Submit button
   ========================================================= */

#nf-form-1-cont input[type="button"],
#nf-form-1-cont input[type="submit"],
#nf-form-1-cont button {
    min-height: 48px;
    padding: 12px 28px;
    border: 0;
    border-radius: 4px;
    background: var(--cw-orange);
    color: #ffffff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: none;
    transition:
        background-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

#nf-form-1-cont input[type="button"]:hover,
#nf-form-1-cont input[type="submit"]:hover,
#nf-form-1-cont button:hover {
    background: var(--cw-orange-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(8, 26, 56, 0.15);
}

/* =========================================================
   Validation and response messages
   ========================================================= */

#nf-form-1-cont .nf-error .ninja-forms-field {
    border-color: var(--cw-error);
}

#nf-form-1-cont .nf-error-msg,
#nf-form-1-cont .ninja-forms-field-error {
    margin-top: 5px;
    color: var(--cw-error);
    font-size: 13px;
}

#nf-form-1-cont .nf-response-msg {
    margin-bottom: 24px;
    padding: 16px 18px;
    border-left: 4px solid var(--cw-orange);
    background: var(--cw-success-bg);
    color: var(--cw-text);
}

#nf-form-1-cont .nf-response-msg p:last-child {
    margin-bottom: 0;
}

/* =========================================================
   Tablet and mobile
   ========================================================= */

@media (max-width: 767px) {

    #nf-form-1-cont .one-half,
    #nf-form-1-cont .one-half.first {
        width: 100%;
        float: none;
        clear: both;
        margin-left: 0;
    }

    #nf-form-1-cont .nf-field-container {
        margin-bottom: 18px;
    }

    #nf-form-1-cont input[type="button"],
    #nf-form-1-cont input[type="submit"],
    #nf-form-1-cont button {
        width: 100%;
    }
}