/* JetFormBuilder forms (login, registration, password reset): its output dressed as the prototype's form fields,
   password eye and button (form-field.css). JetFormBuilder's own markup and classes are kept; only this file styles them. */
.pbly .jet-form-builder {
  display: grid;
  gap: var(--pbly-space-3-5);
}

.pbly .jet-form-builder-row,
.pbly .jet-form-builder__field-wrap {
  position: relative;
  margin: 0;
  display: grid;
  min-width: 0;
}

.pbly .jet-form-builder__field-wrap .jet-form-builder__field,
.pbly .jet-form-builder__field-wrap input[type="text"],
.pbly .jet-form-builder__field-wrap input[type="email"],
.pbly .jet-form-builder__field-wrap input[type="password"] {
  width: 100%;
  padding: var(--pbly-space-4);
  border: 1px solid var(--pbly-color-palette-line-dark);
  border-radius: var(--pbly-radius-md);
  background: var(--pbly-color-surface-raised);
  color: var(--pbly-color-text-primary);
  font-weight: var(--pbly-font-weight-semibold);
  line-height: var(--pbly-font-line-height-body);
}

.pbly .jet-form-builder__field-wrap .jet-form-builder__field::placeholder { color: var(--pbly-color-palette-grey-dark); opacity: 1; }

.pbly .jet-form-builder__field-wrap .jet-form-builder__field:focus {
  border-color: var(--pbly-color-action-primary);
  outline: 1px solid var(--pbly-color-action-primary);
  outline-offset: -2px;
}

/* The password eye: JetFormBuilder's own button (a span with two icons) inside the field. */
.pbly .jet-form-builder__field-wrap.has-eye-icon .jet-form-builder__field { padding-right: var(--pbly-space-12); }

.pbly .jfb-eye-icon {
  position: absolute;
  top: 50%;
  right: var(--pbly-space-1-5);
  display: flex;
  transform: translateY(-50%);
  color: var(--pbly-color-text-muted);
  line-height: 0;
  cursor: pointer;
  user-select: none;
}

.pbly .jfb-eye-icon:focus-visible { outline: 2px solid var(--pbly-color-action-primary); outline-offset: 2px; }
.pbly .jfb-eye-icon .seen-icon,
.pbly .jfb-eye-icon .unseen-icon { display: none; }
.pbly .jfb-eye-icon.seen .seen-icon,
.pbly .jfb-eye-icon:not(.seen) .unseen-icon { display: block; }

/* The checkbox with its question and note (company accounts), as .form-check. */
.pbly .jet-form-builder__fields-group,
.pbly .jet-form-builder-row.field-type-checkbox-field { color: var(--pbly-color-text-muted); }

.pbly .jet-form-builder__field-label.for-checkbox,
.pbly .jet-form-builder__field-label { color: var(--pbly-color-text-muted); font-weight: var(--pbly-font-weight-medium); }

.pbly .jet-form-builder__field-template,
.pbly .jet-form-builder__checkbox-wrap,
.pbly .checkradio-wrap {
  display: flex;
  align-items: center;
  gap: var(--pbly-space-2);
  line-height: var(--pbly-font-line-height-body);
}

.pbly .jet-form-builder__field-wrap input[type="checkbox"] {
  width: var(--pbly-space-4-5);
  height: var(--pbly-space-4-5);
  margin: 0;
}

.pbly .jet-form-builder__desc,
.pbly .jet-form-builder__desc small {
  margin-top: var(--pbly-space-1);
  color: var(--pbly-color-text-muted);
  font-size: var(--pbly-font-size-xs);
  line-height: var(--pbly-font-line-height-body);
}

.pbly .jet-form-builder__desc a { color: var(--pbly-color-palette-green-link); }

/* Buttons: the form button of the prototype (.pbly-btn--primary .form__submit). */
.pbly .jet-form-builder__action-button-wrapper { display: flex; }

.pbly .jet-form-builder__action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--pbly-space-4) var(--pbly-space-8);
  border: 1px solid transparent;
  border-radius: var(--pbly-radius-md-plus);
  background: var(--pbly-color-action-primary);
  color: var(--pbly-color-action-on-primary);
  font: inherit;
  font-weight: var(--pbly-font-weight-semibold);
  line-height: var(--pbly-font-line-height-body);
  cursor: pointer;
  transition: background-color 0.18s;
}

.pbly .jet-form-builder__action-button:hover:not(:disabled) { background: var(--pbly-color-action-hover); }
.pbly .jet-form-builder__action-button:disabled { opacity: 0.5; cursor: not-allowed; }

/* Messages: a wrong password or a field error, in the notice box's colours; empty until JetFormBuilder fills them. */
.pbly .jet-form-builder-messages-wrap:empty { display: none; }

.pbly .jet-form-builder-message {
  padding: var(--pbly-space-4);
  border-radius: var(--pbly-radius-lg);
  background: var(--pbly-color-palette-mint-light);
  color: var(--pbly-color-palette-green-deep);
  font-weight: var(--pbly-font-weight-medium);
  line-height: var(--pbly-font-line-height-body);
}

.pbly .jet-form-builder-message--error,
.pbly .jet-form-builder-message--validation-error,
.pbly .jet-form-builder-message--failed {
  background: var(--pbly-color-palette-red-light);
  color: var(--pbly-color-palette-red);
}

.pbly .jet-form-builder__field-wrap .jet-form-builder__field.is-invalid,
.pbly .jet-form-builder__field-wrap .jet-form-builder__field[aria-invalid="true"] { border-color: var(--pbly-color-palette-red); }

.pbly .jet-form-builder__field-error,
.pbly .jet-form-builder__field-wrap .error-message {
  margin-top: var(--pbly-space-1);
  color: var(--pbly-color-palette-red);
  font-size: var(--pbly-font-size-xs);
  line-height: var(--pbly-font-line-height-body);
}