/*
  Form controls.

  Loaded globally: forms appear on auth, profile, contact, checkout and the newsletter-free footer.
  Inputs are generously sized (3rem minimum) because a premium storefront that is fiddly to type into
  is not premium. Focus is the brand red ring — the same one used everywhere else.
*/

.field {
    display: grid;
    gap: var(--space-2xs);
}

.field > label,
.field__label {
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    font-weight: var(--weight-semibold);
    color: var(--color-ink-muted);
}

.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea,
.field__input {
    inline-size: 100%;
    min-block-size: 3rem;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-surface);
    color: var(--color-ink-strong);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.field textarea {
    min-block-size: 9rem;
    resize: vertical;
    line-height: var(--leading-normal);
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: var(--focus-ring);
}

/* The rejected control.
   The :not() chain is not decoration: the base rule above is `.field input:not([type=checkbox]):not([type=radio])`,
   which outranks a plain `.field input[aria-invalid]` and re-asserts the whole `border` shorthand — so
   the previous version of this rule matched and then silently lost, and no input ever turned red.
   The thicker edge is deliberate too. --color-danger and --color-accent are nearly the same red in
   this palette, so colour alone cannot tell "this field was rejected" apart from "this field has
   focus". Width carries the difference for anyone who cannot separate the two hues. */
.field input[aria-invalid="true"]:not([type="checkbox"]):not([type="radio"]),
.field textarea[aria-invalid="true"] {
    border-color: var(--color-danger);
    border-width: 2px;
}

.field__hint {
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
}

/* Checkbox rows: the whole label is the target, so the hit area is the full line. */
.field-check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    font-size: var(--text-sm);
    color: var(--color-ink);
    cursor: pointer;
    min-block-size: 2.75rem;
    align-content: center;
    flex-wrap: wrap;
}

.field-check input[type="checkbox"] {
    inline-size: 1.15rem;
    block-size: 1.15rem;
    margin-block-start: 0.15rem;
    accent-color: var(--cg-red);
    flex: none;
}

/* Password field with a reveal control. The button is `hidden` in markup and unhidden by
   password-toggle.js, so a no-JS visitor never sees a dead control. */
.field__password { position: relative; display: grid; }

.field__password input { padding-inline-end: 5.5rem; }

.password-toggle {
    position: absolute;
    inset-inline-end: var(--space-2xs);
    inset-block: var(--space-2xs);
    padding-inline: var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-ink-muted);
}

.password-toggle:hover { color: var(--color-accent); }

/* Currency selector (store + collection headers). */
.currency-selector {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.currency-selector__label {
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    font-weight: var(--weight-semibold);
    color: var(--color-ink-muted);
}

.currency-selector__select {
    min-block-size: 2.75rem;
    padding: var(--space-2xs) var(--space-md);
    background: var(--color-surface);
    color: var(--color-ink-strong);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
}

.currency-selector__select:focus-visible {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: var(--focus-ring);
}

/* On the ink ground (checkout/dark surfaces) the same controls invert. */
.on-ink .field > label,
.on-ink .field__label,
.on-ink .field__hint { color: var(--color-on-deep-muted); }

.on-ink .field input:not([type="checkbox"]),
.on-ink .field select,
.on-ink .field textarea {
    background: #1c1918;
    color: var(--color-on-deep-strong);
    border-color: var(--color-on-deep-border);
}