/* =====================================================
   FORMS.CSS (INPUT SYSTEM)
   -----------------------------------------------------
   PURPOSE:
   - All form inputs and structure
   - Form layout and controls
   - Submission UI

   RULES:
   - No UI components (cards, tabs, accordions)
   - No layout system (containers/sections handled elsewhere)
===================================================== */

/* =========================
   FORM WRAPPER
========================= */

.form-wrapper {
  max-width: 1000px;
  margin: 20px auto;
  padding: 20px;
}

/* =========================
   INPUTS
========================= */

input,
select,
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 10px;
}

/* =========================
   FORM GRID
========================= */

.form-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

/* =========================
   FORM TABS (RENAMED SYSTEM)
========================= */

.form-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

/* =========================
   SUBMIT BUTTON
========================= */

.submit-btn {
  background: #bfa46f;
  color: #fff;
  padding: 14px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
}

.progress-container {
  width: 100%;
  height: 8px;
  background: #eee;
  border-radius: 999px;
  overflow: hidden;
  margin: 20px 0;
}

.progress-bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(135deg, #b8860b, #d4af37);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.progress-container {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;
}
.form-half {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.form-group-grid {
  align-items: start;
}
.form-half {
  display: flex;
  flex-direction: column;
  gap: 14px; /* vertical spacing between label, pills, etc. */
}
.form-half label {
  display: block;
  margin-top: 30px;
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.2px;
  color: #222;
}
.form-card h1 {
  margin-bottom: 10px;
}

.progress-container {
  margin-top: 10px;
  margin-bottom: 25px;
}
.form-card {
  background: transparent;
  border: none;
  padding: 0;
}
.form-group {
  margin-bottom: 22px;
}

.form-group label {
  display: block;
  margin-top: 12px;
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.2px;
  color: #222;
}