#close-buy-modal {
    transition: color 0.2s ease, transform 0.2s ease;
}

#close-buy-modal:hover {
    color: #2441ff;
    transform: scale(1.1);
}



.buy-modal-left,
.buy-modal-right {
    cursor: pointer;
    position: relative;
    flex: 1;
    transition: flex 1s ease, filter 1s ease, border-radius 1s ease;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    will-change: transform;
}

.buy-modal-content p {
    max-height: 40vh;
    overflow-y: auto;
    margin-bottom: 1rem;
    opacity: 1;
    transition: opacity 0s ease-in-out, white-space 0s ease-in-out;
}

/*!!!*/

@media (min-width: 340px) {

    #buy-modal .buy-modal-left.active .buy-modal-content p,
    #buy-modal .buy-modal-right.active .buy-modal-content p {
        white-space: nowrap;
    }
}

/*!!!*/
#buy-modal.has-active .buy-modal-left:not(.active) .buy-modal-content p,
#buy-modal.has-active .buy-modal-right:not(.active) .buy-modal-content p {
    white-space: normal;
    opacity: 0;
}

/*!!!*/
.buy-modal-left.active .buy-modal-bg {
    filter: saturate(1) brightness(1);
}

/*!!!*/
.buy-modal-left:not(.active) .buy-modal-bg {
    filter: saturate(0.2) brightness(0.5);
}

/*!!!*/
.buy-modal-bg {
    transition: filter 1s ease-in-out;
}

/*!!!*/
.buy-modal-right.active .buy-modal-bg {
    filter: brightness(1);
}

/*!!!*/
.buy-modal-right:not(.active) .buy-modal-bg {
    filter: brightness(0.5);
}

/*!!!*/
.vertical-label {
    transition: opacity 0.2s ease-in-out, transform 0.1s ease-in-out;
}

/*!!!*/
#buy-modal.has-active .buy-modal-left:not(.active) .vertical-label,
#buy-modal.has-active .buy-modal-right:not(.active) .vertical-label {
    opacity: 1;
    transform: scale(1);
}

/*!!!*/
.buy-modal-left.active {
    flex: 4;
    filter: saturate(1);
    z-index: 100;
}

/*!!!*/
@media (min-width: 1024px) {
    .buy-modal-left.active {
        border-radius: 3rem;
    }
}

/*!!!*/
.buy-modal-right.active {
    flex: 4;
    filter: saturate(1);
}

/*!!!*/
@media (min-width: 1024px) {
    .buy-modal-right.active {
        border-radius: 3rem;
    }
}

/*!!!*/
.buy-modal-left:not(.active) {
    flex: 1;
    filter: saturate(1);
}

/*!!!*/
.buy-modal-right:not(.active) {
    flex: 1;
    filter: saturate(0.2);
}

/*!!!*/
#buy-modal.has-active .buy-modal-left.active .subscribe-btn,
#buy-modal.has-active .buy-modal-right.active .subscribe-btn {
    opacity: 1;
    height: auto;
    margin-top: 1rem;
    padding: 0.75rem 1.5rem;
    overflow: visible;
    transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
    transition-delay: 0.2s;
}

/*!!!*/
.buy-modal-right.active .buy-modal-content p.font-bold {
    -webkit-text-stroke: 0.5px #000000;
}


.plan-mask {
    position: relative;
    /* Для позиционирования псевдоэлемента */
    background: transparent;
    /* Убираем исходный фон */
    width: 100%;
}

/* Псевдоэлемент для полупрозрачного фона с маской */
.plan-mask::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 2rem;
    background-color: #1d282f80;
    /* Полупрозрачный фон bg-[#1d282f]/50 */
    border: 1px solid #37415180;
    /* border-gray-700/50 */
    z-index: -1;
    /* Помещаем фон под контент */
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 0%, #111827 45%, #111827 100%);
    will-change: transform;
}

.plan-mask2 {
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 0%, #000000 75%, #111827 100%);
    opacity: 70%;
}

/* Анимация полного расширения левой части */
.buy-modal-left.active-full {
    flex: 1 1 100% !important;
    min-width: 0px !important;
    transition: flex 1s ease-in-out;
    z-index: 10;
}

.buy-modal-right.shrink {
    flex: 0 1 0% !important;
    min-width: 0px !important;
    opacity: 0;
    transition: flex 1s ease-in-out, opacity 1s ease-in-out;
    /* Должно совпадать с .buy-modal-left.active-full */
    pointer-events: none;
}

/* Исчезновение старого контента */
.buy-modal-content.fade-out {
    opacity: 0 !important;
    transition: opacity 0.7s ease-in-out;
    pointer-events: none;
}

/* Появление нового блока */
#subscription-plan.show {
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: opacity 0.5s ease-in-out 0s;
    /* Задержка после анимации ширины */
}

/* Исчезновение нового блока */
#subscription-plan {
    transition: opacity 0.5s ease-in-out;
}





#subscription-plan.show #back-btn {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Reverse анимация ширины */
.buy-modal-left.reverse {
    flex: 4 !important;
    min-width: 0 !important;
    transition: flex 1s ease;
}

.buy-modal-right.reverse {
    flex: 1 !important;
    opacity: 1;
    min-width: 0 !important;
    transition: flex 1s ease, opacity 1s ease;
    pointer-events: auto;
}

/* Настройки появления изначального контента */
.buy-modal-content.fade-in {
    opacity: 1 !important;
    transition: opacity 1s ease-in-out;
    pointer-events: auto;
}