@import ../_common

.header-wrapper
    box-shadow: 0 2px 6px rgba(0,0,0,0.1)
    background: $white
    transition: .3s ease

.dashboard-secA
    background: $white
    padding: 10rem 0 4rem
    @include media(991)
        padding: 2rem 0
        margin-top: calc( var(--headerheight) + var(--mobilesearch) )
    @include media(767)
        padding: 2rem 0
    > .container
        &:has(.dznjn-wrap,.wish-list-wrap-dashboard)
            @include media(520)
                // padding: 0
    .flex
        gap: 4rem
        .aside-left,.aside-right
            position: sticky
            top: calc(var(--headerfixed) + 10px)
            height: 100%
        .aside-left
            flex: 0 1 23%
            max-width: 23%
            width: 100%
            border-radius: 6px
            background: #edf9d9
            @include after
            @include media(1024)
                flex: 0 1 22%
                max-width: 22%
            @include media(991)
                display: none

            

            &::after
                background: url(/assets/icon/leaf.svg) no-repeat
                background-size: 70% auto
                background-position: right -50px bottom 0px
                z-index: 0
                opacity: .1
            .aside-left-wrap
                position: relative
                z-index: 1
            .profile-col
                padding: 30px 25px 
                border-bottom: 1px solid #0000002B
                --ico: 78px
                text-align: center
                @include media(1024)
                    --ico: 60px
                    padding: 20px 20px 25px
                .ico
                    height: var(--ico)
                    width: var(--ico)
                    border-radius: 50%
                    overflow: hidden
                    line-height: 0
                    display: inline-block
                    img
                        height: 100%
                        width: 100%
                        object-fit: cover
                .wlcm
                    font-size: 18px
                    line-height: 1.2
                    color: $black
                    @include font(500)
                    margin: 14px 0 4px
                .name-usr,.fld-usr
                    color: $text
                    a
                        color: inherit
                        &:hover
                            color: $secondary
                .name-usr
                    font-size: 13px
                    line-height: 18px
                    margin-bottom: 12px
                .fld-usr
                    font-size: 12px
            .nav-col
                padding: 30px 30px 12rem 0px
                background-position: 0 100%
                background-size: 100% auto
                @include media(1024)
                    display: block
                ul
                    li
                        position: relative
                        &:not(:last-child)
                            margin-bottom: 12px
                            @include media(1024)
                                margin-bottom: 8px
                        a
                            padding-left: 100px
                            
                            color: $text
                            font-size: 15px
                            @include font(500)
                            display: block
                            @include media(1024)
                                font-size: 14px
                            &:hover,&.active
                                color: $primary
                            &.active::before
                                top: 50%
                                transform: translateY(-50%)
                                content: ''
                                position: absolute
                                left: 0px
                                width: 80px
                                height: 1.6px
                                background: $primary

                        // &:last-child
                        //    > a
                        //         color: #ff514e
                        &:has(.has-sub-men-li)
                            >a
                                background-image: url(../../icon/arrow-down-gray.svg)
                                background-repeat: no-repeat
                                background-position: 100% 50%
                                padding-right: 1rem
                                &.active,&:hover
                                    background-image: url(../../icon/arrow-down-secondary.svg)
                        .has-sub-men-li
                            border: 1px solid #dfdfdf
                            background: #f2f6ff
                            padding: 12px 15px
                            margin-top: 1rem
                            border-radius: 5px
                            display: none
                            ul
                                li
                                    &:not(:last-child)
                                        margin-bottom: 10px
                                    a
                                        font-size: 14px
        .aside-right
            flex: 1
            @include media(991)
                margin-left: 0
            .aside-right-wrap
                .form-title
                    margin-bottom: 20px
                    text-transform: capitalize
                    font-family: $Poppins
                    // padding: 20px 18px 0px
                    font-size: 16px
                    font-weight: 600
                    @include media(675)
                        font-size: 16px
                        // margin-bottom: 2rem
                        text-align: center
                .form-grid
                    --item: 2
                    --gaplr: 53px
                    --gaptb: 28px
                    @include media(991)
                        --gaplr: 30px
                    @include media(675)
                        --item: 1

                    .form-group

                        
                        &::before
                            background: var(--text)
                        &::after
                            width: 0
                            background: var(--text)
                     
                           
                        label
                            color: $text
                        input,textarea
                            &:focus,&.valid
                                outline: none
                                & ~ label
                                    color: $black
                    .submit-grp
                        @include media(675)
                            text-align: center
                        .btn
                            --padding: 54px
                            @include media(675)
                                font-size: 14px
                                --padding: 32px
            .ukrjh
                justify-content: space-between
                margin-bottom: 35px
                &.ywxax
                    flex-direction: column
                    gap: 1rem
                    .idioq
                        .form-group
                            &:has(.custom-select)
                                width: 130px
                h5
                    @include font(600)
                .idioq
                    display: flex
                    --paddingleftright: 12px
                    --inputsize: 38px
                    gap: 13px
                    .qwuic
                        --labelfontbefore: 14px
                        &::before,&::after
                            display: none
                        input,.custom-select
                            border: 1px solid #DBDBDB
                            border-radius: 5px !important
                            font-size: 14px
                    .btn
                        --height: var(--inputsize)
                        --padding: 20px
            .yokqa-wrap
                border: 1px solid #E3E3E3
                padding: 30px
                border-radius: 5px
                .yokqa
                    .form
                        .media-upload-file
                            display: grid
                            grid-template-columns: repeat(5,1fr)
                            grid-gap: 25px 24px
                            li
                                background: #F4F4F4
                                padding: 45px 15px
                                border-radius: 5px
                                overflow: hidden
                                position: relative
                                text-align: center
                                aspect-ratio: 1.2
                                .plu-ico,.pdf-ico
                                    margin-left: auto
                                    margin-right: auto
                                    margin-bottom: 5px
                                .plu-ico
                                    width: 18px
                                    height: 18px
                                .pdf-ico
                                    width: 25px
                                    height: 25px
                                input
                                    position: absolute
                                    top: 0
                                    left: 0
                                    right: 0
                                    bottom: 0
                                    height: 100%
                                    width: 100%
                                    appearance: none
                                    opacity: 0
                                    z-index: 2
                                p
                                    font-size: 14px
                                    line-height: 1
                                    color: #A5A3A3
                                    @include font(500)
                                .img-preview
                                    position: absolute
                                    top: 0
                                    left: 0
                                    right: 0
                                    bottom: 0
                                    height: 100%
                                    width: 100%
                                    z-index: 3
                                    background: $white
                                    img
                                        width: 100%
                                        height: 100%
                                        object-fit: cover
                                        object-position: top
                                    .close-prev-img
                                        position: absolute
                                        background: $primary
                                        height: 14px
                                        width: 14px
                                        border-radius: 50%
                                        font-size: 10px
                                        display: flex
                                        align-items: center
                                        justify-content: center
                                        right: 5px
                                        top: 5px
                                        color: $white
                                        cursor: pointer
                                        line-height: 1
                                        text-transform: lowercase
                                        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px
                        .category-grid
                            li
                                &:not(:last-child)
                                    margin-bottom: 20px
                                .cat_input
                                    --paddingleftright: 20px
                                    display: inline-flex
                                    width: 50%
                                    gap: 10px
                                    margin-bottom: 25px
                                    &::before,&::after
                                        display: none
                                    input
                                        flex: 1
                                        background: #F4F4F4
                                        border-radius: 5px !important
                                        &[disabled]
                                            caret-color: transparent
                                            color: $text
                                            @include font(500)
                                    .edt_btn,.dlt_btn
                                        line-height: 0
                                .btn
                                    --height: var(--inputsize)
                        .sub-cat-div
                            display: flex
                            gap: 20px
                            margin-bottom: 20px
                            .btn-div
                                display: flex
                                gap: 5px
                        .zvxzj-btn
                            width: auto
                            margin-right: auto
            .dznjn-wrap
                .dznjn
                    .bkd-htl-crd
                        border: 1px solid #F1F1F1
                        border-radius: 5px
                        overflow: hidden
                        @include media(520)
                            border-radius: 0px
                        &:not(:last-child)
                            margin-bottom: 8px
                            @include media(520)
                                margin-bottom: 22px
                        &.open
                            .title
                                .arr-htt
                                    transform: rotate(-90deg)
                        .title
                            padding: 8px 16px
                            background: #F1F1F1
                            @include flex
                            gap: 1rem
                            align-items: center
                            transition: .5s ease
                            cursor: pointer
                            @include media(675)
                                gap: 10px
                                padding: 8px 12px
                            .asd-ttl
                                flex: 1
                                .kwvrf
                                    font-size: 14px
                                .rm-id
                                    font-size: 16px
                                    line-height: 1.5
                                    transition: inherit
                                    color: $black
                                    @include font(500)
                                    @include media(675)
                                        line-height: 1.2
                                .rm-dt
                                    font-size: 14px
                                    line-height: 18px
                                    transition: inherit
                                    color: $text
                                    &.delivered
                                        color: var(--green)
                                    &.cancelled
                                        color: red
                                    @include media(675)
                                        font-size: 12px
                                        line-height: 14px
                            .arr-htt
                                width: 15px
                                height: 15px
                                background-image: url(/assets/icon/arrow-down-gray.svg)
                                background-repeat: no-repeat
                                background-size: 100% auto
                                background-position: 0 50%
                                transform: rotate(0deg)
                                transition: .5s ease
                                @include media(675)
                                    display: none
                        .quuguj-wrap
                            padding: 0 15px 30px
                        article
                            padding: 0 !important
                            .mid-sec-card
                                @include flex
                                padding: 24px 15px
                                @include media(520)
                                    padding: 20px 0 0 
                                figure
                                    flex: 0 1 107px
                                    line-height: 0
                                    overflow: hidden
                                    @include media(520)
                                        padding: 0 15px
                                    img
                                        width: 100%
                                        object-fit: cover
                                figcaption
                                    flex: 1
                                    padding-left: 34px
                                    position: relative
                                    @include media(520)
                                        flex: 0 1 100%
                                        margin-top: 1.4rem
                                        padding-left: 0
                                    > *
                                        &:not(.kgmia-ordt-wrap)
                                            padding: 0 15px
                                    .ialv
                                        font-size: 14px
                                        line-height: 18px
                                        color: $text
                                    .lmxa
                                        color: $text
                                        font-size: 14px
                                        @include font(500)
                                        margin-bottom: 12px
                                        max-width: 407px
                                    .ialv
                                        margin-bottom: 12px
                                    .xzoui
                                        color: $black
                                        font-size: 16px
                                        line-height: 18px
                                        @include font(500)
                                    .kgmia-ordt-wrap
                                        position: absolute
                                        right: 20px
                                        bottom: 20px
                                        display: flex
                                        align-items: center
                                        gap: 10px
                                        @include media(675)
                                            position: unset
                                            margin-top: 1rem
                                        @include media(520)
                                            gap: 0px
                                        > *
                                            @include media(520)
                                                --height: 38px
                                                flex: 1
                                                border-radius: 0px
                            
            .dypye-wrap
                .veqrn
                    margin-bottom: 20px
                    color: $text
                    font-size: 14px
                    @include font(500)
                    &:hover
                        color: $black
                        path
                            fill: $black
                .dypye
                    .ratpk
                        border: 1px solid #F1F1F1
                        border-radius: 6px
                        overflow: hidden
                        .title
                            border-bottom: 1px solid #DADADA

                            padding: 8px 16px
                            background: $white
                            @include flex
                            align-items: center
                            transition: .5s ease
                            cursor: pointer
                            .asd-ttl
                                flex: 1
                                .rm-id
                                    font-size: 16px
                                    line-height: 1.5
                                    transition: inherit
                                    @include font(500)
                                .rm-dt
                                    font-size: 14px
                                    line-height: 18px
                                    transition: inherit
                        article
                            .achfv-card-desc
                                font-family: $Poppins
                                background: $white
                                padding: 24px 15px
                                border-bottom: 1px solid #F3F3F3
                                position: relative
                                .xqzlx
                                    position: absolute
                                    top: 30px
                                    right: 30px
                                    z-index: 3
                                    @include media(675)
                                        position: unset
                                .ttl-kauwh
                                    margin-bottom: 12px
                                    @include font(500)
                                .icodf
                                    > *
                                        margin-bottom: 10px
                                    *
                                        &:not(.btn)
                                            color: $text
                                            font-size: 14px
                                            line-height: 17.22px
                                            span
                                                color: $black
                                    .jnkvz
                                        max-width: 388px
                            .mid-eelqz-card
                                background: $white
                                @include flex
                                padding: 24px 15px
                                figure
                                    flex: 0 1 85px
                                    line-height: 0
                                    overflow: hidden
                                    @include media(675)
                                        flex: 0 1 75px
                                    img
                                        width: 100%
                                        object-fit: cover
                                figcaption
                                    flex: 1
                                    padding-left: 22px
                                    position: relative
                                    @include media(767)
                                        padding-left: 16px
                                    @include media(675)
                                        flex: 0 1 100%
                                        padding-left: 0
                                    .lmxa,.ialv
                                        font-size: 14px
                                        line-height: 18px
                                        color: $text
                                        @include media(675)
                                            font-size: 11px
                                    .lmxa
                                        margin-bottom: 18px
                                        max-width: 407px
                                        @include media(675)
                                            font-size: 14px
                                    .ialv
                                        margin-bottom: 15px
                                    .nsvq0-wrap
                                        max-width: 727px
                                        margin-left: auto
                                        margin-right: auto
                                        @include media(1152)
                                            max-width: 640px
                                        ul
                                            display: flex
                                            gap: 30px
                                            --color: #c6c6c6
                                            --dot: 13px
                                            --line: 140px
                                            position: relative
                                            @include media(1152)
                                                gap: 15px
                                                --line: 123px
                                            @include media(675)
                                                flex-direction: column
                                                text-align: left
                                                padding: 0
                                                --line: 50px
                                                gap: var(--line)
                                                
                                            li
                                                flex: 1
                                                text-align: center
                                                line-height: normal
                                                position: relative
                                                @include media(675)
                                                    text-align: left
                                                    display: flex
                                                    gap: 10px
                                                @include media(345)
                                                    gap: 5px
                                                span
                                                    @include media(675)
                                                        order: 2
                                                p
                                                    @include media(675)
                                                        order: 3
                                                &::before
                                                    content: ''
                                                    position: absolute
                                                    right: calc(100% - 54px)
                                                    top: 55%
                                                    translate: 0 -50%
                                                    height: 1px
                                                    width: var(--line)
                                                    background: var(--secondary)
                                                    display: none
                                                    @include media(675)
                                                        top: auto
                                                        bottom: 100%
                                                        left: calc(var(--dot) / 2)
                                                        right: auto
                                                        translate: -50% 0
                                                        height: var(--line)
                                                        width: 1px
                                                &:first-child,&:last-child
                                                    &.active
                                                        > *
                                                            color: var(--secondary)
                                                        .dot
                                                            background: var(--secondary)
                                                &:not(:first-child,:last-child)
                                                    &.active
                                                        > *
                                                            color: var(--secondary)
                                                        &::before
                                                            display: block
                                                        .dot
                                                            background: var(--secondary)
                                                            &::after
                                                                opacity: 1
                                                &:last-child
                                                    &.active
                                                        .dot
                                                            &::after
                                                                opacity: 1
                                                                right: 100%
                                                                left: auto
                                                > *
                                                    font-size: 12px
                                                    line-height: 16px
                                                    color: #c6c6c6
                                                    @include media(1152)
                                                        font-size: 11px
                                                        line-height: 14px
                                                    @include media(675)
                                                        font-size: 14px
                                                        font-weight: 500
                                                    @include media(345)
                                                        font-size: 11px
                                                .dot
                                                    height: var(--dot)
                                                    width: var(--dot)
                                                    margin: 14px auto
                                                    background: #c6c6c6
                                                    border-radius: 50%
                                                    position: relative
                                                    @include media(675)
                                                        margin: 0
                                                        order: 1
                                                    &::before,&::after
                                                        content: ''
                                                        position: absolute
                                                        left: 100%
                                                        top: 50%
                                                        translate: 0 -50%
                                                        height: 1px
                                                        @include media(675)
                                                            top: 100%
                                                            left: 50%
                                                            translate: -50% 0
                                                            height: var(--line)
                                                    &::before
                                                        width: var(--line)
                                                        background: #c6c6c6
                                                        @include media(675)
                                                            width: 1px
                                                    &::after
                                                        width: calc(var(--line) * 0.5)
                                                        background: var(--secondary)
                                                        z-index: 1
                                                        opacity: 0
                                                        @include media(675)
                                                            width: 1px
                                                &:last-child
                                                    .dot
                                                        &::before
                                                            display: none
                            .etydk
                                background:  $white
                                padding: 12px 15px
                                border-top: 1px solid #DADADA
                                .owhcjaxdd
                                    width: 100%
                                    ul
                                        display: flex
                                        gap: 2rem
                                        @include media(767)
                                            display: grid
                                            grid-template-columns: repeat(3,1fr)
                                            gap: 1rem
                                        @include media(540)
                                            grid-template-columns: repeat(2,1fr)
                                            grid-gap: 10px 12px
                                        li
                                            @include media(540)
                                                line-height: 0
                                            span
                                                display: inline-block
                                                font-size: 11px
                                                line-height: 1
                                                color: #a5a5a5
                                                @include font(500)
                                                @include media(540)
                                                    margin-bottom: 4px
                                            p
                                                font-size: 13px
                                                line-height: 1.2
                                                color: $text
                                                @include font(500)
                                                &.ttl-sefw
                                                    color: $black
                                                    font-size: 18px
                                                    @include font(600)
                                            &:last-child
                                                @include media-min(767)
                                                    margin-left: auto
            .wish-list-wrap-dashboard
                display: grid
                grid-template-columns: repeat(3,1fr)
                grid-gap: 90px 20px
                @include media(991)
                    grid-gap: 20px 15px
                    grid-template-columns: repeat(2,1fr)
                @include media(767)
                    grid-gap: 0px
                    grid-template-columns: repeat(1,1fr)
                .product-card
                    width: 100%
                    background: #fff
                    border-radius: 14px
                    padding: 20px
                    display: flex
                    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px
                    flex-direction: column
                    gap: 8px
                    position: relative
                    .close
                        position: absolute
                        right: 10px
                        top: 10px
                        cursor: pointer

                    .img-box
                        width: 100%
                        display: flex
                        justify-content: center
                        margin-bottom: 10px
                    
                        img
                            width: 100%
                            max-width: 150px
                            object-fit: contain

                    .rating
                        display: flex
                        gap: 3px
                        margin-bottom: 5px

                        img
                            width: 15px

                        span
                            font-size: 12px
                            margin-left: 6px
                            color: var(--black)

                    .title
                        font-size: 16px
                        font-weight: 600
                        color: var(--black)

                    .sub
                        font-size: 12px
                        color: var(--text)
                        line-height: 1.3

                    .size
                        font-size: 12px
                        color: var(--black)

                    .price
                        margin-top: 10px
                        font-size: 18px
                        font-weight: 600
                        color: #000
                    .btn
                      margin-top: 12px
                   
                            
