/* =============================================================================
   Storefront — forms
   Used by: index.html (login, signup, profile, address, checkout, contact)

   The two-column .form-grid is the default for desktop; .full-width spans both.
   On phones the grid collapses to one column (handled in page-level responsive
   blocks). Inputs get bumped to 16px under 1024px to prevent iOS auto-zoom.
   ============================================================================= */

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.form-grid .full-width { grid-column: 1 / -1; }
.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.form-label { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }

.form-control {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  width: 100%;
  transition: var(--transition);
}
.form-control:focus { outline: none; border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.15); }
.form-control::placeholder { color: var(--text-muted); }
.form-control option { background: var(--surface); }

@media (max-width: 1024px) {
  /* iOS Safari auto-zooms when a focused input has font-size < 16px. */
  input, select, textarea, .form-control { font-size: 16px; }
}

@media (max-width: 768px) {
  .form-grid { grid-template-columns: 1fr; }
}