@import "../_common"

.storage-secA
    background: var(--gray)
    display: flex
    align-items: center
    justify-content: center
    padding: 60px 0

    @include media(991)
        min-height: auto
        padding: 50px 0

    @include media(540)
        padding: 35px 0

    .filter-wrapper
        width: 100%

    .heading
        text-align: center
        margin-bottom: 45px

        @include media(991)
            margin-bottom: 30px

        @include media(675)
            margin-bottom: 20px

        h2
            margin: 0 auto

    .filters
        display: flex
        align-items: flex-end
        flex-wrap: wrap
        gap: 25px
        width: 100%
        background: var(--white)
        padding: 20px 30px
        max-width: 945px
        margin: 0 auto
        border-radius: 10px

        @include media(991)
            gap: 20px
            padding: 20px 25px

        @include media(675)
            gap: 16px
            padding: 16px

        @include media(420)
            gap: 12px
            padding: 14px

        .form,
        .loction-wrapper
            flex: 1 1 180px
            min-width: 0

            @include media(675)
                flex: 1 1 calc(50% - 8px)

            @include media(540)
                flex: 1 1 100%

            p
                font-weight: 600
                margin-bottom: 10px
                font-size: 16px

                @include media(675)
                    font-size: 16px
                    margin-bottom: 8px

                @include media(420)
                    font-size: 14px

        .btn
            flex: 0 0 auto
            align-self: flex-end

            @include media(768)
                flex: 1 1 100%
                width: 100%
                justify-content: center

        .form
            .form-group
                display: flex
                align-items: center
                gap: 10px
                border: 1px solid var(--border-color)
                border-radius: 6px
                padding: 0 12px
                height: 44px
                background: var(--white)

                @include media(420)
                    height: 40px
                    padding: 0 10px

                &::before
                    display: none

                img
                    width: 18px
                    height: 18px
                    flex-shrink: 0

                    @include media(420)
                        width: 16px
                        height: 16px

                .custom-select,
                select.form-control
                    flex: 1
                    border: none
                    outline: none
                    background: transparent
                    font-size: 14px
                    color: var(--text-color)
                    cursor: pointer
                    appearance: none
                    -webkit-appearance: none

                    @include media(420)
                        font-size: 13px

        .loction-wrapper
            .location
                display: flex
                align-items: center
                gap: 10px
                border: 1px solid var(--border-color)
                border-radius: 6px
                padding: 0 12px
                height: 44px

                @include media(420)
                    height: 40px
                    padding: 0 10px

                img
                    width: 18px
                    height: 18px
                    flex-shrink: 0

                    @include media(420)
                        width: 16px
                        height: 16px

                input
                    flex: 1
                    background: none
                    border: none
                    outline: none
                    height: 100%
                    font-size: 14px
                    color: var(--text-color)

                    @include media(420)
                        font-size: 13px

                    &::placeholder
                        color: var(--placeholder-color, #aaa)


.storage-secB
    padding: 70px 0

    @include media(991)
        padding: 50px 0

    @include media(540)
        padding: 35px 0

    @include media(420)
        padding: 28px 0

    .header
        display: flex
        justify-content: space-between
        align-items: center
        gap: 16px
        flex-wrap: wrap

        @include media(540)
            flex-direction: column
            align-items: flex-start
            gap: 12px
        h3
            font-size: 24px
            margin: 0

            @include media(991)
                font-size: 20px

            @include media(540)
                font-size: 18px

    .grid
        display: grid
        grid-template-columns: repeat(3, 1fr)
        gap: 30px
        margin-top: 30px

        @include media(991)
            grid-template-columns: repeat(2, 1fr)

        @include media(540)
            grid-template-columns: 1fr



.storage-secD
    padding: 70px 0

    @include media(991)
        padding: 50px 0

    @include media(540)
        padding: 35px 0

    .header
        display: flex
        justify-content: space-between
        align-items: center
        gap: 16px
        flex-wrap: wrap

        @include media(540)
            flex-direction: column
            align-items: flex-start
            gap: 12px

        .input-wrap
            display: flex
            align-items: center
            gap: 20px
            flex-wrap: wrap

            @include media(675)
                gap: 12px

            @include media(480)
                width: 100%

            .search
                background: var(--gray)
                border: 1px solid rgba(230, 230, 230, 1)
                padding: 8px 20px
                border-radius: 10px
                position: relative
                display: flex
                justify-content: space-between

                @include media(480)
                    width: 100%


                

                input
                    background: none
                    border: none
                    outline: none
                    width: calc(100% - 60px)
                    margin: 0 18px

                    @include media(480)
                        width: 100%

            .form
                @include media(480)
                    width: 100%

                .form-group
                    display: flex
                    align-items: center
                    gap: 10px
                    width: 165px
                    background: var(--gray)
                    border: 1px solid rgba(230, 230, 230, 1)
                    padding: 8px 20px
                    padding-right: 10px
                    border-radius: 10px
                    height: 40px

                    @include media(480)
                        width: 100%

                    &::before
                        display: none

                    .custom-select
                        width: 100%

    .grid
        display: grid
        grid-template-columns: 300px 1fr
        gap: 45px
        margin-top: 45px
        background: var(--gray)
        padding: 45px
        border-radius: 10px

        @include media(1366)
            grid-template-columns: 260px 1fr
            gap: 30px
            padding: 20px

        @include media(991)
            grid-template-columns: 1fr
            gap: 25px
            padding: 25px

        @include media(540)
            padding: 18px
            margin-top: 25px
            gap: 20px

        &:not(:last-child)
            margin-bottom: 25px

            @include media(540)
                margin-bottom: 15px

        .address
            @include media(991)
                display: flex
                flex-direction: column
                align-items: flex-start

            ul
                margin: 25px 0 50px
                display: flex
                flex-direction: column
                gap: 10px

                @include media(991)
                    margin: 20px 0 30px

                @include media(540)
                    margin: 16px 0 24px
                    gap: 8px

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

                    @include media(540)
                        gap: 12px

                    img
                        filter: brightness(0)
                        flex-shrink: 0

                    span
                        color: var(--text)
                        font-weight: 400

                    a
                        display: flex
                        align-items: center
                        gap: 8px
                        color: var(--text)

            .btn
                @include media(991)
                    align-self: flex-start
                @include media(540)
                    width: 100%

        .cards
            display: grid
            grid-template-columns: repeat(3, 1fr)
            gap: 12px

            @include media(675)
                grid-template-columns: 1fr
                gap: 10px

            @include media(540)
                gap: 10px

            .card
                border-radius: 10px
                overflow: hidden
                border: 1px solid rgba(221, 221, 221, 1)
                background: var(--white)
                padding: 12px

                .card-img
                    border-radius: 5px
                    overflow: hidden
                    position: relative

                    img
                        width: 100%
                        display: block

                    .unit
                        padding: 4px 10px
                        border-radius: 50px
                        position: absolute
                        top: 15px
                        left: 15px
                        font-weight: 600
                        background: var(--white)

                .card-content
                    text-align: center
                    padding: 10px

                    @include media(540)
                        padding: 5px

                    h6, p
                        color: rgba(102, 102, 102, 1)

                    h6
                        margin: 10px 0 20px
                        font-size: 14px

                        @include media(540)
                            margin: 8px 0 14px

                    .btn-outline
                        color: var(--primary)
                        border: 1px solid var(--primary)
                        display: flex
                        align-items: center
                        justify-content: center
                        gap: 10px
                        padding: 7px 20px
                        border-radius: 5px
                        transition: all 0.3s ease-in

                        @include media(1100)
                            padding: 7px 14px
                            gap: 6px

                        img
                            transition: all 0.3s ease-in

                        &:hover
                            background: var(--primary)
                            color: var(--white)
                            border-color: var(--primary)

                            img
                                filter: brightness(0) invert(1)