@use "../mixins" as *;
@use "../media" as *;


.plan {
    margin-top: 95px;

    &__inner {
        padding-top: calc(var(--section-padding-y) * 2);
        padding-bottom: var(--section-padding-y);
        display: flex;
        flex-direction: column;
        row-gap: 4em;

        @include desktop-wide {
            padding-top: var(--section-padding-y);
        }
    }

    &__title {
        line-height: 100%;

        @include tablet {
            width: 80vw;
            margin-inline: auto;
        }

        @include mobile-s {
            width: 100%;
            margin-inline: 0;
        }
    }

    &__subtitle {
        @include fluid-text(20, 18);

        line-height: 1.25em;
        font-weight: 400;
        color: var(--color-dark-80);
        float: right;
        width: 66%;
        margin-top: 1.2em;
        transition: color var(--transition-duration-03);

        @include desktop-wide {
            float: none;
            width: 80vw;
        }
    }

    &__cards {
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        gap: 3em 1em;

        @include tablet {
            flex-wrap: wrap;
            justify-content: center;
        }

        @include mobile {
            align-items: center;
            flex-direction: column;
            gap: 4em;
        }
    }
}

.plan-card {
    background-color: var(--color-light-accent);
    border-radius: var(--border-radius-30);
    padding-inline: 1.5em;
    padding-block: 2.5em;
    flex: 1;
    display: flex;
    flex-direction: column;
    row-gap: 1.5em;
    position: relative;
    cursor: pointer;
    transition: background-color var(--transition-duration-03), box-shadow var(--transition-duration-03);

    &--active {
        background-color: var(--color-light);
        box-shadow: 0 0 10px 1px var(--color-accent);
    }

    @include hover {
        &:not(.plan-card--active) {
            box-shadow: 0 0 10px 1px var(--color-accent-70);
        }
    }

    &__label {
        @include flex-center;

        position: absolute;
        top: -1.5em;
        right: 1.5em;
        height: var(--button-height);
        padding-inline: 1.5em;
        background-color: var(--color-light-accent-2);
        border-radius: var(--border-radius-15);
        font-size: 20px;
        transition: background-color var(--transition-duration-03), color var(--transition-duration-03);

        &--accent {
            background-color: var(--color-accent);
            color: var(--color-stable-dark);
        }
    }


    &__header {
        display: flex;
        flex-direction: column;
        height: 140px;
        row-gap: 1em;
        padding-bottom: 30px;
        border-bottom: 1px solid var(--color-light-accent-3);
        transition: border-bottom var(--transition-duration-03);

        @include desktop {
            min-height: 12em;
            justify-content: space-around;
        }

        @include tablet {
            min-height: 120px;
        }

        @include mobile {
            min-height: fit-content;
        }
    }

    & .price {

        &__value,
        &__currency {
            @include fluid-text(58, 52);

            font-weight: bold;

            &--secondary {
                @include fluid-text(26, 22);

                font-weight: bold;
            }
        }

        &__term {
            @include fluid-text(24, 18);
        }
    }

    &__profit {
        border-top: 1px solid var(--color-light-accent-3);
        flex: 1;
        transition: border-top var(--transition-duration-03);

        &-header {
            margin-block: 1.5em 1em;
        }

        &-list {
            display: flex;
            flex-direction: column;
            row-gap: 1em;
        }

        &-item {
            display: flex;
            font-size: var(--font-size-alt);

            & p {
                margin-left: 0.5em;
            }
        }

        &-checkbox {
            @include square(24px);

            background: var(--color-light-accent-2);
            border-radius: var(--border-radius-5);
            min-width: 24px;
            align-self: flex-start;
            user-select: none;
            transition: background-color var(--transition-duration-03), color var(--transition-duration-03);

            &--accent {
                background-color: var(--color-accent);
                color: var(--color-stable-dark);
            }

            & svg {
                transform: translateX(50%);
            }
        }

    }

    @include desktop {
        padding-inline: 1.5em;
        padding-block: 1.5em;
        flex: 1 0 320px;
        max-width: 600px;
    }

    @include mobile-s {
        padding-inline: 1em;
        padding-block: 2.5em;
    }
}