/* =========================================================
   GET APPROVED
   ========================================================= */

.approval-section {
    padding: 55px 0 70px;

    color: var(--carpal-navy);
}


/* ---------------------------------------------------------
   LEFT CONTENT
   --------------------------------------------------------- */

.approval-title {
    margin: 0 0 20px;

    font-size: 42px;
    font-weight: 300;
    line-height: 1.1;

    letter-spacing: -0.025em;
}


.approval-copy {
    max-width: 680px;
}


.approval-copy p {
    margin: 0 0 28px;

    font-size: 20px;
    line-height: 1.35;
}


.approval-how-title {
    margin: 30px 0 22px;

    font-size: 20px;
    font-weight: 700;
}


.approval-how-list {
    margin: 0;
    padding-left: 32px;

    font-size: 18px;
    line-height: 1.35;
}


.approval-how-list li {
    margin-bottom: 7px;
}


/* =========================================================
   FORM PANEL
   ========================================================= */

.approval-form-panel {
    width: 100%;
    max-width: 470px;
    min-height: 520px;

    margin-left: auto;

    padding: 55px 45px;

    background: #fff;

    border: 2px solid var(--carpal-navy);
    border-radius: 34px;

    color: var(--carpal-navy);

    display: block;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 991.98px) {

    .approval-form-panel {
        margin-top: 20px;
    }

}


@media (max-width: 767.98px) {

    .approval-section {
        padding: 40px 0 50px;
    }

    .approval-title {
        font-size: 34px;
    }

    .approval-copy p {
        font-size: 17px;
    }

    .approval-how-list {
        font-size: 16px;
    }

    .approval-form-panel {
        padding: 30px 22px 35px;

        border-radius: 34px;
    }

}

/* =========================================================
   APPROVAL INTRO PANEL
   ========================================================= */

.approval-intro {
    width: 100%;
    text-align: center;
}


.approval-intro-icon {
    width: 95px;

    margin: 0 auto 25px;
}


.approval-intro-icon img {
    display: block;

    width: 100%;
    height: auto;
}


.approval-intro-title {
    width: 100%;

    margin: 0 0 28px;

    text-align: center;

    font-family: var(--carpal-heading-font);
    font-size: 34px;
    font-weight: 400;
    line-height: 1.15;

    color: var(--carpal-navy);
}


.approval-intro-lead {
    max-width: 300px;

    margin: 0 auto 22px;

    text-align: center;

    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}


.approval-intro-help {
    max-width: 315px;

    margin: 0 auto 26px;

    text-align: center;

    font-size: 14px;
    line-height: 1.4;
}


.approval-start-btn {
    width: 210px;
    height: 46px;

    border: 0;
    border-radius: 24px;

    background: var(--carpal-pink);
    color: #fff;

    font-size: 18px;
    font-weight: 700;
    line-height: 1;

    text-transform: uppercase;
}

.approval-title strong {
    font-weight: 700;
}

/* =========================================================
   LIFESTYLE
   ========================================================= */

.approval-lifestyle {
    position: relative;

    width: 100%;
    height: 700px; 

    overflow: hidden;
}


