/* FFSTORE VENDOR CARD - FINAL */

/* WRAPPER */
.ff-vendor-wrapper{
    width:100%;
    max-width:1200px;
    margin:30px auto;
    clear:both;
}


/* MAIN CARD */
.ff-vendor-card{

    display:grid!important;

    grid-template-columns:120px 1fr 190px!important;

    grid-template-rows:auto auto!important;

    gap:20px 25px!important;

    align-items:center;

    padding:30px!important;

    background:#fff8f8;

    border:1px solid #f2dddd;

    border-radius:25px;

    box-sizing:border-box;

}



/* =========================
   ROW 1
========================= */


/* LOGO */

.ff-vendor-logo{

    grid-column:1;

    grid-row:1;

}



.ff-vendor-logo img{

    width:120px!important;

    height:120px!important;

    object-fit:cover;

    border-radius:50%;

    border:4px solid #fff;

    box-shadow:0 5px 15px rgba(0,0,0,.15);

}



/* INFO */

.ff-vendor-body{
padding-top:5px;
    grid-column:2;

    grid-row:1;

}



.ff-badge{

    display:inline-flex;

    align-items:center;

    gap:6px;

    background:#ed1c24;

    color:#fff!important;

    padding:8px 18px;

    border-radius:25px;

    font-size:14px;

    font-weight:700;

    line-height:1;

    margin-bottom:12px;

}



.ff-vendor-body h2{

    margin:10px 0 5px;

    font-size:28px;

    font-weight:700;
display:flex;

    align-items:center;

    gap:8px;

    margin:0 0 8px;

    font-size:28px;

    line-height:1.2;

}



.vendor-category{

    margin:5px 0;

}



/* RATING */

.ff-rating{

    font-size:16px;

    margin-top:12px;

}



/* ==========================
   BUTTON FIX
========================== */


.ff-menu-button{

    display:flex!important;

    align-items:center!important;

    justify-content:center!important;


    width:190px!important;

    height:55px!important;


    background:#ed1c24;

    color:white!important;


    border-radius:12px;


    font-size:16px;

    font-weight:700;


    white-space:nowrap;


    align-self:center;

}



.ff-menu-button:hover{

    background:#d71920;

}



/* =========================
   ROW 2 FEATURE
========================= */


.ff-feature{


    grid-column:1 / 4!important;

    grid-row:2!important;


    display:flex!important;


    width:100%;


    padding-top:25px;

    margin-top:10px;


    

}


/* Arrow */

.ff-menu-button i{

    margin-left:8px;

    font-size:14px;

}


.ff-feature-item{


    flex:1;


    display:flex!important;


    justify-content:flex-start!important;

    align-items:center!important;


    gap:15px;


    padding:0 25px;


    text-align:left;


    border-right:1px solid #ddd;


    box-sizing:border-box;


}



.ff-feature-item:first-child{

    padding-left:0;

}



.ff-feature-item:last-child{

    border-right:none;

}


/* VERIFIED ICON */

.ff-vendor-body h2 .verified,
.ff-vendor-body h2 i.fa-circle-check{

    color:#ed1c24;

    font-size:22px;

}


/* ICON */

.ff-feature-item i{


    width:45px;

    height:45px;


    display:flex;

    align-items:center;

    justify-content:center;


    flex:none;


    font-size:30px;


    color:#ed1c24;


}




/* TEXT */

.ff-feature-item div{

    text-align:left;

}



.ff-feature-item strong{


    display:block;


    font-size:16px;


    font-weight:700;


    color:#222;


}



.ff-feature-item span{


    display:block;


    color:#777;


    font-size:13px;


    line-height:1.5;


}




/* MOBILE */

@media(max-width:768px){

.ff-vendor-wrapper{
    padding:0 15px;
}


/* CARD MOBILE */

.ff-vendor-card{

    display:grid!important;

    grid-template-columns:65px 1fr auto!important;

    grid-template-rows:auto auto auto!important;

    gap:10px!important;

    padding:18px!important;

    border-radius:18px!important;

}



/* LOGO */

.ff-vendor-logo{

    grid-column:1;

    grid-row:1;

}


.ff-vendor-logo img{

    width:58px!important;

    height:58px!important;

}




/* INFO */

.ff-vendor-body{

    grid-column:2;

    grid-row:1;

}


.ff-badge{

    font-size:9px;

    padding:4px 10px;

}


.ff-vendor-body h2{

    font-size:15px!important;

    margin:5px 0!important;

    white-space:nowrap;

}


.vendor-category{

    font-size:11px;

}



.ff-rating{

    font-size:11px;

    margin-top:5px;

}




/* BUTTON */

.ff-menu-button{

    grid-column:3;

    grid-row:1;


    width:75px!important;

    height:32px!important;


    font-size:9px!important;

    border-radius:8px!important;

}




/* FEATURE */

.ff-feature{

    grid-column:1 / 4!important;

    grid-row:3;


    display:grid!important;

    grid-template-columns:repeat(3,1fr)!important;


    margin-top:10px;

    padding-top:15px;




}



.ff-feature-item{

    display:flex!important;

    flex-direction:column!important;

    align-items:flex-start!important;

    justify-content:flex-start;


    padding:0 8px!important;


    border-right:1px solid #eee;

}


.ff-feature-item:last-child{

    border:none;

}



.ff-feature-item i{

    width:35px;

    height:35px;


    font-size:18px;

    margin-bottom:8px;

}



.ff-feature-item strong{

    font-size:11px!important;

    line-height:1.3;

}



.ff-feature-item span{

    font-size:9px!important;

    line-height:1.4;

}




}

