/* ============================= */
/* GLOBAL */
/* ============================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
background:#ffffff;
color:#1a2b33;
overflow-x:hidden;
line-height:1.6;
}






/* ============================= */
/* GUESTHOUSE DETAIL */
/* ============================= */

.guesthouse-detail{
padding:120px 8% 60px;
background:#f7fbfd;
}

.detail-container{
display:grid;
grid-template-columns:2fr 1fr;
gap:50px;
align-items:start;
}


/* ============================= */
/* Gallery */
/* ============================= */

.gallery{
display:flex;
flex-direction:column;
gap:15px;
margin-bottom:25px;
}

/* Main Image */

.main-image img{
width:100%;
height:420px;
object-fit:cover;
border-radius:18px;
display:block;
}


/* ============================= */
/* Thumbnail Grid */
/* ============================= */

.gallery-grid{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:8px;
}

.gallery-grid img{
width:100%;
height:70px;
object-fit:cover;
border-radius:10px;
cursor:pointer;
transition:.3s;
opacity:.85;
}

.gallery-grid img:hover{
opacity:1;
transform:scale(1.05);
}

.gallery-grid img.active{
border:2px solid #2bb3c0;
opacity:1;
}


/* ============================= */
/* Info */
/* ============================= */

.detail-info h1{
margin-bottom:10px;
}

.description{
margin-bottom:30px;
color:#6b7c86;
}


/* ============================= */
/* Guest Meta */
/* ============================= */

.guest-meta{
display:flex;
align-items:center;
gap:20px;
margin:15px 0 20px;
flex-wrap:wrap;
}

/* Location */

.location{
display:flex;
align-items:center;
gap:8px;
color:#666;
font-size:15px;
}

.location i{
color:#2ca6a4;
font-size:14px;
}

/* Price */

.price-tag{
background:#f5f7f8;
padding:8px 14px;
border-radius:20px;
display:flex;
align-items:center;
gap:5px;
}

.price-tag .amount{
font-size:16px;
font-weight:600;
color:#222;
}

.price-tag .night{
font-size:13px;
color:#777;
}


/* ============================= */
/* Section Title */
/* ============================= */

.section-title{
font-size:22px;
font-weight:600;
margin:35px 0 15px;
color:#222;
}


/* ============================= */
/* Amenities */
/* ============================= */

.amenities-section{
margin-top:30px;
}

.amenities{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:15px;
margin-bottom:30px;
}

.amenity{
display:flex;
align-items:center;
gap:10px;
background:#f6f8f9;
padding:12px 18px;
border-radius:12px;
font-size:15px;
color:#333;
transition:0.2s ease;
cursor:pointer;
}

.amenity i{
color:#2ca6a4;
font-size:16px;
}

.amenity:hover{
transform:translateY(-2px);
box-shadow:0 5px 15px rgba(0,0,0,0.05);
background:white;
}


/* ============================= */
/* Detail Layout */
/* ============================= */

.detail-left{
display:flex;
flex-direction:column;
}

.detail-info{
position:relative;
z-index:2;
}


/* ============================= */
/* Booking Card */
/* ============================= */

.booking-card{
background:white;
padding:30px;
border-radius:20px;
height:fit-content;
position:sticky;
top:120px;
box-shadow:0 10px 30px rgba(0,0,0,.05);
align-self:start;
}

.booking-card h3{
margin-bottom:20px;
}


/* Price Box */

.price-box{
margin-bottom:20px;
}

.price-box h2{
font-size:28px;
margin:0;
}

.price-box span{
font-size:14px;
color:#7a8f98;
}


/* Booking Info */

.booking-info{
margin-bottom:20px;
display:flex;
flex-direction:column;
gap:12px;
}

.booking-item{
display:flex;
align-items:center;
gap:12px;
font-size:14px;
color:#4a5b63;
}

.booking-item i{
color:#2bb3c0;
}


/* Buttons */

.book-btn-big{
display:block;
background:#2bb3c0;
color:white;
text-align:center;
padding:14px;
border-radius:30px;
text-decoration:none;
font-weight:500;
margin-bottom:12px;
transition:.3s;
}

.book-btn-big:hover{
background:#2197a3;
transform:translateY(-2px);
}

.contact-btn{
display:block;
border:1px solid #2bb3c0;
color:#2bb3c0;
text-align:center;
padding:12px;
border-radius:30px;
text-decoration:none;
transition:.3s;
}

.contact-btn:hover{
background:#2bb3c0;
color:white;
}


/* Note */

.booking-note{
margin-top:15px;
font-size:12px;
color:#7a8f98;
display:flex;
align-items:center;
gap:8px;
}


/* ============================= */
/* Responsive */
/* ============================= */

@media(max-width:900px){

.detail-container{
grid-template-columns:1fr;
}

.booking-card{
position:relative;
top:0;
}

.main-image img{
height:280px;
}

.gallery-grid{
grid-template-columns:repeat(3,1fr);
}

}

@media(max-width:500px){

.gallery-grid{
grid-template-columns:repeat(2,1fr);
}

}