.elementor-9 .elementor-element.elementor-element-5f14ad6f{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:5%;--padding-bottom:10%;--padding-left:10%;--padding-right:10%;}.elementor-9 .elementor-element.elementor-element-4c2ed55b{width:var( --container-widget-width, 65% );max-width:65%;background-color:var( --e-global-color-33da7ad );padding:7% 6% 6% 6%;--container-widget-width:65%;--container-widget-flex-grow:0;}:root{--page-title-display:none;}/* Start custom CSS for shortcode, class: .elementor-element-4c2ed55b *//* Container for each accommodation listing */
.mphb-room-type {
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  padding-left: 30px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-top: 20px;
  margin-bottom: 30px;
  border-radius: 5px;
  background-color: #fff;

}

/* Featured image styling */
.mphb-room-type .post-thumbnail {
  flex: 0 0 200px;
  margin-right: 20px;

  
}

.mphb-room-type .post-thumbnail img {
  width: 100%;
  height: auto;
  border-radius: 5px;
}



/* Details section styling */
.mphb-room-type .entry-content {
  flex: 1;
}

/* Title styling */
.mphb-room-type .entry-title {
  font-size: 1.5em;
  margin-bottom: 10px;
  margin-left: 0px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .mphb-room-type {
    flex-direction: column;
   
  }

  .mphb-room-type .post-thumbnail {
    margin-right: 0;
    margin-bottom: 15px;
  }
}

/* Reduce font size of the "Details" heading */
.mphb-room-type-details-title {
  font-size: 1em; /* Adjust the value as needed */
}

/* Remove bullet point from the "Guests" list item */
.mphb-loop-room-type-attributes {
  list-style-type: none;
  padding-left: 0;
}

/* Make the "Guests" label bold */
.mphb-room-type-total-capacity .mphb-attribute-title {
  font-weight: 500;
}

/* Adjust the position of the reservation details */
.mphb-reservation-details {
  margin-top: 50px; 
  margin-bottom: -50px;/* Adjust the value as needed */
}

/* Make the recommendation item link text bold */
.mphb-recommendation-item-link {
  font-weight: 500;
}

/* Style the Reserve and Book buttons */
.mphb-recommendation-reserve-button,
.mphb-book-button,
.mphb-confirm-reservation{
  background-color: #2C5F54; /* Blue background */
  color: #ffffff; /* White text */
  border: 2px solid #ffffff; /* White border */
  padding: 10px 20px;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* Hover effect for the Reserve and Book buttons */
.mphb-recommendation-reserve-button:hover,
.mphb-book-button:hover,
.mphb-confirm-reservation:hover{
  background-color: #B45440; /* Dark blue background on hover */
}

/* Move Guest count to next line */
.mphb-recommendation-item-guests {
  display: block;
}

.mphb-recommendation-item-total-capacity {
  display: block;
  position: relative;
}

//.mphb-recommendation-item-total-capacity::after,
.mphb-attribute-value::after {
  content: " (inclusive of children)";
  font-style: italic;
  color: #555;
  font-size: 90%;
  display: inline;
}

.mphb-room-type-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px;         /* adjust this as needed */
  font-weight: 700;        /* h2s are usually bold */
  line-height: 1.3;
  margin: 0.5em 0;
  color: inherit;
  display: block;
  text-decoration: none;
}

/* Make Guest, View, Size, Bed type labels bold */
.mphb-loop-room-type-attributes .mphb-attribute-title {
  font-weight: 500;
}

/* Add spacing between attribute label and value */
.mphb-loop-room-type-attributes .mphb-attribute-title {
  margin-right: 8px; /* Adjust spacing as needed */
  display: inline-block;
  min-width: 10px; /* Optional: aligns all labels uniformly */
}/* End custom CSS */