/* Metal Cutting Intake form (Ninja Forms) - matches the approved RFQ design.
 * See js/metal-cutting-form.js for the behaviour. */

.imsq-form {
    --imsq-ink: #1f2328;
    --imsq-steel: #6e7781;
    --imsq-paper: #f6f8fa;
    --imsq-line: #d8dee4;
    --imsq-green: #4d9863;
    --imsq-green-dark: #3d7d50;
    --imsq-green-tint: #edf6f0;
    --imsq-red: #b91c1c;
}
.nf-form-cont.imsq-form {
    max-width: 1080px;
    margin: 0 auto;
    padding: 40px 24px 72px;
    background: var(--imsq-paper);
    color: var(--imsq-ink);
    font-family: 'Inter', sans-serif;
}
.imsq-form *,
.imsq-form *::before,
.imsq-form *::after { box-sizing: border-box; }
.imsq-form .nf-form-fields-required,
.imsq-form .ninja-forms-req-symbol { display: none; }
.imsq-form nf-fields-wrap,
.imsq-form nf-field { display: block; width: 100%; }
.imsq-form .nf-field-container { margin-bottom: 16px; }
.imsq-form .nf-field-label { display: flex; align-items: center; margin-bottom: 5px; }
.imsq-form .nf-field-label label {
    margin: 0;
    color: var(--imsq-steel);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
}
.imsq-form .nf-error-msg { margin-top: 6px; color: var(--imsq-red); font-size: 12px; }

/* Shown by rules; hidden until the script turns them on. */
.imsq-form .imsq-cond:not(.imsq-on),
.imsq-form .imsq-hide { display: none !important; }

/* Layout & Styles add-on rows/cells: let the cards do the layout. */
.imsq-form .nf-mp-body,
.imsq-form nf-rows-wrap,
.imsq-form .nf-row,
.imsq-form nf-cells,
.imsq-form .nf-cell,
.imsq-form nf-fields {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
.imsq-card > * { display: block; width: 100%; }

/* Heading */
.imsq-form .imsq-title {
    max-width: 560px;
    margin: 0 0 10px;
    color: var(--imsq-ink);
    font-family: inherit;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.15;
}
.imsq-form .imsq-sub { max-width: 520px; margin: 0 0 16px; color: var(--imsq-steel); font-size: 14px; line-height: 1.55; }

/* Panels */
.imsq-card {
    display: flex;
    flex-wrap: wrap;
    column-gap: 14px;
    margin-bottom: 20px;
    padding: 0 20px 4px;
    border: 1px solid var(--imsq-line);
    border-radius: 10px;
    background: #fff;
}
.imsq-card > :first-child {
    width: calc(100% + 40px);
    margin: 0 -20px 20px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--imsq-line);
}
.imsq-card > :first-child .nf-field-container { margin: 0; }
.imsq-card-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.imsq-card-title h3 { margin: 0; color: var(--imsq-ink); font-family: inherit; font-size: 16px; font-weight: 600; }
.imsq-card-title span { color: var(--imsq-steel); font-size: 12px; text-align: right; }
@media (min-width: 761px) {
    .imsq-card > .imsq-col-half { width: calc(50% - 7px); }
}

