/*
|--------------------------------------------------------------------------
| ACCOUNT PAGE
|--------------------------------------------------------------------------
*/

.fv-account-page {
    min-height:
        660px;

    padding:
        22px
        0
        50px;

    background:
        #f5f5f5;

    color:
        #252b33;
}


.fv-account-container {
    width:
        min(
            980px,
            calc(
                100% - 32px
            )
        );

    margin-inline:
        auto;
}


/*
|--------------------------------------------------------------------------
| PAGE TITLE
|--------------------------------------------------------------------------
*/

.fv-account-page-title {
    margin-bottom:
        12px;
}


.fv-account-page-title
> span {
    color:
        #FF587D;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        0.07em;
}


.fv-account-page-title
h1 {
    margin:
        4px
        0
        0;

    color:
        #191f27;

    font-size:
        26px;

    line-height:
        1.2;

    font-weight:
        600;
}


/*
|--------------------------------------------------------------------------
| PROFILE CARD
|--------------------------------------------------------------------------
*/

.fv-account-profile-card {
    min-height:
        130px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        20px;

    border:
        1px solid
        #e1e4e8;

    background:
        #ffffff;
}


.fv-account-profile-main {
    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        13px;
}


.fv-account-avatar {
    width:
        64px;

    height:
        64px;

    flex:
        0
        0
        64px;

    display:
        grid;

    place-items:
        center;

    overflow:
        hidden;

    border-radius:
        50%;

    background:
        #fff1e9;

    color:
        #FF587D;

    font-size:
        25px;
}


.fv-account-avatar
img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.fv-account-profile-copy {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;
}


.fv-account-profile-copy
> span {
    color:
        #8a9099;

    font-size:
        10px;
}


.fv-account-profile-copy
> strong {
    color:
        #262c35;

    font-size:
        18px;

    font-weight:
        600;
}


.fv-account-profile-copy
> small {
    max-width:
        500px;

    color:
        #858c96;

    font-size:
        10px;

    line-height:
        1.5;
}


.fv-account-profile-action {
    min-height:
        38px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        0
        13px;

    border:
        1px solid
        #FF587D;

    color:
        #FF587D;

    font-size:
        10px;
}


.fv-account-auth-buttons {
    display:
        flex;

    gap:
        8px;
}


.fv-account-auth-buttons
a {
    min-width:
        95px;

    min-height:
        39px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        #FF587D;

    color:
        #FF587D;

    font-size:
        10px;

    font-weight:
        700;
}


.fv-account-auth-buttons
a.primary {
    background:
        #FF587D;

    color:
        #ffffff;
}


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

.fv-account-section {
    margin-top:
        13px;

    border:
        1px solid
        #e1e4e8;

    background:
        #ffffff;
}


.fv-account-section-head {
    min-height:
        50px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        0
        17px;

    border-bottom:
        1px solid
        #eceef0;
}


.fv-account-section-head
h2 {
    margin:
        0;

    color:
        #282e36;

    font-size:
        15px;

    font-weight:
        600;
}


.fv-account-section-head
a {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;

    color:
        #FF587D;

    font-size:
        9px;
}


/*
|--------------------------------------------------------------------------
| ORDER SHORTCUTS
|--------------------------------------------------------------------------
*/

.fv-account-order-shortcuts {
    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );
}


.fv-account-order-shortcuts
a {
    min-height:
        105px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    border-right:
        1px solid
        #eef0f2;

    color:
        #4f5660;
}


.fv-account-order-shortcuts
a:last-child {
    border-right:
        0;
}


.fv-account-order-icon {
    position:
        relative;

    width:
        42px;

    height:
        42px;

    display:
        grid;

    place-items:
        center;

    color:
        #FF587D;

    font-size:
        21px;
}


.fv-account-order-icon
b {
    position:
        absolute;

    top:
        -3px;

    right:
        -5px;

    min-width:
        18px;

    height:
        18px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0
        4px;

    border:
        2px solid
        #ffffff;

    border-radius:
        999px;

    background:
        #FF587D;

    color:
        #ffffff;

    font-size:
        8px;
}


.fv-account-order-shortcuts
small {
    font-size:
        10px;
}


/*
|--------------------------------------------------------------------------
| ACCOUNT MENU
|--------------------------------------------------------------------------
*/

.fv-account-menu
a {
    min-height:
        62px;

    display:
        grid;

    grid-template-columns:
        40px
        minmax(
            0,
            1fr
        )
        20px;

    align-items:
        center;

    gap:
        9px;

    padding:
        7px
        16px;

    border-bottom:
        1px solid
        #eef0f2;

    color:
        #323842;
}


.fv-account-menu
a:last-child {
    border-bottom:
        0;
}


.fv-account-menu-icon {
    width:
        38px;

    height:
        38px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        #fff3ec;

    color:
        #FF587D;

    font-size:
        15px;
}


.fv-account-menu-copy {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;
}


.fv-account-menu-copy
strong {
    font-size:
        11px;

    font-weight:
        550;
}


.fv-account-menu-copy
small {
    color:
        #9197a0;

    font-size:
        8px;
}


