/*Styles for one time payment modal content*/
.content-one-time-payment-modal {
    display: flex;
    flex-direction: column;

    @media (min-width: 430px) {
        gap: 20px;
    }
    @media (max-width: 429px) {
        gap: 16px;
    }
}

.one-time-payment-modal__channel-info {
    display: flex;
    align-items: center;
    justify-content: center;

    @media (min-width: 430px) {
        gap: 10px;
    }
    @media (max-width: 429px) {
        gap: 8px;
    }
}

.one-time-payment-modal__channel-icon {
    display: flex;
    position: relative;
    aspect-ratio: 1;

    @media (min-width: 430px) {
        width: 28px;
        height: 28px;
    }
    @media (max-width: 429px) {
        width: 24px;
        height: 24px;
    }
}

.one-time-payment-modal__channel-icon > img {
    object-fit: cover;
    border: 0.5px solid var(--interface-colors-grey-border);
    width: 100%;
    height: 100%;

    @media (min-width: 430px) {
        border-radius: 6px;
    }
    @media (max-width: 429px) {
        border-radius: 4px;
    }
}

.one-time-payment-modal__channel-name {
    font-weight: 700;
    line-height: 150%;
    color: var(--brand-colors-dark-green);

    @media (min-width: 430px) {
        font-size: 14px;
    }
    @media (max-width: 429px) {
        font-size: 12px;
    }
}

.one-time-payment-modal__plans {
    display: flex;
    justify-content: center;

    @media (min-width: 430px) {
        gap: 12px;
    }
    @media (max-width: 429px) {
        gap: 4px;
    }
}

.one-time-payment-modal__plan {
    position: relative;
    cursor: pointer;
    flex: 1;

    @media (min-width: 430px) {
        max-width: 140px;
    }
    @media (max-width: 429px) {
        max-width: 130px;
    }
}

.one-time-payment-modal__radio {
    display: none;
}

.one-time-payment-modal__card {
    border: 1px solid var(--interface-colors-soft-grey);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="91" height="109" viewBox="0 0 91 109" fill="none"><g opacity="0.5"><path fill-rule="evenodd" clip-rule="evenodd" d="M62.4304 0.708164C62.4502 0.379099 62.108 0.134672 61.811 0.277725C44.0979 8.80917 38.3209 29.797 36.437 42.482C39.0607 41.6238 41.8371 41.1252 44.7028 41.04L51.183 41.5545C65.8062 44.3387 76.2923 57.7496 75.0872 72.9302C73.7952 89.2059 59.5538 101.353 43.2781 100.061C27.0025 98.7685 14.8558 84.5271 16.1478 68.2515C16.876 59.0786 21.7174 51.2172 28.7181 46.334C26.8349 43.2262 25.3886 38.7774 25.7486 32.5597C25.7677 32.2301 25.4299 31.9859 25.1323 32.1287C11.3792 38.7285 1.40179 52.3283 0.141699 68.202C-1.77146 92.3025 16.9385 113.448 41.9316 115.432C66.9247 117.416 88.7364 99.4872 90.6496 75.3867C92.1155 56.919 83.7663 45.3664 75.7657 34.296C68.534 24.2896 61.587 14.6772 62.4304 0.708164ZM33.0911 51.2262C27.2772 54.993 23.2186 61.3266 22.6281 68.7659C21.6202 81.4626 31.0958 92.5724 43.7926 93.5803C56.4893 94.5882 67.5991 85.1125 68.607 72.4158C69.6149 59.7191 60.1392 48.6093 47.4425 47.6014C43.2334 47.2673 39.1987 48.0853 35.6487 49.7908C35.5822 50.8114 35.5516 51.5956 35.5374 52.0936C35.5287 52.4006 35.2245 52.579 34.9537 52.4339C34.516 52.1995 33.8582 51.8085 33.0911 51.2262ZM49.8375 58.5047C49.9795 56.7153 48.644 55.1494 46.8546 55.0074C45.0651 54.8653 43.4993 56.2008 43.3572 57.9903L42.3774 70.3336C42.287 71.4718 42.8005 72.5738 43.7299 73.2369L51.0771 78.478C52.5384 79.5205 54.5682 79.181 55.6107 77.7196C56.6532 76.2582 56.3136 74.2284 54.8522 73.1859L49.0033 69.0135L49.8375 58.5047Z" fill="%23EBF0F1"/><path d="M28.7181 46.334C21.7174 51.2172 16.876 59.0786 16.1478 68.2515C14.8558 84.5271 27.0025 98.7685 43.2781 100.061C59.5538 101.353 73.7952 89.2059 75.0872 72.9302C76.2923 57.7496 65.8062 44.3387 51.183 41.5545L44.7028 41.04C41.8371 41.1252 39.0607 41.6238 36.437 42.482C35.9934 45.469 35.7656 47.9956 35.6487 49.7908C39.1987 48.0853 43.2334 47.2673 47.4425 47.6014C60.1392 48.6093 69.6149 59.7191 68.607 72.4158C67.5991 85.1125 56.4893 94.5882 43.7926 93.5803C31.0958 92.5724 21.6202 81.4626 22.6281 68.7659C23.2186 61.3266 27.2772 54.993 33.0911 51.2262C31.7689 50.2227 30.1221 48.651 28.7181 46.334Z" fill="%23EBF0F1"/><path d="M49.8375 58.5047C49.9795 56.7153 48.644 55.1494 46.8546 55.0074C45.0651 54.8653 43.4993 56.2008 43.3572 57.9903L42.3774 70.3336C42.287 71.4718 42.8005 72.5738 43.7299 73.2369L51.0771 78.478C52.5384 79.5205 54.5682 79.181 55.6107 77.7196C56.6532 76.2582 56.3136 74.2284 54.8522 73.1859L49.0033 69.0135L49.8375 58.5047Z" fill="%23EBF0F1"/></g></svg>');
    background-repeat: no-repeat;
    color: var(--brand-colors-dark-green);
    overflow: hidden;
    transition: all 0.2s ease;

    &:hover {
        border-color: var(--interface-colors-grey-icons-color-deep-grey);
    }

    @media (min-width: 430px) {
        border-radius: 12px;
    }
    @media (max-width: 429px) {
        border-radius: 8px;
    }

    @media (min-width: 590px) {
        background-position: bottom 0 right 8px;
    }
    @media (min-width: 430px) and (max-width: 589px) {
        background-position: bottom 0 right -28px;
    }
    @media (max-width: 429px) {
        background-position: bottom 0 right -12px;
        background-size: 60px;
    }
}

