/* Shared presentation for the active New, Sell, and Test Drive forms. */
.customer-form-flow,
.customer-form-modal {
    --customer-form-control-height: 48px;
    --customer-form-label-size: 1rem;
    --customer-form-text: #111827;
    --customer-form-muted: #667085;
    --customer-form-border: #d0d5dd;
    --customer-form-focus: var(--bs-primary, #377dff);
    --customer-form-focus-rgb: var(--bs-primary-rgb, 55, 125, 255);
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--customer-form-text);
}

.customer-form-flow *,
.customer-form-modal * {
    box-sizing: border-box;
}

.customer-form-flow .step__headline,
.customer-form-modal .modal-title {
    margin-top: 0;
    margin-bottom: 0.75rem;
    color: var(--customer-form-text);
    font-size: clamp(28px, 3vw, 36px);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.02em;
}

.customer-form-modal .modal-title {
    font-size: clamp(28px, 4vw, 32px);
}

.customer-form-flow .step__intro {
    margin-bottom: 1.5rem;
}

.customer-form-flow .step__intro p,
.customer-form-flow .step__advice,
.customer-form-modal .modal-body p {
    margin-bottom: 0;
    color: var(--customer-form-muted);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.55;
}

.customer-form-flow .form-group,
.customer-form-modal .form-group {
    /*margin-bottom: 1.25rem;*/
}

.customer-form-flow .form-label,
.customer-form-modal .form-label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--customer-form-text);
    font-size: var(--customer-form-label-size);
    font-weight: 600;
    line-height: 1.35;
}

.customer-form-flow .form-label .text-danger,
.customer-form-modal .form-label .text-danger {
    color: #b42318 !important;
}

.customer-form-flow .form-control,
.customer-form-flow .form-select,
.customer-form-modal .form-control,
.customer-form-modal .form-select {
    width: 100%;
    min-height: 48px;
    min-height: var(--customer-form-control-height);
    padding: 0.75rem 1rem;
    border: 1px solid var(--customer-form-border);
    border-radius: 10px;
    background-color: #fff;
    color: var(--customer-form-text);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.customer-form-flow .form-control::placeholder,
.customer-form-modal .form-control::placeholder {
    color: var(--customer-form-muted);
    opacity: 1;
}

.customer-form-flow textarea.form-control,
.customer-form-modal textarea.form-control {
    min-height: 120px;
    line-height: 1.5;
    resize: vertical;
}

.customer-form-flow .form-control:focus,
.customer-form-flow .form-select:focus,
.customer-form-modal .form-control:focus,
.customer-form-modal .form-select:focus {
    border-color: var(--customer-form-focus);
    box-shadow: 0 0 0 0.2rem rgba(var(--customer-form-focus-rgb), 0.16);
}

.customer-form-flow .form-control:focus-visible,
.customer-form-flow .form-select:focus-visible,
.customer-form-modal .form-control:focus-visible,
.customer-form-modal .form-select:focus-visible,
.customer-form-flow .btn:focus-visible,
.customer-form-modal .btn:focus-visible,
.customer-form-flow .form-check-input:focus-visible,
.customer-form-modal .form-check-input:focus-visible,
.customer-form-flow .choices:focus-within,
.customer-form-modal .choices:focus-within,
.customer-form-flow .input-group:focus-within,
.customer-form-modal .input-group:focus-within {
    outline: 3px solid rgba(var(--customer-form-focus-rgb), 0.32);
    outline-offset: 2px;
    box-shadow: 0 0 0 0.2rem rgba(var(--customer-form-focus-rgb), 0.16);
}

.customer-form-flow .form-control:disabled,
.customer-form-flow .form-select:disabled,
.customer-form-modal .form-control:disabled,
.customer-form-modal .form-select:disabled {
    background-color: #f2f4f7;
    color: #98a2b3;
    cursor: not-allowed;
}

.customer-form-flow .input-group,
.customer-form-modal .input-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
}

.customer-form-flow .input-group > .form-control,
.customer-form-flow .input-group > .form-select,
.customer-form-modal .input-group > .form-control,
.customer-form-modal .input-group > .form-select,
.customer-form-flow .input-group-text,
.customer-form-modal .input-group-text {
    min-height: 48px;
    min-height: var(--customer-form-control-height);
    border-radius: 0;
}

