/* forms.css — only styles unique to forms; reuses site.css variables/classes */

.rbn-form .forms-card {
  max-width: 720px;
  margin: 2.5rem auto;
  padding: 1.25rem;
}

/* Headings & help text */
.rbn-form h1 {
  margin: 0 0 .5rem 0;
}
.rbn-form .help {
  color: var(--muted);
  margin-bottom: 1.25rem;
}

/* Labels */
.rbn-form .form-label {
  display: block;
  font-weight: 700;
  margin-bottom: .35rem;
  color: var(--fg);
}

/* Inputs / Textareas (match card outline color) */
.rbn-form .form-input,
.rbn-form .form-textarea {
  width: 100%;
  color: var(--fg);
  background: var(--card);
  border: 1px solid var(--accent);  /* same color as card outline */
  border-radius: 10px;
  padding: .6rem .75rem;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.rbn-form .form-textarea {
  min-height: 9rem;
  resize: vertical;
}

.rbn-form .form-input::placeholder,
.rbn-form .form-textarea::placeholder {
  color: var(--muted);
}

/* Focus state brightens the accent */
.rbn-form .form-input:focus,
.rbn-form .form-textarea:focus {
  border-color: #7aa7ff; /* lighter blue accent */
  box-shadow: 0 0 4px #7aa7ff;
}

/* Validation */
.rbn-form .validation-summary,
.rbn-form .field-validation {
  color: #f26b6b;
  font-size: .9rem;
  margin-top: .25rem;
}

/* Button — reuse site.css .btn */
.rbn-form .btn-primary {
  composes: btn;
}

/* Keep the forms card from translating on hover (site.css may do translateY) */
.rbn-form .card,
.rbn-form .card:hover {
  transform: none !important;     /* cancel any translate/scale */
  top: 0 !important;              /* cancel hover top offsets */
  transition: box-shadow .15s ease, border-color .15s ease; /* keep highlight */
}

.captcha-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
  margin-bottom: 1.25rem;
}

.captcha-wrap .h-captcha {
  transform: scale(0.88);       /* shrink slightly to fit the visual flow */
  transform-origin: right top;  /* anchor from top-right corner */
  border-radius: 10px;
  background: #1a1b21;
  padding: 0.4rem 0.5rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}