/* ==========================================================================
   SHARED FORM STRUCTURAL SPACING & LABELS (Core)
   ========================================================================== */
.form-field-group {
  margin-bottom: 12px;
  width: 100%;
}

.form-field-group label {
  display: block;
  font-family: 'Urbanist', sans-serif !important;
  font-size: 0.85rem;
  font-weight: bold;
  margin-bottom: 4px;
  color: #111827;
}

.optional-label {
  font-weight: normal;
  font-style: italic;
  color: #6b7280;
}

.form-row-flex {
    display: flex;
    gap: 16px; /* Adds uniform spacing gap between the first and last name fields */
    width: 100%;
    margin-bottom: 12px;
}

/* Force child field elements inside the wrapper to share the row space equally */
.form-row-flex .form-field-group {
    flex: 1;
    margin-bottom: 0; /* Clears bottom margin inside the row wrapper */
}

/* Mobile responsive override for portrait smartphones */
@media (max-width: 576px) {
    .form-row-flex {
        flex-direction: column; /* Stacks inputs vertically on narrow screens */
        gap: 12px; /* Matches your form's standard field gap */
        margin-bottom: 0; /* Clears outer margin since the stacked fields now use internal gap spacing */
    }

    .form-row-flex .form-field-group {
        margin-bottom: 12px !important; /* Forces each stacked field to match the rest of the form rows */
    }
}

/* ==========================================================================
   UNIFIED TEXT AND TEXTAREA INPUT BOX FIELDS
   ========================================================================== */
.text-input-field,
.textarea-input-field {
  font-family: 'IBM Plex Mono', monospace !important;
  width: 100% !important;
  padding: 6px 8px;
  border: 1px solid #000000;
  border-radius: 0px; /* Kept sharp edges matching numeric boxes */
  font-size: 0.9rem;
  background-color: #ffffff;
  color: #111827;
  box-sizing: border-box;
}

.textarea-input-field {
  resize: vertical;
  min-height: 60px;
}

/* ==========================================================================
   UNIFIED SUBMIT ACTIONS COMMAND BUTTON
   ========================================================================== */
.submit-btn { 
  background: transparent; 
  color: #813F9B; 
  border: 2px solid #813F9B; 
  border-radius: 6px; 
  padding: 4px 14px; 
  font-size: 0.9rem; 
  cursor: pointer; 
  transition: all 0.15s ease;
  width: 40%; 
  margin-top: 10px; 
}

.submit-btn:hover { 
  background: #FDB620 !important; 
  color: #333333 !important; 
  border-color: #FDB620 !important; /* Turns orange on hover */
}