/* =========================================
   REVIEWS SECTION
========================================= */

.public-profile-reviews-section {
  margin-top: 30px;
}


/* =========================================
   REVIEW OVERVIEW
========================================= */

.public-profile-review-overview {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding: 20px 22px;

  margin-bottom: 24px;

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #fffaf3
    );

  border:
    1px solid
    #f3d4a6;

  border-radius: 14px;

  box-shadow:
    0 4px 14px
    rgba(
      15,
      23,
      42,
      0.04
    );
}


.public-profile-review-score {
  display: flex;

  align-items: center;

  gap: 8px;
}


.public-profile-review-big-star {
  color:
    var(--orange);

  font-size:
    1.7rem;
}


.public-profile-review-score
strong {
  color:
    var(--navy);

  font-size:
    1.6rem;

  font-weight: 850;
}


.public-profile-review-overview
p {
  color:
    var(--muted);

  font-size:
    0.88rem;
}


/* =========================================
   REVIEW FORM
========================================= */

.public-profile-review-form-card {
  margin-bottom: 28px;

  padding: 24px;

  background-color:
    #ffffff;

  border:
    1px solid
    var(--border);

  border-radius: 14px;

  box-shadow:
    0 5px 18px
    rgba(
      15,
      23,
      42,
      0.05
    );
}


.public-profile-review-form-card
.title {
  margin-bottom: 6px;

  color:
    var(--navy);

  font-size:
    1.2rem;
}


.public-profile-review-form-help {
  margin-bottom: 20px;

  color:
    var(--muted);

  font-size:
    0.88rem;
}


.public-profile-review-form-card
.field {
  margin-bottom: 18px;
}


.public-profile-review-form-card
.select,
.public-profile-review-form-card
.select
select {
  width: 100%;
}


.public-profile-review-form-card
textarea {
  min-height: 120px;

  resize: vertical;
}


.public-profile-review-form-buttons {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 10px;

  margin-top: 18px;
}


.public-profile-review-form-buttons
.button {
  min-height: 40px;

  padding-left: 18px;
  padding-right: 18px;

  font-size:
    0.84rem;

  font-weight: 750;
}


/* =========================================
   REVIEW LIST
========================================= */

.public-profile-review-list {
  display: flex;

  flex-direction: column;

  gap: 14px;
}


.public-profile-review-card {
  padding: 20px 22px;

  background-color:
    #ffffff;

  border:
    1px solid
    var(--border);

  border-radius: 14px;

  box-shadow:
    0 3px 12px
    rgba(
      15,
      23,
      42,
      0.04
    );

  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}


.public-profile-review-card:hover {
  transform:
    translateY(-1px);

  border-color:
    var(--border-dark);

  box-shadow:
    0 6px 18px
    rgba(
      15,
      23,
      42,
      0.07
    );
}


/* =========================================
   REVIEW HEADER
========================================= */

.public-profile-review-header {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 20px;
}


.public-profile-review-user {
  display: inline-block;

  color:
    var(--blue);

  font-size:
    0.92rem;

  font-weight: 800;

  text-decoration: none;
}


.public-profile-review-user:hover {
  color:
    var(--orange-dark);

  text-decoration:
    underline;

  text-underline-offset:
    3px;
}


.public-profile-review-name {
  margin-top: 3px;

  color:
    var(--muted);

  font-size:
    0.84rem;
}


/* =========================================
   REVIEW RATING
========================================= */

.public-profile-review-rating {
  display: flex;

  align-items: center;

  gap: 5px;

  padding:
    5px 9px;

  background-color:
    #fff7ed;

  border:
    1px solid
    #fed7aa;

  border-radius:
    999px;

  white-space:
    nowrap;
}


.public-profile-review-rating
span:first-child {
  color:
    var(--orange);

  font-size:
    1rem;
}


.public-profile-review-rating
strong {
  color:
    var(--orange-dark);

  font-size:
    0.82rem;

  font-weight: 850;
}


/* =========================================
   REVIEW COMMENT
========================================= */

.public-profile-review-comment {
  margin-top: 16px;

  color:
    var(--text);

  line-height: 1.65;

  white-space:
    pre-wrap;
}


/* =========================================
   REVIEW DATE
========================================= */

.public-profile-review-date {
  margin-top: 14px;

  color:
    var(--light-muted);

  font-size:
    0.78rem;
}


/* =========================================
   REPORT REVIEW LINK
========================================= */

.public-profile-review-card
a[href*="/report"] {
  display: inline-block;

  margin-top: 12px;

  color:
    var(--red-dark);

  font-size:
    0.78rem;

  font-weight: 700;

  text-decoration: none;
}


.public-profile-review-card
a[href*="/report"]:hover {
  text-decoration:
    underline;

  text-underline-offset:
    2px;
}


/* =========================================
   MOBILE
========================================= */

@media screen and (max-width: 768px) {

  .public-profile-review-overview {
    flex-direction:
      column;

    align-items:
      flex-start;
  }


  .public-profile-review-header {
    flex-direction:
      column;

    gap: 10px;
  }


  .public-profile-review-form-card {
    padding: 18px;
  }


  .public-profile-review-form-buttons {
    flex-direction:
      column;

    align-items:
      stretch;
  }


  .public-profile-review-form-buttons
  .button {
    width: 100%;
  }


  .public-profile-review-card {
    padding: 18px;
  }

}