.approval-lifestyle-video {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.approval-lifestyle-caption {
    position: absolute;

    left: 50%;
    top: 60%;

    transform: translate(-50%, -50%);

    text-align: center;

    font-family: var(--carpal-heading-font);
    font-size: 32px;
    line-height: 1.15;

    white-space: nowrap;
}


.approval-lifestyle-line1,
.approval-lifestyle-line2 {
    width: fit-content;

    margin: 0 auto;

    padding: 5px 15px;

    background: rgba(11, 76, 133, 0.92);
}


.approval-lifestyle-line1 {
    color: #fff;
}


.approval-lifestyle-line2 {
    margin-top: 3px;

    color: var(--carpal-green);

    font-weight: 700;
}


/* =========================================================
   APPROVAL STEP - GENERIC
   ========================================================= */

.approval-step {
    display: none;
    width: 100%;
    text-align: center;
}

.approval-step.active {
    display: block;
}


/* =========================================================
   STEP TITLE
   ========================================================= */

.approval-step-title {
    margin: 0 0 20px;

    font-family: var(--carpal-heading-font);
    font-size: 31px;
    font-weight: 400;
    line-height: 1.15;

    color: var(--carpal-navy);
}


/* =========================================================
   STEP ICON
   ========================================================= */

.approval-step-icon {
    display: flex;
    justify-content: center;
    align-items: center;

    margin: 0 auto 20px;
}

.approval-step-icon img {
    display: block;
    width: 105px;
    height: auto;
}

.approval-name-icon img {
    width: 110px;
}


/* =========================================================
   TEXT
   ========================================================= */

.approval-question-text {
    max-width: 330px;

    margin: 0 auto 8px;

    text-align: left;

    font-size: 15px;
    line-height: 1.3;

    color: var(--carpal-navy);
}

.approval-helper-text {
    max-width: 330px;

    margin: 0 auto 18px;

    text-align: left;

    font-size: 15px;
    font-style: italic;
    line-height: 1.3;

    color: var(--carpal-navy);
}


/* =========================================================
   INPUTS
   ========================================================= */

.approval-input {
    display: block;

    width: 100%;
    max-width: 330px;
    height: 42px;

    margin: 0 auto 12px;
    padding: 7px 17px;

    border: 1.5px solid var(--carpal-navy);
    border-radius: 22px;

    background: #fff;
    color: var(--carpal-navy);

    font-family: var(--carpal-body-font);
    font-size: 15px;
    font-style: italic;

    box-shadow: none;
}

.approval-input::placeholder {
    color: var(--carpal-navy);
    opacity: 1;
}

.approval-input:focus {
    outline: none;

    border-color: var(--carpal-pink);

    box-shadow:
        0 0 0 3px rgba(225, 125, 196, .14);
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.approval-nav {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 12px;

    margin-top: 18px;
}

.approval-next-btn,
.approval-back-btn {
    min-width: 105px;
    height: 38px;

    padding: 7px 20px;

    border-radius: 20px;

    font-size: 15px;
    font-weight: 700;
}

.approval-next-btn {
    border: 0;

    background: var(--carpal-navy);
    color: #fff;
}

.approval-next-btn.approval-section-btn {
    background: var(--carpal-pink);
}

.approval-back-btn {
    border: 1.5px solid var(--carpal-navy);

    background: #fff;
    color: var(--carpal-navy);
}


/* =========================================================
   VALIDATION
   ========================================================= */

.approval-input.is-invalid {
    border-color: #dc3545;
}

.approval-step .invalid-feedback {
    display: block;

    width: 100%;
    max-width: 330px;

    margin: -6px auto 10px;

    text-align: left;

    font-size: 12px;

    color: #dc3545;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    .approval-step-title {
        font-size: 28px;
    }

    .approval-nav {
        flex-direction: column-reverse;
    }

    .approval-next-btn,
    .approval-back-btn {
        width: 100%;
        max-width: 330px;
    }
}

/* =========================================================
   BIRTHDAY
   ========================================================= */

.approval-birthday-icon {
    margin-top: 25px;
    margin-bottom: 28px;
}

.approval-birthday-icon img {
    width: 110px;
    height: 110x;
    object-fit: contain;
}

.approval-date-wrap {
    width: 100%;
    max-width: 330px;

    margin: 28px auto 0;
}

.approval-date-input {
    width: 100%;
    max-width: 330px;

    margin: 0;

    text-align: center;

    font-style: normal;
    font-weight: 600;

    cursor: pointer;
}

.approval-date-input::-webkit-calendar-picker-indicator {
    cursor: pointer;
}

#approvalContact .approval-question-text,
#approvalContact .approval-helper-text {
    max-width: 330px;
}

.approval-select {
    appearance: auto;
    -webkit-appearance: auto;

    font-style: italic;
}

