.cover{
    padding-top:120px;
}

.listing-gallery{
    width:100%;
    max-width:1100px;
    margin:auto;
}

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

.thumbnail-container{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
    margin-top:12px;
}

.thumbnail{
    width:23.6%;
    height:150px;
    object-fit:cover;
    border-radius:10px;
    cursor:pointer;
}

.thumbnail:hover{
    transform:scale(1.05);
    transition:0.2s;
    cursor:pointer;
}

.owner-card{
    margin-top:25px;
    padding:20px;
    width:350px;
    background:#fff;
    border-radius:12px;
    box-shadow:0 4px 14px rgba(0,0,0,0.1);
}

.hotel-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:20px;
}
    
.hotel-title{
    font-size:28px;
    font-weight:600;
}
    
.hotel-price{
    font-size:22px;
    font-weight:600;
    color:#ff385c;
}
    
.hotel-location{
    color:#6c757d;
    margin-bottom:10px;
}
    
.hotel-description1{
    line-height:1.6;
    display: flex;
    justify-content: center;
}

.reserve-btn{
    text-decoration:none;
}

.owner-card{
    display:flex;
    align-items:center;
    gap:15px;
    margin-top:25px;
    padding:18px;
    width:220px;
    background:white;
    border-radius:14px;
    box-shadow:0 6px 16px rgba(0,0,0,0.12);
}
    
.owner-avatar{
    width:45px;
    height:45px;
    background:#ff385c;
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    font-size:18px;
}
    
.hosted-by{
    font-size:13px;
    color:#6c757d;
    margin:0;
}

.owner-actions{
    display:flex;
    gap:10px;
    margin-top:20px;
}
        
.action-btn{
    border-radius:10px;
    padding:8px 16px;
}

.listing-right{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.amenities-section{
    margin-top:35px;
}
    
.amenities-title{
    font-weight:600;
    margin-bottom:15px;
}
    
.amenities-container{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px !important;
    max-width:500px;
    margin:0 auto;
}
    
.amenity-item{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:16px;
}
    
.amenity-item i{
    color:#ff385c;
    font-size:18px;
}

.amenities-section{
    margin-top:35px;
    padding-top:20px;
    border-top:1px solid #e5e5e5;
}

.review-card{
    max-width:600px;
    margin:40px auto;
    padding:25px;
    background:white;
    border-radius:14px;
    box-shadow:0 8px 25px rgba(0,0,0,0.12);
}
    
.review-title{
    font-weight:600;
    margin-bottom:15px;
}

.btn-review-submit{
    background:#ff385c;
    color:white;
    border:none;
    padding:10px 18px;
    border-radius:8px;
}
    
.btn-review-submit:hover{
    background:#e03150;
}

.reviews{
    margin-top:40px;
    padding-top:30px;
}

.review-heading{
    padding-left:280px;
    margin-bottom:20px;
}

.review-user{
    display:flex;
    align-items:center;
    gap:10px;
    padding-top:10px;
    margin-bottom:8px;
}
    
.review-avatar{
    width:35px;
    height:35px;
    background:#ff385c;
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    font-size:14px;
}

.card{
    transition:0.2s;
}
        
.card:hover{
    transform:translateY(-4px);
    box-shadow:0 8px 20px rgba(0,0,0,0.12);
}

#map{
    height:420px;
    width:100%;
    max-width:900px;
    margin:30px auto;
    border-radius:14px;
    box-shadow:0 8px 20px rgba(0,0,0,0.15);
}

.booking{
    display:flex;
    justify-content:center;
    margin-top:30px;
}
.booking-card{
    background:white;
    padding:22px;
    border-radius:14px;
    box-shadow:0 8px 24px rgba(0,0,0,0.12);
    width:350px;
    }
    
    .booking-price{
    font-size:22px;
    font-weight:600;
    margin-bottom:15px;
    }
    
    .booking-price span{
    font-size:14px;
    color:#6c757d;
    }
    
    .booking-inputs{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-bottom:15px;
    }
    
    .booking-btn{
    width:100%;
    background:#ff385c;
    text-decoration: none;
    color:white;
    border:none;
    padding:10px;
    border-radius:10px;
    }
    
    .booking-btn:hover{
    background:#e03150;
    }

