@import ../_common

.banner

  .bg
    .banner-wrapper
      bottom: 10% !important
     
      .banner-content
        display: flex
        align-items: flex-end
        justify-content: center

        .content
            width: 100%
            max-width: 100%
            text-align: center

            h1
                color: var(--white)
                text-transform: capitalize
                line-height: 1.2


            p
                margin: 20px 0 30px
                color: var(--white)
                opacity: 0.9
                font-weight: 300
                width: 100%
                max-width: 650px
                margin: 0 auto

            .order-details
                .order-num
                    width: 200px
                    margin: 0 auto
                    display: flex
                    gap: 20px
                    align-items: center
                    margin-top: 30px
                    span
                        color: var(--white)
                        opacity: 0.6
                        font-size: 14px
                        text-wrap: nowrap
                    p
                        color: var(--white)
                        font-size: 14px
                        font-weight: 600
                        padding: 5px 10px
                        background: var(--gradient-b)

                .btns
                    margin-top: 40px
                    gap: 10px
                    display: flex
                    justify-content: center

                    .btn-fill
                        background: var(--white)
                        color: var(--black)
                        border-radius: 0
                        span
                          color: var(--black)
  
                        svg
                            path
                                fill: var(--black)

                        &:hover
                            span
                             color: var(--white)
                            svg
                             path
                               fill: var(--white)


                        svg
                            path
                            fill: var(--white)



.placed-secA
    padding: 4rem 0
    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


        .order-summary-wrapper
            display: flex
            flex-direction: column
            gap: 20px
            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)

            

            .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

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

            h5
                color:var(--thirdy)
                font-family: $Kugile
                margin-bottom: 30px

            .timeline-item
                display: flex
                gap: 1.5rem
                padding-bottom: 2rem
                position: relative

                &:not(:last-child)
                    &::after
                        content: ''
                        position: absolute
                        left: 19px
                        top: 45px
                        bottom: 0
                        width: 2px
                        background: #e5e7eb

                .icon
                    flex-shrink: 0
                    width: 55px
                    height: 55px
                    border-radius: 50%
                    display: flex
                    align-items: center
                    justify-content: center
                    background: #f3f4f6
                    position: relative
                    z-index: 1

                    &.done
                        background: rgba(197, 203, 128, 1)

                        span
                            svg
                              display: block
                              path
                                 fill: var(--white)

                    &.pending
                        background:rgba(250, 249, 247, 1)
                        border: 1px solid rgba(191, 229, 186, 1)

                        span
                            svg
                              display: block
                              path
                                 fill: var(--black)

                .content
                    flex: 1

                    h6
                        font-size: 1.1rem
                        font-weight: 600
                        color: var(--thirdy)

                    .date
                        font-size: 14px
                        color: var(--thirdy)
                        font-weight: 500

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

    .right-wrapper
        position: sticky
        top: 120px
        display: flex
        flex-direction: column
        gap: 1.5rem
        overflow: visible

        .card
            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
                ul
                    margin-top: 20px
                    
                    li
                        font-size: 14px
                        color: var(--text)
                        margin-bottom: 2px
                        position: relative
                        padding-left: 14px

                        &::before
                            content: ""
                            width: 6px
                            height: 6px
                            background: var(--text)
                            border-radius: 50%
                            position: absolute
                            left: 0
                            top: 8px  
                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: 5px

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

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

        .card:nth-child(1)
            background: #fff
            border: 1px solid #eee
            box-shadow: rgba(0, 0, 0, 0.05) 0 4px 10px

        .card:nth-child(odd)
            background: #fff

        .card:nth-child(even)
            background: linear-gradient(180deg, #C5CB80 0%, #BFE5BA 100%)


.placed-secB
    background: var(--gradient-c)
    padding: 70px 0

    .heading
        text-align: center
        margin-bottom: 1rem

        h4
            color: var(--thirdy)
            margin-bottom: 15px

        p
            color: var(--thirdy)

        .btn-group
            margin-top: 30px
            display: flex
            align-items: center
            justify-content: center
            gap: 14px

            .btn
                border-radius: 0

                &.btn-fill
                    background: var(--thirdy)
                    svg
                        display: block
                        transform: rotate(90deg)
                        
                &.btn-fill-2
                    background: var(--white)
                    color: var(--black)
                    svg
                        display: block

                    &:hover
                        color: var(--white)

         
.placed-secC
    padding: 0 0 70px
    .heading
        padding: 50px 0 30px
        display: flex
        justify-content: space-between

        h3
            color: var(--thirdy)
            width: 100%
            text-align: center

        .swiper-group
            display: flex
            align-items: center
            gap: 5px

            button
                svg
                    display: block

                    path
                        fill: var(--primary)

                &:last-child
                    transform: rotate(180deg)

    .may-love
        .swiper-wrapper
            .swiper-slide
                .latest-card
                    background: rgba(250, 249, 247, 1)
                    border-radius: 20px
                    overflow: hidden
                    transition: all .3s ease

                    .img
                        width: 100%

                        img
                            width: 100%
                            display: block

                        

                    .content
                        padding: 20px 

                        h6
                            font-size: 18px
                            font-family: $Kugile
                        p
                            font-size: 20px
                            font-weight: 600
                            margin: 14px 0 20px

                        .btn
                            width: 100%