/* ============================= */
/* BASE                          */
/* ============================= */

.form-container {
  max-width: 520px;
  margin: auto;
}

/* ============================= */
/* CARD                          */
/* ============================= */
.form-card {
  background: var(--contentB);
  border: 1px solid var(--contentL);
  border-radius: 5px;
  padding: 16px;
  margin: 20px 0;
  width: 100%;
  box-shadow: 0 2px 12px 0 rgba(30, 30, 30, .07);
  position: relative;
}

/* ============================= */
/* TYPOGRAPHY                    */
/* ============================= */
h2, h5 {
  margin: 0;
  font-weight: 600;
}

.form-label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
}

.form-text {
  margin-top: 6px;
  font-size: 13px;
  min-height: 16px;
}

/* ============================= */
/* FORM                          */
/* ============================= */
.form-control,
.form-select {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border-radius: 12px;
  background: var(--contentB);
  border: 1px solid var(--contentL);
}

.form-control::placeholder {
  color: #adb5bd;
}

.form-control:focus,
.form-select:focus {
  outline: none;
  border-color: #86b7fe;
  box-shadow: 0 0 0 3px rgba(13,110,253,.15);
}

/* ============================= */
/* BUTTON                        */
/* ============================= */
.btn {
  display: inline-block;
  padding: 10px 16px;
  font-size: 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  background: transparent;
}

.btn-sm {
  padding: 6px 12px;
  font-size: 13px;
}

.btn-lg {
  padding: 12px 20px;
  font-size: 16px;
}

.btn-primary { background:#0d6efd; border-color:#0d6efd; color:#fff; }
.btn-success { background:#198754; border-color:#198754; color:#fff; }
.btn-danger  { background:#dc3545; border-color:#dc3545; color:#fff; }

.btn-outline-success {
  border:1px solid #198754;
  color:#198754;
}

.btn-outline-success:hover {
  background:#198754;
  color:#fff;
}

/* ============================= */
/* BUTTON CARD                   */
/* ============================= */
.fb-button-item {
  position: relative;
  border: 1px solid #dee2e6;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 16px;
  background: #fff;
}

.fb-remove {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 18px;
  color: #dc3545;
  cursor: pointer;
}

/* ============================= */
/* SPACING                       */
/* ============================= */
.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:1rem}.mt-4{margin-top:1.5rem}
.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:1rem}.mb-4{margin-bottom:1.5rem}
.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:1rem}.p-4{padding:1.5rem}

/* ============================= */
/* BACKGROUND                    */
/* ============================= */
.bg-white { background:#fff !important; }
.bg-light { background:#f8f9fa !important; }
.bg-primary { background:#0d6efd !important; color:#fff; }
.bg-success { background:#198754 !important; color:#fff; }
.bg-danger { background:#dc3545 !important; color:#fff; }

/* ============================= */
/* TEXT                          */
/* ============================= */
.text-primary{color:#0d6efd}
.text-success{color:#198754}
.text-danger{color:#dc3545}
.text-muted{color:#6c757d}

/* ============================= */
/* BORDER                        */
/* ============================= */
.border{border:1px solid #dee2e6 !important}
.border-0{border:0 !important}
.border-primary{border-color:#0d6efd !important}
.border-success{border-color:#198754 !important}
.border-danger{border-color:#dc3545 !important}

/* ============================= */
/* RADIUS                        */
/* ============================= */
.rounded{border-radius:.375rem}
.rounded-2{border-radius:.5rem}
.rounded-3{border-radius:.75rem}

/* ============================= */
/* FLEX                          */
/* ============================= */
.d-flex{display:flex}
.justify-between{justify-content:space-between}
.align-center{align-items:center}
.gap-2{gap:.5rem}