/* =========================================================
   CLIFF VIEW AYURVEDA RETREAT
   ROOM DETAILS PAGE
========================================================= */

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

.room-details-header{
    text-align:center;
    max-width:750px;
    margin:0 auto 45px;
}

.room-details-header h1{
    font-family:var(--heading);
    font-size:48px;
    color:var(--primary-dark);
    margin:15px 0;
}

.room-details-availability{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--primary);
    font-weight:600;
    background:#eef5ef;
    padding:8px 18px;
    border-radius:30px;
}


/* =========================================================
   GALLERY
========================================================= */

.room-details-gallery{
    background:var(--bg);
    padding-bottom:60px;
}

.room-details-carousel-wrap{
    max-width:1000px;
    margin:0 auto;
}

.room-details-carousel{
    border-radius:26px;
    overflow:hidden;
    box-shadow:0 25px 55px rgba(24,51,41,.18);
}

.room-details-carousel .carousel-item{
    height:520px;
}

.room-details-carousel .carousel-item img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.room-details-carousel .carousel-control-prev,
.room-details-carousel .carousel-control-next{
    width:54px;
    height:54px;
    top:50%;
    transform:translateY(-50%);
    border-radius:50%;
    background:rgba(24,51,41,.45);
    opacity:0;
    transition:var(--transition);
}

.room-details-carousel:hover .carousel-control-prev,
.room-details-carousel:hover .carousel-control-next{
    opacity:1;
}

.room-details-carousel .carousel-control-prev{
    left:20px;
}

.room-details-carousel .carousel-control-next{
    right:20px;
}

.room-details-carousel .carousel-control-prev:hover,
.room-details-carousel .carousel-control-next:hover{
    background:var(--secondary);
}

.room-details-carousel .carousel-control-prev-icon,
.room-details-carousel .carousel-control-next-icon{
    width:16px;
    height:16px;
}

.room-details-thumbs{
    display:flex;
    gap:14px;
    justify-content:center;
    margin-top:20px;
}

.room-details-thumb{
    width:96px;
    height:70px;
    border-radius:14px;
    overflow:hidden;
    border:3px solid transparent;
    padding:0;
    cursor:pointer;
    opacity:.6;
    transition:var(--transition);
}

.room-details-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.room-details-thumb:hover{
    opacity:.9;
}

.room-details-thumb.active{
    opacity:1;
    border-color:var(--secondary);
}

@media (max-width:768px){
    .room-details-carousel .carousel-item{
        height:300px;
    }
    .room-details-thumb{
        width:70px;
        height:52px;
    }
    .room-details-carousel .carousel-control-prev,
    .room-details-carousel .carousel-control-next{
        display:none;
    }
}


/* =========================================================
   DESCRIPTION & FEATURES
========================================================= */

.room-details-info{
    background:#fff;
}

.room-details-info h2{
    font-family:var(--heading);
    font-size:38px;
    color:var(--primary-dark);
    margin:15px 0 25px;
}

.room-details-intro{
    line-height:1.9;
    font-size:17px;
}

.room-details-features{
    background:var(--bg);
    border-radius:24px;
    padding:35px;
    box-shadow:var(--shadow);
}

.room-details-features h3{
    font-family:var(--heading);
    font-size:24px;
    color:var(--primary-dark);
    margin-bottom:22px;
}

.room-details-features ul{
    list-style:none;
    margin:0 0 30px;
    padding:0;
}

.room-details-features li{
    display:flex;
    align-items:center;
    gap:14px;
    padding:12px 0;
    border-bottom:1px solid rgba(24,51,41,.08);
    line-height:1.5;
}

.room-details-features li:last-child{
    border-bottom:0;
}

.room-feature-icon{
    flex:0 0 38px;
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--primary);
    color:#fff;
    font-size:14px;
}

.room-details-cta{
    width:100%;
    justify-content:center;
}

.room-details-cta i{
    margin-left:10px;
}


/* =========================================================
   EXPLORE OTHER ROOMS
========================================================= */

.room-details-other{
    background:var(--bg);
}

.room-details-other-card{
    position:relative;
    display:block;
    height:260px;
    border-radius:24px;
    overflow:hidden;
    box-shadow:var(--shadow);
}

.room-details-other-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .6s ease;
}

.room-details-other-card:hover img{
    transform:scale(1.08);
}

.room-details-other-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(24,51,41,0) 35%,rgba(24,51,41,.85) 100%);
}

.room-details-other-text{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding:25px 28px;
}

.room-details-other-text span{
    display:block;
    color:var(--secondary);
    letter-spacing:2px;
    font-size:12px;
    font-weight:600;
    text-transform:uppercase;
    margin-bottom:6px;
}
.room-details-other-text h4{
    font-family:var(--heading);
    font-size:24px;
    color:#fff;
    margin:0;
}