/* Contact page — extends client-auth layout (Login / Register) */

.client-auth-form .rjx-textarea {
  width: 100%;
  min-height: 8rem;
  padding: 0.65rem 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--rjx-text);
  border-radius: var(--rjx-radius);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.45);
  resize: vertical;
  transition:
    background var(--rjx-transition),
    border-color var(--rjx-transition),
    box-shadow var(--rjx-transition);
}

.client-auth-form .rjx-textarea:hover {
  border-color: rgba(255, 255, 255, 0.32);
}

.client-auth-form .rjx-textarea:focus {
  outline: none;
  border-color: rgba(var(--rjx-brand-rgb), 0.55);
  background: rgba(0, 0, 0, 0.55);
  box-shadow: 0 0 0 2px rgba(var(--rjx-brand-rgb), 0.28);
}

.client-auth-form .rjx-textarea::placeholder {
  color: var(--rjx-text-dim);
}

/* Mobile: give the form breathing room from the panel edges so labels and
   controls no longer sit flush against the container border. */
@media (max-width: 767px) {
  .client-auth-section .rjx-container {
    padding-left: var(--rjx-layout-gutter);
    padding-right: var(--rjx-layout-gutter);
  }
}

/* Keep the captcha image on the same row as its input on small phones.
   Overrides the client-auth.css rule that stacks .captcha-row below 480px. */
@media (max-width: 480px) {
  #contactForm .captcha-row {
    flex-direction: row;
    align-items: stretch;
  }

  #contactForm .captcha-img-wrap {
    width: 120px;
    max-width: 120px;
    align-self: auto;
  }
}