/* ==========================================================================
   Public job card request form (/send_message/send_job_card_request)

   Loaded only by application/views/ui/message/job_card_form_new.php — the
   redesigned copy picked by ui_jobcard() (config/ui.php: ui_modern_jobcard).
   It sits on top of pages/pcform.css, which gives it the same header, card,
   type, inputs, buttons and errors as the public application form; this file
   only lays out the job card's own rows. The original view keeps
   assets/css/rim-forms.css and never loads either file.
   ========================================================================== */

.jc-page { max-width: 960px; }

/* One row per field: what it is on the left, the input on the right; stacked
   on phones, the input then the full width of the card. */
.jc-fields { border-top: 1px solid var(--hairline); margin-top: 8px; }
.jc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 20px 0;
  border-bottom: 1px solid var(--hairline);
}
@media (min-width: 761px) {
  .jc-row { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 28px; align-items: start; }
}
.jc-row__label { display: flex; gap: 14px; align-items: flex-start; }
.jc-row__label .label { margin-bottom: 2px; }
.jc-row__label .label::after { content: " *"; color: var(--accent-700); }
.jc-row__label .hint { margin-bottom: 0; font-size: 14px; line-height: 1.45; }
.jc-row__input { min-width: 0; }
.jc-row__input .textarea { min-height: 128px; }
@media (min-width: 761px) {
  /* inputs line up with the field name, not with the icon's top edge */
  .jc-row__input { padding-top: 2px; }
}

.jc-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: var(--accent-50);
  color: var(--accent-700);
  display: grid;
  place-items: center;
}
.jc-icon svg { width: 20px; height: 20px; }

/* A field the server sent back: the shared error style marks the row with a
   bar; here the row keeps its own spacing and the bar sits outside it. */
.jc-row.form-group--error { border-left: 0; padding-left: 0; position: relative; }
.jc-row.form-group--error::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 20px;
  bottom: 20px;
  width: 3px;
  border-radius: 2px;
  background: var(--error);
}
@media (min-width: 641px) { .jc-row.form-group--error::before { left: -24px; } }
.jc-row.form-group--error .jc-icon { background: var(--error-50); color: var(--error); }

.jc-captcha { padding: 22px 0 0; }
.jc-captcha.form-group--error { border-left: 0; padding-left: 0; }
.jc-captcha.form-group--error .g-recaptcha { outline: 2px solid var(--error); outline-offset: 4px; border-radius: 4px; display: inline-block; }
/* the widget is a fixed 304px; on the narrowest phones scale it to fit */
@media (max-width: 360px) {
  .jc-captcha .g-recaptcha { transform: scale(.9); transform-origin: 0 0; }
}

/* The original's "Fields marked with * are required." */
.lead .req { color: var(--accent-700); font-weight: 700; }

/* After a submit: the server's own message, above the form as in the original. */
.jc-success {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 42em;
  margin: 0 0 24px;
  padding: 14px 18px;
  border-radius: var(--radius);
  background: var(--ok-50);
  color: var(--ok);
  font-weight: 650;
}
.jc-success__icon { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; }
.jc-success__icon svg { width: 16px; height: 16px; }

.jc-actions .btn--primary { min-width: 180px; }
.jc-actions .btn[disabled] { opacity: .7; cursor: progress; }