.bbp-wrapper{
    background:#344b46 !important;
    color:#fff !important;
    padding:35px;
    border-radius:22px;
    max-width:950px;
    margin:40px auto;
    font-family:Inter,Arial,sans-serif;
    box-shadow:0 15px 40px rgba(0,0,0,.18);
}



.bbp-wrapper h2{
    color:#fff!important;
    font-size:28px!important;
    font-weight:800;
    margin-bottom:30px;
}



.bbp-wrapper h3{
    color:#fff!important;
    font-size:19px;
    font-weight:700;
    margin-bottom:18px;
}



.bbp-step{
    margin-bottom:35px;
}




.bbp-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:15px;
}




.bbp-card{
    background:#fff!important;
    color:#222!important;
    border:2px solid transparent!important;
    padding:18px 15px!important;
    border-radius:16px!important;
    cursor:pointer;
    font-size:16px;
    font-weight:600;
    transition:.25s ease;
    box-shadow:0 5px 15px rgba(0,0,0,.08);
}



.bbp-card:hover{
    transform:translateY(-4px);
    box-shadow:0 10px 25px rgba(0,0,0,.15);
}




.bbp-card.active{
    background:#101010!important;
    color:#fff!important;
    border-color:#fff!important;
    transform:scale(1.03);
}




.bbp-service strong{
    display:block;
    color:#222!important;
    font-size:17px;
}



.bbp-service span{
    color:#666!important;
    font-size:14px;
}



.bbp-service.active strong,
.bbp-service.active span{
    color:#fff!important;
}





#bbp-subservices{
    background:#fff;
    color:#222;
    padding:22px;
    border-radius:18px;
    margin-bottom:30px;
}



#bbp-subservices h3{
    color:#222!important;
}




.bbp-extra{
    display:flex;
    align-items:center;
    gap:10px;
    background:#f5f5f5;
    padding:14px;
    margin-bottom:10px;
    border-radius:12px;
    transition:.2s;
}



.bbp-extra:hover{
    background:#e9e9e9;
}



.bbp-extra input{
    width:18px;
    height:18px;
}





#bbp-dates,
#bbp-times{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
    gap:12px;
}





.bbp-time{
    background:#fff!important;
    color:#222!important;
    border:none!important;
    padding:15px!important;
    border-radius:14px!important;
    cursor:pointer;
    font-weight:700;
    transition:.2s;
}




.bbp-time:hover{
    transform:translateY(-3px);
    background:#f1f1f1!important;
}




.bbp-time.active{
    background:#111!important;
    color:#fff!important;
}




/* FOGLALT IDŐPONT */

.bbp-time.disabled,
.bbp-time.booked{
    background:#999!important;
    color:#eee!important;
    cursor:not-allowed!important;
    opacity:.45;
    text-decoration:line-through;
    transform:none!important;
}



.bbp-time.disabled:hover,
.bbp-time.booked:hover{
    transform:none;
}





.bbp-date.disabled{
    opacity:.4;
    cursor:not-allowed;
}




.bbp-summary{
    background:#fff;
    color:#222;
    padding:25px;
    border-radius:20px;
    margin-top:35px;
    box-shadow:0 8px 20px rgba(0,0,0,.12);
}



.bbp-summary h3{
    color:#222!important;
}



.bbp-summary p{
    display:flex;
    justify-content:space-between;
    border-bottom:1px solid #eee;
    padding:8px 0;
    margin:0;
    color:#555;
}



.bbp-summary b{
    color:#111!important;
}





.bbp-customer{
    margin-top:30px;
}



.bbp-customer input{
    width:100%;
    padding:15px;
    margin-bottom:12px;
    border-radius:12px;
    border:none;
    font-size:16px;
}





#bbp-submit-booking{
    width:100%;
    background:#111;
    color:#fff;
    border:none;
    padding:17px;
    border-radius:14px;
    font-size:17px;
    font-weight:700;
    cursor:pointer;
    transition:.25s;
}



#bbp-submit-booking:hover{
    background:#000;
    transform:translateY(-2px);
}





#bbp-message{
    margin-top:15px;
    font-weight:bold;
}







@media(max-width:700px){

    .bbp-wrapper{
        padding:20px;
        margin:20px 10px;
        border-radius:18px;
    }


    .bbp-wrapper h2{
        font-size:23px!important;
    }


    .bbp-grid{
        grid-template-columns:1fr;
    }


    #bbp-times,
    #bbp-dates{
        grid-template-columns:repeat(2,1fr);
    }


}



@media(max-width:400px){

    #bbp-times,
    #bbp-dates{
        grid-template-columns:1fr;
    }

}