.kcyycf-col
    padding: 25px 15px 45px
    @include flex
    gap: 34px
    .bmrdxh
        flex: 0 1 20%
        figure
            border: 1px solid #D0D0D080
            border-radius: 5px
            padding: 20px
            img
                width: 100%
    .tusnbq
        flex: 1
        p,li
            color: $text
            font-size: 14px
            span,a
                color: $black
        .pigjwf
            margin-bottom: 18px
            h6
                font-family: $Poppins
                font-size: 24px
                line-height: 1
            p
                font-size: 13px
                margin-top: 8px
        .wwgwr
            display: grid
            grid-template-columns: repeat(2,1fr)
            grid-gap: 12px 16px
            margin-bottom: 15px

.zefvei
    @include flex
    justify-content: space-between
    border-top: 1px solid #DFDFDF
    padding: 12px 16px
    ul
        li
            display: inline-block
            vertical-align: middle
            font-size: 14px
            color: $text
            &:not(:last-child)
                margin-right: 16px
            .prc
                font-size: 16px
                color: $black
                @include font(600)

.profile-detail-doc
    .profile-tab
        margin-bottom: 3rem
        li
            display: inline-block
            vertical-align: middle
            color: #a3a3a3
            @include before($black)
            padding: 10px 0
            @include font(500)
            transition: .6s ease
            &::before
                height: 1px
                top: auto
                transition: .6s ease
                width: 0
            &.active
                color: $black
                &::before
                    width: 100%
            &:not(:last-child)
                margin-right: 2rem
    .profile-tab-content
        .form
            .doc-upload-file
                display: grid
                grid-template-columns: repeat(5,1fr)
                grid-gap: 25px 24px
                li
                    background: #F4F4F4
                    padding: 45px 15px
                    border-radius: 5px
                    overflow: hidden
                    position: relative
                    text-align: center
                    aspect-ratio: 1.2
                    .plu-ico,.pdf-ico
                        margin-left: auto
                        margin-right: auto
                        margin-bottom: 5px
                    .plu-ico
                        width: 18px
                        height: 18px
                    .pdf-ico
                        width: 25px
                        height: 25px
                    input
                        position: absolute
                        top: 0
                        left: 0
                        right: 0
                        bottom: 0
                        height: 100%
                        width: 100%
                        appearance: none
                        opacity: 0
                        z-index: 2
                        cursor: pointer
                    p
                        font-size: 14px
                        line-height: 1.2
                        color: #A5A3A3
                        @include font(500)
                    .preview
                        position: absolute
                        top: 0
                        left: 0
                        right: 0
                        bottom: 0
                        height: 100%
                        width: 100%
                        z-index: 3
                        background: $white
                        overflow: hidden
                        img
                            &:not(.pdf-ico)
                                width: 100%
                                height: 100%
                                object-fit: cover
                                object-position: top
                        .pdf-url
                            height: 100%
                            display: flex
                            align-items: center
                            justify-content: center
                            background: #f5f5f5
                            flex-direction: column
                            gap: 10px
                            .pdf-ico
                                width: 50px
                                height: 50px
                                margin: 0
                                object-fit: contain
                            .pdf-nm
                                font-size: 12px
                                color: $text
                                white-space: nowrap
                                overflow: hidden
                                width: 100%
                                text-overflow: ellipsis
                                padding: 0 20px
                    .close-preview,.view-preview
                        position: absolute
                        z-index: 4
                        background: $primary
                        height: 17px
                        width: 17px
                        border-radius: 50%
                        font-size: 10px
                        display: flex
                        align-items: center
                        justify-content: center
                        top: 10px
                        color: $white
                        cursor: pointer
                        line-height: 1
                        text-transform: lowercase
                        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px
                    .close-preview
                        right: 5px
                    .view-preview
                        right: 27px
                        width: 32px
                        border-radius: 3px
        .fzamc
            display: flex
            justify-content: space-between
            align-items: center
            margin-bottom: 2rem
            .ttl-tkywa
                @include font(500)
                font-size: 18px

