@use "../theme/breakpoints" as *;
@use "../theme/colors" as *;

.two-columns {
    @media (max-width: $breakpoints-md) {
        background: url('/public/assets/theme/women-mobile.png') no-repeat left top fixed;
        background-size: cover;

        &:before {
            content: "";
            position: absolute;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgb(0, 0, 0) 90%, rgb(255, 255, 255) 100%);
            width: 100%;
            height: 100%;
        }
    }
}

.columns50-50 {
    > .grid {
        > div:first-of-type {
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
        }
    }
}

#coach {
    @media (max-width: $breakpoints-md) {
        position: relative;

        .btn.outlined {
            font-size: 1.4rem;
            width: 100%;
        }
    }

    .desktop {
        display: none;
        flex-wrap: wrap;
        justify-content: space-around;
        gap: 1rem 2rem;

        @media (min-width: $breakpoints-md) {
            display: flex;
        }

        .question {
            width: 100%;
            text-align: center;

            select {
                width: 100%;
                margin: 0 auto;
                display: block;
                max-width: 600px;
            }

            @media (min-width: 1100px) {
                width: calc(50% - 1rem);
                text-align: left;

                select {
                    width: 80%;
                }
            }

            &[data-question="has_budget"] {
                h3 {
                    text-align: center;
                }
                .flex {
                    justify-content: center;
                }
            }
        }
    }

    .mobile {
        display: block;

        @media (min-width: $breakpoints-md) {
            display: none;
        }
    }

    h2 {
        margin-top: 2rem;
    }

    .question {
        .btn.outlined {
            font-size: 1.2rem;
            border-radius: 3rem;
            text-align: center;
            padding: 0.8rem 1.5rem;

            &.active, &:hover {
                background: $main-color;
                color: white !important;
            }
        }

        .hidden {
            display: none;
        }

        .form-error {
            padding: 0.5rem;
        }
    }

    #calculator {
        max-width: 500px;
        margin: 2rem auto auto;

        > div {
            display: flex;
            flex-direction: column;
            gap: 0.8rem;
            margin-top: 0.8rem;
        }

        label {
            font-size: 1.2rem;
            font-weight: bold;
        }

        input {
            width: 100%;

            &.result {
                background: #1fb4d2cc;
                color: white;
            }
        }

        button {
            margin: 2rem auto auto;
        }
    }

    .flex {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .form-container {
        display: none;
    }

    .slider {
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        margin-top: 2rem;

        .slider-value {
            font-size: 1.5rem;
            font-weight: bold;
        }

        .slider-container {
            align-items: center;
            justify-content: center;
            margin-top: 1rem;

            @media (max-width: $breakpoints-md) {
                gap: 2rem;
            }
        }
    }

    .validation-button {
        margin: 2rem auto auto;
    }

    .budget-help-container {

        > div {
            border: 1px solid white;
            padding: 2rem;
            margin-top: 1rem;
            border-radius: 1rem;
            display: flex;
            justify-self: center;
            flex-direction: column;
            background: transparent linear-gradient(270deg, $linear-dark-two 0, $linear-dark-one 100%) 0 0 no-repeat padding-box;
            box-shadow: 0 0 5px white;
        }

        @media (min-width: 1100px) {
            width: calc(50% - 3rem);
        }

        @media (max-width: $breakpoints-md) {
            margin-top: 3rem;
        }
    }
}

.modal-body.simulators-modal {
    background: $linear-dark-one;

    * {
        color: white;
    }
}