/**=====================
    Auth scss
==========================**/

.log-in-section {
    width: 100%;
    margin: 0 auto;
    overflow: auto;
    position: relative;
    height: 100vh;

    .login-content {
        height: 100%;

        .image-col {
            width: 40%;
        }

        .content-col {
            width: 60%;

            @media (max-width: 1199.98px) {
                width: 100%;
            }
        }
    }
}

.image-contain {
    background-color: var(--primary-color);
    padding: 50px;
    text-align: center;
    flex-direction: column;
    @include flex_common;
    height: 100%;

    .logo {
        height: 50px;
        margin: 0 auto;
        display: flex;
        margin-bottom: 30px;
    }

    .auth-image {
        width: 40%;
    }

    .auth-content {
        color: $white;
        margin-top: 50px;

        h2 {
            text-transform: uppercase;
            line-height: 41px;
            font-weight: 700;
        }

        p {
            font-size: 16px;
            line-height: 20px;
        }

        .app-install {
            margin-top: 30px;
            @include flex_common;
            gap: 16px;

            img {
                height: 50px;
            }
        }
    }
}

.login-main {
    background-color: $section-bg;
    height: 100%;
    position: relative;
    @include flex_common;

    .language-dropdown {
        position: absolute;
        top: calc(16px + (40 - 16) * ((100vw - 320px) / (1920 - 320)));
        right: calc(16px + (25 - 16) * ((100vw - 320px) / (1920 - 320)));
        @include flex_common ($dis: flex, $align: center, $justify: end);
        gap: 6px;
        padding: 5px 8px;
        border-radius: 30px;
        border: 1px solid rgba($title-color, 0.10);
        background-color: $white;
        margin-bottom: 30px;
        width: max-content;
        margin-left: auto;

        [dir="rtl"] & {
            right: unset;
            left: calc(16px + (25 - 16) * ((100vw - 320px) / (1920 - 320)));
        }

        img {
            width: 24px !important;
            height: 24px !important;
            border-radius: 100%;
        }

        i {
            --Iconsax-Size: 18px;
            --Iconsax-Color: #00162E;
        }

        .language-btn {
            background: transparent;
            color: $title-color;
            border: none;
            line-height: 1;
            padding: 0;
            @include flex_common_1 ($dis: flex, $align: center);
            gap: 12px;

            span {
                @include flex_common_1 ($dis: inline-flex, $align: center);
                gap: 6px;
                line-height: 1;
                font-size: 16px;


                a {
                    font-size: 18px;
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    color: $title-color;

                }
            }
        }

        .onhover-show-div {
            min-width: 120px;
            transition: all 0.3s linear;
            position: absolute;
            z-index: 3;
            border: 1px solid rgba($title-color, 0.10);
            background-color: $white;
            opacity: 0;
            visibility: hidden;
            transform: translate3d(0, -5%, 0);
            top: 37px;
            right: 0;
            padding: 15px;
            border-radius: 4px;


            [dir="rtl"] & {
                left: 0;
                right: unset;
            }

            .lang {
                cursor: pointer;
                transition: all 0.3s;
                @include flex_common_1 ($dis: flex, $align: center);
                border: none;
                color: $title-color;
                background-color: transparent;
                gap: 8px;
                font-size: 13px;
                padding: 0;

                &:hover {
                    color: var(--primary-color);
                    transform: translateX(5px);

                    [dir="rtl"] & {
                        transform: translateX(-5px);
                    }
                }

                +li {
                    margin-top: 8px;
                }
            }

            a {
                font-size: 14px;
                display: flex;
                align-items: center;
                gap: 8px;
                color: $title-color;

            }
        }

        &:hover {
            .onhover-show-div {
                opacity: 1;
                visibility: visible;
                transform: none;
            }
        }
    }

    .login-card {
        width: 100%;
        @include flex_common;
        flex-direction: column;
        background-color: $white;
        width: $login-card;
        border-radius: $login-br;
        margin: 20px auto;
        padding-bottom: 40px;

        .login-title {
            width: 100%;
            border-bottom: 1px dashed $gray-color;
            padding: calc(16px + (25 - 16) * ((100vw - 320px) / (1920 - 320)));
            text-align: center;

            h2 {
                font-weight: 700;
                line-height: 1.4;
            }

            p {
                color: $light-color;
                padding-top: calc(4px + (6 - 4) * ((100vw - 320px) / (1920 - 320)));
                ;
                font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)));
                margin: 0;
            }
        }

        .login-detail {
            background-color: $section-bg;
            border-radius: 10px;
            width: calc(100% - calc(22px + (80 - 22) * ((100vw - 320px) / (1920 - 320))));
            margin: 30px 0 0;
            padding: calc(15px + (30 - 15) * ((100vw - 320px) / (1920 - 320)));

                label {
                    font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
                    font-weight: 500;
                    line-height: 1.3;
                    margin-bottom: calc(6px + (8 - 6) * ((100vw - 320px) / (1920 - 320)));
                    position: relative;

                    [dir="rtl"] & {
                        text-align: right;
                    }

                    &.error {
                        margin-bottom: 0;
                        margin-top: 10px;
                        font-weight: 400;
                        font-size: 13px;
                        opacity: 0.8;
                        color: $decline-color !important;
                        position: absolute;

                        &:before {
                            display: none;
                        }
                    }

                    &:before {
                        @include pos;
                        background-color: var(--primary-color);
                        height: calc(26px + (30 - 26) * ((100vw - 320px) / (1920 - 320)));
                        width: calc(3px + (4 - 3) * ((100vw - 320px) / (1920 - 320)));
                        top: 50%;
                        transform: translateY(-50%);
                        left: calc(-14px + (-30 - -14) * ((100vw - 320px) / (1920 - 320)));
                        border-radius: 100px;

                        [dir="rtl"] & {
                            left: unset;
                            right: calc(-14px + (-30 - -14) * ((100vw - 320px) / (1920 - 320)));
                        }
                    }
                }
            .form-group {
                position: relative;
                margin-bottom: calc(12px + (24 - 12) * ((100vw - 320px) / (1920 - 320)));
                    &:has(input.error){
                        .toggle-password{
                            top: 50% !important;
                        }
                    }
                &:has(label.error) {
                    margin-bottom: 48px;
                }

                i {
                    --Iconsax-Size: calc(18px + (20 - 18) * ((100vw - 320px) / (1920 - 320)));
                    --Iconsax-Color: #808B97;
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    left: 15px;

                    [dir="rtl"] & {
                        left: unset;
                        right: 15px;
                    }
                }

                .toggle-password {
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    right: 15px;
                    cursor: pointer;

                    [dir="rtl"] & {
                        left: 15px;
                        right: unset;
                    }

                    i {
                        position: relative;
                        inset: unset;
                        transform: unset;
                    }

                    .eye-slash {
                        display: none;
                    }

                    &.eye {
                        i.eye {
                            display: block;
                        }

                        i.eye-slash {
                            display: none;
                        }
                    }

                    &.eye-slash {
                        i.eye-slash {
                            display: block;
                        }

                        i.eye {
                            display: none;
                        }
                    }
                }


                .form-control {
                    border-radius: calc(6px + (8 - 6) * ((100vw - 320px) / (1920 - 320)));
                    padding: calc(9px + (12 - 9) * ((100vw - 320px) / (1920 - 320))) calc(9px + (12 - 9) * ((100vw - 320px) / (1920 - 320))) calc(9px + (12 - 9) * ((100vw - 320px) / (1920 - 320))) 45px;
                    background-color: $white;
                    color: rgba($title-color, 0.8) !important;
                    border: none;

                    [dir="rtl"] & {
                        padding: calc(9px + (12 - 9) * ((100vw - 320px) / (1920 - 320))) 45px calc(9px + (12 - 9) * ((100vw - 320px) / (1920 - 320))) calc(9px + (12 - 9) * ((100vw - 320px) / (1920 - 320)));
                    }





                    &:focus {
                        box-shadow: none;
                    }
                }
            }

            .forgot-pass {
                margin-top: 12px;
                text-align: end;

                [dir="rtl"] & {
                    text-align: start;
                }

                a {
                    font-size: 16px;
                    line-height: 20px;
                }
            }

            .btn {
                margin-top: calc(25px + (40 - 25) * ((100vw - 320px) / (1920 - 320)));
                border-radius: calc(6px + (8 - 6) * ((100vw - 320px) / (1920 - 320)));
                width: 100%;
                justify-content: center;
                font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
                box-shadow: none;
                padding: calc(7px + (10 - 7) * ((100vw - 320px) / (1920 - 320)));
            }

            .not-member {
                text-align: center;
                font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
                font-weight: 400;
                color: $light-color;
                line-height: 20px;
                padding-top: 10px;

                small {
                    color: var(--primary-color);
                    font-weight: 500;
                }
            }

            .phone-details,
            .phone-detail {
                .form-group {
                    position: relative;

                    label {
                        &.error {
                            position: absolute !important;
                            bottom: -30px;
                            left: 0;
                        }
                    }
                }

                .select2-container {
                    width: auto !important;
                }

                .select2-container--default .selection .select2-selection--single {
                    border-radius: 8px 0 0 8px;
                }

                &:has(.form-control.form-control-white) {
                    .select2-container--default .selection {
                        border: none;
                    }
                }
            }
        }

        .other-options {
            width: 100%;
            padding: calc(20px + (30 - 20) * ((100vw - 320px) / (1920 - 320))) 0 0;
        }

        .options {
            position: relative;
            text-align: center;
            width: max-content;
            margin: 0 auto;
            color: $light-color;
            font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
            display: flex;

            &:before,
            &:after {
                @include pos;
                background-color: $light-color;
                width: 22px;
                height: 1px;
                @include center(vertical);
            }

            &:before {
                left: -30px;

                [dir="rtl"] & {
                    left: unset;
                    right: -30px;
                }
            }

            &:after {
                right: -30px;

                [dir="rtl"] & {
                    right: unset;
                    left: -30px;
                }
            }
        }

        .social-media {
            @include flex_common;
            gap: calc(12px + (20 - 12) * ((100vw - 320px) / (1920 - 320)));
            margin-top: calc(12px + (24 - 12) * ((100vw - 320px) / (1920 - 320)));

            .social-icon {
                background-color: $section-bg;
                border-radius: 100%;
                border: 1px solid rgba($title-color, 0.1);
                height: calc(50px + (70 - 50) * ((100vw - 320px) / (1920 - 320)));
                width: calc(50px + (70 - 50) * ((100vw - 320px) / (1920 - 320)));
                @include flex_common;

                img {
                    width: calc(25px + (30 - 25) * ((100vw - 320px) / (1920 - 320)));
                    height: calc(25px + (30 - 25) * ((100vw - 320px) / (1920 - 320)));
                }
            }
        }

        @media (max-width: 575.98px) {
            width: 100%;
        }
    }
}

