/* 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;
    min-height: 45px;
}

.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;
    transition: all .3s ease;
}

.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;
    min-height: 300px;
}

.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%;
    transition: all .3s ease;
}

.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;
}

/* Базовые настройки для контейнеров-слайдеров */
.step1__cards, .step1__tabs {
    display: flex !important; /* Перебиваем гриды, если они были */
    overflow: hidden;
    position: relative;
    width: 100%;
}

/* Обертка для элементов Swiper */
.step1__cards .swiper-wrapper, 
.step1__tabs .swiper-wrapper {
    display: flex;
}

.step1__cards .swiper-wrapper {
    align-items: stretch; 
}

/* Сама карточка должна растягиваться на всю высоту слайда */
.step1__card.swiper-slide {
    height: auto !important; /* Swiper любит ставить height: 100%, но auto здесь лучше */
    display: flex;
    flex-direction: column;
    transition: all .3s ease;
}

/* Внутренний контейнер карточки растягивается, заполняя пустое место */
.step1__card-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* Если нужно, чтобы контент внутри тоже распределялся равномерно:
       justify-content: space-between; 
    */
}

/* Сами карточки и табы */
.step1__card, .step1__tab {
    flex-shrink: 0;
    /* Swiper сам рассчитает ширину для 3 элементов, но можно задать базу */
    width: calc(33.333% - 14px); 
}

/* Контейнер для стрелок (нужно добавить в HTML или создать через JS) */
.slider-nav {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    position: absolute;
    top: 9px;
    right: 0;
}

.slider-arrow {
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #C4C4C4B2;
    background: #EEEEEE;
    color: #232323;
}

.slider-arrow.swiper-button-disabled {
    opacity: 0.5;
    pointer-events: none;
}

.slider-arrow svg {
    width: 12px;
    height: 12px;
    object-fit: contain;
    color: inherit;
}

.slider-arrow:hover {
    border-color: #159C2A;
    background: #159C2A;
    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;
    }
}

/* ===== LAYOUT MAIN ADAPTIVITY ===== */
.layout__main {
    transition: unset;
    flex-shrink: 0;
    box-sizing: border-box;
    /* Базовая ширина: 100% - сайдбар (230px) - правый отступ контента (50px) */
    width: calc(100% - 230px - 50px);
}

/* Сайдбар свернут */
.layout__main.main--sidebar-collapsed {
    width: calc(100% - 60px - 50px);
}

/* Панель заметок активна */
.layout__main.main--notes-active {
    width: calc(100% - 230px - 367px);
}

/* Комбинация: сайдбар свернут + заметки активны */
.layout__main.main--sidebar-collapsed.main--notes-active {
    width: calc(100% - 60px - 367px);
}

@media (max-width: 1600px) {
    .layout__main,
    .layout__main.main--sidebar-collapsed,
    .layout__main.main--notes-active,
    .layout__main.main--sidebar-collapsed.main--notes-active {
        width: 100%;
    }
}