@import ../_common

header
    .header-wrapper
        box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px
.checkout-header
    padding:  30px 0   0
    margin-top: 100px
    background: var(--white)
    .heading
        display: flex
        justify-content: space-between
        padding-bottom: 30px

        button
            font-size: 14px
            display: flex        
            align-items: center
            gap: 8px
            color: var(--text)

    .checkout-status
        padding: 30px 0
        border-top: 1px solid var(--border-color)
        border-bottom: 1px solid var(--border-color)
        ul
            width: 100%
            max-width: 650px
            margin: 0 auto
            display: flex
            gap: 50px
            li
                display: flex
                align-items: center
                gap: 10px
                .icon
                    width: 45px
                    height: 45px
                    display: inline-flex
                    align-items: center
                    justify-content: center
                    border-radius: 50%

                    svg
                        width:24px
                        height: 24px
                        display: block

                        path
                            stroke: var(--black)
                &.active
                    .icon
                       background: var(--thirdy)

                       svg
                        path
                            stroke: var(--white)


.cart-secA
    padding: 4rem 0 !important
    background: #f8f8f8
    overflow: visible

    .layout
        display: grid
        grid-template-columns: 1fr 380px
        gap: 2rem
        align-items: start

    .product-area
        display: flex
        flex-direction: column
        gap: 30px

        .form-wrapper
            background: var(--white)
            box-shadow: 0 4px 20px rgba(9, 34, 13, 0.15), 0 2px 8px rgba(9, 34, 13, 0.08)
            padding: 30px
            border-radius: 14px

            h6
                font-family: $Kugile
                margin-bottom: 20px

            .form
                display: flex
                flex-direction: column
                gap: 8px
                margin-top: 20px
                font-family: $Poppins

                .form-input
                    display: flex
                    flex-direction: column
                    gap: 12px

                    label
                        font-size: 14px
                        font-weight: 600

                    input, textarea
                        border: 2px solid #BFE5BA
                        background: #FAF9F7
                        outline: none
                        padding: 12px 16px
                        border-radius: 14px
                        font-size: 14px
                        font-weight: 400

                
                .input-checkbox
                    font-family: $Poppins
                    margin-top: 10px
                    display: flex
                    align-items: flex-start
                    gap: 10px

                    span, a
                        font-size: 14px
                        line-height: 1.2

                    input[type="checkbox"]
                        width: 20px
                        height: 20px
                        cursor: pointer

                        &:checked
                            &::after
                                width: 8px
                                height: 10px

            .form-grid
                display: grid
                grid-template-columns: repeat(4, 1fr)
                gap: 16px

                .form-input
                    &:nth-child(1),
                    &:nth-child(2)
                        grid-column: span 2

                    &:nth-child(3)
                        grid-column: span 4

                    &:nth-child(4)
                        grid-column: span 4

                    &:nth-child(5)
                        grid-column: span 2

                    &:nth-child(6)
                        grid-column: span 1

                    &:nth-child(7)
                        grid-column: span 1

                    &:nth-child(8)
                        grid-column: span 4

        .form-wrapper.Address-wrapper
            .heading
                display: flex
                justify-content: space-between
                align-items: center
                margin-bottom: 20px

                h6
                    margin-bottom: 0

            .Address
                display: flex
                align-items: flex-start
                flex-direction: row
                margin-bottom: 20px
                gap: 15px
                padding: 15px
                border: 1px solid #e0e0e0
                border-radius: 14px
                margin-top: 0

                .input-checkbox
                    padding-top: 3px
                    margin-top: 0

                    input[type="radio"]
                        width: 20px
                        height: 20px
                        cursor: pointer
                        accent-color: var(--thirdy)

                .address-content
                    flex: 1
                    display: flex
                    flex-direction: column
                    gap: 20px

                    .address
                        flex: 1
                        max-width: 450px

                        span
                            font-family: $Poppins
                            font-weight: 600
                            font-size: 16px
                            color: var(--text)
                            display: block
                            margin-bottom: 8px

                        p
                            color: var(--text)
                            font-size: 14px
                            line-height: 1.5
                            margin: 0

                    .mobile-num
                        display: flex
                        justify-content: space-between
                        align-items: center
                        gap: 10px

                        p
                            font-size: 14px
                            color: var(--text)
                            margin: 0

                        .btn-group
                            display: flex
                            gap: 10px

                            button
                                padding: 6px 12px
                                font-size: 14px
                                border: 1px solid #ddd
                                background: transparent
                                border-radius: 4px
                                cursor: pointer
                                transition: all 0.3s ease

                                &:hover
                                    background: #f5f5f5

    // Order Summary Wrapper
    .order-summary-wrapper
        position: sticky
        top: 120px
        display: flex
        flex-direction: column
        gap: 1.5rem
        overflow: visible

        .order-summary
            padding: 2rem
            background: #fff
            border-radius: 12px
            margin: 5px
            box-shadow: 0 4px 20px rgba(9, 34, 13, 0.15), 0 2px 8px rgba(9, 34, 13, 0.08)

            h5:not(.subtotal li h5)
                padding-bottom: 1rem
                border-bottom: 2px solid var(--border-color)

            .items
                margin: 1.8rem 0 15px
                display: flex
                flex-direction: column
                gap: 10px

                li
                    display: flex
                    gap: 15px
                    align-items: center

                    .item-img
                        position: relative

                        .nums
                            position: absolute
                            right: -5px
                            top: -5px
                            width: 25px
                            height: 25px
                            background: var(--thirdy)
                            border-radius: 50%
                            color: var(--white)
                            display: flex
                            justify-content: center
                            align-items: center
                            font-size: 12px

                    .item-content
                        display: flex
                        flex-direction: column

                        p
                            font-size: 14px
                            line-height: 1.2
                            font-weight: 600
                            color: var(--thirdy)

                        span
                            font-size: 12px
                            color: var(--text)

                        strong
                            font-size: 16px
                            color: var(--black)

            .pincode
                display: flex
                align-items: center

                .pin-field
                    position: relative
                    width: 100%

                    &::before
                        content: ""
                        position: absolute
                        left: 12px
                        top: 50%
                        transform: translateY(-50%)
                        width: 18px
                        height: 18px
                        background: url(../../icon/code.svg) no-repeat center center
                        background-size: contain
                        pointer-events: none

                    input
                        width: 100%
                        height: 44px
                        padding: 0 15px 0 40px
                        border: 1px solid #B5DDB7
                        border-radius: 14px 0 0 14px
                        font-size: 14px
                        color: #333
                        background: rgba(250, 249, 247, 1)
                        font-family: $Poppins

                        &::placeholder
                            color: #666

                button
                    height: 44px
                    padding: 0 20px
                    background: #06210B
                    color: #fff
                    border-radius: 14px
                    font-size: 14px
                    margin: 0 0 0 -10px
                    cursor: pointer
                    white-space: nowrap

            .subtotal
                padding: 24px 0 0

                ul
                    li
                        display: flex
                        justify-content: space-between
                        margin-bottom: 10px

                        &:nth-child(3)
                            padding-bottom: 20px

                        &:last-child
                            padding-top: 20px
                            border-top: 1px solid rgba(191, 229, 186, 1)

                            h5
                                font-size: 20px
                                font-family: $Poppins
                                font-weight: 600

                            p
                                font-size: 18px
                                font-weight: 600

                        p
                            margin: 0
                            font-size: 14px

                            &:not(:first-child)
                                font-weight: 600

                .input-checkbox
                    font-family: $Poppins
                    margin-top: 22px
                    display: flex
                    gap: 10px

                    span, a
                        font-size: 11px
                        line-height: 1.2

                    input[type="checkbox"]
                        width: 15px
                        height: 15px

                        &:checked
                            &::after
                                width: 5px
                                height: 8px

                .btn
                    width: 100%
                    margin-top: 20px

                .vfy
                    display: flex
                    justify-content: space-around
                    padding-top: 12px
                    margin-top: 20px
                    border-top: 1px solid rgb(191, 229, 186)

                    > div
                        display: flex

                        p
                            margin-left: 5px
                            font-size: 14px
                            color: var(--text)

        .newProducts
            background: linear-gradient(180deg, #C5CB80 0%, #BFE5BA 100%)
            padding: 25px
            border-radius: 12px
            box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px
            text-align: left
            border: 1px solid rgba(191, 229, 186, 0.5)
            display: flex
            align-items: flex-start
            gap: 14px

            .content
                h6
                    font-weight: 600
                    color: rgba(9, 34, 13, 1)
                    margin-bottom: 12px
                    font-size: 18px
                    font-family: $Poppins

                p
                    font-size: 14px
                    color: rgba(9, 34, 13, 0.8)
                    line-height: 1.5
                    margin-bottom: 20px

                a
                    font-size: 14px
                    color: var(--thirdy)
                    font-weight: 600