.cb-modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
display:none;
align-items:center;
justify-content:center;
z-index:9999;
}
button.back {
    background-color: #fff !important;
}
.cb-modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.5);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.cb-modal-content{
    background:#fff;
    width:600px;
    border-radius:20px;
    padding:25px;
}

.cb-step{ display:none; }
.cb-step.active{ display:block; }

/* HEADER */
.cb-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:20px;
}

.cb-header h2{
    flex:1;
    text-align:center;
    font-size:22px;
    font-weight:600;
}

.cb-header .back,
.cb-header .cb-close{
    border:none;
    background:none;
    font-size:20px;
    cursor:pointer;
}

.cb-header .hidden{ visibility:hidden; }

/* STEP BAR */
.center{
    text-align:center;
}

.progress{
    display:flex;
    gap:6px;
    justify-content:center;
    margin-top:5px;
}

.progress span{
    width:40px;
    height:4px;
    background:#ddd;
    border-radius:5px;
}

.progress span.active{
    background:#7a8f3c;
}

/* TYPE BUTTONS */
.type-options{
    display:flex;
    gap:10px;
}

.type{
    flex:1;
    padding:15px;
    border-radius:10px;
    border:1px solid #ddd;
    background:#f5f5f5;
    display:flex;
    align-items:center;
    gap:10px;
}

.type.active{
    background:#7a8f3c;
    color:#fff;
}

/* DAYS */
.days{
    display:flex;
    gap:10px;
}

.day-btn{
    background:#f5f5f5;
    border:none;
    padding:12px;
    border-radius:10px;
}

.day-btn.active{
    background:#7a8f3c;
    color:#fff;
}

/* TABS */
.time-tabs{
    display:flex;
    background:#eee;
    border-radius:30px;
    padding:5px;
}

.tab{
    flex:1;
    border:none;
    background:none;
    padding:10px;
    border-radius:30px;
}

.tab.active{
    background:#7a8f3c;
    color:#fff;
}

/* TIME */
.times{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.time-btn{
    padding:10px 15px;
    border:none;
    background:#eee;
    border-radius:30px;
}

.time-btn.active{
    background:#7a8f3c;
    color:#fff;
}

/* INPUTS */
input{
    width:100%;
    padding:12px;
    margin-bottom:15px;
    border-radius:8px;
    border:1px solid #ddd;
}

/* BUTTONS */
.primary-btn{
    width:100%;
    padding:14px;
    background:#7a8f3c;
    color:#fff;
    border:none;
    border-radius:8px;
}

/* SUMMARY */
.summary-box{
    background:#f5f5f5;
    padding:20px;
    border-radius:12px;
}

.summary-row{
    display:flex;
    justify-content:space-between;
    margin-bottom:15px;
}

.summary-row label{
    color:#888;
}
button.cb-close {
    position: relative;
    color: #fff !important;
    background-color: #7d8d3f !important;
    border-style: solid;
    border-width: 0px 0px 0px 0px;
}

.fee{
    display:flex;
    justify-content:space-between;
    background:#fff;
    padding:15px;
    border-radius:10px;
}

/* ACTIONS */
.actions{
    display:flex;
    gap:10px;
    margin-top:20px;
}

.cancel-btn{
    flex:1;
    padding:12px;
    background:#eee;
    border:none;
    border-radius:8px;
}

.pay-btn{
    flex:1;
    background:#7a8f3c;
    color:#fff;
    border:none;
    border-radius:8px;
}
h2.text-center {
    text-align: center;
    font-size: 25px !important;
}
button.cancel-btn {
    width: 100%;
    padding: 12px;
    background: #7c8d3f;
    color: #fff;
    border: none;
    cursor: pointer;
    margin-top: 15px;
}
.time-btn.disabled{
    background:#ddd;
    color:#999;
    cursor:not-allowed;
    opacity:0.6;
}
.cb-close{
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 13px !important;
    background: none;
    border: none;
    cursor: pointer !important;
    border-radius: 20px !important;
    width: 35px;
    padding: 0px;
    height: 35px;
}

.cb-modal-content{
background:#fff;
padding:30px;
width:500px;
border-radius:10px;
}

.cb-step{
display:none;
}

.cb-step.active{
display:block;
}

.type-options{
	display:flex;
	gap:10px;
	margin-bottom:20px;
    margin-top: 50px;
}

.type {
    flex: 1;
    padding: 15px;
    border: none;
    background: #eee !important;
    cursor: pointer !important;
    border-radius: 10px !important;
    color: #1E1E1E !important;
}

.cb-step.step1 h2 {
    font-family: 'Oxygen';
    font-weight: 700;
    font-size: 24px;
    line-height: 100%;
}


.type.active{
	background:#7c8d3f !important;
	color:#fff !important;
	border-radius: 10px !important;
}
img.icon_sml {
    width: 35px;
    padding: 5px;
    margin: -10px;
    margin-right: 0px;
}
.days button,
.times button{
margin:5px;
padding:10px 15px;
border:none;
background:#eee;
cursor:pointer;
}
.times button{
border-radius: 20px !important;
cursor:pointer !important;
}

.days button.active,
.times button.active{
background:#7c8d3f;
color:white;
}

input{
width:100%;
padding:12px;
margin:10px 0;
border:1px solid #ccc;
border-radius:5px;
}
div#text_p\ text-center {
    font-size: 20px;
    text-align: center;
    font-weight: 500;
}
.mid {
    text-align: center;
    position: relative;
    display: block;
    margin-top: 40px;
}
button.img_size.text-center {
    border-radius: 30px;
    text-align: center;
    margin: 0 auto;
    position: relative;
    display: flex;
}