.fancybox__content
    &:has(iframe)
        height: 100% !important
        padding: 0

.savd-addr-col-wrap-fwefef
    display: grid
    grid-template-columns: repeat(2,1fr)
    grid-gap: 20px 15px
.savd-addr-col-fwefef
    display: flex
    border: 1px solid #F3F3F3
    border-radius: 5px
    padding: 28px 16px
    gap: 13px
    position: relative
    transition: .5s ease
    &:has(input:checked)
        border-color: $secondary
        background: #f0f4ff
    .cola-fgsqw
        line-height: 0
        input[type="radio"]
            @include radio(true)
    .colb-dtl-fwwz
        flex: 1
        color: $text
        font-size: 14px 
        line-height: 18px
        .ahck-ttl
            font-size: 16px
            line-height: 19.68px
            color: $black
            margin-bottom: 20px
        .addr-erter
            margin-bottom: 20px
        .mbl-wef
            span
                color: $black
                @include font(500)
    .btn-etp-eew
        position: absolute
        bottom: 26px
        right: 20px
        .mbcw
            font-size: 14px
            text-transform: capitalize
            color: $primary
            @include font(500)
            &:is(a,button)
                &:hover
                    color: $secondary
            &:not(:last-child)
                margin-right: 20px

.addr-pop
    right: 0
    transition: .5s ease
    transform: translateX(100%)
    &.is-open
        transform: translateX(0%)
    .model-body
        padding: 70px 20px 30px
    .savd-addr-col-wrap-fwefef
        grid-template-columns: 100%

