/* =================================
   BOOKING PAGE
================================= */

.booking-page{
    padding:90px 0;
    background:#f5f7fb;
}

/* =================================
   COMMON CARD
================================= */

.booking-card{
    background:#fff;

    border-radius:18px;

    border:1px solid #ececec;

    padding:24px;

    margin-bottom:24px;

    position:relative;

    overflow:hidden;
}

/* =================================
   ITINERARY CARD
================================= */

.itinerary-card{
    background:#fff;

    border:1px solid #ececec;

    border-radius:18px;

    padding:24px;
}

/* SIDE CURVE */

.itinerary-card::before,
.itinerary-card::after{
    content:"";

    position:absolute;

    width:22px;
    height:22px;

    background:#f5f7fb;

    border-radius:50%;

    top:52%;

    transform:translateY(-50%);
}

.itinerary-card::before{
    left:-11px;
}

.itinerary-card::after{
    right:-11px;
}

/* TOP */

.itinerary-top{
    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;

    padding-bottom:22px;

    border-bottom:1px dashed #d8d8d8;
}

/* HOTEL TAG */

.hotel-tag{
    font-size:13px;

    color:#666;

    font-weight:500;

    margin-bottom:8px;

    display:inline-block;
}

/* TITLE */

.itinerary-top h2{
    font-size:40px;

    font-weight:600;

    color:#111;

    line-height:1.2;

    margin-bottom:10px;
}

/* LOCATION */

.booking-location{
    font-size:15px;

    color:#666;

    margin:0;
}

/* IMAGE */

.itinerary-top img{
    width:130px;
    height:95px;

    object-fit:cover;

    border-radius:14px;
}

/* =================================
   DETAILS GRID
================================= */

.booking-details-grid{
    display:grid;

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

    padding-top:24px;
}

/* DETAIL BOX */

.booking-detail-box{
    padding:0 18px;

    position:relative;
}

.booking-detail-box:first-child{
    padding-left:0;
}

.booking-detail-box:last-child{
    padding-right:0;
}

/* DIVIDER */

.booking-detail-box:not(:last-child)::after{
    content:"";

    position:absolute;

    top:8px;
    right:0;

    width:1px;
    height:58px;

    background:#e4e4e4;
}

/* LABEL */

.booking-detail-box span{
    display:block;

    font-size:13px;

    color:#777;

    margin-bottom:8px;
}

/* VALUE */

.booking-detail-box h4{
    font-size:18px;

    font-weight:600;

    color:#111;

    margin-bottom:0;
}

/* =================================
   ROOM SUMMARY CARD
================================= */

.room-summary-card h3{
    font-size:24px;

    font-weight:600;

    margin-bottom:22px;
}

/* ROOM SUMMARY */

.room-summary{
    display:flex;

    gap:20px;

    align-items:flex-start;
}

/* IMAGE */

.room-summary img{
    width:210px;
    height:160px;

    border-radius:14px;

    object-fit:cover;
}

/* TEXT */

.room-summary h4{
    font-size:24px;

    font-weight:600;

    margin-bottom:10px;
}

.room-summary p{
    color:#666;

    font-size:14px;

    line-height:1.8;

    margin-bottom:18px;
}

/* FEATURES */

.summary-features{
    display:flex;

    flex-wrap:wrap;

    gap:10px;
}

.summary-features span{
    background:#f3f4f8;

    padding:9px 14px;

    border-radius:30px;

    font-size:12px;

    font-weight:500;
}

/* =================================
   PRICE CARD
================================= */

.price-card h3{
    font-size:24px;

    font-weight:600;

    margin-bottom:24px;
}

/* PRICE ROW */

.price-row{
    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:18px;
}

.price-row span{
    color:#666;

    font-size:14px;
}

.price-row strong{
    font-size:16px;

    color:#111;
}

/* TOTAL */

.total-row{
    border-top:1px solid #ececec;

    padding-top:18px;

    margin-top:20px;
}

.total-row strong{
    color:#ff7a00;

    font-size:22px;
}

/* =================================
   LOGIN CARD
================================= */

.login-card h3{
    font-size:22px;

    font-weight:600;

    margin-bottom:12px;
}

.login-card p{
    color:#666;

    font-size:14px;

    line-height:1.7;

    margin-bottom:22px;
}

/* BUTTONS */

.booking-auth-btns{
    display:flex;

    gap:12px;
}

/* =================================
   LOGIN MODAL
================================= */