.customer-form-flow .input-group > :first-child,
.customer-form-modal .input-group > :first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.customer-form-flow .input-group > :last-child,
.customer-form-modal .input-group > :last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.customer-form-flow .input-group-text,
.customer-form-modal .input-group-text {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border: 1px solid var(--customer-form-border);
    background-color: #f9fafb;
    color: var(--customer-form-text);
    font-size: 1rem;
    font-weight: 600;
}

.customer-form-flow .input-group > .form-control,
.customer-form-flow .input-group > .form-select,
.customer-form-modal .input-group > .form-control,
.customer-form-modal .input-group > .form-select {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

.customer-form-flow .input-group .btn,
.customer-form-modal .input-group .btn {
    min-height: 48px;
    min-height: var(--customer-form-control-height);
    white-space: nowrap;
}

.customer-form-flow .choices,
.customer-form-modal .choices {
    width: 100%;
    margin-bottom: 0;
    font-size: 1rem;
}

.customer-form-flow .choices__inner,
.customer-form-modal .choices__inner {
    display: flex;
    align-items: center;
    min-height: 48px;
    min-height: var(--customer-form-control-height);
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    border: 1px solid var(--customer-form-border);
    border-radius: 10px;
    background-color: #fff;
    color: var(--customer-form-text);
    font-size: 1rem;
    line-height: 1.5;
}

.customer-form-flow .choices__list--single,
.customer-form-modal .choices__list--single {
    padding: 0;
}

.customer-form-flow .choices__input,
.customer-form-modal .choices__input {
    min-height: 48px;
    min-height: var(--customer-form-control-height);
    padding: 0.75rem 1rem;
    border: 1px solid var(--customer-form-border);
    border-radius: 10px;
    font-size: 1rem;
}

.customer-form-flow .choices__list--dropdown,
.customer-form-flow .choices__list[aria-expanded],
.customer-form-modal .choices__list--dropdown,
.customer-form-modal .choices__list[aria-expanded] {
    z-index: 5;
    margin-top: 0.25rem;
    border: 1px solid var(--customer-form-border);
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 10px 24px rgba(16, 24, 40, 0.12);
}

.customer-form-flow .choices__item--choice,
.customer-form-modal .choices__item--choice {
    padding: 0.7rem 1rem;
    color: var(--customer-form-text);
    font-size: 1rem;
}

.customer-form-flow .choices[data-type*='select-one']::after,
.customer-form-modal .choices[data-type*='select-one']::after {
    border-color: var(--customer-form-muted) transparent transparent;
}

.customer-form-flow .choices.is-focused .choices__inner,
.customer-form-flow .choices.is-open .choices__inner,
.customer-form-modal .choices.is-focused .choices__inner,
.customer-form-modal .choices.is-open .choices__inner {
    border-color: var(--customer-form-focus);
    box-shadow: 0 0 0 0.2rem rgba(var(--customer-form-focus-rgb), 0.16);
}

.customer-form-flow .form-check,
.customer-form-modal .form-check {
    display: flex;
    align-items: flex-start;
    min-height: 48px;
    margin-bottom: 0;
    padding: 0.5rem 0;
}

.customer-form-flow .form-check-input,
.customer-form-modal .form-check-input {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: 0;
    margin-top: 0.125rem;
    margin-right: 0.625rem;
    float: none;
    border-color: var(--customer-form-border);
}

.customer-form-flow .form-check-input:checked,
.customer-form-modal .form-check-input:checked {
    border-color: var(--customer-form-focus);
    background-color: var(--customer-form-focus);
}

.customer-form-flow .form-check-label,
.customer-form-modal .form-check-label {
    color: var(--customer-form-muted);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
}

.customer-form-flow .form-check-label a,
.customer-form-modal .form-check-label a {
    font-weight: 600;
}

.customer-form-flow .form-text,
.customer-form-modal .form-text {
    margin-top: 0.375rem;
    color: var(--customer-form-muted);
    font-size: 0.875rem;
    line-height: 1.45;
}

.customer-form-flow .invalid-feedback,
.customer-form-flow label.error,
.customer-form-modal .invalid-feedback,
.customer-form-modal label.error {
    display: block;
    margin-top: 0.375rem;
    color: #b42318;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.4;
}

.customer-form-flow .form-check > .invalid-feedback,
.customer-form-flow .form-check > label.error,
.customer-form-modal .form-check > .invalid-feedback,
.customer-form-modal .form-check > label.error {
    flex: 0 0 100%;
    width: 100%;
}

.customer-form-flow .valid-feedback,
.customer-form-modal .valid-feedback {
    margin-top: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.4;
}

.customer-form-flow .form-control.is-invalid,
.customer-form-flow .form-select.is-invalid,
.customer-form-modal .form-control.is-invalid,
.customer-form-modal .form-select.is-invalid {
    border-color: #d92d20;
}

.customer-form-flow .choices:has(select.is-invalid) .choices__inner,
.customer-form-modal .choices:has(select.is-invalid) .choices__inner {
    border-color: #d92d20;
}

.customer-form-flow .btn,
.customer-form-modal .btn {
    min-height: 48px;
    min-height: var(--customer-form-control-height);
    padding: 0.75rem 1.25rem;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
}

.customer-form-flow .btn-captcha,
.customer-form-modal .btn-captcha {
    min-width: 7.25rem;
}

.customer-form-flow .new-step-process-footer__cta-container,
.customer-form-flow .teb-footer,
.customer-form-modal form > .d-grid {
    gap: 0.75rem;
}

.customer-form-flow .row.g-3,
.customer-form-flow .row.g-4,
.customer-form-modal form {
    row-gap: 1.25rem;
}

.customer-form-modal .modal-content {
    overflow: visible;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 24px 56px rgba(16, 24, 40, 0.2);
}

.customer-form-modal .modal-header {
    padding: 1.5rem 1.5rem 1rem;
    border-bottom: 1px solid #eaecf0;
}

.customer-form-modal .modal-body {
    padding: 1.5rem;
}

.customer-form-modal .modal-header .btn-close:focus-visible {
    outline: 3px solid rgba(var(--customer-form-focus-rgb), 0.32);
    outline-offset: 2px;
    box-shadow: 0 0 0 0.2rem rgba(var(--customer-form-focus-rgb), 0.16);
}

@media (max-width: 767.98px) {
    .customer-form-flow .step__headline,
    .customer-form-modal .modal-title {
        font-size: 28px;
        line-height: 1.2;
    }

    .customer-form-flow .step__intro {
        margin-bottom: 1.25rem;
    }

    .customer-form-flow .form-control,
    .customer-form-flow .form-select,
    .customer-form-flow .input-group .btn,
    .customer-form-flow .choices__inner,
    .customer-form-modal .form-control,
    .customer-form-modal .form-select,
    .customer-form-modal .input-group .btn,
    .customer-form-modal .choices__inner {
        min-height: 48px;
        min-height: var(--customer-form-control-height);
        font-size: 16px;
    }

    .customer-form-flow .btn,
    .customer-form-modal .btn {
        min-height: 48px;
        min-height: var(--customer-form-control-height);
    }

    .customer-form-flow .new-step-process-footer__cta-container,
    .customer-form-flow .teb-footer {
        flex-direction: column;
    }

    .customer-form-flow .new-step-process-footer__cta-container .btn,
    .customer-form-flow .teb-footer .btn,
    .customer-form-modal form > .d-grid .btn {
        width: 100%;
    }

    .customer-form-modal .modal-dialog {
        margin: 0.75rem;
    }

    .customer-form-modal .modal-header,
    .customer-form-modal .modal-body {
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }

    .customer-form-flow .form-control:focus-visible,
    .customer-form-flow .form-select:focus-visible,
    .customer-form-modal .form-control:focus-visible,
    .customer-form-modal .form-select:focus-visible,
    .customer-form-flow .btn:focus-visible,
    .customer-form-modal .btn:focus-visible,
    .customer-form-flow .choices:focus-within,
    .customer-form-modal .choices:focus-within,
    .customer-form-flow .input-group:focus-within,
    .customer-form-modal .input-group:focus-within {
        outline: 3px solid rgba(var(--customer-form-focus-rgb), 0.32);
        outline-offset: 2px;
        box-shadow: 0 0 0 0.2rem rgba(var(--customer-form-focus-rgb), 0.16);
    }
}

@media (prefers-reduced-motion: reduce) {
    .customer-form-flow .form-control,
    .customer-form-flow .form-select,
    .customer-form-modal .form-control,
    .customer-form-modal .form-select {
        transition: none;
    }
}