.booking-modal{
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.75);
    z-index: 99999;

    justify-content: center;
    align-items: center;

    padding: 15px;
    overflow-y: auto;   /* Mobile scroll */
}
.slot.booked{

    background:#ff4d4d !important;

    color:white !important;

    border-color:#ff4d4d;

    cursor:not-allowed;

    opacity:.6;

}

.slot.active{

    background:#bbe7cb;

    color:white;

    border-color:#00B140;

}

.booking-box{

    width:100%;
    max-width:500px;      /* 550 se 500 */

    background:#fff;

    border-radius:18px;

    padding:25px;

    position:relative;

    max-height:90vh;      /* Screen se bahar nahi jayega */
    overflow-y:auto;      /* Andar scroll */

    animation:popup .3s ease;
}

@keyframes popup{

from{

transform:scale(.8);
opacity:0;

}

to{

transform:scale(1);
opacity:1;

}

}

.close-btn{

    position:absolute;

    top:12px;
    right:15px;

    width:40px;
    height:40px;

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:32px;
    font-weight:bold;

    color:#333;

    cursor:pointer;

    border-radius:50%;

    transition:.3s;
}

.close-btn:hover{

    background:#f2f2f2;

}

.booking-box h2{

    margin-bottom:18px;
    padding-right:45px; /* Cross ke liye space */

    font-size:26px;

}


.booking-box form{

display:flex;

flex-direction:column;

gap:15px;

}

.booking-box input,
.booking-box select,
.booking-box textarea{

padding:14px;

border:1px solid #ccc;

border-radius:10px;

font-size:16px;

outline:none;

}

.booking-box button{

padding:15px;

border:none;

background:#00B140;

color:black;

font-weight:bold;

font-size:17px;

border-radius:10px;

cursor:pointer;

transition:.3s;

}

.booking-box button:hover{

background:#00d84f;


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

    .booking-box{

        max-width:100%;
        padding:20px;
        border-radius:15px;

    }

    .booking-box h2{

        font-size:22px;

    }

    .booking-box input,
    .booking-box select,
    .booking-box textarea{

        padding:12px;
        font-size:15px;

    }

    .booking-box button{

        padding:13px;
        font-size:16px;

    }

    .close-btn{

        top:10px;
        right:10px;
        font-size:28px;

    }

}


.slots{

display:grid;

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

gap:10px;

}

.slot{

padding:12px;

border:2px solid #00B140;

background:white;

cursor:pointer;

border-radius:10px;

transition:.3s;

font-weight:bold;

}

.slot:hover{

background:#00B140;

color:white;

}

.slot.active{

background:#00B140;

color:white;

}


/* =========================
   BOOKING SUCCESS POPUP
========================= */

.success-popup{

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.75);

    z-index:100000;

    justify-content:center;

    align-items:center;

    padding:20px;

}

.success-box{

    width:100%;

    max-width:400px;

    background:white;

    border-radius:20px;

    padding:35px 25px;

    text-align:center;

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

    animation:successPopup .3s ease;

}

.success-icon{

    width:70px;

    height:70px;

    margin:0 auto 20px;

    background:#00B140;

    color:white;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:40px;

    font-weight:bold;

}

.success-box h2{

    color:#111;

    margin-bottom:12px;

    font-size:28px;

}

.success-box p{

    color:#666;

    line-height:1.6;

    margin-bottom:25px;

}

.success-box button{

    width:100%;

    padding:14px;

    border:none;

    border-radius:10px;

    background:#00B140;

    color:white;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

}

.success-box button:hover{

    background:#00d84f;

}

@keyframes successPopup{

    from{

        transform:scale(.8);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}