/* #region ===== Mail & Report ===== */

.mail-subtitle,
.report-subtitle {
  font-size: var(--modal-subtitle);
  color: var(--light-gray);
  margin-bottom: 10px;
  text-align: start;
  display: block;
}

.mail-input,
.report-input {
  box-sizing: border-box;
  color: var(--white);
  font-size: var(--modal-subtitle);
  background-color: var(--dark-blue);
  font-family: "Cal Sans";
  border: none;
  border-radius: 10px;
  padding: 10px;
  outline: none;
  transition: box-shadow 0.25s ease;
  resize: none;
  min-height: 200px;
  width: 100%;
}

.mail-input:focus-within,
.report-input:focus-within {
  box-shadow: 0 0 0 3px var(--orange);
}

.mail-form,
.report-form {
  display: flex;
  flex-direction: column;
  gap: clamp(5px, 3.57px + 0.446vw, 10px);
  align-items: flex-start;
}

.mail-form button,
.report-form button {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 88px;
  padding: 6px 20px;
  border-radius: 8px;
  background-color: var(--orange);
  color: white;
  font-size: var(--modal-subtitle);
  transition:
    background-color 0.25s ease,
    transform 0.25s ease;
}

.mail-form button:active,
.report-form button:active {
  transform: scale(0.95);
}

.mail-form button.success,
.report-form button.success {
  background-color: #28a745;
  pointer-events: none;
}

/* #endregion */