/* Inputs */
.imsq-form input[type="text"].ninja-forms-field,
.imsq-form input[type="email"].ninja-forms-field,
.imsq-form input[type="tel"].ninja-forms-field,
.imsq-form textarea.ninja-forms-field,
.imsq-form .imsq-in {
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 9px 10px;
    border: 1px solid var(--imsq-line);
    border-radius: 6px;
    background-color: #fff;
    color: var(--imsq-ink);
    font-family: inherit;
    font-size: 14px;
    box-shadow: none;
}
.imsq-form textarea.ninja-forms-field { min-height: 72px; line-height: 1.5; resize: vertical; }
.imsq-form select.imsq-in {
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236e7781' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: right 12px center;
    background-repeat: no-repeat;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.imsq-form .imsq-in:disabled { background-color: var(--imsq-paper); color: #9aa1a9; cursor: not-allowed; }
.imsq-form .imsq-in:focus,
.imsq-form .ninja-forms-field:focus {
    border-color: var(--imsq-green);
    outline: none;
    box-shadow: 0 0 0 3px var(--imsq-green-tint);
}
.imsq-form .imsq-in.is-invalid,
.imsq-form .nf-error .ninja-forms-field { border-color: var(--imsq-red); }
.imsq-form .imsq-proxy {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0;
    pointer-events: none;
}

/* Toggle buttons (radio options) */
.imsq-form .listradio-container ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.imsq-form .listradio-container li { position: relative; min-width: 0; margin: 0 !important; padding: 0; list-style: none; }
.imsq-form .listradio-container li input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.imsq-form .listradio-container li label {
    display: block;
    width: 100%;
    margin: 0 !important;
    padding: 11px 12px;
    border: 1px solid var(--imsq-line);
    border-radius: 8px;
    background: #fff;
    color: var(--imsq-steel);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.imsq-form .listradio-container li input:checked + label {
    border-color: var(--imsq-green);
    background: var(--imsq-green-tint);
    color: var(--imsq-green-dark);
}
.imsq-form .listradio-container li input:focus-visible + label { outline: 2px solid var(--imsq-green); outline-offset: 2px; }
.imsq-form .imsq-opt-title { display: block; }
.imsq-form .imsq-opt-sub { display: block; margin-top: 2px; font-size: 11px; font-weight: 400; opacity: .85; }

/* Verified Metal badge */
.imsq-form .imsq-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -4px 0 0;
    padding: 10px 14px;
    border: 1px solid #abecc3;
    border-radius: 8px;
    background: #ecfdf3;
    color: #15803d;
    font-size: 14px;
    font-weight: 500;
}
.imsq-form .imsq-badge::before { content: "\2713"; font-weight: 700; }

/* Cut list */
.imsq-form .imsq-cutlist { margin-bottom: 0; }
.imsq-cl { margin: -20px -20px 0; }
.imsq-cl__head,
.imsq-row__grid {
    display: grid;
    grid-template-columns: 2.2fr 1.1fr .9fr 1.2fr 1.8fr 1fr .6fr 36px;
    gap: 10px;
    align-items: start;
}
.imsq-cl__head {
    padding: 16px 20px 8px;
    color: var(--imsq-steel);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.imsq-row { display: flex; flex-direction: column; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--imsq-line); }
.imsq-row:first-child { border-top: 0; }
.imsq-row__upload:not(.has-field),
.imsq-row__banner:empty { display: none; }
.imsq-form .imsq-row__banner .imsq-badge,
.imsq-form .imsq-row__banner .imsq-nudge { margin: 0; }

/* Optional add-ons under each row */
.imsq-row__addons { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.imsq-addons__title { color: var(--imsq-steel); font-size: 12px; font-weight: 500; }
.imsq-addon { display: inline-flex; align-items: center; }
.nf-form-cont.imsq-form button.imsq-addon__btn {
    width: auto;
    height: auto;
    margin: 0;
    padding: 7px 14px;
    border: 1px dashed #9aa4ae;
    border-radius: 8px;
    background: #fff;
    color: var(--imsq-steel);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
    cursor: pointer;
}
.nf-form-cont.imsq-form button.imsq-addon__btn:hover { border-color: var(--imsq-green); background: #fff; color: var(--imsq-green-dark); }
.nf-form-cont.imsq-form button.imsq-addon__btn.is-on { border: 1px solid var(--imsq-green); background: var(--imsq-green-tint); color: var(--imsq-green-dark); }

/* Roughing photo, moved into its row: "Upload an image ..." then the file box, on one line */
.imsq-row__upload.has-field { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.imsq-row__upload > :not(.imsq-addons__title) { display: block; flex: 0 1 280px; min-width: 0; max-width: 100%; }
.nf-form-cont.imsq-form .imsq-row__upload .nf-field-container,
.nf-form-cont.imsq-form .imsq-row__upload .nf-field,
.nf-form-cont.imsq-form .imsq-row__upload .field-wrap { margin: 0; padding: 0; }
/* The row prints its own label; keep Ninja Forms' for screen readers only. */
.nf-form-cont.imsq-form .imsq-row__upload .nf-field-label {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
/* Its error sits under the row, not squeezed beside the box. */
.nf-form-cont.imsq-form .imsq-row__upload .nf-after-field { position: static; }

/* File uploads: one box like the browser's own "Choose File | No file chosen" */
.nf-form-cont.imsq-form .nf-field-element.imsq-fu {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 34px;
    padding: 4px 8px 4px 4px;
    border: 1px solid var(--imsq-line);
    border-radius: 6px;
    background: #fff;
    text-align: left;
}
.nf-form-cont.imsq-form .imsq-fu .progress,
.nf-form-cont.imsq-form .imsq-fu .nf-fu-progress,
.nf-form-cont.imsq-form .imsq-fu .files_uploaded,
.nf-form-cont.imsq-form .imsq-fu .nf-fu-uploaded-files,
.nf-form-cont.imsq-form .imsq-fu .cancel,
.nf-form-cont.imsq-form .imsq-fu .nf-fu-button-cancel { display: none !important; }
.nf-form-cont.imsq-form .imsq-fu .imsq-fu__btn,
.nf-form-cont.imsq-form .file_upload-container .imsq-fu .fileinput-button,
.nf-form-cont.imsq-form .file_upload-container .imsq-fu .btn {
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    width: auto;
    height: auto;
    margin: 0;
    padding: 2px 8px;
    overflow: hidden;
    border: 1px solid #767676;
    border-radius: 3px;
    background: #efefef;
    color: #000;
    font: 400 13px/1.4 'Inter', sans-serif;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
    cursor: pointer;
}
.nf-form-cont.imsq-form .imsq-fu .imsq-fu__btn:hover { background: #e5e5e5; }
.imsq-fu__name {
    min-width: 0;
    overflow: hidden;
    color: var(--imsq-ink);
    font-size: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
}
.nf-form-cont.imsq-form .imsq-dropbox .nf-field-element.imsq-fu { background: #fff; }
.nf-form-cont.imsq-form .nf-error .nf-field-element.imsq-fu { border-color: var(--imsq-red); }

/* Fields filled by the script */
.imsq-form .imsq-hidden-field,
.imsq-form .imsq-rough-home { display: none !important; }

/* Same-day + add-ons warning (the box itself is the message) */
.imsq-form .imsq-tierwarn { margin-top: -4px; }
.imsq-form .imsq-tierwarn .nf-error-msg,
.imsq-form .imsq-tierwarn .nf-error-wrap { display: none !important; }
.imsq-row .imsq-in { font-size: 13px; }
.imsq-cell { min-width: 0; }
.imsq-cell__label { display: none; }
.imsq-dims { display: flex; align-items: center; gap: 6px; }
.imsq-dims .imsq-in { flex: 1 1 0; min-width: 0; text-align: center; }
.imsq-dims .imsq-info-wrap { flex: none; }
.imsq-row__x {
    padding: 6px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--imsq-steel);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.imsq-row__x:hover { background: var(--imsq-paper); color: var(--imsq-green); }
.imsq-cl__add {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 10px 20px 18px;
    padding: 10px 14px;
    border: 1px dashed var(--imsq-line);
    border-radius: 8px;
    background: none;
    color: var(--imsq-green);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}
.imsq-cl__add:hover { border-color: var(--imsq-green); background: var(--imsq-green-tint); }

/* "Save up to 35% by choosing Verified Metal instead." */
.imsq-form .imsq-nudge {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: -2px 0 2px;
    padding: 10px 14px;
    border: 1px solid #f0d36b;
    border-radius: 8px;
    background: #fff8db;
    color: #7a5b00;
    font-size: 14px;
    font-weight: 500;
}
.imsq-form .imsq-nudge .imsq-switch {
    padding: 0;
    border: 0;
    background: none;
    color: #7a5b00;
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}
.imsq-form .imsq-notice {
    margin: 0;
    padding: 10px 14px;
    border: 1px solid var(--imsq-line);
    border-radius: 8px;
    background: var(--imsq-paper);
    color: var(--imsq-ink);
    font-size: 14px;
}

/* Purchase order box */
.imsq-form .imsq-dropbox {
    padding: 18px;
    border: 1.5px dashed var(--imsq-line);
    border-radius: 8px;
    background: var(--imsq-paper);
    text-align: center;
}
.imsq-form .imsq-dropbox .nf-field-label { justify-content: center; margin-bottom: 10px; }
.imsq-form .imsq-dropbox .nf-field-label label { color: var(--imsq-steel); font-size: 14px; font-weight: 400; }

/* (i) icon + example photo */
.imsq-info-wrap { position: relative; display: inline-flex; margin-left: 6px; vertical-align: middle; }
.imsq-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 1px solid #4d9863;
    border-radius: 50%;
    background: #fff;
    color: #4d9863;
    font: italic 700 11px/1 'Inter', sans-serif;
    cursor: pointer;
}
.imsq-info:focus-visible { outline: 2px solid #4d9863; outline-offset: 2px; }
.imsq-tip {
    position: absolute;
    bottom: 24px;
    left: 50%;
    z-index: 20;
    display: none;
    padding: 6px;
    transform: translateX(-50%);
    border: 1px solid #d8dee4;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.imsq-tip img { display: block; width: 130px; max-width: none; height: auto; border-radius: 2px; }
.imsq-tip__cap { display: block; margin-top: 6px; color: #1f2328; font-size: 12px; font-style: normal; }
/* Text note (Tier 1): opens to the right of the icon so it stays inside the card. */
.imsq-tip--text { left: -10px; transform: none; }
.imsq-tip__text {
    display: block;
    width: 210px;
    color: #1f2328;
    font: normal 400 12px/1.4 'Inter', sans-serif;
    text-align: left;
    white-space: normal;
}
.imsq-form .imsq-opt-title .imsq-info-wrap { margin-left: 6px; }
.imsq-info-wrap.is-open .imsq-tip,
.imsq-info-wrap:focus-within .imsq-tip { display: block; }
@media (hover: hover) and (pointer: fine) {
    .imsq-info-wrap:hover .imsq-tip { display: block; }
}

/* Submit, note, success */
.imsq-form .imsq-submit { margin: 0; text-align: center; }
.imsq-form .imsq-submit input[type="submit"] {
    display: block;
    width: auto;
    margin: 0 auto;
    padding: 14px 56px;
    border: 0;
    border-radius: 8px;
    background: var(--imsq-green);
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    text-transform: none;
    cursor: pointer;
    transition: background .15s;
}
.imsq-form .imsq-submit input[type="submit"]:hover { background: var(--imsq-green-dark); }
.imsq-form .imsq-footnote { margin: -4px 0 0; color: var(--imsq-steel); font-size: 12px; text-align: center; }
.imsq-form .nf-form-errors .nf-error-msg { margin: 0 0 14px; text-align: center; }
.imsq-success {
    padding: 48px 24px;
    border: 1px solid #d8dee4;
    border-radius: 10px;
    background: #fff;
    text-align: center;
}
.imsq-success__check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #edf6f0;
    color: #3d7d50;
    font-size: 26px;
}
.imsq-success h3 { margin: 0 0 8px; font-size: 20px; }
.imsq-success p { max-width: 420px; margin: 0 auto; color: #6e7781; font-size: 14px; }

/* Phones */
@media (max-width: 760px) {
    .imsq-form { padding: 32px 16px 56px; }
    .imsq-form .imsq-title { font-size: 24px; }
    .imsq-cl__head { display: none; }
    .imsq-row { position: relative; }
    .imsq-row__grid { grid-template-columns: 1fr; gap: 12px; }
    .imsq-cell__label {
        display: block;
        margin-bottom: 4px;
        color: var(--imsq-steel);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
    }
    .imsq-stack ul { grid-template-columns: 1fr !important; }
    /* Same text size as desktop; iOS zoom-on-focus is stopped in the page template instead. */
}

/* ---------------------------------------------------------------------------
 * Overrides: Ninja Forms' own styles and the theme style buttons, inputs and
 * labels inside forms. These selectors are stronger so the design wins.
 * ------------------------------------------------------------------------- */
.nf-form-cont.imsq-form .nf-field-label label {
    color: var(--imsq-steel);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: 0;
}
.nf-form-cont.imsq-form .nf-field-element input[type="text"],
.nf-form-cont.imsq-form .nf-field-element input[type="email"],
.nf-form-cont.imsq-form .nf-field-element input[type="tel"],
.nf-form-cont.imsq-form .nf-field-element textarea,
.nf-form-cont.imsq-form .imsq-in {
    height: auto;
    min-height: 0;
    padding: 9px 10px;
    border: 1px solid var(--imsq-line);
    border-radius: 6px;
    background-color: #fff;
    color: var(--imsq-ink);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.4;
    box-shadow: none;
}
.nf-form-cont.imsq-form .nf-field-element textarea { height: 72px; min-height: 72px; }
.nf-form-cont.imsq-form .imsq-row .imsq-in { font-size: 13px; }
.nf-form-cont.imsq-form .imsq-in:disabled { background-color: var(--imsq-paper); }

.nf-form-cont.imsq-form button.imsq-cl__add {
    width: auto;
    height: auto;
    margin: 10px 20px 18px;
    padding: 10px 14px;
    border: 1px dashed var(--imsq-line);
    border-radius: 8px;
    background: none;
    color: var(--imsq-green);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
}
.nf-form-cont.imsq-form button.imsq-cl__add:hover { border-color: var(--imsq-green); background: var(--imsq-green-tint); }
.nf-form-cont.imsq-form button.imsq-row__x {
    width: auto;
    height: auto;
    min-width: 0;
    padding: 6px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--imsq-steel);
    font-size: 18px;
    line-height: 1;
    box-shadow: none;
}
.nf-form-cont.imsq-form button.imsq-row__x:hover { background: var(--imsq-paper); color: var(--imsq-green); }
.nf-form-cont.imsq-form button.imsq-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    min-width: 16px;
    height: 16px;
    padding: 0;
    border: 1px solid #4d9863;
    border-radius: 50%;
    background: #fff;
    color: #4d9863;
    font: italic 700 11px/1 'Inter', sans-serif;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
}
.nf-form-cont.imsq-form button.imsq-switch {
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    background: none;
    color: #7a5b00;
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-transform: none;
    box-shadow: none;
}

/* File Uploads add-on: a quiet button like the browser's own file picker. */
.nf-form-cont.imsq-form .file_upload-container .fileinput-button,
.nf-form-cont.imsq-form .file_upload-container .btn {
    display: inline-block;
    width: auto;
    height: auto;
    padding: 6px 12px;
    border: 1px solid var(--imsq-line);
    border-radius: 6px;
    background: #fff;
    color: var(--imsq-ink);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
}
.nf-form-cont.imsq-form .file_upload-container .progress {
    height: 4px;
    margin: 10px 0 0;
    border-radius: 2px;
    background: var(--imsq-line);
    box-shadow: none;
}
.nf-form-cont.imsq-form .file_upload-container .progress-bar { background: var(--imsq-green); }

@media (min-width: 761px) {
    .imsq-form .imsq-card > .imsq-col-half { width: calc(50% - 7px) !important; }
}

/* Dropdowns in the cut list: one small chevron, white like the design's inputs. */
.nf-form-cont.imsq-form select.imsq-in {
    padding-right: 30px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236e7781' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: 10px 7px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.nf-form-cont.imsq-form .imsq-in:disabled {
    border-color: var(--imsq-line);
    background-color: #fff;
    color: #9aa1a9;
    opacity: 1;
}

/* Section titles: full-width header strip with its own padding and divider.
 * !important + extra specificity beats the Layout & Styles row reset above. */
.imsq-form .imsq-card > :first-child {
    width: calc(100% + 40px) !important;
    max-width: none !important;
    margin: 0 -20px 20px !important;
    padding: 18px 20px !important;
    border-bottom: 1px solid var(--imsq-line) !important;
}
.imsq-form .imsq-card > :first-child .nf-field-container,
.imsq-form .imsq-card > :first-child .nf-field-element,
.imsq-form .imsq-card > :first-child .nf-field { margin: 0 !important; padding: 0 !important; border: 0 !important; }
.nf-form-cont.imsq-form .imsq-card-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; }
.nf-form-cont.imsq-form .imsq-card-title h3 {
    margin: 0;
    padding: 0;
    color: var(--imsq-ink);
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
}
.nf-form-cont.imsq-form .imsq-card-title span {
    color: var(--imsq-steel);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 400;
    text-align: right;
}
@media (max-width: 575px) {
    .imsq-form .imsq-card > :first-child {
        width: calc(100% + 28px) !important;
        margin: 0 -14px 16px !important;
        padding: 14px !important;
    }
}

/* Field labels Ninja Forms prints as <legend> / <span> (radio lists, uploads). */
.nf-form-cont.imsq-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.nf-form-cont.imsq-form .nf-field-label legend,
.nf-form-cont.imsq-form .nf-field-label .nf-label-span,
.nf-form-cont.imsq-form legend.nf-field-label,
.nf-form-cont.imsq-form fieldset > legend {
    display: flex;
    align-items: center;
    width: auto;
    margin: 0 0 5px;
    padding: 0;
    border: 0;
    color: var(--imsq-steel);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
}

/* Purchase order box: centered prompt, no Cancel button (uploads are quick). */
.nf-form-cont.imsq-form .imsq-dropbox .nf-field-label,
.nf-form-cont.imsq-form .imsq-dropbox .nf-field-label label,
.nf-form-cont.imsq-form .imsq-dropbox .nf-field-label .nf-label-span,
.nf-form-cont.imsq-form .imsq-dropbox legend {
    justify-content: center;
    width: 100%;
    margin: 0 0 10px;
    color: var(--imsq-steel);
    font-size: 14px;
    font-weight: 400;
    text-align: center;
}
.nf-form-cont.imsq-form .imsq-dropbox .nf-field-element { text-align: center; }
.nf-form-cont.imsq-form .file_upload-container .cancel,
.nf-form-cont.imsq-form .file_upload-container .nf-fu-button-cancel { display: none !important; }

/* Quote Form (No Banner) page template: light grey page behind the form, as in the design. */
.imsq-page { padding: 0 0 24px; background: #f6f8fa; }
.imsq-page .site-main { max-width: 1128px; }
.nf-form-cont.imsq-form .imsq-title { color: var(--imsq-ink); font-family: 'Inter', sans-serif; font-size: 30px; font-weight: 700; text-transform: none; }

/* Dimension boxes: equal columns, 2 for Round Bar (D, L), 3 for Plate / Flat Bar (H, W, L). */
.imsq-dims { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.imsq-dims.imsq-dims--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.imsq-dims.imsq-dims--1 { grid-template-columns: 1fr; }
.nf-form-cont.imsq-form .imsq-dims .imsq-in { width: 100%; min-width: 0; text-align: center; }
@media (max-width: 760px) {
    .nf-form-cont.imsq-form .imsq-title { font-size: 24px; }
}

/* ---------------------------------------------------------------------------
 * Validation: a red border and a small red line under the field, as in the
 * design. Ninja Forms' own red "!" / green tick boxes are switched off.
 * ------------------------------------------------------------------------- */
.nf-form-cont.imsq-form .nf-error .nf-field-element::after,
.nf-form-cont.imsq-form .nf-pass .nf-field-element::after,
.nf-form-cont.imsq-form .nf-error.field-wrap .nf-field-element::after,
.nf-form-cont.imsq-form .nf-pass.field-wrap .nf-field-element::after {
    display: none !important;
    content: none !important;
}
.nf-form-cont.imsq-form .nf-pass .ninja-forms-field,
.nf-form-cont.imsq-form .nf-pass.field-wrap .nf-field-element input { border-color: var(--imsq-line); }
.nf-form-cont.imsq-form .nf-error .ninja-forms-field,
.nf-form-cont.imsq-form .nf-error.field-wrap .nf-field-element input:not([type="file"]),
.nf-form-cont.imsq-form .nf-error.field-wrap .nf-field-element textarea,
.nf-form-cont.imsq-form .imsq-in.is-invalid {
    border-color: var(--imsq-red);
    box-shadow: none;
}
.nf-form-cont.imsq-form .nf-error .ninja-forms-field:focus,
.nf-form-cont.imsq-form .imsq-in.is-invalid:focus { box-shadow: 0 0 0 3px #fde8e8; }
.nf-form-cont.imsq-form .nf-error-wrap,
.nf-form-cont.imsq-form .nf-after-field .nf-error-msg {
    margin: 6px 0 0;
    padding: 0;
    color: var(--imsq-red);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
}
/* Turnaround: red outline on the tier cards. */
.nf-form-cont.imsq-form .nf-error .listradio-container li label,
.nf-form-cont.imsq-form .imsq-stack.nf-error li label { border-color: var(--imsq-red); }
/* Cut list: its message sits under "+ Add row", inside the card padding. */
.nf-form-cont.imsq-form .imsq-cutlist .nf-after-field { padding-bottom: 14px; }
.nf-form-cont.imsq-form .imsq-cutlist .nf-after-field .nf-error-msg { margin-top: -6px; }
/* Under the submit button: one centred line. */
.nf-form-cont.imsq-form .nf-form-errors { margin-top: 12px; }
.nf-form-cont.imsq-form .nf-form-errors .nf-error-msg,
.nf-form-cont.imsq-form .nf-form-errors .nf-error-wrap {
    margin: 0;
    color: var(--imsq-red);
    font-size: 12px;
    text-align: center;
}

/* ---------------------------------------------------------------------------
 * Cut list widths: wider Dimensions, room for "New Certified Metal (MTR)",
 * "Stainless Steel" and "Round Bar"; H / W / L / D stay visible in each box.
 * ------------------------------------------------------------------------- */
@media (min-width: 761px) {
    .imsq-cl__head,
    .imsq-row__grid {
        /* Roughly px at full width: source 200, material 125, shape 92, alloy 108,
           dimensions 243 (3 x ~77: letter + value like 12.375 + arrows), tolerance 88, qty 52. */
        grid-template-columns: minmax(0, 200fr) minmax(0, 125fr) minmax(0, 92fr) minmax(0, 108fr) minmax(0, 243fr) minmax(0, 88fr) minmax(0, 52fr) 28px;
        gap: 8px;
    }
    .nf-form-cont.imsq-form .imsq-row__grid select.imsq-in {
        padding-left: 8px;
        padding-right: 24px;
        background-position: right 8px center;
        text-overflow: ellipsis;
    }
    .nf-form-cont.imsq-form .imsq-row__grid .imsq-cell--qty .imsq-in { padding-left: 8px; padding-right: 4px; }
}
.imsq-dims { gap: 4px; }
.imsq-dim { position: relative; display: block; min-width: 0; margin: 0; }
.imsq-dim__tag {
    position: absolute;
    top: 50%;
    left: 6px;
    z-index: 1;
    transform: translateY(-50%);
    color: var(--imsq-steel);
    font: 600 11px/1 'Inter', sans-serif;
    pointer-events: none;
}
.nf-form-cont.imsq-form .imsq-dims .imsq-dim .imsq-in {
    width: 100%;
    padding-left: 18px;
    padding-right: 2px;
    text-align: left;
}
/* Arrows stay; just no extra gap beside them. */
.imsq-dims .imsq-in::-webkit-inner-spin-button { margin: 0 0 0 2px; }
.imsq-dim:has(.is-invalid) .imsq-dim__tag { color: var(--imsq-red); }

/* ---------------------------------------------------------------------------
 * Touch screens: cut list dropdowns as a button + tap list (closes on a pick).
 * ------------------------------------------------------------------------- */
.imsq-dd { position: relative; }
.nf-form-cont.imsq-form .imsq-dd select.imsq-dd__native { display: none !important; }
.nf-form-cont.imsq-form button.imsq-dd__btn {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 9px 30px 9px 10px;
    overflow: hidden;
    border: 1px solid var(--imsq-line);
    border-radius: 6px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236e7781' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center / 10px 7px;
    color: var(--imsq-ink);
    font: 400 13px/1.4 'Inter', sans-serif;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
    white-space: nowrap;
    text-overflow: ellipsis;
    box-shadow: none;
    cursor: pointer;
}
.nf-form-cont.imsq-form .imsq-dd.is-open button.imsq-dd__btn {
    border-color: var(--imsq-green);
    box-shadow: 0 0 0 3px var(--imsq-green-tint);
}
.nf-form-cont.imsq-form .imsq-dd__native.is-invalid + button.imsq-dd__btn { border-color: var(--imsq-red); }
.imsq-dd__list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 30;
    display: none;
    max-height: 260px;
    margin: 0;
    padding: 4px 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--imsq-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
    list-style: none;
}
.imsq-dd.is-open .imsq-dd__list { display: block; }
.imsq-form .imsq-dd__opt {
    margin: 0;
    padding: 11px 12px;
    color: var(--imsq-ink);
    font-size: 14px;
    line-height: 1.3;
    list-style: none;
    cursor: pointer;
}
.imsq-form .imsq-dd__opt[data-v=""] { color: var(--imsq-steel); }
.imsq-form .imsq-dd__opt[aria-selected="true"] { background: var(--imsq-green-tint); color: var(--imsq-green-dark); font-weight: 500; }

/* Remove row: the x at the row's end on desktop, "× Remove row" under the row on phones. */
.imsq-row__foot { display: none; }
@media (max-width: 760px) {
    .nf-form-cont.imsq-form .imsq-row__grid button.imsq-row__x { display: none; }
    .imsq-row__foot { display: flex; justify-content: center; }
    .imsq-cl.is-single .imsq-row__foot { display: none; }
    .nf-form-cont.imsq-form button.imsq-row__remove {
        width: auto;
        height: auto;
        margin: 0;
        padding: 6px 10px;
        border: 0;
        border-radius: 6px;
        background: none;
        color: var(--imsq-steel);
        font: 500 13px/1.4 'Inter', sans-serif;
        letter-spacing: 0;
        text-transform: none;
        box-shadow: none;
        cursor: pointer;
    }
    .nf-form-cont.imsq-form button.imsq-row__remove:hover { background: var(--imsq-paper); color: var(--imsq-red); }
}

/* Uploaded files: one line each with Remove, then "2 of 5 images uploaded ..." */
.imsq-fu__list { width: 100%; }
.imsq-fu__list:empty { display: none; }
.imsq-form .imsq-fu__files { margin: 8px 0 0; padding: 0; list-style: none; text-align: left; }
.imsq-form .imsq-fu__file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 6px;
    padding: 6px 6px 6px 10px;
    border: 1px solid var(--imsq-line);
    border-radius: 6px;
    background: #fff;
    list-style: none;
}
.imsq-fu__file-name { min-width: 0; overflow: hidden; color: var(--imsq-ink); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.nf-form-cont.imsq-form button.imsq-fu__remove {
    flex: none;
    width: auto;
    height: auto;
    margin: 0;
    padding: 4px 8px;
    border: 0;
    border-radius: 4px;
    background: none;
    color: var(--imsq-red);
    font: 500 12px/1.4 'Inter', sans-serif;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
    cursor: pointer;
}
.nf-form-cont.imsq-form button.imsq-fu__remove:hover { background: #fde8e8; }
.imsq-form .imsq-fu__note { margin: 6px 0 0; color: var(--imsq-steel); font-size: 12px; text-align: left; }
.imsq-row__upload .imsq-fu__list { flex-basis: 100%; }

/* Submit: show it's working while the request is out. */
.imsq-form .imsq-submit input[type="submit"]:disabled,
.imsq-form .imsq-submit input[type="submit"][disabled] { opacity: .7; cursor: progress; }

/* Name: First name | Last name side by side (one row on phones too). */
.imsq-form .imsq-name-split .nf-field-label {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.imsq-name { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.imsq-name__part { display: block; min-width: 0; margin: 0; }
.imsq-name__label {
    display: block;
    margin-bottom: 5px;
    color: var(--imsq-steel);
    font: 500 12px/1.4 'Inter', sans-serif;
}
.nf-form-cont.imsq-form .nf-error .imsq-name .imsq-in { border-color: var(--imsq-red); }

/* Shown the moment the RFQ is sent; Ninja Forms' own success message replaces it. */
.imsq-form.imsq-sending > .nf-form-wrap { display: none; }

/* Submit: keep the label white on hover / focus / press (theme and Ninja Forms
   hover styles switch the text to a dark colour that vanishes on the green). */
.nf-form-cont.imsq-form .imsq-submit input[type="submit"]:hover,
.nf-form-cont.imsq-form .imsq-submit input[type="submit"]:focus,
.nf-form-cont.imsq-form .imsq-submit input[type="submit"]:active {
    border-color: transparent;
    background: var(--imsq-green-dark) !important;
    color: #fff !important;
}