/* Form Block - Structural CSS */

.plp-form {
  position: relative;
}

/* Conditional visibility — a field hidden by its visible_when rule. */
.plp-form-hidden {
  display: none !important;
}

/* Inner wrapper */
.plp-form-inner {
  width: 100%;
}

/* Full-width form — breaks out of parent container */
.plp-form.plp-form-full {
  width: 100vw;
  max-width: none;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}


.plp-form-field {
  margin-bottom: 1rem;
}

.plp-form-field label {
  display: block;
  margin-bottom: 4px;
  color: var(--plp-form-label-color, var(--plp-color-text, inherit));
  font-weight: var(--plp-form-label-weight, 500);
}

.plp-form-field input,
.plp-form-field textarea,
.plp-form-field select {
  width: 100%;
  box-sizing: border-box;
  padding: var(--plp-form-input-padding, 0.5rem 0.75rem);
  background-color: var(--plp-form-input-bg, #ffffff);
  color: var(--plp-form-input-text, var(--plp-color-text, inherit));
  border: 1px solid var(--plp-form-input-border, var(--plp-color-border, #e5e7eb));
  border-radius: var(--plp-form-input-radius, var(--plp-border-radius, 4px));
  font-family: inherit;
  font-size: 1rem;
}

.plp-form-field input:focus,
.plp-form-field textarea:focus,
.plp-form-field select:focus {
  outline: none;
  border-color: var(--plp-form-focus-color, var(--plp-color-primary, #2563eb));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--plp-form-focus-color, var(--plp-color-primary, #2563eb)) 15%, transparent);
}

.plp-form-field input::placeholder,
.plp-form-field textarea::placeholder {
  color: var(--plp-form-placeholder-color, var(--plp-color-muted, #9ca3af));
  opacity: 0.7;
}

.plp-form-field textarea {
  resize: vertical;
}

/* Label layout: stacked (default) */
.plp-form-labels-stacked .plp-form-field label {
  display: block;
  margin-bottom: 4px;
  text-align: var(--plp-form-label-align, left);
}

/* Label layout: inline */
.plp-form-labels-inline .plp-form-field {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.plp-form-labels-inline .plp-form-field label {
  /* Narrow fixed column, right-aligned: the label text hugs the right edge next
     to its input (killing the dead gap) while inputs still line up in a column.
     padding-top mirrors the input's top padding (0.5rem) + border (1px) so the
     label text sits on the input's text line — i.e. vertically centred with a
     single-line input, and still top-aligned for textareas / help text. */
  flex: 0 0 var(--plp-form-label-width, 22%);
  padding-top: calc(0.5rem + 1px);
  margin-bottom: 0;
  text-align: var(--plp-form-label-align, right);
}
.plp-form-labels-inline .plp-form-field .plp-form-input-wrap {
  flex: 1;
}

/* Label layout: hidden */
.plp-form-labels-hidden .plp-form-field label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Width variants */
.plp-form-field-half { width: 50%; display: inline-block; vertical-align: top; padding-right: 0.5rem; box-sizing: border-box; }
.plp-form-field-third { width: 33.333%; display: inline-block; vertical-align: top; padding-right: 0.5rem; box-sizing: border-box; }
@media (max-width: 767px) {
  .plp-form-field-half,
  .plp-form-field-third { width: 100%; padding-right: 0; }
}

/* Help text */
.plp-form-help {
  display: block;
  margin-top: 4px;
  font-size: 0.85em;
  color: var(--plp-form-help-color, var(--plp-color-muted, #6b7280));
}

/* Required mark */
.plp-form-required {
  color: var(--plp-form-required-color, var(--plp-color-danger, #dc2626));
}

/* Validation errors */
.plp-form-field-error {
  color: var(--plp-form-error-color, var(--plp-color-danger, #dc3545));
  font-size: 0.85em;
  margin-top: 4px;
  display: none;
}
.plp-form-field.plp-form-field-invalid .plp-form-field-error {
  display: block;
}
.plp-form-field.plp-form-field-invalid input,
.plp-form-field.plp-form-field-invalid textarea,
.plp-form-field.plp-form-field-invalid select {
  border-color: var(--plp-form-error-color, var(--plp-color-danger, #dc3545));
}

/* Submit area */
.plp-form-actions {
  margin-top: 1.5rem;
}

/* Success / error messages */
.plp-form-success {
  padding: 1rem;
  border-radius: var(--plp-form-input-radius, var(--plp-border-radius, 4px));
  background: var(--plp-color-success-bg, #d1e7dd);
  color: var(--plp-color-success, #0f5132);
  margin-bottom: 1rem;
}

.plp-form-error-message {
  padding: 1rem;
  border-radius: var(--plp-form-input-radius, var(--plp-border-radius, 4px));
  background: var(--plp-color-danger-bg, #f8d7da);
  color: var(--plp-form-error-color, var(--plp-color-danger, #842029));
  margin-bottom: 1rem;
}

/* Loading state */
.plp-form-submitting .plp-form-submit {
  opacity: 0.6;
  pointer-events: none;
}

/* Field icon */
.plp-form-field-icon {
  display: inline-flex;
  align-items: center;
  margin-right: 0.5rem;
}
.plp-form-field-icon svg {
  width: 16px;
  height: 16px;
}

/* Checkbox / radio groups */
.plp-form-option-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.plp-form-option-group label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.plp-form-option-group input[type="checkbox"],
.plp-form-option-group input[type="radio"] {
  width: auto;
}