/* Progress Bar */
.progress-bar {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    margin-bottom: 24px;
}

.progress-bar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    position: relative;
}

.progress-bar__item:not(:first-child)::after {
    content: '';
    display: block;
    position: absolute;
    height: 1px;
    width: calc(100% - 16px - 34px);
    background-color: #E8E9E8;
    right: 100%;
    top: 17px;
    transform: translate(50%, -50%);
}

.progress-bar__item.active:not(:first-child)::after {
    background-color: #159C2A;
}

.progress-bar__btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid #80808099;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    font-weight: 500;
    color: #808080E5;
    font-family: 'urbanist';
    background-color: #F4F7F5;
    ;
    background-image: url("data:image/svg+xml,%3Csvg width='17' height='14' viewBox='0 0 17 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 6.5L6.5 11.5L15.5 2' stroke='white' stroke-width='3'/%3E%3C/svg%3E%0A");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 17px 14px;
    z-index: 2;
}

.progress-bar__btn:hover {
    border-color: #159C2A;
    color: #159C2A;
}

.progress-bar__item.active .progress-bar__btn {
    border-color: #159C2A;
    background-color: #159C2A;
    color: transparent;
}

.progress-bar__title {
    font-size: 14px;
    line-height: 20px;
    color: #232323A6;
    font-family: 'urbanist';
    font-weight: 500;
    text-align: center;
    /* text-wrap: nowrap; */
    z-index: 2;
}

.progress-bar__item.active .progress-bar__title {
    color: #159C2A;
    font-weight: 700;
}

.progress-bar__btn:hover~.progress-bar__title {
    color: #159C2A;
}

/* ===== Steps Wrapper ===== */
.steps {
    display: flex;
    flex-direction: column;
    /* gap: 24px; */
}

.step {
    position: relative;
    padding-bottom: 24px;
}

.step:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 50px;
    left: 25px;
    width: 1px;
    height: calc(100% - 50px);
    background-color: #33333380;
    z-index: 1;
}

.step.is-active::before {
    background-color: #159C2A;
}

/* ===== Header ===== */
.step__header {
    display: flex;
    align-items: center;
    gap: 13px;
    font-size: 24px;
    line-height: 32px;
    font-weight: 500;
    color: #23232399;
    margin-bottom: 24px;
}

/* Active header */
.step.is-active .step__header {
    color: #159C2A;
}

/* ===== Step Number ===== */
.step__number {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: transparent;
    border: 1px solid #33333399;
    color: #33333399;
    font-size: 27px;
    line-height: 1;
    text-align: center;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Active number */
.step.is-active .step__number {
    background-color: #159C2A;
    color: #fff;
    border-color: #159C2A;
}

/* ===== Body ===== */
.step__body {
    display: none;
    padding-inline-start: 63px;
}

.step.is-active .step__body {
    display: block;
}

/* ===== Card Options ===== */
.card-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.card-option {
    border: 1px solid #E3EAE5;
    border-radius: 6px;
    padding: 12px;
    cursor: pointer;
    background-color: #F4F7F5;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.card-option:hover {
    border-color: #159C2A;
}

.card-option input {
    display: none;
}

.card-option.is-selected {
    border-color: #159C2A;
    background-color: #E8EFEA;
}

/* ===== Buttons ===== */
.step__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 3px;
    border: none;
    background-color: #159C2A;
    color: #fff;
    font-family: 'urbanist';
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin: 34px auto 0;
    width: 200px;
}

.step__btn:hover {
    background-color: #28B028;
}

.card-option.is-selected {
    border-color: #159C2A;
    background-color: #E8EFEA;
}

/* ===== STEP 1 ===== */

/* Tabs */
.step1__tabs {
    display: grid;
    grid-auto-rows: 45px;
    gap: 0;
}

.step1__tabs.is-fluid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.step1__tabs.is-compact {
    grid-template-columns: repeat(3, 1fr);
    justify-content: start;
}

.step1__tab {
    white-space: nowrap;
    height: 40px;
    border: 1px solid #C4C4C4B2;
    background: #EEEEEE;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    color: #232323B2;
    cursor: pointer;
    margin-block-start: auto;
}

.step1__tab.is-active {
    height: 45px;
    background: #159C2A;
    border-color: #159C2A;
    color: #FFFFFF;
    border-radius: 7px 7px 0 0;
}

/* Card */
.step1__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(300px, 1fr);
    align-items: stretch;
    background-color: #fff;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

.step1__card {
    background: #fff;
    padding: 14px;
    position: relative;
    height: 100%;
    cursor: pointer;
}

.step1__card.is-active {
    padding: 10px;
}

