/*
 * Additions for the server-rendered request forms.
 * Everything else comes from the theme's site.css.
 */

.novel-form label.has-error > span,
.form-policy label.has-error > span {
  color: #bc3030;
}

.novel-form label.has-error input:not([type="checkbox"]),
.novel-form label.has-error select,
.novel-form label.has-error textarea {
  border-color: #cf3c3c;
}

.novel-form .file-drop.has-error {
  border-color: #cf3c3c;
  background: #fdf3f3;
}

.novel-field-error {
  display: block;
  margin-top: 6px;
  color: #bc3030;
  font-size: 9px;
  letter-spacing: 0.04em;
  line-height: 1.6;
}

.file-drop .novel-field-error {
  margin-top: 8px;
}

.form-error:empty {
  min-height: 0;
  margin: 0;
}

/* The confirmation panel is a real form, so it needs the section spacing the
   prototype gave to <section class="form-review">. */
form.form-review {
  display: none;
}

form.form-review.is-visible {
  display: block;
}

.novel-receipt-number {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 22px;
  padding: 16px 20px;
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.novel-receipt-number span {
  color: #9299a3;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.novel-receipt-number strong {
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: 0.06em;
}

@media (max-width: 720px) {
  .novel-receipt-number {
    flex-direction: column;
    gap: 6px;
  }
}