.form-group{
  display:flex;
  flex-direction:column;
  gap:4px;
}

/* .input-field{
  padding:10px;
  border:1px solid var(--border);
  border-radius:6px;
} */

.input-field{
  width:100%;
  padding:10px;
  border:1px solid var(--border-strong);
  border-radius:6px;
  background:var(--card);
  color:var(--text);
}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.form-group.full{
  grid-column:1/-1;
}

/* ===== ERROR INPUT ===== */

.input-error{
  border:1px solid var(--danger) !important;
  background:var(--danger-light);
}

/* ===== SELECT / DROPDOWN (portal-wide — replaces the generic native look) ===== */
.portal-main select,
.zt-select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding:9px 34px 9px 12px;
  border:1px solid var(--border-strong);
  border-radius:8px;
  background-color:var(--card);
  font-size:13px;
  color:var(--text);
  cursor:pointer;
  /* teal chevron so the control matches the brand rather than the OS default */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230f766e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.portal-main select:hover,
.zt-select:hover{ border-color:var(--text-subtle); }
.portal-main select:focus,
.zt-select:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(15,118,110,0.12);
}

.input-error:focus{
  outline:none;
  box-shadow:0 0 0 2px rgba(220,38,38,0.15);
}

/* ERROR MESSAGE */

.error-text{
  color:var(--danger);
  font-size:13px;
  margin-top:4px;
  display:block;
}