/* EagleTagz demo: one field style on Price & Copyright, Load Media and Camera (change #5,
 * October 2026). fields.js marks the fields and adds labels where there were only placeholders.
 *
 * Fields came in five heights (34-50px), two corner styles and three text sizes. The
 * Price & Copyright fields used 12-14px text, so an iPhone zoomed the page in whenever one was
 * tapped (iOS does that below 16px). Now every field is at least 44px tall with 16px text,
 * 10px corners and a label above it (Apple HIG text fields), and the focus ring is the logo gold.
 * On a phone the Load Media address field and its button stack instead of being cut off. */

.etz-field {
  min-height: 44px;
  padding: 10px 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 10px !important;
  background-color: #1a2430 !important;
  color: #f9fafb !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
  box-shadow: none !important;
}
.etz-field::placeholder { color: #8b95a3; opacity: 1; }
.etz-field:focus {
  outline: none !important;
  border-color: #f1c50e !important;
  box-shadow: 0 0 0 3px rgba(241, 197, 14, 0.25) !important;
}
textarea.etz-field { min-height: 88px; resize: vertical; }
select.etz-field { cursor: pointer; }

/* The wallet address is 42 characters: on a computer a smaller monospace keeps it whole on the
   card; touch screens keep 16px so the iPhone doesn't zoom. */
.etz-field.etz-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; font-size: 12px !important; }
@media (pointer: coarse) { .etz-field.etz-mono { font-size: 16px !important; } }

.etz-label {
  display: block;
  margin-bottom: 6px;
  color: #d1d5db;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

/* a field with its button: one line on a computer, stacked on a phone */
.etz-field-row { display: flex; gap: 8px; }
.etz-field-row > .etz-field { flex: 1 1 auto; min-width: 0; }
@media (max-width: 640px) {
  .etz-field-row { flex-direction: column; }
  .etz-field-row > * { width: 100%; }
}