/* ========================= */
/* DARK MODE - SHOW PAGE */
/* ========================= */

/* Background */

.theme-dark body{
    background-color: #121212;
    color: #e0e0e0;
}

/* Images (slight blend) */

.theme-dark .main-image img,
.theme-dark .thumbnail{
    filter: brightness(0.9);
}

/* Owner Card */

.theme-dark .owner-card{
    background: #1c1c1c;
    box-shadow: 0 6px 20px rgba(0,0,0,0.6);
}

/* Owner text */

.theme-dark .hosted-by{
    color: #b0b0b0;
}

/* Hotel Info */

.theme-dark .hotel-title{
    color: #ffffff;
}

.theme-dark .hotel-location{
    color: #b0b0b0;
}

.theme-dark .hotel-description1{
    color: #d0d0d0;
}

/* Amenities section */

.theme-dark .amenities-section{
    border-top: 1px solid #2a2a2a;
}

.theme-dark .amenities-title{
    color: #ffffff;
}

.theme-dark .amenity-item{
    color: #e0e0e0;
}

/* Icons stay brand-colored */

.theme-dark .amenity-item i{
    color: #ff385c;
}

/* Cards (reviews) */

.theme-dark .review-card,
.theme-dark .card{
    background: #1c1c1c;
    box-shadow: 0 8px 25px rgba(0,0,0,0.6);
}

/* Review text */

.theme-dark .review-heading{
    color: #ffffff;
}

.theme-dark .card-text{
    color: #d0d0d0;
}

/* Avatar */

.theme-dark .review-avatar{
    background: #ff385c;
    color: #ffffff;
}

/* Buttons */

.theme-dark .btn-outline-dark{
    color: #ffffff;
    border-color: #ffffff;
}

.theme-dark .btn-outline-dark:hover{
    background-color: #ffffff;
    color: #121212;
}

/* Booking Card */

.theme-dark .booking-card{
    background: #1c1c1c;
    box-shadow: 0 8px 25px rgba(0,0,0,0.6);
}

.theme-dark .booking-price{
    color: #ffffff;
}

.theme-dark .booking-price span{
    color: #b0b0b0;
}

/* Inputs inside booking */

.theme-dark .booking-card .form-control{
    background-color: #242424;
    border: 1px solid #3a3a3a;
    color: #ffffff;
}

/* Buttons */

.theme-dark .booking-btn{
    background: #ff385c;
    color: #ffffff;
}

.theme-dark .booking-btn:hover{
    background: #e03150;
}

/* Review form textarea */

.theme-dark textarea.form-control{
    background-color: #242424;
    border: 1px solid #3a3a3a;
    color: #ffffff;
}

/* Map */

.theme-dark #map{
    box-shadow: 0 8px 20px rgba(0,0,0,0.6);
}

.theme-dark #map{
    color:#121212 !important;
}

.theme-dark .cover{
    background-color:#121212;
}

.theme-dark .owner-info h6,
.theme-dark .booking-field label,
.theme-dark .review-card h4,
.theme-dark .mute{
    color:white;  
}

@media (max-width: 576px) {

    .main-image img {
      height: 230px;
      padding-left:10px;
      padding-right:10px;
    }
  
    .thumbnail-container {
      grid-template-columns: repeat(2, 1fr); 
    }
  
    .thumbnail {
      height: 100px;
    }
  
    .hotel-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
    }
  
    .hotel-title {
      font-size: 20px;
    }
  
    .hotel-price {
      font-size: 18px;
    }
  
    .hotel-description1 {
      margin-left: 0;
      padding: 0 15px;
    }
  
    .hotel-location {
      padding: 0 15px;
    }
  
    .amenities-container {
      grid-template-columns: repeat(2, 1fr);
      gap: 10px !important;
    }
  
    .owner-card {
      width: 45%;
      justify-content: center;
    }
  
    .booking-card {
      width: 90%;
      justify-content: center;
    }
    
    .review-card{
      width:90%;
      justify-content: center;
    }
    .review-heading {
      padding-left: 0;
      text-align: center;
    }
  
    .col-8.offset-3,
    .col-6.offset-3 {
      width: 100%;
      margin: 0;
    }
  
    #map {
      height: 300px;
    }
  
  }