/* =========================================
   REPORT REVIEW PAGE
========================================= */

.report-page {
  max-width: 760px;
  margin: 32px auto 60px;
}


.report-card {
  background: #ffffff;

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

  padding: 30px;

  box-shadow: var(--shadow-medium);
}


.report-header {
  margin-bottom: 24px;
}


.report-eyebrow {
  color: var(--orange-dark);

  font-size: 0.82rem;
  font-weight: 800;

  text-transform: uppercase;
  letter-spacing: 0.04em;

  margin-bottom: 6px;
}


.report-subtitle {
  color: var(--muted);

  margin-top: -8px;
}


.report-summary-card {
  margin-bottom: 24px;
  padding: 20px;

  background: #fffaf3;

  border: 1px solid #f3d4a6;
  border-radius: var(--radius);
}


.report-summary-label {
  color: var(--muted);

  font-size: 0.8rem;
  font-weight: 700;

  margin-bottom: 4px;
}


.report-user-link {
  color: var(--blue);

  font-weight: 800;

  text-decoration: none;
}


.report-user-link:hover {
  text-decoration: underline;
}


.report-review-rating {
  margin-top: 12px;

  color: var(--orange-dark);

  font-size: 1rem;
  font-weight: 800;
}


.report-review-comment {
  margin-top: 10px;

  color: var(--text);

  line-height: 1.6;
}


.report-card .field {
  margin-bottom: 20px;
}


.report-card .select,
.report-card .select select {
  width: 100%;
}


.report-card textarea {
  resize: vertical;
}


.report-card .buttons {
  margin-top: 24px;
}


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

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

  .report-page {
    margin-top: 16px;
  }


  .report-card {
    padding: 20px;
  }


  .report-card .buttons {
    flex-direction: column;
  }


  .report-card .buttons .button {
    width: 100%;
  }

}