button.img_size.text-center img.emoji {
    font-size: 20px;
    color: #fff;
    height: 48px !important;
    width: 32px !important;
    padding: 2px !important;
}
.next,
#confirmBooking{
width:100%;
padding:12px;
background:#7c8d3f;
color:#fff;
border:none;
cursor:pointer;
margin-top:15px;
}


.days{
display:flex;
gap:12px;
flex-wrap:wrap;
}

.day-btn{
background:#f2f2f2;
border:none;
padding:15px;
border-radius:12px;
width:90px;
text-align:center;
cursor:pointer;
}

.day-btn .day{
display:block;
color:#7c8d3f;
font-weight:600;
font-size:14px;
}

.day-btn .date{
display:block;
font-size:16px;
font-weight:600;
color: #1E1E1E;
}
.cb-step.step2 h3 {
    font-family: Merriweather;
    font-weight: 400;
    font-size: 17px;
    line-height: 24px;
    text-align: left;
}
.day-btn.active{
background:#7c8d3f;
color:#fff;
}

.day-btn.active .day{
color:#fff;
}

.time-tabs{
display:flex;
background:#eee;
border-radius:40px;
padding:5px;
margin:15px 0;
}

.tab{
	flex: 1;
    border: none;
    background: #eeeeee !important;
    padding: 12px;
    border-radius: 20px !important;
    cursor: pointer !important;
    color: #1E1E1E !important;
}

.tab.active {
    background: #7c8d3f !important;
    color: #fff !important;
    border-radius: 20px;
}

.time-btn{
margin:5px;
padding:12px 20px;
border:none;
border-radius:25px;
background:#eee !important;
cursor:pointer;
color: #1E1E1E !important;
}

.time-btn.active{
background:#7c8d3f !important;
color:#fff !important;
}

button.day-btn {
    background: #F6F6F6 !important;
    border-radius: 4px;
    opacity: 1;
    padding-top: 12px;
    padding-right: 24px;
    padding-bottom: 12px;
    padding-left: 24px;
}

button.day-btn.active {
    background: #7c8d3f !important;
    border-radius: 4px;
    opacity: 1;
    padding-top: 12px;
    padding-right: 24px;
    padding-bottom: 12px;
    padding-left: 24px;
    color: #fff !important;
}