/*
|--------------------------------------------------------------------------
| FOOTER PAYMENTS
|--------------------------------------------------------------------------
*/

.footer-payments {
    width: 100%;

    padding:
        26px 0 28px;

    background:
        #ffffff;

    border-top:
        1px solid
        #eceef2;
}


/*
|--------------------------------------------------------------------------
| GRID
|--------------------------------------------------------------------------
*/

.payment-grid {
    display: grid;

    grid-template-columns:
        minmax(
            0,
            2.1fr
        )
        minmax(
            180px,
            0.75fr
        )
        minmax(
            170px,
            0.65fr
        );

    align-items:
        start;

    gap:
        42px;
}


/*
|--------------------------------------------------------------------------
| SECTION TITLE
|--------------------------------------------------------------------------
*/

.payment-grid
section
> h3 {
    margin:
        0 0 14px;

    color:
        #20242b;

    font-size:
        14px;

    line-height:
        1.3;

    font-weight:
        600;
}


/*
|--------------------------------------------------------------------------
| PAYMENT ICON LIST
|--------------------------------------------------------------------------
*/

.payment-icons {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        9px;
}


/*
|--------------------------------------------------------------------------
| PAYMENT BADGE
|--------------------------------------------------------------------------
*/

.payment-badge {
    width:
        72px;

    height:
        44px;

    flex:
        0 0 72px;

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    border:
        1px solid
        #e4e7ec;

    border-radius:
        7px;

    background:
        #ffffff;

    box-shadow:
        0 1px 2px
        rgba(
            15,
            23,
            42,
            0.03
        );

    transition:
        transform
            0.17s ease,
        border-color
            0.17s ease,
        box-shadow
            0.17s ease;
}


/*
|--------------------------------------------------------------------------
| BADGE HOVER
|--------------------------------------------------------------------------
*/

.payment-badge:hover {
    z-index: 2;

    transform:
        translateY(
            -2px
        );

    border-color:
        rgba(
            255,
            88,
            125,
            0.40
        );

    box-shadow:
        0 6px 16px
        rgba(
            15,
            23,
            42,
            0.08
        );
}


/*
|--------------------------------------------------------------------------
| PAYMENT LOGO IMAGE
|--------------------------------------------------------------------------
*/

.payment-image-badge
img {
    width:
        100%;

    height:
        100%;

    display:
        block;

    padding:
        6px 8px;

    object-fit:
        contain;

    object-position:
        center;

    user-select:
        none;

    -webkit-user-drag:
        none;
}


/*
|--------------------------------------------------------------------------
| INDIVIDUAL LOGO SIZING
|--------------------------------------------------------------------------
*/

.payment-visa
img {
    padding:
        8px 10px;
}


.payment-mastercard
img {
    padding:
        7px 13px;
}


.payment-amex
img {
    padding:
        5px 10px;
}


.payment-bkash
img {
    padding:
        5px 7px;
}


.payment-nagad
img {
    padding:
        5px 6px;
}


.payment-rocket
img {
    padding:
        5px 7px;
}


/*
|--------------------------------------------------------------------------
| FALLBACK
|--------------------------------------------------------------------------
*/

.payment-logo-fallback {
    padding:
        0 5px;

    color:
        #313842;

    font-size:
        11px;

    line-height:
        1;

    font-weight:
        700;

    text-align:
        center;
}


/*
|--------------------------------------------------------------------------
| GENERIC PAYMENT
|--------------------------------------------------------------------------
*/

.payment-generic {
    gap:
        5px;

    padding:
        0 6px;

    color:
        #404854;
}


.payment-generic
i {
    color:
        #ff587d;

    font-size:
        14px;
}


.payment-generic
span {
    color:
        #343b45;

    font-size:
        10px;

    font-weight:
        700;
}


/*
|--------------------------------------------------------------------------
| SECURITY CARD
|--------------------------------------------------------------------------
*/

.footer-security-card {
    min-height:
        56px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}


.footer-security-icon {
    width:
        42px;

    height:
        42px;

    flex:
        0 0 42px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        #fff1f5;

    color:
        #ff587d;

    font-size:
        19px;
}


.footer-security-card
strong,
.footer-security-card
small {
    display:
        block;
}


.footer-security-card
strong {
    color:
        #242a32;

    font-size:
        12px;

    font-weight:
        600;
}


.footer-security-card
small {
    margin-top:
        3px;

    color:
        #8a919c;

    font-size:
        9px;

    line-height:
        1.35;
}


/*
|--------------------------------------------------------------------------
| DBID
|--------------------------------------------------------------------------
*/

.footer-dbid-card {
    min-height:
        56px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}


.footer-dbid-icon {
    width:
        42px;

    height:
        42px;

    flex:
        0 0 42px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        #fff1f5;

    color:
        #ff587d;

    font-size:
        17px;
}


.footer-dbid-card
small,
.footer-dbid-card
strong {
    display:
        block;
}


.footer-dbid-card
small {
    color:
        #9299a2;

    font-size:
        9px;
}


.footer-dbid-card
strong {
    margin-top:
        3px;

    color:
        #222831;

    font-size:
        12px;

    letter-spacing:
        0.02em;
}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (
    max-width: 1000px
) {

    .payment-grid {
        grid-template-columns:
            1fr 1fr;

        gap:
            30px;
    }


    .footer-payment-methods {
        grid-column:
            1 / -1;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (
    max-width: 720px
) {

    .footer-payments {
        padding:
            20px 0 24px;
    }


    .payment-grid {
        grid-template-columns:
            1fr;

        gap:
            24px;
    }


    .footer-payment-methods {
        grid-column:
            auto;
    }


    .payment-icons {
        gap:
            7px;
    }


    .payment-badge {
        width:
            65px;

        height:
            40px;

        flex-basis:
            65px;
    }


    .payment-grid
    section
    > h3 {
        margin-bottom:
            11px;

        font-size:
            13px;
    }

}


/*
|--------------------------------------------------------------------------
| VERY SMALL MOBILE
|--------------------------------------------------------------------------
*/

@media (
    max-width: 360px
) {

    .payment-badge {
        width:
            61px;

        flex-basis:
            61px;
    }

}


/*
|--------------------------------------------------------------------------
| REDUCED MOTION
|--------------------------------------------------------------------------
*/

@media (
    prefers-reduced-motion:
        reduce
) {

    .payment-badge {
        transition:
            none;
    }

}