/* Discount */
.step1__discount {
    position: absolute;
    top: 6px;
    right: 0;
    width: 80px;
    height: 80px;
    background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M39.9989 0V0.00390188H39.9833C37.3073 0.00390188 34.6703 1.0181 32.634 3.05054C32.6262 3.06225 30.2115 5.47693 30.2115 5.47693C28.1674 7.51716 25.4017 8.66398 22.5151 8.66398C19.0706 8.66788 19.0706 8.66788 19.0706 8.66788C13.3246 8.66788 8.66294 13.3295 8.66294 19.0797V22.5125C8.66294 25.3992 7.51611 28.1688 5.47592 30.209L2.82336 32.8733C-0.995592 36.9303 -0.940966 43.312 2.9911 47.3026C3.03791 47.3533 5.47598 49.7953 5.47598 49.7953C7.51618 51.8356 8.663 54.6051 8.663 57.4918L8.67081 61.2719C8.85415 66.8424 13.4143 71.3052 19.0236 71.3361C19.1952 71.3361 22.5227 71.34 22.5227 71.34L22.5266 71.3439H22.5305C25.4093 71.3439 28.175 72.4868 30.2113 74.5271L32.7274 77.0392C34.748 79.0171 37.3538 80 39.9986 80C42.5459 80 45.0619 79.0833 47.0514 77.2499L47.7145 76.5984L49.7898 74.5231C51.8339 72.4829 54.5996 71.3361 57.4862 71.3322L60.9346 71.3361C66.5285 71.3244 71.0886 66.9086 71.3223 61.3692L71.334 57.4878C71.334 54.6011 72.4769 51.8314 74.521 49.7913L76.9513 47.361C80.9848 43.3235 81.016 36.8055 77.0449 32.733L74.5211 30.213C72.477 28.1689 71.3301 25.4032 71.3301 22.5166L71.334 19.0876C71.334 13.3376 66.6842 8.67984 60.9463 8.66386C60.7357 8.66776 60.6381 8.66776 60.6381 8.66776H57.4902C54.6035 8.66776 51.8495 7.53263 49.8054 5.4924C47.3985 3.08546 47.3635 3.05043 47.3635 3.05043C45.3272 1.01409 42.6788 0 39.9989 0Z' fill='%2315AD2C'/%3E%3C/svg%3E%0A");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Inner */
.step1__card-inner {
    border: 1px solid #C4C4C4B2;
    border-radius: 3px;
    background: #fff;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
}

.step1__card.is-active .step1__card-inner {
    background: #159C2A;
}

/* Check */
.step1__check {
    width: 15px;
    height: 15px;
    border-radius: 3px;
    background: #159C2A;
    background-image: url("data:image/svg+xml,%3Csvg width='9' height='7' viewBox='0 0 9 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.39102 0.5L3.27486 5.33237L1.54826 3.70468L1 4.29568L3.33828 6.5L8 1.02712L7.39102 0.5Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    left: 20px;
    top: 20px;

    display: none;
}

/* Items */
.step1__item {
    text-align: start;
}

.step1__label {
    font-size: 14px;
    color: #232323CC;
    margin-bottom: 5px;
}

.step1__value {
    font-size: 18px;
    font-weight: 600;
    color: #232323;
}

.step1__card.is-active .step1__label {
    color: #ffffffCC;
}

.step1__card.is-active .step1__value {
    color: #ffffff;
}

/* Step 2 */
.terms-block {
    background: #fff;
    padding: 48px 24px 34px;
}

.terms-slider__label {
    font-weight: 600;
    font-size: 24px;
    color: #159C2A;
    text-align: center;
    margin-bottom: 24px;
}

#termsSlider {
    width: 100%;
    height: 10px;
    background: #159C2A1C;
    border-radius: 5px;
    appearance: none;
    outline: none;
    margin-bottom: 12px;
}

#termsSlider::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
    background: #159C2A;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0px 0px 5.56px 0px #00000033;
    cursor: pointer;
    appearance: none;
}

.terms-slider__range {
    display: flex;
    justify-content: space-between;
    font-weight: 500;
    font-size: 16px;
    color: #232323B2;
    margin-bottom: 48px;
}

.terms-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
    margin-bottom: 48px;
}

.terms-summary__item {
    background: #159C2A;
    padding: 20px;
    border-radius: 3px;
    color: #fff;
    text-align: center;
}

.terms-summary__value {
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
}

.terms-summary__label {
    font-weight: 400;
    font-size: 10px;
    line-height: 20px;
    letter-spacing: 0.25px;
}

.terms-summary__desc {
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 0.25px;
}

.terms-note {
    font-style: italic;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.25px;
    margin-bottom: 48px;
}

.terms-benefits__title {
    text-align: center;
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 24px;
    text-transform: capitalize;
}

.terms-benefits__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.terms-benefits__item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 16px;
    line-height: 21px;
    color: #232323;
}

.terms-benefits__item svg {
    flex-shrink: 0;
    width: 21px;
}

/* Step 3 */
.documents-block {
    background: #fff;
    padding: 10px 15px;
}

.documents-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 57px;
    gap: 15px;
}

.documents-title {
    font-weight: 600;
    font-size: 18px;
    text-transform: capitalize;
}

.documents-info {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
}

.documents-count {
    font-weight: 600;
    font-size: 15px;
    color: #DB1C10;
    text-transform: capitalize;
}

.documents-list {
    display: flex;
    flex-direction: column;
    gap: 55px;
    padding: 15px 0 0;
}

.document-group {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.document-group__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.document-group__title {
    display: flex;
    align-items: center;
    font-family: Urbanist;
    font-weight: 500;
    font-size: 14px;
    color: #232323B2;
    gap: 9px;
}

.document-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 3px;
    font-weight: 500;
    font-size: 15px;
    line-height: 100%;
    text-transform: capitalize;
    cursor: pointer;
    border: 1px solid transparent;
}

.document-btn:hover {
    opacity: 0.9;
}

.document-btn.drag {
    background: #808080;
    color: #fff;
}

.document-files {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.document-file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.document-file__info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}

.document-file__name {
    font-weight: 500;
    font-size: 15px;
    line-height: 20px;
    color: #232323;
}

.document-file__size {
    font-weight: 500;
    font-size: 12px;
    line-height: 100%;
    color: #808080;
}

.document-file__actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.document-btn.approved {
    background: #fff;
    border: 1px solid #159C2A;
    color: #232323;
}

.document-btn.online {
    background: #159C2A;
    border: 1px solid #159C2A;
    color: #fff;
}

@media (max-width: 1400px) {
    .step1__discount {
        width: 60px;
        height: 60px;
        font-size: 18px;
    }
}