.terms {
    p {
        font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
        margin: 0;
        color: $light-color;
    }
}

.terms {
    position: relative;
    padding-bottom: 25px;

    label {
        position: absolute;
        bottom: -22px;

        &.error {
            color: #FF4B4B !important;
        }
    }
}

.login-img {
    width: 250px;
    padding-top: 30px;
}

.otp-field {
    @include flex_common_1 ($dis: flex, $align: center);
    gap: 12px;
    position: relative;

    input {
        position: relative;
        width: 50px;
        height: 50px;
        border: none;
        background-color: $white;
        border-radius: 8px;
        text-align: center;
    }

    label {
        &.error {
            position: absolute !important;
            bottom: -30px !important;
            left: 0;
        }
    }
}

.service-list-section {
    .row {
        [class*="col-"] {
            &:has(.no-cart-found) {
                &:first-child {
                    width: 100%;
                }
            }
        }
    }

    @media (max-width: 1199.98px) {
        .filter {
            position: fixed !important;
            top: 0 !important;
            left: calc(-300px + (-350 - -300) * ((100vw - 320px) / (1200 - 320)));
            transition: all 0.3s ease;
            z-index: 6;
            width: calc(300px + (350 - 300) * ((100vw - 320px) / (1200 - 320)));
            transform: unset;
            opacity: 1;
            visibility: visible;
            height: 100vh;
            border-radius: 0;
            overflow: auto;

            &.open {
                left: 0;
                box-shadow: 4px 3px 12px #77777721;
            }

            .provider-card {
                border-radius: 0;
                background-color: $white;

                .like-icon {
                    top: 17px;
                    right: unset;
                    left: 19px;
                    z-index: 2;
                }

                .filter-close {
                    text-align: right;
                    border: none;
                    background-color: transparent;
                    padding: 0;
                    line-height: 1;
                    cursor: pointer;
                    position: absolute;
                    top: 10px;
                    right: 10px;
                    z-index: 2;

                    .iconsax {
                        transform: rotate(45deg);
                        --Iconsax-Color: #00162E;
                        --Iconsax-Size: 28px;
                    }
                }

                .provider-detail {
                    .provider-content {
                        padding: 0 0 calc(12px + (20 - 12) * ((100vw - 320px) / (1920 - 320))) 0;
                        border-radius: 0;

                        .profile {
                            z-index: 1;
                            position: relative;
                            background-color: #F5F6F7;
                            margin: 0;
                            border-bottom: 1px solid #E5E8EA;
                            padding: 25px calc(12px + (20 - 12) * ((100vw - 320px) / (1200 - 320))) 15px;

                            ~* {
                                margin-inline: calc(12px + (20 - 12) * ((100vw - 320px) / (1200 - 320)));
                            }

                            ~ {

                                .profile-info,
                                .rating-bars {
                                    background-color: #F5F6F7;
                                    border-radius: 8px;
                                }
                            }

                            .provider-profile-img {
                                width: calc(82px + (104 - 82) * ((100vw - 320px) / (1200 - 320)));
                                height: calc(82px + (104 - 82) * ((100vw - 320px) / (1200 - 320)));
                            }

                            .delivered {
                                margin-top: calc(12px + (25 - 12) * ((100vw - 320px) / (1200 - 320)));
                                margin-bottom: 0;
                            }
                        }

                        .rating-bars {
                            .rating-bar {
                                .bar {
                                    background-color: $white;
                                }
                            }
                        }

                        .profile-bg {
                            height: auto;
                            background-color: transparent;
                        }
                    }
                }
            }
        }
    }
}