@media(max-width:768px){

.ff-vendor-wrapper{
    width:100%!important;
    max-width:none!important;
    padding:0 16px!important;
    margin:20px auto!important;
}


/* CARD FULL ALIGN */
.ff-vendor-card{

    width:100%!important;

    box-sizing:border-box!important;

    grid-template-columns:65px 1fr!important;

    padding:18px!important;

    gap:8px 12px!important;

    border-radius:18px!important;

}


/* LOGO */

.ff-vendor-logo img{

    width:62px!important;
    height:62px!important;

}



/* INFO */

.ff-vendor-body{

    padding:0!important;

}


.ff-badge{

    font-size:9px!important;

    padding:4px 10px!important;

    margin-bottom:3px;

}


.ff-vendor-body h2{

    font-size:16px!important;

    line-height:1.1!important;

    margin:4px 0!important;

}


.vendor-category{

    font-size:11px!important;

    line-height:1.2!important;

}


.ff-rating{

    font-size:11px!important;

    line-height:1.2!important;

    margin-top:5px!important;

}



/* BUTTON */

.ff-menu-button{

    grid-column:1 / 3!important;

    grid-row:auto!important;


    width:130px!important;

    height:36px!important;


    margin:8px auto 5px!important;


    font-size:11px!important;

    border-radius:10px!important;

}



/* FEATURE AREA */

.ff-feature{

    grid-column:1 / 3!important;

    margin-top:8px!important;

    padding-top:14px!important;


    display:grid!important;

    grid-template-columns:repeat(3,1fr)!important;

}



.ff-feature-item{

    padding:0 5px!important;

    gap:5px!important;

}



.ff-feature-item i{

    width:34px!important;

    height:34px!important;

    font-size:17px!important;

}



.ff-feature-item strong{

    font-size:11px!important;

    line-height:1.2!important;

}


.ff-feature-item span{

    font-size:9px!important;

    line-height:1.25!important;

}


/* hilangkan garis tengah */

.ff-feature-item{

    border-right:none!important;

}


}
@media(max-width:768px){

    .ff-vendor-wrapper{
        width:100%!important;
        max-width:none!important;
        margin-left:0!important;
        margin-right:0!important;
        padding-left:16px!important;
        padding-right:16px!important;
        box-sizing:border-box!important;
    }


    .ff-vendor-card{

        width:100%!important;

        max-width:none!important;

        margin-left:0!important;
        margin-right:0!important;

        box-sizing:border-box!important;

    }

}
@media(max-width:768px){

    .ff-vendor-wrapper{
        width:100%!important;
        max-width:none!important;
        padding-left:0!important;
        padding-right:0!important;
        margin-left:0!important;
        margin-right:0!important;
    }


    .ff-vendor-card{

        width:100%!important;
        max-width:none!important;

    }

}
@media(max-width:768px){


/* FEATURE MOBILE CLEAN */

.ff-feature{

    grid-column:1 / 3!important;

    display:grid!important;

    grid-template-columns:repeat(3,1fr)!important;

    gap:0!important;

    margin-top:12px!important;

    padding-top:15px!important;


}



/* REMOVE ALL LINE */

.ff-feature-item{

    border-right:none!important;

    border-left:none!important;

    border-bottom:none!important;


    display:flex!important;

    flex-direction:column!important;

    align-items:center!important;

    justify-content:flex-start!important;


    text-align:center!important;


    padding:0 5px!important;


}



/* ICON */

.ff-feature-item i{

    width:38px!important;

    height:38px!important;


    display:flex!important;

    align-items:center!important;

    justify-content:center!important;


    font-size:20px!important;


    margin-bottom:8px!important;


    color:#ed1c24!important;


}



/* TITLE */

.ff-feature-item strong{

    font-size:12px!important;

    font-weight:700!important;

    line-height:1.2!important;


    color:#222!important;


    margin-bottom:4px!important;

}



/* DESCRIPTION */

.ff-feature-item span{

    font-size:10px!important;

    line-height:1.35!important;


    color:#777!important;


}



/* RATAKAN SEMUA */

.ff-feature-item div{

    text-align:center!important;

}


}