/* -----------------------------------
   12. BOOKING NOTIFICATION PAGE
----------------------------------- */


.bookingWrap{
    width:100%;
    max-width:600px;
    min-height:100vh;
    margin:0 auto; 
}

.bookingBox{
    width:calc(100% - 10px);
    margin:25px auto;
    padding-top:10px;
    border:1px solid #c5c5c5;
    border-radius:12px;
    box-sizing: border-box;
    overflow:hidden;
    background-color:#fff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12); 
}



/* -----------------------------------
   12. BOOKING MODAL
----------------------------------- */

.bookingModal{
    display:none;
    position:fixed;
    inset:0;
    z-index:9999;
    background:rgba(0,0,0,.55);
    align-items:center;
    justify-content:center;
}

.bookingModal.is-open{
    display:flex;
}

.bookingModalBox{
    position:relative;
    width:calc(100% - 20px);
    max-width:480px;
    max-height: 76vh;
    margin: auto;
    padding-bottom: 30px;
    border-radius:12px;
    box-sizing: border-box;
    overflow-y: auto;
    background:#fff;
    -webkit-overflow-scrolling: touch;
}

body.modal-open{
    overflow:hidden;
}


.bookingModalClose{
    z-index: 1001;
    position:absolute;
    top:5px;
    right:5px;
    width:36px;
    height:36px;
    border:none;
    background:transparent;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    border-radius:18px;
    color:#444;
    padding:0;
}

.bookingModalClose:hover{
    background:rgba(0,0,0,0.06);
    color:#000;
}

.bookingModalClose svg{
    display:block;
}

.bookingModalHeader{
    position: sticky;
    top: 0;
    z-index: 1000;
    text-align:center;
    padding:30px 0px 14px;
    border-bottom:1px solid #d9d9d9;
    margin-bottom:18px; 
    background-color: #fff;
}

.bookingModalTitle{
    font-size: clamp(1.45rem, 1vw + 1rem, 1.6rem);
    font-weight:700;
    margin:0 0 15px 0;
    line-height:1.2;
}

.bookingModalSub{
    margin:0;
    font-size:clamp(.95rem, 1.4vw, 1.03rem);
    font-weight: 600;
    color:#777;
}

.bookingModalPayNote{
    font-size:clamp(.82rem, 1.2vw, .9rem);
    font-weight: 500;
    color:#2f855a;
}


.bookingField{
    padding: 0 20px;
    margin-bottom:18px;
    box-sizing: border-box;
}

.bookingLabel{
    display:block;
    font-weight:600;
    font-size: clamp(1.125rem, 0.8vw + 1rem, 1.2rem);
    margin-top: 30px;
    margin-bottom:10px;
    color:var(--text-dark);
}

.bookingOptions{
    display:flex;
    flex-direction:column;
    gap:15px;
    padding: 10px 0 10px;
}

.bookingOption{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border:1px solid rgba(0,0,0,.12);
    border-radius:8px;
    cursor:pointer;
    transition:.15s ease;
    background:#fff;
}

.bookingOption:hover{
    border-color:rgba(0,0,0,.25);
    background:#fafafa;
}

.bookingOption input{
    margin:0;
}

.bookingTextarea{
    width:100%;
    border:1px solid rgba(0,0,0,.15);
    border-radius:8px;
    padding:10px 12px;
    font-size:14px;
    resize:none;
}

.bookingOptional{
    font-weight:400;
    color:#777;
    font-size:14px;
    margin-left:6px;
}

.bookingActions{
    display:flex;
    justify-content:flex-end;
    padding: 20px 0 30px 0;
    margin: 0 20px;
    box-sizing: border-box; 
}

.bottomNote{
    padding: 0 20px;
    font-size: clamp(0.8125rem, 0.4vw + 0.7rem, 0.875rem);
    font-weight: 500;
    color:var(--text-light);
}






@media (max-width: 610px) {

    .bookingBox{
        margin:5px auto 30px;
    }

   .bookingModalBox {
        max-height: 96vh;
        max-height: 96svh;
    }    

}