body{
    background:#f5f7fb;
}

.fpd-calendar-header{
    background:#0f4c81;
    color:#fff;
    padding:35px;
    border-radius:15px;
    margin-bottom:30px;
}

.fpd-calendar-header h1{
    margin:0;
    color:#fff;
}

.fpd-calendar-header p{
    margin-top:10px;
}

.fpd-date-form{
    margin-bottom:30px;
}

.fpd-date-form input[type=date]{

    padding:10px;

    border-radius:8px;

    border:1px solid #ddd;

    font-size:16px;

}

.fpd-room-card{

    background:#fff;

    border-radius:15px;

    margin-bottom:30px;

    padding:25px;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.fpd-room-header{

    border-bottom:1px solid #eee;

    padding-bottom:15px;

    margin-bottom:20px;

}

.fpd-room-header h3{

    margin:0;

    font-size:24px;

    color:#0f4c81;

}

.fpd-slot-container{

    flex-wrap:wrap;

    gap:20px;

}

.fpd-slot{

    flex:1;

    min-width:180px;

}

.fpd-slot-time{

    text-align:center;

    font-weight:bold;

    margin-bottom:10px;

}

.fpd-book-btn{

    display:block;

    text-align:center;
    color: #ffffff !important;

    background:#22c55e;

    padding:14px;

    border-radius:10px;

    text-decoration:none;

    transition:.25s;

}

.fpd-row{
    display:flex;
    flex-wrap:wrap;
    margin-left:-15px;
    margin-right:-15px;
}

.col-md-4{
    width:100%;
    padding:15px;
    box-sizing:border-box;
}

@media (min-width:768px){
    .col-md-4{
        width:50%;
    }
}

@media (min-width:1200px){
    .col-md-4{
        width:33.3333%;
    }
}

.fpd-book-btn:hover{

    background:#15803d;

    transform:translateY(-2px);

}

.fpd-booked{

    background:#ef4444;

    color:#fff;

    padding:14px;

    border-radius:10px;

    text-align:center;

}