/* =========================================
   FORM SYSTEM
========================================= */


/* =========================================
   FORM CONTAINER
========================================= */

.form-container {

  width: 100%;

  max-width: 700px;

  margin: 0 auto;
}


/* =========================================
   FORM GROUP
========================================= */

.form-group {

  margin-bottom:
    var(--space-6);
}


/* =========================================
   LABELS
========================================= */

.form-label {

  display: block;

  margin-bottom:
    var(--space-2);

  font-weight:
    var(--font-medium);

  color:
    var(--color-text);
}


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

.form-input,
.form-select,
.form-textarea {

  width: 100%;

  padding:
    14px 16px;

  border:
    1px solid var(--color-border);

  border-radius:
    var(--radius-md);

  background:
    var(--color-white);

  color:
    var(--color-text);

  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background var(--transition-fast);
}


.form-input:focus,
.form-select:focus,
.form-textarea:focus {

  border-color:
    var(--color-primary);

  box-shadow:
    0 0 0 4px
    var(--color-focus-ring);

  outline: none;
}


/* =========================================
   TEXTAREA
========================================= */

.form-textarea {

  min-height: 140px;

  resize: vertical;
}


/* =========================================
   FILE INPUT
========================================= */

.form-file {

  width: 100%;

  padding:
    var(--space-5);

  border:
    1px dashed var(--color-border-strong);

  border-radius:
    var(--radius-xl);

  background:
    var(--color-primary-soft);

  text-align: center;

  cursor: pointer;

  transition:
    all var(--transition-fast);
}


.form-file:hover {

  border-color:
    var(--color-primary);

  background:
    var(--color-primary-soft);
}


/* =========================================
   INPUT HELP TEXT
========================================= */

.form-help {

  margin-top:
    var(--space-2);

  font-size:
    var(--text-sm);

  color:
    var(--color-text-muted);
}


/* =========================================
   ERROR STATES
========================================= */

.form-error {

  margin-top:
    var(--space-2);

  font-size:
    var(--text-sm);

  color:
    var(--color-danger);
}


.input-error {

  border-color:
    var(--color-danger);
}


/* =========================================
   SUCCESS STATES
========================================= */

.input-success {

  border-color:
    var(--color-success);
}


/* =========================================
   CHECKBOXES / RADIOS
========================================= */

.form-check {

  display: flex;

  align-items: center;

  gap:
    var(--space-3);

  margin-bottom:
    var(--space-4);
}


.form-check input {

  width: 18px;
  height: 18px;
}


/* =========================================
   FORM ACTIONS
========================================= */

.form-actions {

  display: flex;

  flex-wrap: wrap;

  gap:
    var(--space-4);

  margin-top:
    var(--space-8);
}


/* =========================================
   SEARCH INPUT
========================================= */

.search-input {

  position: relative;
}


.search-input input {

  padding-left:
    48px;
}


.search-input .search-icon {

  position: absolute;

  top: 50%;
  left: 16px;

  transform:
    translateY(-50%);

  color:
    var(--color-text-muted);
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 768px) {

  .form-actions {

    flex-direction:
      column;
  }

  .form-actions .btn {

    width: 100%;
  }
}