//

.circle-value-wrap
    position: relative
    @include after
    line-height: 0
    &::after
        border: 5px solid #ededed
        border-radius: 50%
        z-index: -1
    .count-ttl
        position: absolute
        top: 50%
        left: 50%
        translate: -50% -50%
        z-index: 2
        white-space: nowrap
        display: flex
        p,span
            display: block
            line-height: 1
            font-size: 14px
            color: $text
            @include font(500)
.flex-1
    flex: 1

.gap-5
    gap: 5px
.gap-10
    gap: 10px
.gap-15
    gap: 15px
.gap-20
    gap: 20px
.gap-25
    gap: 25px
.gap-30
    gap: 30px
.gap-35
    gap: 35px

.table-div
    &.space-medium
        table
            th,td
                padding: 8px 12px
    table
        width: 100%
        border-spacing: 0px
        border: 1px solid #ccc
        border-collapse: collapse
        th,td
            padding: 12px 20px
            border: 1px solid #ccc
            color: $text
            font-size: 14px
            a,button
                display: block
                &:has(img)
                    text-align: center
                    line-height: 0
            &:has(small)
                p
                    @include font(500)
            p
                small
                    font-size: 12px
                    line-height: 1.2
        tr
            &:has(.deduct)
                background: #ffbfbf4a
            &:has(.added)
                background: #dfffd0
        th
            @include font(500)
            text-align: left

