/*
 * forms.css — ANZ v3 Form Component
 *
 * Namespace: .anz-v3-input, .anz-v3-select, .anz-v3-textarea,
 *            .anz-v3-checkbox, .anz-v3-field
 * All selectors scoped: body.anz-v3 .anz-v3-*
 * No hex values — var(--...) only. No !important except legacy-scrub.
 *
 * Phase 4 pages: login, PDP (qty), checkout, brief-sheet
 * Provenance: IA spec §6.2, brand PDF page 4 approved pairs
 * Bootstrap shadow: .form-control overrides live in v3-shell.css.
 *   New markup uses .anz-v3-input etc. from this file.
 */


/* ===================================================================
 * FIELD WRAPPER — label + input + hint + error grouping
 * =================================================================== */

body.anz-v3 .anz-v3-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

body.anz-v3 .anz-v3-field-label {
  color: var(--text);
  font-size: var(--type-body-s-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--type-body-s-lh);
}

body.anz-v3 .anz-v3-field-hint {
  color: var(--text-muted);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-lh);
}

body.anz-v3 .anz-v3-field-error {
  color: var(--anz-coral-reef);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-lh);
}

body.anz-v3 .anz-v3-field-required::after {
  color: var(--anz-coral-reef);
  content: " *";
}


/* ===================================================================
 * TEXT INPUT
 * Background: Clear Skies Ultrasoft for form fields per IA spec §3.3
 * =================================================================== */

body.anz-v3 .anz-v3-input {
  background-color: var(--bg-wash);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text);
  display: block;
  font-family: var(--font-family);
  font-size: var(--type-body-m-size);
  line-height: var(--type-body-m-lh);
  padding: var(--space-3) var(--space-4);
  transition:
    border-color var(--motion-fast) var(--motion-exit),
    box-shadow var(--motion-fast) var(--motion-exit);
  width: 100%;
}

body.anz-v3 .anz-v3-input::placeholder {
  color: var(--text-muted);
}

body.anz-v3 .anz-v3-input:focus {
  background-color: var(--surface);
  border-color: var(--anz-pacific-blue);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
  color: var(--text);
  outline: none;
}

body.anz-v3 .anz-v3-input:hover:not(:focus):not(:disabled) {
  border-color: var(--anz-pacific-blue);
}

body.anz-v3 .anz-v3-input:disabled {
  background-color: var(--bg-soft);
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.6;
}

body.anz-v3 .anz-v3-input--error {
  border-color: var(--anz-coral-reef);
}

body.anz-v3 .anz-v3-input--error:focus {
  box-shadow: 0 0 0 var(--focus-ring-width) var(--anz-coral-reef);
}


/* ===================================================================
 * SELECT
 * =================================================================== */

body.anz-v3 .anz-v3-select {
  appearance: none;
  background-color: var(--bg-wash);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%236F6F6F' d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-position: right var(--space-4) center;
  background-repeat: no-repeat;
  background-size: 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text);
  cursor: pointer;
  display: block;
  font-family: var(--font-family);
  font-size: var(--type-body-m-size);
  line-height: 1.5;
  min-height: 44px;
  padding: var(--space-3) var(--space-12) var(--space-3) var(--space-4);
  text-overflow: ellipsis;
  transition:
    border-color var(--motion-fast) var(--motion-exit),
    box-shadow var(--motion-fast) var(--motion-exit);
  white-space: normal;
  width: 100%;
}
body.anz-v3 .anz-v3-select option {
  padding: var(--space-2) var(--space-4);
  white-space: normal;
}

body.anz-v3 .anz-v3-select:focus {
  border-color: var(--anz-pacific-blue);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
  outline: none;
}

body.anz-v3 .anz-v3-select:disabled {
  background-color: var(--bg-soft);
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.6;
}


/* ===================================================================
 * TEXTAREA
 * =================================================================== */

body.anz-v3 .anz-v3-textarea {
  background-color: var(--bg-wash);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text);
  display: block;
  font-family: var(--font-family);
  font-size: var(--type-body-m-size);
  line-height: var(--type-body-m-lh);
  min-height: 120px;
  padding: var(--space-3) var(--space-4);
  resize: vertical;
  transition:
    border-color var(--motion-fast) var(--motion-exit),
    box-shadow var(--motion-fast) var(--motion-exit);
  width: 100%;
}

body.anz-v3 .anz-v3-textarea:focus {
  background-color: var(--surface);
  border-color: var(--anz-pacific-blue);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
  outline: none;
}

body.anz-v3 .anz-v3-textarea:disabled {
  background-color: var(--bg-soft);
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.6;
}


/* ===================================================================
 * CHECKBOX + RADIO
 * =================================================================== */

body.anz-v3 .anz-v3-checkbox {
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  gap: var(--space-3);
  position: relative;
}

body.anz-v3 .anz-v3-checkbox input[type="checkbox"],
body.anz-v3 .anz-v3-checkbox input[type="radio"] {
  accent-color: var(--anz-pacific-blue);
  cursor: pointer;
  flex-shrink: 0;
  height: 18px;
  margin-top: 2px;
  width: 18px;
}

body.anz-v3 .anz-v3-checkbox__label {
  color: var(--text);
  font-size: var(--type-body-m-size);
  line-height: var(--type-body-m-lh);
}

body.anz-v3 .anz-v3-checkbox input:disabled ~ .anz-v3-checkbox__label {
  color: var(--text-muted);
  cursor: not-allowed;
}


/* ===================================================================
 * RESPONSIVE
 * =================================================================== */

@media (max-width: 768px) {
  body.anz-v3 .anz-v3-field {
    margin-bottom: var(--space-4);
  }
}


/* ===================================================================
 * REDUCED MOTION
 * =================================================================== */

@media (prefers-reduced-motion: reduce) {
  body.anz-v3 .anz-v3-input,
  body.anz-v3 .anz-v3-select,
  body.anz-v3 .anz-v3-textarea {
    transition: none;
  }
}