.one-time-payment-modal__card-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;

    @media (min-width: 430px) {
        padding: 7px 3px 0;
        margin-bottom: 24px;
    }
    @media (max-width: 429px) {
        padding: 5px 3px 0;
        margin-bottom: 18px;
    }
}

.one-time-payment-modal__title {
    font-weight: 600;

    @media (min-width: 430px) {
        font-size: 15px;
        line-height: 22px;
    }
    @media (max-width: 429px) {
        font-size: 13px;
        line-height: 18px;
        max-width: 60px;
    }
}

.one-time-payment-modal__duration {
    font-weight: 700;

    @media (min-width: 430px) {
        font-size: 14px;
        line-height: 21px;
    }
    @media (max-width: 429px) {
        font-size: 12px;
        line-height: 16px;
    }
}

.one-time-payment-modal__days {
    background: var(--interface-colors-soft-grey);
    display: inline-block;
    padding: 1px 6px;
    border-radius: 10px;
    font-weight: 600;
    line-height: 150%;

    @media (min-width: 430px) {
        font-size: 12px;
    }
    @media (max-width: 429px) {
        font-size: 10px;
    }
}

.one-time-payment-modal__price {
    font-weight: bold;
    text-align: center;
    background: var(--interface-colors-soft-grey);

    @media (min-width: 430px) {
        padding: 6px 0 8px;
        font-size: 16px;
        line-height: 22px;
    }
    @media (max-width: 429px) {
        padding: 4px 0 6px;
        font-size: 14px;
        line-height: 19px;
    }
}

