/* ===== POPUP OVERLAY ===== */
#booking-popup {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: center;
}

/* ===== POPUP BOX ===== */
#booking-popup .popup-content {
    width: 100%;
    border-radius: 12px;
    position: relative;
    animation: popupFadeIn 0.3s ease;
}

#booking-form{background: #fff;   border-radius: 8px;max-width: 1000px;position: relative;overflow: hidden;width: 100%;}
.booking-popup-close{position: absolute; top: 0px; right: 15px; font-size: 24px; background: none; border: none; cursor: pointer; z-index: 9; box-shadow: none; background: none !important; color: #333 !important;}
.booking-left-input{display: flex;gap:20px;}
.booking-left-input >div{width: calc(50% - 10px);}
.booking-room-info{display: flex;margin-top: 8px; font-size: 14px;justify-content: space-between;}
.booking-room-info span{display: block;width:120px;}
.booking-room-info p{margin: 0;color:#666;font-size: 14px;font-weight: 500;text-align: right;}
.booking-room-photo{width: 100%;height: 200px;overflow: hidden;border-radius: 8px;margin-top:12px;margin-bottom:20px;}
.booking-room-photo img{width: 100%;height: 100%;object-fit: cover;}

.booking-room-dates{display: flex;gap:20px;}
.booking-room-dates >div{width:calc(50% - 10px);}
.booking-room-dates label{font-weight: 600;display: block;margin-bottom: 6px;}

.booking-room-total{border-top:1px solid #ebebeb;padding-top:12px;}
.booking-room-total p{color:#000;font-size: 18px;}

.e-show-error{color: red;font-size: 12px;margin: 0; margin-top: 10px;display: flex;justify-content: center;}
.e-show-success{width: 100%; text-align: center; min-height: 300px; display: flex; align-items: center; justify-content: center; padding: 2rem 5rem; font-size: 20px; color: #46753E; font-weight: 600;}

.booking-overlay{position: absolute;inset: 0;}

/* ===== CLOSE BUTTON ===== */
#booking-popup .popup-close {
    position: absolute;
    top: 14px;
    right: 16px;
    font-size: 22px;
    cursor: pointer;
    color: #666;
}

#booking-popup .popup-close:hover {
    color: #000;
}

/* ===== FORM LAYOUT ===== */
.booking-wrapper {
    display: flex;
    gap: 0 24px;
    flex-wrap: wrap;
    width:100%;
}

.booking-notify{width: 100%;}

/* LEFT & RIGHT */
.booking-left{width: 60%;padding:30px;display: flex;flex-direction: column;justify-content: space-between;}
.booking-right {
    width:calc(40% - 24px);
    background: #f7f7f7;
    padding:30px;
}
.booking-left textarea{height: 180px;}
/* ===== HEADINGS ===== */
.booking-left h3,
.booking-right h3 {
    margin-bottom: 12px;
    font-size: 18px;
}

/* ===== FORM ELEMENTS ===== */
#booking-form input,
#booking-form textarea {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    background: #fff;
}

#booking-form textarea {
    resize: vertical;
    min-height: 80px;
}

/* ===== ROOM INFO BOX ===== */
#room-info {
    margin-bottom: 12px;
    display: flex;flex-direction: column;justify-content: space-between;
    height: 100%;
}

/* ===== SUBMIT BUTTON ===== */
#booking-form button[type="submit"] {
    width: 100%;
    padding: 12px;
    background: var(--colorBG);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
    -moz-transition: all ease 0.5s;
    -ms-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
}

#booking-form button[type="submit"]:hover {
    background: var(--colorText);
}

/* ===== ANIMATION ===== */
@keyframes popupFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .booking-wrapper {
        flex-direction: column;
    }

    #booking-popup .popup-content {
        padding: 16px;
    }
}