.fv-account-menu
a
> i {
    color:
        #b5bac1;

    font-size:
        9px;
}


/*
|--------------------------------------------------------------------------
| SELLER CARD
|--------------------------------------------------------------------------
*/

.fv-account-seller-card {
    min-height:
        78px;

    display:
        grid;

    grid-template-columns:
        48px
        minmax(
            0,
            1fr
        )
        auto;

    align-items:
        center;

    gap:
        10px;

    margin-top:
        13px;

    padding:
        12px
        16px;

    border:
        1px solid
        #ffd4bf;

    background:
        #fff8f4;
}


.fv-account-seller-card
> span {
    width:
        44px;

    height:
        44px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        #ffffff;

    color:
        #FF587D;

    font-size:
        18px;
}


.fv-account-seller-card
> div {
    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;
}


.fv-account-seller-card
strong {
    font-size:
        11px;
}


.fv-account-seller-card
small {
    color:
        #8d939c;

    font-size:
        8px;
}


.fv-account-seller-card
> a {
    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    color:
        #FF587D;

    font-size:
        9px;

    font-weight:
        700;
}


/*
|--------------------------------------------------------------------------
| LOGOUT
|--------------------------------------------------------------------------
*/

.fv-account-logout {
    min-height:
        45px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    margin-top:
        13px;

    border:
        1px solid
        #e3e6ea;

    background:
        #ffffff;

    color:
        #dc2626;

    font-size:
        10px;

    font-weight:
        600;
}


/*
|--------------------------------------------------------------------------
| STATES
|--------------------------------------------------------------------------
*/

.fv-account-loading,
.fv-account-error {
    min-height:
        380px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    background:
        #ffffff;

    color:
        #838a94;

    font-size:
        11px;
}


.fv-account-loading
i {
    color:
        #FF587D;
}


.fv-account-error {
    min-height:
        100px;

    color:
        #b42318;
}


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

@media (
    max-width: 767px
) {

    .fv-account-page {
        min-height:
            calc(
                100dvh
                -
                130px
            );

        padding:
            0
            0
            90px;

        background:
            #f5f6f8;
    }


    .fv-account-container {
        width:
            100%;

        margin:
            0;
    }


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

    .fv-account-page-title {
        min-height:
            55px;

        display:
            flex;

        align-items:
            center;

        margin:
            0;

        padding:
            0
            14px;

        background:
            #ffffff;

        border-bottom:
            1px solid
            #eeeeee;
    }


    .fv-account-page-title
    > span {
        display:
            none;
    }


    .fv-account-page-title
    h1 {
        margin:
            0;

        font-size:
            16px;

        font-weight:
            500;
    }


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

    .fv-account-profile-card {
        min-height:
            auto;

        display:
            block;

        padding:
            15px
            13px;

        border:
            0;

        border-bottom:
            8px solid
            #f5f6f8;
    }


    .fv-account-avatar {
        width:
            52px;

        height:
            52px;

        flex-basis:
            52px;

        font-size:
            21px;
    }


    .fv-account-profile-copy
    > strong {
        font-size:
            15px;
    }


    .fv-account-profile-copy
    > small {
        font-size:
            9px;
    }


    .fv-account-auth-buttons {
        margin-top:
            13px;
    }


    .fv-account-auth-buttons
    a {
        flex:
            1;

        min-height:
            40px;
    }


    .fv-account-profile-action {
        width:
            100%;

        min-height:
            38px;

        justify-content:
            space-between;

        margin-top:
            12px;

        border:
            0;

        border-top:
            1px solid
            #eeeeee;

        padding:
            10px
            0
            0;
    }


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

    .fv-account-section {
        margin:
            0;

        border:
            0;

        border-bottom:
            8px solid
            #f5f6f8;
    }


    .fv-account-section-head {
        min-height:
            44px;

        padding:
            0
            13px;
    }


    .fv-account-section-head
    h2 {
        font-size:
            13px;
    }


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

    .fv-account-order-shortcuts
    a {
        min-height:
            88px;

        gap:
            4px;
    }


    .fv-account-order-icon {
        width:
            36px;

        height:
            36px;

        font-size:
            19px;
    }


    .fv-account-order-shortcuts
    small {
        font-size:
            9px;
    }


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

    .fv-account-menu
    a {
        min-height:
            58px;

        padding:
            6px
            13px;
    }


    .fv-account-menu-icon {
        width:
            36px;

        height:
            36px;
    }


    /*
    |--------------------------------------------------------------------------
    | SELLER
    |--------------------------------------------------------------------------
    */

    .fv-account-seller-card {
        margin:
            0;

        border:
            0;

        border-bottom:
            8px solid
            #f5f6f8;
    }


    /*
    |--------------------------------------------------------------------------
    | LOGOUT
    |--------------------------------------------------------------------------
    */

    .fv-account-logout {
        margin:
            0;

        border:
            0;

        min-height:
            52px;
    }


    .fv-account-loading {
        min-height:
            350px;
    }

}


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

@media (
    max-width: 360px
) {

    .fv-account-order-shortcuts
    small {
        font-size:
            8px;
    }


    .fv-account-menu-copy
    strong {
        font-size:
            10px;
    }

}