.dashboard-land-wrap
    >*
        margin-bottom: 1rem

.etuk-ttl
    margin-top: 2rem
    margin-bottom: 1.5rem
    display: flex
    justify-content: space-between
    align-items: center
    gap: 1rem
    h5
        @include font(600)
    h6
        @include font(500)

.ntsi
    border: 1px solid #efefef
    border-radius: 5px
    display: flex
    align-items: center
    gap: 1rem
    padding: 1rem
    .ico
        height: 65px
        width: 65px
        border-radius: 50%
        background: #e3f2ff
        display: flex
        align-items: center
        justify-content: center
        color: $text
        font-size: 26px
    .inf
        flex: 1
        h5,h6
            @include font(600)
        p
            color: $text
            font-size: 14px

//

.vandor-dashboard-chat
    display: flex
    flex-direction: column
    width: 300px
    height: 400px
    background-color: #f4f4f4
    border: 1px solid #ddd
    border-radius: 8px
    overflow: hidden
    width: 100%
    .chat-messages
        flex: 1
        padding: 10px
        overflow-y: auto
        background-color: #fff
        border-bottom: 1px solid #ddd

.dashboard-chat
    border: 1px solid #ddd
    --padt: 10px
    --padlr: 20px
    --padb: 20px
    border-radius: 5px
    overflow: hidden
    .chat-header
        display: flex
        align-items: center
        justify-content: space-between
        gap: 1rem
        background: $gray
        padding: var(--padt) var(--padlr)
        .aside-head-chat
            display: flex
            gap: 12px
            .ico
                width: 50px
                height: 50px
                border-radius: 50%
                overflow: hidden
                line-height: 0
                img
                    width: 100%
                    height: 100%
                    object-fit: cover
            .inf
                .chat-name
                    font-size: 18px
                    @include font(600)
                .chat-desc
                    font-size: 13px
                    color: $text
        .aside-right-chat
            display: flex
            align-items: center
            gap: 12px
            .more-op-chat
                position: relative
                .v-mr-optn
                    line-height: 0
                .v-mr-optn-div
                    display: none
                    background: $white
                    padding: 10px 0
                    position: absolute
                    right: 0
                    top: 100%
                    border-radius: 5px
                    overflow: hidden
                    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px
                    ul
                        white-space: nowrap
                        max-height: 140px
                        overflow-y: auto
                        @include scrollbar($width: 3px,$color: #ccc,$background: none,$radius: 0)
                        
                    li
                        line-height: 0
                        a
                            color: $text
                            font-size: 14px
                            display: block
                            height: 35px
                            line-height: 35px
                            padding: 0 18px
                            &:hover
                                background: $secondary
                                color: $secondary
    .chat-messages
        margin: 2rem 0
        padding: 0 var(--padlr) 
        max-height: 250px
        min-height: 250px
        overflow-y: auto
        @include scrollbar($width: 10px,$color: #ccc,$background: none,$radius: 0)
        .message
            width: fit-content
            max-width: 60%
            .time
                font-size: 12px
                display: inline-flex
                align-items: center
                gap: 5px    
                color: $text
                svg,img
                    width: 12px
            p
                padding: 8px 25px
                border-radius: 25px
                font-size: 14px
            &:not(:last-child)
                margin-bottom: 10px
            &.message-right
                margin-left: auto
                margin-right: 0
                text-align: right
                p
                    background: $secondary
                    color: $white
            &.message-left
                p
                    background: $secondary
    .chat-input-container
        display: flex
        padding: 0 var(--padlr) var(--padb)
        align-items: center
        --btmheigth: 40px
        gap: 10px
        .chat-input
            flex: 1
            padding: 8px 12px
            border-radius: 4px
            border: 1px solid #ddd
            height: var(--btmheigth)
            font-size: 14px
            &:focus
                outline: 1px solid #ccc
        .send-message-btn
            --height: var(--btmheigth)
            --padding: 28px
.mac-pr-dtl
    .mac-pr
        display: inline-flex
        align-items: center
        .ico
            min-width: 40px
            width: 40px
            height: 40px
            border-radius: 50%
            overflow: hidden
            line-height: 0
            img
                width: 100%
                height: 100%
                object-fit: cover
        .inf
            padding-left: 1rem
            .pr-cat-brand,.pr-cat-name
                font-size: 12px
            .prdt-nm
                margin-bottom: 4px
                max-width: 400px

.text-input
    display: block
    max-width: 80px
    margin-left: auto
    margin-right: auto
    border: 1px solid #ccc
    border-radius: 5px
    text-align: center
    height: 32px
    color: $text
    &:focus
        outline: none

.text-input-checkbox
    @include checkbox($checkbox: true)
    --size: 24px

td
    &:has(.text-input-checkbox)
        .text-input-checkbox
            display: block
            margin-left: auto
            margin-right: auto

td,th
    &[align="center"]
        text-align: center !important
    .val-wrap
        display: flex
        align-items: center
        justify-content: center
        gap: 5px
        .count-val
            font-size: 14px
            background: none
            text-align: center
            &:focus
                outline: none
        .minus-val,.plus-val,input
            width: 35px
            height: 35px
            border: 1px solid #C7C7C7
            background: none
            border-radius: 50%
            text-align: center
            line-height: 0
            display: flex
            align-items: center
            justify-content: center
            cursor: pointer
            color: $black
            @include font(400)
            span
                display: inline-block
                margin-bottom: -2px
                line-height: 1
                font-size: 14px
                vertical-align: middle
            &.disabled
                opacity: .4
                cursor: no-drop

.yrnri-wrap
    .bottom-filter
        margin-top: 2rem
        @include flex
        align-items: center
        padding: 20px 26px
        background: #fff
        @include media(767)
            padding: 10px
        ul
            flex: 1
            @include media(767)
                flex: 0 1 100%
                max-width: 100%
                width: 100%
                white-space: nowrap
                overflow-x: auto
            li
                display: inline-block
                vertical-align: middle
                height: 36px
                width: 36px
                line-height: 36px
                @include media(767)
                    height: 30px
                    width: 30px
                a
                    display: flex
                    height: 100%
                    width: 100%
                    align-items: center
                    justify-content: center
                    font-size: 16px
                    color: $text
                    border-radius: 4px
                    overflow: hidden
                    @include media(767)
                        font-size: 12px
                    &.active
                        color: $secondary
                        background: $secondary
                    &:hover
                        background: $secondary
                &.disabled
                    pointer-events: none
        .no-of-results
            flex: 0 1 auto
            font-size: 16px
            @include font(500)
            color: $text
            @include media(767)
                flex: 0 1 100%
                max-width: 100%
                width: 100%
                font-size: 12px
                margin-top: 8px



.variant-section
    grid-column: span 2
    border: 1px solid #ddd
    border-radius: 6px
    overflow: hidden
    background: #fff
    .variant-header
        background: #000
        color: #fff
        padding: 8px 12px
        font-weight: 600
        font-size: 14px
    .variant-row
        display: flex
        align-items: center
        padding: 10px 12px
        border-top: 1px solid #eee
        gap: 10px
        flex-wrap: wrap
        .storage
            display: flex
            align-items: center
            gap: 6px
            min-width: 90px
            input[type="checkbox"]
                transform: scale(1.2)
            span
                font-size: 14px
                font-weight: 500

        .field
            display: flex
            flex-direction: column
            label
                font-size: 11px
                color: #666
                margin-bottom: 4px
                text-transform: uppercase
            input
                width: 90px
                padding: 4px 6px
                border: 1px solid #ccc
                border-radius: 4px
                font-size: 13px
                text-align: center
                background: #fafafa
                &:focus
                    outline: none
                    border-color: #ccc






.accordion.order
    border-bottom: 1px solid #F1F1F1
    overflow: hidden
    border-radius: 6px
    box-shadow: 0 2px 6px rgba(0,0,0,0.05)
    background: #fff
    margin-bottom: 20px

    &.open .accordion-content
        max-height: 1000px
        padding: 15px

    .accordion-header
        display: flex
        justify-content: space-between
        align-items: center
        padding: 12px 15px
        cursor: pointer
        transition: background 0.3s ease
        color: #333
        font-weight: 600
        font-size: 16px
        background: #f9f9f9 !important
        border-bottom: 1px solid #F1F1F1
        .order-date
            font-size: 14px
            color: #777
            font-weight: 400
            margin-bottom: 10px

        &:hover
            background: #f9f9f9

        .toggle
            font-size: 24px
            font-weight: 400
            line-height: 1

    .accordion-content
        max-height: 0
        padding: 0 15px
        transition: all 0.5s ease-in-out
        overflow: hidden

        

        .order-item
            display: flex
            align-items: center
            justify-content: space-between
            border-bottom: 1px solid #F1F1F1
            padding: 10px 0

        .item-img
            width: 80px
            img
                width: 100%
                border-radius: 4px

        .item-details
            flex: 1
            margin-left: 15px
            font-size: 14px
            color: #555
            .item-name
                font-weight: 600
                color: #222
                margin-bottom: 5px
            .item-price
                font-weight: 600
                color: #000
                margin-top: 5px

        .item-actions
            display: flex
            flex-direction: column
            align-items: flex-end
            gap: 6px

            button
                border: 1px solid #007bff
                background: transparent
                color: #007bff
                border-radius: 4px
                font-size: 13px
                padding: 5px 10px
                cursor: pointer
                transition: all 0.3s ease

            &.confirmed
                background: #e6f4ff
                border-color: #007bff

            &:hover
                background: #007bff
                color: #fff

        .order-summary
            display: flex
            justify-content: space-between
            padding-top: 15px
            font-size: 14px
            color: #444

        .total
            font-weight: 700
            color: #000


.accordion
    border-bottom: 1px solid #F1F1F1
    overflow: hidden
    &.open .accordion-content
        max-height: 600px
        padding: 10px 15px 15px
    .accordion-header
        display: flex
        justify-content: space-between
        align-items: center
        padding: 8px 10px
        cursor: pointer
        transition: background 0.3s ease
        color: #333
        &:hover
            background: #f9f9f9
        span:first-child
            font-weight: 500
        .toggle
            font-size: 24px
            font-weight: 400
            line-height: 1
    .accordion-content
        max-height: 0
        padding: 0px 15px 
        transition: all 0.5s ease-in-out
        overflow: hidden


.formField
    margin: 0 !important

.accordion.order
    border-bottom: 1px solid #F1F1F1
    overflow: hidden
    border-radius: 6px
    box-shadow: 0 2px 6px rgba(0,0,0,0.05)
    background: #fff
    margin-bottom: 20px

    &.open .accordion-content
        max-height: 1000px
        padding: 15px

    .accordion-header
        display: flex
        justify-content: space-between
        align-items: center
        padding: 12px 15px
        cursor: pointer
        transition: background 0.3s ease
        color: #333
        font-weight: 600
        font-size: 16px
        background: #f9f9f9 !important
        border-bottom: 1px solid #F1F1F1
        .order-date
            font-size: 14px
            color: #777
            font-weight: 400
            margin-bottom: 10px

        &:hover
            background: #f9f9f9

        .toggle
            font-size: 24px
            font-weight: 400
            line-height: 1

    .accordion-content
        max-height: 0
        padding: 0 15px
        transition: all 0.5s ease-in-out
        overflow: hidden

        

        .order-item
            display: flex
            align-items: center
            justify-content: space-between
            border-bottom: 1px solid #F1F1F1
            padding: 10px 0

        .item-img
            width: 80px
            img
                width: 100%
                border-radius: 4px

        .item-details
            flex: 1
            margin-left: 15px
            font-size: 14px
            color: #555
            .item-name
                font-weight: 600
                color: #222
                margin-bottom: 5px
            .item-price
                font-weight: 600
                color: #000
                margin-top: 5px

        .item-actions
            display: flex
            flex-direction: column
            align-items: flex-end
            gap: 6px

            button
                border: 1px solid #007bff
                background: transparent
                color: #007bff
                border-radius: 4px
                font-size: 13px
                padding: 5px 10px
                cursor: pointer
                transition: all 0.3s ease

            &.confirmed
                background: #e6f4ff
                border-color: #007bff

            &:hover
                background: #007bff
                color: #fff

        .order-summary
            display: flex
            justify-content: space-between
            padding-top: 15px
            font-size: 14px
            color: #444

        .total
            font-weight: 700
            color: #000




.etydk
    @include flex
    padding: 12px 15px
    border-top: 1px solid #DADADA
    justify-content: space-between
    @include media(520)
        gap: 4px
    .owhcjaxdd
        width: 100%
        ul
            display: flex
            gap: 2rem
            @include media(767)
                display: grid
                grid-template-columns: repeat(3,1fr)
                gap: 1rem
            @include media(540)
                grid-template-columns: repeat(2,1fr)
                grid-gap: 10px 12px
            li
                @include media(540)
                    line-height: 0
                span
                    display: inline-block
                    font-size: 11px
                    line-height: 1
                    color: #a5a5a5
                    @include font(500)
                    @include media(540)
                        margin-bottom: 4px
                p
                    font-size: 13px
                    line-height: 1.2
                    color: $text
                    @include font(500)
                    &.ttl-sefw
                        color: $black
                        font-size: 18px
                        @include font(600)
                &:last-child
                    @include media-min(767)
                        margin-left: auto
    .lezce,.kpqhg
        display: flex
        align-items: center
        gap: 53px
        @include media(991)
            gap: 20px
        @include media(675)
            width: 100%
            justify-content: space-between
    .lezce
        p
            font-size: 14px
            line-height: 1.2
            color: $text
            @include font(500)
    .xpfsps
        font-size: 14px
        line-height: 1.2
        color: $text
        @include font(500)
    .ignqi
        @include font(600) 
        color: $black 
        font-size: 16px