/*
 * Single doctor profile (single-doctors.php, template-parts/doctor-ratings.php).
 * Base styles stay in style.css (.single-doctor ...); these lay the page out with flexbox in
 * place of <br> spacers and floats, and style the "Load more" reviews button.
 */

/* Header stars, "x out of 5" and the review count on one line */
.single-doctor .mh-doctor-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
}
.single-doctor .mh-stars {
  display: inline-flex;
  align-items: center;
}

/* Status lines, services, experience and the call/schedule buttons stack in one column */
.single-doctor .mh-doctor-facts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.single-doctor .mh-doctor-facts .statuses {
  display: inline-flex;
  align-items: center;
}
.single-doctor .services-bubbles {
  display: flex;
  flex-wrap: wrap;
  gap: 0 .5rem;
}
.single-doctor .mh-doctor-facts .service-bubble-alt:last-of-type {
  margin-bottom: 10px;
}

/* Profile photo: square, right-aligned without a float; biography photos */
.single-doctor .outer-img-sec {
  float: none;
  max-width: 100%;
  margin-left: auto;
}
.single-doctor .biography .biography-image__img {
  width: 100%;
  height: 100%;
  padding: 10px;
  background: #f2f2f2;
  object-fit: cover;
  object-position: center;
}

/* Location tiles: two per row, equal height */
.single-doctor .locations > .col-lg-6 {
  display: flex;
  margin-bottom: 25px;
}
.single-doctor .locations .mh-location-tile {
  flex: 1 1 auto;
  margin-bottom: 0;
}
.single-doctor .locations .mh-location-tile .location-image {
  width: 200px;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 599px) {
  .single-doctor .locations .mh-location-tile .img-square-wrapper {
    display: none;
  }
}

/* Reviews */
.single-doctor .comment-name-and-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.single-doctor #load-more-container .mh-reviews__more {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}
.single-doctor #load-more-container .mh-reviews__more:disabled {
  opacity: .5;
  cursor: progress;
}
.single-doctor #load-more-container[hidden] {
  display: none;
}