/* ///////////////////////////////////////////////////////////

28. account
/////////////////////////////////////////////////////////// */ 
@use '../abstracts/variables' as *;


.login {
    &-area {
        position: relative;
        z-index: 1;
    }
    &-content {
        border-radius: 14px;
        background: #FFF;
        box-shadow: 0px 1px 6px 0.5px rgba(27, 42, 82, 0.14);
        padding: 70px 35px 70px;
        @media #{$sm}{
            padding: 70px 30px 70px;
        }
        &-subtitle {
            color: #7D25EC;
            text-align: center;
            font-size: 14px;
            font-weight: 500;
            text-transform: uppercase;
            display: block;
            margin-bottom: 6px;
            line-height: 20px;
        }
        &-title {
            color: #1B2A52;
            text-align: center;
            font-size: 30px;
            font-weight: 700;
            line-height: 1.03;
            letter-spacing: -0.9px;
            margin-bottom: 40px;
        }
        &-link {
            text-align: center;
            margin-bottom: 48px;
            p {
                color: #6A738B;
                font-size: 14px;
                font-weight: 500;
                line-height: 22px;
                margin-bottom: 0;
                a {
                    color: #7D25EC;
                }
            }
        }
        &-account {
            display: flex;
            gap: 15px;
            padding-top: 55px;
            @media #{$xs}{
                flex-wrap: wrap;
            }
            &-item {
                width: 100%;
                border-radius: 8px;
                background: #F8FAFF;
                box-shadow: 0px 1px 1px 0px rgba(27, 42, 82, 0.14);
                height: 46px;
                display: flex;
                align-items: center;
                justify-content: center;
                span {
                    color: #1B2A52;
                    font-size: 14px;
                    font-weight: 500;
                    line-height: 24px;
                }
                a {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                }
            }
        }
    }
    &-form-item {
        position: relative;
        z-index: 1;
        i {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            right: 20px;
            color: #7F879E;
            font-size: 16px;
        }
        input {
            width: 100%;
            border: 1px solid rgba(27, 42, 82, 0.07);;
            border-radius: 8px;
            height: 46px;
            line-height: 46px;
            padding: 0 20px;
            color: #7F879E;
            font-size: 14px;
            font-weight: 400;
            padding-right: 50px;
        }
        button {
            width: 100%;
            border: none;
            border-radius: 10px;
            background: #7D25EC;
            height: 46px;
            line-height: 46px;
            color: #fff;
            font-size: 14px;
            font-weight: 600;
        }
    }
    &-break {
        position: relative;
        z-index: 1;
        &::before {
            position: absolute;
            left: 0;
            top: 0;
            content: "";
            width: 100%;
            height: 1px;
            background: rgba(4, 0, 23, 0.14);
        }
        span {
            display: block;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background: #fff;
            font-size: 14px;
            line-height: 1;
            padding: 5px 11px;
            color: rgba(4, 0, 23, 0.7);
        }
    }
    &-condition {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 27px;
        @media #{$xxs}{
            flex-wrap: wrap;
        }
        a {
            color: #7D25EC;
            font-size: 14px;
            font-weight: 500;
            line-height: 24px;
            display: block;
        }
        .condition-checkbox {
            color: #6A738B;
            font-size: 14px;
            font-weight: 500;
            line-height: 24px;
            position: relative;
            z-index: 1;
            cursor: pointer;
            display: inline-block;
            user-select: none;
            padding-left: 26px;
            input {
                position: absolute;
                opacity: 0;
                cursor: pointer;
                height: 0;
                width: 0;
                &:checked ~ .checkmark {
                    background-color: transparent;
                }
                &:checked ~ .checkmark:after {
                    display: block;
                }
            }
            .checkmark {
                position: absolute;
                top: 50%;
                left: 0;
                transform: translateY(-50%);
                height: 16px;
                width: 16px;
                border-radius: 4px;
                border: 1px solid rgba(27, 42, 82, 0.7);
                background-color: transparent;
                &::after {
                    content: "";
                    position: absolute;
                    display: none;
                }
                &:after {
                    left: 4.5px;
                    top: 1px;
                    width: 5px;
                    height: 10px;
                    border: solid #1B2A52;
                    border-width: 0 1px 1px 0;
                    transform: rotate(45deg);
                }
            }
        }
    }
}

.login-shape-1 {
    position: absolute;
    left: 14%;
    top: 22%;
}
.login-shape-2 {
    position: absolute;
    left: 47%;
    transform: translateX(-50%);
    bottom: 37%;
}
.login-shape-3 {
    position: absolute;
    right: 9%;
    bottom: 38%;
}