.approval-select option {
    font-style: normal;
}

/* =========================================================
   STEP 5 - RESIDENCE
   ========================================================= */

#approvalResidence {
    text-align: center;
}

.approval-residence-icon {
    margin-top: 28px;
    margin-bottom: 28px;
}

.approval-residence-icon img {
    width: 120px;
    height: auto;
}


.approval-question-group {
    width: 100%;
    max-width: 390px;

    margin: 0 auto 26px;
}


#approvalResidence .approval-question-text {
    max-width: 390px;

    margin-bottom: 10px;

    text-align: left;

    font-size: 18px;
    line-height: 1.25;
}


#approvalResidence .approval-input {
    max-width: 390px;
    margin-bottom: 0;
}


.approval-section-btn {
    min-width: 245px;

    background: var(--carpal-pink);
    color: #fff;
}


.approval-bottom-note {
    margin: 10px auto 0;

    color: var(--carpal-navy);

    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;

    text-align: center;
}

/* =========================================================
   STEP 6 - EMPLOYMENT STATUS
   ========================================================= */

.approval-question-center {
    text-align: center;
}

.approval-option-grid {
    display: grid;
    justify-content: center;
}

.approval-employment-options {
    grid-template-columns: repeat(2, 180px);

    gap: 28px 42px;

    margin: 28px auto 0;
}


.approval-icon-option {
    width: 180px;
    height: 180px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 10px;

    padding: 16px;

    border: 2px solid var(--carpal-navy);
    border-radius: 42px;

    background: #fff;
    color: var(--carpal-navy);

    transition: .15s ease-in-out;
}


.approval-icon-option img {
    width: 90px;
    height: 90px;

    object-fit: contain;
}


.approval-icon-option span {
    font-size: 21px;
    font-weight: 400;
    line-height: 1.05;
}


.approval-icon-option:hover {
    border-color: var(--carpal-green);
}


.approval-icon-option.selected {
    border: 7px solid var(--carpal-green);
    background: #fff;
}


@media (max-width: 575.98px) {

    .approval-employment-options {
        grid-template-columns: repeat(2, 135px);
        gap: 20px;
    }

    .approval-icon-option {
        width: 135px;
        height: 145px;

        border-radius: 32px;
    }

    .approval-icon-option img {
        width: 72px;
        height: 72px;
    }

    .approval-icon-option span {
        font-size: 17px;
    }

}

/* =========================================================
   CARPAL RANGE
   ========================================================= */

.carpal-range-wrap {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 55px;
    align-items: center;
    gap: 4px;

    width: 100%;
    max-width: 390px;

    margin: 6px auto 0;
}

.carpal-range-min {
    text-align: left;
}

.carpal-range-max {
    text-align: right;
}

.carpal-range-control {
    position: relative;

    height: 52px;

    display: flex;
    align-items: center;
}

.carpal-range-control input[type="range"] {
    position: relative;
    z-index: 2;

    width: 100%;
    height: 52px;

    margin: 0;

    appearance: none;
    -webkit-appearance: none;

    background: transparent;

    cursor: pointer;
}

.carpal-range-control::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 50%;

    height: 42px;

    transform: translateY(-50%);

    background: var(--carpal-navy);

    clip-path: polygon(
        0 50%,
        100% 0,
        100% 100%
    );

    pointer-events: none;
}

.carpal-range-control input[type="range"]::-webkit-slider-runnable-track {
    height: 1px;
    background: transparent;
}

.carpal-range-control input[type="range"]::-moz-range-track {
    height: 1px;
    background: transparent;
}

.carpal-range-control input[type="range"]::-webkit-slider-thumb {
    width: 54px;
    height: 54px;

    margin-top: -26px;

    appearance: none;
    -webkit-appearance: none;

    border: 0;
    border-radius: 50%;

    background: #8ce9f6;

    cursor: pointer;
}

.carpal-range-control input[type="range"]::-moz-range-thumb {
    width: 54px;
    height: 54px;

    border: 0;
    border-radius: 50%;

    background: #8ce9f6;

    cursor: pointer;
}

