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

.booking-page{
    background:linear-gradient(135deg,#f4f9ff,#ffffff,#eef6ff);
    min-height:100vh;
    padding:20px;
}

/*==========================================
            BOOKING HEADER
==========================================*/

.booking-header{
    text-align:center;
    margin-bottom:30px;
}

.booking-header h1{
    font-size:42px;
    color:#0d47a1;
    font-weight:800;
    margin:0;
    letter-spacing:2px;
}

.booking-header h2{
    font-size:28px;
    color:#198754;
    margin:10px 0;
}

.booking-header p{
    color:#555;
    font-size:17px;
    margin:0;
}

/*==========================================
            MAIN LAYOUT
==========================================*/

.booking-layout{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:25px;
    margin-top:30px;
}

/*==========================================
            FLOOR PANELS
==========================================*/

.floor-panel{
    background:#fff;
    border:2px solid #d9d9d9;
    border-radius:15px;
    padding:20px;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.ground-panel{
    width:44%;
}

.first-panel{
    width:56%;
}

.floor-heading{
    text-align:center;
    font-size:22px;
    font-weight:700;
    color:#0d47a1;
    margin-bottom:20px;
}

/*==========================================
              ROOM ROW
==========================================*/

.room-row{
    display:flex;
    justify-content:center;
    gap:12px;
}

/*==========================================
                ROOM
==========================================*/

.room{
    position:relative;

    width:110px;
    height:110px;

    background:#fff;
    border:2px solid #333;
    border-radius:10px;

}

/*==========================================
            ROOM TITLE
==========================================*/

.room-title{

    position:absolute;

    top:-22px;
    left:50%;

    transform:translateX(-50%);

    background:#fff;

    padding:0 8px;

    color:#0d47a1;

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

    z-index:999;
}
/*==========================================
                 BEDS
==========================================*/

.bed{

    position:absolute;

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

    border:2px solid #333;
    border-radius:6px;

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

    cursor:pointer;

    transition:.25s;

    z-index:5;
}

/*==========================================
            BED POSITION
==========================================*/

/* Top Bed */

.bed-top{

    width:68px;
    height:26px;

    left:50%;
    top:12px;

    transform:translateX(-50%);
}

/* Left Bed */

.bed-left{

    width:26px;
    height:66px;

    left:10px;
    top:38px;
}

/* Right Bed */

.bed-right{

    width:26px;
    height:66px;

    right:10px;
    top:38px;
}

/*==========================================
          BED STATUS
==========================================*/

.available{

    background:#ffffff;
    color:#222;

}

.booked{

    background:#e53935;
    color:#ffffff;
    border-color:#e53935;

}

/*==========================================
                DOOR
==========================================*/

.door{

    position:absolute;

    left:50%;
    bottom:-2px;

    transform:translateX(-50%);

    width:34px;
    height:8px;

    background:#8b5a2b;

    border-radius:5px 5px 0 0;

}

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

@media(max-width:992px){

    .booking-layout{

        flex-direction:column;

    }

    .ground-panel,
    .first-panel{

        width:100%;

    }

    .room-row{

        flex-wrap:wrap;

    }

}