/* ==========================================================
   Francherry Booking Core
   Dashboard Typography System
   Elementor controls all card styling
==========================================================*/

/* ==========================================================
   Widget Card
==========================================================*/

.fb-widget-card{
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
}

/* ==========================================================
   Widget Header
==========================================================*/

.fb-widget-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:22px;
}

.fb-widget-title{
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1.2px;
    color:#8F8F8F;
    line-height:1.5;
}

.fb-widget-icon{
    font-size:18px;
    color:#C89B3C;
}

/* ==========================================================
   Widget Value
==========================================================*/

.fb-widget-value{
    font-size:46px;
    font-weight:700;
    line-height:1;
    color:#181818;
    margin-bottom:24px;
}

.fb-widget-line1{
    font-size:14px;
    font-weight:500;
    color:#999;
    margin-bottom:6px;
}

.fb-widget-line2{
    font-size:20px;
    font-weight:600;
    color:#202020;
    line-height:1.4;
}

/* ==========================================================
   Upcoming Appointments
==========================================================*/

.fb-upcoming-wrapper{
    display:flex;
    flex-direction:column;
    height:100%;
}

.fb-upcoming-title{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:24px;

    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1.2px;
    color:#8F8F8F;
}

.fb-upcoming-title i{
    color:#C89B3C;
    font-size:16px;
}

.fb-upcoming-list{
    display:flex;
    flex-direction:column;
    gap:18px;
}

/* ==========================================================
   Appointment Row
==========================================================*/

.fb-appointment-row{

    padding:0 0 22px;
    margin-bottom:22px;

    border-bottom:1px solid #DADADA;

}

.fb-appointment-row:last-child{

    border-bottom:none;
    margin-bottom:0;
    padding-bottom:0;

}

/* ==========================================================
   Appointment Header
==========================================================*/

.fb-appointment-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px;
}

.fb-appointment-time{
    font-size:16px;
    font-weight:700;
    color:#202020;
}

.fb-appointment-service{
    font-size:18px;
    font-weight:600;
    color:#202020;
    margin-bottom:4px;
}

.fb-appointment-customer{
    font-size:14px;
    color:#888;
}

/* ==========================================================
   Status Badge
==========================================================*/

.fb-status{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:5px 12px;

    border-radius:50px;

    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.4px;
}

.fb-status.approved{
    background:#EAF8EF;
    color:#2E7D32;
}

.fb-status.pending{
    background:#FFF8D8;
    color:#B8860B;
}

.fb-status.cancelled{
    background:#FDECEC;
    color:#D32F2F;
}

.fb-status.rejected{
    background:#ECECEC;
    color:#666;
}

/* ==========================================================
   Empty State
==========================================================*/

.fb-empty{
    text-align:center;
    color:#999;
    padding:40px 0;
    font-size:15px;
}

/* ==========================================================
   Footer
==========================================================*/

.fb-upcoming-footer{

    margin-top:12px;

}

/* ==========================================================
   View All Button
==========================================================*/

.fb-upcoming-footer{

    margin-top:18px;

}

.fb-view-all{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    padding:10px 18px;

    background:#C89B3C;
    color:#FFFFFF;

    border-radius:8px;

    font-size:14px;
    font-weight:600;

    text-decoration:none;

    transition:all .25s ease;

}

.fb-view-all:hover{

    background:#A67811;
    color:#FFFFFF;

    transform:translateY(-2px);

}

.fb-view-all i{

    font-size:13px;

}

/* ==========================================================
   Responsive
==========================================================*/

@media (max-width:1024px){

    .fb-widget-value{
        font-size:40px;
    }

}

@media (max-width:768px){

    .fb-widget-title,
    .fb-upcoming-title{
        font-size:12px;
    }

    .fb-widget-value{
        font-size:34px;
    }

    .fb-widget-line2{
        font-size:18px;
    }

    .fb-appointment-service{
        font-size:16px;
    }

    .fb-appointment-time{
        font-size:15px;
    }

}

@media (max-width:480px){

    .fb-widget-value{
        font-size:30px;
    }

    .fb-widget-line2{
        font-size:17px;
    }

    .fb-widget-icon{
        font-size:16px;
    }

    .fb-appointment-header{
        flex-direction:column;
        align-items:flex-start;
        gap:8px;
    }

}

/* ==========================================================
   Recent Customers
==========================================================*/

.fb-customer-row{

display:flex;

align-items:center;

gap:16px;

}

.fb-avatar{

width:46px;

height:46px;

border-radius:50%;

background:#C89B3C;

color:#fff;

display:flex;

justify-content:center;

align-items:center;

font-weight:700;

font-size:16px;

flex-shrink:0;

}

.fb-customer-content{

flex:1;

}

.fb-customer-date{

font-size:13px;

color:#999;

margin-top:6px;

}