.button--primary.button--large {
    cursor: pointer;
    transition: .3s;
    background: linear-gradient(180.00deg, rgba(34, 197, 94, 1),rgba(22, 228, 98, 1));
}

.button--primary.button--large:hover {
    filter: brightness(1.05);
    transform: translateY(-4px);
}

article.benefit-card {
    box-shadow: 0px 68px 19px 0px rgba(37, 46, 55, 0),0px 43px 17px 0px rgba(37, 46, 55, 0.01),0px 24px 15px 0px rgba(37, 46, 55, 0.03),0px 11px 11px 0px rgba(37, 46, 55, 0.04),0px 3px 6px 0px rgba(37, 46, 55, 0.05),0px 0px 0px 0px rgba(37, 46, 55, 0.05);
}

article.tariff-card {
    padding: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.tariff-card__header {
    padding-top: 13px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    overflow: hidden;
    z-index: 2;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.tariff-card__header h3 {
    position: relative;
    z-index: 2;
}

.tariff-card__header:after {
    box-shadow: 0px 21px 6px 0px rgba(37, 46, 55, 0),0px 13px 5px 0px rgba(37, 46, 55, 0.01),0px 7px 4px 0px rgba(37, 46, 55, 0.05),0px 3px 3px 0px rgba(37, 46, 55, 0.09),0px 1px 2px 0px rgba(37, 46, 55, 0.1),0px 0px 0px 0px rgba(37, 46, 55, 0.1);
    background: linear-gradient(180.00deg, rgba(34, 197, 94, 1) 0%,rgba(22, 228, 98, 1) 100%);
    width: 280px;
    height: 70px;
    position: absolute;
    content: '';
    top: -15px;
    left: -10px;
    transform: rotate(-2deg);
}

.tariff-card__header h3 {
    color: white;
    margin-bottom: 28px;
}

ul.tariff-card__features {
    padding-left: 15px;
    padding-right: 15px;
}

button.tariff-card__button {
    width: 190px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

li.feature--included {
    position: relative;
}

li.feature--included::after {
    background: url(/img/advicefood-list-check.svg);
    background-position: center center;
    background-size: cover;
    width: 14px;
    height: 10px;
    position: absolute;
    left: 0px;
    content: '';
    top: 4px;
}

span.price-amount {
    background: linear-gradient(180.00deg, rgba(0, 0, 0, 1),rgba(64, 64, 64, 1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}


article.tariff-card {
    transition: .3s;
    cursor: pointer;

    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform;
}

article.tariff-card:hover {
    transform: translateY(-10px);
}

button.tariff-card__button {
    transition: .3s;
    cursor: pointer;
}

button.tariff-card__button:hover {
    background-color: rgb(0, 186, 0);
}

article.tariff-card:hover {
    border-color: limegreen;
    box-shadow: 0 2px 5px limegreen;
}

main:after {
    position: absolute;
    content: '';
    background: url(/img/advicefood-bg-lines.svg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 50%;
    left: 0;
    top: 40px;
    z-index: -1;
}


@media (min-width: 1100px) {
    main:after {
        left: -50px;
        width: 110%;
        top: 20px;
        height: 470px;
    }
}

#popups {
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 9999;
    left: 0;
    top: 0;
}

#popups .mask {
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0.30;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}

.modal {
    width: 90vw;
    max-width: 600px;
    border-radius: 15px;
    padding: 15px;
    background: rgba(249, 250, 251, 1);
    display: block;
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    max-height: 80vh;
    overflow-y: auto;
}

.modal h2 {
    color: black;
    font-size: 1.75rem;
    text-align: center;
    font-family: "AA";
    font-weight: 500;
    margin: 0;
    margin-bottom: 3px;
    line-height: 0.9;
}

.modal__subtitle {
    text-align: center;
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.7);
    margin: 0;
    margin-bottom: 20px;
}

.form__group input {
    border-radius: 42px;
    box-shadow: 0px 31px 9px 0px rgba(0, 0, 0, 0),0px 20px 8px 0px rgba(0, 0, 0, 0.01),0px 11px 7px 0px rgba(0, 0, 0, 0.03),0px 5px 5px 0px rgba(0, 0, 0, 0.04),0px 1px 3px 0px rgba(0, 0, 0, 0.05),0px 0px 0px 0px rgba(0, 0, 0, 0.05);
    background: rgba(255, 255, 255, 1);
    width: 100%;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 1);
    outline: none;
    padding-left: 15px;
    font-size: 1.125rem;
    font-family: "AA";
}

.form__group input::placeholder {
    color: rgba(0, 0, 0, 0.5);
}

.modal form {
    background: transparent;
    padding: 0;
}

.form__group label {
    margin-bottom: 3px;
    font-size: 1.125rem;
    opacity: 0.8;
    display: none;
}

.modal input[type="email"] {
    margin-bottom: 12px;
}

.modal input[type="password"] {
    margin-bottom: 4px;
}

.form__links a {
    color: rgba(127, 127, 127, 1);
    font-size: 1rem;
    text-decoration: underline;
}

.form__divider {
    position: relative;
    margin-top: 20px;
    margin-bottom: 20px;
    height: 1px;
    width: 100%;
    background: rgba(127, 127, 127, 1);
}

.form__divider span {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-60%);
    top: 50%;
    z-index: 2;
    padding: 0px 5px;
    background: rgba(249, 250, 251, 1);
}

.form__social {
    display: flex;
    gap: 12px;
    margin-top: 15px;
    flex-direction: column;
    margin-bottom: 12px;
}

.form__social button {
    border-radius: 42px;
    box-shadow: 0px 31px 9px 0px rgba(0, 0, 0, 0),0px 20px 8px 0px rgba(0, 0, 0, 0.01),0px 11px 7px 0px rgba(0, 0, 0, 0.03),0px 5px 5px 0px rgba(0, 0, 0, 0.04),0px 1px 3px 0px rgba(0, 0, 0, 0.05),0px 0px 0px 0px rgba(0, 0, 0, 0.05);
    background: rgba(255, 255, 255, 1);
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 11px;
    border: 0;
    font-family: "AA";
    font-size: 1rem;
    font-weight: 500;
    text-align: left;
}

.form__social button span {
    height: 28px;
    width: 28px;
}

.modal .btn--submit {
    border-radius: 42px;
    background: rgb(0, 0, 0);
    padding: 12px 53px;
    max-width: 100%;
    color: white;
    font-weight: 500;
    font-size: 1.125rem;
    font-family: "AA";
    border: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

button.auth--link {
    background: transparent;
    text-decoration: underline;
    color: black;
    padding: 0;
    margin: 0;
    border: 0;
    font-size: 1rem;
    font-family: "AA";
    font-weight: 500;
}

.modal__subtitle {
    margin-bottom: 12px;
}

.modal .btn--submit {
    padding-left: 20px;
    padding-right: 20px;
}

.form__links {
    margin-bottom: 20px;
}

.form__checkbox {
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
    margin-bottom: 5px;
    
}

.form__checkbox input {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 5px;
    border: 2px solid black;
    align-items: center;
    margin: 0;
    transition: .3s;
}

.form__checkbox label {
    font-size: 0.875rem;
    width: 70%;
}

.form__checkbox input:checked {
    background: #000;
}

.checkbox__cont {
    height: 16px;
    width: 16px;
    position: relative;
}

.checkbox__cont:after {
    position: absolute;
    content: '';
    background: url(/img/check-input.svg);
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 4;
    width: 9px;
    height: 6px;
    opacity: 0;
    transition: .3s;
}

.checkbox__cont:has(input:checked):after {
    opacity: 1;
}

.form__social {
    gap: 8px;
    margin-bottom: 8px;
}

.modal input[type="email"] {
    margin-bottom: 8px;
}

.form__links {
    margin-bottom: 10px;
}

@media (min-width: 460px) {
    .modal .btn--submit {
        padding-left: 54px;
        padding-right: 54px;
    }
}


@media (min-width: 580px) {
    .modal form {
        border: 0;
    }

    .form__social {
        flex-direction: row;
        gap: 12px;
    }

    .form__social button {
        flex: 0.5;
    }

    .form__checkbox label {
        width: unset;
    }
}

@media (min-width: 750px) {

    /* .modal__subtitle,
    button.auth--link {
        font-size: 1.25rem;
    } */

    .modal h2 {
        margin-top: 24px;
    }

    .modal input[type="email"],
    .modal input[type="password"] {
        padding-left: 25px;
    }

    .form__social {
        gap: 15px;
        margin-bottom: 15px;
    }

    .modal input[type="email"] {
        margin-bottom: 15px;
    }

    .form__links {
        margin-bottom: 20px;
    }

    .form__checkbox {
        margin-bottom: 8px;
    }
}

@media (min-width: 1024px) {
    /* .form__social {
        margin-bottom: 60px;
    } */

    .form__checkbox *,
    .form__checkbox {
        cursor: pointer;
    }

    .modal {
        padding-bottom: 26px;
        padding-top: 26px;
        padding-left: 28px;
        padding-right: 28px;
    }

    .modal .btn--submit {
        transition: .3s;
    }

    .modal .btn--submit:hover {
        background: rgb(62, 62, 62);
    }
}

.modal {
    transition: .3s;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}

.modal.active {
    opacity: 1;
    pointer-events: auto;
    z-index: 4;
}

.mask.hide,
#popups.hide {
    z-index: -2;
    opacity: 0;
    pointer-events: none;
}

.auth--brand {
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
}

.auth--brand strong {
    font-weight: 500;
    font-size: 1.5rem;
}