/* ================================================================
   Forms — Grid layout, inputs, selects, textareas
   ================================================================ */

.fg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.f {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.f.w { grid-column: 1 / -1; }

.f label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.inp, .sel, .txa {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
  transition: all var(--ease);
  width: 100%;
}
.inp::placeholder,
.txa::placeholder { color: var(--text-4); }

.inp:focus, .sel:focus, .txa:focus {
  outline: none;
  background: var(--surface-3);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg), var(--glow);
}

.sel {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23e11d48' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 30px;
}

.txa {
  resize: vertical;
  min-height: 56px;
}