/* .pmform is present on the <form> itself whether it's placed inside a modal or
   directly on a page via its shortcode — the .pm_form_modal-scoped rule alone left
   inline-placed forms' buttons completely unstyled, since there's no modal wrapper
   in that case. Both rules kept identical so nothing changes for existing modal usage. */
.pm_form_modal button.btn,
.pmform button.btn {
	background-color: #495057 !important;
    font-weight: 700;
    color: #fff;
    padding: 15px;
    border: 0;
    width: 100% !important;
    cursor: pointer;
}

.pmform input.form-control {
    margin-top: 5px !important;
    margin-bottom: 15px;
}

.pmform label {
    font-weight: 700;
}

.pmform fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

.pmform legend {
    display: block;
    width: auto;
    font-weight: 700;
    font-size: inherit;
    padding: 0;
    margin-bottom: 0.5rem;
}

.pmform .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.pmform.no-labels label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.pmform .d-none {
    display: none;
}
.pmform #voi-container {
    margin-top: 1rem;
}
.pmform .voi-selection-heading {
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.pmform #pmf_contact_us_messageField.form-control {
    height: 150px !important;
    resize: none;
}
.pmform h4.pmform-section-heading {
    color: #1a6fbd !important;
    font-size: 1.1rem !important;
    font-weight: 700;
    margin-top: 1.75rem;
    margin-bottom: 0.5rem;
    border-bottom: 2px solid #1a6fbd;
    padding-bottom: 4px;
}

/* Trade-In redesign: heading + a separate thin gray divider below it, instead of a
   colored line directly under the text. */
#pm_form_trade_in h4.pmform-section-heading {
    font-size: 1.6rem !important;
    margin-top: 1rem;
    margin-bottom: 0.75rem;
    padding-bottom: 12px;
    border-bottom: 1px solid #dee2e6;
}

#pm_form_trade_in .pmform-security-notice {
    background-color: #d9ecf7;
    padding: 12px 16px;
    margin: 12px 0;
}

#pm_form_trade_in .pmform-required-note {
    margin: 0 0 4px;
}

/* Two-column layout — scoped to trade_in only so no other live pm-form's (single
   column, always has been) layout changes. Sequential 2-up placement naturally
   reproduces the mockup's pairing (adjacent fields land side by side; an odd field
   out, like Zip Code, is simply left alone on the row) — full-width items just need
   to span both columns explicitly. */
#pm_form_trade_in .field-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 24px;
}

#pm_form_trade_in .field-container > h4.pmform-section-heading,
#pm_form_trade_in .field-container > fieldset,
#pm_form_trade_in .field-container > .pmform-vin-lookup-group,
#pm_form_trade_in .field-container > .pmform-full-width {
    grid-column: 1 / -1;
}

.pmform .pmform-vin-lookup-group {
    background-color: #d9ecf7;
    padding: 16px;
    margin-bottom: 20px;
}

.pmform .pmform-vin-lookup-label {
    display: block;
    margin-bottom: 10px;
}

.pmform .pmform-vin-lookup-row {
    display: flex;
    gap: 12px;
}

.pmform .pmform-vin-lookup-row input.form-control {
    flex: 1;
    margin: 0 !important;
}

/* #pm_form_trade_in-scoped (an ID selector) so this reliably beats .pmform
   button.btn's width:100%/background !important — a plain class selector like
   .pmform-vin-search-btn has LOWER specificity than .pmform button.btn (which
   also matches the button element type), and would otherwise lose the cascade,
   forcing the button to fill the whole row and squeeze the input beside it. */
#pm_form_trade_in .pmform-vin-search-btn {
    width: auto !important;
    flex-shrink: 0;
    padding: 12px 24px !important;
    background-color: #14385c !important;
}

.pmform .pmform-vin-caption {
    font-size: 0.85rem;
    color: #495057;
    margin: 10px 0 0;
}

.pmform .pmform-vin-message {
    margin: 10px 0 0;
    font-weight: 700;
}

.pmform .pmform-vin-message--success {
    color: #1e7e34;
}

.pmform .pmform-vin-message--error {
    color: #c0392b;
}

.pmform .pmform-file-upload {
    border: 1px dashed #b6bcc4;
    padding: 16px;
    margin-bottom: 15px;
}

.pmform .pmform-file-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pmform .pmform-file-count {
    color: #6b7178;
}

/* Same specificity issue as .pmform-vin-search-btn above — ID-scoped so it
   reliably beats .pmform button.btn's width:100%/background !important. */
#pm_form_trade_in .pmform-file-add {
    width: auto !important;
    padding: 8px 20px !important;
    background-color: #e9ecef !important;
    color: #1c1e21 !important;
}

.pmform .pmform-file-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.pmform .pmform-file-thumb {
    position: relative;
    width: 70px;
    height: 70px;
    background-color: #f4f5f6;
    background-size: cover;
    background-position: center;
}

.pmform .pmform-file-remove {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    line-height: 18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    cursor: pointer;
}

.pmform-thank-you {
    text-align: center;
    padding: 20px 0;
}

#pm_form_trade_in button.btn[type="submit"] {
    background-color: #14385c !important;
    width: auto !important;
    padding: 12px 32px !important;
    text-transform: uppercase;
}