.login-modal{
    position:fixed;

    inset:0;

    background:rgba(0,0,0,0.65);

    z-index:99999;

    display:flex;

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

    opacity:0;
    visibility:hidden;

    transition:0.4s;
}

.login-modal.show{
    opacity:1;
    visibility:visible;
}

/* BOX */

.login-modal-box{
    width:820px;
    max-width:94%;

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    display:grid;

    grid-template-columns:1fr 1fr;

    position:relative;
}

/* CLOSE */

.login-close{
    position:absolute;

    top:16px;
    right:20px;

    font-size:30px;

    cursor:pointer;

    z-index:10;
}

/* LEFT */

.login-left{
    background:#fff3ee;

    padding:45px 30px;

    text-align:center;
}

.login-left img{
    width:180px;

    margin-bottom:20px;
}

.login-left h3{
    font-size:28px;

    font-weight:600;

    margin-bottom:10px;
}

.login-left p{
    color:#666;

    font-size:14px;
}

/* RIGHT */

.login-right{
    padding:50px 30px;

    display:flex;

    flex-direction:column;

    justify-content:center;
}

.login-right h4{
    font-size:26px;

    font-weight:600;

    margin-bottom:22px;
}

/* INPUT */

.login-input{
    width:100%;

    height:52px;

    border:1px solid #ddd;

    border-radius:10px;

    padding:0 16px;

    font-size:15px;

    margin-bottom:18px;
}

/* BUTTON */

.otp-btn{
    width:100%;

    height:52px;

    border:none;

    border-radius:10px;

    background:#111;

    color:#fff;

    font-size:15px;

    font-weight:600;

    transition:0.3s;
}

.otp-btn:hover{
    background:#ff7a00;
}

/* OTP */

.otp-text{
    color:#666;

    font-size:14px;

    margin-bottom:18px;
}

.otp-boxes{
    display:flex;

    gap:12px;

    margin-bottom:22px;
}

.otp-input{
    width:52px;
    height:52px;

    border:1px solid #ddd;

    border-radius:10px;

    text-align:center;

    font-size:20px;

    font-weight:600;
}

/* PAYMENT BUTTON */

.payment-btn{
    width:100%;

    border:none;
}

/* REGISTER BTN */

.register-btn{
    flex:1;

    background:#ff7a00;

    color:#fff;

    text-align:center;

    padding:14px;

    border-radius:10px;

    text-decoration:none;

    font-size:15px;
    font-weight:600;

    transition:0.3s;
}

.register-btn:hover{
    background:#111;
    color:#fff;
}

/* =================================
   TABLET
================================= */

@media(max-width:991px){

    .booking-page{
        padding:75px 0;
    }

    .itinerary-top{
        flex-direction:column;
    }

    .itinerary-top img{
        width:100%;
        height:220px;
    }

    .itinerary-top h2{
        font-size:34px;
    }

    .booking-details-grid{
        grid-template-columns:1fr;

        gap:20px;
    }

    .booking-detail-box{
        padding:0;
    }

    .booking-detail-box::after{
        display:none;
    }

    .room-summary{
        flex-direction:column;
    }

    .room-summary img{
        width:100%;
        height:240px;
    }

}

/* =================================
   MOBILE
================================= */

@media(max-width:768px){

    .login-modal-box{
        grid-template-columns:1fr;
    }

    .login-left{
        display:none;
    }

    .login-right{
        padding:40px 22px;
    }

    .otp-input{
        width:46px;
        height:46px;
    }

}

@media(max-width:576px){

    .booking-page{
        padding:60px 0;
    }

    .booking-card{
        padding:18px;

        border-radius:16px;
    }

    .itinerary-top h2{
        font-size:26px;
    }

    .booking-location{
        font-size:14px;
    }

    .booking-detail-box h4{
        font-size:16px;
    }

    .room-summary h4{
        font-size:22px;
    }

    .room-summary img{
        height:200px;
    }

    .room-summary p{
        font-size:13px;
    }

    .price-card h3,
    .login-card h3,
    .room-summary-card h3{
        font-size:21px;
    }

    .total-row strong{
        font-size:20px;
    }

    .booking-auth-btns{
        flex-direction:column;
    }

    .summary-features span{
        font-size:11px;

        padding:8px 12px;
    }

    .price-row span,
    .price-row strong{
        font-size:14px;
    }

    .login-right h4{
        font-size:22px;
    }

    .login-input,
    .otp-btn{
        height:48px;

        font-size:14px;
    }

    .register-btn{
        padding:12px;

        font-size:14px;
    }

}