.carpal-range-value {
    position: absolute;

    z-index: 3;

    top: 50%;

    transform: translate(-50%, -50%);

    color: var(--carpal-navy);

    font-size: 18px;
    line-height: 1;

    white-space: nowrap;

    pointer-events: none;
}

/* =========================================================
   STEP 8 - SIDE HUSTLES
   ========================================================= */

.approval-side-hustle-options {
    grid-template-columns: repeat(2, 180px);

    gap: 42px;

    margin: 28px auto 0;
}


.approval-side-hustle-option {
    width: 180px;
    height: 180px;
}


.approval-side-hustle-details {
    display: none;

    margin-top: 40px;
}


.approval-side-hustle-details.active {
    display: block;
}


.approval-side-hustle-details .approval-question-group {
    max-width: 390px;

    margin-bottom: 32px;
}


.approval-side-hustle-details .approval-question-text {
    max-width: 390px;

    margin-bottom: 10px;

    text-align: center;

    font-size: 18px;
    line-height: 1.25;
}


.approval-side-hustle-note {
    margin: 35px auto 0;

    color: var(--carpal-navy);

    text-align: center;

    font-family: var(--carpal-heading-font);
    font-size: 20px;
    line-height: 1.35;
}


.approval-side-hustle-note strong {
    font-weight: 700;
}


@media (max-width: 575.98px) {

    .approval-side-hustle-options {
        grid-template-columns: repeat(2, 135px);
        gap: 20px;
    }

    .approval-side-hustle-option {
        width: 135px;
        height: 145px;
    }

}

/* =========================================================
   STEP 9 - A LITTLE PERSONAL
   ========================================================= */

.approval-personal-intro {
    max-width: 420px;

    margin: 0 auto 35px;

    text-align: center;

    color: var(--carpal-navy);

    font-size: 16px;
    line-height: 1.45;
}


.approval-yes-no-options {
    grid-template-columns: repeat(2, 180px);

    gap: 42px;

    margin: 28px auto 0;
}


.approval-yes-no-option {
    width: 180px;
    height: 180px;
}


.approval-personal-note {
    max-width: 420px;

    margin: 32px auto 0;

    text-align: center;

    color: var(--carpal-navy);

    font-size: 16px;
    line-height: 1.4;
}


.approval-personal-note-strong {
    margin-top: 18px;

    font-weight: 700;
}


@media (max-width: 575.98px) {

    .approval-yes-no-options {
        grid-template-columns: repeat(2, 135px);
        gap: 20px;
    }

    .approval-yes-no-option {
        width: 135px;
        height: 145px;
    }

}

/* =========================================================
   STEP 10 - CREDIT / CO-SIGNER
   ========================================================= */

#approvalCredit .approval-question-group {
    max-width: 390px;
    margin-left: auto;
    margin-right: auto;
}

#approvalCredit .approval-input {
    max-width: 390px;
}

.approval-credit-note {
    max-width: 410px;

    margin: 8px auto 38px;

    text-align: center;

    color: var(--carpal-navy);

    font-size: 15px;
    line-height: 1.4;
}

.approval-cosigner-group {
    margin-top: 10px;
}

.approval-credit-bottom-note {
    max-width: 410px;

    margin: 30px auto 0;

    text-align: center;

    color: var(--carpal-navy);

    font-size: 15px;
    line-height: 1.4;
}

/* =========================================================
   STEP 11 - REPOSSESSION / SIN
   ========================================================= */

#approvalRepossession .approval-question-group {
    max-width: 390px;
    margin-left: auto;
    margin-right: auto;
}

.approval-sin-group {
    margin-top: 36px;
}

.approval-sin-optout {
    width: 100%;
    max-width: 390px;

    margin: 4px auto 28px;

    text-align: left;
}

.approval-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    color: var(--carpal-navy);

    font-size: 14px;
    line-height: 1.35;

    cursor: pointer;
}

