// =============================================================================
// Authentication Forms (Login / Register)
// =============================================================================

.security {
  max-width: 480px;
  width: 100%;
  background: var(--white);
  border: 1px solid var(--border);
  margin: 2rem auto;
  padding: 2.5rem;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);

  @media (max-width: 991.98px) {
    width: 90%;
    padding: 1.5rem;
  }

  .btn-font {
    @include btn-font;
    width: 100%;
  }

  .form-control {
    margin-bottom: 0.25rem;
  }

  // Inside input-group, remove margin so field and button align
  .input-group .form-control {
    margin-bottom: 0;
  }
  .input-group .btn {
    border-color: var(--border, #dee2e6);
  }
}

.title_form {
  @include title-one;
  font-size: 1.75rem;
  text-align: center;
  margin-bottom: 1.5rem;
}