/* NFT Zone UI Kit — Frost Input, based on Frost Pill Search 02B.
   Load after shared.css and before page CSS. Pages own geometry and typography.
   Opt in on native fields or an existing button[aria-haspopup="listbox"].
   Keep native date/time pickers, number steppers and select arrows intact. */
.ui-input:not(:where([type="checkbox"], [type="radio"], [type="hidden"])) {
  --input-glass: color-mix(in srgb, var(--bg-surface-1) 82%, transparent);
  --input-shadow: inset 0 1px rgba(255, 255, 255, .05), 0 4px 12px rgba(0, 0, 0, .06);
  --input-focus-shadow:
    inset 0 1px rgba(255, 255, 255, .06),
    0 0 0 3px color-mix(in srgb, var(--accent-violet) 10%, transparent),
    0 7px 16px rgba(0, 0, 0, .09);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--input-glass);
  color: var(--text-primary);
  color-scheme: dark;
  box-shadow: var(--input-shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: border-color .18s ease, box-shadow .18s ease;
}

[data-theme="light"] .ui-input:not(:where([type="checkbox"], [type="radio"], [type="hidden"])) {
  --input-shadow: inset 0 1px rgba(255, 255, 255, .5), 0 2px 6px rgba(15, 23, 42, .025);
  --input-focus-shadow:
    inset 0 1px rgba(255, 255, 255, .5),
    0 0 0 2px color-mix(in srgb, var(--accent-violet) 4%, transparent),
    0 3px 8px rgba(15, 23, 42, .035);
  color-scheme: light;
}

.ui-input:not(:where([type="checkbox"], [type="radio"], [type="hidden"]))::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

.ui-input:not(:where([type="checkbox"], [type="radio"], [type="hidden"])):hover:where(:not(:disabled)) {
  border-color: var(--border-subtle-hover);
}

.ui-input:not(:where([type="checkbox"], [type="radio"], [type="hidden"])):focus:where(:not(:disabled)) {
  border-color: transparent;
  background:
    linear-gradient(var(--input-glass), var(--input-glass)) padding-box,
    linear-gradient(110deg, #ab7bf5, #7dd2ed) border-box;
  box-shadow: var(--input-focus-shadow);
  outline: none;
}

/* Do not mark untouched required fields as errors when the form first opens.
   Explicit server/JS errors and native user validation share one appearance. */
.ui-input:not(:where([type="checkbox"], [type="radio"], [type="hidden"])):is([aria-invalid="true"], :user-invalid):where(:not(:disabled)) {
  border-color: var(--accent-rose);
  background: var(--input-glass);
}

.ui-input:not(:where([type="checkbox"], [type="radio"], [type="hidden"])):disabled {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
}

/* Native option popups need an opaque, readable surface in both themes. */
select.ui-input option,
select.ui-input optgroup {
  background: var(--bg-surface-1);
  color: var(--text-primary);
}

@media (prefers-reduced-motion: reduce) {
  .ui-input:not(:where([type="checkbox"], [type="radio"], [type="hidden"])) { transition: none; }
}

@media (forced-colors: active) {
  .ui-input:not(:where([type="checkbox"], [type="radio"], [type="hidden"])) {
    background: Canvas;
    color: CanvasText;
    border-color: ButtonText;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .ui-input:not(:where([type="checkbox"], [type="radio"], [type="hidden"])):focus {
    background: Canvas;
    border-color: transparent;
    box-shadow: none;
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
  .ui-input:not(:where([type="checkbox"], [type="radio"], [type="hidden"])):is([aria-invalid="true"], :user-invalid):where(:not(:disabled)) {
    background: Canvas;
    border-color: LinkText;
    border-style: dashed;
  }
  .ui-input:not(:where([type="checkbox"], [type="radio"], [type="hidden"])):disabled {
    color: GrayText;
    border-color: GrayText;
    opacity: 1;
  }
  select.ui-input option,
  select.ui-input optgroup { background: Canvas; color: CanvasText; }
}