.approval-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;

    margin-top: 1px;

    flex: 0 0 auto;
}

#approvalSIN:disabled {
    background: #f2f2f2;
    opacity: .65;
}


/* =========================================================
   STEP 12 - VEHICLE TYPE
   ========================================================= */

.approval-vehicle-type-options {
    grid-template-columns: repeat(2, 180px);
    gap: 28px 42px;

    margin: 30px auto 0;
}


.approval-vehicle-type-option {
    width: 180px;
    height: 180px;
}


.approval-vehicle-type-option img {
    width: 130px;
    height: 130px;
    object-fit: contain;
}


.approval-vehicle-type-option span {
    font-size: 20px;
    line-height: 1.05;
}


@media (max-width: 575.98px) {

    .approval-vehicle-type-options {
        grid-template-columns: repeat(2, 135px);
        gap: 20px;
    }


    .approval-vehicle-type-option {
        width: 135px;
        height: 145px;
    }


    .approval-vehicle-type-option img {
        width: 72px;
        height: 72px;
    }


    .approval-vehicle-type-option span {
        font-size: 16px;
    }

}

/* =========================================================
   STEP 13 - BUDGET / TRADE
   ========================================================= */

#approvalBudget .approval-question-group {
    max-width: 390px;
    margin-left: auto;
    margin-right: auto;
}

.approval-budget-group {
    margin-top: 38px;
}

.approval-trade-group {
    margin-top: 42px;
}

.approval-trade-options {
    grid-template-columns: repeat(2, 180px);
    gap: 42px;
    margin: 28px auto 0;
}

.approval-trade-option {
    width: 180px;
    height: 180px;
}

.approval-trade-option span {
    max-width: 120px;
    text-align: center;
}

@media (max-width: 575.98px) {

    .approval-trade-options {
        grid-template-columns: repeat(2, 135px);
        gap: 20px;
    }

    .approval-trade-option {
        width: 135px;
        height: 145px;
    }

}

/* =========================================================
   STEP 14 - COMPLETION
   ========================================================= */

.approval-complete-card {
    width: 100%;
    max-width: 500px;

    margin: 0 auto;

    padding: 42px 36px;

    background: var(--carpal-light-blue);

    border-radius: 38px;

    text-align: center;
}


.approval-complete-title {
    margin: 0 0 25px;

    color: var(--carpal-navy);

    font-family: var(--carpal-heading-font);

    font-size: 38px;
    font-weight: 700;
    line-height: 1.1;
}


.approval-complete-text {
    max-width: 390px;

    margin: 0 auto 18px;

    color: var(--carpal-navy);

    font-size: 16px;
    line-height: 1.45;
}


.approval-complete-emphasis {
    font-weight: 700;

    margin-top: 25px;
}


.approval-referral-group {
    width: 100%;
    max-width: 390px;

    margin: 35px auto 0;
}


.approval-referral-group .approval-input {
    max-width: 390px;
}


.approval-complete-thank-you {
    margin: 35px auto 20px;

    color: var(--carpal-navy);

    font-family: var(--carpal-heading-font);

    font-size: 29px;
    font-weight: 700;
}


.approval-complete-nav {
    margin-top: 20px;
}


.approval-finish-btn {
    min-width: 180px;
    height: 52px;

    padding: 10px 30px;

    border: 0;
    border-radius: 28px;

    background: var(--carpal-green);
    color: var(--carpal-navy);

    font-family: var(--carpal-heading-font);

    font-size: 20px;
    font-weight: 700;

    cursor: pointer;
}


.approval-finish-btn:hover {
    opacity: .9;
}


@media (max-width: 575.98px) {

    .approval-complete-card {
        padding: 32px 20px;

        border-radius: 30px;
    }


    .approval-complete-title {
        font-size: 32px;
    }


    .approval-finish-btn {
        width: 100%;
        max-width: 330px;
    }

}

.trade-card-complete {
    background-color: var(--carpal-light-blue);
}