/* So that navbar doesnot overshadow body*/
body{
  padding-top: 80px;
}
/* ------------------------------For Nav ---------------------------------------*/
.navbar .nav-link, .navbar-brand, .navbar-toggler-icon, .dropdown-menu{
  color: azure;
}

/* ------------------------------For Button and border---------------------------------------*/
.text-gold{color: goldenrod}
.bg-gold { background-color:goldenrod; }
.border-gold{border-radius: 4px; border: 2px solid #e7c34a;}
.border-gold-header{border-top: 4px solid #d4af37}
.btn-gold { background-color: #d4af37; color: #fff; font-weight: bold;}
.btn-gold:hover{background-color: #e7c34a; color: rgb(250, 243, 243);}

/* ------------------------------For links ---------------------------------------*/
.link{
  color: rgb(187, 168, 63);
  text-decoration: none;
}
.link:hover {
  /* underline on hover */
    text-decoration: underline; 
    color: gold;
    text-decoration-color: goldenrod;
}

.no-link{
  color: inherit;
}
.no-link:hover {
  /* underline on hover */
    text-decoration: underline; 
    text-decoration-color: goldenrod;
}

.footer-link {
  /* to match the surrounding text color */
    color: inherit; 
    /* Removes underline */      
    text-decoration: none; 
}

.footer-link:hover {
  /* underline on hover */
    text-decoration: underline; 
    text-decoration-color: goldenrod;
}


/* ---------------------------Refined carousel styling ---------------------------*/
.carousel-wrapper{
  /*1 rem 16 px*/
  height: 600px;
}

#mainCarousel {
  height: 400px;
  overflow: hidden;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
  position: relative;
  
}

#mainCarousel .carousel-inner img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
}


/* ----------------------- Search bar overlap with carousel ------------------------*/
.booking-search-overlap {
  position: relative;
  /*1 rem 16px, 4 rem 64 px*/
  margin-top: -4rem; 
  z-index: 10;
}

/*   search for booking hotel rooms and destination   */
.booking-search-box {
  border-left: 7px solid #151513be;
  background-color: #fff;
  /*Search box appears infront of caraousel*/
  box-shadow: 0 4px 12px rgba(0,0,0,10%); 
}

.search-btn-round{
    border-radius: 40px;
    padding: 0.5rem 1rem;
}

.search-btn-round:hover{
    background-color: goldenrod;
    color: black;
}

/* ----------------------------For slider in top hotel and explore uk --------------------------*/
.scroll-container {
  display: flex;
  /* for horizontal scroll */
  overflow-x: auto;  
  /* spacing between cards */ 
  gap: 1rem;          
  padding-bottom: 2rem;
  scroll-behavior: smooth;
  
}
.scroll-container .card {
  /* it prevent the shrinking */
  flex: 0 0 auto;     
  /* making card width fixed  */
  width: 250px;       
}
.scroll-container .card img {
  border-radius: 5px;
  padding: 1rem;
  /* Stretch to card width */
  width: 100%;              
  /* Fixed height for all images */
  height: 300px;            
  /* to show the full image without cropping */
  object-fit: contain;    
  /* Optional: neutral background for empty space */  
  background-color: #f8f9fa; 

}

.scroll-container .card-link{
  text-decoration: none;
  color: inherit;
}
.card-link:hover{
  text-decoration: underline;
  background-color: #d4af37;
  color: goldenrod;
}

/*-------------------- Image Size adjustment -------------------------------------------------*/
/* Top Hotels card images */
#top-hotels .card {
  height: 100%;
}

#top-hotels .card-img-top {
  width: 100%;
  height: 200px;      
  object-fit: cover;   
}

/* Explore UK images */
#explore-uk .card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
}

/* Hotel list images */
.card-img-top {
  width: 100%;
  height: 220px;        
  object-fit: cover;
}

/* Hotel detail images */
.hotel-images img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* Room images */
.room-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* ----------------------------For admin edit hotels ---------------------------------------*/
.modal-body {
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}
.modal-footer {
  position: sticky;
  bottom: 0;
  background: white;
  z-index: 10;
}