.one-time-payment-modal__radio:checked + .one-time-payment-modal__card {
    border-color: var(--brand-colors-dark-green);
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="101" height="95" viewBox="0 0 101 95" fill="none"><g opacity="0.4"><path d="M39.2283 57.3186C39.2438 56.771 39.2775 55.9086 39.3506 54.7862C38.3783 55.2534 37.439 55.7811 36.538 56.3648C37.3816 57.0051 38.105 57.4351 38.5864 57.693C38.8842 57.8525 39.2187 57.6563 39.2283 57.3186Z" fill="url(%23paint0_linear_33792_173671)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M68.8031 0.808871C68.825 0.44699 68.4486 0.178188 68.122 0.335506C48.6424 9.71774 42.2894 32.7985 40.2176 46.7485C43.103 45.8048 46.1562 45.2565 49.3077 45.1628L56.4342 45.7285C72.5156 48.7904 84.0474 63.5387 82.7222 80.2332C81.3013 98.1319 65.6397 111.49 47.741 110.069C29.8422 108.648 16.4842 92.9866 17.9051 75.0879C18.7059 65.0002 24.0301 56.3549 31.7289 50.9847C29.6579 47.567 28.0674 42.6745 28.4633 35.8368C28.4843 35.4743 28.1128 35.2057 27.7855 35.3628C12.661 42.6208 1.68852 57.5768 0.302767 75.0335C-1.80118 101.537 18.7746 124.792 46.2601 126.974C73.7456 129.155 97.7325 109.439 99.8365 82.9347C101.449 62.6253 92.2668 49.9206 83.4683 37.7462C75.5154 26.7419 67.8756 16.1709 68.8031 0.808871ZM36.538 56.3648C30.1444 60.5073 25.681 67.4724 25.0316 75.6536C23.9232 89.6165 34.3438 101.834 48.3067 102.943C62.2696 104.051 74.4873 93.6304 75.5957 79.6675C76.7041 65.7046 66.2835 53.4869 52.3206 52.3785C47.6917 52.011 43.2547 52.9106 39.3506 54.7862C39.2775 55.9086 39.2438 56.771 39.2283 57.3186C39.2187 57.6563 38.8842 57.8525 38.5864 57.693C38.105 57.4351 37.3816 57.0051 36.538 56.3648ZM54.9544 64.3691C55.1106 62.4012 53.642 60.6793 51.674 60.523C49.7061 60.3668 47.9842 61.8355 47.8279 63.8034L46.7504 77.3777C46.651 78.6293 47.2156 79.8413 48.2378 80.5705L56.3176 86.3343C57.9247 87.4807 60.1569 87.1073 61.3034 85.5002C62.4498 83.8931 62.0764 81.6609 60.4693 80.5144L54.037 75.9259L54.9544 64.3691Z" fill="url(%23paint1_linear_33792_173671)"/></g><defs><linearGradient id="paint0_linear_33792_173671" x1="38.354" y1="126.346" x2="32.8958" y2="1.34" gradientUnits="userSpaceOnUse"><stop stop-color="%23FF003D"/><stop offset="0.553266" stop-color="%23EFCC14"/><stop offset="1" stop-color="%23CCFF00"/></linearGradient><linearGradient id="paint1_linear_33792_173671" x1="38.354" y1="126.346" x2="32.8958" y2="1.34" gradientUnits="userSpaceOnUse"><stop stop-color="%23FF003D"/><stop offset="0.553266" stop-color="%23EFCC14"/><stop offset="1" stop-color="%23CCFF00"/></linearGradient></defs></svg>');

    @media (min-width: 590px) {
        background-position: bottom 36px right 5px;
    }
    @media (min-width: 430px) and (max-width: 589px) {
        background-position: bottom 36px right -32px;
    }
    @media (max-width: 429px) {
        background-position: bottom 29px right -8px;
        background-size: 70px;
    }
}

.one-time-payment-modal__radio:checked + .one-time-payment-modal__card .one-time-payment-modal__days,
.one-time-payment-modal__radio:checked + .one-time-payment-modal__card .one-time-payment-modal__price {
    color: var(--interface-colors-white);
    background: var(--brand-colors-dark-green);
}

.one-time-payment-modal__bullets {
    display: flex;
    flex-direction: column;
    color: var(--brand-colors-dark-green);
    line-height: 150%;
    gap: 12px;

    @media (min-width: 430px) {
        font-size: 14px;
    }
    @media (max-width: 429px) {
        font-size: 12px;
    }
}

.one-time-payment-modal__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.one-time-payment-modal__list-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.one-time-payment-modal__list-item .icon {
    font-size: 20px;
}

.one-time-payment-modal__list-item .icon:before {
    color: var(--brand-colors-dark-green);
}