/* Form fields (contact and account pages): a white box with the placeholder inside, as on faberpet.ro.
   The label is there for screen readers only, since the live forms show the placeholder alone. */
.pbly .form {
  display: grid;
  gap: var(--pbly-space-3-5);
}

.pbly .form-field {
  position: relative;
  display: grid;
}

.pbly .form-field__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pbly .form-field__input {
  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 .form-field__input::placeholder {
  color: var(--pbly-color-palette-grey-dark);
  opacity: 1;
}

/* Focus: the border turns green, drawn 2px wide so it is easy to see. */
.pbly .form-field__input:focus {
  border-color: var(--pbly-color-action-primary);
  outline: 1px solid var(--pbly-color-action-primary);
  outline-offset: -2px;
}

.pbly textarea.form-field__input {
  resize: vertical;
}

/* Password fields: the eye button inside the field shows or hides the password. */
.pbly .form-field__input--password { padding-right: var(--pbly-space-12); }

.pbly .form-field__toggle {
  position: absolute;
  top: 50%;
  right: var(--pbly-space-1-5);
  display: flex;
  transform: translateY(-50%);
}

.pbly .form-field__toggle[aria-pressed="false"] .form-field__eye--closed,
.pbly .form-field__toggle[aria-pressed="true"] .form-field__eye--open { display: none; }

/* A checkbox with its question above and a note below (company accounts). */
.pbly .form-check {
  display: grid;
  color: var(--pbly-color-text-muted);
}

.pbly .form-check__option {
  display: flex;
  align-items: center;
  gap: var(--pbly-space-2);
  line-height: var(--pbly-font-line-height-body);
  cursor: pointer;
}

.pbly .form-check__option input {
  width: var(--pbly-space-4-5);
  height: var(--pbly-space-4-5);
  margin: 0;
}

.pbly .form-check__note {
  margin-top: var(--pbly-space-1);
  font-size: var(--pbly-font-size-xs);
  line-height: var(--pbly-font-line-height-body);
}

/* Form buttons: semibold, with a 12px radius, as on faberpet.ro. */
.pbly .form__submit {
  justify-self: start;
  min-height: 0;
  padding: var(--pbly-space-4) var(--pbly-space-8);
  border-radius: var(--pbly-radius-md-plus);
  font-weight: var(--pbly-font-weight-semibold);
  line-height: var(--pbly-font-line-height-body);
}

/* The note shown after sending: the forms aren't connected to anything yet. */
.pbly .form__status:empty { display: none; }

.pbly .form__status {
  color: var(--pbly-color-text-muted);
  font-weight: var(--pbly-font-weight-medium);
}

/* Fields with a visible label above them (checkout), as on faberpet.ro. */
.pbly .form-field--labelled .form-field__label {
  position: static;
  width: auto;
  height: auto;
  margin-bottom: var(--pbly-space-0-5);
  overflow: visible;
  clip-path: none;
  color: var(--pbly-color-text-soft);
  font-size: var(--pbly-font-size-sm);
  font-weight: var(--pbly-font-weight-semibold);
  line-height: 2; /* exception: the live checkout labels sit in 28.8px rows */
  white-space: normal;
}

.pbly .form-field--labelled .form-field__input { line-height: var(--pbly-font-line-height-tight); }

.pbly .form-field__required {
  color: var(--pbly-color-palette-red);
  font-weight: var(--pbly-font-weight-bold);
  text-decoration: none;
}

/* Drop-down lists look like the fields, with a chevron on the right. */
.pbly .form-field__input--select {
  padding-right: var(--pbly-space-10);
  background: var(--pbly-color-surface-raised) url("../../icons/chevron-down-dark.svg") right var(--pbly-space-4) center / var(--pbly-space-3) no-repeat;
  appearance: none;
  cursor: pointer;
}

/* A field the form couldn't accept: red border and the reason under it. */
.pbly .form-field__input[aria-invalid="true"] { border-color: var(--pbly-color-palette-red); }

.pbly .form-field__error {
  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);
}